# breaking-brake/cc-wf-studio architecture

> Architecture diagram of the GitHub repository breaking-brake/cc-wf-studio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/breaking-brake/cc-wf-studio
- Repository: https://github.com/breaking-brake/cc-wf-studio

## Overview

CC Workflow Studio is a visual designer and interchange layer for AI-agent workflows, with VS Code, CLI, and MCP entry points over a shared workflow definition. The principal path is authoring a canvas workflow, validating its node structure, then exporting it for an agent or running it from the editor. Separate capabilities include AI-assisted editing, MCP tool integration, workflow preview, and Slack sharing. The README documents the shared-file and agent workflows; sampled source confirms selected UI, server, and service behavior, but not every subsystem’s internal wiring.

Main entry points: [`packages/vscode/src/webview/src/App.tsx`](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/webview/src/App.tsx) (Editor canvas), [`packages/cli/src/cli.ts`](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/cli/src/cli.ts) (CLI commands), [`packages/mcp/src/mcp.ts`](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/mcp/src/mcp.ts) (MCP server), [`packages/vscode/src/extension/extension.ts`](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/extension.ts) (VS Code host)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Workflow authoring"]
  node_webview["Editor canvas<br/>[App.tsx]"]
  node_extension["VS Code host<br/>[extension.ts]"]
  node_workflow_store["Canvas state<br/>[workflow-store.ts]"]
  node_ai_edit["AI refinement"]
end

subgraph group_workflow["Workflow model"]
  node_workflow_file["workflow.json"]
  node_schema["Node schemas<br/>[index.ts]"]
  node_validation["Workflow validation"]
  node_exporter["Workflow export<br/>[workflow-export.ts]"]
end

subgraph group_interfaces["CLI and MCP"]
  node_cli["CLI commands<br/>[cli.ts]"]
  node_cli_preview["Browser preview<br/>[server.ts]"]
  node_mcp_server["MCP server<br/>[mcp.ts]"]
  node_mcp_tools["Workflow tools<br/>[tools.ts]"]
end

subgraph group_agent["Agent execution"]
  node_agent_output["Agent skills"]
  node_execution["Workflow execution"]
  node_commentary["Run commentary"]
end

subgraph group_integrations["Integrations"]
  node_mcp_integration["MCP integration<br/>[mcp-handlers.ts]"]
  node_slack["Slack sharing"]
  node_slack_service["Slack API"]
end

node_user(("Workflow designer"))
node_ai_client(("AI agent client"))
node_slack_external(("Slack"))

node_user -->|"designs"| node_webview
node_webview -->|"updates state"| node_workflow_store
node_webview -->|"saves and loads"| node_workflow_file
node_workflow_file -->|"loads for editing"| node_webview
node_webview -->|"sends messages"| node_extension
node_extension -->|"posts updates"| node_webview
node_webview -->|"configures nodes"| node_schema
node_workflow_file -->|"validates"| node_validation
node_cli -->|"validates"| node_validation
node_cli -->|"exports"| node_exporter
node_exporter -->|"writes formats"| node_agent_output
node_cli -->|"reads and writes"| node_workflow_file
node_cli -->|"starts preview"| node_cli_preview
node_cli_preview -->|"serves workflow"| node_workflow_file
node_ai_client -->|"uses tools"| node_mcp_server
node_mcp_server -->|"dispatches"| node_mcp_tools
node_mcp_tools -->|"reads and edits"| node_workflow_file
node_mcp_server -.->|"updates canvas"| node_webview
node_webview -->|"requests refinement"| node_ai_edit
node_ai_edit -->|"refines workflow"| node_workflow_file
node_webview -->|"starts run"| node_execution
node_execution -->|"manages session"| node_commentary
node_webview -->|"requests tools"| node_mcp_integration
node_mcp_integration -->|"queries server"| node_mcp_server
node_webview -->|"shares workflow"| node_slack
node_slack -->|"calls API"| node_slack_service
node_slack_service -->|"exchanges data"| node_slack_external

click node_webview "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/webview/src/App.tsx"
click node_extension "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/extension.ts"
click node_workflow_store "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/webview/src/stores/workflow-store.ts"
click node_schema "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/core/src/schema/index.ts"
click node_validation "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/core/src/utils/validate-workflow.ts"
click node_exporter "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/core/src/services/workflow-export.ts"
click node_cli "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/cli/src/cli.ts"
click node_cli_preview "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/cli/src/preview/server.ts"
click node_mcp_server "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/mcp/src/mcp.ts"
click node_mcp_tools "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/mcp/src/tools.ts"
click node_execution "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/services/execution-session-manager.ts"
click node_commentary "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/services/commentary-session-manager.ts"
click node_ai_edit "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/commands/workflow-refinement.ts"
click node_mcp_integration "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/commands/mcp-handlers.ts"
click node_slack "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/commands/slack-share-workflow.ts"
click node_slack_service "https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/services/slack-api-service.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_webview,node_extension,node_workflow_store,node_ai_edit,node_ai_client toneBlue
class node_workflow_file,node_schema,node_validation,node_exporter toneAmber
class node_cli,node_cli_preview,node_mcp_server,node_mcp_tools toneMint
class node_agent_output,node_execution,node_commentary toneRose
class node_mcp_integration,node_slack,node_slack_service,node_user,node_slack_external toneIndigo
```

## Components

### Workflow authoring

- [Editor canvas](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/webview/src/App.tsx): `packages/vscode/src/webview/src/App.tsx`
- [VS Code host](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/extension.ts): `packages/vscode/src/extension/extension.ts`
- [Canvas state](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/webview/src/stores/workflow-store.ts): `packages/vscode/src/webview/src/stores/workflow-store.ts`
- [AI refinement](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/commands/workflow-refinement.ts): `packages/vscode/src/extension/commands/workflow-refinement.ts`

### Workflow model

- **workflow.json**
- [Node schemas](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/core/src/schema/index.ts): `packages/core/src/schema/index.ts`
- [Workflow validation](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/core/src/utils/validate-workflow.ts): `packages/core/src/utils/validate-workflow.ts`
- [Workflow export](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/core/src/services/workflow-export.ts): `packages/core/src/services/workflow-export.ts`

### CLI and MCP

- [CLI commands](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/cli/src/cli.ts): `packages/cli/src/cli.ts`
- [Browser preview](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/cli/src/preview/server.ts): `packages/cli/src/preview/server.ts`
- [MCP server](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/mcp/src/mcp.ts): `packages/mcp/src/mcp.ts`
- [Workflow tools](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/mcp/src/tools.ts): `packages/mcp/src/tools.ts`

### Agent execution

- **Agent skills**
- [Workflow execution](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/services/execution-session-manager.ts): `packages/vscode/src/extension/services/execution-session-manager.ts`
- [Run commentary](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/services/commentary-session-manager.ts): `packages/vscode/src/extension/services/commentary-session-manager.ts`

### Integrations

- [MCP integration](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/commands/mcp-handlers.ts): `packages/vscode/src/extension/commands/mcp-handlers.ts`
- [Slack sharing](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/commands/slack-share-workflow.ts): `packages/vscode/src/extension/commands/slack-share-workflow.ts`
- [Slack API](https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/vscode/src/extension/services/slack-api-service.ts): `packages/vscode/src/extension/services/slack-api-service.ts`

### Other components

- **Workflow designer**
- **AI agent client**
- **Slack**

## Connections

- Workflow designer → Editor canvas: designs
- Editor canvas → Canvas state: updates state
- Editor canvas → workflow.json: saves and loads
- workflow.json → Editor canvas: loads for editing
- Editor canvas → VS Code host: sends messages
- VS Code host → Editor canvas: posts updates
- Editor canvas → Node schemas: configures nodes
- workflow.json → Workflow validation: validates
- CLI commands → Workflow validation: validates
- CLI commands → Workflow export: exports
- Workflow export → Agent skills: writes formats
- CLI commands → workflow.json: reads and writes
- CLI commands → Browser preview: starts preview
- Browser preview → workflow.json: serves workflow
- AI agent client → MCP server: uses tools
- MCP server → Workflow tools: dispatches
- Workflow tools → workflow.json: reads and edits
- MCP server → Editor canvas: updates canvas
- Editor canvas → AI refinement: requests refinement
- AI refinement → workflow.json: refines workflow
- Editor canvas → Workflow execution: starts run
- Workflow execution → Run commentary: manages session
- Editor canvas → MCP integration: requests tools
- MCP integration → MCP server: queries server
- Editor canvas → Slack sharing: shares workflow
- Slack sharing → Slack API: calls API
- Slack API → Slack: exchanges data