shadok-ai 0.1.199 → 0.1.201

package/package.json

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

package/public/index.html

@@ -426,20 +426,6 @@
      dépasse (quand une session tourne, le transcript remplit exactement → inerte). */
   .chat-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
 
-  /* Start screen */
-  #setup {
-    margin: auto;
-    width: min(520px, 92vw);
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    background: var(--bg-raised);
-    padding: 28px;
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-  }
-  #setup h1 { font-family: var(--mono); font-size: 16px; color: var(--amber); font-weight: 500; }
-  #setup p.hint { color: var(--text-dim); font-size: 13px; line-height: 1.5; }
   .field { display: flex; flex-direction: column; gap: 6px; }
   input[type="text"] {
     font-family: var(--mono);
@@ -852,7 +838,6 @@
   /* Interactive terminal (xterm.js), per channel, filling the main area. Toggled
      by ⌨️; when on, .chat-pane gets .terminal-mode → chat hidden, terminal shown. */
   #terminalView { flex: 1; min-height: 0; display: none; flex-direction: column; }
-  .chat-pane.terminal-mode #setup,
   .chat-pane.terminal-mode #transcripts,
   .chat-pane.terminal-mode #thinking,
   .chat-pane.terminal-mode #composer { display: none !important; }
@@ -870,8 +855,26 @@
   #chanBar button.icon { padding: 4px 8px; font-size: 14px; line-height: 1; letter-spacing: 0; }
   #chanBar button.icon.stop:hover { border-color: var(--err); color: var(--err); }
   #chanBar button.icon.on { border-color: var(--amber); color: var(--amber); background: rgba(240, 168, 72, 0.15); }
+  /* Status / Directory / Session / Branch : inline & compact, so the channel
+     header stays a thin single line. */
+  #chanBar .gauge { flex-direction: row; align-items: baseline; gap: 4px; }
+  #chanBar .gauge .label { font-size: 10px; }
+  #chanBar #cwdView { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
   #xtermHost { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px; }
   #xtermHost .xterm { height: 100%; }
+  /* Aucun agent ouvert. Le panneau central n'affiche plus un formulaire à demi
+     rempli d'avance : il invite à agir, et rien d'autre. */
+  #emptyState {
+    flex: 1; min-height: 0; display: none;
+    flex-direction: column; align-items: center; justify-content: center;
+    gap: 12px; padding: 32px; text-align: center;
+  }
+  #emptyState.visible { display: flex; }
+  #emptyState .es-title {
+    font-family: var(--mono); font-size: 12px;
+    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
+  }
+  #emptyState .es-hint { color: var(--text-dim); font-size: 13px; line-height: 1.5; max-width: 44ch; }
   .keys {
     display: flex;
     gap: 6px;
@@ -978,8 +981,78 @@
   @media (max-width: 900px) {
     #machine, #diffpanel { position: fixed; inset: 0; width: auto; max-width: none; z-index: 10; border-left: none; }
   }
-  #secretsOverlay, #profilesOverlay, #telegramOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
-  #secretsPanel, .sec-panel { background: var(--panel, #1b1d22); color: var(--fg, #e8e8ea); width: min(520px, 92vw); max-height: 80vh; overflow: auto; border-radius: 10px; padding: 16px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
+  /* ── Popins ───────────────────────────────────────────────
+     UNE CLASSE, pas une liste d'ids. La règle nommait
+     #secretsOverlay/#profilesOverlay/#telegramOverlay ; le panneau des crons,
+     ajouté après, n'y figurait pas — il s'affichait donc dans le flux de la page
+     au lieu de se centrer. Toute popin hérite maintenant du comportement en
+     portant `.overlay`, il n'y a plus de liste à ne pas oublier. */
+  .overlay {
+    position: fixed; inset: 0; z-index: 50;
+    display: flex; align-items: center; justify-content: center;
+    padding: 24px;
+    background: rgba(8, 9, 13, 0.62);
+    backdrop-filter: blur(2px);
+  }
+  .overlay[hidden] { display: none; }
+  /* Le panneau était hors palette : #1b1d22 au lieu de --bg-raised, #e8e8ea au
+     lieu de --text, des bordures rgba(255,255,255,.15) et un rayon de 10px quand
+     tout le cockpit est à 6 — soit un gris et un blanc qui n'existaient nulle
+     part ailleurs. Le filet ambre en haut reprend la grammaire des instruments
+     (bord de l'onglet actif, ⌨️ allumé) : ce panneau est au premier plan. */
+  #secretsPanel, .sec-panel {
+    background: var(--bg-raised); color: var(--text);
+    width: min(560px, 100%); max-height: min(80vh, 760px); overflow: auto;
+    border: 1px solid var(--line); border-top: 1px solid var(--amber);
+    border-radius: 6px; padding: 14px 16px;
+    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
+  }
+  /* Squelette entête / corps / pied. Seul le CORPS défile, donc l'action
+     principale reste atteignable : le formulaire de création dépasse l'écran sur
+     un portable, et son bouton « Start » se trouvait en bas d'une page à
+     dérouler. Réservé aux popins qui ont un pied — les autres gardent leur
+     rembourrage simple. */
+  .sec-panel.modal { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+  .modal > .sec-head {
+    flex: 0 0 auto; margin: 0; padding: 11px 16px;
+    border-bottom: 1px solid var(--line);
+  }
+  /* Même traitement que les libellés du cockpit (.label, barre du canal) : la
+     popin appartient visiblement à la même famille. */
+  .modal > .sec-head strong {
+    font-family: var(--mono); font-size: 11px; font-weight: normal;
+    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
+  }
+  .modal > .sec-head strong .obj { color: var(--amber); }
+  .modal-body { flex: 1 1 auto; overflow: auto; padding: 14px 16px; }
+  .modal-foot {
+    flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end;
+    gap: 8px; padding: 11px 16px;
+    border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.18);
+  }
+  /* Pousse ce qui suit à droite : un pied peut porter une note à gauche. */
+  .modal-foot .foot-note { margin-right: auto; font-size: 11px; color: var(--text-dim); }
+  .sec-panel :focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
+  /* Les <select> et les champs numériques n'étaient couverts par aucune règle :
+     ils tombaient sur le rendu par défaut du navigateur — clair — au milieu d'un
+     panneau sombre. */
+  .sec-panel select, .sec-panel input[type=number], .sec-panel input[type=time] {
+    padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line);
+    background: rgba(0, 0, 0, 0.25); color: inherit; font-family: inherit; font-size: inherit;
+  }
+  /* Une précision dans un libellé ne SE CRIE PAS : `.label` met en majuscules et
+     espace les lettres, ce qui rendait une phrase entière illisible. */
+  .label .check-hint { text-transform: none; letter-spacing: normal; font-weight: normal; }
+  #cronList { list-style: none; padding: 0; margin: 0 0 14px; }
+  #cronList li { padding: 6px 8px; border-radius: 6px; }
+  #cronList li:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
+  .cron-form { border-top: 1px solid var(--line); padding-top: 12px; }
+  .cron-form .field { margin: 12px 0; }
+  .cron-form .field:last-child { margin-bottom: 0; }
+  /* `.field` est en colonne : sans redresser la direction ici, les trois champs
+     s'empilaient — et `align-items: center` les centrait au lieu de les aligner. */
+  .cron-when { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .cron-when input[type=number] { width: 76px; }
   .sec-panel .field { margin: 8px 0; }
   .sec-panel textarea, .sec-panel input[type=text], .sec-panel input:not([type]) { width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.25); color: inherit; font-family: inherit; }
   #profilesList { list-style: none; padding: 0; margin: 0 0 8px; }
@@ -1009,22 +1082,6 @@
 
 <header>
   <span class="brand">shadok-ai <span class="ver" id="verView" title="running version"></span></span>
-  <div class="gauge">
-    <span class="label">Status</span>
-    <span class="value"><span id="led" class="led"></span><span id="state">—</span></span>
-  </div>
-  <div class="gauge">
-    <span class="label">Directory</span>
-    <span class="value" id="cwdView">—</span>
-  </div>
-  <div class="gauge">
-    <span class="label">Session</span>
-    <span class="value" id="sessionView">—</span>
-  </div>
-  <div class="gauge" id="branchGauge" hidden>
-    <span class="label">Branch</span>
-    <span class="value" id="branchView">—</span>
-  </div>
   <span class="spacer"></span>
   <div class="gauge quota" id="quota5h" title="5-hour rolling limit">
     <span class="label">5h</span>
@@ -1059,7 +1116,7 @@
   <div class="vm-hint" id="vmModeHint"></div>
 </div>
 
-<div id="secretsOverlay" hidden>
+<div id="secretsOverlay" class="overlay" hidden>
   <div id="secretsPanel">
     <div class="sec-head">
       <strong>Secret vault</strong>
@@ -1075,36 +1132,106 @@
   </div>
 </div>
 
-<div id="cronOverlay" hidden>
-  <div id="secretsPanel">
+<div id="cronOverlay" class="overlay" hidden>
+  <!-- Le panneau portait id="secretsPanel" — un id en DOUBLON de la vraie popin
+       des secrets, donc $("secretsPanel") pouvait tomber sur le mauvais. -->
+  <div id="cronPanel" class="sec-panel modal">
     <div class="sec-head">
-      <strong>⏰ Schedule — <span id="cronChanName">this agent</span></strong>
+      <strong>⏰ Schedule — <span class="obj" id="cronChanName">this agent</span></strong>
       <button id="cronClose" title="Close">✕</button>
     </div>
-    <p class="sec-note">Scheduled prompts sent to <b>this agent</b> on a timer (monitoring, reporting…). The server fires them even when nobody's watching; results land here and in Telegram. Times are server-local. <b>Tip:</b> just ask the agent (« surveille X chaque matin et alerte si Y ») — it writes the check and schedules it. Or set one manually:</p>
-    <ul id="cronList"></ul>
-    <form id="cronAdd">
-      <textarea id="cronPrompt" rows="2" placeholder="Prompt to run when there's news, e.g. « Rédige une alerte à partir de l'anomalie détectée »" style="width:100%;box-sizing:border-box"></textarea>
-      <input id="cronCheck" placeholder="Check command (optional) — silent = nothing to report → 0 tokens" autocomplete="off" spellcheck="false" style="width:100%;box-sizing:border-box;margin-top:6px" />
-      <div class="field" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px">
-        <select id="cronKind">
-          <option value="interval">Every…</option>
-          <option value="daily">Daily at…</option>
-        </select>
-        <span id="cronIntervalFields">
-          <input id="cronEvery" type="number" min="1" value="60" style="width:70px">
-          <select id="cronUnit"><option value="1">minutes</option><option value="60">hours</option></select>
-        </span>
-        <span id="cronDailyFields" hidden>
-          <input id="cronTime" type="time" value="09:00">
-        </span>
-        <button type="submit" class="primary">Add schedule</button>
-      </div>
-    </form>
+    <div class="modal-body">
+      <p class="sec-note">Prompts sent to this agent on a timer — monitoring, reporting. The server fires them even when nobody's watching; answers land here and in Telegram.</p>
+      <p class="sec-note"><b>Simplest way:</b> just ask the agent — « surveille X chaque matin et alerte-moi si Y ». It writes the check and schedules it itself.</p>
+      <ul id="cronList"></ul>
+      <form id="cronAdd" class="cron-form">
+        <div class="field">
+          <span class="label">Prompt to run</span>
+          <textarea id="cronPrompt" rows="2" placeholder="e.g. « Rédige une alerte à partir de l'anomalie détectée »"></textarea>
+        </div>
+        <div class="field">
+          <span class="label">Check command <span class="check-hint">— optional; prints nothing = nothing to report, and the agent stays asleep (0 tokens)</span></span>
+          <input id="cronCheck" placeholder="e.g. ~/scripts/check-budget.sh" autocomplete="off" spellcheck="false" />
+        </div>
+        <div class="field cron-when">
+          <select id="cronKind" aria-label="How often">
+            <option value="interval">Every…</option>
+            <option value="daily">Daily at…</option>
+          </select>
+          <span id="cronIntervalFields">
+            <input id="cronEvery" type="number" min="1" value="60" aria-label="Interval">
+            <select id="cronUnit" aria-label="Unit"><option value="1">minutes</option><option value="60">hours</option></select>
+          </span>
+          <span id="cronDailyFields" hidden>
+            <input id="cronTime" type="time" value="09:00" aria-label="Time of day">
+          </span>
+        </div>
+      </form>
+    </div>
+    <div class="modal-foot">
+      <span class="foot-note" id="cronTzNote"></span>
+      <button type="submit" form="cronAdd" class="primary">Add schedule</button>
+    </div>
   </div>
 </div>
 
-<div id="profilesOverlay" hidden>
+<div id="setupOverlay" class="overlay" hidden>
+  <div id="setupPanel" class="sec-panel modal">
+    <div class="sec-head">
+      <strong>New <span class="obj">agent</span></strong>
+      <button id="setupClose" title="Close">✕</button>
+    </div>
+    <div class="modal-body">
+          <p class="sec-note">A real Claude Code session, driven inside a pseudo-terminal. Open as many as you want Claudes working in parallel.</p>
+        <div class="field" id="profileField">
+          <div class="field-head">
+            <span class="label">Which agent?</span>
+            <button type="button" class="linkish" id="editProfilesLink" title="Create or edit agent profiles">✎ edit profiles</button>
+          </div>
+          <div id="profileGrid" role="radiogroup" aria-label="Agent profile"></div>
+          <span class="check-hint" id="profileNaNote" hidden>Applies to new sessions only.</span>
+        </div>
+        <div class="field">
+          <span class="label">Working directory</span>
+          <input type="text" id="cwdInput" placeholder="/path/to/project">
+        </div>
+        <label class="check" id="worktreeField">
+          <input type="checkbox" id="worktreeInput" checked>
+          <span>Isolate in a git worktree <span class="check-hint">— the agent edits a fresh branch; review &amp; merge from the Diff panel. Auto-removed on close if unused, kept if it has changes. (new sessions only)</span></span>
+        </label>
+        <details class="fold" id="advancedField">
+          <summary>Advanced — resume an existing session</summary>
+          <div class="field">
+            <div class="radio-row">
+              <label><input type="radio" name="mode" value="new" checked> new session</label>
+              <label><input type="radio" name="mode" value="continue"> latest in directory</label>
+              <label><input type="radio" name="mode" value="resume"> by id</label>
+            </div>
+          </div>
+          <div class="field" id="resumeField" hidden>
+            <span class="label">Session id</span>
+            <input type="text" id="resumeInput" placeholder="5fe046dd-…">
+            <span class="label">Sessions in this directory</span>
+            <div class="session-list" id="sessionList"></div>
+          </div>
+        </details>
+        <details class="fold" id="recoverField" hidden>
+          <summary>Reopen a past session <span class="fold-count" id="recoverCount"></span></summary>
+          <div class="recover-list" id="recoverList"></div>
+        </details>
+        <details class="fold" id="liveField" hidden>
+          <summary>Agents running now <span class="fold-count" id="liveCount"></span></summary>
+          <div class="recover-list" id="liveList"></div>
+        </details>
+    </div>
+    <div class="modal-foot">
+      <button id="setupCancel">Cancel</button>
+      <button class="primary" id="startBtn">Start agent</button>
+    </div>
+  </div>
+</div>
+
+<div id="profilesOverlay" class="overlay" hidden>
   <div id="profilesPanel" class="sec-panel">
     <div class="sec-head">
       <strong>Agent profiles</strong>
@@ -1127,7 +1254,7 @@
   </div>
 </div>
 
-<div id="telegramOverlay" hidden>
+<div id="telegramOverlay" class="overlay" hidden>
   <div id="telegramPanel" class="sec-panel">
     <div class="sec-head">
       <strong>Telegram bot</strong>
@@ -1172,6 +1299,22 @@
          séparé, donc ses actions n'ont pas de raison d'apparaître avec lui. -->
     <div id="chanBar" hidden>
       <span class="label" id="chanBarName"></span>
+      <div class="gauge">
+        <span class="label">Status</span>
+        <span class="value"><span id="led" class="led"></span><span id="state">—</span></span>
+      </div>
+      <div class="gauge">
+        <span class="label">Directory</span>
+        <span class="value" id="cwdView">—</span>
+      </div>
+      <div class="gauge">
+        <span class="label">Session</span>
+        <span class="value" id="sessionView">—</span>
+      </div>
+      <div class="gauge" id="branchGauge" hidden>
+        <span class="label">Branch</span>
+        <span class="value" id="branchView">—</span>
+      </div>
       <span class="chan-actions">
         <button id="chanCron" class="icon" title="Scheduled prompts for this agent (monitoring / reporting)">⏰</button>
         <button id="chanStop" class="icon stop" title="End session">⏹️</button>
@@ -1179,52 +1322,13 @@
       </span>
     </div>
 
-    <div id="setup" hidden>
-      <h1>New agent</h1>
-      <p class="hint">Starts a real Claude Code session, driven inside a
-      pseudo-terminal. Each agent is an independent session — open as many
-      agents as you want Claudes working in parallel.</p>
-      <div class="field" id="profileField">
-        <div class="field-head">
-          <span class="label">Which agent?</span>
-          <button type="button" class="linkish" id="editProfilesLink" title="Create or edit agent profiles">✎ edit profiles</button>
-        </div>
-        <div id="profileGrid" role="radiogroup" aria-label="Agent profile"></div>
-        <span class="check-hint" id="profileNaNote" hidden>Applies to new sessions only.</span>
-      </div>
-      <div class="field">
-        <span class="label">Working directory</span>
-        <input type="text" id="cwdInput" placeholder="/path/to/project">
-      </div>
-      <label class="check" id="worktreeField">
-        <input type="checkbox" id="worktreeInput" checked>
-        <span>Isolate in a git worktree <span class="check-hint">— the agent edits a fresh branch; review &amp; merge from the Diff panel. Auto-removed on close if unused, kept if it has changes. (new sessions only)</span></span>
-      </label>
-      <details class="fold" id="advancedField">
-        <summary>Advanced — resume an existing session</summary>
-        <div class="field">
-          <div class="radio-row">
-            <label><input type="radio" name="mode" value="new" checked> new session</label>
-            <label><input type="radio" name="mode" value="continue"> latest in directory</label>
-            <label><input type="radio" name="mode" value="resume"> by id</label>
-          </div>
-        </div>
-        <div class="field" id="resumeField" hidden>
-          <span class="label">Session id</span>
-          <input type="text" id="resumeInput" placeholder="5fe046dd-…">
-          <span class="label">Sessions in this directory</span>
-          <div class="session-list" id="sessionList"></div>
-        </div>
-      </details>
-      <details class="fold" id="recoverField" hidden>
-        <summary>Reopen a past session <span class="fold-count" id="recoverCount"></span></summary>
-        <div class="recover-list" id="recoverList"></div>
-      </details>
-      <details class="fold" id="liveField" hidden>
-        <summary>Agents running now <span class="fold-count" id="liveCount"></span></summary>
-        <div class="recover-list" id="liveList"></div>
-      </details>
-      <button class="primary" id="startBtn">Start agent</button>
+    <!-- Aucun agent : une invitation, pas un formulaire pré-rempli. La création
+         se fait dans une popin (#setupOverlay) et ne crée le canal qu'à la
+         validation — ouvrir puis renoncer ne laisse plus d'onglet mort-né. -->
+    <div id="emptyState">
+      <span class="es-title">No agent open</span>
+      <p class="es-hint">Each agent is its own Claude Code session, working on its own directory. Start one and it takes the controls.</p>
+      <button class="primary" id="emptyNewBtn">＋ new agent</button>
     </div>
 
     <div id="transcripts"></div>
@@ -1299,7 +1403,7 @@
   const $ = (id) => document.getElementById(id);
   const tabbar = $("tabbar"), newTabBtn = $("newTab"), newGroupBtn = $("newGroup");
   const ungroupedEl = $("ungrouped"), groupsEl = $("groups");
-  const setup = $("setup"), transcripts = $("transcripts"), thinking = $("thinking");
+  const transcripts = $("transcripts"), thinking = $("thinking");
   const composer = $("composer"), promptInput = $("promptInput"), sendBtn = $("sendBtn");
   const machine = $("machine"), screenEl = $("screen");
 
@@ -1315,7 +1419,7 @@
     .then((r) => r.json())
     .then((d) => {
       serverCwd = d.cwd || "";
-      if (active && active.status === "setup" && !$("cwdInput").value) refreshChrome();
+      if (!$("setupOverlay").hidden && !$("cwdInput").value) $("cwdInput").value = serverCwd || "";
     })
     .catch(() => {});
 
@@ -1915,7 +2019,8 @@
     refreshTitle();
     if (active === tab) {
       if (tabs.length) activate(tabs[tabs.length - 1]);
-      else createTab();
+      // Plus aucun agent : l'invitation, pas un onglet « setup » fantôme.
+      else { active = null; refreshChrome(); }
     }
   }
 
@@ -2126,9 +2231,38 @@
     refreshBadge();
   }
 
-  /** Keeps header, setup, composer and engine room in sync with the active channel. */
+  /**
+   * Keeps header, composer, channel bar and engine room in sync with the active
+   * channel — ou avec l'ABSENCE de canal.
+   *
+   * `active` peut désormais être nul : la création vit dans une popin et ne crée
+   * plus d'onglet « setup » d'avance, donc fermer le dernier agent ne laisse plus
+   * un formulaire à la place. Tout ce qui décrit un canal retombe alors sur « — »
+   * et le panneau central montre l'invitation.
+   */
   function refreshChrome() {
     const t = active;
+    if (!t) {
+      $("led").className = "led ";
+      $("state").textContent = "no agent";
+      $("cwdView").textContent = "—";
+      $("sessionView").textContent = "—";
+      $("sessionView").title = "";
+      $("branchGauge").hidden = true;
+      composer.hidden = true;
+      $("chanBar").hidden = true;
+      thinking.classList.remove("visible");
+      screenEl.textContent = "";
+      // Programmer ou arrêter n'a pas de cible : mieux vaut des boutons éteints
+      // qu'une popin qui parle d'un agent inexistant.
+      $("cronBtn").disabled = true;
+      $("stopBtn").disabled = true;
+      $("emptyState").classList.add("visible");
+      return;
+    }
+    $("emptyState").classList.remove("visible");
+    $("cronBtn").disabled = !t.sessionId;
+    $("stopBtn").disabled = false;
     $("led").className = "led " +
       ({ setup: "", connecting: "busy", ready: "on", busy: "busy", dead: "off" }[t.status]);
     $("state").textContent = t.stateText;
@@ -2139,33 +2273,14 @@
     $("sessionView").title = t.sessionId || "";
     $("branchGauge").hidden = !t.branch;
     $("branchView").textContent = t.branch || "—";
-    setup.hidden = t.status !== "setup";
-    composer.hidden = t.status === "setup";
-    // La barre du canal accompagne les deux vues, mais pas le formulaire « New
-    // agent » : il n'y a pas encore de canal à programmer, arrêter ou ouvrir en
-    // terminal. Le nom vit ici (et non dans syncTerm) pour qu'un renommage ou un
-    // changement de canal le mette à jour même terminal fermé.
-    $("chanBar").hidden = t.status === "setup";
+    composer.hidden = false;
+    // La barre du canal accompagne les deux vues du canal.
+    $("chanBar").hidden = false;
     $("chanBarName").textContent = t.nameEl ? t.nameEl.textContent : "";
     $("chanBarName").title = t.cwd || "";
     sendBtn.disabled = t.status !== "ready" || !!t.pendingChoices;
     thinking.classList.toggle("visible", t.status === "busy");
     screenEl.textContent = t.screenText;
-    if (t.status === "setup") {
-      // Only pre-fill when empty — never clobber what the user is typing.
-      if (!$("cwdInput").value) {
-        $("cwdInput").value =
-          t.cwd || localStorage.getItem("cp.cwd") || serverCwd || "";
-      }
-      const last = localStorage.getItem("cp.session");
-      if (last && !$("resumeInput").value) $("resumeInput").value = last;
-      $("startBtn").disabled = false;
-      // refreshChrome tourne souvent : on ne rappelle la mémoire qu'au premier
-      // passage sur CET onglet, sinon on écraserait le choix de l'utilisateur.
-      if (profileTab !== t) { profileTab = t; profileTouched = false; applyRememberedProfile(); }
-      refreshRecoverList();
-      refreshLiveList();
-    }
   }
 
   /** Paints a channel's context-window usage bar + tiny number in its tab. */
@@ -2205,12 +2320,32 @@
     return el;
   }
 
+  /** Temps relatif compact : "now" / "3m ago" / "2h ago" / "5d ago". */
+  function relTime(ts) {
+    const s = Math.max(0, (Date.now() - ts) / 1000);
+    if (s < 45) return "now";
+    const m = Math.round(s / 60);
+    if (m < 60) return m + "m ago";
+    const h = Math.round(m / 60);
+    if (h < 24) return h + "h ago";
+    return Math.round(h / 24) + "d ago";
+  }
+  /** (Re)pose l'heure relative du dernier message sur l'onglet. */
+  function renderLastAt(tab) {
+    if (!tab.lastAtEl) return;
+    if (!Number.isFinite(tab.lastMsgAt)) { tab.lastAtEl.textContent = ""; return; }
+    tab.lastAtEl.textContent = relTime(tab.lastMsgAt);
+    tab.lastAtEl.title = new Date(tab.lastMsgAt).toLocaleString();
+  }
+  // Le relatif vieillit tout seul : on rafraîchit tous les onglets périodiquement.
+  setInterval(() => { for (const t of tabs) renderLastAt(t); }, 30000);
+
   function addTurn(tab, role, who, text, extraClass, at) {
-    // Heure du dernier message dans la liste des canaux (HH:MM, discret). Chaque
-    // message (historique rejoué ou live) porte `at` ; le dernier gagne.
-    if (Number.isFinite(at) && tab.lastAtEl) {
+    // Heure du dernier message dans la liste des canaux, en relatif (« 3m ago »).
+    // Chaque message (historique rejoué ou live) porte `at` ; le dernier gagne.
+    if (Number.isFinite(at)) {
       tab.lastMsgAt = at;
-      tab.lastAtEl.textContent = new Date(at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+      renderLastAt(tab);
     }
     const turn = document.createElement("div");
     turn.className = "turn " + role + (extraClass ? " " + extraClass : "");
@@ -2778,9 +2913,33 @@
     }
   }
 
-  function startActiveTab() {
-    const t = active;
-    if (t.status !== "setup") return;
+  /**
+   * Ouvre la popin de création. Elle ne crée RIEN : l'onglet naît au « Start
+   * agent » (cf. startNewAgent). Ouvrir puis renoncer ne laissait auparavant pas
+   * seulement un onglet mort-né — il devenait le canal actif, avec son formulaire
+   * à la place de la conversation qu'on regardait.
+   */
+  function openSetup() {
+    // Ne jamais écraser ce qui est déjà tapé (la popin peut se rouvrir).
+    if (!$("cwdInput").value) {
+      $("cwdInput").value = (active && active.cwd) || localStorage.getItem("cp.cwd") || serverCwd || "";
+    }
+    const last = localStorage.getItem("cp.session");
+    if (last && !$("resumeInput").value) $("resumeInput").value = last;
+    $("startBtn").disabled = false;
+    // Le profil retenu n'est rappelé qu'à l'OUVERTURE : rappelé en continu, il
+    // écraserait le choix en cours de saisie.
+    profileTouched = false;
+    applyRememberedProfile();
+    refreshRecoverList();
+    refreshLiveList();
+    $("setupOverlay").hidden = false;
+    $("cwdInput").focus();
+  }
+  function closeSetup() { $("setupOverlay").hidden = true; }
+
+  /** Valide le formulaire → C'EST ICI que le canal est créé, et pas avant. */
+  function startNewAgent() {
     const cwd = $("cwdInput").value.trim();
     const mode = document.querySelector('input[name="mode"]:checked').value;
     const msg = { cwd };
@@ -2797,7 +2956,9 @@
       if (cwd) localStorage.setItem("cp.profile:" + cwd, selectedProfile);
     }
     $("startBtn").disabled = true;
-    launchTab(t, msg);
+    closeSetup();
+    // createTab active l'onglet créé ; launchTab ouvre le lien.
+    launchTab(createTab(), msg);
   }
 
   // ── Version display + auto-reload ─────────────────────────────────────────
@@ -3189,13 +3350,17 @@
   }
 
   // ── Controls ────────────────────────────────────────────
-  $("startBtn").addEventListener("click", startActiveTab);
+  $("startBtn").addEventListener("click", startNewAgent);
+  $("setupClose").addEventListener("click", closeSetup);
+  $("setupCancel").addEventListener("click", closeSetup);
+  $("setupOverlay").addEventListener("click", (e) => { if (e.target === $("setupOverlay")) closeSetup(); });
+  $("emptyNewBtn").addEventListener("click", openSetup);
   document.querySelectorAll('input[name="mode"]').forEach((r) =>
     r.addEventListener("change", () => {
       const mode = document.querySelector('input[name="mode"]:checked').value;
       const isNew = mode === "new";
       $("resumeField").hidden = mode !== "resume";
-      // Profil et worktree ne valent que pour une session neuve : startActiveTab
+      // Profil et worktree ne valent que pour une session neuve : startNewAgent
       // les ignore déjà en resume/continue, l'UI cesse simplement de le cacher.
       $("profileField").classList.toggle("na", !isNew);
       $("profileNaNote").hidden = isNew;
@@ -3213,7 +3378,7 @@
   // Agents can appear while the setup screen sits open (pilotctl spawns one,
   // another tab starts one) — keep the list current without a reload.
   setInterval(() => {
-    if (active && active.status === "setup") refreshLiveList();
+    if (!$("setupOverlay").hidden) refreshLiveList();
   }, 5000);
 
   function submitPrompt(t, text, force) {
@@ -3323,6 +3488,7 @@
   }
   promptInput.addEventListener("input", () => {
     autosizePrompt();
+    if (!active) return; // aucun agent : le composer est masqué, mais pas de crash gratuit
     active.draft = promptInput.value;
     persistDraft(active);
   });
@@ -3452,7 +3618,7 @@
   $("refreshDiff").addEventListener("click", loadDiff);
   document.querySelectorAll(".keys button[data-key]").forEach((b) =>
     b.addEventListener("click", () => {
-      if (active.ws) active.ws.send(JSON.stringify({ type: "key", key: b.dataset.key }));
+      if (active && active.ws) active.ws.send(JSON.stringify({ type: "key", key: b.dataset.key }));
     })
   );
   // La touche Échap envoie esc à la session active (comme le bouton Esc de
@@ -3469,6 +3635,9 @@
     // 1. Overlays / panneaux ouverts → fermer, pas d'esc.
     if (!$("secretsOverlay").hidden) { $("secretsOverlay").hidden = true; e.preventDefault(); return; }
     if (!$("profilesOverlay").hidden) { closeProfilesPanel(); e.preventDefault(); return; }
+    if (!$("setupOverlay").hidden) { closeSetup(); e.preventDefault(); return; }
+    if (!$("cronOverlay").hidden) { $("cronOverlay").hidden = true; e.preventDefault(); return; }
+    if (!$("telegramOverlay").hidden) { $("telegramOverlay").hidden = true; e.preventDefault(); return; }
     if ($("diffpanel").classList.contains("open")) { $("diffpanel").classList.remove("open"); e.preventDefault(); return; }
     // 2. Dialogue clickable en attente de réponse → ne rien faire.
     if (active && active.dialogBubble) return;
@@ -3488,11 +3657,11 @@
     }
   });
   $("settleBtn").addEventListener("click", () => {
-    if (active.ws && active.status === "ready")
+    if (active && active.ws && active.status === "ready")
       active.ws.send(JSON.stringify({ type: "settle" }));
   });
   $("stopBtn").addEventListener("click", () => {
-    if (active.ws) active.ws.send(JSON.stringify({ type: "stop" }));
+    if (active && active.ws) active.ws.send(JSON.stringify({ type: "stop" }));
   });
 
   // ── Secret vault panel (central, global; profiles pick which to inject) ──
@@ -3577,8 +3746,23 @@
     if (s.kind === "interval") return s.everyMin % 60 === 0 ? "every " + (s.everyMin / 60) + "h" : "every " + s.everyMin + "m";
     return "daily at " + String(s.hour).padStart(2, "0") + ":" + String(s.minute).padStart(2, "0");
   }
+  /**
+   * Fuseau réellement appliqué aux horaires quotidiens, dans le pied de la popin.
+   * Le panneau annonçait « Times are server-local », ce qui ne dit pas 9h OÙ —
+   * or le serveur peut tourner dans un autre fuseau que le navigateur.
+   */
+  async function showCronTz() {
+    const el = $("cronTzNote");
+    el.textContent = "";
+    try {
+      const tz = await (await fetch("/timezone")).json();
+      const zone = tz.timezone || tz.system;
+      if (zone) el.textContent = "Daily times run in " + zone;
+    } catch { /* la popin marche très bien sans cette note */ }
+  }
   async function renderCrons() {
     const ul = $("cronList"); ul.innerHTML = "";
+    showCronTz();
     $("cronChanName").textContent = (active && (active.name || (active.sessionId || "").slice(0, 8))) || "no agent";
     if (!active || !active.sessionId) { ul.innerHTML = '<li><span style="opacity:.6">Open an agent to schedule prompts.</span></li>'; return; }
     let all = [];
@@ -3937,7 +4121,7 @@
     el.value = "";
   });
 
-  newTabBtn.addEventListener("click", () => createTab());
+  newTabBtn.addEventListener("click", openSetup);
   newGroupBtn.addEventListener("click", () => {
     createGroup();
     persistGroups();
@@ -4086,7 +4270,9 @@
         if (i !== targetIdx) launchTab(pending[i].t, pending[i].msg);
       }
     } else {
-      createTab();
+      // Rien à restaurer : l'invitation. Le formulaire ne s'ouvre pas de force —
+      // on peut aussi arriver là pour regarder, ou lancer depuis Telegram.
+      refreshChrome();
       // Nothing to restore: enable persistence for user actions, but do NOT
       // push a blank list (a failed /channels fetch must never wipe the store).
       restoring = false;