feat(ui): live workspace and workflow dashboards

docs/chatgpt-coding-workflow.md

@@ -148,12 +148,22 @@ registered. `exec_command` returns a process session ID when a command is still
 running after its yield window. Use `write_stdin` to poll it, send input, resize
 a PTY, or send Ctrl-C. Set `tty: true` only for commands that need a terminal.
 
-## Show Changes
+## Widget UI and Show Changes
 
 By default, `DEVSPACE_WIDGETS=full`.
 
-In that mode, DevSpace attaches widget UI to the exposed workspace, file, edit,
-and shell tools. The aggregate `show_changes` tool is not exposed by default.
+In that mode, DevSpace attaches widget UI to the exposed workspace, workflow,
+file, edit, and shell tools. The `open_workspace` dropdown presents the opened
+root, loaded skills and instructions, available agent providers/profiles, and
+currently active workflows for that workspace.
+
+Dynamic Workflow views are read-only. They refresh through app-only MCP tools
+and show observed phases, agent calls, replay state, worktree isolation, errors,
+and recent activity. When the host supports MCP Apps fullscreen display mode,
+the card offers an **Open dashboard** presentation control. It does not add
+cancel, resume, apply, or cleanup actions.
+
+The aggregate `show_changes` tool is not exposed by default.
 
 Use `DEVSPACE_WIDGETS=off` to disable widget UI, or `DEVSPACE_WIDGETS=changes`
 to expose the aggregate show-changes flow.

docs/configuration.md

@@ -83,7 +83,7 @@ sessions.
 
 | Value | Behavior |
 | --- | --- |
-| `full` | Default. Widget UI is attached to exposed workspace, file, edit, and shell tools. |
+| `full` | Default. Widget UI is attached to exposed workspace, workflow, file, edit, and shell tools, including read-only live workflow dashboards. |
 | `changes` | Enables the aggregate `show_changes` tool and attaches widget UI to `open_workspace` and `show_changes`. |
 | `off` | Disables widget UI. |
 

package.json

@@ -28,7 +28,7 @@
     "dev": "node scripts/dev-server.mjs",
     "postinstall": "node scripts/fix-node-pty-permissions.mjs",
     "start": "node dist/cli.js serve",
-    "test": "tsx src/config.test.ts && tsx src/ui/card-types.test.ts && tsx src/ui/patch-display.test.ts && tsx src/ui/tool-display.test.ts && tsx src/apply-patch.test.ts && tsx src/process-platform.test.ts && tsx src/process-sessions.test.ts && tsx src/mcp-sessions.test.ts && tsx src/server-shutdown.test.ts && tsx src/local-agent-runtime.test.ts && tsx src/local-agent-adapters.test.ts && tsx src/local-agent-availability.test.ts && tsx src/local-agent-profiles.test.ts && tsx src/local-agent-targets.test.ts && tsx src/local-agent-store.test.ts && tsx src/roots.test.ts && tsx src/skills.test.ts && tsx src/workspaces.test.ts && tsx src/review-checkpoints.test.ts && tsx src/oauth-store.test.ts && tsx src/cli.test.ts && tsx src/workflow-contracts.test.ts && tsx src/workflow-errors.test.ts && tsx src/workflow-types.test.ts && tsx src/workflow-store.test.ts && tsx src/workflow-view.test.ts && tsx src/workflow-tui.test.ts && tsx src/workflow-script.test.ts && tsx src/workflow-sandbox.test.ts && tsx src/workflow-engine.test.ts && tsx src/workflow-files.test.ts && tsx src/workflow-replay.test.ts && tsx src/workflow-schema.test.ts",
+    "test": "tsx src/config.test.ts && tsx src/ui/card-types.test.ts && tsx src/ui/patch-display.test.ts && tsx src/ui/tool-display.test.ts && tsx src/apply-patch.test.ts && tsx src/process-platform.test.ts && tsx src/process-sessions.test.ts && tsx src/mcp-sessions.test.ts && tsx src/server-shutdown.test.ts && tsx src/local-agent-runtime.test.ts && tsx src/local-agent-adapters.test.ts && tsx src/local-agent-availability.test.ts && tsx src/local-agent-profiles.test.ts && tsx src/local-agent-targets.test.ts && tsx src/local-agent-store.test.ts && tsx src/roots.test.ts && tsx src/skills.test.ts && tsx src/workspaces.test.ts && tsx src/review-checkpoints.test.ts && tsx src/oauth-store.test.ts && tsx src/cli.test.ts && tsx src/workflow-contracts.test.ts && tsx src/workflow-errors.test.ts && tsx src/workflow-types.test.ts && tsx src/workflow-store.test.ts && tsx src/workflow-view.test.ts && tsx src/workflow-ui.test.ts && tsx src/workflow-tui.test.ts && tsx src/workflow-script.test.ts && tsx src/workflow-sandbox.test.ts && tsx src/workflow-engine.test.ts && tsx src/workflow-files.test.ts && tsx src/workflow-replay.test.ts && tsx src/workflow-schema.test.ts",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "keywords": [],

skills/dynamic-workflows/SKILL.md

@@ -117,7 +117,7 @@ depending on a replayed mutating call.
 
 - **CLI**: host agent can shell; prefer for long runs + `--follow`.
 - **TUI**: `devspace workflow tui` opens a read-only live view for workflows associated with the current working directory.
-- **MCP**: ChatGPT plans; call `run_workflow`, then `workflow_status` until terminal. Disconnecting MCP does **not** kill the worker.
+- **MCP**: ChatGPT plans; call `run_workflow`, then `workflow_status` until terminal. With full widgets enabled, workflow tool cards and the `open_workspace` dashboard show read-only live activity, including workflows launched through the CLI. Disconnecting MCP does **not** kill the worker.
 
 ## Worked mini-examples
 

src/server.ts

@@ -48,6 +48,8 @@ import { createWorkspaceStore } from "./workspace-store.js";
 import { formatAgentsPath, WorkspaceRegistry } from "./workspaces.js";
 import { summarizeLocalAgentProfile } from "./local-agent-profiles.js";
 import { registerWorkflowTools } from "./workflow-tools.js";
+import { createWorkflowStore } from "./workflow-store.js";
+import { loadActiveWorkflowSummaries } from "./workflow-ui.js";
 import {
   formatLocalAgentProviderAvailabilitySummary,
   getLocalAgentProviderAvailabilitySnapshot,
@@ -264,6 +266,24 @@ const workspaceAvailableAgentsFileOutputSchema = z.object({
   path: z.string(),
 });
 
+const workflowCallCountsOutputSchema = z.object({
+  running: z.number(),
+  completed: z.number(),
+  cached: z.number(),
+  failed: z.number(),
+  cancelled: z.number(),
+  observed: z.number(),
+});
+
+const workflowRunSummaryOutputSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  status: z.enum(["starting", "running", "completed", "failed", "cancelled"]),
+  currentPhase: z.string().optional(),
+  calls: workflowCallCountsOutputSchema,
+  updatedAt: z.string(),
+});
+
 const reviewFileOutputSchema = z.object({
   path: z.string(),
   previousPath: z.string().optional(),
@@ -705,10 +725,10 @@ function createMcpServer(
 
   registerAppResource(
     server,
-    "DevSpace Diff Card",
+    "DevSpace App",
     WORKSPACE_APP_URI,
     {
-      description: "Interactive card for viewing DevSpace file diffs.",
+      description: "Interactive DevSpace workspace, workflow, and file-change views.",
       _meta: {
         ui: {
           csp: appCsp(config),
@@ -779,6 +799,7 @@ function createMcpServer(
         agentProviders: z.array(workspaceLocalAgentProviderOutputSchema),
         agents: z.array(workspaceLocalAgentOutputSchema),
         skillDiagnostics: z.array(z.unknown()),
+        activeWorkflows: z.array(workflowRunSummaryOutputSchema),
         instruction: z.string(),
       },
       ...toolWidgetDescriptorMeta(config, "workspace"),
@@ -817,6 +838,16 @@ function createMcpServer(
       const availableAgentsFileOutputs = availableAgentsFiles.map((file) => ({
         path: formatAgentsPath(file.path, workspace.root),
       }));
+      const activeWorkflows = config.subagents
+        ? (() => {
+            const workflowStore = createWorkflowStore(config);
+            try {
+              return loadActiveWorkflowSummaries(workflowStore, workspace.root);
+            } finally {
+              workflowStore.close();
+            }
+          })()
+        : [];
       const instruction = config.skillsEnabled
         ? "Use this workspaceId in all subsequent tool calls for this project. Do not call open_workspace again for this same folder unless this workspaceId stops working, the user asks to reopen, or you switch to a different folder/worktree. Follow loaded agentsFiles instructions. Before working under a path listed in availableAgentsFiles, read that instruction file. When a task matches an available skill in skills, read its path before proceeding."
         : "Use this workspaceId in all subsequent tool calls for this project. Do not call open_workspace again for this same folder unless this workspaceId stops working, the user asks to reopen, or you switch to a different folder/worktree. Follow loaded agentsFiles instructions. Before working under a path listed in availableAgentsFiles, read that instruction file.";
@@ -870,6 +901,7 @@ function createMcpServer(
               agentsFiles: loadedAgentsFiles.length,
               availableAgentsFiles: availableAgentsFileOutputs.length,
               skills: visibleSkills.length,
+              activeWorkflows: activeWorkflows.length,
               agentProviders: visibleAgentProviders.length,
               agents: visibleAgents.length,
               skillDiagnostics: workspace.skillDiagnostics.length,
@@ -885,6 +917,7 @@ function createMcpServer(
           agentsFiles: loadedAgentsFiles,
           availableAgentsFiles: availableAgentsFileOutputs,
           skills: visibleSkills,
+          activeWorkflows,
           agentProviders: visibleAgentProviders,
           agents: visibleAgents,
           skillDiagnostics: workspace.skillDiagnostics,

src/ui/card-types.test.ts

@@ -7,7 +7,13 @@ import {
   isToolName,
 } from "./card-types.js";
 
-for (const tool of ["apply_patch", "exec_command", "write_stdin"]) {
+for (const tool of [
+  "apply_patch",
+  "exec_command",
+  "write_stdin",
+  "run_workflow",
+  "workflow_status",
+]) {
   assert.equal(isToolName(tool), true, `${tool} should be a recognized card tool`);
 }
 
@@ -23,3 +29,26 @@ assert.equal(
   true,
 );
 assert.equal(isExpandableCard({ tool: "apply_patch" }), false);
+assert.equal(isExpandableCard({ tool: "run_workflow", runId: "wfr_1" }), true);
+assert.equal(
+  isExpandableCard({
+    tool: "open_workspace",
+    activeWorkflows: [
+      {
+        id: "wfr_1",
+        name: "Review",
+        status: "running",
+        calls: {
+          running: 1,
+          completed: 0,
+          cached: 0,
+          failed: 0,
+          cancelled: 0,
+          observed: 1,
+        },
+        updatedAt: "2026-07-26T00:00:00.000Z",
+      },
+    ],
+  }),
+  true,
+);

src/ui/card-types.ts

@@ -1,7 +1,10 @@
 import type { App } from "@modelcontextprotocol/ext-apps";
+import type { WorkflowRunSummaryView } from "../workflow-ui.js";
 
 export type ToolName =
   | "open_workspace"
+  | "run_workflow"
+  | "workflow_status"
   | "show_changes"
   | "apply_patch"
   | "exec_command"
@@ -23,7 +26,19 @@ export interface ToolResultCard {
   workspaceId?: string;
   path?: string;
   root?: string;
+  mode?: "checkout" | "worktree";
+  sourceRoot?: string;
+  worktree?: {
+    path?: string;
+    baseRef?: string;
+    baseSha?: string;
+    dirtySource?: boolean;
+    detached?: boolean;
+    managed?: boolean;
+  };
   status?: string;
+  name?: string;
+  runId?: string;
   summary?: Record<string, unknown>;
   files?: Array<{
     path?: string;
@@ -46,6 +61,28 @@ export interface ToolResultCard {
     description?: string;
     path?: string;
   }>;
+  activeWorkflows?: WorkflowRunSummaryView[];
+  callSummary?: {
+    reused?: number;
+    live?: number;
+    failed?: number;
+    running?: number;
+    total?: number;
+  };
+  agentProviders?: Array<{
+    name?: string;
+    available?: boolean;
+    reason?: string;
+  }>;
+  agents?: Array<{
+    name?: string;
+    description?: string;
+    provider?: string;
+    model?: string;
+    effort?: string;
+    providerAvailable?: boolean;
+    providerUnavailableReason?: string;
+  }>;
   skillDiagnostics?: unknown[];
   instruction?: string;
 }
@@ -66,6 +103,8 @@ export interface ToolPayload {
 export function isToolName(value: unknown): value is ToolName {
   return (
     value === "open_workspace" ||
+    value === "run_workflow" ||
+    value === "workflow_status" ||
     value === "show_changes" ||
     value === "apply_patch" ||
     value === "exec_command" ||
@@ -108,6 +147,10 @@ export function isReviewTool(tool: ToolName): boolean {
   return tool === "show_changes";
 }
 
+export function isWorkflowTool(tool: ToolName): boolean {
+  return tool === "run_workflow" || tool === "workflow_status";
+}
+
 export function isToolResultCard(value: unknown): value is Omit<ToolResultCard, "tool"> {
   return Boolean(value && typeof value === "object");
 }
@@ -141,10 +184,15 @@ export function isExpandableCard(card: ToolResultCard): boolean {
       Boolean(card.agentsFiles?.length) ||
       Boolean(card.availableAgentsFiles?.length) ||
       Boolean(card.skills?.length) ||
+      Boolean(card.activeWorkflows?.length) ||
+      Boolean(card.agentProviders?.length) ||
+      Boolean(card.agents?.length) ||
       Boolean(card.skillDiagnostics?.length)
     );
   }
 
+  if (isWorkflowTool(card.tool)) return Boolean(card.runId);
+
   if (isReviewTool(card.tool)) return Boolean(card.files?.length || card.payload?.patch);
   if (isPatchTool(card.tool)) return Boolean(card.payload?.patch);
 

src/ui/icons.ts

@@ -9,9 +9,12 @@ import {
   FolderOpen,
   FolderTree,
   LoaderCircle,
+  Maximize2,
+  Minimize2,
   Search,
   SquareTerminal,
   Terminal,
+  Workflow,
   createElement,
   type IconNode,
 } from "lucide";
@@ -25,10 +28,13 @@ export const toolIcons = {
   folderOpen: FolderOpen,
   folderTree: FolderTree,
   loading: LoaderCircle,
+  maximize: Maximize2,
+  minimize: Minimize2,
   readFile: FileText,
   search: Search,
   terminal: Terminal,
   terminalSquare: SquareTerminal,
+  workflow: Workflow,
   writeFile: FilePlus,
 } as const satisfies Record<string, IconNode>;
 

src/ui/tool-display.test.ts

@@ -5,6 +5,8 @@ import { getToolDisplay, getToolHeaderSummary } from "./tool-display.js";
 
 const displayCases: Array<[ToolResultCard, { title: string; tone: string }]> = [
   [{ tool: "open_workspace", root: "/tmp/project" }, { title: "Opened workspace", tone: "workspace" }],
+  [{ tool: "run_workflow", runId: "wfr_1", name: "Review" }, { title: "Started workflow", tone: "workflow" }],
+  [{ tool: "workflow_status", runId: "wfr_1", name: "Review" }, { title: "Workflow status", tone: "workflow" }],
   [{ tool: "read", path: "src/read.ts" }, { title: "Read file", tone: "read" }],
   [{ tool: "write", path: "src/write.ts" }, { title: "Wrote file", tone: "write" }],
   [{ tool: "edit", path: "src/edit.ts" }, { title: "Edited file", tone: "edit" }],
@@ -25,6 +27,7 @@ for (const [card, expected] of displayCases) {
 }
 
 assert.equal(getToolDisplay({ tool: "open_workspace", root: "/tmp/project" }).label, "/tmp/project");
+assert.equal(getToolDisplay({ tool: "run_workflow", runId: "wfr_1" }).label, "wfr_1");
 assert.equal(
   getToolDisplay({ tool: "grep", summary: { pattern: "needle", scope: "src" } }).label,
   "needle in src",
@@ -120,6 +123,14 @@ assert.deepEqual(
   getToolHeaderSummary({ tool: "open_workspace" }),
   { kind: "empty" },
 );
+assert.deepEqual(
+  getToolHeaderSummary({
+    tool: "workflow_status",
+    status: "running",
+    callSummary: { running: 2, failed: 1 },
+  }),
+  { kind: "text", text: "running · 2 running · 1 failed" },
+);
 
 function pickDisplay(display: ReturnType<typeof getToolDisplay>) {
   return {

src/ui/tool-display.ts

@@ -3,6 +3,7 @@ import {
   isPatchTool,
   isReviewTool,
   isShellTool,
+  isWorkflowTool,
   isWriteTool,
   summaryNumber,
   type ToolResultCard,
@@ -31,6 +32,20 @@ export function getToolDisplay(card: ToolResultCard): ToolDisplay {
         label: card.root ?? card.path,
         tone: "workspace",
       };
+    case "run_workflow":
+      return {
+        icon: toolIcons.workflow,
+        title: card.status === "completed" ? "Workflow completed" : "Started workflow",
+        label: card.name ?? card.runId,
+        tone: "workflow",
+      };
+    case "workflow_status":
+      return {
+        icon: toolIcons.workflow,
+        title: "Workflow status",
+        label: card.name ?? card.runId,
+        tone: "workflow",
+      };
     case "read":
       return {
         icon: toolIcons.readFile,
@@ -123,12 +138,22 @@ export function getToolHeaderSummary(card: ToolResultCard): ToolHeaderSummary {
   if (card.tool === "open_workspace") {
     const parts = [
       typeof summary.mode === "string" ? summary.mode : undefined,
+      countLabel(summaryNumber(summary, "activeWorkflows"), "workflow"),
       countLabel(summaryNumber(summary, "agentsFiles"), "instruction"),
       countLabel(summaryNumber(summary, "skills"), "skill"),
     ].filter((part): part is string => Boolean(part));
     return parts.length > 0 ? { kind: "text", text: parts.join(" · ") } : { kind: "empty" };
   }
 
+  if (isWorkflowTool(card.tool)) {
+    const parts = [
+      card.status,
+      card.callSummary?.running ? `${card.callSummary.running} running` : undefined,
+      card.callSummary?.failed ? `${card.callSummary.failed} failed` : undefined,
+    ].filter((part): part is string => Boolean(part));
+    return parts.length > 0 ? { kind: "text", text: parts.join(" · ") } : { kind: "empty" };
+  }
+
   if (isShellTool(card.tool)) {
     const parts = [
       countLabel(summaryNumber(summary, "lines"), "line"),