gh-cskiro-claudex-claude-code-tools/skills/cc-insights/modes/mode-3-dashboard.md

Mode 3: Interactive Dashboard

When to use: Rich visual exploration and ongoing monitoring

Trigger Phrases

• "Launch the insights dashboard"
• "Start the visualization server"
• "Show me the interactive insights"

Process

1. User asks to start the dashboard
2. Skill launches Next.js dev server
3. Opens browser to http://localhost:3000
4. Provides real-time data from SQLite + ChromaDB

Dashboard Pages

Home

• Timeline of recent conversations
• Activity stats and quick metrics
• Summary cards

Search

• Interactive semantic + keyword search interface
• Real-time results
• Filter by date, files, tools

Insights

• Auto-generated reports with interactive charts
• Trend visualizations
• Pattern detection results

Files

• File-centric view of all conversations
• Click to see all conversations touching a file
• Modification frequency heatmap

Analytics

• Deep-dive into patterns and trends
• Tool usage statistics
• Activity patterns by time of day/week

Tech Stack

• Framework: Next.js 15 with React Server Components
• Styling: Tailwind CSS
• Charts: Recharts
• Data: SQLite + ChromaDB
• URL: http://localhost:3000

Starting the Dashboard

# Navigate to dashboard directory
cd ~/.claude/skills/cc-insights/dashboard

# Install dependencies (first time only)
npm install

# Start development server
npm run dev

The browser will automatically open to http://localhost:3000.

Stopping the Dashboard

Press Ctrl+C in the terminal or close the terminal window.