@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/app/globals.css

@@ -0,0 +1,555 @@
+@import "tailwindcss";
+@import "@a5c-ai/compendium/css";
+
+/* ============================================
+   BABYSITTER OBSERVER — Compendium Edition
+   Preserve behavior, migrate the design system
+   from neon/glass to vellum/brass/void.
+   ============================================ */
+
+:root {
+  --font-display-ui: var(--font-display);
+  --font-body-ui: var(--font-body);
+  --font-mono-ui: var(--font-mono);
+
+  --background: var(--ground-void);
+  --background-secondary: color-mix(in srgb, var(--ground-void) 82%, var(--mahogany));
+  --background-tertiary: color-mix(in srgb, var(--ground-void) 72%, var(--leather));
+  --foreground: var(--glyph-bone);
+  --foreground-secondary: var(--glyph-fade);
+  --foreground-muted: color-mix(in srgb, var(--glyph-fade) 72%, black);
+
+  --card: rgba(27, 22, 17, 0.88);
+  --card-foreground: var(--glyph-bone);
+  --card-border: rgba(242, 200, 143, 0.22);
+  --card-hover: rgba(242, 200, 143, 0.08);
+
+  --primary: var(--accent-cinnabar);
+  --primary-foreground: var(--glyph-bone);
+  --primary-hover: #d25748;
+  --primary-muted: rgba(192, 58, 43, 0.18);
+
+  --secondary: color-mix(in srgb, var(--brass-light) 16%, var(--ground-void));
+  --secondary-foreground: var(--glyph-bone);
+  --secondary-muted: rgba(242, 200, 143, 0.12);
+
+  --muted: rgba(240, 230, 209, 0.06);
+  --muted-foreground: var(--glyph-fade);
+
+  --accent: var(--brass-light);
+  --accent-foreground: var(--mahogany);
+
+  --destructive: var(--gem-ruby);
+  --destructive-foreground: var(--glyph-bone);
+
+  --success: var(--gem-emerald);
+  --success-muted: rgba(62, 166, 118, 0.14);
+  --warning: var(--gem-amber);
+  --warning-muted: rgba(224, 166, 58, 0.14);
+  --error: var(--gem-ruby);
+  --error-muted: rgba(216, 31, 61, 0.14);
+  --info: var(--gem-cyan);
+  --info-muted: rgba(22, 215, 230, 0.14);
+  --pending: color-mix(in srgb, var(--glyph-fade) 78%, white);
+  --pending-muted: rgba(168, 153, 128, 0.14);
+
+  --border: rgba(242, 200, 143, 0.18);
+  --border-hover: rgba(242, 200, 143, 0.34);
+  --input: rgba(242, 200, 143, 0.2);
+  --ring: rgba(201, 138, 62, 0.55);
+  --background-muted: color-mix(in srgb, var(--ground-void) 74%, var(--mahogany));
+
+  --glow-primary: 0 0 0 1px rgba(192, 58, 43, 0.26), 0 10px 28px rgba(192, 58, 43, 0.12);
+  --glow-success: 0 0 0 1px rgba(62, 166, 118, 0.22), 0 10px 24px rgba(62, 166, 118, 0.1);
+  --glow-error: 0 0 0 1px rgba(216, 31, 61, 0.24), 0 10px 24px rgba(216, 31, 61, 0.1);
+  --glow-cyan: 0 0 0 1px rgba(22, 215, 230, 0.2), 0 10px 24px rgba(22, 215, 230, 0.1);
+  --glow-warning: 0 0 0 1px rgba(224, 166, 58, 0.24), 0 10px 24px rgba(224, 166, 58, 0.1);
+
+  --drop-glow-primary: 0 0 3px rgba(192, 58, 43, 0.34);
+  --drop-glow-primary-sm: 0 0 2px rgba(192, 58, 43, 0.24);
+  --drop-glow-success: 0 0 3px rgba(62, 166, 118, 0.36);
+  --drop-glow-success-sm: 0 0 2px rgba(62, 166, 118, 0.24);
+  --drop-glow-error: 0 0 3px rgba(216, 31, 61, 0.34);
+  --drop-glow-error-sm: 0 0 2px rgba(216, 31, 61, 0.24);
+  --drop-glow-warning: 0 0 3px rgba(224, 166, 58, 0.36);
+  --drop-glow-warning-sm: 0 0 2px rgba(224, 166, 58, 0.24);
+  --drop-glow-cyan: 0 0 3px rgba(22, 215, 230, 0.34);
+  --drop-glow-cyan-sm: 0 0 2px rgba(22, 215, 230, 0.22);
+  --drop-glow-pending: 0 0 2px rgba(168, 153, 128, 0.22);
+
+  --neon-inset-primary: inset 0 0 0 1px rgba(192, 58, 43, 0.18);
+  --neon-inset-success: inset 0 0 0 1px rgba(62, 166, 118, 0.16);
+  --neon-inset-error: inset 0 0 0 1px rgba(216, 31, 61, 0.16);
+  --neon-inset-warning: inset 0 0 0 1px rgba(224, 166, 58, 0.18);
+  --neon-inset-cyan: inset 0 0 0 1px rgba(22, 215, 230, 0.16);
+
+  --neon-glow-success-sm: 0 8px 20px rgba(62, 166, 118, 0.12);
+  --neon-glow-error-sm: 0 8px 20px rgba(216, 31, 61, 0.12);
+  --neon-glow-warning-sm: 0 8px 20px rgba(224, 166, 58, 0.12);
+  --neon-glow-cyan-sm: 0 8px 20px rgba(22, 215, 230, 0.12);
+  --neon-glow-primary-sm: 0 8px 20px rgba(192, 58, 43, 0.12);
+  --neon-glow-primary-xs: 0 4px 12px rgba(192, 58, 43, 0.12);
+  --neon-glow-warning-xs: 0 4px 12px rgba(224, 166, 58, 0.12);
+  --neon-glow-error-xs: 0 4px 12px rgba(216, 31, 61, 0.12);
+  --neon-glow-primary-ring: 0 0 0 1px rgba(192, 58, 43, 0.24), 0 0 0 4px rgba(192, 58, 43, 0.12);
+  --neon-glow-primary-focus: 0 0 0 1px rgba(192, 58, 43, 0.22), 0 0 0 3px rgba(192, 58, 43, 0.1);
+  --neon-glow-warning-badge: 0 6px 18px rgba(224, 166, 58, 0.14);
+
+  --glass-bg: rgba(24, 18, 15, 0.88);
+  --glass-bg-heavy: rgba(24, 18, 15, 0.94);
+  --glass-border: rgba(242, 200, 143, 0.2);
+  --glass-border-subtle: rgba(242, 200, 143, 0.14);
+  --glass-border-faint: rgba(242, 200, 143, 0.08);
+  --glass-card-bg: rgba(36, 28, 23, 0.72);
+  --glass-shadow: 0 18px 42px rgba(8, 5, 3, 0.42);
+  --glass-shadow-toast: 0 14px 32px rgba(8, 5, 3, 0.32);
+
+  --kbd-shadow: 0 1px 0 rgba(242, 200, 143, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.34);
+  --kbd-border: rgba(242, 200, 143, 0.24);
+
+  --step-inset-warning: inset 3px 0 0 rgba(224, 166, 58, 0.45);
+  --step-inset-cyan: inset 3px 0 0 rgba(22, 215, 230, 0.34);
+  --step-selected-shadow: inset 3px 0 0 rgba(192, 58, 43, 0.6), 0 12px 24px rgba(0, 0, 0, 0.26);
+  --step-running-dot: 0 0 0 2px rgba(22, 215, 230, 0.18), 0 0 10px rgba(22, 215, 230, 0.18);
+
+  --progress-glow-primary: 0 0 0 1px rgba(192, 58, 43, 0.24), 0 4px 14px rgba(192, 58, 43, 0.16);
+  --progress-glow-success: 0 0 0 1px rgba(62, 166, 118, 0.24), 0 4px 14px rgba(62, 166, 118, 0.16);
+  --progress-glow-error: 0 0 0 1px rgba(216, 31, 61, 0.24), 0 4px 14px rgba(216, 31, 61, 0.16);
+  --progress-glow-warning: 0 0 0 1px rgba(224, 166, 58, 0.24), 0 4px 14px rgba(224, 166, 58, 0.16);
+
+  --toast-glow-success: 0 12px 24px rgba(62, 166, 118, 0.12);
+  --toast-glow-error: 0 12px 24px rgba(216, 31, 61, 0.12);
+  --toast-glow-warning: 0 12px 24px rgba(224, 166, 58, 0.12);
+  --toast-glow-cyan: 0 12px 24px rgba(22, 215, 230, 0.12);
+
+  --event-filter-active: 0 0 0 1px rgba(192, 58, 43, 0.22), 0 8px 20px rgba(192, 58, 43, 0.08);
+  --breakpoint-glow: 0 0 0 1px rgba(224, 166, 58, 0.3), 0 18px 30px rgba(224, 166, 58, 0.14);
+
+  --shadow-sm: 0 6px 14px rgba(8, 5, 3, 0.18);
+  --shadow-md: 0 14px 28px rgba(8, 5, 3, 0.22);
+  --shadow-lg: 0 22px 40px rgba(8, 5, 3, 0.28);
+  --transition-fast: 160ms ease;
+  --transition-normal: 220ms ease;
+  --radius: 12px;
+}
+
+[data-theme="light"],
+.light {
+  --background: var(--tkc-paper);
+  --background-secondary: color-mix(in srgb, var(--tkc-paper-2) 82%, white);
+  --background-tertiary: color-mix(in srgb, var(--tkc-paper-3) 76%, white);
+  --foreground: var(--tkc-ink);
+  --foreground-secondary: var(--tkc-ink-soft);
+  --foreground-muted: var(--tkc-ink-quiet);
+
+  --card: rgba(255, 251, 244, 0.94);
+  --card-foreground: var(--tkc-ink);
+  --card-border: var(--tkc-rule-m);
+  --card-hover: rgba(91, 56, 23, 0.05);
+
+  --primary: var(--tkc-cinnabar);
+  --primary-foreground: var(--tkc-danger-fg);
+  --primary-hover: var(--tkc-danger-hover);
+  --primary-muted: color-mix(in srgb, var(--tkc-cinnabar) 16%, white);
+
+  --secondary: color-mix(in srgb, var(--tkc-paper-2) 88%, white);
+  --secondary-foreground: var(--tkc-ink);
+  --secondary-muted: color-mix(in srgb, var(--tkc-brass) 12%, white);
+
+  --muted: rgba(91, 56, 23, 0.06);
+  --muted-foreground: var(--tkc-ink-quiet);
+
+  --accent: var(--tkc-brass);
+  --accent-foreground: var(--tkc-ink);
+
+  --destructive: var(--tkc-ruby);
+  --destructive-foreground: var(--tkc-danger-fg);
+
+  --success: var(--tkc-emerald);
+  --success-muted: color-mix(in srgb, var(--tkc-emerald) 16%, white);
+  --warning: var(--tkc-amber);
+  --warning-muted: color-mix(in srgb, var(--tkc-amber) 16%, white);
+  --error: var(--tkc-ruby);
+  --error-muted: color-mix(in srgb, var(--tkc-ruby) 14%, white);
+  --info: var(--tkc-cyan);
+  --info-muted: color-mix(in srgb, var(--tkc-cyan) 16%, white);
+  --pending: color-mix(in srgb, var(--tkc-ink-quiet) 72%, white);
+  --pending-muted: rgba(138, 123, 100, 0.12);
+
+  --border: var(--tkc-rule-m);
+  --border-hover: color-mix(in srgb, var(--tkc-rule) 68%, white);
+  --input: var(--tkc-rule-m);
+  --ring: rgba(192, 58, 43, 0.34);
+  --background-muted: color-mix(in srgb, var(--tkc-paper-2) 85%, white);
+
+  --glow-primary: 0 0 0 1px rgba(192, 58, 43, 0.14), 0 10px 20px rgba(192, 58, 43, 0.08);
+  --glow-success: 0 0 0 1px rgba(62, 166, 118, 0.14), 0 10px 20px rgba(62, 166, 118, 0.08);
+  --glow-error: 0 0 0 1px rgba(142, 27, 27, 0.14), 0 10px 20px rgba(142, 27, 27, 0.08);
+  --glow-cyan: 0 0 0 1px rgba(46, 124, 138, 0.14), 0 10px 20px rgba(46, 124, 138, 0.08);
+  --glow-warning: 0 0 0 1px rgba(179, 126, 62, 0.14), 0 10px 20px rgba(179, 126, 62, 0.08);
+
+  --drop-glow-primary: 0 0 2px rgba(192, 58, 43, 0.24);
+  --drop-glow-primary-sm: 0 0 1px rgba(192, 58, 43, 0.18);
+  --drop-glow-success: 0 0 2px rgba(62, 166, 118, 0.26);
+  --drop-glow-success-sm: 0 0 1px rgba(62, 166, 118, 0.18);
+  --drop-glow-error: 0 0 2px rgba(142, 27, 27, 0.24);
+  --drop-glow-error-sm: 0 0 1px rgba(142, 27, 27, 0.18);
+  --drop-glow-warning: 0 0 2px rgba(179, 126, 62, 0.26);
+  --drop-glow-warning-sm: 0 0 1px rgba(179, 126, 62, 0.18);
+  --drop-glow-cyan: 0 0 2px rgba(46, 124, 138, 0.24);
+  --drop-glow-cyan-sm: 0 0 1px rgba(46, 124, 138, 0.18);
+  --drop-glow-pending: 0 0 1px rgba(138, 123, 100, 0.14);
+
+  --neon-inset-primary: inset 0 0 0 1px rgba(192, 58, 43, 0.1);
+  --neon-inset-success: inset 0 0 0 1px rgba(62, 166, 118, 0.1);
+  --neon-inset-error: inset 0 0 0 1px rgba(142, 27, 27, 0.1);
+  --neon-inset-warning: inset 0 0 0 1px rgba(179, 126, 62, 0.1);
+  --neon-inset-cyan: inset 0 0 0 1px rgba(46, 124, 138, 0.1);
+
+  --neon-glow-success-sm: 0 8px 18px rgba(62, 166, 118, 0.08);
+  --neon-glow-error-sm: 0 8px 18px rgba(142, 27, 27, 0.08);
+  --neon-glow-warning-sm: 0 8px 18px rgba(179, 126, 62, 0.08);
+  --neon-glow-cyan-sm: 0 8px 18px rgba(46, 124, 138, 0.08);
+  --neon-glow-primary-sm: 0 8px 18px rgba(192, 58, 43, 0.08);
+  --neon-glow-primary-xs: 0 4px 10px rgba(192, 58, 43, 0.08);
+  --neon-glow-warning-xs: 0 4px 10px rgba(179, 126, 62, 0.08);
+  --neon-glow-error-xs: 0 4px 10px rgba(142, 27, 27, 0.08);
+  --neon-glow-primary-ring: 0 0 0 1px rgba(192, 58, 43, 0.16), 0 0 0 4px rgba(192, 58, 43, 0.08);
+  --neon-glow-primary-focus: 0 0 0 1px rgba(192, 58, 43, 0.14), 0 0 0 3px rgba(192, 58, 43, 0.08);
+  --neon-glow-warning-badge: 0 6px 16px rgba(179, 126, 62, 0.1);
+
+  --glass-bg: rgba(255, 251, 244, 0.92);
+  --glass-bg-heavy: rgba(245, 236, 221, 0.98);
+  --glass-border: var(--tkc-rule-m);
+  --glass-border-subtle: var(--tkc-rule-q);
+  --glass-border-faint: rgba(91, 56, 23, 0.08);
+  --glass-card-bg: rgba(255, 251, 244, 0.86);
+  --glass-shadow: 0 16px 32px rgba(39, 25, 12, 0.18);
+  --glass-shadow-toast: 0 12px 24px rgba(39, 25, 12, 0.12);
+
+  --kbd-shadow: 0 1px 0 rgba(91, 56, 23, 0.08), inset 0 -1px 0 rgba(91, 56, 23, 0.12);
+  --kbd-border: rgba(91, 56, 23, 0.18);
+
+  --step-inset-warning: inset 3px 0 0 rgba(179, 126, 62, 0.38);
+  --step-inset-cyan: inset 3px 0 0 rgba(46, 124, 138, 0.28);
+  --step-selected-shadow: inset 3px 0 0 rgba(192, 58, 43, 0.45), 0 10px 22px rgba(39, 25, 12, 0.12);
+  --step-running-dot: 0 0 0 2px rgba(46, 124, 138, 0.12), 0 0 8px rgba(46, 124, 138, 0.14);
+
+  --progress-glow-primary: 0 0 0 1px rgba(192, 58, 43, 0.14), 0 4px 12px rgba(192, 58, 43, 0.12);
+  --progress-glow-success: 0 0 0 1px rgba(62, 166, 118, 0.14), 0 4px 12px rgba(62, 166, 118, 0.12);
+  --progress-glow-error: 0 0 0 1px rgba(142, 27, 27, 0.14), 0 4px 12px rgba(142, 27, 27, 0.12);
+  --progress-glow-warning: 0 0 0 1px rgba(179, 126, 62, 0.14), 0 4px 12px rgba(179, 126, 62, 0.12);
+
+  --toast-glow-success: 0 10px 20px rgba(62, 166, 118, 0.08);
+  --toast-glow-error: 0 10px 20px rgba(142, 27, 27, 0.08);
+  --toast-glow-warning: 0 10px 20px rgba(179, 126, 62, 0.08);
+  --toast-glow-cyan: 0 10px 20px rgba(46, 124, 138, 0.08);
+
+  --event-filter-active: 0 0 0 1px rgba(192, 58, 43, 0.14), 0 8px 16px rgba(192, 58, 43, 0.06);
+  --breakpoint-glow: 0 0 0 1px rgba(179, 126, 62, 0.2), 0 14px 24px rgba(179, 126, 62, 0.1);
+
+  --shadow-sm: 0 6px 14px rgba(39, 25, 12, 0.08);
+  --shadow-md: 0 14px 28px rgba(39, 25, 12, 0.12);
+  --shadow-lg: 0 22px 40px rgba(39, 25, 12, 0.16);
+}
+
+/* Tailwind v4 theme */
+@theme inline {
+  --color-background: var(--background);
+  --color-background-secondary: var(--background-secondary);
+  --color-background-tertiary: var(--background-tertiary);
+  --color-foreground: var(--foreground);
+  --color-foreground-secondary: var(--foreground-secondary);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-card-border: var(--card-border);
+  --color-card-hover: var(--card-hover);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-muted: var(--primary-muted);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-muted: var(--secondary-muted);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-border-hover: var(--border-hover);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-success-muted: var(--success-muted);
+  --color-warning: var(--warning);
+  --color-warning-muted: var(--warning-muted);
+  --color-error: var(--error);
+  --color-error-muted: var(--error-muted);
+  --color-info: var(--info);
+  --color-info-muted: var(--info-muted);
+  --color-pending: var(--pending);
+  --color-pending-muted: var(--pending-muted);
+  --color-background-muted: var(--background-muted);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-glow-primary: var(--glow-primary);
+  --shadow-glow-success: var(--glow-success);
+  --shadow-glow-error: var(--glow-error);
+  --shadow-glow-cyan: var(--glow-cyan);
+  --shadow-glow-warning: var(--glow-warning);
+  --shadow-neon-glow-success-sm: var(--neon-glow-success-sm);
+  --shadow-neon-glow-error-sm: var(--neon-glow-error-sm);
+  --shadow-neon-glow-warning-sm: var(--neon-glow-warning-sm);
+  --shadow-neon-glow-cyan-sm: var(--neon-glow-cyan-sm);
+  --shadow-neon-glow-primary-sm: var(--neon-glow-primary-sm);
+  --shadow-neon-glow-primary-xs: var(--neon-glow-primary-xs);
+  --shadow-neon-glow-warning-xs: var(--neon-glow-warning-xs);
+  --shadow-neon-glow-error-xs: var(--neon-glow-error-xs);
+  --shadow-neon-glow-primary-ring: var(--neon-glow-primary-ring);
+  --shadow-neon-glow-primary-focus: var(--neon-glow-primary-focus);
+  --shadow-neon-glow-warning-badge: var(--neon-glow-warning-badge);
+  --shadow-neon-inset-primary: var(--neon-inset-primary);
+  --shadow-neon-inset-success: var(--neon-inset-success);
+  --shadow-neon-inset-error: var(--neon-inset-error);
+  --shadow-neon-inset-warning: var(--neon-inset-warning);
+  --shadow-neon-inset-cyan: var(--neon-inset-cyan);
+  --shadow-step-inset-warning: var(--step-inset-warning);
+  --shadow-step-inset-cyan: var(--step-inset-cyan);
+  --shadow-step-selected: var(--step-selected-shadow);
+  --shadow-step-running-dot: var(--step-running-dot);
+  --shadow-progress-glow-primary: var(--progress-glow-primary);
+  --shadow-progress-glow-success: var(--progress-glow-success);
+  --shadow-progress-glow-error: var(--progress-glow-error);
+  --shadow-progress-glow-warning: var(--progress-glow-warning);
+  --shadow-toast-glow-success: var(--toast-glow-success);
+  --shadow-toast-glow-error: var(--toast-glow-error);
+  --shadow-toast-glow-warning: var(--toast-glow-warning);
+  --shadow-toast-glow-cyan: var(--toast-glow-cyan);
+  --shadow-glass: var(--glass-shadow);
+  --shadow-glass-toast: var(--glass-shadow-toast);
+  --shadow-kbd: var(--kbd-shadow);
+  --shadow-event-filter-active: var(--event-filter-active);
+  --shadow-breakpoint-glow: var(--breakpoint-glow);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) + 8px);
+  --font-sans: var(--font-body-ui), "EB Garamond", serif;
+  --font-serif: var(--font-display-ui), "Cormorant Garamond", serif;
+  --font-mono: var(--font-mono-ui), "JetBrains Mono", monospace;
+}
+
+/* Base */
+* {
+  border-color: var(--border);
+}
+
+html {
+  background: var(--background);
+}
+
+body {
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top, color-mix(in srgb, var(--accent) 20%, transparent), transparent 36%),
+    linear-gradient(180deg, var(--background), var(--background-secondary));
+  color: var(--foreground);
+  font-family: var(--font-sans, "EB Garamond", serif);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.5;
+  background:
+    linear-gradient(90deg, transparent 0, rgba(201, 138, 62, 0.05) 48%, transparent 100%),
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 26px,
+      rgba(201, 138, 62, 0.045) 27px
+    );
+}
+
+body > div {
+  position: relative;
+  z-index: 1;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: color-mix(in srgb, var(--background-secondary) 86%, transparent);
+}
+
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--accent) 72%, var(--background));
+  border: 2px solid color-mix(in srgb, var(--background-secondary) 86%, transparent);
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--accent) 84%, var(--background));
+}
+
+*:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 1.5px color-mix(in srgb, var(--background) 85%, white),
+    0 0 0 4px var(--ring);
+}
+
+.font-mono {
+  font-family: var(--font-mono, "JetBrains Mono", monospace);
+  font-feature-settings: "liga" 1;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--foreground);
+  font-family: var(--font-serif, "Cormorant Garamond", serif);
+  letter-spacing: -0.02em;
+}
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--primary-hover);
+}
+
+.neon-text {
+  text-shadow: 0 2px 10px rgba(201, 138, 62, 0.18);
+}
+
+.neon-text-subtle {
+  text-shadow: 0 1px 6px rgba(201, 138, 62, 0.14);
+}
+
+.glow-border {
+  box-shadow: var(--glow-primary);
+}
+
+.bg-gradient-brand {
+  background:
+    radial-gradient(circle at top, color-mix(in srgb, var(--accent) 14%, transparent), transparent 40%),
+    linear-gradient(180deg, transparent, color-mix(in srgb, var(--background-secondary) 84%, transparent));
+}
+
+/* Status pulse animation */
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.animate-pulse-dot {
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+/* Smooth spin for loading */
+@keyframes spin-smooth {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.animate-spin-smooth {
+  animation: spin-smooth 1s linear infinite;
+}
+
+/* Toast slide in from right */
+@keyframes slide-in-right {
+  from { opacity: 0; transform: translateX(50px) scale(0.95); }
+  to { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+.animate-slide-in-right {
+  animation: slide-in-right 0.2s ease-out;
+}
+
+@keyframes breakpoint-glow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 166, 58, 0.08), 0 0 0 0 rgba(201, 138, 62, 0.04); }
+  50% { box-shadow: 0 0 0 1px rgba(224, 166, 58, 0.18), 0 10px 24px rgba(224, 166, 58, 0.18); }
+}
+
+.animate-breakpoint-glow {
+  animation: breakpoint-glow 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* JSON tree expand fade-in */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-2px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Smooth transitions */
+.transition-panel { transition: all var(--transition-normal, 200ms ease-out); }
+.transition-expand { transition: height var(--transition-normal, 200ms ease-out), opacity var(--transition-fast, 150ms ease); }
+
+/* Card hover lift */
+.card-hover-lift {
+  transition: transform var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
+}
+.card-hover-lift:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.25));
+}
+
+/* Timeline bar gradient */
+.bg-gradient-timeline {
+  background: linear-gradient(90deg, var(--primary-muted) 0%, var(--secondary-muted) 100%);
+}
+
+/* Idle / wait time stripe pattern for timeline gaps */
+.bg-idle-stripes {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 3px,
+    var(--pending-muted) 3px,
+    var(--pending-muted) 5px
+  );
+}
+
+/* Accessibility: respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .animate-pulse-dot,
+  .animate-spin-smooth,
+  .animate-slide-in-right,
+  .animate-breakpoint-glow,
+  .animate-pulse,
+  .animate-spin,
+  .animate-ping {
+    animation: none !important;
+  }
+
+  .card-hover-lift:hover {
+    transform: none;
+  }
+
+  .transition-panel,
+  .transition-expand {
+    transition: none;
+  }
+
+  .animate-breakpoint-glow {
+    box-shadow: 0 0 0 1px rgba(224, 166, 58, 0.18), 0 10px 24px rgba(224, 166, 58, 0.18);
+  }
+}

package/src/app/icon.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <radialGradient id="glow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#FF00E0" stop-opacity="0.3"/>
+      <stop offset="100%" stop-color="#FF00E0" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <!-- Background -->
+  <rect width="32" height="32" rx="7" fill="#0a0a0b"/>
+  <!-- Glow -->
+  <circle cx="16" cy="16" r="14" fill="url(#glow)"/>
+  <!-- Eye outer shape -->
+  <path d="M4 16s4.5-8 12-8 12 8 12 8-4.5 8-12 8S4 16 4 16z" fill="none" stroke="#FF00E0" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Iris -->
+  <circle cx="16" cy="16" r="4.5" fill="none" stroke="#00F0FF" stroke-width="1.5"/>
+  <!-- Pupil -->
+  <circle cx="16" cy="16" r="2" fill="#00F0FF"/>
+  <!-- Highlight -->
+  <circle cx="14.5" cy="14.5" r="0.8" fill="#ffffff" opacity="0.8"/>
+</svg>

package/src/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { Providers } from "@/components/providers";
+import { ErrorBoundary } from "@/components/shared/error-boundary";
+
+export const metadata: Metadata = {
+  title: "Babysitter Observer | a5c.ai",
+  description: "Real-time observability for babysitter orchestration runs",
+  icons: {
+    icon: "/icon.svg",
+  },
+};
+
+// Inline script to set theme before first paint (avoids flash)
+const themeScript = `(function(){try{var t=localStorage.getItem("observer-theme");if(t==="light"||t==="dark"){document.documentElement.setAttribute("data-theme",t);document.documentElement.className=t}else{document.documentElement.setAttribute("data-theme","dark");document.documentElement.className="dark"}}catch(e){}})()`;
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="dark" suppressHydrationWarning>
+      <head>
+        <meta name="theme-color" content="#0a0a0b" />
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body className="min-h-screen bg-background text-foreground antialiased">
+        <div className="relative flex min-h-screen flex-col">
+          <ErrorBoundary>
+            <Providers>
+              {children}
+            </Providers>
+          </ErrorBoundary>
+        </div>
+      </body>
+    </html>
+  );
+}

package/src/app/not-found.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4 text-center">
+      <h2 className="text-2xl font-semibold">Page Not Found</h2>
+      <p className="text-foreground-muted">The page you are looking for does not exist.</p>
+      <Link
+        href="/"
+        className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+      >
+        Back to Dashboard
+      </Link>
+    </div>
+  );
+}