Pi Web fork: Copy only on answers, one step rhythm, no letter spacing

piweb/hf-design.patch

@@ -3977,7 +3977,7 @@ index 0000000..8d003fe
 +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 +OTHER DEALINGS IN THE FONT SOFTWARE.
 diff --git a/app/globals.css b/app/globals.css
-index d6b5535..9f01813 100644
+index d6b5535..14749e0 100644
 --- a/app/globals.css
 +++ b/app/globals.css
 @@ -24,46 +24,109 @@
@@ -4235,7 +4235,7 @@ index d6b5535..9f01813 100644
  }
  
  /* Theme toggle: circular wipe via View Transitions API.
-@@ -218,9 +301,9 @@ body {
+@@ -218,16 +301,15 @@ body {
    margin-bottom: 22px;
  }
  
@@ -4247,7 +4247,14 @@ index d6b5535..9f01813 100644
  }
  
  .web-login-brand h1 {
-@@ -247,15 +330,15 @@ body {
+   margin: 0 0 3px;
+   color: var(--text);
+   font-size: 22px;
+-  letter-spacing: 0;
+ }
+ 
+ .web-login-brand p {
+@@ -247,15 +329,15 @@ body {
    min-width: 0;
    padding: 10px 10px 10px 14px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
@@ -4266,7 +4273,7 @@ index d6b5535..9f01813 100644
  }
  
  .web-login-label {
-@@ -307,7 +390,7 @@ html.dark .web-login-error {
+@@ -307,14 +389,13 @@ html.dark .web-login-error {
    min-height: 32px;
    padding: 7px 14px;
    border: none;
@@ -4275,7 +4282,14 @@ index d6b5535..9f01813 100644
    background: var(--accent);
    color: var(--accent-contrast);
    cursor: pointer;
-@@ -322,7 +405,7 @@ html.dark .web-login-error {
+   font: inherit;
+   font-size: 13px;
+   font-weight: 600;
+-  letter-spacing: 0;
+ }
+ 
+ .web-login-form button:not(:disabled):hover {
+@@ -322,7 +403,7 @@ html.dark .web-login-error {
  }
  
  .web-login-form button:focus-visible {
@@ -4284,7 +4298,7 @@ index d6b5535..9f01813 100644
    outline-offset: 2px;
  }
  
-@@ -332,110 +415,139 @@ html.dark .web-login-error {
+@@ -332,110 +413,139 @@ html.dark .web-login-error {
    cursor: not-allowed;
  }
  
@@ -4380,7 +4394,7 @@ index d6b5535..9f01813 100644
    overflow: hidden;
 -  text-overflow: ellipsis;
 -  white-space: nowrap;
--}
+ }
 -
 -.terminal-status-dot {
 -  width: 7px;
@@ -4407,7 +4421,7 @@ index d6b5535..9f01813 100644
 -  color: #9ca3af;
 -  cursor: pointer;
 -  font: inherit;
- }
+-}
 -
 -.terminal-panel-exit {
 -  padding: 7px 12px;
@@ -4505,7 +4519,7 @@ index d6b5535..9f01813 100644
  }
  
  .terminal-xterm:has(+ .terminal-extra-keys) {
-@@ -451,7 +563,7 @@ html[data-keyboard-open] .terminal-extra-keys {
+@@ -451,7 +561,7 @@ html[data-keyboard-open] .terminal-extra-keys {
    padding: 0;
    border: none;
    background: transparent;
@@ -4514,7 +4528,7 @@ index d6b5535..9f01813 100644
    font-family: var(--font-mono);
    font-size: 12px;
    touch-action: manipulation;
-@@ -462,7 +574,7 @@ html[data-keyboard-open] .terminal-extra-keys {
+@@ -462,7 +572,7 @@ html[data-keyboard-open] .terminal-extra-keys {
  }
  
  .terminal-extra-keys button:active {
@@ -4523,7 +4537,7 @@ index d6b5535..9f01813 100644
  }
  
  .terminal-extra-keys .is-rotated {
-@@ -471,17 +583,10 @@ html[data-keyboard-open] .terminal-extra-keys {
+@@ -471,17 +581,10 @@ html[data-keyboard-open] .terminal-extra-keys {
  }
  
  .terminal-extra-keys button.is-active {
@@ -4544,7 +4558,7 @@ index d6b5535..9f01813 100644
  
  /*
   * Chromium-only scrollbars. Firefox renders its native ones, which the standard
-@@ -502,7 +607,7 @@ html[data-keyboard-open] .terminal-extra-keys {
+@@ -502,7 +605,7 @@ html[data-keyboard-open] .terminal-extra-keys {
    background-color: color-mix(in srgb, var(--text-dim) 45%, transparent);
    background-clip: padding-box;
    border: 2px solid transparent;
@@ -4553,7 +4567,7 @@ index d6b5535..9f01813 100644
  }
  /* Only ever set background-color here: the `background` shorthand resets
     background-clip and would snap the thumb to the full 10px on hover. */
-@@ -538,21 +643,10 @@ html[data-keyboard-open] .terminal-extra-keys {
+@@ -538,21 +641,10 @@ html[data-keyboard-open] .terminal-extra-keys {
    }
    ::-webkit-scrollbar-thumb {
      border-width: 1px;
@@ -4576,7 +4590,7 @@ index d6b5535..9f01813 100644
  
  
  .extension-status-shelf {
-@@ -686,8 +780,9 @@ button.extension-widget-trigger:hover,
+@@ -686,8 +778,9 @@ button.extension-widget-trigger:hover,
  }
  
  button.extension-widget-trigger:focus-visible {
@@ -4588,7 +4602,7 @@ index d6b5535..9f01813 100644
  }
  
  .extension-widget-placement {
-@@ -703,9 +798,9 @@ button.extension-widget-trigger:focus-visible {
+@@ -703,9 +796,9 @@ button.extension-widget-trigger:focus-visible {
  
  .extension-widget-placement-icon {
    display: block;
@@ -4601,7 +4615,7 @@ index d6b5535..9f01813 100644
    fill: currentColor;
  }
  
-@@ -803,8 +898,9 @@ button.extension-widget-trigger:focus-visible {
+@@ -803,8 +896,9 @@ button.extension-widget-trigger:focus-visible {
  }
  
  .extension-status-command:focus-visible {
@@ -4613,7 +4627,7 @@ index d6b5535..9f01813 100644
  }
  
  .extension-status-command:disabled {
-@@ -826,8 +922,8 @@ button.extension-widget-trigger:focus-visible {
+@@ -826,8 +920,8 @@ button.extension-widget-trigger:focus-visible {
  }
  
  :root {
@@ -4624,7 +4638,15 @@ index d6b5535..9f01813 100644
    --font-ui: var(--font-ui-default);
    --font-mono: var(--font-mono-default);
    --font-ui-weight: 400;
-@@ -883,11 +979,11 @@ pre, code {
+@@ -866,7 +960,6 @@ pre, code {
+   margin: 10px 0 5px;
+   color: var(--text);
+   line-height: 1.35;
+-  letter-spacing: 0;
+ }
+ .markdown-body h1 { font-size: 1.16em; }
+ .markdown-body h2 { font-size: 1.08em; }
+@@ -883,11 +976,11 @@ pre, code {
  .markdown-body ol > li { list-style-type: decimal; }
  .markdown-body li > p { margin: 0; }
  .markdown-body li::marker {
@@ -4639,7 +4661,7 @@ index d6b5535..9f01813 100644
    font-weight: 700;
  }
  .markdown-body em { color: var(--text-muted); }
-@@ -896,24 +992,23 @@ pre, code {
+@@ -896,24 +989,23 @@ pre, code {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
@@ -4668,7 +4690,7 @@ index d6b5535..9f01813 100644
  }
  .markdown-body .contains-task-list {
    padding-left: 0;
-@@ -935,7 +1030,7 @@ pre, code {
+@@ -935,7 +1027,7 @@ pre, code {
    height: 14px;
    margin: 0;
    border: 1px solid var(--border);
@@ -4677,7 +4699,7 @@ index d6b5535..9f01813 100644
    background: var(--bg);
    display: inline-grid;
    place-content: center;
-@@ -967,8 +1062,8 @@ pre, code {
+@@ -967,8 +1059,8 @@ pre, code {
    margin: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
@@ -4688,7 +4710,7 @@ index d6b5535..9f01813 100644
  }
  .markdown-body table {
    border-collapse: separate;
-@@ -1088,7 +1183,7 @@ pre, code {
+@@ -1088,7 +1180,7 @@ pre, code {
    padding: 7px 8px;
    overflow: auto;
    border: 1px solid var(--border);
@@ -4697,7 +4719,7 @@ index d6b5535..9f01813 100644
    background: var(--bg-panel);
    font-family: var(--font-mono);
    font-size: 11px;
-@@ -1108,16 +1203,13 @@ pre, code {
+@@ -1108,16 +1200,13 @@ pre, code {
    min-width: 0;
    max-width: 100%;
    margin: 6px 0;
@@ -4717,7 +4739,7 @@ index d6b5535..9f01813 100644
    color: var(--text-dim);
    font-size: 11px;
    display: flex;
-@@ -1137,7 +1229,7 @@ pre, code {
+@@ -1137,7 +1226,7 @@ pre, code {
  }
  .markdown-code-action {
    border: 1px solid var(--border);
@@ -4726,7 +4748,7 @@ index d6b5535..9f01813 100644
    padding: 2px 7px;
    background: var(--bg);
    color: var(--text-muted);
-@@ -1191,8 +1283,9 @@ pre, code {
+@@ -1191,8 +1280,9 @@ pre, code {
    opacity: 0.85;
  }
  .mermaid-preview-button:focus-visible {
@@ -4738,7 +4760,7 @@ index d6b5535..9f01813 100644
  }
  
  .image-preview-dialog {
-@@ -1228,7 +1321,7 @@ pre, code {
+@@ -1228,7 +1318,7 @@ pre, code {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
@@ -4747,7 +4769,7 @@ index d6b5535..9f01813 100644
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  }
  
-@@ -1244,7 +1337,7 @@ pre, code {
+@@ -1244,7 +1334,7 @@ pre, code {
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
@@ -4756,7 +4778,7 @@ index d6b5535..9f01813 100644
    background: var(--bg-panel);
    color: var(--text-muted);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
-@@ -1259,7 +1352,7 @@ pre, code {
+@@ -1259,7 +1349,7 @@ pre, code {
  }
  
  .image-preview-close:focus-visible {
@@ -4765,7 +4787,7 @@ index d6b5535..9f01813 100644
    outline-offset: 2px;
  }
  
-@@ -1320,7 +1413,7 @@ pre, code {
+@@ -1320,7 +1410,7 @@ pre, code {
    height: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
@@ -4774,7 +4796,7 @@ index d6b5535..9f01813 100644
    background: var(--bg);
  }
  .mermaid-zoom-stepper button,
-@@ -1347,7 +1440,7 @@ pre, code {
+@@ -1347,7 +1437,7 @@ pre, code {
  .mermaid-zoom-icon-button {
    flex: 0 0 24px;
    border: 1px solid var(--border);
@@ -4783,7 +4805,7 @@ index d6b5535..9f01813 100644
  }
  .mermaid-zoom-stepper button:hover:not(:disabled),
  .mermaid-zoom-icon-button:hover {
-@@ -1360,8 +1453,9 @@ pre, code {
+@@ -1360,8 +1450,9 @@ pre, code {
  }
  .mermaid-zoom-stepper button:focus-visible,
  .mermaid-zoom-icon-button:focus-visible {
@@ -4795,7 +4817,7 @@ index d6b5535..9f01813 100644
  }
  .mermaid-zoom-value {
    min-width: 48px;
-@@ -1384,7 +1478,7 @@ pre, code {
+@@ -1384,7 +1475,7 @@ pre, code {
  .mermaid-zoom-canvas {
    padding: 12px;
    border: 1px solid var(--border);
@@ -4804,7 +4826,7 @@ index d6b5535..9f01813 100644
    background: var(--bg-panel);
    margin: 0 auto;
    transition: width 0.15s ease;
-@@ -1460,7 +1554,7 @@ pre, code {
+@@ -1460,7 +1551,7 @@ pre, code {
    height: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
@@ -4813,7 +4835,15 @@ index d6b5535..9f01813 100644
  }
  
  .file-viewer-mode-button {
-@@ -1503,12 +1597,11 @@ pre, code {
+@@ -1471,7 +1562,6 @@ pre, code {
+   font: inherit;
+   font-size: 11px;
+   font-weight: 500;
+-  letter-spacing: 0;
+   cursor: pointer;
+   white-space: nowrap;
+ }
+@@ -1503,12 +1593,11 @@ pre, code {
    height: 32px;
    padding: 0;
    box-sizing: border-box;
@@ -4828,7 +4858,7 @@ index d6b5535..9f01813 100644
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
-@@ -1542,7 +1635,7 @@ pre, code {
+@@ -1542,7 +1631,7 @@ pre, code {
  }
  
  .chat-scroll-to-bottom:focus-visible {
@@ -4837,7 +4867,7 @@ index d6b5535..9f01813 100644
    outline-offset: 2px;
  }
  
-@@ -1566,11 +1659,13 @@ pre, code {
+@@ -1566,11 +1655,13 @@ pre, code {
    }
  }
  
@@ -4855,7 +4885,7 @@ index d6b5535..9f01813 100644
    margin: 0 auto;
  }
  
-@@ -1584,22 +1679,21 @@ pre, code {
+@@ -1584,22 +1675,20 @@ pre, code {
  
  .new-session-logo {
    flex: none;
@@ -4880,11 +4910,10 @@ index d6b5535..9f01813 100644
 +  color: var(--text-strong);
 +  font-size: 20px;
 +  font-weight: 600;
-+  letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
  }
-@@ -1613,7 +1707,8 @@ pre, code {
+@@ -1613,7 +1702,8 @@ pre, code {
    gap: 6px;
    min-width: 0;
    color: var(--text-dim);
@@ -4894,7 +4923,7 @@ index d6b5535..9f01813 100644
    line-height: 1.4;
    white-space: nowrap;
  }
-@@ -1638,7 +1733,7 @@ pre, code {
+@@ -1638,7 +1728,7 @@ pre, code {
    gap: 3px;
    margin: -3px -4px;
    padding: 3px 4px;
@@ -4903,7 +4932,7 @@ index d6b5535..9f01813 100644
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
-@@ -1652,38 +1747,27 @@ pre, code {
+@@ -1652,38 +1742,27 @@ pre, code {
  
  /* The ring inside the box, clear of the "→" and "·" beside it. */
  .new-session-update:focus-visible {
@@ -4948,7 +4977,7 @@ index d6b5535..9f01813 100644
    }
  }
  
-@@ -1700,8 +1784,8 @@ pre, code {
+@@ -1700,8 +1779,8 @@ pre, code {
     tab's stacked boxes, the row below the sessions), as the sidebar drew it
     on main: two grey boxes in the header buttons' material, 11px, the
     project's whole path and the worktree's branch in code type, cut at their
@@ -4959,7 +4988,7 @@ index d6b5535..9f01813 100644
  .project-picker {
    display: flex;
    align-items: center;
-@@ -1722,52 +1806,14 @@ pre, code {
+@@ -1722,52 +1801,14 @@ pre, code {
    min-width: 0;
    height: 29px;
    padding: 0 10px;
@@ -5015,7 +5044,7 @@ index d6b5535..9f01813 100644
  }
  
  /* The project's name (its display name, else its folder's), cut at its
-@@ -1781,8 +1827,9 @@ pre, code {
+@@ -1781,8 +1822,9 @@ pre, code {
    max-width: 28ch;
    overflow: hidden;
    color: var(--text-dim);
@@ -5026,7 +5055,7 @@ index d6b5535..9f01813 100644
  }
  
  .project-picker-parent {
-@@ -1800,10 +1847,6 @@ pre, code {
+@@ -1800,10 +1842,6 @@ pre, code {
    text-overflow: ellipsis;
  }
  
@@ -5037,7 +5066,7 @@ index d6b5535..9f01813 100644
  .project-picker-button:hover,
  .project-picker-button[aria-expanded="true"] {
    background: var(--bg-selected);
-@@ -1811,8 +1854,9 @@ pre, code {
+@@ -1811,8 +1849,9 @@ pre, code {
  }
  
  .project-picker-button:focus-visible {
@@ -5049,7 +5078,7 @@ index d6b5535..9f01813 100644
  }
  
  .project-picker-icon,
-@@ -1851,7 +1895,8 @@ pre, code {
+@@ -1851,7 +1890,8 @@ pre, code {
     path's color and code type, cut at its end. */
  .project-picker-label.is-alias {
    color: var(--text);
@@ -5059,7 +5088,7 @@ index d6b5535..9f01813 100644
  }
  
  /* A path or a branch, cut at its left (rtl), the text itself kept left to
-@@ -1901,7 +1946,8 @@ pre, code {
+@@ -1901,7 +1941,8 @@ pre, code {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    color: var(--text-dim);
@@ -5069,7 +5098,7 @@ index d6b5535..9f01813 100644
  }
  
  /* No worktree list here (the files tab): a box that says why, and does nothing. */
-@@ -1978,7 +2024,7 @@ pre, code {
+@@ -1978,7 +2019,7 @@ pre, code {
    box-sizing: border-box;
    flex: 0 0 24px;
    border: 1px solid var(--border);
@@ -5078,7 +5107,7 @@ index d6b5535..9f01813 100644
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
-@@ -2003,8 +2049,9 @@ pre, code {
+@@ -2003,8 +2044,9 @@ pre, code {
  
  .file-viewer-mode-button:focus-visible,
  .file-viewer-icon-button:focus-visible {
@@ -5090,7 +5119,7 @@ index d6b5535..9f01813 100644
  }
  
  .directory-picker-path:focus-visible {
-@@ -2037,7 +2084,7 @@ pre, code {
+@@ -2037,7 +2079,7 @@ pre, code {
  .markdown-file-preview pre {
    background: var(--bg-panel);
    border: 1px solid var(--border);
@@ -5099,7 +5128,7 @@ index d6b5535..9f01813 100644
    padding: 12px 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
-@@ -2049,7 +2096,7 @@ pre, code {
+@@ -2049,7 +2091,7 @@ pre, code {
    font-size: 0.9em;
    background: var(--bg-panel);
    padding: 1px 5px;
@@ -5108,7 +5137,7 @@ index d6b5535..9f01813 100644
  }
  .markdown-file-preview pre code {
    background: none;
-@@ -2061,7 +2108,7 @@ pre, code {
+@@ -2061,7 +2103,7 @@ pre, code {
    margin-bottom: 20px;
    padding: 14px 16px 12px;
    border: 1px solid var(--border);
@@ -5117,7 +5146,7 @@ index d6b5535..9f01813 100644
    background: var(--bg-panel);
  }
  .markdown-frontmatter-title {
-@@ -2114,18 +2161,6 @@ pre, code {
+@@ -2114,18 +2156,6 @@ pre, code {
    text-underline-offset: 2px;
  }
  
@@ -5136,7 +5165,7 @@ index d6b5535..9f01813 100644
  @keyframes drop-zone-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
-@@ -2230,10 +2265,6 @@ span.token.table {
+@@ -2230,10 +2260,6 @@ span.token.table {
  .panel-resize-handle.is-resizing::after {
    background: color-mix(in srgb, var(--text-muted) 70%, var(--border));
  }
@@ -5147,7 +5176,7 @@ index d6b5535..9f01813 100644
  /* Desktop sidebar: animate width */
  @media (min-width: 641px) {
    .sidebar-overlay-backdrop {
-@@ -2264,119 +2295,6 @@ span.token.table {
+@@ -2264,119 +2290,6 @@ span.token.table {
    }
  }
  
@@ -5267,7 +5296,7 @@ index d6b5535..9f01813 100644
  /* Mobile sidebar: slide in/out as overlay */
  @media (max-width: 640px) {
    .chat-stats-center {
-@@ -2401,31 +2319,7 @@ span.token.table {
+@@ -2401,31 +2314,7 @@ span.token.table {
      box-shadow: none;
    }
  
@@ -5300,7 +5329,7 @@ index d6b5535..9f01813 100644
      display: none;
    }
    .directory-picker-back,
-@@ -2474,3 +2368,479 @@ span.token.table {
+@@ -2474,3 +2363,490 @@ span.token.table {
      display: none !important;
    }
  }
@@ -5468,7 +5497,10 @@ index d6b5535..9f01813 100644
 +  transition: opacity 0.12s;
 +}
 +:is(.turn-user, .turn-reply):is(:hover, :focus-within) .message-actions-reveal,
-+.message-actions-reveal.is-pinned { opacity: 1; }
++.message-actions-reveal.is-pinned,
++.message-actions-reveal:has([data-done]) { opacity: 1; }
++/* No hover on a touch screen: the actions stay in view there. */
++@media (hover: none) { .message-actions-reveal { opacity: 1; } }
 +.message-meta {
 +  padding: 0 6px;
 +  color: var(--text-dim);
@@ -5476,10 +5508,18 @@ index d6b5535..9f01813 100644
 +  font-variant-numeric: tabular-nums;
 +  white-space: nowrap;
 +}
++/* Vertical rhythm. Steps (thoughts, tool calls, a step's text) are one 4px rhythm,
++   within a message and from one message to the next, folded under their summary or
++   not (a running turn's are not yet); the answer sits 8px under its steps, open or
++   closed; its paragraphs keep the reading gap; a turn ends 22px before the next. */
 +.turn-reply { margin: 0 0 22px; }
 +.turn-reply > .message-actions { margin: 4px 0 0 -6px; }
 +.turn-reply.is-step { margin: 0; }
++/* Each message sits in a wrapper of its own (ChatWindow): the rhythm is set between those. */
++:is(.turn-reply.is-step, :has(> .turn-reply.is-step)) + :is(.turn-reply.is-step, :has(> .turn-reply.is-step)) { margin-top: 4px; }
++:is(.turn-reply.is-step, :has(> .turn-reply.is-step)) + :is(.turn-reply:not(.is-step), :has(> .turn-reply:not(.is-step))) { margin-top: 8px; }
 +.reply-blocks { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
++.turn-reply.is-step .reply-blocks { gap: 4px; }
 +
 +/* The steps of a turn: one summary line, "Ran 2 commands, read a file", that
 +   opens onto the steps themselves along a thin rail. */
@@ -5511,8 +5551,8 @@ index d6b5535..9f01813 100644
 +  position: relative;
 +  display: flex;
 +  flex-direction: column;
-+  gap: 4px;
-+  margin: 4px 0 4px 1px;
++  gap: 0;
++  margin: 4px 0 0 1px;
 +  padding-left: 16px;
 +}
 +/* A drawing, not a border: the rail the steps hang from. */
@@ -5853,6 +5893,47 @@ index 62c25e4..a921c1d 100644
          <script
            dangerouslySetInnerHTML={{
              __html: THEME_INIT_SCRIPT,
+diff --git a/app/letter-spacing.test.mjs b/app/letter-spacing.test.mjs
+new file mode 100644
+index 0000000..099fc49
+--- /dev/null
++++ b/app/letter-spacing.test.mjs
+@@ -0,0 +1,35 @@
++import assert from "node:assert/strict";
++import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
++import test from "node:test";
++
++// The design system's rule: never tweak letter spacing. Every font keeps its natural spacing,
++// so no stylesheet or component sets letter-spacing (not even 0, which only ever undid a tweak).
++const PATTERN = /letter-spacing|letterSpacing|\btracking-(?:tighter|tight|normal|wide|wider|widest|\[)/;
++
++function files(dir, keep) {
++  const out = [];
++  for (const name of readdirSync(dir)) {
++    if (name === "node_modules" || name.startsWith(".")) continue;
++    const path = `${dir}/${name}`;
++    if (statSync(path).isDirectory()) out.push(...files(path, keep));
++    else if (keep(name)) out.push(path);
++  }
++  return out;
++}
++
++test("nothing in Pi Web tweaks letter spacing", () => {
++  const root = new URL("..", import.meta.url).pathname.replace(/\/$/, "");
++  const ours = [
++    ...["app", "components", "lib", "hooks"].flatMap((dir) => files(`${root}/${dir}`, (n) => /\.(css|tsx?|mjs)$/.test(n) && !n.endsWith(".test.mjs"))),
++    `${root}/public/offline.html`,
++  ];
++  // The Hugging Face gateway's pages and the design system's sources, where this checkout sits beside them.
++  for (const dir of ["../space/gateway/static", "../design"]) {
++    if (existsSync(`${root}/${dir}`)) ours.push(...readdirSync(`${root}/${dir}`).filter((n) => /\.(css|html|js|json|py)$/.test(n)).map((n) => `${root}/${dir}/${n}`));
++  }
++  for (const path of ours) {
++    readFileSync(path, "utf8").split("\n").forEach((line, index) => {
++      assert.doesNotMatch(line, PATTERN, `${path.replace(root + "/", "")}:${index + 1}`);
++    });
++  }
++});
 diff --git a/app/login/page.tsx b/app/login/page.tsx
 index 80264fe..6506201 100644
 --- a/app/login/page.tsx
@@ -5905,7 +5986,7 @@ index 79c8282..97731f1 100644
      lang: "en",
      icons: [
 diff --git a/app/settings.css b/app/settings.css
-index 0bf21eb..f4c84b5 100644
+index 0bf21eb..d2f4031 100644
 --- a/app/settings.css
 +++ b/app/settings.css
 @@ -35,14 +35,15 @@
@@ -5980,7 +6061,7 @@ index 0bf21eb..f4c84b5 100644
  .config-sidebar-group-label {
    display: flex;
    align-items: center;
-@@ -129,11 +133,10 @@
+@@ -129,11 +133,9 @@
    padding: 4px 8px 3px;
    color: var(--text-dim);
    font-family: inherit;
@@ -5989,12 +6070,12 @@ index 0bf21eb..f4c84b5 100644
 +  font-size: 12px;
 +  font-weight: 400;
    line-height: 1.4;
-   letter-spacing: 0;
+-  letter-spacing: 0;
 -  text-transform: uppercase;
  }
  
  .config-sidebar-group-label-text {
-@@ -144,6 +147,13 @@
+@@ -144,6 +146,13 @@
    white-space: nowrap;
  }
  
@@ -6008,7 +6089,7 @@ index 0bf21eb..f4c84b5 100644
  /* Sits in the heading row, so the sidebar gains no height for it. */
  .config-sidebar-group-switch {
    display: inline-flex;
-@@ -153,8 +163,9 @@
+@@ -153,8 +162,9 @@
  }
  
  .config-sidebar-group-count {
@@ -6019,7 +6100,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  /* Three lines, then scroll: the phone layout gives the whole sidebar 190px. */
-@@ -188,7 +199,7 @@
+@@ -188,7 +198,7 @@
    height: 30px;
    padding: 0 8px;
    border: 0;
@@ -6028,7 +6109,7 @@ index 0bf21eb..f4c84b5 100644
    outline: none;
    background: transparent;
    color: var(--text);
-@@ -202,17 +213,19 @@
+@@ -202,17 +212,19 @@
  
  .config-sidebar-item:not(:disabled):hover,
  .config-sidebar-item:not(:disabled):focus-visible {
@@ -6053,7 +6134,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .config-sidebar-item:disabled {
-@@ -236,8 +249,9 @@
+@@ -236,8 +248,9 @@
  .models-sidebar-badge {
    flex-shrink: 0;
    color: var(--text-dim);
@@ -6064,7 +6145,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .oauth-paste-panel {
-@@ -277,9 +291,8 @@
+@@ -277,9 +290,8 @@
    /* An input's intrinsic width would otherwise push the button out of a narrow pane. */
    min-width: 0;
    padding: 6px 9px;
@@ -6076,7 +6157,7 @@ index 0bf21eb..f4c84b5 100644
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
-@@ -290,9 +303,9 @@
+@@ -290,9 +302,9 @@
    flex-shrink: 0;
    padding: 6px 12px;
    border: none;
@@ -6089,7 +6170,7 @@ index 0bf21eb..f4c84b5 100644
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
-@@ -304,13 +317,13 @@
+@@ -304,13 +316,13 @@
    cursor: not-allowed;
  }
  
@@ -6106,7 +6187,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .enabled-models-banner-text {
-@@ -370,8 +383,9 @@
+@@ -370,8 +382,9 @@
  .enabled-models-count {
    margin-right: auto;
    color: var(--text-dim);
@@ -6117,7 +6198,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .enabled-models-note {
-@@ -383,7 +397,7 @@
+@@ -383,7 +396,7 @@
  .enabled-models-error {
    padding: 7px 9px;
    border: 1px solid rgba(239, 68, 68, 0.3);
@@ -6126,7 +6207,7 @@ index 0bf21eb..f4c84b5 100644
    color: #ef4444;
    font-size: 11px;
    line-height: 1.4;
-@@ -401,10 +415,9 @@
+@@ -401,10 +414,9 @@
    box-sizing: border-box;
    height: 30px;
    padding: 0 9px;
@@ -6139,7 +6220,7 @@ index 0bf21eb..f4c84b5 100644
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
-@@ -413,8 +426,8 @@
+@@ -413,8 +425,8 @@
  .enabled-models-list {
    max-height: 360px;
    border: 1px solid var(--border);
@@ -6150,7 +6231,7 @@ index 0bf21eb..f4c84b5 100644
    overflow-y: auto;
  }
  
-@@ -457,9 +470,9 @@
+@@ -457,9 +469,9 @@
  .enabled-models-pin {
    flex-shrink: 0;
    padding: 1px 4px;
@@ -6163,7 +6244,7 @@ index 0bf21eb..f4c84b5 100644
    font-size: 9px;
  }
  
-@@ -496,10 +509,9 @@
+@@ -496,10 +508,9 @@
    align-items: center;
    justify-content: space-between;
    gap: 18px;
@@ -6177,7 +6258,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .agents-feature-copy {
-@@ -541,7 +553,7 @@
+@@ -541,7 +552,7 @@
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--border);
@@ -6186,7 +6267,7 @@ index 0bf21eb..f4c84b5 100644
    background: var(--bg);
    color: var(--text);
    font: inherit;
-@@ -566,7 +578,7 @@
+@@ -566,7 +577,7 @@
    flex: 1;
    min-width: 0;
    min-height: 0;
@@ -6195,7 +6276,7 @@ index 0bf21eb..f4c84b5 100644
    overflow-y: auto;
    font-family: inherit;
    font-size: 12px;
-@@ -628,13 +640,13 @@
+@@ -628,13 +639,12 @@
    line-height: 1.35;
  }
  
@@ -6207,12 +6288,12 @@ index 0bf21eb..f4c84b5 100644
 +  font-size: 12px;
 +  font-weight: 400;
    line-height: 1.35;
-   letter-spacing: 0;
+-  letter-spacing: 0;
 -  text-transform: uppercase;
  }
  
  .config-field {
-@@ -662,7 +674,7 @@
+@@ -662,7 +672,7 @@
    background: var(--border);
    border: 5px solid transparent;
    background-clip: padding-box;
@@ -6221,7 +6302,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .config-field-label {
-@@ -697,15 +709,15 @@
+@@ -697,15 +707,15 @@
  .config-scope-tag {
    flex-shrink: 0;
    padding: 1px 5px;
@@ -6240,7 +6321,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .config-scope-switch-field {
-@@ -730,7 +742,7 @@
+@@ -730,7 +740,7 @@
    height: 30px;
    overflow: hidden;
    border: 1px solid var(--border);
@@ -6249,7 +6330,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .config-scope-switch-option {
-@@ -760,7 +772,7 @@
+@@ -760,7 +770,7 @@
  .config-scope-switch.is-small {
    display: flex;
    height: auto;
@@ -6258,7 +6339,7 @@ index 0bf21eb..f4c84b5 100644
    font-size: 12px;
  }
  
-@@ -891,9 +903,8 @@
+@@ -891,9 +901,8 @@
    width: 100%;
    height: 36px;
    padding: 0 11px;
@@ -6270,7 +6351,7 @@ index 0bf21eb..f4c84b5 100644
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
-@@ -935,8 +946,8 @@
+@@ -935,8 +944,8 @@
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid var(--border);
@@ -6281,7 +6362,7 @@ index 0bf21eb..f4c84b5 100644
    color: var(--text-dim);
    cursor: pointer;
    font-family: var(--font-mono);
-@@ -975,12 +986,15 @@
+@@ -975,12 +984,15 @@
    white-space: pre-wrap;
  }
  
@@ -6300,7 +6381,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .config-notice.has-action {
-@@ -1104,8 +1118,13 @@
+@@ -1104,8 +1116,13 @@
    align-items: center;
    gap: 8px;
    min-height: 52px;
@@ -6316,7 +6397,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .config-footer-status {
-@@ -1159,7 +1178,7 @@
+@@ -1159,44 +1176,47 @@
    gap: 6px;
    border-width: 1px;
    border-style: solid;
@@ -6324,8 +6405,9 @@ index 0bf21eb..f4c84b5 100644
 +  border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
-   letter-spacing: 0;
-@@ -1168,35 +1187,39 @@
+-  letter-spacing: 0;
+   line-height: 1;
+   white-space: nowrap;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
  }
  
@@ -6381,7 +6463,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .config-button-ghost {
-@@ -1206,24 +1229,31 @@
+@@ -1206,24 +1226,31 @@
  }
  
  .config-button-primary:not(:disabled):hover {
@@ -6421,7 +6503,7 @@ index 0bf21eb..f4c84b5 100644
    outline-offset: 2px;
  }
  
-@@ -1248,33 +1278,41 @@
+@@ -1248,33 +1275,41 @@
    margin-left: auto;
  }
  
@@ -6475,7 +6557,7 @@ index 0bf21eb..f4c84b5 100644
  .config-switch::before {
    content: "";
    position: absolute;
-@@ -1283,7 +1321,7 @@
+@@ -1283,7 +1318,7 @@
  
  .config-switch:disabled {
    cursor: default;
@@ -6484,7 +6566,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .config-switch.is-loading:disabled {
-@@ -1294,42 +1332,38 @@
+@@ -1294,42 +1329,38 @@
    position: absolute;
    top: 2px;
    left: 2px;
@@ -6541,7 +6623,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .config-list-action-button {
-@@ -1342,7 +1376,7 @@
+@@ -1342,7 +1373,7 @@
    min-height: 30px;
    padding: 0 8px;
    border: 0;
@@ -6550,7 +6632,7 @@ index 0bf21eb..f4c84b5 100644
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
-@@ -1358,7 +1392,7 @@
+@@ -1358,7 +1389,7 @@
  
  .config-list-action-button[aria-current="page"] {
    background: var(--bg-selected);
@@ -6559,7 +6641,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .config-list-action-button:disabled {
-@@ -1382,6 +1416,14 @@
+@@ -1382,6 +1413,14 @@
    opacity: 0.7;
  }
  
@@ -6574,7 +6656,7 @@ index 0bf21eb..f4c84b5 100644
  .settings-dialog-backdrop {
    position: fixed;
    inset: 0;
-@@ -1389,7 +1431,7 @@
+@@ -1389,7 +1428,7 @@
    display: flex;
    align-items: center;
    justify-content: center;
@@ -6583,7 +6665,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  /* Focus moves to the dialog itself when Settings opens (tabIndex -1); it is not a control, so no ring. */
-@@ -1398,127 +1440,184 @@
+@@ -1398,127 +1437,184 @@
  }
  
  .settings-dialog-surface {
@@ -6839,7 +6921,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .settings-dialog-main {
-@@ -1537,136 +1636,197 @@
+@@ -1537,136 +1633,197 @@
    min-height: 0;
  }
  
@@ -7116,7 +7198,7 @@ index 0bf21eb..f4c84b5 100644
    font-family: var(--font-mono);
    font-weight: var(--font-mono-weight);
  }
-@@ -1676,197 +1836,324 @@
+@@ -1676,197 +1833,324 @@
  }
  
  .settings-font-input:focus-visible {
@@ -7572,7 +7654,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  @media (max-width: 640px) {
-@@ -1887,13 +2174,13 @@
+@@ -1887,13 +2171,13 @@
      width: 100%;
      height: 190px;
      border-right: 0;
@@ -7588,7 +7670,7 @@ index 0bf21eb..f4c84b5 100644
    }
  
    .agents-feature-actions {
-@@ -1905,29 +2192,6 @@
+@@ -1905,29 +2189,6 @@
      padding: 14px;
    }
  
@@ -7618,7 +7700,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  @keyframes saved-pop {
-@@ -2066,7 +2330,7 @@
+@@ -2066,7 +2327,7 @@
    max-width: 100%;
    padding: 0 5px;
    border: 1px solid var(--border);
@@ -7627,7 +7709,7 @@ index 0bf21eb..f4c84b5 100644
    background: var(--bg-panel);
    color: var(--text);
    font-family: var(--font-mono);
-@@ -2085,7 +2349,7 @@
+@@ -2085,7 +2346,7 @@
    padding: 6px 8px;
    overflow: auto;
    border: 1px solid var(--border);
@@ -7636,7 +7718,7 @@ index 0bf21eb..f4c84b5 100644
    background: var(--bg-panel);
    color: var(--text-muted);
    font-family: var(--font-mono);
-@@ -2172,9 +2436,8 @@
+@@ -2172,9 +2433,8 @@
    min-width: 0;
    height: 32px;
    padding: 0 10px;
@@ -7648,7 +7730,7 @@ index 0bf21eb..f4c84b5 100644
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
-@@ -2266,10 +2529,9 @@ select.mcp-add-input {
+@@ -2266,10 +2526,9 @@ select.mcp-add-input {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
@@ -7662,7 +7744,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  /* Focus moves to the dialog itself when it opens (tabIndex -1); it is not a control, so no ring. */
-@@ -2282,7 +2544,7 @@ select.mcp-add-input {
+@@ -2282,7 +2541,7 @@ select.mcp-add-input {
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
@@ -7671,7 +7753,7 @@ index 0bf21eb..f4c84b5 100644
    overflow: auto;
    overscroll-behavior: contain;
  }
-@@ -2315,7 +2577,7 @@ select.mcp-add-input {
+@@ -2315,7 +2574,7 @@ select.mcp-add-input {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
@@ -7680,7 +7762,7 @@ index 0bf21eb..f4c84b5 100644
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
-@@ -2333,7 +2595,7 @@ select.mcp-add-input {
+@@ -2333,7 +2592,7 @@ select.mcp-add-input {
  .project-trust-error {
    flex-shrink: 0;
    max-height: 30vh;
@@ -7689,7 +7771,7 @@ index 0bf21eb..f4c84b5 100644
    overflow: auto;
    color: #ef4444;
    font-size: 12px;
-@@ -2353,19 +2615,20 @@ select.mcp-add-input {
+@@ -2353,19 +2612,20 @@ select.mcp-add-input {
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 8px;
@@ -7717,7 +7799,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .project-trust-button:disabled {
-@@ -2373,10 +2636,8 @@ select.mcp-add-input {
+@@ -2373,10 +2633,8 @@ select.mcp-add-input {
  }
  
  .project-trust-button.is-primary {
@@ -7730,7 +7812,7 @@ index 0bf21eb..f4c84b5 100644
  }
  
  .project-trust-button.is-primary:disabled {
-@@ -2450,7 +2711,7 @@ select.mcp-add-input {
+@@ -2450,7 +2708,7 @@ select.mcp-add-input {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
@@ -7739,7 +7821,7 @@ index 0bf21eb..f4c84b5 100644
    background: var(--bg);
  }
  
-@@ -2472,7 +2733,7 @@ select.mcp-add-input {
+@@ -2472,7 +2730,7 @@ select.mcp-add-input {
  .project-trust-mcp-tag {
    flex-shrink: 0;
    padding: 1px 5px;
@@ -7748,7 +7830,7 @@ index 0bf21eb..f4c84b5 100644
    background: rgba(120, 120, 120, 0.12);
    color: var(--text-dim);
    font-size: 10px;
-@@ -2493,7 +2754,7 @@ select.mcp-add-input {
+@@ -2493,7 +2751,7 @@ select.mcp-add-input {
    display: inline-block;
    margin: 2px 4px 0 0;
    padding: 0 4px;
@@ -9235,7 +9317,7 @@ index 737e7a5..c098317 100644
  
  .sidebar-sheet .sidebar-menu-question-text {
 diff --git a/app/sidebar.css b/app/sidebar.css
-index 86728a2..d1346be 100644
+index 86728a2..acb525e 100644
 --- a/app/sidebar.css
 +++ b/app/sidebar.css
 @@ -91,8 +91,9 @@
@@ -9347,7 +9429,7 @@ index 86728a2..d1346be 100644
    border-radius: 50%;
    opacity: 0.35;
    animation: session-tree-status-pulse 1.6s ease-in-out infinite;
-@@ -297,20 +278,23 @@ a.session-tree-main {
+@@ -297,20 +278,22 @@ a.session-tree-main {
    }
  }
  
@@ -9364,7 +9446,6 @@ index 86728a2..d1346be 100644
 -  font-size: 12px;
 -  text-overflow: ellipsis;
 +  font-size: 13px;
-+  letter-spacing: -0.005em;
    white-space: nowrap;
 +  -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent);
 +  mask-image: linear-gradient(to right, black calc(100% - 20px), transparent);
@@ -9376,7 +9457,7 @@ index 86728a2..d1346be 100644
  }
  
  .session-tree-session.is-archived .session-tree-title {
-@@ -321,6 +305,8 @@ a.session-tree-main {
+@@ -321,6 +304,8 @@ a.session-tree-main {
     from its source ("… · 3f9a"), never the suffix. */
  .session-tree-title.has-fork-suffix {
    display: flex;
@@ -9385,7 +9466,7 @@ index 86728a2..d1346be 100644
  }
  
  .session-tree-title-base {
-@@ -384,16 +370,23 @@ a.session-tree-main {
+@@ -384,16 +369,23 @@ a.session-tree-main {
    align-items: center;
  }
  
@@ -9413,7 +9494,7 @@ index 86728a2..d1346be 100644
    color: var(--text-dim);
  }
  
-@@ -408,11 +401,18 @@ a.session-tree-main {
+@@ -408,11 +400,18 @@ a.session-tree-main {
    background: var(--bg-hover);
  }
  
@@ -9435,7 +9516,7 @@ index 86728a2..d1346be 100644
  }
  
  .session-tree-meta.is-running {
-@@ -436,7 +436,10 @@ a.session-tree-main {
+@@ -436,7 +435,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 {
@@ -9447,7 +9528,7 @@ index 86728a2..d1346be 100644
  }
  
  .session-tree-session:has(:focus-visible) .session-tree-meta {
-@@ -454,7 +457,7 @@ a.session-tree-main {
+@@ -454,7 +456,7 @@ a.session-tree-main {
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid var(--accent);
@@ -9456,7 +9537,7 @@ index 86728a2..d1346be 100644
    outline: none;
    background: var(--bg);
    color: var(--text);
-@@ -483,7 +486,7 @@ a.session-tree-main {
+@@ -483,7 +485,7 @@ a.session-tree-main {
    gap: 4px;
    height: 24px;
    padding: 0 10px;
@@ -9465,7 +9546,7 @@ index 86728a2..d1346be 100644
    font-size: 12px;
    white-space: nowrap;
  }
-@@ -518,8 +521,8 @@ a.session-tree-main {
+@@ -518,8 +520,8 @@ a.session-tree-main {
    right: var(--session-tree-inset-right);
    left: var(--session-tree-inset-left);
    gap: 2px;
@@ -9476,7 +9557,7 @@ index 86728a2..d1346be 100644
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
-@@ -548,7 +551,7 @@ a.session-tree-main {
+@@ -548,7 +550,7 @@ a.session-tree-main {
    position: absolute;
    right: var(--session-tree-inset-right);
    left: var(--session-tree-inset-left);
@@ -9485,7 +9566,7 @@ index 86728a2..d1346be 100644
    background: color-mix(in srgb, var(--bg-panel) 55%, transparent);
    pointer-events: none;
  }
-@@ -589,7 +592,7 @@ a.session-tree-main {
+@@ -589,7 +591,7 @@ a.session-tree-main {
    height: 22px;
    padding: 0 10px;
    border: 1px solid var(--border);
@@ -9494,7 +9575,7 @@ index 86728a2..d1346be 100644
    background: var(--bg-panel);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    color: var(--text);
-@@ -618,7 +621,7 @@ a.session-tree-main {
+@@ -618,7 +620,7 @@ a.session-tree-main {
    padding: 0 0 0 5px;
    color: var(--text-muted);
    font-size: 12px;
@@ -9503,7 +9584,7 @@ index 86728a2..d1346be 100644
    text-align: left;
    white-space: nowrap;
  }
-@@ -669,19 +672,27 @@ a.session-tree-main {
+@@ -669,19 +671,27 @@ a.session-tree-main {
    width: 6px;
    height: 6px;
    border-radius: 50%;
@@ -9534,7 +9615,7 @@ index 86728a2..d1346be 100644
  }
  
  .session-tree-group:hover .session-tree-summary,
-@@ -690,7 +701,10 @@ a.session-tree-main {
+@@ -690,7 +700,10 @@ a.session-tree-main {
  }
  
  .session-tree-group:has(:focus-visible) .session-tree-group-actions {
@@ -9546,7 +9627,7 @@ index 86728a2..d1346be 100644
  }
  
  .session-tree-group:has(:focus-visible) .session-tree-summary {
-@@ -698,9 +712,18 @@ a.session-tree-main {
+@@ -698,9 +711,18 @@ a.session-tree-main {
  }
  
  @supports not selector(:has(*)) {
@@ -9567,7 +9648,7 @@ index 86728a2..d1346be 100644
    }
  
    .session-tree-session:focus-within .session-tree-meta,
-@@ -726,7 +749,7 @@ a.session-tree-main {
+@@ -726,7 +748,7 @@ a.session-tree-main {
    width: 22px;
    height: 22px;
    padding: 0;
@@ -9576,7 +9657,7 @@ index 86728a2..d1346be 100644
    color: var(--text-dim);
  }
  
-@@ -787,7 +810,7 @@ a.session-tree-main {
+@@ -787,7 +809,7 @@ a.session-tree-main {
    gap: 3px;
    min-width: 0;
    padding: 0 4px 0 5px;
@@ -9585,7 +9666,7 @@ index 86728a2..d1346be 100644
    color: var(--text-dim);
    font-size: 12px;
    text-align: left;
-@@ -838,16 +861,21 @@ a.session-tree-main {
+@@ -838,16 +860,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. */
@@ -9609,7 +9690,7 @@ index 86728a2..d1346be 100644
  }
  
  .session-tree.is-mobile .session-tree-session:hover .session-tree-meta {
-@@ -859,7 +887,10 @@ a.session-tree-main {
+@@ -859,7 +886,10 @@ a.session-tree-main {
  }
  
  .session-tree.is-mobile .session-tree-group-actions {
@@ -9621,7 +9702,7 @@ index 86728a2..d1346be 100644
  }
  
  .session-tree.is-mobile .session-tree-group .session-tree-summary {
-@@ -884,7 +915,10 @@ a.session-tree-main {
+@@ -884,7 +914,10 @@ a.session-tree-main {
  /* Touch screens wider than a phone have no hover: keep ⋯ reachable. */
  @media (hover: none) {
    .session-tree-more-action {
@@ -9633,7 +9714,7 @@ index 86728a2..d1346be 100644
    }
  }
  
-@@ -942,9 +976,10 @@ a.session-tree-main {
+@@ -942,9 +975,10 @@ a.session-tree-main {
    display: flex;
    flex: none;
    align-items: stretch;
@@ -9645,7 +9726,7 @@ index 86728a2..d1346be 100644
  }
  
  /* The tablist itself holds only the two tabs (ARIA allows nothing else in it). */
-@@ -954,44 +989,30 @@ a.session-tree-main {
+@@ -954,44 +988,30 @@ a.session-tree-main {
    align-items: stretch;
  }
  
@@ -9697,7 +9778,7 @@ index 86728a2..d1346be 100644
  .sidebar-tab-icon {
    flex: none;
    color: var(--text-dim);
-@@ -1006,17 +1027,12 @@ a.session-tree-main {
+@@ -1006,17 +1026,12 @@ a.session-tree-main {
  
  .sidebar-tab.is-selected,
  .sidebar-search-toggle.is-active {
@@ -9717,7 +9798,7 @@ index 86728a2..d1346be 100644
  }
  
  .sidebar-tab-count {
-@@ -1036,27 +1052,37 @@ a.session-tree-main {
+@@ -1036,27 +1051,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 {
@@ -9740,13 +9821,13 @@ index 86728a2..d1346be 100644
 -  font-family: var(--font-mono);
 -  font-size: 15px;
 -  font-weight: 700;
+-  letter-spacing: -0.01em;
+-  line-height: normal;
 +  color: var(--text-strong);
 +  font-family: var(--font-ui);
 +  font-size: 13px;
 +  font-weight: 600;
 +  font-variant-numeric: tabular-nums;
-   letter-spacing: -0.01em;
--  line-height: normal;
 +  line-height: 1;
    text-align: left;
    white-space: nowrap;
@@ -9765,7 +9846,7 @@ index 86728a2..d1346be 100644
  }
  
  .sidebar-brand:focus {
-@@ -1064,8 +1090,10 @@ a.session-tree-main {
+@@ -1064,8 +1088,10 @@ a.session-tree-main {
  }
  
  .sidebar-brand:focus-visible {
@@ -9778,7 +9859,7 @@ index 86728a2..d1346be 100644
  }
  
  .sidebar-header-spacer {
-@@ -1078,7 +1106,7 @@ a.session-tree-main {
+@@ -1078,7 +1104,7 @@ a.session-tree-main {
  }
  
  .sidebar-search-toggle {
@@ -9787,7 +9868,7 @@ index 86728a2..d1346be 100644
    padding: 0;
  }
  
-@@ -1093,7 +1121,7 @@ a.session-tree-main {
+@@ -1093,7 +1119,7 @@ a.session-tree-main {
     label is still each one's name. */
  .sidebar-header[data-fit="1"] .sidebar-new-button,
  .sidebar-header[data-fit="2"] .sidebar-new-button {
@@ -9796,7 +9877,7 @@ index 86728a2..d1346be 100644
    padding: 0;
  }
  
-@@ -1105,6 +1133,11 @@ a.session-tree-main {
+@@ -1105,6 +1131,11 @@ a.session-tree-main {
    font-size: 11px;
  }
  
@@ -9808,7 +9889,7 @@ index 86728a2..d1346be 100644
  .sidebar-header[data-fit="1"] .sidebar-new-label,
  .sidebar-header[data-fit="2"] .sidebar-new-label,
  .sidebar-header[data-fit="2"] .sidebar-tab-label {
-@@ -1122,8 +1155,9 @@ a.session-tree-main {
+@@ -1122,8 +1153,9 @@ a.session-tree-main {
  .sidebar-archive-back:focus-visible,
  .sidebar-tool-button:focus-visible,
  .sidebar-files-section-toggle:focus-visible {
@@ -9820,7 +9901,7 @@ index 86728a2..d1346be 100644
  }
  
  .sidebar-panel {
-@@ -1202,7 +1236,7 @@ a.session-tree-main {
+@@ -1202,7 +1234,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 {
@@ -9829,7 +9910,7 @@ index 86728a2..d1346be 100644
  }
  
  /* The files section's header row (files below the sessions only), one row
-@@ -1246,7 +1280,7 @@ a.session-tree-main {
+@@ -1246,7 +1278,7 @@ a.session-tree-main {
    padding: 0 5px;
    overflow: hidden;
    border: 0;
@@ -9838,7 +9919,7 @@ index 86728a2..d1346be 100644
    background: transparent;
    color: var(--text-muted);
    font: inherit;
-@@ -1272,10 +1306,8 @@ a.session-tree-main {
+@@ -1272,10 +1304,8 @@ a.session-tree-main {
  .sidebar-files-section-label {
    min-width: 0;
    overflow: hidden;
@@ -9850,7 +9931,7 @@ index 86728a2..d1346be 100644
  }
  
  /* The changed files' count, as the pinned section's (.session-tree-pinned-count). */
-@@ -1294,7 +1326,7 @@ a.session-tree-main {
+@@ -1294,7 +1324,7 @@ a.session-tree-main {
    display: flex;
    flex: 1000 0 calc(7 * 18px);
    align-items: center;
@@ -9859,7 +9940,7 @@ index 86728a2..d1346be 100644
  }
  
  /* The section's keys: the files tab's square keys, a step under the row's
-@@ -1302,9 +1334,9 @@ a.session-tree-main {
+@@ -1302,9 +1332,9 @@ a.session-tree-main {
  .sidebar-files-keys .sidebar-tool-button {
    flex: 1 1 0;
    min-width: 18px;
@@ -9872,7 +9953,7 @@ index 86728a2..d1346be 100644
  }
  
  /* Under that row (or the whole files tab): the head, then the tree filling
-@@ -1317,31 +1349,7 @@ a.session-tree-main {
+@@ -1317,31 +1347,7 @@ a.session-tree-main {
    min-height: 0;
  }
  
@@ -9905,7 +9986,7 @@ index 86728a2..d1346be 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 {
-@@ -1413,7 +1421,7 @@ a.session-tree-main {
+@@ -1413,7 +1419,7 @@ a.session-tree-main {
    height: 26px;
    padding: 0 6px;
    border: 0;
@@ -9914,7 +9995,7 @@ index 86728a2..d1346be 100644
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
-@@ -1479,10 +1487,11 @@ a.session-tree-main {
+@@ -1479,10 +1485,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. */
@@ -9927,7 +10008,7 @@ index 86728a2..d1346be 100644
    margin-top: 4px;
  }
  
-@@ -1492,17 +1501,18 @@ a.session-tree-main {
+@@ -1492,17 +1499,18 @@ a.session-tree-main {
    margin-left: auto;
  }
  
@@ -9951,7 +10032,7 @@ index 86728a2..d1346be 100644
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
-@@ -1510,8 +1520,8 @@ a.session-tree-main {
+@@ -1510,8 +1518,8 @@ a.session-tree-main {
  }
  
  .sidebar-tool-button:not(:disabled):hover {
@@ -9964,10 +10045,10 @@ index 86728a2..d1346be 100644
  .sidebar-tool-button.is-active,
 diff --git a/app/ui.css b/app/ui.css
 new file mode 100644
-index 0000000..3426491
+index 0000000..ad43ed3
 --- /dev/null
 +++ b/app/ui.css
-@@ -0,0 +1,761 @@
+@@ -0,0 +1,760 @@
 +/* 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. */
@@ -10238,7 +10319,6 @@ index 0000000..3426491
 +  background: color-mix(in srgb, var(--primary-contrast) 16%, transparent);
 +  font-family: inherit;
 +  font-size: 11px;
-+  letter-spacing: 0.04em;
 +}
 +
 +/* ---------------------------------------------------------------- popovers */
@@ -20817,6 +20897,38 @@ index 25e4a63..171bf7c 100644
      </div>
    );
  });
+diff --git a/components/MessageView.copy.test.mjs b/components/MessageView.copy.test.mjs
+new file mode 100644
+index 0000000..f4d9392
+--- /dev/null
++++ b/components/MessageView.copy.test.mjs
+@@ -0,0 +1,26 @@
++import assert from "node:assert/strict";
++import { readFileSync } from "node:fs";
++import test from "node:test";
++
++const view = readFileSync(new URL("./MessageView.tsx", import.meta.url), "utf8");
++const css = readFileSync(new URL("../app/globals.css", import.meta.url), "utf8");
++
++test("only an answer has a Copy, shown on hover like its row; whitespace text blocks draw nothing", () => {
++  // DeepSeek sends a "\n\n" text block beside each tool call: it is no text, so no block and no Copy of it.
++  assert.match(view, /!\(block\.type === "text" && !\(block as TextContent\)\.text\.trim\(\)\)/);
++  assert.match(view, /\.join\("\\n"\)\n\s*\.trim\(\);/);
++  // An answer is text without tool calls; a running turn's other messages are steps (no actions row).
++  assert.match(view, /const isAnswer = Boolean\(textContent\) && !blocks\.some\(\(b\) => b\.type === "toolCall"\);/);
++  assert.match(view, /\{!asStep && !isStreaming && isAnswer && \(/);
++  // Copy sits inside the row's hover reveal, with the model, usage and time.
++  const row = view.slice(view.indexOf("{!asStep && !isStreaming && isAnswer && ("));
++  assert.ok(row.indexOf('<div className="message-actions-reveal">') < row.indexOf("onClick={copyContent}"));
++  assert.match(css, /@media \(hover: none\) \{ \.message-actions-reveal \{ opacity: 1; \} \}/);
++});
++
++test("steps keep one 4px rhythm, folded or live, and the answer sits 8px under them", () => {
++  assert.match(css, /\.turn-reply\.is-step \.reply-blocks \{ gap: 4px; \}/);
++  assert.match(css, /:has\(> \.turn-reply\.is-step\)\) \+ :is\(\.turn-reply\.is-step, :has\(> \.turn-reply\.is-step\)\) \{ margin-top: 4px; \}/);
++  assert.match(css, /\{ margin-top: 8px; \}/);
++  assert.match(css, /\.steps-list \{[^}]*gap: 0;[^}]*margin: 4px 0 0 1px;/);
++});
 diff --git a/components/MessageView.test.mjs b/components/MessageView.test.mjs
 index 515b033..12d546b 100644
 --- a/components/MessageView.test.mjs
@@ -20856,7 +20968,7 @@ index 515b033..12d546b 100644
  
  test("collapses a displayed custom message from its header alone", () => {
 diff --git a/components/MessageView.tsx b/components/MessageView.tsx
-index f2ff1de..b18cfc6 100644
+index f2ff1de..0dfb320 100644
 --- a/components/MessageView.tsx
 +++ b/components/MessageView.tsx
 @@ -5,13 +5,16 @@ import ReactMarkdown from "react-markdown";
@@ -21318,7 +21430,7 @@ index f2ff1de..b18cfc6 100644
  }: {
    message: AssistantMessage;
    isStreaming?: boolean;
-@@ -669,6 +589,8 @@ function AssistantMessageView({
+@@ -669,17 +589,21 @@ function AssistantMessageView({
    onCompact?: () => void;
    isCompacting?: boolean;
    compactError?: string | null;
@@ -21327,7 +21439,14 @@ index f2ff1de..b18cfc6 100644
  }) {
    const { t } = useI18n();
    const time = showTimestamp ? formatTime(message.timestamp) : null;
-@@ -679,7 +601,6 @@ function AssistantMessageView({
+   const blockItems = useMemo(() => (message.content ?? [])
+     .map((block, originalIndex) => ({ block, originalIndex }))
+-    .filter(({ block }) => !isEmptyThinkingBlock(block, { isStreaming })), [message.content, isStreaming]);
++    // A text block of whitespace alone (DeepSeek sends "\n\n" beside each tool call) draws
++    // nothing: rendered, it was an empty element the blocks' gap counted twice.
++    .filter(({ block }) => !isEmptyThinkingBlock(block, { isStreaming })
++      && !(block.type === "text" && !(block as TextContent).text.trim())), [message.content, isStreaming]);
+   const blocks = useMemo(() => blockItems.map(({ block }) => block), [blockItems]);
    const providerError = getAssistantErrorMessage(message, { isStreaming });
    const truncated = isAssistantTruncated(message, { isStreaming });
    const unansweredTruncation = truncated && !hasAssistantAnswer(message);
@@ -21335,7 +21454,22 @@ index f2ff1de..b18cfc6 100644
    const [copied, setCopied] = useState(false);
    const streamStartRef = useRef<StreamRateStart | null>(null);
    const rateKey = streamRateKey(message);
-@@ -803,123 +724,59 @@ function AssistantMessageView({
+@@ -741,7 +665,13 @@ function AssistantMessageView({
+   const textContent = blocks
+     .filter((b): b is TextContent => b.type === "text")
+     .map((b) => b.text)
+-    .join("\n");
++    .join("\n")
++    .trim();
++  // An answer is text without tool calls. Anything else is a step of its turn, shown as one
++  // (no actions row, the steps' rhythm) also while the turn runs and its steps are not yet
++  // folded under their summary: each live step used to carry a Copy of its "\n\n".
++  const isAnswer = Boolean(textContent) && !blocks.some((b) => b.type === "toolCall");
++  const asStep = inSteps || (!isAnswer && blocks.length > 0 && !providerError && !truncated);
+ 
+   const copyContent = () => {
+     copyText(textContent).then(() => {
+@@ -803,123 +733,59 @@ function AssistantMessageView({
  
    if (blocks.length === 0 && !isStreaming && !providerError && !truncated) return null;
  
@@ -21354,7 +21488,7 @@ index f2ff1de..b18cfc6 100644
 -      style={{ marginBottom: 16 }}
 -      onMouseEnter={() => setHovered(true)}
 -      onMouseLeave={() => setHovered(false)}
-+      className={`turn-reply${inSteps ? " is-step" : ""}`}
++      className={`turn-reply${asStep ? " is-step" : ""}`}
      >
 -      {/* Model label */}
 -      <div
@@ -21484,7 +21618,7 @@ index f2ff1de..b18cfc6 100644
            )}
          </div>
        )}
-@@ -928,51 +785,28 @@ function AssistantMessageView({
+@@ -928,51 +794,29 @@ function AssistantMessageView({
          <TurnWrittenFiles files={writtenFiles} onOpenFile={onOpenFile} />
        )}
  
@@ -21497,14 +21631,8 @@ index f2ff1de..b18cfc6 100644
 -          </div>
 -        )}
 -        {textContent && !isStreaming && (
-+      {/* Only an answer has an actions row: a step that only called tools has nothing to copy. */}
-+      {!inSteps && !isStreaming && textContent && (
-+        <div className="message-actions">
-           <button
-+            type="button"
-+            className="ui-btn ui-btn--xs ui-btn--icon"
-+            data-done={copied || undefined}
-             onClick={copyContent}
+-          <button
+-            onClick={copyContent}
 -             title={t("i18n.copyMessage")}
 -            style={{
 -              display: "flex", alignItems: "center", gap: 4,
@@ -21521,9 +21649,7 @@ index f2ff1de..b18cfc6 100644
 -            }}
 -            onMouseEnter={(e) => { if (!copied) e.currentTarget.style.color = "var(--accent)"; }}
 -            onMouseLeave={(e) => { if (!copied) e.currentTarget.style.color = "var(--text-dim)"; }}
-+            title={t("i18n.copyMessage")}
-+            aria-label={copied ? t("i18n.copied") : t("i18n.copyMessage")}
-           >
+-          >
 -            {copied ? (
 -              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
 -                <polyline points="20 6 9 17 4 12" />
@@ -21533,20 +21659,32 @@ index f2ff1de..b18cfc6 100644
 -                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
 -                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
 -              </svg>
--            )}
++      {/* Only an answer has an actions row; Copy shows with the rest of it, on hover or focus
++          (always on a touch screen, which cannot hover). */}
++      {!asStep && !isStreaming && isAnswer && (
++        <div className="message-actions">
++          <div className="message-actions-reveal">
++            <button
++              type="button"
++              className="ui-btn ui-btn--xs ui-btn--icon"
++              data-done={copied || undefined}
++              onClick={copyContent}
++              title={t("i18n.copyMessage")}
++              aria-label={copied ? t("i18n.copied") : t("i18n.copyMessage")}
++            >
++              <CarbonIcon icon={copied ? Carbon.Checkmark : Carbon.Copy} size={14} />
++            </button>
++            {modelName && <span className="message-meta">{modelName}</span>}
++            {shownUsage && formatUsageShort(shownUsage) && (
++              <span className="message-meta" title={formatUsage(shownUsage)}>{formatUsageShort(shownUsage)}</span>
+             )}
 -             {copied ? t("i18n.copied") : t("i18n.copy")}
-+            <CarbonIcon icon={copied ? Carbon.Checkmark : Carbon.Copy} size={14} />
-           </button>
+-          </button>
 -        )}
 -        {time && !isStreaming && (
 -          <span style={{ fontSize: 10, color: "var(--text-dim)", marginLeft: "auto" }}>{time}</span>
 -        )}
 -      </div>
-+          <div className="message-actions-reveal">
-+            {modelName && <span className="message-meta">{modelName}</span>}
-+            {shownUsage && formatUsageShort(shownUsage) && (
-+              <span className="message-meta" title={formatUsage(shownUsage)}>{formatUsageShort(shownUsage)}</span>
-+            )}
 +            {time && <span className="message-meta">{time}</span>}
 +          </div>
 +        </div>
@@ -21554,7 +21692,7 @@ index f2ff1de..b18cfc6 100644
      </div>
    );
  }
-@@ -988,7 +822,7 @@ function BlockView({ block, searchTarget, toolResults, isStreaming, streamingDur
+@@ -988,7 +832,7 @@ function BlockView({ block, searchTarget, toolResults, isStreaming, streamingDur
      const tc = block as ToolCallContent;
      const result = toolResults?.get(tc.toolCallId);
      const duration = toolCallDurations?.get(tc.toolCallId);
@@ -21563,7 +21701,7 @@ index f2ff1de..b18cfc6 100644
    }
    return null;
  }
-@@ -1052,62 +886,34 @@ export function ThinkingBlock({ block, duration, sessionId, entryId, blockIndex
+@@ -1052,62 +896,34 @@ export function ThinkingBlock({ block, duration, sessionId, entryId, blockIndex
    }, [expanded, block.deferred, content, sessionId, entryId, blockIndex]);
  
    return (
@@ -21650,7 +21788,7 @@ index f2ff1de..b18cfc6 100644
      </div>
    );
  }
-@@ -1137,7 +943,7 @@ export function formatToolDuration(ms: number): string {
+@@ -1137,7 +953,7 @@ export function formatToolDuration(ms: number): string {
    return `${Math.floor(minutes / 60)}h ${minutes % 60}m ${remainder}s`;
  }
  
@@ -21659,7 +21797,7 @@ index f2ff1de..b18cfc6 100644
    const { t } = useI18n();
    const [expanded, setExpanded] = useState(() => isToolCallExpanded(block.toolCallId));
    const toggleExpanded = () => {
-@@ -1146,6 +952,7 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
+@@ -1146,6 +962,7 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
      setExpanded(next);
    };
    const inputStr = getWrittenFileText(block) ?? getToolCallInputText(block);
@@ -21667,7 +21805,7 @@ index f2ff1de..b18cfc6 100644
    const isStreamingInput = block.rawInput !== undefined;
    const isEditTool = isEditToolName(block.toolName);
    const resultDiff = result && !result.isError ? getResultDiff(result) : null;
-@@ -1175,137 +982,154 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
+@@ -1175,137 +992,154 @@ function ToolCallBlock({ block, result, duration, onOpenSubagent }: { block: Too
      || (isApplyPatchToolName(block.toolName) && applyPatchResultHasFailures(result?.details));
    const subagent = isSubagentToolDetails(result?.details) ? result.details : null;
    const codemodeCallCount = codemode ? codemode.calls.length + codemode.omitted : 0;
@@ -21916,7 +22054,7 @@ index f2ff1de..b18cfc6 100644
  interface ResultDiff {
    text: string;
  }
-@@ -1316,7 +1140,6 @@ function PairedDiffResult({ diff }: {
+@@ -1316,7 +1150,6 @@ function PairedDiffResult({ diff }: {
    return (
      <div
        style={{
@@ -21924,7 +22062,7 @@ index f2ff1de..b18cfc6 100644
          background: "var(--bg)",
        }}
      >
-@@ -1325,148 +1148,16 @@ function PairedDiffResult({ diff }: {
+@@ -1325,148 +1158,16 @@ function PairedDiffResult({ diff }: {
    );
  }
  
@@ -22080,7 +22218,7 @@ index f2ff1de..b18cfc6 100644
  }
  
  function PatchTextView({ text }: { text: string }) {
-@@ -1483,12 +1174,12 @@ function PatchTextView({ text }: { text: string }) {
+@@ -1483,12 +1184,12 @@ function PatchTextView({ text }: { text: string }) {
          const bg =
            kind === "added" ? "rgba(34,197,94,0.12)" :
            kind === "removed" ? "rgba(248,113,113,0.13)" :
@@ -22095,7 +22233,7 @@ index f2ff1de..b18cfc6 100644
            "var(--text)";
  
          return (
-@@ -1502,7 +1193,7 @@ function PatchTextView({ text }: { text: string }) {
+@@ -1502,7 +1203,7 @@ function PatchTextView({ text }: { text: string }) {
                  : kind === "removed"
                  ? "3px solid #f87171"
                  : kind === "hunk"
@@ -22104,7 +22242,7 @@ index f2ff1de..b18cfc6 100644
                  : "3px solid transparent",
              }}
            >
-@@ -1578,16 +1269,16 @@ function isRecord(value: unknown): value is Record<string, unknown> {
+@@ -1578,16 +1279,16 @@ function isRecord(value: unknown): value is Record<string, unknown> {
    return typeof value === "object" && value !== null && !Array.isArray(value);
  }
  
@@ -22123,7 +22261,7 @@ index f2ff1de..b18cfc6 100644
        }}
      >
        {images.map((image, index) => {
-@@ -1606,9 +1297,10 @@ function ResultImages({ images, isError }: { images: ImageContent[]; isError: bo
+@@ -1606,9 +1307,10 @@ function ResultImages({ images, isError }: { images: ImageContent[]; isError: bo
                loading="lazy"
                style={{
                  display: "block",
@@ -22137,7 +22275,7 @@ index f2ff1de..b18cfc6 100644
                  objectFit: "contain",
                  border: "1px solid var(--border)",
                }}
-@@ -1620,6 +1312,67 @@ function ResultImages({ images, isError }: { images: ImageContent[]; isError: bo
+@@ -1620,6 +1322,67 @@ function ResultImages({ images, isError }: { images: ImageContent[]; isError: bo
    );
  }
  
@@ -22205,7 +22343,7 @@ index f2ff1de..b18cfc6 100644
  function PairedResult({ text, isEmpty, isError }: {
    text: string;
    isEmpty: boolean;
-@@ -1629,8 +1382,7 @@ function PairedResult({ text, isEmpty, isError }: {
+@@ -1629,8 +1392,7 @@ function PairedResult({ text, isEmpty, isError }: {
    return (
      <div
        style={{
@@ -22215,7 +22353,7 @@ index f2ff1de..b18cfc6 100644
        }}
      >
        <pre
-@@ -1668,7 +1420,7 @@ function CompactionMessageView({ message }: { message: CustomMessage }) {
+@@ -1668,7 +1430,7 @@ function CompactionMessageView({ message }: { message: CustomMessage }) {
        <div
          style={{
            border: "1px solid var(--border)",
@@ -22224,7 +22362,7 @@ index f2ff1de..b18cfc6 100644
            overflow: "hidden",
            background: "var(--bg)",
          }}
-@@ -1710,9 +1462,7 @@ function CompactionMessageView({ message }: { message: CustomMessage }) {
+@@ -1710,9 +1472,7 @@ function CompactionMessageView({ message }: { message: CustomMessage }) {
                textAlign: "left",
              }}
            >
@@ -22235,7 +22373,7 @@ index f2ff1de..b18cfc6 100644
              <span style={{ minWidth: 0 }}>
                <span style={{ display: "block", fontSize: "calc(15px + var(--chat-font-size-offset, 0px))", fontWeight: 700, lineHeight: 1.35 }}>
                  {t("i18n.conversationCompacted")}
-@@ -1806,7 +1556,7 @@ function CustomMessageView({ message, cwd, onOpenFile }: { message: CustomMessag
+@@ -1806,7 +1566,7 @@ function CustomMessageView({ message, cwd, onOpenFile }: { message: CustomMessag
        <div
          style={{
            border: "1px solid var(--border)",
@@ -22244,7 +22382,7 @@ index f2ff1de..b18cfc6 100644
            overflow: "hidden",
            background: "var(--bg)",
          }}
-@@ -1852,9 +1602,7 @@ function CustomMessageView({ message, cwd, onOpenFile }: { message: CustomMessag
+@@ -1852,9 +1612,7 @@ function CustomMessageView({ message, cwd, onOpenFile }: { message: CustomMessag
                </span>
              )}
              {time && <span style={{ marginLeft: "auto", color: "var(--text-dim)", fontSize: 10, flexShrink: 0 }}>{time}</span>}
@@ -22255,7 +22393,7 @@ index f2ff1de..b18cfc6 100644
            </button>
          </div>
  
-@@ -1872,7 +1620,7 @@ function CustomMessageView({ message, cwd, onOpenFile }: { message: CustomMessag
+@@ -1872,7 +1630,7 @@ function CustomMessageView({ message, cwd, onOpenFile }: { message: CustomMessag
                          <img
                            src={src}
                            alt=""
@@ -22264,7 +22402,7 @@ index f2ff1de..b18cfc6 100644
                          />
                        </ImagePreview>
                      );
-@@ -1999,6 +1747,32 @@ function getWrittenFileText(block: ToolCallContent): string | null {
+@@ -1999,6 +1757,32 @@ function getWrittenFileText(block: ToolCallContent): string | null {
    return Object.keys(block.input).every((key) => WRITE_VIEW_KEYS.has(key)) ? content : null;
  }
  
@@ -22297,7 +22435,7 @@ index f2ff1de..b18cfc6 100644
  function formatCustomType(type: string): string {
    return type || "extension";
  }
-@@ -2021,13 +1795,16 @@ function getToolPreview(block: ToolCallContent): string {
+@@ -2021,13 +1805,16 @@ function getToolPreview(block: ToolCallContent): string {
    return String(first).slice(0, 120);
  }
  
@@ -22557,7 +22695,7 @@ index ba912ee..0283a47 100644
                          onSelect={() => choose(option)}
                          star={onSetDefault ? {
 diff --git a/components/ModelsConfig.tsx b/components/ModelsConfig.tsx
-index 9f6b556..c1f7dd6 100644
+index 9f6b556..d17e0cf 100644
 --- a/components/ModelsConfig.tsx
 +++ b/components/ModelsConfig.tsx
 @@ -54,6 +54,8 @@ import { providerBadgeLabel } from "./enabled-models-helpers";
@@ -22782,7 +22920,7 @@ index 9f6b556..c1f7dd6 100644
                Open the verification page and enter this code:
              </p>
 -            <div style={{ padding: "8px 10px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 5, color: "var(--text)", fontSize: 16, fontWeight: 700, fontFamily: "var(--font-mono)", letterSpacing: 0 }}>
-+            <div style={{ padding: "8px 10px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--radius-sm)", color: "var(--text)", fontSize: 16, fontWeight: 700, fontFamily: "var(--font-mono)", letterSpacing: 0 }}>
++            <div style={{ padding: "8px 10px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--radius-sm)", color: "var(--text)", fontSize: 16, fontWeight: 700, fontFamily: "var(--font-mono)" }}>
                {loginState.userCode}
              </div>
              <p style={{ margin: 0, fontSize: 11, color: "var(--text-dim)", lineHeight: 1.5 }}>
@@ -30943,7 +31081,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 42e1816..5869597 100644
+index 42e1816..85d70bc 100644
 --- a/docs/agents/sessions.md
 +++ b/docs/agents/sessions.md
 @@ -38,7 +38,7 @@ On mount `useAgentSession` loads the history, then `GET /api/sessions/[id]/state
@@ -30960,7 +31098,7 @@ index 42e1816..5869597 100644
  - 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).
  - Heights (`SIDEBAR_ROW_HEIGHTS`) keep one rhythm: session rows, every header (a project's, the pinned section's, the archive's projects), the empty group's note and the footer's two links are 28px (44px on a phone, a finger's minimum, headers included); only "show more" is a step shorter (26px, 36px). Every control in a row fits it with 2px to spare (⋯ and archive, the rename field and a delete confirmation's buttons 24px, a header's + and ⋯ 22px; 32px on a phone; `SessionTree.test.mjs` checks it), and the drag ghost (22px) stays shorter than a header.
 -- Rows: nothing before the title; the right column shows the awaiting-input dot (amber, breathing), else the running spinner, else the unread dot, else the short time (a pinned row's project, an archived row's archive time). A running row keeps its spinner beside ⋯ on hover. Hover and selection are a rounded box inset from both edges; titles are 12px `--text` (the file tree's size), the selected one 500, and the selected row (in the archive view too) has a 3px accent bar on its box's left edge, 7px clear of its top and bottom (a 14px bar; 12px on a phone, 20px), a `::before` of the absolutely positioned row, so its rounded corners never clip it; a delete confirmation's red frame has none. A worktree's branch is meta in the rows' own type (11px dim, a 10px `BranchIcon` kept inline so the ellipsis still cuts the name; the tooltip keeps `⑂`), as a pinned row's project is (no code type). A classic scrollbar takes width on the right only (Chromium's and Safari's styled one is 10px, 6px on a coarse pointer; an overlay one none): `SessionTree` measures it into `--session-tree-scrollbar`, and the right inset shrinks by it, so rows end 6px in or on the gutter's edge, whichever is further in, while the left inset stays 6px (moving it too put the tree's two lines 4px right of everything else's in Chromium). It also puts the width on the sidebar's root (only a tree with a box: not one under the archive view or in a hidden tab), where the files below the sessions read it for their right edge. A row's time (or spinner, dot) ends 4px inside its box, where a folded group's summary ends: neither the row nor its always-rendered actions span has a gap, each shown action brings its own 2px (`margin-left`), so the hidden ones leave the time on the edge. The list keeps the scrollbar's room even when everything fits (`scrollbar-gutter: stable`; `overflow-y: scroll` in Safari before 18.2), so rows never narrow when it starts to scroll.
-+- Rows: nothing before the title; the right column shows the awaiting-input dot (amber, breathing), else the running spinner, else the unread dot, else the short time (a pinned row's project, an archived row's archive time). A running row keeps its spinner beside ⋯ on hover. A live row has no hover Archive button (Archive is in its ⋯ menu); the archive view's rows keep Restore one click away. The toolbar's search opens the command bar (`components/SearchCommandBar.tsx`, also ⌘K / Ctrl+K outside a terminal): recent top-level conversations until something is typed, then `/api/sessions/search` matches with their text; arrows move, Enter opens, Esc closes. Hover and selection are a rounded box inset from both edges; titles are 12px `--text` (the file tree's size), the selected one 500, and the selected row (in the archive view too) has a 3px accent bar on its box's left edge, 7px clear of its top and bottom (a 14px bar; 12px on a phone, 20px), a `::before` of the absolutely positioned row, so its rounded corners never clip it; a delete confirmation's red frame has none. A worktree's branch is meta in the rows' own type (11px dim, a 10px `BranchIcon` kept inline so the ellipsis still cuts the name; the tooltip keeps `⑂`), as a pinned row's project is (no code type). A classic scrollbar takes width on the right only (Chromium's and Safari's styled one is 10px, 6px on a coarse pointer; an overlay one none): `SessionTree` measures it into `--session-tree-scrollbar`, and the right inset shrinks by it, so rows end 6px in or on the gutter's edge, whichever is further in, while the left inset stays 6px (moving it too put the tree's two lines 4px right of everything else's in Chromium). It also puts the width on the sidebar's root (only a tree with a box: not one under the archive view or in a hidden tab), where the files below the sessions read it for their right edge. A row's time (or spinner, dot) ends 4px inside its box, where a folded group's summary ends: neither the row nor its always-rendered actions span has a gap, each shown action brings its own 2px (`margin-left`), so the hidden ones leave the time on the edge. The list keeps the scrollbar's room even when everything fits (`scrollbar-gutter: stable`; `overflow-y: scroll` in Safari before 18.2), so rows never narrow when it starts to scroll.
++- Rows: nothing before the title; the right column shows the awaiting-input dot (amber, breathing), else the running spinner, else the unread dot, else the short time (a pinned row's project, an archived row's archive time). A running row keeps its spinner beside ⋯ on hover. In the transcript only an answer (text without tool calls) has an actions row, and its Copy shows on hover or focus with the model, usage and time (always on a touch screen); a whitespace-only text block (DeepSeek sends "\n\n" beside each tool call) renders nothing, and a running turn's messages are drawn as steps. Steps are one 4px rhythm, within a message and between messages (set on the messages' wrappers), folded or live; the answer sits 8px under its steps, open or closed. A live row has no hover Archive button (Archive is in its ⋯ menu); the archive view's rows keep Restore one click away. The toolbar's search opens the command bar (`components/SearchCommandBar.tsx`, also ⌘K / Ctrl+K outside a terminal): recent top-level conversations until something is typed, then `/api/sessions/search` matches with their text; arrows move, Enter opens, Esc closes. Hover and selection are a rounded box inset from both edges; titles are 12px `--text` (the file tree's size), the selected one 500, and the selected row (in the archive view too) has a 3px accent bar on its box's left edge, 7px clear of its top and bottom (a 14px bar; 12px on a phone, 20px), a `::before` of the absolutely positioned row, so its rounded corners never clip it; a delete confirmation's red frame has none. A worktree's branch is meta in the rows' own type (11px dim, a 10px `BranchIcon` kept inline so the ellipsis still cuts the name; the tooltip keeps `⑂`), as a pinned row's project is (no code type). A classic scrollbar takes width on the right only (Chromium's and Safari's styled one is 10px, 6px on a coarse pointer; an overlay one none): `SessionTree` measures it into `--session-tree-scrollbar`, and the right inset shrinks by it, so rows end 6px in or on the gutter's edge, whichever is further in, while the left inset stays 6px (moving it too put the tree's two lines 4px right of everything else's in Chromium). It also puts the width on the sidebar's root (only a tree with a box: not one under the archive view or in a hidden tab), where the files below the sessions read it for their right edge. A row's time (or spinner, dot) ends 4px inside its box, where a folded group's summary ends: neither the row nor its always-rendered actions span has a gap, each shown action brings its own 2px (`margin-left`), so the hidden ones leave the time on the edge. The list keeps the scrollbar's room even when everything fits (`scrollbar-gutter: stable`; `overflow-y: scroll` in Safari before 18.2), so rows never narrow when it starts to scroll.
  - Row keys are unique and stable (`session:<context>:<rootId>`, `group:<key>`, `more:<key>`, `empty:<key>`, and fixed keys for the pinned header, the two spacers (`pinned-spacer`, `footer-spacer`) and the footer); focus tracking and `keepMounted` go by them.
  - Menus (`SidebarMenu`) and the toast live in `SessionSidebar`, above the virtualized rows, so a row scrolled away keeps its open menu (the project/worktree picker of the files tab and of the composer's bar uses `SidebarMenu` for its own two menus); the row with focus, a menu, a rename or a delete confirmation stays mounted (`keepMounted`). Menus are portaled to `document.body`: the mobile drawer's `transform` would pin a `position: fixed` menu to the drawer. The archive view is a second tree; the main one stays mounted underneath, the two in one grid cell (`.sidebar-sessions-views`, `grid-area: 1 / 1`; the archive opaque in `--bg-panel` and stacked above the tree for good, `position: relative; z-index: 1`: the tree's rows are positioned and paint over an unpositioned view, which only its animation lifted, so the frame its entrance ended in flashed the tree). Going in and out moves, in both layouts and on phones (`useSidebarMotion()`, `archiveViewState()` in `hooks/useSidebarMotion.ts`; `setArchiveView()` starts it on a change only, and View, Back and a fork's open all go through it): in, the archive slides from 14px right and fades in over the tree (`.is-entering`, 180ms ease-out), the tree `inert` under it until the view is in, then `hidden` as before; out, the tree is back at once and the archive slides and fades out to the right over it (`.is-leaving`, 180ms ease-in, `forwards`), still mounted with its rows (`archiveRows` is built while `archiveMounted`, else it would leave empty), `inert` and `pointer-events: none`, so nothing in it is clicked twice and a click lands on the tree, until its own `animationend` (not one bubbling from a row) unmounts it. A phase that gets no end event (a sidebar not shown: a hidden tab, a closed drawer) ends 300 ms after its start (`SIDEBAR_MOTION_MS` + `SIDEBAR_MOTION_GRACE_MS`). Under `prefers-reduced-motion` no phase starts and the CSS has no animation: the views swap at once, as before.
  - Focus: a menu returns it to the opener it was given when it opened (the parent drops `returnFocusTo` with the menu); a row's ⋯ or a group's buttons are `display: none` by then unless hovered, selected or focused, so `menuFocusReturnTarget()` falls back to the row's first focusable control (its main link or transient-session button, a group's toggle). Controls that go away under the keyboard hand focus on: the archive's Back button when it opens, the footer link (or the selected tab, or with no tabs the toolbar row's search) after Back, the family's row after a toast's Undo or a delete Cancel (`focusIfLost()`, only when focus fell to `<body>`). The archive's two moves make the view they leave `inert` before it is hidden or gone, and Chromium blurs an inert element only at its next frame, after the effect that moves focus has run: `focusIfHidden()` counts focus on something without a box or inside `[inert]` as lost too.
@@ -43686,7 +43824,7 @@ index 0000000..7b6ea92
 +  </g>
 +</svg>
 diff --git a/public/offline.html b/public/offline.html
-index 0dac4b2..e07421e 100644
+index 0dac4b2..510150c 100644
 --- a/public/offline.html
 +++ b/public/offline.html
 @@ -3,14 +3,38 @@
@@ -43745,7 +43883,7 @@ index 0dac4b2..e07421e 100644
        }
  
        main {
-@@ -30,53 +58,66 @@
+@@ -30,53 +58,65 @@
          text-align: center;
        }
  
@@ -43768,7 +43906,6 @@ index 0dac4b2..e07421e 100644
 +        margin: 0 0 6px;
 +        font-size: 18px;
 +        font-weight: 600;
-+        letter-spacing: -0.01em;
 +        line-height: 1.3;
        }