Pi Web fork 1b39ee7: full-width New, ungrouped rows aligned

piweb/hf-design.patch

@@ -10751,7 +10751,7 @@ index 737e7a5..fdf88a2 100644
  
  .sidebar-sheet .sidebar-menu-question-text {
 diff --git a/app/sidebar.css b/app/sidebar.css
-index 0b8f66a..c70f0e7 100644
+index 0b8f66a..abd6d2d 100644
 --- a/app/sidebar.css
 +++ b/app/sidebar.css
 @@ -91,8 +91,9 @@
@@ -10779,7 +10779,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .session-tree-pinned-count {
-@@ -171,20 +171,22 @@
+@@ -171,24 +171,36 @@
  }
  
  .session-tree-pinned-dot.is-unread {
@@ -10810,7 +10810,21 @@ index 0b8f66a..c70f0e7 100644
    cursor: pointer;
    overflow: hidden;
  }
-@@ -197,32 +199,11 @@
+ 
++/* Grouped by none there is no header to sit under: the rows start at the tree's
++   inset and their titles on the Conversations header's text (11px), and their
++   meta (the project) ends as far from the sidebar's edge. That edge is the
++   scrollbar's gutter or the inset, whichever is wider. */
++.session-tree-session.is-ungrouped {
++  left: var(--session-tree-inset-left);
++  padding-right: max(0px, calc(11px - max(6px, var(--session-tree-scrollbar, 0px))));
++  padding-left: 5px;
++}
++
+ .session-tree-session:hover {
+   background: var(--bg-hover);
+ }
+@@ -197,32 +209,11 @@
    background: var(--bg-selected);
  }
  
@@ -10846,7 +10860,7 @@ index 0b8f66a..c70f0e7 100644
    cursor: default;
  }
  
-@@ -255,14 +236,14 @@ a.session-tree-main {
+@@ -255,14 +246,14 @@ a.session-tree-main {
    width: 6px;
    height: 6px;
    border-radius: 50%;
@@ -10863,7 +10877,7 @@ index 0b8f66a..c70f0e7 100644
    border-radius: 50%;
    opacity: 0.35;
    animation: session-tree-status-pulse 1.6s ease-in-out infinite;
-@@ -297,20 +278,22 @@ a.session-tree-main {
+@@ -297,20 +288,22 @@ a.session-tree-main {
    }
  }
  
@@ -10891,7 +10905,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .session-tree-session.is-archived .session-tree-title {
-@@ -321,6 +304,8 @@ a.session-tree-main {
+@@ -321,6 +314,8 @@ a.session-tree-main {
     from its source ("… · 3f9a"), never the suffix. */
  .session-tree-title.has-fork-suffix {
    display: flex;
@@ -10900,7 +10914,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .session-tree-title-base {
-@@ -353,6 +338,22 @@ a.session-tree-main {
+@@ -353,6 +348,22 @@ a.session-tree-main {
    vertical-align: -1px;
  }
  
@@ -10923,7 +10937,7 @@ index 0b8f66a..c70f0e7 100644
  /* The right column: the time, or the running spinner / unread dot in its place. */
  .session-tree-meta {
    display: flex;
-@@ -384,16 +385,23 @@ a.session-tree-main {
+@@ -384,16 +395,23 @@ a.session-tree-main {
    align-items: center;
  }
  
@@ -10951,7 +10965,7 @@ index 0b8f66a..c70f0e7 100644
    color: var(--text-dim);
  }
  
-@@ -408,11 +416,18 @@ a.session-tree-main {
+@@ -408,11 +426,18 @@ a.session-tree-main {
    background: var(--bg-hover);
  }
  
@@ -10973,7 +10987,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .session-tree-meta.is-running {
-@@ -436,7 +451,10 @@ a.session-tree-main {
+@@ -436,7 +461,10 @@ a.session-tree-main {
   * :focus-within fallback in the @supports block after the group rules.
   */
  .session-tree-session:has(:focus-visible) .session-tree-action {
@@ -10985,7 +10999,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .session-tree-session:has(:focus-visible) .session-tree-meta {
-@@ -454,7 +472,7 @@ a.session-tree-main {
+@@ -454,7 +482,7 @@ a.session-tree-main {
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid var(--accent);
@@ -10994,7 +11008,7 @@ index 0b8f66a..c70f0e7 100644
    outline: none;
    background: var(--bg);
    color: var(--text);
-@@ -483,7 +501,7 @@ a.session-tree-main {
+@@ -483,7 +511,7 @@ a.session-tree-main {
    gap: 4px;
    height: 24px;
    padding: 0 10px;
@@ -11003,7 +11017,7 @@ index 0b8f66a..c70f0e7 100644
    font-size: 12px;
    white-space: nowrap;
  }
-@@ -518,8 +536,8 @@ a.session-tree-main {
+@@ -518,8 +546,8 @@ a.session-tree-main {
    right: var(--session-tree-inset-right);
    left: var(--session-tree-inset-left);
    gap: 2px;
@@ -11014,7 +11028,7 @@ index 0b8f66a..c70f0e7 100644
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
-@@ -548,7 +566,7 @@ a.session-tree-main {
+@@ -548,7 +576,7 @@ a.session-tree-main {
    position: absolute;
    right: var(--session-tree-inset-right);
    left: var(--session-tree-inset-left);
@@ -11023,7 +11037,7 @@ index 0b8f66a..c70f0e7 100644
    background: color-mix(in srgb, var(--bg-panel) 55%, transparent);
    pointer-events: none;
  }
-@@ -589,7 +607,7 @@ a.session-tree-main {
+@@ -589,7 +617,7 @@ a.session-tree-main {
    height: 22px;
    padding: 0 10px;
    border: 1px solid var(--border);
@@ -11032,7 +11046,7 @@ index 0b8f66a..c70f0e7 100644
    background: var(--bg-panel);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    color: var(--text);
-@@ -618,7 +636,7 @@ a.session-tree-main {
+@@ -618,7 +646,7 @@ a.session-tree-main {
    padding: 0 0 0 5px;
    color: var(--text-muted);
    font-size: 12px;
@@ -11041,7 +11055,7 @@ index 0b8f66a..c70f0e7 100644
    text-align: left;
    white-space: nowrap;
  }
-@@ -669,19 +687,29 @@ a.session-tree-main {
+@@ -669,19 +697,29 @@ a.session-tree-main {
    width: 6px;
    height: 6px;
    border-radius: 50%;
@@ -11074,7 +11088,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .session-tree-group:hover .session-tree-summary,
-@@ -690,17 +718,48 @@ a.session-tree-main {
+@@ -690,17 +728,48 @@ a.session-tree-main {
  }
  
  .session-tree-group:has(:focus-visible) .session-tree-group-actions {
@@ -11126,7 +11140,7 @@ index 0b8f66a..c70f0e7 100644
    }
  
    .session-tree-session:focus-within .session-tree-meta,
-@@ -723,10 +782,10 @@ a.session-tree-main {
+@@ -723,10 +792,10 @@ a.session-tree-main {
    flex: none;
    align-items: center;
    justify-content: center;
@@ -11140,7 +11154,18 @@ index 0b8f66a..c70f0e7 100644
    color: var(--text-dim);
  }
  
-@@ -772,44 +831,6 @@ a.session-tree-main {
+@@ -744,6 +813,10 @@ a.session-tree-main {
+   font-size: 11px;
+ }
+ 
++.session-tree-more.is-ungrouped {
++  padding-left: calc(var(--session-tree-inset-left) + 5px);
++}
++
+ /* "Show more · N" and, once more is shown, "Show less" side by side. A lone
+    button takes the whole row; on a narrow sidebar "show more" gives way so
+    "Show less" is never clipped. */
+@@ -772,44 +845,6 @@ a.session-tree-main {
    color: var(--text);
  }
  
@@ -11185,7 +11210,7 @@ index 0b8f66a..c70f0e7 100644
  /* Archive view: one header per project above its archived sessions, a main
     group's header (chevron, name, ⋯ on hover) that folds its rows, with the
     count after the name in the meta color, shown folded or not. */
-@@ -822,15 +843,21 @@ a.session-tree-main {
+@@ -822,15 +857,21 @@ a.session-tree-main {
  
  /* Phone layout: 44px rows, a step larger type for titles and project names,
     ⋯ and the group buttons always shown, no archive quick button. */
@@ -11210,7 +11235,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .session-tree.is-mobile .session-tree-session:hover .session-tree-meta {
-@@ -842,7 +869,10 @@ a.session-tree-main {
+@@ -842,7 +883,10 @@ a.session-tree-main {
  }
  
  .session-tree.is-mobile .session-tree-group-actions {
@@ -11222,7 +11247,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .session-tree.is-mobile .session-tree-group .session-tree-summary {
-@@ -867,10 +897,22 @@ a.session-tree-main {
+@@ -867,10 +911,22 @@ a.session-tree-main {
  /* Touch screens wider than a phone have no hover: keep ⋯ reachable. */
  @media (hover: none) {
    .session-tree-more-action {
@@ -11246,7 +11271,7 @@ index 0b8f66a..c70f0e7 100644
  @media (prefers-reduced-motion: reduce) {
    .session-tree-unread::after {
      animation: none;
-@@ -925,9 +967,10 @@ a.session-tree-main {
+@@ -925,9 +981,10 @@ a.session-tree-main {
    display: flex;
    flex: none;
    align-items: stretch;
@@ -11258,7 +11283,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  /* The tablist itself holds only the two tabs (ARIA allows nothing else in it). */
-@@ -937,69 +980,45 @@ a.session-tree-main {
+@@ -937,69 +994,45 @@ a.session-tree-main {
    align-items: stretch;
  }
  
@@ -11340,7 +11365,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .sidebar-tab-count {
-@@ -1019,27 +1038,36 @@ a.session-tree-main {
+@@ -1019,27 +1052,36 @@ a.session-tree-main {
     beside the two cells at the sidebar's 180px minimum, and at 11px so do
     the versions with a digit to spare). */
  .sidebar-brand {
@@ -11388,7 +11413,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .sidebar-brand:focus {
-@@ -1047,22 +1075,107 @@ a.session-tree-main {
+@@ -1047,22 +1089,93 @@ a.session-tree-main {
  }
  
  .sidebar-brand:focus-visible {
@@ -11402,8 +11427,8 @@ index 0b8f66a..c70f0e7 100644
 +
 +/* Search, then New, under the header, as Claude Code's sidebar
 +   (design/sidebar-search-claude-reference.jpg, measured at 2x): a field the
-+   width of the rows (10px in from each side, their right edge) and a row of
-+   its own for New. The magnifier and New's disc are centred on one column,
++   width of the rows (10px in from each side, their right edge) and New, a
++   button as wide. The magnifier and New's plus are centred on one column,
 +   15px into the field as in the reference; the placeholder and New's label
 +   start on another, 18px after it. Both are 28px tall, as the rows are (the
 +   reference's field is 26px at its own scale). */
@@ -11411,7 +11436,6 @@ index 0b8f66a..c70f0e7 100644
 +  display: flex;
 +  flex: none;
 +  flex-direction: column;
-+  /* The field's bottom to New's disc: 13px, as in the reference. */
 +  gap: 8px;
 +  padding: 2px 10px 6px;
  }
@@ -11465,14 +11489,14 @@ index 0b8f66a..c70f0e7 100644
 +  text-overflow: ellipsis;
  }
  
-+/* The disc is ink with the sidebar's colour for its plus, as the reference's light disc on a
-+   dark sidebar (and dark on light). */
++/* New: a full-width button the field's size, filled a step above it (no hairline: the
++   field's), its plain plus on the magnifier's column and its label on the placeholder's. */
  .sidebar-new-button {
 -  font-weight: 500;
-+  gap: 9px;
-+  padding: 0 0 0 6px;
++  gap: 11px;
++  padding: 0 0 0 8px;
 +  border: 0;
-+  background: transparent;
++  background: color-mix(in srgb, var(--text) 7%, transparent);
 +  color: var(--text);
 +  font-weight: 400;
 +  text-align: left;
@@ -11481,30 +11505,17 @@ index 0b8f66a..c70f0e7 100644
 -.sidebar-search-toggle {
 -  width: 36px;
 -  padding: 0;
-+.sidebar-new-button:not(:disabled):hover {
-+  background: var(--bg-hover);
-+  color: var(--text-strong);
-+}
-+
-+.sidebar-new-disc {
-+  display: inline-flex;
++.sidebar-new-button svg {
 +  flex: none;
-+  align-items: center;
-+  justify-content: center;
-+  width: 18px;
-+  height: 18px;
-+  border-radius: 50%;
-+  /* The reference's disc is 191 on a 17 sidebar: most of the text's ink, a step below it. */
-+  background: color-mix(in srgb, var(--text) 82%, var(--bg));
-+  color: var(--bg);
 +}
 +
-+.sidebar-new-button:not(:disabled):hover .sidebar-new-disc {
-+  background: var(--text-strong);
++.sidebar-new-button:not(:disabled):hover {
++  background: color-mix(in srgb, var(--text) 11%, transparent);
++  color: var(--text-strong);
  }
  
  .sidebar-new-button:disabled {
-@@ -1070,16 +1183,14 @@ a.session-tree-main {
+@@ -1070,16 +1183,11 @@ a.session-tree-main {
    cursor: not-allowed;
  }
  
@@ -11516,9 +11527,7 @@ index 0b8f66a..c70f0e7 100644
 -.sidebar-header[data-fit="2"] .sidebar-new-button {
 -  width: 36px;
 -  padding: 0;
-+.sidebar-new-button:disabled .sidebar-new-disc {
-+  background: var(--text-dim);
- }
+-}
  
 +/* Where the labels do not fit (useHeaderFit measures them: their widths
 +   change with the language): the tabs keep their icons, or the brand's
@@ -11527,7 +11536,7 @@ index 0b8f66a..c70f0e7 100644
  .sidebar-header[data-fit="2"] .sidebar-tab {
    padding: 0 11px;
  }
-@@ -1088,8 +1199,11 @@ a.session-tree-main {
+@@ -1088,8 +1196,11 @@ a.session-tree-main {
    font-size: 11px;
  }
  
@@ -11541,7 +11550,7 @@ index 0b8f66a..c70f0e7 100644
  .sidebar-header[data-fit="2"] .sidebar-tab-label {
    position: absolute;
    width: 1px;
-@@ -1100,14 +1214,15 @@ a.session-tree-main {
+@@ -1100,14 +1211,15 @@ a.session-tree-main {
  }
  
  .sidebar-new-button:focus-visible,
@@ -11560,7 +11569,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .sidebar-panel {
-@@ -1186,7 +1301,7 @@ a.session-tree-main {
+@@ -1186,7 +1298,7 @@ a.session-tree-main {
     the root too), and its time 4px inside the row. The header row's keys and
     the picker's boxes end there. */
  .session-sidebar.is-files-below {
@@ -11569,7 +11578,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  /* The files section's header row (files below the sessions only), one row
-@@ -1230,7 +1345,7 @@ a.session-tree-main {
+@@ -1230,7 +1342,7 @@ a.session-tree-main {
    padding: 0 5px;
    overflow: hidden;
    border: 0;
@@ -11578,7 +11587,7 @@ index 0b8f66a..c70f0e7 100644
    background: transparent;
    color: var(--text-muted);
    font: inherit;
-@@ -1256,10 +1371,8 @@ a.session-tree-main {
+@@ -1256,10 +1368,8 @@ a.session-tree-main {
  .sidebar-files-section-label {
    min-width: 0;
    overflow: hidden;
@@ -11590,7 +11599,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  /* The changed files' count, as the pinned section's (.session-tree-pinned-count). */
-@@ -1278,7 +1391,7 @@ a.session-tree-main {
+@@ -1278,7 +1388,7 @@ a.session-tree-main {
    display: flex;
    flex: 1000 0 calc(7 * 18px);
    align-items: center;
@@ -11599,7 +11608,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  /* The section's keys: the files tab's square keys, a step under the row's
-@@ -1286,9 +1399,9 @@ a.session-tree-main {
+@@ -1286,9 +1396,9 @@ a.session-tree-main {
  .sidebar-files-keys .sidebar-tool-button {
    flex: 1 1 0;
    min-width: 18px;
@@ -11612,7 +11621,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  /* Under that row (or the whole files tab): the head, then the tree filling
-@@ -1301,31 +1414,7 @@ a.session-tree-main {
+@@ -1301,31 +1411,7 @@ a.session-tree-main {
    min-height: 0;
  }
  
@@ -11645,7 +11654,7 @@ index 0b8f66a..c70f0e7 100644
     slides in over the tree, which stays mounted under it (hidden once the
     archive is in), and away again. SessionTree fills each. */
  .sidebar-sessions-views {
-@@ -1380,6 +1469,62 @@ a.session-tree-main {
+@@ -1380,6 +1466,62 @@ a.session-tree-main {
    }
  }
  
@@ -11708,7 +11717,7 @@ index 0b8f66a..c70f0e7 100644
  .sidebar-archive-bar {
    display: flex;
    flex: none;
-@@ -1397,7 +1542,7 @@ a.session-tree-main {
+@@ -1397,7 +1539,7 @@ a.session-tree-main {
    height: 26px;
    padding: 0 6px;
    border: 0;
@@ -11717,7 +11726,7 @@ index 0b8f66a..c70f0e7 100644
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
-@@ -1485,10 +1630,11 @@ a.session-tree-main {
+@@ -1485,10 +1627,11 @@ a.session-tree-main {
     six (the changes view is disabled, not gone, without changes), so nothing
     moves as the count flips. At the sidebar's 180px minimum they give way
     together, down to 21px wide, and the gap before the views closes. */
@@ -11730,7 +11739,7 @@ index 0b8f66a..c70f0e7 100644
    margin-top: 4px;
  }
  
-@@ -1498,17 +1644,18 @@ a.session-tree-main {
+@@ -1498,17 +1641,18 @@ a.session-tree-main {
    margin-left: auto;
  }
  
@@ -11754,7 +11763,7 @@ index 0b8f66a..c70f0e7 100644
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
-@@ -1516,8 +1663,8 @@ a.session-tree-main {
+@@ -1516,8 +1660,8 @@ a.session-tree-main {
  }
  
  .sidebar-tool-button:not(:disabled):hover {
@@ -11765,7 +11774,7 @@ index 0b8f66a..c70f0e7 100644
  }
  
  .sidebar-tool-button.is-active,
-@@ -1615,7 +1762,7 @@ a.session-tree-main {
+@@ -1615,7 +1759,7 @@ a.session-tree-main {
  @media (prefers-reduced-motion: reduce) {
    .sidebar-tab,
    .sidebar-new-button,
@@ -29207,7 +29216,7 @@ index ed7d604..0000000
 -  );
 -}
 diff --git a/components/SessionSidebar.test.mjs b/components/SessionSidebar.test.mjs
-index db58db2..0a9b05f 100644
+index db58db2..814136e 100644
 --- a/components/SessionSidebar.test.mjs
 +++ b/components/SessionSidebar.test.mjs
 @@ -120,16 +120,26 @@ test("only Shift skips the session deletion confirmation", () => {
@@ -29240,7 +29249,7 @@ index db58db2..0a9b05f 100644
 +  assert.match(html, /<div class="sidebar-header"><button type="button" class="sidebar-brand" aria-label="Pi Web, versions: web [^",]+, pi [^",]+"><svg class="sidebar-brand-logo"[^>]*>.*?<\/svg><span class="sidebar-brand-text">Pi Web<\/span><\/button><\/div><div class="sidebar-actions"><button type="button" title="Search conversations" aria-label="Search conversations" aria-haspopup="dialog" aria-expanded="false" class="sidebar-search-field">/);
    assert.doesNotMatch(html, /role="tablist"|role="tab"|role="tabpanel"|View options|sidebar-title/);
 -  assert.match(html, /<span class="sidebar-new-label">New<\/span><\/button><button type="button" title="Search conversations" aria-label="Search conversations" aria-expanded="false" aria-controls="session-search-input" class="sidebar-search-toggle">/);
-+  assert.match(html, /<span class="sidebar-search-field-label" aria-hidden="true">Search<\/span><\/button><button type="button" class="sidebar-new-button"[^>]*><span class="sidebar-new-disc" aria-hidden="true"><svg[^>]*>.*?<\/svg><\/span><span class="sidebar-new-label">New<\/span><\/button><\/div>/);
++  assert.match(html, /<span class="sidebar-search-field-label" aria-hidden="true">Search<\/span><\/button><button type="button" class="sidebar-new-button"[^>]*><svg[^>]*data-lucide="plus"[^>]*>.*?<\/svg><span class="sidebar-new-label">New<\/span><\/button><\/div>/);
    // Two regions, both shown: the sessions, the separator, the files.
    const sessions = openingTag(html, "session-sidebar-panel-sessions");
    const files = openingTag(html, "session-sidebar-panel-files");
@@ -29346,7 +29355,7 @@ index db58db2..0a9b05f 100644
    // Before the sidebar has a cwd: the project box asks for one.
    assert.match(filesPanel, /<div class="project-picker is-row" role="group" aria-label="Project and worktree"><button type="button" class="project-picker-button is-project is-empty" title="" aria-haspopup="menu" aria-expanded="false">/);
 diff --git a/components/SessionSidebar.tsx b/components/SessionSidebar.tsx
-index df09a76..0d10665 100644
+index df09a76..061a3bb 100644
 --- a/components/SessionSidebar.tsx
 +++ b/components/SessionSidebar.tsx
 @@ -1,6 +1,7 @@
@@ -29765,9 +29774,9 @@ index df09a76..0d10665 100644
 +      </div>
 +
 +      {/* Search, then New, as Claude Code's sidebar (design/sidebar-search-claude-reference.jpg):
-+          a field-like button that opens the search of the tab in view, and a row of its own
-+          for a new session. The magnifier and New's disc share one column, the placeholder
-+          and New's label another. */}
++          a field-like button that opens the search of the tab in view, and New, a button as
++          wide. The magnifier and New's plus share one column, the placeholder and New's
++          label another. */}
 +      <div className="sidebar-actions">
          <button
            ref={searchButtonRef}
@@ -29804,7 +29813,7 @@ index df09a76..0d10665 100644
 +          title={selectedCwd ? t("sidebar.newSessionTitle", { path: selectedCwd }) : t("sidebar.selectProject")}
          >
 -          <SearchIcon size={16} />
-+          <span className="sidebar-new-disc" aria-hidden="true"><PlusIcon size={12} /></span>
++          <PlusIcon size={14} />
 +          <span className="sidebar-new-label">{t("sidebar.new")}</span>
          </button>
        </div>
@@ -29954,7 +29963,7 @@ index df09a76..0d10665 100644
        <SidebarMenu
          open={menu !== null}
 diff --git a/components/SessionTree.test.mjs b/components/SessionTree.test.mjs
-index fe38e40..5a29f4d 100644
+index fe38e40..09f3107 100644
 --- a/components/SessionTree.test.mjs
 +++ b/components/SessionTree.test.mjs
 @@ -109,7 +109,8 @@ function groupRow(extra = {}, projectExtra = {}) {
@@ -30092,7 +30101,7 @@ index fe38e40..5a29f4d 100644
    const familyRow = rowMarkup(html, "session:group:a");
    assert.match(familyRow, /is-selected/);
    assert.match(familyRow, /aria-label="Agent running…"/);
-@@ -474,12 +474,14 @@ test("row CSS stays flat, themed and quiet", () => {
+@@ -474,12 +474,13 @@ test("row CSS stays flat, themed and quiet", () => {
    assert.doesNotMatch(css, /&/, "no CSS nesting");
    assert.doesNotMatch(css, /@starting-style|prefers-color-scheme/);
    const colors = new Set((css.match(/#[0-9a-fA-F]{3,8}\b/g) ?? []).map((color) => color.toLowerCase()));
@@ -30101,17 +30110,16 @@ index fe38e40..5a29f4d 100644
 -  // the errors' red and the delete button's white). No mixes of their own.
 +  for (const color of colors) assert.ok(["#ef4444", "#d97706", "#f87171", "#fff"].includes(color), `unexpected color ${color}`);
 +  // Three text colors: content, labels, meta, the selected title a step
-+  // stronger (plus the accent for states, the errors' red, the delete
-+  // button's white, and the sidebar's own background for the plus knocked
-+  // out of New's ink disc). No mixes of their own.
++  // stronger (plus the accent for states, the errors' red and the delete
++  // button's white). No mixes of their own.
    const textColors = new Set([...css.matchAll(/(?:^|[\s;{])color: ([^;]+);/g)].map((match) => match[1]));
    for (const color of textColors) {
 -    assert.ok(["var(--text)", "var(--text-muted)", "var(--text-dim)", "var(--accent)", "inherit", "#f87171", "#fff"].includes(color), `unexpected text color ${color}`);
-+    assert.ok(["var(--text)", "var(--text-strong)", "var(--text-muted)", "var(--text-dim)", "var(--accent)", "inherit", "#f87171", "#fff", "var(--bg)"].includes(color), `unexpected text color ${color}`);
++    assert.ok(["var(--text)", "var(--text-strong)", "var(--text-muted)", "var(--text-dim)", "var(--accent)", "inherit", "#f87171", "#fff"].includes(color), `unexpected text color ${color}`);
    }
    assert.doesNotMatch(css, /color: color-mix\(in srgb, var\(--text\)/);
  });
-@@ -514,8 +516,7 @@ test("headers lead with their chevron, and every row's text starts in one column
+@@ -514,8 +515,7 @@ test("headers lead with their chevron, and every row's text starts in one column
  
    // The text column: the toggle's left padding, the 12px chevron and the
    // gap. Session titles, "show more", the empty group's note, the archive's
@@ -30121,7 +30129,7 @@ index fe38e40..5a29f4d 100644
    // shorthand is its left side.
    const lastPx = (rule, property) => {
      const value = cssRule(rule).match(new RegExp(`(?:^|\\n)\\s*${property}: ([^;]+);`))[1];
-@@ -523,11 +524,15 @@ test("headers lead with their chevron, and every row's text starts in one column
+@@ -523,11 +523,15 @@ test("headers lead with their chevron, and every row's text starts in one column
    };
    const textStart = lastPx(".session-tree-group-toggle", "padding") + 12 + lastPx(".session-tree-group-toggle", "gap");
    assert.equal(textStart, 20);
@@ -30142,7 +30150,7 @@ index fe38e40..5a29f4d 100644
    // These rows span the whole width, so their padding adds the rows' inset.
    assert.match(css, /\.session-tree-group-empty,\s*\.session-tree-more \{\s*padding-left: calc\(var\(--session-tree-inset-left\) \+ 20px\);/);
    // The pinned section's chevron in the same column (its row spans the
-@@ -535,26 +540,23 @@ test("headers lead with their chevron, and every row's text starts in one column
+@@ -535,26 +539,23 @@ test("headers lead with their chevron, and every row's text starts in one column
    assert.match(cssRule(".session-tree-pinned-toggle"), /padding: 0 8px 0 calc\(var\(--session-tree-inset-left\) \+ 5px\);/);
  
    // No layout overrides these paddings, so phones line up the same way.
@@ -30174,7 +30182,7 @@ index fe38e40..5a29f4d 100644
    ];
    const html = render({ rows, onMoveGroup: noop });
    assert.match(html, /^<div class="session-tree">/);
-@@ -574,3 +576,22 @@ test("the drag ghost is shorter than a header", () => {
+@@ -574,3 +575,22 @@ test("the drag ghost is shorter than a header", () => {
    assert.match(cssRule(".session-tree-drag-ghost"), /\n\s*height: 22px;/);
    assert.ok(22 < SIDEBAR_ROW_HEIGHTS.desktop.group, "shorter than a header");
  });
@@ -30198,10 +30206,18 @@ index fe38e40..5a29f4d 100644
 +  assert.equal((SIDEBAR_ROW_HEIGHTS.mobile.session - 32) / 2, endPadding(cssRule(".session-tree-session")));
 +});
 diff --git a/components/SessionTree.tsx b/components/SessionTree.tsx
-index f96a924..d848ab0 100644
+index f96a924..3ced186 100644
 --- a/components/SessionTree.tsx
 +++ b/components/SessionTree.tsx
-@@ -37,10 +37,8 @@ import { useI18n } from "@/hooks/useI18n";
+@@ -19,6 +19,7 @@ import { splitForkSuffix } from "@/lib/session-fork-name";
+ import { MAX_PROJECT_NAME_LENGTH, type ProjectMovePosition } from "@/lib/session-ui-state-shared";
+ import {
+   PINNED_MORE_KEY,
++  UNGROUPED_MORE_KEY,
+   getRowOffsets,
+   getVisibleRowIndices,
+   revealScrollTop,
+@@ -37,10 +38,8 @@ import { useI18n } from "@/hooks/useI18n";
  import { useScrollbarVisibility } from "@/hooks/useScrollbarVisibility";
  import type { SidebarMenuAnchor } from "./SidebarMenu";
  import {
@@ -30212,7 +30228,7 @@ index f96a924..d848ab0 100644
    MoreIcon,
    PinIcon,
    PlusIcon,
-@@ -132,8 +130,6 @@ export interface SessionTreeProps {
+@@ -132,8 +131,6 @@ export interface SessionTreeProps {
    onToggleArchiveGroup?(projectKey: string, all: boolean): void;
    /** An archive header's ⋯: Restore all, Delete…. */
    onArchiveGroupMenu?(project: SidebarProject, opener: HTMLElement): void;
@@ -30221,7 +30237,15 @@ index f96a924..d848ab0 100644
    /** Scroll a row into view (and maybe focus it); see SessionTreeReveal. */
    reveal?: SessionTreeReveal | null;
    /** The reveal request with this id was scrolled to or dropped: the parent lets go of it. */
-@@ -600,7 +596,8 @@ const SessionRowView = memo(function SessionRowView({
+@@ -522,6 +519,7 @@ const SessionRowView = memo(function SessionRowView({
+     status.selected ? "is-selected" : "",
+     status.running ? "is-running" : "",
+     context === "archive" ? "is-archived" : "",
++    context === "ungrouped" ? "is-ungrouped" : "",
+     menuOpen ? "is-menu-open" : "",
+     confirming ? "is-confirming" : "",
+     renaming ? "is-renaming" : "",
+@@ -600,7 +598,8 @@ const SessionRowView = memo(function SessionRowView({
      meta = <span className="session-tree-unread" role="img" aria-label={t("sidebar.newSessionActivity")} />;
      metaState = " is-unread";
      metaTitle = t("sidebar.newActivity");
@@ -30231,7 +30255,7 @@ index f96a924..d848ab0 100644
      meta = <span className="session-tree-project">{row.project.name}</span>;
    } else if (context === "archive" && row.archivedAt !== null) {
      meta = formatShortRelativeTime(new Date(row.archivedAt), locale, nowDate);
-@@ -608,12 +605,13 @@ const SessionRowView = memo(function SessionRowView({
+@@ -608,12 +607,13 @@ const SessionRowView = memo(function SessionRowView({
      meta = formatShortRelativeTime(family.latestModified, locale, nowDate);
    }
  
@@ -30249,7 +30273,7 @@ index f96a924..d848ab0 100644
        {forkTitle ? (
          <span className="session-tree-title has-fork-suffix">
            <span className="session-tree-title-base">{forkTitle.base}</span>
-@@ -629,7 +627,7 @@ const SessionRowView = memo(function SessionRowView({
+@@ -629,7 +629,7 @@ const SessionRowView = memo(function SessionRowView({
          </span>
        )}
        <span className={`session-tree-meta${metaState}`} title={metaTitle}>{meta}</span>
@@ -30258,7 +30282,7 @@ index f96a924..d848ab0 100644
    );
  
    return (
-@@ -668,7 +666,7 @@ const SessionRowView = memo(function SessionRowView({
+@@ -668,7 +668,7 @@ const SessionRowView = memo(function SessionRowView({
        )}
        {!status.transient && (
          <span className="session-tree-actions">
@@ -30267,7 +30291,7 @@ index f96a924..d848ab0 100644
              <button
                type="button"
                className="session-tree-action session-tree-quick-action"
-@@ -681,20 +679,7 @@ const SessionRowView = memo(function SessionRowView({
+@@ -681,20 +681,7 @@ const SessionRowView = memo(function SessionRowView({
              >
                <RestoreIcon size={13} />
              </button>
@@ -30289,7 +30313,16 @@ index f96a924..d848ab0 100644
            <button
              type="button"
              className={`session-tree-action session-tree-more-action${menuOpen ? " is-active" : ""}`}
-@@ -1046,29 +1031,6 @@ const PlainRowView = memo(function PlainRowView({
+@@ -1016,7 +1003,7 @@ const PlainRowView = memo(function PlainRowView({
+     case "group-more": {
+       const moreKey = row.kind === "pinned-more" ? PINNED_MORE_KEY : row.projectKey;
+       return (
+-        <div className="session-tree-row session-tree-more" style={style} data-row-key={row.key}>
++        <div className={`session-tree-row session-tree-more${moreKey === UNGROUPED_MORE_KEY ? " is-ungrouped" : ""}`} style={style} data-row-key={row.key}>
+           {row.hidden > 0 && (
+             <button
+               type="button"
+@@ -1046,29 +1033,6 @@ const PlainRowView = memo(function PlainRowView({
            {t("sidebar.noLiveSessions")}
          </div>
        );
@@ -36815,7 +36848,7 @@ index 25796d6..51c3f1c 100644
  - **Notices.** MCP off, with its reason. Otherwise `hostInactive`: an open session whose `/mcp` is another extension's, naming its folder and that extension (only a session can tell). A project folder the route refuses (`cwd-*`) does not hide the global servers: `loadMcpOverview()` loads again without the cwd and the Project group says "Not listed" with the reason. Trust is reported only when the project has a `.pi/mcp.json` or a problem with one: untrusted (`ConfigTrustNotice`), an inherited `false` naming its folder, and inherited trust as "Trusted through <path>", the only place that trust is visible. A folder that requires no trust gets no trust notice unless a decision marks it untrusted: a dangling `.pi/mcp.json` link is listed (`link-dangling`), but the SDK's `existsSync` finds nothing to trust, so Trust would only meet `trust-not-required`. File problems go to the footer (`ConfigFooterStatus`). A load ends after `MCP_OVERVIEW_TIMEOUT_MS` (15 s, both requests together), since Refresh is disabled while one runs.
  - **The detail pane shows only what GET sends:** the masked command line (`mcpServerTarget()`), working directory, env and header **names** (each only when set), the `!command` fields and host variables (left out for a refused entry, which never connects; kept for a disabled one), the Sign-in row (**Settings › MCP sign-in** in [mcp-test-sign-in.md](mcp-test-sign-in.md)), the exposure, the file. The Code mode pane holds the choice, the sandbox and `-builtin:codemode`.
 diff --git a/docs/agents/sessions.md b/docs/agents/sessions.md
-index e99fbb7..d8928f5 100644
+index e99fbb7..0118203 100644
 --- a/docs/agents/sessions.md
 +++ b/docs/agents/sessions.md
 @@ -44,7 +44,7 @@ On mount `useAgentSession` loads the history, then `GET /api/sessions/[id]/state
@@ -36843,7 +36876,7 @@ index e99fbb7..d8928f5 100644
  Tree model (`buildSessionTree()`, pure; `components/SessionTree.tsx` virtualizes its flat `rows` over per-kind heights):
 -- Pinned section first: every project's pinned families, newest pin first, 8 shown (+ show more, as for groups). Then one collapsible group per project: projects with live non-pinned families, the current project (even empty), and pinned projects. Pinned projects come first, then the rest; each band follows `projectOrder`, and activity (a new message, a run, unread, the selection) never moves a project that has a place in it. Projects without a place come first in their band, in the old order (pinned ones by pin time, the others by newest family activity, the current project with no live family first): those not saved on their own (the current project while it has no live family, a project of transient sessions only) before the rest, so saving the rest changes nothing on screen. The model lists them per band (`unorderedKeysByBand`) and the ones to save (`projectKeysToRecord`: pinned projects, also without sessions, and projects with a live family that has a file). The sidebar sends those with `add-projects` once its ui-state is `synced` and the full session details are in (the first paint's summary rows carry file mtimes): the first save records the activity order the user sees, and a new project lands at the top of its band and stays there until moved. More keys than one request holds (500; a long-time user's daily `~/pi-cwd/YYYYMMDD` folders are each a project) go bottom first (`nextProjectKeysToRecord()`): each batch lands where it shows, right below the keys still unsaved; top first, the first batch would drop below the rest and the next one would store that scrambled order for good. A key sent but still unsaved (refused, or no room left) ends the batch, since a key saved above it would drop below it. Each key goes out once per page (`recordedOrderKeysRef`, marked only when sent; a refused save is not retried in a loop), through the raw apply, so a failed background save shows no toast. A current project that has a place keeps it while empty, so after "Open another project…" its group may sit lower down. A group is open by default when current or pinned; an explicit choice (a toggle, Alt+click, collapse others, expand all, a fork's reveal) wins and is saved. When another project becomes current (a session picked in its group), the group that was open only as the current one stays open for the page's life (`keepOutgoingGroupOpen()` into `keptOpenGroups`, page memory), so it does not fold up and move the clicked row from under the pointer. It is never saved: saved, every project ever visited came back open after a reload and the tree only grew. The tree, the toggles and the group menu's disabled states read `effectiveGroupExpansion()` (the saved choices over the kept ones); every write goes through `saveGroupChoices()`, which saves explicit choices only and drops the kept entries they cover (all of them for a choice made for every group). After a reload only the current project, pinned projects and groups opened on purpose are open. Each shows its 6 newest families plus any later one that is running, unread or selected, then "show more · N" (N still hidden). A click reveals `SHOW_MORE_STEP` (20) more, never the whole project: a project with hundreds of sessions would otherwise mount and scroll them all at once. Families that show anyway (running, unread, selected) do not use up a click, so each one adds exactly 20 rows or what is left. That is decided at the click, by position: the more row offers `nextShown` (the window past the base limit that 20 more hidden families need, counted with today's flags), `handleShowMore()` stores it, and the tree then shows every family before that position plus the flagged ones after it. A family that turns selected, unread or running inside the window keeps its place and frees nothing; counted as a budget on every render, picking the last revealed row (now selected, so it showed "anyway") let the next, older family in below it. Once a click has revealed rows, "show less" sits beside it and folds back to the base limit (it is not offered when folding would hide nothing); the more row is then scrolled back into view, since the list can shrink by hundreds of pixels under the pointer, as it is after a keyboard "show more" (the focused button moves 20 rows down). A keyboard user's focus moves to the button that remains, else to the group or pinned header; it waits in a ref until a commit has that target mounted. The counts live in `moreShown` (per project key, `PINNED_MORE_KEY` for the pinned section; session state, not saved). Folding drops a window: every explicit choice that folds a group (a toggle, Alt+click, collapse others) goes through `saveGroupChoices()`, which forgets the folded groups' counts (`forgetShownMoreOfFolded()`), and folding the pinned section forgets its own, so a group opened again shows its first rows (and the running, unread or selected ones) only. A collapsed group shows running/unread counts. Footer: "Open another project…" and "Archived · N" (the archive view, `buildArchiveRows()`, grouped by project, newest `archivedAt` first).
 +- Pinned section first: every project's pinned families, newest pin first, 8 shown (+ show more, as for groups). Then one collapsible group per project: projects with live non-pinned families, the current project (even empty), and pinned projects. Pinned projects come first, then the rest; each band follows `projectOrder`, and activity (a new message, a run, unread, the selection) never moves a project that has a place in it. Projects without a place come first in their band, in the old order (pinned ones by pin time, the others by newest family activity, the current project with no live family first): those not saved on their own (the current project while it has no live family, a project of transient sessions only) before the rest, so saving the rest changes nothing on screen. The model lists them per band (`unorderedKeysByBand`) and the ones to save (`projectKeysToRecord`: pinned projects, also without sessions, and projects with a live family that has a file). The sidebar sends those with `add-projects` once its ui-state is `synced` and the full session details are in (the first paint's summary rows carry file mtimes): the first save records the activity order the user sees, and a new project lands at the top of its band and stays there until moved. More keys than one request holds (500; a long-time user's daily `~/pi-cwd/YYYYMMDD` folders are each a project) go bottom first (`nextProjectKeysToRecord()`): each batch lands where it shows, right below the keys still unsaved; top first, the first batch would drop below the rest and the next one would store that scrambled order for good. A key sent but still unsaved (refused, or no room left) ends the batch, since a key saved above it would drop below it. Each key goes out once per page (`recordedOrderKeysRef`, marked only when sent; a refused save is not retried in a loop), through the raw apply, so a failed background save shows no toast. A current project that has a place keeps it while empty, so after opening another folder its group may sit lower down. A group is open by default when current or pinned; an explicit choice (a toggle, Alt+click, collapse others, expand all, a fork's reveal) wins and is saved. When another project becomes current (a session picked in its group), the group that was open only as the current one stays open for the page's life (`keepOutgoingGroupOpen()` into `keptOpenGroups`, page memory), so it does not fold up and move the clicked row from under the pointer. It is never saved: saved, every project ever visited came back open after a reload and the tree only grew. The tree, the toggles and the group menu's disabled states read `effectiveGroupExpansion()` (the saved choices over the kept ones); every write goes through `saveGroupChoices()`, which saves explicit choices only and drops the kept entries they cover (all of them for a choice made for every group). After a reload only the current project, pinned projects and groups opened on purpose are open. Each shows its 6 newest families plus any later one that is running, unread or selected, then "show more · N" (N still hidden). A click reveals `SHOW_MORE_STEP` (20) more, never the whole project: a project with hundreds of sessions would otherwise mount and scroll them all at once. Families that show anyway (running, unread, selected) do not use up a click, so each one adds exactly 20 rows or what is left. That is decided at the click, by position: the more row offers `nextShown` (the window past the base limit that 20 more hidden families need, counted with today's flags), `handleShowMore()` stores it, and the tree then shows every family before that position plus the flagged ones after it. A family that turns selected, unread or running inside the window keeps its place and frees nothing; counted as a budget on every render, picking the last revealed row (now selected, so it showed "anyway") let the next, older family in below it. Once a click has revealed rows, "show less" sits beside it and folds back to the base limit (it is not offered when folding would hide nothing); the more row is then scrolled back into view, since the list can shrink by hundreds of pixels under the pointer, as it is after a keyboard "show more" (the focused button moves 20 rows down). A keyboard user's focus moves to the button that remains, else to the group or pinned header; it waits in a ref until a commit has that target mounted. The counts live in `moreShown` (per project key, `PINNED_MORE_KEY` for the pinned section; session state, not saved). Folding drops a window: every explicit choice that folds a group (a toggle, Alt+click, collapse others) goes through `saveGroupChoices()`, which forgets the folded groups' counts (`forgetShownMoreOfFolded()`), and folding the pinned section forgets its own, so a group opened again shows its first rows (and the running, unread or selected ones) only. A collapsed group shows running/unread counts. There is no footer: another folder opens from the composer's project picker or the Files pane's, and the archive from the Conversations header.
-+- **The Conversations header** (`.sidebar-conversations-header`, above the tree and the archive view, not a row) names the list, as Claude's Recents, with its settings on the right (`SlidersVertical`, its centre on the session rows' ⋯: 24px from the edge, 28px on a phone; design/conversations-menu-reference.jpg is illustrative, only these options are taken). Its menu: **Group by** Project (the groups above) or None (`groupBy: "none"` in `buildSessionTree()`: the pinned section, then every live family in one list, newest first, `UNGROUPED_VISIBLE_LIMIT` (20) shown before its show more, `UNGROUPED_MORE_KEY`; each row is `context: "ungrouped"` and names its project in place of its time, as a pinned row does; no group headers, not even the current project's), kept per browser in `pi-web:sidebar-group-by` (read after mount); and **Show archived**, a switch for the archive view (`buildArchiveRows()`, grouped by project, newest `archivedAt` first; disabled while nothing is archived and the view is shut). Leaving the archive view puts focus back on the header's button.
++- **The Conversations header** (`.sidebar-conversations-header`, above the tree and the archive view, not a row) names the list, as Claude's Recents, with its settings on the right (`SlidersVertical`, its centre on the session rows' ⋯: 24px from the edge, 28px on a phone; design/conversations-menu-reference.jpg is illustrative, only these options are taken). Its menu: **Group by** Project (the groups above) or None (`groupBy: "none"` in `buildSessionTree()`: the pinned section, then every live family in one list, newest first, `UNGROUPED_VISIBLE_LIMIT` (20) shown before its show more, `UNGROUPED_MORE_KEY`; each row is `context: "ungrouped"` and names its project in place of its time, as a pinned row does; no group headers, not even the current project's; with no chevron column to keep, `.is-ungrouped` rows and their show more start their text on the header's line, 11px in, and the meta ends 11px from the edge, a scrollbar's room included), kept per browser in `pi-web:sidebar-group-by` (read after mount); and **Show archived**, a switch for the archive view (`buildArchiveRows()`, grouped by project, newest `archivedAt` first; disabled while nothing is archived and the view is shut). Leaving the archive view puts focus back on the header's button.
  - The look keeps a few rules; new rows follow them. **Three text colors**: content (session titles) `--text`, labels (project names, section labels) `--text-muted`, meta (times, counts, branches, a pinned row's project, "show more", the footer) `--text-dim`; no `color-mix` greys of their own (`SessionTree.test.mjs` lists every `color:` in `app/sidebar.css`: besides those three only the accent, the error red and the delete button's white). **No icons in the list**: no folder per project (it read as a second file tree, and the files section's header as one more project) and no pin before the pinned section; the only icons are the chevrons, a pinned project's 10px pin and the activity summary after its name, the branch icon in a row's branch, and the footer's two. **Two alignment lines**: the chevron column (12px, at the rows' left inset plus a toggle's 5px: 11px in; the inset is 6px in every browser, a classic scrollbar taking its room from the right, so the brand, the files section's header, the picker's paths and the file tree keep the same two lines) and the text column 20px in from the inset (26px) (5px + the 12px chevron + the toggle's 3px gap), where project names, section labels, session titles (`padding-left: 20px` in their inset box), "show more", the empty group's note (inset + 20px), the archive's project names and the footer's labels start (the footer's 12px icons sit in the chevron column); `SessionTree.test.mjs` adds it up from the CSS. **The accent is a state's, never a label's**: the selected row's bar, a run's spinner (no accent folder for the current project).
  - Headers are section headers over their rows, not one more row: the chevron leads (`ChevronIcon size={12} strokeWidth={3}`: a 1.5px stroke, as firm as a bold label; `--text-dim`, `--text-muted` on the header's hover; inside the toggle and `aria-hidden`, so the whole header still toggles and its name is the project's), then the name 12px/600 in `--text-muted` (`--text` for the current project, which shows by that alone, or a hovered one), then a pinned project's pin (5px off the name) and, folded, the activity summary at the right. The pinned section's header is a section label as tall as a group's (28px, 44px on a phone, a session row's height): its chevron in the same column, "Pinned" 11px/600 in small capitals (`letter-spacing: 0.05em`, uppercase; `--text` on hover), the count " · N" 11px/400 dim, then the dots while folded; the files section's header below the sessions is the same label. The archive view's project headers are group headers (`session-tree-group session-tree-archive-group`, the same toggle, chevron and name, the current project in `--text`), with the count after the name in 400 `--text-dim`, folded or not, and ⋯ alone on hover (no "+", no pin, no drag: the archive keeps no order). Phones take 13px for titles and project names (`.session-tree.is-mobile`, the component's layout prop, never a media query). The drag ghost's name is 12px/600, as a header's.
 -- Spacing: groups sit right on each other, open or folded (collapsed ones at a 28px pitch); a gap between two of them only pushed the next header away. An 8px spacer row parts the pinned section from the groups (`pinned-spacer`) and the groups from the footer (`footer-spacer`, only when there are groups; a pinned section with no group has the one spacer before the footer).
@@ -36873,7 +36906,7 @@ index e99fbb7..d8928f5 100644
  - Focus across the remount: the bar's control that moved the composer goes away with it, so AppShell keeps which one it was (`newSessionBarFocusRef`, set only when a move goes ahead) and the next bar focuses its counterpart once, if focus fell to the page. The request is used up on mount, so that bar must already have the control: after "New worktree…" the worktree button is there in its first commit only because of `newSessionMoveRef`. The folder picker gives focus back to the bar's button on Cancel and when its folder is refused. Any other new session (Ctrl+Alt+N, the sidebar's New, a group's "+", the header's +) puts the caret in the fresh composer instead, on desktop only (#1313): `handleNewSession` calls the new `ChatInputHandle.focus()` (the caret after a parked draft that came back, so typing continues it) from a `requestAnimationFrame`, once the `sessionKey` remount has mounted it, never when the bar holds the focus request (that flow keeps the bar's control), never while focus is in a modal dialog (`[aria-modal='true']`: Ctrl+Alt+N under Settings or a folder picker leaves it there) and never on a phone, where focus would raise the software keyboard uninvited, the picker's filter's rule since #1012.
 -- The sidebar's top is one toolbar row in the cells of the chat's top bar beside it (AppShell): 36px with its line (border-box, as that bar is), so the two read as one bar. In the tabs layout the two tabs (an icon and a label each; only they are the tablist), then New and the search; the chosen tab and the open search take the bar's 2px accent line on top and `--bg-selected`, as the bar's open panels do. With the files below the sessions there is nothing to choose: the brand stands where the tabs were, the panel's typographic anchor as on the old sidebar (`components/PiWebTitle.tsx`, `.sidebar-brand`: "Pi Web" in code type, 15px/700, `--text`, a button with no box and no line on its right, its text in the chevron column: 7px margin and 4px padding), then New and the search, which is the sessions' alone there (`searchesFiles` false; the files section's header row has the files'). New draws a line on its left in both layouts (`.sidebar-new-button`): the brand is no cell, and in the tabs layout the spacer leaves a gap after the last tab at most widths. New and the search read as two cells, as the chat bar's right-end cell does; a -1px left margin lays the line over the last tab's where the spacer has collapsed and keeps New's footprint, so the fit levels are unchanged, and border-box keeps their 36px cells 36px. Its old easter egg came back with it: a click scrambles "Pi Web" into the versions (`<web>p<pi>`, `NEXT_PUBLIC_APP_VERSION` and `NEXT_PUBLIC_PI_VERSION`) in the accent, left to right over 4 frames a character, and they scramble back after 3 s (`VERSION_SHOWN_MS`, from the click) or at once on a second click; never on mount; under `prefers-reduced-motion` the text is swapped without the scramble. Its name (`sidebar.brandLabel`, "Pi Web, versions: web …, pi …") says what the click shows and never changes, so no scrambled text is read out. The brand is the stacked layout's only: the tabs layout keeps its tabs there, and the empty new-session page keeps its own, with the versions. There is no view menu: "View archived" is the tree's footer row, collapsing and expanding every group a group's ⋯ menu ("Collapse other projects", which keeps that one open, and "Expand all projects", each disabled when the groups already are so) and Alt+click on a group header (every group follows it, `setAllGroupsExpanded`). Labels give way where they do not fit (`useHeaderFit`): New keeps its +, then the tabs their icons, or below the sessions the versions take 11px (`data-fit="2"`, which only they reach there): the brand itself is never cut ("Pi Web" fits beside the two 36px cells at the 180px minimum, and so do the versions at 11px with a digit to spare; `PiWebTitle.test.mjs` adds it up). It measures rather than querying a fixed width, since the labels' widths change with the language (in the tabs layout, English needs New's + alone at the default 260px); `data-fit` on the row, set before paint and again when the row resizes or the layout, a label shown, the files count or the chosen tab (bolder) changes. The brand's text changes its width without the row resizing, so `PiWebTitle` calls the fit the hook returns (`onWidthChange`) from a layout effect on its text's length (a code font: length is width), before that paints; a `ResizeObserver` on the brand would see the fit change its type and loop. A hidden label is clipped, not removed, so it stays the button's name.
 +- The sidebar's top is one toolbar row in the cells of the chat's top bar beside it (AppShell): 36px with its line (border-box, as that bar is), so the two read as one bar. In the tabs layout the two tabs (an icon and a label each; only they are the tablist); the chosen tab takes `--bg-selected`. With the files below the sessions there is nothing to choose: the brand stands where the tabs were, the panel's typographic anchor as on the old sidebar (`components/PiWebTitle.tsx`, `.sidebar-brand`: "Pi Web" in code type, 15px/700, `--text`, a button with no box and no line on its right, its text in the chevron column: 7px margin and 4px padding).
-+- Search and New are under that row, as in Claude Code's sidebar (design/sidebar-search-claude-reference.jpg; `.sidebar-actions`): a field-like button the rows' width (10px in on each side, 28px, the rows' radius, a hairline and a faint fill from the text colour) that opens the search of the tab in view (the conversations' command bar; on the tabs layout's Files tab with a folder, the files' search, `searchesFiles`), then New in a row of its own (`.sidebar-new-button`, kept for upstream's e2e): an 18px ink disc with the sidebar's colour for its plus. The magnifier and the disc are centred on one column (25px from the sidebar's edge, 15px into the field as in the reference), the placeholder and New's label start on another (43px), and the field's bottom is 13px above the disc, the reference's measures at its 2x. Its accessible name stays "Search conversations"; the visible placeholder is "Search". Closing the command bar puts focus in the composer, not back on the field: so it did from the old header icon too. Its old easter egg came back with it: a click scrambles "Pi Web" into the versions (`<web>p<pi>`, `NEXT_PUBLIC_APP_VERSION` and `NEXT_PUBLIC_PI_VERSION`) in the accent, left to right over 4 frames a character, and they scramble back after 3 s (`VERSION_SHOWN_MS`, from the click) or at once on a second click; never on mount; under `prefers-reduced-motion` the text is swapped without the scramble. Its name (`sidebar.brandLabel`, "Pi Web, versions: web …, pi …") says what the click shows and never changes, so no scrambled text is read out. The brand is the stacked layout's only: the tabs layout keeps its tabs there, and the empty new-session page keeps its own, with the versions. There is no view menu: "View archived" is the tree's footer row, collapsing and expanding every group a group's ⋯ menu ("Collapse other projects", which keeps that one open, and "Expand all projects", each disabled when the groups already are so) and Alt+click on a group header (every group follows it, `setAllGroupsExpanded`). Labels give way where they do not fit (`useHeaderFit`): the tabs keep their icons, or below the sessions the versions take 11px (`data-fit="2"`, which only they reach there): the brand itself is never cut ("Pi Web" fits at the 180px minimum, and so do the versions at 11px; `PiWebTitle.test.mjs` adds it up). It measures rather than querying a fixed width, since the labels' widths change with the language `data-fit` on the row, set before paint and again when the row resizes or the layout, a label shown, the files count or the chosen tab (bolder) changes. The brand's text changes its width without the row resizing, so `PiWebTitle` calls the fit the hook returns (`onWidthChange`) from a layout effect on its text's length (a code font: length is width), before that paints; a `ResizeObserver` on the brand would see the fit change its type and loop. A hidden label is clipped, not removed, so it stays the button's name.
++- Search and New are under that row, as in Claude Code's sidebar (design/sidebar-search-claude-reference.jpg; `.sidebar-actions`): a field-like button the rows' width (10px in on each side, 28px, the rows' radius, a hairline and a faint fill from the text colour) that opens the search of the tab in view (the conversations' command bar; on the tabs layout's Files tab with a folder, the files' search, `searchesFiles`), then New in a row of its own (`.sidebar-new-button`, kept for upstream's e2e): a button as wide and tall as the field, with a faint fill and no hairline, and a plain 14px plus (no disc). The magnifier and the plus are centred on one column (25px from the sidebar's edge, 15px into the field as in the reference) and the placeholder and New's label start on another (43px). Its accessible name stays "Search conversations"; the visible placeholder is "Search". Closing the command bar puts focus in the composer, not back on the field: so it did from the old header icon too. Its old easter egg came back with it: a click scrambles "Pi Web" into the versions (`<web>p<pi>`, `NEXT_PUBLIC_APP_VERSION` and `NEXT_PUBLIC_PI_VERSION`) in the accent, left to right over 4 frames a character, and they scramble back after 3 s (`VERSION_SHOWN_MS`, from the click) or at once on a second click; never on mount; under `prefers-reduced-motion` the text is swapped without the scramble. Its name (`sidebar.brandLabel`, "Pi Web, versions: web …, pi …") says what the click shows and never changes, so no scrambled text is read out. The brand is the stacked layout's only: the tabs layout keeps its tabs there, and the empty new-session page keeps its own, with the versions. There is no view menu: "Show archived" is in the Conversations menu, collapsing and expanding every group a group's ⋯ menu ("Collapse other projects", which keeps that one open, and "Expand all projects", each disabled when the groups already are so) and Alt+click on a group header (every group follows it, `setAllGroupsExpanded`). Labels give way where they do not fit (`useHeaderFit`): the tabs keep their icons, or below the sessions the versions take 11px (`data-fit="2"`, which only they reach there): the brand itself is never cut ("Pi Web" fits at the 180px minimum, and so do the versions at 11px; `PiWebTitle.test.mjs` adds it up). It measures rather than querying a fixed width, since the labels' widths change with the language `data-fit` on the row, set before paint and again when the row resizes or the layout, a label shown, the files count or the chosen tab (bolder) changes. The brand's text changes its width without the row resizing, so `PiWebTitle` calls the fit the hook returns (`onWidthChange`) from a layout effect on its text's length (a code font: length is width), before that paints; a `ResizeObserver` on the brand would see the fit change its type and loop. A hidden label is clipped, not removed, so it stays the button's name.
  - Two layouts, one element tree. Where the files go is the desktop's choice (Settings › General › File browser, `useFilesPlacement()`, see settings-ui.md): below the sessions (the default) or in a tab of their own; phones always take the tabs (`stacked = !isMobile && placement === "below"`; the server and hydration render the stacked layout, both hooks' server snapshots). Both layouts render the same containers in the same order (the toolbar row, the sessions panel, the files panel and its body `#session-sidebar-files-body`, the menu, the toast): only attributes differ, and each layout's own rows are conditional siblings in fixed slots (`{stacked && …}` / `{!stacked && …}`: the brand or the tablist, the separator, the files section's header row, the files tab's row of keys). So a Settings change, the window crossing the phone breakpoint or a fold never remounts `FileExplorer` (its open folders, a search, an upload), the session tree (its scroll) or the picker. Never wrap a panel differently per layout, and never mount the explorer on anything but its cwd (`explorerOpen && <FileExplorer>`, before the tabs, lost all three on a fold).
  - Tabs: "Sessions | Files" both stay mounted (`role="tabpanel"`, `hidden` on the inactive one), as before the stacked layout. Below the sessions: both panels are `role="region"` (named "Sessions" and "Files"), always shown, in one column (`.session-sidebar.is-files-below`). The sessions fill what the files leave, at least 120px (`SESSIONS_SECTION_MIN_HEIGHT`, the CSS `min-height`); then the separator; then the files section, as tall as `--sidebar-files-height`, set on the root by `useResizablePanel` (vertical, grows up; `pi-web:sidebar-files-height`, never the retired `pi-web:sidebar-session-pane-height`; `persistClamp: false`, so a window too short for the user's size shows less without saving it; only a drag that moved, a key or a reset saves, and grow and End start from the saved size, never lowering it): at least 220px (its header row, the picker's row, about six tree rows), at most the sidebar under its toolbar row less the sessions' minimum, 45% of that by default (320px until measured). A sidebar too short for both (a landscape phone wider than the breakpoint, a short window) shrinks the files section in CSS, down to its header row and line (29px, 37px on a coarse pointer): the sessions' zero `flex-basis` freezes them at their minimum, so the files take the whole shortfall and never run past the root, which would clip them. A `ResizeObserver` on the root fits it again while stacked: the window is not the only thing that changes the sidebar's height. The separator is the hook's `separatorProps` (arrows, Home/End, Enter or a double-click to reset) on a 12px hit area centred on the files' top border, which is the line it shows (`.panel-resize-handle.sidebar-files-resize-handle`: the side handles' look on its side), only while the section is open. The section's first row (`.sidebar-files-section`, 28px, 36px on a coarse pointer; stacked only) is all of the files' chrome above the picker: a section header as the pinned section's is, then, 2px after it, the files' keys (flush, no gap between them). The toggle: its 12px chevron in the chevron column the session tree and the file tree share (6px in plus the toggle's 5px), "Files" in the text column in the pinned label's small capitals (11px/600, `--text-muted`, `--text` on hover), then while something is changed the count as the pinned section's (" · N", 11px/400 `--text-dim`, `aria-hidden`: the changes key's name says it; the toggle's title is "N changed files"), `aria-expanded` and `aria-controls` on the body; no folder (it read as one more project). The keys are a group of their own (`.sidebar-files-keys`, `role="group"`, "File actions"), at the row's right end on the session times' and the boxes' edge (`--sidebar-files-inset-right` on `.session-sidebar.is-files-below`: `max(10px, the session tree's scrollbar + 4px)`, the root's `--session-tree-scrollbar`; 10px in beside an overlay or a coarse pointer's 6px scrollbar, 14px beside Chromium's 10px), in the Files tab's order with the search last: seven keys, always rendered and disabled without a folder (the terminal also without `onOpenTerminal`, which the files tab leaves out instead), so none ever moves: a terminal in the folder, the file manager (the tab's disabled reason and title; its failure shows in the section's body, so a failure opens a folded section: `openInFileManager()` resolves true when it failed, else the `role="alert"` would wait unseen in a hidden body until some later unfold), upload (a folded section opens first: the upload's progress and summary are the tree's), refresh (✓ for 2 s), the ignored-files switch (`aria-pressed`), the changes view (disabled while nothing is changed, `aria-pressed` while the changes show, named "N changed files"; on a folded section it opens it on the changes), the file search (`aria-expanded`, `aria-controls="file-search-input"`; on a folded section it opens the section with the field open and focused). They are the files tab's elements (`terminalButton`, `fileManagerButton`, …, `changesButton`, built once, rendered in one layout's place at a time; the search is this row's own, the tab's being the toolbar row's) and `.sidebar-tool-button`s with 13px icons (14px in the tab's row), 26px high, 6px corners, sharing what the toggle's content leaves: `flex: 1 1 0`, 18px to 26px wide (their group `flex: 1000 0 calc(7 * 18px)`, `max-width: calc(7 * 26px)`, so it takes the room before the toggle grows), about 24px at the default 260px beside "文件 · 2", 26px from about 300px; only with the keys at 18px does the toggle give way (its label, then its count, wrap out of view whole, down to the chevron). On a coarse pointer they are 32px and come before the label, as before. No count chip any more: it came and went and moved its neighbours. A key that turns disabled under the focus loses it: current Chromium (154) keeps it on the key until its next rendering update, after the commit's layout effects, and then blurs it to the page with `relatedTarget` null, which clears the root's note (`sidebarFocusRef`), so nothing would try again (older builds blur at once). So when a commit or a revert disables the changes key (either layout) while the note names it, a layout effect hands the focus to the nearest key still enabled, the next first (`nearestEnabledKey()`: the file search here, the ignored-files switch in the tab), else the toolbar row's search, when the focus is still on the key or fell to the page (`handOffDisabledKeyFocus()`); focus the user put elsewhere stays. The toggle has a zero basis, clips its overflow and keeps its chevron (`min-width: 17px`), so its label gives way first, then the count, and only then do the keys narrow together: at the default 260px beside Chromium's 10px scrollbar the keys keep 22px and the toggle 83px, room for "Files · 123" (82px in Chromium's 11px system font); at the 180px minimum (159px inside the row's padding) the keys still get 20px each (`SessionSidebar.test.mjs` adds both up from the CSS). On a coarse pointer the 32px keys leave the toggle only its chevron at the default width: touch keys over the label. Folding hides the body (`hidden`, nothing unmounts) and the separator: the row alone stays, its keys and count with it, at the bottom (`height: 29px`, 37px on a coarse pointer: a length, not `auto`, so the fold can move to it), and the sessions take the rest. A fold and an unfold move (`useSidebarMotion()`, `filesFoldState()`): while one runs `.is-files-folding` on the root puts `transition: height 180ms ease-out` on the files panel (and on the toast's `bottom`), so its height goes between `--sidebar-files-height` and the row's and the sessions' zero basis follows frame by frame. Only `setFilesSectionCollapsed()` starts it, and only on a change: the toggle, `revealFiles()`, the folded section's search, changes and upload keys and a file manager error move; a drag, keys, a window resize, a layout switch (the class needs `stacked`) and the restore after hydration (`setFilesCollapsed` directly) never do. Unfolding shows the body first and grows it; folding keeps it shown, `inert`, to the end, then `hidden`. The separator comes back only once the files are still (`filesFold.open`), so a drag never meets the transition. The phase ends on the panel's own `transitionend` for `height` (the toggle chevron's bubbles there too), else 300 ms after its start; a second click halfway turns it back from where it is. The session tree re-reads its viewport on every resize (its `ResizeObserver` on the scroll box), so no rows are missing during or after the move. Under `prefers-reduced-motion` no phase starts and the CSS has no transition: the fold is instant, as before. The fold is per browser (`pi-web:sidebar-files-collapsed`, `lib/sidebar-prefs.ts`). Below the sessions `switchTab()` does nothing (the archive view, the search's fallback), so the tabs layout and phones get the user's last tab back.
 -- Everything that goes to the files (a group menu's "Open in Files", the footer's "Open another project…", the folded section's search) goes through `revealFiles(focusTarget)`: the files tab, or the files section opened (and saved so). Its focus effect waits for the files to show and runs on a request counter too, since below the sessions they may show already: the project button takes the focus, its menu opens, or the file search field takes it. An unfolding section shows once it is done (`filesShown` is `filesFold.open` there): until then its project button is still under the sidebar's edge, where the project menu would be placed. Focus fallbacks (`selectedTabButton()`, behind `familyRowButton`, `groupHeaderButton` and the archive's Back) take the selected tab, or with no tab mounted the toolbar row's search button (always there, never disabled), so focus never falls to `<body>`. A live layout switch (the setting from another window, the phone breakpoint) removes the controls one layout has (the tabs, the files tab's keys; the brand, the separator, the files section's header row and its keys) and may hide a panel: focus that was on one goes there too (the root notes the sidebar control focus is on, `sidebarFocusRef`, forgotten once focus leaves the sidebar, so focus elsewhere stays; a blur with no `relatedTarget` while `document.hasFocus()` is false is the window losing focus, which keeps it, since the setting from another window arrives just then). The toast is one live region at the root in both layouts; below the files, CSS lifts it to the bottom of the sessions (`calc(var(--sidebar-files-height) + 8px)`, 37px over a folded section, 45px on a coarse pointer), so it never covers the file tree.