Phones get the phone layout, and a much denser KERNEL·M - #7
Conversation
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
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
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0e11789edf
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| if (matchMedia("(pointer:coarse)").matches && Math.min(screen.width, screen.height) <= 600) | ||
| location.replace("kernel-agent-mobile.html" + location.search + location.hash); |
There was a problem hiding this comment.
When kernel-agent.html is downloaded and opened by itself on a phone—the README's documented single-file workflow—this navigation requests a separate kernel-agent-mobile.html sibling that the user did not download, leaving the app unusable. Restrict the redirect to hosted deployments where the mobile artifact is available, or retain a usable in-file phone layout.
Useful? React with 👍 / 👎.
| Promise.resolve(runAll()).finally(function () { | ||
| b.classList.remove("active"); |
There was a problem hiding this comment.
If the user taps Run All again while the first run is still executing, the second runAll() returns immediately because busy is true, and its finally removes active even though the original run continues. Ignore taps while this button is active or derive the indicator from the outstanding run so one invocation cannot clear another invocation's state.
Useful? React with 👍 / 👎.
2 participants
On an iPhone, KERNEL·A (
kernel-agent.html) had no phone layout:The phone build, KERNEL·M, fit the screen but was loose: 16px code, a toolbar clipped off the right edge, and RUN ALL stuck highlighted after one tap. This PR sends phones to the phone layout and makes that layout much denser.
Phones get the phone layout
kernel-agent.htmlsends touch devices with a phone-sized screen tokernel-agent-mobile.html. The query and hash are kept, so example links still work, and both pages share the same notebooks.?layout=desktopkeeps the desktop layout for the rest of the tab's session and is removed from the URL. The KERNEL·A entry in the app menu uses it, including the copy of the menu inkernel.html.A denser KERNEL·M
maximum-scale=1, which stops that zoom but still allows pinch zoom. Fields can use compact type, and the code editor's font now matches its highlighting overlay.Fixes
runAll()runs.Tests
New
tests/e2e/phone.mjsruns at iPhone size (390×844, touch, mobile Safari user agent) and checks:?exampleintact, and the?layout=desktopopt-out lasting for the tab;It fails on
mainat the first check.harness.mjsgains aPHONEcontext, andrun.mjsruns the phone suite.ui.mjsaccepts app-menu links that carry a query string.npm run check,npm testand the full browser suite (desktop, mobile and phone) pass.Tested with Chrome's phone emulation, not on a real iPhone.
🤖 Generated with Claude Code
https://claude.ai/code/session_01S9PfSmbaV1CY9ZawtfbiEm
Generated by Claude Code