feat: Command Console UI overhaul #1
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,68 +5,86 @@ | |
| ChittyCommand is a unified life management and action dashboard for the ChittyOS ecosystem. It ingests data from 15+ financial, legal, and administrative sources, scores urgency with AI, recommends actions, and executes them via APIs, email, or browser automation. | ||
|
|
||
| **Repo:** `CHITTYOS/chittycommand` | ||
| **Deploy:** Cloudflare Workers at `command.chitty.cc` | ||
| **Stack:** Hono TypeScript, React + Tailwind, Neon PostgreSQL (via Hyperdrive), Cloudflare R2/KV | ||
| **Canonical URI:** `chittycanon://core/services/chittycommand` | Tier 5 | ||
|
|
||
| ## Common Commands | ||
|
|
||
| ```bash | ||
| npm run dev # Start Hono dev server (wrangler dev) | ||
| npm run deploy # Deploy to Cloudflare Workers | ||
| npm run ui:dev # Start React frontend dev server (localhost:5173) | ||
| npm run ui:build # Build frontend for Pages | ||
| npm run db:generate # Generate Drizzle migrations | ||
| npm run db:migrate # Run Drizzle migrations | ||
| ``` | ||
|
|
||
| Secrets are managed via wrangler (never hardcode): | ||
| ```bash | ||
| wrangler secret put PLAID_CLIENT_ID | ||
| wrangler secret put PLAID_SECRET | ||
| wrangler secret put DATABASE_URL | ||
| ``` | ||
|
|
||
| ## Architecture | ||
|
|
||
| Single Cloudflare Worker (`chittycommand`) serving API + cron. Frontend is a separate React SPA at `app.command.chitty.cc` (Cloudflare Pages). | ||
|
|
||
| ### Data Sources | ||
|
|
||
| **Via ChittyFinance (auto-sync):** Mercury, Wave Accounting, Stripe, Plaid | ||
| **Direct API:** ChittyBooks, ChittyAssets, ChittyCharge, ChittyLedger | ||
| **Via ChittyScrape (bridge):** Mr. Cooper mortgage, Cook County property tax, Court docket | ||
| **Email Parse:** ComEd, Peoples Gas, Xfinity, Citi, Home Depot, Lowe's | ||
| **Manual:** IRS quarterly, HOA fees, Personal loans | ||
| **Historical Only:** DoorLoop (sunset, data archived) | ||
|
|
||
| ### Auth Flow | ||
|
|
||
| Three auth layers in `src/middleware/auth.ts`: | ||
| 1. **`authMiddleware`** (`/api/*`) — KV token lookup, then ChittyAuth fallback | ||
| 2. **`bridgeAuthMiddleware`** (`/api/bridge/*`) — Service token OR user token | ||
| 3. **`mcpAuthMiddleware`** (`/mcp/*`) — Shared service token from KV (bypassed in dev) | ||
|
|
||
| ### Cron Schedule | ||
|
|
||
| Defined in `wrangler.toml`, dispatched via `src/lib/cron.ts`: | ||
| - `0 12 * * *` — Daily 6 AM CT: Plaid + ChittyFinance sync | ||
| - `0 13 * * *` — Daily 7 AM CT: Court docket check | ||
| - `0 14 * * 1` — Weekly Mon 8 AM CT: Utility scrapers | ||
| - `0 15 1 * *` — Monthly 1st 9 AM CT: Mortgage, property tax | ||
|
|
||
| ### Database | ||
|
|
||
| Neon PostgreSQL via Hyperdrive binding. All tables prefixed `cc_`. Schema in `src/db/schema.ts`, SQL migrations in `migrations/` (0001-0007). | ||
|
|
||
| ### Action Execution | ||
|
|
||
| Three modes: | ||
| 1. **API** — Mercury transfers, Stripe payments via bridge routes | ||
| 2. **Claude in Chrome** — Browser automation for portals without APIs | ||
| 3. **Email** — Dispute letters, follow-ups via Cloudflare Email Workers | ||
|
|
||
| ## Key Files | ||
|
|
||
| - `src/index.ts` — Hono entry point, route mounting, health/status endpoints | ||
| - `src/middleware/auth.ts` — Auth middleware (user, bridge, MCP) | ||
| - `src/lib/cron.ts` — Cron sync orchestrator (all data sources) | ||
| - `src/lib/integrations.ts` — Service clients (Mercury, Plaid, ChittyScrape, etc.) | ||
| - `src/lib/urgency.ts` — Deterministic urgency scoring engine | ||
| - `src/lib/validators.ts` — Zod schemas for request validation | ||
| - `src/routes/bridge.ts` — Inter-service bridge (scrape, ledger, finance, Plaid) | ||
| - `src/routes/mcp.ts` — MCP server for Claude integration | ||
| - `src/routes/dashboard.ts` — Dashboard summary with urgency scoring | ||
| - `src/db/schema.ts` — Drizzle schema for all cc_* tables | ||
| - `migrations/` — SQL migration files (0001-0007) | ||
| - `ui/` — React frontend (Vite + Tailwind) | ||
|
|
||
| ## Security | ||
|
|
||
| - Credentials via 1Password (`op run`) — never expose in terminal output | ||
| - Secrets via `wrangler secret put` — never in `[vars]` | ||
| - R2 for document storage (zero egress) | ||
| - CORS restricted to `app.command.chitty.cc`, `command.mychitty.com`, `chittycommand-ui.pages.dev`, `localhost:5173` | ||
| - Service tokens stored in KV: `bridge:service_token`, `mcp:service_token`, `scrape:service_token` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| # ChittyCommand UI Overhaul — "Command Console" | ||
|
|
||
| **Date:** 2026-02-23 | ||
| **Status:** Approved | ||
| **Canonical URI:** `chittycanon://core/services/chittycommand#ui-overhaul` | ||
|
|
||
| ## Design Direction | ||
|
|
||
| Hybrid of Bloomberg Terminal (information density, real-time data flow) and Apple Finance (clean cards, quality typography, refined aesthetics). Designed ADHD/neurospicy-first. | ||
|
|
||
| ## Visual Language | ||
|
|
||
| ### Color Scheme: Dark Chrome + Light Cards | ||
| - **Shell** (sidebar, nav, status bar): Dark background (`#1a1a2e` → `#16213e` range) | ||
| - **Card surfaces**: White/near-white (`#ffffff` / `#fafafa`) | ||
| - **Urgency accents**: Red (`#ef4444`), Amber (`#f59e0b`), Green (`#22c55e`) | ||
| - **Text**: Dark on light cards, light on dark chrome | ||
| - **Muted state**: Low-urgency cards use lighter text (`#9ca3af`), no border accent | ||
|
|
||
| ### Typography | ||
| - **Display/headings**: Outfit (geometric sans-serif) — clean, modern, highly legible | ||
| - **Body/data**: Outfit at smaller weights — consistent family, no font-switching fatigue | ||
| - **Monospace (numbers/amounts)**: JetBrains Mono or Tabular Outfit — aligned columns for financial data | ||
|
|
||
| ### Spatial Rules | ||
| - Cards have generous internal padding but tight grid gaps — dense layout, breathable cards | ||
| - Consistent card anatomy: title → key metric → status indicator → primary action | ||
| - Left-border color accent for urgency (4px solid) | ||
| - Rounded corners (8-12px) on all cards — Apple softness | ||
|
|
||
| ## Layout Architecture | ||
|
|
||
| ### Widget-Based Grid | ||
| - CSS Grid dashboard with named areas | ||
| - Draggable, resizable panels (saved to user preferences in KV) | ||
| - Auto-personalizes: highest-urgency widgets float to top-left | ||
| - Responsive: collapses to single-column on mobile | ||
|
|
||
| ### Sections | ||
| 1. **Top status bar** — cash position, next due date, sync freshness dots (green/amber/red), Focus Mode toggle | ||
| 2. **Sidebar** (dark) — navigation, account summary, quick filters | ||
| 3. **Main grid** — widget cards: | ||
| - Obligations (bills due, sorted by urgency) | ||
| - Active disputes (progress bars, status, next action) | ||
| - Cashflow chart (30-day projection) | ||
| - Recommendations (AI-scored, one CTA each) | ||
| - Recent transactions (last 10, grouped by account) | ||
| - Upcoming deadlines (calendar-style, next 14 days) | ||
| - Sync status (per-source freshness, last run time) | ||
|
|
||
| ## ADHD/Neurospicy-First Principles | ||
|
|
||
| ### 1. Focus Mode (default: ON) | ||
| - Landing view shows only top 3 most urgent items | ||
| - Each item: what it is, why it's urgent, one action button | ||
| - "See everything" toggle expands to full dense dashboard | ||
| - Reduces cognitive load on every visit — no overwhelm on load | ||
|
|
||
| ### 2. Visual Hierarchy Does the Thinking | ||
| - Urgency scoring auto-sorts all widgets and items within widgets | ||
| - Most important = biggest, brightest, top-left position | ||
| - No scanning or deciding "what should I look at first" | ||
|
|
||
| ### 3. One Clear Action Per Card | ||
| - Single primary CTA button per card (pay, respond, review) | ||
| - Secondary actions behind a "..." menu | ||
| - No decision paralysis from multiple equal-weight options | ||
|
|
||
| ### 4. Color-Coded Urgency Borders | ||
| - Red (4px left border): overdue or due within 48hrs | ||
| - Amber: due within 7 days or needs attention | ||
|
Comment on lines
+69
to
+71
Contributor
There was a problem hiding this comment. Use a space in “48 hrs” for readability. The “48hrs” token is a minor style/grammar issue. 🧰 Tools🪛 LanguageTool[grammar] ~70-~70: Ensure spelling is correct (QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1) 🤖 Prompt for AI Agents |
||
| - Green: on track, no action needed | ||
| - Peripheral vision catches urgency without reading | ||
|
|
||
| ### 5. Progress Indicators Everywhere | ||
| - Disputes: progress bar (filed → response → resolution) | ||
| - Monthly bills: "3 of 7 paid" with filled dots | ||
| - Sync cycles: completion indicators per source | ||
| - Dopamine-friendly — visible forward motion | ||
|
|
||
| ### 6. Chunked Sections with Clear Labels | ||
| - Bold section headers, clear card boundaries | ||
| - No wall-of-data — every group is visually separated | ||
| - Consistent card anatomy reduces cognitive parsing | ||
|
|
||
| ### 7. Muted Non-Urgent Items | ||
| - Low-urgency cards: lighter text, no accent border, smaller font | ||
| - High-urgency: full color, accent border, larger metric | ||
| - Attention goes where it's needed without effort | ||
|
|
||
| ### 8. Persistent Widget Layout | ||
| - Drag to reorder, collapse/expand — arrangement saved | ||
| - Same layout every visit — no re-orienting | ||
| - Layout stored in Cloudflare KV per user | ||
|
|
||
| ## Subtle Data Indicators (Not Animations) | ||
|
|
||
| - **Freshness dots**: small colored circles (green=fresh, amber=stale, red=failed) next to each data source | ||
| - **Delta arrows**: small up/down arrows on amounts showing change from last sync | ||
| - **Muted timestamps**: "2h ago" in light gray under each card | ||
| - No pulse effects, no ticker strips, no glow — data confidence without noise | ||
|
|
||
| ## Tech Stack | ||
|
|
||
| - **Framework**: React (existing) + Shadcn UI components | ||
| - **Styling**: Tailwind CSS with CSS custom properties for theming | ||
| - **Grid**: CSS Grid with `react-grid-layout` for drag/resize | ||
| - **Charts**: Recharts (lightweight, React-native) | ||
| - **State**: React context + Cloudflare KV for layout persistence | ||
| - **Build**: Vite → Cloudflare Pages | ||
|
|
||
| ## Not Included | ||
|
|
||
| - Ticker strips / scrolling tapes | ||
| - Scan-line or CRT effects | ||
| - Heavy animations or glow effects | ||
| - Sound effects or haptics | ||
| - Multiple theme options (single cohesive theme) | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧩 Analysis chain
🏁 Script executed:
Repository: chittyos/chittycommand
Length of output: 6518
🏁 Script executed:
Repository: chittyos/chittycommand
Length of output: 2255
Document Triad is incomplete — Endpoints and Dependencies tables have not been propagated.
The Document Triad's own language requires that changes to shared fields "must propagate" to all three docs. Verification confirms:
chittycanon://core/services/chittycommand) — syncedcommand.chitty.cc) — syncedstatus: DRAFTexists but badge table/visual not locatedCreate the Endpoints and Dependencies tables in CHITTY.md and CLAUDE.md to complete the triad as documented.
🤖 Prompt for AI Agents