shadok-ai 0.15.49 → 0.15.51

package/README.md

@@ -204,8 +204,8 @@ Enter to skip; you can add it later from the web UI).
   browser, since shell mode sits outside the agent's guardrails. The command and
   its output stay in the chat, reload included — as does one you typed yourself
   in the terminal view.
-- **Files you hand an agent** — paste or drop a file into the composer (an
-  image, a PDF, a CSV…) and it becomes a **chip** above the text box: a
+- **Files you hand an agent** — paste or drop a file into the composer, or pick
+  one with the 📎 button beside it (an image, a PDF, a CSV…), and it becomes a **chip** above the text box: a
   thumbnail for an image, a named tag for anything else, each with a ✕ to
   remove it. On send, an image shows **inline in your own message bubble**;
   under the hood the agent still receives it as an `[Attached …: path]` line,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadok-ai",
-  "version": "0.15.49",
+  "version": "0.15.51",
   "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

@@ -1128,6 +1128,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;
@@ -1535,6 +1540,25 @@
     line-height: 1.45;
   }
   #composer textarea:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
+  /* The paperclip: a square as tall as the one-line textarea, aligned to its
+     bottom so it stays beside the last line while the field grows. */
+  .cmp-attach {
+    flex: none;
+    align-self: flex-end;
+    width: 42px;
+    height: 42px;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: var(--text-dim);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    cursor: pointer;
+  }
+  .cmp-attach:hover:not(:disabled) { color: var(--amber); border-color: var(--amber); }
+  .cmp-attach:disabled { opacity: 0.4; cursor: default; }
 
   /* ── Engine room (live terminal) ─────────────────────── */
   #machine {
@@ -2946,6 +2970,11 @@
     <form id="composer" hidden>
       <!-- Thumbnails of the files dropped / pasted into this agent's composer. -->
       <div id="composerAtts" class="cmp-atts" hidden></div>
+      <!-- Pick a file to send: the same path as a paste or a drop (attachFile). -->
+      <button type="button" id="attachBtn" class="cmp-attach" title="Attach a file" aria-label="Attach a file">
+        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M21 11.5l-8.6 8.6a5.5 5.5 0 0 1-7.8-7.8l8.6-8.6a3.7 3.7 0 0 1 5.2 5.2l-8.6 8.6a1.8 1.8 0 0 1-2.6-2.6l7.9-7.9" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </button>
+      <input type="file" id="attachInput" multiple hidden>
       <textarea id="promptInput" rows="1"
         placeholder="Write your prompt — Enter to send, Shift+Enter for a new line"></textarea>
       <button type="submit" class="primary" id="sendBtn">Send</button>
@@ -3023,7 +3052,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__";
@@ -3081,6 +3110,7 @@
   window.hasReadonlyPreset = hasReadonlyPreset;
   window.applyReadonlyPreset = applyReadonlyPreset;
   window.echoAuthor = echoAuthor;
+  window.isOwnPrompt = isOwnPrompt;
   window.notifyState = notifyState;
   window.BLINK_MS = BLINK_MS;
   window.dialPos = dialPos;
@@ -3130,6 +3160,7 @@
     extractLiveText: () => "",
     livePreviewDecision: () => null,
     echoAuthor: () => "",
+    isOwnPrompt: () => true,
     notifyState: () => ({ color: null, badge: "", blink: false }),
     dialPos: () => 0,
     dialColor: () => "",
@@ -5896,6 +5927,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.
@@ -7399,6 +7456,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);
@@ -7513,6 +7571,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);
         }
@@ -7969,7 +8028,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
@@ -8216,6 +8279,17 @@
     for (const item of items) await attachFile(item.getAsFile());
   });
 
+  // The paperclip opens the OS file picker; what is picked goes through
+  // attachFile exactly like a paste or a drop.
+  const attachInput = $("attachInput");
+  $("attachBtn").addEventListener("click", () => { if (active) attachInput.click(); });
+  attachInput.addEventListener("change", async () => {
+    const files = [...(attachInput.files || [])];
+    attachInput.value = ""; // picking the same file again must fire `change` again
+    for (const f of files) await attachFile(f);
+    promptInput.focus();
+  });
+
   // Drag-and-drop files anywhere on the chat pane → attach them, same path as
   // paste. Only reacts to an OS file drag (`types` includes "Files"), so the
   // internal tab/group reordering DnD is untouched. A depth counter keeps the
@@ -9497,6 +9571,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");