= {
+ rss: "RSS",
+ atom: "Atom",
+ json: "JSON",
+};
+
+const NativeFeedChip = ({ feed }: { feed: NativeFeed }) => {
+ const label = NATIVE_LABELS[feed.type];
+ return (
+
+ );
+};
+
+export const NativeFeeds = ({ feeds }: { feeds: NativeFeed[] }) => {
+ if (feeds.length === 0) return null;
+ return (
+
+ );
+};
+```
+
+- [ ] **Step 4: Add `NativeFeedPill` to `src/routes/admin.tsx`**
+
+After `ConfirmationPill` (after its closing `);`, ~line 230) add:
+
+```tsx
+const NativeFeedPill = ({ feedId }: { feedId: string }) => (
+
+ Native feed available
+
+);
+```
+
+Render it next to the confirmation pill (~line 639-641), so the block reads:
+
+```tsx
+{
+ feed.pendingConfirmation && ;
+}
+{
+ feed.hasNativeFeed && ;
+}
+```
+
+- [ ] **Step 5: Run the test to verify it passes**
+
+Run: `npx vitest run src/routes/admin.test.ts -t "pill-native"`
+Expected: PASS. (The `NativeFeeds` component is now exported and used by Task 8; nothing here renders it yet, which is fine — this task ends green.)
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/routes/admin/ui.tsx src/routes/admin.tsx src/routes/admin.test.ts
+git commit -m "feat(admin): native feed chips + dashboard pill"
+```
+
+---
+
+### Task 8: Feed detail page — render group + dismissable banner + route + client
+
+**Files:**
+
+- Modify: `src/routes/admin/emails.tsx` (detail handler ~line 137; render after `FeedFormats` ~line 166; banner after confirmation banner ~line 186; dismiss route after line 733; import `NativeFeeds` + `unionNativeFeeds`)
+- Modify: `src/scripts/client/emails-page.ts` (append a dismiss handler after line 636)
+- Test: `src/routes/admin.test.ts` (the detail test from Task 7 + a dismiss-route test)
+
+- [ ] **Step 1: Add the detail-group test and the dismiss-route test**
+
+Append both to `src/routes/admin.test.ts` (mirror the confirmation detail/dismiss tests ~line 1137 / ~line 1234):
+
+```ts
+it("feed detail shows a native-feeds group when a native feed was detected", async () => {
+ const env = createMockEnv() as unknown as Env;
+ const feedId = FeedId.generate();
+ const mailboxId = MailboxId.unchecked("native.detail.07");
+ const repo = FeedRepository.from(env);
+ const feed = Feed.create(
+ feedId,
+ { title: "N", language: "en", allowedSenders: [], blockedSenders: [] },
+ { mailboxId },
+ );
+ feed.ingest(
+ { key: "k1", subject: "s", receivedAt: 1, size: 10 },
+ {
+ maxBytes: 1e9,
+ nativeFeeds: {
+ senderKey: "a@x.com",
+ feeds: [{ url: "https://blog.example.com/feed.xml", type: "rss" }],
+ },
+ },
+ );
+ await repo.save(feed);
+
+ const res = await request(`/admin/feeds/${feedId.value}/emails`, {}, env);
+ const body = await res.text();
+ expect(body).toContain("native-feeds");
+ expect(body).toContain("https://blog.example.com/feed.xml");
+});
+
+it("native-feed dismiss route clears the flag", async () => {
+ const env = createMockEnv() as unknown as Env;
+ const feedId = FeedId.generate();
+ const mailboxId = MailboxId.unchecked("native.dismiss.09");
+ const repo = FeedRepository.from(env);
+ const feed = Feed.create(
+ feedId,
+ { title: "N", language: "en", allowedSenders: [], blockedSenders: [] },
+ { mailboxId },
+ );
+ feed.ingest(
+ { key: "k1", subject: "s", receivedAt: 1, size: 10 },
+ {
+ maxBytes: 1e9,
+ nativeFeeds: {
+ senderKey: "a@x.com",
+ feeds: [{ url: "https://x.com/rss", type: "rss" }],
+ },
+ },
+ );
+ await repo.save(feed);
+
+ const res = await request(
+ `/admin/feeds/${feedId.value}/native-feed/dismiss`,
+ { method: "POST", headers: { "Content-Type": "application/json" } },
+ env,
+ );
+ expect(res.status).toBe(200);
+ const reloaded = await repo.load(feedId);
+ expect(reloaded!.hasNativeFeed()).toBe(false);
+ expect(reloaded!.nativeFeeds()).toHaveLength(1); // URLs preserved
+});
+```
+
+- [ ] **Step 2: Run the tests to verify they fail**
+
+Run: `npx vitest run src/routes/admin.test.ts -t "native"`
+Expected: FAIL — the detail `native-feeds` group is absent and the dismiss route 404s.
+
+- [ ] **Step 3: Render the group + banner in `src/routes/admin/emails.tsx`**
+
+(a) Extend the import from `./ui` (line ~9) to include `NativeFeeds`, and add the domain import:
+
+```ts
+import { unionNativeFeeds } from "../../domain/native-feed";
+```
+
+(b) In the detail handler, after `const feedMetadata = await repo.getMetadata(id);` (line 137) and the null guard (line 139), compute:
+
+```ts
+const nativeFeeds = unionNativeFeeds(feedMetadata.nativeFeeds);
+```
+
+(c) Render the group right after `` (line 166):
+
+```tsx
+
+
+```
+
+(d) Add the dismissable banner right after the confirmation-banner block (after line 186):
+
+```tsx
+{
+ nativeFeeds.length > 0 && !feedMetadata.nativeFeedDismissed && (
+
+
+ This newsletter publishes its own feed — subscribe to it directly from
+ "Native feeds" above.
+
+
+
+
+