From 10ad0caea72e725ef8b37140c18a865ba7646353 Mon Sep 17 00:00:00 2001
From: surenny233 <surenny233@sjtu.edu.cn>
Date: Thu, 7 May 2026 15:20:19 +0800
Subject: [PATCH 1/6] feat(dashboard): mobile-responsive UI for review on
 phones (AUT-54)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reviewers commonly work from phones, but the dashboard was desktop-first
(fixed 220px sidebar, 420px detail drawer, no @media queries, sub-30px
touch targets). Below 768px the layout was unusable.

All changes are scoped behind `@media (max-width: 768px)` plus a couple
of toggle buttons that default to `display: none`, so the desktop layout
is unchanged.

- Nodes: filter sidebar collapses into a slide-in drawer behind a ☰
  Filters button; node detail drawer becomes a fullscreen sheet with a
  sticky id/close header.
- LogViewer: log-list sidebar gets the same slide-in treatment; toolbar
  packs tighter; selecting a log auto-closes the drawer.
- Overview: stats grid drops to 2-up; stale-backlog table converts to
  card list via data-label attributes.
- NodeDetail: review form inputs go to 16px font (suppresses iOS Safari
  auto-zoom on focus); submit button becomes full-width 44px-tall;
  flagsGrid drops to 2 columns.
- Globals: header wraps gracefully; project-badge hides ≤480px; body
  font-size bumped to 14px on mobile for legibility.

svg-pan-zoom 3.6 already supports touch pan/pinch-zoom out of the box —
no JS changes needed for the graph itself, just the chrome around it.
---
 .../src/components/LogEntryLine.module.css    |  6 ++
 .../src/components/NodeDetail.module.css      | 45 +++++++++++
 ui/client/src/styles/global.css               | 17 +++++
 ui/client/src/views/LogViewer.module.css      | 61 +++++++++++++++
 ui/client/src/views/LogViewer.tsx             | 29 ++++++-
 ui/client/src/views/Nodes.module.css          | 75 +++++++++++++++++++
 ui/client/src/views/Nodes.tsx                 | 29 ++++++-
 ui/client/src/views/Overview.module.css       | 46 ++++++++++++
 ui/client/src/views/Overview.tsx              | 10 +--
 9 files changed, 310 insertions(+), 8 deletions(-)

diff --git a/ui/client/src/components/LogEntryLine.module.css b/ui/client/src/components/LogEntryLine.module.css
index 1e161cc..1e1916c 100644
--- a/ui/client/src/components/LogEntryLine.module.css
+++ b/ui/client/src/components/LogEntryLine.module.css
@@ -7,3 +7,9 @@
 .expandable { cursor: pointer; }
 .expandable:hover { color: var(--text-primary); }
 .expandHint { color: var(--text-muted); font-size: 10px; }
+
+@media (max-width: 768px) {
+  .line { gap: 6px; font-size: 12px; }
+  .event { min-width: 60px; font-size: 11px; }
+  .ts { font-size: 11px; }
+}
diff --git a/ui/client/src/components/NodeDetail.module.css b/ui/client/src/components/NodeDetail.module.css
index 74d1f61..a6ff68c 100644
--- a/ui/client/src/components/NodeDetail.module.css
+++ b/ui/client/src/components/NodeDetail.module.css
@@ -320,3 +320,48 @@ details[open] > summary.sectionLabel { margin-bottom: 6px; }
 .runStatus.error { background: rgba(203,36,49,0.12); color: var(--red); }
 .runMeta { color: var(--text-muted); font-size: 10px; margin-top: 2px; font-variant-numeric: tabular-nums; }
 .runHint { color: var(--text-secondary); font-size: 10px; font-family: var(--font-mono); margin-top: 2px; word-break: break-all; }
+
+@media (max-width: 768px) {
+  /* Keep the node id + close button visible while the user scrolls through
+     long Lean source / NL bodies on a small screen. */
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    padding: 12px 12px 8px;
+  }
+  .id { font-size: 14px; }
+
+  .section { padding: 10px 12px; }
+
+  /* Two-column flag grid keeps each cell wide enough to read on a 375px
+     viewport. */
+  .flagsGrid { grid-template-columns: repeat(2, 1fr); }
+
+  /* Stack the "Reviewing as" label + input vertically so the input gets the
+     full row width. */
+  .reviewerLabel {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+  }
+  /* font-size ≥ 16px on the actual <input>/<textarea> stops iOS Safari from
+     auto-zooming when it gains focus. The visual scale is virtually
+     identical to 14px on Android. */
+  .reviewerInput,
+  .reviewCommentBox { font-size: 16px; padding: 8px 10px; }
+
+  .reviewBtn {
+    width: 100%;
+    padding: 12px;
+    font-size: 14px;
+    min-height: 44px;
+  }
+
+  /* Cap the embedded scroll regions to roughly half the viewport so the
+     review form / comments stay reachable without scrolling past a frozen
+     content block. */
+  .rendered { max-height: 50vh; }
+  .leanSource { max-height: 50vh; font-size: 12px; }
+  .excerpt { max-height: 40vh; }
+}
diff --git a/ui/client/src/styles/global.css b/ui/client/src/styles/global.css
index f26f13e..9c939e0 100644
--- a/ui/client/src/styles/global.css
+++ b/ui/client/src/styles/global.css
@@ -72,3 +72,20 @@ select {
   font-size: 12px;
   font-family: var(--font-sans);
 }
+
+@media (max-width: 768px) {
+  body { font-size: 14px; }
+  .header {
+    gap: 8px;
+    padding: 8px 12px;
+    flex-wrap: wrap;
+  }
+  .header h1 { font-size: 13px; }
+  .header-nav { gap: 0; margin-left: auto; }
+  .nav-link { padding: 6px 8px; }
+  .main-content { padding: 12px; }
+}
+
+@media (max-width: 480px) {
+  .project-badge { display: none; }
+}
diff --git a/ui/client/src/views/LogViewer.module.css b/ui/client/src/views/LogViewer.module.css
index 2195d1a..1d19d16 100644
--- a/ui/client/src/views/LogViewer.module.css
+++ b/ui/client/src/views/LogViewer.module.css
@@ -119,3 +119,64 @@
 .summaryText pre { background: var(--bg-tertiary); padding: 8px; border-radius: 4px; overflow-x: auto; font-size: 12px; margin: 4px 0; }
 
 .emptyContent { padding: 32px; text-align: center; color: var(--text-muted); font-size: 12px; }
+
+/* Mobile-only sidebar toggle. Hidden on desktop. */
+.mobileSidebarToggle { display: none; }
+.mobileBackdrop { display: none; }
+
+@media (max-width: 768px) {
+  .root {
+    height: calc(100dvh - 80px);  /* dvh accounts for iOS Safari URL bar */
+    flex-direction: column;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 40px;
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    max-width: 80vw;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    z-index: 20;
+    background: var(--bg-primary);
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
+    min-width: 0;
+  }
+  .sidebar.mobileSidebarOpen { transform: translateX(0); }
+
+  .mobileBackdrop {
+    display: block;
+    position: fixed;
+    top: 40px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.32);
+    z-index: 19;
+  }
+
+  .mobileSidebarToggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 10px;
+    font-size: 14px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-primary);
+    cursor: pointer;
+  }
+
+  .toolbar { padding: 6px 8px; gap: 6px; }
+  .selectedLabel {
+    max-width: 50vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .filterChip { padding: 4px 10px; font-size: 11px; }
+  .count { font-size: 10px; }
+}
diff --git a/ui/client/src/views/LogViewer.tsx b/ui/client/src/views/LogViewer.tsx
index 467f447..af1bd99 100644
--- a/ui/client/src/views/LogViewer.tsx
+++ b/ui/client/src/views/LogViewer.tsx
@@ -79,6 +79,9 @@ function RunSummaryBar({ entries }: { entries: LogEntry[] }) {
 export default function LogViewer() {
   const [selectedFile, setSelectedFile] = useState('');
   const [selectedFilters, setSelectedFilters] = useState<FilterEvent[]>(DEFAULT_FILTERS);
+  // Mobile-only: log-list sidebar collapses into a slide-in drawer behind a
+  // toggle button. Desktop CSS hides the toggle and keeps the sidebar fixed.
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const highlightRef = useRef<HTMLDivElement>(null);
 
   const { data: logsData } = useLogs();
@@ -152,14 +155,27 @@ export default function LogViewer() {
   const showSessionSummary = !!sessionEnd && selectedFilterSet.has('session_end');
   const selectedLabel = selectedFile.replace(/\.jsonl$/, '').replace(/\//g, ' / ');
 
+  // Wrap setSelectedFile so picking a log on mobile auto-closes the drawer.
+  const handleSelectFile = (path: string) => {
+    setSelectedFile(path);
+    setMobileSidebarOpen(false);
+  };
+
   return (
     <div className={styles.root}>
-      <div className={styles.sidebar}>
+      {mobileSidebarOpen && (
+        <div
+          className={styles.mobileBackdrop}
+          onClick={() => setMobileSidebarOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+      <div className={`${styles.sidebar} ${mobileSidebarOpen ? styles.mobileSidebarOpen : ''}`}>
         {Array.from(agentGroups.entries()).map(([agentName, groups]) => (
           <div key={agentName} className={styles.agentSection}>
             <div className={styles.agentHeader}>{agentName}</div>
             {groups.map(g => (
-              <RunGroup key={g.id} group={g} selectedFile={selectedFile} onSelect={setSelectedFile} />
+              <RunGroup key={g.id} group={g} selectedFile={selectedFile} onSelect={handleSelectFile} />
             ))}
           </div>
         ))}
@@ -171,6 +187,15 @@ export default function LogViewer() {
 
       <div className={styles.main}>
         <div className={styles.toolbar}>
+          <button
+            type="button"
+            className={styles.mobileSidebarToggle}
+            onClick={() => setMobileSidebarOpen(v => !v)}
+            aria-expanded={mobileSidebarOpen}
+            aria-label="Toggle log list"
+          >
+            ☰
+          </button>
           <span className={styles.selectedLabel}>{selectedLabel || 'Select a log'}</span>
           <div className={styles.filterBar} aria-label="Event type filters">
             <span className={styles.filterLabel}>Show</span>
diff --git a/ui/client/src/views/Nodes.module.css b/ui/client/src/views/Nodes.module.css
index 2e053d5..e03cfb6 100644
--- a/ui/client/src/views/Nodes.module.css
+++ b/ui/client/src/views/Nodes.module.css
@@ -182,3 +182,78 @@
 .drawerResize:active {
   background: rgba(3, 102, 214, 0.25);
 }
+
+/* Mobile-only filter toggle. Hidden on desktop where the sidebar is
+   permanently docked. */
+.mobileFilterToggle { display: none; }
+.mobileBackdrop { display: none; }
+
+@media (max-width: 768px) {
+  .root { grid-template-columns: 1fr; }
+
+  /* Sidebar transforms into an off-canvas drawer. Anchored below the app
+     header (~40px tall) — adjust if header height changes. */
+  .sidebar {
+    position: fixed;
+    top: 40px;
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    max-width: 80vw;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    z-index: 20;
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
+  }
+  .sidebar.mobileSidebarOpen { transform: translateX(0); }
+
+  .mobileBackdrop {
+    display: block;
+    position: fixed;
+    top: 40px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.32);
+    z-index: 19;
+  }
+
+  .mobileFilterToggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    z-index: 12;
+    padding: 6px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-primary);
+    cursor: pointer;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  }
+
+  /* Larger touch targets for filter chips. */
+  .chip { padding: 6px 12px; font-size: 12px; gap: 6px; }
+  .search { padding: 8px 10px; font-size: 14px; }
+
+  /* Detail drawer becomes a fullscreen sheet. The inline `width: <px>` from
+     React is overridden via !important since @media + specificity alone
+     can't beat an inline style. */
+  .drawer {
+    width: 100% !important;
+    left: 0;
+  }
+  .drawerResize { display: none; }
+
+  .canvasOverlay {
+    font-size: 10px;
+    padding: 4px 8px;
+    bottom: 8px;
+    left: 8px;
+  }
+}
diff --git a/ui/client/src/views/Nodes.tsx b/ui/client/src/views/Nodes.tsx
index 5a2bc98..0dbcc42 100644
--- a/ui/client/src/views/Nodes.tsx
+++ b/ui/client/src/views/Nodes.tsx
@@ -41,6 +41,10 @@ export default function Nodes() {
   const [activeChapters, setActiveChapters] = useState<Set<string>>(() => new Set());
   const [chaptersInit, setChaptersInit] = useState(false);
   const [drawerWidth, setDrawerWidth] = useState<number>(readSavedDrawerWidth);
+  // Mobile-only: filter sidebar collapses into a slide-in drawer behind a
+  // toggle button. Desktop CSS hides the toggle and keeps the sidebar
+  // statically docked, so this state has no visual effect there.
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
 
   // Persist drawer width across page loads.
   useEffect(() => {
@@ -92,6 +96,13 @@ export default function Nodes() {
     if (next !== selectedId) setSelectedId(next);
   }, [routeId, selectedId]);
 
+  // Close mobile filter drawer whenever a node opens — the detail drawer
+  // takes the full screen on mobile and would otherwise overlap the open
+  // filter panel.
+  useEffect(() => {
+    if (selectedId) setMobileSidebarOpen(false);
+  }, [selectedId]);
+
   // Chapter chips render in content.tex order (server returns them already
   // sorted). Don't re-sort here.
   const allChapters = graph?.chapters ?? [];
@@ -263,7 +274,23 @@ export default function Nodes() {
 
   return (
     <div className={`${styles.root} ${selectedId ? styles.drawerOpen : ''}`}>
-      <aside className={styles.sidebar}>
+      <button
+        type="button"
+        className={styles.mobileFilterToggle}
+        onClick={() => setMobileSidebarOpen(v => !v)}
+        aria-expanded={mobileSidebarOpen}
+        aria-label="Toggle filters"
+      >
+        ☰ Filters
+      </button>
+      {mobileSidebarOpen && (
+        <div
+          className={styles.mobileBackdrop}
+          onClick={() => setMobileSidebarOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+      <aside className={`${styles.sidebar} ${mobileSidebarOpen ? styles.mobileSidebarOpen : ''}`}>
         <div className={styles.sidebarTitle}>Search</div>
         <input
           className={styles.search}
diff --git a/ui/client/src/views/Overview.module.css b/ui/client/src/views/Overview.module.css
index 8933929..3efef1b 100644
--- a/ui/client/src/views/Overview.module.css
+++ b/ui/client/src/views/Overview.module.css
@@ -33,3 +33,49 @@
 .table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); }
 .table th { text-align: left; padding: 6px 8px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border); }
 .table td { padding: 6px 8px; color: var(--text-secondary); border-bottom: 1px solid var(--bg-tertiary); }
+
+@media (max-width: 768px) {
+  .root { gap: 16px; max-width: none; }
+
+  /* Stats grid: 2-up on mobile so the values stay readable rather than
+     getting squeezed into a single row. */
+  .statsGrid { gap: 8px; }
+  .stat {
+    flex: 1 1 calc(50% - 8px);
+    min-width: 0;
+    padding: 10px 12px;
+  }
+  .statValue { font-size: 16px; }
+
+  /* Convert the stale table into a card list. Header row hidden; each <tr>
+     becomes a bordered card; each <td> becomes a label/value row whose
+     label comes from data-label set in Overview.tsx. */
+  .table { display: block; font-size: 13px; }
+  .table thead { display: none; }
+  .table tbody { display: block; }
+  .table tr {
+    display: block;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 8px 10px;
+    margin-bottom: 8px;
+    background: var(--bg-secondary);
+  }
+  .table td {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3px 0;
+    border: none;
+    color: var(--text-primary);
+  }
+  .table td::before {
+    content: attr(data-label);
+    color: var(--text-muted);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-family: var(--font-sans);
+    margin-right: 12px;
+  }
+}
diff --git a/ui/client/src/views/Overview.tsx b/ui/client/src/views/Overview.tsx
index 09804bc..8d80afe 100644
--- a/ui/client/src/views/Overview.tsx
+++ b/ui/client/src/views/Overview.tsx
@@ -135,16 +135,16 @@ export default function Overview() {
                   <tr key={n.id}
                       style={{ cursor: 'pointer' }}
                       onClick={() => navigate(`/nodes/${encodeURIComponent(n.id)}`)}>
-                    <td>{n.id}</td>
-                    <td>{n.kind || '—'}</td>
-                    <td>{n.chapter || '—'}</td>
-                    <td>
+                    <td data-label="id">{n.id}</td>
+                    <td data-label="kind">{n.kind || '—'}</td>
+                    <td data-label="chapter">{n.chapter || '—'}</td>
+                    <td data-label="phase">
                       <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                         <span style={{ width: 8, height: 8, borderRadius: '50%', background: PHASE_COLORS[n.phase] }} />
                         {PHASE_LABELS[n.phase]}
                       </span>
                     </td>
-                    <td>{d == null ? '∞' : `${Math.floor(d)}d`}</td>
+                    <td data-label="idle">{d == null ? '∞' : `${Math.floor(d)}d`}</td>
                   </tr>
                 );
               })}

From 05f41b1e5fa2769908ec70cfb301fc8dce3fa68c Mon Sep 17 00:00:00 2001
From: chorewer <1175794600@qq.com>
Date: Thu, 7 May 2026 16:02:41 +0800
Subject: [PATCH 2/6] fix(mobile-ui): address Copilot/Codex review feedback on
 PR #25

- Add --header-height CSS variable; replace all hard-coded top:40px offsets
- Use height:100% in LogViewer root instead of brittle calc(100dvh - 80px)
- Replace aria-hidden div backdrops with semantic <button> elements
- Gate Nodes filter toggle when NodeDetail drawer is open (z-index overlap)
- Use visually-hidden technique for Overview mobile thead (screen reader fix)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 ui/client/src/styles/global.css          |  1 +
 ui/client/src/views/LogViewer.module.css |  8 ++++----
 ui/client/src/views/LogViewer.tsx        |  5 +++--
 ui/client/src/views/Nodes.module.css     |  8 ++++----
 ui/client/src/views/Nodes.tsx            | 25 +++++++++++++-----------
 ui/client/src/views/Overview.module.css  |  9 ++++++++-
 6 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/ui/client/src/styles/global.css b/ui/client/src/styles/global.css
index 9c939e0..4e8e533 100644
--- a/ui/client/src/styles/global.css
+++ b/ui/client/src/styles/global.css
@@ -1,4 +1,5 @@
 :root {
+  --header-height: 40px;
   --bg-primary: #ffffff;
   --bg-secondary: #f8f9fa;
   --bg-tertiary: #f0f1f3;
diff --git a/ui/client/src/views/LogViewer.module.css b/ui/client/src/views/LogViewer.module.css
index 1d19d16..b6dee5b 100644
--- a/ui/client/src/views/LogViewer.module.css
+++ b/ui/client/src/views/LogViewer.module.css
@@ -122,17 +122,17 @@
 
 /* Mobile-only sidebar toggle. Hidden on desktop. */
 .mobileSidebarToggle { display: none; }
-.mobileBackdrop { display: none; }
+.mobileBackdrop { display: none; border: none; padding: 0; }
 
 @media (max-width: 768px) {
   .root {
-    height: calc(100dvh - 80px);  /* dvh accounts for iOS Safari URL bar */
+    height: 100%;
     flex-direction: column;
   }
 
   .sidebar {
     position: fixed;
-    top: 40px;
+    top: var(--header-height);
     left: 0;
     bottom: 0;
     width: 280px;
@@ -149,7 +149,7 @@
   .mobileBackdrop {
     display: block;
     position: fixed;
-    top: 40px;
+    top: var(--header-height);
     left: 0;
     right: 0;
     bottom: 0;
diff --git a/ui/client/src/views/LogViewer.tsx b/ui/client/src/views/LogViewer.tsx
index af1bd99..b94bce2 100644
--- a/ui/client/src/views/LogViewer.tsx
+++ b/ui/client/src/views/LogViewer.tsx
@@ -164,10 +164,11 @@ export default function LogViewer() {
   return (
     <div className={styles.root}>
       {mobileSidebarOpen && (
-        <div
+        <button
+          type="button"
           className={styles.mobileBackdrop}
           onClick={() => setMobileSidebarOpen(false)}
-          aria-hidden="true"
+          aria-label="Close log list"
         />
       )}
       <div className={`${styles.sidebar} ${mobileSidebarOpen ? styles.mobileSidebarOpen : ''}`}>
diff --git a/ui/client/src/views/Nodes.module.css b/ui/client/src/views/Nodes.module.css
index e03cfb6..9e04807 100644
--- a/ui/client/src/views/Nodes.module.css
+++ b/ui/client/src/views/Nodes.module.css
@@ -186,16 +186,16 @@
 /* Mobile-only filter toggle. Hidden on desktop where the sidebar is
    permanently docked. */
 .mobileFilterToggle { display: none; }
-.mobileBackdrop { display: none; }
+.mobileBackdrop { display: none; border: none; padding: 0; }
 
 @media (max-width: 768px) {
   .root { grid-template-columns: 1fr; }
 
   /* Sidebar transforms into an off-canvas drawer. Anchored below the app
-     header (~40px tall) — adjust if header height changes. */
+     header via --header-height. */
   .sidebar {
     position: fixed;
-    top: 40px;
+    top: var(--header-height);
     left: 0;
     bottom: 0;
     width: 280px;
@@ -210,7 +210,7 @@
   .mobileBackdrop {
     display: block;
     position: fixed;
-    top: 40px;
+    top: var(--header-height);
     left: 0;
     right: 0;
     bottom: 0;
diff --git a/ui/client/src/views/Nodes.tsx b/ui/client/src/views/Nodes.tsx
index 0dbcc42..7aa60de 100644
--- a/ui/client/src/views/Nodes.tsx
+++ b/ui/client/src/views/Nodes.tsx
@@ -274,20 +274,23 @@ export default function Nodes() {
 
   return (
     <div className={`${styles.root} ${selectedId ? styles.drawerOpen : ''}`}>
-      <button
-        type="button"
-        className={styles.mobileFilterToggle}
-        onClick={() => setMobileSidebarOpen(v => !v)}
-        aria-expanded={mobileSidebarOpen}
-        aria-label="Toggle filters"
-      >
-        ☰ Filters
-      </button>
+      {!selectedId && (
+        <button
+          type="button"
+          className={styles.mobileFilterToggle}
+          onClick={() => setMobileSidebarOpen(v => !v)}
+          aria-expanded={mobileSidebarOpen}
+          aria-label="Toggle filters"
+        >
+          ☰ Filters
+        </button>
+      )}
       {mobileSidebarOpen && (
-        <div
+        <button
+          type="button"
           className={styles.mobileBackdrop}
           onClick={() => setMobileSidebarOpen(false)}
-          aria-hidden="true"
+          aria-label="Close filters"
         />
       )}
       <aside className={`${styles.sidebar} ${mobileSidebarOpen ? styles.mobileSidebarOpen : ''}`}>
diff --git a/ui/client/src/views/Overview.module.css b/ui/client/src/views/Overview.module.css
index 3efef1b..875e652 100644
--- a/ui/client/src/views/Overview.module.css
+++ b/ui/client/src/views/Overview.module.css
@@ -51,7 +51,14 @@
      becomes a bordered card; each <td> becomes a label/value row whose
      label comes from data-label set in Overview.tsx. */
   .table { display: block; font-size: 13px; }
-  .table thead { display: none; }
+  .table thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
   .table tbody { display: block; }
   .table tr {
     display: block;

From 58b3d239f2064c4d76ce6961e4f3c7fbca0a7fb7 Mon Sep 17 00:00:00 2001
From: chorewer <1175794600@qq.com>
Date: Thu, 7 May 2026 18:11:30 +0800
Subject: [PATCH 3/6] fix(mobile-ui): reset zoom on node open via
 position:fixed drawer

Replace position:absolute with position:fixed for the NodeDetail drawer
on mobile. Fixed elements are positioned relative to the visual viewport,
so they render at 1x scale regardless of any pinch-zoom the user applied
to the graph canvas before tapping a node.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 ui/client/src/views/Nodes.module.css | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/ui/client/src/views/Nodes.module.css b/ui/client/src/views/Nodes.module.css
index 9e04807..e0c5508 100644
--- a/ui/client/src/views/Nodes.module.css
+++ b/ui/client/src/views/Nodes.module.css
@@ -241,12 +241,17 @@
   .chip { padding: 6px 12px; font-size: 12px; gap: 6px; }
   .search { padding: 8px 10px; font-size: 14px; }
 
-  /* Detail drawer becomes a fullscreen sheet. The inline `width: <px>` from
-     React is overridden via !important since @media + specificity alone
-     can't beat an inline style. */
+  /* Detail drawer becomes a fixed fullscreen sheet — position:fixed is
+     relative to the visual viewport so it renders at 1x regardless of any
+     pinch-zoom the user applied to the graph canvas. */
   .drawer {
-    width: 100% !important;
+    position: fixed;
+    top: 0;
     left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100% !important;
+    z-index: 30;
   }
   .drawerResize { display: none; }
 

From 1594a1a7cf8073605dae0b6b8f591097451ff041 Mon Sep 17 00:00:00 2001
From: chorewer <1175794600@qq.com>
Date: Thu, 7 May 2026 18:29:17 +0800
Subject: [PATCH 4/6] fix(mobile-ui): counter-scale drawer via visualViewport
 on pinch-zoom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the user pinch-zooms the page on mobile and then taps a node, the
NodeDetail drawer now uses the visualViewport API to apply an inverse
scale transform — rendering at 1x regardless of the current browser
zoom level. Listens to visualViewport resize/scroll events to stay in
sync if the user zooms while the drawer is open.

Reverts the touch-action:none approach (which broke pinch-zoom entirely)
in favor of letting native zoom work while compensating in the drawer.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 ui/client/src/views/Nodes.tsx | 45 ++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/ui/client/src/views/Nodes.tsx b/ui/client/src/views/Nodes.tsx
index 7aa60de..afd6031 100644
--- a/ui/client/src/views/Nodes.tsx
+++ b/ui/client/src/views/Nodes.tsx
@@ -26,6 +26,7 @@ export default function Nodes() {
   const navigate = useNavigate();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const panZoomRef = useRef<SvgPanZoom.Instance | null>(null);
+  const drawerRef = useRef<HTMLDivElement | null>(null);
   // navigate's reference may not be perfectly stable across renders (or
   // an upstream provider re-render); keep it behind a ref so the SVG mount
   // effect doesn't fire just because navigate's identity changed —
@@ -103,6 +104,48 @@ export default function Nodes() {
     if (selectedId) setMobileSidebarOpen(false);
   }, [selectedId]);
 
+  // On mobile, the user may pinch-zoom the page to read node labels. When
+  // the drawer opens, counter-scale it so it renders at 1x regardless of
+  // the current browser zoom level.
+  useEffect(() => {
+    const el = drawerRef.current;
+    const vv = window.visualViewport;
+    if (!el || !vv || !selectedId) return;
+
+    const sync = () => {
+      const scale = vv.scale;
+      if (scale > 1.05) {
+        el.style.transform = `scale(${1 / scale})`;
+        el.style.transformOrigin = 'top left';
+        el.style.width = `${vv.width * scale}px`;
+        el.style.height = `${vv.height * scale}px`;
+        el.style.left = `${vv.offsetLeft}px`;
+        el.style.top = `${vv.offsetTop}px`;
+      } else {
+        el.style.transform = '';
+        el.style.transformOrigin = '';
+        el.style.width = '';
+        el.style.height = '';
+        el.style.left = '';
+        el.style.top = '';
+      }
+    };
+
+    sync();
+    vv.addEventListener('resize', sync);
+    vv.addEventListener('scroll', sync);
+    return () => {
+      vv.removeEventListener('resize', sync);
+      vv.removeEventListener('scroll', sync);
+      el.style.transform = '';
+      el.style.transformOrigin = '';
+      el.style.width = '';
+      el.style.height = '';
+      el.style.left = '';
+      el.style.top = '';
+    };
+  }, [selectedId]);
+
   // Chapter chips render in content.tex order (server returns them already
   // sorted). Don't re-sort here.
   const allChapters = graph?.chapters ?? [];
@@ -369,7 +412,7 @@ export default function Nodes() {
       </div>
 
       {selectedId && (
-        <div className={styles.drawer} style={{ width: drawerWidth }}>
+        <div className={styles.drawer} ref={drawerRef} style={{ width: drawerWidth }}>
           <div
             className={styles.drawerResize}
             onMouseDown={startDrawerResize}

From e65071e0758dcdeabaa48ea8d8f51f6b09ef31c1 Mon Sep 17 00:00:00 2001
From: chorewer <1175794600@qq.com>
Date: Mon, 11 May 2026 19:01:53 +0800
Subject: [PATCH 5/6] feat(mobile-ui): blueprint mobile adaptation + dashboard
 touch/UX polish (AUT-54)

Blueprint: add mobile.css/mobile.js for TOC drawer, MathJax overflow,
dep-graph pinch-zoom, enlarged touch targets, and bottom-nav adaptation.

Dashboard: bump maxZoom to 50, enlarge close/link/chip touch targets,
disable iOS autocorrect on inputs, add iPhone safe-area support,
move inline styles to CSS classes for Overview phase bar and
NodeDetail close button.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 blueprint/src/mobile.css                      | 233 ++++++++++++++++++
 blueprint/src/mobile.js                       | 164 ++++++++++++
 blueprint/src/plastex.cfg                     |   4 +-
 ui/client/index.html                          |   2 +-
 .../src/components/LogEntryLine.module.css    |   2 +-
 .../src/components/NodeDetail.module.css      |  36 +++
 ui/client/src/components/NodeDetail.tsx       |  10 +-
 .../components/log-details/details.module.css |   9 +
 ui/client/src/styles/global.css               |   2 +-
 ui/client/src/views/LogViewer.module.css      |   6 +-
 ui/client/src/views/Nodes.module.css          |  29 ++-
 ui/client/src/views/Nodes.tsx                 |  13 +-
 ui/client/src/views/Overview.module.css       |   8 +
 ui/client/src/views/Overview.tsx              |   4 +-
 14 files changed, 507 insertions(+), 15 deletions(-)
 create mode 100644 blueprint/src/mobile.css
 create mode 100644 blueprint/src/mobile.js

diff --git a/blueprint/src/mobile.css b/blueprint/src/mobile.css
new file mode 100644
index 0000000..670a987
--- /dev/null
+++ b/blueprint/src/mobile.css
@@ -0,0 +1,233 @@
+/* Blueprint Mobile Responsive — all rules scoped to @media (max-width: 768px) */
+
+/* ── TOC backdrop (injected by mobile.js) ── */
+.mobile-toc-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 99;
+}
+.mobile-toc-backdrop.visible {
+  display: block;
+}
+
+@media (max-width: 768px) {
+
+  /* ── 1. TOC as fixed slide-in overlay ── */
+  nav.toc {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(280px, 80vw);
+    z-index: 100;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    background: #fff;
+    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
+    display: flex !important;
+    flex-direction: column;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-right: 0;
+    padding: 0.5rem;
+    padding-top: 3.5rem;
+    border-right: 1px solid #e0e0e0;
+  }
+  nav.toc.mobile-open {
+    transform: translateX(0);
+  }
+  body.mobile-toc-active {
+    overflow: hidden;
+  }
+
+  /* ── 2. MathJax overflow ── */
+  mjx-container[jax="CHTML"] {
+    overflow-x: auto;
+    max-width: 100%;
+  }
+  mjx-container[jax="CHTML"][display="true"] {
+    overflow-x: auto;
+    max-width: 100%;
+    padding: 4px 0;
+  }
+  div.displaymath {
+    max-width: 100%;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* ── 3. Content area ── */
+  div.content {
+    padding: 0.75rem;
+    margin-bottom: 3rem;
+  }
+  div.content-wrapper {
+    max-width: 100%;
+  }
+  div.content > p {
+    margin: 1rem 0;
+  }
+
+  /* Reduce theorem/proof indentation */
+  div[class$=_thmcontent] {
+    margin-left: 0.25rem;
+    padding-left: 0.5rem;
+  }
+  div.proof_content {
+    margin-left: 0.25rem;
+    padding-left: 0.5rem;
+  }
+
+  /* ── 4. Hover-only elements → always visible on touch ── */
+  div.thm_header_hidden_extras {
+    display: inline-block !important;
+    opacity: 0.6;
+  }
+
+  /* ── 5. Annotation system ── */
+
+  /* Enlarge touch targets (44px Apple HIG minimum) */
+  .annotation-indicator {
+    min-width: 44px;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    font-size: 1rem;
+  }
+
+  /* Float indicator: keep within viewport */
+  .ann-indicator-float {
+    right: 0;
+    position: static;
+    float: right;
+  }
+
+  /* Prevent iOS Safari auto-zoom on focus (font-size >= 16px) */
+  .ann-author-input,
+  .ann-text-input,
+  .ann-edit-textarea {
+    font-size: 16px !important;
+  }
+
+  /* Stack author label + input vertically */
+  .ann-input-row {
+    flex-direction: column;
+    gap: 4px;
+  }
+  .ann-input-row label {
+    min-width: auto;
+  }
+
+  /* Larger submit button */
+  .ann-submit-btn {
+    width: 100%;
+    min-height: 44px;
+    font-size: 1rem;
+  }
+
+  /* Larger action buttons */
+  .ann-actions button {
+    min-height: 36px;
+    padding: 6px 12px;
+    font-size: 0.85rem;
+  }
+
+  /* Toolbar: avoid overlap with fixed bottom nav */
+  #annotation-toolbar {
+    bottom: 3.5rem;
+  }
+  #annotation-toolbar .ann-toolbar-main {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  /* ── 6. Bottom navigation bar ── */
+  nav.prev_up_next {
+    width: 100%;
+    left: 0;
+    justify-content: center;
+    gap: 1rem;
+  }
+  nav.prev_up_next a {
+    padding: 0.5rem 1.5rem;
+  }
+  /* showmore icons in bottom bar */
+  nav.prev_up_next svg.showmore {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0.5rem;
+  }
+
+  /* ── 7. Dependency graph pages ── */
+  div#graph {
+    height: 70vh;
+    touch-action: none;
+    overflow: hidden;
+  }
+
+  /* Node detail modal → full screen */
+  div.dep-modal-container {
+    width: 100vw !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    margin-top: 0 !important;
+    max-height: 100vh;
+    top: 0 !important;
+  }
+  div.dep-modal-content {
+    max-height: calc(100vh - 2rem);
+    border-radius: 0;
+  }
+  button.dep-closebtn {
+    min-width: 44px;
+    min-height: 44px;
+    font-size: 1.5rem;
+  }
+
+  /* Legend: wider on mobile so text is readable */
+  #Legend dl {
+    max-width: 70%;
+    font-size: 100%;
+  }
+
+  /* ── 8. Lean declaration modal ── */
+  div.modal-content {
+    width: 95vw;
+    max-height: 80vh;
+    margin: 10vh auto;
+  }
+  div.modal-content header button.closebtn {
+    min-width: 44px;
+    min-height: 44px;
+    font-size: 1.5rem;
+  }
+
+  /* ── 9. Header ── */
+  body > header {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+  }
+  #toc-toggle {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 10px;
+    cursor: pointer;
+  }
+
+  /* ── 10. Local TOC (in-page) ── */
+  nav.local_toc ul {
+    padding-left: 0.5rem;
+  }
+
+  /* ── 11. Tables: horizontal scroll ── */
+  .tabular {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+} /* end @media (max-width: 768px) */
diff --git a/blueprint/src/mobile.js b/blueprint/src/mobile.js
new file mode 100644
index 0000000..21f9f3c
--- /dev/null
+++ b/blueprint/src/mobile.js
@@ -0,0 +1,164 @@
+/* Blueprint Mobile Enhancements — TOC overlay, dep-graph pan-zoom, MathJax tweaks */
+(function() {
+  'use strict';
+
+  var MOBILE_BREAKPOINT = 768;
+
+  function isMobile() {
+    return window.innerWidth <= MOBILE_BREAKPOINT;
+  }
+
+  /* ── 1. TOC slide-in overlay ──
+   *
+   * Overrides the simple jQuery .toggle() in plastex.js with a proper
+   * slide-in drawer + backdrop. Only activates on narrow screens.
+   */
+  function initTocOverlay($) {
+    if (!isMobile()) return;
+
+    var $toc = $('nav.toc');
+    if (!$toc.length) return;
+
+    // Undo any inline display style that plastex.js .toggle() may have set
+    $toc.css('display', '');
+
+    var $backdrop = $('<div class="mobile-toc-backdrop">');
+    $('body').append($backdrop);
+
+    function openToc() {
+      $toc.addClass('mobile-open');
+      $backdrop.addClass('visible');
+      $('body').addClass('mobile-toc-active');
+    }
+
+    function closeToc() {
+      $toc.removeClass('mobile-open');
+      $backdrop.removeClass('visible');
+      $('body').removeClass('mobile-toc-active');
+    }
+
+    function toggleToc() {
+      if ($toc.hasClass('mobile-open')) {
+        closeToc();
+      } else {
+        openToc();
+      }
+    }
+
+    // Override the plastex.js click handler
+    $('#toc-toggle').off('click').on('click', function(e) {
+      e.stopPropagation();
+      toggleToc();
+    });
+
+    $backdrop.on('click', closeToc);
+
+    // Close after navigating
+    $toc.on('click', 'a', function() {
+      closeToc();
+    });
+
+    // Close on Escape
+    $(document).on('keydown', function(e) {
+      if (e.key === 'Escape' && $toc.hasClass('mobile-open')) {
+        closeToc();
+      }
+    });
+  }
+
+
+  /* ── 2. Dependency graph pan-zoom ──
+   *
+   * Uses d3.zoom (included in the d3 v5 full bundle already loaded by
+   * dep_graph pages) to enable pinch-zoom and pan on the SVG graph.
+   * Works on both desktop (scroll-wheel) and mobile (touch gestures).
+   */
+  function initGraphPanZoom() {
+    var graphEl = document.getElementById('graph');
+    if (!graphEl || typeof d3 === 'undefined' || typeof d3.zoom !== 'function') return;
+
+    var observer = new MutationObserver(function(mutations, obs) {
+      var svg = graphEl.querySelector('svg');
+      if (!svg) return;
+      obs.disconnect();
+      // Small delay to let graphviz finish its post-render callbacks
+      setTimeout(function() { enablePanZoom(svg); }, 200);
+    });
+    observer.observe(graphEl, { childList: true, subtree: true });
+  }
+
+  function enablePanZoom(svgEl) {
+    var svgSel = d3.select(svgEl);
+    var g = svgSel.select('g');
+    if (!g.node()) return;
+
+    var zoom = d3.zoom()
+      .scaleExtent([0.2, 6])
+      .on('zoom', function() {
+        // d3 v5 API: transform is on d3.event, not the callback argument
+        g.attr('transform', d3.event.transform);
+      });
+
+    svgSel.call(zoom);
+
+    // Disable double-click zoom to prevent accidental triggers on mobile
+    svgSel.on('dblclick.zoom', null);
+
+    // Let SVG fill its container instead of using fixed width/height
+    svgEl.removeAttribute('width');
+    svgEl.removeAttribute('height');
+    svgEl.style.width = '100%';
+    svgEl.style.height = '100%';
+
+    // Fit initial view: reset to identity transform
+    var bbox = g.node().getBBox();
+    var containerW = graphEl.clientWidth;
+    var containerH = graphEl.clientHeight;
+    if (bbox.width > 0 && bbox.height > 0 && containerW > 0 && containerH > 0) {
+      var scale = Math.min(
+        containerW / bbox.width,
+        containerH / bbox.height
+      ) * 0.9;
+      var tx = (containerW - bbox.width * scale) / 2 - bbox.x * scale;
+      var ty = (containerH - bbox.height * scale) / 2 - bbox.y * scale;
+      svgSel.call(zoom.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
+    }
+  }
+
+
+  /* ── 3. MathJax mobile tweaks ── */
+  function initMathJaxTweaks() {
+    if (!isMobile()) return;
+
+    // Disable MathJax context menu on mobile (prevents long-press conflicts)
+    if (window.MathJax && window.MathJax.startup && window.MathJax.startup.promise) {
+      window.MathJax.startup.promise.then(function() {
+        try {
+          var opts = MathJax.config.options || {};
+          opts.menuOptions = opts.menuOptions || {};
+          opts.menuOptions.settings = opts.menuOptions.settings || {};
+          opts.menuOptions.settings.zoom = 'None';
+          opts.enableMenu = false;
+        } catch(e) { /* non-critical */ }
+      });
+    }
+  }
+
+
+  /* ── Init ── */
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+
+  function boot() {
+    // jQuery may not be loaded yet on dep_graph pages (different script order)
+    if (typeof jQuery !== 'undefined') {
+      initTocOverlay(jQuery);
+    }
+    initGraphPanZoom();
+    initMathJaxTweaks();
+  }
+
+})();
diff --git a/blueprint/src/plastex.cfg b/blueprint/src/plastex.cfg
index 734aeb7..43c3ba2 100644
--- a/blueprint/src/plastex.cfg
+++ b/blueprint/src/plastex.cfg
@@ -13,8 +13,8 @@ split-level=1
 
 [html5]
 localtoc-level=0
-extra-css=extra_styles.css annotations.css
-extra-js=annotations.js
+extra-css=extra_styles.css annotations.css mobile.css
+extra-js=annotations.js mobile.js
 mathjax-dollars=False
 
 [images]
diff --git a/ui/client/index.html b/ui/client/index.html
index 3c7b7ae..9a97766 100644
--- a/ui/client/index.html
+++ b/ui/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>KIP Dashboard</title>
   </head>
   <body>
diff --git a/ui/client/src/components/LogEntryLine.module.css b/ui/client/src/components/LogEntryLine.module.css
index 1e1916c..c7a8a1f 100644
--- a/ui/client/src/components/LogEntryLine.module.css
+++ b/ui/client/src/components/LogEntryLine.module.css
@@ -9,7 +9,7 @@
 .expandHint { color: var(--text-muted); font-size: 10px; }
 
 @media (max-width: 768px) {
-  .line { gap: 6px; font-size: 12px; }
+  .line { gap: 6px; font-size: 12px; padding: 6px 0; }
   .event { min-width: 60px; font-size: 11px; }
   .ts { font-size: 11px; }
 }
diff --git a/ui/client/src/components/NodeDetail.module.css b/ui/client/src/components/NodeDetail.module.css
index a6ff68c..3877f10 100644
--- a/ui/client/src/components/NodeDetail.module.css
+++ b/ui/client/src/components/NodeDetail.module.css
@@ -321,6 +321,16 @@ details[open] > summary.sectionLabel { margin-bottom: 6px; }
 .runMeta { color: var(--text-muted); font-size: 10px; margin-top: 2px; font-variant-numeric: tabular-nums; }
 .runHint { color: var(--text-secondary); font-size: 10px; font-family: var(--font-mono); margin-top: 2px; word-break: break-all; }
 
+.closeBtn {
+  margin-left: auto;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
 @media (max-width: 768px) {
   /* Keep the node id + close button visible while the user scrolls through
      long Lean source / NL bodies on a small screen. */
@@ -364,4 +374,30 @@ details[open] > summary.sectionLabel { margin-bottom: 6px; }
   .rendered { max-height: 50vh; }
   .leanSource { max-height: 50vh; font-size: 12px; }
   .excerpt { max-height: 40vh; }
+
+  .closeBtn {
+    min-width: 44px;
+    min-height: 44px;
+    font-size: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .refLine { padding: 8px 0; font-size: 13px; }
+  .refLine code { font-size: 12px; }
+
+  summary.sectionLabel { padding: 8px 0; font-size: 11px; }
+
+  .leanRow { flex-direction: column; gap: 2px; }
+  .leanRow .leanVal { word-break: break-all; }
+
+  .commentTopic { font-size: 11px; }
+  .commentMeta { font-size: 12px; }
+  .commentText { font-size: 13px; line-height: 1.5; }
+  .commentItem { padding: 6px 0 6px 10px; }
+
+  .runItem { font-size: 12px; padding: 8px 10px; }
+  .runMeta { font-size: 11px; }
+  .runStatus { font-size: 11px; padding: 2px 7px; }
 }
diff --git a/ui/client/src/components/NodeDetail.tsx b/ui/client/src/components/NodeDetail.tsx
index 08fef4c..c16e798 100644
--- a/ui/client/src/components/NodeDetail.tsx
+++ b/ui/client/src/components/NodeDetail.tsx
@@ -112,7 +112,7 @@ export default function NodeDetail({ nodeId, onClose, onSelectNode }: Props) {
         <div className={styles.header}>
           <div className={styles.idRow}>
             <span className={styles.id}>{nodeId}</span>
-            <button onClick={onClose} style={{ marginLeft: 'auto', cursor: 'pointer', border: 'none', background: 'transparent', fontSize: 16, color: 'var(--text-muted)' }}>×</button>
+            <button className={styles.closeBtn} onClick={onClose} aria-label="Close">×</button>
           </div>
         </div>
         <div className={styles.section}>Node not found in index. Try re-running <code>python tools/kip-state/index.py</code>.</div>
@@ -128,9 +128,7 @@ export default function NodeDetail({ nodeId, onClose, onSelectNode }: Props) {
       <div className={styles.header}>
         <div className={styles.idRow}>
           <span className={styles.id}>{d.id}</span>
-          <button onClick={onClose}
-                  style={{ marginLeft: 'auto', cursor: 'pointer', border: 'none', background: 'transparent', fontSize: 18, color: 'var(--text-muted)', lineHeight: 1 }}
-                  aria-label="Close">×</button>
+          <button className={styles.closeBtn} onClick={onClose} aria-label="Close">×</button>
         </div>
         <div className={styles.subline}>
           {d.kind && <span className={styles.kindChip}>{d.kind}</span>}{' '}
@@ -209,6 +207,10 @@ export default function NodeDetail({ nodeId, onClose, onSelectNode }: Props) {
                   placeholder="your name"
                   value={reviewer}
                   onChange={e => setReviewer(e.target.value)}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck={false}
                 />
               </label>
               <textarea
diff --git a/ui/client/src/components/log-details/details.module.css b/ui/client/src/components/log-details/details.module.css
index 17fd554..59c044d 100644
--- a/ui/client/src/components/log-details/details.module.css
+++ b/ui/client/src/components/log-details/details.module.css
@@ -81,3 +81,12 @@
 }
 .inlineToggleBtn:hover { text-decoration: underline; }
 .expandHint { color: var(--text-muted); font-size: 10px; }
+
+@media (max-width: 768px) {
+  .codeBlock { font-size: 13px; max-height: 50vh; }
+  .bashBlock { font-size: 13px; }
+  .resultBlock { max-height: 40vh; }
+  .jsonTree { font-size: 12px; max-height: 40vh; }
+  .thinkingBlock { max-height: 50vh; }
+  .inlineToggleBtn { font-size: 12px; padding: 4px 6px; min-height: 28px; }
+}
diff --git a/ui/client/src/styles/global.css b/ui/client/src/styles/global.css
index 4e8e533..f0ad052 100644
--- a/ui/client/src/styles/global.css
+++ b/ui/client/src/styles/global.css
@@ -83,7 +83,7 @@ select {
   }
   .header h1 { font-size: 13px; }
   .header-nav { gap: 0; margin-left: auto; }
-  .nav-link { padding: 6px 8px; }
+  .nav-link { padding: 10px 10px; }
   .main-content { padding: 12px; }
 }
 
diff --git a/ui/client/src/views/LogViewer.module.css b/ui/client/src/views/LogViewer.module.css
index b6dee5b..c419577 100644
--- a/ui/client/src/views/LogViewer.module.css
+++ b/ui/client/src/views/LogViewer.module.css
@@ -177,6 +177,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .filterChip { padding: 4px 10px; font-size: 11px; }
+  .filterChip { padding: 6px 12px; font-size: 12px; min-height: 36px; display: inline-flex; align-items: center; }
+  .resetFiltersBtn { padding: 6px 4px; min-height: 36px; display: inline-flex; align-items: center; }
   .count { font-size: 10px; }
+
+  .groupHeader { padding: 10px 12px; font-size: 13px; }
+  .fileItem { padding: 8px 10px 8px 20px; font-size: 12px; min-height: 40px; }
 }
diff --git a/ui/client/src/views/Nodes.module.css b/ui/client/src/views/Nodes.module.css
index e0c5508..10615f5 100644
--- a/ui/client/src/views/Nodes.module.css
+++ b/ui/client/src/views/Nodes.module.css
@@ -76,7 +76,7 @@
   min-height: 0;
   min-width: 0;
 }
-.canvasInner { position: absolute; inset: 0; }
+.canvasInner { position: absolute; inset: 0; touch-action: none; }
 
 /* Server-rendered Graphviz SVG. dot uses different shape elements per node
    kind (ellipse / polygon / path / rect), so the highlight selectors cast a
@@ -183,9 +183,34 @@
   background: rgba(3, 102, 214, 0.25);
 }
 
+.zoomControls {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.zoomControls button {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.92);
+  font-size: 18px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+}
+.zoomControls button:active { background: var(--bg-tertiary); }
+
 /* Mobile-only filter toggle. Hidden on desktop where the sidebar is
    permanently docked. */
 .mobileFilterToggle { display: none; }
+.mobileFilterToggle:active { background: var(--bg-tertiary); box-shadow: none; }
 .mobileBackdrop { display: none; border: none; padding: 0; }
 
 @media (max-width: 768px) {
@@ -252,6 +277,8 @@
     bottom: 0;
     width: 100% !important;
     z-index: 30;
+    padding-top: env(safe-area-inset-top, 0);
+    padding-bottom: env(safe-area-inset-bottom, 0);
   }
   .drawerResize { display: none; }
 
diff --git a/ui/client/src/views/Nodes.tsx b/ui/client/src/views/Nodes.tsx
index afd6031..42b1724 100644
--- a/ui/client/src/views/Nodes.tsx
+++ b/ui/client/src/views/Nodes.tsx
@@ -232,8 +232,8 @@ export default function Nodes() {
       mouseWheelZoomEnabled: true,
       preventMouseEventsDefault: false,
       minZoom: 0.2,
-      maxZoom: 8,
-      zoomScaleSensitivity: 0.4,
+      maxZoom: 50,
+      zoomScaleSensitivity: 0.5,
     });
     if (!isFirstMount && preservedZoom != null && preservedPan) {
       try {
@@ -344,6 +344,10 @@ export default function Nodes() {
           placeholder="id or substring…"
           value={search}
           onChange={e => setSearch(e.target.value)}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
         />
 
         <div className={styles.sidebarTitle}>Phase</div>
@@ -409,6 +413,11 @@ export default function Nodes() {
             <>graph rendered server-side via <code>dot</code> · {totalNodes} nodes total</>
           )}
         </div>
+        <div className={styles.zoomControls}>
+          <button type="button" onClick={() => panZoomRef.current?.zoomIn()} aria-label="Zoom in">+</button>
+          <button type="button" onClick={() => panZoomRef.current?.zoomOut()} aria-label="Zoom out">−</button>
+          <button type="button" onClick={() => { panZoomRef.current?.fit(); panZoomRef.current?.center(); }} aria-label="Fit to view">⤢</button>
+        </div>
       </div>
 
       {selectedId && (
diff --git a/ui/client/src/views/Overview.module.css b/ui/client/src/views/Overview.module.css
index 875e652..9af31ab 100644
--- a/ui/client/src/views/Overview.module.css
+++ b/ui/client/src/views/Overview.module.css
@@ -18,6 +18,9 @@
 
 .empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13px; }
 
+.phaseBar { height: 24px; border-radius: 4px; overflow: hidden; }
+.phaseLegend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--text-muted); }
+
 .statsGrid { display: flex; gap: 16px; flex-wrap: wrap; }
 .stat {
   display: flex; flex-direction: column; align-items: center;
@@ -47,6 +50,9 @@
   }
   .statValue { font-size: 16px; }
 
+  .phaseBar { height: 36px; border-radius: 6px; }
+  .phaseLegend { font-size: 13px; gap: 10px; }
+
   /* Convert the stale table into a card list. Header row hidden; each <tr>
      becomes a bordered card; each <td> becomes a label/value row whose
      label comes from data-label set in Overview.tsx. */
@@ -85,4 +91,6 @@
     font-family: var(--font-sans);
     margin-right: 12px;
   }
+
+  .table tr:active { background: var(--bg-tertiary); }
 }
diff --git a/ui/client/src/views/Overview.tsx b/ui/client/src/views/Overview.tsx
index 8d80afe..313cfa5 100644
--- a/ui/client/src/views/Overview.tsx
+++ b/ui/client/src/views/Overview.tsx
@@ -57,7 +57,7 @@ export default function Overview() {
 
       <div className={styles.section}>
         <div className={styles.sectionLabel}>Phase distribution ({total} nodes)</div>
-        <div style={{ display: 'flex', height: 24, borderRadius: 4, overflow: 'hidden', border: '1px solid var(--border)' }}>
+        <div className={styles.phaseBar} style={{ display: 'flex', border: '1px solid var(--border)' }}>
           {PHASE_ORDER.map(p => {
             const c = phaseCounts[p] || 0;
             const pct = (c / total) * 100;
@@ -74,7 +74,7 @@ export default function Overview() {
             );
           })}
         </div>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8, fontSize: 11, color: 'var(--text-secondary)' }}>
+        <div className={styles.phaseLegend}>
           {PHASE_ORDER.map(p => (
             <span key={p} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
               <span style={{ width: 8, height: 8, borderRadius: '50%', background: PHASE_COLORS[p] }} />

From 00094edd80772469dae5b356daafbfe7090b7d52 Mon Sep 17 00:00:00 2001
From: chorewer <1175794600@qq.com>
Date: Tue, 12 May 2026 15:15:54 +0800
Subject: [PATCH 6/6] fix(mobile-ui): disable dblClick zoom to prevent
 tap-triggered zoom-in (AUT-54)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On mobile, each tap fires touchstart followed by a synthesized mousedown
within <250ms at the same position. svg-pan-zoom misdetects this pair as
a double-click and zooms in on every single tap. Disable dblClickZoomEnabled
to fix; users can still zoom via the +/−/fit buttons.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 ui/client/src/views/Nodes.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/client/src/views/Nodes.tsx b/ui/client/src/views/Nodes.tsx
index 42b1724..cad95e3 100644
--- a/ui/client/src/views/Nodes.tsx
+++ b/ui/client/src/views/Nodes.tsx
@@ -227,6 +227,7 @@ export default function Nodes() {
     panZoomRef.current = svgPanZoom(svgEl, {
       zoomEnabled: true,
       controlIconsEnabled: false,
+      dblClickZoomEnabled: false,
       fit: isFirstMount,
       center: isFirstMount,
       mouseWheelZoomEnabled: true,