v0.5.0: Agentic proxy for Copilot Chat, clickable timeline, longer bu…

.github/copilot-instructions.md

@@ -0,0 +1,90 @@
+# Agent Flow — Project Guidelines
+
+## Overview
+
+Agent Flow is a VS Code extension that provides real-time visualization of AI agent orchestration (Claude Code, GitHub Copilot). It renders an interactive canvas showing agents, tool calls, subagents, and data flow as they execute.
+
+**Monorepo structure:**
+
+| Directory | Purpose | Language |
+|-----------|---------|----------|
+| `extension/` | VS Code extension host (event ingestion, hook server, webview host) | TypeScript (Node) |
+| `web/` | React frontend (canvas visualization, panels, simulation) | TypeScript (React 19 + Next.js) |
+
+## Build & Test
+
+```bash
+# Extension
+cd extension
+npm run build           # esbuild → dist/extension.js
+npm run watch           # watch mode with source maps
+npm run lint            # tsc --noEmit type-check
+
+# Web / Webview
+cd web
+pnpm install
+pnpm dev                # Next.js dev server (localhost:3000)
+pnpm build:webview      # Vite IIFE bundle → extension/dist/webview/
+
+# Full build (from extension/)
+npm run build:all       # webview + extension together
+npm run package         # .vsix package for distribution
+```
+
+## Architecture
+
+```
+Extension Host
+├── Hook Server      — TCP listener receives Claude Code hook POSTs
+├── Session Watcher  — Tails .jsonl transcript files from Claude Code cache
+├── Copilot Watcher  — Intercepts GitHub Copilot Chat tool invocations
+├── Chat Participant — @agent-flow commands in Copilot Chat
+├── LM Tools         — agentFlow_getSessionStatus for Copilot queries
+└── Webview Provider — Hosts React app (production bundle or dev iframe)
+
+Webview (React)
+├── Canvas           — HTML5 Canvas with d3-force layout, layered rendering
+├── Simulation Hook  — Processes AgentEvents into visual state
+├── VSCode Bridge    — postMessage communication with extension
+└── UI Panels        — Timeline, chat, transcript, file attention, controls
+```
+
+**Data flow:** Event sources → AgentEvent protocol → extension deduplicates → postMessage → webview simulation → canvas render loop.
+
+## Key Conventions
+
+### Extension (`extension/src/`)
+
+- **Logger:** Use `createLogger('ModuleName')` from `logger.ts` — never raw `console.log`.
+- **Disposables:** Push all long-lived resources to `context.subscriptions` for cleanup.
+- **Event deduplication:** Session watcher lifecycle events take priority over hook server. Hook server always passes through tool/message events from subagents.
+- **Hook server responses:** Always return HTTP 200 with empty body — returning JSON causes Claude Code schema parsing issues.
+- **No runtime deps:** Extension uses only Node.js built-ins + VS Code API. Keep it that way.
+- **Constants:** Timeouts and limits live in `constants.ts`. Don't scatter magic numbers.
+
+### Web (`web/`)
+
+- **Canvas rendering:** All visualization drawn on HTML5 Canvas via modules in `components/agent-visualizer/canvas/`. Each `draw-*.ts` handles one layer.
+- **Render cache:** Glow sprites and text measurements are cached in `render-cache.ts`. Use these caches — don't create CanvasGradient per frame.
+- **Simulation state:** Managed in `hooks/use-agent-simulation.ts` with event processors split across `hooks/simulation/handle-*.ts`.
+- **Colors:** All colors defined in `lib/colors.ts` (holographic sci-fi palette). Reference `COLORS.*` — don't hardcode hex values.
+- **Layout constants:** Sizing, timing, animation, and force parameters in `lib/canvas-constants.ts`.
+- **Component pattern:** Glass-morphism UI via `glass-card.tsx`. Panels are toggled mutually-exclusive from the main `index.tsx` orchestrator.
+- **Bridge:** `lib/vscode-bridge.ts` is a singleton. Use the `use-vscode-bridge` hook in components.
+- **Path alias:** `@/*` maps to `web/` root — use it for imports.
+
+### Protocol (`extension/src/protocol.ts`)
+
+Event types flow extension → webview: `agent_spawn`, `agent_complete`, `agent_idle`, `tool_call_start`, `tool_call_end`, `subagent_dispatch`, `subagent_return`, `message`, `context_update`, `model_detected`, `permission_requested`, `error`.
+
+When adding new event types, update both `protocol.ts` (extension) and `agent-types.ts` (web).
+
+## Styling
+
+Dark-only theme. Holographic sci-fi aesthetic with cyan primary (`#66ccff`), amber for tool calls, green for completions, red for errors. All panels use glass-morphism (semi-transparent backgrounds with subtle borders).
+
+## Existing Documentation
+
+- [README.md](../README.md) — Features, getting started, commands, settings, requirements
+- [CONTRIBUTING.md](../CONTRIBUTING.md) — CLA, bug reports, PRs, code of conduct
+- [extension/README.md](../extension/README.md) — Extension marketplace description

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Agent Flow Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/extension"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/extension/dist/**/*.js"
+      ],
+      "preLaunchTask": "npm: build - extension"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,21 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "build",
+      "path": "extension",
+      "label": "npm: build - extension",
+      "group": "build"
+    },
+    {
+      "type": "npm",
+      "script": "watch",
+      "path": "extension",
+      "label": "npm: watch - extension",
+      "isBackground": true,
+      "problemMatcher": "$esbuild-watch",
+      "group": "build"
+    }
+  ]
+}

extension/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.5.0
+
+- Feature: Agentic proxy for GitHub Copilot Chat — type `@agent-flow` followed by any prompt to visualize tool calls, messages, and model reasoning in real-time on the canvas
+- Feature: Clickable timeline panel — click anywhere on the execution timeline to seek/scrub to that point in the session
+- Enhancement: Message bubbles now persist 3x longer (30s hold, 3s fade-out) for easier reading
+- Added `.github/copilot-instructions.md` with project guidelines for AI agent productivity
+- Added `.vscode/launch.json` and `tasks.json` for Extension Development Host debugging
+- Chat participant is now sticky — follow-up messages stay in `@agent-flow` context
+
 ## 0.4.7
 
 - Fix: reset button in review mode no longer breaks the extension

extension/package.json

@@ -2,7 +2,7 @@
   "name": "agent-flow",
   "displayName": "Agent Flow",
   "description": "Real-time visualization of Claude Code agent orchestration",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "publisher": "simon-p",
   "license": "Apache-2.0",
   "repository": {
@@ -11,15 +11,72 @@
   },
   "icon": "media/icon.png",
   "engines": {
-    "vscode": "^1.85.0"
+    "vscode": "^1.93.0"
   },
-  "categories": ["Visualization", "Other"],
-  "keywords": ["llm", "agent", "claude", "ai", "visualization", "orchestration"],
+  "categories": [
+    "Visualization",
+    "Chat",
+    "Other"
+  ],
+  "keywords": [
+    "llm",
+    "agent",
+    "claude",
+    "copilot",
+    "ai",
+    "visualization",
+    "orchestration",
+    "chat"
+  ],
   "activationEvents": [
-    "onWebviewPanel:agentVisualizer"
+    "onWebviewPanel:agentVisualizer",
+    "onChatParticipant:agent-flow.visualizer"
   ],
   "main": "./dist/extension.js",
   "contributes": {
+    "chatParticipants": [
+      {
+        "id": "agent-flow.visualizer",
+        "fullName": "Agent Flow",
+        "name": "agent-flow",
+        "description": "Real-time visualization of AI agent orchestration — see active sessions, tool calls, and agent activity.",
+        "isSticky": true,
+        "commands": [
+          {
+            "name": "status",
+            "description": "Show current agent session status and activity"
+          },
+          {
+            "name": "open",
+            "description": "Open the Agent Flow visualizer panel"
+          },
+          {
+            "name": "sessions",
+            "description": "List all active and recent agent sessions"
+          }
+        ]
+      }
+    ],
+    "languageModelTools": [
+      {
+        "name": "agentFlow_getSessionStatus",
+        "description": "Returns the current status of agent sessions being visualized by Agent Flow, including active sessions, tool calls in progress, and connection state.",
+        "tags": [
+          "agent-flow",
+          "sessions",
+          "status"
+        ],
+        "inputSchema": {
+          "type": "object",
+          "properties": {
+            "sessionId": {
+              "type": "string",
+              "description": "Optional session ID to get status for a specific session. If omitted, returns all active sessions."
+            }
+          }
+        }
+      }
+    ],
     "commands": [
       {
         "command": "agentVisualizer.open",
@@ -40,6 +97,11 @@
         "command": "agentVisualizer.configureHooks",
         "title": "Configure Claude Code Hooks",
         "category": "Agent Flow"
+      },
+      {
+        "command": "agentVisualizer.watchCopilotChat",
+        "title": "Watch Copilot Chat Activity",
+        "category": "Agent Flow"
       }
     ],
     "keybindings": [
@@ -66,12 +128,17 @@
           "type": "boolean",
           "default": false,
           "description": "Automatically open the visualizer when an agent session starts"
+        },
+        "agentVisualizer.watchCopilotChat": {
+          "type": "boolean",
+          "default": true,
+          "description": "Watch GitHub Copilot Chat activity and visualize tool calls and agent events"
         }
       }
     }
   },
   "scripts": {
-    "vscode:prepublish": "cp ../README.md ./README.md && npm run build:all",
+    "vscode:prepublish": "node -e \"require('fs').copyFileSync('../README.md','./README.md')\" && npm run build:all",
     "build": "node esbuild.js",
     "build:webview": "cd ../web && pnpm run build:webview",
     "build:all": "npm run build:webview && npm run build",
@@ -81,8 +148,8 @@
     "vscode:uninstall": "node scripts/uninstall.js"
   },
   "devDependencies": {
-    "@types/vscode": "^1.85.0",
     "@types/node": "^20.0.0",
+    "@types/vscode": "^1.93.0",
     "esbuild": "^0.20.0",
     "typescript": "^5.3.0"
   }