@porkytheblack/garage-dashboard 0.1.0

package/app/(app)/storage/page.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import * as React from "react";
+import { Cloud, Save } from "lucide-react";
+import { toast } from "sonner";
+import { useQuery } from "@/lib/hooks";
+import { api } from "@/lib/api";
+import { Page, PageHeader, Loading, ErrorState, Spinner } from "@/components/shared";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Toggle } from "./toggle";
+import type { StorageConfigDto, UpdateStorageConfigInput } from "@/lib/types";
+
+const EMPTY: StorageConfigDto = {
+  enabled: false,
+  endpoint: null,
+  bucket: null,
+  prefix: null,
+  access_key_id: null,
+  has_secret: false,
+};
+
+/** A labeled text field, stacked label over input with an optional hint. */
+function TextField({
+  label,
+  value,
+  onChange,
+  placeholder,
+  hint,
+  mono,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  hint?: React.ReactNode;
+  mono?: boolean;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <Label>{label}</Label>
+      <Input value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} className={mono ? "font-mono text-[12.5px]" : undefined} />
+      {hint && <p className="text-[12px] leading-relaxed text-faint">{hint}</p>}
+    </div>
+  );
+}
+
+export default function StoragePage() {
+  const { data, loading, error, reload } = useQuery<{ storage: StorageConfigDto }>("/storage");
+  const config = data?.storage ?? EMPTY;
+
+  const [enabled, setEnabled] = React.useState(false);
+  const [endpoint, setEndpoint] = React.useState("");
+  const [bucket, setBucket] = React.useState("");
+  const [prefix, setPrefix] = React.useState("");
+  const [accessKey, setAccessKey] = React.useState("");
+  const [secret, setSecret] = React.useState("");
+  const [replacingSecret, setReplacingSecret] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+
+  // Hydrate the form whenever the server config (re)loads.
+  React.useEffect(() => {
+    setEnabled(config.enabled);
+    setEndpoint(config.endpoint ?? "");
+    setBucket(config.bucket ?? "");
+    setPrefix(config.prefix ?? "");
+    setAccessKey(config.access_key_id ?? "");
+    setSecret("");
+    setReplacingSecret(false);
+  }, [config.enabled, config.endpoint, config.bucket, config.prefix, config.access_key_id, config.has_secret]);
+
+  const save = async () => {
+    const patch: UpdateStorageConfigInput = {};
+    if (enabled !== config.enabled) patch.enabled = enabled;
+    if (endpoint.trim() !== (config.endpoint ?? "")) patch.endpoint = endpoint.trim() || null;
+    if (bucket.trim() !== (config.bucket ?? "")) patch.bucket = bucket.trim() || null;
+    if (prefix.trim() !== (config.prefix ?? "")) patch.prefix = prefix.trim() || null;
+    if (accessKey.trim() !== (config.access_key_id ?? "")) patch.access_key_id = accessKey.trim() || null;
+    // Secret is write-only: send it only when the user typed a new one.
+    if ((!config.has_secret || replacingSecret) && secret) patch.secret_access_key = secret;
+
+    if (Object.keys(patch).length === 0) {
+      toast.message("No changes to save");
+      return;
+    }
+    setBusy(true);
+    try {
+      await api("/storage", { method: "PUT", body: patch });
+      toast.success("Storage settings saved");
+      reload();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed to save");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title="Storage"
+        description="Mirror each session's uploads/ folder to an S3-compatible bucket (Cloudflare R2 or any S3 endpoint) so your other systems can reach the same files."
+      />
+
+      {error && <ErrorState message={error} className="mb-4" />}
+
+      {loading ? (
+        <Loading />
+      ) : (
+        <div className="surface max-w-xl space-y-5 p-5">
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2 text-[14px] font-semibold text-foreground">
+                <Cloud className="size-4 text-faint" /> Remote uploads mirror
+              </div>
+              <p className="mt-1 text-[12.5px] leading-relaxed text-faint">
+                Files sync under <span className="font-mono text-muted-foreground">{prefix.trim() ? `${prefix.trim()}/` : ""}&lt;namespace&gt;/&lt;session&gt;/</span>.
+                Local files stay canonical while a session is live.
+              </p>
+            </div>
+            <Toggle checked={enabled} onChange={setEnabled} label="Enable remote storage" disabled={busy} />
+          </div>
+
+          <div className="grid gap-4 border-t border-border/60 pt-5">
+            <TextField label="Endpoint" value={endpoint} onChange={setEndpoint} mono placeholder="https://<account>.r2.cloudflarestorage.com" />
+            <div className="grid grid-cols-2 gap-4">
+              <TextField label="Bucket" value={bucket} onChange={setBucket} placeholder="my-uploads" />
+              <TextField label="Prefix" value={prefix} onChange={setPrefix} placeholder="(optional)" hint="Key prefix inside the bucket." />
+            </div>
+            <TextField label="Access key ID" value={accessKey} onChange={setAccessKey} mono placeholder="R2 / S3 access key id" />
+            <div className="space-y-1.5">
+              <Label>Secret access key</Label>
+              {config.has_secret && !replacingSecret ? (
+                <div className="flex items-center justify-between rounded-md border border-border bg-surface-2/60 px-3 py-2">
+                  <span className="inline-flex items-center gap-1.5 text-[12.5px] text-muted-foreground">
+                    <span className="size-1.5 rounded-full bg-success" /> Secret set
+                  </span>
+                  <Button type="button" variant="ghost" size="sm" onClick={() => setReplacingSecret(true)}>
+                    Replace
+                  </Button>
+                </div>
+              ) : (
+                <Input
+                  type="password"
+                  value={secret}
+                  onChange={(e) => setSecret(e.target.value)}
+                  placeholder={config.has_secret ? "Enter a new secret" : "Paste the secret access key"}
+                  className="font-mono text-[12.5px]"
+                />
+              )}
+            </div>
+          </div>
+
+          <div className="flex justify-end border-t border-border/60 pt-4">
+            <Button onClick={save} disabled={busy}>
+              {busy ? <Spinner /> : <Save />} Save settings
+            </Button>
+          </div>
+        </div>
+      )}
+    </Page>
+  );
+}

package/app/(app)/storage/toggle.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * A compact on/off switch built from design tokens (no shadcn Switch exists in
+ * this kit). Brand-tinted track when on, quiet `surface-2` when off; the same
+ * focus ring as every other control.
+ */
+export function Toggle({
+  checked,
+  onChange,
+  label,
+  disabled,
+}: {
+  checked: boolean;
+  onChange: (next: boolean) => void;
+  label: string;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        "relative inline-flex h-[22px] w-9 shrink-0 items-center rounded-full border transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "border-brand/40 bg-brand/80 shadow-sheen" : "border-border bg-surface-2",
+      )}
+    >
+      <span
+        className={cn(
+          "inline-block size-[16px] rounded-full bg-background shadow-sm transition-transform",
+          checked ? "translate-x-[16px]" : "translate-x-[3px]",
+        )}
+      />
+    </button>
+  );
+}

package/app/(app)/workspaces/list.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { FolderGit2, Trash2 } from "lucide-react";
+import { timeAgo } from "@/lib/format";
+import { ConfirmButton } from "@/components/shared";
+import type { WorkspaceDto } from "@/lib/types";
+
+/** A single workspace: name + mono path, with session weight and age trailing. */
+export function WorkspaceRow({ w, onDelete }: { w: WorkspaceDto; onDelete: (id: string) => void }) {
+  const count = w.session_count;
+  return (
+    <div className="group flex items-center gap-3 px-3.5 py-2.5 transition-colors hover:bg-surface-2">
+      <FolderGit2 className="size-4 shrink-0 text-faint" />
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[13.5px] font-medium text-foreground">{w.name}</div>
+        <div className="truncate font-mono text-[12px] text-faint">{w.path}</div>
+      </div>
+      <span className="tnum hidden w-20 shrink-0 text-right text-[12px] sm:block">
+        {count > 0 ? (
+          <span className="inline-flex items-center gap-1.5 text-success">
+            <span className="size-1.5 rounded-full bg-success" />
+            <span className="text-muted-foreground">{count} {count === 1 ? "session" : "sessions"}</span>
+          </span>
+        ) : (
+          <span className="text-faint">no sessions</span>
+        )}
+      </span>
+      <span className="tnum hidden w-12 shrink-0 text-right text-[12px] text-faint md:block">{timeAgo(w.created_at)}</span>
+      <div className="flex shrink-0 justify-end">
+        <ConfirmButton label="" icon={Trash2} onConfirm={() => onDelete(w.id)} />
+      </div>
+    </div>
+  );
+}

package/app/(app)/workspaces/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+import { FolderGit2, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { useQuery } from "@/lib/hooks";
+import { api } from "@/lib/api";
+import { Page, PageHeader, Loading, EmptyState, ErrorState, Spinner } from "@/components/shared";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogTrigger } from "@/components/ui/dialog";
+import { WorkspaceRow } from "./list";
+import type { WorkspaceDto } from "@/lib/types";
+
+export default function WorkspacesPage() {
+  const { data, loading, error, reload } = useQuery<{ workspaces: WorkspaceDto[] }>("/workspaces");
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [path, setPath] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const create = async () => {
+    setBusy(true);
+    try {
+      const body: Record<string, string> = {};
+      if (name.trim()) body.name = name.trim();
+      if (path.trim()) body.path = path.trim();
+      await api("/workspaces", { method: "POST", body });
+      setOpen(false);
+      setName("");
+      setPath("");
+      reload();
+      toast.success("Workspace created");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Create failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const destroy = async (id: string) => {
+    try {
+      await api(`/workspaces/${id}`, { method: "DELETE" });
+      toast.success("Workspace deleted");
+      reload();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Delete failed");
+    }
+  };
+
+  const workspaces = data?.workspaces ?? [];
+
+  return (
+    <Page>
+      <PageHeader
+        title="Workspaces"
+        description="Named directories on the Garage host that sessions run against — the sandbox each agent works in."
+        actions={
+          <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+              <Button>
+                <Plus /> New workspace
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>New workspace</DialogTitle>
+                <DialogDescription>Leave the path blank to create one under the Garage workspace root.</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                <div className="space-y-1.5">
+                  <Label>Name</Label>
+                  <Input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="my-app" />
+                </div>
+                <div className="space-y-1.5">
+                  <Label>Path (optional)</Label>
+                  <Input value={path} onChange={(e) => setPath(e.target.value)} placeholder="/home/dev/my-app" />
+                </div>
+              </div>
+              <DialogFooter>
+                <Button variant="ghost" onClick={() => setOpen(false)} disabled={busy}>
+                  Cancel
+                </Button>
+                <Button onClick={create} disabled={busy}>
+                  {busy ? <Spinner /> : null} Create
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        }
+      />
+
+      {error && <ErrorState message={error} className="mb-4" />}
+
+      <div className="surface overflow-hidden">
+        {loading ? (
+          <Loading />
+        ) : workspaces.length === 0 ? (
+          <EmptyState icon={FolderGit2} title="No workspaces" description="Create one, or let sessions create them on demand." />
+        ) : (
+          <div className="divide-y divide-border/60">
+            {workspaces.map((w) => (
+              <WorkspaceRow key={w.id} w={w} onDelete={destroy} />
+            ))}
+          </div>
+        )}
+      </div>
+    </Page>
+  );
+}

package/app/globals.css

@@ -0,0 +1,297 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * Garage design language — "sap & sunlight" (solarpunk graphite).
+ * Two modes, one structure: surfaces climb the same elevation ladder
+ * (background → card → surface-2 → elevated) in both; a single sap-green
+ * brand accent is reserved for active nav, primary actions, focus, and live
+ * state; solar amber is the working/caution warmth. Depth comes from hairline
+ * borders + a top sheen, not heavy shadows. The green and amber SHIFT per
+ * mode (light mode runs darker for contrast on cream) — structure never does.
+ */
+@layer base {
+  /* Light — "warm paper": cream surfaces, pine ink, darkened sap. */
+  :root {
+    --background: 44 51% 93%;
+    --foreground: 137 20% 14%;
+
+    --card: 44 60% 95%;
+    --card-foreground: 137 20% 14%;
+    --surface-2: 43 44% 89%;
+    --elevated: 47 90% 98%;
+
+    --popover: 46 75% 97%;
+    --popover-foreground: 137 20% 14%;
+
+    /* Brand accent (sap green) — used sparingly. */
+    --primary: 147 45% 34%;
+    --primary-foreground: 44 60% 96%;
+    --brand: 147 45% 34%;
+    --brand-foreground: 44 60% 96%;
+    --brand-strong: 147 52% 27%;
+
+    --secondary: 43 38% 87%;
+    --secondary-foreground: 137 20% 14%;
+
+    /* Three weights of quiet: muted (labels) → faint (hints) → icon dim. */
+    --muted: 43 36% 88%;
+    --muted-foreground: 110 10% 35%;
+    --faint: 105 8% 48%;
+
+    --accent: 43 40% 85%;
+    --accent-foreground: 137 20% 14%;
+
+    --destructive: 6 55% 46%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 147 45% 32%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 76% 38%;
+    --warning-foreground: 0 0% 100%;
+
+    --border: 42 35% 81%;
+    --border-strong: 42 28% 70%;
+    --input: 42 32% 76%;
+    --ring: 147 45% 34%;
+
+    --sidebar: 44 48% 91%;
+    --sidebar-foreground: 137 15% 22%;
+    --sidebar-accent: 43 38% 85%;
+    --sidebar-border: 42 35% 84%;
+
+    --radius: 0.7rem;
+
+    /* Depth recipe (referenced from tailwind.config.ts shadows). */
+    --sheen: 0 0% 100% / 0.55;
+    --shimmer: 40 30% 20% / 0.05;
+    --shadow-card: 0 1px 2px 0 hsl(40 35% 25% / 0.1), inset 0 1px 0 0 hsl(0 0% 100% / 0.5);
+    --shadow-elevated:
+      0 16px 40px -12px hsl(40 35% 20% / 0.22), 0 4px 12px -4px hsl(40 35% 20% / 0.14),
+      inset 0 1px 0 0 hsl(0 0% 100% / 0.65);
+  }
+
+  /* Dark — "pine at dusk": green-black surfaces, luminous sap, amber glow. */
+  .dark {
+    --background: 150 25% 6%;
+    --foreground: 105 20% 92%;
+
+    --card: 150 20% 8.5%;
+    --card-foreground: 105 20% 92%;
+    --surface-2: 150 17% 11%;
+    --elevated: 150 16% 13.5%;
+
+    --popover: 150 18% 9%;
+    --popover-foreground: 105 20% 92%;
+
+    --primary: 145 44% 52%;
+    --primary-foreground: 150 25% 6%;
+    --brand: 145 44% 52%;
+    --brand-foreground: 150 25% 6%;
+    --brand-strong: 145 50% 64%;
+
+    --secondary: 150 14% 13%;
+    --secondary-foreground: 105 20% 92%;
+
+    --muted: 150 14% 12%;
+    --muted-foreground: 139 13% 66%;
+    --faint: 139 11% 46%;
+
+    --accent: 150 14% 14%;
+    --accent-foreground: 105 20% 92%;
+
+    --destructive: 6 65% 57%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 145 44% 50%;
+    --success-foreground: 150 25% 6%;
+    --warning: 39 87% 60%;
+    --warning-foreground: 150 25% 8%;
+
+    --border: 150 15% 15%;
+    --border-strong: 150 13% 23%;
+    --input: 150 13% 19%;
+    --ring: 145 44% 52%;
+
+    --sidebar: 150 24% 7%;
+    --sidebar-foreground: 105 15% 88%;
+    --sidebar-accent: 150 14% 12%;
+    --sidebar-border: 150 16% 11%;
+
+    --sheen: 0 0% 100% / 0.04;
+    --shimmer: 0 0% 100% / 0.06;
+    --shadow-card: 0 1px 2px 0 hsl(150 20% 2% / 0.5), inset 0 1px 0 0 hsl(0 0% 100% / 0.03);
+    --shadow-elevated:
+      0 16px 40px -12px hsl(150 25% 2% / 0.75), 0 4px 12px -4px hsl(150 25% 2% / 0.55),
+      inset 0 1px 0 0 hsl(0 0% 100% / 0.05);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html {
+    color-scheme: light;
+  }
+  html.dark {
+    color-scheme: dark;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1, "cv01" 1;
+    text-rendering: optimizeLegibility;
+  }
+  ::selection {
+    background: hsl(var(--brand) / 0.3);
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border-strong)) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border-strong));
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--faint) / 0.6);
+    background-clip: padding-box;
+  }
+}
+
+@layer components {
+  /* Faint top-lit vignette behind the whole app — barely perceptible, but it
+     keeps large fields from reading as dead flat. Light mode gets a low sun;
+     dark mode gets canopy green with an amber hint. */
+  .app-backdrop {
+    background:
+      radial-gradient(115% 80% at 50% -10%, hsl(39 85% 70% / 0.16), transparent 60%),
+      radial-gradient(90% 60% at 100% 0%, hsl(147 45% 55% / 0.1), transparent 55%),
+      hsl(var(--background));
+  }
+  .dark .app-backdrop {
+    background:
+      radial-gradient(115% 80% at 50% -10%, hsl(150 45% 14% / 0.35), transparent 60%),
+      radial-gradient(90% 60% at 100% 0%, hsl(39 60% 30% / 0.1), transparent 55%),
+      hsl(var(--background));
+  }
+  /* Surface with the signature sheen: hairline border + soft inner top edge. */
+  .surface {
+    @apply rounded-lg border border-border bg-card shadow-card;
+  }
+  /* Big, tightly-tracked display text for hero moments and metrics. */
+  .text-display {
+    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
+    line-height: 1.05;
+    letter-spacing: -0.02em;
+    font-weight: 600;
+  }
+  .tnum {
+    font-variant-numeric: tabular-nums;
+  }
+  /* Shimmering skeleton sweep. */
+  .skeleton {
+    @apply relative overflow-hidden rounded-md bg-secondary/60;
+  }
+  .skeleton::after {
+    content: "";
+    @apply absolute inset-0 -translate-x-full animate-shimmer;
+    background: linear-gradient(90deg, transparent, hsl(var(--shimmer)), transparent);
+  }
+}
+
+/* Markdown rendering inside chat (prose-lite, theme-aware). */
+@layer components {
+  .md > :first-child {
+    margin-top: 0;
+  }
+  .md > :last-child {
+    margin-bottom: 0;
+  }
+  .md p,
+  .md ul,
+  .md ol,
+  .md pre,
+  .md blockquote {
+    margin: 0.5rem 0;
+  }
+  .md ul,
+  .md ol {
+    padding-left: 1.25rem;
+  }
+  .md ul {
+    list-style: disc;
+  }
+  .md ol {
+    list-style: decimal;
+  }
+  .md li {
+    margin: 0.15rem 0;
+  }
+  .md a {
+    color: hsl(var(--brand-strong));
+    text-underline-offset: 2px;
+  }
+  .md a:hover {
+    text-decoration: underline;
+  }
+  .md code {
+    font-family: var(--font-geist-mono), monospace;
+    font-size: 0.85em;
+    background: hsl(var(--secondary));
+    border: 1px solid hsl(var(--border));
+    border-radius: 5px;
+    padding: 0.08em 0.34em;
+  }
+  .md pre {
+    background: hsl(var(--background));
+    border: 1px solid hsl(var(--border));
+    border-radius: 8px;
+    padding: 0.75rem 0.85rem;
+    overflow-x: auto;
+  }
+  .md pre code {
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-size: 0.82rem;
+    line-height: 1.5;
+  }
+  .md h1,
+  .md h2,
+  .md h3 {
+    font-weight: 600;
+    line-height: 1.3;
+    margin: 0.9rem 0 0.4rem;
+    letter-spacing: -0.01em;
+  }
+  .md h1 {
+    font-size: 1.05rem;
+  }
+  .md h2 {
+    font-size: 1rem;
+  }
+  .md h3 {
+    font-size: 0.95rem;
+  }
+  .md blockquote {
+    border-left: 2px solid hsl(var(--border-strong));
+    padding-left: 0.75rem;
+    color: hsl(var(--muted-foreground));
+  }
+  .md table {
+    border-collapse: collapse;
+    font-size: 0.85em;
+  }
+  .md th,
+  .md td {
+    border: 1px solid hsl(var(--border));
+    padding: 0.3rem 0.55rem;
+    text-align: left;
+  }
+}

package/app/layout.tsx

@@ -0,0 +1,32 @@
+import "./globals.css";
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+import { AuthProvider } from "@/lib/auth";
+import { THEME_BOOT_SCRIPT } from "@/lib/theme";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { Toaster } from "@/components/ui/sonner";
+import { cn } from "@/lib/utils";
+
+export const metadata: Metadata = {
+  title: "Garage — Glorp orchestration",
+  description: "Command console for the Glorp Garage agent runtime.",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" className={cn(GeistSans.variable, GeistMono.variable)} suppressHydrationWarning>
+      <head>
+        {/* Sets the `dark` class before first paint — localStorage, then OS. */}
+        <script dangerouslySetInnerHTML={{ __html: THEME_BOOT_SCRIPT }} />
+      </head>
+      <body className="min-h-screen bg-background font-sans text-foreground antialiased">
+        <AuthProvider>
+          <TooltipProvider delayDuration={250}>{children}</TooltipProvider>
+        </AuthProvider>
+        <Toaster />
+      </body>
+    </html>
+  );
+}