shadok-ai 0.2.17 → 0.2.19

package/README.md

@@ -63,15 +63,17 @@ Enter to skip; you can add it later from the web UI).
   the chat can't express. With tmux there is also an **experimental real
   terminal** (xterm.js over the pane's byte stream) when a snapshot isn't enough.
 - **Diff panel** — what an agent actually changed, against its base.
-- **Tweak Shadok-AI** — a card at the bottom of the agents column. One click
-  clones shadok-ai's own source into `~/.shadok-ai/self/shadok-ai`, starts an
-  agent on it in its own worktree, and that agent delivers its change as a
+- **Tweak Shadok-AI** — a card pinned at the bottom of the agents column. One
+  click clones shadok-ai's own source into `~/.shadok-ai/self/shadok-ai` and
+  starts an agent on it in its own worktree; that agent delivers its change as a
   **pull request** — a fork under your GitHub account, since you need no rights
   on the repo. Nothing to configure and no token to paste: the clone is
   anonymous, so you describe an idea, watch it work and read the diff first, and
   it only asks for GitHub (via `gh auth login`, device code relayed in the chat)
-  when there is something worth pushing. Desktop only — the agents column is
-  hidden on phones.
+  when there is something worth pushing. It is **one channel, not a launcher**:
+  the card becomes that channel's tab, with the usual menu — mute, reload,
+  rename, change profile, mirror to Telegram, close — and closing it brings the
+  card back. Desktop only: the agents column is hidden on phones.
 - **Self-update** — polls npm and can update and reload itself in place.
 
 ### Telegram (optional)
@@ -122,6 +124,27 @@ the same-origin policy, so without that check any page you happen to visit could
 drive your agents. Behind a reverse proxy that rewrites `Host`, list the public
 origin in `SHADOK_ORIGINS`.
 
+### Behind TLS (nginx, Caddy…)
+
+Serving the cockpit over HTTPS works, with one requirement: **the proxy must
+forward the WebSocket upgrade**. Everything live — the channel list included —
+travels over `/ws`, and the page itself is static HTML, so a proxy that drops
+`Upgrade`/`Connection` produces a cockpit that loads perfectly and then never
+connects. In nginx:
+
+```nginx
+location / {
+    proxy_pass http://127.0.0.1:3789;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_set_header Host $host;
+}
+```
+
+The client picks `wss://` on its own when the page is HTTPS, so there is nothing
+to configure on that side.
+
 ### SSH identity in Docker
 
 When shadok-ai runs **in a container** it gives itself an SSH key on first boot

package/package.json

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

package/public/index.html

@@ -374,10 +374,27 @@
      bordure et les ＋ des boutons fantômes, donc une carte pleine se lit comme
      une action et non comme une session. Épinglée en bas (margin-top:auto +
      sticky) pour rester atteignable quand la liste des agents défile. */
-  #tweakCta {
+  /* L'emplacement réservé au canal « tweak », épinglé en bas de la colonne. Il
+     porte tantôt le CTA (aucune session), tantôt l'ONGLET du canal lui-même —
+     qui est un `.tab` ordinaire déplacé ici, donc états, menu contextuel et
+     rattachement Telegram marchent sans code en double. */
+  #tweakSlot {
     margin-top: auto;
     position: sticky;
     bottom: 0;
+    padding-top: 8px;
+    background: var(--bg-raised);
+    /* Sépare de la liste qui défile dessous, sans ajouter de filet. */
+    box-shadow: 0 -8px 10px -8px rgba(0, 0, 0, 0.6);
+  }
+  /* L'onglet du canal tweak garde la teinte de son emplacement, pour qu'on le
+     reconnaisse au même endroit qu'avant de l'avoir démarré. */
+  #tweakSlot .tab {
+    border: 1px solid var(--amber);
+    background: linear-gradient(var(--amber-soft), var(--amber-soft)), var(--bg-raised);
+  }
+  #tweakSlot .tab .name { color: var(--amber); }
+  #tweakCta {
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -385,13 +402,8 @@
     padding: 8px;
     border: 1px solid var(--amber);
     border-radius: 6px;
-    /* Empilé sur le fond de la colonne, PAS `var(--amber-soft)` seul : la carte
-       est sticky, et un fond translucide laisserait les onglets défiler au
-       travers. */
+    width: 100%;
     background: linear-gradient(var(--amber-soft), var(--amber-soft)), var(--bg-raised);
-    /* Ombre douce vers le haut : sépare la carte de la liste qui passe dessous,
-       sans ajouter de filet qui doublerait la bordure. */
-    box-shadow: 0 -8px 10px -8px rgba(0, 0, 0, 0.6);
   }
   #tweakCta .tweak-title {
     font-family: var(--mono);
@@ -404,10 +416,7 @@
   /* Aucune animation permanente : un élément qui clignote ici entrerait en
      concurrence avec les vrais signaux (onglet en attente, jauges) et
      deviendrait du bruit. */
-  #tweakCta:hover {
-    border-color: var(--amber);
-    box-shadow: 0 -8px 10px -8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(240, 168, 72, 0.18);
-  }
+  #tweakCta:hover { border-color: var(--amber); box-shadow: 0 0 12px rgba(240, 168, 72, 0.18); }
   #tweakCta:hover .tweak-arrow { transform: translateX(2px); }
   #tweakCta.busy { opacity: 0.7; cursor: default; }
   #tweakCta.failed { border-color: var(--err); background: transparent; }
@@ -1411,11 +1420,13 @@
     <div id="groups"></div>
     <button id="newTab" title="New agent">＋ new agent</button>
     <button id="newGroup" title="New agent group">＋ new group</button>
-    <button id="tweakCta" type="button"
-            title="Change shadok-ai itself — the agent works on a branch and opens a pull request">
-      <span class="tweak-title">🛠 Tweak Shadok-AI <span class="tweak-arrow">›</span></span>
-      <span class="tweak-sub">change the cockpit itself</span>
-    </button>
+    <div id="tweakSlot">
+      <button id="tweakCta" type="button"
+              title="Change shadok-ai itself — the agent works on a branch and opens a pull request">
+        <span class="tweak-title">🛠 Tweak Shadok-AI <span class="tweak-arrow">›</span></span>
+        <span class="tweak-sub">change the cockpit itself</span>
+      </button>
+    </div>
   </nav>
 
   <section class="chat-pane">
@@ -2209,7 +2220,9 @@
     e.dataTransfer.dropEffect = "move";
     if (dragTabEl) {
       const overTab = e.target.closest(".tab");
-      if (overTab && overTab !== dragTabEl) {
+      // L'emplacement du bas n'accueille QUE le canal tweak : sans ce garde, un
+      // onglet traîné au-dessus s'y insérerait et se retrouverait épinglé là.
+      if (overTab && overTab !== dragTabEl && !overTab.classList.contains("tweak")) {
         const r = overTab.getBoundingClientRect();
         const after = e.clientY > r.top + r.height / 2;
         overTab.parentNode.insertBefore(dragTabEl, after ? overTab.nextSibling : overTab);
@@ -2330,6 +2343,9 @@
     if (tab.reconnectTimer) clearTimeout(tab.reconnectTimer);
     if (tab.ws && tab.ws.readyState === WebSocket.OPEN) tab.ws.close();
     dropDraft(tab);
+    // Le canal tweak fermé, son emplacement redevient le CTA — sinon le bas de
+    // la colonne resterait vide et la fonctionnalité disparaîtrait sans retour.
+    if (tab.isTweak) document.getElementById("tweakCta").hidden = false;
     tab.btnEl.remove();
     tab.transcriptEl.remove();
     tabs = tabs.filter((t) => t !== tab);
@@ -2383,6 +2399,9 @@
         nt.draft = savedDrafts[c.sessionId] || "";
         if (c.branch) nt.branch = c.branch;
         nt.profile = c.profile || null;
+        // Un canal tweak né ailleurs (autre appareil, Telegram) reprend sa place
+        // en bas plutôt que d'apparaître comme un agent ordinaire de la liste.
+        if (nt.profile === "Shadok-Tweak" && !tweakTab()) markTweakTab(nt);
         setCrons(nt, c.crons);
         if (c.muted) setMuted(nt, true, false);
         if (typeof c.mirror === "boolean" ? c.mirror : !!c.telegram) setMirror(nt, true, false);
@@ -3139,7 +3158,12 @@
    *  of stranding the tab on "link lost". */
   function openLink(t) {
     setTabState(t, "connecting", t.reconnectAttempts ? "reconnecting…" : "connecting…");
-    const ws = new WebSocket(`ws://${location.host}/ws`);
+    // The scheme MUST follow the page's. On an HTTPS page — the cockpit behind an
+    // nginx/TLS reverse proxy — a `ws://` socket is blocked as mixed content, and
+    // the failure is invisible: the page is static HTML so it paints normally,
+    // while every channel stays stuck "connecting…" forever. Never hardcode `ws://`.
+    const scheme = location.protocol === "https:" ? "wss:" : "ws:";
+    const ws = new WebSocket(`${scheme}//${location.host}/ws`);
     t.ws = ws;
     ws.addEventListener("open", () => {
       t.reconnectAttempts = 0;
@@ -4598,6 +4622,13 @@
   // Un clic démarre un agent sur le code source de shadok-ai lui-même : le
   // dossier, le worktree et le rôle sont tous déjà décidés, donc un formulaire
   // ne ferait que demander d'approuver des choix qu'on ne peut pas juger.
+  //
+  // Le canal tweak est UNIQUE et vit dans son emplacement en bas de colonne : le
+  // CTA n'est visible que tant qu'il n'existe pas. Une fois lancé, son onglet
+  // prend la place du CTA — un `.tab` ordinaire simplement déplacé là, donc il
+  // hérite sans code en double des états, du menu contextuel, du rattachement
+  // Telegram, du renommage et de la fermeture.
+  const tweakSlot = $("tweakSlot");
   const tweakCta = $("tweakCta");
   const tweakTitle = tweakCta.querySelector(".tweak-title");
   const tweakSub = tweakCta.querySelector(".tweak-sub");
@@ -4619,8 +4650,26 @@
     }
   }
 
+  /** L'onglet du canal tweak, s'il existe. */
+  function tweakTab() { return tabs.find((t) => t.isTweak); }
+
+  /** Déplace l'onglet dans l'emplacement du bas et masque le CTA : à partir de
+   *  là, c'est LUI qu'on voit et qu'on clique. `appendChild` déplace le nœud,
+   *  donc l'onglet quitte la liste de gauche sans être recréé. */
+  function markTweakTab(t) {
+    t.isTweak = true;
+    t.btnEl.classList.add("tweak");
+    t.btnEl.draggable = false;       // il n'a pas à finir dans un groupe
+    tweakSlot.appendChild(t.btnEl);
+    tweakCta.hidden = true;
+  }
+
   tweakCta.addEventListener("click", async () => {
     if (tweakBusy) return;
+    // Ceinture : le CTA est masqué dès qu'un canal tweak existe, mais s'il
+    // réapparaissait on active l'existant plutôt que d'en ouvrir un second.
+    const already = tweakTab();
+    if (already) return activate(already);
     tweakBusy = true;
     setTweakCta("busy");
     let data;
@@ -4637,6 +4686,7 @@
     t.customName = true;             // launchTab ne nomme qu'un onglet qui n'a pas de nom
     t.nameEl.textContent = "tweak";
     t.profile = "Shadok-Tweak";
+    markTweakTab(t);
     launchTab(t, { cwd: data.cwd, worktree: true, profile: "Shadok-Tweak" });
   });
   newGroupBtn.addEventListener("click", () => {
@@ -4775,6 +4825,8 @@
         t.draft = savedDrafts[s.sessionId] || "";
         if (s.branch) t.branch = s.branch;
         t.profile = s.profile || null;
+        // Au rechargement, le canal tweak retrouve son emplacement du bas.
+        if (t.profile === "Shadok-Tweak" && !tweakTab()) markTweakTab(t);
         setCrons(t, s.crons);
         if (s.muted) setMuted(t, true, false); // restoring: don't push back
         // The mirror TOO, otherwise the first persist pushes `mirror:false`