samagotchi 0.135.0 → 0.136.0

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

@@ -57,14 +57,21 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 /* A generation opens its answer bubble empty: hidden until text streams (the thinking box shows progress meanwhile). */
 .bubble.output.streaming:empty{display:none}
 /* The answer's pop: the promoted bubble is held at the narration box's height (inline max-height, scrolled to its tail) until the rendered markdown lands, then grows to its content while the content fades in; both classes go 400 ms later. */
-/* A long answer folded by hand (answer_fold.js): the row is the bubble's sibling just before it, styled as a closed turn's steps; folded, the bubble is hidden and the row reads its first line and size; unfolded, a slim "▾ N lines" header close above it. */
-.bubble.output.folded{display:none}
+/* A long answer folded by hand (answer_fold.js): the row is the bubble's sibling just before it, styled as a closed turn's steps, reading the answer's first line and size; folded, the bubble is hidden; unfolded, the row is the bubble's header. */
+/* Folded: the bubble hidden, an answer or a delegate report (#history's: outranks .bubble.user's display). */
+#history>.bubble.folded{display:none}
 .answer-fold{display:flex;align-items:baseline;gap:0;align-self:flex-start;max-width:100%;min-width:0;margin:0;padding:3px 10px;font:inherit;font-size:12px;font-weight:500;line-height:1.4;color:var(--text-muted);text-align:left;cursor:pointer;user-select:none;background:transparent;border:1px solid transparent;border-left:3px solid var(--accent-strong);border-radius:6px;transition:background .12s ease}
 .answer-fold:hover{background:var(--bg-panel)}
 .answer-fold:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
 .answer-fold::before{content:"▾\00a0";color:var(--accent);flex:none}
 .answer-fold.folded::before{content:"▸\00a0"}
-.answer-fold:not(.folded){margin-bottom:-8px;padding-top:1px;padding-bottom:1px;border-left-color:transparent}
+/* Open: the bubble's header, flush on top of it (-12px: #history's gap), its bar running on into the bubble's. */
+.answer-fold:not(.folded){margin-bottom:-12px;border-bottom-left-radius:0}
+/* A delegate report's row: where the report sits (right, the user accent; dashed when merged mid-turn). Open, the row and
+   the report share one width, so the row's bar runs on into the report's. */
+.answer-fold.report{align-self:flex-end;max-width:85%;border-left-color:var(--accent)}
+.answer-fold.report.steered{border-left-style:dashed}
+.answer-fold.report:not(.folded),.answer-fold.report:not(.folded)+.bubble.user{width:85%}
 .answer-fold-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:13px}
 .answer-fold-label:empty{display:none}
 .answer-fold-size{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
@@ -103,11 +110,11 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .time-gap{align-self:stretch;text-align:center;color:var(--time-gap);font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0;user-select:none}
 .turn-timing{margin-top:8px;color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums}
 .turn-timing.live{color:var(--accent)}
-.bubble.output.markdown{white-space:normal}
-.bubble.output.markdown pre{overflow:auto;padding:10px;border-radius:8px;background:var(--bg-inset)}
-.bubble.output.markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
-.bubble.output.markdown :not(pre)>code{background:var(--bg-inset);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text)}
-.bubble.output.markdown pre{font-size:13px;line-height:1.45;border:1px solid var(--border)}
+.bubble.output.markdown,.bubble.user>.user-message.markdown{white-space:normal}
+.bubble.output.markdown pre,.bubble.user>.user-message.markdown pre{overflow:auto;padding:10px;border-radius:8px;background:var(--bg-inset)}
+.bubble.output.markdown code,.bubble.user>.user-message.markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
+.bubble.output.markdown :not(pre)>code,.bubble.user>.user-message.markdown :not(pre)>code{background:var(--bg-inset);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text)}
+.bubble.output.markdown pre,.bubble.user>.user-message.markdown pre{font-size:13px;line-height:1.45;border:1px solid var(--border)}
 /* Code highlighting (markdown_renderer.rb): syntect scope classes, hl-prefixed, coloured from the palette's --code-* tokens. More classes win over fewer (a function name is also "entity"). */
 .syntax-highlighting{color:var(--code-text)}
 .syntax-highlighting .hl-keyword,.syntax-highlighting .hl-storage{color:var(--code-keyword)}
@@ -120,24 +127,24 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .syntax-highlighting .hl-markup.hl-inserted{color:var(--diff-add-text)}
 .syntax-highlighting .hl-markup.hl-deleted{color:var(--diff-del-text)}
 .syntax-highlighting .hl-invalid{color:var(--danger-text)}
-.bubble.output.markdown h1,.bubble.output.markdown h2,.bubble.output.markdown h3,.bubble.output.markdown h4,.bubble.output.markdown h5,.bubble.output.markdown h6{font-weight:600;line-height:1.3;margin:18px 0 8px;color:var(--text-bright)}
-.bubble.output.markdown h1{font-size:19px}
-.bubble.output.markdown h2{font-size:17px}
-.bubble.output.markdown h3{font-size:15.5px}
-.bubble.output.markdown h4,.bubble.output.markdown h5,.bubble.output.markdown h6{font-size:15px;color:var(--text-2)}
-.bubble.output.markdown h1:first-child,.bubble.output.markdown h2:first-child,.bubble.output.markdown h3:first-child,.bubble.output.markdown>.copy-btn:first-child+:is(h1,h2,h3){margin-top:2px}
-.bubble.output.markdown strong{color:var(--text-bright)}
-.bubble.output.markdown hr{border:0;border-top:1px solid var(--border);margin:14px 0}
-.bubble.output.markdown img{max-width:100%}
-.bubble.output.markdown p,.bubble.output.markdown ul,.bubble.output.markdown ol,.bubble.output.markdown blockquote,.bubble.output.markdown table,.bubble.output.markdown pre{margin:0 0 12px}
-.bubble.output.markdown p:last-child,.bubble.output.markdown ul:last-child,.bubble.output.markdown ol:last-child,.bubble.output.markdown blockquote:last-child,.bubble.output.markdown table:last-child,.bubble.output.markdown pre:last-child{margin-bottom:0}
-.bubble.output.markdown ul,.bubble.output.markdown ol{padding-left:1.5em}
-.bubble.output.markdown li+li{margin-top:4px}
-.bubble.output.markdown li>ul,.bubble.output.markdown li>ol{margin:4px 0 0}
-.bubble.output.markdown blockquote{border-left:3px solid var(--border-strong);padding-left:12px;color:var(--text-muted)}
-.bubble.output.markdown table{border-collapse:collapse;display:block;max-width:100%;overflow:auto}
-.bubble.output.markdown th,.bubble.output.markdown td{border:1px solid var(--border-strong);padding:5px 8px;font-size:14px}
-.bubble.output.markdown th{background:var(--bg-inset);font-weight:600}
+.bubble.output.markdown h1,.bubble.output.markdown h2,.bubble.output.markdown h3,.bubble.output.markdown h4,.bubble.output.markdown h5,.bubble.output.markdown h6,.bubble.user>.user-message.markdown h1,.bubble.user>.user-message.markdown h2,.bubble.user>.user-message.markdown h3,.bubble.user>.user-message.markdown h4,.bubble.user>.user-message.markdown h5,.bubble.user>.user-message.markdown h6{font-weight:600;line-height:1.3;margin:18px 0 8px;color:var(--text-bright)}
+.bubble.output.markdown h1,.bubble.user>.user-message.markdown h1{font-size:19px}
+.bubble.output.markdown h2,.bubble.user>.user-message.markdown h2{font-size:17px}
+.bubble.output.markdown h3,.bubble.user>.user-message.markdown h3{font-size:15.5px}
+.bubble.output.markdown h4,.bubble.output.markdown h5,.bubble.output.markdown h6,.bubble.user>.user-message.markdown h4,.bubble.user>.user-message.markdown h5,.bubble.user>.user-message.markdown h6{font-size:15px;color:var(--text-2)}
+.bubble.output.markdown h1:first-child,.bubble.output.markdown h2:first-child,.bubble.output.markdown h3:first-child,.bubble.output.markdown>.copy-btn:first-child+:is(h1,h2,h3),.bubble.user>.user-message.markdown h1:first-child,.bubble.user>.user-message.markdown h2:first-child,.bubble.user>.user-message.markdown h3:first-child,.bubble.user>.user-message.markdown>.copy-btn:first-child+:is(h1,h2,h3){margin-top:2px}
+.bubble.output.markdown strong,.bubble.user>.user-message.markdown strong{color:var(--text-bright)}
+.bubble.output.markdown hr,.bubble.user>.user-message.markdown hr{border:0;border-top:1px solid var(--border);margin:14px 0}
+.bubble.output.markdown img,.bubble.user>.user-message.markdown img{max-width:100%}
+.bubble.output.markdown p,.bubble.output.markdown ul,.bubble.output.markdown ol,.bubble.output.markdown blockquote,.bubble.output.markdown table,.bubble.output.markdown pre,.bubble.user>.user-message.markdown p,.bubble.user>.user-message.markdown ul,.bubble.user>.user-message.markdown ol,.bubble.user>.user-message.markdown blockquote,.bubble.user>.user-message.markdown table,.bubble.user>.user-message.markdown pre{margin:0 0 12px}
+.bubble.output.markdown p:last-child,.bubble.output.markdown ul:last-child,.bubble.output.markdown ol:last-child,.bubble.output.markdown blockquote:last-child,.bubble.output.markdown table:last-child,.bubble.output.markdown pre:last-child,.bubble.user>.user-message.markdown p:last-child,.bubble.user>.user-message.markdown ul:last-child,.bubble.user>.user-message.markdown ol:last-child,.bubble.user>.user-message.markdown blockquote:last-child,.bubble.user>.user-message.markdown table:last-child,.bubble.user>.user-message.markdown pre:last-child{margin-bottom:0}
+.bubble.output.markdown ul,.bubble.output.markdown ol,.bubble.user>.user-message.markdown ul,.bubble.user>.user-message.markdown ol{padding-left:1.5em}
+.bubble.output.markdown li+li,.bubble.user>.user-message.markdown li+li{margin-top:4px}
+.bubble.output.markdown li>ul,.bubble.output.markdown li>ol,.bubble.user>.user-message.markdown li>ul,.bubble.user>.user-message.markdown li>ol{margin:4px 0 0}
+.bubble.output.markdown blockquote,.bubble.user>.user-message.markdown blockquote{border-left:3px solid var(--border-strong);padding-left:12px;color:var(--text-muted)}
+.bubble.output.markdown table,.bubble.user>.user-message.markdown table{border-collapse:collapse;display:block;max-width:100%;overflow:auto}
+.bubble.output.markdown th,.bubble.output.markdown td,.bubble.user>.user-message.markdown th,.bubble.user>.user-message.markdown td{border:1px solid var(--border-strong);padding:5px 8px;font-size:14px}
+.bubble.output.markdown th,.bubble.user>.user-message.markdown th{background:var(--bg-inset);font-weight:600}
 /* Plugins' slow setup (chi.init, init_row.js): a quiet line per task over the composer. */
 #initRow{display:flex;flex-direction:column;gap:2px;padding:6px 12px 2px;font-size:12px;line-height:1.4;color:var(--text-3)}
 #initRow[hidden]{display:none}
@@ -187,6 +194,11 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
   .review-apply-note{border-left:0;padding-left:0;text-align:center}
 }
 .bubble.user .user-message{flex:1;min-width:0}
+/* A delegate report in the history (long, markdown): its label and badge on a row of their own above it at any width,
+   not centred beside a tall body. */
+#history>.bubble.user[data-source="delegate_report"]{flex-wrap:wrap}
+#history>.bubble.user[data-source="delegate_report"] :is(.origin-label,.state-badge){order:0}
+#history>.bubble.user[data-source="delegate_report"] .user-message{order:1;flex-basis:100%}
 .bubble.user blockquote{border-left:3px solid var(--border-strong);padding-left:10px;color:var(--text-3);margin:2px 0 6px}
 .bubble.user blockquote:last-child{margin-bottom:0}
 .bubble.tool{border-left:3px solid var(--ok);background:var(--bg-panel);font-size:13px;color:var(--text-2)}
@@ -194,7 +206,11 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 /* A stop someone chose (a cancel, the session's stop): the ■ STOPPED rows' colours, not an error's. */
 .bubble.cancel.stopped{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--bg-panel));color:var(--warn-text)}
 .bubble.recap{border-left:3px solid var(--think-text);background:color-mix(in srgb,var(--think) 6%,var(--bg-panel));font-size:13px}
-.bubble.recap summary{cursor:pointer;color:var(--think-text);font-size:12px}
+.bubble.recap summary{cursor:pointer;color:var(--think-text);font-size:12px;list-style:none}
+/* The fold glyph every collapsible in the history draws (steps, thinking, the answer fold), not the native triangle. */
+.bubble.recap summary::-webkit-details-marker{display:none}
+.bubble.recap summary::before{content:"▸ ";color:var(--think-text)}
+.bubble.recap[open] summary::before{content:"▾ "}
 .bubble.recap .recap-body{white-space:pre-wrap;margin-top:6px}
 .bubble.recap.stale{opacity:.7;border-left-style:dashed}
 .activity-body{margin-top:6px}
@@ -602,7 +618,7 @@ button.system-one-wrong:hover:not(:disabled){background:var(--bg-hover);color:va
 .bubble.user>.copy-btn:hover{background:var(--bg-raised);border-color:var(--border-strong)}
 .code-wrap{position:relative;margin:0 0 12px}
 .code-wrap:last-child{margin-bottom:0}
-.bubble.output.markdown .code-wrap>pre{margin:0}
+.bubble.output.markdown .code-wrap>pre,.bubble.user>.user-message.markdown .code-wrap>pre{margin:0}
 .code-wrap>.copy-btn{top:5px;right:5px}
 @media (hover:none){.copy-btn{opacity:.55}}
 /* The dock is the composer card (composer.css .composer-card): the text field, a toolbar row, the info bar as its footer. */
@@ -1021,9 +1037,12 @@ button.ws-row:hover:not(:disabled){filter:none;background:var(--bg-hover)}
 @media(max-width:600px){body.working-set .ts-live{padding-right:0;--ws-row-h:0px}.ts-ws{display:none}}
 @media (prefers-reduced-motion:reduce){.ws-item,.ws-more,.ws-ring .fill{transition:none}.ws-item.enter,.ws-tick.fresh{animation:none}}
 @media(max-width:600px){
-  .bubble.user.queued[data-delivery="queue"]{flex-wrap:wrap}
-  .bubble.user.queued[data-delivery="queue"] .origin-label,.bubble.user.queued[data-delivery="queue"] .state-badge{order:0}
-  .bubble.user.queued[data-delivery="queue"] .user-message{order:1;flex-basis:100%}
+  /* A line that wraps: its label and badge on one row, its text full width under them. A queued line, and in the
+     history a labelled one (a delegate report, tui, a participant's), which beside its label read a word a line.
+     Not the stage's prompt or extras: one line there. */
+  :is(.bubble.user.queued[data-delivery="queue"],#history>.bubble.user:has(>.origin-label)){flex-wrap:wrap}
+  :is(.bubble.user.queued[data-delivery="queue"],#history>.bubble.user:has(>.origin-label)) :is(.origin-label,.state-badge){order:0}
+  :is(.bubble.user.queued[data-delivery="queue"],#history>.bubble.user:has(>.origin-label)) .user-message{order:1;flex-basis:100%}
   .ts-status{padding-left:10px}
   .ts-scroll{padding:8px 10px 10px}
   .ts-foot{padding:0 10px 10px}
@@ -1040,9 +1059,9 @@ button.ws-row:hover:not(:disabled){filter:none;background:var(--bg-hover)}
    meta keeps the width. */
 #infoBar .info{flex:1 1 640px;min-width:0;font-size:13px;line-height:1.4;word-break:break-word;display:flex;flex-direction:column;gap:2px}
 #infoBar .meta{font-size:11px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
-#infoBar .meta .id{font-family:ui-monospace,monospace;font-weight:700;font-size:12px;color:var(--accent)}
-#infoBar .meta .copy-attach{padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;background:var(--bg-raised);color:var(--text-2);border:1px solid var(--border-strong)}
-#infoBar .meta .copy-attach:hover{color:var(--text-hover);border-color:var(--border-strong)}
+/* The id is a button (a click copies the full id, app.js): its own padding and no button look, the #infoBar button rule aside. */
+#infoBar .meta .id{padding:2px 6px;border-radius:6px;border:1px solid transparent;background:transparent;cursor:pointer;font-family:ui-monospace,monospace;font-weight:700;font-size:12px;color:var(--accent)}
+#infoBar .meta .id:hover:not(:disabled){filter:none;border-color:var(--accent-border);background:var(--accent-bg)}
 #infoBar .meta .status{font-size:11px;padding:2px 6px;border-radius:999px}
 /* The status word takes the widest word's room (running, stopped; idle and error are narrower), so a turn's idle ↔ running doesn't move the rest of the line. */
 #infoBar .meta .status{display:inline-grid;justify-items:center}
@@ -1088,12 +1107,16 @@ body.has-session.composer-folded #initRow{display:none}
 body.has-session.composer-folded #infoBar{border-top-color:transparent}
 #infoBar #infoCancelBtn{background:var(--bg-raised);color:var(--danger-text);border:1px solid color-mix(in srgb,var(--danger) 55%,transparent)}
 #infoBar #infoCancelBtn:hover:not(:disabled){color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
-/* The LLM context and thinking chips (llm_context_chip.js, thinking_chip.js): model-like chips that open their popovers; accent when the session set its own. */
-#infoBar .meta .llmctx-chip,#infoBar .meta .think-chip,#infoBar .meta .rh-chip{padding:2px 6px;border-radius:6px;font-size:11px;font-weight:400;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
-#infoBar .meta .llmctx-chip:hover,#infoBar .meta .think-chip:hover,#infoBar .meta .rh-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
-#infoBar .meta .llmctx-chip.own,#infoBar .meta .think-chip.own,#infoBar .meta .rh-chip.own{color:var(--accent);border-color:var(--accent-border)}
-.llmctx-form{display:flex;flex-direction:column;gap:8px;margin:0}
-.llmctx-form .ctx-pop-head strong{font-family:inherit}
+/* The ⚙ chip (settings_chip.js): a model-like chip that opens the session's settings panel; accent when the session set its own (capped like the model chip in the min-width:601px rule above, the full text in its tooltip; a phone shows ⚙ with a dot). */
+#infoBar .meta .settings-chip{position:relative;padding:2px 6px;border-radius:6px;font-size:11px;font-weight:400;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
+#infoBar .meta .settings-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+#infoBar .meta .settings-chip.own{color:var(--accent);border-color:var(--accent-border)}
+/* A chip's icon (⚙ here, the start page's own SVG from composer.css): the glyph stays the text, the mask draws it. */
+#infoBar .meta :is(.settings-chip,.tools-chip){display:inline-flex;align-items:center;gap:4px}
+#infoBar .meta .settings-chip .sc-own{min-width:0;overflow:hidden;text-overflow:ellipsis}
+#infoBar .meta .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}
+#infoBar .meta .sc-gear{--icon:var(--icon-settings)}
+#infoBar .meta .tc-kit{--icon:var(--icon-toolkit)}
 .llmctx-field{display:flex;align-items:center;gap:8px}
 .llmctx-field>span{flex:0 0 58px;font-size:12px;color:var(--text-muted)}
 .llmctx-field select,.llmctx-field input{flex:1;min-width:0;box-sizing:border-box;padding:5px 8px;border-radius:7px;border:1px solid var(--border-strong);background:var(--bg-inset);color:var(--text);font:inherit;font-size:13px;line-height:1.4}
@@ -1101,8 +1124,6 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 /* A select's closed box and caret: forms.css (.select-wrap); here the wrapper takes the field's width. */
 .llmctx-field>.select-wrap{flex:1}
 .llmctx-field input::placeholder{color:var(--text-faint);opacity:1}
-.llmctx-form .llmctx-set{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
-.llmctx-form .llmctx-set:disabled{opacity:.6;cursor:default}
 /* Attached context (context_chips.js): a row of its own under the meta; not the composer's #chips/.chip. */
 #contextChips{order:5;flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
 #contextChips[hidden]{display:none}
@@ -1297,13 +1318,15 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 /* Phones: the footer is one line; its meta scrolls sideways (all of it stays reachable). */
 @media(max-width:600px){
   #infoBar{flex-wrap:nowrap;align-items:center;gap:6px;padding:6px 10px 8px}
-  /* No terminal on a phone to attach from. */
-  #infoBar .meta .copy-attach{display:none}
   #infoBar .meta{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
   #infoBar .meta::-webkit-scrollbar{display:none}
   #infoBar .meta>*{flex-shrink:0}
   #infoBar .meta .id{order:-2}
   #infoBar .meta .status{order:-1}
+  /* ⚙ 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::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. */

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

@@ -1,6 +1,7 @@
-// The session bar's info line (#infoText): the open session's id, its copy
-// chi --attach button, status, model, chain links, parent and delegates,
-// thinking, reasoning history, llm ctx and tools chips, model notes, memories, folder, ctx, speed,
+// The session bar's info line (#infoText): the open session's id (a button
+// that copies the full id), status, model, the ⚙ settings chip (thinking,
+// reasoning history, LLM context), the 🧰 toolkit chip, chain links, parent
+// and delegates, model notes, memories, folder, ctx, speed,
 // session clock and the worker's version badge. A lit-html template over a
 // plain model (info_bar_model.js, applied by app.js's updateInfoBar), so the markup lives here and
 // runs under node --test (spec/web/public/info_bar.test.js).
@@ -13,9 +14,7 @@
 import { html, nothing, render } from "./vendor/lit-html.js";
 import { memChipText, memChipTitle } from "./format.js";
 import { ALL_SESSIONS_HASH, sessionHash } from "./route.js";
-import { chipTemplate as llmContextChip } from "./llm_context_chip.js";
-import { chipTemplate as thinkingChip } from "./thinking_chip.js";
-import { chipTemplate as reasoningHistoryChip } from "./reasoning_history_chip.js";
+import { chipTemplate as settingsChip } from "./settings_chip.js";
 import { chipTemplate as toolkitChip } from "./toolkit_chip.js";
 import { chipTemplate as participantsChip } from "./participants_panel.js";
 
@@ -77,12 +76,13 @@ export function workingSetChipTemplate(chip) {
 
 // The info line for +bar+, nothing without a session (the start page hides
 // the bar). +bar+:
-//   id, copied (the copy button just copied), status, model ({text, title,
+//   id, status, model ({text, title,
 //   mismatch}: format.js modelLabel), chain ({prev, next}: chainLinkTemplate's
 //   links or null), parent ({id, title} or null), kids (format.js
-//   childrenSummary), llmContext, thinking and reasoningHistory (the chips'
-//   summaries; reasoningHistory null on a native host: no chip), toolkit
-//   (the tools chip's summary, null on full: no chip), notes
+//   childrenSummary), settings ({thinking, reasoningHistory, llmContext}:
+//   the ⚙ chip's summaries, settings_chip.js; reasoningHistory null on a
+//   native host: no row), toolkit ({summary, defaultKit}: the 🧰
+//   chip's, toolkit_chip.js; null: none), notes
 //   ({text, title} or null), memories (the used names), workingSet
 //   (web.working_set on: {chip}, the working set's chip in place of the
 //   mem chip; null: off), dir, ctx ({text,
@@ -92,9 +92,8 @@ export function workingSetChipTemplate(chip) {
 //   participants chip: participants_panel.js chipModel, or null).
 export function infoBarHtml(bar) {
   if (!bar) return nothing;
-  const attach = `chi --attach ${bar.id}`;
   const memories = bar.memories || [];
-  return html`<div class="meta"><span class="id" title=${bar.id}>${String(bar.id).slice(0, 8)}</span><button type="button" class="copy-attach" title=${`Copy "${attach}" to attach a terminal`}>${bar.copied ? "copied ✓" : "copy chi --attach"}</button><span class=${bar.status ? `status ${bar.status}` : "status"}><span>${bar.status || ""}</span></span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>delegated by ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${thinkingChip(bar.thinking)}${reasoningHistoryChip(bar.reasoningHistory)}${llmContextChip(bar.llmContext)}${toolkitChip(bar.toolkit)}${participantsChip(bar.participants)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${bar.workingSet ? workingSetChipTemplate(bar.workingSet.chip) : memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class=${`model speed${bar.speed.empty ? " empty" : ""}`} title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}<span class=${`model session-time${bar.clock ? "" : " empty"}`} title=${bar.clock ? "This session's time: its turns, and the running one" : "This session's time: no turn yet"}>${bar.clock || CLOCK_NONE}</span>${workerBadgeTemplate(bar.worker)}</div>`;
+  return html`<div class="meta"><button type="button" class="id" title=${`Session id ${bar.id}: click to copy it`}>${String(bar.id).slice(0, 8)}</button><span class=${bar.status ? `status ${bar.status}` : "status"}><span>${bar.status || ""}</span></span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${settingsChip(bar.settings)}${toolkitChip(bar.toolkit)}${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>delegated by ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${participantsChip(bar.participants)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${bar.workingSet ? workingSetChipTemplate(bar.workingSet.chip) : memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class=${`model speed${bar.speed.empty ? " empty" : ""}`} title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}<span class=${`model session-time${bar.clock ? "" : " empty"}`} title=${bar.clock ? "This session's time: its turns, and the running one" : "This session's time: no turn yet"}>${bar.clock || CLOCK_NONE}</span>${workerBadgeTemplate(bar.worker)}</div>`;
 }
 
 // Draws +bar+ into +el+ (#infoText), with the memories in its tooltip

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

@@ -65,12 +65,11 @@ 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 now the clock (ms)
 // @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, now, workingSet = undefined, participants = null }) {
+export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting, running, 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,
@@ -86,7 +85,6 @@ 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,
-    copied: now - state.attachCopiedAt < 2000,
     status: state.status,
     model: modelLabel(state.model, ...(state.served || [])),
     // A link of a session chain: ← the previous link, → the next one (each
@@ -95,11 +93,11 @@ export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, res
     parent: parentChip ? { id: state.parentId, title: parentChip.title } : null,
     // A parent names its delegates; the link opens all sessions.
     kids: childrenSummary({ id }, sessions),
-    llmContext: state.llmContext,
-    thinking: state.thinking,
-    reasoningHistory: state.reasoningHistory,
-    // The tools chip (toolkit_chip.js): null on full.
-    toolkit: state.toolkit,
+    // The ⚙ chip (settings_chip.js): the three settings' summaries.
+    settings: { thinking: state.thinking, reasoningHistory: state.reasoningHistory, llmContext: state.llmContext },
+    // The 🧰 chip (toolkit_chip.js): the session's kit (null on full) and
+    // config's default.
+    toolkit: { summary: state.toolkit, defaultKit: state.toolkitDefault },
     // The model notes the session's prompt carried.
     notes: promptNotesChip(state.promptNotes),
     memories: state.usedMemories,
@@ -122,12 +120,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, now, workingSet = undefined, participants = null }) {
+export function sessionBar({ id, state, sessions, versions, cardTitle, continuing, restarting, streaming, running, 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, now, workingSet, participants });
+  const bar = infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting: restarting.has(id), running, workingSet, participants });
   return { buttons, bar };
 }

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

@@ -1,107 +1,45 @@
-// A level chip in the session bar and its popover: the level the next turn
-// runs at ("think low", "reasoning all"; "· session" when the session set
-// its own) and a form with a level select that runs the setting's command
-// in the session's worker (the reply shows in the conversation, like a
-// typed one). The summary is the setting's SettingExplained#summary
-// ({level, source, own}: the worker's snapshot, a command_ran, or the
-// server's own reading of the session file).
+// A level setting (thinking, reasoning history) as the settings panels draw
+// it: a row of segments (settings_panel.js; the start page's ⚙ panel and the
+// session bar's, settings_chip.js) and the command a session's pick runs in
+// its worker (the reply shows in the conversation, like a typed one). The
+// summary is the setting's SettingExplained#summary ({level, source, own}:
+// the worker's snapshot, a command_ran, or the server's own reading of the
+// session file; the start page's from GET /api/models, own nil).
 //
 // A config names the setting (thinking_chip.js, reasoning_history_chip.js):
-//   name     the popover's heading ("Thinking")
-//   prefix   the chip's word ("think")
+//   name     the row's label and the tooltip's word ("Thinking")
+//   prefix   the session chip's word for an own value ("think low")
 //   command  the command ("/thinking")
-//   levels   the settable levels (the select's options after "follow")
-//   anchor   the chip's selector (its data attribute: each config's
-//            chipTemplate draws it; clicks are delegated on the same
-//            element as the other chips')
-//   formClass, popoverClass, nowClass   the form's, popover's and "Now:"
-//            line's own classes
-//   when()   the form's note on when it applies
-
-import { createChipPopover } from "./chip_popover.js";
-import { html, render } from "./vendor/lit-html.js";
+//   levels   the settable levels (the segments after "default")
+//   cost     the panel's note on what a change costs the prompt cache
 
 export const DEFAULT = "default";
 
-// The chip: its text, tooltip and whether the session set its own; null
-// without a summary (an older worker, or a host the setting means nothing
-// on).
-export function chipModel(cfg, summary) {
-  if (!summary || !summary.level) return null;
-  const own = !!summary.own;
-  const from = own ? "this session" : summary.source || "the model's own";
-  const title = `${cfg.name}: ${summary.level} (${from}). Click to change it for this session.`;
-  return { text: `${cfg.prefix} ${summary.level}${own ? " · session" : ""}`, title, own };
-}
-
-// The command line for a select value ("default" unsets the session's own),
-// with --yes: picking a level in the form is the choice, and the form
-// names the cost (CacheConfirm asks nothing then); null when it is what
-// the form opened with.
+// The command line for a level ("default" unsets the session's own), with
+// --yes: the panel names the cost (CacheConfirm asks nothing then); null
+// when it is the level the session has (+initial+: its own, or default).
 export function commandLine(cfg, level, initial = null) {
   if (initial !== null && level === initial) return null;
   return `${cfg.command} ${level} --yes`;
 }
 
-// "Now: low (session)", "Now: default (the model's own)".
-export function nowText(summary) {
-  return `Now: ${summary.level} (${summary.source || "the model's own"})`;
-}
-
-const option = (value, label, chosen) => html`<option value=${value} ?selected=${value === chosen}>${label}</option>`;
-
-// The popover's form (a lit-html template); +now+ is the summary its "Now:"
-// line reads (refresh passes a newer one, the rest stays as the form opened).
-export function formTemplate(cfg, summary, { running = false, now = summary } = {}) {
-  const chosen = summary.own || DEFAULT;
-  const follow = summary.own ? "follow the model" : `follow the model (${summary.level})`;
-  return html`<form class=${`${cfg.formClass} llmctx-form`}><div class="ctx-pop-head"><strong>${cfg.name}</strong
-    ><span class="ctx-pop-kind">this session</span
-    ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
-    ><div class=${`ctx-pop-meta ${cfg.nowClass}`}>${nowText(now)}</div
-    ><label class="llmctx-field"><span>Level</span><span class="select-wrap"><select name="level">${option(DEFAULT, follow, chosen)}${
-      cfg.levels.map((level) => option(level, level, chosen))}</select></span></label
-    ><div class="ctx-pop-meta">${cfg.when()}${running ? " A turn is running: it applies after this turn." : ""}</div
-    ><div class="ctx-pop-actions"><button type="submit" class="llmctx-set">Set</button></div></form>`;
-}
-
-// The chip's popover (chip_popover.js' shell), as createLlmContextControl's:
-// el is where the chip is drawn (clicks are delegated: #infoText,
-// info_bar.js); summary(): the open session's summary; session(): its id;
-// running(): a turn runs; run(line): sends the command. id and anchor (the
-// chip's selector, by default the config's data attribute) keep it apart
-// from the other controls on the same element.
-export function createLevelControl({ cfg, el, summary, session = () => null, running = () => false, run,
-                                     id, anchor = cfg.anchor,
-                                     doc = document, win = window }) {
-  let initial = null;
-  // What the open form was drawn from: the session's summary and the form's
-  // options.
-  let shown = null;
-  const draw = (now) => render(formTemplate(cfg, shown.data, { ...shown.opts, now }), shell.pop);
-
-  // A refresh (a newer summary): an open form keeps the user's pick; only
-  // "Now:" follows (the same template again: lit writes that line alone).
-  function show(data, opening) {
-    if (opening) {
-      initial = data.own || DEFAULT;
-      shown = { data, opts: { running: running() } };
-    }
-    draw(data);
-  }
-
-  function submit(form) {
-    const level = form.elements.level.value;
-    const was = initial;
-    shell.close();
-    const line = commandLine(cfg, level, was);
-    if (line) run(line);
-  }
-
-  const shell = createChipPopover({
-    id, className: `ctx-popover ${cfg.popoverClass}`, width: 320, el, anchor, summary, session, show,
-    onClose: () => { initial = null; shown = null; }, onSubmit: submit, doc, win,
-  });
-
-  return { close: shell.close, refresh: shell.refresh, get open() { return shell.isOpen(); } };
+// A settings panel row's first segment (settings_panel.js): follow the
+// model, its value in brackets ("default (high)"); "default" alone for a
+// model with no value of its own, or when +own+ (the value in force is the
+// session's, not the model's: the summary doesn't carry the model's then).
+export const followSegment = (value, own = false) => {
+  const plain = own || value === DEFAULT;
+  return { value: DEFAULT, label: plain ? DEFAULT : `${DEFAULT} (${value})`,
+           title: plain ? "Follow the model" : `Follow the model (${value})` };
+};
+
+// A config's row of segments in the settings panel: the model's own level
+// first (followSegment; plain while the session has its own), then the
+// config's levels; the pressed one is +choice+ (null: the follow segment).
+// null without the summary's level (the row is hidden).
+export function segments(cfg, summary, choice) {
+  if (!summary?.level) return null;
+  const pressed = choice || DEFAULT;
+  return [followSegment(summary.level, !!summary.own),
+    ...cfg.levels.map((level) => ({ value: level, label: level }))].map((s) => ({ ...s, pressed: s.value === pressed }));
 }