@flame0510/project-aether 1.1.9

package/app/components/Sidebar.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import MobileBottomNav from './MobileBottomNav';
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+const NAV: NavItem[] = [
+  {
+    href: '/',
+    label: 'Dashboard',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <rect x="1" y="1" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="9" y="1" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="1" y="9" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
+        <rect x="9" y="9" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
+      </svg>
+    ),
+  },
+
+  {
+    href: '/lineage?active=1&cron=0&period=1d',
+    label: 'Lineage',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <circle cx="4" cy="4" r="2" stroke="currentColor" strokeWidth="1.3" />
+        <circle cx="12" cy="4" r="2" stroke="currentColor" strokeWidth="1.3" />
+        <circle cx="8" cy="12" r="2" stroke="currentColor" strokeWidth="1.3" />
+        <path d="M5.7 5.2 7.1 10M10.3 5.2 8.9 10M6 4h4" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    href: '/agents',
+    label: 'Agents',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="5" r="3" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M2 14c0-3.314 2.686-5 6-5s6 1.686 6 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    href: '/containers',
+    label: 'Containers',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <rect x="1.5" y="1.5" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.3" />
+        <rect x="9.5" y="1.5" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.3" />
+        <rect x="1.5" y="9.5" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.3" />
+        <rect x="9.5" y="9.5" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.3" />
+      </svg>
+    ),
+  },
+  {
+    href: '/workspace',
+    label: 'Workspace',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M1.75 4.5a1.75 1.75 0 0 1 1.75-1.75h2.35l1.2 1.5h5.45a1.75 1.75 0 0 1 1.75 1.75v5.5a1.75 1.75 0 0 1-1.75 1.75H3.5a1.75 1.75 0 0 1-1.75-1.75v-7Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
+        <path d="M1.75 6h12.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
+      </svg>
+    ),
+  },
+  {
+    href: '/gateway',
+    label: 'Gateway',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M3 4.5h4.5M8.5 4.5H13M5.25 4.5a1.75 1.75 0 1 0 0 .01ZM10.75 4.5a1.75 1.75 0 1 0 0 .01ZM3 11.5h2.5M5.5 11.5H13M7.25 11.5a1.75 1.75 0 1 0 0 .01Z" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
+      </svg>
+    ),
+  },
+  {
+    href: '/crons',
+    label: 'Crons',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M8 4.5V8l2.5 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+  },
+  {
+    href: '/config',
+    label: 'Config',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="8" r="2.5" stroke="currentColor" strokeWidth="1.3" />
+        <path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.41 1.41M11.54 11.54l1.41 1.41M3.05 12.95l1.41-1.41M11.54 4.46l1.41-1.41" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    href: '/plugins',
+    label: 'Plugins',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M6.2 1.8v3.1H3.1a1.2 1.2 0 0 0 0 2.4h3.1v3.1a1.2 1.2 0 0 0 2.4 0V7.3h3.1a1.2 1.2 0 0 0 0-2.4H8.6V1.8a1.2 1.2 0 1 0-2.4 0Z" stroke="currentColor" strokeWidth="1.2"/>
+        <rect x="1.5" y="1.5" width="13" height="13" rx="3" stroke="currentColor" strokeWidth="1.2"/>
+      </svg>
+    ),
+  },
+  {
+    href: '/skills',
+    label: 'Skills',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M3 2.5h7.5a2 2 0 0 1 2 2V13l-3-1.5L6.5 13V4.5a2 2 0 0 0-2-2Z" stroke="currentColor" strokeWidth="1.2"/>
+        <path d="M3 2.5h7.5" stroke="currentColor" strokeWidth="1.2"/>
+      </svg>
+    ),
+  },
+  {
+    href: '/credentials',
+    label: 'Credentials',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <rect x="1.5" y="6" width="13" height="8.5" rx="1" stroke="currentColor" strokeWidth="1.3" />
+        <path d="M5 6V4.5a3 3 0 0 1 6 0V6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+        <circle cx="8" cy="10" r="1.5" stroke="currentColor" strokeWidth="1.2" />
+        <path d="M8 11.5v1.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    href: '/tools',
+    label: 'Tools',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M10.5 2a3.5 3.5 0 0 1 0 7 3.5 3.5 0 0 1-3.36-2.5H2v-1h5.14A3.5 3.5 0 0 1 10.5 2Zm0 1.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" fill="currentColor"/>
+        <path d="M2 10.5h5.14a3.5 3.5 0 1 0 0-1H2v1Z" fill="none" stroke="currentColor" strokeWidth="1.2"/>
+        <circle cx="10.5" cy="5.5" r="2" stroke="currentColor" strokeWidth="1.2" fill="none"/>
+        <path d="M2 10.5h4.5M2 13h3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
+        <circle cx="11" cy="12" r="2.5" stroke="currentColor" strokeWidth="1.2" fill="none"/>
+        <path d="M11 10.5v1.5l1 1" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
+      </svg>
+    ),
+  },
+  {
+    href: '/memory',
+    label: 'Memory / Context',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M3 3.5A1.5 1.5 0 0 1 4.5 2H13v11.5a.5.5 0 0 1-.8.4L9.5 12 6.8 13.9a.5.5 0 0 1-.8-.4V4.5A1.5 1.5 0 0 0 4.5 3H13" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M4.5 2C3.67 2 3 2.67 3 3.5S3.67 5 4.5 5H6" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
+        <path d="M8 5.5h3M8 8h3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
+      </svg>
+    ),
+  },
+  {
+    href: '/wizard',
+    label: 'Wizard',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z" />
+      </svg>
+    ),
+  },
+];
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [ocVersion, setOcVersion] = useState<string | null>(null);
+  useEffect(() => {
+    fetch('/api/version')
+      .then((r) => r.json())
+      .then((d) => setOcVersion(d.version))
+      .catch(() => {});
+  }, []);
+
+  const isActive = (href: string) => {
+    const targetPath = href.split('?')[0] || '/';
+    return targetPath === '/' ? pathname === '/' : pathname.startsWith(targetPath);
+  };
+
+  const handleLogout = async () => {
+    try {
+      const res = await fetch('/api/auth/logout', { method: 'POST' });
+      if (res.ok) {
+        router.push('/login');
+      }
+    } catch (err) {
+      console.error('Logout failed:', err);
+    }
+  };
+
+  const navItems = (
+    <nav className="sidebar__nav">
+      {NAV.map(({ href, label, icon }) => (
+        <Link
+          key={href}
+          href={href}
+          className={`sidebar__item${isActive(href) ? ' sidebar__item--active' : ''}`}
+          onClick={() => setMobileOpen(false)}
+          onMouseEnter={() => router.prefetch(href)}
+          prefetch={true}
+        >
+          <span className="sidebar__icon">{icon}</span>
+          <span className="sidebar__label">{label}</span>
+        </Link>
+      ))}
+    </nav>
+  );
+
+  const EyeLogo = () => (
+    <img src="/rev4a-logo.svg" alt="Rev4a" width="20" height="20" style={{ display: 'block', objectFit: 'contain' }} />
+  );
+
+  return (
+    <>
+      {/* Mobile top bar */}
+      <header className={`mobile-topbar${mobileOpen ? ' mobile-topbar--open' : ''}`}>
+        <div className="mobile-topbar__row">
+          <div className="mobile-topbar__brand">
+            <EyeLogo />
+            <span>REV4A</span>
+          </div>
+          <button
+            className="mobile-topbar__menu"
+            aria-label={mobileOpen ? 'Close menu' : 'Menu'}
+            onClick={() => setMobileOpen((v) => !v)}
+          >
+            {mobileOpen ? (
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path
+                  d="M5 5l10 10M15 5L5 15"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            ) : (
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path
+                  d="M3 5h14M3 10h14M3 15h14"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            )}
+          </button>
+        </div>
+        {/* Drawer — grows below the top bar row */}
+        <div className="mobile-drawer__wrapper" aria-hidden={!mobileOpen}>
+          <nav className="mobile-drawer">
+            {navItems}
+          </nav>
+        </div>
+      </header>
+
+      {/* Backdrop */}
+      {mobileOpen && (
+        <div className="mobile-drawer__backdrop" onClick={() => setMobileOpen(false)} />
+      )}
+
+      <aside className="sidebar sidebar--desktop">
+        <div className="sidebar__logo">
+          <EyeLogo />
+          <span className="sidebar__title">REV4A</span>
+        </div>
+        {navItems}
+        <div className="sidebar__bottom">
+          <button
+            onClick={handleLogout}
+            className="sidebar__item sidebar__item--logout"
+          >
+            <span className="sidebar__icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M10 3h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2M6 12l-4-4 4-4M2 8h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </span>
+            <span className="sidebar__label">Logout</span>
+          </button>
+          <div className="sidebar__footer">
+            {ocVersion || ''}
+          </div>
+        </div>
+      </aside>
+
+      <MobileBottomNav />
+    </>
+  );
+}

package/app/components/Skeleton.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+type SkeletonProps = {
+  width?: string | number;
+  height?: string | number;
+  /** Extra accent glow — violet tint */
+  accent?: boolean;
+  /** Shape variant */
+  variant?: 'text' | 'block' | 'card' | 'circle';
+  /** Inline display */
+  inline?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function Skeleton({
+  width = '100%',
+  height,
+  accent = false,
+  variant = 'block',
+  inline = false,
+  className,
+  style,
+}: SkeletonProps) {
+  const base: React.CSSProperties = {
+    display: inline ? 'inline-block' : 'block',
+    width,
+    height: height ?? (variant === 'text' ? '1em' : variant === 'block' ? 16 : variant === 'circle' ? 32 : 80),
+    background: accent
+      ? 'linear-gradient(90deg, rgba(146,91,252,0.06), rgba(146,91,252,0.14), rgba(146,91,252,0.06))'
+      : 'linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.07), rgba(255,255,255,0.035))',
+    backgroundSize: '220% 100%',
+    animation: 'skeleton-shimmer 1.35s ease-in-out infinite',
+    borderRadius: variant === 'circle' ? '50%' : 0,
+    verticalAlign: inline ? 'middle' : undefined,
+    ...style,
+  };
+  return <div className={className} style={base} aria-hidden="true" />;
+}
+
+/** Tree skeleton — simulates file tree structure like workspace sidebar */
+export function TreeSkeleton({ rows = 12, indentLevels = true }: { rows?: number; indentLevels?: boolean }) {
+  const baseIndent = 14;
+  const depths = indentLevels
+    ? [0, 0, 1, 2, 0, 1, 1, 0, 0, 0, 1, 2, 3, 0, 1, 0, 0, 2, 0, 0]
+    : Array.from({ length: rows }, () => 0);
+
+  return (
+    <div style={{ padding: '6px 0 24px', display: 'flex', flexDirection: 'column', gap: 4 }}>
+      {depths.slice(0, rows).map((depth, i) => {
+        const hasChevron = depth < (depths[i + 1] ?? -1);
+        return (
+          <div
+            key={i}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              padding: `3px 8px 3px ${8 + depth * baseIndent}px`,
+            }}
+          >
+            {/* chevron / spacer */}
+            {hasChevron ? (
+              <Skeleton width={10} height={10} accent />
+            ) : (
+              <div style={{ width: 10, flexShrink: 0 }} />
+            )}
+            {/* icon */}
+            <Skeleton width={14} height={14} accent />
+            {/* name */}
+            <Skeleton
+              width={`${35 + Math.sin(i * 2.1) * 25 + (i % 3) * 10}%`}
+              height={10}
+              variant="block"
+            />
+            {/* size */}
+            {i % 3 === 1 && <Skeleton width={32} height={10} style={{ marginLeft: 'auto' }} />}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Code skeleton — simulates code editor lines */
+export function CodeSkeleton({ lines = 12 }: { lines?: number }) {
+  const lineWidths = [0.82, 0.45, 0.68, 1, 0.55, 0.72, 0.38, 0.91, 0.6, 0.33, 0.77, 0.5, 0.65, 0.88, 0.42, 0.74, 0.57, 0.49];
+
+  return (
+    <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
+      {lineWidths.slice(0, lines).map((w, i) => (
+        <Skeleton key={i} width={`${w * 100}%`} height={11} />
+      ))}
+    </div>
+  );
+}
+
+/* ─── Legacy aliases (used by existing components) ────────────────────────── */
+/** Stack of horizontal skeleton lines */
+export function SkeletonLines({ count = 3, width }: { count?: number; width?: string | number }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {Array.from({ length: count }).map((_, i) => (
+        <Skeleton key={i} width={width ?? `${85 - i * 7}%`} height={12} />
+      ))}
+    </div>
+  );
+}
+
+/** Metric skeleton — a label line above a large value bar */
+export function SkeletonMetric({ width: w }: { width?: number }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <Skeleton width={w ?? 64} height={10} />
+      <Skeleton width={w ?? 88} height={24} accent />
+    </div>
+  );
+}
+
+/** Card rows skeleton — simulates a grid/list of cards */
+export function CardRowSkeleton({ count = 3, height = 56 }: { count?: number; height?: number }) {
+  return (
+    <div style={{ display: 'grid', gap: 8 }}>
+      {Array.from({ length: count }).map((_, i) => (
+        <Skeleton
+          key={i}
+          height={height}
+          style={{ border: '1px solid rgba(255,255,255,0.06)' }}
+        />
+      ))}
+    </div>
+  );
+}

package/app/components/SystemCockpit.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import type { Costs, FilterConfig, Session, SessionEvent } from '@/lib/types';
+import { isSessionActive } from '@/lib/patterns/sessionPresentation';
+import { SkeletonLines, SkeletonMetric } from './Skeleton';
+import { Metric, StatusCard, Surface, toneFromHealth } from './ui';
+import { apiFetch } from '@/lib/apiFetch';
+import LiveFeed from './LiveFeed';
+import CostBreakdown from './CostBreakdown';
+
+interface SystemCheck {
+  id: string;
+  label: string;
+  health: 'ok' | 'warning' | 'error';
+  value: string | number;
+  details?: string;
+  source: 'runtime' | 'memory' | 'cron' | 'cost' | 'trello';
+}
+
+interface Recommendation {
+  id: string;
+  severity: 'info' | 'warning' | 'critical';
+  source: SystemCheck['source'];
+  title: string;
+  details: string;
+  actionHref?: string;
+  dismissible: boolean;
+  createdAt: string;
+  trelloCardId?: string;
+}
+
+interface SystemHealthPayload {
+  health: 'ok' | 'warning' | 'error';
+  checks: SystemCheck[];
+  recommendations: Recommendation[];
+  generatedAt: string;
+}
+
+interface SystemCockpitProps {
+  sessions: Session[];
+  events: SessionEvent[];
+  costs: Costs;
+  filter: FilterConfig;
+  visibleEvents: SessionEvent[];
+  loading?: boolean;
+}
+
+function fmtMoney(value?: number | null): string {
+  return `$${Number(value ?? 0).toFixed(2)}`;
+}
+
+function fmtAge(ts?: number | null): string {
+  if (!ts) return 'n/a';
+  const ms = Date.now() - (ts > 10_000_000_000 ? ts : ts * 1000);
+  if (ms < 60_000) return 'now';
+  if (ms < 3_600_000) return `${Math.floor(ms / 60_000)}m ago`;
+  if (ms < 86_400_000) return `${Math.floor(ms / 3_600_000)}h ago`;
+  return `${Math.floor(ms / 86_400_000)}d ago`;
+}
+
+function severityHealth(severity: Recommendation['severity']): 'ok' | 'warning' | 'error' | 'info' {
+  if (severity === 'critical') return 'error';
+  if (severity === 'warning') return 'warning';
+  return 'info';
+}
+
+function findCheck(checks: SystemCheck[], id: string): SystemCheck | undefined {
+  return checks.find((check) => check.id === id);
+}
+
+export default function SystemCockpit({
+  sessions, events, costs, filter, visibleEvents,
+  loading = false,
+}: SystemCockpitProps) {
+  const [systemHealth, setSystemHealth] = useState<SystemHealthPayload | null>(null);
+
+  useEffect(() => {
+    const load = () => {
+      apiFetch('/api/system-health')
+        .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+        .then(setSystemHealth)
+        .catch((error) => setSystemHealth({
+          health: 'warning',
+          checks: [{ id: 'system-health.api', label: 'System health API', health: 'warning', value: 'warning', details: error.message, source: 'runtime' }],
+          recommendations: [{ id: 'system-health.api', severity: 'warning', source: 'runtime', title: 'System health unreadable', details: error.message, dismissible: false, createdAt: new Date().toISOString() }],
+          generatedAt: new Date().toISOString(),
+        }));
+    };
+    load();
+    const t = setInterval(load, 30_000);
+    return () => clearInterval(t);
+  }, []);
+
+  const metrics = useMemo(() => {
+    const active = sessions.filter(isSessionActive).length;
+    const errors = events.filter((event) => String(event.type ?? event.event ?? '').toLowerCase().includes('error')).length;
+    const latest = Math.max(...sessions.map((session) => Number(session.updated_at ?? session.started_at ?? 0)), 0);
+    return { active, errors, latest };
+  }, [sessions, events]);
+
+  const systemLoading = loading || !systemHealth;
+  const checks = systemHealth?.checks ?? [];
+  const cronCheck = findCheck(checks, 'cron.jobs') ?? findCheck(checks, 'cron.api');
+  const runtimeCheck = findCheck(checks, 'runtime.sessions');
+  const costCheck = findCheck(checks, 'cost.usageBasedToday');
+  const health = systemHealth?.health ?? 'warning';
+  const recommendations = systemHealth?.recommendations ?? [];
+  const runtimeFreshness = runtimeCheck?.details ?? fmtAge(metrics.latest);
+
+  return (
+    <section className="cockpit">
+      <div className="cockpit__metrics">
+        <Surface as="article" tone={toneFromHealth(health)}>
+          <div className="ui-kicker">Rev4a System Health</div>
+          <div className="cockpit__health-row">
+            {systemLoading ? <SkeletonMetric width={120} /> : <span className={`cockpit__health cockpit__health--${health}`}>{health}</span>}
+            <span className="ui-muted" style={{ fontSize: 11 }}>{runtimeFreshness}</span>
+          </div>
+          <div className="ui-muted" style={{ marginTop: 10, fontSize: 11 }}>Server-side monitor from `/api/system-health`.</div>
+        </Surface>
+        <Metric title="Active sessions" value={metrics.active} subtitle={`${sessions.length} total`} loading={loading} />
+        <Metric title="Usage cost" value={String(costCheck?.value ?? fmtMoney(0))} subtitle={costCheck?.details ?? `DB estimate ${fmtMoney(costs.today)}`} tone="accent" loading={systemLoading} />
+      </div>
+
+      <div className="cockpit__main">
+        <div className="cockpit__checks">
+          <StatusCard loading={systemLoading} title="Runtime Rev4a" health={runtimeCheck?.health ?? 'warning'} rows={[[runtimeCheck?.label ?? 'Total sessions', runtimeCheck?.value ?? sessions.length], ['Last update', runtimeFreshness], ['Recent feed errors', metrics.errors]]} />
+          <StatusCard loading={systemLoading} title="Cron / Watchdog" health={cronCheck?.health ?? 'warning'} rows={[[cronCheck?.label ?? 'Cron', cronCheck?.value ?? 'n/a'], ['Detail', cronCheck?.details ?? 'n/a'], ['Source', '/api/system-health']]} />
+          <StatusCard loading={loading} title="Lineage" health={sessions.length ? 'ok' : 'warning'} rows={[[ 'Total sessions', sessions.length], ['Live events', events.length], ['Full view', <Link key="lineage" href="/lineage" className="ui-link">Open graph →</Link>]]} />
+        </div>
+
+        <Surface as="aside">
+          <div className="ui-kicker ui-kicker--accent" style={{ marginBottom: 14 }}>Recommended actions</div>
+          {systemLoading ? (
+            <SkeletonLines count={5} />
+          ) : recommendations.length ? (
+            <ul className="cockpit__recommendations">
+              {recommendations.map((item) => (
+                <li key={item.id} className={`cockpit__recommendation cockpit__recommendation--${severityHealth(item.severity)}`}>
+                  <div className="cockpit__recommendation-head">
+                    <strong>{item.title}</strong>
+                    <span>{item.severity}</span>
+                  </div>
+                  <div className="ui-muted" style={{ marginTop: 4 }}>{item.details}</div>
+                  {item.actionHref && <Link href={item.actionHref} className="ui-link" style={{ display: 'inline-block', marginTop: 6 }}>Apri →</Link>}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div style={{ color: 'var(--green)', fontSize: 13 }}>No immediate warnings. System in operational state.</div>
+          )}
+          <div className="cockpit__quick-links">
+            <Link className="agent-btn" href="/memory">Memory</Link>
+            <Link className="agent-btn" href="/crons">Crons</Link>
+            <Link className="agent-btn" href="/agents">Agents</Link>
+            <Link className="agent-btn" href="/lineage">Lineage</Link>
+          </div>
+        </Surface>
+      </div>
+
+      <div className="cockpit__feed-section">
+        <LiveFeed events={visibleEvents.slice(0, 10)} loading={loading} />
+        <CostBreakdown byModel={costs.byModel} loading={loading} />
+      </div>
+    </section>
+  );
+}