diff --git a/web/bun.lock b/web/bun.lock
index afe612c..2d67cb3 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -9,6 +9,7 @@
         "blume": "^2.2.4",
         "daisyui": "^5.7.50",
         "ilha": "^0.16.0",
+        "lucide": "1.61.0",
         "tailwindcss": "^4.3.3",
       },
     },
@@ -1064,6 +1065,8 @@
 
     "lru_map": ["lru_map@0.4.1", "", {}, "sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg=="],
 
+    "lucide": ["lucide@1.61.0", "", {}, "sha512-RPNMBgej6WjPKuCNEODg83CF8lnraCeDOsZ3HZ7KvUYf0O5hdJBzer/Ax/meBHl3xvrp5NmKX0IDA5myyzlvGw=="],
+
     "magic-string": ["magic-string@1.4.3", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.6.0" } }, "sha512-z12OxmaPGE0F4xlpGdjuAUckipLpQlTAuAmyGhNoD7ODpYUzvDfvtxUbjM/jwznyP178oju/KDdyi220wNJ0RQ=="],
 
     "magicast": ["magicast@0.5.5", "", { "dependencies": { "@babel/parser": "^7.29.7", "@babel/types": "^7.29.7", "source-map-js": "^1.2.1" } }, "sha512-UicdXN8zQ3JHlxVq+28afMXPr1z7WNY6+7EJnzTdQWkTAlMLF5fNCCKxJHBQwGaNGR11581EiQmQzx73+MvszA=="],
diff --git a/web/package.json b/web/package.json
index f436596..87be709 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,6 +16,7 @@
     "blume": "^2.2.4",
     "daisyui": "^5.7.50",
     "ilha": "^0.16.0",
+    "lucide": "1.61.0",
     "tailwindcss": "^4.3.3"
   }
 }
diff --git a/web/pages/console/_islands/common.tsx b/web/pages/console/_islands/common.tsx
index 9d6f61a..af0ed16 100644
--- a/web/pages/console/_islands/common.tsx
+++ b/web/pages/console/_islands/common.tsx
@@ -100,7 +100,7 @@ export function CopyButton({ value, label }: { value: string; label: string }) {
   return (
     <button
       type="button"
-      class="icon-btn"
+      class="btn btn-ghost btn-square btn-xs shrink-0"
       title={label}
       aria-label={label}
       onclick={() => {
diff --git a/web/pages/console/_islands/console.tsx b/web/pages/console/_islands/console.tsx
index 0f84768..ba52dbb 100644
--- a/web/pages/console/_islands/console.tsx
+++ b/web/pages/console/_islands/console.tsx
@@ -76,6 +76,44 @@ function monogram(slug: string): string {
   return (clean.slice(0, 1) || "?").toUpperCase();
 }
 
+// daisyUI mappings: status pills are `badge badge-soft`, rail dots are
+// `indicator-item` dots with theme backgrounds.
+function statusBadge(status: string): string {
+  if (status === "success" || status === "running" || status === "ok") {
+    return "badge-success";
+  }
+  if (
+    status === "building" ||
+    status === "deploying" ||
+    status === "reviewing" ||
+    status === "queued"
+  ) {
+    return "badge-info";
+  }
+  if (status === "failed" || status === "error" || status === "blocked") {
+    return "badge-error";
+  }
+  return "badge-ghost";
+}
+
+function statusDot(status: string): string {
+  if (status === "success" || status === "running" || status === "ok") {
+    return "bg-success";
+  }
+  if (
+    status === "building" ||
+    status === "deploying" ||
+    status === "reviewing" ||
+    status === "queued"
+  ) {
+    return "bg-warning";
+  }
+  if (status === "failed" || status === "error" || status === "blocked") {
+    return "bg-error";
+  }
+  return "bg-base-300";
+}
+
 async function loadActionsPage(
   slug: string,
   before: string | null,
@@ -412,6 +450,14 @@ export function Console() {
         apps.set({ kind: "error", message: String(err) });
         detail.set({ kind: "error", message: String(err) });
       });
+    window.addEventListener("keydown", (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        const current = ui();
+        if (current.createOpen || current.accountOpen || current.drawer) {
+          ui.set({ ...current, createOpen: false, accountOpen: false, drawer: false });
+        }
+      }
+    });
     window.addEventListener("popstate", () => {
       const r = readRoute();
       route.set(r);
@@ -443,17 +489,18 @@ export function Console() {
   if (appsPanel.kind === "loading") {
     return (
       <div class="console-boot" role="status" aria-label="Loading console">
-        <div class="skeleton-rail" />
-        <div class="skeleton-side" />
-        <div class="skeleton-main" />
+        <div class="skeleton rounded-box min-h-[calc(100dvh-24px)]" />
+        <div class="skeleton rounded-box min-h-[60dvh]" />
       </div>
     );
   }
   if (appsPanel.kind === "error") {
     return (
       <div class="console-error" role="alert">
-        <p>Couldn't load your apps: {appsPanel.message}</p>
-        <a href="/console/sign-in">Sign in</a>
+        <div class="alert alert-error alert-soft max-w-md">
+          <span class="min-w-0">Couldn't load your apps: {appsPanel.message}</span>
+        </div>
+        <a class="btn btn-neutral" href="/console/sign-in">Sign in</a>
       </div>
     );
   }
@@ -489,9 +536,9 @@ export function Console() {
       </a>
       <nav class="rail" aria-label="Applications">
         <a
-          class="rail-tile rail-mark"
+          class="rail-tile rail-logo tooltip tooltip-right"
+          data-tip="Outer console"
           href="/console"
-          title="Outer console"
           aria-label="Outer console"
           onclick={(e: Event) => {
             e.preventDefault();
@@ -506,8 +553,8 @@ export function Console() {
               key={a.slug}
               type="button"
               role="listitem"
-              class={`rail-tile rail-app tint-${tintIndex(a.slug)}${a.slug === r.app ? " is-active" : ""}`}
-              title={`${a.slug} · ${a.status}`}
+              class="tooltip tooltip-right rounded-[14px]"
+              data-tip={`${a.slug} · ${a.status}`}
               aria-label={`${a.slug}, ${a.status}`}
               aria-current={a.slug === r.app ? "page" : undefined}
               onclick={() => {
@@ -516,21 +563,29 @@ export function Console() {
                 }
               }}
             >
-              <span class="rail-mono" aria-hidden="true">
-                {monogram(a.slug)}
+              <span class="indicator">
+                <span
+                  class={`indicator-item indicator-bottom indicator-end h-2.5 w-2.5 rounded-full border-2 border-base-100 ${statusDot(a.status)}`}
+                  aria-hidden="true"
+                />
+                <span class="avatar avatar-placeholder">
+                  <span
+                    class={`flex h-11 w-11 items-center justify-center rounded-[14px] text-xl font-bold ${a.slug === r.app ? "border border-base-300 bg-base-100 shadow-sm" : `tint-${tintIndex(a.slug)}`}`}
+                  >
+                    <span aria-hidden="true">
+                      {monogram(a.slug)}
+                    </span>
+                  </span>
+                </span>
               </span>
-              <span
-                class={`status-dot is-${a.status}`}
-                aria-hidden="true"
-              />
             </button>
           ))}
         </div>
-        <div class="rail-create">
+        <div class={`dropdown dropdown-right${ui().createOpen ? " dropdown-open" : ""}`}>
           <button
             type="button"
-            class="rail-tile"
-            title="New app"
+            class="rail-tile tooltip tooltip-right"
+            data-tip="How apps are created"
             aria-label="How apps are created"
             aria-expanded={ui().createOpen}
             onclick={() => patchUi({ createOpen: !ui().createOpen })}
@@ -538,270 +593,283 @@ export function Console() {
             <PlusIcon />
           </button>
           {ui().createOpen && (
-            <div class="rail-pop" role="dialog" aria-label="Creating apps">
-              <div class="rail-pop-head">
-                <strong>Apps are created by your agent</strong>
+            <div class="dropdown-content card card-border bg-base-100 w-64 p-4 text-left shadow-lg" role="dialog" aria-label="Creating apps">
+              <div class="mb-1 flex min-w-0 items-center justify-between gap-2">
+                <strong class="min-w-0 flex-1 truncate">Apps are created by your agent</strong>
                 <button
                   type="button"
-                  class="icon-btn"
+                  class="btn btn-ghost btn-square btn-xs shrink-0"
                   aria-label="Close"
                   onclick={() => patchUi({ createOpen: false })}
                 >
                   <CloseIcon size={14} />
                 </button>
               </div>
-              <p>
+              <p class="my-1.5 min-w-0 text-sm opacity-70">
                 There is no click-to-create here. Ask your agent to create an
                 app over MCP:
               </p>
-              <p class="rail-pop-row">
-                <code>https://outer.now/mcp</code>
+              <p class="mt-1.5 flex min-w-0 items-center gap-2">
+                <code class="min-w-0 flex-1 truncate font-mono text-xs" title="https://outer.now/mcp">https://outer.now/mcp</code>
                 <CopyButton
                   value="https://outer.now/mcp"
                   label="Copy MCP URL"
                 />
               </p>
+              <p class="mt-2 min-w-0 text-xs opacity-60">
+                Press <kbd class="kbd kbd-xs">Esc</kbd> to close
+              </p>
             </div>
           )}
         </div>
         <div class="rail-foot">
-          <a class="rail-tile" href="/" title="Docs" aria-label="Docs">
+          <a class="rail-tile tooltip tooltip-right" data-tip="Docs" href="/" aria-label="Docs">
             <DocsIcon />
           </a>
-          <button
-            type="button"
-            class="rail-tile"
-            title={email() || "Account"}
-            aria-label={email() ? `Account: ${email()}` : "Account"}
-            aria-expanded={ui().accountOpen}
-            onclick={() => patchUi({ accountOpen: !ui().accountOpen })}
-          >
-            <span class="rail-mono" aria-hidden="true">
-              {(email() || "?").slice(0, 1).toUpperCase()}
-            </span>
-          </button>
-          {ui().accountOpen && (
-            <div
-              class="rail-pop rail-account"
-              role="dialog"
-              aria-label="Account"
-            >
-              <p class="rail-account-email" title={email()}>
-                {email()}
-              </p>
-              <button
-                type="button"
-                class="menu-row"
-                onclick={() => {
-                  void fetch("/api/console/sign-out", {
-                    method: "POST",
-                  }).finally(() => {
-                    window.location.assign("/console/sign-in");
-                  });
-                }}
-              >
-                <SignOutIcon size={16} />
-                Sign out
-              </button>
-            </div>
-          )}
-        </div>
-      </nav>
-
-      {active && (
-        <aside
-          class={`side${ui().drawer ? " is-open" : ""}`}
-          aria-label="App navigation"
-        >
-          <div class="side-head">
-            <div class="side-id">
-              <p class="side-name" title={active.slug}>
-                {active.slug}
-              </p>
-              <a class="side-url" href={active.url} title={active.url}>
-                {active.url.replace(/^https?:\/\//, "")}
-              </a>
-            </div>
-            <span class={`pill is-${active.status}`}>{active.status}</span>
+          <div class={`dropdown dropdown-right dropdown-top${ui().accountOpen ? " dropdown-open" : ""}`}>
             <button
               type="button"
-              class="icon-btn side-collapse"
-              title="Collapse sidebar"
-              aria-label="Collapse sidebar"
-              onclick={() => patchUi({ collapsed: true })}
+              class="tooltip tooltip-right rounded-[14px]"
+              data-tip={email() ? `Account: ${email()}` : "Account"}
+              aria-label={email() ? `Account: ${email()}` : "Account"}
+              aria-expanded={ui().accountOpen}
+              onclick={() => patchUi({ accountOpen: !ui().accountOpen })}
             >
-              <CollapseIcon />
+              <span class="avatar avatar-placeholder">
+                <span class="bg-base-300 flex h-11 w-11 items-center justify-center rounded-[14px] text-xl font-bold">
+                  <span aria-hidden="true">
+                    {(email() || "?").slice(0, 1).toUpperCase()}
+                  </span>
+                </span>
+              </span>
             </button>
+            {ui().accountOpen && (
+              <ul class="dropdown-content menu bg-base-100 rounded-box border border-base-300 w-60 min-w-0 p-2 shadow-lg" role="menu" aria-label="Account">
+                <li class="menu-title min-w-0">
+                  <span class="block truncate" title={email()}>
+                    {email() || "Account"}
+                  </span>
+                </li>
+                <li>
+                  <button
+                    type="button"
+                    onclick={() => {
+                      void fetch("/api/console/sign-out", {
+                        method: "POST",
+                      }).finally(() => {
+                        window.location.assign("/console/sign-in");
+                      });
+                    }}
+                  >
+                    <SignOutIcon size={16} />
+                    Sign out
+                  </button>
+                </li>
+              </ul>
+            )}
           </div>
-          <p class="side-label">App</p>
-          <ul class="side-list">
-            {VIEWS.map((v) => (
-              <li key={v.id}>
+        </div>
+      </nav>
+
+      {active && (
+        <div class={`drawer min-w-0${ui().collapsed ? "" : " md:drawer-open"}`}>
+          <input
+            id="console-nav"
+            type="checkbox"
+            class="drawer-toggle"
+            checked={ui().drawer}
+            aria-label="App navigation toggle"
+            onchange={(e: Event) => patchUi({ drawer: (e.target as HTMLInputElement).checked })}
+          />
+          <div class="drawer-content min-w-0">
+            <main class="main" id="console-main" tabindex={-1}>
+              <div class="main-head">
                 <button
                   type="button"
-                  class={`side-item${r.view === v.id ? " is-active" : ""}`}
-                  aria-current={r.view === v.id ? "page" : undefined}
-                  onclick={() => navigate({ view: v.id as ViewId })}
+                  class="btn btn-ghost btn-square btn-sm shrink-0 md:hidden"
+                  aria-label="Open navigation"
+                  onclick={() => patchUi({ drawer: true })}
                 >
-                  <ViewIcon id={v.id as ViewId} />
-                  <span>{v.label}</span>
-                  {v.id === "errors" && openErrors > 0 && (
-                    <span class="count-badge" aria-label={`${openErrors} open`}>
-                      {openErrors}
-                    </span>
-                  )}
+                  <MenuIcon />
                 </button>
-              </li>
-            ))}
-          </ul>
-          <p class="side-label">Data</p>
-          <ul class="side-list">
-            {(["D1", "R2", "Durable Objects"] as const).map((name) => (
-              <li key={name}>
-                <span
-                  class="side-item is-disabled"
-                  aria-disabled="true"
-                  title="Coming later"
-                >
-                  <DatabaseIcon />
-                  <span>{name}</span>
-                  <span class="soon-pill">Soon</span>
-                </span>
-              </li>
-            ))}
-          </ul>
-          <div class="side-foot">
-            <p class="side-foot-url mono trim" title={active.url}>
-              {active.url}
-            </p>
-            <div class="side-foot-row">
-              <CopyButton value={active.url} label="Copy app URL" />
-              <a class="link" href={active.url}>
-                Open app
-              </a>
-            </div>
+                <h1 class="main-title">{VIEW_TITLES[r.view]}</h1>
+                {(r.view === "overview" || r.view === "metrics") && (
+                  <div class="join ml-auto shrink-0" role="group" aria-label="Metrics range">
+                    {RANGES.map((opt) => (
+                      <button
+                        key={opt.hours}
+                        type="button"
+                        class={`btn btn-sm join-item${r.range === opt.hours ? " btn-neutral" : ""}`}
+                        title={opt.title}
+                        aria-pressed={r.range === opt.hours}
+                        onclick={() => navigate({ r: opt.hours } as Partial<Route>)}
+                      >
+                        {opt.label}
+                      </button>
+                    ))}
+                  </div>
+                )}
+                {ui().collapsed && (
+                  <button
+                    type="button"
+                    class="btn btn-ghost btn-square btn-sm shrink-0"
+                    title="Expand sidebar"
+                    aria-label="Expand sidebar"
+                    onclick={() => patchUi({ collapsed: false })}
+                  >
+                    <MenuIcon />
+                  </button>
+                )}
+              </div>
+              <div class="tabs tabs-box tabs-sm mb-3 w-full min-w-0 overflow-x-auto md:hidden" role="tablist" aria-label="Views">
+                {VIEWS.map((v) => (
+                  <button
+                    key={v.id}
+                    type="button"
+                    role="tab"
+                    aria-selected={r.view === v.id}
+                    class={`tab shrink-0${r.view === v.id ? " tab-active" : ""}`}
+                    onclick={() => navigate({ view: v.id as ViewId })}
+                  >
+                    {v.label}
+                  </button>
+                ))}
+              </div>
+              <div class="main-body">
+                {detailPanel.kind === "loading" && (
+                  <div class="flex min-w-0 flex-col gap-3" role="status" aria-label="Loading app">
+                    <div class="skeleton rounded-box h-30 w-full" />
+                    <div class="skeleton rounded-box h-70 w-full" />
+                    <div class="skeleton rounded-box h-30 w-full" />
+                  </div>
+                )}
+                {detailPanel.kind === "error" && (
+                  <div class="alert alert-error alert-soft" role="alert">
+                    <span class="min-w-0">Couldn't load this app (unknown or not yours).</span>
+                    <button
+                      type="button"
+                      class="btn btn-sm min-w-0 max-w-full shrink-0"
+                      onclick={() => navigate({ app: list[0].slug, view: "overview" })}
+                    >
+                      <span class="truncate" title={`Back to ${list[0].slug}`}>
+                        Back to {list[0].slug}
+                      </span>
+                    </button>
+                  </div>
+                )}
+                {detailPanel.kind === "ready" && (
+                  <ViewBody
+                    route={r}
+                    app={detailPanel.value}
+                    metrics={metrics()}
+                    actions={actions()}
+                    errors={errors()}
+                    logs={logs()}
+                    secrets={secrets()}
+                    expanded={ui().expanded}
+                    onToggleExpand={(id) => {
+                      const cur = ui().expanded;
+                      patchUi({
+                        expanded: cur.includes(id)
+                          ? cur.filter((x) => x !== id)
+                          : [...cur, id],
+                      });
+                    }}
+                    onLoadMore={loadMoreActions}
+                    onRefreshLogs={() => {
+                      const slug = route().app;
+                      if (!slug) {
+                        return;
+                      }
+                      logs.set({ kind: "loading" });
+                      api<{ lines: LogLine[] }>(
+                        `/api/console/apps/${encodeURIComponent(slug)}/logs?limit=100`,
+                      )
+                        .then((data) => {
+                          logs.set({ kind: "ready", value: data.lines });
+                        })
+                        .catch((err: unknown) => {
+                          logs.set({ kind: "error", message: String(err) });
+                        });
+                    }}
+                  />
+                )}
+              </div>
+            </main>
           </div>
-        </aside>
-      )}
-      {ui().drawer && active && (
-        <button
-          type="button"
-          class="scrim"
-          aria-label="Close navigation"
-          onclick={() => patchUi({ drawer: false })}
-        />
-      )}
-
-      <main class="main" id="console-main" tabindex={-1}>
-        <div class="main-head">
-          {active && (
-            <button
-              type="button"
-              class="icon-btn main-menu"
-              aria-label="Open navigation"
-              onclick={() => patchUi({ drawer: true })}
-            >
-              <MenuIcon />
-            </button>
-          )}
-          <h1 class="main-title">{active ? VIEW_TITLES[r.view] : "Console"}</h1>
-          {active && (r.view === "overview" || r.view === "metrics") && (
-            <div
-              class="range"
-              role="group"
-              aria-label="Metrics range"
-            >
-              {RANGES.map((opt) => (
+          <div class="drawer-side">
+            <label for="console-nav" class="drawer-overlay" aria-label="Close navigation" />
+            <aside class="side max-md:min-h-dvh min-w-0" aria-label="App navigation">
+              <div class="side-head">
+                <div class="side-id">
+                  <p class="m-0 min-w-0 truncate text-[15px] font-bold" title={active.slug}>
+                    {active.slug}
+                  </p>
+                  <a class="block truncate text-xs opacity-60 hover:opacity-100 hover:underline" href={active.url} title={active.url}>
+                    {active.url.replace(/^https?:\/\//, "")}
+                  </a>
+                </div>
+                <span class={`badge badge-soft ${statusBadge(active.status)} shrink-0`} title={active.status}>{active.status}</span>
                 <button
-                  key={opt.hours}
                   type="button"
-                  class={`range-btn${r.range === opt.hours ? " is-active" : ""}`}
-                  title={opt.title}
-                  aria-pressed={r.range === opt.hours}
-                  onclick={() => navigate({ r: opt.hours } as Partial<Route>)}
+                  class="btn btn-ghost btn-square btn-sm hidden shrink-0 md:inline-flex"
+                  title="Collapse sidebar"
+                  aria-label="Collapse sidebar"
+                  onclick={() => patchUi({ collapsed: true })}
                 >
-                  {opt.label}
+                  <CollapseIcon />
                 </button>
-              ))}
-            </div>
-          )}
-          {active && ui().collapsed && (
-            <button
-              type="button"
-              class="icon-btn"
-              title="Expand sidebar"
-              aria-label="Expand sidebar"
-              onclick={() => patchUi({ collapsed: false })}
-            >
-              <MenuIcon />
-            </button>
-          )}
-        </div>
-        <div class="main-body">
-          {!active && (
-            <div class="card" role="status">
-              <p>Select an app from the rail.</p>
-            </div>
-          )}
-          {active && detailPanel.kind === "loading" && (
-            <div class="stack" role="status" aria-label="Loading app">
-              <div class="skeleton-card" />
-              <div class="skeleton-chart" />
-              <div class="skeleton-card" />
-            </div>
-          )}
-          {active && detailPanel.kind === "error" && (
-            <div class="card" role="alert">
-              <p>Couldn't load this app (unknown or not yours).</p>
-              <button
-                type="button"
-                class="btn"
-                onclick={() => navigate({ app: list[0].slug, view: "overview" })}
-              >
-                Back to {list[0].slug}
-              </button>
-            </div>
-          )}
-          {active && detailPanel.kind === "ready" && (
-            <ViewBody
-              route={r}
-              app={detailPanel.value}
-              metrics={metrics()}
-              actions={actions()}
-              errors={errors()}
-              logs={logs()}
-              secrets={secrets()}
-              expanded={ui().expanded}
-              onToggleExpand={(id) => {
-                const cur = ui().expanded;
-                patchUi({
-                  expanded: cur.includes(id)
-                    ? cur.filter((x) => x !== id)
-                    : [...cur, id],
-                });
-              }}
-              onRange={(hours) => navigate({ r: hours } as Partial<Route>)}
-              onLoadMore={loadMoreActions}
-              onRefreshLogs={() => {
-                const slug = route().app;
-                if (!slug) {
-                  return;
-                }
-                logs.set({ kind: "loading" });
-                api<{ lines: LogLine[] }>(
-                  `/api/console/apps/${encodeURIComponent(slug)}/logs?limit=100`,
-                )
-                  .then((data) => {
-                    logs.set({ kind: "ready", value: data.lines });
-                  })
-                  .catch((err: unknown) => {
-                    logs.set({ kind: "error", message: String(err) });
-                  });
-              }}
-            />
-          )}
+              </div>
+              <ul class="menu w-full min-w-0 gap-0.5 p-0">
+                <li class="menu-title">App</li>
+                {VIEWS.map((v) => (
+                  <li key={v.id} class="min-w-0">
+                    <button
+                      type="button"
+                      class={r.view === v.id ? "menu-active min-w-0" : "min-w-0"}
+                      aria-current={r.view === v.id ? "page" : undefined}
+                      onclick={() => navigate({ view: v.id as ViewId })}
+                    >
+                      <ViewIcon id={v.id as ViewId} />
+                      <span class="min-w-0 flex-1 truncate">{v.label}</span>
+                      {v.id === "errors" && openErrors > 0 && (
+                        <span class="indicator shrink-0">
+                          <span class="indicator-item badge badge-error badge-xs" aria-label={`${openErrors} open`}>
+                            {openErrors}
+                          </span>
+                          <span class="block h-4 w-4" aria-hidden="true" />
+                        </span>
+                      )}
+                    </button>
+                  </li>
+                ))}
+                <li class="menu-title">Data</li>
+                {(["D1", "R2", "Durable Objects"] as const).map((name) => (
+                  <li key={name} class="menu-disabled min-w-0" title="Coming later">
+                    <span class="min-w-0">
+                      <DatabaseIcon />
+                      <span class="truncate">{name}</span>
+                      <span class="badge badge-ghost badge-xs ml-auto shrink-0">Soon</span>
+                    </span>
+                  </li>
+                ))}
+              </ul>
+              <div class="side-foot">
+                <div class="divider my-2" aria-hidden="true" />
+                <p class="m-0 min-w-0 truncate font-mono text-xs opacity-60" title={active.url}>
+                  {active.url}
+                </p>
+                <div class="mt-2 flex min-w-0 items-center gap-2">
+                  <CopyButton value={active.url} label="Copy app URL" />
+                  <a class="link min-w-0 flex-1 truncate" href={active.url} title={active.url}>
+                    Open app
+                  </a>
+                </div>
+              </div>
+            </aside>
+          </div>
         </div>
-      </main>
+      )}
     </div>
   );
 }
@@ -837,7 +905,6 @@ function ViewBody(props: {
   secrets: Panel<SecretsSummary>;
   expanded: string[];
   onToggleExpand: (id: string) => void;
-  onRange: (hours: number) => void;
   onLoadMore: () => void;
   onRefreshLogs: () => void;
 }) {
@@ -849,12 +916,11 @@ function ViewBody(props: {
           metrics={props.metrics}
           actions={props.actions}
           errors={props.errors}
-          onRange={props.onRange}
           onView={(view) => navigate({ view })}
         />
       );
     case "metrics":
-      return <MetricsView metrics={props.metrics} onRange={props.onRange} />;
+      return <MetricsView metrics={props.metrics} />;
     case "actions":
       return <ActionsView panel={props.actions} onMore={props.onLoadMore} />;
     case "deploys":
diff --git a/web/pages/console/_islands/icons.tsx b/web/pages/console/_islands/icons.tsx
index 9fc575b..fb40c99 100644
--- a/web/pages/console/_islands/icons.tsx
+++ b/web/pages/console/_islands/icons.tsx
@@ -1,14 +1,44 @@
-// Thin-stroke icon set for the console shell.
-// Ported from Noite's $lib/ui/icons (1.5px outline SVGs, currentColor):
-// narrowed to the console's set, no icon font, no CDN — CSP is self-only.
-// Every icon is a 24×24 stroke glyph; pass `size` for pixel height/width.
-export function Icon({
+// Console icon set: Lucide glyphs rendered through a tiny Ilha component.
+//
+// The islands are Ilha JSX, not Astro components, so `@lucide/astro` does
+// not fit; the `lucide` vanilla package's per-icon `IconNode` exports
+// (`[tag, attrs][]` — the same shape `createElement` consumes, see
+// lucide's ESM dist) render here with no DOM, no CDN and no
+// `createIcons()` DOM scanning, so the strict console CSP stays intact.
+// Every icon is a 24x24 stroke glyph at 1.5px (the reference weight);
+// pass `size` for pixel height/width.
+//
+// `OuterMark` is our own brand mark (three dots), not a Lucide glyph.
+import { h } from "ilha";
+import {
+  Activity,
+  BookOpen,
+  ChartLine,
+  Check,
+  ChevronDown,
+  Copy,
+  Database,
+  KeyRound,
+  LayoutGrid,
+  LogOut,
+  Menu,
+  PanelLeftClose,
+  Plus,
+  Rocket,
+  Settings,
+  Terminal,
+  TriangleAlert,
+  X,
+  type IconNode,
+} from "lucide";
+
+function Lucide({
+  node,
   size = 18,
-  children,
   label,
 }: {
+  node: IconNode;
   size?: number;
-  children?: unknown;
   label?: string;
 }) {
   return (
@@ -25,187 +55,96 @@ export function Icon({
       aria-label={label}
       aria-hidden={label ? undefined : "true"}
     >
-      {children}
+      {node.map(([tag, attrs], i) => h(tag, { ...attrs, key: i }))}
     </svg>
   );
 }
 
 export function OuterMark({ size = 22 }: { size?: number }) {
   return (
-    <Icon size={size} label="Outer home">
-      <circle cx="12" cy="5.5" r="2" fill="currentColor" stroke="none" />
-      <circle cx="5.5" cy="17.5" r="2" fill="currentColor" stroke="none" />
-      <circle cx="18.5" cy="17.5" r="2" fill="currentColor" stroke="none" />
-    </Icon>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      role="img"
+      aria-label="Outer home"
+    >
+      <circle cx="12" cy="5.5" r="2" />
+      <circle cx="5.5" cy="17.5" r="2" />
+      <circle cx="18.5" cy="17.5" r="2" />
+    </svg>
   );
 }
 
 export function OverviewIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <rect x="3" y="3" width="7.5" height="7.5" rx="1.5" />
-      <rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" />
-      <rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" />
-      <rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" />
-    </Icon>
-  );
+  return <Lucide node={LayoutGrid} size={size} />;
 }
 
 export function MetricsIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="M3 3v16a2 2 0 0 0 2 2h16" />
-      <path d="m7 14 4-4 3 3 5-6" />
-    </Icon>
-  );
+  return <Lucide node={ChartLine} size={size} />;
 }
 
 export function ActionsIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
-    </Icon>
-  );
+  return <Lucide node={Activity} size={size} />;
 }
 
 export function DeploysIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="M4 17V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10" />
-      <path d="M8 21h8" />
-      <path d="M12 5v9" />
-      <path d="m8.5 10.5 3.5 3.5 3.5-3.5" />
-    </Icon>
-  );
+  return <Lucide node={Rocket} size={size} />;
 }
 
 export function LogsIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="m4 17 6-6-6-6" />
-      <path d="M12 19h8" />
-    </Icon>
-  );
+  return <Lucide node={Terminal} size={size} />;
 }
 
 export function ErrorsIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="m10.4 3.6 9.2 16a1 1 0 0 1-.9 1.4H5.3a1 1 0 0 1-.9-1.4l9.2-16a1 1 0 0 1 1.8 0Z" />
-      <path d="M12 9v4" />
-      <path d="M12 17h.01" />
-    </Icon>
-  );
+  return <Lucide node={TriangleAlert} size={size} />;
 }
 
 export function SecretsIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <circle cx="8" cy="15" r="4" />
-      <path d="m10.9 12.1 8.6-8.6" />
-      <path d="m18 5 2 2" />
-      <path d="m15 8 2 2" />
-    </Icon>
-  );
+  return <Lucide node={KeyRound} size={size} />;
 }
 
 export function SettingsIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <circle cx="12" cy="12" r="3" />
-      <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.9 2.9l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.9-2.9l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.9-2.9l.1.1a1.7 1.7 0 0 0 1.9.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5h0a1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.9 2.9l-.1.1a1.7 1.7 0 0 0-.3 1.9v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" />
-    </Icon>
-  );
+  return <Lucide node={Settings} size={size} />;
 }
 
 export function CollapseIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <rect x="3" y="3" width="18" height="18" rx="2" />
-      <path d="m14 9-3 3 3 3" />
-      <path d="M9 5v14" />
-    </Icon>
-  );
+  return <Lucide node={PanelLeftClose} size={size} />;
 }
 
 export function MenuIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="M4 6h16" />
-      <path d="M4 12h16" />
-      <path d="M4 18h16" />
-    </Icon>
-  );
+  return <Lucide node={Menu} size={size} />;
 }
 
 export function DocsIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2Z" />
-      <path d="M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7Z" />
-    </Icon>
-  );
+  return <Lucide node={BookOpen} size={size} />;
 }
 
 export function SignOutIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-      <path d="m16 17 5-5-5-5" />
-      <path d="M21 12H9" />
-    </Icon>
-  );
+  return <Lucide node={LogOut} size={size} />;
 }
 
 export function CopyIcon({ size = 14 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <rect x="9" y="9" width="12" height="12" rx="2" />
-      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-    </Icon>
-  );
+  return <Lucide node={Copy} size={size} />;
 }
 
 export function CheckIcon({ size = 14 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="M20 6 9 17l-5-5" />
-    </Icon>
-  );
+  return <Lucide node={Check} size={size} />;
 }
 
 export function PlusIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="M12 5v14" />
-      <path d="M5 12h14" />
-    </Icon>
-  );
+  return <Lucide node={Plus} size={size} />;
 }
 
 export function CloseIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </Icon>
-  );
+  return <Lucide node={X} size={size} />;
 }
 
 export function ChevronDownIcon({ size = 14 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <path d="m6 9 6 6 6-6" />
-    </Icon>
-  );
+  return <Lucide node={ChevronDown} size={size} />;
 }
 
 export function DatabaseIcon({ size = 18 }: { size?: number }) {
-  return (
-    <Icon size={size}>
-      <ellipse cx="12" cy="5" rx="8" ry="3" />
-      <path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5" />
-      <path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" />
-    </Icon>
-  );
+  return <Lucide node={Database} size={size} />;
 }
diff --git a/web/pages/console/_islands/views.tsx b/web/pages/console/_islands/views.tsx
index 4948a7d..a543946 100644
--- a/web/pages/console/_islands/views.tsx
+++ b/web/pages/console/_islands/views.tsx
@@ -2,11 +2,16 @@
 // Data shapes ported from Noite's $lib/app-detail/{metrics,deploys,errors,
 // events,logs}.tsx; interaction details follow Noite (loading skeletons,
 // empty states, relative times with absolute titles on hover, copy buttons
-// for shas/URLs, keyboard-focusable rows). Charts are monochrome inline SVG:
-// near-black series, light-gray comparison series, dashed vertical
-// gridlines, minimal axes, muted tick labels. No `style=` attributes — the
-// console CSP only hashes inline scripts/styles, so all sizing rides on
-// SVG attributes.
+// for shas/URLs). Charts are monochrome inline SVG: near-black series,
+// light-gray comparison series, dashed vertical gridlines, minimal axes,
+// muted tick labels. No `style=` attributes — the console CSP only hashes
+// inline scripts/styles, so all sizing rides on classes and SVG attrs.
+//
+// Overflow armor: every flex/grid child that holds text carries `min-w-0`,
+// every label, cell, slug, URL, sha, path, summary and message truncates
+// with an ellipsis (`truncate`) and exposes the full text via `title`.
+// Tables are `table-fixed` with column widths. `break-words` is reserved
+// for text that should wrap: log lines and the expanded deploy message.
 import {
   shortSha,
   when,
@@ -27,7 +32,6 @@ import {
 } from "./common.tsx";
 import {
   ActionsIcon,
-  ChevronDownIcon,
   ErrorsIcon,
   MetricsIcon,
   OverviewIcon,
@@ -37,26 +41,28 @@ import {
 
 function Loading({ label }: { label: string }) {
   return (
-    <div class="stack" role="status" aria-label={label}>
-      <div class="skeleton-card" />
-      <div class="skeleton-chart" />
+    <div class="flex min-w-0 flex-col gap-3" role="status" aria-label={label}>
+      <div class="skeleton rounded-box h-30 w-full" />
+      <div class="skeleton rounded-box h-70 w-full" />
     </div>
   );
 }
 
 function Err({ message }: { message: string }) {
   return (
-    <div class="card" role="alert">
-      <p>Couldn't load this view: {message}</p>
+    <div class="alert alert-error alert-soft min-w-0" role="alert">
+      <span class="min-w-0 break-words">Couldn't load this view: {message}</span>
     </div>
   );
 }
 
 function Empty({ children }: { children?: unknown }) {
   return (
-    <div class="card" role="status">
-      <p>{children}</p>
-    </div>
+    <section class="card card-border bg-base-100 min-w-0" role="status">
+      <div class="card-body min-w-0">
+        <p class="m-0 min-w-0 opacity-60">{children}</p>
+      </div>
+    </section>
   );
 }
 
@@ -68,9 +74,10 @@ function compact(n: number): string {
   return `${n}`;
 }
 
-function statusClass(status: string): string {
+// daisyUI badge variants for app/deploy status and action outcomes.
+function statusBadge(status: string): string {
   if (status === "success" || status === "running" || status === "ok") {
-    return "is-ok";
+    return "badge-success";
   }
   if (
     status === "building" ||
@@ -78,28 +85,28 @@ function statusClass(status: string): string {
     status === "reviewing" ||
     status === "queued"
   ) {
-    return "is-info";
+    return "badge-info";
   }
   if (status === "failed" || status === "error" || status === "blocked") {
-    return "is-bad";
+    return "badge-error";
   }
   if (status === "sleeping") {
-    return "is-muted";
+    return "badge-ghost";
   }
-  return "is-neutral";
+  return "badge-ghost";
 }
 
-function outcomeClass(outcome: string): string {
+function outcomeBadge(outcome: string): string {
   if (outcome === "success" || outcome === "ok") {
-    return "is-ok";
+    return "badge-success";
   }
   if (outcome === "failed" || outcome === "error") {
-    return "is-bad";
+    return "badge-error";
   }
   if (outcome === "blocked") {
-    return "is-warn";
+    return "badge-warning";
   }
-  return "is-neutral";
+  return "badge-ghost";
 }
 
 function axisLabel(ms: number, hours: number): string {
@@ -119,59 +126,6 @@ function bucketTitle(bucket: MetricsBucket, hours: number): string {
   return `${label}: ${bucket.requests} requests, ${bucket.s4xx} 4xx, ${bucket.s5xx} 5xx`;
 }
 
-// Second-half vs first-half percentage change (the stat-card delta pills).
-function halfChange(buckets: MetricsBucket[]): string | null {
-  if (buckets.length < 2) {
-    return null;
-  }
-  const mid = Math.floor(buckets.length / 2);
-  const first = buckets
-    .slice(0, mid)
-    .reduce((a, b) => a + b.requests, 0);
-  const second = buckets.slice(mid).reduce((a, b) => a + b.requests, 0);
-  if (first === 0) {
-    return second > 0 ? "new" : null;
-  }
-  const pct = Math.round(((second - first) / first) * 100);
-  return `${pct >= 0 ? "+" : ""}${pct}%`;
-}
-
-// Error rate: exact 0% only when there are no 5xx; sub-1% rates keep two
-// decimals so e.g. 6 / 28,845 reads 0.02% instead of 0.0%.
-function fmtRate(s5xx: number, requests: number): string {
-  if (requests <= 0) {
-    return "—";
-  }
-  if (s5xx <= 0) {
-    return "0%";
-  }
-  const pct = (100 * s5xx) / requests;
-  if (pct >= 1) {
-    return `${pct.toFixed(1)}%`;
-  }
-  if (pct >= 0.005) {
-    return `${pct.toFixed(2)}%`;
-  }
-  return "<0.01%";
-}
-
-// Y-axis ticks with a round ceiling (0, 10, 20, … like the reference).
-function niceTicks(max: number, count = 5): number[] {
-  if (max <= 0) {
-    return [0];
-  }
-  const raw = max / (count - 1);
-  const mag = 10 ** Math.floor(Math.log10(raw));
-  const norm = raw / mag;
-  const step = (norm >= 5 ? 10 : norm >= 2 ? 5 : norm >= 1 ? 2 : 1) * mag;
-  const top = Math.ceil(max / step) * step;
-  const ticks: number[] = [];
-  for (let v = 0; v <= top + step / 2; v += step) {
-    ticks.push(Math.round((v / step)) * step);
-  }
-  return ticks;
-}
-
 // --- Stat cards --------------------------------------------------------------
 
 function StatCard({
@@ -188,19 +142,19 @@ function StatCard({
   sub?: string;
 }) {
   return (
-    <section class="card stat" aria-label={label}>
-      <p class="stat-label">
+    <div class="stat min-w-0">
+      <div class="stat-title flex min-w-0 items-center gap-2">
         {icon}
-        <span>{label}</span>
-      </p>
-      <p class="stat-value">
+        <span class="min-w-0 flex-1 truncate" title={label}>{label}</span>
+      </div>
+      <div class="stat-value min-w-0 truncate text-3xl" title={pill ? `${value} ${pill}` : value}>
         {value}
         {pill != null && pill !== "" && (
-          <span class="delta-pill">{pill}</span>
+          <span class="badge badge-soft badge-sm ml-2 shrink-0 align-middle">{pill}</span>
         )}
-      </p>
-      {sub && <p class="stat-sub">{sub}</p>}
-    </section>
+      </div>
+      {sub && <div class="stat-desc min-w-0 truncate" title={sub}>{sub}</div>}
+    </div>
   );
 }
 
@@ -418,14 +372,67 @@ function Bars({
           );
         })}
       </svg>
-      <figcaption class="axis-ends" aria-hidden="true">
-        <span>{first ? axisLabel(first.hour, grouped ? 168 : hours) : ""}</span>
-        <span>{last ? axisLabel(last.hour, grouped ? 168 : hours) : ""}</span>
+      <figcaption class="mt-1 flex min-w-0 justify-between gap-3 text-xs opacity-60" aria-hidden="true">
+        <span class="min-w-0 truncate">{first ? axisLabel(first.hour, grouped ? 168 : hours) : ""}</span>
+        <span class="min-w-0 truncate">{last ? axisLabel(last.hour, grouped ? 168 : hours) : ""}</span>
       </figcaption>
     </figure>
   );
 }
 
+// Second-half vs first-half percentage change (the stat-card delta pills).
+function halfChange(buckets: MetricsBucket[]): string | null {
+  if (buckets.length < 2) {
+    return null;
+  }
+  const mid = Math.floor(buckets.length / 2);
+  const first = buckets
+    .slice(0, mid)
+    .reduce((a, b) => a + b.requests, 0);
+  const second = buckets.slice(mid).reduce((a, b) => a + b.requests, 0);
+  if (first === 0) {
+    return second > 0 ? "new" : null;
+  }
+  const pct = Math.round(((second - first) / first) * 100);
+  return `${pct >= 0 ? "+" : ""}${pct}%`;
+}
+
+// Error rate: exact 0% only when there are no 5xx; sub-1% rates keep two
+// decimals so e.g. 6 / 28,845 reads 0.02% instead of 0.0%.
+function fmtRate(s5xx: number, requests: number): string {
+  if (requests <= 0) {
+    return "—";
+  }
+  if (s5xx <= 0) {
+    return "0%";
+  }
+  const pct = (100 * s5xx) / requests;
+  if (pct >= 1) {
+    return `${pct.toFixed(1)}%`;
+  }
+  if (pct >= 0.005) {
+    return `${pct.toFixed(2)}%`;
+  }
+  return "<0.01%";
+}
+
+// Y-axis ticks with a round ceiling (0, 10, 20, … like the reference).
+function niceTicks(max: number, count = 5): number[] {
+  if (max <= 0) {
+    return [0];
+  }
+  const raw = max / (count - 1);
+  const mag = 10 ** Math.floor(Math.log10(raw));
+  const norm = raw / mag;
+  const step = (norm >= 5 ? 10 : norm >= 2 ? 5 : norm >= 1 ? 2 : 1) * mag;
+  const top = Math.ceil(max / step) * step;
+  const ticks: number[] = [];
+  for (let v = 0; v <= top + step / 2; v += step) {
+    ticks.push(Math.round((v / step)) * step);
+  }
+  return ticks;
+}
+
 // --- Overview ------------------------------------------------------------------
 
 export function OverviewView({
@@ -433,120 +440,123 @@ export function OverviewView({
   metrics,
   actions,
   errors,
-  onRange,
   onView,
 }: {
   app: AppDetail;
   metrics: Panel<{ hours: number; summary: MetricsSummary }>;
   actions: ActionsPanel;
   errors: Panel<ErrorsSummary>;
-  onRange: (hours: number) => void;
   onView: (view: ViewId) => void;
 }) {
   return (
-    <div class="stack">
+    <div class="flex min-w-0 flex-col gap-3">
       {metrics.kind === "loading" && <Loading label="Loading overview" />}
       {metrics.kind === "error" && <Err message={metrics.message} />}
       {metrics.kind === "ready" && (
         <OverviewReady
           summary={metrics.value.summary}
           hours={metrics.value.hours}
-          onRange={onRange}
         />
       )}
-      <div class="grid-2">
-        <section class="card" aria-label="Latest deploy">
-          <div class="card-head">
-            <h2>Latest deploy</h2>
-            <button
-              type="button"
-              class="link-btn"
-              onclick={() => onView("deploys")}
-            >
-              View all
-            </button>
+      <div class="grid min-w-0 grid-cols-1 gap-3 xl:grid-cols-2">
+        <section class="card card-border bg-base-100 min-w-0" aria-label="Latest deploy">
+          <div class="card-body min-w-0">
+            <div class="mb-3 flex min-w-0 items-center justify-between gap-3">
+              <h2 class="card-title min-w-0 truncate" title="Latest deploy">Latest deploy</h2>
+              <button
+                type="button"
+                class="link shrink-0 text-sm"
+                onclick={() => onView("deploys")}
+              >
+                View all
+              </button>
+            </div>
+            {app.deploys.length === 0 ? (
+              <p class="m-0 min-w-0 opacity-60" role="status">
+                No deploys yet.
+              </p>
+            ) : (
+              <DeployRow deploy={app.deploys[0]} />
+            )}
           </div>
-          {app.deploys.length === 0 ? (
-            <p class="muted" role="status">
-              No deploys yet.
-            </p>
-          ) : (
-            <DeployRow deploy={app.deploys[0]} />
-          )}
         </section>
-        <section class="card" aria-label="Latest agent actions">
-          <div class="card-head">
-            <h2>Latest agent actions</h2>
-            <button
-              type="button"
-              class="link-btn"
-              onclick={() => onView("actions")}
-            >
-              View all
-            </button>
-          </div>
-          {actions.kind === "loading" && (
-            <p class="muted" role="status">
-              Loading actions…
-            </p>
-          )}
-          {actions.kind === "error" && (
-            <p class="muted" role="alert">
-              Couldn't load actions: {actions.message}
-            </p>
-          )}
-          {actions.kind === "ready" &&
-            (actions.state.actions.length === 0 ? (
-              <p class="muted" role="status">
-                No agent actions yet.
+        <section class="card card-border bg-base-100 min-w-0" aria-label="Latest agent actions">
+          <div class="card-body min-w-0">
+            <div class="mb-3 flex min-w-0 items-center justify-between gap-3">
+              <h2 class="card-title min-w-0 truncate" title="Latest agent actions">Latest agent actions</h2>
+              <button
+                type="button"
+                class="link shrink-0 text-sm"
+                onclick={() => onView("actions")}
+              >
+                View all
+              </button>
+            </div>
+            {actions.kind === "loading" && (
+              <p class="m-0 min-w-0 opacity-60" role="status">
+                Loading actions…
               </p>
-            ) : (
-              <ul class="mini-list">
-                {actions.state.actions.slice(0, 5).map((a) => (
-                  <li key={a.id} class="mini-row">
-                    <span class={`pill ${outcomeClass(a.outcome)}`}>
-                      {a.outcome}
-                    </span>
-                    <span class="mono trim" title={a.summary}>
-                      {a.summary || a.tool}
+            )}
+            {actions.kind === "error" && (
+              <p class="m-0 min-w-0 break-words opacity-60" role="alert">
+                Couldn't load actions: {actions.message}
+              </p>
+            )}
+            {actions.kind === "ready" &&
+              (actions.state.actions.length === 0 ? (
+                <p class="m-0 min-w-0 opacity-60" role="status">
+                  No agent actions yet.
+                </p>
+              ) : (
+                <ul class="m-0 flex min-w-0 list-none flex-col gap-2 p-0">
+                  {actions.state.actions.slice(0, 5).map((a) => (
+                    <li key={a.id} class="flex min-w-0 items-center gap-2.5 text-[13px]">
+                      <span class={`badge badge-soft ${outcomeBadge(a.outcome)} shrink-0`} title={a.outcome}>
+                        {a.outcome}
+                      </span>
+                      <span class="min-w-0 flex-1 truncate font-mono text-xs" title={a.summary}>
+                        {a.summary || a.tool}
+                      </span>
+                      <span class="shrink-0 whitespace-nowrap text-xs opacity-60" title={when(a.at)}>
+                        {timeAgo(a.at)}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              ))}
+          </div>
+        </section>
+      </div>
+      {errors.kind === "ready" && errors.value.issues.length > 0 && (
+        <section class="card card-border bg-base-100 min-w-0" aria-label="Open errors">
+          <div class="card-body min-w-0">
+            <div class="mb-3 flex min-w-0 items-center justify-between gap-3">
+              <h2 class="card-title min-w-0 truncate" title="Open errors">Open errors</h2>
+              <button
+                type="button"
+                class="link shrink-0 text-sm"
+                onclick={() => onView("errors")}
+              >
+                View all
+              </button>
+            </div>
+            <ul class="m-0 flex min-w-0 list-none flex-col gap-2 p-0">
+              {errors.value.issues
+                .filter((i) => i.status === "open")
+                .slice(0, 3)
+                .map((i) => (
+                  <li key={i.fingerprint} class="flex min-w-0 items-center gap-2.5 text-[13px]">
+                    <span class="min-w-0 flex-1 truncate font-mono text-xs" title={i.message}>
+                      {i.message}
                     </span>
-                    <span class="muted" title={when(a.at)}>
-                      {timeAgo(a.at)}
+                    <span class="shrink-0 whitespace-nowrap text-xs opacity-60">
+                      {i.count.toLocaleString()}× ·{" "}
+                      <span title={when(i.last_seen)}>{timeAgo(i.last_seen)}</span>
                     </span>
                   </li>
                 ))}
-              </ul>
-            ))}
-        </section>
-      </div>
-      {errors.kind === "ready" && errors.value.issues.length > 0 && (
-        <section class="card" aria-label="Open errors">
-          <div class="card-head">
-            <h2>Open errors</h2>
-            <button
-              type="button"
-              class="link-btn"
-              onclick={() => onView("errors")}
-            >
-              View all
-            </button>
+            </ul>
           </div>
-          <ul class="mini-list">
-            {errors.value.issues
-              .filter((i) => i.status === "open")
-              .slice(0, 3)
-              .map((i) => (
-                <li key={i.fingerprint} class="mini-row">
-                  <span class="mono trim" title={i.message}>
-                    {i.message}
-                  </span>
-                  <span class="muted">
-                    {i.count.toLocaleString()}× ·{" "}
-                    <span title={when(i.last_seen)}>{timeAgo(i.last_seen)}</span>
-                  </span>
-                </li>
-              ))}
-          </ul>
         </section>
       )}
     </div>
@@ -556,16 +566,14 @@ export function OverviewView({
 function OverviewReady({
   summary,
   hours,
-  onRange,
 }: {
   summary: MetricsSummary;
   hours: number;
-  onRange: (hours: number) => void;
 }) {
   const errorRate = fmtRate(summary.s5xx, summary.requests);
   return (
-    <div class="stack">
-      <div class="stat-grid">
+    <div class="flex min-w-0 flex-col gap-3">
+      <div class="stats stats-vertical bg-base-100 border border-base-300 min-w-0 xl:stats-horizontal">
         <StatCard
           icon={<MetricsIcon size={16} />}
           label="Requests"
@@ -594,40 +602,39 @@ function OverviewReady({
           sub="response headers"
         />
       </div>
-      <section class="card" aria-label="Requests chart">
-        <div class="card-head">
-          <h2>Requests</h2>
-          <div class="legend">
-            <span class="legend-item">
-              <span class="swatch swatch-dark" aria-hidden="true" />
-              This period
-            </span>
-            <span class="legend-item">
-              <span class="swatch swatch-light" aria-hidden="true" />
-              Errors (4xx + 5xx)
-            </span>
+      <section class="card card-border bg-base-100 min-w-0" aria-label="Requests chart">
+        <div class="card-body min-w-0">
+          <div class="mb-3 flex min-w-0 items-center justify-between gap-3">
+            <h2 class="card-title min-w-0 truncate" title="Requests">Requests</h2>
+            <div class="flex shrink-0 items-center gap-4 text-xs opacity-60">
+              <span class="flex min-w-0 items-center gap-1.5">
+                <span class="inline-block h-[3px] w-3.5 shrink-0 rounded bg-base-content" aria-hidden="true" />
+                This period
+              </span>
+              <span class="flex min-w-0 items-center gap-1.5">
+                <span class="inline-block h-[3px] w-3.5 shrink-0 rounded bg-base-content opacity-40" aria-hidden="true" />
+                Errors (4xx + 5xx)
+              </span>
+            </div>
           </div>
+          {summary.buckets.length === 0 ? (
+            <p class="m-0 min-w-0 opacity-60" role="status">
+              No traffic in this range.
+            </p>
+          ) : (
+            <RequestsLine buckets={summary.buckets} hours={hours} />
+          )}
         </div>
-        {summary.buckets.length === 0 ? (
-          <p class="muted" role="status">
-            No traffic in this range.
-          </p>
-        ) : (
-          <RequestsLine buckets={summary.buckets} hours={hours} />
-        )}
       </section>
     </div>
   );
 }
 
 // --- Metrics -------------------------------------------------------------------
-
 export function MetricsView({
   metrics,
-  onRange,
 }: {
   metrics: Panel<{ hours: number; summary: MetricsSummary }>;
-  onRange: (hours: number) => void;
 }) {
   if (metrics.kind === "loading") {
     return <Loading label="Loading metrics" />;
@@ -638,8 +645,8 @@ export function MetricsView({
   const { summary, hours } = metrics.value;
   const errorRate = fmtRate(summary.s5xx, summary.requests);
   return (
-    <div class="stack">
-      <div class="stat-grid">
+    <div class="flex min-w-0 flex-col gap-3">
+      <div class="stats stats-vertical bg-base-100 border border-base-300 min-w-0 xl:stats-horizontal">
         <StatCard
           icon={<MetricsIcon size={16} />}
           label="Requests"
@@ -668,50 +675,59 @@ export function MetricsView({
           sub="response headers"
         />
       </div>
-      <section class="card" aria-label={summary.buckets.length > 200 ? "Daily requests" : "Hourly requests"}>
-        <div class="card-head">
-          <h2>{summary.buckets.length > 200 ? "Daily requests" : "Hourly requests"}</h2>
+      <section class="card card-border bg-base-100 min-w-0" aria-label={summary.buckets.length > 200 ? "Daily requests" : "Hourly requests"}>
+        <div class="card-body min-w-0">
+          <div class="mb-3 flex min-w-0 items-center justify-between gap-3">
+            <h2 class="card-title min-w-0 truncate" title={summary.buckets.length > 200 ? "Daily requests" : "Hourly requests"}>{summary.buckets.length > 200 ? "Daily requests" : "Hourly requests"}</h2>
+          </div>
+          {summary.buckets.length === 0 ? (
+            <p class="m-0 min-w-0 opacity-60" role="status">
+              No traffic in this range.
+            </p>
+          ) : (
+            <Bars buckets={summary.buckets} hours={hours} />
+          )}
         </div>
-        {summary.buckets.length === 0 ? (
-          <p class="muted" role="status">
-            No traffic in this range.
-          </p>
-        ) : (
-          <Bars buckets={summary.buckets} hours={hours} />
-        )}
       </section>
-      <section class="card" aria-label="Top paths">
-        <div class="card-head">
-          <h2>Top paths</h2>
-        </div>
-        {summary.top_paths.length === 0 ? (
-          <p class="muted" role="status">
-            No paths recorded in this range.
-          </p>
-        ) : (
-          <div class="table-wrap">
-            <table>
-              <thead>
-                <tr>
-                  <th scope="col">Path</th>
-                  <th scope="col">Requests</th>
-                  <th scope="col">5xx</th>
-                </tr>
-              </thead>
-              <tbody>
-                {summary.top_paths.map((p) => (
-                  <tr key={p.path}>
-                    <td class="mono trim" title={p.path}>
-                      {p.path}
-                    </td>
-                    <td>{p.requests.toLocaleString()}</td>
-                    <td>{p.s5xx.toLocaleString()}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+      <section class="card card-border bg-base-100 min-w-0" aria-label="Top paths">
+        <div class="card-body min-w-0">
+          <div class="mb-3 flex min-w-0 items-center justify-between gap-3">
+            <h2 class="card-title min-w-0 truncate" title="Top paths">Top paths</h2>
           </div>
-        )}
+          {summary.top_paths.length === 0 ? (
+            <p class="m-0 min-w-0 opacity-60" role="status">
+              No paths recorded in this range.
+            </p>
+          ) : (
+            <div class="min-w-0 overflow-x-auto">
+              <table class="table table-fixed w-full">
+                <colgroup>
+                  <col />
+                  <col class="w-24" />
+                  <col class="w-20" />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th scope="col">Path</th>
+                    <th scope="col">Requests</th>
+                    <th scope="col">5xx</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {summary.top_paths.map((p) => (
+                    <tr key={p.path}>
+                      <td class="truncate font-mono" title={p.path}>
+                        {p.path}
+                      </td>
+                      <td class="whitespace-nowrap">{p.requests.toLocaleString()}</td>
+                      <td class="whitespace-nowrap">{p.s5xx.toLocaleString()}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
       </section>
     </div>
   );
@@ -738,78 +754,91 @@ export function ActionsView({
     return <Empty>No agent actions yet.</Empty>;
   }
   return (
-    <section class="card" aria-label="Agent actions">
-      <div class="table-wrap">
-        <table>
-          <thead>
-            <tr>
-              <th scope="col">Time</th>
-              <th scope="col">Client</th>
-              <th scope="col">Tool</th>
-              <th scope="col">Summary</th>
-              <th scope="col">Outcome</th>
-              <th scope="col">Duration</th>
-            </tr>
-          </thead>
-          <tbody>
-            {actions.map((a) => (
-              <tr key={a.id}>
-                <td class="nowrap" title={when(a.at)}>
-                  {timeAgo(a.at)}
-                </td>
-                <td>{a.by}</td>
-                <td class="mono">{a.tool}</td>
-                <td class="mono wrap" title={a.summary}>
-                  {a.summary}
-                </td>
-                <td>
-                  <span class={`pill ${outcomeClass(a.outcome)}`}>
-                    {a.outcome}
-                  </span>
-                  {a.error_code && (
-                    <span class="mono muted"> {a.error_code}</span>
-                  )}
-                </td>
-                <td class="nowrap">{`${(a.duration_ms / 1000).toFixed(1)}s`}</td>
+    <section class="card card-border bg-base-100 min-w-0" aria-label="Agent actions">
+      <div class="card-body min-w-0">
+        <div class="min-w-0 overflow-x-auto">
+          <table class="table table-fixed w-full">
+            <colgroup>
+              <col class="w-20" />
+              <col class="w-24" />
+              <col class="w-28" />
+              <col />
+              <col class="w-28" />
+              <col class="w-20" />
+            </colgroup>
+            <thead>
+              <tr>
+                <th scope="col">Time</th>
+                <th scope="col">Client</th>
+                <th scope="col">Tool</th>
+                <th scope="col">Summary</th>
+                <th scope="col">Outcome</th>
+                <th scope="col">Duration</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {actions.map((a) => (
+                <tr key={a.id}>
+                  <td class="whitespace-nowrap" title={when(a.at)}>
+                    {timeAgo(a.at)}
+                  </td>
+                  <td class="truncate" title={a.by}>{a.by}</td>
+                  <td class="truncate font-mono" title={a.tool}>{a.tool}</td>
+                  <td class="truncate font-mono" title={a.summary}>
+                    {a.summary}
+                  </td>
+                  <td class="min-w-0">
+                    <span class={`badge badge-soft ${outcomeBadge(a.outcome)}`} title={a.outcome}>
+                      {a.outcome}
+                    </span>
+                    {a.error_code && (
+                      <span class="block truncate font-mono opacity-60" title={a.error_code}>
+                        {a.error_code}
+                      </span>
+                    )}
+                  </td>
+                  <td class="whitespace-nowrap">{`${(a.duration_ms / 1000).toFixed(1)}s`}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {moreError && (
+          <p class="m-0 min-w-0 break-words opacity-60" role="alert">
+            Couldn't load more actions: {moreError}
+          </p>
+        )}
+        {next && (
+          <button
+            type="button"
+            class="btn mt-3"
+            disabled={loadingMore}
+            onclick={onMore}
+          >
+            {loadingMore && <span class="loading loading-spinner loading-sm" aria-hidden="true" />}
+            {loadingMore ? "Loading…" : "Load more"}
+          </button>
+        )}
       </div>
-      {moreError && (
-        <p class="muted" role="alert">
-          Couldn't load more actions: {moreError}
-        </p>
-      )}
-      {next && (
-        <button
-          type="button"
-          class="btn"
-          disabled={loadingMore}
-          onclick={onMore}
-        >
-          {loadingMore ? "Loading…" : "Load more"}
-        </button>
-      )}
     </section>
   );
 }
 
 // --- Deploys -------------------------------------------------------------------
-// Ported from Noite's deploys.tsx: status pill, sha + copy, expandable row.
+// Ported from Noite's deploys.tsx: status badge, sha + copy, expandable row.
 
 function DeployRow({ deploy }: { deploy: ConsoleDeploy }) {
   return (
-    <div class="deploy-row">
-      <span class={`pill ${statusClass(deploy.status)}`}>{deploy.status}</span>
-      <span class="mono" title={deploy.sha}>
+    <div class="flex min-w-0 items-center gap-2.5 text-[13px]">
+      <span class={`badge badge-soft ${statusBadge(deploy.status)} shrink-0`} title={deploy.status}>{deploy.status}</span>
+      <span class="shrink-0 truncate font-mono" title={deploy.sha}>
         {shortSha(deploy.sha)}
       </span>
       <CopyButton value={deploy.sha} label="Copy full SHA" />
-      <span class="muted nowrap" title={when(deploy.created_at)}>
+      <span class="shrink-0 whitespace-nowrap text-xs opacity-60" title={when(deploy.created_at)}>
         {timeAgo(deploy.created_at)}
       </span>
-      <span class="muted nowrap">
+      <span class="shrink-0 whitespace-nowrap text-xs opacity-60">
         {deploy.duration_ms == null
           ? ""
           : `${(deploy.duration_ms / 1000).toFixed(1)}s`}
@@ -831,64 +860,63 @@ export function DeploysView({
     return <Empty>No deploys yet.</Empty>;
   }
   return (
-    <div class="stack">
+    <div class="flex min-w-0 flex-col gap-3">
       {app.deploys.map((d) => {
         const open = expanded.includes(d.deploy_id);
         return (
-          <section class="card" key={d.deploy_id} aria-label={`Deploy ${shortSha(d.sha)}`}>
+          <section class={`collapse collapse-arrow border border-base-300 bg-base-100 min-w-0 ${open ? "collapse-open" : "collapse-close"}`} key={d.deploy_id} aria-label={`Deploy ${shortSha(d.sha)}`}>
             <button
               type="button"
-              class="deploy-head"
+              class="collapse-title flex min-w-0 items-center gap-2.5 text-left text-sm"
               aria-expanded={open}
               onclick={() => onToggle(d.deploy_id)}
             >
-              <span class={`pill ${statusClass(d.status)}`}>{d.status}</span>
-              <span class="mono" title={d.sha}>
+              <span class={`badge badge-soft ${statusBadge(d.status)} shrink-0`} title={d.status}>{d.status}</span>
+              <span class="min-w-0 flex-1 truncate font-mono" title={d.sha}>
                 {shortSha(d.sha)}
               </span>
-              <span class="muted nowrap" title={when(d.created_at)}>
+              <span class="shrink-0 whitespace-nowrap text-xs opacity-60" title={when(d.created_at)}>
                 {timeAgo(d.created_at)}
               </span>
-              <span class="muted nowrap">
+              <span class="shrink-0 whitespace-nowrap text-xs opacity-60">
                 {d.duration_ms == null
                   ? ""
                   : `${(d.duration_ms / 1000).toFixed(1)}s`}
               </span>
-              <span class="deploy-chevron" aria-hidden="true">
-                <ChevronDownIcon />
-              </span>
             </button>
             {open && (
-              <div class="deploy-detail">
-                <div class="detail-row">
-                  <span class="muted">Commit</span>
-                  <span>
-                    <span class="mono">{d.sha}</span>{" "}
-                    <CopyButton value={d.sha} label="Copy full SHA" />
-                  </span>
-                </div>
-                <div class="detail-row">
-                  <span class="muted">Created</span>
-                  <span title={when(d.created_at)}>{when(d.created_at)}</span>
-                </div>
-                <div class="detail-row">
-                  <span class="muted">Findings</span>
-                  <span>{d.findings_count}</span>
-                </div>
-                <div class="detail-row">
-                  <span class="muted">URL</span>
-                  <span>
-                    <a class="link" href={app.url}>
-                      {app.url}
-                    </a>{" "}
-                    <CopyButton value={app.url} label="Copy app URL" />
-                  </span>
+              <div class="collapse-content min-w-0">
+                <div class="flex min-w-0 flex-col gap-2 text-[13px]">
+                  <div class="flex min-w-0 gap-3">
+                    <span class="w-[90px] shrink-0 opacity-60">Commit</span>
+                    <span class="flex min-w-0 items-center gap-2">
+                      <span class="min-w-0 flex-1 truncate font-mono" title={d.sha}>{d.sha}</span>
+                      <CopyButton value={d.sha} label="Copy full SHA" />
+                    </span>
+                  </div>
+                  <div class="flex min-w-0 gap-3">
+                    <span class="w-[90px] shrink-0 opacity-60">Created</span>
+                    <span class="min-w-0 flex-1 truncate" title={when(d.created_at)}>{when(d.created_at)}</span>
+                  </div>
+                  <div class="flex min-w-0 gap-3">
+                    <span class="w-[90px] shrink-0 opacity-60">Findings</span>
+                    <span class="min-w-0 flex-1 truncate">{d.findings_count}</span>
+                  </div>
+                  <div class="flex min-w-0 gap-3">
+                    <span class="w-[90px] shrink-0 opacity-60">URL</span>
+                    <span class="flex min-w-0 items-center gap-2">
+                      <a class="link min-w-0 flex-1 truncate" href={app.url} title={app.url}>
+                        {app.url}
+                      </a>
+                      <CopyButton value={app.url} label="Copy app URL" />
+                    </span>
+                  </div>
+                  {d.message && (
+                    <p class="alert alert-error alert-soft m-0 min-w-0" role="alert">
+                      <span class="min-w-0 break-all" title={d.message}>{d.message}</span>
+                    </p>
+                  )}
                 </div>
-                {d.message && (
-                  <p class="deploy-message" role="alert">
-                    {d.message}
-                  </p>
-                )}
               </div>
             )}
           </section>
@@ -915,38 +943,40 @@ export function LogsView({
   }
   const lines = panel.value;
   return (
-    <section class="card" aria-label="Logs">
-      <div class="card-head">
-        <h2>
-          Recent logs{" "}
-          <span class="muted">
-            ({lines.length.toLocaleString()} lines)
-          </span>
-        </h2>
-        <button type="button" class="btn" onclick={onRefresh}>
-          Refresh
-        </button>
+    <section class="card card-border bg-base-100 min-w-0" aria-label="Logs">
+      <div class="card-body min-w-0">
+        <div class="mb-3 flex min-w-0 items-center justify-between gap-3">
+          <h2 class="card-title min-w-0 truncate" title={`Recent logs (${lines.length.toLocaleString()} lines)`}>
+            Recent logs{" "}
+            <span class="opacity-60">
+              ({lines.length.toLocaleString()} lines)
+            </span>
+          </h2>
+          <button type="button" class="btn btn-sm shrink-0" onclick={onRefresh}>
+            Refresh
+          </button>
+        </div>
+        {lines.length === 0 ? (
+          <p class="m-0 min-w-0 opacity-60" role="status">
+            No log lines yet.
+          </p>
+        ) : (
+          <ol class="log-list">
+            {lines.map((entry) => (
+              <li
+                key={entry.seq}
+                class={`log-line is-${entry.stream}`}
+                title={when(entry.ts)}
+              >
+                <span class="log-stream" aria-hidden="true">
+                  {entry.stream === "stderr" ? "!" : ">"}
+                </span>
+                <code>{entry.line}</code>
+              </li>
+            ))}
+          </ol>
+        )}
       </div>
-      {lines.length === 0 ? (
-        <p class="muted" role="status">
-          No log lines yet.
-        </p>
-      ) : (
-        <ol class="log-list">
-          {lines.map((entry) => (
-            <li
-              key={entry.seq}
-              class={`log-line is-${entry.stream}`}
-              title={when(entry.ts)}
-            >
-              <span class="log-stream" aria-hidden="true">
-                {entry.stream === "stderr" ? "!" : ">"}
-              </span>
-              <code>{entry.line}</code>
-            </li>
-          ))}
-        </ol>
-      )}
     </section>
   );
 }
@@ -971,52 +1001,60 @@ export function ErrorsView({ panel }: { panel: Panel<ErrorsSummary> }) {
     );
   }
   return (
-    <section class="card" aria-label="Errors">
-      <div class="card-head">
-        <h2>Errors</h2>
-        <span class="muted">
-          {s5xx_last_hour.toLocaleString()} proxy 5xx in the last hour
-        </span>
-      </div>
-      <div class="table-wrap">
-        <table>
-          <thead>
-            <tr>
-              <th scope="col">Last seen</th>
-              <th scope="col">Error</th>
-              <th scope="col">Seen</th>
-              <th scope="col">First seen</th>
-              <th scope="col">Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            {issues.map((issue) => (
-              <tr key={issue.fingerprint}>
-                <td class="nowrap" title={when(issue.last_seen)}>
-                  {timeAgo(issue.last_seen)}
-                </td>
-                <td class="mono wrap">
-                  {issue.message}
-                  {issue.frame && (
-                    <span class="muted">
-                      <br />
-                      {issue.frame}
-                    </span>
-                  )}
-                </td>
-                <td class="nowrap">{issue.count.toLocaleString()}×</td>
-                <td class="nowrap" title={when(issue.first_seen)}>
-                  {timeAgo(issue.first_seen)}
-                </td>
-                <td>
-                  <span class={`pill ${outcomeClass(issue.status)}`}>
-                    {issue.status}
-                  </span>
-                </td>
+    <section class="card card-border bg-base-100 min-w-0" aria-label="Errors">
+      <div class="card-body min-w-0">
+        <div class="mb-3 flex min-w-0 items-center justify-between gap-3">
+          <h2 class="card-title min-w-0 truncate" title="Errors">Errors</h2>
+          <span class="min-w-0 shrink-0 truncate text-xs opacity-60" title={`${s5xx_last_hour.toLocaleString()} proxy 5xx in the last hour`}>
+            {s5xx_last_hour.toLocaleString()} proxy 5xx in the last hour
+          </span>
+        </div>
+        <div class="min-w-0 overflow-x-auto">
+          <table class="table table-fixed w-full">
+            <colgroup>
+              <col class="w-24" />
+              <col />
+              <col class="w-20" />
+              <col class="w-24" />
+              <col class="w-24" />
+            </colgroup>
+            <thead>
+              <tr>
+                <th scope="col">Last seen</th>
+                <th scope="col">Error</th>
+                <th scope="col">Seen</th>
+                <th scope="col">First seen</th>
+                <th scope="col">Status</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {issues.map((issue) => (
+                <tr key={issue.fingerprint}>
+                  <td class="whitespace-nowrap" title={when(issue.last_seen)}>
+                    {timeAgo(issue.last_seen)}
+                  </td>
+                  <td class="min-w-0 truncate font-mono" title={issue.frame ? `${issue.message}\n${issue.frame}` : issue.message}>
+                    {issue.message}
+                    {issue.frame && (
+                      <span class="block truncate opacity-60" title={issue.frame}>
+                        {issue.frame}
+                      </span>
+                    )}
+                  </td>
+                  <td class="whitespace-nowrap">{issue.count.toLocaleString()}×</td>
+                  <td class="whitespace-nowrap" title={when(issue.first_seen)}>
+                    {timeAgo(issue.first_seen)}
+                  </td>
+                  <td class="min-w-0">
+                    <span class={`badge badge-soft ${outcomeBadge(issue.status)}`} title={issue.status}>
+                      {issue.status}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
     </section>
   );
@@ -1033,40 +1071,50 @@ export function SecretsView({ panel }: { panel: Panel<SecretsSummary> }) {
   }
   const secrets = panel.value.secrets;
   return (
-    <div class="stack">
-      <section class="card" aria-label="About secrets">
-        <p class="muted">
-          Names only — values never leave the server. Your agent manages them
-          over MCP (`list_secrets`, `set_secret`, `unset_secret`); they reach
-          the app as Worker env vars on the next deploy.
-        </p>
+    <div class="flex min-w-0 flex-col gap-3">
+      <section class="card card-border bg-base-100 min-w-0" aria-label="About secrets">
+        <div class="card-body min-w-0">
+          <p class="m-0 min-w-0 break-words opacity-60">
+            Names only — values never leave the server. Your agent manages them
+            over MCP (`list_secrets`, `set_secret`, `unset_secret`); they reach
+            the app as Worker env vars on the next deploy.
+          </p>
+        </div>
       </section>
       {secrets.length === 0 ? (
         <Empty>No secrets set.</Empty>
       ) : (
-        <section class="card" aria-label="Secrets">
-          <div class="table-wrap">
-            <table>
-              <thead>
-                <tr>
-                  <th scope="col">Name</th>
-                  <th scope="col">Updated</th>
-                </tr>
-              </thead>
-              <tbody>
-                {secrets.map((s) => (
-                  <tr key={s.name}>
-                    <td>
-                      <span class="mono">{s.name}</span>{" "}
-                      <CopyButton value={s.name} label={`Copy ${s.name}`} />
-                    </td>
-                    <td class="nowrap" title={when(s.updated_at)}>
-                      {timeAgo(s.updated_at)}
-                    </td>
+        <section class="card card-border bg-base-100 min-w-0" aria-label="Secrets">
+          <div class="card-body min-w-0">
+            <div class="min-w-0 overflow-x-auto">
+              <table class="table table-fixed w-full">
+                <colgroup>
+                  <col />
+                  <col class="w-28" />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th scope="col">Name</th>
+                    <th scope="col">Updated</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {secrets.map((s) => (
+                    <tr key={s.name}>
+                      <td class="min-w-0">
+                        <span class="flex min-w-0 items-center gap-2">
+                          <span class="min-w-0 flex-1 truncate font-mono" title={s.name}>{s.name}</span>
+                          <CopyButton value={s.name} label={`Copy ${s.name}`} />
+                        </span>
+                      </td>
+                      <td class="whitespace-nowrap" title={when(s.updated_at)}>
+                        {timeAgo(s.updated_at)}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </div>
         </section>
       )}
@@ -1078,51 +1126,53 @@ export function SecretsView({ panel }: { panel: Panel<SecretsSummary> }) {
 
 export function SettingsView({ app }: { app: AppDetail }) {
   return (
-    <div class="stack">
-      <section class="card" aria-label="Settings">
-        <p class="muted">
-          Read-only for now — your agent manages these over MCP.
-        </p>
-        <dl class="def-list">
-          <div class="detail-row">
-            <dt class="muted">App</dt>
-            <dd>
-              <span class="mono">{app.slug}</span>{" "}
-              <CopyButton value={app.slug} label="Copy app slug" />
-            </dd>
-          </div>
-          <div class="detail-row">
-            <dt class="muted">URL</dt>
-            <dd>
-              <a class="link" href={app.url}>
-                {app.url}
-              </a>{" "}
-              <CopyButton value={app.url} label="Copy app URL" />
-            </dd>
-          </div>
-          <div class="detail-row">
-            <dt class="muted">Visibility</dt>
-            <dd>{app.visibility}</dd>
-          </div>
-          <div class="detail-row">
-            <dt class="muted">Status</dt>
-            <dd>
-              <span class={`pill ${statusClass(app.status)}`}>
-                {app.status}
-              </span>
-            </dd>
-          </div>
-          <div class="detail-row">
-            <dt class="muted">Your role</dt>
-            <dd>{app.role}</dd>
-          </div>
-          <div class="detail-row">
-            <dt class="muted">Last request</dt>
-            <dd title={app.last_request_at ? when(app.last_request_at) : ""}>
-              {app.last_request_at ? timeAgo(app.last_request_at) : "never"}
-            </dd>
-          </div>
-        </dl>
+    <div class="flex min-w-0 flex-col gap-3">
+      <section class="card card-border bg-base-100 min-w-0" aria-label="Settings">
+        <div class="card-body min-w-0">
+          <p class="m-0 min-w-0 opacity-60">
+            Read-only for now — your agent manages these over MCP.
+          </p>
+          <dl class="m-0 mt-3 flex min-w-0 flex-col gap-2">
+            <div class="flex min-w-0 gap-3 text-[13px]">
+              <dt class="w-[90px] shrink-0 opacity-60">App</dt>
+              <dd class="m-0 flex min-w-0 items-center gap-2">
+                <span class="min-w-0 flex-1 truncate font-mono" title={app.slug}>{app.slug}</span>
+                <CopyButton value={app.slug} label="Copy app slug" />
+              </dd>
+            </div>
+            <div class="flex min-w-0 gap-3 text-[13px]">
+              <dt class="w-[90px] shrink-0 opacity-60">URL</dt>
+              <dd class="m-0 flex min-w-0 items-center gap-2">
+                <a class="link min-w-0 flex-1 truncate" href={app.url} title={app.url}>
+                  {app.url}
+                </a>
+                <CopyButton value={app.url} label="Copy app URL" />
+              </dd>
+            </div>
+            <div class="flex min-w-0 gap-3 text-[13px]">
+              <dt class="w-[90px] shrink-0 opacity-60">Visibility</dt>
+              <dd class="m-0 min-w-0 flex-1 truncate" title={app.visibility}>{app.visibility}</dd>
+            </div>
+            <div class="flex min-w-0 gap-3 text-[13px]">
+              <dt class="w-[90px] shrink-0 opacity-60">Status</dt>
+              <dd class="m-0 min-w-0 flex-1">
+                <span class={`badge badge-soft ${statusBadge(app.status)}`} title={app.status}>
+                  {app.status}
+                </span>
+              </dd>
+            </div>
+            <div class="flex min-w-0 gap-3 text-[13px]">
+              <dt class="w-[90px] shrink-0 opacity-60">Your role</dt>
+              <dd class="m-0 min-w-0 flex-1 truncate" title={app.role}>{app.role}</dd>
+            </div>
+            <div class="flex min-w-0 gap-3 text-[13px]">
+              <dt class="w-[90px] shrink-0 opacity-60">Last request</dt>
+              <dd class="m-0 min-w-0 flex-1 truncate" title={app.last_request_at ? when(app.last_request_at) : ""}>
+                {app.last_request_at ? timeAgo(app.last_request_at) : "never"}
+              </dd>
+            </div>
+          </dl>
+        </div>
       </section>
     </div>
   );
diff --git a/web/pages/console/console.css b/web/pages/console/console.css
index 811ba70..8411110 100644
--- a/web/pages/console/console.css
+++ b/web/pages/console/console.css
@@ -1,59 +1,95 @@
-/* Outer console shell: rail + sidebar + main panel.
-   Standalone (no Blume stylesheet, no icon font, no CDN): every glyph is an
-   inline SVG in _islands/icons.tsx. Light theme is the default, matching the
-   reference (soft light-gray canvas, white panels, ~18px radii); the dark
-   variant follows the OS preference. Tokens live in CSS variables. */
-:root {
-  color-scheme: light dark;
-  --canvas: #f2f3f5;
-  --panel: #ffffff;
-  --panel-soft: #f6f7f9;
-  --border: #e4e6eb;
-  --border-soft: #eceef2;
-  --ink: #141414;
-  --ink-soft: #55585f;
-  --ink-muted: #8a8e96;
-  --accent: #141414;
-  --pill-bg: #f0f1f4;
-  --ok: #1c7a3d;
-  --ok-bg: #e5f4ea;
-  --info: #2456c4;
-  --info-bg: #e7eefc;
-  --bad: #b3261e;
-  --bad-bg: #fbe9e7;
-  --warn: #8a5a00;
-  --warn-bg: #fdf3dd;
-  --rail-tile: #eef0f3;
-  --shadow: 0 1px 2px rgb(20 20 20 / 0.05), 0 8px 24px -12px rgb(20 20 20 / 0.12);
-  --radius: 18px;
-  --radius-sm: 12px;
-  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --canvas: #101214;
-    --panel: #17191d;
-    --panel-soft: #1d2025;
-    --border: #2b2f36;
-    --border-soft: #24282e;
-    --ink: #f0f1f3;
-    --ink-soft: #b7bbc2;
-    --ink-muted: #82878f;
-    --accent: #f0f1f3;
-    --pill-bg: #24282e;
-    --ok: #7ddba0;
-    --ok-bg: #14301f;
-    --info: #9db8f5;
-    --info-bg: #1a2745;
-    --bad: #f5a49e;
-    --bad-bg: #3d1a17;
-    --warn: #e8c26a;
-    --warn-bg: #3a2d10;
-    --rail-tile: #22262c;
-    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
-  }
+/* Outer console shell: rail + drawer sidebar + main panel.
+   Standalone (no Blume stylesheet): Tailwind v4 (via Blume's Vite) plus
+   daisyUI 5, installed per https://daisyui.com/docs/install/astro/ —
+   `@import "tailwindcss"` plus the Vite plugin Blume already wires, and
+   `@source "."` pins Tailwind's content scan to this directory (Blume's
+   Vite does not see the island `.tsx` otherwise; verified: classes only
+   appear with the explicit source). Nothing in this file reaches the docs:
+   the shells link no Blume stylesheet.
+   Custom themes per https://daisyui.com/docs/themes/ : `outer` (default,
+   the reference look: soft light-gray base-200 canvas, white base-100
+   panels, near-black primary/neutral, large radii) and `outer-dark`
+   (follows the OS preference). Surfaces below use the theme variables
+   (`--color-base-*`), so both themes apply with no extra rules.
+   Component styling is daisyUI class names in the islands; what remains
+   here is layout glue (the 3-pane grid, rail, charts) plus the app-tile
+   tints. No `style=` attributes anywhere: the console CSP only hashes
+   inline scripts/styles, so every size rides on classes or SVG attrs. */
+@import "tailwindcss";
+
+@source ".";
+
+@plugin "daisyui" {
+  themes: false;
+  exclude: scrollbar;
+}
+
+@plugin "daisyui/theme" {
+  name: "outer";
+  default: true;
+  color-scheme: light;
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(96.4% 0.0029 264.5);
+  --color-base-300: oklch(92.48% 0.0071 268.5);
+  --color-base-content: oklch(19.13% 0 0);
+  --color-primary: oklch(19.13% 0 0);
+  --color-primary-content: oklch(100% 0 0);
+  --color-secondary: oklch(46.02% 0.012 267.3);
+  --color-secondary-content: oklch(100% 0 0);
+  --color-accent: oklch(19.13% 0 0);
+  --color-accent-content: oklch(100% 0 0);
+  --color-neutral: oklch(19.13% 0 0);
+  --color-neutral-content: oklch(96.4% 0.0029 264.5);
+  --color-info: oklch(48.81% 0.1805 263);
+  --color-info-content: oklch(100% 0 0);
+  --color-success: oklch(51.16% 0.1271 150.3);
+  --color-success-content: oklch(100% 0 0);
+  --color-warning: oklch(50.78% 0.108 73.3);
+  --color-warning-content: oklch(100% 0 0);
+  --color-error: oklch(50.13% 0.1783 28.7);
+  --color-error-content: oklch(100% 0 0);
+  --radius-selector: 1rem;
+  --radius-field: 0.75rem;
+  --radius-box: 1.25rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+@plugin "daisyui/theme" {
+  name: "outer-dark";
+  prefersdark: true;
+  color-scheme: dark;
+  --color-base-100: oklch(21.3% 0.0085 264.4);
+  --color-base-200: oklch(18.09% 0.0052 248.1);
+  --color-base-300: oklch(30.41% 0.0138 261.7);
+  --color-base-content: oklch(95.79% 0.0029 264.5);
+  --color-primary: oklch(95.79% 0.0029 264.5);
+  --color-primary-content: oklch(21.3% 0.0085 264.4);
+  --color-secondary: oklch(79.1% 0.0108 261.8);
+  --color-secondary-content: oklch(18.09% 0.0052 248.1);
+  --color-accent: oklch(95.79% 0.0029 264.5);
+  --color-accent-content: oklch(18.09% 0.0052 248.1);
+  --color-neutral: oklch(95.79% 0.0029 264.5);
+  --color-neutral-content: oklch(18.09% 0.0052 248.1);
+  --color-info: oklch(78.49% 0.0924 265.9);
+  --color-info-content: oklch(18.09% 0.0052 248.1);
+  --color-success: oklch(81.74% 0.1234 155);
+  --color-success-content: oklch(18.09% 0.0052 248.1);
+  --color-warning: oklch(82.93% 0.1155 86.5);
+  --color-warning-content: oklch(18.09% 0.0052 248.1);
+  --color-error: oklch(79.65% 0.0972 24.1);
+  --color-error-content: oklch(18.09% 0.0052 248.1);
+  --radius-selector: 1rem;
+  --radius-field: 0.75rem;
+  --radius-box: 1.25rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
 }
 
 * {
@@ -67,9 +103,9 @@ body {
 }
 
 body {
-  background: var(--canvas);
-  color: var(--ink);
-  font-family: var(--font);
+  background: var(--color-base-200);
+  color: var(--color-base-content);
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   font-size: 14px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
@@ -79,29 +115,21 @@ body {
 
 .console {
   display: grid;
-  grid-template-columns: 64px 260px minmax(0, 1fr);
+  grid-template-columns: 64px minmax(0, 1fr);
   gap: 12px;
   align-items: start;
   min-height: 100dvh;
   padding: 12px;
 }
 
-.console.is-collapsed {
-  grid-template-columns: 64px minmax(0, 1fr);
-}
-
-.console.is-collapsed .side {
-  display: none;
-}
-
 .skip-link {
   position: absolute;
   left: -9999px;
   top: 0;
-  background: var(--panel);
-  color: var(--ink);
+  background: var(--color-base-100);
+  color: var(--color-base-content);
   padding: 8px 12px;
-  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+  border-radius: 0 0 var(--radius-field) var(--radius-field);
   z-index: 100;
 }
 
@@ -110,7 +138,7 @@ body {
 }
 
 :focus-visible {
-  outline: 2px solid var(--ink);
+  outline: 2px solid var(--color-base-content);
   outline-offset: 2px;
   border-radius: 6px;
 }
@@ -124,12 +152,11 @@ body {
   flex-direction: column;
   align-items: center;
   gap: 8px;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
+  background: var(--color-base-100);
+  border: 1px solid var(--color-base-300);
+  border-radius: var(--radius-box);
   padding: 10px 0;
   min-height: calc(100dvh - 24px);
-  box-shadow: var(--shadow);
 }
 
 .rail-apps {
@@ -138,142 +165,36 @@ body {
   gap: 8px;
   align-items: center;
   overflow-y: auto;
+  min-height: 0;
 }
 
+/* Rail tiles are daisyUI avatar-placeholders in the islands; `.rail-tile`
+   only carries the tile frame shared by links, buttons and indicators. */
 .rail-tile {
-  position: relative;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border: 1px solid transparent;
   border-radius: 14px;
-  background: var(--rail-tile);
-  color: var(--ink-soft);
+  color: var(--color-base-content);
+  opacity: 0.65;
   cursor: pointer;
   text-decoration: none;
   padding: 0;
+  background: transparent;
 }
 
-.rail-tile:hover {
-  color: var(--ink);
-  border-color: var(--border);
+button.rail-tile:hover,
+a.rail-tile:hover {
+  opacity: 1;
+  border-color: var(--color-base-300);
 }
 
 .rail-tile.is-active {
-  background: var(--panel);
-  color: var(--ink);
-  border-color: var(--border);
-  box-shadow: var(--shadow);
-}
-
-.rail-mark {
-  background: var(--ink);
-  color: var(--panel);
-}
-
-.rail-mono {
-  font-weight: 700;
-  font-size: 21px;
-  letter-spacing: 0.02em;
-  line-height: 1;
-}
-
-.status-dot {
-  position: absolute;
-  right: 6px;
-  bottom: 6px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 2px solid var(--panel);
-  background: var(--ink-muted);
-}
-
-.status-dot.is-running,
-.status-dot.is-success {
-  background: #22a355;
-}
-
-.status-dot.is-sleeping {
-  background: var(--ink-muted);
-}
-
-.status-dot.is-building,
-.status-dot.is-deploying,
-.status-dot.is-reviewing,
-.status-dot.is-queued {
-  background: #d99a00;
-}
-
-.status-dot.is-failed,
-.status-dot.is-blocked,
-.status-dot.is-error {
-  background: #d43d2a;
-}
-
-.rail-create {
-  position: relative;
-}
-
-.rail-foot {
-  margin-top: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-  position: relative;
-}
-
-.rail-pop {
-  position: absolute;
-  left: 54px;
-  bottom: 0;
-  width: 260px;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--shadow);
-  padding: 14px;
-  z-index: 40;
-  color: var(--ink);
-}
-
-.rail-create .rail-pop {
-  bottom: auto;
-  top: 0;
-}
-
-.rail-pop-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 6px;
-}
-
-.rail-pop p {
-  margin: 6px 0;
-  color: var(--ink-soft);
-}
-
-.rail-pop code {
-  font-family: var(--mono);
-  font-size: 12px;
-  word-break: break-all;
-}
-
-.rail-pop-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.rail-account-email {
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  opacity: 1;
+  border-color: var(--color-base-300);
 }
 
 /* App tile tints: deterministic pastel per slug hash (tint-0..7). */
@@ -286,11 +207,6 @@ body {
 .tint-6 { background: #f2ecdf; color: #6b5320; }
 .tint-7 { background: #e7ecef; color: #3c4650; }
 
-.rail-tile.is-active[class*="tint-"] {
-  background: var(--panel);
-  color: var(--ink);
-}
-
 @media (prefers-color-scheme: dark) {
   .tint-0 { background: #232c3d; color: #b9c6e2; }
   .tint-1 { background: #1e3128; color: #a8d4b8; }
@@ -300,26 +216,40 @@ body {
   .tint-5 { background: #1e3033; color: #a3cfd4; }
   .tint-6 { background: #35301c; color: #d6c48c; }
   .tint-7 { background: #262b31; color: #b6c0cb; }
-  .rail-tile.is-active[class*="tint-"] {
-    background: var(--panel);
-  }
 }
 
-/* --- Sidebar ----------------------------------------------------------- */
+.rail-foot {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  position: relative;
+}
+
+/* --- Sidebar (daisyUI drawer-side child) ------------------------------- */
 
 .side {
-  position: sticky;
-  top: 12px;
+  width: 16rem;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
+  background: var(--color-base-100);
   padding: 16px 12px 12px;
-  min-height: calc(100dvh - 24px);
-  max-height: calc(100dvh - 24px);
-  overflow-y: auto;
-  box-shadow: var(--shadow);
+}
+
+/* On desktop the open drawer-side is sticky in-flow: full height, own
+   border and radius like the reference sidebar panel. */
+@media (width >= 768px) {
+  .drawer-side .side {
+    border: 1px solid var(--color-base-300);
+    border-radius: var(--radius-box);
+    min-height: calc(100dvh - 24px);
+    max-height: calc(100dvh - 24px);
+    overflow-y: auto;
+    position: sticky;
+    top: 12px;
+  }
 }
 
 .side-head {
@@ -327,139 +257,25 @@ body {
   align-items: flex-start;
   gap: 8px;
   padding: 0 4px 12px;
+  min-width: 0;
 }
 
 .side-id {
   min-width: 0;
-  flex: 1;
-}
-
-.side-name {
-  margin: 0;
-  font-weight: 700;
-  font-size: 15px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.side-url {
-  display: block;
-  font-size: 12px;
-  color: var(--ink-muted);
-  text-decoration: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.side-url:hover {
-  color: var(--ink);
-  text-decoration: underline;
-}
-
-.side-label {
-  margin: 14px 4px 6px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--ink-muted);
-}
-
-.side-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.side-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 8px 10px;
-  border: 0;
-  border-radius: 10px;
-  background: transparent;
-  color: var(--ink-soft);
-  font: inherit;
-  font-size: 13.5px;
-  cursor: pointer;
-  text-align: left;
-  text-decoration: none;
-}
-
-button.side-item:hover {
-  background: var(--panel-soft);
-  color: var(--ink);
-}
-
-.side-item.is-active {
-  background: var(--pill-bg);
-  color: var(--ink);
-  font-weight: 600;
-}
-
-.side-item.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.75;
-}
-
-.count-badge {
-  margin-left: auto;
-  min-width: 22px;
-  height: 22px;
-  padding: 0 6px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: var(--ink);
-  color: var(--panel);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.soon-pill {
-  margin-left: auto;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: var(--pill-bg);
-  color: var(--ink-muted);
-  font-size: 11px;
-  font-weight: 600;
+  flex: 1 1 auto;
 }
 
 .side-foot {
   margin-top: auto;
   padding: 12px 4px 0;
-  border-top: 1px solid var(--border-soft);
-}
-
-.side-foot-url {
-  margin: 0 0 6px;
-  font-size: 12px;
-  color: var(--ink-muted);
-}
-
-.side-foot-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.scrim {
-  display: none;
+  min-width: 0;
 }
 
 /* --- Main -------------------------------------------------------------- */
 
 .main {
   min-width: 0;
+  width: 100%;
   padding: 6px 4px 40px;
 }
 
@@ -468,6 +284,7 @@ button.side-item:hover {
   align-items: center;
   gap: 12px;
   padding: 10px 4px 16px;
+  min-width: 0;
 }
 
 .main-title {
@@ -475,285 +292,26 @@ button.side-item:hover {
   font-size: 21px;
   font-weight: 700;
   letter-spacing: -0.01em;
-}
-
-button.main-menu {
-  display: none;
-}
-
-.range {
-  margin-left: auto;
-  display: inline-flex;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  padding: 3px;
-  gap: 2px;
-}
-
-.range-btn {
-  border: 0;
-  background: transparent;
-  color: var(--ink-soft);
-  font: inherit;
-  font-size: 12.5px;
-  font-weight: 600;
-  padding: 5px 12px;
-  border-radius: 999px;
-  cursor: pointer;
-}
-
-.range-btn:hover {
-  color: var(--ink);
-}
-
-.range-btn.is-active {
-  background: var(--ink);
-  color: var(--panel);
-}
-
-.main-body {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.grid-2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-
-.card {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 18px 20px;
-  box-shadow: var(--shadow);
-}
-
-.card h2 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.card-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.muted {
-  color: var(--ink-muted);
-}
-
-.mono {
-  font-family: var(--mono);
-  font-size: 12.5px;
-}
-
-.trim {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
 }
 
-.wrap {
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.nowrap {
-  white-space: nowrap;
-}
-
-.link {
-  color: var(--ink);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.link-btn {
-  border: 0;
-  background: none;
-  padding: 0;
-  font: inherit;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--ink-soft);
-  cursor: pointer;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.link-btn:hover {
-  color: var(--ink);
-}
-
-.btn {
-  border: 1px solid var(--border);
-  background: var(--panel);
-  color: var(--ink);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 600;
-  padding: 7px 14px;
-  border-radius: 10px;
-  cursor: pointer;
-}
-
-.btn:hover:not(:disabled) {
-  background: var(--panel-soft);
-}
-
-.btn:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--ink-soft);
-  cursor: pointer;
-  padding: 0;
-  flex: none;
-}
-
-.icon-btn:hover {
-  background: var(--pill-bg);
-  color: var(--ink);
-}
-
-.menu-row {
+.main-body {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  border: 0;
-  background: transparent;
-  color: var(--ink);
-  font: inherit;
-  font-size: 13px;
-  padding: 8px 6px;
-  border-radius: 8px;
-  cursor: pointer;
-  text-align: left;
-}
-
-.menu-row:hover {
-  background: var(--pill-bg);
-}
-
-/* Pills + badges */
-
-.pill {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: var(--pill-bg);
-  color: var(--ink-soft);
-  white-space: nowrap;
-}
-
-.pill.is-ok {
-  background: var(--ok-bg);
-  color: var(--ok);
-}
-
-.pill.is-info {
-  background: var(--info-bg);
-  color: var(--info);
-}
-
-.pill.is-bad {
-  background: var(--bad-bg);
-  color: var(--bad);
-}
-
-.pill.is-warn {
-  background: var(--warn-bg);
-  color: var(--warn);
-}
-
-.pill.is-muted {
-  background: var(--pill-bg);
-  color: var(--ink-muted);
-}
-
-.pill.is-neutral {
-  background: var(--pill-bg);
-  color: var(--ink-soft);
-}
-
-.delta-pill {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 1px 8px;
-  border-radius: 999px;
-  background: var(--pill-bg);
-  color: var(--ink-soft);
-  font-size: 12px;
-  font-weight: 700;
-  vertical-align: middle;
-}
-
-/* Stat cards */
-
-.stat-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  flex-direction: column;
   gap: 12px;
+  min-width: 0;
+  width: 100%;
 }
 
-.stat-label {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  margin: 0 0 8px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--ink-soft);
-}
-
-.stat-value {
-  margin: 0;
-  font-size: 26px;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  font-variant-numeric: tabular-nums;
-}
-
-.stat-sub {
-  margin: 4px 0 0;
-  font-size: 12.5px;
-  color: var(--ink-muted);
-}
-
-/* Charts */
+/* --- Charts ------------------------------------------------------------ */
 
 .chart-block {
   margin: 0;
-  color: var(--ink);
+  min-width: 0;
+  color: var(--color-base-content);
 }
 
 .chart-block svg {
@@ -761,174 +319,7 @@ button.main-menu {
   height: auto;
 }
 
-.legend {
-  display: flex;
-  gap: 16px;
-  margin-top: 8px;
-  font-size: 12px;
-  color: var(--ink-muted);
-}
-
-.card-head .legend {
-  margin-top: 0;
-}
-
-.legend-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.swatch {
-  display: inline-block;
-  width: 14px;
-  height: 3px;
-  border-radius: 2px;
-}
-
-.swatch-dark {
-  background: var(--ink);
-}
-
-.swatch-light {
-  background: var(--ink-muted);
-  opacity: 0.5;
-}
-
-.axis-ends {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 4px;
-  font-size: 11px;
-  color: var(--ink-muted);
-}
-
-/* Tables */
-
-.table-wrap {
-  overflow-x: auto;
-  margin: 0 -4px;
-  padding: 0 4px;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-th {
-  text-align: left;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--ink-muted);
-  padding: 6px 10px 6px 0;
-  border-bottom: 1px solid var(--border);
-  white-space: nowrap;
-}
-
-td {
-  padding: 8px 10px 8px 0;
-  border-bottom: 1px solid var(--border-soft);
-  vertical-align: top;
-}
-
-tr:last-child td {
-  border-bottom: 0;
-}
-
-/* Lists */
-
-.mini-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.mini-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  font-size: 13px;
-}
-
-.mini-row .trim {
-  flex: 1;
-}
-
-/* Deploys */
-
-.deploy-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 13px;
-  min-width: 0;
-}
-
-.deploy-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  border: 0;
-  background: none;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-
-.deploy-chevron {
-  margin-left: auto;
-  color: var(--ink-muted);
-  display: inline-flex;
-}
-
-.deploy-detail {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--border-soft);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.detail-row {
-  display: flex;
-  gap: 12px;
-  font-size: 13px;
-}
-
-.detail-row > :first-child {
-  flex: none;
-  width: 90px;
-}
-
-.deploy-message {
-  margin: 4px 0 0;
-  padding: 10px 12px;
-  border-radius: var(--radius-sm);
-  background: var(--bad-bg);
-  color: var(--bad);
-  font-size: 13px;
-}
-
-.def-list {
-  margin: 12px 0 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* Logs */
+/* --- Logs -------------------------------------------------------------- */
 
 .log-list {
   list-style: none;
@@ -937,10 +328,11 @@ tr:last-child td {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  background: var(--panel-soft);
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius-sm);
-  font-family: var(--mono);
+  min-width: 0;
+  background: var(--color-base-200);
+  border: 1px solid var(--color-base-300);
+  border-radius: var(--radius-field);
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
   font-size: 12px;
   max-height: 480px;
   overflow: auto;
@@ -949,73 +341,36 @@ tr:last-child td {
 .log-line {
   display: flex;
   gap: 8px;
+  min-width: 0;
   overflow-wrap: anywhere;
 }
 
 .log-line code {
   white-space: pre-wrap;
+  min-width: 0;
 }
 
 .log-stream {
   flex: none;
-  color: var(--ink-muted);
+  opacity: 0.5;
   user-select: none;
 }
 
 .log-line.is-stderr .log-stream {
-  color: var(--bad);
-}
-
-/* Skeletons + states */
-
-.skeleton-card,
-.skeleton-chart,
-.skeleton-rail,
-.skeleton-side,
-.skeleton-main {
-  border-radius: var(--radius);
-  background: linear-gradient(
-    100deg,
-    var(--panel-soft) 30%,
-    var(--border-soft) 50%,
-    var(--panel-soft) 70%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.4s linear infinite;
-  border: 1px solid var(--border-soft);
+  color: var(--color-error);
+  opacity: 1;
 }
 
-@keyframes shimmer {
-  to {
-    background-position: -200% 0;
-  }
-}
-
-.skeleton-card {
-  height: 120px;
-}
-
-.skeleton-chart {
-  height: 280px;
-}
+/* --- Boot / empty states ----------------------------------------------- */
 
 .console-boot {
   display: grid;
-  grid-template-columns: 64px 260px minmax(0, 1fr);
+  grid-template-columns: 64px minmax(0, 1fr);
   gap: 12px;
   min-height: 100dvh;
   padding: 12px;
 }
 
-.skeleton-rail {
-  min-height: calc(100dvh - 24px);
-}
-
-.skeleton-side,
-.skeleton-main {
-  min-height: 60dvh;
-}
-
 .console-error,
 .console-empty {
   min-height: 100dvh;
@@ -1026,8 +381,8 @@ tr:last-child td {
   gap: 12px;
   text-align: center;
   padding: 24px;
-  background: var(--canvas);
-  color: var(--ink);
+  background: var(--color-base-200);
+  color: var(--color-base-content);
 }
 
 .console-empty h1 {
@@ -1038,19 +393,18 @@ tr:last-child td {
 .console-empty p {
   margin: 0;
   max-width: 420px;
-  color: var(--ink-soft);
+  opacity: 0.7;
 }
 
 .console-empty code {
-  font-family: var(--mono);
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
   font-size: 12.5px;
 }
 
-/* --- Mobile (≤ 768px): rail stays, sidebar becomes a drawer ------------ */
+/* --- Mobile (≤ 768px): rail stays, drawer overlays --------------------- */
 
 @media (width <= 768px) {
-  .console,
-  .console.is-collapsed {
+  .console {
     grid-template-columns: 56px minmax(0, 1fr);
     padding: 8px;
     gap: 8px;
@@ -1066,76 +420,23 @@ tr:last-child td {
     height: 40px;
   }
 
-  .side {
-    position: fixed;
-    top: 8px;
-    bottom: 8px;
-    left: 64px;
-    width: min(300px, calc(100dvw - 80px));
-    max-height: none;
-    z-index: 50;
-    transform: translateX(-120%);
-    transition: transform 0.18s ease-out;
-  }
-
-  .side.is-open {
-    transform: none;
-  }
-
-  .console.is-collapsed .side {
-    display: block;
-  }
-
-  .scrim {
-    display: block;
-    position: fixed;
-    inset: 0;
-    border: 0;
-    padding: 0;
-    background: rgb(0 0 0 / 0.3);
-    z-index: 40;
-    cursor: default;
-  }
-
-  button.main-menu {
-    display: inline-flex;
-  }
-
-  button.side-collapse {
-    display: none;
-  }
-
-  .stat-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .grid-2 {
-    grid-template-columns: 1fr;
-  }
-
   .console-boot {
     grid-template-columns: 56px minmax(0, 1fr);
   }
-
-  .console-boot .skeleton-side {
-    display: none;
-  }
-
-  .rail-pop {
-    left: 48px;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .skeleton-card,
-  .skeleton-chart,
-  .skeleton-rail,
-  .skeleton-side,
-  .skeleton-main {
-    animation: none;
-  }
-
-  .side {
+  .drawer-side {
     transition: none;
   }
 }
+
+/* The reference's look: the brand tile is a dark rounded square, and the
+   selected sidebar row is a soft gray, not daisyUI's filled primary. */
+.rail-logo {
+  @apply bg-neutral text-neutral-content;
+}
+.side .menu :where(li > .menu-active),
+.side .menu :where(li > a.menu-active) {
+  @apply bg-base-200 text-base-content font-medium;
+}