shadok-ai 0.1.200 → 0.1.201

package/package.json

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

@@ -855,6 +855,11 @@
   #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
@@ -1077,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>
@@ -1310,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>
@@ -2315,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 : "");