From 6729b029bebb6c62b833fdaae9b042508e9476a7 Mon Sep 17 00:00:00 2001
From: Ryuz <ryuzer@proton.me>
Date: Sat, 24 Oct 2026 17:07:53 +0200
Subject: [PATCH 1/2] Console: daisyUI 5 components, Lucide icons, overflow
 armor (#37)

* Re-adopt daisyUI 5 (Tailwind v4 plugin, console-only scope, @source '.'):
  custom 'outer' (default) + 'outer-dark' (prefersdark) themes matching the
  reference (soft gray canvas, white panels, near-black primary/neutral,
  radius-box 1.25rem, muted status colors). Components used: menu (sidebar,
  dropdown popovers), card, stats/stat, badge (badge-soft pills), table +
  table-fixed w/ colgroup, join (range picker), tabs-box (mobile view tabs),
  btn, drawer + drawer-toggle/content/side/overlay (mobile sidebar,
  md:drawer-open on desktop), dropdown, tooltip, skeleton, alert, collapse
  (deploy rows), kbd (Esc hints), loading, divider, indicator (rail status
  dots, error count), avatar (rail tiles, account). Deleted the custom CSS
  daisyUI replaces; kept layout glue, charts, log list, app-tile tints.
* Lucide via the 'lucide' package's IconNode exports ([tag, attrs][] nodes
  rendered through a tiny Ilha component using ilha's h(); pinned 1.61.0):
  no CDN, no createIcons DOM scanning, CSP-safe. OuterMark stays custom.
* Overflow impossible: truncate + min-w-0 on every flex/grid text child,
  table-fixed with column widths, break-words only for logs/deploy message
  (break-all for unbroken error runs), title on everything truncated.
  Main panel and grids fill available width (drawer-content min-w-0,
  stats stack below xl).
* CSP unchanged, zero style= attributes.

Verified: bun build + validate clean; Playwright Chromium vs real router
with seeded absurd data (500-char summaries, 300-char paths, 63-char
slugs, long errors/secrets): Overview/Actions/Errors/Deploys (expanded)/
Secrets at 1440 and 1024, mobile 390 drawer open in /tmp/outer-console-v3-*;
no horizontal document scroll, no element box outside its panel, zero CSP
violations and console errors. cargo fmt/clippy -D warnings/test green
(438 passed). Harness test deleted after verification.
---
 web/bun.lock                           |    3 +
 web/package.json                       |    1 +
 web/pages/console/_islands/common.tsx  |    2 +-
 web/pages/console/_islands/console.tsx |  562 +++++++------
 web/pages/console/_islands/icons.tsx   |  197 ++---
 web/pages/console/_islands/views.tsx   | 1038 ++++++++++++-----------
 web/pages/console/console.css          | 1059 ++++--------------------
 7 files changed, 1106 insertions(+), 1756 deletions(-)

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..082170d 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 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..bb4548f 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);
+  color: var(--color-error);
+  opacity: 1;
 }
 
-/* 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);
-}
-
-@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,13 @@ 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;
   }
 }

From 553a92c4071bb8d7e7f69e8c9b4879c93086758b Mon Sep 17 00:00:00 2001
From: Ryuz <ryuzer@proton.me>
Date: Sat, 24 Oct 2026 17:09:00 +0200
Subject: [PATCH 2/2] Console: dark brand tile and soft-gray selected row, as
 in the reference

---
 web/pages/console/_islands/console.tsx |  2 +-
 web/pages/console/console.css          | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/web/pages/console/_islands/console.tsx b/web/pages/console/_islands/console.tsx
index 082170d..ba52dbb 100644
--- a/web/pages/console/_islands/console.tsx
+++ b/web/pages/console/_islands/console.tsx
@@ -536,7 +536,7 @@ export function Console() {
       </a>
       <nav class="rail" aria-label="Applications">
         <a
-          class="rail-tile tooltip tooltip-right"
+          class="rail-tile rail-logo tooltip tooltip-right"
           data-tip="Outer console"
           href="/console"
           aria-label="Outer console"
diff --git a/web/pages/console/console.css b/web/pages/console/console.css
index bb4548f..8411110 100644
--- a/web/pages/console/console.css
+++ b/web/pages/console/console.css
@@ -430,3 +430,13 @@ a.rail-tile:hover {
     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;
+}