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

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/packages/vscode"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/packages/vscode/dist/**/*.js"
+      ],
+      "preLaunchTask": "build: vscode extension"
+    },
+    {
+      "name": "Run Extension (no build)",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/packages/vscode"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/packages/vscode/dist/**/*.js"
+      ]
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,24 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "build: vscode extension",
+      "type": "shell",
+      "command": "node",
+      "args": ["packages/vscode/scripts/build-all.mjs"],
+      "options": {
+        "cwd": "${workspaceFolder}"
+      },
+      "problemMatcher": ["$tsc"],
+      "presentation": {
+        "reveal": "always",
+        "panel": "dedicated",
+        "clear": true
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

apps/ui/package.json

@@ -19,6 +19,7 @@
     "@agentscript/agentforce-dialect": "workspace:*",
     "@agentscript/agentscript-dialect": "workspace:*",
     "@agentscript/compiler": "workspace:*",
+    "@agentscript/graph-ui": "workspace:*",
     "@agentscript/language": "workspace:*",
     "@agentscript/lsp": "workspace:*",
     "@agentscript/lsp-browser": "workspace:*",

apps/ui/src/components/explorer/TreeView.tsx

@@ -7,7 +7,7 @@
 
 import { ChevronRight, Folder, FileCode2 } from 'lucide-react';
 import * as React from 'react';
-import { getBlockTypeConfig } from '~/lib/block-type-config';
+import { getBlockTypeConfig } from '@agentscript/graph-ui';
 import { cn } from '~/lib/utils';
 import {
   Empty,

apps/ui/src/components/graph/ActionDrawerContent.tsx

@@ -12,7 +12,7 @@
  */
 
 import { useAppStore } from '~/store';
-import type { ActionDrawerData } from '~/lib/ast-to-graph';
+import type { ActionDrawerData } from '@agentscript/graph-ui';
 import { isNamedMap, type Statement } from '@agentscript/language';
 import type { AgentScriptAST } from '~/lib/parser';
 import { Play, Settings2, Shield, ArrowRight, Equal } from 'lucide-react';

apps/ui/src/components/graph/ConditionalBuilderView.tsx

@@ -13,8 +13,10 @@
 import { useMemo } from 'react';
 import type { Statement } from '@agentscript/language';
 import type { AgentScriptAST } from '~/lib/parser';
-import { findTopicBlock } from '~/lib/ast-utils';
-import type { ConditionalEdgeData } from '~/lib/ast-to-graph';
+import {
+  findTopicBlock,
+  type ConditionalEdgeData,
+} from '@agentscript/graph-ui';
 import { useAppStore } from '~/store';
 import { IfStatementEditor } from '~/components/builder/statements/IfStatementEditor';
 

apps/ui/src/components/graph/ConditionalCodeView.tsx

@@ -13,8 +13,10 @@
 import { useMemo } from 'react';
 import type { Statement } from '@agentscript/language';
 import type { AgentScriptAST } from '~/lib/parser';
-import { findTopicBlock } from '~/lib/ast-utils';
-import type { ConditionalEdgeData } from '~/lib/ast-to-graph';
+import {
+  findTopicBlock,
+  type ConditionalEdgeData,
+} from '@agentscript/graph-ui';
 import { useAppStore } from '~/store';
 
 interface ConditionalCodeViewProps {

apps/ui/src/components/graph/ConditionalDrawerContent.tsx

@@ -12,7 +12,7 @@
  */
 
 import { useState } from 'react';
-import type { ConditionalEdgeData } from '~/lib/ast-to-graph';
+import type { ConditionalEdgeData } from '@agentscript/graph-ui';
 import { ConditionalBuilderView } from './ConditionalBuilderView';
 import { ConditionalCodeView } from './ConditionalCodeView';
 import { cn } from '~/lib/utils';

apps/ui/src/components/graph/NodeDrawerContent.tsx

@@ -28,7 +28,7 @@
   Sparkles,
   Zap,
 } from 'lucide-react';
-import type { NodeDrawerData, PhaseType } from '~/lib/ast-to-graph';
+import type { NodeDrawerData, PhaseType } from '@agentscript/graph-ui';
 import { useAppStore } from '~/store';
 
 interface NodeDrawerContentProps {
@@ -277,7 +277,7 @@
 }
 
 /** Compute drawer title for a node. */
 export function nodeDrawerTitle(data: NodeDrawerData): string {
   switch (data.nodeType) {
     case 'template':
       return 'Template';
@@ -291,7 +291,7 @@
 }
 
 /** Compute drawer subtitle for a node. */
 export function nodeDrawerSubtitle(data: NodeDrawerData): string {
   switch (data.nodeType) {
     case 'phase':
     case 'phase-label':

apps/ui/src/index.css

@@ -10,6 +10,8 @@
 @plugin '@tailwindcss/typography';
 @plugin 'tailwind-scrollbar';
 
+@source '../../../packages/graph-ui/src/**/*.{ts,tsx}';
+
 /* Syntax highlighting for diff view */
 .syntax-keyword {
   color: #8250df;

apps/ui/src/pages/Builder.tsx

@@ -23,7 +23,7 @@ import {
 } from '~/components/explorer/astToTreeData';
 import { AddBlockMenu } from '~/components/builder/AddBlockMenu';
 import { ErrorBoundary } from '~/components/shared/ErrorBoundary';
-import { DiagnosticHoverCard } from '~/components/graph/nodes/DiagnosticHoverCard';
+import { DiagnosticHoverCard } from '@agentscript/graph-ui';
 import { formatFieldName } from '~/lib/schema-introspection';
 
 /**