customable/claude-mem

Fork 0

Add queue status indicator to UI header #275

New issue

Closed

opened 2026-01-25 13:29:50 +00:00 by jack · 1 comment

jack commented

2026-01-25 13:29:50 +00:00

Owner

Feature Request

Eine Statusanzeige im UI-Header, die den aktuellen Zustand der Message-Queue visualisiert.

Anforderungen

Anzuzeigende Informationen

Pending: Anzahl wartender Messages
Processing: Anzahl aktuell in Verarbeitung
Optional: Failed/Retry-Count

Mögliche Darstellung

┌─────────────────────────────────────────────────┐
│  Claude-Mem                    📬 3 │ ⚙️ 1 │ ✓  │
└─────────────────────────────────────────────────┘
                                  │     │     │
                          Pending─┘     │     └─Healthy
                              Processing─┘

Oder als Dropdown/Popover mit Details:

Task-Typ (observation, summarize, claude-md, etc.)
Wartende Tasks pro Typ
Aktuell verarbeiteter Task

Technische Umsetzung

Backend

Neuer API-Endpoint oder Erweiterung von /api/health:

{
  "queue": {
    "pending": 3,
    "processing": 1,
    "failed": 0,
    "byType": {
      "observation": 2,
      "summarize": 1
    }
  }
}

Frontend

Polling alle X Sekunden oder WebSocket-Updates
Kompakte Anzeige im Header
Tooltip/Popover für Details

Zusätzliche Ideen

Klick auf Queue-Status öffnet Task-Liste
Warnung bei hoher Queue-Größe (> 50 pending)
Anzeige wenn Worker nicht erreichbar/healthy

## Feature Request Eine Statusanzeige im UI-Header, die den aktuellen Zustand der Message-Queue visualisiert. ## Anforderungen ### Anzuzeigende Informationen - **Pending**: Anzahl wartender Messages - **Processing**: Anzahl aktuell in Verarbeitung - **Optional**: Failed/Retry-Count ### Mögliche Darstellung ``` ┌─────────────────────────────────────────────────┐ │ Claude-Mem 📬 3 │ ⚙️ 1 │ ✓ │ └─────────────────────────────────────────────────┘ │ │ │ Pending─┘ │ └─Healthy Processing─┘ ``` Oder als Dropdown/Popover mit Details: - Task-Typ (observation, summarize, claude-md, etc.) - Wartende Tasks pro Typ - Aktuell verarbeiteter Task ## Technische Umsetzung ### Backend Neuer API-Endpoint oder Erweiterung von `/api/health`: ```json { "queue": { "pending": 3, "processing": 1, "failed": 0, "byType": { "observation": 2, "summarize": 1 } } } ``` ### Frontend - Polling alle X Sekunden oder WebSocket-Updates - Kompakte Anzeige im Header - Tooltip/Popover für Details ## Zusätzliche Ideen - Klick auf Queue-Status öffnet Task-Liste - Warnung bei hoher Queue-Größe (> 50 pending) - Anzeige wenn Worker nicht erreichbar/healthy

jack added the

labels

2026-01-25 13:29:57 +00:00

jack commented

2026-01-25 13:30:25 +00:00

Author

Owner

Update: WebSocket/SSE Integration

Das Projekt hat bereits WebSocket-Infrastruktur (ws-client im Worker). Diese sollte genutzt werden:

Bestehende Infrastruktur

Backend: WebSocket-Server auf ws://host:port/ws
Worker: Verbindet sich bereits via WebSocket
SSE: sse-writer für CLAUDE.md Updates

Empfohlene Umsetzung

Option A: WebSocket erweitern

// Backend sendet Queue-Status-Updates an alle Clients
ws.broadcast({
  type: 'queue:status',
  data: {
    pending: 3,
    processing: 1,
    currentTask: { id: 123, type: 'observation' }
  }
});

Option B: SSE-Endpoint für UI

// GET /api/queue/stream
// Server-Sent Events für Queue-Updates
app.get('/api/queue/stream', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  // Push updates bei Queue-Änderungen
});

Trigger für Updates

Task wird gequeued → Status-Update
Task startet Processing → Status-Update
Task completed/failed → Status-Update

Vorteile gegenüber Polling

Echtzeit-Updates ohne Delay
Weniger Server-Last
Bessere UX (sofortige Reaktion)

## Update: WebSocket/SSE Integration Das Projekt hat bereits WebSocket-Infrastruktur (`ws-client` im Worker). Diese sollte genutzt werden: ### Bestehende Infrastruktur - Backend: WebSocket-Server auf `ws://host:port/ws` - Worker: Verbindet sich bereits via WebSocket - SSE: `sse-writer` für CLAUDE.md Updates ### Empfohlene Umsetzung **Option A: WebSocket erweitern** ```ts // Backend sendet Queue-Status-Updates an alle Clients ws.broadcast({ type: 'queue:status', data: { pending: 3, processing: 1, currentTask: { id: 123, type: 'observation' } } }); ``` **Option B: SSE-Endpoint für UI** ```ts // GET /api/queue/stream // Server-Sent Events für Queue-Updates app.get('/api/queue/stream', (req, res) => { res.setHeader('Content-Type', 'text/event-stream'); // Push updates bei Queue-Änderungen }); ``` ### Trigger für Updates - Task wird gequeued → Status-Update - Task startet Processing → Status-Update - Task completed/failed → Status-Update ### Vorteile gegenüber Polling - Echtzeit-Updates ohne Delay - Weniger Server-Last - Bessere UX (sofortige Reaktion)

jack closed this issue

2026-01-25 13:38:03 +00:00

jack referenced this issue

2026-01-25 13:45:18 +00:00

[UI/Dashboard] Add queue status indicator and improve stats cards #276