feat(vscode): agent script graph preview @W-22198050@#44
Draft
marcelinollano wants to merge 7 commits into
Draft
feat(vscode): agent script graph preview @W-22198050@#44marcelinollano wants to merge 7 commits into
marcelinollano wants to merge 7 commits into
Conversation
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
Takes upstream version 2.4.0 changes and bumps to 2.5.0 for the flow preview addition.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
.agentfile and click the preview icon in the editor title to render the topic graph as a navigable node diagram in a side panel.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
@agentscript/graph-uipackage: extracts React Flow nodes, edges, AST-to-graph transforms, layout, tokens, and a<Graph>component fromapps/uiinto a shared library.apps/uinow consumes@agentscript/graph-uivia a thin wrapper (router + drawer integration).@agentscript/vscode-webviewpackage: Vite + Tailwind single-file build that renders<Graph>inside a VS Code webview panel..vscode/launch.json+build-all.mjsfor single-entry F5 development flow.Test Plan
pnpm test)pnpm lint && pnpm typecheck)Checklist