samagotchi 0.126.0 → 0.128.0

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

@@ -22,7 +22,7 @@
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 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%),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,.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)}
+.turn-stage,#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:var(--card-hover-border)}
 #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)}
 /* A parent whose folded family holds the open session: a quieter mark than .active. */
@@ -30,9 +30,9 @@ body{font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetic
 /* A session that waits on the user (a question, an approval, a card with actions): the warning colour of its question card, also when active or hovered. */
 #topStrip .card.waiting,#allList .card.waiting{border-color:color-mix(in srgb,var(--warn) 75%,transparent)}
 #topStrip .card.waiting:hover,#allList .card.waiting:hover{border-color:var(--warn)}
-@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}
+@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.turn-stage,#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){.turn-stage,#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 .turn-stage,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}
@@ -566,8 +566,8 @@ button.system-one-wrong:hover:not(:disabled){background:var(--bg-hover);color:va
 .bubble.output.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: the text field, a toolbar row, the info bar as its footer. */
-#dock{display:flex;flex-direction:column;flex-shrink:0;margin:0 12px 12px;border-radius:16px;position:relative;transition:border-color .12s ease,box-shadow .12s ease}
+/* The dock is the composer card (composer.css .composer-card): the text field, a toolbar row, the info bar as its footer. */
+#dock{flex-shrink:0;margin:0 12px 12px}
 /* In a session the card floats over the history, so the glass blurs it; the history's bottom padding follows the card (--dock-h, set from dock_reserve.js). */
 /* The session panel lets the page's glow through (the history's own layers go clear), so the card and its footer read as glass over it, not as a flat box on black. */
 body.has-session #center{background:color-mix(in srgb,var(--bg) 35%,transparent);border-color:var(--glass-border);position:relative}
@@ -576,9 +576,8 @@ body.has-session #stage,body.has-session #history{background:transparent}
 body.no-glass.has-session #center{background:var(--bg);border-color:var(--border)}
 body.has-session #dock{position:absolute;left:16px;right:16px;bottom:16px;margin:0;z-index:3}
 body.has-session #history{padding-bottom:calc(var(--dock-h,160px) + 32px)}
-#dock:focus-within{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 3px var(--accent-ring),var(--glass-shadow)}
 /* The delivery line (delivery_line.js): a session's row above the text field, always there so the composer never changes height: the key hint while idle; while a turn runs, where a message typed now goes in, then the cut and queue links. One quiet row, ellipsised; a phone gets the short text and chips. */
-#deliveryLine{display:flex;align-items:center;gap:10px;min-width:0;flex:1 0 100%;height:20px;padding:0 2px;overflow:hidden;font-size:12px;line-height:18px;color:var(--text-muted);user-select:none}
+#deliveryLine{display:flex;align-items:center;gap:10px}
 #deliveryLine[hidden]{display:none}
 #deliveryLine .delivery-where{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #deliveryLine .delivery-where.idle{color:var(--text-faint)}
@@ -672,8 +671,6 @@ body.has-session.fresh-link #composer .actions-col .model-pick:not([hidden]){dis
 /* 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)}
 /* The live slots' heights (headline, tool row, trail); --ts-live-h is their running height with the two 8 px gaps. */
 .turn-stage{--ts-head-h:42px;--ts-now-h:32px;--ts-trail-h:18px;--ts-live-h:calc(var(--ts-head-h) + var(--ts-now-h) + var(--ts-trail-h) + 16px)}
 .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}
@@ -995,7 +992,7 @@ button.ws-row:hover:not(:disabled){filter:none;background:var(--bg-hover)}
   .ts-trail-item{max-width:24ch}
 }
 @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}}
-#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{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)
    shrink it to a narrow column in a small window and its items wrap into five lines. With a 640px basis they share
@@ -1268,13 +1265,35 @@ body.has-session #newBtn .brand-new{display:inline}
 /* The scope chip: "<project> · all", or "all projects" and where a new session starts (start page only). */
 #scope{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--text-muted)}
 #scope[hidden]{display:none}
-#scope .scope-name{flex-shrink:0;padding:2px 9px;border:1px solid var(--border-strong);border-radius:999px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
+#scope .scope-name{display:inline-flex;align-items:center;flex-shrink:0;padding:2px 9px;border:1px solid var(--border-strong);border-radius:999px;background:transparent;color:var(--text-2);font:inherit;line-height:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw;cursor:pointer;transition:none}
+#scope .scope-name:hover:not(:disabled){filter:none}
 #scope .scope-name.error{color:var(--warn-text);border-color:var(--warn-border)}
 #scope .scope-all{color:var(--text-muted);text-decoration:none}
 #scope .scope-all:hover{color:var(--accent);text-decoration:underline}
 #scope .scope-where{display:inline-flex;gap:5px;min-width:0;white-space:nowrap;font-size:11px}
 /* The path cuts on the left, so its last folders stay in view. */
 #scope .scope-where .path{overflow:hidden;text-overflow:ellipsis;direction:rtl;min-width:0;font-family:ui-monospace,monospace}
+#projectPicker{width:min(380px,calc(100vw - 32px))}
+.project-picker.sheet{border-radius:14px;padding:14px 16px}
+.project-picker .ctx-pop-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
+.project-picker .ctx-pop-head strong{font-family:inherit}
+.project-list{display:flex;flex-direction:column;gap:6px;margin:2px 0;padding:0}
+.project-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid transparent;border-radius:9px;background:var(--bg-inset);color:var(--text);text-decoration:none}
+.project-row:hover{background:var(--bg-hover);color:var(--text-hover)}
+.project-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.project-row[aria-current="page"]{border-color:var(--accent-border);background:var(--accent-bg)}
+.project-main{display:flex;flex:1;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
+.project-name{font-weight:600;overflow-wrap:anywhere}
+.project-root{flex-basis:100%;min-width:0;color:var(--text-muted);font:11px ui-monospace,monospace;overflow-wrap:anywhere}
+.project-meta{display:flex;flex-shrink:0;align-items:center;gap:7px;color:var(--text-muted);font-size:11px;white-space:nowrap}
+.project-default{padding:1px 6px;border-radius:999px;background:var(--bg-raised);color:var(--text-muted);font-size:10px}
+.project-check{color:var(--accent);font-weight:700}
+.project-hint{flex-basis:100%;color:var(--text-muted);font-size:12px}
+/* The divider is its own hairline above the row: a border-top on the rounded row curved up at both ends. */
+.project-all{position:relative;margin-top:12px;background:transparent}
+.project-all::before{content:"";position:absolute;left:-1px;right:-1px;top:-9px;height:1px;background:var(--border);pointer-events:none}
+.project-note{padding:5px 2px;color:var(--text-muted);font-size:12px}
+.project-error{color:var(--warn-text)}
 body.has-session #scope .scope-where{display:none}
 /* A phone has no room for both; the hidden strip's pill (count, live) wins. */
 @media(max-width:600px){body.strip-hidden #scope .scope-where{display:none}}
@@ -1525,7 +1544,7 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card .dot.waiting,.family-row .dot.waiting{background:var(--warn);animation:attn-pulse 1.6s ease-in-out var(--pulse-delay,0s) infinite}
 @keyframes attn-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 60%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 0%,transparent)}}
 @media (prefers-reduced-motion:reduce){.card .dot.running,.card .dot.waiting,.family-row .dot.running,.family-row .dot.waiting{animation:none}}
-.card .attn,.family-row .attn{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0;background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border)}
+.card .attn,.family-row .attn,.project-picker .attn{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0;background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border)}
 .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)}
@@ -1569,7 +1588,7 @@ a{color:var(--accent)}
       <div id="notice" role="status" hidden></div>
     </div>
     <div id="lightbox" hidden><img alt=""></div>
-    <div id="dock">
+    <div id="dock" class="composer-card">
       <div id="initRow" role="status" aria-live="polite" hidden></div>
       <div id="composeGrip" class="edge-grip" tabindex="0" aria-label="Message box" title="Drag to make the message box taller (double-click resets)"></div>
       <div id="composer" style="position:relative">
@@ -1578,7 +1597,7 @@ a{color:var(--accent)}
           <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="deliveryLine" aria-live="off" hidden></div>
+        <div id="deliveryLine" class="composer-line" aria-live="off" hidden></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>
@@ -1597,7 +1616,7 @@ a{color:var(--accent)}
           </div>
         </div>
       </div>
-      <div id="infoBar">
+      <div id="infoBar" class="composer-card-foot">
         <div class="info" id="infoText"></div>
         <div id="contextChips" aria-label="Attached context" hidden></div>
         <button class="ghost" id="infoCancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Stop turn</button>

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

@@ -3,6 +3,7 @@
 // title badge for what it returns, while the tab is not in front.
 
 import { clip } from "./format.js";
+import { isParticipantAuthor } from "./participant_model.js";
 
 // The bell's state. OS notifications need a secure context: on chi web
 // over http at a LAN address the API is missing or always denied, so the
@@ -163,7 +164,9 @@ export function attentionText(session, attention) {
   const title = clip(name, 61);
   const seconds = Math.round(Number(session?.last_turn?.seconds) || 0);
   const verdict = session?.last_verdict;
-  const who = verdict?.by_name || (verdict?.by ? "A participant" : "You");
+  // An owner's verdict has no participant author (none, "" or "owner").
+  const byParticipant = isParticipantAuthor(verdict?.by);
+  const who = verdict?.by_name || (byParticipant ? "A participant" : "You");
   const verdictReason = clip(String(verdict?.reason || ""), VERDICT_REASON_MAX);
   const verdictIcon = { confirmed: "✅", refuted: "❌", unclear: "❓" }[verdict?.verdict] || "";
   const verdictBody = `${who}: ${verdictIcon} ${verdict?.verdict || ""} — ${verdictReason}`;

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

@@ -105,42 +105,43 @@ main{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 8px}
 .p-tool-one.error{color:var(--danger-text)}
 .p-tag{font-size:11px;padding:0 6px;border-radius:999px;background:var(--bg-raised);color:var(--text-3)}
 .p-waiting{align-self:flex-start;font-size:13px;color:var(--warn-text);background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:999px;padding:3px 12px}
-.p-dock{border-top:1px solid var(--border);background:var(--bg-panel);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
+/* The dock is the owner's composer card (index.html's #dock): a glass card over the page's bottom edge, holding the
+   comment box (key hint, text field, usage footer); the queue and errors sit above it. */
+.p-dock{padding:6px 16px calc(16px + env(safe-area-inset-bottom))}
 .p-dock-in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
 .p-queue{display:flex;flex-direction:column;gap:4px;font-size:13px}
 .p-queued{display:flex;align-items:center;gap:8px;color:var(--text-3)}
 .p-queued span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .p-queue-note{font-size:12.5px;color:var(--text-muted)}
 .p-error{font-size:13px;color:var(--danger-text);background:var(--danger-bg-dim);border-radius:8px;padding:6px 10px}
-/* The comment box: the shared composer (composer.css, composer_mount.js), as the owner's session composer lays it out
-   (participant.js sets body.has-session for a participant: one row, the text field and Send at its bottom right). Its
-   grip straddles the dock's top border; folded, the dock keeps the queue and the grip as the handle. No `/` list,
-   delivery line or model picker here. */
-#composer{background:var(--bg-inset);border:1px solid var(--border-strong);border-radius:12px}
-#composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
-body.has-session #composer{padding:6px 6px 6px 10px}
+/* The comment box: the shared composer in the shared card (composer.css, composer_mount.js), as the owner's session
+   composer lays it out (participant.js sets body.has-session for a participant): the key hint as the composer's line,
+   the text field and Send, the usage as the card's footer. Its grip sits on the card's top edge, as the owner's does;
+   folded, the card keeps its footer under the grip, the owner's info bar's way. No `/` list, delivery choices or model
+   picker here. */
 #composer textarea{font:inherit;line-height:1.45;padding:2px 0}
 #composer textarea:disabled{cursor:not-allowed}
 #composer .actions-col #send{height:30px;min-height:30px;line-height:30px;padding:0 16px;font-weight:600}
-.p-dock #composeGrip{margin:-15px 0 5px}
-body.composer-folded .p-hint{display:none}
-/* The participant's own usage (participant_model.js usageItems: the fields their grant's exposure shows), one line
-   beside the hint; a phone shows it alone, one line, the end cut. Folded, it goes with the hint. */
-.p-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-width:0}
-.p-foot .p-hint{flex:1 1 320px;min-width:0}
+/* The key hint wraps to at most two lines (a narrow card cuts the second's end); the whole text is its title. */
+.p-hint.composer-line{color:var(--text-faint);height:auto;max-height:36px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
+/* The participant's own usage (participant_model.js usageItems: the fields their grant's exposure shows), one line in
+   the card's footer, the end cut. Folded, it stays under the grip. */
+.p-foot{min-width:0}
+.p-foot:has(> .p-usage[hidden]){display:none}
+/* Folded before the usage loads, the card keeps a footer's height under its grip, not a 2 px sliver. */
+body.composer-folded .p-foot:has(> .p-usage[hidden]){display:block;min-height:18px}
 .p-usage{display:flex;align-items:baseline;min-width:0;max-width:100%;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .p-usage span{flex:0 0 auto}
 .p-usage span+span::before{content:"·";padding:0 6px;color:var(--text-faint)}
 .p-usage span.model{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .p-usage .warn{color:var(--warn-text)}
 .p-usage .over{color:var(--danger-text);font-weight:600}
-body.composer-folded .p-foot{display:none}
+body.composer-folded .p-foot{border-top-color:transparent}
 button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--border-strong);background:var(--bg-raised);color:var(--text);padding:6px 12px}
 button:hover{background:var(--bg-hover)}
 button.primary{background:var(--primary);border-color:var(--primary);color:var(--on-solid);height:42px;padding:0 18px}
 button.primary:disabled{opacity:.5;cursor:default}
 button.small{font-size:12px;padding:2px 8px}
-.p-hint{font-size:12px;color:var(--text-faint)}
 .p-ended{max-width:30rem;margin:18vh auto 0;padding:0 16px;text-align:center;display:flex;flex-direction:column;gap:10px}
 .p-ended h1{font-size:20px;color:var(--text-bright)}
 .p-ended p{color:var(--text-3)}
@@ -151,12 +152,10 @@ button.small{font-size:12px;padding:2px 8px}
   .p-people .p-person:nth-child(n+4){display:none}
   main{padding:12px 16px 6px}
   .p-bubble{padding:9px 12px}
-  .p-hint,.p-note{display:none}
+  .p-hint.composer-line,.p-note{display:none}
 }
 /* Under 16px iOS Safari zooms the page on focus (and a Home Screen app never zooms back). */
 @media (max-width:600px),(pointer:coarse){#composer textarea{font-size:16px}}
-/* A phone's grip (composer.css: 26 px tall, the pill at 17 px): the pill on the dock's top border. */
-@media (max-width:600px){.p-dock #composeGrip{margin:-29px auto 3px}}
 </style>
 </head>
 <body>
@@ -185,25 +184,27 @@ button.small{font-size:12px;padding:2px 8px}
   <div class="p-thread" id="thread"></div>
 </main>
 <footer class="p-dock" id="dock" hidden>
-  <div id="composeGrip" class="edge-grip" tabindex="0" aria-label="Comment box" title="Drag to make the comment box taller (double-click resets)"></div>
   <div class="p-dock-in">
     <div class="p-queue" id="queue"></div>
     <div class="p-error" id="error" role="alert" hidden></div>
-    <div id="composer">
-      <div class="compose-col">
-        <div id="chips" hidden></div>
-        <textarea id="comment" rows="1" placeholder="Comment or ask" aria-label="Comment or ask"></textarea>
+    <div class="p-card composer-card">
+      <div id="composeGrip" class="edge-grip" tabindex="0" aria-label="Comment box" title="Drag to make the comment box taller (double-click resets)"></div>
+      <div id="composer">
+        <div class="p-hint composer-line" id="hint">⏎ sends, ⇧⏎ a new line, ↑ an earlier comment. The model answers in a read-only turn; the owner sees everything.</div>
+        <div class="compose-col">
+          <div id="chips" hidden></div>
+          <textarea id="comment" rows="1" placeholder="Comment or ask" aria-label="Comment or ask"></textarea>
+        </div>
+        <div class="actions-col">
+          <button type="button" id="attachBtn" class="attach-btn" title="Add images" aria-label="Add images" hidden></button>
+          <input type="file" id="attachInput" accept="image/*" multiple hidden>
+          <div class="split"><button type="button" class="primary" id="send">Send</button></div>
+        </div>
       </div>
-      <div class="actions-col">
-        <button type="button" id="attachBtn" class="attach-btn" title="Add images" aria-label="Add images" hidden></button>
-        <input type="file" id="attachInput" accept="image/*" multiple hidden>
-        <div class="split"><button type="button" class="primary" id="send">Send</button></div>
+      <div class="p-foot composer-card-foot">
+        <div class="p-usage" id="usage" aria-label="Your usage" hidden></div>
       </div>
     </div>
-    <div class="p-foot">
-      <div class="p-usage" id="usage" aria-label="Your usage" hidden></div>
-      <div class="p-hint" id="hint">⏎ sends, ⇧⏎ a new line, ↑ an earlier comment. The model answers in a read-only turn; the owner sees everything.</div>
-    </div>
   </div>
 </footer>
 </div>

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

@@ -12,7 +12,7 @@
 // (spend vs cap, queue, link expiry, model). The owner's participant view
 // mounts none.
 import {
-  authorColor, participantAuthor, authorLabel, toolLine, refusalText, dequeueText, endedText, streamURL, reloads, endsLiveTurn, liveFrom, applyLive,
+  authorColor, participantAuthor, isParticipantAuthor, authorLabel, toolLine, refusalText, dequeueText, endedText, streamURL, reloads, endsLiveTurn, liveFrom, applyLive,
   liveText, withToolSteps, pickSubject, subjectBody, subjectsKey, narrowView, retryDelay, retries, threadGaps, usageItems,
   modeCopy,
 } from "./participant_model.js";
@@ -22,10 +22,11 @@ import { createAuthLost, lostAnswer } from "./auth_lost.js";
 import { REPLACE_SESSION_TEXT, fragmentCode, tradeFragmentCode } from "./token_fragment.js";
 import { createAnnotateBar } from "./annotate_bar.js";
 import { parsePresets } from "./annotate_presets.js";
-import { VERIFY_PRESET, withVerify } from "./verify_preset.js";
+import { VERIFY_PRESET, VERIFY_UNAVAILABLE, withVerify } from "./verify_preset.js";
 import { appendQuote } from "./annotations.js";
 import { messageAuthorData, participantQuote, participantSource } from "./participant_annotate.js";
 import { claimFromHash, selectionClaim, showClaim } from "./claim_link.js";
+import { CHECK_NOT_ON_PAGE } from "./verdict_card.js";
 import { freshURL, placeVerdictWithFresh, settleRunning } from "./verdict_fresh.js";
 import { mountComposer } from "./composer_mount.js";
 import { PROMPT_LINE_PX } from "./composer_size.js";
@@ -234,6 +235,7 @@ function render() {
   const copy = modeCopy(viewer.mode);
   $("note").textContent = ownerView ? "" : copy.note;
   $("hint").textContent = `⏎ sends, ⇧⏎ a new line, ↑ an earlier comment. ${copy.hint}`;
+  $("hint").title = $("hint").textContent; // at most two lines in the card: the whole text on hover
   $("head").hidden = false;
   $("main").hidden = false;
   renderPlan();
@@ -342,7 +344,7 @@ function messageNode(message) {
     const who = el("div", "p-who");
     who.append(el("b", "", authorLabel(message)));
     if (message.merged) who.append(el("span", "p-tag", "added mid-turn"));
-    if (message.author) who.append(el("span", "p-tag", modeCopy(message.participant_mode).tag));
+    if (isParticipantAuthor(message.author)) who.append(el("span", "p-tag", modeCopy(message.participant_mode).tag));
     node.append(who);
     const text = message.content + (message.images ? `\n[${message.images} image${message.images > 1 ? "s" : ""}]` : "");
     node.append(el("div", "p-bubble", text));
@@ -412,13 +414,17 @@ function renderThread() {
     const author = record.by || null;
     const viewer = data.viewer || {};
     let who = ownerView ? "You" : "Owner";
-    if (author && author !== "owner") {
+    if (isParticipantAuthor(author)) {
       if (!ownerView && author === participantAuthor(viewer.id)) who = "You";
       else {
         who = (data.participants || []).find((participant) => participantAuthor(participant.id) === author)?.name || "A participant";
       }
     }
-    placeVerdictWithFresh(thread, record, { who, author }, verifyFreshState());
+    placeVerdictWithFresh(thread, record, {
+      who,
+      author,
+      onMissingCheck: () => showClaimNote(CHECK_NOT_ON_PAGE),
+    }, verifyFreshState());
   }
   if (atBottom || !thread.dataset.drawn) main.scrollTop = main.scrollHeight;
   thread.dataset.drawn = "1";
@@ -430,10 +436,12 @@ function renderThread() {
 // does, and no one here gets a link to the child's session.
 function verifyFreshState() {
   if (!Array.isArray(data.fresh_running)) data.fresh_running = [];
+  const unavailable = data.session?.verify_unavailable === true;
   return {
     verdicts: data.verdicts || [],
     running: data.fresh_running,
-    canStart: !ownerView && !ended && !!data.viewer?.can_comment,
+    canStart: !unavailable && !ownerView && !ended && !!data.viewer?.can_comment,
+    unavailableReason: unavailable ? VERIFY_UNAVAILABLE : null,
     start: async (of) => {
       const { ok, body } = await api(freshURL(sessionId, of), {
         method: "POST", body: "{}", headers: { "Content-Type": "application/json" },
@@ -649,6 +657,8 @@ for (const button of $("viewSeg").querySelectorAll("button")) {
 // while this participant can't comment.
 const annotateBar = createAnnotateBar({
   presets: withVerify(parsePresets(body.annotatePresets)),
+  disabledPreset: (preset) => preset === VERIFY_PRESET
+    && data?.session?.verify_unavailable === true ? VERIFY_UNAVAILABLE : null,
   canAnnotate: () => !ownerView && !ended && !!data?.viewer?.can_comment,
   roots: () => [$("planDoc"), $("thread")],
   isLive: (root) => !!root.closest?.(".p-msg.live"),

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

@@ -9,6 +9,7 @@ import { fullTime, gapText } from "./format.js";
 // (Steer.author_for / PARTICIPANT_PREFIX): the one place the web spells it.
 export const PARTICIPANT_PREFIX = "p:";
 export const participantAuthor = (id) => `${PARTICIPANT_PREFIX}${id}`;
+export const isParticipantAuthor = (by) => typeof by === "string" && by.startsWith(PARTICIPANT_PREFIX);
 
 // Six author colours (tokens.css --author-1..6), one per participant id,
 // the same on every page that shows them (the owner's badges too).
@@ -22,13 +23,13 @@ export function authorSlot(author) {
 
 // The CSS colour of an author: a participant's slot, else the owner's.
 export function authorColor(author) {
-  return author ? `var(--author-${authorSlot(author)})` : "var(--author-owner)";
+  return isParticipantAuthor(author) ? `var(--author-${authorSlot(author)})` : "var(--author-owner)";
 }
 
 // Who wrote a user message or started a turn, as the page names them.
 export function authorLabel(item) {
   if (item?.mine) return "You";
-  if (item?.author) return item.author_name || "A participant";
+  if (isParticipantAuthor(item?.author)) return item.author_name || "A participant";
   if (item?.automatic) return "Automatic";
   return "Owner";
 }

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

@@ -4,7 +4,7 @@
 // prompt's own author_name (a saved message, turn_started) comes first; a
 // badge drawn before the list came, with neither, says UNNAMED until
 // nameUnnamedBadges names it.
-import { authorColor, participantAuthor } from "./participant_model.js";
+import { authorColor, isParticipantAuthor, participantAuthor } from "./participant_model.js";
 
 export const UNNAMED = "a participant";
 
@@ -28,7 +28,7 @@ export function participantName(author) {
 // +mode+: the turn's participant_mode stamp ("review", "pair"; the
 // message's, or turn_started's), kept as mode: when known.
 export function authorBadge(author, name = null, mode = null) {
-  if (!author || author === "owner") return null;
+  if (!isParticipantAuthor(author)) return null;
   const known = name || participantName(author);
   return { author, name: known || UNNAMED, color: authorColor(author), ...(known ? {} : { unnamed: true }), ...(mode ? { mode } : {}) };
 }

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

@@ -0,0 +1,115 @@
+// The project picker opened by the top-bar scope chip. The server supplies
+// the project roots and their current/default marks; links carry the view
+// without carrying a session hash into another project's list.
+
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { allScopeHref, projectScopeHref } from "./scope.js";
+import { createChipPopover } from "./chip_popover.js";
+
+function homeHref(search) {
+  const view = new URLSearchParams(search || "").get("view");
+  return view ? `/?view=${encodeURIComponent(view)}` : "/";
+}
+
+function sessionCount(count) {
+  const n = Number(count) || 0;
+  return `${n} session${n === 1 ? "" : "s"}`;
+}
+
+function projectRow(row, search) {
+  return html`<a class=${`project-row${row.default ? " default" : ""}${row.current ? " current" : ""}`}
+    href=${row.default ? homeHref(search) : projectScopeHref(row.dir, "", search)}
+    aria-current=${row.current ? "page" : nothing}>
+    <span class="project-main"><span class="project-name">${row.name}</span
+      >${row.default ? html`<span class="project-default">default</span>` : nothing
+      }<span class="project-root">${row.root_label}</span></span>
+    <span class="project-meta">${Number(row.waiting) > 0 ? html`<span class="attn">${Number(row.waiting)} waiting</span>` : nothing
+      }<span class="project-count">${sessionCount(row.sessions)}</span>${row.current ? html`<span class="project-check" aria-hidden="true">✓</span>` : nothing}</span>
+  </a>`;
+}
+
+// +rows+ is the API's ordered list. When there is no project scope, the
+// all-projects row is current; a bad ?dir= has no current project to mark.
+export function pickerTemplate({ rows = [], loading = false, error = "", search = "", currentDir = null,
+                                 allCurrent = false } = {}) {
+  const allHref = allScopeHref("", currentDir, search);
+  return html`<div class="ctx-pop-head"><strong>Projects</strong><button type="button" class="ctx-pop-close"
+      data-act="close" aria-label="Close">×</button></div>
+    ${loading ? html`<div class="project-note" role="status">Loading projects…</div>` : nothing}
+    ${error ? html`<div class="project-note project-error" role="alert">${error}</div>` : nothing}
+    <nav class="project-list" aria-label="Projects">${rows.map((row) => projectRow(row, search))}
+      <a id="projectAll" class=${`project-row project-all${allCurrent ? " current" : ""}`}
+        href=${allHref} aria-current=${allCurrent ? "page" : nothing}>
+        <span class="project-main"><span class="project-name">All projects</span
+          ><span class="project-hint">Every session</span></span>
+        ${allCurrent ? html`<span class="project-check" aria-hidden="true">✓</span>` : nothing}
+      </a>
+    </nav>`;
+}
+
+// +scopeError+ returns the page's current folder error, if any. +where+
+// supplies the live query string so links retain ?view= without a hash.
+export function createProjectPicker({ el, scope, scopeError = () => null, api, where = () => ({ search: "" }),
+                                      doc = globalThis.document, win = globalThis.window }) {
+  let rows = [];
+  let loading = false;
+  let error = "";
+  let loads = 0;
+
+  const currentDir = () => scopeError() ? null : scope.dir || null;
+  const paint = (focus = false) => {
+    const failedScope = !!scopeError();
+    render(pickerTemplate({
+      rows, loading, error, search: where().search, currentDir: currentDir(),
+      allCurrent: !scope.dir && !failedScope,
+    }), shell.pop);
+    if (focus) {
+      const target = shell.pop.querySelector('.project-row[aria-current="page"]') ||
+        shell.pop.querySelector(".project-row");
+      target?.focus();
+    }
+  };
+
+  async function load(focus = false) {
+    const turn = ++loads;
+    loading = true;
+    error = "";
+    if (shell.isOpen()) {
+      paint();
+      shell.replace();
+    }
+    try {
+      // A dead ?dir (the folder-not-found chip) is left out: the list is the way out of it.
+      const dir = currentDir();
+      const answer = await api(`/api/projects${dir ? `?dir=${encodeURIComponent(dir)}` : ""}`);
+      if (!Array.isArray(answer)) throw new Error("the server returned an invalid project list");
+      if (turn !== loads) return;
+      rows = answer;
+    } catch (e) {
+      if (turn !== loads) return;
+      error = `Can't read projects: ${e?.message || e}`;
+      rows = [];
+    }
+    if (turn !== loads) return;
+    loading = false;
+    if (shell.isOpen()) {
+      paint(focus);
+      shell.replace();
+    }
+  }
+
+  const shell = createChipPopover({
+    id: "projectPicker", className: "ctx-popover project-picker", width: 380, el, anchor: "#scopePick",
+    summary: () => ({}), sheet: true, label: "Projects", doc, win,
+    show: () => {
+      rows = [];
+      loading = true;
+      error = "";
+      paint();
+      void load(true);
+    },
+    onClose: () => { loads += 1; },
+  });
+
+  return { pop: shell.pop, isOpen: shell.isOpen, load };
+}

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

@@ -3,6 +3,7 @@
 // command or paths, where and why. Its options end in "Deny"; the answer's
 // last option denies. A page that doesn't know approvals still shows the
 // plain question text, which says the same.
+import { isParticipantAuthor, PARTICIPANT_PREFIX } from "./participant_model.js";
 
 export function isApproval(pq) {
   return !!pq && pq.kind === "approval";
@@ -68,7 +69,9 @@ export function relayView(pq) {
 export function approvalAsker(pq) {
   const a = (pq && pq.approval) || {};
   if (!a.author) return null;
-  return a.author_name ? String(a.author_name) : String(a.author).replace(/^p:/, "");
+  const author = String(a.author);
+  return a.author_name ? String(a.author_name)
+    : isParticipantAuthor(author) ? author.slice(PARTICIPANT_PREFIX.length) : author;
 }
 
 // @return {null | {tool, what, isCommand, where, why, paths?, preview?, delegate?, asker?}};

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

@@ -7,18 +7,21 @@ import { clientLabel, isOwn, withImages } from "./turn_events.js";
 // What a prompt_restored (the worker rolled a failed turn back and handed its
 // prompt back) does in this tab: `refill` is the text for an empty composer,
 // only for a prompt this page sent (`sentIds`, its acks' enqueued_ids), so a
-// replay after a reload never refills stale text; `own`/`label` mark the
+// replay after a reload never refills stale text, with a Verify turn's claim
+// (`verify`) so a resend still records a verdict; `own`/`label` mark the
 // failed bubble shown again after the resync.
 export function restoreAction(event, { myId, sentIds, composerEmpty }) {
   const origin = event?.origin || {};
   const own = isOwn(origin.client_id, myId);
   const sent = own && !!origin.enqueued_id && sentIds.has(origin.enqueued_id);
-  // The images go back as chips with the text.
+  // The images go back as chips with the text, and its Verify claim.
+  const back = sent && composerEmpty;
   return withImages({
-    refill: sent && composerEmpty ? event.prompt : null,
+    refill: back ? event.prompt : null,
     own,
     label: own ? null : clientLabel(origin.client_id),
-  }, sent && composerEmpty ? event.images : null);
+    ...(back && event.verify ? { verify: event.verify } : {}),
+  }, back ? event.images : null);
 }
 
 // A turn that fails fast can have its prompt_restored come over the stream

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

@@ -49,24 +49,22 @@ export function cardFolder(workingDirectory, projectName) {
   return folder === projectName ? "" : folder;
 }
 
-// The header's scope chip: "<project> · all" in a project view (all links
-// to the same place without ?dir); "all projects" otherwise, with a link
-// back to the project it came from and where a new session starts on the
-// start page. +scope+: { dir, projectName, projectDir, serverDir, backDir,
-// backName }; +error+: why the ?dir= folder can't be shown; +where+:
-// () => { hash, search } (the page's location, read again at a click: the
-// links follow an open session or the all-sessions view).
+// The header's project chip opens the picker. The "all" link remains the
+// direct way to every session from a project view. +scope+: { dir,
+// projectName, projectDir, serverDir, backDir, backName }; +error+: why
+// the ?dir= folder can't be shown; +where+: () => { hash, search } (the
+// page's location, read again at a click).
 export function scopeTemplate(scope, { error = null, where = () => ({ hash: "", search: "" }) } = {}) {
   const at = where();
   const allHref = () => allScopeHref(where().hash, scope.dir, where().search);
   const all = html`<a class="scope-all" href=${allScopeHref(at.hash, scope.dir, at.search)} title=${"Sessions of every project"} @click=${(e) => { e.currentTarget.href = allHref(); }}>all</a>`;
-  if (error) return html`<span class="scope-name error" title=${error}>folder not found</span>${all}`;
-  if (scope.projectName) return html`<span class="scope-name" title=${`Sessions of ${scope.projectDir}`}>${scope.projectName}</span>${all}`;
+  if (error) return html`<button id="scopePick" class="scope-name error" type="button" aria-haspopup="dialog" title=${error}>folder not found</button>${all}`;
+  if (scope.projectName) return html`<button id="scopePick" class="scope-name" type="button" aria-haspopup="dialog" title=${`Sessions of ${scope.projectDir}`}>${scope.projectName}</button>${all}`;
   const dir = scope.dir || scope.serverDir;
   const backHref = () => projectScopeHref(scope.backDir, where().hash, where().search);
   const back = scope.backName
     ? html`<a class="scope-all scope-back" href=${projectScopeHref(scope.backDir, at.hash, at.search)} title=${`Sessions of ${scope.backName} only`} @click=${(e) => { e.currentTarget.href = backHref(); }}>← ${scope.backName}</a>`
     : nothing;
   const newSession = dir ? html`<span class="scope-where" title=${`New sessions start in ${dir}`}>new session in<span class="path"><bdi>${dir}</bdi></span></span>` : nothing;
-  return html`<span class="scope-name" title="Sessions of every project">all projects</span>${back}${newSession}`;
+  return html`<button id="scopePick" class="scope-name" type="button" aria-haspopup="dialog" title="Sessions of every project">all projects</button>${back}${newSession}`;
 }

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

@@ -29,7 +29,7 @@ import { composerAfterAck, dropEarlyRestores, restoreOnAck } from "./restore.js"
 // +alert+: the browser's.
 export function createSendTurn({
   session, state, running, clientId, sentIds, earlyRestores, api, dir, startPage, takeDelivery, composer,
-  verify = () => null, clearVerify = () => {},
+  verify = () => null, clearVerify = () => {}, restoreVerify = () => {},
   historyEl, turnDom, makeUserBubble, bubbleById, addCommandBubble,
   addCreatedSession, select, showNotice, updateInfoBar, updateComposerMode, followWokenWorker, refreshHistory,
   leaveGoneSession, runCommand, toast, alert = (text) => globalThis.alert(text),
@@ -158,6 +158,8 @@ export function createSendTurn({
       const restored = restoreOnAck(ack?.enqueued_id, earlyRestores, { myId: clientId, sentIds });
       // A restored line must be seen: the composer opens for this visit.
       if (restored?.refill && sentTo === session()) composer.openForVisit();
+      // Its Verify claim too, so the resend still records a verdict.
+      if (restored?.refill && restored.verify && sentTo === session()) restoreVerify(restored.verify);
       const before = promptEl.value;
       promptEl.value = composerAfterAck({ sent: line, current: before, refill: restored?.refill || "" });
       // A line back from sentTo is a draft of that session, wherever the page is now.