samagotchi 0.3.0 → 0.5.0

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

@@ -5,17 +5,18 @@
 <title>Chi</title>
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <style>
-:root{--bg:#0b0d11;--bg-panel:#151821;--bg-inset:#0f1115;--bg-raised:#22262f;--bg-hover:#1b1f27;--border:#1f232b;--border-strong:#2d333f;--text:#e6e8eb;--text-bright:#f0f3f6;--text-2:#c9d1d9;--text-3:#9aa4b2;--text-muted:#8b949e;--text-faint:#6e7681;--accent:#7aa5ff;--accent-strong:#1f6feb;--accent-bg:#1b2336;--accent-ring:rgba(122,165,255,.18);--primary:#2a68d1;--ok:#3fb950;--ok-text:#7ee787;--ok-bg:#1a2e1a;--warn:#d29922;--warn-text:#e3b341;--warn-bright:#f2cc60;--warn-bg:#2b2108;--warn-border:#6b5416;--danger:#f85149;--danger-bg:#da3633;--danger-text:#ff7b72;--danger-bg-dim:#3d1f1f;--think:#8957e5;--think-text:#d2a8ff;--accent-border:#223150;--accent-tint:color-mix(in srgb,var(--accent) 7%,transparent);
-  --glass-bg:color-mix(in srgb,var(--bg-panel) 70%,transparent);--glass-border:rgba(255,255,255,.08);--glass-highlight:rgba(255,255,255,.05);--glass-shadow:0 8px 30px rgba(0,0,0,.35)}
+:root{--bg:#0b0d11;--bg-panel:#151821;--bg-inset:#0f1115;--bg-raised:#22262f;--bg-hover:#1b1f27;--border:#1f232b;--border-strong:#2d333f;--text:#e6e8eb;--text-bright:#f0f3f6;--text-2:#c9d1d9;--text-3:#9aa4b2;--text-muted:#8b949e;--text-faint:#6e7681;--accent:#7aa5ff;--accent-strong:#1f6feb;--accent-bg:#1b2336;--accent-ring:rgba(122,165,255,.18);--primary:#2a68d1;--ok:#3fb950;--ok-text:#7ee787;--ok-bg:#1a2e1a;--warn:#d29922;--warn-text:#e3b341;--warn-bright:#f2cc60;--warn-bg:#2b2108;--warn-border:#6b5416;--danger:#f85149;--danger-bg:#da3633;--danger-text:#ff7b72;--danger-bg-dim:#3d1f1f;--think:#8957e5;--think-text:#d2a8ff;--accent-border:#223150;--accent-tint:color-mix(in srgb,var(--accent) 7%,transparent);--narr:color-mix(in srgb,var(--accent) 38%,var(--text-muted));
+  --glass-bg:color-mix(in srgb,var(--bg-panel) 70%,transparent);--glass-border:rgba(255,255,255,.08);--glass-highlight:rgba(255,255,255,.05);--glass-shadow:0 8px 30px rgba(0,0,0,.35);
+  --diff-add-bg:rgba(63,185,80,.14);--diff-add-text:#aff5b4;--diff-del-bg:rgba(248,81,73,.14);--diff-del-text:#ffc1bc}
 *{box-sizing:border-box;margin:0;padding:0}
 body{font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1100px 700px at 8% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),radial-gradient(900px 700px at 100% 100%,color-mix(in srgb,var(--think) 9%,transparent),transparent 70%),var(--bg);background-attachment:fixed;color:var(--text);height:100vh;display:flex;flex-direction:column}
 /* Glass: the composer card, the strip cards, the all-sessions cards and the question cards (by selector, so app.js is untouched). */
-#dock,#topStrip .card,#allList .card,.bubble.question,.bubble.plugin-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow)}
+#dock,.turn-stage,.dock-card,#topStrip .card,#allList .card,.bubble.question,.bubble.plugin-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow)}
 #topStrip .card:hover,#allList .card:hover{background:color-mix(in srgb,var(--bg-hover) 75%,transparent);border-color:rgba(255,255,255,.14)}
 #topStrip .card.active,#allList .card.active{background:color-mix(in srgb,var(--accent-bg) 75%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
-@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#dock,#topStrip .card,#allList .card,#allHead input{background:var(--bg-panel)}.bubble.question{background:color-mix(in srgb,var(--warn) 7%,var(--bg-panel))}.bubble.plugin-card{background:color-mix(in srgb,var(--accent) 6%,var(--bg-panel))}}
-@media (prefers-reduced-transparency:reduce){#dock,#topStrip .card,#allList .card,#allHead input{background:var(--bg-panel);-webkit-backdrop-filter:none;backdrop-filter:none}.bubble.question{background:color-mix(in srgb,var(--warn) 7%,var(--bg-panel));-webkit-backdrop-filter:none;backdrop-filter:none}.bubble.plugin-card{background:color-mix(in srgb,var(--accent) 6%,var(--bg-panel));-webkit-backdrop-filter:none;backdrop-filter:none}}
-body.no-glass #dock,body.no-glass #topStrip .card,body.no-glass #allList .card,body.no-glass #allHead input{background:var(--bg-panel);-webkit-backdrop-filter:none;backdrop-filter:none}
+@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#dock,.turn-stage,.dock-card,#topStrip .card,#allList .card,#allHead input{background:var(--bg-panel)}.bubble.question{background:color-mix(in srgb,var(--warn) 7%,var(--bg-panel))}.bubble.plugin-card{background:color-mix(in srgb,var(--accent) 6%,var(--bg-panel))}}
+@media (prefers-reduced-transparency:reduce){#dock,.turn-stage,.dock-card,#topStrip .card,#allList .card,#allHead input{background:var(--bg-panel);-webkit-backdrop-filter:none;backdrop-filter:none}.bubble.question{background:color-mix(in srgb,var(--warn) 7%,var(--bg-panel));-webkit-backdrop-filter:none;backdrop-filter:none}.bubble.plugin-card{background:color-mix(in srgb,var(--accent) 6%,var(--bg-panel));-webkit-backdrop-filter:none;backdrop-filter:none}}
+body.no-glass #dock,body.no-glass .turn-stage,body.no-glass .dock-card,body.no-glass #topStrip .card,body.no-glass #allList .card,body.no-glass #allHead input{background:var(--bg-panel);-webkit-backdrop-filter:none;backdrop-filter:none}
 body.no-glass .bubble.question{background:color-mix(in srgb,var(--warn) 7%,var(--bg-panel));-webkit-backdrop-filter:none;backdrop-filter:none}
 body.no-glass .bubble.plugin-card{background:color-mix(in srgb,var(--accent) 6%,var(--bg-panel));-webkit-backdrop-filter:none;backdrop-filter:none}
 button,input,textarea,select{font:inherit}
@@ -130,9 +131,15 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .activity-status,.activity-tool{flex-shrink:0;white-space:nowrap}
 .activity-params{min-width:0}
 .activity-output{flex:1 1 100%;min-width:0}
+/* An edit/write's change: a closed "diff +3 −1" under the output, lined up with it. */
+.activity-diff{flex:1 1 100%;min-width:0;margin:2px 0 2px 60px}
+.activity-diff>summary{cursor:pointer;font-size:12px;color:var(--text-muted);width:max-content;font-variant-numeric:tabular-nums}
+.activity-diff>summary:hover{color:var(--text-2)}
+.activity-diff[open]>summary{margin-bottom:4px}
 @media(max-width:600px){
   .activity-params{flex:1 1 0}
   .activity-output{margin-left:0}
+  .activity-diff{margin-left:0}
 }
 .bubble.thinking{border-left:3px solid var(--think);background:color-mix(in srgb,var(--think) 6%,var(--bg-panel));padding:8px 12px}
 .bubble.thinking:not([open]),.bubble.activity:not([open]){padding:3px 10px;background:transparent;border-color:transparent;align-self:flex-start;border-radius:6px;transition:background .12s ease}
@@ -145,7 +152,7 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .bubble.thinking>summary::before{content:"▸ ";color:var(--think)}
 .bubble.thinking[open]>summary::before{content:"▾ "}
 .thinking-body{margin-top:6px;font-size:13px;color:var(--text-3);white-space:pre-wrap;word-break:break-word;font-style:italic;max-height:240px;overflow:auto}
-/* Turn view (web.turn_view): one block per turn, its steps as collapsed rows, the live one open at the bottom. */
+/* Turn view (web.view: turn, and inside the stage): one block per turn, its steps as collapsed rows, the live one open at the bottom. */
 .turn-work{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;background:var(--bg-panel);padding:8px 12px;font-size:14px}
 .turn-work>summary{cursor:pointer;color:var(--text-muted);font-size:13px;font-weight:600;user-select:none;list-style:none}
 .turn-work>summary::-webkit-details-marker{display:none}
@@ -253,6 +260,20 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .approval-where,.approval-why{font-size:12px;color:var(--text-muted);word-break:break-all}
 .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. */
+.approval-diff{margin:0 0 6px}
+.diff{margin:0;padding:4px 0;background:var(--bg-inset);border:1px solid var(--border);border-radius:6px;font-size:12px;line-height:1.45;overflow:auto;max-height:420px}
+.diff code{display:block;min-width:max-content}
+.diff-line{display:block;padding:0 10px;white-space:pre;color:var(--text-2)}
+.diff-add{background:var(--diff-add-bg);color:var(--diff-add-text)}
+.diff-del{background:var(--diff-del-bg);color:var(--diff-del-text)}
+.diff-hunk{color:var(--text-faint)}
+.diff-meta{color:var(--text-faint);font-style:italic}
+.diff-note{font-size:12px;color:var(--text-muted);margin:0 0 4px}
+.diff-note.warn{color:var(--warn-text)}
+.diff-more{margin-top:4px}
+.diff-more>summary{cursor:pointer;font-size:12px;color:var(--accent);width:max-content}
+.diff-more[open]>summary{display:none}
 .bubble.guardrail-warning{border-left:3px solid var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--bg-panel));color:var(--danger-text);font-size:13px;padding:8px 12px;white-space:pre-wrap}
 .bubble.hook-notice{border-left:3px solid var(--text-faint);background:var(--bg-panel);color:var(--text-3);font-size:13px;padding:8px 12px;white-space:pre-wrap}
 .bubble.hook-notice.warn{border-left-color:var(--warn);color:var(--warn-text)}
@@ -351,16 +372,40 @@ body.has-session #history{padding-bottom:calc(var(--dock-h,160px) + 32px)}
 #composer #actionBtn{min-width:64px;font-weight:600}
 /* The model picker (start page only): reads as a label, "host:model ▾", left of Start; a native select under a drawn caret. */
 /* A select is as wide as its widest option: a hidden copy of the chosen name (data-value) sizes the box to that name instead, and the select fills it. */
-.model-pick{order:0;position:relative;display:inline-block;max-width:min(50%,380px);height:28px;border-radius:8px;overflow:hidden;color:var(--text-muted);font-size:12px;transition:background .12s ease,color .12s ease}
-.model-pick[hidden],body.has-session .model-pick{display:none}
-.model-pick:hover,.model-pick:focus-within{background:color-mix(in srgb,var(--bg-hover) 75%,transparent);color:var(--text-2)}
-.model-pick::before{content:attr(data-value);display:block;visibility:hidden;padding:0 22px 0 8px;white-space:pre;line-height:28px}
-.model-pick::after{content:"";position:absolute;right:9px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
-.model-pick select{position:absolute;inset:0;appearance:none;-webkit-appearance:none;width:100%;height:28px;padding:0 22px 0 8px;border:0;border-radius:8px;background:transparent;color:inherit;font-size:12px;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color-scheme:dark}
-.model-pick select:focus{outline:none}
-.model-pick select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
-.model-pick option{color:var(--text);background:var(--bg-panel)}
-@media(max-width:600px){.model-pick{max-width:60%}}
+#composer .actions-col .model-pick{order:0;position:relative;display:inline-block;max-width:min(50%,380px);height:28px;min-height:28px;padding:0 22px 0 8px;border-radius:8px;overflow:hidden;background:transparent;color:var(--text-muted);font-size:12px;line-height:28px;text-align:left;text-overflow:ellipsis;transition:background .12s ease,color .12s ease}
+#composer .actions-col .model-pick:hover,#composer .actions-col .model-pick[aria-expanded="true"]{filter:none;background:color-mix(in srgb,var(--bg-hover) 75%,transparent);color:var(--text-2)}
+#composer .actions-col .model-pick[hidden],body.has-session #composer .actions-col .model-pick{display:none}
+.model-pick-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.model-pick::after{content:"";position:absolute;right:9px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:transform .12s ease}
+.model-pick[aria-expanded="true"]::after{transform:translateY(-20%) rotate(225deg)}
+@media(max-width:600px){#composer .actions-col .model-pick{max-width:60%}}
+/* The model search: opaque like #commandList (a list over the conversation
+   must stay readable), above the composer, or below it (.down) when the
+   start page leaves no room above, or over the composer (.over) when
+   neither side has it. max-height is set at open. */
+#modelPanel{position:absolute;left:10px;width:min(560px,calc(100% - 20px));bottom:calc(100% + 8px);max-height:360px;border-radius:12px;z-index:21;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-panel);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow)}
+#modelPanel.down{bottom:auto;top:calc(100% + 8px)}
+#modelPanel.over{bottom:0}
+#modelPanel[hidden],body.has-session #modelPanel{display:none}
+#modelPanel .model-search{flex:none;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--border)}
+#modelPanel .model-search svg{flex:none;width:14px;height:14px;color:var(--text-faint)}
+#modelSearch{flex:1;min-width:0;height:38px;background:transparent;border:0;color:var(--text);font-size:13px}
+#modelSearch::placeholder{color:var(--text-faint)}
+#modelSearch:focus,#modelSearch:focus-visible{outline:none}
+#modelList{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px;display:flex;flex-direction:column;gap:1px}
+#modelList .model-group{position:sticky;top:-4px;z-index:1;padding:8px 10px 4px;background:var(--bg-panel);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
+#modelList .model-group span{font-weight:400;letter-spacing:0;text-transform:none}
+#modelList .model-option{flex:none;scroll-margin:28px 0 4px;display:flex;align-items:baseline;gap:10px;padding:6px 10px 6px 24px;border-radius:8px;cursor:pointer;min-width:0;position:relative}
+#modelList .model-option.active{background:color-mix(in srgb,var(--accent-bg) 85%,transparent)}
+#modelList .model-option.chosen::before{content:"";position:absolute;left:10px;top:50%;width:4px;height:8px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:translateY(-65%) rotate(45deg)}
+#modelList .model-id{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.4;color:var(--text-2);overflow-wrap:anywhere}
+#modelList .model-option.chosen .model-id{color:var(--accent)}
+#modelList .model-host,#modelList .model-dot{color:var(--text-faint)}
+#modelList mark{background:none;color:var(--accent);font-weight:600}
+#modelList .model-option.chosen mark{color:var(--text-bright)}
+#modelList .model-note{flex:none;font-size:11px;color:var(--text-faint)}
+#modelList .model-empty{padding:10px;font-size:13px;color:var(--text-faint)}
+@media(max-width:600px){#modelPanel{left:6px;width:calc(100% - 12px)}#modelSearch{font-size:16px}#modelList .model-option{padding-top:8px;padding-bottom:8px}}
 /* The / autocomplete: a list over the composer card's top edge. It wears the glass edge and shadow, but opaque:
    inside the dock's own backdrop-filter a second blur sees nothing, and the history would show through its text. */
 #commandList{position:absolute;left:10px;width:min(640px,calc(100% - 20px));bottom:calc(100% + 8px);max-height:min(260px,40vh);overflow-y:auto;border-radius:12px;padding:4px;z-index:20;display:flex;flex-direction:column;gap:1px;background:var(--bg-panel);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow)}
@@ -371,6 +416,124 @@ body.has-session #history{padding-bottom:calc(var(--dock-h,160px) + 32px)}
 #commandList .command-desc{flex:1;min-width:0;font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #commandList .command-note{font-size:11px;color:var(--text-faint);white-space:nowrap}
 @media(max-width:600px){#commandList{left:6px;width:calc(100% - 12px)}#commandList .command-option{flex-wrap:wrap;row-gap:0;padding:8px 10px}#commandList .command-desc{flex-basis:100%;order:3}}
+/* The stage view (web.view: stage, stage_view.js): the running turn as the dock card's top section, pinned above the composer.
+   Fixed slots (status row, prompt line, a two-line headline, the tool row, a one-line trail) never change height while the
+   turn runs; cards and rows that arrive meanwhile go in their own capped scroller (extras); the cloud is the turn view's
+   block behind a chip of ticks. --stage-max (stage_view.js fitCap) keeps it inside the session panel. */
+/* D2: its own glass card above the composer card (as a section of one card the composer's focus ring wrapped the turn too):
+   in the stage view #dock is a clear column holding the stage and .dock-card (the composer and its footer, stage_view.js). */
+body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;gap:10px}
+.dock-card{display:flex;flex-direction:column;border-radius:16px;position:relative;transition:border-color .12s ease,box-shadow .12s ease}
+.dock-card:focus-within{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 3px var(--accent-ring),var(--glass-shadow)}
+.turn-stage{display:flex;flex-direction:column;min-height:0;max-height:var(--stage-max,60vh);border-left:3px solid var(--accent);border-radius:14px;overflow:hidden}
+.turn-stage[hidden]{display:none}
+.turn-stage.ended{border-left-color:var(--border-strong)}
+.turn-stage[data-phase="answered"]{border-left-color:var(--ok)}
+.turn-stage[data-phase="canceled"],.turn-stage[data-phase="waiting for you"]{border-left-color:var(--warn)}
+.turn-stage[data-phase="failed"]{border-left-color:var(--danger)}
+.turn-stage.enter{animation:ts-rise .35s cubic-bezier(.3,.7,.2,1)}
+@keyframes ts-rise{from{opacity:0;transform:translateY(14px)}}
+.turn-stage.leaving{transition:height .4s cubic-bezier(.3,.7,.2,1),opacity .3s ease;opacity:0}
+.ts-arrive{animation:ts-arrive .5s cubic-bezier(.3,.7,.2,1)}
+@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}
+.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)}
+.turn-stage[data-phase="failed"] .ts-mark,.turn-stage[data-phase="failed"] .ts-phase{color:var(--danger-text)}
+.turn-stage[data-phase="waiting for you"] .ts-mark{background:var(--warn)}
+.ts-phase{color:var(--accent);font-weight:600}
+.ts-timing{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.ts-timing .turn-timing{margin:0;font-size:12px;color:var(--text-muted);display:inline}
+.ts-mini{min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-2)}
+.ts-defer{color:var(--text-faint);font-style:italic;opacity:0;transition:opacity .2s}
+.turn-stage.ended.in-use .ts-defer{opacity:1}
+.ts-fold{margin-left:auto;flex:none;width:28px;height:24px;padding:0;border-radius:6px;background:transparent;color:var(--text-muted);font-size:14px}
+.ts-fold:hover:not(:disabled){filter:none;background:var(--bg-hover);color:var(--text)}
+.ts-scroll{position:relative;flex:1 1 auto;min-height:0;overflow:auto;overflow-anchor:none;display:flex;flex-direction:column;gap:8px;padding:8px 14px 10px;scrollbar-width:thin}
+.ts-scroll[hidden],.ts-scroll>[hidden]{display:none}
+/* Flex column children with overflow:hidden would shrink to nothing. */
+.ts-scroll>*{flex-shrink:0}
+/* The prompt line: the turn's own bubble, one line; a click shows it whole. */
+.ts-prompt{cursor:pointer;min-width:0}
+.ts-prompt>.bubble.user{display:flex;gap:6px;align-items:baseline;max-width:none;margin:0;padding:0;background:transparent;border:0;border-radius:0;font-size:13px;line-height:1.45;color:var(--text-muted)}
+.ts-prompt>.bubble.user::before{content:"you";flex:none;color:var(--accent);font-weight:600}
+/* Another client's prompt says whose it is (its origin label) instead. */
+.ts-prompt>.bubble.user:has(>.origin-label)::before{content:none}
+.ts-prompt>.bubble.user>.copy-btn{display:none}
+.ts-prompt:not(.full) .user-message{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;white-space:normal}
+.ts-prompt:not(.full) .user-message .thumbs{display:none}
+.ts-prompt:not(.full) .user-message blockquote{display:inline;border:0;padding:0;margin:0}
+/* The live slots: fixed heights (two headline lines, one tool row, one trail line). */
+.ts-live{display:flex;flex-direction:column;gap:8px}
+.ts-headline{height:42px;font-size:14px;line-height:21px;color:var(--narr);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;cursor:pointer;border-radius:6px}
+.ts-headline:hover{background:var(--bg-hover)}
+.ts-headline:not(.thinking)::before{content:"\203A";color:var(--accent);font-weight:700;margin-right:7px}
+.ts-headline.thinking{font-size:13.5px;font-style:italic;color:var(--text-muted)}
+.ts-think-tag{font-style:normal;font-size:12.5px;color:var(--think-text);margin-right:6px}
+.ts-headline.fresh{animation:ts-fade .3s ease}
+@keyframes ts-fade{from{opacity:.35}}
+.ts-now{height:32px;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-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-tool.exec{color:var(--think-text)}
+.ts-tool.edit{color:var(--ok-text)}
+.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)}
+.ts-title.quiet{font-family:inherit;font-style:italic;color:var(--text-faint)}
+.ts-trail{height:18px;display:flex;gap:10px;overflow:hidden;font-size:12px;line-height:18px;color:var(--text-faint);white-space:nowrap}
+.ts-trail-item{flex:none;max-width:36ch;overflow:hidden;text-overflow:ellipsis}
+.ts-trail-item.error{color:var(--danger-text)}
+.ts-trail-item.warn{color:var(--warn-text)}
+.ts-trail-item.none{font-style:italic}
+/* A card waits: the tool row and trail give it their room. */
+.turn-stage.waiting .ts-now,.turn-stage.waiting .ts-trail{display:none}
+/* 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.waiting .ts-extras{max-height:calc(var(--stage-max,60vh) * .7)}
+.ts-extras>*,.ts-tail>*{flex-shrink:0}
+.ts-extras>.bubble.user{max-width:none;margin:0;padding:4px 10px;font-size:13px;line-height:1.45;background:transparent;color:var(--text-2)}
+.ts-extras>.bubble.user>.copy-btn{display:none}
+.ts-extras>.bubble.user .user-message{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal}
+/* Inside the dock's own blur a second backdrop-filter sees nothing: the cards are opaque here (as #commandList is). */
+.turn-stage .bubble.question,.turn-stage .bubble.plugin-card{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
+.turn-stage .bubble.question{background:color-mix(in srgb,var(--warn) 7%,var(--bg-panel))}
+.turn-stage .bubble.plugin-card{background:color-mix(in srgb,var(--accent) 6%,var(--bg-panel))}
+.turn-stage .bubble.plugin-card.warn{background:color-mix(in srgb,var(--warn) 7%,var(--bg-panel))}
+.ts-answer{display:flex;flex-direction:column;gap:8px}
+.ts-answer>.bubble.output{border-left:0;background:transparent;border:0;padding:0}
+.ts-answer>.bubble.output>.copy-btn{top:0;right:0}
+/* The cloud: one chip (steps, calls, a tick per call), the turn view's block behind it. */
+.ts-cloud{display:flex;flex-direction:column;gap:6px}
+.ts-chip{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--text-muted);text-align:left}
+.ts-chip:hover:not(:disabled){filter:none;background:var(--bg-hover)}
+.ts-chip-label{font-size:12.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
+.ts-chip-label::before{content:"\25B8  ";color:var(--accent)}
+.ts-cloud.open .ts-chip-label::before{content:"\25BE  "}
+/* One row whatever the count (the stage's height stays): the newest ticks show, the oldest are cut on the left. */
+.ts-ticks{display:flex;flex-wrap:nowrap;justify-content:flex-end;overflow:hidden;gap:2px;flex:0 1 auto;min-width:0}
+.ts-tick{flex:none}
+.ts-tick{width:5px;height:12px;border-radius:1.5px;background:var(--text-faint);opacity:.55;cursor:pointer}
+.ts-tick.exec{background:var(--think);opacity:.85}
+.ts-tick.edit{background:var(--ok);opacity:.85}
+.ts-tick.other{background:var(--accent);opacity:.7}
+.ts-tick.error{background:var(--danger);opacity:1}
+.ts-tick.running{background:var(--warn);opacity:1;animation:ts-blink 1s ease-in-out infinite}
+@keyframes ts-blink{50%{opacity:.35}}
+.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}
+.turn-stage .turn-work>summary{display:none}
+.turn-stage .ts-cloud-body .gen:first-of-type{margin-top:0;border-top:0}
+@media(max-width:600px){
+  .ts-status{padding-left:10px}
+  .ts-scroll{padding:8px 10px 10px}
+  .ts-defer{display:none}
+  .ts-trail-item{max-width:24ch}
+}
+@media (prefers-reduced-motion:reduce){.turn-stage.enter,.ts-arrive,.ts-headline.fresh,.ts-tick.running,.ts-mark{animation:none}.turn-stage.leaving{transition:none}}
 #infoBar{display:flex;padding:8px 14px 10px;border-top:1px solid var(--glass-border);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}
 #infoBar .info{flex:1;min-width:0;font-size:13px;line-height:1.4;word-break:break-word;display:flex;flex-direction:column;gap:2px}
@@ -565,13 +728,17 @@ a{color:var(--accent)}
       <div id="initRow" role="status" aria-live="polite" hidden></div>
       <div id="composer" style="position:relative">
         <div id="commandList" role="listbox" aria-label="Commands" hidden></div>
+        <div id="modelPanel" hidden>
+          <label class="model-search"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14" stroke-linecap="round"/></svg><input id="modelSearch" type="text" placeholder="Search models" autocomplete="off" spellcheck="false" role="combobox" aria-label="Search models" aria-autocomplete="list" aria-controls="modelList" aria-expanded="false"></label>
+          <div id="modelList" role="listbox" aria-label="Models"></div>
+        </div>
         <div id="composeGrip" title="Drag to make the message box taller (double-click resets)"></div>
         <div class="compose-col">
           <div id="chips" hidden></div>
           <textarea id="prompt" placeholder="Ask chi anything…" aria-controls="commandList" aria-autocomplete="list" aria-expanded="false"></textarea>
         </div>
         <div class="actions-col">
-          <label id="modelPick" class="model-pick" title="The model the new chat starts on" hidden><select id="modelSelect" aria-label="Model for the new chat"></select></label>
+          <button type="button" id="modelPick" class="model-pick" title="The model the new chat starts on" aria-label="Model for the new chat" aria-haspopup="listbox" aria-expanded="false" hidden><span class="model-pick-name"></span></button>
           <div id="composeHint">Enter to start · Shift+Enter for a newline</div>
           <button id="cancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Cancel</button>
           <div class="split">

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

@@ -21,3 +21,139 @@ export function pickModel(names, defaultName, stored) {
   return defaultName || names[0] || "";
 }
 
+
+export const RECENT_KEY = "chi_model_recent";
+
+// The payload's models as rows: {name, host, id, isDefaultHost}. The
+// default host's names are bare (name == id); the server's own default,
+// unshifted when no host lists it, has no host and goes with them, shown
+// by its name.
+export function modelRows(payload) {
+  const list = Array.isArray(payload?.models) ? payload.models : [];
+  return list
+    .filter((m) => m && String(m.name || ""))
+    .map((m) => {
+      const name = String(m.name);
+      const host = m.host ? String(m.host) : "";
+      const id = host ? String(m.id || name) : name;
+      return { name, host, id, isDefaultHost: !host || name === id };
+    });
+}
+
+const byId = (a, b) => a.id.localeCompare(b.id, "en", { sensitivity: "base" });
+
+// The rows under their hosts, [{host, isDefault, rows}]: the default host
+// first, the others in the server's order, ids A-Z inside a host.
+export function groupRows(rows) {
+  const groups = [];
+  const find = (key) => groups.find((g) => g.key === key);
+  for (const row of rows) {
+    const key = row.isDefaultHost ? "" : row.host;
+    let group = find(key);
+    if (!group) {
+      group = { key, host: row.host, isDefault: row.isDefaultHost, rows: [] };
+      if (row.isDefaultHost) groups.unshift(group); else groups.push(group);
+    }
+    if (!group.host && row.host) group.host = row.host;
+    group.rows.push(row);
+  }
+  return groups.map(({ host, isDefault, rows: rs }) => ({
+    host: host || "default", isDefault, rows: [...rs].sort(byId),
+  }));
+}
+
+const SEPARATORS = "/-:._ ";
+const atSegmentStart = (text, i) => i === 0 || SEPARATORS.includes(text[i - 1]);
+
+// One word against one field (both lowercased): {sub, cost, marks} or null.
+// A substring is best, at a segment start better still; else, for words of
+// 3+ characters, a subsequence taken greedily from the leftmost start,
+// costing more per gap.
+function matchWord(word, text) {
+  let best = null;
+  for (let i = text.indexOf(word); i >= 0; i = text.indexOf(word, i + 1)) {
+    const cost = atSegmentStart(text, i) ? 0 : 2;
+    if (!best || cost < best.cost) best = { sub: true, cost, marks: [[i, i + word.length]] };
+    if (cost === 0) break;
+  }
+  if (best || word.length < 3) return best;
+  const marks = [];
+  let gaps = 0;
+  let at = text.indexOf(word[0]);
+  if (at < 0) return null;
+  for (let k = 0; k < word.length; k++) {
+    const i = k === 0 ? at : text.indexOf(word[k], at + 1);
+    if (i < 0) return null;
+    if (k > 0) gaps += i - at - 1;
+    const last = marks[marks.length - 1];
+    if (last && last[1] === i) last[1] = i + 1; else marks.push([i, i + 1]);
+    at = i;
+  }
+  return { sub: false, cost: 10 + gaps, marks };
+}
+
+function mergeMarks(marks) {
+  const sorted = [...marks].sort((a, b) => a[0] - b[0]);
+  const out = [];
+  for (const [a, b] of sorted) {
+    const last = out[out.length - 1];
+    if (last && a <= last[1]) last[1] = Math.max(last[1], b); else out.push([a, b]);
+  }
+  return out;
+}
+
+const better = (a, b) => !b || (a.sub && !b.sub) || (a.sub === b.sub && a.cost < b.cost);
+
+// The rows matching every word of +query+ against the host or the shown id,
+// ranked: substring-only rows first, then the summed cost, the shorter id,
+// the rows' own order. Each {row, hostMarks, idMarks} carries [start, end)
+// ranges into its field; a default-host row's host is not shown, so it
+// gets none. [] for a blank query.
+export function matchModels(rows, query) {
+  const words = String(query || "").toLowerCase().split(/\s+/).filter(Boolean);
+  if (!words.length) return [];
+  const found = [];
+  rows.forEach((row, index) => {
+    const host = row.host.toLowerCase();
+    const id = row.id.toLowerCase();
+    const hostMarks = [];
+    const idMarks = [];
+    let sub = true;
+    let cost = 0;
+    for (const word of words) {
+      const onId = matchWord(word, id);
+      const onHost = matchWord(word, host);
+      const pick = onId && !better(onHost || { sub: false, cost: Infinity }, onId) ? onId : onHost;
+      if (!pick) return;
+      (pick === onId ? idMarks : hostMarks).push(...pick.marks);
+      sub = sub && pick.sub;
+      cost += pick.cost;
+    }
+    found.push({
+      row, index, sub, cost,
+      hostMarks: row.isDefaultHost ? [] : mergeMarks(hostMarks),
+      idMarks: mergeMarks(idMarks),
+    });
+  });
+  found.sort((a, b) => (b.sub - a.sub) || (a.cost - b.cost) ||
+    (a.row.id.length - b.row.id.length) || (a.index - b.index));
+  return found.map(({ row, hostMarks, idMarks }) => ({ row, hostMarks, idMarks }));
+}
+
+// The recent list after picking +name+: it first, no other copy (any case),
+// at most +max+.
+export function pushRecent(list, name, max = 5) {
+  const prior = (Array.isArray(list) ? list : []).filter((n) => typeof n === "string" && n);
+  if (!name) return prior.slice(0, max);
+  const want = name.toLowerCase();
+  return [name, ...prior.filter((n) => n.toLowerCase() !== want)].slice(0, max);
+}
+
+// The rows for the recent names still offered, newest first.
+export function recentRows(rows, list) {
+  if (!Array.isArray(list)) return [];
+  return list
+    .filter((n) => typeof n === "string")
+    .map((n) => rows.find((r) => r.name.toLowerCase() === n.toLowerCase()))
+    .filter(Boolean);
+}

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

@@ -0,0 +1,224 @@
+// The start page's model picker: a quiet button with the chosen name that
+// opens a searchable list (#modelPanel) over the conversation, like the /
+// list. The rows and the matching are model_pick.js'; this is the DOM.
+//
+// The panel is a child of #composer, not of the button (an input can't sit
+// in a button, and the button clips). It opens upward, or downward when
+// #center (overflow hidden, and #dock's backdrop-filter traps position:
+// fixed) leaves too little room above, over the composer when neither side
+// has it. The search input keeps the focus:
+// ↑/↓ PageUp/PageDown move, ⏎ picks, Esc and Tab close without a change.
+
+import { escapeHtml } from "./format.js";
+import { moveSelection } from "./command_complete.js";
+import {
+  MODEL_KEY, RECENT_KEY, groupRows, matchModels, modelRows, pickModel, pushRecent, recentRows,
+} from "./model_pick.js";
+
+const PAGE = 8;
+const MAX_HEIGHT = 360;
+const MIN_ROOM = 200;
+const GAP = 8;
+
+// The text with the [start, end) ranges in <mark>, escaped slice by slice.
+function markedHtml(text, marks) {
+  let html = "";
+  let at = 0;
+  for (const [a, b] of marks || []) {
+    html += `${escapeHtml(text.slice(at, a))}<mark>${escapeHtml(text.slice(a, b))}</mark>`;
+    at = b;
+  }
+  return html + escapeHtml(text.slice(at));
+}
+
+function readRecent() {
+  try {
+    const list = JSON.parse(localStorage.getItem(RECENT_KEY) || "[]");
+    return Array.isArray(list) ? list : [];
+  } catch (_) {
+    return [];
+  }
+}
+
+// +onPick+ runs after a pick (the panel is closed by then).
+export function createModelPicker({ button, panel, input, list, composer, center, onPick }) {
+  let rows = [];
+  let defaultName = "";
+  let chosen = "";
+  let shown = []; // the option rows in list order
+  let active = 0;
+
+  const isOpen = () => !panel.hidden;
+
+  function setChosen(name) {
+    chosen = name;
+    button.querySelector(".model-pick-name").textContent = name;
+  }
+
+  function rowHtml(row, i, { hostMarks = [], idMarks = [], showHost = !row.isDefaultHost } = {}) {
+    const host = showHost ? `<span class="model-host">${markedHtml(row.host, hostMarks)}</span><span class="model-dot"> · </span>` : "";
+    const note = row.name === defaultName ? `<span class="model-note">default</span>` : "";
+    const cls = `model-option${i === active ? " active" : ""}${row.name === chosen ? " chosen" : ""}`;
+    return `<div class="${cls}" role="option" id="model-option-${i}" aria-selected="${i === active}" data-index="${i}">` +
+      `<span class="model-id">${host}${markedHtml(row.id, idMarks)}</span>${note}</div>`;
+  }
+
+  function render() {
+    const query = input.value.trim();
+    let html = "";
+    shown = [];
+    const add = (row, opts) => { html += rowHtml(row, shown.length, opts); shown.push(row); };
+    if (query) {
+      for (const m of matchModels(rows, query)) add(m.row, { hostMarks: m.hostMarks, idMarks: m.idMarks });
+      if (!shown.length) html = `<div class="model-empty" role="presentation">Nothing matches</div>`;
+    } else {
+      const recent = recentRows(rows, readRecent());
+      const head = (label, note = "") =>
+        `<div class="model-group" role="presentation">${escapeHtml(label)}${note ? ` <span>${escapeHtml(note)}</span>` : ""}</div>`;
+      if (recent.length) {
+        html += head("Recent");
+        recent.forEach((row) => add(row));
+      }
+      for (const group of groupRows(rows)) {
+        html += head(group.host, group.isDefault ? "default host" : "");
+        group.rows.forEach((row) => add(row, { showHost: false }));
+      }
+    }
+    if (active >= shown.length) active = 0;
+    list.innerHTML = html;
+    showActive();
+  }
+
+  function showActive() {
+    list.querySelectorAll(".model-option.active").forEach((el) => {
+      el.classList.remove("active");
+      el.setAttribute("aria-selected", "false");
+    });
+    const el = list.querySelector(`#model-option-${active}`);
+    if (!el) return input.removeAttribute("aria-activedescendant");
+    el.classList.add("active");
+    el.setAttribute("aria-selected", "true");
+    input.setAttribute("aria-activedescendant", el.id);
+    el.scrollIntoView({ block: "nearest" });
+  }
+
+  // Upward by default; downward when the room above #composer inside
+  // #center is short and the room below is not; over the composer itself
+  // (its bottom edge) when neither has the room, as in a short window,
+  // where the start page centres the dock and leaves little on either side.
+  function place() {
+    const box = center.getBoundingClientRect();
+    const at = composer.getBoundingClientRect();
+    const up = at.top - box.top - GAP * 2;
+    const down = box.bottom - at.bottom - GAP * 2;
+    const side = up >= MIN_ROOM ? "up" : down >= MIN_ROOM ? "down" : "over";
+    const room = { up, down, over: at.bottom - box.top - GAP }[side];
+    panel.classList.toggle("down", side === "down");
+    panel.classList.toggle("over", side === "over");
+    const cap = window.matchMedia("(max-width:600px)").matches ? Math.min(MAX_HEIGHT, window.innerHeight / 2) : MAX_HEIGHT;
+    panel.style.maxHeight = `${Math.max(0, Math.min(cap, room))}px`;
+  }
+
+  function open() {
+    if (isOpen() || button.hidden) return;
+    input.value = "";
+    active = 0;
+    panel.hidden = false;
+    button.setAttribute("aria-expanded", "true");
+    input.setAttribute("aria-expanded", "true");
+    place();
+    render();
+    // Land on the chosen row: its Recent copy when it has one, so the list
+    // opens at its top.
+    const at = shown.findIndex((r) => r.name === chosen);
+    if (at >= 0) { active = at; showActive(); }
+    input.focus();
+  }
+
+  function close({ refocus = false } = {}) {
+    if (!isOpen()) return;
+    panel.hidden = true;
+    list.innerHTML = "";
+    shown = [];
+    button.setAttribute("aria-expanded", "false");
+    input.setAttribute("aria-expanded", "false");
+    input.removeAttribute("aria-activedescendant");
+    if (refocus) button.focus();
+  }
+
+  function pick(index) {
+    const row = shown[index];
+    if (!row) return;
+    setChosen(row.name);
+    try {
+      localStorage.setItem(MODEL_KEY, row.name);
+      localStorage.setItem(RECENT_KEY, JSON.stringify(pushRecent(readRecent(), row.name)));
+    } catch (_) {}
+    close();
+    onPick?.(row.name);
+  }
+
+  button.addEventListener("click", () => (isOpen() ? close() : open()));
+  button.addEventListener("keydown", (e) => {
+    if (e.isComposing || e.key !== "ArrowDown" || isOpen()) return;
+    e.preventDefault();
+    open();
+  });
+  input.addEventListener("input", () => { active = 0; render(); });
+  input.addEventListener("keydown", (e) => {
+    if (e.isComposing) return;
+    const count = shown.length;
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      active = moveSelection(active, count, e.key === "ArrowDown" ? 1 : -1);
+      showActive();
+    } else if (e.key === "PageDown" || e.key === "PageUp") {
+      active = Math.max(0, Math.min(count - 1, active + (e.key === "PageDown" ? PAGE : -PAGE)));
+      showActive();
+    } else if (e.key === "Enter") {
+      pick(active);
+    } else if (e.key === "Escape") {
+      e.stopPropagation();
+      close({ refocus: true });
+    } else if (e.key === "Tab") {
+      close();
+      return; // the focus moves on as it would
+    } else {
+      return;
+    }
+    e.preventDefault();
+  });
+  // Keep the focus in the search box: the pick happens on click.
+  list.addEventListener("pointerdown", (e) => e.preventDefault());
+  list.addEventListener("mousemove", (e) => {
+    const option = e.target.closest(".model-option");
+    if (!option || Number(option.dataset.index) === active) return;
+    active = Number(option.dataset.index);
+    showActive();
+  });
+  list.addEventListener("click", (e) => {
+    const option = e.target.closest(".model-option");
+    if (option) pick(Number(option.dataset.index));
+  });
+  document.addEventListener("pointerdown", (e) => {
+    if (isOpen() && !panel.contains(e.target) && !button.contains(e.target)) close();
+  });
+  window.addEventListener("resize", () => { if (isOpen()) place(); });
+
+  return {
+    // GET /api/models' payload in: the rows, the preselected name (the
+    // stored choice while offered, else the server's default). False when
+    // the payload offers nothing (the button stays as it was).
+    setModels(payload, stored) {
+      const next = modelRows(payload);
+      if (!next.length) return false;
+      close();
+      rows = next;
+      defaultName = String(payload.default || "");
+      setChosen(pickModel(rows.map((r) => r.name), payload.default, stored || chosen));
+      return true;
+    },
+    chosen: () => chosen,
+    close,
+    isOpen,
+  };
+}