feat(mesh-plugin-task-runner): Agent Status UI with real-time monitoring

[vibegui]

Summary

• Add Agent Status component with Current/History tabs to track running agents
• Show running agents with tool calls, assistant messages, and duration
• Separate In Progress and Open task sections for clarity
• Make tasks/skills container scrollable for better UX
• Read sessions from .beads/sessions.json via local-fs MCP

Changes

• task-board.tsx: New AgentStatus, AgentSessionCard components with tabs
• use-tasks.ts: New hooks for reading agent sessions from filesystem
• query-keys.ts: Added agentSessions key

Test Plan

1. Connect to a local-fs MCP with a workspace
2. Create a task and click Execute
3. Verify Agent Status shows the running agent with tool calls
4. Check History tab shows completed sessions

---

Summary by cubic

Adds the Task Runner plugin with an Agent Status UI and real-time monitoring, and introduces a Site Builder plugin for site detection, dev server control, pages, and inline live preview. Connects Sites to Tasks via routing and search params, adds chat-driven task planning, quality gate baseline verification, stop controls, and fixes stale MCP connections with automatic retry.

• New Features

  • Task Runner: Task Board + skills and loop controls; Agent Status (Current/History) reading .beads/sessions.json; chat planning with “Approve & Execute”; quality gates with baseline verification and gating; stop running agents from session cards; guard to prevent double spawning.
  • Site Builder: Detect Deco sites via deno.json imports; dev server check/start via DENO_TASK; pages from /.decofile; inline PreviewFrame with device modes; actions navigate to Tasks with site context (skill/template/edit) via search params; header and empty state; plugin registered.
  • App integration: Per-plugin parent routes; chat events to open panel and send messages; tool list refresh; router hooks re-exported for plugins; task hooks use OBJECT_STORAGE_BINDING read/write and drop BEADS_* deps; task runner binding types exported.

• Dependencies

  • Add @playwright/test with E2E setup (auth storage state, config, scripts).
  • Add plugin deps: @tanstack/react-query, @tanstack/react-router, sonner, zod.

^{Written for commit 63815dd. Summary will update on new commits.}

[github-actions]

🧪 Benchmark

Should we run the Virtual MCP strategy benchmark for this PR?

React with 👍 to run the benchmark.

Reaction	Action
👍	Run quick benchmark (10 & 128 tools)

Benchmark will run on the next push after you react.

[github-actions]

Release Options

Should a new version be published when this PR is merged?

React with an emoji to vote on the release type:

Reaction	Type	Next Version
👍	Prerelease	2.67.1-alpha.1
🎉	Patch	2.67.1
❤️	Minor	2.68.0
🚀	Major	3.0.0

Current version: 2.67.0

Deployment

• Deploy to production (triggers ArgoCD sync after Docker image is published)

[cubic-dev-ai]

3 issues found across 35 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/mesh/src/web/components/chat/context.tsx">

<violation number="1" location="apps/mesh/src/web/components/chat/context.tsx:814">
P2: The event handler calls sendMessage immediately after setVirtualMcpId, so the message metadata still uses the previous selectedVirtualMcp. This means messages dispatched with virtualMcpId can be sent under the wrong agent. Consider deferring sendMessage until the selection state updates or passing the desired MCP id directly into sendMessage for this path.</violation>
</file>

<file name="apps/mesh/e2e/connections.spec.ts">

<violation number="1" location="apps/mesh/e2e/connections.spec.ts:70">
P2: `page.screenshot` will throw if the `e2e/.auth` folder doesn’t exist. Create the directory (e.g., `fs.mkdir(..., { recursive: true })`) or use Playwright’s `testInfo.outputPath()` to ensure the path exists before writing the screenshot.</violation>
</file>

<file name="apps/mesh/e2e/global.setup.ts">

<violation number="1" location="apps/mesh/e2e/global.setup.ts:92">
P2: Create the `.auth` directory before calling `storageState`, otherwise the setup can fail with ENOENT when the folder doesn’t exist.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: The event handler calls sendMessage immediately after setVirtualMcpId, so the message metadata still uses the previous selectedVirtualMcp. This means messages dispatched with virtualMcpId can be sent under the wrong agent. Consider deferring sendMessage until the selection state updates or passing the desired MCP id directly into sendMessage for this path.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/mesh/src/web/components/chat/context.tsx, line 814:

<comment>The event handler calls sendMessage immediately after setVirtualMcpId, so the message metadata still uses the previous selectedVirtualMcp. This means messages dispatched with virtualMcpId can be sent under the wrong agent. Consider deferring sendMessage until the selection state updates or passing the desired MCP id directly into sendMessage for this path.</comment>

<file context>
@@ -747,7 +796,44 @@ export function ChatProvider({ children }: PropsWithChildren) {
+      const { text, virtualMcpId } = event.detail;
+
+      // Optionally select the virtual MCP before sending
+      if (virtualMcpId) {
+        setVirtualMcpId(virtualMcpId);
+      }
</file context>

[cubic-dev-ai]

P2: page.screenshot will throw if the e2e/.auth folder doesn’t exist. Create the directory (e.g., fs.mkdir(..., { recursive: true })) or use Playwright’s testInfo.outputPath() to ensure the path exists before writing the screenshot.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/mesh/e2e/connections.spec.ts, line 70:

<comment>`page.screenshot` will throw if the `e2e/.auth` folder doesn’t exist. Create the directory (e.g., `fs.mkdir(..., { recursive: true })`) or use Playwright’s `testInfo.outputPath()` to ensure the path exists before writing the screenshot.</comment>

<file context>
@@ -0,0 +1,76 @@
+    expect(page.url()).not.toContain("/login");
+
+    // Take a screenshot for debugging
+    await page.screenshot({ path: "e2e/.auth/org-home.png" });
+
+    // The home page should show something - could be dashboard, connections, etc.
</file context>

[cubic-dev-ai]

P2: Create the .auth directory before calling storageState, otherwise the setup can fail with ENOENT when the folder doesn’t exist.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/mesh/e2e/global.setup.ts, line 92:

<comment>Create the `.auth` directory before calling `storageState`, otherwise the setup can fail with ENOENT when the folder doesn’t exist.</comment>

<file context>
@@ -0,0 +1,95 @@
+  );
+
+  // Save the storage state (cookies + localStorage)
+  await page.context().storageState({ path: authFile });
+
+  console.log(`Auth state saved to ${authFile}`);
</file context>

[cubic-dev-ai]

1 issue found across 2 files (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/mesh-plugin-task-runner/components/task-board.tsx">

<violation number="1" location="packages/mesh-plugin-task-runner/components/task-board.tsx:292">
P2: `isStopping` is set to true when Stop is clicked, but it is never reset. If the agent doesn’t stop or the request fails, the button stays disabled and the UI is stuck on “Stopping…”. Consider resetting `isStopping` when the session leaves the running state or after a timeout.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: isStopping is set to true when Stop is clicked, but it is never reset. If the agent doesn’t stop or the request fails, the button stays disabled and the UI is stuck on “Stopping…”. Consider resetting isStopping when the session leaves the running state or after a timeout.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/mesh-plugin-task-runner/components/task-board.tsx, line 292:

<comment>`isStopping` is set to true when Stop is clicked, but it is never reset. If the agent doesn’t stop or the request fails, the button stays disabled and the UI is stuck on “Stopping…”. Consider resetting `isStopping` when the session leaves the running state or after a timeout.</comment>

<file context>
@@ -281,10 +280,22 @@ function formatRelativeTime(timestamp: string): string {
+    if (isStopping) return;
+    if (!confirm(`Stop agent working on "${session.taskTitle}"?`)) return;
+
+    setIsStopping(true);
+    // Send a message to the Task Runner Agent to stop the session
+    const stopMessage = `Please stop agent session ${sessionId} immediately. Call AGENT_STOP with sessionId="${sessionId}".`;
</file context>

[cubic-dev-ai]

3 issues found across 30 files (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/mesh-plugin-site-builder/components/preview-frame.tsx">

<violation number="1" location="packages/mesh-plugin-site-builder/components/preview-frame.tsx:40">
P2: Opening a new tab without `noopener`/`noreferrer` exposes the app to tabnabbing via `window.opener`. Add the noopener/noreferrer feature flags when opening external URLs.</violation>
</file>

<file name=".planning/codebase/STRUCTURE.md">

<violation number="1" location=".planning/codebase/STRUCTURE.md:8">
P3: Avoid hard-coded developer-specific absolute paths in docs; use a generic or repo-relative root path so the structure applies to all environments.</violation>
</file>

<file name="packages/mesh-plugin-site-builder/components/site-list.tsx">

<violation number="1" location="packages/mesh-plugin-site-builder/components/site-list.tsx:202">
P2: Hardcoding "localhost:8000" will misreport the actual dev server URL when it runs on a different host or port. Render the dynamic serverUrl instead.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Opening a new tab without noopener/noreferrer exposes the app to tabnabbing via window.opener. Add the noopener/noreferrer feature flags when opening external URLs.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/mesh-plugin-site-builder/components/preview-frame.tsx, line 40:

<comment>Opening a new tab without `noopener`/`noreferrer` exposes the app to tabnabbing via `window.opener`. Add the noopener/noreferrer feature flags when opening external URLs.</comment>

<file context>
@@ -0,0 +1,148 @@
+  };
+
+  const handleOpenExternal = () => {
+    window.open(url, "_blank");
+  };
+
</file context>

[cubic-dev-ai]

P2: Hardcoding "localhost:8000" will misreport the actual dev server URL when it runs on a different host or port. Render the dynamic serverUrl instead.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/mesh-plugin-site-builder/components/site-list.tsx, line 202:

<comment>Hardcoding "localhost:8000" will misreport the actual dev server URL when it runs on a different host or port. Render the dynamic serverUrl instead.</comment>

<file context>
@@ -0,0 +1,314 @@
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+              <span className="text-sm font-medium text-green-700 dark:text-green-400">
+                Running on localhost:8000
+              </span>
+            </div>
</file context>

[cubic-dev-ai]

P3: Avoid hard-coded developer-specific absolute paths in docs; use a generic or repo-relative root path so the structure applies to all environments.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At .planning/codebase/STRUCTURE.md, line 8:

<comment>Avoid hard-coded developer-specific absolute paths in docs; use a generic or repo-relative root path so the structure applies to all environments.</comment>

<file context>
@@ -0,0 +1,239 @@
+## Directory Layout
+
+```
+/Users/guilherme/Projects/mesh/
+├── apps/                          # Applications
+│   ├── api/                        # REST API app (deprecated, functionality moved to mesh)
</file context>

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/mesh-plugin-task-runner/components/task-board.tsx">

<violation number="1" location="packages/mesh-plugin-task-runner/components/task-board.tsx:808">
P2: The new task description textarea is gated on `newTaskDescription` already being non-empty, so users creating a normal task have no way to enter a description. Render the textarea unconditionally (or provide an explicit control to show it) so the feature is usable.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: The new task description textarea is gated on newTaskDescription already being non-empty, so users creating a normal task have no way to enter a description. Render the textarea unconditionally (or provide an explicit control to show it) so the feature is usable.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/mesh-plugin-task-runner/components/task-board.tsx, line 808:

<comment>The new task description textarea is gated on `newTaskDescription` already being non-empty, so users creating a normal task have no way to enter a description. Render the textarea unconditionally (or provide an explicit control to show it) so the feature is usable.</comment>

<file context>
@@ -777,6 +805,17 @@ function TasksTabContent({
             autoFocus
           />
 
+          {/* Description textarea - shown when there's pre-filled content or user wants to add */}
+          {newTaskDescription && (
+            <textarea
</file context>

Suggested change

	{/* Description textarea - shown when there's pre-filled content or user wants to add */}
	{newTaskDescription && (
	<textarea
	value={newTaskDescription}
	onChange={(e) => setNewTaskDescription(e.target.value)}
	placeholder="Task description (optional)..."
	className="w-full px-3 py-2 text-sm border border-border rounded-md bg-background min-h-[100px] font-mono"
	rows={6}
	/>
	)}
	{/* Description textarea */}
	<textarea
	value={newTaskDescription}
	onChange={(e) => setNewTaskDescription(e.target.value)}
	placeholder="Task description (optional)..."
	className="w-full px-3 py-2 text-sm border border-border rounded-md bg-background min-h-[100px] font-mono"
	rows={6}
	/>

[cubic-dev-ai]

1 issue found across 2 files (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/mesh-plugin-task-runner/components/task-board.tsx">

<violation number="1" location="packages/mesh-plugin-task-runner/components/task-board.tsx:882">
P2: onPlanningComplete is never called because TaskCard doesn’t invoke onPlanningStateChange. Pending planning task IDs added in this PR won’t clear, so tasks can stay stuck in the “planning” state (and repeatedly toggle planning state once the plan arrives).</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: onPlanningComplete is never called because TaskCard doesn’t invoke onPlanningStateChange. Pending planning task IDs added in this PR won’t clear, so tasks can stay stuck in the “planning” state (and repeatedly toggle planning state once the plan arrives).

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/mesh-plugin-task-runner/components/task-board.tsx, line 882:

<comment>onPlanningComplete is never called because TaskCard doesn’t invoke onPlanningStateChange. Pending planning task IDs added in this PR won’t clear, so tasks can stay stuck in the “planning” state (and repeatedly toggle planning state once the plan arrives).</comment>

<file context>
@@ -874,6 +878,10 @@ function TasksTabContent({
                 refetchTasks={refetch}
                 sendChatMessage={sendChatMessage}
+                initialPlanningRequested={pendingPlanningTaskIds?.has(task.id)}
+                onPlanningStateChange={(taskId, isPending) => {
+                  if (!isPending) onPlanningComplete?.(taskId);
+                }}
</file context>