shadok-ai 0.1.136 → 0.1.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadok-ai",
-  "version": "0.1.136",
+  "version": "0.1.138",
   "main": "dist/session.js",
   "scripts": {
     "test": "node --import tsx --test test/*.ts .claude/skills/shadok-ai-agents/test/*.test.mjs",

package/public/index.html

@@ -216,11 +216,19 @@
   .tab .ctxfill.warn { background: var(--amber); }
   .tab .ctxfill.crit { background: var(--err); }
   .tab:hover { color: var(--text); background: var(--bg-inset); }
+  /* Onglet actif (sélectionné). Marqué fort ET robuste : le fond amber et le
+     bord gauche sont écrasés par les styles d'état (.working/.needs-answer/
+     .unread, définis plus bas, même spécificité → l'ordre source gagne), donc
+     l'accent de sélection passe surtout par des canaux qu'AUCUN état ne touche —
+     box-shadow (barre gauche vive) et font-weight — pour rester visible quel que
+     soit l'état de l'onglet. */
   .tab.active {
-    color: var(--amber);
-    border-left-color: var(--amber);
-    background: var(--amber-soft);
+    color: var(--text);
+    font-weight: 600;
+    background: rgba(240, 168, 72, 0.24);
+    border-left-color: var(--phosphor);
     border-radius: 0 4px 4px 0;
+    box-shadow: inset 3px 0 0 var(--phosphor);
   }
   .tab .name {
     flex: 1;
@@ -449,6 +457,18 @@
   }
   /* History replayed from the .jsonl: raw markdown → HTML rendering. */
   .turn.hist { opacity: 0.8; }
+  /* Aperçu live du bloc en cours, extrait de l'écran TUI (brut, non-markdown).
+     Grisé + pré-formaté pour signaler que c'est provisoire ; remplacé par le
+     bloc .jsonl (stream-text) dès qu'il arrive. */
+  .turn.claude.live-preview .bubble {
+    opacity: 0.55;
+    white-space: pre-wrap;
+    font-family: var(--mono);
+  }
+  .turn.claude.live-preview .bubble::after {
+    content: "▍";
+    animation: breathe 1s step-start infinite;
+  }
   .bubble.md {
     white-space: normal;
     word-break: break-word;
@@ -1031,6 +1051,10 @@
 </main>
 
 <script src="/vendor/marked.js"></script>
+<script type="module">
+  import { extractLiveText } from "/live-text.js";
+  window.extractLiveText = extractLiveText;
+</script>
 <script>
   const $ = (id) => document.getElementById(id);
   const tabbar = $("tabbar"), newTabBtn = $("newTab"), newGroupBtn = $("newGroup");
@@ -1669,6 +1693,40 @@
     return bubble;
   }
 
+  /* ── Aperçu live du texte en cours ───────────────────────
+     Le .jsonl n'écrit un bloc de texte que TERMINÉ, donc rien ne s'affiche
+     pendant sa génération. On comble avec le dernier bloc lu sur l'écran TUI
+     (window.extractLiveText), dans une bulle provisoire, remplacée par le rendu
+     markdown autoritatif dès que `stream-text` livre le bloc complet.
+
+     Déduplication : après un `stream-text`, l'écran continue de montrer le même
+     bloc `⏺` ; on mémorise sa forme-écran (`lastFinalizedScreenText`) pour ne
+     pas recréer un provisoire qui doublonnerait la bulle déjà finalisée. */
+  function updateLivePreview(tab, screen) {
+    if (!window.extractLiveText) return;
+    const txt = extractLiveText(screen);
+    if (!txt) return; // trou d'extraction : garder l'existant tel quel
+    if (txt === tab.lastFinalizedScreenText) { clearLivePreview(tab); return; }
+    if (!tab.livePreviewEl) {
+      const turn = document.createElement("div");
+      turn.className = "turn claude live-preview";
+      const bubble = document.createElement("div");
+      bubble.className = "bubble";
+      turn.appendChild(bubble);
+      tab.transcriptEl.appendChild(turn);
+      tab.livePreviewEl = turn;
+      tab.livePreviewBubble = bubble;
+    }
+    tab.livePreviewBubble.textContent = txt;
+    if (tab === active) tab.transcriptEl.scrollTop = tab.transcriptEl.scrollHeight;
+  }
+
+  function clearLivePreview(tab) {
+    if (tab.livePreviewEl) tab.livePreviewEl.remove();
+    tab.livePreviewEl = null;
+    tab.livePreviewBubble = null;
+  }
+
   /* ── Activity log ────────────────────────────────────────
      Tool traffic is grouped instead of stacked. A *block* is a run of tool
      events between two pieces of assistant text; inside it, consecutive calls
@@ -2286,6 +2344,8 @@
         if (!t.turnStart) startTurnTimer(t, msg.startedAt);
         setTabMood(t, "working");
         setTabState(t, "busy", "responding…");
+        clearLivePreview(t);
+        t.lastFinalizedScreenText = null;
         break;
       case "prompt-echo":
         // Prompt sent by another tab/interface — or by the server itself
@@ -2307,6 +2367,10 @@
         // one, so the transcript keeps the real text/tools interleaving.
         retireChoices(t);
         closeActivity(t);
+        // Mémoriser la forme-écran du bloc qu'on finalise, pour empêcher un
+        // provisoire doublon tant que l'écran le montre encore, puis remplacer.
+        if (window.extractLiveText) t.lastFinalizedScreenText = extractLiveText(t.screenText);
+        clearLivePreview(t);
         addTurn(t, "claude", "claude", msg.text, "live");
         break;
       case "stream-tool":
@@ -2319,6 +2383,7 @@
         break;
       case "turn-done":
         retireChoices(t);
+        clearLivePreview(t);
         // Activity recedes now the turn is over — errors excepted.
         sealTurn(t);
         if (msg.sessionId && msg.sessionId !== t.sessionId) {
@@ -2333,6 +2398,7 @@
       case "dialog":
         // Re-rendered in place when a dialog is already shown (multi toggle).
         closeActivity(t);
+        clearLivePreview(t);
         renderDialog(t, msg);
         stopTurnTimer(t);
         setTabMood(t, "needs-answer");
@@ -2341,6 +2407,7 @@
       case "screen":
         t.screenText = msg.text;
         if (t === active) screenEl.textContent = msg.text;
+        if (msg.working) updateLivePreview(t, msg.text);
         break;
       case "gone":
         // Session's directory is gone (e.g. a removed worktree): stop trying

package/public/live-text.js

@@ -0,0 +1,39 @@
+// Extraction best-effort du bloc de texte assistant en cours, depuis l'écran
+// TUI (@xterm/headless) — voir docs/superpowers/specs/2026-07-28-live-text-preview-design.md.
+//
+// Chargé tel quel par le navigateur (ESM) et importé par les tests node/tsx.
+// Le transcript .jsonl n'écrit un bloc de texte que TERMINÉ ; l'écran, lui, le
+// montre au fil de la frappe → seule source token-granulaire.
+//
+// Un bloc de texte assistant = une ligne "⏺ <prose>" (U+23FA + espace) en
+// colonne 0, suivie de continuations indentées de 2 espaces. Un tool_use rend
+// "⏺ Nom(args)" ; un résultat d'outil rend "  ⎿ …".
+
+const MARKER = "⏺ "; // "⏺ "
+
+/** Le dernier bloc de texte assistant visible, dé-wrappé ; "" sinon. */
+export function extractLiveText(screen) {
+  if (typeof screen !== "string" || !screen) return "";
+  const lines = screen.split("\n");
+
+  // Trouver le dernier marqueur de bloc "⏺ " en colonne 0.
+  let start = -1;
+  for (let i = lines.length - 1; i >= 0; i--) {
+    if (lines[i].startsWith(MARKER)) { start = i; break; }
+  }
+  if (start < 0) return "";
+
+  const head = lines[start].slice(MARKER.length).trim();
+  // tool_use : "⏺ Nom(...)" — identifiant collé à une parenthèse.
+  if (/^[\w.-]+\(/.test(head)) return "";
+
+  const parts = [head];
+  for (let i = start + 1; i < lines.length; i++) {
+    const l = lines[i];
+    if (!l.startsWith("  ") || l.trim() === "") break; // spinner/blanc/séparateur/fin
+    const t = l.trim();
+    if (t.startsWith("⎿") || /^Ran\b/.test(t)) break; // sous-ligne d'outil
+    parts.push(t);
+  }
+  return parts.join(" ");
+}