Pi Web fork: effort rows on the icon column; a scrolling dropdown keeps its rows centred

piweb/hf-design.patch

@@ -1,5 +1,5 @@
 diff --git a/AGENTS.md b/AGENTS.md
-index a5c8983..36e53be 100644
+index a5c8983..d2e5062 100644
 --- a/AGENTS.md
 +++ b/AGENTS.md
 @@ -67,6 +67,11 @@ app/api/
@@ -57,7 +57,7 @@ index a5c8983..36e53be 100644
 +  ContextMeter.tsx         the composer's context ring and its popover (tokens, cost, Compact)
 +  ComposerModelMenu.tsx    the composer's model-and-effort menu
 +  ComposerModeMenu.tsx     the composer's mode menu: tool presets as Standard / Plan / Chat (+ pinned sets), ⌘/Ctrl+Shift+M
-+  ui/                      Base UI wrappers, styled in app/ui.css (every dropdown's proportions): menu.tsx (MenuSection for labelled groups), tooltip.tsx, popover.tsx, composer-list.tsx (the "/", "@" and history list)
++  ui/                      Base UI wrappers, styled in app/ui.css (every dropdown's proportions): menu.tsx (MenuSection for labelled groups), tooltip.tsx, popover.tsx, composer-list.tsx (the "/", "@" and history list), scrollbar-inset.ts (a scrolling dropdown's bar takes its right inset)
 +  ModelMark.tsx            a model's maker mark for menus (the repo's organisation on a router, else the provider), in grays
    SessionSidebar.tsx       toolbar row (Sessions | Files tabs, or the Pi Web brand with the files below them; new, search): tree, archive, menus, toast; files section (resizable, foldable; one header row with the file keys and changed-files count, the picker's row) or tab (picker boxes + file buttons), FileExplorer
 -  PiWebTitle.tsx           the sidebar's "Pi Web" brand (files below the sessions only): a click scrambles it into the versions
@@ -6555,7 +6555,7 @@ index 0000000..8dbaf17
 +.browser-console-text { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
 +.browser-console-location { flex: none; max-width: 40%; overflow: hidden; color: var(--text-dim); text-overflow: ellipsis; white-space: nowrap; direction: rtl; }
 diff --git a/app/sidebar-menu.css b/app/sidebar-menu.css
-index 737e7a5..b453d7e 100644
+index 737e7a5..d0fd174 100644
 --- a/app/sidebar-menu.css
 +++ b/app/sidebar-menu.css
 @@ -19,13 +19,14 @@
@@ -6566,8 +6566,8 @@ index 737e7a5..b453d7e 100644
 -  border: 1px solid var(--border);
 -  border-radius: 8px;
 -  background: var(--bg);
-+  /* The dropdowns' proportions (app/ui.css, "dropdowns"). */
-+  padding: var(--popup-inset);
++  /* The dropdowns' proportions (app/ui.css, "dropdowns"); a scrollbar takes the right inset. */
++  padding: var(--popup-inset) var(--popup-inset-end) var(--popup-inset) var(--popup-inset);
 +  border-radius: var(--popup-radius);
 +  background: var(--bg-elevated);
    color: var(--text);
@@ -6681,7 +6681,7 @@ index 737e7a5..b453d7e 100644
    height: 1px;
 -  margin: 4px 2px;
 -  background: var(--border);
-+  margin: var(--popup-inset) calc(-1 * var(--popup-inset));
++  margin: var(--popup-inset) calc(-1 * var(--popup-inset-end)) var(--popup-inset) calc(-1 * var(--popup-inset));
 +  background: var(--line);
  }
  
@@ -6750,8 +6750,8 @@ index 737e7a5..b453d7e 100644
 -  padding: 4px;
 -  border-bottom: 1px solid var(--border);
 -  background: var(--bg);
-+  margin: calc(-1 * var(--popup-inset)) calc(-1 * var(--popup-inset)) 0;
-+  padding: var(--popup-inset) var(--popup-inset) 0;
++  margin: calc(-1 * var(--popup-inset)) calc(-1 * var(--popup-inset-end)) 0 calc(-1 * var(--popup-inset));
++  padding: var(--popup-inset) var(--popup-inset-end) 0 var(--popup-inset);
 +  background: var(--bg-elevated);
  }
  
@@ -7875,10 +7875,10 @@ index 86728a2..98fb8f2 100644
    cursor: pointer;
 diff --git a/app/ui.css b/app/ui.css
 new file mode 100644
-index 0000000..9113d0c
+index 0000000..950fe9e
 --- /dev/null
 +++ b/app/ui.css
-@@ -0,0 +1,563 @@
+@@ -0,0 +1,604 @@
 +/* 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. */
@@ -7900,13 +7900,17 @@ index 0000000..9113d0c
 +   - 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
 +     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; section
-+     labels, filters and headers start on the icon column, and a row without an
-+     icon in a menu that has icons keeps the text column (`is-inset`);
++   - one icon column 14px from the edge and one text column at 37px; 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
 +     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 takes the reference's own scale (15px text, 32px rows).
++   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;
@@ -7919,6 +7923,8 @@ index 0000000..9113d0c
 +  --popup-gap: 9px;
 +  --popup-text-gap: 10px;
 +  --popup-edge: calc(var(--popup-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);
 +  --popup-shadow: 0 0 0 1px var(--popup-hairline), 0 2px 4px rgb(0 0 0 / 0.04), 0 12px 28px -6px rgb(0 0 0 / 0.14);
 +  /* Rows on a popup: a tint of the ink, so they show on --bg-elevated in every theme. */
@@ -7965,13 +7971,50 @@ index 0000000..9113d0c
 +  font-weight: 400;
 +  line-height: 16px;
 +}
-+/* Edge to edge, 6px either side; inside a padded surface it reaches past the inset. */
++/* Edge to edge (to the scrollbar while one shows), the inset above and below. */
 +.ui-menu-separator,
 +.ui-dropdown-separator {
 +  height: 1px;
-+  margin: var(--popup-inset) calc(-1 * var(--popup-inset));
++  margin: var(--popup-inset) calc(-1 * var(--popup-inset-end)) var(--popup-inset) calc(-1 * var(--popup-inset));
 +  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. */
++.ui-menu[data-scrollbar],
++.ui-composer-list-scroll[data-scrollbar],
++.ui-dropdown-scroll[data-scrollbar],
++.sidebar-menu[data-scrollbar] {
++  --popup-inset-end: max(0px, calc(var(--popup-inset) - var(--popup-scrollbar, 0px)));
++}
++.ui-menu::-webkit-scrollbar,
++.ui-composer-list-scroll::-webkit-scrollbar,
++.ui-dropdown-scroll::-webkit-scrollbar,
++.sidebar-menu::-webkit-scrollbar { width: 7px; }
++.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; }
++/* 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; }
++@media (pointer: coarse) {
++  .ui-menu::-webkit-scrollbar,
++  .ui-composer-list-scroll::-webkit-scrollbar,
++  .ui-dropdown-scroll::-webkit-scrollbar,
++  .sidebar-menu::-webkit-scrollbar { width: 8px; }
++  .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: 2px; }
++  .ui-menu::-webkit-scrollbar-track,
++  .sidebar-menu::-webkit-scrollbar-track { margin: 8px 0; }
++}
++@supports not selector(::-webkit-scrollbar) {
++  .ui-menu,
++  .ui-composer-list-scroll,
++  .ui-dropdown-scroll,
++  .sidebar-menu { scrollbar-width: thin; }
++}
 +
 +/* ---------------------------------------------------------------- menus */
 +.ui-menu {
@@ -7979,7 +8022,7 @@ index 0000000..9113d0c
 +  max-width: min(420px, calc(100vw - 24px));
 +  max-height: var(--available-height);
 +  overflow-y: auto;
-+  padding: var(--popup-inset);
++  padding: var(--popup-inset) var(--popup-inset-end) var(--popup-inset) var(--popup-inset);
 +  transform-origin: var(--transform-origin);
 +  transition: opacity 0.12s, transform 0.12s;
 +}
@@ -8000,7 +8043,6 @@ index 0000000..9113d0c
 +  user-select: none;
 +  -webkit-user-select: none;
 +}
-+.ui-menu-item.is-inset { padding-left: calc(var(--popup-row-pad) + var(--popup-icon) + var(--popup-gap)); }
 +.ui-menu-item[data-highlighted] { background: var(--popup-highlight); color: var(--text-strong); }
 +.ui-menu-item[data-disabled] { opacity: 0.45; }
 +.ui-menu-item[data-popup-open] { background: var(--popup-highlight); }
@@ -8038,7 +8080,7 @@ index 0000000..9113d0c
 +}
 +.ui-dropdown-filter-input::placeholder { color: var(--text-dim); }
 +/* The scroller reaches the surface's sides, so a separator inside it can too. */
-+.ui-dropdown-scroll { min-height: 0; overflow-y: auto; margin: 0 calc(-1 * var(--popup-inset)); padding: 0 var(--popup-inset); }
++.ui-dropdown-scroll { min-height: 0; overflow-y: auto; margin: 0 calc(-1 * var(--popup-inset)); padding: 0 var(--popup-inset-end) 0 var(--popup-inset); }
 +.ui-dropdown-empty { padding: 4px var(--popup-row-pad) 6px; color: var(--text-dim); white-space: nowrap; }
 +.ui-dropdown-row-wrap { position: relative; border-radius: var(--popup-row-radius); transition: background 0.1s; }
 +.ui-dropdown-row-wrap:hover, .ui-dropdown-row-wrap:focus-within { background: var(--popup-highlight); }
@@ -8061,7 +8103,6 @@ index 0000000..9113d0c
 +}
 +.ui-dropdown-row:focus-visible { outline: none; }
 +.ui-dropdown-row[aria-selected="true"] { color: var(--text-strong); }
-+.ui-dropdown-row.is-inset { padding-left: calc(var(--popup-row-pad) + var(--popup-icon) + var(--popup-gap)); }
 +.ui-dropdown-row.has-gutter { padding-right: calc(var(--popup-row-pad) + 28px); }
 +.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; }
@@ -8151,10 +8192,10 @@ index 0000000..9113d0c
 +  font-size: var(--popup-label-font);
 +  line-height: 16px;
 +}
-+.ui-composer-list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--popup-inset); }
++.ui-composer-list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--popup-inset-end) 0 var(--popup-inset); }
 +/* A group after the first starts after an edge-to-edge line, as a menu's section does. */
 +.ui-composer-list-row + .ui-composer-list-group {
-+  margin: var(--popup-inset) calc(-1 * var(--popup-inset)) 0;
++  margin: var(--popup-inset) calc(-1 * var(--popup-inset-end)) 0 calc(-1 * var(--popup-inset));
 +  padding: calc(var(--popup-inset) + 4px) var(--popup-edge) 4px;
 +  border-top: 1px solid var(--line);
 +}
@@ -11596,7 +11637,7 @@ index 42d3545..8418d90 100644
    assert.equal(clampChatContentWidth(2400), 2000);
  });
 diff --git a/components/ChatInput.test.mjs b/components/ChatInput.test.mjs
-index adfcc12..023eb9c 100644
+index adfcc12..17a4fbc 100644
 --- a/components/ChatInput.test.mjs
 +++ b/components/ChatInput.test.mjs
 @@ -263,15 +263,26 @@ test("cycleListIndex wraps in both directions", () => {
@@ -11715,8 +11756,8 @@ index adfcc12..023eb9c 100644
    // Rows without a star still line up with starred ones in the same menu.
 -  assert.match(row({ gutter: true }), /padding:7px 36px 7px 12px/);
 +  assert.match(row({ gutter: true }), /class="ui-dropdown-row has-gutter"/);
-+  // A row without a mark keeps the text column of the rows that have one.
-+  assert.match(row({ inset: true }), /class="ui-dropdown-row is-inset"/);
++  // A row without a mark starts on the icon column (the clear row), as a section label does.
++  assert.match(row({}), /<button type="button" role="option" aria-selected="false" class="ui-dropdown-row"><span class="ui-dropdown-row-label">/);
 +  assert.match(row({ media: React.createElement("svg", { id: "mark" }) }), /<span class="ui-dropdown-icon"><svg id="mark">/);
  
 +  // The chosen row's check sits on the right, as the menus' do.
@@ -16216,10 +16257,10 @@ index 0000000..a194c8b
 +}
 diff --git a/components/ComposerModelMenu.tsx b/components/ComposerModelMenu.tsx
 new file mode 100644
-index 0000000..0f021aa
+index 0000000..220224e
 --- /dev/null
 +++ b/components/ComposerModelMenu.tsx
-@@ -0,0 +1,184 @@
+@@ -0,0 +1,183 @@
 +"use client";
 +
 +// One menu for what answers and how hard it thinks, as Claude Desktop's model
@@ -16341,7 +16382,7 @@ index 0000000..0f021aa
 +        </MenuTrigger>
 +      </Tip>
 +      <MenuPopup side="top" align="end" width={272}>
-+        {/* Each model with its maker's mark; the levels and the action keep the same text column. */}
++        {/* Each model with its maker's mark; the levels have none, so they start on the marks' column, under their label. */}
 +        <MenuSection label={t("chat.modelGroup")}>
 +          <MenuRadioGroup
 +            value={value ? modelKey(value) : ""}
@@ -16375,7 +16416,6 @@ index 0000000..0f021aa
 +                  <MenuRadioItem
 +                    key={level}
 +                    value={level}
-+                    inset
 +                    description={level === "auto" ? t(THINKING_LEVEL_DESC_KEYS[level]) : undefined}
 +                    hint={level !== "auto" && savedDefaultThinkingLevel === level ? t("chat.defaultBadge") : undefined}
 +                  >
@@ -19743,20 +19783,29 @@ index 0000000..1b0fea9
 +  return maker ? <ProviderIcon id={maker} size={size} mono /> : <CarbonIcon icon={Carbon.Chip} size={size} />;
 +}
 diff --git a/components/ModelSelector.tsx b/components/ModelSelector.tsx
-index ba912ee..dc8def1 100644
+index ba912ee..0283a47 100644
 --- a/components/ModelSelector.tsx
 +++ b/components/ModelSelector.tsx
-@@ -4,6 +4,9 @@ import { useEffect, useRef, useState, type CSSProperties } from "react";
+@@ -4,6 +4,10 @@ import { useEffect, useRef, useState, type CSSProperties } from "react";
  import { useI18n } from "@/hooks/useI18n";
  import { useIsMobile } from "@/hooks/useIsMobile";
  import { SelectorRow } from "./SelectorRow";
 +import { ModelMark } from "./ModelMark";
++import { useScrollbarInset } from "./ui/scrollbar-inset";
 +import { CarbonIcon } from "./CarbonIcon";
 +import * as Carbon from "./carbon/icons";
  
  export interface ModelSelectorOption {
    provider: string;
-@@ -110,11 +113,11 @@ export function ModelSelector({
+@@ -63,6 +67,7 @@ export function ModelSelector({
+   const isMobile = useIsMobile();
+   const rootRef = useRef<HTMLDivElement>(null);
+   const panelRef = useRef<HTMLDivElement>(null);
++  const scrollbarRef = useScrollbarInset<HTMLDivElement>();
+   const [open, setOpen] = useState(false);
+   const [anchorRect, setAnchorRect] = useState<{ top: number; right: number; bottom: number; left: number; width: number } | null>(null);
+   const [filter, setFilter] = useState("");
+@@ -110,11 +115,11 @@ export function ModelSelector({
          gap: 7,
          width: "100%",
          minWidth: 0,
@@ -19771,7 +19820,7 @@ index ba912ee..dc8def1 100644
          background: locked ? "var(--bg-panel)" : "var(--bg)",
          color: locked ? "var(--text-dim)" : "var(--text)",
          cursor: locked ? "default" : "pointer",
-@@ -128,15 +131,18 @@ export function ModelSelector({
+@@ -128,15 +133,18 @@ export function ModelSelector({
          gap: 6,
          width: isMobile ? "100%" : undefined,
          maxWidth: isMobile ? "100%" : 220,
@@ -19794,7 +19843,7 @@ index ba912ee..dc8def1 100644
          opacity: locked ? 0.5 : 1,
          transition: "background 0.12s, color 0.12s",
        };
-@@ -203,22 +209,12 @@ export function ModelSelector({
+@@ -203,22 +211,12 @@ export function ModelSelector({
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" style={{ animation: "spin 0.8s linear infinite", flexShrink: 0 }} aria-hidden="true">
              <path d="M21 12a9 9 0 1 1-2.64-6.36" />
            </svg>
@@ -19822,7 +19871,7 @@ index ba912ee..dc8def1 100644
        </button>
  
        {open && anchorRect && (() => {
-@@ -240,24 +236,19 @@ export function ModelSelector({
+@@ -240,24 +238,19 @@ export function ModelSelector({
              ref={panelRef}
              role="listbox"
              aria-label={ariaLabel}
@@ -19850,7 +19899,7 @@ index ba912ee..dc8def1 100644
                    value={filter}
                    onChange={(event) => setFilter(event.target.value)}
                    placeholder={t("chat.filterModels")}
-@@ -268,25 +259,13 @@ export function ModelSelector({
+@@ -268,23 +261,11 @@ export function ModelSelector({
                    autoFocus={!isMobile}
                    autoComplete="off"
                    spellCheck={false}
@@ -19872,14 +19921,11 @@ index ba912ee..dc8def1 100644
                </div>
              )}
 -            <div style={{ minHeight: 0, overflowY: "auto" }}>
-+            <div className="ui-dropdown-scroll">
++            <div ref={scrollbarRef} className="ui-dropdown-scroll">
                {onClear && !filter.trim() && (
--                <SelectorRow active={!value} gutter={Boolean(onSetDefault)} onSelect={() => {
-+                <SelectorRow active={!value} inset gutter={Boolean(onSetDefault)} onSelect={() => {
+                 <SelectorRow active={!value} gutter={Boolean(onSetDefault)} onSelect={() => {
                    setOpen(false);
-                   setFilter("");
-                   onClear();
-@@ -295,20 +274,22 @@ export function ModelSelector({
+@@ -295,20 +276,22 @@ export function ModelSelector({
                  </SelectorRow>
                )}
                {modelsByProvider.length === 0 ? (
@@ -20490,7 +20536,7 @@ index cf38be6..c08aaef 100644
          </button>
          {report && (
 diff --git a/components/SelectorRow.tsx b/components/SelectorRow.tsx
-index 555da8f..b821d16 100644
+index 555da8f..0b5228b 100644
 --- a/components/SelectorRow.tsx
 +++ b/components/SelectorRow.tsx
 @@ -2,12 +2,12 @@
@@ -20509,7 +20555,7 @@ index 555da8f..b821d16 100644
    );
  }
  
-@@ -22,17 +22,22 @@ export interface SelectorRowStar {
+@@ -22,17 +22,21 @@ export interface SelectorRowStar {
  }
  
  /**
@@ -20519,9 +20565,9 @@ index 555da8f..b821d16 100644
 - * "save as default" button that floats in on hover or keyboard focus. Touch
 - * screens have no hover, so there the button stays visible.
 + * A row of a selector dropdown (the model field), in every dropdown's
-+ * proportions (app/ui.css, .ui-dropdown-*): the icon column (`media`, or its
-+ * room with `inset`), the label, a check on the right while chosen, as the
-+ * menus have it; the whole row selects and highlights on hover. With `star`,
++ * proportions (app/ui.css, .ui-dropdown-*): the icon column (`media`; a row
++ * without one starts there), the label, a check on the right while chosen, as
++ * the menus have it; the whole row selects and highlights on hover. With `star`,
 + * the right gutter holds the default marker: a small static star on the
 + * default row, and on every other row a "save as default" button that floats
 + * in on hover or keyboard focus. Touch screens have no hover, so there the
@@ -20533,22 +20579,19 @@ index 555da8f..b821d16 100644
    star,
    gutter = Boolean(star),
 +  media,
-+  inset = false,
    children,
  }: {
    active: boolean;
-@@ -40,6 +45,10 @@ export function SelectorRow({
+@@ -40,6 +44,8 @@ export function SelectorRow({
    star?: SelectorRowStar;
    /** Keep room for the star so it never covers the row's text; pass it to every row of a menu that has stars so they line up. */
    gutter?: boolean;
 +  /** A mark in the icon column (a model maker's). */
 +  media?: ReactNode;
-+  /** No mark, but the label on the text column of the rows that have one. */
-+  inset?: boolean;
    children: ReactNode;
  }) {
    const isMobile = useIsMobile();
-@@ -50,49 +59,27 @@ export function SelectorRow({
+@@ -50,49 +56,27 @@ export function SelectorRow({
  
    return (
      <div
@@ -20578,7 +20621,7 @@ index 555da8f..b821d16 100644
 -          cursor: "pointer", fontSize: 12, fontWeight: active ? 600 : 400,
 -          textAlign: "left", whiteSpace: "nowrap",
 -        }}
-+        className={`ui-dropdown-row${gutter ? " has-gutter" : ""}${inset ? " is-inset" : ""}`}
++        className={gutter ? "ui-dropdown-row has-gutter" : "ui-dropdown-row"}
        >
 -        {active
 -          ? <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }} aria-hidden="true"><polyline points="1.5 5 4 7.5 8.5 2.5" /></svg>
@@ -20604,7 +20647,7 @@ index 555da8f..b821d16 100644
            <StarIcon filled size={10} />
          </span>
        )}
-@@ -106,27 +93,8 @@ export function SelectorRow({
+@@ -106,27 +90,8 @@ export function SelectorRow({
              event.stopPropagation();
              star.onSave();
            }}
@@ -21850,6 +21893,35 @@ index 451bcd2..cef4ae2 100644
    const spinner = renderToStaticMarkup(h(SpinnerIcon, { size: 12, label: "Agent running", className: "row-status" }));
    assert.match(spinner, /width="12"/);
    assert.match(spinner, /stroke-width="2\.8"/);
+diff --git a/components/SidebarMenu.tsx b/components/SidebarMenu.tsx
+index a87046d..4253bfe 100644
+--- a/components/SidebarMenu.tsx
++++ b/components/SidebarMenu.tsx
+@@ -3,6 +3,7 @@
+ import { Children, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref, type SyntheticEvent } from "react";
+ import { createPortal } from "react-dom";
+ import { CheckIcon } from "./SidebarIcons";
++import { useScrollbarInset } from "./ui/scrollbar-inset";
+ 
+ /**
+  * The session sidebar's popup menu: a row's ⋯ or right-click menu, a project
+@@ -480,6 +481,7 @@ export function SidebarMenuSurface({
+   onActivate,
+   onClose,
+ }: SidebarMenuSurfaceProps) {
++  const desktopRef = useScrollbarInset<HTMLDivElement>(surfaceRef);
+   const custom = hasCustomMenuBody(children);
+   const hasFooter = !custom && hasCustomMenuBody(footer);
+   const filtered = filter !== undefined && !custom && sidebarMenuHasFilter(items, filter.minChoices);
+@@ -524,7 +526,7 @@ export function SidebarMenuSurface({
+   if (!sheet) {
+     return (
+       <div
+-        ref={surfaceRef}
++        ref={desktopRef}
+         className={classic ? "sidebar-menu is-classic" : "sidebar-menu"}
+         role={menuRole ?? "dialog"}
+         aria-label={ariaLabel}
 diff --git a/components/SkillsConfig.tsx b/components/SkillsConfig.tsx
 index de0d8ee..6b744f7 100644
 --- a/components/SkillsConfig.tsx
@@ -23316,10 +23388,10 @@ index 0000000..ae9fdae
 +}
 diff --git a/components/ui/composer-list.tsx b/components/ui/composer-list.tsx
 new file mode 100644
-index 0000000..b7ac3af
+index 0000000..c9e3f78
 --- /dev/null
 +++ b/components/ui/composer-list.tsx
-@@ -0,0 +1,139 @@
+@@ -0,0 +1,141 @@
 +"use client";
 +
 +// The composer's suggestion list ("/" commands, "@" files, input history): a
@@ -23333,6 +23405,7 @@ index 0000000..b7ac3af
 +
 +import { Popover } from "@base-ui/react/popover";
 +import { Fragment, useEffect, useRef, type ReactNode, type RefObject } from "react";
++import { useScrollbarInset } from "./scrollbar-inset";
 +
 +export interface ComposerListItem {
 +  key: string;
@@ -23383,6 +23456,7 @@ index 0000000..b7ac3af
 +  className?: string;
 +}) {
 +  const rowRefs = useRef<Array<HTMLDivElement | null>>([]);
++  const scrollbarRef = useScrollbarInset<HTMLDivElement>();
 +  const total = groups.reduce((sum, group) => sum + group.items.length, 0);
 +
 +  useEffect(() => {
@@ -23421,7 +23495,7 @@ index 0000000..b7ac3af
 +            onMouseDown={(event) => event.preventDefault()}
 +          >
 +            {header && <div className="ui-composer-list-header">{header}</div>}
-+            <div className="ui-composer-list-scroll" role="listbox" id={listId}>
++            <div ref={scrollbarRef} className="ui-composer-list-scroll" role="listbox" id={listId}>
 +              {total === 0 && empty && <div className="ui-composer-list-empty">{empty}</div>}
 +              {groups.map((group) => group.items.length === 0 ? null : (
 +                <Fragment key={group.key}>
@@ -23461,10 +23535,10 @@ index 0000000..b7ac3af
 +}
 diff --git a/components/ui/dropdowns.test.mjs b/components/ui/dropdowns.test.mjs
 new file mode 100644
-index 0000000..8a2625d
+index 0000000..bebb13a
 --- /dev/null
 +++ b/components/ui/dropdowns.test.mjs
-@@ -0,0 +1,58 @@
+@@ -0,0 +1,116 @@
 +import assert from "node:assert/strict";
 +import { readFileSync, readdirSync } from "node:fs";
 +import test from "node:test";
@@ -23523,25 +23597,86 @@ index 0000000..8a2625d
 +  assert.equal(modelMaker("huggingface", "meta-llama/Llama-5"), null, "an unknown maker gets the generic chip");
 +  assert.equal(modelMaker("openrouter", "some-model"), null, "a router's own mark says nothing about the model");
 +});
++
++test("whatever has no icon starts on the icon column, as the references' labels and search line do", () => {
++  // The effort levels sat on the text column with an empty icon's room before them.
++  assert.doesNotMatch(css, /is-inset/);
++  for (const name of ["./menu.tsx", "../SelectorRow.tsx", "../ComposerModelMenu.tsx", "../ModelSelector.tsx"]) {
++    const code = readFileSync(new URL(name, import.meta.url), "utf8").replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, "");
++    assert.doesNotMatch(code, /(?<![-\w])inset(?![-\w])|is-inset/, `${name} has no inset rows`);
++  }
++});
++
++test("a dropdown's scrollbar stands in its right inset, as wide as the inset at both scales", () => {
++  const scrollers = [".ui-menu", ".ui-composer-list-scroll", ".ui-dropdown-scroll", ".sidebar-menu"];
++  const sidebar = readFileSync(new URL("../../app/sidebar-menu.css", import.meta.url), "utf8");
++  const rule = (source, selector) => source.match(new RegExp(`(?:^|\\n)${selector.replace(".", "\\.")} \\{([^}]*)\\}`))?.[1] ?? "";
++  for (const selector of scrollers) {
++    const body = rule(selector === ".sidebar-menu" ? sidebar : css, selector);
++    assert.match(body, /padding: (0|var\(--popup-inset\)) var\(--popup-inset-end\)/, `${selector} pads its right with the scrollbar's place`);
++  }
++  const widths = [...css.matchAll(/\.sidebar-menu::-webkit-scrollbar \{ width: (\d+)px; \}/g)].map((match) => Number(match[1]));
++  const desktop = tokens(css.slice(css.indexOf(":root {\n  --popup-font"), css.indexOf("html.dark {\n  --popup-shadow")));
++  const touch = tokens(css.slice(css.indexOf("@media (pointer: coarse)"), css.indexOf("/* The surface, shared by every dropdown. */")));
++  assert.deepEqual(widths, [Number.parseFloat(desktop["popup-inset"]), Number.parseFloat(touch["popup-inset"])]);
++});
++
++test("the scrollbar's width is marked on the scroller while one takes room, and cleared when it goes", async () => {
++  const { watchScrollbarInset } = await jiti.import("./scrollbar-inset.ts");
++  const saved = { getComputedStyle: globalThis.getComputedStyle, ResizeObserver: globalThis.ResizeObserver, raf: globalThis.requestAnimationFrame, caf: globalThis.cancelAnimationFrame };
++  let notify = () => {};
++  let disconnected = false;
++  globalThis.getComputedStyle = () => ({ borderLeftWidth: "0px", borderRightWidth: "0px" });
++  globalThis.ResizeObserver = class { constructor(callback) { notify = callback; } observe() {} disconnect() { disconnected = true; } };
++  globalThis.requestAnimationFrame = (callback) => { callback(); return 1; };
++  globalThis.cancelAnimationFrame = () => {};
++  try {
++    const attributes = new Map();
++    const props = new Map();
++    const node = {
++      offsetWidth: 272, clientWidth: 272,
++      setAttribute: (key, value) => attributes.set(key, value), removeAttribute: (key) => attributes.delete(key), hasAttribute: (key) => attributes.has(key),
++      style: { setProperty: (key, value) => props.set(key, value), removeProperty: (key) => props.delete(key) },
++    };
++    const stop = watchScrollbarInset(node);
++    assert.equal(attributes.has("data-scrollbar"), false, "no bar, no mark");
++    node.clientWidth = 265; notify();
++    assert.equal(attributes.has("data-scrollbar"), true);
++    assert.equal(props.get("--popup-scrollbar"), "7px");
++    node.clientWidth = 272; notify();
++    assert.equal(attributes.has("data-scrollbar"), false, "the bar went");
++    assert.equal(props.has("--popup-scrollbar"), false);
++    stop();
++    assert.equal(disconnected, true);
++  } finally {
++    globalThis.getComputedStyle = saved.getComputedStyle;
++    globalThis.ResizeObserver = saved.ResizeObserver;
++    globalThis.requestAnimationFrame = saved.raf;
++    globalThis.cancelAnimationFrame = saved.caf;
++  }
++});
 diff --git a/components/ui/menu.tsx b/components/ui/menu.tsx
 new file mode 100644
-index 0000000..15ecac5
+index 0000000..ca0218f
 --- /dev/null
 +++ b/components/ui/menu.tsx
-@@ -0,0 +1,185 @@
+@@ -0,0 +1,182 @@
 +"use client";
 +
 +// Menus on Base UI (`@base-ui/react/menu`): keyboard navigation, typeahead,
 +// focus return and collision handling come from Base UI; the look is
 +// app/ui.css (.ui-menu*, the dropdown proportions every popup shares). Every
 +// menu in the app is one of these, so they all open, highlight and close the
-+// same way. A row is an icon (or a custom mark, or, `inset`, the icon's room),
-+// its label with its description on the same line, then a hint or a check.
++// same way. A row is an icon (or a custom mark), its label with its
++// description on the same line, then a hint or a check. A row without an icon
++// starts on the icon column, as the references' section labels and search line
++// do: never on the text column with an empty icon's room before it.
 +
 +import { Menu } from "@base-ui/react/menu";
 +import type { ComponentProps, ReactNode } from "react";
 +import { CarbonIcon } from "../CarbonIcon";
 +import * as Carbon from "../carbon/icons";
++import { useScrollbarInset } from "./scrollbar-inset";
 +
 +export const MenuRoot = Menu.Root;
 +export const MenuTrigger = Menu.Trigger;
@@ -23584,10 +23719,11 @@ index 0000000..15ecac5
 +  /** A fixed width; menus otherwise size to their longest item. */
 +  width?: number;
 +}) {
++  const scrollbarRef = useScrollbarInset<HTMLDivElement>();
 +  return (
 +    <Menu.Portal>
 +      <Menu.Positioner className="ui-positioner" side={side} align={align} sideOffset={sideOffset} alignOffset={alignOffset}>
-+        <Menu.Popup className={className ? `ui-menu ${className}` : "ui-menu"} style={width ? { width } : undefined}>
++        <Menu.Popup ref={scrollbarRef} className={className ? `ui-menu ${className}` : "ui-menu"} style={width ? { width } : undefined}>
 +          {children}
 +        </Menu.Popup>
 +      </Menu.Positioner>
@@ -23599,8 +23735,6 @@ index 0000000..15ecac5
 +  icon?: Carbon.CarbonIconData;
 +  /** A mark of its own in the icon column (a model maker's logo). */
 +  media?: ReactNode;
-+  /** No icon, but the label on the text column of the rows that have one. */
-+  inset?: boolean;
 +  /** Quieter, after the label on the same line. */
 +  description?: ReactNode;
 +  /** Right-aligned hint: a shortcut or a value. */
@@ -23608,7 +23742,7 @@ index 0000000..15ecac5
 +  children: ReactNode;
 +}
 +
-+function ItemContent({ icon, media, description, hint, children }: Omit<ItemContentProps, "inset">) {
++function ItemContent({ icon, media, description, hint, children }: ItemContentProps) {
 +  return (
 +    <>
 +      {icon ? <CarbonIcon icon={icon} size={16} className="ui-menu-icon" /> : media ? <span className="ui-menu-icon">{media}</span> : null}
@@ -23621,12 +23755,9 @@ index 0000000..15ecac5
 +  );
 +}
 +
-+const itemClass = (base: string, inset?: boolean, extra?: string) => `${base}${inset ? " is-inset" : ""}${extra ? ` ${extra}` : ""}`;
-+
 +export function MenuItem({
 +  icon,
 +  media,
-+  inset,
 +  description,
 +  hint,
 +  danger,
@@ -23635,7 +23766,7 @@ index 0000000..15ecac5
 +  ...props
 +}: ItemContentProps & { danger?: boolean; className?: string } & Omit<ComponentProps<typeof Menu.Item>, "children" | "className">) {
 +  return (
-+    <Menu.Item {...props} className={itemClass("ui-menu-item", inset, `${danger ? "is-danger" : ""}${className ? ` ${className}` : ""}`.trim() || undefined)}>
++    <Menu.Item {...props} className={["ui-menu-item", danger ? "is-danger" : "", className ?? ""].filter(Boolean).join(" ")}>
 +      <ItemContent icon={icon} media={media} description={description} hint={hint}>{children}</ItemContent>
 +    </Menu.Item>
 +  );
@@ -23645,7 +23776,6 @@ index 0000000..15ecac5
 +export function MenuRadioItem({
 +  icon,
 +  media,
-+  inset,
 +  description,
 +  hint,
 +  children,
@@ -23653,7 +23783,7 @@ index 0000000..15ecac5
 +  ...props
 +}: ItemContentProps & Omit<ComponentProps<typeof Menu.RadioItem>, "children" | "className">) {
 +  return (
-+    <Menu.RadioItem {...props} closeOnClick={closeOnClick} className={itemClass("ui-menu-item is-radio", inset)}>
++    <Menu.RadioItem {...props} closeOnClick={closeOnClick} className="ui-menu-item is-radio">
 +      <ItemContent icon={icon} media={media} description={description} hint={hint}>{children}</ItemContent>
 +      <Menu.RadioItemIndicator className="ui-menu-check" keepMounted>
 +        <CarbonIcon icon={Carbon.Checkmark} size={14} />
@@ -23666,7 +23796,6 @@ index 0000000..15ecac5
 +export function MenuCheckboxItem({
 +  icon,
 +  media,
-+  inset,
 +  description,
 +  hint,
 +  children,
@@ -23674,7 +23803,7 @@ index 0000000..15ecac5
 +  ...props
 +}: ItemContentProps & Omit<ComponentProps<typeof Menu.CheckboxItem>, "children" | "className">) {
 +  return (
-+    <Menu.CheckboxItem {...props} closeOnClick={closeOnClick} className={itemClass("ui-menu-item is-radio", inset)}>
++    <Menu.CheckboxItem {...props} closeOnClick={closeOnClick} className="ui-menu-item is-radio">
 +      <ItemContent icon={icon} media={media} description={description} hint={hint}>{children}</ItemContent>
 +      <Menu.CheckboxItemIndicator className="ui-menu-check" keepMounted>
 +        <CarbonIcon icon={Carbon.Checkmark} size={14} />
@@ -23757,6 +23886,63 @@ index 0000000..1e96650
 +    </Popover.Portal>
 +  );
 +}
+diff --git a/components/ui/scrollbar-inset.ts b/components/ui/scrollbar-inset.ts
+new file mode 100644
+index 0000000..5d2e784
+--- /dev/null
++++ b/components/ui/scrollbar-inset.ts
+@@ -0,0 +1,51 @@
++"use client";
++
++// A dropdown's scrollbar takes the place of its right inset. Chromium draws
++// Pi Web's scrollbars as a box that takes room (app/globals.css), so a
++// dropdown that scrolls held its rows 7px from the left edge and 7px plus the
++// bar from the right, off centre under the highlight. While it scrolls, the
++// scroller is marked `data-scrollbar` with the bar's width in
++// `--popup-scrollbar`, and app/ui.css takes that much off the right inset
++// (`--popup-inset-end`). Overlay scrollbars take no room: nothing changes.
++
++import { useCallback, useRef, type Ref } from "react";
++
++export function watchScrollbarInset(node: HTMLElement): () => void {
++  const update = () => {
++    const style = getComputedStyle(node);
++    const bar = node.offsetWidth - node.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
++    if (bar > 0) {
++      node.setAttribute("data-scrollbar", "");
++      node.style.setProperty("--popup-scrollbar", `${bar}px`);
++    } else if (node.hasAttribute("data-scrollbar")) {
++      node.removeAttribute("data-scrollbar");
++      node.style.removeProperty("--popup-scrollbar");
++    }
++  };
++  update();
++  if (typeof ResizeObserver === "undefined") return () => {};
++  // The bar shows or goes as the content box narrows or widens. The inset it
++  // changes resizes that box again, so the update waits a frame: an update
++  // inside the observer's callback would loop it.
++  let frame = 0;
++  const observer = new ResizeObserver(() => {
++    cancelAnimationFrame(frame);
++    frame = requestAnimationFrame(update);
++  });
++  observer.observe(node);
++  return () => {
++    cancelAnimationFrame(frame);
++    observer.disconnect();
++  };
++}
++
++/** A callback ref for a dropdown's scroller; `also` receives the node too. */
++export function useScrollbarInset<T extends HTMLElement>(also?: Ref<T>): (node: T | null) => void {
++  const stop = useRef<(() => void) | null>(null);
++  return useCallback((node: T | null) => {
++    stop.current?.();
++    stop.current = node ? watchScrollbarInset(node) : null;
++    if (typeof also === "function") also(node);
++    else if (also) (also as { current: T | null }).current = node;
++  }, [also]);
++}
 diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
 new file mode 100644
 index 0000000..019f84d
@@ -25098,7 +25284,7 @@ index 0000000..cfe33b4
 +- One browser for all sessions and users of a process; tools of two sessions interleave on the same tabs.
 diff --git a/docs/agents/desktop-shell.md b/docs/agents/desktop-shell.md
 new file mode 100644
-index 0000000..434c66a
+index 0000000..778f35b
 --- /dev/null
 +++ b/docs/agents/desktop-shell.md
 @@ -0,0 +1,52 @@
@@ -25107,9 +25293,9 @@ index 0000000..434c66a
 +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. `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**, 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.
 +- 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), effort rows and other icon-less rows in such a menu keep the text column (`inset`), "/" rows show their kind (the "+" menu's icons: commands, connectors, a page for prompts, skills) and history rows a clock.
++- **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.
 +
 +## Composer (`components/ChatInput.tsx`)