core-github-api

OK please proceed with the workflow enhancements (wizard & pr command center) for the UI to trigger these powerful new agents. In addition, please also incporate the frontend components (and drizzle schema, reminder drizzle and ORM -- no raw sql) as well - this is diceui which are expandable shadcn components so it should play nice with the frrontend

The Colby Control Center is shaping up to be a powerhouse. Integrating @diceui/kanban (for backlog/task management), @diceui/stat (for health scores), and @diceui/timeline (for visualizing agent thought processes) will elevate the UX from a simple admin panel to a true mission control.

Here is the updated prompt package for your AI agent. It includes the Drizzle schema changes to support these new features and the instructions for integrating the Dice UI components.

🖥️ Prompt for AI Agent: Colby Control Center (Dice UI Edition)

System Role: You are a Senior Frontend Architect and Full-Stack Engineer. You are building "Colby Control Center," the mission control dashboard for an autonomous DevOps agent.

Objective: Enhance the dashboard with rich data visualization and task management capabilities using Shadcn UI and Dice UI. The backend (Cloudflare Worker) must support persistent storage for these features.

Tech Stack Additions:

• Frontend: @diceui/kanban, @diceui/stat, @diceui/timeline.
• Backend: Drizzle ORM (D1 Database).

Part 1: Database Schema (Drizzle) Create a new migration file migrations/0017_project_management.sql and update src/db/schema.ts to include these tables:

1. tasks (Kanban Board)

   • id: TEXT (UUID)
   • repo_id: INTEGER (Foreign Key to repos.id)
   • title: TEXT
   • description: TEXT (Markdown)
   • status: TEXT (Enum: 'backlog', 'todo', 'in-progress', 'review', 'done')
   • priority: TEXT (Enum: 'low', 'medium', 'high', 'critical')
   • assignee: TEXT (GitHub Username or 'colby-bot')
   • created_at: TIMESTAMP
   • updated_at: TIMESTAMP
   • position: INTEGER (For drag-and-drop ordering)

2. agent_activities (Timeline)

   • id: TEXT (UUID)
   • operation_id: TEXT (Links to operation_logs)
   • step_name: TEXT (e.g., "Analyzing Dependencies")
   • status: TEXT ('pending', 'active', 'completed', 'failed')
   • details: TEXT (JSON string for extra context)
   • timestamp: TIMESTAMP

3. repo_stats (Stats Cards)

   • repo_id: INTEGER
   • health_score: INTEGER (0-100)
   • open_issues_count: INTEGER
   • prs_merged_this_week: INTEGER
   • last_updated: TIMESTAMP

Part 2: Frontend Components (Dice UI Integration)

A. The "Task Board" (Kanban)

• Component: components/ProjectBoard.tsx
• Library: @diceui/kanban (plus @dnd-kit/core deps).
• Features:
  • Columns: Backlog | To Do | In Progress | Done.
  • Drag & Drop: Moving a card updates the status and position via an API call (PATCH /api/tasks/:id).
  • "Colby Tasks": Highlight cards assigned to 'colby-bot' with a special badge. These represent active agent jobs (like "Fix Types").

B. The "Mission Status" (Stats)

• Component: components/RepoHealthCard.tsx
• Library: @diceui/stat
• Usage:
  • Display "Repo Health" (0-100%) with a color-coded indicator (Green > 80, Red < 50).
  • Display "Pending Fixes" count.
  • Display "Agent Activity" trend (Up/Down arrow).

C. The "Agent Brain" (Timeline)

• Component: components/AgentWorkflowTimeline.tsx
• Library: @diceui/timeline
• Context: Use this inside the PR Command Center and Live Ops Console.
• Behavior:
  • Polls /api/ops/:id/timeline.
  • Renders a vertical timeline of the agent's steps.
  • Active Step: Pulses or shows a loading spinner.
  • Completed Steps: Shows a green checkmark.
  • Failed Steps: Red 'X' with a collapsible error log.

Part 3: API Endpoints (Hono) Update src/index.ts to expose these new data points:

• GET /api/repos/:owner/:repo/tasks: Fetch kanban items.
• PATCH /api/tasks/:id: Update status/position (for drag-and-drop).
• GET /api/repos/:owner/:repo/stats: Calculate and return health metrics.
• GET /api/ops/:operationId/timeline: Return the structured log of agent steps for the timeline view.

Instructions:

1. Generate the SQL migration.
2. Create the Drizzle schema definitions.
3. Scaffold the React components using the provided Dice UI examples as a template.
4. Implement the API routes to feed data to these components.

🧠 Strategic Insight for the "Agent Brain" Timeline

When the agent runs a complex task (like /colby fix all), you should have it emit timeline events explicitly.

In your container/src/task_runner.ts (or wherever the logic lives), add a helper function:

// Helper to push timeline updates to the Worker
async function emitStep(stepName: string, status: 'active' | 'completed' | 'failed', details?: string) {
  await fetch(`${process.env.COLBY_API_URL}/api/ops/${process.env.OPERATION_ID}/timeline`, {
    method: 'POST',
    body: JSON.stringify({ step: stepName, status, details })
  });
}

// Usage in task
await emitStep("Cloning Repository", "active");
execSync("git clone ...");
await emitStep("Cloning Repository", "completed");

await emitStep("Analyzing Code", "active");
// ... AI logic ...
await emitStep("Analyzing Code", "completed", "Found 3 files to fix.");

This connects the Container's brain directly to the Frontend's visual timeline, giving you that satisfying "step-by-step" progress view.