samagotchi 0.143.0 → 0.145.0

data/lib/samagotchi/web/public/index.html

@@ -168,7 +168,7 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .init-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .init-task.done .init-text{color:var(--ok-text)}
 .init-mark{flex:none;width:10px;text-align:center;color:var(--ok)}
-.init-spin{flex:none;width:10px;height:10px;border:1.5px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:init-spin .8s linear infinite}
+.init-spin{flex:none;width:10px;height:10px;border:1.5px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:init-spin .8s steps(16) infinite}
 @keyframes init-spin{to{transform:rotate(360deg)}}
 @media (prefers-reduced-motion:reduce){.init-spin{animation:none;border-top-color:var(--accent)}.init-task{transition:none}}
 .markdown-warning{margin:0 16px 4px;padding:8px 10px;border:1px solid var(--warn);border-radius:8px;background:var(--warn-bg);color:var(--warn-bright);font-size:12px;line-height:1.4}
@@ -240,7 +240,7 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .activity-status.error::before,.activity-status.blocked::before{content:"\2715"}
 .activity-status.stopped::before{content:"\25A0";font-size:10px}
 .activity-status.running::before{content:"";display:inline-block;box-sizing:border-box;width:10px;height:10px;vertical-align:-1px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%}
-.turn-work:not(.done) .activity-status.running::before{animation:init-spin .8s linear infinite}
+.turn-work:not(.done) .activity-status.running::before{animation:init-spin .8s steps(16) infinite}
 .activity-state{flex:none;white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.03em;font-weight:600}
 :is(.activity-status,.activity-state).running{color:var(--warn)}
 :is(.activity-status,.activity-state).ok{color:var(--ok)}
@@ -365,8 +365,9 @@ button.system-one-wrong,.system-one-wrong.marked{flex:none;padding:1px 6px;borde
 .gen.live{border-top-color:transparent;background:var(--accent-tint);border-radius:8px;padding:6px 9px 8px calc(9px + var(--step-indent));margin-left:-9px;margin-right:-9px}
 .gen.live>summary{color:var(--accent);white-space:normal}
 /* The live step's marker: a pulsing accent dot in place of the chevron (the block's own left bar stays the only one). */
-.gen.live>summary::before{content:"";display:inline-block;width:7px;height:7px;margin:0 8px 1px 2px;border-radius:50%;background:var(--accent);vertical-align:middle;animation:step-pulse 1.6s ease-in-out infinite}
-@keyframes step-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 0%,transparent)}}
+.gen.live>summary::before{content:"";display:inline-block;width:7px;height:7px;margin:0 8px 1px 2px;border-radius:50%;background:var(--accent);vertical-align:middle;animation:live-blink 2.4s steps(16) infinite}
+/* Two segments on purpose: steps() applies per segment, so 2 x 16 / 2.4 s = 13 updates/s (docs/internals/web-frontend.md, Frames). */
+@keyframes live-blink{0%,100%{opacity:1}50%{opacity:.45}}
 @media (prefers-reduced-motion:reduce){.gen.live>summary::before{animation:none}}
 /* A step's thinking is a one-line ticker: the newest complete sentence,
    ellipsed to one line (the collapsed .bubble.thinking look, scoped to .gen
@@ -392,10 +393,8 @@ button.system-one-wrong,.system-one-wrong.marked{flex:none;padding:1px 6px;borde
 .outline-fold:hover{color:var(--text-muted)}
 .turn-work.outline>.gen.folded.unfolded{margin-left:var(--step-indent)}
 .gen-text{margin-top:6px;white-space:pre-wrap;word-break:break-word;font-size:15px;line-height:1.55}
-/* The live step's narration box: the complete sentences so far, one per line, three visual lines high (3 × the 1.55 line-height), scrolled to the newest; each new line fades in. */
+/* The live step's narration box: the complete sentences so far, one per line, three visual lines high (3 × the 1.55 line-height), scrolled to the newest; a new line appears at once (its fade was most of a streaming answer's animation cost, docs/internals/web-frontend.md, Frames). */
 .gen-text.streaming>.narration{max-height:4.65em;overflow:auto;scrollbar-width:thin;white-space:normal}
-.narration>.sentence{animation:fadeIn 160ms ease}
-@media (prefers-reduced-motion:reduce){.narration>.sentence{animation:none}}
 .gen:not(.live) .gen-text{font-size:14px;color:var(--text-2)}
 .gen-text:empty{display:none}
 .gen .activity-body{margin-top:6px}
@@ -527,7 +526,7 @@ button.system-one-wrong,.system-one-wrong.marked{flex:none;padding:1px 6px;borde
 .question-relayed a{color:var(--text);font-weight:600}
 .approval-tool{font-weight:700;color:var(--text);margin-bottom:4px}
 .approval-what{margin:0 0 6px;padding:8px 10px;background:var(--bg-inset);border:1px solid var(--warn-border);border-radius:6px;white-space:pre-wrap;word-break:break-all;color:var(--warn-bright);font-size:12.5px}
-.approval-where,.approval-why{font-size:12px;color:var(--text-muted);word-break:break-all}
+.approval-where,.approval-why{font-size:12px;color:var(--text-muted);overflow-wrap:anywhere}
 .approval-why{color:var(--warn-text)}
 .approval-label{color:var(--text-faint)}
 /* A diff (diff_view.js): the approval card's dry run and a tool row's change. */
@@ -763,7 +762,7 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 @keyframes ts-arrive{from{opacity:0;transform:translateY(60px)}}
 .ts-status{flex:none;display:flex;align-items:center;gap:8px;min-width:0;padding:8px 8px 0 14px;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
 .turn-stage.collapsed .ts-status{padding-bottom:8px;cursor:pointer}
-.ts-mark{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);animation:step-pulse 1.6s ease-in-out infinite}
+.ts-mark{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);animation:live-blink 2.4s steps(16) infinite}
 .turn-stage.ended .ts-mark{width:auto;height:auto;background:none;animation:none;font-size:12px;line-height:1}
 .turn-stage[data-phase="answered"] .ts-mark,.turn-stage[data-phase="answered"] .ts-phase{color:var(--ok)}
 .turn-stage[data-phase="canceled"] .ts-mark,.turn-stage[data-phase="canceled"] .ts-phase,.turn-stage[data-phase="waiting for you"] .ts-phase{color:var(--warn-text)}
@@ -814,13 +813,13 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
    its room, read from the top. */
 .ts-asking{max-height:calc(var(--stage-max,60vh) * .35);overflow:auto;scrollbar-width:thin;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;color:var(--narr);border-left:2px solid var(--border-strong);padding-left:10px}
 /* The question room (stage_view.js drawRoom): a model's own question whose asking text overflows that cap. The slot loses its
-   cap and its own scroll, and the stage's one scroll covers the whole reply (the stage's cap rises for the turn, stage_frame.js).
+   cap and its own scroll, and the stage's one scroll covers the whole reply (the stage's cap rises until the next step, stage_frame.js).
    --stage-max also scales the extras, the cloud and the queued slot: a ceiling only, content that fit stays as it is. */
 .turn-stage.question-room .ts-asking{max-height:none;overflow:visible}
 .turn-stage.asking .ts-headline{display:none}
 @keyframes ts-fade{from{opacity:.35}}
 .ts-now{height:var(--ts-now-h);display:flex;align-items:center;gap:8px;min-width:0;padding:0 9px;border-radius:8px;background:var(--accent-tint);font-size:13px}
-.ts-spin{flex:none;width:11px;height:11px;border:2px solid var(--warn);border-right-color:transparent;border-radius:50%;animation:init-spin .8s linear infinite}
+.ts-spin{flex:none;width:11px;height:11px;border:2px solid var(--warn);border-right-color:transparent;border-radius:50%;animation:init-spin .8s steps(16) infinite}
 .ts-idle{flex:none;width:11px;height:11px;border:2px solid var(--border-strong);border-radius:50%}
 .ts-tool{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600;color:var(--accent)}
 .ts-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-2)}
@@ -837,9 +836,12 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 /* Rows that arrive during the turn (cards, queued prompts, commands, notes) and after its end (the end line): capped, own scroll. */
 .ts-extras,.ts-tail{display:flex;flex-direction:column;gap:8px;max-height:calc(var(--stage-max,60vh) * .4);overflow:auto;scrollbar-width:thin}
 .turn-stage.held-wait .ts-extras{max-height:calc(var(--stage-max,60vh) * .7)}
+/* A blocking card is read whole in the stage's one scroll (from its top, stage_frame.js revealTop), not in a smaller scroller of
+   its own: its question and command never sit above a nested view's edge. Answered, the slot has its cap again. */
+.turn-stage.waiting :is(.ts-extras,.ts-tail){max-height:none;overflow:visible}
 /* The card under the live slots stays put from its arrival to the next step: waiting, the slots keep at least their running
    height (the asking text in the headline's place, the tool row's and the trail's room left blank); answered, the height
-   they had while waiting (stage_view.js). */
+   they had while waiting. The next step lets it go with the frame (stage_view.js releaseHeldWait). */
 .turn-stage.waiting .ts-live{min-height:var(--ts-live-h)}
 .turn-stage.held-wait:not(.waiting) .ts-live{min-height:max(var(--ts-live-h),var(--live-held,0px))}
 /* A 1 px mark at the tallest content's end, so the scroll extent never drops while a turn runs (stage_view.js fitFrame). */
@@ -891,8 +893,9 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 .ts-tick.blocked{background:var(--danger-text);opacity:1}
 /* A call the user's Stop cut: the ■ STOPPED rows' amber, still (running blinks). */
 .ts-tick.stopped{background:var(--warn-text);opacity:.8}
-.ts-tick.running{background:var(--warn);opacity:1;animation:ts-blink 1s ease-in-out infinite}
-@keyframes ts-blink{50%{opacity:.35}}
+.ts-tick.running{background:var(--warn);opacity:1;animation:live-blink 2.4s steps(16) infinite}
+/* A blocking card waits: nothing moves, since movement means chi is working. (.ts-spin is in .ts-now, not displayed then; an asking card's turn goes on, no .waiting.) */
+.turn-stage.waiting .ts-mark,.turn-stage.waiting .ts-tick.running,.turn-stage.waiting .gen.live>summary::before,.turn-stage.waiting .turn-work:not(.done) .activity-status.running::before{animation:none}
 .ts-cloud-body{max-height:calc(var(--stage-max,60vh) * .62);overflow:auto;scrollbar-width:thin;border-left:1px solid var(--border);margin-left:6px;padding-left:10px}
 .ts-cloud-body[hidden]{display:none}
 .turn-stage .turn-work{border:0;background:transparent;padding:0;border-radius:0}
@@ -1077,8 +1080,11 @@ button.ws-row:hover:not(:disabled){filter:none}@media(hover:hover){button.ws-row
   .ts-defer{display:none}
   .ts-cancel{padding:1px 8px}
   .ts-trail-item{max-width:24ch}
+  /* An approval's Submit in sight on a phone: its folder, reason and rows a little tighter. */
+  .approval-where,.approval-why{line-height:1.35}
+  .bubble.question.approval .question-option{padding:5px 8px}
 }
-@media (prefers-reduced-motion:reduce){.turn-stage.enter,.ts-arrive,.ts-headline.fresh,.ts-tick.running,.ts-mark,.turn-work:not(.done) .activity-status.running::before{animation:none}.turn-stage.leaving,#center.reserve-easing #history{transition:none}}
+@media (prefers-reduced-motion:reduce){.turn-stage.enter,.ts-arrive,.ts-headline.fresh,.ts-tick.running,.ts-mark,.ts-spin,.turn-work:not(.done) .activity-status.running::before{animation:none}.turn-stage.leaving,#center.reserve-easing #history{transition:none}}
 #infoBar{display:flex;background:transparent;border-radius:0 0 16px 16px;color:var(--text-2);gap:10px;align-items:flex-start;flex-wrap:wrap;flex-shrink:0;transition:opacity 280ms ease}
 #infoBar.visible{display:flex}
 /* The meta row keeps its room: with a plain flex:1 the bar's own buttons (continue, archive, stop session, delete)
@@ -1340,44 +1346,75 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 @media(hover:hover){.ctx-pop-actions button:hover{color:var(--text-hover)}}
 .ctx-pop-actions .ctx-pop-detach{color:var(--text-muted);background:transparent}
 @media(hover:hover){.ctx-pop-actions .ctx-pop-detach:hover{color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}}
-/* Phones: the footer is one line; its meta scrolls sideways (all of it stays reachable). */
+/* ⋯ (more_sheet.js): a phone's alone. */
+#infoBar #infoMoreBtn{display:none}
+/* Phones: the footer is one line with no swiping: id, status, model (it gives way first), ⚙ and ⋯. The other chips and the
+   four buttons stay in the DOM, unseen: ⋯'s sheet clicks them, and what they open is placed at ⋯ (chip_popover.js). */
 @media(max-width:600px){
   #infoBar{flex-wrap:nowrap;align-items:center;gap:6px;padding:6px 10px 8px}
-  #infoBar .meta{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
-  #infoBar .meta::-webkit-scrollbar{display:none}
+  #infoBar .info{flex:1 1 0}
+  #infoBar .meta{flex-wrap:nowrap;white-space:nowrap;gap:6px}
+  #infoBar .meta .id{padding:2px 3px}
+  #infoBar .meta .status{padding:2px 5px}
   #infoBar .meta>*,#infoBar .meta .bar-group>*{flex-shrink:0}
-  /* One scrolling run, as before the groups: their chips are the meta's (the orders below reach across them). */
+  /* One run: the groups' chips are the meta's. */
   #infoBar .meta .bar-group{display:contents}
   #infoBar .meta .bar-sep{display:none}
-  #infoBar .meta .id{order:-2}
-  #infoBar .meta .status{order:-1}
+  #infoBar .meta :is(.tools-chip,.notes-chip,.mem-chip,.ws-chip,.chain-link,.parent,.children-chip,.participants-chip,.dir,.ctx,.speed,.session-time,.worker-badge){display:none}
+  #infoBar>button:not(#infoMoreBtn){display:none}
+  #infoBar .meta .status+.model{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
   /* ⚙ alone, the start page's dot when the session set its own (its values in the tooltip and accessible name). */
   #infoBar .meta .settings-chip .sc-own{display:none}
-  #infoBar .meta .settings-chip.own{padding-right:10px}
+  #infoBar .meta .settings-chip.own{padding-right:6px}
   #infoBar .meta .settings-chip.own::after{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
-  /* The memory chip right after the status (same order, later in the DOM): the meta scrolls, and only its start is in sight. */
-  #infoBar .meta .mem-chip,#infoBar .meta .ws-chip{order:-1}
-  /* A parent's children chip too: its waiting part is what to see. */
-  #infoBar .meta .children-chip{order:-1}
-  /* A chain's ← → links too: the way to the other days. */
-  #infoBar .meta .chain-link{order:-1}
-  /* ⚙ too (an icon here): after the model chip a long model name would push it out of sight. */
-  #infoBar .meta .settings-chip{order:-1}
-  /* The chips get a second line of their own (only when there are some), scrolling sideways. */
+  /* ⚙ and ⋯: bigger to the thumb than to the eye. 2 px of negative margin keep the row its height, and each one's ::before reaches the foot's edges for the tap. */
+  #infoBar .meta .settings-chip{margin:-2px 0 -2px auto;min-width:32px;min-height:30px;justify-content:center}
+  #infoBar .meta .settings-chip::before,#infoBar #infoMoreBtn::before{content:"";position:absolute;inset:-4px -3px -6px}
+  #infoBar #infoMoreBtn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:30px;margin:-2px 0;padding:0;font-size:16px;line-height:1;letter-spacing:1px;color:var(--text-3);background:var(--bg-raised);border:1px solid var(--border-strong)}
+  #infoBar #infoMoreBtn[aria-expanded="true"]{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+  #infoBar #infoMoreBtn[data-attention]::after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
+  #infoBar #infoMoreBtn[data-attention="warn"]::after{background:var(--warn-bright)}
+  /* The attached context's chips get a second line of their own (only when there are some), scrolling sideways. */
   #infoBar:has(#contextChips:not([hidden])){flex-wrap:wrap;row-gap:4px}
-  #contextChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
+  #infoBar:has(#contextChips:not([hidden])) .info{flex-basis:calc(100% - 44px)}
+  #contextChips{order:1;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
   #contextChips::-webkit-scrollbar{display:none}
   #contextChips>*{flex-shrink:0}
   #infoBar button{padding:4px 8px}
-  /* Icon-only buttons (the words stay as the accessible name, the title says more): the meta gets the width. */
-  #infoBar>button{font-size:0;line-height:0;padding:5px 7px}
-  #infoBar>button::before{content:"";display:block;width:14px;height:14px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
-  #infoBar #infoArchiveBtn{--icon:var(--icon-archive)}
-  #infoBar #infoArchiveBtn.archived{--icon:var(--icon-unarchive)}
-  #infoBar #infoContinueBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5'/%3E%3C/svg%3E")}
-  #infoBar #infoStopBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v5.5M4.6 4.4a5 5 0 1 0 6.8 0'/%3E%3C/svg%3E")}
-  #infoBar #infoDeleteBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h11M6 4.5V2.75h4V4.5M4 4.5l.7 8.6a1 1 0 0 0 1 .9h4.6a1 1 0 0 0 1-.9l.7-8.6M6.75 7.25v4.5M9.25 7.25v4.5'/%3E%3C/svg%3E")}
 }
+/* ⋯'s sheet (more_sheet.js): a row per chip the phone's bar folded away, the telemetry, the actions. */
+.more-sheet{gap:2px;font-size:13.5px}
+.more-sheet.sheet{border-radius:14px;padding:10px 14px 12px;box-shadow:0 0 0 100vmax color-mix(in srgb,var(--bg) 62%,transparent)}
+.more-grip{flex:none;align-self:center;width:34px;height:4px;border-radius:2px;background:var(--border-strong);margin-bottom:4px}
+.more-rows{display:flex;flex-direction:column}
+.more-row{display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;width:100%;min-height:40px;padding:6px 0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
+div.more-row{cursor:default}
+.more-label{flex:none;color:var(--text-3)}
+.more-value{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0}
+.more-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.more-row.warn .more-text{color:var(--warn-text);font-weight:600}
+a.more-row .more-text{color:var(--accent)}
+.more-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
+.more-dot.warn{background:var(--warn-bright)}
+.more-sheet .chip-icon{flex:none;width:12px;height:12px;font-size:0;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
+.more-sheet .tc-kit{--icon:var(--icon-toolkit)}
+.more-info{padding:6px 0 8px;border-bottom:1px solid var(--border);color:var(--text-muted);font-size:12px;line-height:1.45;overflow-wrap:anywhere}
+.more-restart{flex:none;min-height:30px;padding:2px 12px;border-radius:8px;font-size:12px;font-weight:600;background:var(--bg-raised);color:var(--warn-bright);border:1px solid var(--warn-border)}
+.more-restart:disabled{opacity:.7;cursor:default}
+.more-telemetry{display:flex;align-items:baseline;gap:6px;padding:8px 0;font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
+.more-telemetry>*{flex:none}
+.more-telemetry>*+*::before{content:"·";margin-right:6px}
+/* Its start gives way, as the bar's folder does: the end names the project. Its separator goes with it, so it isn't the clipped side's. */
+.more-telemetry .more-dir{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,monospace;direction:rtl;text-align:left}
+.more-telemetry .more-dir::before{content:none}
+.more-telemetry .more-clock::after{content:"·";margin-left:6px}
+.more-actions{display:flex;gap:6px}
+.more-act{flex:1 1 0;min-width:0;min-height:40px;padding:0 2px;border-radius:9px;font-size:12px;font-weight:600;color:var(--text-2);background:transparent;border:1px solid var(--border-strong)}
+.more-act.accent{color:var(--accent);background:var(--bg-raised);border-color:var(--accent-border)}
+.more-act:disabled{opacity:.7;cursor:progress}
+.more-act.stop{color:var(--warn-text)}
+.more-act.delete{color:var(--danger-text)}
+@media(hover:hover){.more-row:hover .more-label{color:var(--text)}.more-act:hover:not(:disabled){background:var(--bg-hover)}}
 #empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-muted);padding:24px;text-align:center;background:color-mix(in srgb,var(--bg) 35%,transparent);z-index:1}
 #empty.hidden{display:none !important}
 /* Start page (no session): the composer alone, centered; no info bar. */
@@ -1702,6 +1739,7 @@ body.all-view #allHead{display:flex}
 .card .stopped-badge,.family-row .stopped-badge{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0;background:var(--warn);color:var(--bg)}
 .status.running{background:var(--ok-bg);color:var(--ok-text)}
 .status.idle{background:var(--bg-raised)}
+.status.waiting{background:var(--warn-bg);color:var(--warn-text)}
 .status.completed{background:var(--accent-bg);color:var(--accent)}
 .status.error{background:var(--danger-bg-dim);color:var(--danger-text)}
 .card .owner,.family-row .owner{font-size:11px;padding:2px 6px;border-radius:999px}
@@ -1793,6 +1831,7 @@ a{color:var(--accent)}
         <button class="ghost" id="infoArchiveBtn" title="Archive: hide from the lists, keep for good" style="display:none">archive</button>
         <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop session</button>
         <button class="ghost" id="infoDeleteBtn" title="Delete session (for good)" style="display:none">delete</button>
+        <button type="button" class="ghost" id="infoMoreBtn" data-anchor-stand-in aria-label="More" title="More" aria-haspopup="dialog" aria-expanded="false"><span aria-hidden="true">⋯</span></button>
       </div>
     </div>
   </section>

data/lib/samagotchi/web/public/info_bar_model.js

@@ -65,11 +65,12 @@ export function infoButtons({ id, state, chain, archived, continuing, streaming
 // @param badge workerBadgeFor's, or null
 // @param restarting whether this session's Restart is under way
 // @param running whether its turn runs (the session clock ticks)
+// @param waiting whether the session waits on the user (app.js sessionWaits)
 // @param workingSet web.working_set on: the chip's {n, changed} (n 0 while
 //   the set is empty); undefined: off (the mem chip shows)
 // @param participants the participants chip (participants_panel.js
 //   chipModel), null before the list is read
-export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting, running, workingSet = undefined, participants = null }) {
+export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting, running, waiting = false, workingSet = undefined, participants = null }) {
   const tokens = state.timing.tokens;
   const ctxTip = ctxBarTip(tokens, state.timing.memoryIndex,
                            { tokens: state.ctxWindow, source: state.ctxWindowSource, pct: state.ctxPct,
@@ -85,7 +86,8 @@ export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, res
   const parentChip = delegatedBy(state.parentId, sessions.find((x) => x.id === state.parentId) || null);
   return {
     id,
-    status: state.status,
+    // Its turn runs but a card blocks it: the word `chi sessions list` has for it.
+    status: running && waiting ? "waiting" : state.status,
     model: modelLabel(state.model, ...(state.served || [])),
     // A link of a session chain: ← the previous link, → the next one (each
     // only while the list holds it).
@@ -122,12 +124,12 @@ export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, res
 // The whole bar for the open session +id+ (null: the start page, no line).
 // @param sessions the page's list; +continuing+, +restarting+: Sets of ids
 // @return {buttons, bar}
-export function sessionBar({ id, state, sessions, versions, cardTitle, continuing, restarting, streaming, running, workingSet = undefined, participants = null }) {
+export function sessionBar({ id, state, sessions, versions, cardTitle, continuing, restarting, streaming, running, waiting = false, workingSet = undefined, participants = null }) {
   const chain = id ? chainNeighbours(sessions, id, { continues: state.continues }) : { prev: null, next: null };
   const archived = !!sessions.find((s) => s.id === id)?.archived;
   const buttons = infoButtons({ id, state, chain, archived, continuing: continuing.has(id), streaming });
   if (!id) return { buttons, bar: null };
   const badge = workerBadgeFor(id, state, versions);
-  const bar = infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting: restarting.has(id), running, workingSet, participants });
+  const bar = infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting: restarting.has(id), running, waiting, workingSet, participants });
   return { buttons, bar };
 }

data/lib/samagotchi/web/public/more_sheet.js

@@ -0,0 +1,212 @@
+// The phone's session bar keeps id, status, model and ⚙ on its row; the rest
+// sits behind ⋯ (#infoMoreBtn, index.html's CSS shows it at the page's phone
+// width only). This is its bottom sheet, on chip_popover.js' shell as the ⚙
+// panel is: a row for each chip the row folded away, one telemetry line, and
+// the bar's four actions.
+//
+// The chips and the buttons stay where they are, display:none: a row or an
+// action clicks the real one (`go:`), so its handlers, confirmations and state
+// have one home (session_actions.js' Invite toast clicks the participants chip
+// the same way). What a chip then opens places itself and gives focus back at
+// ⋯, chip_popover.js' stand-in for an anchor with no box ([data-anchor-stand-in]).
+// A chip with a tooltip and no popover (🧰, memories, model notes) unfolds its
+// tooltip under the row (`info:`): a phone has no tooltips. The model has a row
+// too: its chip stays on the bar but is the first to give way, cut short.
+//
+// app.js's updateInfoBar calls update() on every redraw (every second while a
+// turn runs): lit writes only what changed, into slots that keep their place,
+// so an open sheet stays current and keeps its focus. A module of its own: the
+// page's modules are cached at unversioned URLs (docs/internals/web-frontend.md).
+
+import { createChipPopover, SHEET_TALL } from "./chip_popover.js";
+import { memChipText } from "./format.js";
+import { CLOCK_NONE, memoriesTooltip, NEXT, PREV } from "./info_bar.js";
+import { chipModel as toolkitChip } from "./toolkit_chip.js";
+import { html, nothing, render } from "./vendor/lit-html.js";
+
+// The real element each `go:` act clicks.
+const TARGETS = {
+  workingSet: "#infoText .ws-chip",
+  participants: "#infoText .participants-chip",
+  delegates: "#infoText .children-chip",
+  restart: "#infoText .worker-restart",
+  continue: "#infoContinueBtn",
+  archive: "#infoArchiveBtn",
+  stop: "#infoStopBtn",
+  delete: "#infoDeleteBtn",
+};
+
+// Every row, in the sheet's order; each draws into a slot of its own.
+const ROW_KEYS = ["model", "toolkit", "workingSet", "memories", "participants", "prev", "next", "parent", "delegates", "notes", "worker"];
+const ACTION_KEYS = ["continue", "archive", "stop", "delete"];
+
+const short = (id) => String(id).slice(0, 8);
+const plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
+const capital = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+
+function toolkitRow(toolkit) {
+  const chip = toolkitChip(toolkit.summary, toolkit.defaultKit);
+  const kit = chip.text || toolkit.summary?.label || toolkit.summary?.name || toolkit.defaultKit || "full";
+  return { key: "toolkit", label: "Toolkit", value: kit, icon: "tc-kit", info: chip.title };
+}
+
+function workingSetRow({ n, changed }) {
+  const count = n ? plural(n, "item") : "empty";
+  return { key: "workingSet", label: "Working set", value: changed ? `${count}, changed` : count, go: "workingSet", attention: changed ? "accent" : null };
+}
+
+function participantsRow(chip) {
+  return { key: "participants", label: "Participants", value: chip.count ? chip.text : "Invite", go: "participants", attention: chip.present ? "accent" : null };
+}
+
+function delegatesRow(kids) {
+  const value = kids.waitingText ? `${kids.text} · ${kids.waitingText}` : kids.text;
+  return { key: "delegates", label: "Delegates", value, go: "delegates", attention: kids.waitingText ? "warn" : null };
+}
+
+// The model's title unfolds only when it says more than the row already does
+// (a name cut at 40, what the server serves instead).
+function modelRow({ text, title }) {
+  return { key: "model", label: "Model", value: text, info: title === text ? null : title };
+}
+
+function workerRow({ badge, busy }) {
+  const row = { key: "worker", label: "Worker", value: badge.text, attention: "warn" };
+  return badge.restart ? { ...row, restart: { busy } } : { ...row, info: badge.title };
+}
+
+// The rows +bar+ (info_bar_model.js infoBarModel) has, each only when the
+// session has its chip: {key, label, value, and how a tap acts: go (a TARGETS
+// key), href, info (the text it unfolds), restart ({busy}); attention: "accent"
+// or "warn" when the chip asks for a look; icon: a chip icon's class}.
+export function moreRows(bar) {
+  if (!bar) return [];
+  const memories = bar.memories || [];
+  return [
+    bar.model && modelRow(bar.model),
+    bar.toolkit && toolkitRow(bar.toolkit),
+    bar.workingSet?.chip && workingSetRow(bar.workingSet.chip),
+    !bar.workingSet && memories.length > 0
+      && { key: "memories", label: "Memories", value: memChipText(memories), info: memoriesTooltip(memories, bar.preloaded, bar.muted) },
+    bar.participants && participantsRow(bar.participants),
+    bar.chain?.prev && { key: "prev", label: "Previous link", value: `${PREV} ${bar.chain.prev.date || short(bar.chain.prev.id)}`, href: bar.chain.prev.id },
+    bar.chain?.next && { key: "next", label: "Next link", value: `${bar.chain.next.date || short(bar.chain.next.id)} ${NEXT}`, href: bar.chain.next.id },
+    bar.parent && { key: "parent", label: "Delegated by", value: `↑ ${short(bar.parent.id)}`, href: bar.parent.id },
+    bar.kids && delegatesRow(bar.kids),
+    bar.notes && { key: "notes", label: "Model notes", value: bar.notes.text.replace(/^notes: /, ""), info: bar.notes.title },
+    bar.worker?.badge && workerRow(bar.worker),
+  ].filter(Boolean);
+}
+
+// ⋯'s dot: what behind it asks for a look. {kind} is the strongest ("warn":
+// a delegate waiting, an older worker; "accent": the working set changed, a
+// participant here; null: none), {label} ⋯'s accessible name, which says why.
+export function moreAttention(bar) {
+  const rows = moreRows(bar).filter((row) => row.attention);
+  const kind = rows.some((row) => row.attention === "warn") ? "warn" : rows.length ? "accent" : null;
+  const why = rows.map((row) => `${row.label}: ${row.value}`).join(", ");
+  return { kind, label: why ? `More: ${why}` : "More" };
+}
+
+// The four actions as the sheet draws them from +buttons+ (info_bar_model.js
+// infoButtons), each with the rule its button has; Continue takes the accent
+// on an archived session, where it is the thing to do.
+export function moreActions(buttons) {
+  const all = [
+    buttons.continue.shown && { key: "continue", text: capital(buttons.continue.text.replace(/ →$/, "")), disabled: buttons.continue.disabled, accent: !!buttons.archive.archived },
+    buttons.archive.shown && { key: "archive", text: capital(buttons.archive.text), title: buttons.archive.title },
+    buttons.stop.shown && { key: "stop", text: "Stop" },
+    buttons.delete.shown && { key: "delete", text: "Delete" },
+  ];
+  return all.filter(Boolean);
+}
+
+function rowBody(row) {
+  const dot = row.attention ? html`<span class=${`more-dot ${row.attention}`} aria-hidden="true"></span>` : nothing;
+  const icon = row.icon ? html`<span class=${`chip-icon ${row.icon}`} aria-hidden="true"></span>` : nothing;
+  return html`<span class="more-label">${row.label}</span><span class="more-value">${dot}${icon}<span class="more-text">${row.value}</span></span>`;
+}
+
+function rowTemplate(row, { shownInfo, hash }) {
+  const cls = `more-row${row.attention ? ` ${row.attention}` : ""}`;
+  if (row.href) return html`<a class=${cls} href=${hash(row.href)} data-act="link">${rowBody(row)}</a>`;
+  if (row.go) return html`<button type="button" class=${cls} data-act=${`go:${row.go}`}>${rowBody(row)}</button>`;
+  if (row.restart) {
+    return html`<div class=${cls}>${rowBody(row)}<button type="button" class="more-restart" data-act="go:restart" ?disabled=${row.restart.busy}>${row.restart.busy ? "restarting…" : "Restart"}</button></div>`;
+  }
+  if (!row.info) return html`<div class=${cls}>${rowBody(row)}</div>`;
+  const open = shownInfo === row.key;
+  return html`<button type="button" class=${cls} data-act=${`info:${row.key}`} aria-expanded=${open ? "true" : "false"}>${rowBody(row)}</button>${open ? html`<div class="more-info">${row.info}</div>` : nothing}`;
+}
+
+// The sheet for +bar+ and +buttons+. +shownInfo+: the key of the row whose
+// tooltip is unfolded; +hash+: a session's id to its link.
+export function moreSheetTemplate({ bar, buttons, shownInfo = null, hash }) {
+  const rows = moreRows(bar);
+  const actions = moreActions(buttons);
+  const speed = bar.speed;
+  return html`<div class="more-grip" aria-hidden="true"></div
+    ><div class="more-rows">${ROW_KEYS.map((key) => {
+      const row = rows.find((r) => r.key === key);
+      return row ? rowTemplate(row, { shownInfo, hash }) : nothing;
+    })}</div
+    ><div class="more-telemetry"><span class="more-ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span
+      >${speed ? html`<span class="more-speed" title=${speed.tip}>${speed.text}</span>` : nothing
+      }<span class="more-clock">${bar.clock || CLOCK_NONE}</span
+      ><span class="more-dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span></div
+    ><div class="more-actions">${ACTION_KEYS.map((key) => {
+      const act = actions.find((a) => a.key === key);
+      if (!act) return nothing;
+      return html`<button type="button" class=${`more-act ${key}${act.accent ? " accent" : ""}`} data-act=${`go:${key}`}
+        title=${act.title || nothing} ?disabled=${!!act.disabled}>${act.text}</button>`;
+    })}</div>`;
+}
+
+// ⋯'s sheet. el: where ⋯ is drawn (#infoBar); button: ⋯ itself; session(): the
+// open session's id; hash: a session's id to its link (route.js sessionHash).
+// @return {update({bar, buttons}), close, isOpen, pop}
+export function createMoreSheet({ el, button, session = () => null, hash, doc = document, win = window }) {
+  let bar = null;
+  let buttons = null;
+  let shownInfo = null;
+
+  function draw() {
+    render(moreSheetTemplate({ bar, buttons, shownInfo, hash }), shell.pop);
+  }
+
+  const shell = createChipPopover({
+    id: "moreSheet", className: "ctx-popover more-sheet", width: 400, el, anchor: `#${button.id}`,
+    summary: () => bar, session, show: () => draw(), sheet: true, sheetShare: SHEET_TALL, label: "More about this session",
+    onOpen: () => shell.pop.querySelector(".more-row, .more-act")?.focus(),
+    onClose: () => { shownInfo = null; },
+    onAct: (act) => {
+      const [what, name] = act.split(":");
+      if (what === "info") {
+        shownInfo = shownInfo === name ? null : name;
+        return draw();
+      }
+      // After this click is done: it goes on to the document, where what the
+      // target opens would take it as a click outside, and a link still has
+      // to follow its href.
+      globalThis.setTimeout(() => {
+        shell.close();
+        if (what === "go") doc.querySelector(TARGETS[name])?.click();
+      }, 0);
+    },
+    doc, win,
+  });
+
+  function update(next) {
+    bar = next.bar;
+    buttons = next.buttons;
+    const { kind, label } = moreAttention(bar);
+    if (kind) button.dataset.attention = kind;
+    else delete button.dataset.attention;
+    button.setAttribute("aria-label", label);
+    button.title = label;
+    // Another session, or none, closes it; else the open sheet follows.
+    shell.refresh();
+  }
+
+  return { update, close: () => shell.close(), isOpen: shell.isOpen, pop: shell.pop };
+}

data/lib/samagotchi/web/public/question_cards.js

@@ -111,13 +111,18 @@ export function createQuestionCards({
     }
 
     const options = Array.isArray(pq.options) ? pq.options : [];
+    // An approval's last option denies: here that is the Deny button beside
+    // Submit, one tap, so no radio says it again. The option stays in the
+    // data (a terminal, chi answer and a relay answer it by its label).
+    const denies = approval && options[options.length - 1] === "Deny";
+    const shown = denies ? options.slice(0, -1) : options;
     if (stepLimit) {
       renderStepLimitActions(card, pq, options);
-    } else if (options.length) {
+    } else if (shown.length) {
       const list = doc.createElement("div");
       list.className = "question-options";
       const inputType = pq.multi_select ? "checkbox" : "radio";
-      options.forEach((label, i) => {
+      shown.forEach((label, i) => {
         const row = doc.createElement("label");
         row.className = "question-option";
         const input = doc.createElement("input");
@@ -155,6 +160,7 @@ export function createQuestionCards({
     if (pq.allow_freeform) {
       freeformInput = doc.createElement("input");
       freeformInput.type = "text";
+      noContactFill(freeformInput);
       freeformInput.className = "question-freeform";
       freeformInput.placeholder = approval ? "Reason for the model (with Deny, or alone to deny)…" : "Other…";
       card.appendChild(freeformInput);
@@ -201,7 +207,13 @@ export function createQuestionCards({
       err.classList.add("hidden");
       submit.disabled = true;
       dismiss.disabled = true;
-      api.dismissQuestion(sessionId(), pq.id).catch((e) => {
+      // A reason typed in the box goes with the Deny: the answer carries it,
+      // a dismissal has no text.
+      const reason = denies && freeformInput ? freeformInput.value.trim() : "";
+      const sent = reason
+        ? api.sendAnswer(sessionId(), { id: pq.id, selected: ["Deny"], freeform: reason })
+        : api.dismissQuestion(sessionId(), pq.id);
+      sent.catch((e) => {
         submit.disabled = false;
         dismiss.disabled = false;
         err.textContent = answerErrorText(e);
@@ -228,6 +240,15 @@ export function createQuestionCards({
     focusWhenIdle(card, pq.id, { staged });
   }
 
+  // A card's text field isn't a contact form: what iOS Safari respects
+  // against its "AutoFill Contact" bar (no autocomplete, a name with no
+  // contact word in it). Autocorrect stays: the reader writes prose here.
+  function noContactFill(input) {
+    input.setAttribute("autocomplete", "off");
+    input.setAttribute("autocorrect", "on");
+    input.name = "chi-card-note";
+  }
+
   function isPlainEnter(e) {
     return e.key === "Enter" && !e.isComposing && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey;
   }
@@ -258,6 +279,7 @@ export function createQuestionCards({
   function renderStepLimitActions(card, pq, options) {
     const reason = doc.createElement("input");
     reason.type = "text";
+    noContactFill(reason);
     reason.className = "question-freeform continue-reason";
     reason.placeholder = CONTINUE_REASON_PLACEHOLDER;
     const err = doc.createElement("div");
@@ -590,6 +612,7 @@ export function createQuestionCards({
     no.addEventListener("click", () => answer(continueLine("no")));
     const reason = doc.createElement("input");
     reason.type = "text";
+    noContactFill(reason);
     reason.className = "continue-reason";
     reason.placeholder = "Why not? (the model reads it)";
     const noBecause = doc.createElement("button");

data/lib/samagotchi/web/public/ref_scan.js

@@ -21,8 +21,10 @@ const REF_OR_PATH = /(?<![\w./@+~\\:-])(?<path>[\w./@+~-]*[\w@+~-])(?::(?<from>\
 const PATH_ALONE = /^(?<path>[\w./@+~-]*[\w@+~-])$/;
 const URL_SPAN = /[a-z][a-z0-9+.-]*:\/\/\S+/gi;
 const MARKDOWN_LINK = /\[[^\]]*\]\([^)]*\)/g;
-// A fenced code block's opening line (up to 3 spaces, then ``` or ~~~).
-const FENCE_OPEN = /^ {0,3}(`{3,}|~{3,})/;
+// A fenced code block's opening line (up to 3 spaces, then ``` or ~~~). A
+// backtick fence's info string carries no backtick: "```foo``` first" is
+// inline code, and as a fence it would stay open over the rest of the text.
+const FENCE_OPEN = /^ {0,3}(`{3,}(?![^\n]*`)|~{3,})/;
 // Elements whose text is never scanned: code blocks, links (a github-pr
 // PR link stays the PR's), a ref already made.
 const SKIP = "pre, a, [data-ref-kind]";