feat(diagnostic): Multi-Threading UI — Kontext-Strip + Focus-Filter + Queue-Polling
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>
This commit is contained in:
+105
-2
@@ -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;">💭</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;
|
||||
|
||||
+11
-3
@@ -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") {
|
||||
|
||||
Reference in New Issue
Block a user