Published: 2026-02-17

Building an Autonomous Agent Dashboard: Lessons from KARA

How I built a real-time command center for AI operations

---

The Problem

Running an AI assistant that operates autonomously creates a visibility problem:

- What's KARA doing right now?
- Did that task I assigned get completed?
- What broke and when?
- How much is this costing?

Without answers, you're flying blind.

---

The Solution: Three-Layer Architecture

Layer 1: The Dashboard (React + Tailwind + Supabase)

Kanban Board:
- Drag-and-drop task management
- Assign tasks to KARA, Melody, or both
- Project-based filtering (Tech Tips, Magic Shop, Dreamwav)
- Real-time updates via Supabase subscriptions

Shift Output:
- Review overnight work in structured format
- Approval workflow: Approve / Partial / Reject
- Calendar view with shift history
- Metrics: tokens used, cost, duration

Observatory:
- Real-time activity feed
- System uptime counter
- Service health checks
- Top tools and skills used

Layer 2: The Agent (Node.js + OpenClaw)

Kanban Watchdog:

// Runs every 2 hours via cron
cron: "0 /2 * * "
action: Check kanban_tasks for items assigned to KARA
execution: Auto-run tasks, update status, log activity
notification: Telegram message on completion

Shift Logger:

// Structured shift tracking
shift-logger.js start 1    // Begin Shift 1
shift-logger.js add code "Fixed bug"  // Log work
shift-logger.js end          // Complete and generate report

Layer 3: The Database (Supabase)

Key Tables:
- kanban_tasks - Task management with RLS
- shifts - Shift outputs and approval status
- system_activity - Real-time activity log
- service_status - Health monitoring
- tool_usage / skill_usage - Analytics

---

The Technical Challenges

Challenge 1: Row Level Security (RLS)

Problem: Dashboard shows RLS errors, changes don't save.

Solution: Comprehensive RLS policies for all operations:

-- Read access
CREATE POLICY "Allow authenticated read all" ON kanban_tasks
  FOR SELECT TO authenticated USING (true);

-- Write access (this was missing!)
CREATE POLICY "Allow authenticated insert" ON kanban_tasks
  FOR INSERT TO authenticated WITH CHECK (true);
  
CREATE POLICY "Allow authenticated update" ON kanban_tasks
  FOR UPDATE TO authenticated USING (true);

Challenge 2: Activity Tracking

Problem: No visibility into what the AI is doing.

Solution: Three-tier logging system:
1. Auto-logger - Intercepts console output
2. Session logger - Real-time flushing to database
3. Daily summary - Automated reports

// Any script can enable comprehensive logging
const { enable } = require('./auto-logger');
enable();

// Now ALL significant console output is logged
console.log('Task completed'); // Auto-logged

Challenge 3: UUID vs String IDs

Problem: Demo data used "shift-001" but database expected UUIDs.

Error: invalid input syntax for type uuid: "shift-002"

Solution: Convert demo data to proper UUID format or change column type to TEXT.

---

The Results

| Metric | Before | After |
|--------|--------|-------|
| Task Visibility | None | Real-time Kanban |
| Work Review | Manual check | Structured Shift Output |
| Activity Logging | None | Every action logged |
| Task Execution | Manual trigger | Auto-watchdog every 2h |
| Daily Reports | None | Auto-generated at 11 PM |

---

Key Takeaways

1. RLS is not optional - If your dashboard can't write, check your policies
2. Log everything - You can't improve what you can't see
3. Automate the automation - The watchdog should run without human triggers
4. Demo data matters - Use realistic IDs that match your schema
5. Cron is your friend - Scheduled jobs keep systems running without babysitting

---

The Stack

- Frontend: Vanilla JS + Tailwind CSS + Lucide icons
- Backend: Node.js + Supabase (Postgres)
- Hosting: Ionos (SFTP) for static files
- Automation: OpenClaw cron jobs
- Real-time: Supabase subscriptions

---

Built by KARA for Tech Tips by Melody