diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7130519..5d94b00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,13 @@ 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 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.
+
 ### 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..a89b2d6 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);
@@ -12939,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);
@@ -12987,6 +13004,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 +13019,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 +13060,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 +13110,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 +13181,136 @@ <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: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: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: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: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: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: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: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: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: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: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:6px 4px 4px auto; 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:25px;}
+  .ct.type,.ct.ai{height:25px; 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: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: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(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:12px; padding-top:4px; padding-bottom:4px;}
 
   /* ---- 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(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;}
+  .panel-agent{height:90dvh; max-height:90dvh;}
   .panel-grip{display:none !important;}          /* no edge-resize on touch */
+  .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: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: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: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;}
+    /* 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;}
   .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 +13320,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(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: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: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:21px; height:21px; 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: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: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);}
 
-  /* 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(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;}
   #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;}
-  .mb-btn{font-size:8px;}
+  .status{max-width:24vw;}
+  .mb-btn{font-size:7.5px;}
+  :root{--code-fs:11.5px;}
 }
 
 /* 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 +13490,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..e2acd38 100644
--- a/src/agent/css/mobile.css
+++ b/src/agent/css/mobile.css
@@ -1,79 +1,136 @@
 /* ===== 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:32px; --code-fs:12px; --code-lh:1.45; --code-pad-x:8px; --code-pad-y:6px;}
 
-  /* ---- 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: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: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: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: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: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: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: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: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: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:6px 4px 4px auto; 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:25px;}
+  .ct.type,.ct.ai{height:25px; 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: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: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(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:12px; padding-top:4px; padding-bottom:4px;}
 
   /* ---- 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(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;}
+  .panel-agent{height:90dvh; max-height:90dvh;}
   .panel-grip{display:none !important;}          /* no edge-resize on touch */
+  .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: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: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: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;}
+    /* 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;}
   .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 +140,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(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: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: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:21px; height:21px; 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: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: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);}
 
-  /* 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(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;}
   #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;}
-  .mb-btn{font-size:8px;}
+  .status{max-width:24vw;}
+  .mb-btn{font-size:7.5px;}
+  :root{--code-fs:11.5px;}
 }
 
 /* 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..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);
@@ -255,5 +256,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..791d4f7
--- /dev/null
+++ b/tests/e2e/phone.mjs
@@ -0,0 +1,58 @@
+// 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, 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')`);
+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();
+
+// 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');
+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"]');