shadok-ai 0.11.5 → 0.11.7

package/README.md

@@ -92,11 +92,13 @@ Enter to skip; you can add it later from the web UI).
   and three go-to-market roles (paid, organic, support). Each one is yours to
   edit, and a role you delete stays deleted.
 - **Secret vault** — stored under `~/.shadok-ai`, never in your repo, injected
-  as env vars into the agents that need them. An agent that **obtains** a
-  credential (a CLI login, a key it just provisioned) can add it to the vault
-  itself so the next agent doesn't start from nothing — write-only, the value
-  piped in rather than typed as an argument, and never overwriting an existing
-  name without you saying so.
+  as env vars into the agents that need them. Add or **update** a secret from the
+  panel, tick the **profiles** it should feed right there, and reload the running
+  agents on those profiles in one click so a rotated value takes effect now. An
+  agent that **obtains** a credential (a CLI login, a key it just provisioned)
+  can add it to the vault itself so the next agent doesn't start from nothing —
+  write-only, the value piped in rather than typed as an argument, and never
+  overwriting an existing name without you saying so.
 - **Scheduled prompts** — give a channel a recurring prompt (every N minutes, or
   daily at HH:MM in a time zone you choose) for monitoring and reporting. Each
   schedule can carry a **deterministic guard command** that runs *without the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadok-ai",
-  "version": "0.11.5",
+  "version": "0.11.7",
   "main": "dist/session.js",
   "scripts": {
     "test": "node --import tsx --test test/*.ts context/*/test/*.test.mjs",

package/public/index.html

@@ -759,6 +759,27 @@
   }
   .turn { display: flex; flex-direction: column; gap: 3px; max-width: 82%; margin-top: 8px; }
   .turn:first-child { margin-top: 0; }
+  /* "Jump to the latest": floats bottom-right of the chat, above the composer
+     (its `bottom` is set in JS to the composer's height). Hidden at the bottom. */
+  #jumpBottom {
+    position: absolute; right: 18px; z-index: 6;
+    display: inline-flex; align-items: center; gap: 5px;
+    font: inherit; font-size: 12px; line-height: 1; padding: 7px 12px;
+    border-radius: 16px; cursor: pointer;
+    background: var(--bg-raised); color: var(--text); border: 1px solid var(--line);
+    box-shadow: 0 3px 12px rgba(0,0,0,.45);
+  }
+  #jumpBottom:hover { border-color: var(--amber); color: var(--amber); }
+  #jumpBottom svg { display: block; }
+  /* Divider between messages already seen and the ones that arrived since. */
+  .unread-sep {
+    display: flex; align-items: center; gap: 10px; margin: 10px 2px 4px;
+    color: var(--amber); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
+  }
+  .unread-sep::before, .unread-sep::after {
+    content: ""; flex: 1; height: 1px;
+    background: color-mix(in srgb, var(--amber) 45%, transparent);
+  }
   /* Copy: always visible, never on hover — a phone has no hover, and a button
      you cannot reveal does not exist. */
   .turn .copy {
@@ -1476,7 +1497,11 @@
   #secretsList li { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 6px; }
   #secretsList li:nth-child(odd) { background: rgba(255,255,255,.04); }
   #secretsList code { font-size: 13px; }
-  #secretsList button { background: none; border: none; color: #e26; cursor: pointer; font-size: 14px; }
+  #secretsList .s-actions { display: flex; gap: 2px; flex: none; }
+  #secretsList button { background: none; border: none; cursor: pointer; font-size: 14px; padding: 0 4px; }
+  #secretsList .s-del { color: #e26; }
+  #secretsList .s-edit { color: var(--text-dim); }
+  #secretsList .s-edit:hover { color: var(--amber); }
   /* Le panneau Users n'avait AUCUN style : d'où les puces brutes et le nom, le
      rôle et les boutons empilés les uns sous les autres. Même traitement que
      #profilesList, dont il est le frère. */
@@ -1497,9 +1522,21 @@
   #inviteBox .ib-url { margin-top: 6px; font-family: var(--mono); font-size: 12px; line-height: 1.45; word-break: break-all; user-select: all; }
   #inviteBox button { background: none; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; color: inherit; cursor: pointer; font-size: 12px; padding: 2px 8px; flex: none; }
   #inviteBox button:hover { border-color: var(--amber); color: var(--amber); }
-  #secretsAdd { display: flex; gap: 8px; }
-  #secretsAdd input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.25); color: inherit; }
-  #secretsAdd button { padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
+  #secretsAdd { display: flex; flex-direction: column; gap: 8px; }
+  #secretsAdd .sec-add-row { display: flex; gap: 8px; }
+  #secretsAdd input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.25); color: inherit; font-size: 16px; }
+  #secretsAdd #secretSubmit { flex: none; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
+  #secretKey[readonly] { opacity: .65; }
+  .sec-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
+  .sec-attach-label { font-size: 12px; color: var(--text-dim); }
+  .sec-profiles { display: flex; flex-wrap: wrap; gap: 6px; }
+  .sec-profiles label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
+  .sec-profiles label:hover { border-color: var(--amber); }
+  .sec-profiles input { accent-color: var(--amber); margin: 0; }
+  .sec-reload { margin-top: 10px; border: 1px solid var(--amber); border-radius: 8px; padding: 9px 11px; background: color-mix(in srgb, var(--amber) 8%, transparent); font-size: 12.5px; display: flex; align-items: center; gap: 10px; }
+  .sec-reload span { flex: 1; }
+  .sec-reload button { flex: none; padding: 5px 11px; border-radius: 6px; border: 1px solid var(--amber); background: none; color: var(--amber); cursor: pointer; font: inherit; font-size: 12px; }
+  .sec-reload button:hover { background: color-mix(in srgb, var(--amber) 15%, transparent); }
 </style>
 </head>
 <body>
@@ -1609,10 +1646,18 @@
     <div class="pin-body">
       <ul id="secretsList"></ul>
       <form id="secretsAdd">
-        <input id="secretKey" placeholder="NAME" autocomplete="off" spellcheck="false" />
-        <input id="secretVal" placeholder="value" autocomplete="off" spellcheck="false" />
-        <button type="submit">Add</button>
+        <div class="sec-add-row">
+          <input id="secretKey" placeholder="NAME" autocomplete="off" spellcheck="false" />
+          <input id="secretVal" placeholder="value" autocomplete="off" spellcheck="false" />
+          <button type="submit" id="secretSubmit">Add</button>
+        </div>
+        <div id="secretAttach" class="sec-attach" hidden>
+          <span class="sec-attach-label">Inject into profiles:</span>
+          <div id="secretProfiles" class="sec-profiles"></div>
+          <button type="button" id="secretEditCancel" class="linkish" hidden>cancel edit</button>
+        </div>
       </form>
+      <div id="secretsReload" class="sec-reload" hidden></div>
     </div>
   </div>
 </div>
@@ -1979,6 +2024,13 @@
          with the favicon, `shadokInner`); it pumps via CSS. -->
     <div id="thinking"><span class="tw-text">Shadok is pumping</span><span class="tw-shadok" aria-hidden="true"></span></div>
 
+    <!-- Floating "jump to the latest": shown only when the active channel is
+         scrolled up. Its bottom offset tracks the composer's height (JS). -->
+    <button id="jumpBottom" type="button" hidden aria-label="Jump to the latest">
+      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M12 5v13M6 12l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      Latest
+    </button>
+
     <form id="composer" hidden>
       <textarea id="promptInput" rows="1"
         placeholder="Write your prompt — Enter to send, Shift+Enter for a new line"></textarea>
@@ -2253,7 +2305,12 @@
     // (no more stolen scroll during live streaming). See pinBottom().
     el._stickBottom = true;
     el.addEventListener("scroll", () => {
-      el._stickBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+      el._stickBottom = atBottom;
+      if (tab === active) {
+        if (atBottom) markCaughtUp(tab); // scrolled down to the end → all seen
+        updateJumpButton();
+      }
     });
 
     const btn = document.createElement("div");
@@ -2331,6 +2388,7 @@
       contextPct: null,
       muted: false,      // no favicon pip, no title badge/blink, no chime
       transcriptEl: el,
+      unreadSep: null,   // the "new messages" separator element, when present
       profile: null,     // the agent's "type": the profile applied at spawn
       crons: [],         // labels of the scheduled prompts (the ⏰ on the tab)
       btnEl: btn, ledEl: led, nameEl: name, timerEl: timer,
@@ -3304,7 +3362,17 @@
     // Experimental terminal follows the active channel (re-seeds on switch).
     if (typeof syncTerm === "function") syncTerm();
     if (tab.status !== "setup") {
-      tab.transcriptEl.scrollTop = tab.transcriptEl.scrollHeight;
+      // Resume at the "new" separator when this channel has unread messages
+      // (you left off there), otherwise at the latest. Either way the composer
+      // clears the mood on activate; the separator lingers until you read down.
+      if (tab.unreadSep) {
+        tab.unreadSep.scrollIntoView({ block: "start" });
+        tab.transcriptEl._stickBottom = false;
+      } else {
+        tab.transcriptEl.scrollTop = tab.transcriptEl.scrollHeight;
+        tab.transcriptEl._stickBottom = true;
+      }
+      updateJumpButton();
       promptInput.focus();
     }
   }
@@ -3796,6 +3864,53 @@
     if (tab === active && el._stickBottom !== false) el.scrollTop = el.scrollHeight;
   }
 
+  // ── "Jump to the latest" + the unread separator ─────────────────────────
+  // A channel is "caught up" when you're viewing it AND at its bottom. Anything
+  // that arrives otherwise (another channel in the background, or this one while
+  // you scrolled up) is unread: a separator is dropped before the first such
+  // message, and the floating button offers a one-click way down.
+  const jumpBottom = $("jumpBottom");
+  function isCaughtUp(tab) {
+    return tab === active && tab.transcriptEl._stickBottom !== false;
+  }
+  /** Drop a "new" separator before `turnEl` when the channel isn't caught up and
+   *  doesn't already carry one. */
+  function markUnreadBoundary(tab, turnEl) {
+    if (tab.unreadSep || isCaughtUp(tab) || !turnEl) return;
+    const sep = document.createElement("div");
+    sep.className = "unread-sep";
+    sep.setAttribute("role", "separator");
+    const label = document.createElement("span");
+    label.textContent = "new";
+    sep.appendChild(label);
+    tab.transcriptEl.insertBefore(sep, turnEl);
+    tab.unreadSep = sep;
+  }
+  /** Reached the bottom of a channel → its new messages are now seen. */
+  function markCaughtUp(tab) {
+    if (tab.unreadSep) { tab.unreadSep.remove(); tab.unreadSep = null; }
+    if (tab.btnEl.classList.contains("unread")) setTabMood(tab, null);
+  }
+  /** Show the button only while the active channel is scrolled up; keep it clear
+   *  of the composer. */
+  function updateJumpButton() {
+    const el = active && active.transcriptEl;
+    const composerH = $("composer").hidden ? 12 : $("composer").offsetHeight + 12;
+    jumpBottom.style.bottom = composerH + "px";
+    const up = !!el && !$("composer").hidden && el._stickBottom === false && el.scrollHeight - el.clientHeight > 60;
+    jumpBottom.hidden = !up;
+  }
+  function goToLatest() {
+    if (!active) return;
+    const el = active.transcriptEl;
+    el.scrollTop = el.scrollHeight;
+    el._stickBottom = true;
+    markCaughtUp(active);
+    updateJumpButton();
+  }
+  jumpBottom.addEventListener("click", goToLatest);
+  window.addEventListener("resize", updateJumpButton);
+
   /* A message's date/time. Today → the time alone ("21:57"). Another day → date
      + time ("3 August, 21:57"), with the year when it differs — otherwise a
      resumed history spanning several days just showed "21:57", which misleads.
@@ -4817,6 +4932,7 @@
         // reconnect (laptop wake / dropped link) rebuilds the transcript instead
         // of appending a second copy of the whole history.
         t.transcriptEl.innerHTML = "";
+        t.unreadSep = null; // the separator element went with the wipe
         addTurn(t, "system", "", "— resumed session history —");
         for (const h of msg.turns) {
           if (h.role === "user") {
@@ -4924,7 +5040,11 @@
         // who typed). Falling back to the origin still beats "elsewhere": a
         // scheduled run answering on its own has an explanation this way.
         closeActivity(t);
-        addTurn(t, "user", echoAuthorLabel(msg), msg.text, null, Date.now());
+        {
+          const b = addTurn(t, "user", echoAuthorLabel(msg), msg.text, null, Date.now());
+          markUnreadBoundary(t, b.parentElement);
+        }
+        if (t === active) updateJumpButton();
         break;
       case "profile":
         // The desired / in-force pair. Broadcast to EVERY client: changing the
@@ -4972,7 +5092,9 @@
           // gluing the two bubbles into one wordless run (the CSS group rule
           // spares `.after-gap`).
           if (msg.afterInternal) b.parentElement.classList.add("after-gap");
+          markUnreadBoundary(t, b.parentElement);
         }
+        if (t === active) updateJumpButton();
         break;
       case "stream-tool":
         // A tool call, grouped into the open activity block.
@@ -5422,6 +5544,7 @@
   function autosizePrompt() {
     promptInput.style.height = "auto";
     promptInput.style.height = Math.min(promptInput.scrollHeight, 160) + "px";
+    updateJumpButton(); // the composer grew/shrank — keep the button above it
   }
   promptInput.addEventListener("input", () => {
     autosizePrompt();
@@ -5743,24 +5866,122 @@
         }
         code.appendChild(tag);
       }
+      const actions = document.createElement("div");
+      actions.className = "s-actions";
+      const edit = document.createElement("button");
+      edit.type = "button"; edit.className = "s-edit"; edit.textContent = "✎";
+      edit.title = "Update this secret's value / the profiles it feeds";
+      edit.addEventListener("click", () => startEditSecret(k));
       const del = document.createElement("button");
-      del.textContent = "✕"; del.title = "Remove from vault";
+      del.type = "button"; del.className = "s-del"; del.textContent = "✕"; del.title = "Remove from vault";
       del.addEventListener("click", async () => {
         await fetch("/secrets?name=" + encodeURIComponent(k), { method: "DELETE" });
+        if (editingSecret === k) resetSecretForm();
         await loadVault(); renderSecrets();
       });
-      li.append(code, del);
+      actions.append(edit, del);
+      li.append(code, actions);
       ul.appendChild(li);
     }
   }
+
+  // ── Add / update a secret, and wire it to profiles ──────────────────────
+  // The vault add form doubles as an editor: ✎ on a row loads the name (locked)
+  // and the profiles it already feeds, so you can rotate the value or change
+  // which profiles get it in one place.
+  let editingSecret = null;
+  /** Paint a checkbox per (non-managed) profile; `checked` is the set to tick. */
+  function renderSecretProfiles(checked) {
+    const box = $("secretProfiles");
+    box.replaceChildren();
+    const names = profileCache
+      .map((p) => p.name)
+      .filter((n) => !(window.isManagedProfile && window.isManagedProfile(n)))
+      .sort();
+    $("secretAttach").hidden = names.length === 0;
+    for (const n of names) {
+      const label = document.createElement("label");
+      const cb = document.createElement("input");
+      cb.type = "checkbox"; cb.value = n; cb.checked = checked.has(n);
+      const span = document.createElement("span");
+      span.textContent = n;
+      label.append(cb, span);
+      box.appendChild(label);
+    }
+  }
+  function checkedProfiles() {
+    return [...$("secretProfiles").querySelectorAll("input:checked")].map((c) => c.value);
+  }
+  function resetSecretForm() {
+    editingSecret = null;
+    $("secretKey").value = ""; $("secretKey").readOnly = false;
+    $("secretVal").value = ""; $("secretVal").placeholder = "value";
+    $("secretSubmit").textContent = "Add";
+    $("secretEditCancel").hidden = true;
+    renderSecretProfiles(new Set());
+  }
+  function startEditSecret(name) {
+    editingSecret = name;
+    $("secretKey").value = name; $("secretKey").readOnly = true;
+    $("secretVal").value = ""; $("secretVal").placeholder = "new value (blank = keep)";
+    $("secretSubmit").textContent = "Update";
+    $("secretEditCancel").hidden = false;
+    const users = window.secretUsers ? window.secretUsers(profileCache, name) : [];
+    renderSecretProfiles(new Set(users));
+    $("secretVal").focus();
+  }
+  /** Write the checkbox choices back onto every affected profile (add where now
+   *  ticked, remove where now unticked), preserving each profile's other fields —
+   *  crucially its systemPrompt, or omitting it would silently un-edit the role. */
+  async function syncSecretToProfiles(name, wanted) {
+    const want = new Set(wanted);
+    const changed = [];
+    for (const p of profileCache) {
+      if (window.isManagedProfile && window.isManagedProfile(p.name)) continue;
+      const has = (p.secrets || []).includes(name);
+      if (want.has(p.name) === has) continue; // no change for this profile
+      const secrets = want.has(p.name)
+        ? [...(p.secrets || []), name]
+        : (p.secrets || []).filter((s) => s !== name);
+      const body = { name: p.name, deny: p.deny, allow: p.allow, model: p.model, secrets };
+      if (typeof p.systemPrompt === "string") body.systemPrompt = p.systemPrompt; // keep an edited prompt
+      await fetch("/profiles", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+      changed.push(p.name);
+    }
+    if (changed.length) await loadProfilesInto();
+    return changed;
+  }
+  /** Offer to reload the LIVE agents whose profile now feeds this secret — the
+   *  value only reaches a process at spawn, so a running one needs a respawn. */
+  function offerReload(secretName) {
+    const users = new Set(window.secretUsers ? window.secretUsers(profileCache, secretName) : []);
+    // Only LIVE agents: a stopped one will get the value when it next launches.
+    const agents = tabs.filter((t) => users.has(t.profile) && t.ws && t.ws.readyState === WebSocket.OPEN);
+    const box = $("secretsReload");
+    box.replaceChildren();
+    if (!agents.length) { box.hidden = true; return; }
+    const txt = document.createElement("span");
+    txt.textContent =
+      agents.length === 1
+        ? `1 running agent (${agents[0].nameEl.textContent}) uses “${secretName}”. Reload it to pick up the new value?`
+        : `${agents.length} running agents use “${secretName}”. Reload them to pick up the new value?`;
+    const go = document.createElement("button");
+    go.type = "button"; go.textContent = "Reload " + (agents.length === 1 ? "it" : "all");
+    go.addEventListener("click", () => { agents.forEach(reloadTab); box.hidden = true; });
+    box.append(txt, go);
+    box.hidden = false;
+  }
   // profileCache feeds the "no profile uses it" warning: it must be fresh when
   // the panel opens, or we would show a stale diagnosis.
   $("secretsBtn").addEventListener("click", async () => {
     await Promise.all([loadVault(), loadProfilesInto()]);
     renderSecrets();
+    resetSecretForm();
+    $("secretsReload").hidden = true;
     $("secretsOverlay").hidden = false;
     $("secretKey").focus();
   });
+  $("secretEditCancel").addEventListener("click", resetSecretForm);
   // The missing link: from the secrets, go and attach them to a profile.
   $("secretsToProfiles").addEventListener("click", () => {
     $("secretsOverlay").hidden = true;
@@ -5825,13 +6046,21 @@
     e.preventDefault();
     const name = $("secretKey").value.trim();
     const value = $("secretVal").value;
+    const wanted = checkedProfiles();
     if (!name) return;
-    // `overwrite` because a person reading the vault's list and clicking Save is
-    // acting deliberately. The flag exists to stop an AGENT from replacing a
-    // credential silently — not to slow the human down.
-    await fetch("/secrets", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, value, overwrite: true }) });
-    $("secretKey").value = ""; $("secretVal").value = "";
+    // Editing an existing secret with the value left BLANK means "keep the value,
+    // just change the profiles" — the vault is write-only, so we must not clobber
+    // it with "". A new secret, or a value typed, is written (overwrite: true
+    // because a human at the vault is acting deliberately; the flag only stops an
+    // AGENT replacing a credential silently).
+    const keepValue = editingSecret && value === "";
+    if (!keepValue) {
+      await fetch("/secrets", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, value, overwrite: true }) });
+    }
+    await syncSecretToProfiles(name, wanted); // refreshes profileCache
     await loadVault(); renderSecrets();
+    offerReload(name); // propose reloading the live agents that now feed on it
+    resetSecretForm();
     $("secretKey").focus();
   });
   // Parse a pasted .env-style block → [{name, value}]. Handles `export