aegis-desktop 1.0.10 → 1.0.13

package/renderer/style.css

@@ -6,14 +6,26 @@
  * corresponding source under this licence (§5/§13) — see LICENSING.md.
  */
 :root {
-  --bg: #0a0e14;
-  --surface: #12161e;
-  --surface2: #181e28;
-  --border: #2a3342;
-  --border2: #3d4a5e;
-  --text: #d0dfee;
-  --text2: #7e9ab8;
-  --text3: #3a4a60;
+  /* Surface ramp: four neutral-cool steps, farthest-back to nearest-front.
+     The rule this stylesheet now follows is that no selector picks a grey of
+     its own — "a bit lighter than the page" is --surface, never #151a22. That
+     is what stops forty near-identical darks accumulating, each one a slightly
+     different hue depending on the year it was written, and it is why the
+     values below are a ramp rather than five unrelated colours.
+
+       --bg        the page
+       --surface   a rail resting ON the page: sidebar, topbar
+       --surface2  an object ON a rail: composer, lane cards, chips
+       --surface3  that object, hovered or pressed */
+  --bg: #0b0d11;
+  --surface: #10131a;
+  --surface2: #171b23;
+  --surface3: #1f242e;
+  --border: #232934; /* hairline — used once per edge, never doubled */
+  --border2: #333b49; /* the same line lifted: hover, focus, emphasis */
+  --text: #dbe3ee;
+  --text2: #94a2b6;
+  --text3: #4c586a;
   --teal: #00e5c0;
   --purple: #6b8fd4;
   --green: #00ff88;
@@ -27,6 +39,47 @@
   --user: var(--purple);
   --assistant: var(--surface2);
 
+  /* One radius scale, three steps plus pills. 6px is inline (a chip, a key, a
+     small button), 10px is a sitting object (a card, a lane card), 14px is a
+     large surface (the composer). The ad-hoc 3/4/8/9/12/16/18px values that
+     used to be scattered here rounded to the nearest step: one at a time the
+     spread was invisible, all together it read as impatient. */
+  --r-sm: 6px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  --r-pill: 999px;
+
+  /* The reading column: ~72 characters of Ubuntu at 15px. One number governs
+     the transcript's prose AND the composer's width, so the input sits exactly
+     under the column of text it produces — if these drifted apart the window
+     would look assembled from two different grids.
+
+     Deliberately px, not ch. `ch` resolves against the font-size of whichever
+     element uses it, and the transcript sets 14px on `.messages` while the
+     composer inherits 14px from <body> and 15px inside the textarea — so the
+     same `72ch` would have produced three different widths for the two things
+     that must line up. A fixed length is the only spelling that agrees with
+     itself in both places. */
+  --measure: 640px;
+
+  /* Spacing, in 4px steps. Named only where a value repeats across sections. */
+  --s-1: 4px;
+  --s-2: 8px;
+  --s-3: 12px;
+  --s-4: 16px;
+
+  /* Two shadows: resting, and lifted. A wide translucent blur reads as depth;
+     a tight opaque offset reads as a sticker. */
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
+  --shadow-2: 0 12px 32px -18px rgba(0, 0, 0, 0.9);
+
+  /* The accent at the three opacities this sheet actually uses. Naming them
+     keeps "teal at 0.35" from being retyped as rgba(0,229,192,.35) eight
+     times, which is what made a colour tweak a find-and-replace. */
+  --accent-soft: var(--accent-soft);
+  --accent-mid: var(--accent-mid);
+  --accent-edge: var(--accent-edge);
+
   /* Deterministic stacks. All three named families are vendored in
      renderer/fonts/ (see fonts/NOTICE.md), so they resolve to the same bytes on
      every platform and with the network down — the desktop counterpart of the
@@ -148,7 +201,7 @@ body {
   max-width: 40ch;
   padding: 2px 8px;
   border: 1px solid var(--border);
-  border-radius: 999px;
+  border-radius: var(--r-pill);
 }
 
 .session-meter[hidden] {
@@ -195,7 +248,7 @@ body {
 .slider {
   position: absolute;
   inset: 0;
-  border-radius: 18px;
+  border-radius: var(--r-lg);
   background: var(--border);
   transition: 0.15s;
   cursor: pointer;
@@ -248,20 +301,45 @@ main {
   background: var(--bg);
 }
 
+/* NO BOXES.
+   A card used to be a filled, bordered, rounded rectangle — nine of them down
+   the sidebar, each with its own frame, which made a single scrolling column
+   read as a page of unrelated widgets and spent the eye's attention on borders
+   that carry no information. The sidebar is one continuous surface now: only a
+   hairline between sections, and the heading set as a quiet label rather than
+   a panel title.
+
+   The `.card` class itself stays in the markup, and that is deliberate: it is a
+   layout hook, not a decoration. `revealSidebarCard()` in app.js resolves
+   `node.closest('section.card')` to find the section it must scroll to when the
+   welcome panel sends the user to the key field, and
+   desktop/test/renderer-model-key-focus.test.mjs mirrors that selector. Deleting
+   the class from the template would silently break that jump; deleting the
+   fill, border and radius from the rule does not. */
 .card {
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 12px;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
+
+/* The divider replaces the box. It is on the section, not a wrapper, so a
+   hidden section (the companion card before it has anything true to say) never
+   leaves a floating rule behind. */
+.side .card + .card {
+  border-top: 1px solid var(--border);
+  padding-top: 12px;
 }
 
 .card h2 {
-  font-size: 12px;
+  font-size: 11px;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   color: var(--text2);
   margin: 0 0 8px;
   font-family: var(--font-display);
+  font-weight: 600;
+  opacity: 0.75;
 }
 
 .card dl {
@@ -288,7 +366,7 @@ select {
   background: var(--surface);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 6px;
   font-family: var(--font-display);
 }
@@ -321,7 +399,7 @@ select:disabled {
   background: var(--surface);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 5px 8px;
   font: inherit;
   font-size: 12px;
@@ -352,7 +430,7 @@ select:disabled {
   background: var(--surface);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 4px 6px;
   font: inherit;
   font-size: 12px;
@@ -380,7 +458,7 @@ select:disabled {
   background: var(--surface);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 6px 8px;
   font: inherit;
 }
@@ -392,7 +470,7 @@ select:disabled {
 
 .memory-search button {
   border: none;
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   background: var(--surface2);
   color: var(--text);
   border: 1px solid var(--border);
@@ -420,7 +498,7 @@ select:disabled {
 .memory-results li {
   font-size: 12px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 6px 8px;
   word-break: break-word;
 }
@@ -490,7 +568,7 @@ select:disabled {
 .card-title-btn:focus-visible {
   outline: 1px solid var(--teal);
   outline-offset: 2px;
-  border-radius: 3px;
+  border-radius: var(--r-sm);
 }
 
 /* ------------------------------------------------------ memory inspector */
@@ -527,7 +605,7 @@ select:disabled {
   min-height: 0;
   background: color-mix(in srgb, var(--surface2) 88%, transparent);
   border: 1px solid var(--border2);
-  border-radius: 12px;
+  border-radius: var(--r-md);
   box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
   overflow: hidden;
 }
@@ -571,7 +649,7 @@ select:disabled {
   background: var(--surface);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 7px 9px;
   font: inherit;
 }
@@ -583,7 +661,7 @@ select:disabled {
 
 .memory-filters button {
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   background: var(--surface);
   color: var(--text);
   padding: 0 12px;
@@ -628,7 +706,7 @@ select:disabled {
   font-size: 10px;
   line-height: 1.6;
   padding: 1px 7px;
-  border-radius: 999px;
+  border-radius: var(--r-pill);
   border: 1px solid var(--border);
   color: var(--text2);
   background: var(--surface);
@@ -656,7 +734,7 @@ button.mem-chip.on {
 }
 
 .mem-chip.src {
-  border-color: rgba(0, 229, 192, 0.45);
+  border-color: var(--accent-edge);
   color: var(--teal);
 }
 
@@ -698,7 +776,7 @@ button.mem-chip.on {
 
 .mem-card {
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--r-sm);
   background: var(--surface);
   padding: 9px 11px;
 }
@@ -749,7 +827,7 @@ button.mem-chip.on {
   font-size: 12px;
   color: var(--text2);
   border: 1px dashed var(--border);
-  border-radius: 8px;
+  border-radius: var(--r-sm);
   padding: 18px;
   text-align: center;
 }
@@ -798,7 +876,7 @@ button.mem-chip.on {
   background: var(--surface);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 6px 8px;
   font: inherit;
 }
@@ -820,7 +898,7 @@ body.memory-open {
   background: var(--surface);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 6px 8px;
   font: inherit;
 }
@@ -834,7 +912,7 @@ body.memory-open {
   width: 100%;
   margin-top: 6px;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   background: var(--teal);
   color: #04140f;
   padding: 6px 0;
@@ -844,7 +922,7 @@ body.memory-open {
 }
 
 .btn-block:hover:not(:disabled) {
-  box-shadow: 0 0 12px rgba(0, 229, 192, 0.35);
+  box-shadow: 0 0 12px var(--accent-mid);
 }
 
 .btn-block:disabled {
@@ -852,43 +930,95 @@ body.memory-open {
   cursor: default;
 }
 
-/* ------------------------------------------------------------- messages */
+/* ------------------------------------------------------------- messages
+   The transcript is the application. Everything else in this window — the
+   rail, the topbar, the composer — is chrome around it, and the layout here
+   is what decides whether the window reads as a serious tool or as a chat
+   widget.
+
+   What changed and why (a lift, not a repaint):
+
+   1. NO BUBBLES. A turn used to be a rounded 76%-wide box, the user's in a
+      saturated purple block with white text. That is the geometry of a
+      messaging app, and it costs twice: the coloured block is the loudest
+      thing on screen even when the *answer* is what the eye came for, and
+      the ragged 76% width puts prose at a measure that changes every turn,
+      so nothing settles into a column you can read down.
+
+   2. ONE MEASURE, ONE COLUMN. Every turn is full-width inside a single
+      reading column (`--measure`), assistant and user alike. Turns are
+      separated by a hairline and by space, never by a frame — the same
+      no-boxes rule the sidebar adopted, applied to the transcript. The
+      reader's eye then has exactly one left edge to return to.
+
+   3. AUTHOR LINE, NOT A CHAT HEADER. `.who` was 11px uppercase with 0.7
+      opacity sitting *inside* the bubble; it is now a quiet line above the
+      prose in the body colour, so it labels the turn without competing
+      with it.
+*/
 .messages {
   flex: 1;
   overflow-y: auto;
-  padding: 16px;
+  padding: var(--s-4) var(--s-4) var(--s-2);
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0;
   min-height: 0;
   font-family: var(--font-chat);
+  /* The reading column is centered in the pane and capped at ~72ch: past
+     that a line of prose is a head-turn, under it the column looks stingy.
+     The number lives on :root (--measure) so the composer shares it; `auto`
+     side margins in a column flex container center each child horizontally,
+     and in a narrow window the cap simply stops binding — no media query. */
 }
 
 .msg {
-  max-width: 76%;
-  padding: 10px 12px;
-  border-radius: 10px;
+  width: 100%;
+  max-width: var(--measure);
+  margin: 0 auto;
+  /* Horizontal padding is the same on every role, including the assistant
+     turn that paints no background. That is deliberate: the moment the user's
+     plate is inset and the reply is not, the two turns start on different left
+     edges and the column this whole section is built around stops existing. */
+  padding: 14px var(--s-3) 16px;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  /* The hairline that replaces the bubble: a divider between turns, drawn on
+     the TOP of every turn including the first, then suppressed on the first
+     one below. One line, one place, no double border between neighbours. */
+  border-top: 1px solid var(--border);
+}
+
+.msg:first-child {
+  border-top: 0;
+  padding-top: 0;
 }
 
+/* The user's turn is distinguished by typography and a quiet plate, not by a
+   saturated fill. `--surface2` is the "object on the page" step of the ramp,
+   so the band is faintly recessed — enough to find while scrolling back,
+   never enough to outshout the answer under it. */
 .msg.user {
-  align-self: flex-end;
-  background: var(--purple);
-  color: #fff;
+  align-self: center;
+  background: var(--surface2);
+  color: var(--text);
+  border-radius: var(--r-md);
+  border-top-color: transparent;
 }
 
 .msg.assistant {
-  align-self: flex-start;
-  background: var(--surface2);
-  border: 1px solid var(--border);
+  align-self: center;
+  background: none;
 }
 
 .msg.system {
   align-self: center;
-  background: transparent;
+  background: none;
   color: var(--text2);
   font-size: 12px;
-  border: 1px dashed var(--border);
-  max-width: 92%;
+  border-top: 1px dashed var(--border);
+  max-width: min(var(--measure), 92%);
   text-align: center;
 }
 
@@ -968,23 +1098,35 @@ body.memory-open {
   display: none;
 }
 
+/* The author line. Uppercase micro-type at 600 weight is the one place this
+   sheet uses it, because it is a label and not prose — but it now sits in
+   --text2 on the page background instead of inside a bubble, and the user's
+   is tinted rather than right-aligned: in a single reading column a ragged
+   right edge on one turn's header breaks the column the whole layout exists
+   to establish. */
 .who {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  opacity: 0.7;
-  margin-bottom: 2px;
+  letter-spacing: 0.07em;
+  color: var(--text2);
+  margin-bottom: var(--s-2);
   font-family: var(--font-display);
 }
 
 .msg.user .who {
-  text-align: right;
+  color: var(--purple);
 }
 
+/* Prose. 15px/1.65 is a touch larger than the 14px body default because this
+   is the only long-form text in the window and the measure above is wide
+   enough to carry it; anything smaller at 72ch reads as a log file. */
 .body {
   white-space: pre-wrap;
   word-break: break-word;
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--text);
 }
 
 /* Tool-call log for a turn (desktop/lib/local/engine.js onDelta's `tool`
@@ -1022,14 +1164,17 @@ body.memory-open {
 
 .meta {
   font-size: 11px;
-  color: var(--text2);
-  margin-top: 6px;
+  color: var(--text3);
+  margin-top: var(--s-2);
   font-family: var(--font-mono);
 }
 
+/* Was `rgba(255, 255, 255, 0.75)`, chosen to survive on the purple bubble.
+   The bubble is gone, so a white wash here would be a faint smudge on the
+   page; the user's meta takes the muted step of the ramp like everyone
+   else's. */
 .msg.user .meta {
-  color: rgba(255, 255, 255, 0.75);
-  text-align: right;
+  color: var(--text3);
 }
 
 /* --------------------------------------------------- discovery lane (D2.2)
@@ -1038,17 +1183,13 @@ body.memory-open {
    beside the answer instead of being buried under it. */
 .chatflow {
   align-self: stretch;
-  max-width: 100%;
-  margin: 2px 0 6px;
-  padding: 8px 10px 10px;
+  max-width: var(--measure);
+  margin: 2px auto var(--s-2);
+  padding: var(--s-2) 10px 10px;
   border: 1px solid var(--border);
   border-left: 2px solid var(--teal);
-  border-radius: 10px;
-  background: linear-gradient(
-    90deg,
-    rgba(0, 229, 192, 0.05),
-    rgba(107, 143, 212, 0.05)
-  );
+  border-radius: var(--r-md);
+  background: linear-gradient(90deg, var(--accent-soft), rgba(107, 143, 212, 0.05));
 }
 
 .flow-rail {
@@ -1095,7 +1236,7 @@ body.memory-open {
   gap: 6px;
   padding: 9px 11px;
   border: 1px solid var(--border2);
-  border-radius: 10px;
+  border-radius: var(--r-md);
   background: var(--surface2);
   min-height: 92px;
 }
@@ -1116,7 +1257,7 @@ body.memory-open {
 }
 
 .flow-card.done {
-  border-color: rgba(0, 229, 192, 0.45);
+  border-color: var(--accent-edge);
 }
 
 .flow-card.stopped {
@@ -1212,31 +1353,30 @@ body.memory-open {
   scroll-snap-align: end;
 }
 
-/* Composer side rail: the lane toggle sits above Send so it is visible
-   without stealing composer width. */
-.composer-side {
+/* Composer side rail. Now the composer's own control row (see .composer-row):
+   the discovery toggle, the mode chip and Send on one line under the input. */
+.composer-row {
   display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 6px;
+  align-items: center;
+  gap: var(--s-2);
+  /* The top hairline is what makes the row read as *inside* the composer
+     rather than as a second bar attached to its bottom edge. */
+  border-top: 1px solid var(--border);
+  padding-top: var(--s-2);
+  margin-top: var(--s-1);
 }
 
-.composer-side button[type='submit'] {
+.composer-spacer {
   flex: 1;
-  min-height: 34px;
 }
 
-/* Composer mode strip: the tool-approval mode hoisted out of the Settings
-   column and under the chat bar, so it is readable while typing. Painted only
-   from renderConfirmMode()/renderAutoModeChip() in app.js. */
-.composer-modes {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 16px 10px;
-  min-height: 22px;
+.composer-row button[type='submit'] {
+  flex: none;
+  min-height: 30px;
 }
 
+/* Composer mode chip: the tool-approval mode, inside the composer. Painted
+   only from renderConfirmMode()/renderAutoModeChip() in app.js. */
 .mode-chip {
   display: inline-flex;
   align-items: center;
@@ -1246,9 +1386,9 @@ body.memory-open {
   font-size: 10.5px;
   line-height: 1.7;
   color: var(--text2);
-  background: var(--surface2);
+  background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 999px;
+  border-radius: var(--r-pill);
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
@@ -1274,7 +1414,8 @@ body.memory-open {
    quiet, because the safe state should not look like the exciting one. */
 .mode-chip.is-auto {
   color: var(--teal);
-  border-color: var(--teal);
+  border-color: var(--accent-edge);
+  background: var(--accent-soft);
 }
 
 .mode-chip.is-auto .mode-dot {
@@ -1282,10 +1423,14 @@ body.memory-open {
   text-shadow: 0 0 6px var(--teal);
 }
 
-.composer-modes .hint {
+.composer-row .hint {
   font-size: 10.5px;
   color: var(--text3);
   margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 
@@ -1372,60 +1517,91 @@ label[hidden] {
   color: var(--teal);
 }
 
-/* ------------------------------------------------------------- composer */
+/* ------------------------------------------------------------- composer
+   The one elevated object in the window. Everything else is flat: the rail is
+   a surface, turns are a column with hairlines, and this is the thing that
+   sits ON the page, so it is the only element allowed a shadow and the only
+   one whose focus changes its border. That is the whole hierarchy — if the
+   composer is not the most obviously interactive object on screen, the eye
+   does not land on the place it is supposed to type.
+
+   Flex direction is column now, not row: the textarea is the box and the
+   control row (toggle, mode chip, Send) sits on a hairline inside it. */
 .composer {
   display: flex;
-  gap: 8px;
-  align-items: flex-end;
-  padding: 12px;
-  margin: 0 auto;
-  max-width: 100%;
-  width: calc(100% - 24px);
+  flex-direction: column;
+  gap: var(--s-1);
+  align-items: stretch;
+  padding: var(--s-3);
+  margin: 0 auto var(--s-3);
+  max-width: var(--measure);
+  width: calc(100% - 32px);
   border: 1px solid var(--border2);
-  border-radius: 16px;
+  border-radius: var(--r-lg);
   background: var(--surface2);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-1);
   transition: border-color 0.15s, box-shadow 0.15s;
-  margin-bottom: 12px;
 }
 
+/* Focus is communicated by the border and a single soft ring — not by a glow
+   in the accent colour at full strength, which turned the whole box teal and
+   made every keystroke feel like an alert. */
 .composer:focus-within {
-  border-color: var(--teal);
-  box-shadow: 0 0 0 1px rgba(0, 229, 192, 0.35), 0 6px 22px rgba(0, 229, 192, 0.08);
+  border-color: var(--border2);
+  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-2);
 }
 
 .composer textarea {
-  flex: 1;
+  /* `flex: 1` lives here from the row-era composer, where it let the input eat
+     the leftover WIDTH. The composer is a column now, so a 0 flex-basis would
+     resolve vertically and collapse the field to its padding: basis `auto`
+     keeps the two rows the markup asks for, and the textarea's own
+     `rows="2"` supplies the height. Growth is no longer its job. */
+  flex: 0 0 auto;
   resize: none;
   background: transparent;
   color: var(--text);
   border: none;
-  border-radius: 8px;
-  padding: 8px 10px;
+  border-radius: var(--r-sm);
+  padding: var(--s-1) 2px;
   font: inherit;
   font-family: var(--font-chat);
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+.composer textarea::placeholder {
+  color: var(--text3);
 }
 
 .composer textarea:focus {
   outline: none;
 }
 
-.composer button {
+/* Send is filled accent, not a second grey button: it is the terminal action
+   of the only form in the window. */
+/* Scoped to [type='submit'] on purpose. The mode chip is a <button> inside
+   this form now (it used to sit outside it), and `.composer button` at
+   (0,1,1) outranks `.mode-chip` at (0,1,0) — so an unscoped rule here would
+   have filled the chip with the send accent. Send is the only submit. */
+.composer button[type='submit'] {
   border: none;
-  border-radius: 8px;
+  border-radius: var(--r-sm);
   background: var(--teal);
   color: #04140f;
-  padding: 0 18px;
+  padding: 0 16px;
   font: inherit;
   font-weight: 700;
   cursor: pointer;
+  transition: filter 0.15s, box-shadow 0.15s;
 }
 
-.composer button:hover:not(:disabled) {
-  box-shadow: 0 0 12px rgba(0, 229, 192, 0.35);
+.composer button[type='submit']:hover:not(:disabled) {
+  filter: brightness(1.08);
+  box-shadow: 0 0 12px var(--accent-mid);
 }
 
-.composer button:disabled {
+.composer button[type='submit']:disabled {
   opacity: 0.5;
   cursor: default;
 }
@@ -1440,7 +1616,7 @@ label {
 
 .ghost-btn {
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   background: var(--surface2);
   color: var(--text);
   padding: 4px 10px;
@@ -1470,7 +1646,7 @@ label {
   background: var(--surface);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 6px;
   font: inherit;
 }
@@ -1483,7 +1659,7 @@ label {
 .cancel-btn {
   margin-top: 8px;
   border: 1px solid var(--red);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   background: transparent;
   color: var(--red);
   padding: 2px 10px;
@@ -1495,7 +1671,7 @@ label {
 .copy-btn {
   margin-top: 8px;
   border: 1px solid var(--teal);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   background: transparent;
   color: var(--teal);
   padding: 2px 10px;
@@ -1522,7 +1698,7 @@ label {
 
 .approval-card {
   border: 1px solid var(--amber);
-  border-radius: 8px;
+  border-radius: var(--r-sm);
   background: rgba(255, 145, 0, 0.08);
   padding: 8px 10px;
 }
@@ -1596,7 +1772,7 @@ label {
   white-space: pre;
   background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 6px 8px;
   margin-bottom: 8px;
 }
@@ -1628,7 +1804,7 @@ label {
 }
 
 .approval-btn {
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 4px 10px;
   font: inherit;
   font-size: 11px;
@@ -1664,16 +1840,21 @@ label {
 }
 
 /* ------------------------------------------------------- settings pane */
+/* NO BOXES, same rule as .card (see that comment above): each key row used
+   to be its own filled, bordered, rounded rectangle, which re-introduced the
+   boxed-widgets look one level down inside a card the Oct-18/19 session had
+   just de-boxed. A hairline between rows replaces the per-row frame. */
 .setting-row {
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 8px;
-  margin-bottom: 8px;
+  padding: 8px 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
+.setting-row + .setting-row {
+  border-top: 1px solid var(--border);
+}
+
 .setting-name {
   font-size: 12px;
   font-weight: 600;
@@ -1684,7 +1865,7 @@ label {
   background: var(--surface);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 5px 7px;
   font: inherit;
   font-size: 12px;
@@ -1721,7 +1902,7 @@ label {
   font-size: 12px;
   color: var(--text2);
   border: 1px dashed var(--border);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 6px 8px;
 }
 
@@ -1744,18 +1925,23 @@ label {
   color: var(--teal);
 }
 
+/* Sessions, same no-boxes rule as .card: a list of past sessions is a list,
+   not a stack of cards. Each row is a full-width hit target separated by a
+   hairline; hover paints the row's own surface instead of outlining it. */
 .session-row {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 6px 8px;
+  border: 0;
+  border-left: 2px solid transparent;
+  border-radius: var(--r-sm);
+  padding: 5px 8px;
   cursor: pointer;
 }
 
 .session-row:hover {
-  border-color: var(--teal);
+  background: var(--surface2);
+  border-left-color: var(--teal);
 }
 
 .session-title {
@@ -1831,41 +2017,39 @@ label {
   margin: 0;
 }
 
-.chat-quick-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
-  max-width: 560px;
+/* The one personalized line that replaced the five topic pills. It sits where
+   the "start with one of these" sentence and the pill row used to be, and it
+   carries the same visual weight as .sub so the panel still reads as a greeting
+   with one sentence under it — not a card, not a menu. Wider than .sub because
+   it is a sentence about this install rather than a tagline, and `[hidden]` has
+   to be restated: a class selector outranks the UA `[hidden] { display:none }`,
+   which is the same defect fixed for .welcome-connect below. */
+.welcome-personal {
+  max-width: 480px;
   margin-top: 2px;
+  color: var(--text2);
 }
 
-.chat-quick-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  padding: 7px 14px;
-  border-radius: 999px;
-  border: 1px solid var(--border2);
-  background: var(--surface);
-  color: var(--text2);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s;
-  font-family: var(--font-chat);
-  white-space: nowrap;
+.welcome-personal[hidden] {
+  display: none;
 }
 
-.chat-quick-pill:hover {
-  border-color: var(--teal);
-  color: var(--teal);
-  background: rgba(0, 229, 192, 0.06);
+/* An action line (a downloaded update, a key not yet pasted) is a step the user
+   can take now, so it gets the teal edge the pills used to carry on hover. A
+   tip rotation stays quiet — it is information, not a task. */
+/* The model's own sentence. It is not a task and not a status, so it gets no
+   teal edge and no button-like weight — just the body colour, so it reads as
+   the first thing the assistant said rather than as another app notice. */
+.welcome-personal[data-kind='ai'] {
+  color: var(--text);
+  text-align: left;
 }
 
-.chat-quick-pill .qp-ic {
-  font-size: 13px;
-  line-height: 1;
+.welcome-personal[data-kind='action'] {
+  color: var(--text2);
+  border-left: 2px solid var(--teal);
+  padding-left: 10px;
+  text-align: left;
 }
 
 .chat-welcome .hints {
@@ -1895,7 +2079,7 @@ label {
   margin-top: 8px;
   padding: 16px 18px;
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--r-md);
   background: var(--surface);
   text-align: left;
   animation: wc-in 0.25s ease-out;
@@ -1991,7 +2175,7 @@ label {
   text-align: left;
   padding: 13px 14px;
   border: 1px solid var(--border2);
-  border-radius: 9px;
+  border-radius: var(--r-sm);
   background: var(--surface2);
   color: var(--text2);
   font-family: var(--font-chat);
@@ -2002,7 +2186,7 @@ label {
 .wc-path:hover,
 .wc-path:focus-visible {
   border-color: var(--teal);
-  background: rgba(0, 229, 192, 0.06);
+  background: var(--accent-soft);
   outline: none;
 }
 
@@ -2012,7 +2196,7 @@ label {
    existing surface, no new colours, no change to the shared .wc-path rules
    above. */
 .wc-path-primary {
-  border-color: rgba(0, 229, 192, 0.45);
+  border-color: var(--accent-edge);
   background: linear-gradient(180deg, rgba(0, 229, 192, 0.07), rgba(0, 229, 192, 0.02));
 }
 
@@ -2235,7 +2419,7 @@ label {
   font-size: 0.92em;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--r-sm);
   padding: 1px 5px;
 }
 
@@ -2248,7 +2432,7 @@ label {
   padding-top: 26px;
   background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--r-sm);
   overflow-x: auto;
 }
 
@@ -2265,7 +2449,7 @@ label {
   top: 6px;
   right: 6px;
   border: 1px solid var(--border2);
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   background: var(--surface);
   color: var(--text2);
   padding: 1px 8px;
@@ -2353,15 +2537,15 @@ label {
   pointer-events: none;
   background: linear-gradient(
     to bottom,
-    rgba(10, 14, 20, 0.6),
-    rgba(10, 14, 20, 0)
+    rgba(11, 13, 17, 0.6),
+    rgba(11, 13, 17, 0)
   );
   opacity: 0;
   transition: opacity 0.18s ease;
 }
 
 body.is-scrolled .topbar {
-  background-color: rgba(18, 22, 30, 0.86);
+  background-color: rgba(23, 27, 35, 0.86);
   -webkit-backdrop-filter: blur(12px) saturate(140%);
   backdrop-filter: blur(12px) saturate(140%);
   box-shadow: 0 1px 0 var(--border), 0 14px 34px -22px rgba(0, 0, 0, 0.9);
@@ -2375,7 +2559,7 @@ body.is-scrolled .topbar::after {
    `.composer` already transitions box-shadow (see the composer section), so
    this animates with no new transition to keep in sync. */
 body.is-scrolled .composer {
-  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.95);
+  box-shadow: var(--shadow-2);
 }
 
 /* Scrollbars: thin, self-effacing, and only really visible while in use —
@@ -2426,7 +2610,7 @@ body.is-scrolled .composer {
   background-color: var(--border);
   background-clip: padding-box;
   border: 3px solid transparent;
-  border-radius: 999px;
+  border-radius: var(--r-pill);
 }
 
 .messages::-webkit-scrollbar-thumb:hover,
@@ -2556,14 +2740,22 @@ body.keys-open {
   padding: 4px 0;
 }
 
+/* Key rows: a ledger, so rows are separated by a hairline rather than each
+   carrying a frame. `--line` was never defined anywhere in this sheet — the
+   `#2a2f3a` fallback was doing all the work — so it now names the real token. */
 .keys-row {
   display: grid;
   grid-template-columns: 78px 1fr auto;
   align-items: center;
   gap: 10px;
-  padding: 10px 12px;
-  border: 1px solid var(--line, #2a2f3a);
-  border-radius: 10px;
+  padding: 10px 2px;
+  border: 0;
+  border-top: 1px solid var(--border);
+  border-radius: 0;
+}
+
+.keys-row:first-child {
+  border-top: 0;
 }
 
 /* A row whose key is already on the machine reads as done and drops back, so
@@ -2578,7 +2770,7 @@ body.keys-open {
   font-size: 12px;
   text-align: center;
   padding: 2px 6px;
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   color: #9aa4b2;
 }
 
@@ -2598,3 +2790,187 @@ body.keys-open {
   flex-wrap: wrap;
   padding-top: 6px;
 }
+
+/* ------------------------------------------------ providers & models card
+   One list, every provider path. The URL line is monospace because it IS an
+   address — proportional text misreads `l`/`1` and `0`/`O` in a hostname. */
+/* The one bar: provider, model, effort. Laid out as a single row of labelled
+   controls rather than a stack of label-above-select pairs, because these three
+   are read together — the model list is the provider's, the effort applies to
+   whatever is picked. Wraps at narrow widths instead of overflowing; the
+   sidebar is 300px and a fixed row would clip the effort select. */
+.pt-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: flex-end;
+  margin-bottom: 6px;
+}
+.pt-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1 1 92px;
+  min-width: 0;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text2);
+  font-family: var(--font-display);
+}
+/* The base `select` rule puts `margin-top: 6px` and `width: 100%` on every
+   select in the app, which inside the bar leaves a floating 6px gap above each
+   control and forces the row to wrap. Reset here only. */
+.pt-field select {
+  margin-top: 0;
+  padding: 4px 6px;
+}
+.pt-toolbar .budget-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 0 0 72px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text2);
+  font-family: var(--font-display);
+}
+.pt-toolbar .budget-row select {
+  margin-top: 0;
+  padding: 4px 6px;
+}
+
+/* The two cards' split (index.html): the catalog card is key rows, the custom
+   card is an address + key + model id. Its fields are the bar's `.pt-field`
+   stacked one per line — the three go together, so none of them is `flex: 1 1
+   92px` beside another and wrapping mid-decision. */
+#custom-provider-card .pt-field {
+  flex: 1 1 100%;
+  margin-bottom: 6px;
+}
+#custom-provider-card .pt-field input {
+  margin-top: 0;
+  font-family: var(--font-mono);
+  text-transform: none;
+  letter-spacing: normal;
+}
+#custom-provider-card .api-key-row {
+  margin-top: 2px;
+}
+
+.pt-bar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 6px;
+}
+.pt-bar input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.pt-list {
+  list-style: none;
+  margin: 4px 0 0;
+  padding: 0;
+  max-height: 340px;
+  overflow-y: auto;
+}
+.pt-group {
+  margin-bottom: 8px;
+}
+.pt-group-title {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.65;
+  margin: 4px 0 2px;
+}
+.pt-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pt-row {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 4px 6px;
+  border-radius: var(--r-sm);
+  border-left: 2px solid transparent;
+}
+.pt-row:hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-left-color: currentColor;
+}
+/* The clickable row fills its <li>; the browser's default button chrome is
+   reset here rather than using a div, so keyboard focus and Enter work. */
+.pt-pick {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.pt-pick:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+.pt-model {
+  font-weight: 600;
+}
+.pt-muted {
+  opacity: 0.6;
+  font-weight: 400;
+}
+.pt-id,
+.pt-target {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  opacity: 0.7;
+  overflow-wrap: anywhere;
+}
+.pt-billing,
+.pt-blocked {
+  font-size: 11px;
+  opacity: 0.6;
+}
+/* A blocked row states the reason in the warning colour, but stays in the list:
+   hiding it would answer "what can I address" with a shorter list than reality. */
+.pt-blocked {
+  color: #f5a524;
+  opacity: 0.95;
+}
+.pt-empty {
+  opacity: 0.6;
+  font-size: 12px;
+  padding: 4px 6px;
+}
+
+/* ------------------------------------------------------------ daily line */
+.companion-line {
+  margin: 2px 0 6px;
+  line-height: 1.45;
+}
+.companion-row {
+  display: flex;
+  gap: 8px;
+}
+/* An 'action' message is something to do, so it reads a shade stronger than a
+   tip. Both are plain text — no badge, no colour that implies urgency. */
+#companion-card[data-kind='action'] .companion-line {
+  font-weight: 600;
+}
+/* Same author-stylesheet-beats-UA-stylesheet gotcha as .update-banner above:
+   .card's `display: grid` (or similar) outranks the UA sheet's
+   `[hidden] { display: none }`, so the card's initial `hidden` in index.html
+   would otherwise be a no-op. */
+#companion-card[hidden] {
+  display: none;
+}