Operator dashboard

AI Ops Dashboard

Where it all comes together

⚙ Tabs

Show or hide any dashboard tab.

How: Toggle tabs on/off and pick the default tab. Hidden tabs stay installed and can be turned back on anytime — nothing is deleted.

Change the dashboard's color theme.

How: Pick any of the 8 themes — your choice is saved in this browser only (it doesn't change the shared default).

Data updated 10/19/2018, 6:46 PM PDT
Rendered 6/20/2026, 12:12 AM PDT · auto-refresh 120s
← AI Operations Dashboard docs·help/custom-tabs.md

Custom tabs

The 12 built-in panels (Overview, Plan, Sprints, Activity, Pending, Log, Postmortems, Usage, Scheduled Jobs, Repos, Docs, Skills) — plus a guided "Start Here" onboarding checklist — cover the most common operator workflows, but they will not cover every use case. When you need something else — a customer-feedback log, an OKR tracker, a content calendar, a research notebook, a Stripe-events viewer — add your own panel in about 2 minutes through the wizard or the CLI.

Custom tabs are first-class citizens. They render alongside the built-ins on /preview/operator, they get a slot in ai-ops-dashboard.config.ts, and they get registered into the AI memory files (CLAUDE.md, AGENTS.md) so Claude Code and other agents can read from and write to them through the CLI without any extra prompting.

See also: HANDBOOK.md for the project model, AGENTS.md for the agent contract, USAGE.md for the CLI reference.

When to use which archetype

Every custom tab inherits from one of 5 archetypes. The archetype decides the data shape, where the data lives, the renderer, and the CLI subcommand surface. Pick the closest match — you can always edit the generated panel afterward.

| Archetype | Data shape & location | Renderer | Example use cases | |---|---|---|---| | list | JSON items[] in data/<slug>.json — each row has id, title, status, plus optional why, tags[] | Filterable cards, sorted by status rank then date, with status pills | Task queue, customer feedback, bug backlog, lead pipeline, OKR tracker | | timeline | Append-only Markdown in docs/<slug>.md — ## YYYY-MM-DD HH:MM — title entries, newest first, optional **Tags:** | Reverse-chronological cards with timestamps and color-coded tags | Decision log, incident timeline, research journal, changelog, "things I learned this week" | | metrics | JSON metrics[] in data/<slug>.json — name, value, plus optional unit, trend, target | KPI card grid with trend arrows (↑ ↓ —) and optional targets | Stripe MRR, GitHub stars, NPS, uptime / SLA, sprint velocity | | folder | A knowledge/<slug>/ directory of Markdown files, each with YAML frontmatter (title, date, optional status, tags) | Document list sorted by date, with status / tag chips and archive support | Case studies, ADRs, design briefs, runbooks, customer success stories | | rest | Read-only cache (data/<slug>.cache.json) of a REST endpoint's JSON, refreshed on demand | Card list with item count and last-sync time; prompts you to refresh when empty | Live GitHub issues / PRs, external status page, public API data, Notion export |

`rest` is read-only — it supports only refresh and list (the data lives upstream, so you never add to it). The other four are writable through the CLI.

Quick chooser:

  • Append events you rarely edit → `timeline`.
  • Track records whose status changes over time → `list`.
  • Show numbers (current value, trend, target) → `metrics`.
  • Keep a set of long-form docs, one file each → `folder`.
  • Mirror a live external API → `rest`.

Adding a custom tab

Two paths. Both produce identical output — the wizard is faster for one-offs, the CLI is better for scripting and for adding tabs from inside an AI session.

Option A: Web wizard

pnpm dev

Then navigate to http://localhost:3000/admin/add-tab. The wizard walks 6 steps:

  1. Tab name — human label that appears on the tab strip (e.g. "Customer feedback").
  2. Slug — kebab-case identifier used in URLs, file names, and CLI commands. Auto-suggested from the name; edit if you want something shorter.
  3. Archetype — pick one of the 5 above. The wizard previews the data shape and the sample render.
  4. Schema — confirm or extend the default fields for your archetype. Add custom columns here (e.g. rating: number for customer feedback).
  5. Seed data — paste 1–3 example rows so the panel is not empty on first render. Optional but recommended.
  6. Review — diff of all files that will be created or mutated. Click Apply.

The wizard writes the files, hot-reloads the dev server, and drops you on the new tab. Total elapsed time is usually under 2 minutes.

Option B: CLI

npx ai-ops-dashboard panel add

Runs the same flow as interactive prompts. For scripting, pass all the answers as flags in one shot:

npx ai-ops-dashboard panel add \
  --name "Customer feedback" \
  --slug customer-feedback \
  --archetype list \
  --fields "rating:number,source:string" \
  --seed ./feedback-seed.json

The CLI is the right choice when you are scaffolding tabs from inside a Claude Code session, when you are adding several at once, or when you want the add step to live in a setup script that another operator can re-run.

What gets generated

Each panel add mutates exactly 8 files. Knowing the list helps you predict diffs and helps you remove a tab cleanly later.

  1. `components/panels/<slug>-panel.tsx` — the React component that renders the tab. Created from the archetype template.
  2. The data file — data/<slug>.json for list and metrics, docs/<slug>.md for timeline, a knowledge/<slug>/ directory for folder, or data/<slug>.cache.json for rest. Treat it like any other tracked data file.
  3. `ai-ops-dashboard.config.ts` — appended: import of the new panel + entry in the panels[] array (controls tab order and labeling).
  4. `data/panel-manifest.json` — appended: manifest entry with slug, archetype, data path, and schema. Read by the dashboard and by AI agents.
  5. `AGENTS.md` — appended: a "Custom panel: <slug>" section describing the CLI commands and data path, so any code-running agent can interact with it.
  6. `CLAUDE.md` — appended: a one-paragraph entry under "Custom tabs" pointing Claude Code at the same surface.
  7. `.claude/skills/ai-ops-dashboard/SKILL.md` — appended: registers the new subcommand so the skill surfaces it to Claude.
  8. `recipes/<slug>.md` — created: a short "how to use this tab" recipe with example CLI calls, written to the docs so the next operator finds it.

Nothing else is touched. If you see edits outside these 8 files, treat that as a bug — file an issue with the diff.

Using the new tab from AI

Because the wizard / CLI registers the new tab in CLAUDE.md, AGENTS.md, and the ai-ops-dashboard skill, any AI session that opens this repo will see the tab immediately. You do not have to prompt-engineer it.

Sample Claude Code prompt right after adding a customer-feedback tab:

> Add a customer-feedback item — Title: "Loved the new export flow." Rating: 5. Source: in-app survey.

Claude reads CLAUDE.md, sees the registered tab and its CLI surface, and runs:

npx ai-ops-dashboard customer-feedback add \
  --title "Loved the new export flow." \
  --rating 5 \
  --source "in-app survey"

The entry lands in data/customer-feedback.json, the dashboard picks it up on the next request, and the entry shows on the new tab. No other touchpoint — no schema edit, no manifest edit, no restart — is required.

The same path works from agent-mode tools (Cowork SKILLs, GitHub Actions, scheduled cron). The CLI is the universal surface.

Editing custom tabs after creation

The generated files are yours. Treat them as ordinary code.

  • Change the render — edit components/panels/<slug>-panel.tsx directly. Add filters, columns, sparklines, whatever you want. The archetype template is a starting point, not a contract.
  • Change the schema — edit data/panel-manifest.json and update the panel TSX to read the new fields. The CLI's add subcommand auto-generates flags from the manifest schema on next build, so add the field there if you want CLI support.
  • Edit existing entries — edit the tab's data file directly (data/<slug>.json, docs/<slug>.md, or the knowledge/<slug>/ folder, per archetype). There is no row-by-row admin UI; the source of truth is the file.

The manifest is read fresh on every dashboard request in dev, and at build time in production. You do not need to restart pnpm dev after a schema tweak.

Removing a custom tab

Three steps, all by hand to keep the operation auditable:

# 1. Delete the panel component.
rm components/panels/<slug>-panel.tsx

# 2. Edit ai-ops-dashboard.config.ts — remove the import line and the entry from the panels[] array.
# 3. Optionally delete the data file if you no longer want the history:
rm data/<slug>.json   # or docs/<slug>.md · knowledge/<slug>/ · data/<slug>.cache.json, per archetype

On the next build, the manifest auto-prunes any entry whose panel file no longer exists, and the AGENTS.md / CLAUDE.md / SKILL.md blocks are pruned in the same pass. If you want the AI memory cleanup to happen immediately rather than at next build, run npx ai-ops-dashboard manifest refresh.

Troubleshooting

Five issues you are likely to hit, in order of frequency:

  1. "Slug already exists" / bad slug. Slugs must be unique, kebab-case, and not collide with the 12 built-in panels (overview, plan, sprints, activity, pending, log, postmortems, usage, scheduled, repos, docs, skills). Pick a more specific slug — customer-feedback not feedback, stripe-events not events.
  1. Archetype mismatch — data does not render. You picked timeline but seeded a list-shaped payload (rows with statuses), or vice versa. The renderer expects the archetype's field set. Fix: either re-seed in the right shape, or switch the archetype in data/panel-manifest.json and regenerate the panel TSX with npx ai-ops-dashboard panel regenerate <slug>.
  1. AI cannot find the tab. CLAUDE.md is read at session start. If you added the tab mid-session, the running session does not yet know about it. Restart the session (close + reopen the Claude Code conversation) or have Claude re-read CLAUDE.md explicitly. Same applies for AGENTS.md with other agents.
  1. CLI dispatch fails (`unknown command: <slug>`). The CLI reads from the manifest. If the manifest entry is missing, run npx ai-ops-dashboard manifest refresh to rebuild it from ai-ops-dashboard.config.ts + the panel files on disk. If that does not fix it, check that the panel TSX exports a default component — the manifest builder skips files without one.
  1. Validator rejects the tab on build. pnpm prebuild runs a panel-coverage validator that fails if a panel is registered in ai-ops-dashboard.config.ts but its data file is missing, or vice versa. Read the error — it names the missing file. The fix is almost always to either commit the seed data file or remove the dangling registration.

If you hit something not on this list, the most useful diagnostic is npx ai-ops-dashboard panel inspect <slug> — it dumps the manifest entry, the data file path, the panel component path, and the CLI subcommand surface for that slug in one view.

Cross-reference: HANDBOOK.md (project model), AGENTS.md (agent contract), USAGE.md (CLI reference), panels.md (built-in panel catalogue).

Custom tabs