From 33d9e6553d1c48e2fce7647af1afcb73fe22f784 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 28 Sep 2026 22:00:09 +0000
Subject: [PATCH 1/2] Phones get the phone layout, and the phone layout gets
 dense
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

KERNEL·A has no phone CSS: on an iPhone its header stacked the toolbar
into a column, the page laid out 534px wide, the footer wrapped into a
tall block, and COPY/CSV covered table headers.

- kernel-agent.html sends touch devices with a phone-sized screen to
  kernel-agent-mobile.html, keeping the query and hash, so example links
  work. ?layout=desktop keeps the desktop layout for the tab, and the app
  menu's KERNEL·A entry uses it. In narrow windows the desktop header
  takes two rows with a sideways-scrolling toolbar, and the footer wraps.
- KERNEL·M's header is one row: brand without the version, notebook,
  status dot (words only while booting, busy or failed), Interrupt while
  busy, and ⋯, which now holds New, Open, Save .ipynb, Save ZIP and
  Restart Python.
- Density: 12.5px code in a 34px gutter, 14px prose, and tighter cells,
  outputs, tables, cell tools, first-run card (keyboard tips hidden),
  toasts, tab bar, sheets and modals. Files and Variables sheets fit
  their contents. On iOS the viewport tag stops focus zoom, so fields
  no longer need 16px type and the code editor matches its overlay.
- On touch screens, output buttons sit in a row under the output. The
  iOS install hint hides itself after nine seconds, and toasts stay
  above it.

tests/e2e/phone.mjs checks all of this at iPhone size: the redirect and
its opt-out, no sideways scroll, a compact header, the ⋯ actions, code
aligned with its highlighting, buttons below tables, and a Files sheet
shorter than the screen. It fails on the previous build.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S9PfSmbaV1CY9ZawtfbiEm
---
 CHANGELOG.md                        |   6 +
 README.md                           |   2 +-
 docs/kernel-agent-mobile.html       | 192 +++++++++++++++++++---------
 docs/kernel-agent.html              |  51 +++++++-
 docs/kernel.html                    |   6 +-
 src/agent/css/agent.css             |   2 +-
 src/agent/css/desktop.css           |  14 ++
 src/agent/css/mobile.css            | 149 +++++++++++++--------
 src/agent/desktop.html              |  20 ++-
 src/agent/js/mobile/controller.js   |   4 +
 src/agent/js/mobile/pwa.js          |   4 +
 src/agent/js/notebook/260-wiring.js |   2 +
 src/agent/mobile.html               |  16 ++-
 src/suite/suite-menu.js             |  13 +-
 tests/e2e/harness.mjs               |  10 +-
 tests/e2e/phone.mjs                 |  49 +++++++
 tests/e2e/run.mjs                   |   5 +-
 tests/e2e/ui.mjs                    |   2 +-
 18 files changed, 412 insertions(+), 135 deletions(-)
 create mode 100644 tests/e2e/phone.mjs

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7130519..ea22f0c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ Notable changes to KERNEL, KERNEL·A (the agent), and KERNEL·M (the phone build
 
 ## [Unreleased]
 
+### Phones
+- Opening KERNEL·A on a phone opens KERNEL·M, the same app laid out for touch, with the same notebooks and the same link parameters, so example links work too. `?layout=desktop` keeps the desktop layout for the tab, and the app menu's KERNEL·A entry uses it.
+- KERNEL·M is denser: a one-row header with every toolbar action under ⋯, 12.5px code in a narrower gutter, and tighter cells, outputs, first-run card and sheets. Files and Variables sheets fit their contents. On iOS the viewport stops focus zoom, so fields no longer need 16px type.
+- On touch screens, COPY, CSV and PNG sit under an output instead of covering it. The iOS install hint hides itself after a few seconds, and toasts stay above it.
+- The desktop layout holds together in narrow windows: the header takes two rows with a sideways-scrolling toolbar, and the footer wraps.
+
 ### Getting started
 - Example links: `kernel-agent.html?example=<name>` opens one of the curated runs in `examples/` with its original outputs, in a new notebook if the current one has work in it. The welcome card has a *See a real agent run* button, and the landing page and README link all four. Fleet DNA reads public data the repository doesn't include, so it links to where to get it.
 - A demo of an agent run at the top of the README and the landing page, recorded by `npm run demo`.
diff --git a/README.md b/README.md
index 44a52b5..246c1fb 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,7 @@ They were captured with KERNEL Agent 2.3.0. The published notebooks keep the vis
 
 ## Use it
 
-**The apps** are single HTML files. Open them from the [live page](https://dogum.github.io/kernel/), download one from [`docs/`](docs/) and open it locally, or put it on any static host. Pyodide downloads about 10 MB on first run and is cached after. Installing KERNEL·M to a home screen and using it offline need https, which GitHub Pages provides.
+**The apps** are single HTML files. Open them from the [live page](https://dogum.github.io/kernel/), download one from [`docs/`](docs/) and open it locally, or put it on any static host. Pyodide downloads about 10 MB on first run and is cached after. Installing KERNEL·M to a home screen and using it offline need https, which GitHub Pages provides. On a phone, KERNEL·A opens as KERNEL·M; add `?layout=desktop` to keep the desktop layout.
 
 **The agent** needs an API key from Anthropic, OpenAI, or xAI; add it in the agent's settings. Keys stay in your browser and requests go straight to the provider (or a compatible gateway you choose).
 
diff --git a/docs/kernel-agent-mobile.html b/docs/kernel-agent-mobile.html
index 77b0566..a37e37b 100644
--- a/docs/kernel-agent-mobile.html
+++ b/docs/kernel-agent-mobile.html
@@ -5,6 +5,14 @@
 <script>try{document.documentElement.dataset.theme=localStorage.getItem("ut-theme")||"light"}catch(e){document.documentElement.dataset.theme="light"}</script>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<script>
+/* iOS Safari zooms into any focused field under 16px. maximum-scale stops that zoom there without blocking pinch zoom,
+   which iOS always allows, so code and chat can use compact type. Other browsers don't zoom on focus. */
+try {
+  if (/iP(hone|ad|od)/.test(navigator.userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1))
+    document.querySelector('meta[name="viewport"]').content += ", maximum-scale=1";
+} catch (e) {}
+</script>
 <meta name="description" content="KERNEL·A — the agentic Python notebook, in a single file. Mobile build: installable and offline-capable.">
 <meta name="theme-color" content="#E9E7E0">
 <meta name="mobile-web-app-capable" content="yes">
@@ -555,7 +563,7 @@
 .out{position:relative}
 .out-acts{position:absolute;top:6px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .12s;z-index:2}
 .out:hover .out-acts,.out:focus-within .out-acts{opacity:1}
-@media (hover:none){.out-acts{opacity:.85}}
+@media (hover:none){.out-acts{position:static;opacity:1;justify-content:flex-end;margin-top:5px}}  /* no hover on touch: a row under the output, never over it */
 .out-acts button{font:600 9.5px var(--mono);letter-spacing:.06em;color:var(--ink-3);background:var(--surface);border:1px solid var(--line-2);border-radius:3px;padding:3px 7px;cursor:pointer}
 .out-acts button:hover{color:var(--accent);border-color:var(--accent)}
 .out.long{max-height:460px}
@@ -689,7 +697,7 @@
 <body>
 <div id="progress" class="progress" aria-hidden="true"></div>
 <header class="topbar">
-  <div class="brand"><h1><button class="brand-btn" id="suiteBtn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="suiteMenu" title="Switch app, project page, theme (Alt+K)"><span class="mark"></span><span class="brand-name">KERNEL<span class="brand-a">·A v2.4.0</span></span><svg class="brand-chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button></h1>
+  <div class="brand"><h1><button class="brand-btn" id="suiteBtn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="suiteMenu" title="Switch app, project page, theme (Alt+K)"><span class="mark"></span><span class="brand-name">KERNEL<span class="brand-a">·A<span class="brand-v"> v2.4.0</span></span></span><svg class="brand-chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button></h1>
     <button class="nb-pill" id="nbTitle" title="Notebooks (switch / rename / new)">
       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M1.8 4.2c0-.6.5-1.1 1.1-1.1h3l1.3 1.4h5c.6 0 1.1.5 1.1 1.1v6.1c0 .6-.5 1.1-1.1 1.1H2.9c-.6 0-1.1-.5-1.1-1.1z"/></svg>
       <span id="nbTitleText">Untitled</span>
@@ -714,6 +722,12 @@
     <div class="menu-wrap">
       <button class="btn btn-chip btn-more" id="btnMore" title="More actions" aria-haspopup="true">⋯</button>
       <div class="menu" id="moreMenu" aria-hidden="true">
+        <button class="menu-item narrow-only" data-mi="newNb">New notebook</button>
+        <button class="menu-item narrow-only" data-mi="openNb">Open .ipynb or .kernel.zip…</button>
+        <button class="menu-item narrow-only" data-mi="saveIpynb">Save .ipynb</button>
+        <button class="menu-item narrow-only" data-mi="saveZip">Save workspace ZIP</button>
+        <div class="menu-sep narrow-only"></div>
+        <button class="menu-item narrow-only" data-mi="restart">Restart Python</button>
         <button class="menu-item" data-mi="restartRun">Restart &amp; run all</button>
         <button class="menu-item" data-mi="splitOut" id="miSplit">Move outputs to panel</button>
         <button class="menu-item" data-mi="collapseAll">Collapse all cells</button>
@@ -6352,6 +6366,8 @@ <h3>Command mode</h3>
   if (a === "newNb") newNotebook();
   else if (a === "openNb") $("#btnOpen").click();
   else if (a === "saveZip") downloadWorkspaceZip();
+  else if (a === "saveIpynb") downloadIpynb();
+  else if (a === "restart") restartKernel();
   else if (a === "restartRun") restartAndRunAll();
   else if (a === "splitOut") setSplitOutputs(!ui.splitOutputs);
   else if (a === "collapseAll") setAllCollapsed(true);
@@ -12987,6 +13003,10 @@ <h3>Command mode</h3>
   else if (mq.addListener) mq.addListener(normalize);
   normalize();
 
+  /* keyboard hints don't apply on a phone */
+  var agIn = el("#agIn");
+  if (agIn && mq.matches) agIn.placeholder = agIn.placeholder.replace(/\s*\(⌘J\)$/, "");
+
   window.__kaMobile = { normalize: normalize, only: only, closeAll: closeAll };
 })();
 })();
@@ -12998,9 +13018,10 @@ <h3>Command mode</h3>
 <div id="suiteMenu" role="menu" aria-label="KERNEL apps"></div>
 <script>
 (function () {
+  // [file, name, description, link when it isn't the file name]
   var SUITE = [
     ["kernel.html", "KERNEL", "The notebook, no agent"],
-    ["kernel-agent.html", "KERNEL·A", "Notebook with an AI agent"],
+    ["kernel-agent.html", "KERNEL·A", "Notebook with an AI agent", "kernel-agent.html?layout=desktop"],
     ["kernel-agent-mobile.html", "KERNEL·M", "The agent, built for phones"],
   ];
   var here = decodeURIComponent(location.pathname.split("/").pop() || "");
@@ -13038,7 +13059,13 @@ <h3>Command mode</h3>
               "</b><span>" +
               t[2] +
               '</span><i aria-hidden="true">✓</i></button>'
-          : '<a class="sm-item" role="menuitem" href="' + t[0] + '"><b>' + t[1] + "</b><span>" + t[2] + "</span></a>";
+          : '<a class="sm-item" role="menuitem" href="' +
+              (t[3] || t[0]) +
+              '"><b>' +
+              t[1] +
+              "</b><span>" +
+              t[2] +
+              "</span></a>";
       }).join("") +
       '<div class="sm-sep" role="separator"></div>' +
       '<a class="sm-item sm-util" role="menuitem" href="index.html"><span>Project page</span><kbd>' +
@@ -13082,7 +13109,7 @@ <h3>Command mode</h3>
   }
   function step(d) {
     var i = cur >= 0 ? (cur + d + SUITE.length) % SUITE.length : 0;
-    location.href = SUITE[i][0];
+    location.href = SUITE[i][3] || SUITE[i][0];
   }
   btn.addEventListener("click", function (e) {
     e.stopPropagation();
@@ -13153,79 +13180,121 @@ <h3>Command mode</h3>
 /* ===== KERNEL·A — mobile + PWA layer (variant only) ===== */
 /* Affordances that only appear on phones; hidden by default. */
 #mob-bar,#mob-scrim,.ms-grab,#pwa-install{display:none}
+.menu-item.narrow-only,.menu-sep.narrow-only{display:none}
 
 @media (max-width:760px){
-  /* code/editor sized to avoid iOS focus-zoom and use the width */
-  :root{--gutter-w:40px; --code-fs:16px; --code-pad-x:12px; --code-pad-y:11px;}
-
-  /* ---- top bar: compact, horizontally scrollable tools ---- */
-  .topbar{gap:8px; padding:8px 10px;}
-  .brand{gap:7px;}
-  .brand h1{font-size:15px; letter-spacing:.10em;}
-  .nb-pill{margin-left:4px; max-width:38vw; padding:4px 7px;}
-  .status{max-width:34vw; font-size:10px; padding:4px 8px;}
-  .toolbar{flex:1 1 auto; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
-           -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:6px; gap:5px; justify-content:flex-start;}
-  .toolbar::-webkit-scrollbar{display:none;}
-  .btn{padding:7px 10px;}
-  #btnAgent,#btnVars{display:none;}            /* covered by the bottom bar */
+  /* Dense by default: compact code and prose, a narrow gutter, tight cards. iOS focus-zoom is stopped in the
+     viewport tag instead of with 16px fields, so fields can match the rest of the type. */
+  :root{--gutter-w:34px; --code-fs:12.5px; --code-lh:1.5; --code-pad-x:9px; --code-pad-y:8px;}
+
+  /* ---- top bar: one row. Brand, notebook, status, interrupt while busy, and every other action in ⋯ ---- */
+  .topbar{gap:6px; padding:6px 8px; padding-top:calc(6px + env(safe-area-inset-top));}
+  .brand{gap:4px; flex:1 1 auto; min-width:0; align-items:center;}
+  .brand h1{font-size:13px; letter-spacing:.08em; flex:0 0 auto;}
+  .brand .mark{width:10px; height:10px; box-shadow:0 0 0 2px var(--accent-ghost);}
+  .brand .brand-v{display:none;}
+  .brand-btn{align-items:center; padding:3px 4px; margin:-3px -4px;}
+  .brand-btn .mark{margin-right:.45em;}
+  .brand-chev{width:10px; height:10px; margin-left:4px;}
+  .nb-pill{flex:0 1 auto; min-width:0; max-width:none; margin-left:2px; padding:4px 7px; font-size:12px; gap:5px;}
+  .status{flex:0 0 auto; max-width:30vw; padding:4px 7px; gap:5px; font-size:10px;}
+  .status[data-s="ok"] #statusText{display:none;}   /* the dot says ready; words only while booting, busy or failed */
+  .toolbar{flex:0 0 auto; margin-left:0; gap:4px; flex-wrap:nowrap;}
+  .toolbar > .btn:not(#btnInterrupt),.toolbar > .tb-sep{display:none;}
+  .btn-more{padding:4px 10px; font-size:13px; line-height:1; align-self:stretch;}
+  .menu{min-width:224px; max-height:calc(100dvh - 120px); overflow:auto;}
+  .menu-item{font-size:13.5px; padding:9px 10px;}
+  .menu-item.narrow-only,.menu-sep.narrow-only{display:block;}
 
   /* ---- notebook canvas ---- */
-  .sheet{padding:14px 10px 112px; background-size:24px 24px;}
-  .notebook{gap:12px;}
-  .add-row{opacity:1; margin:12px auto 8px;}
-  .add-btn{padding:9px 16px;}
+  .sheet{padding:8px 6px 84px; background-size:22px 22px;}
+  .notebook{gap:8px;}
+  .gutter{padding-right:5px; font-size:10px;}
+  .gutter .exec-time{font-size:8px; letter-spacing:0; white-space:nowrap; margin-top:1px;}
+  .cell.md .gutter .exec{font-size:10px;}
+  .md-rendered{font-size:14px; line-height:1.5; padding:3px 10px 5px;}
+  .md-rendered h1{font-size:1.45em;} .md-rendered h2{font-size:1.22em;} .md-rendered h3{font-size:1.08em;}
+  .md-rendered pre{padding:9px 10px;} .md-rendered pre code{font-size:12px;}
+  .md-rendered table{font-size:12.5px;} .md-rendered th,.md-rendered td{padding:4px 7px;}
+  .outputs{padding:2px 0 4px;}
+  .out{padding:6px 9px;}
+  .out-stream pre,.out-text pre,.out-err pre{font-size:11.5px; line-height:1.45;}
+  .out-html{font-size:12.5px;}
+  .out-html table.dataframe{font-size:11px;}
+  .out-html table.dataframe th,.out-html table.dataframe td{padding:3px 6px;}
+  .collapsed-peek{padding:8px 10px !important;}
+  .add-row{opacity:1; margin:8px auto 4px; gap:6px;}
+  .add-btn{padding:6px 12px; font-size:12px;}
   /* the selected cell's tools sit in a row beneath it (no hover on touch), so they never cover code */
   .cell-tools{position:static; display:none; width:max-content; max-width:100%; flex-wrap:wrap; align-self:flex-end;
-              margin:6px 4px 4px auto; opacity:1; transform:none; box-shadow:none;}
+              margin:2px 4px 4px auto; padding:2px; gap:0; opacity:1; transform:none; box-shadow:none;}
   .cell.selected .cell-tools{display:flex; pointer-events:auto;}
+  .ct{width:30px; height:28px;}
+  .ct.type,.ct.ai{height:28px; padding:0 7px;}
   .lib-acts{opacity:1;}                          /* no hover on touch: row actions stay visible */
-  .toast-host{bottom:calc(66px + env(safe-area-inset-bottom)); width:calc(100vw - 24px);}  /* above the tab bar */
-  .toast{max-width:100%;}
-  .ct{width:32px; height:32px;}
-  .ct.type,.ct.ai{height:32px;}
-  .md-rendered{font-size:15.5px;}
   .foot{display:none;}                           /* replaced by the bottom bar */
 
-  /* prevent iOS zoom on focus for every text entry */
-  textarea,input[type=text],input[type=password],input[type=number],input[type=search],input:not([type]){font-size:16px;}
+  /* first-run card: the same choices in half the height; keyboard tips don't apply on a phone */
+  .welcome{padding:12px 12px 12px; margin-bottom:8px;}
+  .welcome h2{font-size:16px; margin-bottom:3px;}
+  .welcome p{font-size:12.5px; line-height:1.45; margin-bottom:10px;}
+  .welcome-acts{gap:6px; margin-bottom:0;}
+  .welcome-acts .btn{padding:6px 10px; font-size:12px;}
+  .welcome .welcome-tip{display:none;}
+
+  /* toasts sit above the tab bar, and above the install hint while it shows */
+  .toast-host{bottom:calc(60px + env(safe-area-inset-bottom)); width:calc(100vw - 24px);}
+  body:has(#pwa-install.on) .toast-host{bottom:calc(112px + env(safe-area-inset-bottom));}
+  .toast{max-width:100%; font-size:12.5px; padding:8px 12px;}
+
+  /* fields: 14px reads well and, with the viewport fix, doesn't trigger iOS zoom */
+  textarea:not(.ta),input[type=text],input[type=password],input[type=number],input[type=search],input:not([type]),select{font-size:14px;}
+  .panel-search input,.var-tools select,.ag-threadbar select{font-size:13px;}
 
   /* ---- side panels become bottom sheets ---- */
   .panel{
     position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
     width:auto !important; max-width:none !important; min-width:0 !important;
-    height:86dvh; max-height:90dvh;
+    height:auto; min-height:38dvh; max-height:86dvh;   /* Files and Variables fit their contents */
     border:1px solid var(--line-2) !important; border-bottom:0 !important;
-    border-radius:16px 16px 0 0;
+    border-radius:14px 14px 0 0;
     box-shadow:0 -20px 60px -24px rgba(0,0,0,.55);
     transform:translateY(112%); visibility:hidden; pointer-events:none;
     transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s linear .32s;
     z-index:120; overscroll-behavior:contain;
-    box-sizing:border-box; padding-bottom:calc(56px + env(safe-area-inset-bottom)); /* clear the bottom bar */
+    box-sizing:border-box; padding-bottom:calc(52px + env(safe-area-inset-bottom)); /* clear the bottom bar */
   }
   .panel.open{transform:none; visibility:visible; pointer-events:auto;
     transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s;}
-  .panel-agent{height:90dvh;}
+  .panel-agent{height:90dvh; max-height:90dvh;}
   .panel-grip{display:none !important;}          /* no edge-resize on touch */
+  .panel-h{padding:8px 12px 6px;}
+  .panel-b{padding:0 8px 10px;}
+  .panel-search{padding:0 12px 7px;}
 
   /* grab handle at the top of each sheet (injected) */
-  .ms-grab{display:flex; align-items:center; justify-content:center; height:22px; flex:0 0 auto; touch-action:none; cursor:grab;}
-  .ms-grab::before{content:""; width:38px; height:4px; border-radius:3px; background:var(--line-2);}
+  .ms-grab{display:flex; align-items:center; justify-content:center; height:18px; flex:0 0 auto; touch-action:none; cursor:grab;}
+  .ms-grab::before{content:""; width:36px; height:4px; border-radius:3px; background:var(--line-2);}
 
   /* sheet internals fit the sheet height */
   .panel-agent .panel-inner{overflow:hidden;}
-  .ag-body{padding:8px 10px 10px;}
-  .ag-composer textarea{min-height:54px;}
-  .ag-row{flex-wrap:nowrap; gap:6px;}             /* one line: the model chip shrinks, SEND stays reachable */
-  .ag-mode,.ag-send,.ag-stop,.ag-model,#agModelChip{padding:9px 12px; font-size:11px;}
+  .ag-body{padding:6px 8px 8px;}
+  .ag-tx{padding:8px; gap:6px;}
+  .ag-u{font-size:13px;} .ag-a{font-size:13px; line-height:1.45;}
+  .ag-composer{margin-top:6px;}
+  .ag-composer textarea{min-height:48px; padding:8px 9px; font-size:14px;}
+  .ag-row{flex-wrap:nowrap; gap:5px;}             /* one line: the model chip shrinks, SEND stays reachable */
+  .ag-mode,.ag-send,.ag-stop,.ag-model,#agModelChip{padding:8px 10px; font-size:10.5px;}
   .ag-mode,.ag-send,.ag-stop{flex:0 0 auto;}
   #agModelChip{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
   .ag-steps{flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap;}
   .ag-usage{flex:1 1 0; min-width:0;}
 
   /* modals: rise from the bottom, full small-screen friendly */
-  .scrim{padding:10px; align-items:flex-end;}
-  .modal{max-height:88dvh; border-radius:14px;}
+  .scrim{padding:8px; align-items:flex-end;}
+  .modal{max-height:88dvh; border-radius:12px;}
+  .modal-h{padding:12px 14px 10px;}
+  .modal-b{padding:12px 14px 16px;}
 
   /* ---- backdrop behind an open sheet ---- */
   #mob-scrim{display:block; position:fixed; inset:0; z-index:110;
@@ -13235,50 +13304,47 @@ <h3>Command mode</h3>
 
   /* ---- bottom navigation bar ---- */
   #mob-bar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:130;
-    height:calc(56px + env(safe-area-inset-bottom));
+    height:calc(52px + env(safe-area-inset-bottom));
     padding:0 6px env(safe-area-inset-bottom);
     background:color-mix(in srgb,var(--paper) 90%,white);
     border-top:1px solid var(--line-2); backdrop-filter:saturate(1.3) blur(10px);
     align-items:stretch; justify-content:space-around;}
-  .mb-btn{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
+  .mb-btn{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
     background:none; border:0; cursor:pointer; color:var(--ink-3);
-    font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;}
+    font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;}
   .mb-btn .mb-ic{display:flex; align-items:center; justify-content:center;}
-  .mb-btn svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
+  .mb-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
   .mb-btn[data-k="run"] svg{fill:currentColor; stroke:none;}
   .mb-btn[data-k="agent"] svg{fill:currentColor; stroke:none;}
   .mb-btn.active{color:var(--accent);}
-  .mb-btn.prime .mb-ic{width:42px; height:28px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line-2));
-    border-radius:9px; background:var(--accent-ghost); color:var(--accent);}
+  .mb-btn.prime .mb-ic{width:40px; height:26px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line-2));
+    border-radius:8px; background:var(--accent-ghost); color:var(--accent);}
   .mb-btn.prime.active .mb-ic{background:var(--accent); color:var(--on-accent);}
   .mb-btn.prime{color:var(--accent);}
 
-  /* nudge the suite dock above the bar so it stays reachable */
-  /* an open sheet owns the bottom of the screen; the dock would cover its composer */
-
-  /* install pill */
+  /* install hint: above the bar, compact */
   #pwa-install{position:fixed; left:50%; transform:translateX(-50%);
-    bottom:calc(68px + env(safe-area-inset-bottom)); z-index:136; display:none;
-    align-items:center; gap:10px; padding:9px 10px 9px 14px;
-    background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line-2)); border-radius:11px;
-    box-shadow:0 14px 36px -16px rgba(0,0,0,.55); font-family:var(--sans); font-size:12.5px; color:var(--ink); max-width:92vw;}
+    bottom:calc(60px + env(safe-area-inset-bottom)); z-index:136; display:none;
+    align-items:center; gap:8px; padding:7px 8px 7px 12px;
+    background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line-2)); border-radius:10px;
+    box-shadow:0 14px 36px -16px rgba(0,0,0,.55); font-family:var(--sans); font-size:12px; color:var(--ink); max-width:92vw;}
   #pwa-install.on{display:flex;}
   #pwa-install b{color:var(--accent); font-weight:700;}
   #pwa-install .pi-go{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
-    color:var(--on-accent); background:var(--accent); border:0; border-radius:7px; padding:8px 12px; cursor:pointer;}
+    color:var(--on-accent); background:var(--accent); border:0; border-radius:7px; padding:7px 11px; cursor:pointer;}
   #pwa-install .pi-x{background:none; border:0; color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer; padding:0 4px;}
 }
 
 /* very small phones */
 @media (max-width:380px){
-  .nb-pill{max-width:30vw;}
-  .status{max-width:28vw;}
+  .status{max-width:24vw;}
   .mb-btn{font-size:8px;}
+  :root{--code-fs:12px;}
 }
 
 /* short landscape phones: taller sheets */
 @media (max-width:900px) and (orientation:landscape) and (max-height:540px){
-  .panel,.panel-agent{height:94dvh;}
+  .panel,.panel-agent{max-height:94dvh;} .panel-agent{height:94dvh;}
 }
 </style>
 <script id="pwa-layer">
@@ -13408,6 +13474,10 @@ <h3>Command mode</h3>
         '<button class="pi-x" aria-label="Dismiss">×</button>';
       pill.classList.add("on");
       pill.querySelector(".pi-x").onclick = dismiss;
+      // a hint, not a banner: it leaves on its own so it never sits over the notebook
+      setTimeout(function () {
+        pill.classList.remove("on");
+      }, 9000);
     }, 1500);
   }
 })();
diff --git a/docs/kernel-agent.html b/docs/kernel-agent.html
index 9e906b6..5a75089 100644
--- a/docs/kernel-agent.html
+++ b/docs/kernel-agent.html
@@ -3,6 +3,24 @@
 <html lang="en">
 <head>
 <script>try{document.documentElement.dataset.theme=localStorage.getItem("ut-theme")||"light"}catch(e){document.documentElement.dataset.theme="light"}</script>
+<script>
+/* Phones get KERNEL·M, the same app laid out for touch (tab bar, bottom sheets), with the same notebooks and the same
+   link parameters. ?layout=desktop keeps this layout for the rest of the tab's session. */
+try {
+  (function () {
+    var q = new URLSearchParams(location.search), key = "kernel.layout";
+    if (q.get("layout") === "desktop") {
+      sessionStorage.setItem(key, "desktop");
+      q.delete("layout");
+      history.replaceState(null, "", location.pathname + (String(q) ? "?" + q : "") + location.hash);
+      return;
+    }
+    if (sessionStorage.getItem(key) === "desktop") return;
+    if (matchMedia("(pointer:coarse)").matches && Math.min(screen.width, screen.height) <= 600)
+      location.replace("kernel-agent-mobile.html" + location.search + location.hash);
+  })();
+} catch (e) {}
+</script>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>KERNEL·A v2.4.0 — durable agentic notebook, in a single file</title>
@@ -549,7 +567,7 @@
 .out{position:relative}
 .out-acts{position:absolute;top:6px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .12s;z-index:2}
 .out:hover .out-acts,.out:focus-within .out-acts{opacity:1}
-@media (hover:none){.out-acts{opacity:.85}}
+@media (hover:none){.out-acts{position:static;opacity:1;justify-content:flex-end;margin-top:5px}}  /* no hover on touch: a row under the output, never over it */
 .out-acts button{font:600 9.5px var(--mono);letter-spacing:.06em;color:var(--ink-3);background:var(--surface);border:1px solid var(--line-2);border-radius:3px;padding:3px 7px;cursor:pointer}
 .out-acts button:hover{color:var(--accent);border-color:var(--accent)}
 .out.long{max-height:460px}
@@ -687,12 +705,26 @@
   .toolbar #btnNew,.toolbar #btnOpen,.toolbar #btnWorkspace,.toolbar #btnClear{display:none}
   .menu-item.narrow-only{display:block}.menu-sep.narrow-only{display:block}
 }
+/* Narrow windows (and ?layout=desktop on a phone): the header takes two rows, with the toolbar scrolling sideways
+   instead of stacking into a column, and the footer wraps. Phones normally get KERNEL·M instead. */
+@media (max-width:760px){
+  .topbar{flex-wrap:wrap; gap:6px 8px; padding:7px 10px}
+  .brand{min-width:0; flex:1 1 auto}
+  .brand .brand-v{display:none}
+  .nb-pill{min-width:0; max-width:none}
+  .toolbar{flex:1 1 100%; flex-wrap:nowrap; justify-content:flex-start; margin-left:0; overflow-x:auto; scrollbar-width:none}
+  .toolbar::-webkit-scrollbar{display:none}
+  .toolbar .menu-wrap{position:static}
+  .toolbar .menu{top:100%; right:8px; margin-top:2px}  /* anchored to the header, so the scrolling toolbar can't clip it */
+  .sheet{padding:12px 8px 96px}
+  .foot{flex-wrap:wrap; gap:3px 12px; padding:5px 10px}
+}
 </style>
 </head>
 <body>
 <div id="progress" class="progress" aria-hidden="true"></div>
 <header class="topbar">
-  <div class="brand"><h1><button class="brand-btn" id="suiteBtn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="suiteMenu" title="Switch app, project page, theme (Alt+K)"><span class="mark"></span><span class="brand-name">KERNEL<span class="brand-a">·A v2.4.0</span></span><svg class="brand-chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button></h1>
+  <div class="brand"><h1><button class="brand-btn" id="suiteBtn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="suiteMenu" title="Switch app, project page, theme (Alt+K)"><span class="mark"></span><span class="brand-name">KERNEL<span class="brand-a">·A<span class="brand-v"> v2.4.0</span></span></span><svg class="brand-chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button></h1>
     <button class="nb-pill" id="nbTitle" title="Notebooks (switch / rename / new)">
       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M1.8 4.2c0-.6.5-1.1 1.1-1.1h3l1.3 1.4h5c.6 0 1.1.5 1.1 1.1v6.1c0 .6-.5 1.1-1.1 1.1H2.9c-.6 0-1.1-.5-1.1-1.1z"/></svg>
       <span id="nbTitleText">Untitled</span>
@@ -6359,6 +6391,8 @@ <h3>Command mode</h3>
   if (a === "newNb") newNotebook();
   else if (a === "openNb") $("#btnOpen").click();
   else if (a === "saveZip") downloadWorkspaceZip();
+  else if (a === "saveIpynb") downloadIpynb();
+  else if (a === "restart") restartKernel();
   else if (a === "restartRun") restartAndRunAll();
   else if (a === "splitOut") setSplitOutputs(!ui.splitOutputs);
   else if (a === "collapseAll") setAllCollapsed(true);
@@ -12746,9 +12780,10 @@ <h3>Command mode</h3>
 <div id="suiteMenu" role="menu" aria-label="KERNEL apps"></div>
 <script>
 (function () {
+  // [file, name, description, link when it isn't the file name]
   var SUITE = [
     ["kernel.html", "KERNEL", "The notebook, no agent"],
-    ["kernel-agent.html", "KERNEL·A", "Notebook with an AI agent"],
+    ["kernel-agent.html", "KERNEL·A", "Notebook with an AI agent", "kernel-agent.html?layout=desktop"],
     ["kernel-agent-mobile.html", "KERNEL·M", "The agent, built for phones"],
   ];
   var here = decodeURIComponent(location.pathname.split("/").pop() || "");
@@ -12786,7 +12821,13 @@ <h3>Command mode</h3>
               "</b><span>" +
               t[2] +
               '</span><i aria-hidden="true">✓</i></button>'
-          : '<a class="sm-item" role="menuitem" href="' + t[0] + '"><b>' + t[1] + "</b><span>" + t[2] + "</span></a>";
+          : '<a class="sm-item" role="menuitem" href="' +
+              (t[3] || t[0]) +
+              '"><b>' +
+              t[1] +
+              "</b><span>" +
+              t[2] +
+              "</span></a>";
       }).join("") +
       '<div class="sm-sep" role="separator"></div>' +
       '<a class="sm-item sm-util" role="menuitem" href="index.html"><span>Project page</span><kbd>' +
@@ -12830,7 +12871,7 @@ <h3>Command mode</h3>
   }
   function step(d) {
     var i = cur >= 0 ? (cur + d + SUITE.length) % SUITE.length : 0;
-    location.href = SUITE[i][0];
+    location.href = SUITE[i][3] || SUITE[i][0];
   }
   btn.addEventListener("click", function (e) {
     e.stopPropagation();
diff --git a/docs/kernel.html b/docs/kernel.html
index bedc938..ea7dc40 100644
--- a/docs/kernel.html
+++ b/docs/kernel.html
@@ -2569,7 +2569,7 @@ <h3>Command mode</h3>
 <div id="suiteMenu" role="menu" aria-label="KERNEL apps"></div>
 <script>
 (function(){
-var SUITE=[["kernel.html","KERNEL","The notebook, no agent"],["kernel-agent.html","KERNEL·A","Notebook with an AI agent"],["kernel-agent-mobile.html","KERNEL·M","The agent, built for phones"]];
+var SUITE=[["kernel.html","KERNEL","The notebook, no agent"],["kernel-agent.html","KERNEL·A","Notebook with an AI agent","kernel-agent.html?layout=desktop"],["kernel-agent-mobile.html","KERNEL·M","The agent, built for phones"]];
 var here=decodeURIComponent(location.pathname.split('/').pop()||'');
 var cur=SUITE.findIndex(function(t){return t[0]===here});
 var mac=/Mac|iPhone|iPad/.test(navigator.platform||navigator.userAgent||'');
@@ -2581,7 +2581,7 @@ <h3>Command mode</h3>
 function paint(focusKey){
   menu.innerHTML='<div class="sm-label">KERNEL apps</div>'+SUITE.map(function(t,i){
     return i===cur?'<button type="button" class="sm-item cur" role="menuitem" aria-current="page" data-sm="close"><b>'+t[1]+'</b><span>'+t[2]+'</span><i aria-hidden="true">✓</i></button>'
-                  :'<a class="sm-item" role="menuitem" href="'+t[0]+'"><b>'+t[1]+'</b><span>'+t[2]+'</span></a>';
+                  :'<a class="sm-item" role="menuitem" href="'+(t[3]||t[0])+'"><b>'+t[1]+'</b><span>'+t[2]+'</span></a>';
   }).join('')+'<div class="sm-sep" role="separator"></div>'
     +'<a class="sm-item sm-util" role="menuitem" href="index.html"><span>Project page</span><kbd>'+hint('I')+'</kbd></a>'
     +'<button type="button" class="sm-item sm-util" role="menuitem" data-sm="theme"><span>'+(document.documentElement.dataset.theme==='dark'?'Light theme':'Dark theme')+'</span><kbd>'+hint('T')+'</kbd></button>';
@@ -2591,7 +2591,7 @@ <h3>Command mode</h3>
 function place(){var r=btn.getBoundingClientRect();menu.style.top=Math.round(r.bottom+8)+'px';menu.style.left=Math.round(Math.max(8,Math.min(r.left-6,innerWidth-menu.offsetWidth-8)))+'px'}
 function open(){paint();menu.classList.add('open');btn.setAttribute('aria-expanded','true');place();var it=items(),f=it.filter(function(x){return !x.classList.contains('cur')})[0]||it[0];if(f)f.focus()}
 function close(refocus){if(!isOpen())return;menu.classList.remove('open');btn.setAttribute('aria-expanded','false');if(refocus)btn.focus()}
-function step(d){var i=cur>=0?(cur+d+SUITE.length)%SUITE.length:0;location.href=SUITE[i][0]}
+function step(d){var i=cur>=0?(cur+d+SUITE.length)%SUITE.length:0;location.href=SUITE[i][3]||SUITE[i][0]}
 btn.addEventListener('click',function(e){e.stopPropagation();isOpen()?close():open()});
 menu.addEventListener('click',function(e){var it=e.target.closest('[data-sm]');if(!it)return;if(it.getAttribute('data-sm')==='theme')flipTheme();else close(true)});
 menu.addEventListener('keydown',function(e){
diff --git a/src/agent/css/agent.css b/src/agent/css/agent.css
index 2e2ed4f..8ed5125 100644
--- a/src/agent/css/agent.css
+++ b/src/agent/css/agent.css
@@ -15,7 +15,7 @@
 .out{position:relative}
 .out-acts{position:absolute;top:6px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .12s;z-index:2}
 .out:hover .out-acts,.out:focus-within .out-acts{opacity:1}
-@media (hover:none){.out-acts{opacity:.85}}
+@media (hover:none){.out-acts{position:static;opacity:1;justify-content:flex-end;margin-top:5px}}  /* no hover on touch: a row under the output, never over it */
 .out-acts button{font:600 9.5px var(--mono);letter-spacing:.06em;color:var(--ink-3);background:var(--surface);border:1px solid var(--line-2);border-radius:3px;padding:3px 7px;cursor:pointer}
 .out-acts button:hover{color:var(--accent);border-color:var(--accent)}
 .out.long{max-height:460px}
diff --git a/src/agent/css/desktop.css b/src/agent/css/desktop.css
index 6f4ca16..dd21e5e 100644
--- a/src/agent/css/desktop.css
+++ b/src/agent/css/desktop.css
@@ -5,3 +5,17 @@
   .toolbar #btnNew,.toolbar #btnOpen,.toolbar #btnWorkspace,.toolbar #btnClear{display:none}
   .menu-item.narrow-only{display:block}.menu-sep.narrow-only{display:block}
 }
+/* Narrow windows (and ?layout=desktop on a phone): the header takes two rows, with the toolbar scrolling sideways
+   instead of stacking into a column, and the footer wraps. Phones normally get KERNEL·M instead. */
+@media (max-width:760px){
+  .topbar{flex-wrap:wrap; gap:6px 8px; padding:7px 10px}
+  .brand{min-width:0; flex:1 1 auto}
+  .brand .brand-v{display:none}
+  .nb-pill{min-width:0; max-width:none}
+  .toolbar{flex:1 1 100%; flex-wrap:nowrap; justify-content:flex-start; margin-left:0; overflow-x:auto; scrollbar-width:none}
+  .toolbar::-webkit-scrollbar{display:none}
+  .toolbar .menu-wrap{position:static}
+  .toolbar .menu{top:100%; right:8px; margin-top:2px}  /* anchored to the header, so the scrolling toolbar can't clip it */
+  .sheet{padding:12px 8px 96px}
+  .foot{flex-wrap:wrap; gap:3px 12px; padding:5px 10px}
+}
diff --git a/src/agent/css/mobile.css b/src/agent/css/mobile.css
index 994c66c..d83226a 100644
--- a/src/agent/css/mobile.css
+++ b/src/agent/css/mobile.css
@@ -1,79 +1,121 @@
 /* ===== KERNEL·A — mobile + PWA layer (variant only) ===== */
 /* Affordances that only appear on phones; hidden by default. */
 #mob-bar,#mob-scrim,.ms-grab,#pwa-install{display:none}
+.menu-item.narrow-only,.menu-sep.narrow-only{display:none}
 
 @media (max-width:760px){
-  /* code/editor sized to avoid iOS focus-zoom and use the width */
-  :root{--gutter-w:40px; --code-fs:16px; --code-pad-x:12px; --code-pad-y:11px;}
+  /* Dense by default: compact code and prose, a narrow gutter, tight cards. iOS focus-zoom is stopped in the
+     viewport tag instead of with 16px fields, so fields can match the rest of the type. */
+  :root{--gutter-w:34px; --code-fs:12.5px; --code-lh:1.5; --code-pad-x:9px; --code-pad-y:8px;}
 
-  /* ---- top bar: compact, horizontally scrollable tools ---- */
-  .topbar{gap:8px; padding:8px 10px;}
-  .brand{gap:7px;}
-  .brand h1{font-size:15px; letter-spacing:.10em;}
-  .nb-pill{margin-left:4px; max-width:38vw; padding:4px 7px;}
-  .status{max-width:34vw; font-size:10px; padding:4px 8px;}
-  .toolbar{flex:1 1 auto; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
-           -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:6px; gap:5px; justify-content:flex-start;}
-  .toolbar::-webkit-scrollbar{display:none;}
-  .btn{padding:7px 10px;}
-  #btnAgent,#btnVars{display:none;}            /* covered by the bottom bar */
+  /* ---- top bar: one row. Brand, notebook, status, interrupt while busy, and every other action in ⋯ ---- */
+  .topbar{gap:6px; padding:6px 8px; padding-top:calc(6px + env(safe-area-inset-top));}
+  .brand{gap:4px; flex:1 1 auto; min-width:0; align-items:center;}
+  .brand h1{font-size:13px; letter-spacing:.08em; flex:0 0 auto;}
+  .brand .mark{width:10px; height:10px; box-shadow:0 0 0 2px var(--accent-ghost);}
+  .brand .brand-v{display:none;}
+  .brand-btn{align-items:center; padding:3px 4px; margin:-3px -4px;}
+  .brand-btn .mark{margin-right:.45em;}
+  .brand-chev{width:10px; height:10px; margin-left:4px;}
+  .nb-pill{flex:0 1 auto; min-width:0; max-width:none; margin-left:2px; padding:4px 7px; font-size:12px; gap:5px;}
+  .status{flex:0 0 auto; max-width:30vw; padding:4px 7px; gap:5px; font-size:10px;}
+  .status[data-s="ok"] #statusText{display:none;}   /* the dot says ready; words only while booting, busy or failed */
+  .toolbar{flex:0 0 auto; margin-left:0; gap:4px; flex-wrap:nowrap;}
+  .toolbar > .btn:not(#btnInterrupt),.toolbar > .tb-sep{display:none;}
+  .btn-more{padding:4px 10px; font-size:13px; line-height:1; align-self:stretch;}
+  .menu{min-width:224px; max-height:calc(100dvh - 120px); overflow:auto;}
+  .menu-item{font-size:13.5px; padding:9px 10px;}
+  .menu-item.narrow-only,.menu-sep.narrow-only{display:block;}
 
   /* ---- notebook canvas ---- */
-  .sheet{padding:14px 10px 112px; background-size:24px 24px;}
-  .notebook{gap:12px;}
-  .add-row{opacity:1; margin:12px auto 8px;}
-  .add-btn{padding:9px 16px;}
+  .sheet{padding:8px 6px 84px; background-size:22px 22px;}
+  .notebook{gap:8px;}
+  .gutter{padding-right:5px; font-size:10px;}
+  .gutter .exec-time{font-size:8px; letter-spacing:0; white-space:nowrap; margin-top:1px;}
+  .cell.md .gutter .exec{font-size:10px;}
+  .md-rendered{font-size:14px; line-height:1.5; padding:3px 10px 5px;}
+  .md-rendered h1{font-size:1.45em;} .md-rendered h2{font-size:1.22em;} .md-rendered h3{font-size:1.08em;}
+  .md-rendered pre{padding:9px 10px;} .md-rendered pre code{font-size:12px;}
+  .md-rendered table{font-size:12.5px;} .md-rendered th,.md-rendered td{padding:4px 7px;}
+  .outputs{padding:2px 0 4px;}
+  .out{padding:6px 9px;}
+  .out-stream pre,.out-text pre,.out-err pre{font-size:11.5px; line-height:1.45;}
+  .out-html{font-size:12.5px;}
+  .out-html table.dataframe{font-size:11px;}
+  .out-html table.dataframe th,.out-html table.dataframe td{padding:3px 6px;}
+  .collapsed-peek{padding:8px 10px !important;}
+  .add-row{opacity:1; margin:8px auto 4px; gap:6px;}
+  .add-btn{padding:6px 12px; font-size:12px;}
   /* the selected cell's tools sit in a row beneath it (no hover on touch), so they never cover code */
   .cell-tools{position:static; display:none; width:max-content; max-width:100%; flex-wrap:wrap; align-self:flex-end;
-              margin:6px 4px 4px auto; opacity:1; transform:none; box-shadow:none;}
+              margin:2px 4px 4px auto; padding:2px; gap:0; opacity:1; transform:none; box-shadow:none;}
   .cell.selected .cell-tools{display:flex; pointer-events:auto;}
+  .ct{width:30px; height:28px;}
+  .ct.type,.ct.ai{height:28px; padding:0 7px;}
   .lib-acts{opacity:1;}                          /* no hover on touch: row actions stay visible */
-  .toast-host{bottom:calc(66px + env(safe-area-inset-bottom)); width:calc(100vw - 24px);}  /* above the tab bar */
-  .toast{max-width:100%;}
-  .ct{width:32px; height:32px;}
-  .ct.type,.ct.ai{height:32px;}
-  .md-rendered{font-size:15.5px;}
   .foot{display:none;}                           /* replaced by the bottom bar */
 
-  /* prevent iOS zoom on focus for every text entry */
-  textarea,input[type=text],input[type=password],input[type=number],input[type=search],input:not([type]){font-size:16px;}
+  /* first-run card: the same choices in half the height; keyboard tips don't apply on a phone */
+  .welcome{padding:12px 12px 12px; margin-bottom:8px;}
+  .welcome h2{font-size:16px; margin-bottom:3px;}
+  .welcome p{font-size:12.5px; line-height:1.45; margin-bottom:10px;}
+  .welcome-acts{gap:6px; margin-bottom:0;}
+  .welcome-acts .btn{padding:6px 10px; font-size:12px;}
+  .welcome .welcome-tip{display:none;}
+
+  /* toasts sit above the tab bar, and above the install hint while it shows */
+  .toast-host{bottom:calc(60px + env(safe-area-inset-bottom)); width:calc(100vw - 24px);}
+  body:has(#pwa-install.on) .toast-host{bottom:calc(112px + env(safe-area-inset-bottom));}
+  .toast{max-width:100%; font-size:12.5px; padding:8px 12px;}
+
+  /* fields: 14px reads well and, with the viewport fix, doesn't trigger iOS zoom */
+  textarea:not(.ta),input[type=text],input[type=password],input[type=number],input[type=search],input:not([type]),select{font-size:14px;}
+  .panel-search input,.var-tools select,.ag-threadbar select{font-size:13px;}
 
   /* ---- side panels become bottom sheets ---- */
   .panel{
     position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
     width:auto !important; max-width:none !important; min-width:0 !important;
-    height:86dvh; max-height:90dvh;
+    height:auto; min-height:38dvh; max-height:86dvh;   /* Files and Variables fit their contents */
     border:1px solid var(--line-2) !important; border-bottom:0 !important;
-    border-radius:16px 16px 0 0;
+    border-radius:14px 14px 0 0;
     box-shadow:0 -20px 60px -24px rgba(0,0,0,.55);
     transform:translateY(112%); visibility:hidden; pointer-events:none;
     transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s linear .32s;
     z-index:120; overscroll-behavior:contain;
-    box-sizing:border-box; padding-bottom:calc(56px + env(safe-area-inset-bottom)); /* clear the bottom bar */
+    box-sizing:border-box; padding-bottom:calc(52px + env(safe-area-inset-bottom)); /* clear the bottom bar */
   }
   .panel.open{transform:none; visibility:visible; pointer-events:auto;
     transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s;}
-  .panel-agent{height:90dvh;}
+  .panel-agent{height:90dvh; max-height:90dvh;}
   .panel-grip{display:none !important;}          /* no edge-resize on touch */
+  .panel-h{padding:8px 12px 6px;}
+  .panel-b{padding:0 8px 10px;}
+  .panel-search{padding:0 12px 7px;}
 
   /* grab handle at the top of each sheet (injected) */
-  .ms-grab{display:flex; align-items:center; justify-content:center; height:22px; flex:0 0 auto; touch-action:none; cursor:grab;}
-  .ms-grab::before{content:""; width:38px; height:4px; border-radius:3px; background:var(--line-2);}
+  .ms-grab{display:flex; align-items:center; justify-content:center; height:18px; flex:0 0 auto; touch-action:none; cursor:grab;}
+  .ms-grab::before{content:""; width:36px; height:4px; border-radius:3px; background:var(--line-2);}
 
   /* sheet internals fit the sheet height */
   .panel-agent .panel-inner{overflow:hidden;}
-  .ag-body{padding:8px 10px 10px;}
-  .ag-composer textarea{min-height:54px;}
-  .ag-row{flex-wrap:nowrap; gap:6px;}             /* one line: the model chip shrinks, SEND stays reachable */
-  .ag-mode,.ag-send,.ag-stop,.ag-model,#agModelChip{padding:9px 12px; font-size:11px;}
+  .ag-body{padding:6px 8px 8px;}
+  .ag-tx{padding:8px; gap:6px;}
+  .ag-u{font-size:13px;} .ag-a{font-size:13px; line-height:1.45;}
+  .ag-composer{margin-top:6px;}
+  .ag-composer textarea{min-height:48px; padding:8px 9px; font-size:14px;}
+  .ag-row{flex-wrap:nowrap; gap:5px;}             /* one line: the model chip shrinks, SEND stays reachable */
+  .ag-mode,.ag-send,.ag-stop,.ag-model,#agModelChip{padding:8px 10px; font-size:10.5px;}
   .ag-mode,.ag-send,.ag-stop{flex:0 0 auto;}
   #agModelChip{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
   .ag-steps{flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap;}
   .ag-usage{flex:1 1 0; min-width:0;}
 
   /* modals: rise from the bottom, full small-screen friendly */
-  .scrim{padding:10px; align-items:flex-end;}
-  .modal{max-height:88dvh; border-radius:14px;}
+  .scrim{padding:8px; align-items:flex-end;}
+  .modal{max-height:88dvh; border-radius:12px;}
+  .modal-h{padding:12px 14px 10px;}
+  .modal-b{padding:12px 14px 16px;}
 
   /* ---- backdrop behind an open sheet ---- */
   #mob-scrim{display:block; position:fixed; inset:0; z-index:110;
@@ -83,48 +125,45 @@
 
   /* ---- bottom navigation bar ---- */
   #mob-bar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:130;
-    height:calc(56px + env(safe-area-inset-bottom));
+    height:calc(52px + env(safe-area-inset-bottom));
     padding:0 6px env(safe-area-inset-bottom);
     background:color-mix(in srgb,var(--paper) 90%,white);
     border-top:1px solid var(--line-2); backdrop-filter:saturate(1.3) blur(10px);
     align-items:stretch; justify-content:space-around;}
-  .mb-btn{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
+  .mb-btn{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
     background:none; border:0; cursor:pointer; color:var(--ink-3);
-    font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;}
+    font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;}
   .mb-btn .mb-ic{display:flex; align-items:center; justify-content:center;}
-  .mb-btn svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
+  .mb-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
   .mb-btn[data-k="run"] svg{fill:currentColor; stroke:none;}
   .mb-btn[data-k="agent"] svg{fill:currentColor; stroke:none;}
   .mb-btn.active{color:var(--accent);}
-  .mb-btn.prime .mb-ic{width:42px; height:28px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line-2));
-    border-radius:9px; background:var(--accent-ghost); color:var(--accent);}
+  .mb-btn.prime .mb-ic{width:40px; height:26px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line-2));
+    border-radius:8px; background:var(--accent-ghost); color:var(--accent);}
   .mb-btn.prime.active .mb-ic{background:var(--accent); color:var(--on-accent);}
   .mb-btn.prime{color:var(--accent);}
 
-  /* nudge the suite dock above the bar so it stays reachable */
-  /* an open sheet owns the bottom of the screen; the dock would cover its composer */
-
-  /* install pill */
+  /* install hint: above the bar, compact */
   #pwa-install{position:fixed; left:50%; transform:translateX(-50%);
-    bottom:calc(68px + env(safe-area-inset-bottom)); z-index:136; display:none;
-    align-items:center; gap:10px; padding:9px 10px 9px 14px;
-    background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line-2)); border-radius:11px;
-    box-shadow:0 14px 36px -16px rgba(0,0,0,.55); font-family:var(--sans); font-size:12.5px; color:var(--ink); max-width:92vw;}
+    bottom:calc(60px + env(safe-area-inset-bottom)); z-index:136; display:none;
+    align-items:center; gap:8px; padding:7px 8px 7px 12px;
+    background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line-2)); border-radius:10px;
+    box-shadow:0 14px 36px -16px rgba(0,0,0,.55); font-family:var(--sans); font-size:12px; color:var(--ink); max-width:92vw;}
   #pwa-install.on{display:flex;}
   #pwa-install b{color:var(--accent); font-weight:700;}
   #pwa-install .pi-go{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
-    color:var(--on-accent); background:var(--accent); border:0; border-radius:7px; padding:8px 12px; cursor:pointer;}
+    color:var(--on-accent); background:var(--accent); border:0; border-radius:7px; padding:7px 11px; cursor:pointer;}
   #pwa-install .pi-x{background:none; border:0; color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer; padding:0 4px;}
 }
 
 /* very small phones */
 @media (max-width:380px){
-  .nb-pill{max-width:30vw;}
-  .status{max-width:28vw;}
+  .status{max-width:24vw;}
   .mb-btn{font-size:8px;}
+  :root{--code-fs:12px;}
 }
 
 /* short landscape phones: taller sheets */
 @media (max-width:900px) and (orientation:landscape) and (max-height:540px){
-  .panel,.panel-agent{height:94dvh;}
+  .panel,.panel-agent{max-height:94dvh;} .panel-agent{height:94dvh;}
 }
diff --git a/src/agent/desktop.html b/src/agent/desktop.html
index b1ad6ec..995d26a 100644
--- a/src/agent/desktop.html
+++ b/src/agent/desktop.html
@@ -3,6 +3,24 @@
 <html lang="en">
 <head>
 <script>try{document.documentElement.dataset.theme=localStorage.getItem("ut-theme")||"light"}catch(e){document.documentElement.dataset.theme="light"}</script>
+<script>
+/* Phones get KERNEL·M, the same app laid out for touch (tab bar, bottom sheets), with the same notebooks and the same
+   link parameters. ?layout=desktop keeps this layout for the rest of the tab's session. */
+try {
+  (function () {
+    var q = new URLSearchParams(location.search), key = "kernel.layout";
+    if (q.get("layout") === "desktop") {
+      sessionStorage.setItem(key, "desktop");
+      q.delete("layout");
+      history.replaceState(null, "", location.pathname + (String(q) ? "?" + q : "") + location.hash);
+      return;
+    }
+    if (sessionStorage.getItem(key) === "desktop") return;
+    if (matchMedia("(pointer:coarse)").matches && Math.min(screen.width, screen.height) <= 600)
+      location.replace("kernel-agent-mobile.html" + location.search + location.hash);
+  })();
+} catch (e) {}
+</script>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>KERNEL·A v%VERSION% — durable agentic notebook, in a single file</title>
@@ -29,7 +47,7 @@
 <body>
 <div id="progress" class="progress" aria-hidden="true"></div>
 <header class="topbar">
-  <div class="brand"><h1><button class="brand-btn" id="suiteBtn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="suiteMenu" title="Switch app, project page, theme (Alt+K)"><span class="mark"></span><span class="brand-name">KERNEL<span class="brand-a">·A v%VERSION%</span></span><svg class="brand-chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button></h1>
+  <div class="brand"><h1><button class="brand-btn" id="suiteBtn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="suiteMenu" title="Switch app, project page, theme (Alt+K)"><span class="mark"></span><span class="brand-name">KERNEL<span class="brand-a">·A<span class="brand-v"> v%VERSION%</span></span></span><svg class="brand-chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button></h1>
     <button class="nb-pill" id="nbTitle" title="Notebooks (switch / rename / new)">
       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M1.8 4.2c0-.6.5-1.1 1.1-1.1h3l1.3 1.4h5c.6 0 1.1.5 1.1 1.1v6.1c0 .6-.5 1.1-1.1 1.1H2.9c-.6 0-1.1-.5-1.1-1.1z"/></svg>
       <span id="nbTitleText">Untitled</span>
diff --git a/src/agent/js/mobile/controller.js b/src/agent/js/mobile/controller.js
index 7103ebd..276db81 100644
--- a/src/agent/js/mobile/controller.js
+++ b/src/agent/js/mobile/controller.js
@@ -255,5 +255,9 @@
   else if (mq.addListener) mq.addListener(normalize);
   normalize();
 
+  /* keyboard hints don't apply on a phone */
+  var agIn = el("#agIn");
+  if (agIn && mq.matches) agIn.placeholder = agIn.placeholder.replace(/\s*\(⌘J\)$/, "");
+
   window.__kaMobile = { normalize: normalize, only: only, closeAll: closeAll };
 })();
diff --git a/src/agent/js/mobile/pwa.js b/src/agent/js/mobile/pwa.js
index 97b391c..19cddcf 100644
--- a/src/agent/js/mobile/pwa.js
+++ b/src/agent/js/mobile/pwa.js
@@ -124,6 +124,10 @@
         '<button class="pi-x" aria-label="Dismiss">×</button>';
       pill.classList.add("on");
       pill.querySelector(".pi-x").onclick = dismiss;
+      // a hint, not a banner: it leaves on its own so it never sits over the notebook
+      setTimeout(function () {
+        pill.classList.remove("on");
+      }, 9000);
     }, 1500);
   }
 })();
diff --git a/src/agent/js/notebook/260-wiring.js b/src/agent/js/notebook/260-wiring.js
index 9090102..187485e 100644
--- a/src/agent/js/notebook/260-wiring.js
+++ b/src/agent/js/notebook/260-wiring.js
@@ -60,6 +60,8 @@ $("#moreMenu").addEventListener("click", (e) => {
   if (a === "newNb") newNotebook();
   else if (a === "openNb") $("#btnOpen").click();
   else if (a === "saveZip") downloadWorkspaceZip();
+  else if (a === "saveIpynb") downloadIpynb();
+  else if (a === "restart") restartKernel();
   else if (a === "restartRun") restartAndRunAll();
   else if (a === "splitOut") setSplitOutputs(!ui.splitOutputs);
   else if (a === "collapseAll") setAllCollapsed(true);
diff --git a/src/agent/mobile.html b/src/agent/mobile.html
index 4d59b5b..d87b7a9 100644
--- a/src/agent/mobile.html
+++ b/src/agent/mobile.html
@@ -5,6 +5,14 @@
 <script>try{document.documentElement.dataset.theme=localStorage.getItem("ut-theme")||"light"}catch(e){document.documentElement.dataset.theme="light"}</script>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<script>
+/* iOS Safari zooms into any focused field under 16px. maximum-scale stops that zoom there without blocking pinch zoom,
+   which iOS always allows, so code and chat can use compact type. Other browsers don't zoom on focus. */
+try {
+  if (/iP(hone|ad|od)/.test(navigator.userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1))
+    document.querySelector('meta[name="viewport"]').content += ", maximum-scale=1";
+} catch (e) {}
+</script>
 <meta name="description" content="KERNEL·A — the agentic Python notebook, in a single file. Mobile build: installable and offline-capable.">
 <meta name="theme-color" content="#E9E7E0">
 <meta name="mobile-web-app-capable" content="yes">
@@ -32,7 +40,7 @@
 <body>
 <div id="progress" class="progress" aria-hidden="true"></div>
 <header class="topbar">
-  <div class="brand"><h1><button class="brand-btn" id="suiteBtn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="suiteMenu" title="Switch app, project page, theme (Alt+K)"><span class="mark"></span><span class="brand-name">KERNEL<span class="brand-a">·A v%VERSION%</span></span><svg class="brand-chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button></h1>
+  <div class="brand"><h1><button class="brand-btn" id="suiteBtn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="suiteMenu" title="Switch app, project page, theme (Alt+K)"><span class="mark"></span><span class="brand-name">KERNEL<span class="brand-a">·A<span class="brand-v"> v%VERSION%</span></span></span><svg class="brand-chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button></h1>
     <button class="nb-pill" id="nbTitle" title="Notebooks (switch / rename / new)">
       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M1.8 4.2c0-.6.5-1.1 1.1-1.1h3l1.3 1.4h5c.6 0 1.1.5 1.1 1.1v6.1c0 .6-.5 1.1-1.1 1.1H2.9c-.6 0-1.1-.5-1.1-1.1z"/></svg>
       <span id="nbTitleText">Untitled</span>
@@ -57,6 +65,12 @@
     <div class="menu-wrap">
       <button class="btn btn-chip btn-more" id="btnMore" title="More actions" aria-haspopup="true">⋯</button>
       <div class="menu" id="moreMenu" aria-hidden="true">
+        <button class="menu-item narrow-only" data-mi="newNb">New notebook</button>
+        <button class="menu-item narrow-only" data-mi="openNb">Open .ipynb or .kernel.zip…</button>
+        <button class="menu-item narrow-only" data-mi="saveIpynb">Save .ipynb</button>
+        <button class="menu-item narrow-only" data-mi="saveZip">Save workspace ZIP</button>
+        <div class="menu-sep narrow-only"></div>
+        <button class="menu-item narrow-only" data-mi="restart">Restart Python</button>
         <button class="menu-item" data-mi="restartRun">Restart &amp; run all</button>
         <button class="menu-item" data-mi="splitOut" id="miSplit">Move outputs to panel</button>
         <button class="menu-item" data-mi="collapseAll">Collapse all cells</button>
diff --git a/src/suite/suite-menu.js b/src/suite/suite-menu.js
index 80eeb7d..974ab83 100644
--- a/src/suite/suite-menu.js
+++ b/src/suite/suite-menu.js
@@ -1,7 +1,8 @@
 (function () {
+  // [file, name, description, link when it isn't the file name]
   var SUITE = [
     ["kernel.html", "KERNEL", "The notebook, no agent"],
-    ["kernel-agent.html", "KERNEL·A", "Notebook with an AI agent"],
+    ["kernel-agent.html", "KERNEL·A", "Notebook with an AI agent", "kernel-agent.html?layout=desktop"],
     ["kernel-agent-mobile.html", "KERNEL·M", "The agent, built for phones"],
   ];
   var here = decodeURIComponent(location.pathname.split("/").pop() || "");
@@ -39,7 +40,13 @@
               "</b><span>" +
               t[2] +
               '</span><i aria-hidden="true">✓</i></button>'
-          : '<a class="sm-item" role="menuitem" href="' + t[0] + '"><b>' + t[1] + "</b><span>" + t[2] + "</span></a>";
+          : '<a class="sm-item" role="menuitem" href="' +
+              (t[3] || t[0]) +
+              '"><b>' +
+              t[1] +
+              "</b><span>" +
+              t[2] +
+              "</span></a>";
       }).join("") +
       '<div class="sm-sep" role="separator"></div>' +
       '<a class="sm-item sm-util" role="menuitem" href="index.html"><span>Project page</span><kbd>' +
@@ -83,7 +90,7 @@
   }
   function step(d) {
     var i = cur >= 0 ? (cur + d + SUITE.length) % SUITE.length : 0;
-    location.href = SUITE[i][0];
+    location.href = SUITE[i][3] || SUITE[i][0];
   }
   btn.addEventListener("click", function (e) {
     e.stopPropagation();
diff --git a/tests/e2e/harness.mjs b/tests/e2e/harness.mjs
index 4fd5a09..b2b3c96 100644
--- a/tests/e2e/harness.mjs
+++ b/tests/e2e/harness.mjs
@@ -59,9 +59,15 @@ async function localExample(route) {
   return route.fulfill({ status: 200, headers: { 'content-type': 'text/plain; charset=utf-8', 'access-control-allow-origin': '*' }, body: fs.readFileSync(file) });
 }
 
-export async function newContext(browser, mocks = []) {
+// A phone as the layout tests see it: iPhone 14 size, touch, and a mobile Safari user agent.
+export const PHONE = {
+  viewport: { width: 390, height: 844 }, deviceScaleFactor: 3, isMobile: true, hasTouch: true,
+  userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Mobile/15E148 Safari/604.1',
+};
+
+export async function newContext(browser, mocks = [], options = {}) {
   // The PWA service worker's own network fetches bypass Playwright routing (and this sandbox's TLS proxy), so tests block it.
-  const context = await browser.newContext({ serviceWorkers: 'block' });
+  const context = await browser.newContext({ serviceWorkers: 'block', ...options });
   for (const [pattern, handler] of mocks) await context.route(pattern, handler);
   await context.route(/^https:\/\/(cdn\.jsdelivr\.net|pypi\.org|files\.pythonhosted\.org|fonts\.googleapis\.com|fonts\.gstatic\.com)\//, passthrough);
   await context.route(/^https:\/\/raw\.githubusercontent\.com\/dogum\/kernel\/main\/examples\//, localExample);
diff --git a/tests/e2e/phone.mjs b/tests/e2e/phone.mjs
new file mode 100644
index 0000000..bc6696a
--- /dev/null
+++ b/tests/e2e/phone.mjs
@@ -0,0 +1,49 @@
+// Phone layout: a phone opening KERNEL·A lands on KERNEL·M, and the phone page fits the screen, keeps a one-row
+// header, reaches every toolbar action from ⋯, and lines the code editor up with its highlighting.
+import assert from 'node:assert/strict';
+import { staticServer, launch, newContext, openApp, k, kAsync, PHONE } from './harness.mjs';
+const srv = await staticServer(8765);
+const { browser } = await launch();
+const fits = (page) => page.evaluate(() => document.documentElement.scrollWidth <= innerWidth);
+
+// 1. KERNEL·A on a phone becomes KERNEL·M, with the link's parameters intact
+const phone = await newContext(browser, [], PHONE);
+const linked = await openApp(phone, 'kernel-agent.html?example=lunar-settlement');
+assert.equal(await linked.evaluate(() => location.pathname.split('/').pop()), 'kernel-agent-mobile.html', 'a phone opening KERNEL·A gets the phone layout');
+await linked.waitForFunction(() => window.__k(`nbName === 'lunar-settlement'`), null, { timeout: 60000 });
+assert.ok(await fits(linked), 'the phone page never scrolls sideways');
+assert.ok((await linked.evaluate(() => document.querySelector('.topbar').getBoundingClientRect().height)) <= 52, 'the phone header is one compact row');
+assert.match(await linked.evaluate(() => document.querySelector('meta[name="viewport"]').content), /maximum-scale=1/, 'iOS keeps compact fields without zooming on focus');
+
+// 2. ⋯ holds the toolbar's actions on a phone
+await linked.click('#btnMore');
+const items = await linked.evaluate(() => [...document.querySelectorAll('#moreMenu .menu-item')].filter((b) => b.offsetParent).map((b) => b.dataset.mi));
+for (const mi of ['newNb', 'openNb', 'saveIpynb', 'saveZip', 'restart', 'clearOutputs']) assert.ok(items.includes(mi), `the ⋯ menu offers ${mi}`);
+const routed = await kAsync(linked, `const realSave = downloadIpynb, realRestart = restartKernel; const hits = []; downloadIpynb = () => hits.push('save'); restartKernel = () => hits.push('restart'); try { document.querySelector('[data-mi="saveIpynb"]').click(); document.querySelector('#btnMore').click(); document.querySelector('[data-mi="restart"]').click(); } finally { downloadIpynb = realSave; restartKernel = realRestart; } return hits`);
+assert.deepEqual(routed, ['save', 'restart'], 'the phone menu items run their actions');
+
+// 3. compact code still lines up with its highlighting, and table buttons sit below the table
+const c = await kAsync(linked, `const c = insertCell(cells.length, 'code', false); c.source = 'import pandas as pd\\npd.DataFrame({"a": range(3), "b": list("xyz")})'; c.taEl.value = c.source; await runCell(c); const ta = getComputedStyle(c.taEl), hl = getComputedStyle(c.el.querySelector('.hl')); const table = c.el.querySelector('.out table'), acts = c.el.querySelector('.out-acts'); return { font: [ta.fontSize, ta.lineHeight] + '' === [hl.fontSize, hl.lineHeight] + '', size: parseFloat(hl.fontSize), below: !!(table && acts) && acts.getBoundingClientRect().top >= table.getBoundingClientRect().bottom }`);
+assert.deepEqual(c, { font: true, size: 12.5, below: true }, 'code is compact and aligned, and COPY/CSV never cover a table');
+assert.ok(await fits(linked), 'a notebook with outputs still fits the screen');
+
+// 4. sheets fit their contents
+await k(linked, `window.__kaMobile.only('left')`);
+await linked.waitForTimeout(450);
+const sheet = await linked.evaluate(() => ({ h: document.querySelector('#leftPanel').getBoundingClientRect().height, vh: innerHeight }));
+assert.ok(sheet.h < sheet.vh * 0.86, 'a short Files sheet is shorter than the screen');
+await k(linked, `window.__kaMobile.closeAll()`);
+await phone.close();
+
+// 5. ?layout=desktop keeps KERNEL·A on a phone, for the tab, and it still fits the screen
+const kept = await newContext(browser, [], PHONE);
+const desk = await openApp(kept, 'kernel-agent.html?layout=desktop');
+assert.deepEqual(await desk.evaluate(() => [location.pathname.split('/').pop(), location.search, sessionStorage.getItem('kernel.layout')]), ['kernel-agent.html', '', 'desktop'], 'layout=desktop keeps this page and drops the parameter');
+assert.ok(await fits(desk), 'the desktop layout fits a phone screen too');
+await desk.reload();
+await desk.waitForFunction('window.__k && window.__k("kernelReady")', null, { timeout: 240000 });
+assert.equal(await desk.evaluate(() => location.pathname.split('/').pop()), 'kernel-agent.html', 'the choice lasts for the tab');
+await kept.close();
+
+console.log('Phone layout E2E passed');
+await browser.close(); srv.close();
diff --git a/tests/e2e/run.mjs b/tests/e2e/run.mjs
index 5508452..6b3a1b2 100644
--- a/tests/e2e/run.mjs
+++ b/tests/e2e/run.mjs
@@ -10,5 +10,8 @@ for (const suite of ["agent-loop.mjs", "kernel-worker.mjs", "ui.mjs"]) for (cons
   const r = spawnSync(process.execPath, [here + suite, build], { stdio: "inherit", env: { ...process.env, NODE_NO_WARNINGS: "1" } });
   if (r.status !== 0) { failed += 1; console.error(`FAILED: ${suite} on ${build}`); }
 }
+// the phone suite opens both builds itself, as a phone would
+const phone = spawnSync(process.execPath, [here + "phone.mjs"], { stdio: "inherit", env: { ...process.env, NODE_NO_WARNINGS: "1" } });
+if (phone.status !== 0) { failed += 1; console.error("FAILED: phone.mjs"); }
 if (failed) process.exit(1);
-console.log("Browser E2E passed: agent loop, kernel worker, and UI on desktop and mobile builds.");
+console.log("Browser E2E passed: agent loop, kernel worker, and UI on desktop and mobile builds, and the phone layout.");
diff --git a/tests/e2e/ui.mjs b/tests/e2e/ui.mjs
index be3e790..5d39d23 100644
--- a/tests/e2e/ui.mjs
+++ b/tests/e2e/ui.mjs
@@ -18,7 +18,7 @@ assert.ok(await k(page, `document.scrollingElement.scrollWidth <= innerWidth`),
 assert.equal(await k(page, `!!document.getElementById('dna-dock')`), false, 'no floating dock');
 await page.click('#suiteBtn');
 assert.equal(await k(page, `document.getElementById('suiteBtn').getAttribute('aria-expanded')`), 'true');
-assert.equal(await k(page, `document.querySelectorAll('#suiteMenu a.sm-item[href$=".html"]').length`), 3, 'two other apps and the project page are links');
+assert.equal(await k(page, `document.querySelectorAll('#suiteMenu a.sm-item[href*=".html"]').length`), 3, 'two other apps and the project page are links');
 assert.match(await k(page, `document.querySelector('#suiteMenu .sm-item.cur').textContent`), mobile ? /KERNEL·M/ : /KERNEL·A/);
 const theme0 = await k(page, `document.documentElement.dataset.theme||'light'`);
 await page.click('#suiteMenu [data-sm="theme"]');

From 0e11789edf82d992918cb4e0d9764b4398742d28 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 28 Sep 2026 22:08:26 +0000
Subject: [PATCH 2/2] Make the phone layout much denser, and unstick RUN ALL

A second pass after testing on an iPhone:

- Header 39px to 32px, tab bar 52px to 46px, smaller brand and pills.
- Code 12px in a 32px gutter with tighter padding; markdown cells drop
  their gutter so prose takes the width; 13.5px prose, 10.5px tables
  with 2px cell padding, smaller output buttons, shorter cell tools.
- Agent sheet: one-line header, thread and run bars; the transcript runs
  edge to edge without its inset box; smaller chips, composer and row.
- Files and Variables: tighter rows, smaller names and actions.
- A long run time ("12.43 s") borrows the code's left padding instead of
  spilling out of the cell.
- RUN ALL in the tab bar stayed highlighted after one tap, because the
  bar never cleared it. It now lights up while runAll() runs and clears
  when it finishes.

phone.mjs checks the new code size, that run times stay inside their
cells, and that RUN ALL clears after the run.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S9PfSmbaV1CY9ZawtfbiEm
---
 CHANGELOG.md                      |   3 +-
 docs/kernel-agent-mobile.html     | 122 +++++++++++++++++-------------
 src/agent/css/mobile.css          | 115 ++++++++++++++++------------
 src/agent/js/mobile/controller.js |   7 +-
 tests/e2e/phone.mjs               |  13 +++-
 5 files changed, 151 insertions(+), 109 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea22f0c..5d94b00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,8 @@ Notable changes to KERNEL, KERNEL·A (the agent), and KERNEL·M (the phone build
 
 ### Phones
 - Opening KERNEL·A on a phone opens KERNEL·M, the same app laid out for touch, with the same notebooks and the same link parameters, so example links work too. `?layout=desktop` keeps the desktop layout for the tab, and the app menu's KERNEL·A entry uses it.
-- KERNEL·M is denser: a one-row header with every toolbar action under ⋯, 12.5px code in a narrower gutter, and tighter cells, outputs, first-run card and sheets. Files and Variables sheets fit their contents. On iOS the viewport stops focus zoom, so fields no longer need 16px type.
+- KERNEL·M is much denser. The header is one 32px row with every toolbar action under ⋯, code is 12px in a 32px gutter, markdown uses the full width, and cells, tables, outputs, the first-run card, the tab bar and every sheet are tighter. The agent's transcript runs edge to edge. Files and Variables sheets fit their contents. On iOS the viewport stops focus zoom, so fields no longer need 16px type.
+- RUN ALL in the tab bar is lit only while the run lasts; it used to stay highlighted.
 - On touch screens, COPY, CSV and PNG sit under an output instead of covering it. The iOS install hint hides itself after a few seconds, and toasts stay above it.
 - The desktop layout holds together in narrow windows: the header takes two rows with a sideways-scrolling toolbar, and the footer wraps.
 
diff --git a/docs/kernel-agent-mobile.html b/docs/kernel-agent-mobile.html
index a37e37b..a89b2d6 100644
--- a/docs/kernel-agent-mobile.html
+++ b/docs/kernel-agent-mobile.html
@@ -12955,10 +12955,11 @@ <h3>Command mode</h3>
     if (!b) return;
     var k = b.dataset.k;
     if (k === "run") {
-      var r = el("#btnRunAll");
-      if (r) r.click();
+      // lit while the run lasts, then back to normal
       b.classList.add("active");
-      setTimeout(syncBar, 220);
+      Promise.resolve(runAll()).finally(function () {
+        b.classList.remove("active");
+      });
       return;
     }
     only(k);
@@ -13185,71 +13186,75 @@ <h3>Command mode</h3>
 @media (max-width:760px){
   /* Dense by default: compact code and prose, a narrow gutter, tight cards. iOS focus-zoom is stopped in the
      viewport tag instead of with 16px fields, so fields can match the rest of the type. */
-  :root{--gutter-w:34px; --code-fs:12.5px; --code-lh:1.5; --code-pad-x:9px; --code-pad-y:8px;}
+  :root{--gutter-w:32px; --code-fs:12px; --code-lh:1.45; --code-pad-x:8px; --code-pad-y:6px;}
 
   /* ---- top bar: one row. Brand, notebook, status, interrupt while busy, and every other action in ⋯ ---- */
-  .topbar{gap:6px; padding:6px 8px; padding-top:calc(6px + env(safe-area-inset-top));}
+  .topbar{gap:5px; padding:4px 6px; padding-top:calc(4px + env(safe-area-inset-top));}
   .brand{gap:4px; flex:1 1 auto; min-width:0; align-items:center;}
-  .brand h1{font-size:13px; letter-spacing:.08em; flex:0 0 auto;}
+  .brand h1{font-size:12.5px; letter-spacing:.07em; flex:0 0 auto;}
   .brand .mark{width:10px; height:10px; box-shadow:0 0 0 2px var(--accent-ghost);}
   .brand .brand-v{display:none;}
   .brand-btn{align-items:center; padding:3px 4px; margin:-3px -4px;}
   .brand-btn .mark{margin-right:.45em;}
   .brand-chev{width:10px; height:10px; margin-left:4px;}
-  .nb-pill{flex:0 1 auto; min-width:0; max-width:none; margin-left:2px; padding:4px 7px; font-size:12px; gap:5px;}
-  .status{flex:0 0 auto; max-width:30vw; padding:4px 7px; gap:5px; font-size:10px;}
+  .nb-pill{flex:0 1 auto; min-width:0; max-width:none; margin-left:2px; padding:3px 6px; font-size:11.5px; gap:4px;}
+  .status{flex:0 0 auto; max-width:30vw; padding:3px 6px; gap:5px; font-size:10px;}
   .status[data-s="ok"] #statusText{display:none;}   /* the dot says ready; words only while booting, busy or failed */
   .toolbar{flex:0 0 auto; margin-left:0; gap:4px; flex-wrap:nowrap;}
   .toolbar > .btn:not(#btnInterrupt),.toolbar > .tb-sep{display:none;}
-  .btn-more{padding:4px 10px; font-size:13px; line-height:1; align-self:stretch;}
+  .btn-more{padding:3px 9px; font-size:13px; line-height:1; align-self:stretch;}
   .menu{min-width:224px; max-height:calc(100dvh - 120px); overflow:auto;}
   .menu-item{font-size:13.5px; padding:9px 10px;}
   .menu-item.narrow-only,.menu-sep.narrow-only{display:block;}
 
   /* ---- notebook canvas ---- */
-  .sheet{padding:8px 6px 84px; background-size:22px 22px;}
-  .notebook{gap:8px;}
-  .gutter{padding-right:5px; font-size:10px;}
-  .gutter .exec-time{font-size:8px; letter-spacing:0; white-space:nowrap; margin-top:1px;}
-  .cell.md .gutter .exec{font-size:10px;}
-  .md-rendered{font-size:14px; line-height:1.5; padding:3px 10px 5px;}
-  .md-rendered h1{font-size:1.45em;} .md-rendered h2{font-size:1.22em;} .md-rendered h3{font-size:1.08em;}
+  .sheet{padding:6px 4px 72px; background-size:22px 22px;}
+  .notebook{gap:6px;}
+  .gutter{padding-right:4px; font-size:10px;}
+  .gutter .exec-time{font-size:7.5px; letter-spacing:-.02em; word-spacing:-.3em; white-space:nowrap; margin:0 -7px 0 0;}  /* "12.43 s" borrows the code's left padding rather than leaving the cell */
+  /* markdown needs no gutter: its text takes the width */
+  .cell.md{grid-template-columns:10px 1fr;}
+  .cell.md .gutter .exec{display:none;}
+  .md-rendered{font-size:13.5px; line-height:1.45; padding:2px 8px 4px 2px;}
+  .md-rendered h1{font-size:1.4em;} .md-rendered h2{font-size:1.2em;} .md-rendered h3{font-size:1.06em;}
+  .md-rendered h1,.md-rendered h2,.md-rendered h3,.md-rendered h4{margin:.8em 0 .35em;} .md-rendered p{margin:.45em 0;}
   .md-rendered pre{padding:9px 10px;} .md-rendered pre code{font-size:12px;}
   .md-rendered table{font-size:12.5px;} .md-rendered th,.md-rendered td{padding:4px 7px;}
-  .outputs{padding:2px 0 4px;}
-  .out{padding:6px 9px;}
-  .out-stream pre,.out-text pre,.out-err pre{font-size:11.5px; line-height:1.45;}
+  .outputs{padding:1px 0 3px;}
+  .out{padding:5px 8px;}
+  .out-stream pre,.out-text pre,.out-err pre{font-size:11px; line-height:1.4;}
   .out-html{font-size:12.5px;}
-  .out-html table.dataframe{font-size:11px;}
-  .out-html table.dataframe th,.out-html table.dataframe td{padding:3px 6px;}
+  .out-html table.dataframe{font-size:10.5px; line-height:1.3;}
+  .out-html table.dataframe th,.out-html table.dataframe td{padding:2px 5px;}
+  .out-acts{margin-top:3px;} .out-acts button{font-size:8.5px; padding:2px 6px;}
   .collapsed-peek{padding:8px 10px !important;}
-  .add-row{opacity:1; margin:8px auto 4px; gap:6px;}
-  .add-btn{padding:6px 12px; font-size:12px;}
+  .add-row{opacity:1; margin:6px auto 2px; gap:6px;}
+  .add-btn{padding:5px 11px; font-size:11.5px;}
   /* the selected cell's tools sit in a row beneath it (no hover on touch), so they never cover code */
   .cell-tools{position:static; display:none; width:max-content; max-width:100%; flex-wrap:wrap; align-self:flex-end;
-              margin:2px 4px 4px auto; padding:2px; gap:0; opacity:1; transform:none; box-shadow:none;}
+              margin:0 3px 3px auto; padding:1px; gap:0; opacity:1; transform:none; box-shadow:none;}
   .cell.selected .cell-tools{display:flex; pointer-events:auto;}
-  .ct{width:30px; height:28px;}
-  .ct.type,.ct.ai{height:28px; padding:0 7px;}
+  .ct{width:30px; height:25px;}
+  .ct.type,.ct.ai{height:25px; padding:0 7px;}
   .lib-acts{opacity:1;}                          /* no hover on touch: row actions stay visible */
   .foot{display:none;}                           /* replaced by the bottom bar */
 
   /* first-run card: the same choices in half the height; keyboard tips don't apply on a phone */
-  .welcome{padding:12px 12px 12px; margin-bottom:8px;}
-  .welcome h2{font-size:16px; margin-bottom:3px;}
-  .welcome p{font-size:12.5px; line-height:1.45; margin-bottom:10px;}
+  .welcome{padding:10px 10px 10px; margin-bottom:6px;}
+  .welcome h2{font-size:15px; margin-bottom:2px;}
+  .welcome p{font-size:12px; line-height:1.4; margin-bottom:8px;}
   .welcome-acts{gap:6px; margin-bottom:0;}
-  .welcome-acts .btn{padding:6px 10px; font-size:12px;}
+  .welcome-acts .btn{padding:5px 9px; font-size:11.5px;}
   .welcome .welcome-tip{display:none;}
 
   /* toasts sit above the tab bar, and above the install hint while it shows */
-  .toast-host{bottom:calc(60px + env(safe-area-inset-bottom)); width:calc(100vw - 24px);}
-  body:has(#pwa-install.on) .toast-host{bottom:calc(112px + env(safe-area-inset-bottom));}
-  .toast{max-width:100%; font-size:12.5px; padding:8px 12px;}
+  .toast-host{bottom:calc(54px + env(safe-area-inset-bottom)); width:calc(100vw - 24px);}
+  body:has(#pwa-install.on) .toast-host{bottom:calc(104px + env(safe-area-inset-bottom));}
+  .toast{max-width:100%; font-size:12px; padding:7px 11px;}
 
   /* fields: 14px reads well and, with the viewport fix, doesn't trigger iOS zoom */
   textarea:not(.ta),input[type=text],input[type=password],input[type=number],input[type=search],input:not([type]),select{font-size:14px;}
-  .panel-search input,.var-tools select,.ag-threadbar select{font-size:13px;}
+  .panel-search input,.var-tools select,.ag-threadbar select{font-size:12px; padding-top:4px; padding-bottom:4px;}
 
   /* ---- side panels become bottom sheets ---- */
   .panel{
@@ -13262,29 +13267,40 @@ <h3>Command mode</h3>
     transform:translateY(112%); visibility:hidden; pointer-events:none;
     transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s linear .32s;
     z-index:120; overscroll-behavior:contain;
-    box-sizing:border-box; padding-bottom:calc(52px + env(safe-area-inset-bottom)); /* clear the bottom bar */
+    box-sizing:border-box; padding-bottom:calc(46px + env(safe-area-inset-bottom)); /* clear the bottom bar */
   }
   .panel.open{transform:none; visibility:visible; pointer-events:auto;
     transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s;}
   .panel-agent{height:90dvh; max-height:90dvh;}
   .panel-grip{display:none !important;}          /* no edge-resize on touch */
-  .panel-h{padding:8px 12px 6px;}
-  .panel-b{padding:0 8px 10px;}
-  .panel-search{padding:0 12px 7px;}
+  .panel-h{padding:6px 10px 5px;}
+  .panel-b{padding:0 6px 8px;}
+  .panel-search{padding:0 10px 5px;}
+  /* Files and Variables: tighter rows */
+  .lib-row{padding:6px 8px; gap:8px;} .lib-name{font-size:13px;} .lib-sub{font-size:10px;} .lib-map{margin-top:4px; height:8px;}
+  .lib-tick.code{height:8px;} .lib-tick.md{height:5px;} .lib-act,.data-act{font-size:10px; padding:2px 6px;}
+  .data-row{padding:6px 8px;} .data-name{font-size:12px;} .data-sub{font-size:10px;} .data-preview{font-size:10.5px;}
+  .var-tools{padding-bottom:4px;} .var-row{padding:4px 10px; gap:7px;} .var-name{font-size:12px;} .var-info{font-size:10.5px;}
+  .outputs-hint p{margin-bottom:6px;}
 
   /* grab handle at the top of each sheet (injected) */
-  .ms-grab{display:flex; align-items:center; justify-content:center; height:18px; flex:0 0 auto; touch-action:none; cursor:grab;}
+  .ms-grab{display:flex; align-items:center; justify-content:center; height:14px; flex:0 0 auto; touch-action:none; cursor:grab;}
   .ms-grab::before{content:""; width:36px; height:4px; border-radius:3px; background:var(--line-2);}
 
   /* sheet internals fit the sheet height */
   .panel-agent .panel-inner{overflow:hidden;}
-  .ag-body{padding:6px 8px 8px;}
-  .ag-tx{padding:8px; gap:6px;}
-  .ag-u{font-size:13px;} .ag-a{font-size:13px; line-height:1.45;}
-  .ag-composer{margin-top:6px;}
-  .ag-composer textarea{min-height:48px; padding:8px 9px; font-size:14px;}
-  .ag-row{flex-wrap:nowrap; gap:5px;}             /* one line: the model chip shrinks, SEND stays reachable */
-  .ag-mode,.ag-send,.ag-stop,.ag-model,#agModelChip{padding:8px 10px; font-size:10.5px;}
+    /* agent: one-line header, thread and run bars; the transcript runs edge to edge */
+  .ag-head{padding:3px 10px 5px; gap:6px;} .ag-head .panel-add{width:26px; height:24px;} .ag-state{padding:3px 6px; font-size:8.5px;}
+  .ag-threadbar{padding:4px 8px; gap:4px;} .ag-thread-act{padding:4px 6px;}
+  .ag-runbar{padding:3px 8px; min-height:0; gap:4px;} .ag-run-btn{padding:4px 6px;}
+  .ag-body{padding:0 0 6px;}
+  .ag-tx{padding:8px 10px; gap:6px; border:0; border-radius:0;}
+  .ag-u{font-size:12.5px; line-height:1.4;} .ag-a{font-size:12.5px; line-height:1.42;} .ag-progress{font-size:11px;}
+  .ag-chip{font-size:9px; padding:2px 6px;}
+  .ag-composer{margin-top:0; padding:6px 8px 0; border-top:1px solid var(--line);}
+  .ag-composer textarea{min-height:40px; padding:7px 8px; font-size:13.5px;}
+  .ag-row{flex-wrap:nowrap; gap:5px; margin-top:5px;}             /* one line: the model chip shrinks, SEND stays reachable */
+  .ag-mode,.ag-send,.ag-stop,.ag-model,#agModelChip{padding:7px 9px; font-size:10px;}
   .ag-mode,.ag-send,.ag-stop{flex:0 0 auto;}
   #agModelChip{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
   .ag-steps{flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap;}
@@ -13304,27 +13320,27 @@ <h3>Command mode</h3>
 
   /* ---- bottom navigation bar ---- */
   #mob-bar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:130;
-    height:calc(52px + env(safe-area-inset-bottom));
+    height:calc(46px + env(safe-area-inset-bottom));
     padding:0 6px env(safe-area-inset-bottom);
     background:color-mix(in srgb,var(--paper) 90%,white);
     border-top:1px solid var(--line-2); backdrop-filter:saturate(1.3) blur(10px);
     align-items:stretch; justify-content:space-around;}
   .mb-btn{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
     background:none; border:0; cursor:pointer; color:var(--ink-3);
-    font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;}
+    font-family:var(--mono); font-size:8px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;}
   .mb-btn .mb-ic{display:flex; align-items:center; justify-content:center;}
-  .mb-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
+  .mb-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
   .mb-btn[data-k="run"] svg{fill:currentColor; stroke:none;}
   .mb-btn[data-k="agent"] svg{fill:currentColor; stroke:none;}
   .mb-btn.active{color:var(--accent);}
-  .mb-btn.prime .mb-ic{width:40px; height:26px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line-2));
+  .mb-btn.prime .mb-ic{width:38px; height:22px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line-2));
     border-radius:8px; background:var(--accent-ghost); color:var(--accent);}
   .mb-btn.prime.active .mb-ic{background:var(--accent); color:var(--on-accent);}
   .mb-btn.prime{color:var(--accent);}
 
   /* install hint: above the bar, compact */
   #pwa-install{position:fixed; left:50%; transform:translateX(-50%);
-    bottom:calc(60px + env(safe-area-inset-bottom)); z-index:136; display:none;
+    bottom:calc(54px + env(safe-area-inset-bottom)); z-index:136; display:none;
     align-items:center; gap:8px; padding:7px 8px 7px 12px;
     background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line-2)); border-radius:10px;
     box-shadow:0 14px 36px -16px rgba(0,0,0,.55); font-family:var(--sans); font-size:12px; color:var(--ink); max-width:92vw;}
@@ -13338,8 +13354,8 @@ <h3>Command mode</h3>
 /* very small phones */
 @media (max-width:380px){
   .status{max-width:24vw;}
-  .mb-btn{font-size:8px;}
-  :root{--code-fs:12px;}
+  .mb-btn{font-size:7.5px;}
+  :root{--code-fs:11.5px;}
 }
 
 /* short landscape phones: taller sheets */
diff --git a/src/agent/css/mobile.css b/src/agent/css/mobile.css
index d83226a..e2acd38 100644
--- a/src/agent/css/mobile.css
+++ b/src/agent/css/mobile.css
@@ -6,71 +6,75 @@
 @media (max-width:760px){
   /* Dense by default: compact code and prose, a narrow gutter, tight cards. iOS focus-zoom is stopped in the
      viewport tag instead of with 16px fields, so fields can match the rest of the type. */
-  :root{--gutter-w:34px; --code-fs:12.5px; --code-lh:1.5; --code-pad-x:9px; --code-pad-y:8px;}
+  :root{--gutter-w:32px; --code-fs:12px; --code-lh:1.45; --code-pad-x:8px; --code-pad-y:6px;}
 
   /* ---- top bar: one row. Brand, notebook, status, interrupt while busy, and every other action in ⋯ ---- */
-  .topbar{gap:6px; padding:6px 8px; padding-top:calc(6px + env(safe-area-inset-top));}
+  .topbar{gap:5px; padding:4px 6px; padding-top:calc(4px + env(safe-area-inset-top));}
   .brand{gap:4px; flex:1 1 auto; min-width:0; align-items:center;}
-  .brand h1{font-size:13px; letter-spacing:.08em; flex:0 0 auto;}
+  .brand h1{font-size:12.5px; letter-spacing:.07em; flex:0 0 auto;}
   .brand .mark{width:10px; height:10px; box-shadow:0 0 0 2px var(--accent-ghost);}
   .brand .brand-v{display:none;}
   .brand-btn{align-items:center; padding:3px 4px; margin:-3px -4px;}
   .brand-btn .mark{margin-right:.45em;}
   .brand-chev{width:10px; height:10px; margin-left:4px;}
-  .nb-pill{flex:0 1 auto; min-width:0; max-width:none; margin-left:2px; padding:4px 7px; font-size:12px; gap:5px;}
-  .status{flex:0 0 auto; max-width:30vw; padding:4px 7px; gap:5px; font-size:10px;}
+  .nb-pill{flex:0 1 auto; min-width:0; max-width:none; margin-left:2px; padding:3px 6px; font-size:11.5px; gap:4px;}
+  .status{flex:0 0 auto; max-width:30vw; padding:3px 6px; gap:5px; font-size:10px;}
   .status[data-s="ok"] #statusText{display:none;}   /* the dot says ready; words only while booting, busy or failed */
   .toolbar{flex:0 0 auto; margin-left:0; gap:4px; flex-wrap:nowrap;}
   .toolbar > .btn:not(#btnInterrupt),.toolbar > .tb-sep{display:none;}
-  .btn-more{padding:4px 10px; font-size:13px; line-height:1; align-self:stretch;}
+  .btn-more{padding:3px 9px; font-size:13px; line-height:1; align-self:stretch;}
   .menu{min-width:224px; max-height:calc(100dvh - 120px); overflow:auto;}
   .menu-item{font-size:13.5px; padding:9px 10px;}
   .menu-item.narrow-only,.menu-sep.narrow-only{display:block;}
 
   /* ---- notebook canvas ---- */
-  .sheet{padding:8px 6px 84px; background-size:22px 22px;}
-  .notebook{gap:8px;}
-  .gutter{padding-right:5px; font-size:10px;}
-  .gutter .exec-time{font-size:8px; letter-spacing:0; white-space:nowrap; margin-top:1px;}
-  .cell.md .gutter .exec{font-size:10px;}
-  .md-rendered{font-size:14px; line-height:1.5; padding:3px 10px 5px;}
-  .md-rendered h1{font-size:1.45em;} .md-rendered h2{font-size:1.22em;} .md-rendered h3{font-size:1.08em;}
+  .sheet{padding:6px 4px 72px; background-size:22px 22px;}
+  .notebook{gap:6px;}
+  .gutter{padding-right:4px; font-size:10px;}
+  .gutter .exec-time{font-size:7.5px; letter-spacing:-.02em; word-spacing:-.3em; white-space:nowrap; margin:0 -7px 0 0;}  /* "12.43 s" borrows the code's left padding rather than leaving the cell */
+  /* markdown needs no gutter: its text takes the width */
+  .cell.md{grid-template-columns:10px 1fr;}
+  .cell.md .gutter .exec{display:none;}
+  .md-rendered{font-size:13.5px; line-height:1.45; padding:2px 8px 4px 2px;}
+  .md-rendered h1{font-size:1.4em;} .md-rendered h2{font-size:1.2em;} .md-rendered h3{font-size:1.06em;}
+  .md-rendered h1,.md-rendered h2,.md-rendered h3,.md-rendered h4{margin:.8em 0 .35em;} .md-rendered p{margin:.45em 0;}
   .md-rendered pre{padding:9px 10px;} .md-rendered pre code{font-size:12px;}
   .md-rendered table{font-size:12.5px;} .md-rendered th,.md-rendered td{padding:4px 7px;}
-  .outputs{padding:2px 0 4px;}
-  .out{padding:6px 9px;}
-  .out-stream pre,.out-text pre,.out-err pre{font-size:11.5px; line-height:1.45;}
+  .outputs{padding:1px 0 3px;}
+  .out{padding:5px 8px;}
+  .out-stream pre,.out-text pre,.out-err pre{font-size:11px; line-height:1.4;}
   .out-html{font-size:12.5px;}
-  .out-html table.dataframe{font-size:11px;}
-  .out-html table.dataframe th,.out-html table.dataframe td{padding:3px 6px;}
+  .out-html table.dataframe{font-size:10.5px; line-height:1.3;}
+  .out-html table.dataframe th,.out-html table.dataframe td{padding:2px 5px;}
+  .out-acts{margin-top:3px;} .out-acts button{font-size:8.5px; padding:2px 6px;}
   .collapsed-peek{padding:8px 10px !important;}
-  .add-row{opacity:1; margin:8px auto 4px; gap:6px;}
-  .add-btn{padding:6px 12px; font-size:12px;}
+  .add-row{opacity:1; margin:6px auto 2px; gap:6px;}
+  .add-btn{padding:5px 11px; font-size:11.5px;}
   /* the selected cell's tools sit in a row beneath it (no hover on touch), so they never cover code */
   .cell-tools{position:static; display:none; width:max-content; max-width:100%; flex-wrap:wrap; align-self:flex-end;
-              margin:2px 4px 4px auto; padding:2px; gap:0; opacity:1; transform:none; box-shadow:none;}
+              margin:0 3px 3px auto; padding:1px; gap:0; opacity:1; transform:none; box-shadow:none;}
   .cell.selected .cell-tools{display:flex; pointer-events:auto;}
-  .ct{width:30px; height:28px;}
-  .ct.type,.ct.ai{height:28px; padding:0 7px;}
+  .ct{width:30px; height:25px;}
+  .ct.type,.ct.ai{height:25px; padding:0 7px;}
   .lib-acts{opacity:1;}                          /* no hover on touch: row actions stay visible */
   .foot{display:none;}                           /* replaced by the bottom bar */
 
   /* first-run card: the same choices in half the height; keyboard tips don't apply on a phone */
-  .welcome{padding:12px 12px 12px; margin-bottom:8px;}
-  .welcome h2{font-size:16px; margin-bottom:3px;}
-  .welcome p{font-size:12.5px; line-height:1.45; margin-bottom:10px;}
+  .welcome{padding:10px 10px 10px; margin-bottom:6px;}
+  .welcome h2{font-size:15px; margin-bottom:2px;}
+  .welcome p{font-size:12px; line-height:1.4; margin-bottom:8px;}
   .welcome-acts{gap:6px; margin-bottom:0;}
-  .welcome-acts .btn{padding:6px 10px; font-size:12px;}
+  .welcome-acts .btn{padding:5px 9px; font-size:11.5px;}
   .welcome .welcome-tip{display:none;}
 
   /* toasts sit above the tab bar, and above the install hint while it shows */
-  .toast-host{bottom:calc(60px + env(safe-area-inset-bottom)); width:calc(100vw - 24px);}
-  body:has(#pwa-install.on) .toast-host{bottom:calc(112px + env(safe-area-inset-bottom));}
-  .toast{max-width:100%; font-size:12.5px; padding:8px 12px;}
+  .toast-host{bottom:calc(54px + env(safe-area-inset-bottom)); width:calc(100vw - 24px);}
+  body:has(#pwa-install.on) .toast-host{bottom:calc(104px + env(safe-area-inset-bottom));}
+  .toast{max-width:100%; font-size:12px; padding:7px 11px;}
 
   /* fields: 14px reads well and, with the viewport fix, doesn't trigger iOS zoom */
   textarea:not(.ta),input[type=text],input[type=password],input[type=number],input[type=search],input:not([type]),select{font-size:14px;}
-  .panel-search input,.var-tools select,.ag-threadbar select{font-size:13px;}
+  .panel-search input,.var-tools select,.ag-threadbar select{font-size:12px; padding-top:4px; padding-bottom:4px;}
 
   /* ---- side panels become bottom sheets ---- */
   .panel{
@@ -83,29 +87,40 @@
     transform:translateY(112%); visibility:hidden; pointer-events:none;
     transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s linear .32s;
     z-index:120; overscroll-behavior:contain;
-    box-sizing:border-box; padding-bottom:calc(52px + env(safe-area-inset-bottom)); /* clear the bottom bar */
+    box-sizing:border-box; padding-bottom:calc(46px + env(safe-area-inset-bottom)); /* clear the bottom bar */
   }
   .panel.open{transform:none; visibility:visible; pointer-events:auto;
     transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s;}
   .panel-agent{height:90dvh; max-height:90dvh;}
   .panel-grip{display:none !important;}          /* no edge-resize on touch */
-  .panel-h{padding:8px 12px 6px;}
-  .panel-b{padding:0 8px 10px;}
-  .panel-search{padding:0 12px 7px;}
+  .panel-h{padding:6px 10px 5px;}
+  .panel-b{padding:0 6px 8px;}
+  .panel-search{padding:0 10px 5px;}
+  /* Files and Variables: tighter rows */
+  .lib-row{padding:6px 8px; gap:8px;} .lib-name{font-size:13px;} .lib-sub{font-size:10px;} .lib-map{margin-top:4px; height:8px;}
+  .lib-tick.code{height:8px;} .lib-tick.md{height:5px;} .lib-act,.data-act{font-size:10px; padding:2px 6px;}
+  .data-row{padding:6px 8px;} .data-name{font-size:12px;} .data-sub{font-size:10px;} .data-preview{font-size:10.5px;}
+  .var-tools{padding-bottom:4px;} .var-row{padding:4px 10px; gap:7px;} .var-name{font-size:12px;} .var-info{font-size:10.5px;}
+  .outputs-hint p{margin-bottom:6px;}
 
   /* grab handle at the top of each sheet (injected) */
-  .ms-grab{display:flex; align-items:center; justify-content:center; height:18px; flex:0 0 auto; touch-action:none; cursor:grab;}
+  .ms-grab{display:flex; align-items:center; justify-content:center; height:14px; flex:0 0 auto; touch-action:none; cursor:grab;}
   .ms-grab::before{content:""; width:36px; height:4px; border-radius:3px; background:var(--line-2);}
 
   /* sheet internals fit the sheet height */
   .panel-agent .panel-inner{overflow:hidden;}
-  .ag-body{padding:6px 8px 8px;}
-  .ag-tx{padding:8px; gap:6px;}
-  .ag-u{font-size:13px;} .ag-a{font-size:13px; line-height:1.45;}
-  .ag-composer{margin-top:6px;}
-  .ag-composer textarea{min-height:48px; padding:8px 9px; font-size:14px;}
-  .ag-row{flex-wrap:nowrap; gap:5px;}             /* one line: the model chip shrinks, SEND stays reachable */
-  .ag-mode,.ag-send,.ag-stop,.ag-model,#agModelChip{padding:8px 10px; font-size:10.5px;}
+    /* agent: one-line header, thread and run bars; the transcript runs edge to edge */
+  .ag-head{padding:3px 10px 5px; gap:6px;} .ag-head .panel-add{width:26px; height:24px;} .ag-state{padding:3px 6px; font-size:8.5px;}
+  .ag-threadbar{padding:4px 8px; gap:4px;} .ag-thread-act{padding:4px 6px;}
+  .ag-runbar{padding:3px 8px; min-height:0; gap:4px;} .ag-run-btn{padding:4px 6px;}
+  .ag-body{padding:0 0 6px;}
+  .ag-tx{padding:8px 10px; gap:6px; border:0; border-radius:0;}
+  .ag-u{font-size:12.5px; line-height:1.4;} .ag-a{font-size:12.5px; line-height:1.42;} .ag-progress{font-size:11px;}
+  .ag-chip{font-size:9px; padding:2px 6px;}
+  .ag-composer{margin-top:0; padding:6px 8px 0; border-top:1px solid var(--line);}
+  .ag-composer textarea{min-height:40px; padding:7px 8px; font-size:13.5px;}
+  .ag-row{flex-wrap:nowrap; gap:5px; margin-top:5px;}             /* one line: the model chip shrinks, SEND stays reachable */
+  .ag-mode,.ag-send,.ag-stop,.ag-model,#agModelChip{padding:7px 9px; font-size:10px;}
   .ag-mode,.ag-send,.ag-stop{flex:0 0 auto;}
   #agModelChip{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
   .ag-steps{flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap;}
@@ -125,27 +140,27 @@
 
   /* ---- bottom navigation bar ---- */
   #mob-bar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:130;
-    height:calc(52px + env(safe-area-inset-bottom));
+    height:calc(46px + env(safe-area-inset-bottom));
     padding:0 6px env(safe-area-inset-bottom);
     background:color-mix(in srgb,var(--paper) 90%,white);
     border-top:1px solid var(--line-2); backdrop-filter:saturate(1.3) blur(10px);
     align-items:stretch; justify-content:space-around;}
   .mb-btn{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
     background:none; border:0; cursor:pointer; color:var(--ink-3);
-    font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;}
+    font-family:var(--mono); font-size:8px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;}
   .mb-btn .mb-ic{display:flex; align-items:center; justify-content:center;}
-  .mb-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
+  .mb-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
   .mb-btn[data-k="run"] svg{fill:currentColor; stroke:none;}
   .mb-btn[data-k="agent"] svg{fill:currentColor; stroke:none;}
   .mb-btn.active{color:var(--accent);}
-  .mb-btn.prime .mb-ic{width:40px; height:26px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line-2));
+  .mb-btn.prime .mb-ic{width:38px; height:22px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line-2));
     border-radius:8px; background:var(--accent-ghost); color:var(--accent);}
   .mb-btn.prime.active .mb-ic{background:var(--accent); color:var(--on-accent);}
   .mb-btn.prime{color:var(--accent);}
 
   /* install hint: above the bar, compact */
   #pwa-install{position:fixed; left:50%; transform:translateX(-50%);
-    bottom:calc(60px + env(safe-area-inset-bottom)); z-index:136; display:none;
+    bottom:calc(54px + env(safe-area-inset-bottom)); z-index:136; display:none;
     align-items:center; gap:8px; padding:7px 8px 7px 12px;
     background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line-2)); border-radius:10px;
     box-shadow:0 14px 36px -16px rgba(0,0,0,.55); font-family:var(--sans); font-size:12px; color:var(--ink); max-width:92vw;}
@@ -159,8 +174,8 @@
 /* very small phones */
 @media (max-width:380px){
   .status{max-width:24vw;}
-  .mb-btn{font-size:8px;}
-  :root{--code-fs:12px;}
+  .mb-btn{font-size:7.5px;}
+  :root{--code-fs:11.5px;}
 }
 
 /* short landscape phones: taller sheets */
diff --git a/src/agent/js/mobile/controller.js b/src/agent/js/mobile/controller.js
index 276db81..019437a 100644
--- a/src/agent/js/mobile/controller.js
+++ b/src/agent/js/mobile/controller.js
@@ -207,10 +207,11 @@
     if (!b) return;
     var k = b.dataset.k;
     if (k === "run") {
-      var r = el("#btnRunAll");
-      if (r) r.click();
+      // lit while the run lasts, then back to normal
       b.classList.add("active");
-      setTimeout(syncBar, 220);
+      Promise.resolve(runAll()).finally(function () {
+        b.classList.remove("active");
+      });
       return;
     }
     only(k);
diff --git a/tests/e2e/phone.mjs b/tests/e2e/phone.mjs
index bc6696a..791d4f7 100644
--- a/tests/e2e/phone.mjs
+++ b/tests/e2e/phone.mjs
@@ -24,8 +24,10 @@ assert.deepEqual(routed, ['save', 'restart'], 'the phone menu items run their ac
 
 // 3. compact code still lines up with its highlighting, and table buttons sit below the table
 const c = await kAsync(linked, `const c = insertCell(cells.length, 'code', false); c.source = 'import pandas as pd\\npd.DataFrame({"a": range(3), "b": list("xyz")})'; c.taEl.value = c.source; await runCell(c); const ta = getComputedStyle(c.taEl), hl = getComputedStyle(c.el.querySelector('.hl')); const table = c.el.querySelector('.out table'), acts = c.el.querySelector('.out-acts'); return { font: [ta.fontSize, ta.lineHeight] + '' === [hl.fontSize, hl.lineHeight] + '', size: parseFloat(hl.fontSize), below: !!(table && acts) && acts.getBoundingClientRect().top >= table.getBoundingClientRect().bottom }`);
-assert.deepEqual(c, { font: true, size: 12.5, below: true }, 'code is compact and aligned, and COPY/CSV never cover a table');
+assert.deepEqual(c, { font: true, size: 12, below: true }, 'code is compact and aligned, and COPY/CSV never cover a table');
 assert.ok(await fits(linked), 'a notebook with outputs still fits the screen');
+const runTimes = await kAsync(linked, `for (const c of cells) if (c.timeEl) c.timeEl.textContent = '12.43 s'; return [...document.querySelectorAll('.cell .exec-time')].filter((t) => t.textContent).map((t) => { const r = document.createRange(); r.selectNodeContents(t); return r.getBoundingClientRect().left >= t.closest('.cell').getBoundingClientRect().left; })`);
+assert.ok(runTimes.length && runTimes.every(Boolean), 'a long run time stays inside its cell');
 
 // 4. sheets fit their contents
 await k(linked, `window.__kaMobile.only('left')`);
@@ -33,9 +35,16 @@ await linked.waitForTimeout(450);
 const sheet = await linked.evaluate(() => ({ h: document.querySelector('#leftPanel').getBoundingClientRect().height, vh: innerHeight }));
 assert.ok(sheet.h < sheet.vh * 0.86, 'a short Files sheet is shorter than the screen');
 await k(linked, `window.__kaMobile.closeAll()`);
+await linked.waitForTimeout(400);
+
+// 5. RUN ALL in the tab bar is lit while the run lasts, then goes back to normal
+const runTab = '#mob-bar .mb-btn[data-k="run"]';
+await linked.click(runTab);
+assert.equal(await linked.evaluate((s) => document.querySelector(s).classList.contains('active'), runTab), true, 'RUN ALL lights up when tapped');
+await linked.waitForFunction((s) => !document.querySelector(s).classList.contains('active'), runTab, { timeout: 60000 });
 await phone.close();
 
-// 5. ?layout=desktop keeps KERNEL·A on a phone, for the tab, and it still fits the screen
+// 6. ?layout=desktop keeps KERNEL·A on a phone, for the tab, and it still fits the screen
 const kept = await newContext(browser, [], PHONE);
 const desk = await openApp(kept, 'kernel-agent.html?layout=desktop');
 assert.deepEqual(await desk.evaluate(() => [location.pathname.split('/').pop(), location.search, sessionStorage.getItem('kernel.layout')]), ['kernel-agent.html', '', 'desktop'], 'layout=desktop keeps this page and drops the parameter');