samagotchi 0.79.0 → 0.80.0

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

@@ -17,7 +17,8 @@
   --diff-add-bg:rgba(26,127,55,.12);--diff-add-text:#116329;--diff-del-bg:rgba(207,34,46,.10);--diff-del-text:#82071e;
   --code-text:#1f2328;--code-keyword:#cf222e;--code-string:#0a3069;--code-comment:#57606a;--code-constant:#0550ae;--code-func:#8250df;--code-type:#953800;
   --card-hover-border:rgba(31,35,40,.18);--on-solid:#fff;--on-warn:#1f2328;--text-hover:#0d1117;--badge-bg:rgba(31,35,40,.06);--badge-ring:rgba(31,35,40,.15);--shadow-strong:rgba(31,35,40,.18);--backdrop:rgba(13,17,23,.85);--toast-shadow:0 6px 24px rgba(31,35,40,.14)}}
-/* Icon masks shared by the phone info bar and the all view's cards (the stroke only shapes the mask; the icon takes currentColor). */
+/* Icon masks shared by the phone info bar, the all view's cards and the composer's image button (the stroke only shapes the mask; the icon takes currentColor). */
+:root{--icon-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='10.5' rx='1.5'/%3E%3Ccircle cx='5.75' cy='6.25' r='1.1'/%3E%3Cpath d='m2.5 12.5 3.75-3.75 2.5 2.5 1.75-1.75 3 3'/%3E%3C/svg%3E")}
 :root{--icon-archive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M6.5 9h3'/%3E%3C/svg%3E");--icon-unarchive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M8 11.5V8.25M6.5 9.75 8 8.25l1.5 1.5'/%3E%3C/svg%3E")}
 *{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}
@@ -590,18 +591,26 @@ body.has-session #composer{flex-wrap:wrap;row-gap:6px}
 #lightbox[hidden]{display:none}
 #lightbox img{max-width:96vw;max-height:94vh;border-radius:6px}
 #composer textarea{flex:1 1 auto;min-height:72px;resize:none;background:transparent;border:0;color:var(--text);padding:2px;border-radius:0;font-size:15px;line-height:1.45}
-#composeGrip{position:relative;height:10px;margin:-5px 0;cursor:ns-resize;z-index:2;touch-action:none}
-#composeGrip::after{content:"";position:absolute;left:50%;top:3px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--border-strong);opacity:0;transition:opacity .12s ease}
-#composeGrip:hover::after,#composeGrip:has(+ #composer:hover)::after,#composeGrip.dragging::after{opacity:1}
-#composeGrip:hover::after,#composeGrip.dragging::after{background:var(--accent)}
+/* An edge grip: the thin handle on an edge between two panes (the composer's,
+   the latest-sessions strip's). The pill is the handle's look, a 36×4 px bar
+   centred on the edge, drawn on hover, while dragging or focused; the id
+   rules hold each grip's own box: height and margins (they depend on the flex
+   gap around it: none for the composer's, main's 16 px for the strip's) and
+   its own states. */
+.edge-grip{position:relative;z-index:2;cursor:ns-resize;touch-action:none}
+.edge-grip::after{content:"";position:absolute;left:50%;top:3px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--border-strong);opacity:0;transition:opacity .12s ease}
+.edge-grip:hover::after,.edge-grip.dragging::after{opacity:1}
+.edge-grip:hover::after,.edge-grip.dragging::after{background:var(--accent)}
+.edge-grip:focus-visible{outline:none}
+.edge-grip:focus-visible::after{opacity:1;box-shadow:0 0 0 2px var(--accent-ring)}
+#composeGrip{height:10px;margin:-5px 0}
+#composeGrip:has(+ #composer:hover)::after{opacity:1}
 /* Folded (composer_grip.js, composer_fold.js): the grip is the handle on the info bar's top edge, drawn always, wider so it reads as a control;
    draft = the accent, waiting = the attention colour; .will-fold = a drag past the fold threshold (released it hides the box). */
 body.has-session.composer-folded #composeGrip::after{opacity:1;width:48px;margin-left:-24px}
 #composeGrip.draft::after{background:var(--accent)}
 #composeGrip.waiting::after{background:var(--warn)}
 #composeGrip.will-fold::after{opacity:1;background:var(--accent)}
-#composeGrip:focus-visible{outline:none}
-#composeGrip:focus-visible::after{opacity:1;box-shadow:0 0 0 2px var(--accent-ring)}
 /* A phone has no hover: the pill is always there and the hit zone is taller, ~96 px wide and centred (full width would cover the
    info bar's buttons while folded, the stage card's bottom in the stage view); it reaches 7 px below the edge, the info bar's
    border and padding, so it never covers a button of the bar. */
@@ -619,6 +628,12 @@ body.has-session.composer-folded #composeGrip::after{opacity:1;width:48px;margin
 #composer .actions-col button{white-space:nowrap;font-size:12px;padding:0 12px;height:28px;min-height:28px;line-height:28px}
 #composer .actions-col .split{order:3;display:flex;gap:4px;margin-left:auto}
 #composer #actionBtn{min-width:64px;font-weight:600}
+/* The image button (app.js: a click opens #attachInput, the hidden file picker; a phone's offers the camera and the photo library):
+   an icon just left of Start / Send, quiet like the model picker; hidden in a session a terminal owns, and on a phone while a turn runs. */
+#composer .actions-col .attach-btn{order:2;flex:none;width:28px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted)}
+#composer .actions-col .attach-btn::before{content:"";display:block;width:16px;height:16px;margin:auto;background:currentColor;-webkit-mask:var(--icon-image) center/contain no-repeat;mask:var(--icon-image) center/contain no-repeat}
+#composer .actions-col .attach-btn:hover{filter:none;color:var(--text);background:color-mix(in srgb,var(--bg-hover) 75%,transparent)}
+#composer .actions-col .attach-btn[hidden]{display:none}
 /* In a session the composer is one row: the text field (one line, growing with its text; fitPrompt sets its height)
    and Cancel · Send at its bottom right. The key hint is in the placeholder there, so its row goes. */
 body.has-session #composer{flex-direction:row;align-items:flex-end;padding:10px}
@@ -636,12 +651,12 @@ body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
 /* A fresh link's (body.fresh-link): the session composer is one row and .actions-col is content-sized there, so a px cap keeps the text field's room and Send in view. :not([hidden]) keeps a failed /api/models' hide (this selector outranks the [hidden] one). */
 body.has-session.fresh-link #composer .actions-col .model-pick:not([hidden]){display:inline-block;flex:0 1 auto;min-width:0;max-width:200px}
 @media(max-width:600px){body.has-session.fresh-link #composer .actions-col .model-pick:not([hidden]){max-width:100px}}
-/* The new chat's LLM context chip, after the picker: as quiet as it; accent once a choice is set (the info bar chip's .own). */
+/* The new session's LLM context chip, after the picker: as quiet as it; accent once a choice is set (the info bar chip's .own). */
 #composer .actions-col .llmctx-new{order:0;flex:0 1 auto;min-width:0;max-width:min(40%,260px);height:24px;min-height:24px;line-height:22px;padding:0 6px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text-muted);font-size:11px;font-weight:400;overflow:hidden;text-overflow:ellipsis}
 #composer .actions-col .llmctx-new:hover{filter:none;color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
 #composer .actions-col .llmctx-new.own{color:var(--accent);border-color:var(--accent-border)}
 #composer .actions-col .llmctx-new[hidden],body.has-session #composer .actions-col .llmctx-new{display:none}
-/* The new chat's thinking chip, after it: shorter text, so a smaller share of the row. */
+/* The new session's thinking chip, after it: shorter text, so a smaller share of the row. */
 #composer .actions-col .think-new{max-width:min(25%,140px)}
 /* Phones (the key hint is gone there): the chips keep their whole text and the row wraps, Start staying right (its margin-left:auto) on the last line; only a model name wider than the row ellipsizes. */
 @media(max-width:600px){#composer .actions-col .model-pick{flex:0 1 auto;min-width:0;max-width:100%}#composer .actions-col .llmctx-new,#composer .actions-col .think-new{flex:0 0 auto;max-width:100%}}
@@ -975,8 +990,7 @@ body.has-session #notice{display:none}
 #newBtn .brand-new{font-size:12px;color:var(--text-muted);display:none}
 body.has-session #newBtn .brand-new{display:inline}
 #newBtn:hover .brand-new{color:var(--text-2)}
-.strip-side{display:flex;flex-direction:column;gap:6px;min-width:0}
-/* The scope chip: "<project> · all", or "all projects" and where a new chat starts (start page only). */
+/* 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}
@@ -989,7 +1003,7 @@ body.has-session #newBtn .brand-new{display:inline}
 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}}
-/* A phone's top bar stays one row: "chi +" (the rest of "+ new chat" goes),
+/* A phone's top bar stays one row: "chi +" (the rest of "+ new session" goes),
    tighter gaps, nothing wraps, and the "← project" link cuts with an
    ellipsis before the pill does. */
 @media(max-width:600px){
@@ -998,11 +1012,9 @@ body.has-session #scope .scope-where{display:none}
   #newBtn .brand-new-word{display:none}
   #newBtn .brand-new,#scope .scope-back{white-space:nowrap}
   #scope .scope-back{min-width:0;overflow:hidden;text-overflow:ellipsis}
-  #stripShow{padding:3px 8px}
+  #stripStatus{padding:3px 8px}
   #newBtn .brand-new{font-size:16px}
 }
-/* The ▾ glyph draws tiny at the pill's 11 px: at 20 px it is about as tall
-   as the pill text's capitals (phone and desktop alike). */
 /* The bell (notifications): quiet at the top bar's right end; filled in the accent when on, struck through when the browser blocks it. */
 /* The open session's title, when no strip card in sight shows it (session_title.js): the bar's middle, cut with an ellipsis; the whole first message in its tooltip. */
 #sessionTitle{flex:1;min-width:0;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -1014,10 +1026,10 @@ body.has-session #scope .scope-where{display:none}
 @media(max-width:600px){
   #topBar{flex-wrap:wrap;row-gap:2px}
   #sessionTitle{flex-basis:100%;order:10;font-size:12px}
-  #scope,#stripShow{flex:1 1 0;min-width:0;max-width:max-content}
-  #stripShow{flex-grow:1000;overflow:hidden;text-overflow:ellipsis}
+  #scope,#stripStatus{flex:1 1 0;min-width:0;max-width:max-content}
+  #stripStatus{flex-grow:1000;overflow:hidden;text-overflow:ellipsis}
   #scope .scope-name{flex-shrink:1;min-width:0}
-  #stripShow:has(.live,.waiting) .pill-count{display:none}
+  #stripStatus:has(.live,.waiting) .pill-count{display:none}
 }
 #notifyBtn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;min-height:0;background:transparent;border:1px solid transparent;border-radius:999px;color:var(--text-muted)}
 #notifyBtn[hidden]{display:none}
@@ -1028,7 +1040,6 @@ body.has-session #scope .scope-where{display:none}
 #notifyBtn[data-state="on"] .bell{fill:currentColor;fill-opacity:.22}
 #notifyBtn[data-state="denied"]{color:var(--text-faint)}
 #notifyBtn[data-state="denied"] .slash{display:inline}
-#stripShow .pill-arrow{font-size:20px;line-height:0;vertical-align:-3px}
 .card .folder{font-family:ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--text-3)}
 .card .parent{font-family:ui-monospace,monospace;white-space:nowrap;color:var(--text-3)}
 #infoBar .meta a.parent{text-decoration:none}
@@ -1098,22 +1109,42 @@ body.no-glass :is(#familyPop,#chainPop){background:var(--bg-panel);-webkit-backd
 .scope-error{grid-column:1/-1;font-size:13px;color:var(--warn-text)}
 .strip-toggle{font-size:11px;padding:3px 10px;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:999px}
 .strip-toggle:hover{color:var(--text-2);border-color:var(--border-strong)}
-#stripShow{display:none;white-space:nowrap;flex-shrink:0}
-#stripShow .live{color:var(--ok-text);white-space:nowrap}
-#stripShow .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:4px;vertical-align:1px}
-#stripShow .waiting{color:var(--warn-text);white-space:nowrap}
-#stripShow .waiting-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-right:4px;vertical-align:1px}
-#stripHide{align-self:flex-end;border:0;padding:0 2px;border-radius:4px}
-#stripHide:hover{text-decoration:underline;color:var(--text-2)}
-/* A narrow window's strip scrolls sideways, which puts its own "hide ▴" out of sight: the top bar has it instead, where the pill comes back, with a finger-sized target. */
-#stripHideTop{display:none;white-space:nowrap;flex-shrink:0}
+#stripStatus{display:none;white-space:nowrap;flex-shrink:0}
+#stripStatus .live{color:var(--ok-text);white-space:nowrap}
+#stripStatus .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:4px;vertical-align:1px}
+#stripStatus .waiting{color:var(--warn-text);white-space:nowrap}
+#stripStatus .waiting-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-right:4px;vertical-align:1px}
+/* A narrow window's strip scrolls sideways, and the grip's own target there is thin: the status pill gets a finger-sized one. */
 @media(max-width:900px){
-  body:not(.strip-hidden):not(.all-view) #stripHideTop{display:block}
-  #stripHide{display:none}
-  #stripHideTop,#stripShow{min-height:30px;padding:4px 12px;font-size:12px}
+  #stripStatus{min-height:30px;padding:4px 12px;font-size:12px}
+}
+body.strip-hidden #stripStatus{display:block}
+body.strip-hidden #topStrip, body.all-view #stripStatus{display:none}
+/* The strip's grip (strip_grip.js, app.js): the handle on the edge between the
+   strip and the chat, the composer's twin (the shared .edge-grip look, its own
+   10 px box). Its box is centred on #center's top edge: main's 16 px gap stands
+   on both sides because the box's height and margins add up to -26 px, so the
+   distances stay what they were without it (strip → chat 16 px; hidden, bar →
+   chat 10 px). While the strip shows, the pill is drawn on a hover of the strip
+   or of the grip itself, as the composer's is of its box; hidden, it is the
+   always-on handle that brings the strip back (48 px, as the folded composer's,
+   since it is a control then and not only a hint). */
+#stripGrip{height:10px;margin:-5px 0 -21px}
+#topStrip:hover + #stripGrip::after{opacity:1}
+#stripGrip.will-toggle::after{opacity:1;background:var(--accent)}
+body.strip-hidden #stripGrip::after{opacity:1;width:48px;margin-left:-24px}
+body.all-view #stripGrip{display:none}
+/* A phone has no hover: the pill is always drawn, and the hit zone is 28 px
+   tall, ~96 px wide and centred on the edge (main's gap plus the box: the
+   margins add up to -(28+16)) — the mirror of the composer's phone grip: it
+   reaches 7 px over its own side (below the cards; it never covers one) and
+   21 px into the transcript, with the pill on #center's top edge. The grip sits
+   under the strip, outside its sideways scroller, so a swipe on the cards stays
+   a scroll (touch-action:none is the grip's box, not the strip's). */
+@media(max-width:600px){
+  #stripGrip{width:96px;height:28px;margin:-7px auto -37px}
+  #stripGrip::after{top:5px;opacity:1}
 }
-body.strip-hidden #stripShow{display:block}
-body.strip-hidden #topStrip, body.all-view #stripShow{display:none}
 #allTile{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;color:var(--text-2);font-size:13px;font-weight:600;width:100%}
 #allTile .count{font-size:11px;font-weight:400;color:var(--text-muted)}
 #allView{display:none;flex:1;min-height:0;flex-direction:column;gap:12px}
@@ -1213,14 +1244,14 @@ a{color:var(--accent)}
 <body>
 <main>
   <div id="topBar">
-    <button type="button" id="newBtn" class="brand" title="New chat"><span class="brand-name">chi</span><span class="brand-new">+<span class="brand-new-word"> new chat</span></span></button>
+    <button type="button" id="newBtn" class="brand" title="New session"><span class="brand-name">chi</span><span class="brand-new">+<span class="brand-new-word"> new session</span></span></button>
     <div id="scope" hidden></div>
-    <button type="button" class="strip-toggle" id="stripShow" title="Show the latest sessions"><span class="pill-arrow" aria-hidden="true">▾</span> sessions</button>
-    <button type="button" class="strip-toggle" id="stripHideTop" title="Hide the latest sessions"><span class="pill-arrow" aria-hidden="true">▴</span> hide</button>
+    <button type="button" class="strip-toggle" id="stripStatus" title="All sessions, with search"><span class="pill-count">sessions</span></button>
     <span id="sessionTitle" hidden></span>
     <button type="button" id="notifyBtn" aria-label="Notifications" aria-pressed="false" hidden><svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path class="bell" d="M8 1.75a4 4 0 0 0-4 4v2.6L2.75 10.6v.9h10.5v-.9L12 8.35v-2.6a4 4 0 0 0-4-4Z"/><path class="clapper" d="M6.5 13a1.5 1.5 0 0 0 3 0"/><path class="slash" d="M2.5 2.5l11 11"/></svg></button>
   </div>
   <section id="topStrip" aria-label="Latest sessions" class="loading"><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div></section>
+  <div id="stripGrip" class="edge-grip" tabindex="0" role="button" aria-controls="topStrip" aria-label="Latest sessions" title="Drag up or click to hide the latest sessions"></div>
   <section id="center">
     <div id="stage">
       <div id="markdownWarning" class="markdown-warning" hidden></div>
@@ -1231,7 +1262,7 @@ a{color:var(--accent)}
     <div id="lightbox" hidden><img alt=""></div>
     <div id="dock">
       <div id="initRow" role="status" aria-live="polite" hidden></div>
-      <div id="composeGrip" tabindex="0" aria-label="Message box" title="Drag to make the message box taller (double-click resets)"></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">
         <div id="commandList" role="listbox" aria-label="Commands" hidden></div>
         <div id="modelPanel" hidden>
@@ -1244,11 +1275,13 @@ a{color:var(--accent)}
           <textarea id="prompt" placeholder="Ask chi anything…" aria-controls="commandList" aria-autocomplete="list" aria-expanded="false"></textarea>
         </div>
         <div class="actions-col">
-          <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>
+          <button type="button" id="modelPick" class="model-pick" title="The model the new session starts on" aria-label="Model for the new session" aria-haspopup="listbox" aria-expanded="false" hidden><span class="model-pick-name"></span></button>
           <button type="button" id="thinkingNew" class="llmctx-new think-new" aria-haspopup="dialog" hidden></button>
           <button type="button" id="llmContextNew" class="llmctx-new" aria-haspopup="dialog" hidden></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">Stop turn</button>
+          <button type="button" id="attachBtn" class="attach-btn" title="Add images (or paste or drop them here)" aria-label="Add images" hidden></button>
+          <input type="file" id="attachInput" accept="image/*" multiple hidden>
           <div class="split">
             <button id="actionBtn">Start</button>
           </div>

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

@@ -17,25 +17,25 @@
 //   formClass, popoverClass, nowClass   the form's, popover's and "Now:"
 //            line's own classes
 //   when(fresh)   the form's note on when it applies (fresh: the start
-//            page's new chat, thinking only)
+//            page's new session, thinking only)
 //
-// The start page's new chat (kind NEW_CHAT) has a thinking chip only
+// The start page's new session (kind NEW_SESSION) has a thinking chip only
 // (thinking_chip.js keeps its choice): the form shows the model's level and
 // takes a choice for the next create.
 
 import { createChipPopover } from "./chip_popover.js";
-import { NEW_CHAT, SESSION } from "./llm_context_chip.js";
+import { NEW_SESSION, SESSION } from "./llm_context_chip.js";
 import { html, render } from "./vendor/lit-html.js";
 
 export const DEFAULT = "default";
 
-// The chip: its text, tooltip and whether the session (or the new chat)
+// The chip: its text, tooltip and whether the session (or the new session)
 // set its own; null without a summary (an older worker, or a host the
 // setting means nothing on).
 export function chipModel(cfg, summary, { kind = SESSION } = {}) {
   if (!summary || !summary.level) return null;
   const own = !!summary.own;
-  const what = kind === NEW_CHAT ? "the new chat" : "this session";
+  const what = kind === NEW_SESSION ? "the new session" : "this session";
   const from = own ? what : summary.source || "the model's own";
   const title = `${cfg.name}: ${summary.level} (${from}). Click to change it for ${what}.`;
   return { text: `${cfg.prefix} ${summary.level}${own ? ` · ${kind}` : ""}`, title, own };
@@ -57,16 +57,16 @@ export function nowText(summary) {
 
 const option = (value, label, chosen) => html`<option value=${value} ?selected=${value === chosen}>${label}</option>`;
 
-// The popover's form (a lit-html template). For the new chat (kind
-// NEW_CHAT), +summary+ is the model's and +choice+ the level the form
+// The popover's form (a lit-html template). For the new session (kind
+// NEW_SESSION), +summary+ is the model's and +choice+ the level the form
 // shows; +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, kind = SESSION, choice = null, now = summary } = {}) {
-  const fresh = kind === NEW_CHAT;
+  const fresh = kind === NEW_SESSION;
   const chosen = (fresh ? choice : summary.own) || DEFAULT;
   const follow = summary.own && !fresh ? "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">${fresh ? NEW_CHAT : "this session"}</span
+    ><span class="ctx-pop-kind">${fresh ? NEW_SESSION : "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><select name="level">${option(DEFAULT, follow, chosen)}${
@@ -79,7 +79,7 @@ export function formTemplate(cfg, summary, { running = false, kind = SESSION, ch
 // 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. The start page's
-// (kind NEW_CHAT): summary() is the picked model's, choice() the pending
+// (kind NEW_SESSION): summary() is the picked model's, choice() the pending
 // level and choose(next) takes a Set's (null for "follow the model"). id
 // and anchor (the chip's selector, by default its data attribute) keep it
 // apart from the other controls on the same element (the anchor defaults
@@ -88,7 +88,7 @@ export function createLevelControl({ cfg, el, summary, session = () => null, run
                                      kind = SESSION, choice = () => null, choose = null,
                                      id, anchor = cfg.anchor,
                                      doc = document, win = window }) {
-  const fresh = kind === NEW_CHAT;
+  const fresh = kind === NEW_SESSION;
   let initial = null;
   // What the open form was drawn from: the model's or session's summary
   // and the form's options.

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

@@ -21,14 +21,13 @@
 //   confirmDelete(id), setArchived(id, archive), archiveOne(id, archive)
 //   updateInfoBar(), updateSessionTitle(), showToast(text, action)
 //   allViewOpen(), openAllView(), leaveAllView(hash)
-//   setStripHidden(hidden)
 
 import { ownerBadge, relativeTime, delegatedBy } from "./format.js";
 import { html, nothing, render } from "./vendor/lit-html.js";
 import { cardCtxText, ctxBarTip } from "./ctx.js";
 import { allScopeHref, cardFolder } from "./scope.js";
 import { sessionHash } from "./route.js";
-import { stripColumns, stripShowParts } from "./strip.js";
+import { stripColumns, stripStatusParts } from "./strip.js";
 import { createFamilyPop, familyChipTemplate, familyRowsTemplate } from "./families_view.js";
 import { allViewChains, chainChipTemplate, chainRowsTemplate, chainTitle, foldChains } from "./chains.js";
 import {
@@ -192,21 +191,23 @@ function ownerBadgeTemplate(s) {
   return badge ? html`<span class=${`owner ${badge.kind}`} title=${badge.title}>${badge.text}</span>` : nothing;
 }
 
-// The strip's end: the All sessions tile (with its count) and hide ▴.
-// entering / anim: as a card's (cardTemplate). id and title are bound, as
-// class is, so the attributes keep their order.
+// The strip's end: the All sessions tile (with its count), the strip's own
+// last cell (the grip on the edge is the strip's handle now, not a button
+// in here). entering / anim: as a card's (cardTemplate). id and title are
+// bound, as class is, so the attributes keep their order.
 export function stripTileTemplate(count, { entering = false, anim = "" } = {}) {
-  return html`<div class="strip-side"><button type="button" class=${entering ? "card entering" : "card"} id=${"allTile"} style=${anim || nothing} title=${"All sessions, with search"}>All sessions →<span class="count">${count}</span></button><button type="button" class="strip-toggle" id="stripHide" title="Hide the latest sessions">hide ▴</button></div>`;
+  return html`<button type="button" class=${entering ? "card entering" : "card"} id=${"allTile"} style=${anim || nothing} title=${"All sessions, with search"}>All sessions →<span class="count">${count}</span></button>`;
 }
 
-// The hidden strip's pill: "▾ 5 sessions · ● 1 live · ● 1 waiting"
-// (strip.js stripShowParts).
+// The hidden strip's status pill: "5 sessions · ● 1 live · ● 1 waiting"
+// (strip.js stripStatusParts). Not a toggle any more (the grip hides and
+// shows the strip): a click opens the all-sessions view, as the tile does.
 // The count (and the dot after it) in its own span: a phone's narrow top
 // bar drops it when live or waiting shows (index.html).
 export function stripPillTemplate({ count, live, waiting }) {
   const liveT = live ? html`<span class="live"><span class="live-dot" aria-hidden="true"></span>${live}</span>` : nothing;
   const waitingT = waiting ? html`${live ? " · " : ""}<span class="waiting"><span class="waiting-dot" aria-hidden="true"></span>${waiting}</span>` : nothing;
-  return html`<span class="pill-arrow" aria-hidden="true">\u25BE</span> <span class="pill-count">${count}${live || waiting ? " · " : ""}</span>${liveT}${waitingT}`;
+  return html`<span class="pill-count">${count}${live || waiting ? " · " : ""}</span>${liveT}${waitingT}`;
 }
 
 // Draws +template+ into +el+ as new nodes, as an innerHTML write did: no
@@ -222,10 +223,15 @@ export function createListsView(deps) {
   const {
     doc, win, topStripEl, allListEl, sessions, selected, scope, scopeError, eventsLive, refresh, select,
     confirmDelete, setArchived, archiveOne, updateInfoBar, updateSessionTitle, showToast,
-    allViewOpen, openAllView, leaveAllView, setStripHidden,
+    allViewOpen, openAllView, leaveAllView,
   } = deps;
   const $ = (s) => doc.querySelector(s);
 
+  // The hidden strip's status pill opens the all-sessions view (as the tile
+  // does), saving the step of showing the strip first. Bound once: the pill
+  // element stays, only its content is drawn again (draw()).
+  $("#stripStatus").addEventListener("click", openAllView);
+
   // The strip, its count and the hidden strip's pill leave archived sessions
   // out; the all view shows them with "include archived". sessions() keeps
   // them all (parent chips, the open session).
@@ -469,7 +475,7 @@ export function createListsView(deps) {
   // to all of them.
   function renderTop(cards) {
     topStripEl.classList.remove("loading");
-    renderStripShow();
+    renderStripStatus();
     stripFamilies = new Map(cards.map((f) => [f.head.id, f]));
     noteChainFamilies(cards);
     const refused = scopeError();
@@ -501,7 +507,6 @@ export function createListsView(deps) {
       },
     });
     $("#allTile").addEventListener("click", openAllView);
-    $("#stripHide").addEventListener("click", () => setStripHidden(true));
     familyPop.refresh();
     if (chainFrom === topStripEl) chainPop.refresh();
   }
@@ -517,8 +522,8 @@ export function createListsView(deps) {
   // The hidden strip's pill, following the list: its sessions, the number
   // the All sessions tile shows, and the live and waiting ones (a waiting
   // delegate too).
-  function renderStripShow() {
-    draw($("#stripShow"), stripPillTemplate(stripShowParts(shownSessions())));
+  function renderStripStatus() {
+    draw($("#stripStatus"), stripPillTemplate(stripStatusParts(shownSessions())));
   }
 
   // A parent's card holds its delegates (families, by the newest member: a

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

@@ -7,7 +7,7 @@
 // worker's snapshot, a command_ran, or the server's own reading of the
 // session file).
 //
-// The start page has one too (kind "new chat"): it shows the picked
+// The start page has one too (kind "new session"): it shows the picked
 // model's values (GET /api/models' llm_context) and its form keeps a
 // choice for the next create only (POST /api/sessions' llm_context), never
 // remembered: nothing is sent unless the user sets one.
@@ -22,7 +22,7 @@ const STRATEGIES = [
 ];
 export const APPLIES = ["payoff", "next_request", "turn_end"];
 export const SESSION = "session";
-export const NEW_CHAT = "new chat";
+export const NEW_SESSION = "new session";
 
 const DEFAULT = "default";
 const LAYER_ORDER = ["stale", "forget"];
@@ -43,16 +43,16 @@ export function ownValues(summary) {
   return { strategy, apply: own.apply || DEFAULT, budget };
 }
 
-// The start page's choice for the new chat ({strategy: [layers], apply,
+// The start page's choice for the new session ({strategy: [layers], apply,
 // budget_tokens}, the session file's shape; 0 is off) laid over the
 // model's summary: what the chip shows, with the chosen fields' source
-// "session" ("the new chat"). The model's own summary without a choice.
+// "session" ("the new session"). The model's own summary without a choice.
 export function withChoice(summary, choice) {
   if (!summary || !choice) return summary;
   const merged = { ...summary, own: choice };
   // (the budget's source and where are budget_source / budget_where)
   const set = (field, key, value) => Object.assign(merged, { [key]: value, [`${field}_source`]: SESSION,
-                                                            [`${field}_where`]: "the new chat" });
+                                                            [`${field}_where`]: "the new session" });
   if (Array.isArray(choice.strategy)) set("strategy", "strategy", strategyValue(choice.strategy));
   if (choice.apply) set("apply", "apply", choice.apply);
   if (typeof choice.budget_tokens === "number") {
@@ -61,13 +61,13 @@ export function withChoice(summary, choice) {
   return merged;
 }
 
-// The chip: its text, tooltip and whether the session (or the new chat)
+// The chip: its text, tooltip and whether the session (or the new session)
 // set its own; null without a summary (an older worker).
 export function chipModel(summary, { kind = SESSION } = {}) {
   if (!summary || !summary.strategy) return null;
   const own = summary.strategy_source === "session" || !!summary.own;
   const budget = summary.budget_tokens ? `${summary.budget_tokens} tokens` : "off";
-  const what = kind === NEW_CHAT ? "the new chat" : "this session";
+  const what = kind === NEW_SESSION ? "the new session" : "this session";
   const title = `LLM context strategy: ${summary.strategy} (${summary.strategy_where}); apply ${summary.apply} ` +
     `(${summary.apply_where}); budget ${budget} (${summary.budget_where}). Click to change it for ${what}.`;
   return { text: `llm ctx ${summary.strategy}${own ? ` · ${kind}` : ""}`, title, own };
@@ -107,7 +107,7 @@ export function parseBudget(text) {
   return tokens >= 4000 && tokens <= 10_000_000 ? tokens : null;
 }
 
-// The new chat's choice after a Set: +choice+ with the fields the user
+// The new session's choice after a Set: +choice+ with the fields the user
 // changed (vs +initial+, the values the form opened with) applied, a field
 // set back to default dropped; null when nothing is left. Throws on a
 // budget that isn't one.
@@ -160,8 +160,8 @@ export function nowText(summary) {
     `budget ${budget} (${summary.budget_where})`;
 }
 
-// The popover's form (a lit-html template). For the new chat (kind
-// NEW_CHAT), +summary+ is the model's and +choice+ the values the form
+// The popover's form (a lit-html template). For the new session (kind
+// NEW_SESSION), +summary+ is the model's and +choice+ the values the form
 // shows; +now+ is the summary its "Now:" line reads (refresh passes a newer
 // one, the rest stays as the form opened, so lit leaves what the user typed
 // alone); +error+ a failed Set's message. The selects take their value as
@@ -169,14 +169,14 @@ export function nowText(summary) {
 // alone, the first pass renderForm makes.
 export function formTemplate(summary, { running = false, kind = SESSION, choice = null, now = summary, error = null,
                                         unset = false } = {}) {
-  const fresh = kind === NEW_CHAT;
+  const fresh = kind === NEW_SESSION;
   const own = fresh ? ownValues({ own: choice }) : ownValues(summary);
   const follow = (field) => (summary[`${field}_source`] === "session" ? "follow the model" : `follow the model (${summary[field]})`);
-  const when = fresh ? "For the new chat's first turn on; not remembered for the next one."
+  const when = fresh ? "For the new session's first turn on; not remembered for the next one."
     : "From the next turn's start. Turning forget on or off re-reads the whole prompt once.";
   const chosen = (value) => (unset ? nothing : value);
   return html`<form class="llmctx-form"><div class="ctx-pop-head"><strong>LLM context</strong
-    ><span class="ctx-pop-kind">${fresh ? NEW_CHAT : "this session"}</span
+    ><span class="ctx-pop-kind">${fresh ? NEW_SESSION : "this session"}</span
     ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
     ><div class="ctx-pop-meta llmctx-now">${nowText(now)}</div
     ><label class="llmctx-field"><span>Strategy</span><select name="strategy" .value=${chosen(own.strategy)}>${
@@ -206,7 +206,7 @@ export function renderForm(target, summary, opts = {}) {
 // (#infoText, info_bar.js: clicks are delegated); summary(): the open
 // session's llm_context; session(): the open session's id; running(): a
 // turn runs; run(line): sends the command.
-// The start page's (kind NEW_CHAT): summary() is the picked model's,
+// The start page's (kind NEW_SESSION): summary() is the picked model's,
 // choice() the pending choice, and choose(next) takes a Set's (null for
 // "follow the model") instead of a command running. id and anchor (the
 // chip's selector) keep the two controls apart.
@@ -214,7 +214,7 @@ export function createLlmContextControl({ el, summary, session = () => null, run
                                           kind = SESSION, choice = () => null, choose = null,
                                           id = "llmContextPopover", anchor = ".llmctx-chip",
                                           doc = document, win = window }) {
-  const fresh = kind === NEW_CHAT;
+  const fresh = kind === NEW_SESSION;
   // The values the form opened with.
   let initial = null;
   // What the open form was drawn from: the summary, the form's options and

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

@@ -48,7 +48,7 @@ function readRecent() {
 }
 
 // +onPick+ runs after a pick (the panel is closed by then). +remember+:
-// whether a pick is this browser's choice for a new chat (stored, and in
+// whether a pick is this browser's choice for a new session (stored, and in
 // Recent); false on a fresh chain link, where a pick is that link's only.
 export function createModelPicker({ button, panel, input, list, composer, center, onPick, remember = () => true }) {
   let rows = [];

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

@@ -47,7 +47,7 @@ export function cardFolder(workingDirectory, projectName) {
 
 // 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 chat starts on the
+// 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
@@ -63,6 +63,6 @@ export function scopeTemplate(scope, { error = null, where = () => ({ hash: "",
   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 newChat = dir ? html`<span class="scope-where" title=${`New chats start in ${dir}`}>new chat 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}${newChat}`;
+  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}`;
 }

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

@@ -1,3 +1,4 @@
+import { GRIP_OPEN_PX } from "./composer_size.js";
 import { waitingOn } from "./notify.js";
 
 // How many session cards the top strip shows for its width in px: a card
@@ -12,15 +13,16 @@ export function stripColumns(width) {
   return Math.min(6, Math.max(3, fit));
 }
 
-// The hidden strip's "▾ sessions" pill carries the list's count, and how
-// many of those sessions a worker runs (the cards' green "live" badge), so a
-// user who hid the strip still sees there is a live session to go back to.
-// And how many wait on the user (notify.js waitingOn: a question, an
-// approval, a card), so a hidden strip still says one needs an answer.
-// Plain text parts; live and waiting are "" when none. Zero sessions keep
-// the bare label. The count is sessions (a folded delegate counts), the
-// number the "All sessions" tile shows.
-export function stripShowParts(sessions) {
+// The hidden strip's status pill carries the list's count, and how many of
+// those sessions a worker runs (the cards' green "live" badge), so a user
+// who hid the strip still sees there is a live session to go back to. And
+// how many wait on the user (notify.js waitingOn: a question, an approval, a
+// card), so a hidden strip still says one needs an answer; a click on it
+// opens the all-sessions view (lists_view.js). Plain text parts; live and
+// waiting are "" when none. Zero sessions keep the bare label. The count is
+// sessions (a folded delegate counts), the number the "All sessions" tile
+// shows.
+export function stripStatusParts(sessions) {
   const list = sessions || [];
   const n = list.length;
   const liveN = list.filter((s) => s && s.owner === "worker").length;
@@ -37,6 +39,30 @@ export function stripShowParts(sessions) {
 // cut off below the strip.
 export const SHORT_WINDOW_QUERY = "(max-height: 700px)";
 
+// The strip's grip: the handle on the edge between the strip and the chat
+// (the composer's grip's twin, mirrored: that one folds the box down, this
+// one puts the strip away up). +dy+ is the release y minus the press y, so a
+// drag up is negative. Decided on release only (the strip snaps, it does not
+// follow the pointer): |dy| below GRIP_OPEN_PX is a tap, which toggles either
+// way (a hidden strip's grip has no other way to come back, and a shown
+// one's neither); a longer drag only fires the way it points: up (past
+// STRIP_HIDE_PX) hides the shown strip, down (past GRIP_OPEN_PX) shows the
+// hidden one. Anything else is null: a short drag the wrong way does nothing.
+export const STRIP_HIDE_PX = 32; // a drag up this far hides the shown strip
+export function stripGripAction({ hidden, dy }) {
+  if (Math.abs(dy) < GRIP_OPEN_PX) return hidden ? "show" : "hide"; // a tap
+  if (hidden) return dy >= GRIP_OPEN_PX ? "show" : null;
+  return dy <= -STRIP_HIDE_PX ? "hide" : null;
+}
+
+// The grip's title (D7: the grip owns it; composer_grip.js's drawFoldControls
+// writes the composer's the same way). willToggle: the drag in progress would
+// act on release.
+export function stripGripTitle({ hidden, willToggle }) {
+  if (willToggle) return hidden ? "Release to show the latest sessions" : "Release to hide the latest sessions";
+  return hidden ? "Drag down or click to show the latest sessions" : "Drag up or click to hide the latest sessions";
+}
+
 // Whether the strip is hidden: the user's own hide (saved), or a short
 // window unless the user showed it (the pill) since it got short.
 export function stripAutoHidden({ saved, short, shownWhileShort }) {