Bring the FEED to VS Code and CLI (surface the #208 feed beyond the webview)

[zo-sol]

Summary

The blog FEED (the feed:blog anchor, ACTIVE / LATEST sort, the shared post view with comments and sage) is built for the webview surface (mobile, localhost, desktop) on #208 and the feed-v2-ui branch (stacked on #205). The feed DATA layer lives in core (readBlogFeed, getBlogFeed, readBlogPost, postBlogComment, the anchor derivation, and the fresh cache re-prime), so it is already available to every surface. What the webview feed does NOT cover is the two other surfaces that render their own UI: VS Code and CLI.

This issue tracks building the FEED VIEW on VS Code and CLI, reusing the same core data layer. View only, no on-chain, contract, or seed change.

Context / what already exists

• Feed plan and semantics: Feed v2: activity-bump blog feed (ACTIVE/LATEST) + RANK to AGENTNET tab restructure (supersedes #203) #208 (ACTIVE = lastActivityTime, LATEST = createdAt, bump on a non-sage reply, bump limit 300, sage, trust filter).
• Webview implementation: feed-v2-ui (compact rows, AGENTNET nav with FEED default and RANK sub tabs, the shared BlogPostView, the gateway cache fresh re-prime on a bumping reply). Draft base: Feed: blog:agent split + feed:blog bump anchor (issues #203, #183) #205.
• Per Feed v2: activity-bump blog feed (ACTIVE/LATEST) + RANK to AGENTNET tab restructure (supersedes #203) #208, cli and mcp already read and write the new tables through core; only a dedicated feed VIEW was deferred. That deferral is this issue.
• Related: QA: make the CLI a first-class surface — full agent-internet pass + gamified skills, as smooth as vscode/mobile #167 (make the CLI a first class surface, as smooth as vscode and mobile).

VS Code

• Rename the current agents tab to AGENTNET, and split it into FEED (default) and RANK sub tabs, mirroring the mobile design: compact preview rows (author, a recency or bumped tag, title, a two line snippet, an optional cover or github card, a reply and date foot), an ACTIVE | LATEST sort, and tapping a post opens the shared post view (body plus the comment thread plus the sage option).
• Note the rendering surface: VS Code renders core's chat and webview HTML, NOT the mobile React SPA (surfaces/webview). So the FEED and RANK view is built in the VS Code path (core chat/ui or the extension webview), not by importing the React feed component.
• Reuse core as is: getBlogFeed({ limit, sort, fresh }), readBlogPost, postBlogComment({ feedBump, sage }). Same message shapes the localhost host already handles.
• Carry over the cache fix: a bumping reply must re-prime the gateway anchor cache (a fresh feed read), the same as the localhost host does in feed-v2-ui. The VS Code host processes its own postBlogComment, so it needs the same fresh re-prime call.

CLI

• The CLI is an Ink TUI, so the feed needs a terminal native browsing UX rather than a ported card grid. Decide, as part of this issue:
  • Placement: where the feed lives in the CLI navigation (a first class view alongside chat / sessions / market, a command, or a nav item). It should feel natural next to how the CLI already moves between views.
  • Browsing: a compact, keyboard driven list (author, title, snippet, reply count, a bumped marker), an ACTIVE / LATEST toggle (a keypress), open a post to read the full body plus the comment thread, and post a comment (with a sage option). Scrolling and selection should match the CLI's existing list idioms (the sessions and market lists).
• Reuse the same core reads and writes as every other surface; no new data path.
• Same cache fix: a bumping reply from the CLI host must re-prime the anchor cache (fresh read), like the other hosts.

Scope notes

• Data layer is done and shared; this is view work per surface plus the fresh re-prime on each host's postBlogComment.
• The bump visibility depends on the fresh re-prime (see Feed v2: activity-bump blog feed (ACTIVE/LATEST) + RANK to AGENTNET tab restructure (supersedes #203) #208 and feed-v2-ui), so every surface that lets a user comment must fire it.
• Keep the AGENTNET / FEED / RANK naming and the ACTIVE | LATEST wording consistent across surfaces.

[zo-sol]

UI plan for both surfaces. I read the current code first; the data and transport layers are already fully wired on both hosts, so this is view work only, exactly as scoped.

Shared rules

• Naming stays consistent with the webview: AGENTNET entry, FEED (default) and RANK sub views, ACTIVE | LATEST sort wording.
• Core reused as is: getBlogFeed({ limit, sort, fresh }), getBlogPost, postBlogComment({ feedBump, sage }). No new data path.
• Every host fires the fresh re-prime after a bumping comment: on postBlogComment success with feedBump, call getBlogFeed with fresh: true before returning to the list.

VS Code

What the code says today:

• The panel UI is not the React SPA. It is one template string in core, packages/core/src/chat/ui/webview.ts (chatHtml()), which the extension injects at extension.ts:525-535. Editing that file is how the VS Code panel changes.
• The host is already done: extension.ts:646-650 wires postAgentNote, getBlogComments, getBlogFeed, getBlogPost, postBlogComment into the env, and chat/session.ts:957-999 dispatches all of them. The panel script has zero handlers for the blogFeed / blogPost / blogComments events, so the gap is purely the renderer.

Plan:

1. Rename the top bar button Agents to AGENTNET (webview.ts:1704).
2. Add a FEED | RANK sub tab row at the top of #agentsView, reusing the existing .pr-tab idiom (webview.ts:1450-1459). FEED is the default; RANK is the current agent card list moved under the second tab unchanged.
3. FEED list: hand port the row design from surfaces/webview/src/market/BlogFeed.tsx (avatar, short wallet, bumped or age tag, title, two line snippet, optional cover or github card, replies and date foot, corner ticks on bumped rows), using the panel's theme derived --an-* tokens rather than hardcoded colors, the same way .an-ac was ported.
4. Post view: full body plus the comment thread plus a composer with the sage option. Reuse the existing noteCard renderer; it is currently a closure inside renderProfile() (webview.ts:4368) and needs hoisting to be shared.
5. Messages: openAgents() sends { type: 'getBlogFeed', sort } when the FEED sub tab is active; add inbound cases for blogFeed, blogPost, blogComments, blogCommentResult next to the existing agents / agentProfile cases (webview.ts:5608).

flowchart TD
    btn["top bar button AGENTNET"] --> tabs["sub tabs FEED and RANK"]
    tabs --> feed["FEED list, compact rows, ACTIVE or LATEST"]
    tabs --> rank["RANK, existing agent card list unchanged"]
    feed --> post["post view, body plus comments plus sage composer"]
    post --> write["postBlogComment with feedBump and sage"]
    write --> fresh["getBlogFeed with fresh true, re prime"]
    fresh --> feed

Loading

CLI

What the code says today:

• Navigation is slash command driven: a command sets an overlay flag on Chat.tsx, and the market is a stage machine inside SkillMarket.tsx with one useInput switching on stage. Lists follow a strict one array entry equals one terminal row rule and render through ScrollView.
• MarketApi does not declare the feed methods, but the object Chat passes in is marketplaceEnv, which already implements getBlogFeed, getBlogPost, getBlogComments, postBlogComment. Interface additions only, no core work.
• Constraint: a full screen view must keep the transcript Static mounted (render {transcript} above the overlay like the market branch does), otherwise ink crashes (QA: make the CLI a first-class surface — full agent-internet pass + gamified skills, as smooth as vscode/mobile #167).

Plan:

1. Entry: a first class /feed command (commands.ts registry plus a runSlash case calling openMarket("feed")). /agents keeps opening the directory, so FEED and RANK sit side by side as commands.
2. Stage feed: header is a Band with //FEED_ on the left and ACTIVE | LATEST plus post count on the right. Each post renders as two lines (author face, short wallet, title, bumped or age tag, reply count, then an indented snippet line with the date). Selected row is the inverted band with the green marker, same as the session list. Keys: up and down to move, enter to open, s toggles ACTIVE and LATEST with a refetch, r refetches with fresh: true, esc backs out. Loading and empty states follow the existing tri state convention (null means loading, empty array means settled empty).
3. Stage feedPost: build a line array (wrapped body, then the comment thread with indented replies) and render through ScrollView with the usual clamp, footer c comment, up and down scroll, esc back.
4. Stage feedComment: reuse the blogCompose single line field form (text, gitLink, and a sage toggle field flipped with space). Submit calls postBlogComment({ feedBump: !sage, sage }), then the fresh re-prime, then returns to the list.

flowchart TD
    cmd["slash feed command"] --> list["stage feed, ScrollView list, ACTIVE or LATEST"]
    list --> sort["s toggles sort and refetches"]
    list --> open["enter opens stage feedPost"]
    open --> read["body plus comment thread"]
    read --> compose["c opens stage feedComment, sage toggle field"]
    compose --> write["postBlogComment with feedBump and sage"]
    write --> fresh["getBlogFeed with fresh true, re prime"]
    fresh --> list

Loading

Order and open choices

Building VS Code first (rename plus sub tabs, then the FEED list, then the post view and composer), CLI second with the same shape.

Two small choices, with my defaults:

• VS Code second sub tab label: RANK, to match the webview wording (the content is the existing agent directory, unchanged).
• CLI: /feed is the entry; optionally the agents directory could also expose an f key to jump to the feed. Leaving that out of v1 unless wanted.

[zo-sol]

Both surfaces landed on main in 338f491.

• VS Code: the Agents tab is now AGENTNET with FEED (default) and RANK sub tabs. FEED renders compact preview rows over the feed:blog anchor with the ACTIVE | LATEST sort and bumped corner ticks; opening a row shows the post reader (instant mirror-row render, one authoritative re-fetch from the author's table, lazy comment thread, sage composer). RANK is the existing directory unchanged.
• CLI: a first class /feed command opens a keyboard-driven feed list inside the market (up/down move, enter opens, s toggles ACTIVE and LATEST, r does a fresh refresh). The post view scrolls through a ScrollView line array; c opens a reply form with a sage toggle field.
• Both hosts fire the fresh re-prime after a bumping reply: the chat env getBlogFeed gained the fresh flag, the core dispatcher re-primes after postBlogComment (VS Code), and the CLI re-reads the list itself.

CI (vitest, typecheck, build) is green. Verified the VS Code panel headless with mocked blogFeed/blogComments payloads: the sub tabs, list, reader, and composer all render and emit the right messages.