feat(api): GET /api/workspaces/:id/stats endpoint
This commit is contained in:
721
research/01-chat-orchestration-research.md
Normal file
721
research/01-chat-orchestration-research.md
Normal file
@@ -0,0 +1,721 @@
|
||||
# Chat Interface + Task Orchestration Research Report
|
||||
|
||||
**Date:** 2026-03-01
|
||||
**Focus:** Analysis of Mission Control and Clawtrol for Mosaic Stack feature development
|
||||
**Goal:** Extract actionable design patterns for chat, task dispatch, and live event feeds
|
||||
|
||||
---
|
||||
|
||||
## Executive Summary
|
||||
|
||||
Both Mission Control and Clawtrol are OpenClaw-compatible dashboards with complementary strengths:
|
||||
|
||||
| Feature | Mission Control | Clawtrol | Mosaic Stack Gap |
|
||||
|---------|----------------|----------|------------------|
|
||||
| Chat with agents | ❌ No direct chat | ✅ Full session chat + send | **HIGH** - Stub exists, not wired |
|
||||
| Task dispatch | ✅ AI planning + Kanban | ✅ Simple Kanban | Medium - Kanban exists |
|
||||
| Live events | ✅ SSE-based feed | ❌ Polling only | Medium - SSE polling exists |
|
||||
| Session viewer | ❌ No | ✅ Full transcript view | **HIGH** - Missing |
|
||||
| Agent management | ✅ Auto-create agents | ❌ Basic list | Medium |
|
||||
|
||||
**Top 3 Quick Wins for Mosaic Stack:**
|
||||
1. **Session chat interface** (< 4 hours) - Wire existing chat stub to OpenClaw API
|
||||
2. **Session list view** (< 2 hours) - Read `sessions.json` + `.jsonl` transcripts
|
||||
3. **Task card planning indicator** (< 1 hour) - Add purple pulse animation
|
||||
|
||||
---
|
||||
|
||||
## 1. Chat Interface Analysis
|
||||
|
||||
### Clawtrol Sessions Module (Best Reference)
|
||||
|
||||
**File:** `src/components/modules/SessionsModule/index.tsx`
|
||||
|
||||
**Key Architecture:**
|
||||
```typescript
|
||||
// Session list fetched from OpenClaw
|
||||
const res = await fetch('/api/sessions');
|
||||
const data = await res.json();
|
||||
setSessions(data.sessions || []);
|
||||
|
||||
// Session detail with message history
|
||||
const res = await fetch(`/api/sessions/${encodeURIComponent(session.key)}?limit=50`);
|
||||
const data = await res.json();
|
||||
setChatMessages(data.messages || []);
|
||||
|
||||
// Send message to session (via Telegram or direct)
|
||||
await fetch('/api/sessions/send', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ sessionKey: selectedSession.key, message: msg }),
|
||||
});
|
||||
```
|
||||
|
||||
**UI Pattern - Two-Column Chat Layout:**
|
||||
```tsx
|
||||
// Session list view
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3">
|
||||
{sessions.map(session => (
|
||||
<div onClick={() => openSessionChat(session)}>
|
||||
{/* Activity indicator */}
|
||||
<div className="w-2 h-2 rounded-full"
|
||||
style={{ background: activityColor, boxShadow: '0 0 6px ...' }} />
|
||||
|
||||
{/* Session metadata */}
|
||||
<span>{session.messageCount} msgs · {session.totalTokens}k tokens</span>
|
||||
<span>${session.estimatedCost.toFixed(2)}</span>
|
||||
|
||||
{/* Last message preview */}
|
||||
<div className="truncate">
|
||||
{session.lastMessages[0]?.text?.slice(0, 100)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Chat View Pattern:**
|
||||
```tsx
|
||||
// Messages container with auto-scroll
|
||||
<div className="flex-1 overflow-auto p-4 space-y-3">
|
||||
{chatMessages.map(msg => (
|
||||
<div className={msg.role === 'user' ? 'justify-end' : 'justify-start'}>
|
||||
<div className="max-w-[85%] rounded-lg px-3 py-2">
|
||||
{/* Role badge */}
|
||||
<span className="text-[9px] uppercase">
|
||||
{msg.role === 'user' ? 'you' : 'assistant'}
|
||||
</span>
|
||||
|
||||
{/* Markdown content */}
|
||||
<div>{renderMarkdown(msg.text)}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div ref={chatEndRef} /> {/* Auto-scroll anchor */}
|
||||
</div>
|
||||
|
||||
// Input with Enter to send
|
||||
<input onKeyDown={e => e.key === 'Enter' && sendChatMessage()} />
|
||||
```
|
||||
|
||||
**Session API Pattern (`/api/sessions/route.ts`):**
|
||||
```typescript
|
||||
// Priority: CLI > Index file > Direct file scan
|
||||
const SESSIONS_INDEX = join(os.homedir(), '.openclaw', 'agents', 'main', 'sessions', 'sessions.json');
|
||||
const SESSIONS_DIR = join(os.homedir(), '.openclaw', 'agents', 'main', 'sessions');
|
||||
|
||||
// Read sessions from index
|
||||
const sessionsMap = JSON.parse(await readFile(SESSIONS_INDEX, 'utf-8'));
|
||||
|
||||
// Enrich with message count and last messages
|
||||
for (const session of sessions) {
|
||||
const [msgs, count] = await Promise.all([
|
||||
getLastMessages(sessionFile, 3), // Last 3 messages
|
||||
getMessageCount(sessionFile), // Total count
|
||||
]);
|
||||
}
|
||||
|
||||
// Parse JSONL for messages
|
||||
function getLastMessages(sessionFile: string, count: number) {
|
||||
const lines = data.trim().split('\n').filter(Boolean);
|
||||
for (let i = lines.length - 1; i >= 0 && messages.length < count; i--) {
|
||||
const parsed = JSON.parse(lines[i]);
|
||||
if (parsed.type === 'message' && parsed.message) {
|
||||
messages.unshift({
|
||||
role: parsed.message.role,
|
||||
text: extractTextFromContent(parsed.message.content),
|
||||
timestamp: parsed.timestamp,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Message Send Pattern (`/api/sessions/send/route.ts`):**
|
||||
```typescript
|
||||
// Parse session key to determine target
|
||||
function parseSessionKey(key: string): { chatId: string; topicId?: string } | null {
|
||||
// agent:main:main → DM to owner
|
||||
if (key === 'agent:main:main') {
|
||||
return { chatId: await getDefaultChatId() };
|
||||
}
|
||||
|
||||
// agent:main:telegram:group:<id>:topic:<id>
|
||||
const topicMatch = key.match(/:group:(-?\d+):topic:(\d+)$/);
|
||||
if (topicMatch) {
|
||||
return { chatId: topicMatch[1], topicId: topicMatch[2] };
|
||||
}
|
||||
}
|
||||
|
||||
// Send via Telegram Bot API (or could use OpenClaw chat.send)
|
||||
const res = await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ chat_id: target.chatId, text: message }),
|
||||
});
|
||||
```
|
||||
|
||||
### Key Takeaways for Mosaic Stack
|
||||
|
||||
1. **Session key format:** `agent:main:telegram:group:<id>:topic:<id>` or `agent:main:main`
|
||||
2. **JSONL parsing:** Read from `~/.openclaw/agents/main/sessions/<session-id>.jsonl`
|
||||
3. **Cost estimation:**
|
||||
```typescript
|
||||
const isOpus = modelName.includes('opus');
|
||||
const inputRate = isOpus ? 15 : 3;
|
||||
const outputRate = isOpus ? 75 : 15;
|
||||
const cost = (inputTokens / 1_000_000 * inputRate) + (outputTokens / 1_000_000 * outputRate);
|
||||
```
|
||||
4. **Activity color logic:**
|
||||
```typescript
|
||||
if (lastActivity > hourAgo) return 'green'; // Active
|
||||
if (lastActivity > dayAgo) return 'yellow'; // Recent
|
||||
return 'dim'; // Stale
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Task/Agent Dispatch Flow (Mission Control)
|
||||
|
||||
### AI Planning UX Pattern
|
||||
|
||||
**The Flow:**
|
||||
```
|
||||
CREATE → PLAN (AI Q&A) → ASSIGN (Auto-agent) → EXECUTE → DELIVER
|
||||
```
|
||||
|
||||
**Status Columns:**
|
||||
```
|
||||
PLANNING → INBOX → ASSIGNED → IN PROGRESS → TESTING → REVIEW → DONE
|
||||
```
|
||||
|
||||
**PlanningTab.tsx - Core Pattern:**
|
||||
|
||||
1. **Start Planning Button:**
|
||||
```tsx
|
||||
if (!state?.isStarted) {
|
||||
return (
|
||||
<button onClick={startPlanning} className="px-6 py-3 bg-mc-accent">
|
||||
📋 Start Planning
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
2. **Question/Answer Loop:**
|
||||
```tsx
|
||||
// Current question display
|
||||
<h3>{state.currentQuestion.question}</h3>
|
||||
|
||||
// Multiple choice options
|
||||
{state.currentQuestion.options.map(option => (
|
||||
<button
|
||||
onClick={() => setSelectedOption(option.label)}
|
||||
className={isSelected ? 'border-mc-accent bg-mc-accent/10' : 'border-mc-border'}
|
||||
>
|
||||
<span className="w-8 h-8">{option.id.toUpperCase()}</span>
|
||||
<span>{option.label}</span>
|
||||
{isSelected && <CheckCircle />}
|
||||
</button>
|
||||
))}
|
||||
|
||||
// "Other" option with text input
|
||||
{isOther && isSelected && (
|
||||
<input placeholder="Please specify..." value={otherText} />
|
||||
)}
|
||||
```
|
||||
|
||||
3. **Polling for AI Response:**
|
||||
```typescript
|
||||
// Poll every 2 seconds for next question
|
||||
pollingIntervalRef.current = setInterval(() => {
|
||||
pollForUpdates();
|
||||
}, 2000);
|
||||
|
||||
// 90-second timeout
|
||||
pollingTimeoutRef.current = setTimeout(() => {
|
||||
setError('Taking too long to respond...');
|
||||
}, 90000);
|
||||
```
|
||||
|
||||
4. **Planning Complete - Spec Display:**
|
||||
```tsx
|
||||
if (state?.isComplete && state?.spec) {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-green-400">
|
||||
<Lock /> Planning Complete
|
||||
</div>
|
||||
|
||||
{/* Generated spec */}
|
||||
<div className="bg-mc-bg border rounded-lg p-4">
|
||||
<h3>{state.spec.title}</h3>
|
||||
<p>{state.spec.summary}</p>
|
||||
<ul>{state.spec.deliverables.map(d => <li>{d}</li>)}</ul>
|
||||
<ul>{state.spec.success_criteria.map(c => <li>{c}</li>)}</ul>
|
||||
</div>
|
||||
|
||||
{/* Auto-created agents */}
|
||||
{state.agents.map(agent => (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{agent.avatar_emoji}</span>
|
||||
<div>
|
||||
<p>{agent.name}</p>
|
||||
<p className="text-sm">{agent.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Planning API Pattern
|
||||
|
||||
**POST `/api/tasks/[id]/planning` - Start Planning:**
|
||||
```typescript
|
||||
// Create session key
|
||||
const sessionKey = `agent:main:planning:${taskId}`;
|
||||
|
||||
// Build planning prompt
|
||||
const planningPrompt = `
|
||||
PLANNING REQUEST
|
||||
|
||||
Task Title: ${task.title}
|
||||
Task Description: ${task.description}
|
||||
|
||||
Generate your FIRST question. Respond with ONLY valid JSON:
|
||||
{
|
||||
"question": "Your question here?",
|
||||
"options": [
|
||||
{"id": "A", "label": "First option"},
|
||||
{"id": "B", "label": "Second option"},
|
||||
{"id": "other", "label": "Other"}
|
||||
]
|
||||
}
|
||||
`;
|
||||
|
||||
// Send to OpenClaw
|
||||
await client.call('chat.send', {
|
||||
sessionKey,
|
||||
message: planningPrompt,
|
||||
});
|
||||
|
||||
// Store in DB
|
||||
UPDATE tasks SET planning_session_key = ?, planning_messages = ?, status = 'planning'
|
||||
```
|
||||
|
||||
**Key Insight:** The AI doesn't just plan - it asks **multiple-choice questions** to clarify requirements. This is the "AI clarification before dispatch" pattern.
|
||||
|
||||
### Kanban Card with Planning Indicator
|
||||
|
||||
```tsx
|
||||
// TaskCard.tsx
|
||||
const isPlanning = task.status === 'planning';
|
||||
|
||||
<div className={isPlanning
|
||||
? 'border-purple-500/40 hover:border-purple-500'
|
||||
: 'border-mc-border/50 hover:border-mc-accent/40'}>
|
||||
|
||||
{isPlanning && (
|
||||
<div className="flex items-center gap-2 py-2 px-3 bg-purple-500/10">
|
||||
<div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse" />
|
||||
<span className="text-xs text-purple-400">Continue planning</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
```
|
||||
|
||||
### Auto-Dispatch Pattern
|
||||
|
||||
```typescript
|
||||
// When task moves from PLANNING → INBOX (planning complete)
|
||||
if (shouldTriggerAutoDispatch(oldStatus, newStatus, agentId)) {
|
||||
await triggerAutoDispatch({
|
||||
taskId,
|
||||
taskTitle,
|
||||
agentId,
|
||||
agentName,
|
||||
workspaceId,
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Live Event Feed
|
||||
|
||||
### Mission Control SSE Pattern
|
||||
|
||||
**`src/lib/events.ts`:**
|
||||
```typescript
|
||||
// In-memory client registry
|
||||
const clients = new Set<ReadableStreamDefaultController>();
|
||||
|
||||
export function registerClient(controller) {
|
||||
clients.add(controller);
|
||||
}
|
||||
|
||||
export function broadcast(event: SSEEvent) {
|
||||
const data = `data: ${JSON.stringify(event)}\n\n`;
|
||||
const encoded = new TextEncoder().encode(data);
|
||||
|
||||
for (const client of Array.from(clients)) {
|
||||
try {
|
||||
client.enqueue(encoded);
|
||||
} catch {
|
||||
clients.delete(client);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**LiveFeed Component:**
|
||||
```tsx
|
||||
// Filter tabs
|
||||
<div className="flex gap-1">
|
||||
{['all', 'tasks', 'agents'].map(tab => (
|
||||
<button className={filter === tab ? 'bg-mc-accent' : ''}>
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
// Event list with icons
|
||||
{filteredEvents.map(event => (
|
||||
<div className={`p-2 rounded border-l-2 ${
|
||||
isHighlight ? 'bg-mc-bg-tertiary border-mc-accent-pink' : 'hover:bg-mc-bg-tertiary'
|
||||
}`}>
|
||||
<span>{getEventIcon(event.type)}</span>
|
||||
<p>{event.message}</p>
|
||||
<span className="text-xs">{formatDistanceToNow(event.created_at)}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
// Event icons
|
||||
function getEventIcon(type: string) {
|
||||
switch (type) {
|
||||
case 'task_created': return '📋';
|
||||
case 'task_assigned': return '👤';
|
||||
case 'task_completed': return '✅';
|
||||
case 'message_sent': return '💬';
|
||||
case 'agent_joined': return '🎉';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### SSE vs WebSocket Trade-off
|
||||
|
||||
| Aspect | SSE (Mission Control) | WebSocket (Clawtrol) |
|
||||
|--------|----------------------|---------------------|
|
||||
| Direction | Server → Client only | Bidirectional |
|
||||
| Reconnect | Automatic browser handling | Manual implementation |
|
||||
| Overhead | HTTP-based, lighter | Full TCP connection |
|
||||
| Use case | Event feeds, notifications | Real-time terminal, chat |
|
||||
|
||||
**Recommendation:** Use SSE for event feeds (simpler), WebSocket for interactive terminals.
|
||||
|
||||
---
|
||||
|
||||
## 4. Session Viewer Pattern
|
||||
|
||||
### Clawtrol Session List
|
||||
|
||||
```tsx
|
||||
// Session card with activity indicator
|
||||
<div className="card-base cursor-pointer" onClick={() => openSessionChat(session)}>
|
||||
{/* Activity dot */}
|
||||
<div className="w-2 h-2 rounded-full"
|
||||
style={{
|
||||
background: activityColor,
|
||||
boxShadow: activityColor === 'green' ? '0 0 6px rgba(0,255,106,0.5)' : undefined
|
||||
}} />
|
||||
|
||||
{/* Session info */}
|
||||
<h3 className="truncate">{session.label}</h3>
|
||||
<div className="text-[9px]">
|
||||
{session.messageCount} msgs · {session.totalTokens}k tokens
|
||||
{session.estimatedCost > 0 && <span> · ${session.estimatedCost.toFixed(2)}</span>}
|
||||
{session.model && <span> · {session.model}</span>}
|
||||
</div>
|
||||
|
||||
{/* Last message preview */}
|
||||
{session.lastMessages?.length > 0 && (
|
||||
<div className="mt-2 p-2 rounded bg-secondary">
|
||||
<span>{session.lastMessages[0]?.role === 'user' ? 'you: ' : 'assistant: '}</span>
|
||||
<span className="truncate">{session.lastMessages[0]?.text?.slice(0, 100)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
### Session Label Mapping
|
||||
|
||||
```typescript
|
||||
const TOPIC_NAMES: Record<string, string> = {
|
||||
'1369': '🔖 Bookmarks',
|
||||
'13': '🌴 Bali Trip',
|
||||
'14': '💰 Expenses',
|
||||
// ... user-defined topic labels
|
||||
};
|
||||
|
||||
function getSessionLabel(key: string): string {
|
||||
if (key === 'agent:main:main') return 'Main Session (DM)';
|
||||
if (key.includes(':subagent:')) return `Subagent ${uuid.slice(0, 8)}`;
|
||||
|
||||
// Telegram topic
|
||||
const topicMatch = key.match(/:topic:(\d+)$/);
|
||||
if (topicMatch) {
|
||||
return TOPIC_NAMES[topicMatch[1]] || `Topic ${topicMatch[1]}`;
|
||||
}
|
||||
|
||||
return key.split(':').pop() || key;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. OpenClaw Client Integration
|
||||
|
||||
### WebSocket Client Pattern
|
||||
|
||||
**`src/lib/openclaw/client.ts`:**
|
||||
```typescript
|
||||
export class OpenClawClient extends EventEmitter {
|
||||
private ws: WebSocket | null = null;
|
||||
private pendingRequests = new Map<string, PromiseHandlers>();
|
||||
private connected = false;
|
||||
private authenticated = false;
|
||||
|
||||
async connect(): Promise<void> {
|
||||
// Add token to URL for auth
|
||||
const wsUrl = new URL(this.url);
|
||||
wsUrl.searchParams.set('token', this.token);
|
||||
|
||||
this.ws = new WebSocket(wsUrl.toString());
|
||||
|
||||
this.ws.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
// Handle challenge-response auth
|
||||
if (data.type === 'event' && data.event === 'connect.challenge') {
|
||||
const response = {
|
||||
type: 'req',
|
||||
id: crypto.randomUUID(),
|
||||
method: 'connect',
|
||||
params: {
|
||||
auth: { token: this.token },
|
||||
role: 'operator',
|
||||
scopes: ['operator.admin'],
|
||||
}
|
||||
};
|
||||
this.ws.send(JSON.stringify(response));
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle RPC responses
|
||||
if (data.type === 'res') {
|
||||
const pending = this.pendingRequests.get(data.id);
|
||||
if (pending) {
|
||||
data.ok ? pending.resolve(data.payload) : pending.reject(data.error);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async call<T>(method: string, params?: object): Promise<T> {
|
||||
const id = crypto.randomUUID();
|
||||
const message = { type: 'req', id, method, params };
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
this.pendingRequests.set(id, { resolve, reject });
|
||||
this.ws.send(JSON.stringify(message));
|
||||
|
||||
// 30s timeout
|
||||
setTimeout(() => {
|
||||
if (this.pendingRequests.has(id)) {
|
||||
this.pendingRequests.delete(id);
|
||||
reject(new Error(`Timeout: ${method}`));
|
||||
}
|
||||
}, 30000);
|
||||
});
|
||||
}
|
||||
|
||||
// Convenience methods
|
||||
async listSessions() { return this.call('sessions.list'); }
|
||||
async sendMessage(sessionId: string, content: string) {
|
||||
return this.call('sessions.send', { session_id: sessionId, content });
|
||||
}
|
||||
async listAgents() { return this.call('agents.list'); }
|
||||
}
|
||||
```
|
||||
|
||||
### Event Deduplication Pattern
|
||||
|
||||
```typescript
|
||||
// Global dedup cache (survives Next.js hot reload)
|
||||
const GLOBAL_EVENT_CACHE_KEY = '__openclaw_processed_events__';
|
||||
const globalProcessedEvents = globalThis[GLOBAL_EVENT_CACHE_KEY] || new Map();
|
||||
|
||||
// Content-based event ID
|
||||
function generateEventId(data: any): string {
|
||||
const canonical = JSON.stringify({
|
||||
type: data.type,
|
||||
seq: data.seq,
|
||||
runId: data.payload?.runId,
|
||||
payloadHash: createHash('sha256').update(JSON.stringify(data.payload)).digest('hex').slice(0, 16),
|
||||
});
|
||||
return createHash('sha256').update(canonical).digest('hex').slice(0, 32);
|
||||
}
|
||||
|
||||
// Skip duplicates
|
||||
if (globalProcessedEvents.has(eventId)) return;
|
||||
globalProcessedEvents.set(eventId, Date.now());
|
||||
|
||||
// LRU cleanup
|
||||
if (globalProcessedEvents.size > MAX_EVENTS) {
|
||||
// Remove oldest entries
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Feature Recommendations for Mosaic Stack
|
||||
|
||||
### Quick Wins (< 4 hours each)
|
||||
|
||||
| Feature | Effort | Impact | Source |
|
||||
|---------|--------|--------|--------|
|
||||
| **Session list page** | 2h | HIGH | Clawtrol |
|
||||
| **Session chat interface** | 4h | HIGH | Clawtrol |
|
||||
| **Planning indicator on task cards** | 1h | MEDIUM | Mission Control |
|
||||
| **Activity dots (green/yellow/dim)** | 30m | MEDIUM | Clawtrol |
|
||||
| **Token/cost display per session** | 1h | MEDIUM | Clawtrol |
|
||||
| **Event feed filter tabs** | 1h | LOW | Mission Control |
|
||||
|
||||
### Medium Effort (4-16 hours)
|
||||
|
||||
| Feature | Effort | Impact | Description |
|
||||
|---------|--------|--------|-------------|
|
||||
| **AI planning flow** | 8h | HIGH | Multi-choice Q&A before dispatch |
|
||||
| **OpenClaw WebSocket client** | 4h | HIGH | Real-time event streaming |
|
||||
| **Session transcript viewer** | 4h | MEDIUM | JSONL parsing + display |
|
||||
| **Auto-agent creation** | 8h | MEDIUM | Generate agents from planning spec |
|
||||
|
||||
### Architecture Recommendations
|
||||
|
||||
1. **Keep SSE for event feed** - Simpler than WebSocket for one-way updates
|
||||
2. **Use OpenClaw `chat.send` for messages** - Don't implement Telegram API directly
|
||||
3. **Store session metadata in PostgreSQL** - Mirror `sessions.json` for joins
|
||||
4. **Implement planning as a state machine** - Clear states: idle → started → questioning → complete
|
||||
|
||||
---
|
||||
|
||||
## 7. Code Snippets to Reuse
|
||||
|
||||
### Session API Route (Clawtrol-style)
|
||||
|
||||
```typescript
|
||||
// app/api/sessions/route.ts
|
||||
import { readFile, readdir } from 'fs/promises';
|
||||
import { join } from 'path';
|
||||
import os from 'os';
|
||||
|
||||
const SESSIONS_DIR = join(os.homedir(), '.openclaw', 'agents', 'main', 'sessions');
|
||||
|
||||
export async function GET() {
|
||||
// Try CLI first
|
||||
try {
|
||||
const { stdout } = await execAsync('openclaw sessions --json');
|
||||
return NextResponse.json({ sessions: JSON.parse(stdout).sessions, source: 'cli' });
|
||||
} catch {}
|
||||
|
||||
// Fallback to file
|
||||
const index = await readFile(join(SESSIONS_DIR, 'sessions.json'), 'utf-8');
|
||||
const sessionsMap = JSON.parse(index);
|
||||
|
||||
const sessions = await Promise.all(
|
||||
Object.entries(sessionsMap).map(async ([key, data]) => ({
|
||||
key,
|
||||
label: getSessionLabel(key),
|
||||
kind: getSessionKind(key),
|
||||
lastActivity: new Date(data.updatedAt).toISOString(),
|
||||
messageCount: await getMessageCount(key),
|
||||
totalTokens: data.totalTokens || 0,
|
||||
estimatedCost: calculateCost(data),
|
||||
}))
|
||||
);
|
||||
|
||||
return NextResponse.json({ sessions, source: 'file' });
|
||||
}
|
||||
```
|
||||
|
||||
### Activity Indicator Component
|
||||
|
||||
```tsx
|
||||
// components/ActivityIndicator.tsx
|
||||
export function ActivityIndicator({ lastActivity }: { lastActivity: Date }) {
|
||||
const now = Date.now();
|
||||
const hourAgo = now - 60 * 60 * 1000;
|
||||
const dayAgo = now - 24 * 60 * 60 * 1000;
|
||||
|
||||
const color = lastActivity.getTime() > hourAgo
|
||||
? 'bg-green-500'
|
||||
: lastActivity.getTime() > dayAgo
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-gray-500';
|
||||
|
||||
const glow = lastActivity.getTime() > hourAgo
|
||||
? 'shadow-[0_0_6px_rgba(34,197,94,0.5)]'
|
||||
: '';
|
||||
|
||||
return (
|
||||
<div className={`w-2 h-2 rounded-full ${color} ${glow}`} />
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Cost Estimation Utility
|
||||
|
||||
```typescript
|
||||
// lib/cost-estimation.ts
|
||||
const RATES = {
|
||||
opus: { input: 15, output: 75 },
|
||||
sonnet: { input: 3, output: 15 },
|
||||
haiku: { input: 0.25, output: 1.25 },
|
||||
};
|
||||
|
||||
export function estimateCost(model: string, inputTokens: number, outputTokens: number): number {
|
||||
const tier = model.includes('opus') ? 'opus'
|
||||
: model.includes('sonnet') ? 'sonnet'
|
||||
: 'haiku';
|
||||
|
||||
const rates = RATES[tier];
|
||||
return (inputTokens / 1_000_000 * rates.input) +
|
||||
(outputTokens / 1_000_000 * rates.output);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Summary
|
||||
|
||||
**Best patterns to steal:**
|
||||
|
||||
1. **Clawtrol's session chat** - Clean two-panel layout with activity dots
|
||||
2. **Mission Control's planning flow** - Multi-choice Q&A with polling
|
||||
3. **Clawtrol's JSONL parsing** - Efficient reverse-iteration for last N messages
|
||||
4. **Mission Control's SSE events** - Simple broadcast pattern with client registry
|
||||
5. **Activity color logic** - Hour = green, day = yellow, older = dim
|
||||
|
||||
**Don't copy:**
|
||||
|
||||
1. Telegram Bot API integration - Use OpenClaw `chat.send` instead
|
||||
2. File-based session index - Mosaic Stack has PostgreSQL
|
||||
3. PM2 daemon management - Use Docker/systemd
|
||||
|
||||
**Next steps:**
|
||||
|
||||
1. Create `/app/(dashboard)/sessions` page with session list
|
||||
2. Add chat view at `/app/(dashboard)/sessions/[key]`
|
||||
3. Wire `/api/sessions` route to OpenClaw CLI or sessions.json
|
||||
4. Add `ActivityIndicator` component to session cards
|
||||
5. Add "Start Planning" button to task cards in Kanban
|
||||
Reference in New Issue
Block a user