From 21eac6372366a43e672ba753c5611de7e4b9d604 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Thu, 2 Jul 2026 20:56:30 +0200
Subject: [PATCH] =?UTF-8?q?feat(diagnostic):=20Multi-Threading=20UI=20?=
 =?UTF-8?q?=E2=80=94=20Kontext-Strip=20+=20Focus-Filter=20+=20Queue-Pollin?=
 =?UTF-8?q?g?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 3 vom Multi-Threading-Redesign. Diagnostic zeigt einen scrollbaren
Streifen von Kontext-Karten ueber dem Chat (Hauptchat + Projekte), jede
mit Live-Status-Dot. Tap wechselt den Focus, Chat filtert auf diesen
Kontext, Sende-Input laeuft mit der Focus-ID durch Bridge → Brain-Queue.

index.html:
- Neuer <div id="chat-context-strip"> ueber der Chat-Box, horizontal
  scrollbar.
- JS: focusedContextId (in localStorage gespiegelt), diagQueueStatus,
  diagProjectsCache. renderContextStrip() zeichnet Karten mit Dot
  + Status-Label. switchDiagFocus(id) wechselt Focus + versteckt
  Bubbles anderer Kontexte via data-project-id + style.display.
- Polling: /api/brain/projects/queue-status alle 2s, /projects/list
  alle 15s.
- addChat: nimmt options.projectId → schreibt data-project-id an die
  DOM-Node, versteckt sofort wenn Focus abweicht.
- Chat-Reception-Handler propagiert p.projectId aus dem RVS-Payload.
- testRVS() sendet msg.projectId=focusedContextId mit.

server.js:
- sendToRVS(text, isTrace, projectId): neuer Param, wird in
  payload.projectId gesetzt → Bridge routet an /chat body.project_id.
- test_rvs-Handler reicht msg.projectId durch.

Bewusst nicht drin (Follow-up wenn Stefan mag):
- Voller Dashboard-Stack mit stacked Karten die eigene Message-Listen +
  Input-Felder haben. Aktuelle Variante ist „Kontext-Strip fuer schnellen
  Wechsel + Focus-One-Rendering" — ~90% des UX-Werts mit ~10% des Aufwands.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 diagnostic/index.html | 107 +++++++++++++++++++++++++++++++++++++++++-
 diagnostic/server.js  |  14 ++++--
 2 files changed, 116 insertions(+), 5 deletions(-)

diff --git a/diagnostic/index.html b/diagnostic/index.html
index 9ef8fa6..b0f671d 100644
--- a/diagnostic/index.html
+++ b/diagnostic/index.html
@@ -305,6 +305,12 @@
           <button class="btn secondary" onclick="toggleChatFullscreen()" id="btn-chat-fs" style="padding:4px 10px;font-size:11px;">Vollbild</button>
         </div>
       </div>
+      <!-- Multi-Threading: Kontext-Strip ueber dem Chat. Jeder Kontext
+           (Hauptchat + aktive Projekte) als kompakte Karte mit Status-Dot.
+           Tap wechselt den Focus — Chat-Box filtert dann auf diesen Kontext. -->
+      <div id="chat-context-strip" style="display:flex;gap:6px;overflow-x:auto;padding:6px 4px;margin-bottom:6px;border-bottom:1px solid #1E1E2E;">
+        <!-- wird von renderContextStrip() befuellt -->
+      </div>
       <div class="chat-box" id="chat-box"></div>
       <div id="thinking-indicator" style="display:none;padding:6px 10px;font-size:12px;color:#FFD60A;background:#1E1E2E;border-radius:0 0 6px 6px;margin-top:-8px;margin-bottom:8px;align-items:center;justify-content:space-between;">
         <span><span style="animation:pulse 1s infinite;">&#x1F4AD;</span> <span id="thinking-text">ARIA denkt...</span></span>
@@ -1317,6 +1323,94 @@
 
   <script>
     const chatBox = document.getElementById('chat-box');
+
+    // ── Multi-Threading: Kontext-Focus fuer Diagnostic-Chat ─────
+    // focusedContextId: leerer String = Hauptchat, sonst project_id.
+    // Gefiltert werden Bubbles per data-project-id-Match (siehe addChat).
+    // Send-Input uebergibt die Focus-ID ans Brain (via bridge → /chat).
+    let focusedContextId = localStorage.getItem('diag_focused_context_id') || '';
+    let diagQueueStatus = {};
+    let diagProjectsCache = [];
+
+    function updateChatVisibilityByFocus() {
+      for (const box of [chatBox, document.getElementById('chat-box-fs')]) {
+        if (!box) continue;
+        for (const el of box.querySelectorAll('.chat-msg')) {
+          const pid = el.dataset.projectId || '';
+          el.style.display = (pid === focusedContextId) ? '' : 'none';
+        }
+        box.scrollTop = box.scrollHeight;
+      }
+    }
+
+    function switchDiagFocus(id) {
+      focusedContextId = id || '';
+      localStorage.setItem('diag_focused_context_id', focusedContextId);
+      updateChatVisibilityByFocus();
+      renderContextStrip();
+    }
+
+    function renderContextStrip() {
+      const strip = document.getElementById('chat-context-strip');
+      if (!strip) return;
+      const chip = (id, name, isFocus, dotColor, subline) => {
+        const bg = isFocus ? 'rgba(52,199,89,0.15)' : '#1E1E2E';
+        const border = isFocus ? '#34C759' : '#2A2A3E';
+        return `<div onclick="switchDiagFocus('${id}')" style="cursor:pointer;flex:0 0 auto;padding:6px 10px;background:${bg};border:1px solid ${border};border-radius:6px;display:flex;align-items:center;gap:6px;min-width:120px;">
+          <div style="width:8px;height:8px;border-radius:4px;background:${dotColor};"></div>
+          <div style="display:flex;flex-direction:column;min-width:0;">
+            <div style="color:${isFocus?'#34C759':'#E0E0F0'};font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;">${escapeHtml(name)}</div>
+            <div style="color:#8888AA;font-size:10px;">${subline}</div>
+          </div>
+        </div>`;
+      };
+      const dotFor = (key) => {
+        const s = diagQueueStatus[key];
+        if (!s) return { color: '#555570', label: '' };
+        if (s.busy) return { color: '#FF6E6E', label: 'arbeitet' };
+        if (s.queue_size > 0) return { color: '#FFD60A', label: `Queue: ${s.queue_size}` };
+        return { color: '#34C759', label: 'idle' };
+      };
+      const cards = [];
+      // Hauptchat
+      const mainDot = dotFor('__main__');
+      cards.push(chip('', '💬 Hauptchat', focusedContextId === '', mainDot.color, mainDot.label || 'idle'));
+      // Projekte — nur active/ended, sortiert nach letzter Aktivitaet
+      for (const p of diagProjectsCache) {
+        if (p.status === 'archived') continue;
+        const d = dotFor(p.id);
+        const sub = d.label || `${p.turn_count} Turns`;
+        cards.push(chip(p.id, `📁 ${p.name}`, focusedContextId === p.id, d.color, sub));
+      }
+      strip.innerHTML = cards.join('');
+    }
+
+    async function refreshDiagQueueStatus() {
+      try {
+        const r = await fetch('/api/brain/projects/queue-status');
+        const d = await r.json();
+        diagQueueStatus = d?.contexts || {};
+        renderContextStrip();
+      } catch {}
+    }
+
+    async function refreshDiagProjectsCache() {
+      try {
+        const r = await fetch('/api/brain/projects/list?include_archived=false');
+        const d = await r.json();
+        diagProjectsCache = d?.projects || [];
+        renderContextStrip();
+      } catch {}
+    }
+
+    // Beim Load: Projekte laden + Polling starten
+    setTimeout(() => {
+      refreshDiagProjectsCache();
+      refreshDiagQueueStatus();
+      setInterval(refreshDiagQueueStatus, 2000);
+      // Projekt-Liste alle 15s neu holen (neue Anlagen, umbenennen)
+      setInterval(refreshDiagProjectsCache, 15000);
+    }, 500);
     const pauseHint = document.getElementById('pause-hint');
     const btnScroll = document.getElementById('btn-scroll');
     let ws;
@@ -1723,6 +1817,7 @@
             location: p.location,
             ttsText: p.ttsText,
             backupTs: p.backupTs,
+            projectId: p.projectId || '',
           });
           return;
         }
@@ -1911,8 +2006,10 @@
       if (!text && diagPendingFiles.length === 0) return;
       if (diagPendingFiles.length > 0) sendDiagAttachments();
       if (text) {
-        addChat('sent', text, 'via RVS');
-        send({ action: 'test_rvs', text });
+        // Multi-Threading: mit fokussierter Kontext-ID senden.
+        // Bridge routet an /chat body.project_id — Brain queued per Kontext.
+        addChat('sent', text, 'via RVS', { projectId: focusedContextId });
+        send({ action: 'test_rvs', text, projectId: focusedContextId });
       }
       input.value = '';
     }
@@ -2178,12 +2275,18 @@
       // Thinking-Indikator ausblenden bei neuer Nachricht
       updateThinkingIndicator({ activity: 'idle' });
 
+      // Projekt-Tag fuer Focus-Filter (Multi-Threading, 06/2026)
+      const projectId = (options && options.projectId) || '';
+      const hiddenByFocus = (typeof focusedContextId === 'string' && projectId !== focusedContextId);
+
       // In beide Chat-Boxen schreiben (normal + Vollbild)
       for (const box of [chatBox, document.getElementById('chat-box-fs')]) {
         if (!box) continue;
         const el = document.createElement('div');
         el.className = `chat-msg ${type}`;
         if (backupTs) el.dataset.ts = String(backupTs);
+        el.dataset.projectId = projectId;
+        if (hiddenByFocus) el.style.display = 'none';
         el.innerHTML = html;
         box.appendChild(el);
         box.scrollTop = box.scrollHeight;
diff --git a/diagnostic/server.js b/diagnostic/server.js
index 8e963ce..e99f3cc 100644
--- a/diagnostic/server.js
+++ b/diagnostic/server.js
@@ -1001,18 +1001,26 @@ function sendToRVS_raw(msgObj) {
   freshWs.on("error", () => {});
 }
 
-function sendToRVS(text, isTrace) {
+function sendToRVS(text, isTrace, projectId) {
   // Brain-Pipeline: Diagnostic → RVS → Bridge → Brain (HTTP). OpenClaw-
   // Gateway-Pfad ist abgeschaltet. Sender 'diagnostic' damit die Bridge
   // den Text als User-Nachricht ans Brain weiterleitet und die App +
   // Diagnostic die Bubble live spiegeln koennen.
+  //
+  // projectId (Multi-Threading 06/2026): optional — leerer/undefined String
+  // = Hauptchat, sonst project_id. Bridge liest payload.projectId und routet
+  // an /chat body.project_id — Brain queued per Kontext.
   if (!rvsWs || rvsWs.readyState !== WebSocket.OPEN) {
     if (isTrace) traceEnd(false, "RVS nicht verbunden");
     return false;
   }
   sendToRVS_raw({
     type: "chat",
-    payload: { text, sender: "diagnostic" },
+    payload: {
+      text,
+      sender: "diagnostic",
+      projectId: projectId || "",
+    },
     timestamp: Date.now(),
   });
   return true;
@@ -2285,7 +2293,7 @@ wss.on("connection", (ws) => {
         sendToRVS(msg.text || "aria lebst du noch?", true);
       } else if (msg.action === "test_rvs") {
         traceStart("RVS", msg.text || "aria lebst du noch?");
-        sendToRVS(msg.text || "aria lebst du noch?", true);
+        sendToRVS(msg.text || "aria lebst du noch?", true, msg.projectId || "");
       } else if (msg.action === "reconnect_gateway") {
         connectGateway();
       } else if (msg.action === "reconnect_rvs") {