@oharness/server 0.9.3 → 0.11.0

package/dist/page/style.js

@@ -96,7 +96,14 @@ body.inset-titlebar #side-top{-webkit-app-region:drag}
   width:236px;flex:0 0 236px;background:var(--panel);border-radius:12px;margin:0 8px 8px 0;
   display:flex;flex-direction:column;overflow:hidden;
 }
-#side-new{padding:0 8px 2px;display:flex;flex-direction:column}
+#side-new{padding:0 8px 2px;display:flex;align-items:center;gap:2px}
+#side-new #new{flex:1;min-width:0}
+#side-search{
+  display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border:0;border-radius:6px;
+  background:transparent;color:var(--dim);cursor:pointer;padding:0;
+}
+#side-search:hover{background:var(--hover);color:var(--fg)}
+#side-search .ico-sm{width:16px;height:16px}
 /* Folded away on a desktop, the whole sidebar goes, rail and all, and the
    page has the window: keeping the rail left a strip of chrome and pushed the
    tabs a rail's width plus the traffic lights in from the edge. */
@@ -161,6 +168,10 @@ aside header{display:none;padding:8px 14px;min-height:44px;gap:8px;align-items:c
 .fold .ico-sm{width:16px;height:16px;flex:0 0 auto;opacity:.5}
 .fold.open .ico-sm,.fold:hover .ico-sm{opacity:.9}
 .fold-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* A worktree hangs under the project it came from: indented by its icon's
+ * width, no rule or outline to say so. */
+.fold.wt{padding-left:24px;color:var(--dim)}
+.fold.wt.open,.fold.wt:hover{color:var(--fg)}
 /* The routine group's run count, where a project header keeps its actions. */
 .fold .count{flex:0 0 auto;font-size:11px;color:var(--dim);padding-right:4px}
 /* A gap between projects, but not above the first one. The selector names the
@@ -172,9 +183,13 @@ aside header{display:none;padding:8px 14px;min-height:44px;gap:8px;align-items:c
    edge, where the count and the ⋯ already live and a third thing would crowd
    them; dim, because it marks a row rather than asking for attention. */
 .pin-mark{
-  width:11px;height:11px;flex:0 0 auto;margin-left:5px;opacity:.5;
-  vertical-align:-1px;display:inline-block;
+  flex:0 0 auto;margin-left:3px;padding:2px;border-radius:4px;opacity:.5;
+  display:inline-grid;place-items:center;cursor:pointer;
 }
+.pin-mark svg{width:11px;height:11px;display:block}
+/* It is the unpin control, so it answers the pointer like one: full ink and a
+   fill on hover, the same as the ⋯ beside it. */
+.pin-mark:hover,.pin-mark:focus-visible{opacity:1;background:var(--sel);outline:none}
 /* Dragging: the row being carried fades, and the one under the pointer grows
    the edge it would be dropped against. A line on the row rather than a
    floating element, because this list is rebuilt on every repaint and a
@@ -257,7 +272,7 @@ aside header{display:none;padding:8px 14px;min-height:44px;gap:8px;align-items:c
    already had two rules in it and a third would have made a list of five
    entries look like three lists. */
 .row-menu .menu-head{
-  padding:9px 10px;margin-bottom:4px;border-radius:8px;background:var(--field);
+  padding:12px 12px 11px;margin-bottom:6px;border-radius:12px;background:var(--field);
 }
 /* A section label, not a surface: the fill belongs to the account's facts
    above, and on a one-word caption it read as a second card pressed against
@@ -265,6 +280,25 @@ aside header{display:none;padding:8px 14px;min-height:44px;gap:8px;align-items:c
 .row-menu .menu-head.menu-section{
   margin:10px 0 2px;padding:4px 10px;background:transparent;
 }
+/* The workspaces: a heading and its choices on one faint surface — lighter
+   than the account card above it, so the card stays the menu's one solid
+   thing and this reads as a quiet group rather than a second card. Inside,
+   the workspace in use carries a stronger fill, and hover sits between. */
+.row-menu .menu-choices{margin:8px 0 4px;padding:2px 4px 4px;border-radius:12px;background:color-mix(in srgb,var(--fg) 2%,transparent)}
+.row-menu .menu-choices .menu-head.menu-section{margin:4px 0 0;padding-left:6px}
+.row-menu .menu-choices .menu-item{border-radius:9px}
+.row-menu .menu-choices .menu-item:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
+.row-menu .menu-choices .menu-item.on{background:color-mix(in srgb,var(--fg) 6%,transparent)}
+.row-menu .menu-choices .menu-item.on .menu-label{font-weight:500}
+.row-menu .menu-choices .menu-section-action:hover,.row-menu .menu-choices .menu-section-action:focus-visible{background:color-mix(in srgb,var(--fg) 5%,transparent)}
+/* A section heading with its one action at the right: the label keeps the
+   caption type, the action does not — it is a button, not part of the name. */
+.row-menu .menu-section-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:4px}
+.menu-section-action{
+  height:22px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--dim);
+  font:inherit;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;
+}
+.menu-section-action:hover,.menu-section-action:focus-visible{background:var(--hover);color:var(--fg);outline:none}
 .menu-head-main{font-size:14px;font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
 .menu-head-sub{margin-top:2px;font-size:12px;color:var(--dim)}
 /* The billing card borrows .menu-head's surface but not its caption type: the
@@ -319,6 +353,15 @@ aside header{display:none;padding:8px 14px;min-height:44px;gap:8px;align-items:c
 .theme-btn:hover{color:var(--fg)}
 .theme-btn[aria-pressed="true"]{background:var(--bg);color:var(--fg)}
 .theme-btn .ico-sm{width:14px;height:14px}
+/* Under it, only while a custom theme is on: its name, and the way back. */
+.menu-custom-theme .menu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.custom-theme-actions{display:flex;gap:4px;flex:none}
+.custom-theme-btn{
+  height:24px;padding:0 8px;border:0;border-radius:6px;background:var(--field);color:var(--fg);
+  font:inherit;font-size:12px;cursor:pointer;
+}
+.custom-theme-btn:hover{background:var(--sel)}
+.custom-theme-btn:disabled{opacity:.4;cursor:default}
 /* The letter that does the same thing without the mouse. Dim, right-aligned,
    and only ever one character — a menu whose right edge is a column of chords
    is a keyboard reference, not a menu. */
@@ -329,6 +372,15 @@ aside header{display:none;padding:8px 14px;min-height:44px;gap:8px;align-items:c
 .row-menu .danger .menu-key{color:var(--dim)}
 /* A rule, not a gap: the group below it is the one that cannot be undone. */
 .row-menu .menu-sep{height:1px;margin:5px 8px;background:var(--line)}
+/* The + menu's groups are told apart by space alone: no rule between them,
+   the same way nothing in it is outlined. */
+#attach-picker .menu-sep{height:10px;margin:0;background:none}
+/* Each group of the + menu opens with its own heading; the ones after the
+   first get room above them, which is what sets the groups apart. */
+#attach-picker .menu-head:not(:first-child){padding-top:12px}
+/* Tall enough for all three groups at once; the list scrolls only on a short
+   window, not on every one. */
+#attach-picker .menu-body{max-height:min(72vh,560px)}
 /* Sized from the title it stands in for, so the row does not jump when a
    rename starts. */
 .session .title-edit{
@@ -445,27 +497,19 @@ main{flex:1;display:flex;flex-direction:column;min-width:0}
  * Same two shapes as the connector list: the vendor's own icon when the
  * server has one, and a lettered tile when it does not. Sized to the row —
  * the type is 13px, so the mark is 15px and not the 28px tile a card gets. */
-/* One block per vendor, whatever the vendor ships.
+/* The mark as the vendor drew it, on nothing.
  *
- * A column of these is scanned by its left edge, and the edge has to be the
- * same one every time. Left alone, it is not: a vendor shipping a tile fills
- * its square, a vendor shipping bare ink covers half of it, and one shipping
- * a thin outline covers less than that — the eye finds no common edge and
- * reads the lighter rows as hanging off the line, even where the boxes are
- * centred on the text to the pixel.
- *
- * So a mark that did not bring a background is given one: the same faint
- * fill, the same radius, the same inset. A mark that did bring one keeps it
- * and fills the box, because drawing a second shape around a shape is the
- * thing this is trying to avoid. Either way the block is identical and the
- * ink inside it is the vendor's business. */
-.vmark{width:15px;height:15px;flex:0 0 auto;border-radius:4px;object-fit:contain;
-  padding:1.5px;box-sizing:border-box;background:var(--sel)}
-.vmark.filled{padding:0;background:none}
+ * A faint tile under every bare mark once gave the column a common edge, but
+ * it also shrank the ink to two thirds of the box and put a grey square
+ * beside every name — in a list that is all one vendor, a column of the same
+ * grey squares. The box is still the same size on every row, so the marks
+ * still line up; the ink now fills it. A vendor that ships its own tile keeps
+ * it (.filled), since that tile is its mark. */
+.vmark{width:16px;height:16px;flex:0 0 auto;border-radius:3px;object-fit:contain;box-sizing:border-box}
 /* The fallback, and the reason a missing icon is not a broken row: a lettered
    tile in a colour of its own still tells two vendors apart at a glance. */
 .vmono{
-  width:15px;height:15px;flex:0 0 auto;border-radius:4px;box-sizing:border-box;
+  width:16px;height:16px;flex:0 0 auto;border-radius:4px;box-sizing:border-box;
   display:grid;place-items:center;color:#fff;
   font-size:9px;font-weight:600;letter-spacing:0;text-transform:uppercase;
 }
@@ -474,8 +518,7 @@ main{flex:1;display:flex;flex-direction:column;min-width:0}
 /* Typed as svg.vglyph so it outranks the .ico-sm every drawn icon carries:
    .6 is right for a chrome glyph and too faint for a vendor's mark. Ours is
    bare strokes, so it takes the same block as any other bare mark. */
-svg.vglyph{width:15px;height:15px;opacity:1;
-  padding:1.5px;box-sizing:border-box;border-radius:4px;background:var(--sel)}
+svg.vglyph{width:16px;height:16px;opacity:1;box-sizing:border-box}
 /* Black-on-transparent is what a good half of these vendors ship, and in the
    dark theme that is a black square on a black row. Inverted only where the
    bytes were measured to be exactly that. */
@@ -501,9 +544,6 @@ details.provider>summary .vmark,details.provider>summary .vmono,details.provider
 .pp-item .vmark,.pp-item .vmono,.pp-item .vglyph{
   width:20px;height:20px;border-radius:5px;font-size:11px;
 }
-details.provider>summary .vmark,.pp-item .vmark,
-details.provider>summary .vglyph,.pp-item .vglyph{padding:2.5px}
-details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
 .menu-head{
   padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;
   text-transform:uppercase;color:var(--dim);
@@ -564,18 +604,45 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
   justify-content:flex-end;flex-wrap:wrap;
 }
 /*
- * The context meter: how much of the model's window this session is using.
- *
- * Its own track colour rather than --line. Every other neutral token here is a
- * hairline at 6-10% alpha, which at 64x4 pixels disappears into the background
- * in both schemes — what was left read as a stray green dash rather than a bar
- * with something still to fill. The fill itself is set from the value (green,
- * then warn, then err) in applyState.
+ * The context meter: how much of the model's window this session is using,
+ * as a ring that fills clockwise. A ring rather than a bar because it sits in
+ * a row of words and has to read at a glance at the size of one; the numbers
+ * are in its tooltip. The sweep is a conic fill and the hole a mask, so there
+ * is no stroke anywhere. Its own track colour rather than --line, which at
+ * this size disappears into the background. --ctx-pct and --ctx-fill are set
+ * from the value in applyState.
  */
-#ctx{width:64px;height:4px;background:var(--track);border-radius:2px;overflow:hidden}
-#ctx i{display:block;height:100%;width:0;background:var(--ok);transition:width .3s}
+#ctx{
+  width:14px;height:14px;border-radius:50%;flex:0 0 auto;cursor:default;
+  background:conic-gradient(var(--ctx-fill,var(--brand)) calc(var(--ctx-pct,0) * 1%),var(--track) 0);
+  -webkit-mask:radial-gradient(circle,transparent 4.2px,#000 4.6px);
+  mask:radial-gradient(circle,transparent 4.2px,#000 4.6px);
+}
+#ctx{border:0;padding:0}
+/* Focus as a change of size, not a ring: this design draws no outlines. */
+#ctx{transition:transform .12s}
+#ctx:focus-visible,#ctx[aria-expanded="true"]{outline:none;transform:scale(1.2)}
+#ctx:hover{transform:scale(1.2)}
+/* The context panel. Every part is a strength of the brand colour: the two
+   things the model is given every turn lighter, the conversation full, as it
+   is the part a person can do something about. */
+:root{--ctx-system:color-mix(in srgb,var(--brand) 35%,transparent);--ctx-tools:color-mix(in srgb,var(--brand) 65%,transparent);--ctx-messages:var(--brand)}
+.ctx-panel{width:300px;min-width:0;padding:14px 14px 8px;gap:10px;font-size:12.5px}
+.ctx-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
+.ctx-title{font-weight:600;color:var(--fg)}
+.ctx-total{color:var(--dim);font-variant-numeric:tabular-nums}
+.ctx-bar{position:relative;display:flex;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
+.ctx-bar i{display:block;height:100%;flex:0 0 auto}
+.ctx-tick{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--warn)}
+.ctx-rows{display:flex;flex-direction:column;gap:5px}
+.ctx-row{display:flex;align-items:center;gap:8px}
+.ctx-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
+.ctx-label{flex:1;color:var(--fg)}
+.ctx-value{color:var(--dim);font-variant-numeric:tabular-nums}
+.ctx-notes{display:flex;flex-direction:column;gap:2px;color:var(--dim);font-size:11.5px;line-height:1.5}
+.ctx-compact{margin:0 -8px}
 #ctx,#ctxtext{display:none}
-#meta.has-ctx #ctx,#meta.has-ctx #ctxtext{display:block}
+#meta.has-ctx #ctx{display:block}
 
 /*
  * Over the transcript, not over the whole window.
@@ -672,7 +739,12 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
  * "position:relative" is what #jump anchors to; it belongs over this column
  * rather than over the drawer.
  */
-#main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
+#main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;isolation:isolate}
+/* The dot field behind a new session (client/ripple.ts). Under everything in
+   #main — isolation makes #main the floor it sits on — and deaf to the
+   pointer, so it only ever watches clicks go by. */
+#ripple{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease}
+#ripple.on{opacity:1}
 #log{flex:1;overflow-y:auto;padding:20px 16px;scroll-behavior:smooth;min-width:0}
 /*
  * Models, Routines and Settings are views, not messages. They used to be
@@ -856,6 +928,87 @@ body.browser-resizing #browser-pane{transition:none}
 }
 #browser-pane.live #browser-frame{cursor:crosshair}
 .browser-idle{margin:auto;text-align:center;max-width:32ch}
+/* The Computer card: the window the agent is working in, floating over the
+   conversation's top-right corner while a turn works in it. Filled surfaces
+   and a shadow, no outline — the menus' elevation, since it sits above the
+   page the same way. The picture is letterboxed; the agent's cursor and its
+   click ripples sit over it in the conversation's accent. */
+#computer-float{
+  position:absolute;z-index:30;top:52px;right:16px;width:340px;
+  transition:width .18s ease;cursor:grab;touch-action:none;
+}
+#computer-float[hidden]{display:none}
+/* Larger, to read the window rather than glance at it. */
+#computer-float.big{width:min(62%,880px)}
+#computer-float.dragging{transition:none;user-select:none;cursor:grabbing}
+/* The picture is the card: its corners, its shadow, and the window's own
+   proportions (set from the stream in computer.ts), so nothing frames it —
+   no bar above it, no fill around it, no bands at its sides. */
+#computer-body{
+  aspect-ratio:16/10;max-height:70vh;position:relative;overflow:hidden;border-radius:12px;
+  /* Opaque, never --field: that is a 2% wash, and with no picture to fill the
+     card (no Screen Recording, a minimised window) the conversation behind it
+     showed through under the message. --panel laid over --bg, so a theme
+     whose panel is translucent still gets a solid card. */
+  background:linear-gradient(var(--panel),var(--panel)),var(--bg);box-shadow:0 1px 2px #0000001a,0 10px 30px #00000033;
+}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #computer-body{box-shadow:0 1px 2px #0000004d,0 10px 30px #00000080}}
+:root[data-theme="dark"] #computer-body{box-shadow:0 1px 2px #0000004d,0 10px 30px #00000080}
+/* Over the picture: a pill naming the app on the left, round buttons on the
+   right. Translucent dark in both themes, since what is under them is
+   somebody else's window, light or dark. The buttons come up with the
+   pointer, so a card nobody is reaching for is all picture. */
+#computer-head{
+  position:absolute;z-index:2;top:8px;left:8px;right:8px;
+  display:flex;align-items:center;gap:6px;pointer-events:none;
+}
+#computer-label{
+  display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;margin-right:auto;
+  height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;color:#fff;
+  background:#000000a6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
+}
+#computer-live{width:6px;height:6px;flex:0 0 auto;display:grid;place-items:center}
+#computer-live[hidden]{display:none}
+#computer-live i,#computer-pill i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:computer-pulse 1.6s ease-in-out infinite}
+#computer-pill i{width:7px;height:7px}
+@keyframes computer-pulse{50%{opacity:.35}}
+#computer-where{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+#computer-head button{
+  pointer-events:auto;width:28px;height:28px;padding:0;border:0;border-radius:50%;flex:0 0 auto;
+  display:grid;place-items:center;cursor:pointer;color:#fff;
+  background:#000000a6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
+  opacity:0;transition:opacity .15s,background .15s;
+}
+#computer-float:hover #computer-head button,#computer-head button:focus-visible{opacity:1}
+@media (hover:none){#computer-head button{opacity:1}}
+#computer-head button:hover{background:#000000d9}
+#computer-head button svg{width:13px;height:13px}
+#computer-stop:hover{background:#c62828e6!important}
+#computer-stop svg{width:11px!important;height:11px!important}
+.computer-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
+.computer-cursor{position:absolute;left:0;top:0;width:22px;height:22px;opacity:0;pointer-events:none;transition:transform .26s cubic-bezier(.3,.7,.2,1),opacity .3s}
+.computer-cursor.on{opacity:1}
+.computer-cursor svg{width:22px;height:22px;display:block;filter:drop-shadow(0 1px 2px #00000059)}
+.computer-cursor path{fill:var(--brand);stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
+.computer-ring{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:color-mix(in srgb,var(--brand) 35%,transparent);pointer-events:none;animation:computer-ring .5s ease-out forwards}
+@keyframes computer-ring{from{transform:scale(.3);opacity:.9}to{transform:scale(1.5);opacity:0}}
+.computer-empty{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--dim);font-size:12.5px}
+.computer-empty[hidden],.computer-empty:empty{display:none}
+/* Folded: where it is working, one click from the card again. */
+#computer-pill{
+  position:absolute;z-index:30;top:52px;right:16px;max-width:280px;
+  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;
+  border:0;border-radius:999px;background:var(--panel);color:var(--fg);font:inherit;font-size:12px;cursor:pointer;
+  box-shadow:0 1px 2px #0000000f,0 4px 14px #0000001f;
+}
+#computer-pill[hidden]{display:none}
+#computer-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#computer-pill:hover{background:var(--hover)}
+.att.computer .n.clickable{cursor:pointer}
+@media (max-width:900px){
+  #computer-float,#computer-float.big{width:calc(100% - 24px);right:12px}
+}
+.embed #computer-float,.embed #computer-pill{display:none!important}
 /* One column at a time on a narrow window: two would leave neither readable. */
 #browser-hide .ico-x{display:none}
 #browser-scrim{display:none}
@@ -928,7 +1081,16 @@ body.panelled #composer,body.panelled #jump,body.panelled #changes-btn{display:n
 #explorer-actions button:hover{background:var(--hover);color:var(--fg)}
 #explorer-actions svg{width:15px;height:15px}
 #explorer-body{flex:1;display:flex;min-height:0}
-#explorer-tree{width:var(--explorer-tree-width,min(40%,260px));flex:0 0 auto;overflow:auto;padding:2px 6px 12px}
+#explorer-side{width:var(--explorer-tree-width,min(40%,260px));flex:0 0 auto;display:flex;flex-direction:column;min-height:0}
+#explorer-find{
+  display:flex;align-items:center;gap:6px;margin:2px 8px 6px;padding:0 8px;height:30px;border-radius:8px;
+  background:var(--hover);color:var(--dim);cursor:text;
+}
+#explorer-find svg{width:13px;height:13px;flex:0 0 auto}
+#explorer-q{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);font:inherit;font-size:12.5px;padding:0}
+#explorer-q::-webkit-search-cancel-button{cursor:pointer}
+#explorer-tree{flex:1;min-height:0;overflow:auto;padding:2px 6px 12px}
+.explorer-dir{color:var(--dim);font-size:11.5px;margin-left:6px;overflow:hidden;text-overflow:ellipsis;min-width:0;direction:rtl;text-align:left}
 /* The line between the tree and the file, and the handle that moves it: a
    gap wide enough to grab, drawn only while it is being pointed at. */
 #explorer-split{flex:0 0 7px;margin:0 -3px;position:relative;z-index:1;cursor:col-resize;touch-action:none;outline:0}
@@ -1204,7 +1366,11 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
  * positioned from the viewport instead and reuses only the surface styling.
  */
 .menu.pop{position:fixed;bottom:auto;left:auto;min-width:220px}
-#log{padding:28px 24px 8px}
+/* The scrollbar's gutter is kept on both sides, and the composer below gives
+   up the same width on each side (see #composer), so a message and the box it
+   was typed in share both edges at every window width. Taken from one side
+   only, it pushed every message half a scrollbar left of the box. */
+#log{padding:28px 24px 8px;scrollbar-gutter:stable both-edges}
 /*
  * One column width, named once.
  *
@@ -1239,6 +1405,52 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
  * they are answering. */
 .connection-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:2px}
 .connection-card .err{color:var(--fg)}
+/* A theme the agent proposed. The swatches are the proposal's colours, not the
+   page's, so each carries a hairline that reads on both. */
+.theme-card-head{display:flex;align-items:center;gap:10px}
+.theme-card-name{font-weight:600;font-size:13.5px;flex:1;min-width:0}
+.theme-card-status{font-size:12px;color:var(--dim)}
+.theme-card-status.applied{color:var(--ok)}
+.theme-swatches{display:flex;flex-direction:column;gap:6px}
+.theme-swatch-row{display:flex;align-items:center;gap:6px}
+.theme-swatch-label{width:44px;font-size:12px;color:var(--dim)}
+.theme-swatch{width:22px;height:22px;border-radius:999px;box-shadow:inset 0 0 0 1px #8888884d}
+.theme-report{display:flex;flex-direction:column;gap:2px}
+.theme-report-title{font-size:12px;font-weight:600;color:var(--dim)}
+.theme-report-line{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dim);overflow-wrap:anywhere}
+button.ghost.theme-apply{background:var(--accent);color:var(--bg)}
+button.ghost.theme-apply:hover{background:var(--accent);opacity:.88}
+button.ghost.theme-apply:disabled{opacity:.4;cursor:default}
+.connection-card p.theme-safe-hint{font-size:12px}
+.theme-images{display:flex;flex-wrap:wrap;gap:8px}
+.theme-image{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--dim)}
+.theme-image img{width:72px;height:48px;object-fit:cover;border-radius:6px;box-shadow:inset 0 0 0 1px #8888884d;background:var(--bg)}
+
+/* Image slots a theme can fill (user-theme.ts). The theme sets only the
+   custom properties; these rules decide where each image goes, and every one
+   of them is decoration: nothing here takes clicks or covers anything.
+
+   The conversation background is the scroll container's own background, so it
+   stays put while messages scroll over it and cannot cover them. A layer of
+   the page colour sits on top of it, at the theme's scrim or at the minimum
+   the page measured for readable text (client/theme.ts), whichever is more. */
+#log{
+  --wall-cover:color-mix(in srgb,var(--bg) max(var(--wall-scrim,0%),var(--wall-scrim-min,0%)),transparent);
+  background-color:var(--wall-base,transparent);
+  background-image:linear-gradient(var(--wall-cover),var(--wall-cover)),var(--wall-image,none);
+  background-size:100% 100%,var(--wall-size,auto);
+  background-repeat:no-repeat,var(--wall-repeat,no-repeat);
+  background-position:0 0,var(--wall-position,center);
+  background-blend-mode:var(--wall-blend,normal);
+}
+#empty-art{
+  display:var(--empty-art-display,none);height:var(--empty-art-height,180px);max-width:100%;margin:0 0 24px;
+  background:var(--empty-art,none) var(--empty-art-position,left center)/contain no-repeat;pointer-events:none;
+}
+.turn.assistant>.who::before{
+  content:"";display:var(--avatar-display,none);width:20px;height:20px;margin-right:8px;vertical-align:-6px;
+  border-radius:var(--avatar-radius,999px);background:var(--avatar,none) center/cover no-repeat;
+}
 
 /* A question from the agent, in the transcript rather than a modal: answering
  * may take a look back up the conversation, which a modal would cover. Options
@@ -1312,6 +1524,8 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
   max-width:220px;max-height:160px;border-radius:8px;cursor:zoom-in;
   background:var(--bg);object-fit:cover;
 }
+/* A clip a little larger than a picture, since it is watched, not glanced at. */
+.user .shots video{max-width:min(320px,100%);max-height:200px;border-radius:8px;background:#000;display:block}
 .user{margin-bottom:18px}
 .panel{max-width:720px;margin:8px auto 0}
 .panel-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding-block:48px;font-size:13px}
@@ -1517,6 +1731,15 @@ details.setting>summary:focus-visible{outline:none;background:var(--hover)}
 .section-title{
   font-size:13px;font-weight:600;color:var(--dim);margin:22px 0 8px;letter-spacing:.01em;
 }
+/* Advanced folds under its heading; the heading is the only control, with the
+   same chevron a settings row turns. */
+details.settings-advanced>summary.section-title{
+  display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;width:max-content;
+}
+details.settings-advanced>summary::-webkit-details-marker{display:none}
+details.settings-advanced>summary:hover{color:var(--fg)}
+details.settings-advanced>summary:focus-visible{outline:none;color:var(--fg)}
+details.settings-advanced[open]>summary .chev{transform:rotate(90deg)}
 /*
  * The window picker, and the chart under it.
  *
@@ -1529,10 +1752,20 @@ details.setting>summary:focus-visible{outline:none;background:var(--hover)}
 /* A segmented choice on a settings row sits in the row's line, like a switch. */
 .setting summary .setting-seg{margin:0 0 0 auto;flex:none}
 .setting summary .setting-seg .seg-item{padding:3px 10px;font-size:12px}
+/* A row with several controls opens onto parts, each a name and its control on one line. */
+.setting-part+.setting-part{margin-top:16px}
+.setting-part>*+*{margin-top:6px}
+.setting-part-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
+.setting-part-name{font-weight:500;font-size:13px}
+.setting-part .setting-seg{margin:0;flex:none}
+.setting-part .setting-seg .seg-item{padding:3px 10px;font-size:12px}
 /* Whether something a row depends on is there: a dot and a sentence. */
 .setting-status{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--dim)}
 .status-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--dim);opacity:.6}
 .status-dot.ok{background:var(--ok);opacity:1}
+/* A paired phone: its name, when, and the way to forget it, on one line. */
+.remote-phone{display:flex;align-items:center;gap:10px;min-height:28px}
+.remote-phone .remote-phone-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* The presets and the calendar on one line, on the same baseline. */
 .usage-window{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 .usage-kind-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
@@ -1791,13 +2024,41 @@ details.provider>summary:hover{background:var(--hover)}
  * with it. */
 .row-head .ghost+.ghost,.row-head .ghost+.switch,.row-head .switch+.ghost{margin-left:0}
 .routine-where{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
-.routine-history{margin-top:6px}
-.routine-history>summary{cursor:pointer;width:max-content}
-.routine-runs{display:flex;flex-direction:column;gap:2px;margin-top:6px}
-.routine-run{display:flex;gap:10px;align-items:baseline;text-align:left;border:0;background:transparent;color:var(--fg);font:inherit;padding:4px 6px;border-radius:6px}
-button.routine-run{cursor:pointer}
-button.routine-run:hover{background:var(--hover)}
-.routine-run.failed{color:var(--err)}
+.routine-history{margin-top:8px}
+.routine-history-head{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;
+  font:inherit;cursor:pointer;padding:3px 6px;margin:0 -6px 4px;border-radius:6px}
+.routine-history-head:hover{background:var(--hover);color:var(--fg)}
+.routine-history-head .chev{display:inline-block;transition:transform .15s;font-size:10px}
+.routine-history.folded .chev{transform:rotate(-90deg)}
+.routine-history.folded .routine-runs{display:none}
+.routine-runs{display:flex;flex-direction:column;gap:2px}
+/* Each run a quiet row that lights on hover: status, time, facts on one line,
+   and the first line of what it said beneath. No rules between them. */
+.routine-run{display:flex;flex-direction:column;gap:3px;text-align:left;border:0;background:transparent;
+  color:var(--fg);font:inherit;font-size:12.5px;padding:7px 8px;margin:0 -8px;border-radius:8px;min-width:0}
+.routine-run[role=button]{cursor:pointer}
+.routine-run[role=button]:hover,.routine-run.open{background:var(--hover)}
+.routine-run:focus-visible{outline:none;background:var(--hover)}
+.routine-run-detail{display:none;flex-direction:column;align-items:flex-start;gap:8px;margin-top:4px;cursor:default}
+.routine-run.open .routine-run-detail{display:flex}
+.routine-run.open:not(.running) .routine-run-text{display:none}
+.routine-run-full{word-break:break-word;max-height:360px;overflow:auto;width:100%;
+  line-height:1.55;user-select:text;color:var(--fg);font-size:13px}
+.routine-run-full.err{color:var(--err);white-space:pre-wrap}
+.routine-run-full.md>:first-child{margin-top:0}
+.routine-run.running .routine-run-text{color:var(--fg)}
+.routine-run-top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
+.routine-run-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
+.routine-run-text.err{color:var(--err)}
+.run-status{font-size:11px;font-weight:550;padding:1px 8px;border-radius:999px;flex:0 0 auto}
+.run-status.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
+.run-status.failed{color:var(--err);background:color-mix(in srgb,var(--err) 14%,transparent)}
+.run-status.skipped{color:var(--dim);background:var(--hover)}
+.run-status.running{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
+.run-status.running::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
+  background:currentColor;margin-right:5px;vertical-align:1px;animation:run-pulse 1.2s ease-in-out infinite}
+@keyframes run-pulse{50%{opacity:.25}}
+.routine-more{align-self:flex-start;margin-top:4px}
 .small{font-size:12px;white-space:pre-wrap;word-break:break-all}
 .keyrow{display:flex;gap:6px;margin:8px 0 6px}
 .keyrow input{
@@ -1872,8 +2133,15 @@ button.routine-run:hover{background:var(--hover)}
   flex:1;min-width:0;
   font-size:12px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 }
-#account .acct-caret{width:12px;height:12px;flex:0 0 auto;opacity:.45}
-.account-btn:hover .acct-caret,#account .account-btn.menu-open .acct-caret{opacity:.8}
+/* One chevron, pointing the way the menu opens — up, from the foot of the
+   sidebar — and turning down while it is open. The ⇕ it replaced is a
+   select box's sign, and this row opens a menu, not a list of choices. */
+#account .acct-caret{
+  width:14px;height:14px;flex:0 0 auto;margin-right:2px;opacity:.4;
+  transform:rotate(180deg);transition:transform .18s ease,opacity .12s ease;
+}
+.account-btn:hover .acct-caret{opacity:.75}
+#account .account-btn.menu-open .acct-caret{opacity:.75;transform:none}
 #account .avatar{
   width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
   overflow:hidden;background:var(--accent);color:var(--bg);font-size:11px;font-weight:600;
@@ -1906,6 +2174,54 @@ button.signin-site:disabled{opacity:.4;cursor:default}
 #browser-import-dialog .dlg-actions{padding:16px 22px 20px}
 #browser-import-dialog .dlg-actions button:disabled{opacity:.4;cursor:default}
 #browser-import-dialog input[type=text]{height:38px;padding:0 13px;font-size:13px}
+/* Feedback. Same frame as the import dialog; the kind is a row of fills, the
+   chosen one taking the selection fill rather than a ring. */
+#feedback-dialog{width:min(520px,94vw);max-width:min(520px,94vw)}
+#feedback-dialog .cn-head{padding:20px 22px 2px}
+#feedback-dialog .cn-body{padding:14px 22px 4px;gap:10px}
+#feedback-dialog .dlg-actions{padding:16px 22px 20px}
+#feedback-dialog .dlg-actions button:disabled{opacity:.4;cursor:default}
+#feedback-dialog textarea{width:100%;box-sizing:border-box;min-height:140px;padding:11px 13px;border:0;border-radius:10px;outline:none;background:var(--field);color:var(--fg);font:inherit;font-size:13px;line-height:1.55;resize:vertical}
+#feedback-dialog textarea:focus-visible{background:var(--hover)}
+.fb-kinds{display:flex;gap:4px}
+.fb-kind{height:30px;padding:0 13px;border:0;border-radius:999px;background:var(--field);color:var(--dim);font:inherit;font-size:12.5px;cursor:pointer}
+.fb-kind:hover{background:var(--hover);color:var(--fg)}
+.fb-kind.on{background:var(--sel);color:var(--fg);font-weight:550}
+.fb-note{margin:0;font-size:11.5px;color:var(--dim);line-height:1.5}
+.fb-note:empty{display:none}
+/* Attachments as square tiles in a row, the last one adding another. Fills
+   only: the add tile is a softer fill, not a dashed outline. */
+.fb-media{display:flex;flex-wrap:wrap;gap:8px}
+.fb-tile{position:relative;width:76px;height:76px;flex:0 0 auto;border-radius:14px;overflow:hidden;background:var(--field)}
+.fb-thumb{display:block;width:100%;height:100%;object-fit:cover}
+.fb-tile.is-video .fb-thumb{background:#000}
+/* A play mark over a recording's first frame, so it reads as video at a glance. */
+.fb-play{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(6px)}
+.fb-play::after{content:"";position:absolute;left:10px;top:8px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
+.fb-remove{
+  position:absolute;top:5px;right:5px;width:20px;height:20px;padding:0;border:0;border-radius:50%;
+  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;font-size:14px;line-height:20px;text-align:center;cursor:pointer;
+  opacity:.9;transition:opacity .15s,background .15s;
+}
+.fb-remove:hover{opacity:1;background:rgba(0,0,0,.75)}
+.fb-remove:disabled{display:none}
+.fb-tile.is-uploading::before,.fb-tile.is-done::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
+.fb-spinner{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
+  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:fb-spin .8s linear infinite}
+@keyframes fb-spin{to{transform:rotate(360deg)}}
+.fb-done{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;color:#111;font-size:12px;font-weight:700;line-height:22px;text-align:center}
+.fb-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border:0;color:var(--dim);font:inherit;cursor:pointer;transition:background .15s,color .15s}
+.fb-add:hover,.fb-add:focus-visible{background:var(--hover);color:var(--fg);outline:none}
+.fb-add .fb-add-icon{width:20px;height:20px}
+.fb-add-label{font-size:11.5px;font-weight:500}
+/* Beside the tiles, centred on them: what goes here and the limits. It takes
+   the rest of the row and drops below the tiles when the row is full. */
+.fb-media{align-items:center}
+.fb-caption{display:flex;flex-direction:column;gap:3px;flex:1;min-width:170px;padding-left:4px}
+.fb-caption-title{font-size:12.5px;font-weight:500;color:var(--fg)}
+.fb-caption-sub{font-size:11.5px;color:var(--dim);line-height:1.45}
+/* Something is being dragged over: the whole dialog is the target, said with a fill. */
+#feedback-dialog.fb-dropping{background:var(--sel)}
 .bi-label{font-size:12px;color:var(--dim)}
 .bi-sites{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto}
 .bi-site{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;background:var(--field);cursor:pointer}
@@ -1990,6 +2306,23 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 }
 .pw-tab:hover{color:var(--fg)}
 .pw-tab.on{background:var(--bg);color:var(--fg);font-weight:500}
+.pw-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px}
+/* The site's badge on the same tab, at this dialog's size. */
+.pw-tab-save{
+  font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;
+  background:var(--fg);color:var(--bg);font-variant-numeric:tabular-nums;
+}
+/* Twelve months at the monthly price, struck, just left of what the year costs. */
+.pw-was{color:var(--dim);font-weight:400;margin-right:6px;text-decoration-thickness:1px}
+/* What the credits reach: a quiet heading, then one row per kind of model —
+   the kind in a narrow column, its marks and names beside it. */
+.pw-media{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px 14px;font-size:12.5px}
+.pw-media-head{grid-column:1/-1;color:var(--dim);font-size:11.5px}
+.pw-media-kind{color:var(--dim);white-space:nowrap}
+.pw-media-models{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
+.pw-media-model{display:inline-flex;align-items:center;gap:5px;color:var(--fg);font-weight:500;white-space:nowrap}
+.pw-media-mark{display:inline-flex;width:14px;height:14px}
+.pw-media-mark svg{width:100%;height:100%}
 /* A labelled break, not a rule: what follows is a different kind of purchase,
    and a bare line would read as the list simply continuing. */
 .pw-sep{
@@ -2098,7 +2431,7 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 #browse-list{overflow-y:auto;padding:4px 8px;flex:1}
 #browse-here{display:block;padding:2px 4px;color:var(--dim);word-break:break-all}
 #project-picker[open]{display:flex;flex-direction:column}
-#proj-list{overflow-y:auto;padding:4px 8px}
+#proj-list{overflow-y:auto;overflow-x:hidden;padding:4px 8px}
 .proj-foot{padding:4px 8px 10px;box-shadow:0 -1px 0 var(--line)}
 .proj-item{
   width:100%;display:flex;align-items:center;gap:9px;border:0;border-radius:8px;
@@ -2123,41 +2456,56 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 .fold-row .fold-new{margin-right:2px}
 .fold-row .more:hover,.fold-row .fold.menu-open ~ .more:last-child{background:var(--sel);color:var(--fg)}
 .fold-row .more .ico-sm{width:14px;height:14px;opacity:1}
-.proj-row{display:flex;align-items:center;border-radius:8px}
-.proj-row:hover{background:var(--hover)}
+/* A project row: name over its directory, a tick on the one this window is
+   in, and everything else behind ··· — rename, export and forget are rare,
+   and three icons on every row read as a list of things to do to it. The lit
+   row is the one Enter opens, moved by the arrows or the pointer alike. */
+.proj-row{display:flex;align-items:center;gap:2px;border-radius:10px;padding-right:6px}
+.proj-row.active,.proj-row.menu-open{background:var(--hover)}
 .proj-row .proj-item:hover{background:transparent}
-.proj-forget{
-  border:0;background:transparent;color:var(--dim);font:inherit;font-size:13px;
-  cursor:pointer;padding:6px 9px;border-radius:8px;opacity:0;flex:none;
-}
-.proj-row:hover .proj-forget,.proj-forget:focus-visible{opacity:1}
-.proj-forget:hover{background:var(--sel);color:var(--fg)}
+.proj-row .proj-item{flex:1;width:auto;min-width:0;padding:7px 8px}
+.proj-row .avatar{flex:none}
+.proj-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
+.proj-text .path{flex:none;font-weight:500}
+.proj-dir{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.proj-item .tag{flex:none}
+.proj-check{flex:none;width:16px;height:16px;display:grid;place-items:center;color:var(--fg)}
+.proj-check svg{width:14px;height:14px}
+.proj-more{
+  flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:7px;
+  background:transparent;color:var(--dim);cursor:pointer;opacity:0;
+}
+.proj-more svg{width:14px;height:14px}
+.proj-row.active .proj-more,.proj-row.menu-open .proj-more,.proj-more:focus-visible{opacity:1}
+.proj-more:hover,.proj-row.menu-open .proj-more{background:var(--sel);color:var(--fg)}
+.proj-empty{padding:18px 8px;text-align:center;color:var(--dim);font-size:13px}
 /* The command palette.
  *
  * The sidebar shows five sessions per project and folds the rest away, which
  * is right for browsing and wrong for "the one about the parser, two days
  * ago". So this is a search field over every session in every tree opened
  * here, the projects themselves, and the few actions worth a shortcut. */
-#palette{width:min(560px,92vw);max-height:min(60vh,520px)}
+#palette{width:min(600px,92vw);max-height:min(64vh,560px)}
 #palette[open]{display:flex;flex-direction:column}
 /* One left edge for everything: the field's magnifier, each row's icon, the
-   group labels and the key hints all start 22px in, and the field's text
-   starts where the row labels do. Rows sit 8px in so their highlight has room;
+   group labels and the key hints all start 26px in, and the field's text
+   starts where the row labels do. Rows sit 12px in so their highlight has room;
    their own 14px padding brings the content back to the shared edge. */
-.cmdk-head{position:relative;padding:12px 12px 8px}
-.cmdk-head .ico-sm{position:absolute;left:22px;top:calc(50% - 5.5px);pointer-events:none}
-#palette .cmdk-head input{height:40px;padding:0 10px 0 35px;font-size:14px}
-#cmdk-list{overflow-y:auto;padding:0 8px 8px;flex:1;scroll-padding-block:4px}
+.cmdk-head{position:relative;padding:16px 16px 10px}
+.cmdk-head .ico-sm{position:absolute;left:26px;top:calc(50% - 4.5px);pointer-events:none}
+#palette .cmdk-head input{height:42px;padding:0 12px 0 35px;font-size:14px}
+#cmdk-list{overflow-y:auto;padding:0 12px 12px;flex:1;scroll-padding-block:6px}
 .cmdk-group{
-  padding:12px 14px 5px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
+  padding:16px 14px 6px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
   color:var(--dim);
 }
-.cmdk-group:first-child{padding-top:6px}
+.cmdk-group:first-child{padding-top:8px}
 .cmdk-item{
   width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:8px;
   background:transparent;color:var(--fg);font:inherit;font-size:13px;cursor:pointer;
-  padding:8px 14px;text-align:left;
+  padding:10px 14px;text-align:left;
 }
+.cmdk-item + .cmdk-item{margin-top:2px}
 /* Hover and the keyboard cursor are the same highlight: a list driven by both
    at once needs one answer to "which row does Enter take". */
 .cmdk-item.cursor{background:var(--sel)}
@@ -2169,8 +2517,7 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 }
 .cmdk-empty{padding:12px 14px;font-size:12.5px;color:var(--dim)}
 .cmdk-foot{
-  display:flex;gap:16px;padding:9px 22px 11px;font-size:11px;color:var(--dim);
-  box-shadow:0 -1px 0 var(--line);
+  display:flex;gap:18px;padding:10px 26px 16px;font-size:11px;color:var(--dim);
 }
 .cmdk-foot kbd{
   font:inherit;font-size:10.5px;border:1px solid currentColor;border-radius:4px;
@@ -2190,7 +2537,10 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 #connect:has(#cn-aside:not([hidden])){width:min(760px,94vw)}
 .cn-grid{display:grid;grid-template-columns:1fr}
 #connect:has(#cn-aside:not([hidden])) .cn-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
+/* The sidebar's bare aside rule (a fixed width, contents pinned right) would
+ * otherwise reach this one too, and set the wordmark against the divider. */
 .cn-aside{
+  width:auto;flex:initial;align-items:stretch;
   display:flex;flex-direction:column;gap:20px;padding:30px 28px;
   background:var(--hover);border-right:1px solid var(--line);
   border-radius:16px 0 0 16px;
@@ -2268,6 +2618,18 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
  * the one thing the window exists for and stands over a 42px field. */
 .cn-body button.signin-site{height:44px;border-radius:10px;font-size:14px;font-weight:550}
 .cn-note .mono{white-space:nowrap}
+/* A vendor's mark beside its name, at the title's cap height. */
+.cn-title{display:flex;align-items:center;gap:10px}
+.cn-title .cn-title-mark{width:24px;height:24px;flex:0 0 auto;border-radius:6px}
+/* A link-weight action inside a note: words to press, not another button. */
+.small button.cn-inline,.cn-note button.cn-inline{
+  border:0;background:none;padding:0;font:inherit;color:var(--fg);
+  font-weight:550;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
+}
+.small button.cn-inline:hover,.cn-note button.cn-inline:hover{opacity:.75}
+/* Only the sign-in: no actions row, so the body closes the dialog itself. */
+#connect.cn-keyless .dlg-actions{display:none}
+#connect.cn-keyless .cn-body{padding-bottom:24px;gap:14px}
 .cn-local{display:flex;gap:6px;align-items:flex-start}
 .cn-local .ico-sm{width:13px;height:13px;flex:0 0 auto;margin-top:1.5px;color:var(--fg)}
 .cn-local strong{color:var(--fg);font-weight:600}
@@ -2347,6 +2709,10 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
    three sentences side by side either wrap mid-phrase or shrink the type. Down
    the page they read as a short list of offers, which is what they are. */
 #starters{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
+/* A rotated or newly written set gets a short fade, so the change is seen
+   rather than noticed as a flicker. */
+#starters.fresh button{animation:starters-in .35s ease-out both}
+@keyframes starters-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
 #starters button{
   border:0;background:var(--panel);color:var(--fg);border-radius:999px;
   padding:8px 15px;font:inherit;font-size:13px;cursor:pointer;text-align:left;
@@ -2424,6 +2790,48 @@ details.tool>summary:hover::after{opacity:1}
 .tool-body{padding:2px 12px 10px}
 .tool-body pre{margin:0;overflow-x:auto;font-size:12px;max-height:340px}
 .tool-body .label{font-size:11px;color:var(--dim);margin:0 0 4px}
+/* The screenshots a tool took, under its result: the same thumbnail as a
+   pasted image, a click away from full size. */
+.tool-shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
+.tool-shots img{
+  max-width:220px;max-height:160px;border-radius:8px;cursor:zoom-in;
+  background:var(--bg);object-fit:cover;
+}
+/* The windows and browser tabs a turn ended on: the result, so out in the turn
+   rather than folded into a step, and a little larger than a step's shots. */
+/* Five across, the count fitTurnShots shows; three on a phone, as two rows. */
+.turn-shots{
+  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;
+  margin:10px 0 4px;
+}
+@media (max-width:600px){.turn-shots{grid-template-columns:repeat(3,minmax(0,1fr))}}
+.turn-shot{margin:0;display:flex;flex-direction:column;gap:5px;min-width:0}
+.turn-shot[hidden]{display:none}
+.turn-shot-frame{position:relative}
+.turn-shot img{
+  display:block;width:100%;aspect-ratio:16/10;border-radius:8px;cursor:zoom-in;
+  background:var(--bg);object-fit:cover;object-position:top;
+}
+/* The pictures past the row, counted on its last one: a click opens the
+   preview there, and the arrow keys go on through the rest. */
+.turn-shot-more{
+  position:absolute;inset:0;border:0;border-radius:8px;cursor:zoom-in;
+  background:rgba(0,0,0,.55);color:#fff;font-size:18px;font-weight:600;
+}
+.turn-shot-more:hover{background:rgba(0,0,0,.45)}
+.turn-shot figcaption{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* The preview: the image as large as the window allows, over a dark scrim.
+   Dark in both themes — a screenshot reads against black, not the page. */
+.img-preview{
+  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:32px;
+  background:rgba(0,0,0,.82);cursor:zoom-out;
+}
+.img-preview img{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain}
+.img-preview-count{
+  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
+  color:#fff;font-size:12px;opacity:.7;
+}
+.img-preview-count:empty{display:none}
 .tool-body .kv{margin:0 0 8px}
 .tool-summary{font-size:12.5px;line-height:1.5;margin:0 0 6px}
 details.tool-raw>summary{font-size:11px;color:var(--dim);cursor:pointer;margin:0 0 4px}
@@ -2547,6 +2955,8 @@ details.thinking[open]>summary::after{transform:translateY(-2px) rotate(45deg)}
 
 /* composer */
 form{padding:6px 24px 18px;background:var(--bg)}
+/* 24px plus the 11px the transcript's scrollbar gutter takes on each side. */
+@media (min-width:761px){#composer{padding-left:35px;padding-right:35px}}
 .composer{
   position:relative;
   max-width:720px;margin:0 auto;border-radius:16px;
@@ -2650,6 +3060,9 @@ textarea::placeholder{color:var(--dim)}
   color:var(--dim);
 }
 #input-mirror mark .at svg{width:11px;height:11px;display:block;margin-left:.5px}
+/* The rest of the suggested message, after what has been typed of it: the
+   placeholder's colour, since it is the same offer, half taken. */
+#input-mirror .ghost{color:var(--dim)}
 /* The mirror sits exactly under the textarea, so every metric that decides
    where a glyph lands has to match: font, line-height, wrapping, and the
    padding, which is zero on the composer's textarea and must be zero here. */
@@ -2667,6 +3080,57 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
 }
 .icon-btn svg{width:14px;height:14px}
 .icon-btn:hover{background:var(--hover)}
+/* Dictation. Listening is the harness alive, so it takes the brand: the mic
+   becomes a soft lime well holding a stop square, breathing, and the panel
+   above the box shows the voice in lime. Actions (done) keep --accent, as
+   every action does. Fills and shadows only, never a ring. */
+.mic-btn{width:30px;height:30px;border-radius:999px;color:var(--dim);transition:background .2s,color .2s}
+.mic-btn svg{width:16px;height:16px}
+.mic-btn .mic-stop{display:none;width:14px;height:14px}
+.mic-btn:hover{color:var(--fg)}
+.mic-btn.is-recording{background:var(--brand-tint);color:var(--brand-ink);animation:mic-breathe 1.8s ease-in-out infinite}
+.mic-btn.is-recording .mic-idle{display:none}
+.mic-btn.is-recording .mic-stop{display:block}
+.mic-btn:disabled{opacity:.45;cursor:default}
+@keyframes mic-breathe{50%{background:color-mix(in srgb,var(--brand) 34%,transparent)}}
+.composer-bar .mic-btn,.composer-bar #send,.composer-bar #stop{flex-shrink:0}
+/* The panel: centred over the box's top edge, a pill of its own. One row:
+   what is going on, then the voice and the two ways out while listening. */
+.dictate-pop{
+  position:absolute;left:50%;bottom:calc(100% + 12px);z-index:30;transform:translateX(-50%);
+  display:flex;align-items:center;gap:12px;min-height:52px;width:max-content;max-width:min(480px,calc(100% - 24px));
+  padding:8px 8px 8px 20px;border-radius:999px;background:var(--panel);color:var(--fg);
+  box-shadow:0 18px 44px rgba(0,0,0,.26),0 3px 10px rgba(0,0,0,.12);
+  font-size:13.5px;font-weight:500;letter-spacing:.01em;animation:dp-in .18s cubic-bezier(.2,.8,.2,1);
+}
+.dictate-pop[hidden]{display:none}
+@keyframes dp-in{from{opacity:0;transform:translate(-50%,8px) scale(.97)}to{opacity:1;transform:translateX(-50%)}}
+.dp-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto;animation:dp-dot 1.4s ease-in-out infinite}
+@keyframes dp-dot{50%{opacity:.35}}
+.dp-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--brand-tint);border-top-color:var(--brand);flex:0 0 auto;animation:dp-spin .8s linear infinite}
+@keyframes dp-spin{to{transform:rotate(360deg)}}
+.dp-text{white-space:nowrap}
+.dp-time{color:var(--dim);font-weight:400;font-variant-numeric:tabular-nums;min-width:2.4em}
+.dp-wave{width:168px;height:32px;flex:0 1 auto;min-width:64px;color:var(--brand)}
+.dp-btn{width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;padding:0;font:inherit;transition:background .15s,transform .15s}
+.dp-btn:active{transform:scale(.94)}
+.dp-btn svg{width:15px;height:15px}
+.dp-cancel,.dp-close{background:var(--hover);color:var(--fg)}
+.dp-done{background:var(--accent);color:var(--bg)}
+.dp-btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
+/* Which parts show is the state's: listening, working, or saying what went wrong. */
+.dictate-pop:not([data-state="listening"]) .dp-dot,
+.dictate-pop:not([data-state="listening"]) .dp-time,
+.dictate-pop:not([data-state="listening"]) .dp-wave,
+.dictate-pop:not([data-state="listening"]) .dp-cancel,
+.dictate-pop:not([data-state="listening"]) .dp-done,
+.dictate-pop:not([data-state="working"]) .dp-spin,
+.dictate-pop:not([data-state="error"]) .dp-close{display:none}
+.dictate-pop[data-state="working"]{padding-right:20px}
+/* The error red mixed toward the text colour: bright enough on the dark
+   theme, still deep on the light one. */
+.dictate-pop[data-state="error"] .dp-text{color:color-mix(in srgb,var(--err) 62%,var(--fg));white-space:normal;line-height:1.45}
+@media (prefers-reduced-motion:reduce){.dictate-pop,.dp-dot,.dp-spin,.mic-btn.is-recording{animation:none}}
 /* The folder it runs in, set at the same weight as the model beside it: three
    settings on one bar, none of them shouting over the others. */
 #workspace-picker .picker-btn{gap:6px}
@@ -2708,6 +3172,54 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
 .effort-name.on{color:var(--fg);font-weight:600}
 #attachments{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
 #attachments:empty{display:none}
+/* The tray: what the message carries, as cards sitting just above the box.
+   Pictures at a size that can be recognised, files as a name and a line;
+   the same fill as the box below and no outline, with the × on the card's
+   corner where a thumbnail leaves no room beside it. */
+/* The box's own width and centring, so the cards start where the box does
+   rather than at the column's edge. */
+#tray{display:flex;flex-wrap:wrap;gap:8px;max-width:720px;margin:0 auto 8px}
+#tray:empty{display:none}
+.tray-card{
+  position:relative;display:flex;align-items:center;gap:10px;height:64px;
+  max-width:240px;padding:0 30px 0 10px;border-radius:12px;background:var(--panel);
+}
+.tray-card.tray-media{width:64px;padding:0;overflow:hidden;background:var(--field)}
+.tray-card img,.tray-card video{width:100%;height:100%;object-fit:cover;display:block}
+.tray-card img{cursor:zoom-in}
+/* A clip: its first frame where a file's icon goes, with its length and size
+   beside the name. */
+.tray-thumb{position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:9px;overflow:hidden;background:var(--field)}
+.tray-thumb video{width:100%;height:100%;object-fit:cover;display:block}
+.tray-duration:not(:empty)::after{content:" · "}
+.tray-play{position:absolute;left:50%;top:50%;margin:-9px 0 0 -9px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#0000008c;color:#fff;pointer-events:none;transition:opacity .12s}
+.tray-card.video:hover .tray-play{opacity:0}
+.tray-play svg{width:10px;height:10px}
+.tray-icon{width:36px;height:36px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:var(--field);color:var(--dim)}
+.tray-icon svg{width:16px;height:16px}
+.tray-text{display:flex;flex-direction:column;gap:2px;min-width:0}
+.tray-name{font-size:12.5px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tray-sub{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tray-card .x{
+  position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;border:0;border-radius:50%;
+  display:grid;place-items:center;font-size:13px;line-height:1;cursor:pointer;
+  background:var(--field);color:var(--dim);
+}
+.tray-card.tray-media .x{background:#0000008c;color:#fff;opacity:0;transition:opacity .12s}
+.tray-card.tray-media:hover .x,.tray-card .x:focus-visible{opacity:1}
+/* No hover on a touch screen: the × is always there. */
+@media (hover:none){.tray-card.tray-media .x{opacity:1}}
+.tray-card .x:hover{color:var(--fg)}
+/* A phone: one row that scrolls sideways rather than rows that push the box
+   up the screen, and cards a little smaller so two or three still show. */
+@media (max-width:760px){
+  #tray{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:6px}
+  #tray::-webkit-scrollbar{display:none}
+  .tray-card{flex:0 0 auto;height:56px;max-width:200px}
+  .tray-card.tray-media{width:56px}
+  .tray-icon,.tray-thumb{width:36px;height:36px}
+}
+.tray-card.tray-media .x:hover{color:#fff;background:#000000b3}
 /* Outside the composer, tracking its width so the rows line up with the box
    they are waiting on. min-width:0 twice over — here and on the line inside
    each row — because a flex item defaults to refusing to shrink below its
@@ -2743,6 +3255,91 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
 :root[data-theme="dark"] .q .go:hover{color:var(--brand)}
 .q .x{border:0;background:transparent;color:var(--dim);cursor:pointer;font:inherit;padding:0 2px}
 .q .x:hover{color:var(--err)}
+/* The goal being worked toward: the reason the turn keeps going, in the same
+   brand ink that marks the harness at work. Its words in full colour, since
+   unlike a queued line it is what everything below is for. */
+.q.goal .tag{color:var(--brand-ink)}
+:root[data-theme="dark"] .q.goal .tag{color:var(--brand)}
+.q.goal .n{color:var(--fg)}
+/* A background task: work this conversation set going. Running ones say so
+   in the brand ink that marks the harness at work; ended ones step back, but
+   stay a click from what they said. */
+.q.task .n{cursor:pointer}
+.q.task-running .tag,.q.task-queued .tag{color:var(--brand-ink)}
+:root[data-theme="dark"] .q.task-running .tag,:root[data-theme="dark"] .q.task-queued .tag{color:var(--brand)}
+.q.task-failed .tag{color:var(--err)}
+.q.task-completed .n,.q.task-cancelled .n,.q.task-failed .n{color:var(--dim)}
+.q.task-more{border:0;color:var(--dim);cursor:pointer;font:inherit;font-size:12px;text-align:left}
+.q.task-more:hover{color:var(--fg)}
+/* Background results read into the conversation: a card, set apart from
+   what the person typed by its fill and its place on the left. */
+.task-card-row-wrap{margin-bottom:26px}
+.task-card{display:flex;flex-direction:column;gap:4px;max-width:520px;background:var(--panel);border-radius:12px;padding:10px 12px;font-size:12px}
+.task-card-head{color:var(--dim);font-size:11px;margin-bottom:2px}
+.task-card-row{display:flex;align-items:center;gap:8px;min-width:0}
+.task-card-row .tag{flex:0 0 auto;color:var(--dim);font-size:11px}
+.task-card-row.task-completed .tag{color:var(--ok)}
+.task-card-row.task-failed .tag{color:var(--err)}
+.task-card-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.task-card-row .go{flex:0 0 auto;height:22px;padding:0 9px;border:0;border-radius:7px;background:var(--hover);color:var(--fg);cursor:pointer;font:inherit;font-size:11px}
+.task-card-row .go:hover{background:var(--brand-tint);color:var(--brand-ink)}
+/* The sheet a task opens into: down the right edge, over the conversation,
+   which stays where it was underneath. Set apart by its fill, never a line. */
+#task-sheet{
+  position:fixed;top:0;right:0;bottom:0;z-index:30;width:min(560px,100vw);
+  display:flex;flex-direction:column;background:var(--panel);
+  box-shadow:-12px 0 32px #00000014;
+}
+#task-sheet[hidden]{display:none}
+/* In the desktop app the tab strip under the sheet's top edge is the window's
+   drag handle, and a drag region takes clicks whatever is drawn over it: the
+   sheet's close and stop buttons would only ever move the window. */
+#task-sheet{-webkit-app-region:no-drag}
+.task-head{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 10px}
+.task-titles{flex:1;min-width:0}
+.task-title{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.task-meta{color:var(--dim);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.task-stop{
+  flex:0 0 auto;height:28px;padding:0 10px;border:0;border-radius:8px;
+  background:var(--hover);color:var(--fg);cursor:pointer;font:inherit;font-size:12px;
+}
+.task-stop:hover{color:var(--err)}
+.task-close{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--dim);cursor:pointer;font:inherit;font-size:18px;line-height:1}
+.task-close:hover{background:var(--hover);color:var(--fg)}
+.task-chips{position:relative;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none;overscroll-behavior-x:contain}
+.task-chips::-webkit-scrollbar{display:none}
+.task-chips[hidden]{display:none}
+.task-chip{
+  flex:0 0 auto;height:26px;padding:0 10px;border:0;border-radius:13px;
+  background:var(--hover);color:var(--dim);cursor:pointer;font:inherit;font-size:12px;
+  white-space:nowrap;
+}
+.task-chip.on{background:var(--brand-tint);color:var(--brand-ink)}
+:root[data-theme="dark"] .task-chip.on{color:var(--brand)}
+.task-log{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 16px;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.55}
+.task-msg.user{align-self:flex-end;max-width:85%;background:var(--bg);border-radius:12px;padding:8px 12px;white-space:pre-wrap;overflow-wrap:anywhere}
+.task-msg.assistant{overflow-wrap:anywhere}
+.task-tool{background:var(--bg);border-radius:10px;padding:6px 10px;font-size:12px}
+.task-tool summary{display:flex;gap:8px;cursor:pointer;list-style:none;min-width:0}
+.task-tool summary::-webkit-details-marker{display:none}
+.task-tool-name{flex:0 0 auto;font-weight:600}
+.task-tool-input{flex:1;min-width:0;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono,ui-monospace,monospace)}
+.task-tool.err .task-tool-name{color:var(--err)}
+.task-tool-result{margin:6px 0 0;max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--dim);font-size:11.5px}
+.task-note{color:var(--dim);font-size:12px}
+.task-error{color:var(--err);font-size:12px}
+.task-empty{color:var(--dim)}
+.task-working{display:flex;align-items:center;gap:8px;color:var(--dim)}
+/* The sheet's own surface runs to its bottom edge: no band behind the box. */
+.task-form{padding:8px 16px 16px;background:transparent}
+/* Field and send button as one box, the send arrow inside at its corner. */
+.task-box{display:flex;align-items:flex-end;gap:8px;background:var(--bg);border-radius:14px;padding:8px 8px 8px 12px}
+.task-input{
+  flex:1;min-width:0;resize:none;border:0;padding:5px 0;max-height:160px;
+  background:transparent;color:var(--fg);font:inherit;font-size:13px;line-height:1.5;outline:none;
+}
+.task-input:disabled{opacity:.6}
+.task-send{flex:0 0 auto}
 .att{
   display:flex;align-items:center;gap:7px;background:var(--bg);border-radius:8px;
   padding:5px 8px;font-size:12px;max-width:260px;
@@ -2756,6 +3353,37 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
    the chip carries a mark for what it points at instead of a size. */
 .att .ico-sm{width:13px;height:13px;opacity:.65}
 .att .where{color:var(--dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* Goal mode is how this message is sent, not a thing attached to it: a
+   tinted fill, never an outline, sets it apart from the files. */
+.att.goal{background:var(--brand-tint);color:var(--brand-ink)}
+:root[data-theme="dark"] .att.goal{color:var(--brand)}
+.att.goal .ico-sm{opacity:1}
+/* Computer use stays on for the whole conversation, so it sits in the chip
+   row on every message: a full brand fill there shouted louder than anything
+   the person typed. The file chips' own quiet fill, with the colour kept to
+   the mark. Turning it off is not destructive, so the × does not go red. */
+.att.computer{color:var(--fg)}
+.att.computer .ico-sm{opacity:1;color:var(--brand-ink)}
+.att.computer .x:hover{color:var(--fg)}
+.att.computer-perm{flex-basis:100%;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px 12px;background:var(--field);border-radius:10px;max-width:none}
+.computer-perm .cp-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--fg)}
+.computer-perm .cp-body{color:var(--dim);font-size:12px;white-space:normal}
+.computer-perm .cp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--fg)}
+.computer-perm .cp-ok{width:26px;text-align:center;color:var(--dim);font-size:13px;line-height:24px}
+/* The app's primary button, inverted on either theme: white on the brand
+   green was unreadable in dark mode. */
+.computer-perm .cp-btn{border:0;border-radius:7px;padding:4px 12px;background:var(--accent);color:var(--bg);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
+.computer-perm .cp-btn:hover{background:color-mix(in srgb,var(--accent) 85%,var(--bg))}
+/* The card's own actions, after the rows: buttons the size of Allow, but
+   secondary — the page's fill on the card's, no outline — and set right, where
+   Allow already sits. Loose green words read as links to somewhere else, and
+   sat under the rows as if they were a third one. */
+.computer-perm .cp-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
+.computer-perm .cp-link{
+  border:0;border-radius:7px;padding:4px 12px;background:var(--bg);color:var(--fg);
+  font:inherit;font-size:12px;font-weight:500;cursor:pointer;
+}
+.computer-perm .cp-link:hover{background:color-mix(in srgb,var(--fg) 8%,var(--bg))}
 /* Wider than the model picker's: these rows carry a name and the folder it
    sits in, and truncating the folder away leaves three files called index.ts. */
 #attach-picker .menu{min-width:min(380px,86vw)}
@@ -2766,8 +3394,14 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
    should not look identical — one of them means Enter takes this row — but the
    menu is a quiet surface and the difference is worth one tone, not two. */
 #attach-picker .menu-item.cursor{background:var(--sel)}
-#attach-picker .menu-item.cursor .ico-sm{opacity:.8}
-#attach-picker .menu-item .ico-sm{opacity:.55}
+/* Solid tokens rather than the ink at partial opacity: a translucent stroke
+   picks up whatever row background sits behind it and its anti-aliased edge
+   blends twice, so a 1.5px line read thinner and greyer on hover than at rest.
+   At rest the marks take the section labels' grey; a row in play — under the
+   pointer, under the keyboard cursor, or switched on — lights its mark to the
+   label's own colour. */
+#attach-picker .menu-item .ico-sm{opacity:1;color:var(--dim)}
+#attach-picker .menu-item:hover .ico-sm,#attach-picker .menu-item.cursor .ico-sm{color:var(--fg)}
 /* The stacked rows carry a name over a sentence, so they are already two lines
    tall; the mark beside them is a label for the kind, not an illustration, and
    at 16px it was the widest thing in a row whose job is the words. */
@@ -2785,7 +3419,7 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
 #attach-picker .menu-item.stacked .tick{margin-top:0}
 #attach-picker .menu-item.stacked{padding-top:5px;padding-bottom:5px}
 #attach-picker .menu-item.stacked .stack{gap:1px}
-#attach-picker .menu-item.on .ico-sm{opacity:.9}
+#attach-picker .menu-item.on .ico-sm{color:var(--fg)}
 .menu-hint{padding:6px 8px 8px;font-size:11.5px;color:var(--dim)}
 /* A row that has something to say about itself: the name on one line and a
    sentence under it. Beside the name, that sentence took the whole row and
@@ -2843,8 +3477,11 @@ button.ghost,a.ghost{
   background:var(--sel);color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;
 }
 button.ghost:hover,a.ghost:hover{background:var(--hover)}
+/* Just above the composer, however tall it is: a fixed offset was covered as
+   soon as attachment cards or a longer draft grew the form under it.
+   --form-h is measured in transcript.ts. */
 #jump{
-  position:absolute;right:24px;bottom:118px;border-radius:999px;padding:7px 15px;border:0;
+  position:absolute;right:24px;bottom:calc(var(--form-h, 108px) + 10px);border-radius:999px;padding:7px 15px;border:0;
   background:var(--bg);color:var(--fg);cursor:pointer;font:inherit;font-size:12px;
   box-shadow:0 1px 2px #0000000f,0 6px 20px #0000001f;
 }
@@ -2855,6 +3492,36 @@ dialog{
   box-shadow:0 2px 6px #00000014,0 20px 60px #00000033;
 }
 dialog::backdrop{background:rgba(0,0,0,.55)}
+/* A phone asking to pair: the code is the thing to read, so it is the largest. */
+.pair-dialog{width:min(420px,92vw);padding-bottom:16px}
+.pair-title{padding:22px 24px 6px;font-size:16px;font-weight:600}
+.pair-body{padding:0 24px;color:var(--dim);font-size:13.5px;line-height:1.5}
+.pair-code{margin:18px 24px 6px;padding:14px 0;border-radius:12px;background:var(--sel);text-align:center;font-size:30px;letter-spacing:.12em}
+/* An update question, in place of the OS's message box: the version is the
+   title, the release notes scroll if there are many, and Later stays quiet. */
+.upd-dialog{width:min(440px,92vw);padding-bottom:16px}
+.upd-head{display:flex;align-items:center;gap:12px;padding:22px 24px 8px}
+.upd-mark{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--sel);color:var(--fg);font-size:15px;font-weight:600}
+.upd-dialog.important .upd-mark{background:var(--accent);color:var(--bg)}
+.upd-title{font-size:16px;font-weight:600;line-height:1.35}
+.upd-notes{margin:6px 24px 10px;padding:12px 14px;max-height:220px;overflow-y:auto;border-radius:10px;background:var(--hover);font-size:13px;line-height:1.55;white-space:pre-wrap}
+.upd-body{padding:0 24px;color:var(--dim);font-size:13.5px;line-height:1.5;word-break:break-word}
+.upd-body.mono{font-size:12.5px}
+.upd-dialog .dlg-actions{justify-content:flex-end;padding:18px 20px 4px}
+/* The app's confirm and prompt (askConfirm, askText). */
+.ask-dialog{width:min(420px,92vw);padding-bottom:16px}
+.ask-dialog-title{padding:22px 24px 4px;font-size:16px;font-weight:600;line-height:1.35}
+.ask-dialog-body{padding:6px 24px 0;color:var(--dim);font-size:13.5px;line-height:1.55;white-space:pre-wrap}
+.ask-dialog-title + .ask-dialog-body{padding-top:2px}
+.ask-dialog-body:first-child{padding-top:22px;color:var(--fg);font-size:14px}
+.ask-dialog-field{
+  display:block;box-sizing:border-box;width:calc(100% - 48px);margin:14px 24px 2px;padding:9px 12px;
+  border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;font-size:14px;outline:none;
+}
+.ask-dialog-field:focus{border-color:var(--fg)}
+.ask-dialog .dlg-actions{justify-content:flex-end;padding:18px 20px 4px}
+.ask-dialog .dlg-actions button.quiet{margin-right:0}
+.dlg-actions button.approve.danger{background:var(--err);color:#fff}
 /* The approval dialog.
  *
  * Everything here is arranged around one question: what exactly is about to
@@ -3032,7 +3699,9 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   #explorer-head{padding-top:max(10px,env(safe-area-inset-top))}
   #explorer-body{flex-direction:column}
   #explorer-resizer{display:none}
-  #explorer-tree{width:auto;height:var(--explorer-tree-height,38%);max-height:none}
+  #explorer-side{width:auto;height:var(--explorer-tree-height,38%);max-height:none}
+  #explorer-find{height:36px}
+  #explorer-q{font-size:16px}
   /* Stacked, so the handle between them drags up and down — and is a strip
      a thumb can find rather than a hairline. */
   #explorer-split{flex:0 0 18px;margin:0;cursor:row-resize}
@@ -3095,7 +3764,7 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   .effort-stop,.effort-name{width:40px}
   .effort-stop{height:40px}
   .effort-knob{width:28px;height:28px}
-  #jump{right:14px;bottom:160px}
+  #jump{right:14px}
 
   /* Dialogs, with the keyboard up: vh is the height without it. */
   #market{max-height:82dvh}
@@ -3120,7 +3789,7 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
  */
 @media (hover:none) and (pointer:coarse){
   .session .more,.fold-row .more{display:grid;width:28px;height:28px}
-  .proj-forget{opacity:1}
+  .proj-more{opacity:1}
   .actions{position:static;opacity:1;margin-top:4px}
   .turn{margin-bottom:14px}
   .act{padding:6px 10px}