AI coding agents can do an extraordinary amount of work in a short time. The problem is that almost none of it is visible while it's happening. You ask for a refactor, the terminal scrolls, files change somewhere on disk, and you find out what actually happened only when something breaks. There is no shared picture of the project, no list of what's in progress, no log of what the agent touched last.
I work with Claude Code (Anthropic's command-line agent) every day, and over the last few months I've built a small set of tools to fix exactly that. They run locally, they open automatically when I start a session, and they make every agent's work auditable from a single browser tab. This post walks through what they are, why they exist, how to install them, and what a normal working day looks like with them in place.
There are three pieces and they're designed to work together.
The first is workflow-docs, a local dashboard that auto-opens in Chrome when Claude Code opens a project. It shows the project's architecture as an interactive diagram, a live kanban board (a three-column to-do / in-progress / done layout), and a real-time log of every tool the agent invokes. The repository is at github.com/vianch/workflow-docs.
The second is the workflow-kanban-task skill, a Claude skill (a piece of reusable agent behaviour that activates on natural-language cues) that lets you manage the kanban board in plain English. You say "add a task: fix the billing webhook" and the board updates within a second. No command syntax, no IDs.
The third is the Prompt Enhancer, a Claude project (a shared workspace with its own system instructions) that takes a rough request like "clean up the price constants" and returns a structured prompt with scope, work items, pull-request routing, and a built-in Kanban Workflow section that auto-creates the tasks the board will display.
Together they turn the agent from a black box into something you can actually watch.
The dashboard has two main views. The architecture view draws every component of your app in vertical swim lanes (Actors, Client, Backend, Storage, Pipeline, Distribution, External services) and lets you click any named user flow ("Reset password", "Checkout", "Invite user") to highlight the exact path data takes between components. The kanban view shows the same canvas as a three-column board: Planned, In Dev, Done.
Below the canvas is a two-tab pane: Agents lists every running agent with its current goal, tool count, and most recent tool; Activity is the chronological event stream. When an agent is working, you can see in real time which tool it's calling and on which file.
Prerequisites: macOS, Linux, or Windows with Git Bash or WSL. Claude Code installed and run at least once so that ~/.claude/ exists. Google Chrome or Chromium for the auto-open behaviour. python3 on the PATH, which is used for the local HTTP server, the activity logger, and the index builder. jq is optional.
The automated install is one command from inside the extracted folder:
The installer creates ~/.claude/{hooks,agents,skills,workflow-docs}/, copies the hook scripts, the subagent definition, and the skill files, then merges its settings.json fragment into your existing ~/.claude/settings.json without overwriting any keys. A timestamped backup is written to ~/.claude/settings.json.bak.<epoch>. The script is idempotent for files.
From that point on, the next Claude Code session opens file://$HOME/.claude/workflow-docs/index.html in Chrome automatically.
The behaviour is driven by two Claude Code hooks (scripts that fire on specific lifecycle events) registered in ~/.claude/settings.json. On SessionStart, bootstrap-flows.sh injects a compact summary of the project's architecture into Claude's context, and open-workflow-docs.sh opens the browser tab. On UserPromptSubmit, the same script rebuilds the per-project index.html if flows.json or the template changed. Each project gets its own URL under http://127.0.0.1:47318/projects/<slug>/ so opening Claude Code in different repos never clobbers another tab. Within a single session the hook only opens Chrome once and then no-ops for about eight hours per working directory, so it doesn't steal focus on every prompt.
The minimal hook entry looks like this:
The board pulls from two sources, and which one is active depends on whether the agent has planned the work explicitly.
| Source | When active | What you see |
|---|---|---|
| TodoWrite (explicit) | After asking Claude to plan | Exact task text, priorities, no live badge |
| Synthesized fallback | Always / when no todos exist | Agent goals or last known action, green live badge |
TodoWrite is the built-in planning tool Claude Code uses when you ask it to think first. Tell the agent "plan this work as tasks first, then execute" and the board fills with the explicit task list full descriptions, High / Medium / Low priority badges, and no live indicator. If you just start working without planning, the board still shows something: a synthesized view derived from the agent's activity stream, marked with a green live badge so you know it's inferred, not declared.
Everything is driven in plain English through the workflow-kanban-task skill. The phrasings that work:
add a task: implement the auth refresh flowstart the auth taskdone with the auth taskshow tasksremove the auth task or clear all done tasksTasks live at ~/.claude/workflow-docs/projects/<slug>/tasks.json, and the board polls that file every second.
The Prompt Enhancer is a Claude project (Claude's term for a chat workspace with its own system instructions and shared files) at promt enhancer files. You paste in a rough one-line request and it returns a structured prompt that follows a strict template: scope, work items, pull-request routing, and a Kanban Workflow section that calls the workflow-kanban-task skill to auto-create, start, and finish the tasks the board will display.
The Kanban Workflow block at the bottom of every enhanced prompt looks like this:
That block is what makes the whole thing self-driving. The agent reads it as instructions, the skill routes each line to the right action, and the board reflects the work as it happens.
I open a terminal, cd into a project, and run claude. The dashboard opens in a fresh Chrome tab on http://127.0.0.1:47318/projects/<slug>/index.html, already showing the architecture for that repo.
I have a rough idea "the price constants are duplicated across three sheets and one of them is still using camelCase, untangle it." I drop that line into the Prompt Enhancer in another tab. It returns a structured prompt with the scope, the files in play, the PR target, and the Kanban Workflow section pre-filled with the four or five tasks the work breaks down into.
I paste the enhanced prompt into the Claude Code terminal. Within a second or two the kanban board shows the tasks in the Planned column with their priority badges. The agent starts on the first one and the card slides to In Dev. I switch to the Activity tab and watch the tool calls scroll past read this file, edit that one, run the tests.
When something looks wrong a test fails, a tool keeps retrying I have the log right there. I don't need to re-derive what the agent has been doing. I see it. If I need to intervene I do, and the board catches up the moment the agent picks up again.
By the end of the session every card is in the Done column and the activity log is a complete trail of what changed and why.
This isn't magic, and it's not meant to be. It's the opposite visibility, not automation. The board exists so the agent's work is auditable by the human running it. That's useful for solo developers who want to keep a grip on what their tools are doing, useful for small teams who want a shared view of in-flight agent work, and understandable for non-engineers who might be watching from the side. The agent gets faster the more you trust it. You trust it more when you can see what it just did.