diff --git a/src/web/CLAUDE.md b/src/web/CLAUDE.md index 1cfa5424..9268b440 100644 --- a/src/web/CLAUDE.md +++ b/src/web/CLAUDE.md @@ -48,7 +48,7 @@ Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. L **Opened outside Codeman** (`foreign-sessions.js`, both home screens): the tmux sessions a human started, listed from `GET /api/mux/foreign` (root CLAUDE.md, Adopted tmux sessions). ONE renderer, `renderForeignSessions(container)`, fills the welcome block and the phone overview's, and every row goes through `textContent`, since a session name and a command line come from someone else's process. ⚠️ It polls only while a home screen is up (`startForeignPolling`/`stopForeignPolling` from `showWelcome()`/`hideWelcome()`) and the tab is visible (`_foreignPollTick()` is the one gate, and `visibilitychange` catches up; the cache TTL sits under the poll interval, so one tab's every tick is a full socket sweep), and the poll is local only: the docker and ssh scan costs one connection per target, so it runs once on the toggle and again on Rescan, and its rows and notes are kept apart (`_foreignWideSessions`, `_foreignWideNotes`) or the next local poll would wipe them. ⚠️ A 403 is a non-admin in multi-user mode, an answer and not a failed poll: `_foreignRefused` stops the polling and shows no block. ⚠️ `closeSession()` re-reads the list after an adopted tab's DELETE, since the home screen's own load races it and the row would say `Go to tab` until the next poll. ⚠️ An adopted tab has no kill outcome to offer, so the close dialog hides the red button and always tears the wrapper down. ⚠️ `session.remote` and `session.docker` are undefined on an adopted session, so a check that hides a row for those two usually needs `session.adopt` as well. Tests: `test/foreign-sessions-ui.test.ts`, `test/foreign-sessions-i18n.test.ts` (harvests every string from the real module). -**Run a model on this Mac** (`local-model-ui.js`; welcome button `#welcomeLocalModelBtn`, chooser window `#localModelModal`, App Settings > Models row `#localModelSettings`; server rules in the root CLAUDE.md, Local model): ONE window does everything (choose, confirm, progress, paused, failed, installed, no recommendation); the button and the Settings row only open it. Which screen shows follows `install.state` of `GET /api/local-model`; the page itself holds only the selection and whether the person is on the chooser or the confirm screen. ⚠️ The window is ONE frame for the whole flow: a fixed height on desktop (`.modal-content.local-model-window`), App Settings' boxed close button, the body scrolling between the header and a foot of its own (`#localModelWindowFoot`): every screen's last part (`.lm-foot`, or the `.lm-remove` question) is moved there by `_renderLocalModelWindow()`, so a button never moves away from under the pointer and is never clipped; a test that looks for a button looks in the frame, not the body. The short screens are centred in that frame on desktop and sit above the buttons on a phone (`data-screen` on the body). ⚠️ The memory bar (`.lm-bar`, `role="meter"`) is the one strong element: filled to the selected row's `budgetShare`, the model at its PEAK (the legend says so, and the installed line uses the same words beside what the model takes now, so the two figures are never read as a contradiction), the memory map (`Candidate.memory`: the model, its context and the brief peaks side by side, each named in the legend, on a track of `--text-muted` at about a third) in the feature's own colours (`--lm-*`: violet for the feature, green good, amber tight, orange slow, teal the context, deeper on the light skins), never `--accent`, which the owner rejected as too much blue (about 3:1 against the window, so the free part can be seen; a border token is 1.5:1 and the inputs' `--bg-input` is the window's own surface on the dark skins), 10px, no gradient or glow, and its width transition is the only motion (off under `prefers-reduced-motion`); a repaint starts each bar at the last width of its kind, so keep `_settleLocalModelBars()` after every body write. The figure beside it is an estimate and says "about" in whole GB (`localModelWholeGb()` on the server's text); only the download figure keeps tabular figures. ⚠️ The rows are the server's pick first, then the other models by download size, largest first (`localModelCandidates()`): the server's alternatives are its ranking, which no column shows. ⚠️ The download bar means ONE thing, the model download: at the start while the runtime is fetched, gone once the model is in (the step list carries verify, agent and connect); the first paint after an install finished shows "Start a session" alone (`justInstalled`), an error on an installed model is the headline with a grey dot, and Remove is quiet everywhere but red in its own question, never the accent. ⚠️ The window polls the GET once a second WHILE OPEN and never otherwise (no SSE event): `closeLocalModelWindow()` clears the timer, a background tab asks nothing, an unchanged answer repaints nothing, and a tick that moved only the download replaces `.lm-meter` alone, so a button is never swapped out under a click. A read that was already under way when a verb answered is dropped (`_localModelVerbs`), or the old state flashes back. ⚠️ The consent is bound to the size shown: the install request carries the row's `installBytes` as `acknowledgedBytes`, and a 409 `size-changed` shows `expectedGb` and sends `expectedBytes` next; never compute a total here. ⚠️ A button exists only for an action in `install.actions`, and after an error exactly one helpful action (`error.next`, already adapted by the server to the state: `start` on an installed model, `retry` on a job) plus a quiet Remove; an error's text is split after its first sentence (`localModelSentences()`, which knows the ideographic full stop) and only that sentence is the headline. A refusal the server names (a 400, a full disk) carries `data.message` like a 409 and is printed from it, never from the English `error` text. ⚠️ Every dynamic string goes in through `textContent` (model, coding agent and chip names, an error's detail, session names, the folder and the install command are someone else's text); the window body, the button and the row carry `data-i18n-skip` and the module translates its own sentences at render time, so a language or display-name change repaints from the module (the `` observer). ⚠️ Labels and sentences come from the payload (`{ text, vars }` through `localModelT`); the module holds no list of models or coding agents, compares no CLI id (the agent select's values are positions in the server's list, the id travels only as data into the install request and `selectCustomModelEntry`) and never contains the word "Recommended". ⚠️ `test/local-model-i18n.test.ts` harvests every `localModelT('...')` literal: a new string is a single-quoted literal with no apostrophe and gets a zh-CN entry, the only non-literal calls are the two payload ones, and a unit alone (`23.1 GB`) is not a translator call. ⚠️ Sizes are printed as sent (decimal GB text), bytes are never turned into a size; the installed memory alone is `memClassGb`. ⚠️ The model list is a real radio group (`role="radiogroup"`, roving `tabindex`, arrows, Home, End, the focus follows through the repaint's own focus restore, keyed by `data-lm-key`); the columns line up through `subgrid` with a fixed-track `@supports` fallback, and under 560px a row is two lines (mobile.css). ⚠️ The window has its OWN `FocusTrap` (`_localModelFocusTrap`, never `activeFocusTrap`: it opens on top of App Settings) and app.js claims its Escape before `closeAllPanels()`. ⚠️ Its buttons are the Git worktrees dialog's `.wt-btn` set, never `.btn-toolbar`: the skin block greys `.btn-toolbar.btn-primary` and the phone block pins every `.btn-toolbar` to 26px with `!important`. ⚠️ "Start a session" re-reads the settings and the CLI list first (`loadAppSettingsFromServer`, `loadCliListForSettings`: the server switched the endpoints flag on and may have installed the agent a moment ago), then calls the existing `selectCustomModelEntry(install.cli, install.endpointId)`. The button ships `hidden` and shows only once the server answered for a Mac ("Local model" once one is installed); button AND Settings group stay hidden for `not-macos`, for a refusal and while the first request is in flight; refused means `403` with `errorCode: FORBIDDEN` (the auth layer's `403 PASSWORD_CHANGE_REQUIRED` is a failed request, asked again on `codeman:me`). Remove asks first and deletes the downloaded model unless the box is cleared (nothing else in the UI can free that space later). Not on the phone overview. Tests: `test/local-model-ui.test.ts`, `test/local-model-i18n.test.ts`; the visual walk is a scratch Playwright script, not a test. +**Run a model on this Mac** (`local-model-ui.js`; welcome button `#welcomeLocalModelBtn`, chooser window `#localModelModal`, App Settings > Models row `#localModelSettings`; server rules in the root CLAUDE.md, Local model): ONE window does everything (choose, confirm, progress, paused, failed, installed, no recommendation); the button and the Settings row only open it. Which screen shows follows `install.state` of `GET /api/local-model`; the page itself holds only the selection and whether the person is on the chooser or the confirm screen. ⚠️ The window is ONE frame for the whole flow: a fixed height on desktop (`.modal-content.local-model-window`), App Settings' boxed close button, the body scrolling between the header and a foot of its own (`#localModelWindowFoot`): every screen's last part (`.lm-foot`, or the `.lm-remove` question) is moved there by `_renderLocalModelWindow()`, so a button never moves away from under the pointer and is never clipped; a test that looks for a button looks in the frame, not the body. The short screens are centred in that frame on desktop and sit above the buttons on a phone (`data-screen` on the body). ⚠️ The memory bar (`.lm-bar`, `role="meter"`) is the one strong element: filled to the selected row's `budgetShare`, the model at its PEAK (the legend says so, and the installed line uses the same words beside what the model takes now, so the two figures are never read as a contradiction), the memory map (`Candidate.memory`: the model, its context and the brief peaks side by side, each named in the legend, on a track of `--text-muted` at about a third) in the feature's own colours (`--lm-*`: white for the feature, turned over to dark ink on the light skins, blue the context, green good, amber tight, orange slow, rose the brief peaks, deeper on the light skins), never `--accent`, which the owner rejected as too much blue (about 3:1 against the window, so the free part can be seen; a border token is 1.5:1 and the inputs' `--bg-input` is the window's own surface on the dark skins), 10px, no gradient or glow, and its width transition is the only motion (off under `prefers-reduced-motion`); a repaint starts each bar at the last width of its kind, so keep `_settleLocalModelBars()` after every body write. The figure beside it is an estimate and says "about" in whole GB (`localModelWholeGb()` on the server's text); only the download figure keeps tabular figures. ⚠️ The rows are the server's pick first, then the other models by download size, largest first (`localModelCandidates()`): the server's alternatives are its ranking, which no column shows. ⚠️ The download bar means ONE thing, the model download: at the start while the runtime is fetched, gone once the model is in (the step list carries verify, agent and connect); the first paint after an install finished shows "Start a session" alone (`justInstalled`), an error on an installed model is the headline with a grey dot, and Remove is quiet everywhere but red in its own question, never the accent. ⚠️ The window polls the GET once a second WHILE OPEN and never otherwise (no SSE event): `closeLocalModelWindow()` clears the timer, a background tab asks nothing, an unchanged answer repaints nothing, and a tick that moved only the download replaces `.lm-meter` alone, so a button is never swapped out under a click. A read that was already under way when a verb answered is dropped (`_localModelVerbs`), or the old state flashes back. ⚠️ The consent is bound to the size shown: the install request carries the row's `installBytes` as `acknowledgedBytes`, and a 409 `size-changed` shows `expectedGb` and sends `expectedBytes` next; never compute a total here. ⚠️ A button exists only for an action in `install.actions`, and after an error exactly one helpful action (`error.next`, already adapted by the server to the state: `start` on an installed model, `retry` on a job) plus a quiet Remove; an error's text is split after its first sentence (`localModelSentences()`, which knows the ideographic full stop) and only that sentence is the headline. A refusal the server names (a 400, a full disk) carries `data.message` like a 409 and is printed from it, never from the English `error` text. ⚠️ Every dynamic string goes in through `textContent` (model, coding agent and chip names, an error's detail, session names, the folder and the install command are someone else's text); the window body, the button and the row carry `data-i18n-skip` and the module translates its own sentences at render time, so a language or display-name change repaints from the module (the `` observer). ⚠️ Labels and sentences come from the payload (`{ text, vars }` through `localModelT`); the module holds no list of models or coding agents, compares no CLI id (the agent select's values are positions in the server's list, the id travels only as data into the install request and `selectCustomModelEntry`) and never contains the word "Recommended". ⚠️ `test/local-model-i18n.test.ts` harvests every `localModelT('...')` literal: a new string is a single-quoted literal with no apostrophe and gets a zh-CN entry, the only non-literal calls are the two payload ones, and a unit alone (`23.1 GB`) is not a translator call. ⚠️ Sizes are printed as sent (decimal GB text), bytes are never turned into a size; the installed memory alone is `memClassGb`. ⚠️ The model list is a real radio group (`role="radiogroup"`, roving `tabindex`, arrows, Home, End, the focus follows through the repaint's own focus restore, keyed by `data-lm-key`); the columns line up through `subgrid` with a fixed-track `@supports` fallback, and under 560px a row is two lines (mobile.css). ⚠️ The window has its OWN `FocusTrap` (`_localModelFocusTrap`, never `activeFocusTrap`: it opens on top of App Settings) and app.js claims its Escape before `closeAllPanels()`. ⚠️ Its buttons are the Git worktrees dialog's `.wt-btn` set, never `.btn-toolbar`: the skin block greys `.btn-toolbar.btn-primary` and the phone block pins every `.btn-toolbar` to 26px with `!important`. ⚠️ "Start a session" re-reads the settings and the CLI list first (`loadAppSettingsFromServer`, `loadCliListForSettings`: the server switched the endpoints flag on and may have installed the agent a moment ago), then calls the existing `selectCustomModelEntry(install.cli, install.endpointId)`. The button ships `hidden` and shows only once the server answered for a Mac ("Local model" once one is installed); button AND Settings group stay hidden for `not-macos`, for a refusal and while the first request is in flight; refused means `403` with `errorCode: FORBIDDEN` (the auth layer's `403 PASSWORD_CHANGE_REQUIRED` is a failed request, asked again on `codeman:me`). Remove asks first and deletes the downloaded model unless the box is cleared (nothing else in the UI can free that space later). Not on the phone overview. Tests: `test/local-model-ui.test.ts`, `test/local-model-i18n.test.ts`; the visual walk is a scratch Playwright script, not a test. **Home-screen session order** (`CodemanSessionOrder` in constants.js, pure): BOTH home screens (phone overview, desktop rail) must order rows through this ONE comparator. Rank `needs` → `error` → `waiting` → `working` → `idle` → `done`. ⚠️ The tiebreak flips: states a session is still IN sort oldest-first, states it has STOPPED sort newest-first. ⚠️ The running group keys off `lastSubmitAt`, never `lastActivityAt` (a working pane repaints constantly). ⚠️ A 0 stamp means unknown and sorts last within its state. Final tiebreak is `orderIndex`, so the list never shuffles. The tab strip itself is NOT sorted by this. Test: `test/session-overview-order.test.ts`. → [architecture-invariants#home-screen-session-order](../../docs/architecture-invariants.md#home-screen-session-order) diff --git a/src/web/public/styles.css b/src/web/public/styles.css index d712f4cd..af663547 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -22312,37 +22312,51 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til body scrolling between them. A click never moves the next button away. ═══════════════════════════════════════════════════════════════ */ -/* The feature's own colours. Violet is what the local model is known by, on - the start screen and in its window; the others carry meaning (green good, - amber tight, orange slow, teal the context, rose the brief peaks). All of them are set here, once, - and the light skins get deeper values so they hold on a pale page. */ +/* The feature's own colours. White is what the local model is known by, on the + start screen and in its window: it stands apart from the app's blue instead of + fighting it, and on a pale page the same idea turns to dark ink. The others + carry meaning (blue the context, green good, amber tight, orange slow, rose the + brief peaks). All of them are set here, once. */ :root { - --lm-violet: #a78bfa; - --lm-teal: #2dd4bf; + --lm-brand: #e6edf5; + --lm-context: #38b6f0; --lm-amber: #f5c451; --lm-orange: #fb923c; --lm-rose: #f58ba8; --lm-good: #4ade80; - --lm-cta-a: #8567f4; - --lm-cta-b: #6346e0; - --lm-cta-hover-a: #9479f7; - --lm-cta-hover-b: #7054ea; + --lm-cta-a: #ffffff; + --lm-cta-b: #dfe7f0; + --lm-cta-hover-a: #ffffff; + --lm-cta-hover-b: #eef3f8; + --lm-cta-ink: #11151c; + --lm-cta-disc: #11151c; + --lm-cta-glyph: #ffffff; + --lm-cta-glow: rgba(223, 231, 240, 0.45); } +/* A white button is gone on a pale page, so the light skins turn it over. */ html[data-skin='paper-gray'], html[data-skin='solarized-light'], html[data-skin='catppuccin-latte'], html[data-skin='rose-pine-dawn'] { - --lm-violet: #6d3fd8; - --lm-teal: #0b8378; + --lm-brand: #2a3140; + --lm-context: #1c6fb8; --lm-amber: #a86a00; --lm-orange: #c2500f; --lm-rose: #c43a68; --lm-good: #16803c; + --lm-cta-a: #333b4a; + --lm-cta-b: #11151c; + --lm-cta-hover-a: #434c5c; + --lm-cta-hover-b: #1f2530; + --lm-cta-ink: #ffffff; + --lm-cta-disc: #ffffff; + --lm-cta-glyph: #11151c; + --lm-cta-glow: rgba(17, 21, 28, 0.4); } /* The welcome button: the first thing on the start screen, above the launchers, - in the size of the primary button and in the feature's violet. */ + built like the primary button (dark ink, a solid disc) in the feature's colour. */ .welcome-local-model { margin-bottom: 1.1rem; height: 46px; @@ -22351,18 +22365,18 @@ html[data-skin='rose-pine-dawn'] { border: 1px solid var(--lm-cta-a); border-radius: 23px; background: linear-gradient(135deg, var(--lm-cta-a), var(--lm-cta-b)); - color: #fff; + color: var(--lm-cta-ink); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.005em; - box-shadow: 0 8px 24px -12px rgba(99, 70, 224, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18); + box-shadow: 0 8px 24px -12px var(--lm-cta-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .welcome-local-model:hover, .welcome-local-model:focus-visible { border-color: var(--lm-cta-hover-a); background: linear-gradient(135deg, var(--lm-cta-hover-a), var(--lm-cta-hover-b)); - color: #fff; + color: var(--lm-cta-ink); } /* `.welcome-chip` is inline-flex, so `[hidden]` needs re-asserting or the @@ -22379,7 +22393,8 @@ html[data-skin='rose-pine-dawn'] { padding: 8px; box-sizing: border-box; border-radius: 50%; - background: rgba(255, 255, 255, 0.18); + background: var(--lm-cta-disc); + color: var(--lm-cta-glyph); } /* The window: App Settings' chrome (`.modal`, `.modal-header`, the boxed @@ -22531,13 +22546,13 @@ html[data-skin='rose-pine-dawn'] { flex-direction: column; gap: 0.6rem; padding: 0.8rem 0.9rem 0.75rem; - border: 1px solid color-mix(in srgb, var(--lm-violet) 22%, var(--border)); + border: 1px solid color-mix(in srgb, var(--lm-brand) 22%, var(--border)); border-radius: 12px; background: linear-gradient( 120deg, - color-mix(in srgb, var(--lm-violet) 11%, transparent), - color-mix(in srgb, var(--lm-teal) 6%, transparent) 75% + color-mix(in srgb, var(--lm-brand) 11%, transparent), + color-mix(in srgb, var(--lm-context) 6%, transparent) 75% ), var(--bg-input); } @@ -22604,16 +22619,16 @@ html[data-skin='rose-pine-dawn'] { flex: none; height: 100%; border-radius: 2px; - background: linear-gradient(90deg, var(--lm-violet), var(--lm-teal)); + background: linear-gradient(90deg, var(--lm-brand), var(--lm-context)); transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .lm-part-model { - background: var(--lm-violet); + background: var(--lm-brand); } .lm-part-context { - background: var(--lm-teal); + background: var(--lm-context); } /* The brief peaks are not held all the time, so they are striped. */ @@ -22725,18 +22740,18 @@ html[data-skin='rose-pine-dawn'] { } .lm-model:focus-visible { - outline: 2px solid var(--lm-violet); + outline: 2px solid var(--lm-brand); outline-offset: -2px; } -/* Selected: violet on the reading edge and a fill that fades out to the right. */ +/* Selected: the feature's colour on the reading edge and a fill that fades out to the right. */ .lm-model-on, .lm-model-on:hover { - border-inline-start-color: var(--lm-violet); + border-inline-start-color: var(--lm-brand); background: linear-gradient( 90deg, - color-mix(in srgb, var(--lm-violet) 17%, transparent), - color-mix(in srgb, var(--lm-violet) 4%, transparent) + color-mix(in srgb, var(--lm-brand) 17%, transparent), + color-mix(in srgb, var(--lm-brand) 4%, transparent) ); } @@ -22749,8 +22764,8 @@ html[data-skin='rose-pine-dawn'] { } .lm-model-on .lm-radio { - border-color: var(--lm-violet); - background: radial-gradient(circle, var(--lm-violet) 0 3px, transparent 3.5px); + border-color: var(--lm-brand); + background: radial-gradient(circle, var(--lm-brand) 0 3px, transparent 3.5px); } /* The size tile: a model's billions of parameters, coloured by how large it is. */ @@ -22769,13 +22784,13 @@ html[data-skin='rose-pine-dawn'] { } .lm-tile-large { - background: color-mix(in srgb, var(--lm-violet) 20%, transparent); - color: var(--lm-violet); + background: color-mix(in srgb, var(--lm-brand) 20%, transparent); + color: var(--lm-brand); } .lm-tile-mid { - background: color-mix(in srgb, var(--lm-teal) 18%, transparent); - color: var(--lm-teal); + background: color-mix(in srgb, var(--lm-context) 18%, transparent); + color: var(--lm-context); } .lm-tile-small { @@ -22923,7 +22938,7 @@ html[data-skin='rose-pine-dawn'] { } .lm-select:focus-visible { - border-color: var(--lm-violet); + border-color: var(--lm-brand); } .lm-runs-hint { @@ -23084,8 +23099,8 @@ html[data-skin='rose-pine-dawn'] { } .lm-step-now .lm-step-mark { - border-color: var(--lm-violet); - background: radial-gradient(circle, var(--lm-violet) 0 3px, transparent 3.5px); + border-color: var(--lm-brand); + background: radial-gradient(circle, var(--lm-brand) 0 3px, transparent 3.5px); } .lm-step-stopped .lm-step-mark { @@ -23200,7 +23215,7 @@ html[data-skin='rose-pine-dawn'] { .lm-check input { margin: 0; - accent-color: var(--lm-violet); + accent-color: var(--lm-brand); } /* ── the foot: one promise on the left, the action on the right ──── */ @@ -23246,21 +23261,22 @@ html[data-skin='rose-pine-dawn'] { font-weight: 700; } -/* The main action is the feature's violet on every skin, like its start screen - button: white text on the same gradient, so no skin needs a rule of its own. */ +/* The main action wears the same gradient and ink as the start screen button, + so no skin needs a rule of its own. */ .local-model-window .wt-btn-primary.lm-btn { border-color: var(--lm-cta-a); background: linear-gradient(135deg, var(--lm-cta-a), var(--lm-cta-b)); - color: #fff; + color: var(--lm-cta-ink); } .local-model-window .wt-btn-primary.lm-btn:hover:not(:disabled) { border-color: var(--lm-cta-hover-a); background: linear-gradient(135deg, var(--lm-cta-hover-a), var(--lm-cta-hover-b)); + color: var(--lm-cta-ink); } .local-model-window .wt-btn.lm-btn:focus-visible { - outline: 2px solid var(--lm-violet); + outline: 2px solid var(--lm-brand); outline-offset: 2px; } diff --git a/test/local-model-ui.browser.test.ts b/test/local-model-ui.browser.test.ts index 29380170..d4def082 100644 --- a/test/local-model-ui.browser.test.ts +++ b/test/local-model-ui.browser.test.ts @@ -7,9 +7,9 @@ * same edge, under their captions, and every tag starts on the same edge; * - a row is one line on a desktop and two lines under 560px, where nothing runs off the * side and the buttons take the full width; - * - the memory bar is 10px high and filled to the selected model's share of its track, and + * - the memory bar is 12px high and filled to the selected model's share of its track, and * the fill follows the selection; - * - the selected row carries the accent on its reading edge; + * - the selected row carries the feature's colour on its reading edge; * - the welcome button is really gone while it is `hidden`, and the window paints above App * Settings. * @@ -218,8 +218,8 @@ describe('the local model window (real Chromium)', () => { await load(1440); const [button] = await boxes('#welcomeLocalModelBtn'); expect(button.width).toBeGreaterThan(100); - // One more chip of the launcher family: the same height as the chips above it would have. - expect(Math.round(button.height)).toBe(30); + // The first thing on the start screen, in the size of the primary launcher below it. + expect(Math.round(button.height)).toBe(46); expect(await p.textContent('#welcomeLocalModelLabel')).toBe('Run a local model'); }); @@ -250,12 +250,14 @@ describe('the local model window (real Chromium)', () => { expect(names[i].right).toBeLessThanOrEqual(tags[i].left + 0.6); expect(speeds[i].right).toBeLessThanOrEqual(sizes[i].left + 0.6); } - // What is in a row lines up with the rest of the window on both edges. + // The memory panel lines up with the rows on both edges, and the bar with its figure. const [figure] = await boxes('.lm-figure'); const [radio] = await boxes('.lm-radio'); const [bar] = await boxes('.lm-bar'); - expect(same([figure.left, radio.left, bar.left])).toBe(true); - expect(same([bar.right, sizes[0].right])).toBe(true); + const [meter] = await boxes('.lm-meter'); + expect(same([figure.left, bar.left])).toBe(true); + expect(same([meter.left, radio.left])).toBe(true); + expect(same([meter.right, sizes[0].right])).toBe(true); }); it('fills the bar to the selected model, and the fill follows the selection', async () => { @@ -264,8 +266,8 @@ describe('the local model window (real Chromium)', () => { const share = async () => { const [track] = await boxes('.lm-bar'); const [fill] = await boxes('.lm-bar-fill'); - expect(Math.round(track.height)).toBe(10); - expect(Math.round(fill.height)).toBe(10); + expect(Math.round(track.height)).toBe(12); + expect(Math.round(fill.height)).toBe(12); expect(same([track.left, fill.left])).toBe(true); return fill.width / track.width; }; @@ -287,9 +289,14 @@ describe('the local model window (real Chromium)', () => { // The track is not the window's own colour, or the free part could not be seen. const paint = await p.evaluate(() => { const css = (sel: string, prop: string) => getComputedStyle(document.querySelector(sel)!).getPropertyValue(prop); + // The feature's colour as the browser paints it: a custom property reads back unresolved. + const probe = document.body.appendChild(document.createElement('i')); + probe.style.color = 'var(--lm-brand)'; + const brand = getComputedStyle(probe).color; + probe.remove(); return { + brand, track: css('.lm-bar', 'background-color'), - fill: css('.lm-bar-fill', 'background-color'), fillImage: css('.lm-bar-fill', 'background-image'), window: css('.local-model-window', 'background-color'), edge: css('.lm-model-on', 'border-left-color'), @@ -297,11 +304,12 @@ describe('the local model window (real Chromium)', () => { }; }); expect(paint.track).not.toBe(paint.window); - expect(paint.track).not.toBe(paint.fill); - expect(paint.fillImage).toBe('none'); - // The selected row carries the accent (the fill's colour) on its reading edge. - expect(paint.edge).toBe(paint.fill); - expect(paint.idleEdge).not.toBe(paint.fill); + expect(paint.track).not.toBe(paint.brand); + // Without a memory map the one fill runs from the feature's colour to the context's. + expect(paint.fillImage).toContain('linear-gradient'); + // The selected row carries the feature's colour on its reading edge. + expect(paint.edge).toBe(paint.brand); + expect(paint.idleEdge).not.toBe(paint.brand); }); it('stacks two lines a row under 560px, with nothing running off the side', async () => { @@ -323,10 +331,10 @@ describe('the local model window (real Chromium)', () => { const [win] = await boxes('.local-model-window'); expect(Math.round(win.width)).toBe(390); expect(Math.round(win.height)).toBe(844); - const [bar] = await boxes('.lm-bar'); + const [meter] = await boxes('.lm-meter'); const [button] = await boxes('.lm-buttons button'); - expect(same([bar.left, button.left])).toBe(true); - expect(same([bar.right, button.right])).toBe(true); + expect(same([meter.left, button.left])).toBe(true); + expect(same([meter.right, button.right])).toBe(true); expect(button.height).toBeGreaterThanOrEqual(44); const overflow = await p.evaluate(() => { const body = document.getElementById('localModelWindowBody')!;