@jossuealcala/madre 0.5.1 → 0.6.0

package/public/styles.css

@@ -140,13 +140,13 @@ body {
 .bar, .onboarding, .composer, .safety, .thread-inner { width: var(--column); margin-left: auto; margin-right: auto; }
 /* The bar is the ship's console: wider than the thread so the project root, the crew and the alerts share one line. */
 .shell > .bar { width: min(1280px, 100% - 40px); }
-.shell > .bar { grid-row: 1; } .shell > .onboarding { grid-row: 2; } .shell > .thread { grid-row: 3; } .shell > .composer { grid-row: 4; } .shell > .safety { grid-row: 5; }
+.shell > .bar { grid-row: 1; } .shell > .onboarding { grid-row: 2; } .shell > .thread { grid-row: 3; } .shell > .composer { grid-row: 4; } .shell > .safety { max-width: min(100%, 150ch); margin-inline: auto; grid-row: 5; }
 .shell > .bar, .shell > .onboarding, .shell > .thread, .shell > .composer, .shell > .safety, .shell > .tree, .shell > .chats-button { grid-column: 1; }
 .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 
 /* ================= bar ================= */
 .bar {
-  display: flex; align-items: center; gap: 18px;
+  display: flex; align-items: center; gap: 18px; min-width: 0;
   padding: 18px 0 14px;
   border-bottom: 1px solid var(--line);
   font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
@@ -189,7 +189,10 @@ body {
 .train-steps li.note { list-style: none; margin-left: -18px; }
 .train-step-label { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
 .project::before { content: "/ "; }
-.agents { display: flex; gap: 8px; margin-left: 0; flex: none; }
+/* 3px of ring on each side plus air between them: anything under 10px and the neighbours clip
+   each other's arc. The padding is the same 3px, so the row's box contains the rings it draws —
+   without it the first and last ring hang outside and collide with whatever sits beside them. */
+.agents { display: flex; gap: 12px; padding: 0 3px; margin-left: 0; flex: none; }
 .connection { display: inline-flex; flex: 0 0 auto; white-space: nowrap; align-items: center; gap: 6px; color: var(--text-3); text-transform: uppercase; font-size: 10px; }
 .connection-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
 .connection[data-state="live"] .connection-dot { background: var(--phosphor); box-shadow: 0 0 10px var(--phosphor); }
@@ -201,16 +204,22 @@ body {
   --size: 28px; --pct: 0;
   position: relative; display: inline-grid; place-items: center;
   width: var(--size); height: var(--size); border-radius: 50%;
-  color: var(--agent); background: color-mix(in srgb, var(--agent) 14%, transparent);
+  color: var(--agent); background: color-mix(in srgb, var(--agent) 17%, transparent);
   flex: none;
 }
 .avatar svg { width: 58%; height: 58%; display: block; }
+/* The ring is the agent's quota, drawn around it. Two things were wrong with it: it sits 3px
+   outside the avatar's own box, so with a 6px gap the rings of neighbours overlapped and each
+   arc came out flattened where the next one cut into it — the "cut bubbles" on screen. And the
+   unused part of the arc was drawn in --line-2, a full-strength grey that outweighed the colour
+   it was supposed to frame, so every agent read as a grey circle with a tint inside.
+   
+   Now the track is a whisper and the used arc is the only thing with weight. */
 .avatar.ring::before {
   content: ""; position: absolute; inset: -3px; border-radius: 50%;
-  background: conic-gradient(var(--agent) calc(var(--pct) * 1%), var(--line-2) 0);
-  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
-  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
-  opacity: .9;
+  background: conic-gradient(var(--agent) calc(var(--pct) * 1%), color-mix(in srgb, var(--text-3) 22%, transparent) 0);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
+  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
 }
 .avatar.ring.hot::before { background: conic-gradient(var(--crit) calc(var(--pct) * 1%), var(--line-2) 0); }
 .avatar.offline { color: var(--text-3); background: transparent; border: 1px dashed var(--line-2); }
@@ -304,19 +313,94 @@ code { font-family: var(--mono); font-size: .9em; color: var(--phosphor); backgr
 .row.thinking .tokens { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--text-3); margin-left: 8px; opacity: .75; }
 /* What a reply cost, on the same line as everything else above the bubble: no pill, no wrap. */
 .who .spent { flex: none; margin-left: auto; padding: 0; border: 0; background: none; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--text-3); white-space: nowrap; }
+.who .spent.ash { color: var(--brew); }
+.stamp .uncharged { color: var(--brew); }
+.ash-observed { margin-top: 12px; }
+.economy-headline { font-family: var(--mono); font-size: clamp(38px, 5vw, 56px); line-height: 1.1; letter-spacing: -.01em; color: var(--ph); margin: 2px 0 12px; }
+/* The panel is a screen, not a column. Sections pair up once there is room for two, and the
+   ones that carry a table or a full-width strip keep the whole width to themselves. */
+#economy-body { display: grid; grid-template-columns: 1fr; gap: 0 56px; align-content: start; }
+@media (min-width: 1180px) { #economy-body { grid-template-columns: 1fr 1fr; } #economy-body > .wide, #economy-body > .economy-strip { grid-column: 1 / -1; } }
+.economy .card-block { display: grid; gap: 10px; align-content: start; }
+.economy .card-block { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ph-faint); }
+.economy .card-block:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
+
+/* The room in six figures, read across before anything is read down. */
+.economy-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 32px; margin: 4px 0 8px; padding-bottom: 26px; border-bottom: 1px solid var(--ph-dim); }
+.economy-stat { display: grid; gap: 5px; align-content: start; min-width: 0; }
+.economy-stat b { font-family: var(--mono); font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--ph); }
+.economy-stat span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; color: var(--ph-dim); }
+
+/* A table is read by looking one row up, so the grid stays recessive and the numbers line up. */
+.economy-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
+.economy-table th, .economy-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--ph-faint); white-space: nowrap; }
+.economy-table thead th { font-size: 8.5px; font-weight: 400; letter-spacing: .18em; color: var(--ph-dim); border-bottom-color: var(--ph-dim); }
+.economy-table tbody th { text-align: left; font-weight: 600; letter-spacing: .14em; color: var(--ph-dim); }
+.economy-table td { color: var(--ph); }
+.economy-table tbody tr:last-child th, .economy-table tbody tr:last-child td { border-bottom: 0; }
+.economy .card-block h5 { margin: 0; font-size: 10px; font-weight: 400; letter-spacing: .28em; color: var(--ph-dim); }
+.economy .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 230px)); justify-content: start; gap: 24px 40px; }
+.economy .metric { display: grid; gap: 6px; align-content: start; min-width: 0; }
+.economy .metric b { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--ph); }
+.economy .metric span { font-family: var(--mono); font-size: 9px; line-height: 1.5; letter-spacing: .18em; color: var(--ph-dim); }
+/* Prose is read, so it gets a measure and a size: a 60-character column, sentence case, never the
+   full width of a panel at heading scale. */
+.economy .note { margin: 8px 0 0; max-width: 640px; font-size: 11px; line-height: 1.85; letter-spacing: .06em; color: var(--ph-dim); text-shadow: none; }
+.economy .ash-block { grid-template-columns: 120px minmax(80px, 560px) auto; gap: 16px; }
+.economy .ash-block b, .economy .ash-block span { font-size: 10px; }
+.economy .ash-block i { height: 7px; }
+
+/* One agent, two bars, one scale: the shorter bar is the shorter answer. */
+.ash-compare { display: grid; gap: 20px; }
+.ash-agent { display: grid; gap: 6px; }
+.ash-agent > b { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .2em; color: var(--ph-dim); text-shadow: none; }
+.ash-bar { display: grid; grid-template-columns: 76px minmax(80px, 560px) auto; gap: 14px; align-items: center; }
+.ash-bar .ash-side { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ph-dim); text-shadow: none; }
+.ash-bar .ash-figure { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--ph-dim); white-space: nowrap; text-shadow: none; }
+.ash-bar i { height: 9px; background: var(--ph-faint); position: relative; }
+.ash-bar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: color-mix(in srgb, var(--ph) 30%, transparent); }
+.ash-bar.on i::after { background: var(--ph); }
+.ash-bar.on .ash-figure, .ash-bar.on .ash-side { color: var(--ph); }
+.ash-verdict { margin: 4px 0 0; font-family: var(--mono); font-size: 10px; line-height: 1.5; letter-spacing: .06em; color: var(--ph); text-shadow: none; }
+.ash-verdict.noise { color: var(--ph-dim); }
+.ash-waiting { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--ph-dim); text-shadow: none; }
+@media (max-width: 720px) { .ash-bar { grid-template-columns: 1fr; } .ash-bar i { display: none; } }
+.ash-observed h5 { margin: 0 0 6px; }
 .row.thinking .elapsed.late { color: var(--warn); }
 .row.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--agent, var(--text-2)); animation: bounce 1.2s infinite; opacity: .5; }
 .row.thinking i:nth-child(2) { animation-delay: .18s; } .row.thinking i:nth-child(3) { animation-delay: .36s; }
 @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
 
 /* system lines: handoffs, sentinel, failures — MOTHER speaks in small caps */
+/* A line of the room talking about itself. Three things keep it orderly:
+   
+   · a measure. Running the full column turns one sentence into a ragged staircase, and these are
+     read at a glance or not at all.
+   · balanced wrapping, so two lines come out the same length instead of a long one and a word.
+   · the label on its own line. CONTROL, MEMORY, MODULES name what follows; leaving them inline
+     let the break land anywhere and the eye lost which part was the heading. */
 .system {
-  align-self: center; text-align: center; max-width: 92%;
-  overflow-wrap: anywhere;
+  /* A definite width, not shrink-to-fit. Sized to its content, the box is as wide as its widest
+     line, so the heading centred in one box and the body wrapped inside another — which is why
+     the agent's name never lined up with the sentence under it. */
+  align-self: center; text-align: center; width: min(92%, 58ch);
+  /* `pretty`, not `balance`: balance evens the line lengths and in doing so kept pushing the
+     agent's name onto a line of its own, away from the sentence it begins. `pretty` only avoids
+     orphans, which is the actual problem these rows had. */
+  overflow-wrap: anywhere; text-wrap: pretty;
   margin: 22px 0 8px;
   font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
-  color: var(--text-3); line-height: 1.6;
+  color: var(--text-3); line-height: 1.7;
 }
+.system > b:first-child { display: block; margin-bottom: 3px; color: var(--text-3); letter-spacing: .2em; }
+/* Everything after the heading is one sentence and has to wrap as one: a code chip that becomes
+   a block breaks the line in front of it and leaves the agent's name stranded. */
+.system code { display: inline-block; vertical-align: baseline; }
+/* `.who` belongs to a message's header, where it is a flex row with a left margin. Inside a
+   system line it is a word in a sentence, and inheriting that rule is what put every agent's
+   name alone on a line, indented, away from the clause it opens. */
+.system .who { display: inline; margin: 0; white-space: nowrap; }
+.system .who { color: var(--agent, var(--text-2)); }
 .system b { font-weight: 600; color: var(--text-2); }
 .system .from { color: var(--from, var(--text-2)); } .system .to { color: var(--to, var(--text-2)); }
 .system.warn { color: var(--warn); }
@@ -565,11 +649,31 @@ pre.core-egress-log { margin: 0; max-height: 34vh; overflow: auto; padding: 10px
 .memory-hint .more { font-family: var(--mono); font-size: 9.5px; color: var(--text-3); }
 /* Memory used is not memory saved: saving is an event, using happens on most turns. Same shape so
    there is one thing to learn, quieter so it never competes with the answer it helped write. */
-.memory-hint.used { margin-top: 4px; opacity: .78; animation: none; }
-.memory-hint.used:hover { opacity: 1; }
-.memory-hint.used .lead { color: var(--text-3); }
-.memory-hint.used .pill { animation: none; box-shadow: none; font-size: 10.5px; padding: 2px 9px; }
-.memory-hint.used .pill.carried b::after { content: ' ⇢'; }
+/* What the archive handed this turn: one indicator per line under its heading.
+   Legibility first — opacity on the whole group used to fade text that was already pale, and the
+   five kind colours belong to NOSTROMO's dark map, so here the colour is a dot and the text is
+   the room's own. */
+.memory-hint.used { flex-direction: column; align-items: flex-start; margin-top: 4px; gap: 5px; animation: none; }
+.memory-hint.used .lead { font-size: 9px; letter-spacing: .14em; color: var(--text-3); }
+.memory-hint.used .pill {
+  gap: 7px; max-width: min(340px, 100%); padding: 3px 10px 3px 8px;
+  border: 1px solid color-mix(in srgb, var(--text-3) 26%, transparent);
+  background: color-mix(in srgb, var(--text-3) 7%, transparent);
+  color: var(--text-2); font-size: 11px; line-height: 1.45;
+  animation: none; box-shadow: none;
+}
+.memory-hint.used .pill .dot {
+  flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--kind);
+  /* The ring is what keeps a near-white kind visible on a near-white page. */
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-3) 45%, transparent);
+}
+.memory-hint.used .pill .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.memory-hint.used .pill:hover { background: color-mix(in srgb, var(--text-3) 14%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--text-3) 42%, transparent); }
+/* Carried along rather than matched: the dot is hollow, the way an indicator says "inherited". */
+.memory-hint.used .pill.carried .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--kind), 0 0 0 1px color-mix(in srgb, var(--text-3) 45%, transparent); }
+.memory-hint.used .last { display: flex; align-items: center; gap: 6px; max-width: 100%; }
+.memory-hint.used .last .pill { min-width: 0; }
+.memory-hint.used .more { font-size: 9.5px; }
 @keyframes hint-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
 @keyframes hint-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kind) 55%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--kind) 0%, transparent), 0 0 18px color-mix(in srgb, var(--kind) 45%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
 @media (prefers-reduced-motion: reduce) { .memory-hint, .memory-hint .pill { animation: none; } }
@@ -625,7 +729,13 @@ textarea::placeholder { color: var(--text-3); }
 .field button[type="submit"]:hover { filter: brightness(1.06); }
 .field button[type="submit"]:disabled { opacity: .4; cursor: default; box-shadow: none; }
 .pick-label .pick-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
-.safety { margin: 14px auto 18px; color: var(--text-3); font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
+.safety { max-width: min(100%, 150ch); margin: 8px auto 4px; color: var(--text-3); font-family: var(--mono); font-size: 8.5px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; text-align: center; opacity: .85; }
+/* The signature, in the corner it belongs in: last in the page's order, and out of the way of
+   everything that is actually used. */
+.colophon { position: fixed; right: 14px; bottom: 10px; z-index: 2; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--text-3); opacity: .5; pointer-events: none; user-select: none; transition: opacity .2s; }
+.colophon:hover { opacity: .9; }
+@media (max-width: 720px) { .colophon { display: none; } }
+.shell.with-browser .colophon { display: none; }
 
 /* toast */
 .toast { position: fixed; left: var(--composer-center, 50%); bottom: calc(100vh - var(--composer-top, 70vh) + 22px); transform: translateX(-50%); text-align: center; padding: 9px 14px; animation: toast-in .22s ease; z-index: 40; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: var(--panel); color: var(--danger); font-size: 13px; box-shadow: var(--shadow); max-width: min(560px, calc(100% - 32px)); }
@@ -667,7 +777,9 @@ textarea::placeholder { color: var(--text-3); }
 
 .lang-button { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; padding: 0 9px; }
 .mother-glyph { width: 8px; height: 8px; border: 1px solid currentColor; }
-.mother-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--danger); color: #fff; font-size: 9px; letter-spacing: 0; }
+/* Every count in the bar wears the same green. Red on a counter reads as an alarm, and the
+   number of conditions MU/TH/UR is holding is not one. */
+.mother-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--phosphor); color: var(--phosphor-ink); font-size: 9px; letter-spacing: 0; }
 
 dialog.mother { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: transparent; color: var(--brew); }
 dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); }
@@ -1047,6 +1159,156 @@ dialog.override[open] { display: grid; place-items: center; }
 .bubble img.inline { max-width: 100%; max-height: 420px; border-radius: 12px; display: block; margin: 6px 0; cursor: zoom-in; }
 .bubble a.file-link { color: var(--agent, var(--phosphor)); text-decoration: none; border-bottom: 1px dashed currentColor; font-family: var(--mono); font-size: .92em; cursor: pointer; }
 dialog.viewer { border: 0; padding: 0; width: min(1100px, 96vw); max-width: 96vw; height: min(88vh, 900px); background: var(--panel); color: var(--text); border-radius: 16px; box-shadow: var(--shadow); }
+/* With the browser docked the conversation lives in half a screen, and a bar built for a wide one
+   piles its pieces on top of each other.
+   
+   The breakpoints are the BAR'S OWN WIDTH, not the window's. That distinction is the whole fix:
+   the window stays 2000px wide while the column shrinks to 500, so every @media rule written
+   against the viewport sat there never firing while the pieces overlapped. A container query asks
+   the element how much room IT has, which is the only question that was ever relevant.
+   
+   And a flex child with min-width:auto refuses to shrink below its content and pushes its
+   neighbour out of the row instead. That is what put MADRE on top of the agent dots. */
+.bar { container-type: inline-size; container-name: bar; }
+/* Only what can truncate is allowed to shrink. A button given min-width:0 shrinks below its own
+   label and lets it spill past the border onto the next button — which looks exactly like two
+   controls overlapping, because they are. Buttons hold their size and lose their words instead,
+   at the widths below. */
+.bar > * { flex: none; }
+/* Everything but the names holds its size. The names are the only thing in the bar that can lose
+   characters without losing meaning, so they are the only thing allowed to give — and the group
+   that holds them has to be allowed to give too, or its children never get the chance. */
+.bar > .bar-left { flex: 0 1 auto; min-width: 0; overflow: hidden; }
+/* The project's name holds; the room's title is the one that gives. A project is where you are
+   and there is one of them; a room title is a sentence somebody typed and there are seven. */
+.bar .project { flex: none; white-space: nowrap; }
+.bar .chat-here { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* No overflow:hidden here. The quota ring is drawn 3px outside each avatar's own box, so hiding
+   the overflow of the row that holds them is exactly what shaved a flat edge off every sphere. */
+.bar .agents { flex-wrap: nowrap; }
+
+/* The order of loss. Nothing disappears: everything that had a word keeps its glyph, so the bar
+   stops being a row of labels and becomes a row of buttons. What a glyph cannot carry — the name
+   of the project, the name of the room — is what falls last.
+   
+   The crew is the exception that needs markup: five spheres cannot be compacted by CSS into one
+   button, so there are two elements and the container query picks which one is on screen. */
+.bar-icon { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; padding: 0 8px 0 6px; height: 28px; padding: 0; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); cursor: pointer; }
+.bar-icon svg { width: 17px; height: 17px; }
+.bar-icon:hover { color: var(--phosphor); border-color: var(--phosphor); }
+.bar-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--phosphor); color: var(--phosphor-ink); font-family: var(--mono); font-size: 9px; letter-spacing: 0; }
+.bar-glyph { display: none; }
+.agents-compact { display: none; }
+
+@container bar (max-width: 1040px) {
+  .bar { gap: 9px; }
+  /* The dot already says live in colour; the word only repeats it. */
+  .connection-label { display: none; }
+  .brand-word { display: none; }
+}
+/* The crew collapses before the names do. Five spheres are 178px; at the width where the bar is
+   tight, giving those back is what buys the project its name — and a name is information a glyph
+   cannot carry, while five spheres say the same thing one button says with a number. */
+@container bar (max-width: 980px) {
+  /* The crew becomes one button: how many are ready, and the whole list in its title. */
+  .agents { display: none; }
+  .agents-compact { display: inline-flex; }
+  /* A label on a button whose glyph already names it is a label spending room it does not own. */
+  /* The word goes and a real glyph takes its place: a puzzle piece for the modules, a pulse for
+     MU/TH/UR. The decorative mark each button already carried is not an icon — it is a bullet —
+     so leaving only that left two empty outlines on screen. */
+  /* Icon and number side by side, inside the button. Pulling the badge out with position:absolute
+     made it escape 16-23px past the right edge into an 18px gap, which is exactly the collision
+     that was on screen. A count belongs inside the thing it counts. */
+  .mother-button { width: auto; height: 28px; padding: 0 9px 0 7px; gap: 5px; font-size: 0; justify-content: center; }
+  .mother-button .mother-glyph { display: none; }
+  .mother-button .bar-glyph { display: block; width: 17px; height: 17px; }
+  .mother-button .modules-count, .mother-button .mother-count { font-size: 9px; }
+  .stop-all { width: 30px; height: 28px; padding: 0; gap: 0; font-size: 0; justify-content: center; }
+  .stop-all .stop-all-glyph { font-size: 12px; }
+}
+@container bar (max-width: 640px) {
+  /* The room's name is the first thing that cannot be drawn, so it becomes the mark that says
+     there is one: three dots, with the whole title still in the tooltip. */
+  .chat-here { font-size: 0; }
+  .chat-here::after { content: '…'; font-size: 11px; letter-spacing: .1em; }
+}
+@container bar (max-width: 460px) {
+  .project:not(.chat-here) { font-size: 0; }
+  .project:not(.chat-here)::after { content: '/'; font-size: 11px; }
+}
+
+/* The composer has the same disease: its parts have to be allowed to give. */
+.composer .field { min-width: 0; }
+.composer .editor { min-width: 0; }
+.composer .crew-label { flex: none; }
+
+/* The browser docks beside the conversation; it does not take the screen from it. The point of
+   looking at a server while a room full of agents works on it is seeing both, so the thread keeps
+   its column and simply narrows. One rule does it: the shell grows a second column, and every
+   existing child is already pinned to the first. */
+.shell.with-browser { grid-template-columns: minmax(0, 1fr) var(--dock, 46vw); }
+.shell.with-browser > .browser-dock { grid-column: 2; grid-row: 1 / -1; }
+/* No height of its own: it already spans every row of the shell, and asking for 100dvh on top of
+   that made the grid satisfy it by starving the rows in the other column — which is how the
+   conversations panel ended up two pixels tall and the thread lost its end. */
+.browser-dock { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--panel); border-left: 1px solid var(--line); }
+/* The dock is a fixed grid track, so anything inside it that refuses to shrink pushes the whole
+   page wider and hands the human a horizontal scrollbar for a layout that was supposed to fit.
+   Its own container query decides what the header can afford. */
+.browser-dock { container-type: inline-size; container-name: dock; overflow: hidden; }
+.browser-dock .viewer-head { padding: 10px 12px; min-width: 0; }
+.browser-dock .viewer-head > * { flex: none; }
+.browser-dock .browser-where { flex: 1 1 auto; min-width: 40px; }
+.browser-dock .viewer-body { height: auto; min-height: 0; }
+.browser-tabs { min-width: 0; }
+@container dock (max-width: 620px) {
+  /* The widths are a convenience; the address is not. */
+  .browser-dock .viewer-sizes { display: none; }
+}
+@container dock (max-width: 460px) {
+  .browser-dock #browser-close { font-size: 0; padding: 6px 8px; }
+  .browser-dock #browser-close::after { content: '×'; font-size: 13px; }
+  .browser-dock #browser-servers { padding: 0 7px; }
+  .browser-dock #browser-servers > span { display: none; }
+}
+/* The edge between the two: wide enough to grab, invisible until wanted. */
+.dock-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 5; }
+.dock-grip::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 2px; height: 48px; border-radius: 999px; background: var(--line-2); opacity: 0; transition: opacity .15s; }
+.dock-grip:hover::after, .shell.dragging-dock .dock-grip::after { opacity: 1; background: var(--phosphor); }
+.shell.dragging-dock .browser-dock iframe { pointer-events: none; }
+@media (max-width: 900px) { .shell.with-browser { grid-template-columns: 1fr; } .shell.with-browser > .browser-dock { grid-column: 1; grid-row: 3 / 4; height: auto; border-left: 0; border-top: 1px solid var(--line); } }
+
+/* The browser is its own window on the rail, beside the conversations. */
+
+.browser-head { flex-wrap: nowrap; }
+.browser-head .viewer-address { flex: 1; max-width: none; }
+.browser-tabs { display: flex; align-items: stretch; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
+.browser-tab { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: transparent; color: var(--text-3); font-family: var(--mono); font-size: 11px; cursor: pointer; }
+.browser-tab .tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.browser-tab .tab-close { opacity: .45; font-size: 13px; line-height: 1; }
+.browser-tab .tab-close:hover { opacity: 1; color: var(--danger); }
+.browser-tab.on { color: var(--phosphor); border-color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); }
+.browser-newtab { flex: none; width: 28px; border: 1px dashed var(--line-2); border-radius: 8px; background: transparent; color: var(--text-3); font-size: 14px; cursor: pointer; }
+.browser-newtab:hover { color: var(--phosphor); border-color: var(--phosphor); }
+
+/* Browsing a live server is not reading a file: the page under the glass was built for a window,
+   so it gets one. Full bleed, no rounded corners pretending this is a card, and a stage the frame
+   can be made narrower inside — because checking a layout at phone width is most of what a human
+   opens their own app to do. */
+dialog.viewer.browsing { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
+.viewer-body.browsing { padding: 0; display: grid; grid-template-rows: minmax(0, 1fr); place-items: stretch; background: var(--bg); overflow: hidden; }
+.viewer-stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); justify-content: center; width: 100%; min-height: 0; overflow: hidden; }
+.viewer-stage iframe.ripley { width: var(--stage, 100%); max-width: 100%; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; }
+.viewer-stage[data-sized="true"] iframe.ripley { box-shadow: 0 0 0 1px var(--line-2); }
+/* The edge you pull. Wide enough to grab, invisible until it matters. */
+.stage-grip { position: absolute; top: 0; bottom: 0; width: 14px; cursor: ew-resize; display: grid; place-items: center; }
+.stage-grip::after { content: ''; width: 3px; height: 46px; border-radius: 999px; background: var(--line-2); opacity: 0; transition: opacity .15s; }
+.stage-grip:hover::after, .viewer-stage.dragging .stage-grip::after { opacity: 1; background: var(--phosphor); }
+.viewer-stage.dragging iframe.ripley { pointer-events: none; }
+.viewer-sizes { display: inline-flex; gap: 2px; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; }
+.viewer-sizes button { border: 0; background: transparent; color: var(--text-3); font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; padding: 4px 9px; border-radius: 999px; cursor: pointer; }
+.viewer-sizes button[aria-pressed="true"] { background: color-mix(in srgb, var(--phosphor) 18%, transparent); color: var(--phosphor); }
 dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
 .viewer-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; }
 .viewer-path { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
@@ -1355,10 +1617,93 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .reply-quote .said { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .reply-quote .drop { flex: none; margin-left: auto; width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); font-size: 14px; line-height: 1; cursor: pointer; }
 .reply-quote .drop:hover { background: color-mix(in srgb, var(--text-3) 14%, transparent); color: var(--text); }
-.slash-menu { position: absolute; left: -12px; bottom: calc(100% + 14px); z-index: 30; min-width: 280px; max-width: min(460px, 90vw); border: 1px solid var(--line-2); background: var(--panel); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); padding: 6px; display: grid; gap: 2px; }
-.slash-menu .item { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 9px; cursor: pointer; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; }
+/* What the project already settled, at the head of the conversation: the same indicator language
+   as the memory chips, so the room has one way of showing a note and not three. */
+.settled { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 12px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
+.settled-lead { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
+.settled-note { display: inline-flex; align-items: center; gap: 7px; max-width: min(380px, 100%); padding: 3px 10px 3px 8px; border: 1px solid color-mix(in srgb, var(--text-3) 26%, transparent); background: color-mix(in srgb, var(--text-3) 7%, transparent); color: var(--text-2); font: inherit; font-size: 11px; line-height: 1.45; border-radius: 999px; cursor: pointer; text-align: left; }
+.settled-note .dot { flex: none; width: 7px; height: 7px; border-radius: 999px; background: #ffdc3c; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-3) 45%, transparent); }
+.settled-note .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.settled-note:hover { background: color-mix(in srgb, var(--text-3) 14%, transparent); color: var(--text); }
+
+/* Where to go on the server on screen: the host is printed, the path is typed. */
+.viewer-address { display: flex; align-items: center; gap: 0; min-width: 0; flex: 1; max-width: 520px; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 4px 0 11px; background: color-mix(in srgb, var(--text-3) 6%, transparent); }
+.viewer-address .host { flex: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--text-3); }
+.viewer-address input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--mono); font-size: 11.5px; padding: 6px 8px; }
+.viewer-address input::placeholder { color: var(--text-3); }
+
+/* Which server is on screen. A label, not a field: the panel opens what the SERVERS list offers
+   and nothing else, so there is nothing here to type. */
+.browser-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text-2); padding: 0 4px; }
+
+/* A page that will not be framed, explained where the page would have been. */
+.browser-refused { display: grid; align-content: center; justify-items: center; gap: 12px; height: 100%; padding: 32px; text-align: center; }
+.browser-refused h4 { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--text); }
+.browser-refused p { margin: 0; max-width: 46ch; font-size: 12px; line-height: 1.7; color: var(--text-2); }
+.browser-refused-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
+.browser-refused button { border: 1px solid var(--line-2); background: transparent; color: var(--text); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
+.browser-refused .browser-go { border-color: var(--phosphor); color: var(--phosphor); }
+.browser-refused button:hover { background: color-mix(in srgb, var(--phosphor) 12%, transparent); }
+
+/* The servers answering on this computer, listed from RIPLEY's bar. */
+/* The one control in the header that opens something, so it is built like the size pills rather
+   than like the arrows: a round track, a lamp that says whether anything is listening, and a
+   caret that turns when the list is down. */
+.viewer-nav .nav.ports { width: auto; gap: 7px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px 0 8px; border-radius: 999px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--text-2); }
+.ports-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); flex: none; transition: background .2s, box-shadow .2s; }
+.nav.ports[data-live="yes"] .ports-dot { background: var(--phosphor); box-shadow: 0 0 6px var(--phosphor); }
+.ports-caret { width: 0; height: 0; flex: none; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: .55; transition: transform .18s, opacity .18s; }
+.nav.ports[aria-expanded="true"] { background: color-mix(in srgb, var(--phosphor) 14%, transparent); border-color: color-mix(in srgb, var(--phosphor) 45%, transparent); color: var(--phosphor); }
+.nav.ports[aria-expanded="true"] .ports-caret { transform: rotate(180deg); opacity: 1; }
+/* Keyboard focus is worth a ring; a mouse click is not. Without this the clicked button keeps a
+   heavy dark box the arrows beside it never wear. */
+.viewer-nav .nav:focus { outline: none; }
+.viewer-nav .nav:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
+.ports-menu { position: absolute; top: 46px; left: 12px; z-index: 40; min-width: 0; width: min(420px, calc(100cqw - 24px)); max-width: none; border: 1px solid var(--line-2); background: var(--panel); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); padding: 6px; display: grid; gap: 2px; }
+.ports-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
+.ports-row b { font-family: var(--mono); font-size: 12.5px; color: var(--phosphor); }
+.ports-row span { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ports-row:hover { background: color-mix(in srgb, var(--phosphor) 12%, transparent); }
+.ports-note { padding: 6px 10px 7px; font-family: var(--mono); font-size: 9px; line-height: 1.6; letter-spacing: .1em; color: var(--text-3); }
+
+/* The way up, beside the agent asking to climb it. Quiet: it is a door, not an alarm. */
+.mode-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 7px 12px; border: 1px dashed color-mix(in srgb, var(--warn, #e2a022) 46%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--warn, #e2a022) 6%, transparent); }
+.mode-what { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--text-2); }
+.mode-go { flex: none; border: 1px solid color-mix(in srgb, var(--warn, #e2a022) 60%, transparent); background: transparent; color: var(--warn, #e2a022); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; padding: 5px 12px; border-radius: 7px; cursor: pointer; }
+.mode-go:hover { background: color-mix(in srgb, var(--warn, #e2a022) 16%, transparent); }
+
+/* A decision handed back, in the agent's colour: read at a glance, answered with one press. */
+.choice { margin: 10px 12px 2px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--agent, var(--text-3)) 32%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--agent, var(--text-3)) 5%, transparent); }
+.choice-q { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text); }
+.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.choice-option { border: 1px solid color-mix(in srgb, var(--agent, var(--text-3)) 45%, transparent); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.4; text-align: left; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s; }
+.choice-option:hover { background: color-mix(in srgb, var(--agent, var(--text-3)) 14%, transparent); border-color: var(--agent, var(--text-3)); }
+
+/* What the room still has no answer to. Quieter than the free-turn offer above it: that one is
+   about to save money, this one is only wondering. */
+/* The label on its own line over a single row of pills. Wrapping put the third question on a
+   second line and walked the composer down the page; a sideways rail keeps the height fixed
+   however many the room is carrying. */
+.openq { display: grid; justify-items: center; gap: 5px; margin: 0 0 8px; min-width: 0; }
+.openq-lead { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
+.openq-rail { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 1px 2px; }
+.openq-rail::-webkit-scrollbar { display: none; }
+.openq-rail > * { flex: 0 0 auto; }
+.openq-ask { max-width: min(340px, 100%); padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--text-3) 24%, transparent); background: transparent; color: var(--text-2); font: inherit; font-size: 11px; line-height: 1.45; border-radius: 999px; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.openq-ask:hover { background: color-mix(in srgb, var(--text-3) 10%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--text-3) 40%, transparent); }
+
+/* The free-turn offer: one line above the field, never in the way of typing. */
+.free-offer { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 8px 12px; border: 1px dashed var(--brew); border-radius: 10px; background: color-mix(in srgb, var(--brew) 7%, transparent); }
+.free-offer .free-what { flex: 1; min-width: 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: .04em; color: var(--text-2); }
+.free-offer .free-go { flex: none; border: 1px solid var(--brew); background: transparent; color: var(--brew); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
+.free-offer .free-go:hover { background: color-mix(in srgb, var(--brew) 16%, transparent); }
+@media (max-width: 720px) { .free-offer { flex-wrap: wrap; } }
+.slash-menu { position: absolute; left: -12px; bottom: calc(100% + 14px); z-index: 30; min-width: 320px; max-width: min(580px, 92vw); border: 1px solid var(--line-2); background: var(--panel); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); padding: 6px; display: grid; gap: 2px; }
+.slash-menu .item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; }
 .slash-menu .item .key { font-family: var(--mono); font-size: 12.5px; color: var(--agent, var(--phosphor)); font-weight: 600; white-space: nowrap; }
-.slash-menu .item .what { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.slash-menu .item .what { font-size: 12.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
+/* The argument syntax on its own line, under both, free to wrap. */
+.slash-menu .item .args { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--text-3); overflow-wrap: anywhere; }
 .slash-menu .item.off .key { color: var(--text-3); text-decoration: line-through; }
 .slash-menu .item[aria-selected="true"], .slash-menu .item:hover { background: color-mix(in srgb, var(--agent, var(--phosphor)) 14%, transparent); }
 .slash-menu .hint { padding: 4px 10px 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--text-3); }
@@ -1395,8 +1740,31 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .chats-button:active { transform: translateY(1px); }
 @media (max-width: 1100px) { .chats-button { display: none; } }
 
-.tree { grid-row: 3; justify-self: end; align-self: stretch; z-index: 5; width: clamp(240px, calc((100% - var(--column)) / 2 - 36px), 420px); margin: 18px 20px 10px 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); overflow: hidden; animation: tree-in .22s ease; }
+.tree { position: relative; grid-row: 3; justify-self: end; align-self: stretch; z-index: 5; width: clamp(240px, calc((100% - var(--column)) / 2 - 36px), 420px); margin: 18px 20px 10px 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); overflow: hidden; animation: tree-in .22s ease; }
+/* The finder's own row of tools: a search, and what is waiting to be pasted. */
+.tree { grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
+.tree-search { padding: 8px 12px 6px; }
+.tree-search input { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; background: color-mix(in srgb, var(--text-3) 6%, transparent); color: var(--text); font-family: var(--mono); font-size: 11px; padding: 6px 10px; outline: 0; }
+.tree-search input:focus { border-color: var(--phosphor); }
+.tree-clip { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 6px 10px; border: 1px dashed var(--phosphor); border-radius: 8px; font-family: var(--mono); font-size: 10px; color: var(--text-2); }
+.tree-clip .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tree-clip button { border: 0; background: transparent; color: var(--phosphor); font: inherit; font-size: 10px; letter-spacing: .1em; cursor: pointer; }
+.tree-ask { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
+.tree-ask input { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; color: var(--text); font: inherit; font-size: 11px; padding: 2px 1px; outline: none; }
+.tree-ask input:focus { border-bottom-color: var(--phosphor); }
+.tree-ask .go { color: var(--phosphor); }
+.tree-menu { position: absolute; z-index: 20; min-width: 170px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 5px; display: grid; gap: 1px; }
+.tree-menu button { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; text-align: left; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
+.tree-menu button:hover { background: color-mix(in srgb, var(--phosphor) 12%, transparent); }
+.tree-menu .guarded { color: var(--warn); }
+.tree-menu .note { padding: 5px 10px 6px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--text-3); }
+
 @keyframes tree-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
+/* Conversations open where their handle is. The files panel is anchored right because its button
+   lives in the bar's right end; this one's handle sits at the left of the thread, so a panel that
+   appeared on the far side — behind the browser, once there is one — read as not opening at all. */
+.chats { justify-self: start; margin-left: 20px; margin-right: 0; z-index: 7; animation: chats-in .22s ease; }
+@keyframes chats-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
 .tree-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--text-2); }
 .tree-title { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
 .tree-root { color: var(--text-3); letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/src/choices.mjs

@@ -0,0 +1,64 @@
+// An agent asking the human to choose.
+//
+// The room already has one fenced channel, ```pulse, and it puts other agents to work. This is
+// its inert sibling: ```pulse-ask carries a question and the options an agent sees, and running
+// it does nothing at all. MADRE renders the options under the answer; pressing one writes that
+// option into the composer as the human's next message. Nothing is sent, nothing is decided and
+// no turn is spent until the human presses.
+//
+// Separate from the delegation parser on purpose. That one is load-bearing — it starts real
+// turns with real permissions — and a question is not a step. Teaching it a second grammar would
+// put a parser that can spend money in the path of a parser that cannot.
+//
+//   ```pulse-ask
+//   Where should the exported dataset live?
+//   - Beside the room log, with the rest of the archive
+//   - In the project, so it travels with the repository
+//   - Somewhere the human names each time
+//   ```
+//
+// Two options are a yes/no, which a sentence already handles; the block earns its place from
+// three. Above six it is a list, not a choice, and the room says so by refusing it.
+
+export const MIN_OPTIONS = 3;
+export const MAX_OPTIONS = 6;
+const MAX_QUESTION = 200;
+const MAX_OPTION = 120;
+
+// The last ```pulse-ask block of a reply, if it closes the reply. Returns null for anything
+// else: a block quoted mid-answer is an example, and an example is not a question.
+export function parseChoice(text) {
+  const source = String(text ?? '');
+  const blocks = [...source.matchAll(/```pulse-ask\s*\n([\s\S]*?)```/gi)];
+  if (!blocks.length) return null;
+  const last = blocks.at(-1);
+  if (source.slice(last.index + last[0].length).trim()) return null;
+
+  const lines = last[1].split('\n').map((line) => line.trim()).filter(Boolean);
+  if (!lines.length) return null;
+  const question = lines[0].startsWith('-') ? null : lines[0].slice(0, MAX_QUESTION);
+  const options = [];
+  const seen = new Set();
+  for (const line of lines.slice(question ? 1 : 0)) {
+    const match = line.match(/^[-*•]\s+(.+)$/);
+    if (!match) continue;
+    const label = match[1].trim().slice(0, MAX_OPTION);
+    // The same option twice is a mistake, and a choice that offers it twice reads as rigged.
+    const key = label.toLowerCase();
+    if (!label || seen.has(key)) continue;
+    seen.add(key);
+    options.push(label);
+  }
+  if (!question) return null;
+  if (options.length < MIN_OPTIONS || options.length > MAX_OPTIONS) return null;
+  return { question, options };
+}
+
+// What the reply reads as once the block has been lifted out of it: the room shows the question
+// as bubbles, so leaving the raw fence in the text would say everything twice.
+export function withoutChoice(text) {
+  const source = String(text ?? '');
+  if (!parseChoice(source)) return source;
+  const last = [...source.matchAll(/```pulse-ask\s*\n[\s\S]*?```/gi)].at(-1);
+  return source.slice(0, last.index).trimEnd();
+}