The Problem

Teams using Claude Code, Copilot, Codex, or Roo Code build automation as scattered config files and shell snippets with no way to visualize or reason about control flow. Iterating on a multi-agent workflow means editing YAML/JSON by hand and hoping the structure is valid. CC Workflow Studio replaces that with a visual editor where workflows are designed by drag-and-drop or natural-language conversation, then exported to the target tool's format.

What This Does

A VS Code extension with a React webview. The editor lives in src/webview/src/App.tsx (rendered from src/webview/index.html); the extension host logic lives in src/extension/extension.ts. Workflows are composed in a canvas (src/webview/src/components/WorkflowEditor.tsx) with Sub-Agent orchestrations and conditional branching, then exported to .claude/agents/, .claude/commands/, .github/prompts/, .codex/skills/, or .roo/skills/.

The repo is a fork of breaking-brake/cc-wf-studio (5,364 stars). It carries 78 spec documents under specs/ covering features like MCP nodes, skill nodes, and Slack sharing. The codebase is TypeScript throughout: 121 .ts files, 86 .tsx files, 207 internal modules with 583 import edges.

How It Is Wired

Execution starts in src/extension/extension.ts, which registers the command handlers under src/extension/commands/ (17 files: export-workflow.ts, slack-share-workflow.ts, workflow-refinement.ts, etc.). Those call into src/extension/services/ — export-service.ts, claude-code-service.ts, codex-cli-service.ts, copilot-export-service.ts — which write to the filesystem (the .claude/, .github/, .codex/ directories) and spawn CLI processes. The webview talks to the host over a message contract defined in src/shared/types/messages.ts.

Three modules carry the widest blast radius: src/webview/src/i18n/i18n-context.tsx (54 modules depend on it), src/shared/types/messages.ts (29 dependents, 1,237 lines), and src/extension/extension.ts (27 dependents). The workflow-store (src/webview/src/stores/workflow-store.ts) has 21 dependents and imports nothing — the stable core of the frontend state.

The cost of change is real: 70 modules sit inside circular import dependencies, including extension.ts, refinement-store.ts, and vscode-bridge.ts. Breaking a cycle requires extracting shared types or inverting a dependency. The i18n hub being both huge and heavily imported means any translation-key change ripples through half the webview.

How To Use It

git clone https://github.com/moses-y/cc-wf-studio
cd cc-wf-studio
npm install

The repo has root and src/webview/ package manifests plus a Vite config (src/webview/vite.config.ts). Build and debug targets are defined in .vscode/tasks.json and .vscode/launch.json — the standard VS Code extension flow: open the folder, press F5, and the Extension Development Host launches with the webview. No environment variables are documented in the repo. The README shows the primary flow: open a workflow, use "Edit with AI" to modify it conversationally, then one-click export.

Real-World Use

A team standardizes its PR review process. An engineer describes the desired flow in natural language: "review the diff, check for security issues, post a summary to Slack." The editor generates the workflow graph; the user refines it visually; one click exports to .claude/commands/. The same workflow can be exported to .codex/skills/ for Codex users without redesign.

Code Health & Issues

Static analysis found 137 findings (78 high, 59 medium) across six kinds. The most consequential:

  • High — Import cycle members (34 modules) — src/extension/extension.ts, src/webview/src/stores/refinement-store.ts, src/webview/src/services/vscode-bridge.ts participate in circular imports. Break cycles by extracting shared types.
  • High — Oversized files (8) — src/shared/types/messages.ts (1,237 lines), src/webview/src/stores/workflow-store.ts, src/webview/src/i18n/translation-keys.ts. Split by responsibility.
  • High — Hub modules (8) — i18n-context.tsx (54 dependents); volatile logic should move out.
  • High — Duplicated code — 1,180 repeated 6-line blocks across 111 files, including specs/001-skill-node/contracts/skill-messages.ts and src/shared/types/messages.ts. Extract shared helpers.

The CI audit found three high-severity issues in .github/workflows/: third-party actions pinned to tags not commit SHAs (snyk/actions/node@v1.0.0), no test command in any workflow despite the test suite existing, and continue-on-error on a correctness-gating step in security-scan.yml. Medium issues: a 5.1 MB GIF in resources/, persist-credentials not disabled on checkout, and a test suite covering roughly 1 of 207 source files. Low: no timeout-minutes on release jobs.

The Bottom Line

A well-scoped, genuinely useful VS Code extension for teams standardizing AI-agent workflows across multiple tools. The architecture is sound at the edges but the hub modules and 70-module cycle will make non-trivial changes slow — that is the first thing to address if you plan to extend it. Worth adopting for teams already invested in Claude Code or Copilot automation; the test gap means you should not trust the green CI badge.