@alphacoder-v0/pi-loops 0.24.0 → 0.24.2

package/src/web.mjs

@@ -11,7 +11,8 @@ export const DOOR = `<!doctype html><meta charset="utf-8"><title>pi-loops</title
 <meta name="color-scheme" content="light dark">
 <body style="font:15px/1.6 system-ui,sans-serif;max-width:34rem;margin:12vh auto;padding:0 1.5rem;background:Canvas;color:CanvasText">
 <h2 style="font-weight:600">This browser has not been here before.</h2>
-<p>Run <code>pi-loops</code> in a terminal on this machine, or type the code from <b>add device</b> on a browser that is signed in:</p>
+<p>Run <code>pi-loops open</code> in a terminal on this machine for a link that signs this browser in.</p>
+<p>Pairing another device? <code>pi-loops pair</code> shows a code.</p>
 <form method="get" style="display:flex;gap:.5rem">
   <input name="pair" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" maxlength="6"
          placeholder="000000" style="font:inherit;letter-spacing:.3em;padding:.55rem .7rem;flex:1;min-width:0;border:1px solid #8886;border-radius:6px;background:transparent;color:inherit">
@@ -507,6 +508,7 @@ dialog menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:14px
   header .grow *{flex-shrink:0}
   header .grow button{padding:5px 7px}
   #cost{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  #cost:empty{display:none}
 }}
 /* The loops rail is not dropped when the window narrows, it is put behind the rail's Loops button: it
    slides over the conversation rather than taking a third of it, the way a drawer does elsewhere. */
@@ -596,22 +598,21 @@ dialog menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:14px
       <button id="expand">▸ steps</button>
       <span id="actions">
         <button id="reload">reload</button>
-        <button id="find" aria-label="Search this session">find</button>
+        <button id="find" aria-label="Search this conversation">find</button>
         <button id="undo">undo</button>
-        <button id="save" title="Export this session as HTML">save</button>
+        <button id="save" title="Export this conversation as HTML">save</button>
         <button id="share">share</button>
         <button id="compact">compact</button>
-        <button id="clear">clear</button>
         <button id="resume">resume</button>
         <button id="adddev" aria-label="Add a device">add device</button>
-        <button id="theme" aria-label="Change theme">theme: system</button>
+        <button id="theme">theme: system</button>
         <button id="notifyMe">notifications</button>
       </span>
       <span class="badge" id="status">connecting</span>
-      <button id="more" title="Session actions" aria-label="Session actions">⋯</button>
+      <button id="more" title="Conversation actions" aria-label="Conversation actions">⋯</button>
     </span>
   </header>
-  <div id="findbar" hidden><input id="findq" placeholder="search this session…" ><span id="findn" class="notice"></span></div>
+  <div id="findbar" hidden><input id="findq" placeholder="search this conversation…" ><span id="findn" class="notice"></span></div>
   <button id="stale" hidden></button>
   <div id="feed" role="log" aria-live="polite" aria-label="Conversation"></div>
   <div id="activitySlot"></div>
@@ -622,7 +623,7 @@ dialog menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:14px
     <div id="pop"></div>
     <div id="thumbs"></div>
     <div class="composer-row">
-      <textarea id="input" placeholder="Message pi — / for commands, @ for files, Enter sends"></textarea>
+      <textarea id="input" placeholder="Message pi"></textarea>
       <button type="button" id="attach">attach</button>
       <button type="submit" class="primary">send</button>
       <button type="button" id="stop">stop</button>
@@ -642,8 +643,8 @@ dialog menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:14px
   <a href="#loops" id="tabLoops"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M17 2l3 3-3 3"/><path d="M4 11V9a4 4 0 0 1 4-4h12"/><path d="M7 22l-3-3 3-3"/><path d="M20 13v2a4 4 0 0 1-4 4H4"/></svg><span>Loops</span></a>
 </nav>
 <div id="scrim" hidden></div>
-<dialog id="menu" aria-label="Session actions" role="dialog">
-  <h3>Session</h3><div id="menuBody"></div><div id="sid" class="sid"></div>
+<dialog id="menu" aria-label="Conversation actions" role="dialog">
+  <h3>Conversation</h3><div id="menuBody"></div><div id="sid" class="sid"></div>
   <menu><button id="menuClose" value="close">close</button></menu>
 </dialog>
 <dialog id="pairdlg" aria-labelledby="pairTitle" role="dialog">
@@ -2002,7 +2003,8 @@ function drawLoopRow(slot, j) {
     num(g.findings30d) ? num(g.findings30d) + " finding" + (num(g.findings30d) === 1 ? "" : "s") + " in 30 days" : "",
     num(g.claimed30d) ? num(g.claimed30d) + " claimed" : "",
     num(g.dismissed30d) ? num(g.dismissed30d) + " dismissed" : "",
-    num(g.quietStreak) >= 3 ? "quiet ×" + num(g.quietStreak) : "",
+    // A failing loop's empty runs are its errors, which the red line already says.
+    num(g.quietStreak) >= 3 && !j.lastError ? "quiet ×" + num(g.quietStreak) : "",
   ].filter(Boolean).join(" · ") : "";
   if (said) slot.append(textEl("span", "signal", said));
   const told = tuneNote.get(j.id);
@@ -2028,15 +2030,16 @@ function renderSidebar(s) {
   else {
     let html = "";
     for (const j of a.jobs) {
-      // The prompt is shown twice — a two-line peek in the summary, the whole of it in the body —
-      // rather than once and cut, which is what the 90-character slice was: a preview that hid the
-      // rest with no way to see it. Both copies go through safeText; neither is sliced here.
+      // An unnamed loop is told apart by its prompt: a two-line peek in the summary, the whole of it
+      // in the body, rather than once and cut. A named loop's name says what it is, so no peek.
       const prompt = safeText(j.prompt);
+      const named = typeof j.name === "string" && j.name !== "";
+      const fired = [j.lastFiredAt ? "last fired " + safeText(clock(j.lastFiredAt)) : "", j.skippedOverlap ? "skipped overlaps " + num(j.skippedOverlap) : ""].filter(Boolean).join(" · ");
       html += '<details class="card job' + (j.enabled ? "" : " off") + '" data-key="job:' + safeText(j.id) + '">' +
         '<summary><span class="t"><span class="nm"><b>' + safeText(j.label || j.name || j.id) + "</b>" +
         '<span class="m">' + safeText(j.schedule) + (j.stateful ? "" : " · in its conversation") + (j.enabled ? "" : " · disabled") + "</span></span>" +
         '<button data-run="' + safeText(j.id) + '">run</button></span>' +
-        '<span class="m peek">' + prompt + "</span>" +
+        (named ? "" : '<span class="m peek">' + prompt + "</span>") +
         // A run pi-loops holds has its own line, with Stop this run, under the card's name.
         runsLine(j) +
         // A one-line hint so a job that is failing says so before it is opened; the whole error is in
@@ -2050,20 +2053,22 @@ function renderSidebar(s) {
         '<div class="body">' +
         '<pre class="full">' + prompt + "</pre>" +
         '<button class="copy" data-copy="' + safeText(j.id) + '">copy</button>' +
-        '<div class="m">id ' + safeText(j.id) + " · cwd " + safeText(j.cwd) + (j.lastFiredAt ? " · last fired " + safeText(clock(j.lastFiredAt)) : "") + (j.skippedOverlap ? " · skipped overlaps " + num(j.skippedOverlap) : "") + "</div>" +
+        (fired ? '<div class="m">' + fired + "</div>" : "") +
         // A job belonging to a hostname this machine no longer has: it is listed, because it exists,
         // and it says why nothing is happening rather than leaving you to find out from the silence.
         (j.lastError ? '<div class="m bad">' + safeText(j.lastError) + "</div>" : "") +
         "</div></details>";
     }
     for (const r of a.rules) {
+      // The condition is the rule's name: what it waits for. Cut in the title, whole in the body.
+      const when = str(r.condition);
+      const cut = clipChars(when, 80);
       html += '<details class="card rule' + (r.enabled ? "" : " off") + '" data-key="rule:' + safeText(r.id) + '">' +
-        '<summary><span class="t"><b>rule</b><span class="m">' + (r.enabled ? "" : "disabled · ") + (r.fireOnce ? "once" : "repeat") + "</span></span>" +
-        '<span class="m peek">when ' + safeText(r.condition) + "</span>" +
+        '<summary><span class="t"><b>' + safeText(cut) + '</b><span class="m">' + (r.enabled ? "" : "disabled · ") + (r.fireOnce ? "once" : "repeat") + "</span></span>" +
         (r.look ? '<span class="m looks" data-rulelook="' + safeText(r.id) + '"></span>' : "") +
         "</summary>" +
         '<div class="body">' +
-        '<pre class="full">when ' + safeText(r.condition) + "</pre>" +
+        (cut !== when ? '<pre class="full">when ' + safeText(when) + "</pre>" : "") +
         '<pre class="full">→ ' + safeText(r.action) + "</pre>" +
         "</div></details>";
     }
@@ -2333,7 +2338,8 @@ async function refresh() {
   api("/stats").then((st) => {
     if (!st || st.error) return;
     const pct = st.contextUsage?.percent;
-    $("cost").textContent = "$" + (st.cost ?? 0).toFixed(3) + " · " + Math.round((st.tokens?.total ?? 0) / 1000) + "k" + (pct == null ? "" : " · ctx " + Math.round(pct) + "%");
+    // Nothing spent yet: no badge, rather than "$0.000 · 0k · ctx 0%".
+    $("cost").textContent = !st.tokens?.total ? "" : "$" + (st.cost ?? 0).toFixed(3) + " · " + Math.round(st.tokens.total / 1000) + "k" + (pct == null ? "" : " · ctx " + Math.round(pct) + "%");
   });
   for (const ask of state.pendingAsks || []) onAsk(ask);
 }
@@ -2591,6 +2597,13 @@ async function compactNow(instructions) {
 
 /** Why the next reload is happening, when it is happening because somebody asked for it. */
 let swapWhy = "";
+/**
+ * A swap is waiting for its answer. The new session's events can arrive before the event that moves
+ * this page to its id: reloaded on the first of them, the page read the old id's history, which the
+ * server opens as that conversation in a pi of its own, and reloaded again on every event after,
+ * each time without the reason. Events wait for the answer, which carries the new id.
+ */
+let swapPending = false;
 
 /**
  * Start a new session, or go back to one.
@@ -2606,7 +2619,18 @@ async function swap(call, body, why) {
   // for a session you had just asked to start.
   swapWhy = why;
   const note = row("notice", "", "switching…");
+  swapPending = true;
   const r = await api(call, body);
+  swapPending = false;
+  const held = waiting.splice(0, waiting.length);
+  if (r.success && !r.data?.cancelled && typeof r.sessionId === "string" && r.sessionId && r.sessionId !== SESSION) {
+    // Moved first, then one reload, for the reason given; what waited is applied after it.
+    moveTo(r.sessionId);
+    waiting.push(...held);
+    await resync(reloadReason());
+    return;
+  }
+  for (const ev of held) applyEvent(ev);
   // Mid-turn the server refuses rather than asking, and its refusal says what to do about it. A
   // dialog here would be a second way to answer the same question, on the one screen where the
   // turn it is about is already visible.
@@ -2638,7 +2662,7 @@ function pageCommand(text) {
   else if (name === "resume") openSessions();
   else if (name === "sessions") listSessionsHere();
   else if (name === "session") row("system", "session", "usage: /session export [path] [--exclude-triggers] | /session import <path>\n/sessions lists this project's sessions; the header shows this one's model, cost and context.");
-  else swap("/session/new", {}, "new session — the one you left is under resume");
+  else newHere();
   return true;
 }
 
@@ -2657,7 +2681,8 @@ async function listSessionsHere() {
 }
 
 $("compact").onclick = () => compactNow("");
-$("clear").onclick = () => swap("/session/new", {}, "new session — the one you left is under resume");
+/** A new conversation in this page's pi: + New in this project, and /clear or /new typed. */
+function newHere() { swap("/session/new", {}, "new conversation — the one you left is under resume"); }
 
 /** The sessions of this project, newest first — the conversation, not the filename. */
 async function openSessions() {
@@ -2737,7 +2762,6 @@ function qrSvg(q) {
 $("adddev").onclick = async () => {
   const r = await api("/pair", {});
   if (!r.success) { row("err", "error", r.error || "could not make a pairing code"); return; }
-  $("pairCode").textContent = r.code;
 
   // The address this browser reached, first: under tailscale serve that is the tailnet name, and
   // it is the only one anybody had to configure. Then whatever else the machine can see — which is
@@ -2745,6 +2769,10 @@ $("adddev").onclick = async () => {
   const thisWindow = location.origin + "/";
   const loopback = /^https?:\/\/(127\.0\.0\.1|localhost|\[::1\])(:|\/)/.test(thisWindow);
   const candidates = (loopback ? [] : [{ url: thisWindow, via: "this window" }]).concat(r.addresses || []);
+  // No device but this one can reach the page: a code would be a grant nobody can use, so it is
+  // retired at once and the dialog says only how to make the page reachable.
+  if (candidates.length) $("pairCode").textContent = r.code;
+  else { $("pairCode").textContent = ""; api("/pair", { cancel: true }); }
 
   const pick = $("pairPick");
   pick.innerHTML = "";
@@ -3162,10 +3190,19 @@ async function resync(why) {
   // Whatever happened while we were reading: anything the transcript already covers is dropped by
   // the same rule as always.
   const held = waiting.splice(0, waiting.length);
-  for (const ev of held) applyEvent(ev);
+  // An event of an earlier epoch numbered at or before the transcript is the session that was left
+  // (the server's numbering runs on across a swap): drawn, it would reload the page again.
+  for (const ev of held) if (!(ev.seq && ev.epoch && ev.epoch !== epoch && ev.seq <= seen)) applyEvent(ev);
   refresh();
 }
 
+/** Point the page's routes and address at another conversation; the list marks it at the next poll. */
+function moveTo(id) {
+  SESSION = id;
+  history.replaceState(null, "", "/c/" + SESSION + "/");
+  listAt = 0;
+}
+
 /**
  * One event, against the numbering this page is counting on: already covered by the transcript, the
  * next one in sequence, or evidence that something in between never arrived.
@@ -3174,14 +3211,9 @@ function applyEvent(ev) {
   // While a reload runs, every event waits for it, a replayed one too: a reload started by the replay
   // clears the feed, and the replay must not go on drawing into what it cleared (the history it reads
   // has those events already). Applied once the transcript is back.
-  if (resyncing) return void waiting.push(ev);
-  if (ev.type === "page_moved" && ev.sessionId) {
-    // pi is in another conversation now (a new session, a resume): its routes and its address move.
-    SESSION = ev.sessionId;
-    history.replaceState(null, "", "/c/" + SESSION + "/");
-    // And the list marks it at the next poll, not fifteen seconds later.
-    listAt = 0;
-  }
+  if (resyncing || swapPending) return void waiting.push(ev);
+  // pi is in another conversation now (a new session, a resume).
+  if (ev.type === "page_moved" && ev.sessionId) moveTo(ev.sessionId);
   if (!ev.seq) return handle(ev); // not numbered: nothing to reason about
   if (epoch && ev.epoch && ev.epoch !== epoch) {
     // A different run of the server: its numbers mean nothing next to the ones we were counting.
@@ -3219,7 +3251,7 @@ const convRows = [];
 let focusAt = 0;
 const HELD_LINE = "Your terminal has this conversation. What you send here is answered there.";
 const BESIDE_LINE = "A terminal has this conversation open, and this page's pi has no pi-loops: what you send here is answered here, beside the terminal.";
-const PLACEHOLDER = $("input").placeholder || "Message pi — / for commands, @ for files, Enter sends";
+const PLACEHOLDER = $("input").placeholder || "Message pi";
 const phone = () => !!(window.matchMedia && window.matchMedia("(max-width:760px)").matches);
 const spanOf = (cls, text) => {
   const el = document.createElement("span");
@@ -3980,7 +4012,7 @@ async function startConversationIn(project) {
 /** + New: in the project the list shows. The open conversation's starts a new session in this page's pi, as it always did. */
 $("newConv").onclick = () => {
   const project = listedProject();
-  if (!otherProject(project)) return $("clear").onclick();
+  if (!otherProject(project)) return newHere();
   const note = row("notice", "", "starting a new conversation in " + projectName(project) + "…");
   startConversationIn(project)
     .then((r) => (r.url ? location.assign(r.url) : void (note.textContent = "No new conversation in " + projectName(project) + ": " + r.error)))
@@ -4088,8 +4120,8 @@ function activityLine(i) {
   else bits.push(num(i.findings) + " finding" + (num(i.findings) === 1 ? "" : "s"));
   if (num(i.seconds)) bits.push(num(i.seconds) + "s");
   if (num(i.costUsd)) bits.push("$" + num(i.costUsd).toFixed(3));
-  // Only a card this conversation got is in the chat on the screen.
-  if (i.carded && i.fromThisConversation === true) bits.push("in chat");
+  // Only a card this conversation got is in the chat on the screen (src/run-card.ts runCardsHere).
+  if (i.inChat === true) bits.push("in chat");
   return { mark: i.stopped ? "■" : i.ok === false ? "✗" : "✓", text: name + " · " + bits.join(" · ") };
 }
 
@@ -4278,7 +4310,7 @@ const WATCH_EXAMPLES = [
 ];
 /** How long the modal waits for a plan or the end of the turn before it says pi did not answer. */
 const WATCH_ANSWER_MS = 90000;
-const WATCH_TIME = /\d\s*(?:am|pm|m|min|minutes?|h|hours?|s|secs?|seconds?|d|days?|分钟|小时|秒|天|点)\b|\b(?:every|each|daily|nightly|hourly|weekly|monthly|morning|evening|night|noon|midnight|tomorrow|tonight|today|at\s+\d|@(?:hourly|daily|weekly|monthly)|in\s+(?:\d|an?\s+(?:hour|minute|day|week))|(?:once|twice)\s+a\s+(?:day|week|month)|mon|tue|wed|thu|fri|sat|sun|(?:monday|tuesday|wednesday|thursday|friday|saturday|sunday)s?|weekdays?|weeknights?|weekends?)|每|天|点|小时|分钟|周|明天|晚上|早上|(?:^|\s)(?:[\d*\/,-]+\s+){4}[\d*\/,-]+(?:\s|$)/i;
+const WATCH_TIME = /\d\s*(?:am|pm|m|min|minutes?|h|hours?|s|secs?|seconds?|d|days?|分钟|小时|秒|天|点)\b|\b(?:every|each|daily|nightly|hourly|weekly|biweekly|fortnightly|monthly|quarterly|yearly|annually|(?:morning|afternoon|evening|night)s?|noon|midnight|tomorrow|tonight|today|at\s+(?:\d|one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|noon|midnight)|@(?:hourly|daily|weekly|monthly)|in\s+(?:\d|an?\s+(?:hour|minute|day|week)|a\s+(?:few|couple\s+of)\s+(?:minutes|hours|days|weeks))|(?:next|this)\s+(?:week|month|quarter|year|weekend|morning|afternoon|evening|monday|tuesday|wednesday|thursday|friday|saturday|sunday)|(?:once|twice)\s+a\s+(?:day|week|month)|(?:mon|tue|wed|thu|fri|sat|sun)s?|(?:monday|tuesday|wednesday|thursday|friday|saturday|sunday)s?|weekdays?|weeknights?|weekends?)\b|每|天|点|小时|分钟|周|明天|今晚|晚上|早上|下午|中午|凌晨|季度|(?:^|\s)(?:[\d*\/,-]+\s+){4}[\d*\/,-]+(?:\s|$)/i;
 const WATCH_WAIT = /\b(?:when|whenever|if|once|until|as soon as|after|appears?|exists?|changes?|fails?|gets?|arrives?|merge[sd]?|finish(?:es|ed)?|lands?)\b|当|如果|一旦|等|出现|存在|变|红|失败|完成|合并/i;
 /** No time word and no wait word: a thing to do now, not a watch. Generous on purpose: a doubt goes to the model. */
 function readsLikeNow(sentence) {
@@ -4643,7 +4675,7 @@ $("watchText").addEventListener("keydown", (e) => { if (e.key === "Enter" && (e.
    */
   checkStream = (s) => {
     // A reload ends by refreshing, and a refresh polls: without this the two call each other.
-    if (resyncing || !s || !s.epoch) return;
+    if (resyncing || swapPending || !s || !s.epoch) return;
     if (s.epoch !== epoch) {
       epoch = s.epoch;
       seen = s.seq ?? seen;