feat: tokens, shell, healthz

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

app/api/healthz/route.ts

@@ -0,0 +1,2 @@
+export const dynamic = "force-dynamic";
+export const GET = () => Response.json({ ok: true });

app/app/layout.tsx

@@ -0,0 +1,6 @@
+export default function Console({ children }: { children: React.ReactNode }) {
+  return <div className="shell">
+    <aside className="rail" aria-label="Previous analyses">qAI</aside>
+    <main className="main">{children}</main>
+  </div>;
+}

app/app/page.tsx

@@ -0,0 +1 @@
+export default function NewAnalysis() { return <h1 style={{ fontFamily: "var(--qai-font-display)" }}>New analysis</h1>; }

app/globals.css

@@ -0,0 +1,9 @@
+@import "./tokens.css";
+@import "./ui.css";
+
+html, body { overflow-x: clip; }
+body { background: var(--qai-paper); color: var(--qai-ink); font-family: var(--qai-font-body);
+       font-size: var(--qai-text-base); line-height: 1.5; margin: 0; }
+* { box-sizing: border-box; }
+:focus-visible { outline: 2px solid var(--qai-focus); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

app/layout.tsx

@@ -0,0 +1,9 @@
+import type { Metadata, Viewport } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = { title: "SQL Server qAI", description: "Query plan triage, ranked by Jev." };
+export const viewport: Viewport = { width: "device-width", initialScale: 1 };
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return <html lang="en"><body>{children}</body></html>;
+}

app/page.tsx

@@ -0,0 +1,2 @@
+import { redirect } from "next/navigation";
+export default function Home() { redirect("/login"); }

app/tokens.css

@@ -0,0 +1,33 @@
+/* Hallmark · genre: atmospheric · macrostructure: Workbench · theme: Terminal
+ * enrichment: none (typography only) · nav: N3 side-rail · footer: Ft4 dense colophon
+ * inferred: audience = DBAs/consultants · use = analyse one plan · tone = technical-utilitarian
+ * axes: paper band dark (L<30%) · display mono · accent phosphor green
+ */
+:root {
+  --qai-paper: oklch(17% 0.014 255);
+  --qai-paper-2: oklch(21% 0.015 258);
+  --qai-paper-3: oklch(26% 0.016 260);
+  --qai-ink: oklch(96% 0.004 250);
+  --qai-ink-muted: oklch(72% 0.02 250);
+  --qai-accent: oklch(80% 0.19 152);
+  --qai-on-accent: oklch(20% 0.04 152);
+  --qai-warn: oklch(82% 0.15 86);
+  --qai-danger: oklch(66% 0.21 25);
+  --qai-info: oklch(77% 0.11 232);
+  --qai-rule: oklch(31% 0.016 258);
+  --qai-focus: var(--qai-accent);
+  --qai-font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+  --qai-font-body: "IBM Plex Sans", system-ui, sans-serif;
+  --qai-space-xs: 4px;  --qai-space-s: 8px;  --qai-space-md: 12px; --qai-space-l: 16px;
+  --qai-space-xl: 24px; --qai-space-2xl: 32px; --qai-space-3xl: 48px;
+  --qai-text-xs: 12px; --qai-text-sm: 13px; --qai-text-base: 15px; --qai-text-lg: 18px;
+  --qai-text-xl: 22px; --qai-text-2xl: 28px; --qai-text-display: 34px;
+  --qai-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --qai-dur-1: 120ms; --qai-dur-2: 220ms;
+  --qai-radius: 6px;
+}
+@media print {
+  :root { --qai-paper:#fff; --qai-paper-2:#f4f5f7; --qai-paper-3:#e9ebef; --qai-ink:#14161a;
+          --qai-ink-muted:#4a5160; --qai-rule:#c9ced8; --qai-accent:#0a7d3c; --qai-on-accent:#fff;
+          --qai-warn:#8a5a00; --qai-danger:#a11212; --qai-info:#1a4fb8; }
+}

app/ui.css

@@ -0,0 +1,32 @@
+/* same stamp as tokens.css — one design record, two files */
+.shell { display: grid; grid-template-columns: 260px minmax(0,1fr); min-height: 100dvh; }
+.rail { background: var(--qai-paper-2); border-inline-end: 1px solid var(--qai-rule);
+        padding: var(--qai-space-l); display: flex; flex-direction: column; gap: var(--qai-space-md);
+        font-family: var(--qai-font-display); min-width: 0; }
+.main { min-width: 0; padding: var(--qai-space-2xl); display: flex; flex-direction: column; gap: var(--qai-space-xl); }
+.card { background: var(--qai-paper-2); border-radius: var(--qai-radius); padding: var(--qai-space-l); min-width: 0; }
+.btn { font: 500 var(--qai-text-sm)/1 var(--qai-font-display); padding: 10px 14px; border-radius: var(--qai-radius);
+       border: 1px solid var(--qai-rule); background: var(--qai-paper-3); color: var(--qai-ink); cursor: pointer;
+       transition: background var(--qai-dur-1) var(--qai-ease-out), transform var(--qai-dur-1) var(--qai-ease-out); }
+.btn:hover { background: var(--qai-rule); } .btn:active { transform: translateY(1px); }
+.btn:disabled { opacity: .5; cursor: not-allowed; }
+.btn-primary { background: var(--qai-accent); color: var(--qai-on-accent); border-color: transparent; }
+.field { width: 100%; background: var(--qai-paper); color: var(--qai-ink); border: 1px solid var(--qai-rule);
+         border-radius: var(--qai-radius); padding: 10px 12px; font-family: var(--qai-font-display); font-size: var(--qai-text-sm); }
+.label { font: 500 var(--qai-text-xs)/1 var(--qai-font-display); color: var(--qai-ink-muted);
+         text-transform: uppercase; letter-spacing: .04em; }
+.pill { font: 500 var(--qai-text-xs)/1 var(--qai-font-display); padding: 4px 8px; border-radius: 999px;
+        border: 1px solid var(--qai-rule); color: var(--qai-ink-muted); }
+.colophon { border-top: 1px solid var(--qai-rule); padding: var(--qai-space-l) 0;
+            font: 400 var(--qai-text-xs)/1.6 var(--qai-font-display); color: var(--qai-ink-muted); }
+.report { display: flex; flex-direction: column; gap: var(--qai-space-l); min-width: 0; }
+.grid-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--qai-space-md); }
+.sql { overflow-x: auto; font-family: var(--qai-font-display); font-size: var(--qai-text-sm); white-space: pre; }
+.bar { height: 6px; border-radius: 999px; background: var(--qai-accent); max-width: 100%; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+[data-level="danger"] { border-inline-start: 3px solid var(--qai-danger); }
+[data-level="warn"] { border-inline-start: 3px solid var(--qai-warn); }
+[data-verdict] { border-inline-start: 3px solid var(--qai-accent); }
+@media (max-width: 860px) { .shell { grid-template-columns: minmax(0,1fr); } .rail { border-inline-end: 0; } }
+@media print { .rail, .runner, .toolbar, .colophon, .no-print { display: none !important; }
+               .shell { grid-template-columns: minmax(0,1fr); } .main { padding: 0; } }