From ee0f731d3fe8f69009f370e7a49202a115d2ba22 Mon Sep 17 00:00:00 2001
From: Ryuz <ryuzer@proton.me>
Date: Sun, 25 Oct 2026 11:56:49 +0100
Subject: [PATCH 1/3] Console polish: reference look, unified cards, daisyUI
 throughout

Feedback 1 (rail overflow): status dots are now the status component
inside indicator-item, pinned INSIDE the 44px tile bounds via .rail-dot
(--indicator-x/y 0, 6px insets) instead of hanging off the corner; the
app list scrolls vertically with overflow-x hidden and side padding.

Feedback 2 (unified cards): one card style everywhere (card card-border
bg-base-100, radius-box hairline, no shadow). --depth: 0 kills daisyUI's
built-in shadows; removed every shadow-* class.

Feedback 3 (Account section): removed from the app sidebar; Invite codes
and Admin stay in the account dropdown only.

Feedback 4 (reference gap): light-gray canvas with 8px gaps; white
sidebar + main panels (radius 1.5rem, hairline, internal scroll, page
never scrolls); rail transparent and flush left (8px 8px 8px 0 inset,
0 left margin); sidebar header (semibold name, muted URL, status
badge-soft + status dot, collapse top-right); soft-gray menu-active;
neutral-count + soft-Soon badges.

Feedback 5 (daisyUI for real): status/indicator/avatar/menu/card/stats/
stat/list/list-row/table/join/tabs-box/btn/drawer/dropdown/tooltip/
skeleton/alert/collapse/badge/kbd/divider/loading all daisyUI; deleted
the tints, the stats strip, custom rows. console.css 454 -> 469 lines;
what stays custom: theme blocks, shell grid, rail-tile frame + dot
inset, charts, log viewer, skip link, boot/empty shells, with reasons
in the file header.

Feedback 6 (expand left): PanelLeftOpen button at the far left of the
main header when collapsed; state persists in localStorage.

Feedback 7 (flush rail): no card background, no border, flush left.

Feedback 8 (usability): shared EmptyState (icon/title/action, plain
variant inside cards); Retry on every error alert; copy buttons swap
to check + Copied tooltip; stat values medium weight; legend uses
status dots; hamburger opens a drawer on phones; dark theme matches.

Verified: Playwright vs real router + seeded absurd data, screenshots
in /tmp/outer-console-v4-*.png, no doc h-scroll, no box outside its
panel, zero CSP/console errors. cargo fmt/clippy/test green.
---
 web/pages/console/_islands/common.tsx  |   5 +-
 web/pages/console/_islands/console.tsx | 166 ++++++------
 web/pages/console/_islands/icons.tsx   |   6 +-
 web/pages/console/_islands/views.tsx   | 355 ++++++++++++++++---------
 web/pages/console/console.css          | 143 +++++-----
 5 files changed, 397 insertions(+), 278 deletions(-)

diff --git a/web/pages/console/_islands/common.tsx b/web/pages/console/_islands/common.tsx
index 3ad1656..3c089af 100644
--- a/web/pages/console/_islands/common.tsx
+++ b/web/pages/console/_islands/common.tsx
@@ -110,8 +110,9 @@ export function CopyButton({ value, label }: { value: string; label: string }) {
   return (
     <button
       type="button"
-      class="btn btn-ghost btn-square btn-xs shrink-0"
-      title={label}
+      class="btn btn-ghost btn-square btn-xs tooltip shrink-0"
+      data-tip={copied() ? "Copied" : label}
+      title={copied() ? "Copied" : label}
       aria-label={label}
       onclick={() => {
         const done = () => {
diff --git a/web/pages/console/_islands/console.tsx b/web/pages/console/_islands/console.tsx
index 8060a3b..aa89f94 100644
--- a/web/pages/console/_islands/console.tsx
+++ b/web/pages/console/_islands/console.tsx
@@ -30,6 +30,7 @@ import {
   DeploysIcon,
   DocsIcon,
   ErrorsIcon,
+  ExpandIcon,
   LogsIcon,
   MenuIcon,
   MetricsIcon,
@@ -56,7 +57,6 @@ import {
 } from "./views.tsx";
 
 import {
-  ACCOUNT_VIEWS,
   CopyButton,
   RANGES,
   VIEWS,
@@ -70,23 +70,14 @@ import {
 
 // --- Shared bits -------------------------------------------------------------
 
-const TINTS = 8;
-
-function tintIndex(slug: string): number {
-  let h = 0;
-  for (let i = 0; i < slug.length; i++) {
-    h = (h * 31 + slug.charCodeAt(i)) >>> 0;
-  }
-  return h % TINTS;
-}
-
 function monogram(slug: string): string {
   const clean = slug.replace(/[^a-z0-9]/gi, "");
   return (clean.slice(0, 1) || "?").toUpperCase();
 }
 
-// daisyUI mappings: status pills are `badge badge-soft`, rail dots are
-// `indicator-item` dots with theme backgrounds.
+// daisyUI mappings: status pills are `badge badge-soft`, rail dots are the
+// `status` component inside `indicator-item` (pinned inside the tile bounds
+// by `.rail-dot` in console.css, so the rail never overflows).
 function statusBadge(status: string): string {
   if (status === "success" || status === "running" || status === "ok") {
     return "badge-success";
@@ -107,7 +98,7 @@ function statusBadge(status: string): string {
 
 function statusDot(status: string): string {
   if (status === "success" || status === "running" || status === "ok") {
-    return "bg-success";
+    return "status-success";
   }
   if (
     status === "building" ||
@@ -115,12 +106,12 @@ function statusDot(status: string): string {
     status === "reviewing" ||
     status === "queued"
   ) {
-    return "bg-warning";
+    return "status-warning";
   }
   if (status === "failed" || status === "error" || status === "blocked") {
-    return "bg-error";
+    return "status-error";
   }
-  return "bg-base-300";
+  return "status-neutral";
 }
 
 async function loadActionsPage(
@@ -135,14 +126,16 @@ async function loadActionsPage(
 
 // --- Shell -------------------------------------------------------------------
 
-interface Ui {
-  collapsed: boolean;
-  drawer: boolean;
-  createOpen: boolean;
-  accountOpen: boolean;
-  expanded: string[];
+const COLLAPSED_KEY = "outer-console-collapsed";
+
+function readCollapsed(): boolean {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return window.localStorage.getItem(COLLAPSED_KEY) === "1";
 }
 
+
 const VIEW_TITLES: Record<ViewId, string> = {
   overview: "Overview",
   metrics: "Metrics",
@@ -173,7 +166,7 @@ export function Console() {
   const logs = atom<Panel<LogLine[]>>({ kind: "loading" });
   const secrets = atom<Panel<SecretsSummary>>({ kind: "loading" });
   const ui = atom<Ui>({
-    collapsed: false,
+    collapsed: readCollapsed(),
     drawer: false,
     createOpen: false,
     accountOpen: false,
@@ -683,10 +676,26 @@ export function Console() {
       ? errorsPanel.value.issues.filter((i) => i.status === "open").length
       : 0;
 
-  const patchUi = (patch: Partial<Ui>) => ui.set({ ...ui(), ...patch });
+  const patchUi = (patch: Partial<Ui>) => {
+    if (patch.collapsed !== undefined && typeof window !== "undefined") {
+      window.localStorage.setItem(COLLAPSED_KEY, patch.collapsed ? "1" : "0");
+    }
+    ui.set({ ...ui(), ...patch });
+  };
+
+  // Reload the visible view's data (error Retry buttons reuse it).
+  function reload(): void {
+    const r = route();
+    if (r.app && !isAccountView(r.view)) {
+      void loadViewData(r.app, r.view, r.range, epoch, false);
+    } else if (isAccountView(r.view)) {
+      epoch += 1;
+      void loadAccountView(r.view, epoch);
+    }
+  }
 
   return (
-    <div class={`console${ui().collapsed ? " is-collapsed" : ""}`}>
+    <div class="console">
       <a class="skip-link" href="#console-main">
         Skip to content
       </a>
@@ -711,8 +720,9 @@ export function Console() {
               key={a.slug}
               type="button"
               role="listitem"
-              class="tooltip tooltip-right rounded-[14px]"
+              class={`rail-tile tooltip tooltip-right${a.slug === r.app ? " is-active" : ""}`}
               data-tip={`${a.slug} · ${a.status}`}
+              title={`${a.slug} · ${a.status}`}
               aria-label={`${a.slug}, ${a.status}`}
               aria-current={a.slug === r.app ? "page" : undefined}
               onclick={() => {
@@ -723,16 +733,12 @@ export function Console() {
             >
               <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)}`}
+                  class={`indicator-item status rail-dot ${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 class="avatar avatar-placeholder" aria-hidden="true">
+                  <span class="flex h-11 w-11 items-center justify-center text-xl font-bold">
+                    {monogram(a.slug)}
                   </span>
                 </span>
               </span>
@@ -751,7 +757,7 @@ export function Console() {
             <PlusIcon />
           </button>
           {ui().createOpen && (
-            <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="dropdown-content card card-border bg-base-100 w-64 p-4 text-left" 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
@@ -802,7 +808,7 @@ export function Console() {
               </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">
+              <ul class="dropdown-content menu bg-base-100 rounded-box border border-base-300 w-60 min-w-0 p-2" role="menu" aria-label="Account">
                 <li class="menu-title min-w-0">
                   <span class="block truncate" title={email()}>
                     {email() || "Account"}
@@ -868,22 +874,34 @@ export function Console() {
           <div class="drawer-content min-w-0">
             <main class="main" id="console-main" tabindex={-1}>
               <div class="main-head">
+                {ui().collapsed && (
+                  <button
+                    type="button"
+                    class="btn btn-ghost btn-square btn-sm hidden shrink-0 md:inline-flex"
+                    title="Expand sidebar"
+                    aria-label="Expand sidebar"
+                    onclick={() => patchUi({ collapsed: false })}
+                  >
+                    <ExpandIcon />
+                  </button>
+                )}
                 <button
                   type="button"
                   class="btn btn-ghost btn-square btn-sm shrink-0 md:hidden"
+                  title="Open navigation"
                   aria-label="Open navigation"
                   onclick={() => patchUi({ drawer: true })}
                 >
                   <MenuIcon />
                 </button>
-                <h1 class="main-title">{VIEW_TITLES[r.view]}</h1>
+                <h1 class="main-title" title={VIEW_TITLES[r.view]}>{VIEW_TITLES[r.view]}</h1>
                 {(r.view === "overview" || r.view === "metrics") && (
-                  <div class="join ml-auto shrink-0" role="group" aria-label="Metrics range">
+                  <div class="join border border-base-300 ml-auto shrink-0 rounded-full p-1" 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" : ""}`}
+                        class={`btn btn-sm join-item border-0 rounded-full${r.range === opt.hours ? " bg-base-200" : " btn-ghost"}`}
                         title={opt.title}
                         aria-pressed={r.range === opt.hours}
                         onclick={() => navigate({ r: opt.hours } as Partial<Route>)}
@@ -893,17 +911,6 @@ export function Console() {
                     ))}
                   </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) => (
@@ -977,6 +984,7 @@ export function Console() {
                           logs.set({ kind: "error", message: String(err) });
                         });
                     }}
+                    onRetry={reload}
                   />
                 )}
               </div>
@@ -987,13 +995,14 @@ export function Console() {
             <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}>
+                  <p class="m-0 min-w-0 truncate text-[15px] font-semibold" 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}>
+                  <p class="m-0 min-w-0 truncate text-xs opacity-60" title={active.url}>
                     {active.url.replace(/^https?:\/\//, "")}
-                  </a>
+                  </p>
                 </div>
+                <span class={`status ${statusDot(active.status)} mt-1.5 shrink-0`} title={active.status} aria-label={active.status} />
                 <span class={`badge badge-soft ${statusBadge(active.status)} shrink-0`} title={active.status}>{active.status}</span>
                 <button
                   type="button"
@@ -1018,11 +1027,8 @@ export function Console() {
                       <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 class="badge badge-neutral badge-sm ml-auto shrink-0" title={`${openErrors} open errors`} aria-label={`${openErrors} open errors`}>
+                          {openErrors}
                         </span>
                       )}
                     </button>
@@ -1034,24 +1040,10 @@ export function Console() {
                     <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 class="badge badge-soft badge-sm ml-auto shrink-0">Soon</span>
                     </span>
                   </li>
                 ))}
-                <li class="menu-title">Account</li>
-                {ACCOUNT_VIEWS.filter((v) => v.id !== "admin" || isAdmin()).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 })}
-                    >
-                      <ViewIcon id={v.id} />
-                      <span class="min-w-0 flex-1 truncate">{v.label}</span>
-                    </button>
-                  </li>
-                ))}
               </ul>
               <div class="side-foot">
                 <div class="divider my-2" aria-hidden="true" />
@@ -1074,7 +1066,7 @@ export function Console() {
           <div class="drawer-content min-w-0">
             <main class="main" id="console-main" tabindex={-1}>
               <div class="main-head">
-                <h1 class="main-title">{VIEW_TITLES[r.view]}</h1>
+                <h1 class="main-title" title={VIEW_TITLES[r.view]}>{VIEW_TITLES[r.view]}</h1>
               </div>
               <div class="main-body">{accountPanel}</div>
             </main>
@@ -1122,6 +1114,7 @@ function ViewBody(props: {
   onToggleExpand: (id: string) => void;
   onLoadMore: () => void;
   onRefreshLogs: () => void;
+  onRetry: () => void;
 }) {
   switch (props.route.view) {
     case "overview":
@@ -1132,12 +1125,19 @@ function ViewBody(props: {
           actions={props.actions}
           errors={props.errors}
           onView={(view) => navigate({ view })}
+          onRetry={props.onRetry}
         />
       );
     case "metrics":
-      return <MetricsView metrics={props.metrics} />;
+      return <MetricsView metrics={props.metrics} onRetry={props.onRetry} />;
     case "actions":
-      return <ActionsView panel={props.actions} onMore={props.onLoadMore} />;
+      return (
+        <ActionsView
+          panel={props.actions}
+          onMore={props.onLoadMore}
+          onRetry={props.onRetry}
+        />
+      );
     case "deploys":
       return (
         <DeploysView
@@ -1147,11 +1147,17 @@ function ViewBody(props: {
         />
       );
     case "logs":
-      return <LogsView panel={props.logs} onRefresh={props.onRefreshLogs} />;
+      return (
+        <LogsView
+          panel={props.logs}
+          onRefresh={props.onRefreshLogs}
+          onRetry={props.onRetry}
+        />
+      );
     case "errors":
-      return <ErrorsView panel={props.errors} />;
+      return <ErrorsView panel={props.errors} onRetry={props.onRetry} />;
     case "secrets":
-      return <SecretsView panel={props.secrets} />;
+      return <SecretsView panel={props.secrets} onRetry={props.onRetry} />;
     case "settings":
       return <SettingsView app={props.app} />;
   }
diff --git a/web/pages/console/_islands/icons.tsx b/web/pages/console/_islands/icons.tsx
index e75689e..7b94163 100644
--- a/web/pages/console/_islands/icons.tsx
+++ b/web/pages/console/_islands/icons.tsx
@@ -23,6 +23,7 @@ import {
   LogOut,
   Menu,
   PanelLeftClose,
+  PanelLeftOpen,
   Plus,
   Rocket,
   Settings,
@@ -110,11 +111,14 @@ export function SecretsIcon({ size = 18 }: { size?: number }) {
 export function SettingsIcon({ size = 18 }: { size?: number }) {
   return <Lucide node={Settings} size={size} />;
 }
-
 export function CollapseIcon({ size = 18 }: { size?: number }) {
   return <Lucide node={PanelLeftClose} size={size} />;
 }
 
+export function ExpandIcon({ size = 18 }: { size?: number }) {
+  return <Lucide node={PanelLeftOpen} size={size} />;
+}
+
 export function MenuIcon({ size = 18 }: { size?: number }) {
   return <Lucide node={Menu} size={size} />;
 }
diff --git a/web/pages/console/_islands/views.tsx b/web/pages/console/_islands/views.tsx
index 3ebcfbe..3110902 100644
--- a/web/pages/console/_islands/views.tsx
+++ b/web/pages/console/_islands/views.tsx
@@ -37,9 +37,13 @@ import {
 } from "./common.tsx";
 import {
   ActionsIcon,
+  DeploysIcon,
   ErrorsIcon,
+  LogsIcon,
   MetricsIcon,
   OverviewIcon,
+  SecretsIcon,
+  TicketIcon,
 } from "./icons.tsx";
 
 // --- Small pieces ------------------------------------------------------------
@@ -47,25 +51,74 @@ import {
 function Loading({ label }: { label: string }) {
   return (
     <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 class="grid min-w-0 grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4" aria-hidden="true">
+        <div class="skeleton rounded-box h-28 w-full" />
+        <div class="skeleton rounded-box h-28 w-full" />
+        <div class="skeleton rounded-box h-28 w-full" />
+        <div class="skeleton rounded-box h-28 w-full" />
+        <div class="skeleton rounded-box h-64 w-full md:col-span-2 xl:col-span-4" />
+      </div>
+      <span class="sr-only">Loading…</span>
     </div>
   );
 }
 
-function Err({ message }: { message: string }) {
+function Err({ message, onRetry }: { message: string; onRetry?: () => void }) {
   return (
-    <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 class="flex min-w-0 flex-col gap-3">
+      <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>
+      {onRetry && (
+        <div class="min-w-0">
+          <button type="button" class="btn btn-sm" onclick={onRetry}>
+            Retry
+          </button>
+        </div>
+      )}
     </div>
   );
 }
 
-function Empty({ children }: { children?: unknown }) {
+// One shared empty state: an icon in a soft circle, a title, a muted line,
+// and an optional action. `plain` skips the card chrome for empties that
+// already sit inside a card (Overview rows, log lines).
+function EmptyState({
+  icon,
+  title,
+  children,
+  action,
+  plain,
+}: {
+  icon?: unknown;
+  title: string;
+  children?: unknown;
+  action?: unknown;
+  plain?: boolean;
+}) {
+  const inner = (
+    <div class="contents">
+      {icon && (
+        <span class="bg-base-200 flex h-11 w-11 items-center justify-center rounded-full opacity-70" aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      <h3 class="m-0 min-w-0 text-base font-semibold">{title}</h3>
+      {children && <p class="m-0 min-w-0 text-sm opacity-60">{children}</p>}
+      {action}
+    </div>
+  );
+  if (plain) {
+    return (
+      <div class="flex min-w-0 flex-col items-center gap-2 py-6 text-center" role="status" aria-label={title}>
+        {inner}
+      </div>
+    );
+  }
   return (
-    <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>
+    <section class="card card-border bg-base-100 min-w-0" role="status" aria-label={title}>
+      <div class="card-body items-center gap-2 py-8 text-center">
+        {inner}
       </div>
     </section>
   );
@@ -152,7 +205,7 @@ function StatCard({
         {icon}
         <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}>
+      <div class="stat-value min-w-0 truncate text-3xl font-medium" title={pill ? `${value} ${pill}` : value}>
         {value}
         {pill != null && pill !== "" && (
           <span class="badge badge-soft badge-sm ml-2 shrink-0 align-middle">{pill}</span>
@@ -446,17 +499,19 @@ export function OverviewView({
   actions,
   errors,
   onView,
+  onRetry,
 }: {
   app: AppDetail;
   metrics: Panel<{ hours: number; summary: MetricsSummary }>;
   actions: ActionsPanel;
   errors: Panel<ErrorsSummary>;
   onView: (view: ViewId) => void;
+  onRetry: () => void;
 }) {
   return (
     <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 === "error" && <Err message={metrics.message} onRetry={onRetry} />}
       {metrics.kind === "ready" && (
         <OverviewReady
           summary={metrics.value.summary}
@@ -477,11 +532,13 @@ export function OverviewView({
               </button>
             </div>
             {app.deploys.length === 0 ? (
-              <p class="m-0 min-w-0 opacity-60" role="status">
-                No deploys yet.
-              </p>
+              <EmptyState plain icon={<DeploysIcon />} title="No deploys yet">
+                Deploys your agent ships will show up here.
+              </EmptyState>
             ) : (
-              <DeployRow deploy={app.deploys[0]} />
+              <ul class="list min-w-0">
+                <DeployRow deploy={app.deploys[0]} />
+              </ul>
             )}
           </div>
         </section>
@@ -498,9 +555,11 @@ export function OverviewView({
               </button>
             </div>
             {actions.kind === "loading" && (
-              <p class="m-0 min-w-0 opacity-60" role="status">
-                Loading actions…
-              </p>
+              <div class="flex min-w-0 flex-col gap-2" role="status" aria-label="Loading actions">
+                <div class="skeleton h-8 w-full" />
+                <div class="skeleton h-8 w-full" />
+                <div class="skeleton h-8 w-full" />
+              </div>
             )}
             {actions.kind === "error" && (
               <p class="m-0 min-w-0 break-words opacity-60" role="alert">
@@ -509,13 +568,13 @@ export function OverviewView({
             )}
             {actions.kind === "ready" &&
               (actions.state.actions.length === 0 ? (
-                <p class="m-0 min-w-0 opacity-60" role="status">
-                  No agent actions yet.
-                </p>
+                <EmptyState plain icon={<ActionsIcon />} title="No agent actions yet">
+                  Your agent's tool calls will show up here.
+                </EmptyState>
               ) : (
-                <ul class="m-0 flex min-w-0 list-none flex-col gap-2 p-0">
+                <ul class="list min-w-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]">
+                    <li key={a.id} class="list-row min-w-0 text-[13px]">
                       <span class={`badge badge-soft ${outcomeBadge(a.outcome)} shrink-0`} title={a.outcome}>
                         {a.outcome}
                       </span>
@@ -545,12 +604,12 @@ export function OverviewView({
                 View all
               </button>
             </div>
-            <ul class="m-0 flex min-w-0 list-none flex-col gap-2 p-0">
+            <ul class="list min-w-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]">
+                  <li key={i.fingerprint} class="list-row min-w-0 text-[13px]">
                     <span class="min-w-0 flex-1 truncate font-mono text-xs" title={i.message}>
                       {i.message}
                     </span>
@@ -578,58 +637,64 @@ function OverviewReady({
   const errorRate = fmtRate(summary.s5xx, summary.requests);
   return (
     <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"
-          value={summary.requests.toLocaleString()}
-          pill={halfChange(summary.buckets)}
-          sub="in range"
-        />
-        <StatCard
-          icon={<OverviewIcon size={16} />}
-          label="Visitors"
-          value={summary.visitors.toLocaleString()}
-          sub="daily uniques, summed"
-        />
-        <StatCard
-          icon={<ErrorsIcon size={16} />}
-          label="Error rate"
-          value={errorRate}
-          pill={summary.s5xx > 0 ? `${summary.s5xx.toLocaleString()} 5xx` : null}
-          sub="server errors share"
-        />
-        <StatCard
-          icon={<ActionsIcon size={16} />}
-          label="p95 latency"
-          value={`${summary.p95_ms} ms`}
-          pill={`p50 ${summary.p50_ms} ms`}
-          sub="response headers"
-        />
+      <div class="grid min-w-0 grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+        <section class="card card-border bg-base-100 min-w-0" aria-label="Requests">
+          <StatCard
+            icon={<MetricsIcon size={16} />}
+            label="Requests"
+            value={summary.requests.toLocaleString()}
+            pill={halfChange(summary.buckets)}
+            sub="in range"
+          />
+        </section>
+        <section class="card card-border bg-base-100 min-w-0" aria-label="Visitors">
+          <StatCard
+            icon={<OverviewIcon size={16} />}
+            label="Visitors"
+            value={summary.visitors.toLocaleString()}
+            sub="daily uniques, summed"
+          />
+        </section>
+        <section class="card card-border bg-base-100 min-w-0" aria-label="Error rate">
+          <StatCard
+            icon={<ErrorsIcon size={16} />}
+            label="Error rate"
+            value={errorRate}
+            pill={summary.s5xx > 0 ? `${summary.s5xx.toLocaleString()} 5xx` : null}
+            sub="server errors share"
+          />
+        </section>
+        <section class="card card-border bg-base-100 min-w-0" aria-label="p95 latency">
+          <StatCard
+            icon={<ActionsIcon size={16} />}
+            label="p95 latency"
+            value={`${summary.p95_ms} ms`}
+            pill={`p50 ${summary.p50_ms} ms`}
+            sub="response headers"
+          />
+        </section>
       </div>
-      <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>
+      <section class="min-w-0" aria-label="Requests chart">
+        <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="status status-neutral" aria-hidden="true" />
+              This period
+            </span>
+            <span class="flex min-w-0 items-center gap-1.5">
+              <span class="status" aria-hidden="true" />
+              Errors (4xx + 5xx)
+            </span>
           </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 ? (
+          <EmptyState plain title="No traffic in this range">
+            Requests your app serves will show up here.
+          </EmptyState>
+        ) : (
+          <RequestsLine buckets={summary.buckets} hours={hours} />
+        )}
       </section>
     </div>
   );
@@ -638,47 +703,57 @@ function OverviewReady({
 // --- Metrics -------------------------------------------------------------------
 export function MetricsView({
   metrics,
+  onRetry,
 }: {
   metrics: Panel<{ hours: number; summary: MetricsSummary }>;
+  onRetry: () => void;
 }) {
   if (metrics.kind === "loading") {
     return <Loading label="Loading metrics" />;
   }
   if (metrics.kind === "error") {
-    return <Err message={metrics.message} />;
+    return <Err message={metrics.message} onRetry={onRetry} />;
   }
   const { summary, hours } = metrics.value;
   const errorRate = fmtRate(summary.s5xx, summary.requests);
   return (
     <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"
-          value={summary.requests.toLocaleString()}
-          pill={halfChange(summary.buckets)}
-          sub="in range"
-        />
-        <StatCard
-          icon={<OverviewIcon size={16} />}
-          label="Visitors"
-          value={summary.visitors.toLocaleString()}
-          sub="daily uniques, summed"
-        />
-        <StatCard
-          icon={<ErrorsIcon size={16} />}
-          label="Error rate"
-          value={errorRate}
-          pill={summary.s5xx > 0 ? `${summary.s5xx.toLocaleString()} 5xx` : null}
-          sub={`${summary.s4xx.toLocaleString()} client errors (4xx)`}
-        />
-        <StatCard
-          icon={<ActionsIcon size={16} />}
-          label="p95 latency"
-          value={`${summary.p95_ms} ms`}
-          pill={`p50 ${summary.p50_ms} ms`}
-          sub="response headers"
-        />
+      <div class="grid min-w-0 grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+        <section class="card card-border bg-base-100 min-w-0" aria-label="Requests">
+          <StatCard
+            icon={<MetricsIcon size={16} />}
+            label="Requests"
+            value={summary.requests.toLocaleString()}
+            pill={halfChange(summary.buckets)}
+            sub="in range"
+          />
+        </section>
+        <section class="card card-border bg-base-100 min-w-0" aria-label="Visitors">
+          <StatCard
+            icon={<OverviewIcon size={16} />}
+            label="Visitors"
+            value={summary.visitors.toLocaleString()}
+            sub="daily uniques, summed"
+          />
+        </section>
+        <section class="card card-border bg-base-100 min-w-0" aria-label="Error rate">
+          <StatCard
+            icon={<ErrorsIcon size={16} />}
+            label="Error rate"
+            value={errorRate}
+            pill={summary.s5xx > 0 ? `${summary.s5xx.toLocaleString()} 5xx` : null}
+            sub={`${summary.s4xx.toLocaleString()} client errors (4xx)`}
+          />
+        </section>
+        <section class="card card-border bg-base-100 min-w-0" aria-label="p95 latency">
+          <StatCard
+            icon={<ActionsIcon size={16} />}
+            label="p95 latency"
+            value={`${summary.p95_ms} ms`}
+            pill={`p50 ${summary.p50_ms} ms`}
+            sub="response headers"
+          />
+        </section>
       </div>
       <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">
@@ -686,9 +761,9 @@ export function MetricsView({
             <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>
+            <EmptyState plain title="No traffic in this range">
+              Requests your app serves will show up here.
+            </EmptyState>
           ) : (
             <Bars buckets={summary.buckets} hours={hours} />
           )}
@@ -700,9 +775,9 @@ export function MetricsView({
             <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>
+            <EmptyState plain title="No paths recorded in this range">
+              Paths your app serves will show up here.
+            </EmptyState>
           ) : (
             <div class="min-w-0 overflow-x-auto">
               <table class="table table-fixed w-full">
@@ -744,19 +819,25 @@ export function MetricsView({
 export function ActionsView({
   panel,
   onMore,
+  onRetry,
 }: {
   panel: ActionsPanel;
   onMore: () => void;
+  onRetry: () => void;
 }) {
   if (panel.kind === "loading") {
     return <Loading label="Loading agent actions" />;
   }
   if (panel.kind === "error") {
-    return <Err message={panel.message} />;
+    return <Err message={panel.message} onRetry={onRetry} />;
   }
   const { actions, next, loadingMore, moreError } = panel.state;
   if (actions.length === 0) {
-    return <Empty>No agent actions yet.</Empty>;
+    return (
+      <EmptyState icon={<ActionsIcon />} title="No agent actions yet">
+        Your agent's tool calls will show up here.
+      </EmptyState>
+    );
   }
   return (
     <section class="card card-border bg-base-100 min-w-0" aria-label="Agent actions">
@@ -834,7 +915,7 @@ export function ActionsView({
 
 function DeployRow({ deploy }: { deploy: ConsoleDeploy }) {
   return (
-    <div class="flex min-w-0 items-center gap-2.5 text-[13px]">
+    <li class="list-row min-w-0 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)}
@@ -848,7 +929,7 @@ function DeployRow({ deploy }: { deploy: ConsoleDeploy }) {
           ? ""
           : `${(deploy.duration_ms / 1000).toFixed(1)}s`}
       </span>
-    </div>
+    </li>
   );
 }
 
@@ -862,7 +943,11 @@ export function DeploysView({
   onToggle: (id: string) => void;
 }) {
   if (app.deploys.length === 0) {
-    return <Empty>No deploys yet.</Empty>;
+    return (
+      <EmptyState icon={<DeploysIcon />} title="No deploys yet">
+        Deploys your agent ships will show up here.
+      </EmptyState>
+    );
   }
   return (
     <div class="flex min-w-0 flex-col gap-3">
@@ -936,15 +1021,17 @@ export function DeploysView({
 export function LogsView({
   panel,
   onRefresh,
+  onRetry,
 }: {
   panel: Panel<LogLine[]>;
   onRefresh: () => void;
+  onRetry: () => void;
 }) {
   if (panel.kind === "loading") {
     return <Loading label="Loading logs" />;
   }
   if (panel.kind === "error") {
-    return <Err message={panel.message} />;
+    return <Err message={panel.message} onRetry={onRetry} />;
   }
   const lines = panel.value;
   return (
@@ -962,9 +1049,9 @@ export function LogsView({
           </button>
         </div>
         {lines.length === 0 ? (
-          <p class="m-0 min-w-0 opacity-60" role="status">
-            No log lines yet.
-          </p>
+          <EmptyState plain icon={<LogsIcon />} title="No log lines yet">
+            Lines your app writes will show up here.
+          </EmptyState>
         ) : (
           <ol class="log-list">
             {lines.map((entry) => (
@@ -990,19 +1077,19 @@ export function LogsView({
 // Ported from Noite's errors.tsx: grouped issues with counts + first/last
 // seen, plus the trailing-hour proxy 5xx count.
 
-export function ErrorsView({ panel }: { panel: Panel<ErrorsSummary> }) {
+export function ErrorsView({ panel, onRetry }: { panel: Panel<ErrorsSummary>; onRetry: () => void }) {
   if (panel.kind === "loading") {
     return <Loading label="Loading errors" />;
   }
   if (panel.kind === "error") {
-    return <Err message={panel.message} />;
+    return <Err message={panel.message} onRetry={onRetry} />;
   }
   const { issues, s5xx_last_hour } = panel.value;
   if (issues.length === 0) {
     return (
-      <Empty>
-        {`No errors recorded.${s5xx_last_hour > 0 ? ` ${s5xx_last_hour} proxy 5xx in the last hour, with no grouped issue.` : ""}`}
-      </Empty>
+      <EmptyState icon={<ErrorsIcon />} title="No errors recorded">
+        {`Grouped runtime errors will show up here.${s5xx_last_hour > 0 ? ` ${s5xx_last_hour} proxy 5xx in the last hour, with no grouped issue.` : ""}`}
+      </EmptyState>
     );
   }
   return (
@@ -1067,12 +1154,12 @@ export function ErrorsView({ panel }: { panel: Panel<ErrorsSummary> }) {
 
 // --- Secrets -------------------------------------------------------------------
 
-export function SecretsView({ panel }: { panel: Panel<SecretsSummary> }) {
+export function SecretsView({ panel, onRetry }: { panel: Panel<SecretsSummary>; onRetry: () => void }) {
   if (panel.kind === "loading") {
     return <Loading label="Loading secrets" />;
   }
   if (panel.kind === "error") {
-    return <Err message={panel.message} />;
+    return <Err message={panel.message} onRetry={onRetry} />;
   }
   const secrets = panel.value.secrets;
   return (
@@ -1087,7 +1174,9 @@ export function SecretsView({ panel }: { panel: Panel<SecretsSummary> }) {
         </div>
       </section>
       {secrets.length === 0 ? (
-        <Empty>No secrets set.</Empty>
+        <EmptyState icon={<SecretsIcon />} title="No secrets set">
+          Your agent manages secret names over MCP; values never leave the server.
+        </EmptyState>
       ) : (
         <section class="card card-border bg-base-100 min-w-0" aria-label="Secrets">
           <div class="card-body min-w-0">
@@ -1235,11 +1324,11 @@ export function InvitesView({
         </div>
       </section>
       {codes.length === 0 ? (
-        <Empty>
+        <EmptyState icon={<TicketIcon />} title="No invite codes">
           {isAdmin
             ? "Admins get no automatic codes — generate some on the Admin page."
-            : "You have no invite codes."}
-        </Empty>
+            : "Codes appear here when you earn or receive them."}
+        </EmptyState>
       ) : (
         <section class="card card-border bg-base-100 min-w-0" aria-label="Your invite codes">
           <div class="card-body min-w-0">
@@ -1474,7 +1563,9 @@ function AdminCodesCard({
           </p>
         )}
         {page.codes.length === 0 ? (
-          <Empty>No codes yet — generate some above.</Empty>
+          <EmptyState plain icon={<TicketIcon />} title="No codes yet">
+            Generate some above to invite new accounts.
+          </EmptyState>
         ) : (
           <div class="min-w-0 overflow-x-auto">
             <table class="table table-fixed w-full max-sm:[&_td]:px-2 max-sm:[&_th]:px-2">
@@ -1591,7 +1682,9 @@ function WaitlistCard({
       <div class="card-body min-w-0">
         <h2 class="card-title m-0 min-w-0 text-base">Waitlist</h2>
         {entries.length === 0 ? (
-          <Empty>Nobody waiting.</Empty>
+          <EmptyState plain title="Nobody waiting">
+            Signups that hit the closed beta land here.
+          </EmptyState>
         ) : (
           <div class="min-w-0 overflow-x-auto">
             <table class="table table-fixed w-full">
diff --git a/web/pages/console/console.css b/web/pages/console/console.css
index 72b0189..d35cfb9 100644
--- a/web/pages/console/console.css
+++ b/web/pages/console/console.css
@@ -8,12 +8,14 @@
    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.
+   panels, near-black primary/neutral, large radii, zero depth/noise so
+   components never cast shadows) 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
+   here is layout glue (the shell grid, rail, sidebar, scrolling main
+   panel, charts, log viewer) plus the rail-tile frame and the status-dot
+   inset. No `style=` attributes anywhere: the console CSP only hashes
    inline scripts/styles, so every size rides on classes or SVG attrs. */
 @import "tailwindcss";
 
@@ -48,13 +50,13 @@
   --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-selector: 0.75rem;
   --radius-field: 0.75rem;
-  --radius-box: 1.25rem;
+  --radius-box: 1.5rem;
   --size-selector: 0.25rem;
   --size-field: 0.25rem;
   --border: 1px;
-  --depth: 1;
+  --depth: 0;
   --noise: 0;
 }
 
@@ -82,13 +84,13 @@
   --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-selector: 0.75rem;
   --radius-field: 0.75rem;
-  --radius-box: 1.25rem;
+  --radius-box: 1.5rem;
   --size-selector: 0.25rem;
   --size-field: 0.25rem;
   --border: 1px;
-  --depth: 1;
+  --depth: 0;
   --noise: 0;
 }
 
@@ -113,13 +115,18 @@ body {
 
 /* --- App frame --------------------------------------------------------- */
 
+/* Shell: rail (64px, transparent, flush left) | sidebar panel | main panel.
+   8px gaps; panels sit 8px in from the viewport top/right/bottom; the rail
+   has 0 left margin. Both panels are full viewport height and scroll
+   internally, so the page itself never scrolls. */
 .console {
   display: grid;
   grid-template-columns: 64px minmax(0, 1fr);
-  gap: 12px;
+  gap: 8px;
   align-items: start;
-  min-height: 100dvh;
-  padding: 12px;
+  height: 100dvh;
+  overflow: hidden;
+  padding: 8px 8px 8px 0;
 }
 
 .skip-link {
@@ -137,26 +144,22 @@ body {
   left: 12px;
 }
 
-:focus-visible {
-  outline: 2px solid var(--color-base-content);
-  outline-offset: 2px;
-  border-radius: 6px;
-}
+/* daisyUI paints its own focus rings; nothing here removes outlines. */
 
-/* --- Rail -------------------------------------------------------------- */
+/* --- Rail (not a panel: icons sit on the gray canvas, flush left) --------- */
 
 .rail {
   position: sticky;
-  top: 12px;
+  top: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
-  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);
+  height: calc(100dvh - 16px);
+  min-height: 0;
+  padding: 2px 0 0;
+  background: transparent;
+  border: none;
   /* `sticky` makes the rail its own stacking context, so its dropdowns and
      tooltips (daisyUI z-index 999/2) only stack inside it. Without a z-index
      the later, positioned cards (`.card` is `position: relative`) paint over
@@ -169,12 +172,20 @@ body {
   flex-direction: column;
   gap: 8px;
   align-items: center;
-  overflow-y: auto;
+  flex: 1 1 auto;
   min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Side padding so focus rings and tile edges never clip: content (44px)
+     plus padding still fits the 64px rail, so scrollWidth stays put. */
+  padding: 2px 10px;
 }
 
+
 /* Rail tiles are daisyUI avatar-placeholders in the islands; `.rail-tile`
-   only carries the tile frame shared by links, buttons and indicators. */
+   only carries the 44px tile frame shared by links, buttons and indicators.
+   The selected tile is a white rounded square; unselected tiles are bare
+   and muted, with a white hover fill (the reference rail). */
 .rail-tile {
   display: inline-flex;
   align-items: center;
@@ -184,7 +195,7 @@ body {
   border: 1px solid transparent;
   border-radius: 14px;
   color: var(--color-base-content);
-  opacity: 0.65;
+  opacity: 0.6;
   cursor: pointer;
   text-decoration: none;
   padding: 0;
@@ -194,33 +205,24 @@ body {
 button.rail-tile:hover,
 a.rail-tile:hover {
   opacity: 1;
+  background: var(--color-base-100);
   border-color: var(--color-base-300);
 }
 
 .rail-tile.is-active {
   opacity: 1;
+  background: var(--color-base-100);
   border-color: var(--color-base-300);
 }
 
-/* App tile tints: deterministic pastel per slug hash (tint-0..7). */
-.tint-0 { background: #e8edf5; color: #33405c; }
-.tint-1 { background: #e9f2ec; color: #2c4f3a; }
-.tint-2 { background: #f5eddf; color: #6b4a1f; }
-.tint-3 { background: #f3e4e4; color: #743333; }
-.tint-4 { background: #ece7f5; color: #4a3670; }
-.tint-5 { background: #e2f0f2; color: #27555c; }
-.tint-6 { background: #f2ecdf; color: #6b5320; }
-.tint-7 { background: #e7ecef; color: #3c4650; }
-
-@media (prefers-color-scheme: dark) {
-  .tint-0 { background: #232c3d; color: #b9c6e2; }
-  .tint-1 { background: #1e3128; color: #a8d4b8; }
-  .tint-2 { background: #382e1c; color: #dcc493; }
-  .tint-3 { background: #3a2222; color: #e0a9a9; }
-  .tint-4 { background: #2c2440; color: #c2b2e8; }
-  .tint-5 { background: #1e3033; color: #a3cfd4; }
-  .tint-6 { background: #35301c; color: #d6c48c; }
-  .tint-7 { background: #262b31; color: #b6c0cb; }
+/* Rail status dots: daisyUI `status` inside `indicator-item`, pinned to the
+   tile's bottom-right INSIDE its bounds (the old outside-corner dot pushed
+   scrollWidth past clientWidth and caused the rail overflow). */
+.rail-dot {
+  --indicator-e: 6px;
+  --indicator-b: 6px;
+  --indicator-x: 0%;
+  --indicator-y: 0%;
 }
 
 .rail-foot {
@@ -249,11 +251,10 @@ a.rail-tile:hover {
   .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);
+    height: calc(100dvh - 16px);
     overflow-y: auto;
     position: sticky;
-    top: 12px;
+    top: 8px;
   }
 }
 
@@ -276,31 +277,37 @@ a.rail-tile:hover {
   min-width: 0;
 }
 
-/* --- Main -------------------------------------------------------------- */
+/* --- Main (the second white panel: title row + cards, scrolls inside) --- */
 
 .main {
   min-width: 0;
   width: 100%;
-  padding: 6px 4px 40px;
+  background: var(--color-base-100);
+  border: 1px solid var(--color-base-300);
+  border-radius: var(--radius-box);
+  height: calc(100dvh - 16px);
+  overflow-y: auto;
+  padding: 20px 20px 40px;
 }
 
 .main-head {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 4px 16px;
+  padding: 0 4px 16px;
   min-width: 0;
 }
 
 .main-title {
   margin: 0;
-  font-size: 21px;
-  font-weight: 700;
+  font-size: 22px;
+  font-weight: 600;
   letter-spacing: -0.01em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
+  flex: 1 1 auto;
 }
 
 .main-body {
@@ -371,9 +378,10 @@ a.rail-tile:hover {
 .console-boot {
   display: grid;
   grid-template-columns: 64px minmax(0, 1fr);
-  gap: 12px;
-  min-height: 100dvh;
-  padding: 12px;
+  gap: 8px;
+  height: 100dvh;
+  overflow: hidden;
+  padding: 8px 8px 8px 0;
 }
 
 .console-error,
@@ -406,18 +414,21 @@ a.rail-tile:hover {
   font-size: 12.5px;
 }
 
-/* --- Mobile (≤ 768px): rail stays, drawer overlays --------------------- */
+/* --- Mobile (< 768px): rail stays flush left, drawer overlays ---------- */
 
-@media (width <= 768px) {
+@media (width < 768px) {
   .console {
     grid-template-columns: 56px minmax(0, 1fr);
-    padding: 8px;
+    padding: 8px 8px 8px 0;
     gap: 8px;
   }
 
   .rail {
-    top: 8px;
-    min-height: calc(100dvh - 16px);
+    height: calc(100dvh - 16px);
+  }
+
+  .rail-apps {
+    padding: 2px 8px;
   }
 
   .rail-tile {
@@ -425,6 +436,10 @@ a.rail-tile:hover {
     height: 40px;
   }
 
+  .main {
+    padding: 16px 12px 32px;
+  }
+
   .console-boot {
     grid-template-columns: 56px minmax(0, 1fr);
   }

From bde943605e8e4c386595005d3e1df08621065dba Mon Sep 17 00:00:00 2001
From: Ryuz <ryuzer@proton.me>
Date: Sun, 25 Oct 2026 11:58:11 +0100
Subject: [PATCH 2/3] Console: sidebar fits the viewport, uppercase section
 titles, one status mark in the header

---
 web/pages/console/_islands/console.tsx | 5 ++---
 web/pages/console/console.css          | 9 ++++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/pages/console/_islands/console.tsx b/web/pages/console/_islands/console.tsx
index aa89f94..1b5957f 100644
--- a/web/pages/console/_islands/console.tsx
+++ b/web/pages/console/_islands/console.tsx
@@ -1002,7 +1002,6 @@ export function Console() {
                     {active.url.replace(/^https?:\/\//, "")}
                   </p>
                 </div>
-                <span class={`status ${statusDot(active.status)} mt-1.5 shrink-0`} title={active.status} aria-label={active.status} />
                 <span class={`badge badge-soft ${statusBadge(active.status)} shrink-0`} title={active.status}>{active.status}</span>
                 <button
                   type="button"
@@ -1015,7 +1014,7 @@ export function Console() {
                 </button>
               </div>
               <ul class="menu w-full min-w-0 gap-0.5 p-0">
-                <li class="menu-title">App</li>
+                <li class="menu-title text-xs font-medium uppercase tracking-wider">App</li>
                 {VIEWS.map((v) => (
                   <li key={v.id} class="min-w-0">
                     <button
@@ -1034,7 +1033,7 @@ export function Console() {
                     </button>
                   </li>
                 ))}
-                <li class="menu-title">Data</li>
+                <li class="menu-title text-xs font-medium uppercase tracking-wider">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">
diff --git a/web/pages/console/console.css b/web/pages/console/console.css
index d35cfb9..f1509df 100644
--- a/web/pages/console/console.css
+++ b/web/pages/console/console.css
@@ -248,13 +248,16 @@ a.rail-tile:hover {
 /* On desktop the open drawer-side is sticky in-flow: full height, own
    border and radius like the reference sidebar panel. */
 @media (width >= 768px) {
+  /* daisyUI makes an open drawer-side 100vh tall; the shell already insets
+     8px top and bottom, so a 100vh column ran past the viewport. */
+  .drawer-side {
+    height: calc(100dvh - 16px);
+  }
   .drawer-side .side {
     border: 1px solid var(--color-base-300);
     border-radius: var(--radius-box);
-    height: calc(100dvh - 16px);
+    height: 100%;
     overflow-y: auto;
-    position: sticky;
-    top: 8px;
   }
 }
 

From dac2eb128ca9005fce8895aed271147074fa5b60 Mon Sep 17 00:00:00 2001
From: Ryuz <ryuzer@proton.me>
Date: Sun, 25 Oct 2026 12:01:05 +0100
Subject: [PATCH 3/3] Console: the requests delta pill says what it compares

---
 web/pages/console/_islands/views.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/pages/console/_islands/views.tsx b/web/pages/console/_islands/views.tsx
index 3110902..1e96983 100644
--- a/web/pages/console/_islands/views.tsx
+++ b/web/pages/console/_islands/views.tsx
@@ -191,12 +191,15 @@ function StatCard({
   label,
   value,
   pill,
+  pillTitle,
   sub,
 }: {
   icon?: unknown;
   label: string;
   value: string;
   pill?: string | null;
+  /** What the pill compares, shown on hover (e.g. the half-range delta). */
+  pillTitle?: string;
   sub?: string;
 }) {
   return (
@@ -208,7 +211,7 @@ function StatCard({
       <div class="stat-value min-w-0 truncate text-3xl font-medium" title={pill ? `${value} ${pill}` : value}>
         {value}
         {pill != null && pill !== "" && (
-          <span class="badge badge-soft badge-sm ml-2 shrink-0 align-middle">{pill}</span>
+          <span class="badge badge-soft badge-sm ml-2 shrink-0 align-middle" title={pillTitle}>{pill}</span>
         )}
       </div>
       {sub && <div class="stat-desc min-w-0 truncate" title={sub}>{sub}</div>}
@@ -644,6 +647,7 @@ function OverviewReady({
             label="Requests"
             value={summary.requests.toLocaleString()}
             pill={halfChange(summary.buckets)}
+            pillTitle="Requests in the second half of the range vs the first half"
             sub="in range"
           />
         </section>
@@ -725,6 +729,7 @@ export function MetricsView({
             label="Requests"
             value={summary.requests.toLocaleString()}
             pill={halfChange(summary.buckets)}
+            pillTitle="Requests in the second half of the range vs the first half"
             sub="in range"
           />
         </section>