Agent Command Center

Your AI development setup is more powerful than you think.
Now you can actually see it.

Quick Start • What It Finds • Features • Customize • Contribute

---

---

The Problem

You've been building with AI development tools for weeks. Maybe months. You've got:

• 5 slash commands you wrote at 2am and forgot about
• 8 MCP servers — some from the marketplace, some custom
• Hooks that guard secrets, lint on save, sync dashboards
• 14 repos with agents, schedulers, and cron jobs scattered across them
• A settings.json that's 200 lines deep

Where does it all live? What's connected to what? What's even running?

You don't know. Nobody does. There's no single view.

The Fix

git clone https://github.com/seang1121/acc-agent-command-center.git
cd acc-agent-command-center
npm install --legacy-peer-deps
python scripts/setup.py
npm run dev

ACC scans your entire AI development setup — ~/.claude/, your settings, your repos — and builds a live dashboard showing everything you've built, how it connects, and what state it's in.

One command. Zero manual config. Your whole ecosystem, visualized.

---

What It Finds

The scanner is opinionated about where to look and aggressive about what it pulls:

Discovery	Source	What You Get
Slash commands, agents, skills	~/.claude/commands/, agents/, skills/	Name, type, description (parsed from frontmatter)
MCP servers	~/.claude/settings.json	Server name, transport, command, env vars
Marketplace plugins	settings.json enabledPlugins	Every plugin you've installed or enabled
Hooks	settings.json hooks + ~/.claude/hooks/	Event type, matcher, command — the full picture
Git repos	~/, ~/projects/, ~/repos/, ~/code/, ~/dev/, ~/workspace/	Remote URL, tech stack auto-detected, description from package.json or README.md
Tech stacks	package.json, requirements.txt, Cargo.toml, go.mod, etc.	Python, TypeScript, React, Flask, Rust, Go, Docker — 16+ frameworks detected

Everything lands in src/data/*.json. Your data stays gitignored — only example templates are committed.

---

Features

Interactive Ecosystem Map

A radial graph centered on your LLM engine that shows every project, how they connect, and what data flows between them. Domain-grouped nodes (Sports, Finance, Infra, Outdoors) orbit the center with color-coded relationship edges. Fully interactive — drag any node to rearrange, zoom in/out, pan around, and click any project for a detail panel with tech stack, status, and description. The minimap gives you a bird's-eye view of your entire ecosystem at a glance.

Per-Project Deep Dives

Click any project in the sidebar to see its agents, schedulers, cron jobs, scripts, repos, and MCP servers — all in one view. Category groupings configurable per project.

Developer Ecosystem Tab

Every AI tool you own on one screen: commands, agents, skills, hooks, marketplace plugins. See what's installed, what's custom, and what's built-in.

Global Search

Ctrl+K filters across every tab — projects, agents, tools, repos. Instant results as you type.

Auto-Sync Hook

Install a stop hook and your dashboard updates itself every time you end a session:

bash scripts/install-hook.sh

One command. Runs setup.py on every session close. Your dashboard is always current.

Privacy by Default

Real data files are gitignored. Only .example.json templates (with fictional "Acme Labs" data) are committed. Clone this repo, push it to your own GitHub — zero risk of leaking your setup.

---

3 Commands to Your Dashboard

Prerequisites: Node.js 18+, Python 3.10+

# 1. Clone and install
git clone https://github.com/seang1121/acc-agent-command-center.git
cd acc-agent-command-center
npm install --legacy-peer-deps

# 2. Scan your system (discovers everything automatically)
python scripts/setup.py

# 3. Launch
npm run dev

Open localhost:3100. That's it.

Run npm run dev to see a working dashboard with example data so you know what you're getting.

---

Make It Yours

Change what shows in the sidebar

Edit acc.config.json:

{
  "title": "My Command Center",
  "projectTabs": [
    { "projectId": "my-api", "label": "API", "icon": "server" },
    { "projectId": "my-bot", "label": "Bot", "icon": "bot" }
  ],
  "centerNode": "my-api"
}

Icons: overview projects github automations claude bot chart server database wrench globe dollar sun

Edit data directly

All data lives in src/data/*.json — 11 files, each with a clear schema. Edit them directly or re-run the scanner. Hot reload picks up changes instantly.

Extend the scanner

Add a discover_*() function in scripts/setup.py, call it from main(), and save output with save_json(). The scanner is pure Python with zero dependencies.

Use the slash command

Run /setup-acc to trigger the scanner from inside your session.

---

Data File Reference (11 files)

File	What's Inside
agents.json	AI agents — type, purpose, weight, data sources, module path, status
schedulers.json	Scheduled tasks — cron expression, timezone, trigger type
cron-jobs.json	Cron jobs — enabled/disabled, error count, delivery target
repos.json	Git repos — remote URL, visibility, description, project mapping
projects.json	Projects — tech stack, status, highlights, related projects
infrastructure.json	MCP servers, hooks, and scripts — the glue layer
claude-tools.json	Commands, agents, skills — everything in ~/.claude/
marketplace-plugins.json	Installed plugins — kind, transport, install count
relationships.json	Graph edges — from/to/label/type for the relationship map
descriptions.json	Section descriptions — override default labels per category
archived.json	Deprecated repos — kept for reference, hidden from active views

Each file has a .example.json template with fictional Acme Labs data.

Project Structure

acc-agent-command-center/
├── src/
│   ├── components/          # 25 React components
│   │   ├── cards/           # AgentCard, RepoCard, McpCard, CronJobCard...
│   │   ├── layout/          # Header, Sidebar, SearchBar, CardGrid
│   │   ├── overview/        # OverviewTab, RelationshipMap, StatsBar
│   │   ├── shared/          # StatusBadge, TagPill, FilterBar, InfoRow
│   │   └── tabs/            # ProjectDetail, Automations, Claude, GitHub
│   ├── config/              # Config loader + icon registry
│   ├── data/                # 11 JSON data files (gitignored) + 11 examples
│   ├── hooks/               # useDashboardData hook
│   ├── layout/              # Force-directed graph engine
│   ├── types/               # TypeScript types (strict, no `any`)
│   └── utils/               # Formatters, color maps
├── scripts/
│   ├── setup.py             # The auto-scanner (zero dependencies)
│   ├── auto_sync.py         # Lightweight wrapper for hook usage
│   ├── init-data.ts         # Copies examples on first `npm run dev`
│   └── install-hook.sh      # One-command auto-sync installer
├── .claude/commands/
│   └── setup-acc.md         # /setup-acc slash command
├── acc.config.example.json  # Dashboard config template
├── CONTRIBUTING.md
└── package.json

---

Tech Stack

Layer	Tech	Why
UI	React 19 + TypeScript 5.9 (strict)	Type-safe components, zero any
Styling	Tailwind CSS 4.2	Dark theme only, utility-first
Build	Vite 8	Sub-second hot reload
Scanner	Python 3 (stdlib only)	Zero dependencies, runs anywhere
Graph	React Flow + custom radial layout	Interactive drag-and-drop, zoom, minimap — LLM at the center

---

Contributing

See CONTRIBUTING.md. PRs welcome — especially new card types, scanner sources, and theme improvements.

Credits

Built for AI-powered development by @seang1121.

License

MIT — use it, fork it, ship it.