Mastering `cm-dashboard`: The Complete Guide

Hướng dẫn chi tiết về Mastering `cm-dashboard`: The Complete Guide trong Vibe Coding dành cho None.

Skills used: cm-dashboard

You’ve been there: it’s 2 AM, your terminal buffer is 5,000 lines deep, and you’re running three different autonomous agents to scaffold a complex Next.js feature. One agent is handling the Prisma schema, another is fighting with Tailwind animations, and the third is supposedly writing unit tests. You ask the “Master Agent” for a status update, and it hallucinatingly tells you everything is “on track,” even though the build just failed three minutes ago.

This is the Cognitive Load Wall. In the world of Vibe Coding, where we move at the speed of thought, the biggest bottleneck isn’t the AI’s coding ability—it’s your ability to maintain a mental map of what the AI is actually doing. When you lose the “thread of execution,” the “vibe” breaks, and you’re forced back into manual debugging.

Enter cm-dashboard.

The cm-dashboard skill is the visual nervous system of the Cody Master kit. It transforms invisible terminal operations into a high-signal, persistent Kanban board that acts as the Single Source of Truth (SSOT) for both you and your agents. This guide will take you through mastering this tool to bridge the gap between chaotic CLI outputs and professional-grade project orchestration.

Core Concepts: The Visual Epistemic Loop

To master the dashboard, you must understand that it isn’t just a “UI for logs.” It is a manifestation of the Epistemic Loop: a cycle where the agent observes the workspace, documents its intent, executes a change, and validates the result.

1. Tracks and Tasks: The Hierarchy of Intent

The dashboard organizes work into Tracks and Tasks.

  • A Track represents a logical work unit (e.g., “Implement Stripe Integration” or “Fix Auth Regressions”). It maps directly to a branch or a specific feature set.
  • A Task is an atomic, actionable step within that track (e.g., “Define Webhook Secret in .env” or “Create Success Redirect Page”).

In your workspace, these are often governed by the scripts/cm-dash.js engine, which parses the logs/events.jsonl file to determine the current state of the world. By visualizing these, cm-dashboard prevents “Task Drift,” where an agent starts a task but gets distracted by a shiny refactoring opportunity three files away.

2. State Persistence via CONTINUITY.md

One of the most powerful features of the cm-dashboard is its integration with cm-continuity. While the dashboard provides the visual state, the underlying data is often mirrored in a CONTINUITY.md file or a hidden state JSON. This ensures that even if you restart your terminal or switch agents, the new agent “looks” at the dashboard (via its internal tools) and immediately understands what was completed and what failed.

3. The Bridge: From CLI to Web

The dashboard operates as a bridge. It uses a local watcher (like scripts/dashboard-watcher.js) to monitor file changes and log events. It then serves a local-first web interface that allows you to “see” the agent’s brain. When you run a command like gemini cm-dashboard, you aren’t just opening a page; you are activating a real-time telemetry system for your codebase.

How It Works: The Mechanical Underpinnings

When you invoke the cm-dashboard skill, a few things happen under the hood:

  1. Log Ingestion: The system scans your /logs directory, specifically files like events.jsonl. It looks for specific schemas that define “Task Started,” “Task Success,” or “Validation Failure.”
  2. State Synthesis: It correlates these logs with your task_plan.md or plan.md files. If a task is mentioned in a plan but no log exists for its completion, the dashboard marks it as “Pending.”
  3. Visual Rendering: It generates a Kanban-style view.
    • To Do: Tasks defined in your plan.md.
    • In Progress: The task the agent is currently modifying with replace or write_file.
    • Validating: The phase where the agent is running npm test or tsc.
    • Done: Tasks that have passed all validation gates.

This real-time feedback loop is what allows “Vibe Coding” to scale. Instead of reading logs, you look at the board. If a card turns red, you know exactly which validation gate failed without hunting through terminal scrollback.

Practical Example: Orchestrating a Marketplace Feature

Let’s walk through a real-world scenario where cm-dashboard saves the day. Imagine you are building a “Digital Asset Marketplace.”

Step 1: Initialization

You start by defining your track. You might tell the agent:

“Start a new track for the Marketplace Listing feature. Create a plan and initialize the dashboard.”

The agent uses conductor-new-track (or a similar tool) to generate a plan. Immediately, the cm-dashboard populates. You open the link, and you see five “To Do” cards:

  1. Define Listing Schema.
  2. Create Upload API.
  3. Build Gallery Component.
  4. Implement Price Validation.
  5. Add Search Indexing.

Step 2: The “In Progress” Dance

As the agent begins writing the Prisma schema, you see the “Define Listing Schema” card move to In Progress. You can click the card in the dashboard to see the intent—the agent’s internal rationale for why it’s choosing Decimal over Float for the price field.

Step 3: Handling a Validation Failure

The agent moves to “Implement Price Validation.” It writes the Zod schema and the frontend logic. It moves the card to Validating. Suddenly, the card turns bright red.

Instead of asking the agent “What happened?”, you click the red card. The dashboard shows the exact output of the failed test: Expected price to be positive, received -10. You realize you forgot to tell the agent about your “Free Item” edge case.

You simply prompt:

“I see the validation failure on the Price task. Adjust the Zod schema to allow 0 for free items.”

The agent acknowledges, fixes the code, and you watch the card turn green and move to Done in real-time. This is “Vibe Engineering”—high-level steering with zero-latency feedback.

Best Practices & Tips for Power Users

To get the most out of cm-dashboard, you need to treat it as part of your development discipline, not just a passive monitor.

1. Atomic Task Naming

The dashboard is only as good as the names of your tasks. Avoid vague names like “Fix stuff.” Use actionable, outcome-oriented names like “Refactor Lang Switcher for i18n Parity.” This helps the dashboard (and you) understand exactly what “Done” looks like.

2. Use the “State Injection” Pattern

If you notice the dashboard is out of sync (perhaps you manually edited a file and the agent doesn’t know), you can “inject” state.

“Update the dashboard: I’ve manually handled the .env setup. Mark Task 1 as Done.” This keeps the agent’s mental model aligned with reality.

3. Dashboard-First Code Reviews

Before you merge a PR generated by an agent, open the cm-dashboard. Look at the “Validation History” for each task. If a task moved from “In Progress” to “Done” without ever hitting “Validating,” that’s a red flag. It means the agent might have skipped the testing phase. Professional Vibe Coding requires the “Trust but Verify” approach, and the dashboard is your verification suite.

4. Integrating with Design Tools

If you use the pencil or stitch tools, the dashboard can often show thumbnails of the generated UI. By seeing the visual output next to the task status, you can catch design regressions (like a broken button layout) before the agent even finishes the technical implementation.

The Problem cm-dashboard Solves

The “Vibe Coding” movement is often criticized for producing “spaghetti code” or “unmaintainable AI hallucinations.” This criticism is valid if you rely on the AI to manage its own context without oversight.

The problem cm-dashboard solves is Context Fragmentation. In a standard CLI interaction, context is linear. Once a piece of information is 50 messages back, it effectively disappears from the agent’s “working memory” unless it’s explicitly pulled back in.

By having a persistent, file-based dashboard (mapped to your logs/ and docs/ folders), you create a “Long-Term Working Memory.” The agent doesn’t have to “remember” that it finished the Auth task; it can “see” the status on the board. This reduces the token overhead and increases the reliability of autonomous work.

Conclusion: From Vibes to Systems

Vibe Coding is about intuition, speed, and creativity. But to build products that actually ship and stay maintainable, intuition needs structure. cm-dashboard is that structure.

By mastering the dashboard, you stop being a “prompt engineer” who just throws words at a black box, and you start being an AI Orchestrator. You manage tracks, you monitor validation gates, and you steer complex autonomous workflows with a level of clarity that was previously impossible in a CLI-only environment.

As you continue your journey with the Todyle Vibe Coding platform, make the dashboard your primary view. Watch the cards move, respect the validation gates, and let the tool handle the cognitive load so you can stay in the flow. The “vibe” is only as strong as the system supporting it—and with cm-dashboard, your system is unbreakable.


Next Steps: Try running scripts/cm-dash.js in your current project and see how it parses your existing plan.md. If you don’t have a plan yet, use conductor-new-track to start one and watch the magic happen.