shadok-ai 0.15.50 → 0.15.52

package/package.json

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

package/public/echo-author.js

@@ -24,3 +24,27 @@ export function echoAuthor(msg) {
   // from another of your tabs; a single cockpit has one human.
   return place || "you";
 }
+
+/**
+ * Is this prompt the viewer's OWN? Decides the side of the bubble: yours on the
+ * right, anyone else's — a teammate on the web, a Telegram sender, a cron, the
+ * auto-retry — on the left, still tinted as a human message (only the agent is
+ * white).
+ *
+ * Only a web prompt can be yours: another platform is another person, or nobody.
+ * Without a name it is a prompt from this browser or a cockpit with no accounts
+ * — yours. While `me` is not known yet (`/me` still in flight), a named web
+ * prompt is taken as yours too: guessing "someone else" would flash your own
+ * history to the left on every reload.
+ *
+ * @param {{from?: string, origin?: string, auto?: boolean}} msg
+ * @param {string | null | undefined} me the signed-in account's name, if known
+ */
+export function isOwnPrompt(msg, me) {
+  if (msg?.auto) return false;
+  const origin = (msg?.origin ?? "").trim();
+  if (origin && origin !== "web") return false;
+  const from = (msg?.from ?? "").trim();
+  if (!from || !me) return true;
+  return from === me;
+}

package/public/index.html

@@ -187,7 +187,36 @@
     background: var(--amber); color: var(--on-accent);
     display: grid; place-items: center; margin-right: 4px;
   }
-  header .brand-logo svg { width: 19px; height: 19px; }
+  header .brand-logo svg { width: 22px; height: 22px; overflow: visible; }
+  /* The mark is the Shadok itself (same anatomy as the favicon's `shadokInner`),
+     alive: it bobs, its antennae sway, it blinks and glances around, and waves
+     now and then. Pure CSS on static markup, so it costs no JS timer and needs
+     no bridge (invariant 10). Hover makes it hop. Every part rotates/scales
+     about its OWN box (`transform-box: fill-box`), never the SVG's origin. */
+  header .brand-logo svg * { transform-box: fill-box; }
+  header .brand-logo .sk-pupils { fill: var(--amber); animation: sk-glance 7s ease-in-out infinite; }
+  header .brand-logo .sk-bob { animation: sk-bob 2.4s ease-in-out infinite; }
+  header .brand-logo .sk-ant { animation: sk-sway 1.6s ease-in-out infinite alternate; }
+  header .brand-logo .sk-ant-l { transform-origin: 100% 100%; }
+  header .brand-logo .sk-ant-r { transform-origin: 0% 100%; animation-delay: -0.8s; }
+  header .brand-logo .sk-eyes { transform-origin: 50% 50%; animation: sk-blink 4.6s infinite; }
+  header .brand-logo .sk-arm { transform-origin: 0% 0%; animation: sk-wave 9s ease-in-out infinite; }
+  header .brand:hover .brand-logo svg { animation: sk-hop 0.6s ease-out; }
+  @keyframes sk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.9px); } }
+  @keyframes sk-sway { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } }
+  @keyframes sk-blink { 0%, 90%, 96%, 100% { transform: scaleY(1); } 93% { transform: scaleY(0.12); } }
+  @keyframes sk-glance {
+    0%, 20% { transform: translate(0, 0); } 28%, 45% { transform: translate(-0.8px, 0.2px); }
+    53%, 70% { transform: translate(0.6px, -0.3px); } 78%, 100% { transform: translate(0, 0); }
+  }
+  @keyframes sk-wave {
+    0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-70deg); }
+    78% { transform: rotate(-35deg); } 82% { transform: rotate(-70deg); } 86% { transform: rotate(0); }
+  }
+  @keyframes sk-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 70% { transform: translateY(0.5px); } }
+  @media (prefers-reduced-motion: reduce) {
+    header .brand-logo svg, header .brand-logo svg * { animation: none !important; }
+  }
   /* The brand name doubles as the cockpit's editable title: click to rename,
      Enter/blur commits, Escape cancels. A dashed outline + pencil on hover make
      the affordance obvious; the outline turns solid amber while editing. */
@@ -1128,6 +1157,11 @@
      between this bubble and the one before, so it keeps its own label — a
      wordless boundary the reader would otherwise never see. */
   .turn.user { align-self: flex-end; align-items: flex-end; }
+  /* Someone else's prompt (a teammate, a Telegram sender, a cron): on the
+     agent's side, still a human bubble — same tint as yours, only the agent is
+     white. The side and the name say who; a colour per person read as noise. */
+  .turn.user.other { align-self: flex-start; align-items: flex-start; }
+  .turn.user + .turn.user.new-speaker > .label { display: block; }
   .turn.claude { align-self: flex-start; }
   .bubble {
     padding: 9px 14px;
@@ -2283,7 +2317,7 @@
 <body>
 
 <header>
-  <span class="brand"><span class="brand-logo" aria-hidden="true"><svg viewBox="0 0 40 40"><g fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="17" cy="17" rx="10" ry="8.5"/><path d="M25 12.5c3-3 7.5-3 10-1.2-2.8.4-5 1.9-6.6 4"/><path d="M14 25.3l-2.4 10M20 25.3l1.6 10"/></g></svg></span><span class="brand-name" id="brandName" title="Rename this cockpit">shadok-ai</span><span class="brand-edit" id="brandEdit" title="Rename this cockpit" aria-hidden="true">✎</span> <span class="ver" id="verView" title="Running version"></span><span class="ver-chan" id="verChan" aria-hidden="true"></span></span>
+  <span class="brand"><span class="brand-logo" aria-hidden="true"><svg viewBox="0 0 32 32"><g fill="currentColor" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><g class="sk-leg sk-leg-l"><line x1="13" y1="23" x2="12.6" y2="30.6"/><line x1="11" y1="30.7" x2="14.1" y2="30.7"/></g><g class="sk-leg sk-leg-r"><line x1="18.6" y1="23" x2="19" y2="30.6"/><line x1="17.6" y1="30.7" x2="20.7" y2="30.7"/></g><g class="sk-bob"><line class="sk-arm" x1="21.6" y1="17.2" x2="26" y2="20.4"/><g class="sk-ant sk-ant-l" stroke-width="0.9"><line x1="13.8" y1="5.4" x2="11.8" y2="2.8"/><circle cx="11.8" cy="2.8" r="1" stroke="none"/></g><g class="sk-ant sk-ant-r" stroke-width="0.9"><line x1="18.2" y1="5.4" x2="20.2" y2="2.8"/><circle cx="20.2" cy="2.8" r="1" stroke="none"/></g><circle cx="16" cy="16.2" r="8.4" stroke="none"/><path d="M14.4 18.2 L17.6 18.2 L16 21.6 Z" stroke="none"/><g class="sk-eyes" stroke="none"><circle cx="13.1" cy="7.8" r="2.6" fill="#fff"/><circle cx="18.9" cy="7.8" r="2.6" fill="#fff"/><g class="sk-pupils"><circle cx="13.4" cy="8.1" r="1.3"/><circle cx="19.2" cy="8.1" r="1.3"/></g></g></g></g></svg></span><span class="brand-name" id="brandName" title="Rename this cockpit">shadok-ai</span><span class="brand-edit" id="brandEdit" title="Rename this cockpit" aria-hidden="true">✎</span> <span class="ver" id="verView" title="Running version"></span><span class="ver-chan" id="verChan" aria-hidden="true"></span></span>
   <span class="spacer"></span>
   <div class="gauge quota" id="quota5h" data-window="5h" title="5h rolling limit">
     <svg class="dial" viewBox="0 0 56 44" role="img" aria-label="5h rolling limit">
@@ -3047,7 +3081,7 @@
     hasReadonlyPreset,
     applyReadonlyPreset, isManagedProfile, profileSaveBody, secretUsers } from "/profile-card.js?v=__ASSET_V__";
   import { notifyState, BLINK_MS } from "/notify.js?v=__ASSET_V__";
-  import { echoAuthor } from "/echo-author.js?v=__ASSET_V__";
+  import { echoAuthor, isOwnPrompt } from "/echo-author.js?v=__ASSET_V__";
   import { dialPos, dialColor, arcSegments, dialTitle, SWEEP_DEG } from "/gauge-dial.js?v=__ASSET_V__";
   import { TOUR_STEPS, bubblePlacement, unionRect, visibleSteps } from "/tour-steps.js?v=__ASSET_V__";
   import { pickChannelSource, dirKey, serverSwapped } from "/channel-store.js?v=__ASSET_V__";
@@ -3105,6 +3139,7 @@
   window.hasReadonlyPreset = hasReadonlyPreset;
   window.applyReadonlyPreset = applyReadonlyPreset;
   window.echoAuthor = echoAuthor;
+  window.isOwnPrompt = isOwnPrompt;
   window.notifyState = notifyState;
   window.BLINK_MS = BLINK_MS;
   window.dialPos = dialPos;
@@ -3154,6 +3189,7 @@
     extractLiveText: () => "",
     livePreviewDecision: () => null,
     echoAuthor: () => "",
+    isOwnPrompt: () => true,
     notifyState: () => ({ color: null, badge: "", blink: false }),
     dialPos: () => 0,
     dialColor: () => "",
@@ -5920,6 +5956,32 @@
     return window.echoAuthor ? window.echoAuthor(msg) : "you";
   }
 
+  /** Which side a human prompt sits on: yours on the right, anyone else's on
+   *  the left — still a tinted human bubble, only the agent is white. The author
+   *  is kept on the turn so the side can be re-decided once `/me` answers
+   *  (`resideAllPrompts`). */
+  function markPromptSide(bubble, msg) {
+    const turn = bubble.parentElement;
+    turn.dataset.from = msg?.from ?? "";
+    turn.dataset.origin = msg?.origin ?? "";
+    if (msg?.auto) turn.dataset.auto = "1";
+    // A run of prompts shows one label — but only while it is ONE speaker.
+    const prev = turn.previousElementSibling;
+    const who = turn.querySelector(":scope > .label")?.firstChild?.textContent ?? "";
+    const prevWho = prev?.classList.contains("user") ? prev.querySelector(":scope > .label")?.firstChild?.textContent ?? "" : who;
+    turn.classList.toggle("new-speaker", who !== prevWho);
+    applyPromptSide(turn);
+  }
+  function applyPromptSide(turn) {
+    const msg = { from: turn.dataset.from, origin: turn.dataset.origin, auto: turn.dataset.auto === "1" };
+    const own = window.isOwnPrompt ? window.isOwnPrompt(msg, me?.name) : true;
+    turn.classList.toggle("other", !own);
+  }
+  function resideAllPrompts() {
+    for (const turn of document.querySelectorAll(".turn.user[data-origin]")) applyPromptSide(turn);
+  }
+  window.addEventListener("shadok-bridge-ready", resideAllPrompts);
+
   function addTurn(tab, role, who, text, extraClass, at) {
     // Time of the last message in the channel list, relative ("3m ago"). Every
     // message (replayed history or live) carries `at`; the last one wins.
@@ -7423,6 +7485,7 @@
             // SAME echoAuthor the live echo uses: "Ada · telegram"
             // for a Telegram message, "you" for your own web prompt.
             const b = addTurn(t, "user", echoAuthorLabel({ from: h.from, origin: h.origin }), h.text, "hist", h.at);
+            markPromptSide(b, { from: h.from, origin: h.origin });
             stampMsgIds(t, b.parentElement, h.ids);
           } else {
             const b = addTurn(t, "claude", "claude", h.text, "hist", h.at);
@@ -7537,6 +7600,7 @@
         closeActivity(t);
         {
           const b = addTurn(t, "user", echoAuthorLabel(msg), msg.text, null, Date.now());
+          markPromptSide(b, msg);
           awaitPromptId(b, msg.text);
           markUnreadBoundary(t, b.parentElement);
         }
@@ -7993,7 +8057,11 @@
     // Sending = going back to the bottom, whatever happens (even after scrolling
     // up): you want to see your message and the answer that follows.
     t.transcriptEl._stickBottom = true;
-    awaitPromptId(addTurn(t, "user", "you", text, null, Date.now()), text);
+    {
+      const b = addTurn(t, "user", "you", text, null, Date.now());
+      markPromptSide(b, {});
+      awaitPromptId(b, text);
+    }
     startTurnTimer(t);
     setTabMood(t, "working");
     // Remember this channel's last sent prompt, so Escape (an interruption) can
@@ -9532,6 +9600,8 @@
     $("signOut").hidden = !named;
     $("whoSep").hidden = !named;
     if (named) $("whoAmI").textContent = "Signed in as " + me.name + " · " + me.role;
+    // Prompts drawn before we knew who you are get their side now.
+    resideAllPrompts();
     // Security: for a signed-in person (or the lone admin of a no-password
     // instance, who is everybody). The server answers 403 otherwise.
     $("securityBtn").hidden = !(me?.name || me?.role === "admin");