Skip to content

feat(vscode): agent script graph preview @W-22198050@#44

Draft
marcelinollano wants to merge 7 commits into
salesforce:mainfrom
marcelinollano:marcelinollano/W-22198050-agent-flow-visualizer
Draft

feat(vscode): agent script graph preview @W-22198050@#44
marcelinollano wants to merge 7 commits into
salesforce:mainfrom
marcelinollano:marcelinollano/W-22198050-agent-flow-visualizer

Conversation

@marcelinollano
Copy link
Copy Markdown
Contributor

@marcelinollano marcelinollano commented May 22, 2026

Warning

This feature is experimental. Up to the team to determine what to do with it. Kept here for future reference.

What

Adds a live agent flow preview to the VS Code extension. Open any .agent file and click the preview icon in the editor title to render the topic graph as a navigable node diagram in a side panel.

Screenshot2026-05-22 at 13 00 02@2x

Why

Product and engineering need a quick way to visualize agent structure without leaving VS Code. By reusing the same code and vendor into a library the graph-ui components we can use the same code in two places for free.

How

  • New @agentscript/graph-ui package: extracts React Flow nodes, edges, AST-to-graph transforms, layout, tokens, and a <Graph> component from apps/ui into a shared library.
  • apps/ui now consumes @agentscript/graph-ui via a thin wrapper (router + drawer integration).
  • New @agentscript/vscode-webview package: Vite + Tailwind single-file build that renders <Graph> inside a VS Code webview panel.
  • Extension registers three commands (preview, preview-to-side, show-source) with an editor-title icon, live-updates on document changes (250ms debounce), and panel dedup/restore.
  • Click any node to jump to its source range in the editor.
  • Dark/light theme detection via VS Code body class.
  • .vscode/launch.json + build-all.mjs for single-entry F5 development flow.

Test Plan

  • Existing tests pass (pnpm test)
  • New/updated tests cover the change
  • Linting and type checks pass (pnpm lint && pnpm typecheck)

Checklist

  • My code follows the project's coding style
  • I have reviewed my own diff
  • I have added/updated documentation as needed
  • This change does not introduce new warnings
  • Check that preview supports multiple theme colors
  • Navigate in and out of a node
  • Select and delete code to see the graph update

Extracts AgentScript graph rendering from apps/ui into a reusable package
so both apps/ui and the VS Code webview can render the same React Flow
graph without duplicating nodes, edges, layout, and AST transforms.

- AST to graph transforms (overview + topic detail)
- Dagre-based hierarchical layout
- Path finding for selection highlighting
- 13 node types (start, topic, action, conditional, phase, llm, etc.)
- 3 edge types (animated, conditional, loop-back)
- Block type / semantic color tokens
- GraphContext decouples host state (highlighting, action clicks) from
  the shared components, replacing the prior zustand store dependency
Replaces the local graph rendering (nodes, edges, AST transforms,
layout, tokens) with imports from the shared package. The Graph page
becomes a thin wrapper that injects host-specific concerns (router,
drawer, zustand store) via props and context.

- Graph.tsx passes topicId/theme/callbacks to <Graph> from graph-ui
- Drawer stays in apps/ui, opened from onNodeClick / onConditionalClick
- Explorer, Builder, drawer views import shared types from graph-ui
- Tailwind @source directive picks up node classes from the package
New workspace package @agentscript/vscode-webview that renders the
shared <Graph> from @agentscript/graph-ui inside a VS Code webview.
Vite + Tailwind + vite-plugin-singlefile produces a self-contained
flow.html that the extension loads.

- Parses the document source with @agentscript/agentforce on every
  update and feeds the AST into <Graph>
- Overview/detail navigation handled via local state and a floating
  back button (no router dependency)
- Detects vscode-dark / vscode-light body class for theme
- Added to pnpm-workspace.yaml via packages/vscode/webview
Adds three commands modeled after Markdown Preview:

- agentscript.flow.showPreview — open inline
- agentscript.flow.showPreviewToSide — open to side (editor-title icon)
- agentscript.flow.showSource — jump back to the .agent file

Panel opens a WebviewPanel that loads the bundled flow.html from
@agentscript/vscode-webview. Live-updates on document changes with
250ms debounce. Panels dedupe per-URI and restore across reloads via
WebviewPanelSerializer.

Build wiring:

- esbuild.mjs runs the webview vite build when dist is missing and
  copies flow.html into dist/webview/
- @agentscript/vscode-webview added as a workspace devDep so turbo
  orders it before the extension build
- .vscode/launch.json + tasks.json + scripts/build-all.mjs provide
  a single-entry F5 flow that rebuilds all workspace deps first
Attaches CST-derived source ranges to every graph node that maps to a
parsed block, then posts a goto-source message on single-click so the
VS Code webview can select the underlying range in the editor.

- Adds SourceRange type and getSourceRange helper in graph-ui
- Attaches sourceRange to topic, start_agent, topic header, phase
  containers, reasoning loop / build-instructions / LLM node, and every
  statement-backed detail node (action, run, set, template, conditional,
  transition)
- LLM action pills carry parallel actionRanges; onActionClick now
  includes the range so pill clicks jump to the reasoning action block
- previewFlow.ts handles goto-source by opening the document with the
  selected range
@marcelinollano marcelinollano changed the title feat(vscode): agent flow preview (W-22198050) feat(vscode): agent flow preview @W-22198050@ May 22, 2026
@marcelinollano marcelinollano changed the title feat(vscode): agent flow preview @W-22198050@ feat(vscode): agent script graph preview @W-22198050@ May 22, 2026
Takes upstream version 2.4.0 changes and bumps to 2.5.0 for the flow
preview addition.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant