Forem: AgentZ

claude-studio: A Visual Orchestration Platform for Claude Code Multi-Agent Workflows

AgentZ — Fri, 17 Apr 2026 08:57:57 +0000

Why I Built This

I've been using Claude Code for over six months. What started as simple single-agent Q&A has evolved into a system where 5+ agents collaborate simultaneously — one handles social media operations, another manages the GitHub community, and others coordinate development across multiple projects.

The complexity is on a completely different level. And the problem? It's all hand-written config files.

Claude Code agent definitions live in .claude/agents/name.md. Skills go in .claude/skills/name.md. Workflows are .claude/workflows/name.yaml. Project instructions sit in CLAUDE.md. These files have dependencies on each other, but there's no way to see the full picture.

Changing one agent's prompt means opening the agents directory, finding the right file, editing it, then checking that CLAUDE.md references are still correct, and verifying that the workflow edge relationships haven't broken. For any non-trivial team setup, a single debugging session means jumping between five or six files.

I needed a GUI.

What is claude-studio?

claude-studio is a visual editor for the ~/.claude/ directory.

That sentence captures the entire design philosophy. No new runtime. No invented config format. Nothing beyond what Claude Code already does. It simply turns your existing markdown, yaml, and json config files into something you can drag, click, and preview.

Every action you take in the GUI — creating an agent, connecting workflow edges, configuring an MCP server — writes standard files into .claude/. Close claude-studio, open Claude Code, and your agent team runs exactly the same, because it reads the same files.

claude-studio (design) → ~/.claude/ (files) → Claude Code (runtime)

Core Features

1. DAG Workflow Editor

This is the heart of claude-studio. Multi-agent collaboration is fundamentally a directed acyclic graph (DAG) — agents are nodes, and the edges between them represent communication patterns.

claude-studio provides 4 edge types to describe different collaboration modes:

Edge Type	Meaning	Visual Style
Dispatch	Task assignment, execution dependency	Solid gray
Report	Feedback, results reporting	Dashed cyan
Sync	Peer-to-peer collaboration	Dotted purple
Roundtrip	Bidirectional dispatch + report	Solid teal, double arrow

These 4 types were distilled from real-world usage. For example, a Commander agent dispatches tasks to an ops agent (dispatch), the ops agent reports results back (report), and two parallel ops agents share information (sync). Most similar tools only offer a single edge type, but in real multi-agent workflows, semantic distinction matters.

2. Agent and Skill Management

There are two ways to create agents: choose from 9 built-in templates, or generate with AI.

The built-in templates cover common scenarios — code review, TDD guidance, security checks, documentation updates, and more. After selecting a template, you can edit the prompt in Monaco Editor with live preview.

Skills work the same way — create from templates or write manually. Created skills can be drag-and-dropped onto agent nodes in the workflow canvas.

3. AI Workflow Generation

This is my favorite feature. Describe the workflow you want in plain text — something like "Code review pipeline with security check" or "TDD workflow for KMP project" — and claude-studio calls claude -p to generate a complete DAG, including agent definitions, edge relationships, skill bindings, and checkpoints.

The generated result appears on the canvas for further refinement. Don't like something? Change it. Save, and it takes effect immediately.

4. Visual MCP and Settings Configuration

Claude Code's MCP server config, hooks config, and permissions all live in settings.json. Hand-writing JSON is error-prone. claude-studio provides a form-based config UI that writes directly to settings.json.

5. Plugin Export

The entire agent team you build in claude-studio — agents, skills, workflows, settings — can be exported as a standard Claude Code plugin package with one click. Others install the plugin and get your complete team configuration.

6. CLAUDE.md Auto-Sync

When you save a workflow, claude-studio automatically syncs the team structure, agent roles, and workflow definitions into CLAUDE.md. Design your team visually, and Claude Code picks it up on next startup — no extra configuration needed.

Technical Implementation

The tech stack is fairly standard:

Frontend Framework: Next.js (App Router)
Flow Engine: React Flow v12 — custom nodes, edges, and interactions
Code Editor: Monaco Editor — for editing agent prompts and skill definitions
Styling: Tailwind CSS + Lucide Icons
Language: TypeScript full-stack

The architecture has four layers:

┌─────────────────────────────────┐
│  GUI (React + React Flow v12)   │  ← Visual layer
├─────────────────────────────────┤
│  Next.js API Routes             │  ← Service layer
├─────────────────────────────────┤
│  ~/.claude/ (source of truth)   │  ← Data layer
├─────────────────────────────────┤
│  Claude Code (runtime)          │  ← Runtime
└─────────────────────────────────┘

The key design decision is "the data layer is the file system." No database, no cloud storage — ~/.claude/ is the single source of truth. The benefits:

Fully compatible with Claude Code — same files
Version control comes free with git
No accounts or logins required

Getting Started

One command, no install required:

npx claude-code-studio

Custom port:

npx claude-code-studio --port 3200

Development mode:

git clone https://github.com/androidZzT/claude-studio.git
cd claude-studio
npm install
npm run dev -- -p 3100

Comparison with Similar Tools

There aren't many tools doing Claude Code visualization. The ones I've evaluated:

CC Workflow Studio (VS Code extension) — workflow visualization only, no config or agent management
Agent Flow — runtime visualization, read-only, no editing
claude-code-manager — TUI tool, no GUI, no DAG

claude-studio's positioning is a GUI that simultaneously covers config management + DAG orchestration + team collaboration modeling. The semantic distinction between 4 edge types is a unique design that proves useful in real multi-agent workflows.

What's Next

The product is still in the polishing phase. Core capabilities are working, but there's plenty of room for improvement in the details.

Near-term focus:

Better real-time status display during workflow execution
Improved AI generation accuracy
More agent templates

Feedback, issues, and PRs are all welcome.

MIT licensed.

How I Track Claude Code Token Costs

AgentZ — Mon, 13 Apr 2026 13:04:07 +0000

Last month I got a surprise. My credit card statement showed I'd spent significantly more on AI coding tools than I thought. The problem wasn't that I was using too much — the problem was I had no idea how much I was using. I had Claude Code open in one terminal, Gemini CLI in another, and Cursor handling a side project. Three separate tools, three separate billing pages, zero unified view.

So I built one.

The Problem with AI Coding Cost Visibility

Every major AI coding tool stores session data locally. Claude Code writes JSONL files to ~/.claude/projects/. Gemini CLI logs to ~/.gemini/tmp/. Codex uses ~/.codex/sessions/. Cursor keeps everything in a SQLite database.

None of them talk to each other. And if you use more than one — which most developers do these days — you're left doing mental arithmetic across four different dashboards.

Existing monitoring tools weren't much help either. The most popular ones only support Claude Code. That's fine if you're a Claude-only shop, but not if you're like me and reach for whatever tool fits the task.

The Solution: cc-statistics

cc-statistics is an open-source tool I built to solve exactly this. It reads local session files from all four platforms, aggregates everything into a unified view, and surfaces it through three interfaces: a CLI, a web dashboard, and a native macOS menu-bar app.

The install is a single command:

uv tool install cc-statistics

Zero dependencies. Pure Python standard library. The macOS app ships as a pre-built binary — no Xcode, no local compilation.

🖼️ Screenshots

🖥️ macOS App — Dark Mode	🖥️ macOS App — Light Mode

📊 Usage Quota Predictor	🔴 Max Usage Reached

🔍 Session List	🔧 Tool Call Analytics

⚡ Skill / MCP Analytics	💬 Share Session Messages

🌐 4-Platform Unified View	⚙️ Settings

🔔 Notifications	🌐 Web Dashboard

Multi-Platform Support

The core differentiator is platform breadth. Here's what cc-statistics reads and where:

Platform	Local data path
Claude Code	`~/.claude/projects/<project>/<session>.jsonl`
Gemini CLI	`~/.gemini/tmp/<project>/chats/<session>.json`
Codex CLI	`~/.codex/sessions/*.jsonl`
Cursor	`~/Library/Application Support/Cursor/User/globalStorage/state.vscdb`

The depth of data varies by platform — Claude Code gives you the most (input tokens, output tokens, cache read/write, tool calls, model name), while Cursor currently provides session counts and code-change stats. But even partial data is better than no data, and the picture fills in as you use each tool.

Why does a unified view matter? Because your real cost is the sum. If Claude Code is your heavy lifter but Gemini CLI is where you do exploratory research and Cursor handles autocomplete all day, only looking at one bill means you're flying blind on the other two. cc-statistics adds them up.

Native macOS Menu Bar App

This is the feature I use most. Run cc-stats-app once, and it lives in your menu bar permanently.

The status bar shows a Claude logo alongside your current day's token count and estimated cost in real time. When you're approaching your self-set daily limit, it turns red. No checking dashboards, no mental math — it's just there, like a fuel gauge.

Right-clicking the status bar item lets you switch between display modes: Token+Cost, Token only, Cost only, or Session count. Press Cmd+Shift+C from anywhere to open the full dashboard panel.

The dashboard itself is native SwiftUI — it doesn't feel like an Electron app pretending to be native. You get:

A source switcher: view stats per platform or aggregate all four
Dark/light/system theme
Export to JSON or CSV (auto-saves to Desktop and opens immediately)
Process manager showing memory usage of all running Claude processes
Settings for launch at login, language, and update checks

The Clawd Pixel-Art Mascot

One of the more delightful features is Clawd — a pixel-art mascot that lives alongside your token counter in the status bar. It's not just decorative: Clawd reacts to what Claude Code is actually doing. When an agent task is running, the animation changes. When Claude is idle, it switches to a different state. When a task completes, there's a brief happy animation.

The sprites come from the clawd-on-desk project, which hooks into Claude Code's process state to drive animations. Seeing a tiny pixel character respond to your AI actually working is a small thing, but it makes the experience feel less like staring at a text terminal.

CLI Power Features

The CLI is where cc-statistics earns its keep for power users. A few commands I use every day:

# What did I spend in the last 7 days, across all platforms?
cc-stats --all --since 7d

# List every project cc-statistics has found (all platforms)
cc-stats --list

# Drill into the last 3 sessions for a specific project
cc-stats my-project --last 3

# Compare token spend across projects in the last week
cc-stats --compare --since 1w

# Open the web dashboard in a browser
cc-stats-web

The --compare flag is particularly useful at the end of a sprint. It shows a side-by-side breakdown of token consumption per project, which quickly reveals where the expensive work happened.

Session Search and Resume

This one came out of a real frustration: I'd have a productive Claude Code session, close the terminal, and then realize two days later that I needed to pick up exactly where I left off — but I couldn't remember which session it was.

cc-statistics indexes session content and lets you search by keyword:

cc-stats --search "database migration"

It returns matching sessions with timestamps and a ready-to-run resume command:

claude --resume <session-id>

One copy-paste and you're back in context. This works across all historical sessions, not just recent ones.

Beyond Cost Tracking

Token counts and dollar amounts are the obvious metrics. But cc-statistics surfaces several others that I've found surprisingly useful.

Tool Call Analysis

For Claude Code users, every tool call is logged — file reads, shell commands, web searches, and all your MCP tools. cc-statistics aggregates these and shows you a Top 10 breakdown by tool name, with Skill-type and MCP tools expanded to their specific names rather than grouped together.

This turns out to be a useful debugging signal. If mcp__filesystem__read_file is dominating your tool calls, maybe your agent is doing too many redundant reads. If a specific MCP tool is called 200 times in a session, you have a concrete number to reason about.

Code Change Statistics

Using git log --numstat on your project directories, cc-statistics tracks lines added and deleted by language per session. You get a breakdown like: "This week, 3,400 lines of TypeScript and 800 lines of Python were written in AI-assisted sessions."

This is useful for understanding where AI coding is actually generating output, not just consuming tokens. A session with high token usage but zero code changes probably means you spent the time in discussion or planning — which is fine, but worth knowing.

AI Time vs. User Time

cc-statistics measures how long Claude is "thinking" versus how long it spends waiting for you to respond. This ratio tells you something about your workflow efficiency. A high AI time percentage in short sessions usually means you're prompt-and-wait; a more balanced ratio might mean you're doing more interactive back-and-forth.

I've found this metric helpful for spotting sessions where I should have batched more work into a single prompt rather than going back and forth ten times.

Reports and Notifications

Automatic Weekly and Monthly Reports

cc-stats --report week
cc-stats --report month

These generate Markdown files summarizing your usage across all platforms for the period: total tokens, cost by model, most active projects, top tool calls, and code changes by language. Useful for personal accountability, or for justifying your AI tooling budget to a manager.

Webhook Push

If you're on a team, you can push reports to a channel:

cc-stats --notify https://hooks.slack.com/services/your-webhook-url

Slack, Feishu, and DingTalk webhooks all work. I have a weekly cron job that pushes a summary to a personal Slack channel so I have a permanent record. You could use this for team-wide visibility into AI tooling costs, or just for your own history.

Usage Alerts

You can set daily and weekly spending limits, and cc-statistics will fire a macOS system notification when you're close to or over the threshold. This lives in the app's Settings panel.

The notification goes through the standard macOS notification system, so it respects your Focus modes and doesn't require the app to be in the foreground. Combined with the status bar turning red, it's hard to miss.

Web Dashboard

cc-stats-web

This opens a browser-based dark-themed dashboard — useful on non-Mac platforms or when you want a larger view than the menu bar panel provides. It shows the same data as the native app: sessions, tokens by model, daily trends, tool call breakdowns.

Getting Started in 3 Steps

1. Install

# uv (fastest)
uv tool install cc-statistics

# or pipx
pipx install cc-statistics

# or Homebrew
brew install androidZzT/tap/cc-statistics

2. Run your first report

cc-stats --all --since 7d

This scans all detected platforms and prints the last 7 days of activity. If you only use Claude Code, it'll show Claude Code. If you have Gemini CLI sessions too, those appear automatically.

3. Launch the menu bar app (macOS)

cc-stats-app

Enable "Launch at Login" in Settings once, and you'll have a persistent cost gauge from then on.

What's Next

A few things on the roadmap that I'm working toward:

Rate limit progress bar — visual indicator of how close you are to Claude's session limits, similar to what claude-usage does for Pro/Max subscribers
Hourly activity distribution — see which hours of the day you use AI coding tools most, and whether those overlap with peak throttling windows
Budget forecasting — project end-of-month spend based on current usage velocity

Links

GitHub: https://github.com/androidZzT/cc-statistics
Install: uv tool install cc-statistics
PyPI: cc-statistics

If you're using multiple AI coding tools and want a single place to see what they're actually costing you, give it a try. And if something doesn't work or you want a platform added, open an issue — the project is actively maintained.

How I Track AI Coding Costs Across 4 Platforms with One Tool

AgentZ — Mon, 13 Apr 2026 13:00:50 +0000

So I built one.

The Problem with AI Coding Cost Visibility

None of them talk to each other. And if you use more than one — which most developers do these days — you're left doing mental arithmetic across four different dashboards.

The Solution: cc-statistics

The install is a single command:

uv tool install cc-statistics

Zero dependencies. Pure Python standard library. The macOS app ships as a pre-built binary — no Xcode, no local compilation.

🖼️ Screenshots

🖥️ macOS App — Dark Mode	🖥️ macOS App — Light Mode

📊 Usage Quota Predictor	🔴 Max Usage Reached

🔍 Session List	🔧 Tool Call Analytics

⚡ Skill / MCP Analytics	💬 Share Session Messages

🌐 4-Platform Unified View	⚙️ Settings

🔔 Notifications	🌐 Web Dashboard

Multi-Platform Support

The core differentiator is platform breadth. Here's what cc-statistics reads and where:

Platform	Local data path
Claude Code	`~/.claude/projects/<project>/<session>.jsonl`
Gemini CLI	`~/.gemini/tmp/<project>/chats/<session>.json`
Codex CLI	`~/.codex/sessions/*.jsonl`
Cursor	`~/Library/Application Support/Cursor/User/globalStorage/state.vscdb`

Native macOS Menu Bar App

This is the feature I use most. Run cc-stats-app once, and it lives in your menu bar permanently.

Right-clicking the status bar item lets you switch between display modes: Token+Cost, Token only, Cost only, or Session count. Press Cmd+Shift+C from anywhere to open the full dashboard panel.

The dashboard itself is native SwiftUI — it doesn't feel like an Electron app pretending to be native. You get:

A source switcher: view stats per platform or aggregate all four
Dark/light/system theme
Export to JSON or CSV (auto-saves to Desktop and opens immediately)
Process manager showing memory usage of all running Claude processes
Settings for launch at login, language, and update checks

The Clawd Pixel-Art Mascot

CLI Power Features

The CLI is where cc-statistics earns its keep for power users. A few commands I use every day:

# What did I spend in the last 7 days, across all platforms?
cc-stats --all --since 7d

# List every project cc-statistics has found (all platforms)
cc-stats --list

# Drill into the last 3 sessions for a specific project
cc-stats my-project --last 3

# Compare token spend across projects in the last week
cc-stats --compare --since 1w

# Open the web dashboard in a browser
cc-stats-web

The --compare flag is particularly useful at the end of a sprint. It shows a side-by-side breakdown of token consumption per project, which quickly reveals where the expensive work happened.

Session Search and Resume

cc-statistics indexes session content and lets you search by keyword:

cc-stats --search "database migration"

It returns matching sessions with timestamps and a ready-to-run resume command:

claude --resume <session-id>

One copy-paste and you're back in context. This works across all historical sessions, not just recent ones.

Beyond Cost Tracking

Token counts and dollar amounts are the obvious metrics. But cc-statistics surfaces several others that I've found surprisingly useful.

Tool Call Analysis

Code Change Statistics

AI Time vs. User Time

I've found this metric helpful for spotting sessions where I should have batched more work into a single prompt rather than going back and forth ten times.

Reports and Notifications

Automatic Weekly and Monthly Reports

cc-stats --report week
cc-stats --report month

Webhook Push

If you're on a team, you can push reports to a channel:

cc-stats --notify https://hooks.slack.com/services/your-webhook-url

Usage Alerts

You can set daily and weekly spending limits, and cc-statistics will fire a macOS system notification when you're close to or over the threshold. This lives in the app's Settings panel.

Web Dashboard

cc-stats-web

Getting Started in 3 Steps

1. Install

# uv (fastest)
uv tool install cc-statistics

# or pipx
pipx install cc-statistics

# or Homebrew
brew install androidZzT/tap/cc-statistics

2. Run your first report

cc-stats --all --since 7d

This scans all detected platforms and prints the last 7 days of activity. If you only use Claude Code, it'll show Claude Code. If you have Gemini CLI sessions too, those appear automatically.

3. Launch the menu bar app (macOS)

cc-stats-app

Enable "Launch at Login" in Settings once, and you'll have a persistent cost gauge from then on.

What's Next

A few things on the roadmap that I'm working toward:

Rate limit progress bar — visual indicator of how close you are to Claude's session limits, similar to what claude-usage does for Pro/Max subscribers
Hourly activity distribution — see which hours of the day you use AI coding tools most, and whether those overlap with peak throttling windows
Budget forecasting — project end-of-month spend based on current usage velocity

How I Track AI Coding Costs Across 4 Platforms with One Tool

AgentZ — Sun, 12 Apr 2026 08:51:54 +0000

So I built one.

The Problem with AI Coding Cost Visibility

None of them talk to each other. And if you use more than one — which most developers do these days — you're left doing mental arithmetic across four different dashboards.

The Solution: cc-statistics

The install is a single command:

uv tool install cc-statistics

Zero dependencies. Pure Python standard library. The macOS app ships as a pre-built binary — no Xcode, no local compilation.

🖼️ Screenshots

🖥️ macOS App — Dark Mode	🖥️ macOS App — Light Mode

📊 Usage Quota Predictor	🔴 Max Usage Reached

🔍 Session List	🔧 Tool Call Analytics

⚡ Skill / MCP Analytics	💬 Share Session Messages

🌐 4-Platform Unified View	⚙️ Settings

🔔 Notifications	🌐 Web Dashboard

Multi-Platform Support

The core differentiator is platform breadth. Here's what cc-statistics reads and where:

Platform	Local data path
Claude Code	`~/.claude/projects/<project>/<session>.jsonl`
Gemini CLI	`~/.gemini/tmp/<project>/chats/<session>.json`
Codex CLI	`~/.codex/sessions/*.jsonl`
Cursor	`~/Library/Application Support/Cursor/User/globalStorage/state.vscdb`

Native macOS Menu Bar App

This is the feature I use most. Run cc-stats-app once, and it lives in your menu bar permanently.

Right-clicking the status bar item lets you switch between display modes: Token+Cost, Token only, Cost only, or Session count. Press Cmd+Shift+C from anywhere to open the full dashboard panel.

The dashboard itself is native SwiftUI — it doesn't feel like an Electron app pretending to be native. You get:

A source switcher: view stats per platform or aggregate all four
Dark/light/system theme
Export to JSON or CSV (auto-saves to Desktop and opens immediately)
Process manager showing memory usage of all running Claude processes
Settings for launch at login, language, and update checks

The Clawd Pixel-Art Mascot

CLI Power Features

The CLI is where cc-statistics earns its keep for power users. A few commands I use every day:

# What did I spend in the last 7 days, across all platforms?
cc-stats --all --since 7d

# List every project cc-statistics has found (all platforms)
cc-stats --list

# Drill into the last 3 sessions for a specific project
cc-stats my-project --last 3

# Compare token spend across projects in the last week
cc-stats --compare --since 1w

# Open the web dashboard in a browser
cc-stats-web

The --compare flag is particularly useful at the end of a sprint. It shows a side-by-side breakdown of token consumption per project, which quickly reveals where the expensive work happened.

Session Search and Resume

cc-statistics indexes session content and lets you search by keyword:

cc-stats --search "database migration"

It returns matching sessions with timestamps and a ready-to-run resume command:

claude --resume <session-id>

One copy-paste and you're back in context. This works across all historical sessions, not just recent ones.

Beyond Cost Tracking

Token counts and dollar amounts are the obvious metrics. But cc-statistics surfaces several others that I've found surprisingly useful.

Tool Call Analysis

Code Change Statistics

AI Time vs. User Time

I've found this metric helpful for spotting sessions where I should have batched more work into a single prompt rather than going back and forth ten times.

Reports and Notifications

Automatic Weekly and Monthly Reports

cc-stats --report week
cc-stats --report month

Webhook Push

If you're on a team, you can push reports to a channel:

cc-stats --notify https://hooks.slack.com/services/your-webhook-url

Usage Alerts

You can set daily and weekly spending limits, and cc-statistics will fire a macOS system notification when you're close to or over the threshold. This lives in the app's Settings panel.

Web Dashboard

cc-stats-web

Getting Started in 3 Steps

1. Install

# uv (fastest)
uv tool install cc-statistics

# or pipx
pipx install cc-statistics

# or Homebrew
brew install androidZzT/tap/cc-statistics

2. Run your first report

cc-stats --all --since 7d

This scans all detected platforms and prints the last 7 days of activity. If you only use Claude Code, it'll show Claude Code. If you have Gemini CLI sessions too, those appear automatically.

3. Launch the menu bar app (macOS)

cc-stats-app

Enable "Launch at Login" in Settings once, and you'll have a persistent cost gauge from then on.

What's Next

A few things on the roadmap that I'm working toward:

Rate limit progress bar — visual indicator of how close you are to Claude's session limits, similar to what claude-usage does for Pro/Max subscribers
Hourly activity distribution — see which hours of the day you use AI coding tools most, and whether those overlap with peak throttling windows
Budget forecasting — project end-of-month spend based on current usage velocity