Dropdowns: compact (rows 24, inset 4, surface 10)

piweb/hf-design.patch

@@ -10787,10 +10787,10 @@ index 0b8f66a..9a60b64 100644
  .sidebar-tool-button.is-active,
 diff --git a/app/ui.css b/app/ui.css
 new file mode 100644
-index 0000000..32e2abf
+index 0000000..f4133ef
 --- /dev/null
 +++ b/app/ui.css
-@@ -0,0 +1,935 @@
+@@ -0,0 +1,944 @@
 +/* The shared components on Base UI (components/ui/*): menus, tooltips,
 +   popovers and the composer's suggestion list. Popups are portaled to <body>,
 +   so they stack by the positioner's z-index, above every pane. */
@@ -10804,37 +10804,43 @@ index 0000000..32e2abf
 +
 +/* ---------------------------------------------------------------- dropdowns
 +   Every dropdown (menus, the composer's list, popovers, the sidebar's menus,
-+   the model field, the header's panels) keeps one set of proportions, measured
-+   on design/dropdown-spacing-reference.jpg and design/model-dropdown-reference.jpg
-+   (phone captures at 2.81x: 15.7px text, rows 32.7px, rows inset 9.3px and
-+   rounded 8px, surfaces rounded 14-18px, icons 16.7px and text 44.5px from the
-+   edge) and scaled to Pi Web's 13px:
-+   - a 14px-rounded surface, set off by a hairline and a soft shadow;
-+   - rows inset 7px from its edge and rounded 7px, so the two curves run
++   the model field, the header's panels) keeps one set of proportions. On a
++   desktop they are design/dropdown-compact-reference.jpg's (a desktop capture
++   at 2x: rows 24px, inset 4px, surface rounded 10px, icons centred 19.5px and
++   text 34px from the edge, a separator 4px from the rows):
++   - a 10px-rounded surface, set off by a hairline and a soft shadow;
++   - rows inset 4px from its edge and rounded 6px, so the two curves run
 +     parallel (the surface's radius is the inset plus the row's);
-+   - one icon column 14px from the edge and one text column at 37px; whatever
++   - one icon column 12px from the edge and one text column at 34px; whatever
 +     has no icon starts on the icon column, as the references' section labels
 +     and search line do: section labels, filters, headers, and rows without an
 +     icon (the effort levels), never an empty icon's room before a label;
-+   - rows 28px, back to back; a section label at 12px in --text-dim, in
++   - rows 24px, back to back; a section label at 12px in --text-dim, in
 +     sentence case; a separator edge to edge with the inset above and below;
 +   - a row's description inline after its label, the same size, in --text-dim.
-+   A touch screen takes the reference's own scale (15px text, 32px rows).
++   A touch screen keeps the phone captures' scale, rows a finger can take
++   (design/dropdown-spacing-reference.jpg and design/model-dropdown-reference.jpg
++   at 2.81x: 15px text, 32px rows inset 8px).
 +   A dropdown that scrolls keeps its rows centred: its scrollbar is as wide as
 +   the inset and stands in the right inset's place (`--popup-inset-end`, set by
 +   components/ui/scrollbar-inset.ts while a bar takes room). */
 +:root {
 +  --popup-font: 13px;
 +  --popup-label-font: 12px;
-+  --popup-radius: 14px;
-+  --popup-inset: 7px;
-+  --popup-row-radius: 7px;
-+  --popup-row-height: 28px;
-+  --popup-row-pad: 7px;
++  --popup-radius: 10px;
++  --popup-inset: 4px;
++  --popup-row-radius: 6px;
++  --popup-row-height: 24px;
++  --popup-row-pad: 8px;
 +  --popup-icon: 14px;
-+  --popup-gap: 9px;
-+  --popup-text-gap: 10px;
++  --popup-gap: 8px;
++  --popup-text-gap: 8px;
 +  --popup-edge: calc(var(--popup-inset) + var(--popup-row-pad));
++  /* Dialogs on the same surface (the command bar, the folder picker) are larger than
++     a dropdown: their rows take the dropdowns' rows, inset further from the edge. */
++  --dialog-inset: 8px;
++  --dialog-radius: calc(var(--dialog-inset) + var(--popup-row-radius));
++  --dialog-edge: calc(var(--dialog-inset) + var(--popup-row-pad));
 +  /* The right inset: the scrollbar's place while one takes room. */
 +  --popup-inset-end: var(--popup-inset);
 +  --popup-hairline: color-mix(in srgb, var(--text-strong) 10%, transparent);
@@ -10891,7 +10897,8 @@ index 0000000..32e2abf
 +  background: var(--line);
 +}
 +/* Scrolling: the bar takes the right inset (components/ui/scrollbar-inset.ts
-+   measures it), as wide as the inset in Chromium and Safari, thin in Firefox. */
++   measures it), as wide as the inset in Chromium and Safari, thin in Firefox;
++   its thumb fills it while the pointer is on it. */
 +.ui-menu[data-scrollbar],
 +.ui-composer-list-scroll[data-scrollbar],
 +.ui-dropdown-scroll[data-scrollbar],
@@ -10901,14 +10908,18 @@ index 0000000..32e2abf
 +.ui-menu::-webkit-scrollbar,
 +.ui-composer-list-scroll::-webkit-scrollbar,
 +.ui-dropdown-scroll::-webkit-scrollbar,
-+.sidebar-menu::-webkit-scrollbar { width: 7px; }
++.sidebar-menu::-webkit-scrollbar { width: 4px; }
 +.ui-menu::-webkit-scrollbar-thumb,
 +.ui-composer-list-scroll::-webkit-scrollbar-thumb,
 +.ui-dropdown-scroll::-webkit-scrollbar-thumb,
-+.sidebar-menu::-webkit-scrollbar-thumb { border-width: 1.5px; }
++.sidebar-menu::-webkit-scrollbar-thumb { border-width: 0.5px; }
++.ui-menu::-webkit-scrollbar-thumb:hover,
++.ui-composer-list-scroll::-webkit-scrollbar-thumb:hover,
++.ui-dropdown-scroll::-webkit-scrollbar-thumb:hover,
++.sidebar-menu::-webkit-scrollbar-thumb:hover { border-width: 0; }
 +/* Where the surface itself scrolls, the thumb keeps off its rounded corners. */
 +.ui-menu::-webkit-scrollbar-track,
-+.sidebar-menu::-webkit-scrollbar-track { margin: 7px 0; }
++.sidebar-menu::-webkit-scrollbar-track { margin: var(--popup-radius) 0; }
 +@media (pointer: coarse) {
 +  .ui-menu::-webkit-scrollbar,
 +  .ui-composer-list-scroll::-webkit-scrollbar,
@@ -10918,8 +10929,6 @@ index 0000000..32e2abf
 +  .ui-composer-list-scroll::-webkit-scrollbar-thumb,
 +  .ui-dropdown-scroll::-webkit-scrollbar-thumb,
 +  .sidebar-menu::-webkit-scrollbar-thumb { border-width: 2px; }
-+  .ui-menu::-webkit-scrollbar-track,
-+  .sidebar-menu::-webkit-scrollbar-track { margin: 8px 0; }
 +}
 +@supports not selector(::-webkit-scrollbar) {
 +  .ui-menu,
@@ -11015,19 +11024,19 @@ index 0000000..32e2abf
 +}
 +.ui-dropdown-row:focus-visible { outline: none; box-shadow: none; }
 +.ui-dropdown-row[aria-selected="true"] { color: var(--text-strong); }
-+.ui-dropdown-row.has-gutter { padding-right: calc(var(--popup-row-pad) + 28px); }
++.ui-dropdown-row.has-gutter { padding-right: calc(var(--popup-row-pad) + var(--popup-row-height)); }
 +.ui-dropdown-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--popup-icon); height: var(--popup-icon); color: var(--text-muted); }
 +.ui-dropdown-row-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 +.ui-dropdown-check { display: flex; flex: none; width: 14px; color: var(--text-muted); }
 +.ui-dropdown-star {
 +  position: absolute;
 +  top: 50%;
-+  right: 4px;
++  right: 2px;
 +  display: flex;
 +  align-items: center;
 +  justify-content: center;
-+  width: 24px;
-+  height: 24px;
++  width: calc(var(--popup-row-height) - 4px);
++  height: calc(var(--popup-row-height) - 4px);
 +  padding: 0;
 +  border: 0;
 +  border-radius: calc(var(--popup-row-radius) - 2px);
@@ -11450,7 +11459,7 @@ index 0000000..32e2abf
 +  width: min(640px, calc(100vw - 32px));
 +  max-height: min(560px, calc(100dvh - max(12vh, 56px) - 24px));
 +  overflow: hidden;
-+  border-radius: var(--popup-radius);
++  border-radius: var(--dialog-radius);
 +  background: var(--bg-elevated);
 +  box-shadow: var(--popup-shadow);
 +  color: var(--text);
@@ -11503,7 +11512,7 @@ index 0000000..32e2abf
 +  display: flex;
 +  flex-shrink: 0;
 +  gap: 8px;
-+  padding: 10px calc(var(--popup-inset) + var(--popup-row-pad)) 4px;
++  padding: 10px var(--dialog-edge) 4px;
 +  color: var(--text-dim);
 +  font-size: var(--popup-label-font);
 +}
@@ -11511,7 +11520,7 @@ index 0000000..32e2abf
 +.command-bar-list {
 +  flex: 1 1 auto;
 +  min-height: 0;
-+  padding: 0 var(--popup-inset) var(--popup-inset);
++  padding: 0 var(--dialog-inset) var(--dialog-inset);
 +  overflow-y: auto;
 +  overscroll-behavior: contain;
 +}
@@ -11566,7 +11575,7 @@ index 0000000..32e2abf
 +   components/DirectoryPicker.tsx: the command bar's surface (a dropdown's, larger), a
 +   15px title, a path row of 32px controls (up, the path as code, Go), the folders as
 +   rows in the menus' proportions, and the footer's actions in their hierarchy. Title,
-+   folder icons and New folder's icon share the menus' edge (--popup-edge); on a touch
++   folder icons and New folder's icon share the dialogs' edge (--dialog-edge); on a touch
 +   screen the popup tokens take the references' larger scale. */
 +.directory-picker-backdrop {
 +  position: fixed;
@@ -11585,7 +11594,7 @@ index 0000000..32e2abf
 +  max-width: 100%;
 +  height: min(560px, 100%);
 +  overflow: hidden;
-+  border-radius: var(--popup-radius);
++  border-radius: var(--dialog-radius);
 +  background: var(--bg-elevated);
 +  box-shadow: var(--popup-shadow);
 +  color: var(--text);
@@ -11596,7 +11605,7 @@ index 0000000..32e2abf
 +  align-items: center;
 +  gap: 8px;
 +  height: 52px;
-+  padding: 0 var(--popup-inset) 0 var(--popup-edge);
++  padding: 0 var(--dialog-inset) 0 var(--dialog-edge);
 +}
 +.directory-picker-title {
 +  flex: 1 1 auto;
@@ -11614,7 +11623,7 @@ index 0000000..32e2abf
 +  flex-shrink: 0;
 +  align-items: center;
 +  gap: 6px;
-+  padding: 0 var(--popup-inset) var(--popup-inset);
++  padding: 0 var(--dialog-inset) var(--dialog-inset);
 +  border-bottom: 1px solid var(--popup-hairline);
 +}
 +.directory-picker-path {
@@ -11636,7 +11645,7 @@ index 0000000..32e2abf
 +  flex: 1 1 auto;
 +  flex-direction: column;
 +  min-height: 0;
-+  padding: var(--popup-inset);
++  padding: var(--dialog-inset);
 +  overflow-y: auto;
 +  overscroll-behavior: contain;
 +}
@@ -11687,7 +11696,7 @@ index 0000000..32e2abf
 +  align-items: center;
 +  justify-content: flex-end;
 +  gap: 8px;
-+  padding: 10px var(--popup-inset);
++  padding: 10px var(--dialog-inset);
 +  border-top: 1px solid var(--popup-hairline);
 +}
 +/* Quiet, on the left, its icon on the folders' column. */
@@ -32273,10 +32282,10 @@ index 0000000..c9e3f78
 +}
 diff --git a/components/ui/dropdowns.test.mjs b/components/ui/dropdowns.test.mjs
 new file mode 100644
-index 0000000..d9595de
+index 0000000..2b08674
 --- /dev/null
 +++ b/components/ui/dropdowns.test.mjs
-@@ -0,0 +1,122 @@
+@@ -0,0 +1,143 @@
 +import assert from "node:assert/strict";
 +import { readFileSync, readdirSync } from "node:fs";
 +import test from "node:test";
@@ -32293,17 +32302,38 @@ index 0000000..d9595de
 +test("every dropdown's surface radius is its inset plus its rows' radius, at both scales", () => {
 +  const desktop = tokens(css.slice(css.indexOf(":root {\n  --popup-font"), css.indexOf("html.dark {\n  --popup-shadow")));
 +  const touch = { ...desktop, ...tokens(css.slice(css.indexOf("@media (pointer: coarse)"), css.indexOf("/* The surface, shared by every dropdown. */"))) };
++  // Each scale's reference, in its own pixels: design/dropdown-compact-reference.jpg on a desktop
++  // (2x: rows 48, inset 7-8, icons centred 39, text at 68, the text 20 tall for 13px), the phone
++  // captures on a touch screen (2.81x, given at 1x: 15.7px text, rows 32.7, inset 9.3, text at 44.5).
++  const references = {
++    desktop: { font: 13, row: 24, inset: 3.75, textColumn: 34, iconCenter: 19.5 },
++    touch: { font: 15.7, row: 32.7, inset: 9.3, textColumn: 44.5, iconCenter: 16.7 + 16.7 / 2 },
++  };
 +  for (const [name, scale] of [["desktop", desktop], ["touch", touch]]) {
 +    const px = (key) => Number.parseFloat(scale[key]);
++    const ref = references[name];
++    const relative = (value, target) => Math.abs(value / px("popup-font") - target / ref.font);
 +    assert.equal(px("popup-radius"), px("popup-inset") + px("popup-row-radius"), `${name}: concentric corners`);
-+    // The reference (at 2.81x): 15.7px text, text column 44.5px from the edge, rows 32.7px.
 +    const textColumn = px("popup-inset") + px("popup-row-pad") + px("popup-icon") + px("popup-gap");
-+    assert.ok(Math.abs(textColumn / px("popup-font") - 44.5 / 15.7) < 0.12, `${name}: text column ${textColumn}px for ${scale["popup-font"]}`);
-+    assert.ok(Math.abs(px("popup-row-height") / px("popup-font") - 32.7 / 15.7) < 0.1, `${name}: row height`);
-+    // Rows inset about 0.6 of the text size (9.3px at 15.7px).
-+    assert.ok(Math.abs(px("popup-inset") / px("popup-font") - 9.3 / 15.7) < 0.08, `${name}: inset`);
++    assert.ok(relative(textColumn, ref.textColumn) < 0.12, `${name}: text column ${textColumn}px for ${scale["popup-font"]}`);
++    const iconCenter = px("popup-inset") + px("popup-row-pad") + px("popup-icon") / 2;
++    assert.ok(relative(iconCenter, ref.iconCenter) < 0.12, `${name}: icon column centred at ${iconCenter}px`);
++    assert.ok(relative(px("popup-row-height"), ref.row) < 0.1, `${name}: row height`);
++    assert.ok(relative(px("popup-inset"), ref.inset) < 0.08, `${name}: inset`);
++  }
++  assert.equal(desktop["popup-row-height"], "24px", "a desktop takes the compact reference's rows");
++  assert.equal(touch["popup-font"], "15px", "a touch screen keeps the phone captures' scale");
++});
++
++test("dialogs on the dropdowns' surface keep a dialog's inset, their rows the dropdowns'", () => {
++  const rules = (selector) => [...css.matchAll(new RegExp(`(?:^|\\n)${selector.replace(".", "\\.")}(?:-[a-z-]+)? \\{([^}]*)\\}`, "g"))].map((match) => match[1]).join("\n");
++  for (const dialog of [".command-bar", ".directory-picker"]) {
++    const body = rules(dialog);
++    assert.match(body, /border-radius: var\(--dialog-radius\)/, `${dialog}: a dialog's radius`);
++    assert.doesNotMatch(body, /var\(--popup-(inset|edge|radius)\)/, `${dialog}: no dropdown inset, edge or radius`);
 +  }
-+  assert.equal(touch["popup-font"], "15px", "a touch screen takes the reference's own scale");
++  assert.match(rules(".directory-picker-entry"), /height: var\(--popup-row-height\)/, "the folders are dropdown rows");
++  assert.match(css, /--dialog-radius: calc\(var\(--dialog-inset\) \+ var\(--popup-row-radius\)\)/, "concentric corners");
 +});
 +
 +test("every popup surface shares the dropdown rules", () => {
@@ -35276,7 +35306,7 @@ index 7fb1c0c..9c6aa29 100644
  
 diff --git a/docs/agents/desktop-shell.md b/docs/agents/desktop-shell.md
 new file mode 100644
-index 0000000..0f1c98c
+index 0000000..a9ccc50
 --- /dev/null
 +++ b/docs/agents/desktop-shell.md
 @@ -0,0 +1,75 @@
@@ -35285,7 +35315,7 @@ index 0000000..0f1c98c
 +Pi Web's frame follows Claude Code Desktop's Code tab: a sidebar of sessions, a header, then the conversation and the panes it opened as tiles. Pi's power stays reachable through "/", the composer's "+" menu, the title's session menu and Settings rather than permanent chrome. Popups are Base UI (`@base-ui/react` 1.8.0) through the wrappers in `components/ui/`, styled in `app/ui.css`; the header and tiles in `app/shell.css`. The Code tab is claude.ai web code (its chunks are on assets-proxy.anthropic.com, no Cloudflare there); the tile behaviour below was read from its tile engine and side-pane store, not from screenshots. The conversation outline (upstream's ChatMinimap) is removed.
 +
 +## Dropdowns (`app/ui.css` "dropdowns", `components/ui/menu.tsx`, `app/sidebar-menu.css`)
-+- **One set of proportions for every dropdown**, measured on `design/dropdown-spacing-reference.jpg` and `design/model-dropdown-reference.jpg` (phone captures at 2.81x: 15.7px text, rows 32.7px, rows inset 9.3px and rounded about 8px, surfaces rounded 14-18px, icons 16.7px and text 44.5px from the edge) and kept as `--popup-*` tokens: at 13px, a 14px surface (hairline + soft shadow, `--popup-shadow`), rows 28px inset 7px and rounded 7px (the surface's radius is the inset plus the row's), icons 14px from the edge, text at 37px, section labels 12px `--text-dim` in sentence case on the icon column, separators edge to edge with the inset above and below, a row's description inline after its label. Touch screens (`pointer: coarse`) take the reference's own scale: 15px, 32px rows, 8px inset, 16px surface. A dropdown that scrolls keeps its rows centred: Pi Web's Chromium scrollbars take room (10px, `app/globals.css`), which held a scrolling menu's rows 7px from the left and 17px from the right; dropdown scrollers take a scrollbar as wide as the inset, and `components/ui/scrollbar-inset.ts` marks the scroller (`data-scrollbar`, `--popup-scrollbar`) while one shows so the right inset (`--popup-inset-end`) gives way to it. Separators then end at the bar. Headless Chromium hides scrollbars: tests that check this launch without `--hide-scrollbars`. `components/ui/dropdowns.test.mjs` checks the ratios against the reference and that the sidebar's menus use the tokens.
++- **One set of proportions for every dropdown**, kept as `--popup-*` tokens. On a desktop, `design/dropdown-compact-reference.jpg`'s (a desktop capture at 2x: rows 24px, inset about 4px, surface rounded 10px, icons centred 19.5px and text 34px from the edge): at 13px, a 10px surface (hairline + soft shadow, `--popup-shadow`), rows 24px inset 4px and rounded 6px (the surface's radius is the inset plus the row's), icons 12px from the edge (centred at 19px), text at 34px, section labels 12px `--text-dim` in sentence case on the icon column, separators edge to edge with the inset above and below, a row's description inline after its label. Touch screens (`pointer: coarse`) keep the phone captures' scale (`design/dropdown-spacing-reference.jpg`, `design/model-dropdown-reference.jpg`, 2.81x): 15px, 32px rows, 8px inset, 16px surface. A dropdown that scrolls keeps its rows centred: Pi Web's Chromium scrollbars take room (10px, `app/globals.css`), which held a scrolling menu's rows 7px from the left and 17px from the right; dropdown scrollers take a scrollbar as wide as the inset (4px, its thumb filling it under the pointer), and `components/ui/scrollbar-inset.ts` marks the scroller (`data-scrollbar`, `--popup-scrollbar`) while one shows so the right inset (`--popup-inset-end`) gives way to it. Separators then end at the bar. Headless Chromium hides scrollbars: tests that check this launch without `--hide-scrollbars`. `components/ui/dropdowns.test.mjs` checks each scale's ratios against its reference and that the sidebar's menus use the tokens.
 +- Who follows it: Base UI menus (`.ui-menu`), the "/" "@" and history list (`.ui-composer-list`: its scroller holds the side inset so a group's line can reach the edges), popovers (content on the icon column), the sidebar's menus and their filter (a plain line like the reference's "Search here…"; the files tab's `classic` look is gone, only paths keep code type), the phone sheet (the same inset rounded rows, 44px), the model field (`ModelSelector`/`SelectorRow`: `.ui-dropdown-*`, check on the right as in the menus), and the header's panels (`.header-dropdown`: session info, system prompt, tools, subagents, branches, inset 8px under the header).
 +- **One icon column**: model rows carry their maker's mark (`components/ModelMark.tsx`: the repo's organisation on a router such as Hugging Face, else the provider; brand colours in grays), whatever has no icon starts on the icon column as the references' section labels and search line do (the effort levels, the model field's clear row: never an empty icon's room before a label), "/" rows show their kind (the "+" menu's icons: commands, connectors, a page for prompts, skills) and history rows a clock.
 +- **`MenuSection`** is the only way to label a group: Base UI throws on a `GroupLabel` outside a `Group`, and the Browser pane's ⋯ menu did that, which took the page down.
@@ -35353,7 +35383,7 @@ index 0000000..0f1c98c
 +Settings › MCP is called Connectors. "Add Hugging Face" goes through the ordinary add route (pi syntax kept, so the header's `!command` stays as written): `Authorization` is printed on every connection from `HF_TOKEN` or the token the Space lends the machine (`~/.cache/huggingface/token`). pi resolves header values uncached (`resolveConfigValueUncached`), so a refreshed token is used at the next connection and a token taken back fails the connection instead of leaking a stale one.
 +
 +## Folder picker (`components/DirectoryPicker.tsx`, `app/ui.css` "folder picker")
-+- The command bar's surface (`--bg-elevated`, `--popup-radius`, `--popup-shadow`), a 15px title, a path row of 32px controls (up, the path in mono on `--bg-surface`, Go as secondary), the folders as rows in the menus' proportions (`--popup-row-height`, `--popup-highlight`; a touch screen takes the references' scale) and a footer of `.ui-btn`s: New directory quiet on the left, Cancel secondary, Select this folder primary. Title, folder icons and New directory's icon share `--popup-edge`.
++- The command bar's surface (`--bg-elevated`, `--dialog-radius`, `--popup-shadow`; dialogs keep an 8px inset, `--dialog-inset`, where dropdowns have 4px), a 15px title, a path row of 32px controls (up, the path in mono on `--bg-surface`, Go as secondary), the folders as rows in the menus' proportions (`--popup-row-height`, `--popup-highlight`; a touch screen takes the references' scale) and a footer of `.ui-btn`s: New directory quiet on the left, Cancel secondary, Select this folder primary. Title, folder icons and New directory's icon share `--dialog-edge` (16px, the command bar field's).
 +- A new folder is named in a row at the top of the list (Enter creates it and opens it, so Select stays the only commit; Escape closes only the row; a refused name keeps the focus). After a navigation the path shows its end with the caret there, and focus that left with a replaced row returns to the path. Escape closes the picker from anywhere (window, capture phase, marked handled so the global Escape does not also stop a run); Tab stays inside (`keepTabInside`).
 diff --git a/docs/agents/files-and-access.md b/docs/agents/files-and-access.md
 index 71db8fb..eefcad7 100644