shadok-ai 0.12.6 → 0.12.8

package/package.json

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

package/public/index.html

@@ -504,7 +504,19 @@
     border-radius: 0 4px 4px 0;
     color: var(--text);
   }
-  @media (prefers-reduced-motion: reduce) { .tab.working { animation: none; } }
+  /* Background work still running (shells and/or monitors the agent left going,
+     the ⏳/👁 on the row): a green diagonal HATCH that breathes, the way
+     .working breathes amber — so a tab with something ticking in the background
+     reads at a glance, distinct from the solid fill of an active turn. Layered as
+     a background-IMAGE, not the `background` shorthand, so a tab that is ALSO
+     working / needs-answer / unread keeps its state colour underneath the hatch. */
+  .tab.has-bg {
+    background-image: repeating-linear-gradient(45deg,
+      color-mix(in srgb, var(--ok) 22%, transparent) 0 5px,
+      transparent 5px 10px);
+    animation: breathe 1.8s ease-in-out infinite;
+  }
+  @media (prefers-reduced-motion: reduce) { .tab.working, .tab.has-bg { animation: none; } }
   #newTab, #newGroup {
     margin-top: 8px;
     border: 1px dashed var(--line);
@@ -897,6 +909,22 @@
     overflow-x: auto;
   }
   .bubble.md pre code { background: none; padding: 0; }
+  /* Copy on a fenced code block. The button sits on a WRAPPER around the <pre>,
+     not inside it: the <pre> scrolls sideways, and a button within would scroll
+     away. Always visible (a phone has no hover), small, top-right — the <pre>'s
+     own top padding keeps the first line clear of it. */
+  .bubble.md .md-code { position: relative; }
+  .bubble.md .md-code-copy {
+    position: absolute; top: 6px; right: 6px;
+    padding: 2px 7px; font-family: var(--mono); font-size: 10px; line-height: 1.4;
+    cursor: pointer; background: var(--bg-inset); border: 1px solid var(--line);
+    border-radius: 6px; color: var(--text-dim); opacity: 0.75;
+    transition: color 0.12s, border-color 0.12s, opacity 0.12s;
+  }
+  .bubble.md .md-code-copy:hover, .bubble.md .md-code-copy:focus-visible {
+    opacity: 1; color: var(--amber); border-color: var(--amber);
+  }
+  .bubble.md .md-code-copy.done { opacity: 1; color: var(--ok, #7ac77a); border-color: currentColor; }
   /* The horizontal scroll for a wide table lives on this wrapper (added in JS
      after sanitising), NOT on the <table>: `display:block` on a table breaks its
      own layout — thead and tbody stop sharing column widths, so the header row
@@ -2630,6 +2658,9 @@
     paintCount(tab.monitorsEl, Number(monitors) || 0, "monitor");
     tab.shells = Number(shells) || 0;
     tab.monitors = Number(monitors) || 0;
+    // The green hatched breathe on the whole tab: on as soon as anything is left
+    // running in the background, off when the last one stops.
+    tab.btnEl.classList.toggle("has-bg", tab.shells > 0 || tab.monitors > 0);
   }
   function paintCount(el, n, noun) {
     if (!el) return;
@@ -4144,6 +4175,30 @@
         t.replaceWith(wrap);
         wrap.appendChild(t);
       }
+      // A copy button on every fenced code block — the thing you most often want
+      // to lift out of an answer. It goes on a wrapper AROUND the <pre> (the
+      // <pre> scrolls; a button inside would scroll off), and copies the code's
+      // own text, not the whole message.
+      for (const pre of bubble.querySelectorAll("pre")) {
+        const code = pre.querySelector("code") || pre;
+        const wrap = document.createElement("div");
+        wrap.className = "md-code";
+        pre.replaceWith(wrap);
+        wrap.appendChild(pre);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "md-code-copy";
+        btn.textContent = "⧉ copy";
+        btn.title = "Copy this code";
+        btn.addEventListener("click", async (e) => {
+          e.stopPropagation();
+          const ok = await copyText(code.textContent.replace(/\n$/, ""));
+          btn.textContent = ok ? "✓ copied" : "⚠ failed";
+          btn.classList.toggle("done", ok);
+          setTimeout(() => { btn.textContent = "⧉ copy"; btn.classList.remove("done"); }, 1500);
+        });
+        wrap.appendChild(btn);
+      }
     } else {
       bubble.textContent = text;
     }