⚡ Command Center — Online & Mobile Build Spec

Overview

The Elev8 Command Center is currently a local HTML file that Jason opens manually in Charlotte's Chrome. Two problems have emerged:

1. No mobile access. Jason can't quickly capture a task or check project status from his phone. The current File System Access API approach for Quick Capture is desktop-only by design.

2. Quick Capture is fragile. The File System Access API permission expires every time Chrome restarts, causing captured tasks to silently fail. This has lost at least one item already this session.

The solution: host the Command Center as a Vercel static site at command.stylify-ai.com, rebuild Quick Capture to POST to the Stylify backend API, and add proper mobile-responsive CSS. In Phase 2, sync action item checkbox state to Supabase so checking something off on your phone reflects on your desktop.

Phase 1 — Vercel Deployment + Mobile CSS + Quick Capture API

1a. Vercel Deployment Charlotte

The Command Center HTML file will be deployed as a standalone Vercel project, separate from the main Stylify frontend.

Steps

• Create a new folder: command-center/ in the Stylify repo root (or as a separate repo — Stitch's call based on deploy preferences)
• Place the Command Center HTML as command-center/index.html
• Create a Vercel project pointing at that folder
• Configure custom domain: command.stylify-ai.com (add CNAME in Namecheap pointing to Vercel)
• Test on mobile browser before marking complete

Authentication

The Command Center displays internal operational data but no customer data or credentials. Simple protection is sufficient for Phase 1: Vercel Password Protection (available on Vercel's free tier via vercel.json). Jason sets a simple password once; the browser remembers it.

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
    }
  ]
}

Alternatively, Stitch can gate it behind Stylify JWT — but that's more friction than needed for an internal tool. Password protection is fine.

1b. Mobile-Responsive CSS Charlotte

The current file has a minimal @media (max-width: 600px) block that only adjusts padding. A proper mobile layout requires the following changes:

1c. Quick Capture Backend Route Stitch

This is the only backend change in Phase 1. One new route that accepts a Quick Capture POST and writes the .md file to the inbox folder server-side.

Request Body

{
  "agent": "Charlotte" | "Stitch" | "Pixel",
  "priority": "urgent" | "high" | "medium" | "low",
  "title": "string (required)",
  "notes": "string (optional)"
}

Server-Side Behavior

• Validate: agent, priority, title required — return 400 if missing
• Generate filename using the same convention as the frontend: YYYY-MM-DD_[slugified-title]-[agent-lowercase].md
• Generate mdContent using the same template the frontend uses (From / To / Priority / Date / Task / Notes)
• Write the file to the inbox path on the server. The inbox is on OneDrive which syncs to the machine — the server path is the Railway filesystem, so this needs to write to a configured inbox path. See Note below.
• Return { success: true, filename } on success
• Auth: use existing admin JWT middleware (requireAdmin) — same as other /api/admin/* routes

Frontend Changes to Command Center

Replace the File System Access API logic in sendCapture() with a fetch() call to /api/admin/capture:

• Remove all inboxDirHandle, showFolderPicker, queryPermission, requestPermission, and getFileHandle code
• Remove the "Connect Inbox" UI entirely — it's no longer needed
• Remove the capture-log.json write (also no longer needed)
• Keep the localStorage cc_captures log as a local history display only (the recent captures list at the bottom of the Quick Capture tab) — but it's no longer the recovery mechanism
• Add Stylify JWT to the request header (Jason will need to be logged in, or a long-lived admin token can be stored in the Command Center's localStorage on first setup)
• Success: show green confirmation. Failure: show error with retry button.

Phase 1 Effort Estimate

Phase 2 — Cross-Device State Sync (Post-Meta Approval)

Phase 1 leaves one gap: action item checkboxes (the "I've done this" toggles) are stored in localStorage, which is browser-local. If Jason checks off "Subscribe to Kit" on his phone, his desktop still shows it unchecked. Phase 2 fixes this by moving checkbox state to Supabase.

Database Schema

-- Migration: command_center_state
CREATE TABLE command_center_state (
  id           uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id      uuid REFERENCES auth.users(id) ON DELETE CASCADE,
  item_id      text NOT NULL,          -- matches ACTION_ITEMS[].id
  checked      boolean DEFAULT false,
  updated_at   timestamptz DEFAULT now(),
  UNIQUE(user_id, item_id)
);

ALTER TABLE command_center_state ENABLE ROW LEVEL SECURITY;
-- Policy: users can only read/write their own state
CREATE POLICY "Own state only" ON command_center_state
  FOR ALL USING (user_id = auth.uid());

New Backend Routes

Frontend Changes

• On page load: call GET /api/admin/command-center/state and use returned array to populate checkbox states (instead of getState() from localStorage)
• On checkbox toggle: call PATCH /api/admin/command-center/state/:itemId with new checked value (fire-and-forget, optimistic UI)
• Keep localStorage as a local fallback — if the API call fails (network offline), fall back to localStorage state and retry on next load
• Reset button (resetAll()) should call PATCH for each checked item with checked: false, or a bulk reset endpoint if Stitch wants to add one

Phase 2 Effort Estimate

Charlotte's Ongoing Responsibilities (Post-Launch)

The Command Center needs to stay current. Charlotte's session-close process already updates ACTION_ITEMS and the Charlotte Note. With the online version, the update workflow is the same — edit the HTML file and push to Vercel. The only new step is:

• If Phase 1 Option A (Supabase quick_captures) is implemented: check GET /api/admin/captures?status=pending at session open in addition to the file-system inbox scan
• Update the Charlotte Note banner content in the HTML whenever project status changes (same as now)
• No other workflow change — Charlotte still edits the HTML, Vercel auto-deploys on save

Build Sequence (Recommended)

Decisions Already Made

Total Effort Summary

Created by Charlotte (COO) · 2026-02-28 · Charlotte Session BN