@swarmclawai/swarmclaw 0.7.1 → 0.7.3

package/src/components/usage/metrics-dashboard.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback, useMemo } from 'react'
 import {
   LineChart, Line, BarChart, Bar, Cell,
   XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
@@ -29,12 +29,20 @@ interface ProviderHealthEntry {
   models: string[]
 }
 
+interface PluginUsageEntry {
+  definitionTokens: number
+  invocationTokens: number
+  invocations: number
+  estimatedCost: number
+}
+
 interface UsageResponse {
   records: unknown[]
   totalTokens: number
   totalCost: number
   byAgent: Record<string, { name: string; cost: number; tokens: number; count: number }>
   byProvider: Record<string, { tokens: number; cost: number }>
+  byPlugin?: Record<string, PluginUsageEntry>
   timeSeries: TimePoint[]
   providerHealth?: Record<string, ProviderHealthEntry>
 }
@@ -150,6 +158,14 @@ export function MetricsDashboard() {
   useWs('tasks', loadTaskMetrics, 15_000)
 
   const completionRate = computeCompletionRate(tasks)
+  const pendingApprovals = useMemo(
+    () => Object.values(tasks).filter((task) => !!task.pendingApproval).length,
+    [tasks],
+  )
+  const failedTasks = useMemo(
+    () => Object.values(tasks).filter((task) => task.status === 'failed').length,
+    [tasks],
+  )
 
   const timeSeriesFormatted = (data?.timeSeries ?? []).map((pt) => ({
     ...pt,
@@ -170,6 +186,18 @@ export function MetricsDashboard() {
       cost: Math.round(v.cost * 10000) / 10000,
     }))
 
+  const pluginData = Object.entries(data?.byPlugin ?? {})
+    .filter(([id]) => id !== '_system' && id !== '_unknown')
+    .sort((a, b) => (b[1].definitionTokens + b[1].invocationTokens) - (a[1].definitionTokens + a[1].invocationTokens))
+    .slice(0, 12)
+    .map(([id, v]) => ({
+      name: id.length > 18 ? id.slice(0, 18) + '…' : id,
+      definitionTokens: v.definitionTokens,
+      invocationTokens: v.invocationTokens,
+      invocations: v.invocations,
+      estimatedCost: v.estimatedCost,
+    }))
+
   const tooltipStyle = {
     contentStyle: {
       background: 'var(--color-surface)',
@@ -182,6 +210,57 @@ export function MetricsDashboard() {
     labelStyle: { color: 'var(--color-text-2)' },
   }
 
+  const insightCards = useMemo(() => {
+    const series = data?.timeSeries ?? []
+    const latest = series[series.length - 1]
+    const previous = series.slice(0, -1)
+    const baselineCost = previous.length > 0
+      ? previous.reduce((sum, point) => sum + point.cost, 0) / previous.length
+      : 0
+    const costDeltaPct = latest && baselineCost > 0
+      ? Math.round(((latest.cost - baselineCost) / baselineCost) * 100)
+      : null
+
+    const providerHealthEntries = Object.entries(data?.providerHealth ?? {})
+      .filter(([, health]) => health.totalRequests > 0)
+      .sort(([, a], [, b]) => b.errorRate - a.errorRate)
+    const riskiestProvider = providerHealthEntries[0]
+
+    const topCostAgent = Object.values(data?.byAgent ?? {})
+      .sort((a, b) => b.cost - a.cost)[0]
+
+    return [
+      {
+        label: 'Cost Pulse',
+        value: latest
+          ? `${formatCost(latest.cost)}${costDeltaPct !== null ? ` · ${costDeltaPct >= 0 ? '+' : ''}${costDeltaPct}%` : ''}`
+          : 'No recent spend',
+        hint: latest ? `Latest bucket vs ${previous.length > 0 ? 'range average' : 'current range'}` : 'Waiting for usage data',
+        tone: costDeltaPct !== null && costDeltaPct > 40 ? 'text-red-400' : 'text-text',
+      },
+      {
+        label: 'Provider Risk',
+        value: riskiestProvider
+          ? `${riskiestProvider[0]} · ${(riskiestProvider[1].errorRate * 100).toFixed(1)}%`
+          : 'No provider issues',
+        hint: riskiestProvider ? `${riskiestProvider[1].totalRequests} requests in range` : 'No provider health records yet',
+        tone: riskiestProvider && riskiestProvider[1].errorRate > 0.1 ? 'text-red-400' : 'text-emerald-400',
+      },
+      {
+        label: 'Top Spend Agent',
+        value: topCostAgent ? `${topCostAgent.name} · ${formatCost(topCostAgent.cost)}` : 'No agent activity',
+        hint: topCostAgent ? `${formatTokens(topCostAgent.tokens)} tokens` : 'No per-agent usage in range',
+        tone: 'text-sky-400',
+      },
+      {
+        label: 'Workflow Friction',
+        value: `${pendingApprovals} approvals · ${failedTasks} failed`,
+        hint: pendingApprovals + failedTasks > 0 ? 'Operational overhead from live work' : 'No obvious workflow friction',
+        tone: pendingApprovals + failedTasks > 0 ? 'text-amber-400' : 'text-emerald-400',
+      },
+    ]
+  }, [data, failedTasks, pendingApprovals])
+
   return (
     <div className="flex-1 flex flex-col h-full overflow-y-auto">
       <div className="px-8 pt-6 pb-4 shrink-0" style={{ animation: 'fade-up 0.5s var(--ease-spring)' }}>
@@ -226,6 +305,20 @@ export function MetricsDashboard() {
             <StatCard label="Completion Rate" value={`${completionRate}%`} index={3} />
           </div>
 
+          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4">
+            {insightCards.map((card, index) => (
+              <div
+                key={card.label}
+                className="bg-surface-2 rounded-[12px] p-4 border border-white/[0.04] hover:bg-surface transition-all"
+                style={{ animation: 'spring-in 0.6s var(--ease-spring) both', animationDelay: `${0.12 + index * 0.04}s` }}
+              >
+                <p className="text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/60 mb-2">{card.label}</p>
+                <p className={`text-[15px] font-700 leading-tight ${card.tone}`}>{card.value}</p>
+                <p className="text-[11px] text-text-3/55 mt-2 leading-relaxed">{card.hint}</p>
+              </div>
+            ))}
+          </div>
+
           {/* Token usage over time */}
           <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.2s both' }}>
             <ChartCard title="Token Usage Over Time">
@@ -288,6 +381,59 @@ export function MetricsDashboard() {
             </ChartCard>
           </div>
 
+          {/* Plugin Usage */}
+          {pluginData.length > 0 && (
+            <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.28s both' }}>
+              <ChartCard title="Plugin Token Usage">
+                <ResponsiveContainer width="100%" height={280}>
+                  <BarChart data={pluginData} layout="vertical" margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" horizontal={false} />
+                    <XAxis type="number" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} tickFormatter={formatTokens} />
+                    <YAxis type="category" dataKey="name" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} width={120} />
+                    <Tooltip
+                      {...tooltipStyle}
+                      formatter={(value: number | undefined, name?: string) => [
+                        formatTokens(value ?? 0),
+                        name === 'definitionTokens' ? 'Context (definitions)' : 'Invocations',
+                      ]}
+                    />
+                    <Bar dataKey="definitionTokens" fill="#818CF8" radius={[0, 0, 0, 0]} stackId="a" name="definitionTokens" />
+                    <Bar dataKey="invocationTokens" fill="#34D399" radius={[0, 4, 4, 0]} stackId="a" name="invocationTokens" />
+                    <Legend
+                      verticalAlign="bottom"
+                      iconType="circle"
+                      iconSize={8}
+                      formatter={(value: string) => (
+                        <span style={{ color: '#a0a0b0', fontSize: 11 }}>
+                          {value === 'definitionTokens' ? 'Context (definitions)' : 'Invocations'}
+                        </span>
+                      )}
+                    />
+                  </BarChart>
+                </ResponsiveContainer>
+              </ChartCard>
+
+              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mt-4">
+                {pluginData.filter((p) => p.invocations > 0).map((p, idx) => (
+                  <div
+                    key={p.name}
+                    className="bg-surface-2 rounded-[10px] p-3 border border-white/[0.04] hover:bg-surface transition-all"
+                    style={{ animation: 'spring-in 0.5s var(--ease-spring) both', animationDelay: `${0.3 + idx * 0.03}s` }}
+                  >
+                    <p className="text-[12px] font-600 text-text truncate">{p.name}</p>
+                    <div className="flex items-baseline gap-2 mt-1">
+                      <span className="text-[18px] font-display font-700 text-text">{p.invocations}</span>
+                      <span className="text-[11px] text-text-3">calls</span>
+                    </div>
+                    <p className="text-[11px] text-text-3 mt-0.5">
+                      {formatTokens(p.invocationTokens)} invocation tokens &middot; {formatCost(p.estimatedCost)}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
           {/* Task KPIs */}
           {taskMetrics && (
             <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>

package/src/components/wallets/wallet-panel.tsx

@@ -70,11 +70,7 @@ export function WalletPanel() {
       const data = await api<Record<string, SafeWallet>>('GET', '/wallets')
       setWallets(data)
 
-      // Auto-select wallet for target agent
-      if (walletPanelAgentId) {
-        const match = Object.values(data).find((w) => w.agentId === walletPanelAgentId)
-        if (match) setSelectedWalletId(match.id)
-      } else if (!selectedWalletId && Object.keys(data).length > 0) {
+      if (!walletPanelAgentId && !selectedWalletId && Object.keys(data).length > 0) {
         setSelectedWalletId(Object.keys(data)[0])
       }
     } catch { /* ignore */ }
@@ -85,6 +81,22 @@ export function WalletPanel() {
   useEffect(() => { loadWallets() }, [loadWallets])
   useWs('wallets', loadWallets, 15000)
 
+  useEffect(() => {
+    if (!walletPanelAgentId) return
+    const match = Object.values(wallets).find((wallet) => wallet.agentId === walletPanelAgentId)
+    if (match) {
+      setSelectedWalletId(match.id)
+      setShowCreateForm(false)
+      setCreateError('')
+      return
+    }
+    if (!agents[walletPanelAgentId]) return
+    setSelectedWalletId(null)
+    setShowCreateForm(true)
+    setCreateAgentId(walletPanelAgentId)
+    setCreateError('')
+  }, [agents, walletPanelAgentId, wallets])
+
   // Load detail when wallet selected
   const selectedWallet = selectedWalletId ? wallets[selectedWalletId] : null
 

package/src/components/webhooks/webhook-sheet.tsx

@@ -64,8 +64,8 @@ export function WebhookSheet() {
 
   const editing = editingId ? (webhooks[editingId] as Webhook | undefined) : null
   const endpoint = editing ? webhookUrl(editing.id) : ''
-  const orchestrators = useMemo(
-    () => Object.values(agents).filter((a) => a.isOrchestrator),
+  const eligibleAgents = useMemo(
+    () => Object.values(agents),
     [agents]
   )
 
@@ -127,7 +127,7 @@ export function WebhookSheet() {
 
   const handleSave = async () => {
     if (!agentId) {
-      setError('An orchestrator agent is required.')
+      setError('Choose an eligible agent to handle this webhook.')
       return
     }
 
@@ -185,7 +185,7 @@ export function WebhookSheet() {
           <h2 className="font-display text-[24px] font-700 tracking-[-0.02em] mb-1">
             {editing ? 'Edit Webhook' : 'New Webhook'}
           </h2>
-          <p className="text-[13px] text-text-3">Create an inbound endpoint that triggers an orchestrator</p>
+          <p className="text-[13px] text-text-3">Create an inbound endpoint that launches an agent workflow</p>
         </div>
 
         {editing && (
@@ -230,7 +230,7 @@ export function WebhookSheet() {
                       <div className="text-[11px] text-red-300/80 mt-1">{entry.error}</div>
                     )}
                     {entry.sessionId && (
-                      <div className="text-[10px] text-text-3/50 mt-1 font-mono">Session: {entry.sessionId}</div>
+                      <div className="text-[10px] text-text-3/50 mt-1 font-mono">Chat: {entry.sessionId}</div>
                     )}
                   </div>
                 ))}
@@ -294,15 +294,15 @@ export function WebhookSheet() {
         </div>
 
         <div>
-          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Route to Orchestrator</label>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Route to Agent</label>
           <select
             value={agentId}
             onChange={(e) => setAgentId(e.target.value)}
             className={`${inputClass} appearance-none cursor-pointer`}
             style={{ fontFamily: 'inherit' }}
           >
-            <option value="">Select orchestrator...</option>
-            {orchestrators.map((agent) => (
+            <option value="">Select agent...</option>
+            {eligibleAgents.map((agent) => (
               <option key={agent.id} value={agent.id}>{agent.name}</option>
             ))}
           </select>

package/src/lib/auth.ts

@@ -0,0 +1,17 @@
+export const AUTH_COOKIE_NAME = 'sc_auth'
+
+export function getCookieValue(cookieHeader: string | null | undefined, name: string): string {
+  if (!cookieHeader) return ''
+  const parts = cookieHeader.split(';')
+  for (const part of parts) {
+    const [rawKey, ...rest] = part.split('=')
+    if (!rawKey || rest.length === 0) continue
+    if (rawKey.trim() !== name) continue
+    try {
+      return decodeURIComponent(rest.join('=').trim())
+    } catch {
+      return rest.join('=').trim()
+    }
+  }
+  return ''
+}

package/src/lib/chat-streaming-state.test.ts

@@ -0,0 +1,108 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import type { Message } from '@/types'
+import {
+  mergeCompletedAssistantMessage,
+  messagesDiffer,
+  pruneStreamingAssistantArtifacts,
+  shouldHidePersistedStreamingAssistantMessage,
+  upsertStreamingAssistantArtifact,
+} from './chat-streaming-state'
+
+describe('chat-streaming-state', () => {
+  it('hides persisted streaming assistant artifacts while a local stream bubble is active', () => {
+    const message: Message = {
+      role: 'assistant',
+      text: 'partial',
+      time: 1,
+      streaming: true,
+    }
+
+    assert.equal(
+      shouldHidePersistedStreamingAssistantMessage(message, { localStreaming: true, displayText: 'live text' }),
+      true,
+    )
+    assert.equal(
+      shouldHidePersistedStreamingAssistantMessage(message, { localStreaming: true, displayText: '' }),
+      true,
+    )
+  })
+
+  it('replaces trailing streaming assistant messages with the completed assistant message', () => {
+    const messages: Message[] = [
+      { role: 'user', text: 'hello', time: 1 },
+      { role: 'assistant', text: 'partial 1', time: 2, streaming: true },
+      { role: 'assistant', text: 'partial 2', time: 3, streaming: true },
+    ]
+    const completed: Message = { role: 'assistant', text: 'final', time: 4 }
+
+    assert.deepEqual(mergeCompletedAssistantMessage(messages, completed), [
+      { role: 'user', text: 'hello', time: 1 },
+      { role: 'assistant', text: 'final', time: 4 },
+    ])
+  })
+
+  it('prunes stale streaming artifacts without touching later system messages', () => {
+    const messages: Message[] = [
+      { role: 'user', text: 'hello', time: 1 },
+      { role: 'assistant', text: 'partial', time: 10, streaming: true },
+      { role: 'assistant', text: 'approval card', time: 11, kind: 'system' },
+      { role: 'assistant', text: 'older partial', time: 12, streaming: true },
+      { role: 'assistant', text: 'previous run', time: 2, streaming: true },
+    ]
+
+    const changed = pruneStreamingAssistantArtifacts(messages, { minIndex: 1, minTime: 10 })
+
+    assert.equal(changed, true)
+    assert.deepEqual(messages, [
+      { role: 'user', text: 'hello', time: 1 },
+      { role: 'assistant', text: 'approval card', time: 11, kind: 'system' },
+      { role: 'assistant', text: 'previous run', time: 2, streaming: true },
+    ])
+  })
+
+  it('replaces the current run partial with the latest artifact after system messages', () => {
+    const messages: Message[] = [
+      { role: 'user', text: 'hello', time: 1 },
+      { role: 'assistant', text: 'partial', time: 10, streaming: true },
+      { role: 'assistant', text: 'approval card', time: 11, kind: 'system' },
+    ]
+
+    upsertStreamingAssistantArtifact(
+      messages,
+      { role: 'assistant', text: 'latest partial', time: 12, streaming: true },
+      { minIndex: 1, minTime: 10 },
+    )
+
+    assert.deepEqual(messages, [
+      { role: 'user', text: 'hello', time: 1 },
+      { role: 'assistant', text: 'approval card', time: 11, kind: 'system' },
+      { role: 'assistant', text: 'latest partial', time: 12, streaming: true },
+    ])
+  })
+
+  it('reuses the previous assistant slot when the server already persisted the same final text', () => {
+    const messages: Message[] = [
+      { role: 'user', text: 'hello', time: 1 },
+      { role: 'assistant', text: 'final', time: 2, kind: 'chat' },
+    ]
+    const completed: Message = { role: 'assistant', text: 'final', time: 3, kind: 'chat' }
+
+    assert.deepEqual(mergeCompletedAssistantMessage(messages, completed), [
+      { role: 'user', text: 'hello', time: 1 },
+      { role: 'assistant', text: 'final', time: 2, kind: 'chat' },
+    ])
+  })
+
+  it('detects same-length message updates during reconciliation', () => {
+    const previous: Message[] = [
+      { role: 'assistant', text: 'partial', time: 1, streaming: true },
+    ]
+    const next: Message[] = [
+      { role: 'assistant', text: 'final', time: 2, kind: 'chat' },
+    ]
+
+    assert.equal(messagesDiffer(next, previous), true)
+    assert.equal(messagesDiffer(next, next), false)
+  })
+})

package/src/lib/chat-streaming-state.ts

@@ -0,0 +1,108 @@
+import type { Message } from '@/types'
+
+interface StreamingArtifactWindow {
+  minIndex?: number
+  minTime?: number
+}
+
+function isStreamingAssistantMessage(
+  message: Message,
+  index: number,
+  opts: StreamingArtifactWindow,
+): boolean {
+  if (message.role !== 'assistant' || message.streaming !== true) return false
+  if (typeof opts.minIndex === 'number' && index < opts.minIndex) return false
+  if (typeof opts.minTime === 'number') {
+    if (typeof message.time !== 'number' || message.time < opts.minTime) return false
+  }
+  return true
+}
+
+export function shouldHidePersistedStreamingAssistantMessage(
+  message: Message,
+  opts: { localStreaming: boolean; displayText: string },
+): boolean {
+  return (
+    opts.localStreaming
+    && message.role === 'assistant'
+    && message.streaming === true
+  )
+}
+
+export function pruneStreamingAssistantArtifacts(
+  messages: Message[],
+  opts: StreamingArtifactWindow = {},
+): boolean {
+  const kept = messages.filter((message, index) => !isStreamingAssistantMessage(message, index, opts))
+  if (kept.length === messages.length) return false
+  messages.splice(0, messages.length, ...kept)
+  return true
+}
+
+export function upsertStreamingAssistantArtifact(
+  messages: Message[],
+  assistantMessage: Message,
+  opts: StreamingArtifactWindow = {},
+): boolean {
+  if (assistantMessage.role !== 'assistant' || assistantMessage.streaming !== true) {
+    throw new Error('upsertStreamingAssistantArtifact requires an assistant streaming message')
+  }
+  pruneStreamingAssistantArtifacts(messages, opts)
+  messages.push(assistantMessage)
+  return true
+}
+
+export function mergeCompletedAssistantMessage(messages: Message[], assistantMessage: Message): Message[] {
+  let end = messages.length
+  while (end > 0) {
+    const candidate = messages[end - 1]
+    if (candidate.role !== 'assistant' || candidate.streaming !== true) break
+    end -= 1
+  }
+  const base = messages.slice(0, end)
+  const last = base[base.length - 1]
+  if (
+    last
+    && last.role === 'assistant'
+    && (last.kind || 'chat') === (assistantMessage.kind || 'chat')
+    && last.text.trim() === assistantMessage.text.trim()
+  ) {
+    return [
+      ...base.slice(0, -1),
+      {
+        ...last,
+        ...assistantMessage,
+        time: last.time,
+      },
+    ]
+  }
+  return [...base, assistantMessage]
+}
+
+export function messageReconciliationKey(message: Message): string {
+  return JSON.stringify([
+    message.role,
+    message.kind || '',
+    message.text,
+    message.streaming === true,
+    message.replyToId || '',
+    message.bookmarked === true,
+    message.suggestions?.join('\u241f') || '',
+    (message.toolEvents || []).map((event) => [
+      event.name,
+      event.input,
+      event.output || '',
+      event.error === true,
+    ]),
+  ])
+}
+
+export function messagesDiffer(nextMessages: Message[], currentMessages: Message[]): boolean {
+  if (nextMessages.length !== currentMessages.length) return true
+  for (let i = 0; i < nextMessages.length; i += 1) {
+    if (messageReconciliationKey(nextMessages[i]) !== messageReconciliationKey(currentMessages[i])) {
+      return true
+    }
+  }
+  return false
+}

package/src/lib/chat.ts

@@ -27,7 +27,7 @@ export async function streamChat(
   }
 
   const key = getStoredAccessKey()
-  const res = await fetch(`/api/sessions/${sessionId}/chat`, {
+  const res = await fetch(`/api/chats/${sessionId}/chat`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

package/src/lib/{sessions.ts → chats.ts}

@@ -4,9 +4,11 @@ import type {
   ProviderInfo, Credential, Credentials, ProviderType, SessionType,
 } from '../types'
 
-export const fetchSessions = () => api<Sessions>('GET', '/sessions')
+export const fetchChats = () => api<Sessions>('GET', '/chats')
+/** @deprecated Use fetchChats */
+export const fetchSessions = fetchChats
 
-export const createSession = (
+export const createChat = (
   name: string,
   cwd: string,
   user: string,
@@ -16,23 +18,29 @@ export const createSession = (
   apiEndpoint?: string | null,
   sessionType?: SessionType,
   agentId?: string | null,
-  tools?: string[],
+  plugins?: string[],
   file?: string | null,
 ) =>
-  api<Session>('POST', '/sessions', {
+  api<Session>('POST', '/chats', {
     name, cwd: cwd || undefined, user,
     provider, model, credentialId, apiEndpoint,
-    sessionType, agentId, tools, file: file || undefined,
+    sessionType, agentId, plugins, file: file || undefined,
   })
+/** @deprecated Use createChat */
+export const createSession = createChat
 
-export const updateSession = (id: string, updates: Partial<Pick<Session, 'name' | 'cwd'>>) =>
-  api<Session>('PUT', `/sessions/${id}`, updates)
+export const updateChat = (id: string, updates: Partial<Pick<Session, 'name' | 'cwd'>>) =>
+  api<Session>('PUT', `/chats/${id}`, updates)
+/** @deprecated Use updateChat */
+export const updateSession = updateChat
 
-export const deleteSession = (id: string) =>
-  api<string>('DELETE', `/sessions/${id}`)
+export const deleteChat = (id: string) =>
+  api<string>('DELETE', `/chats/${id}`)
+/** @deprecated Use deleteChat */
+export const deleteSession = deleteChat
 
 export const fetchMessages = (id: string) =>
-  api<Message[]>('GET', `/sessions/${id}/messages`)
+  api<Message[]>('GET', `/chats/${id}/messages`)
 
 export interface PaginatedMessages {
   messages: Message[]
@@ -42,13 +50,15 @@ export interface PaginatedMessages {
 }
 
 export const fetchMessagesPaginated = (id: string, limit: number = 100) =>
-  api<PaginatedMessages>('GET', `/sessions/${id}/messages?limit=${limit}`)
+  api<PaginatedMessages>('GET', `/chats/${id}/messages?limit=${limit}`)
 
 export const clearMessages = (id: string) =>
-  api<string>('POST', `/sessions/${id}/clear`)
+  api<string>('POST', `/chats/${id}/clear`)
 
-export const stopSession = (id: string) =>
-  api<string>('POST', `/sessions/${id}/stop`)
+export const stopChat = (id: string) =>
+  api<string>('POST', `/chats/${id}/stop`)
+/** @deprecated Use stopChat */
+export const stopSession = stopChat
 
 export const fetchDirs = async () => {
   const data = await api<{ dirs: Directory[] }>('GET', '/dirs')
@@ -56,16 +66,16 @@ export const fetchDirs = async () => {
 }
 
 export const devServer = (id: string, action: 'start' | 'stop' | 'status') =>
-  api<DevServerStatus>('POST', `/sessions/${id}/devserver`, { action })
+  api<DevServerStatus>('POST', `/chats/${id}/devserver`, { action })
 
 export const checkBrowser = (id: string) =>
-  api<{ active: boolean }>('GET', `/sessions/${id}/browser`)
+  api<{ active: boolean }>('GET', `/chats/${id}/browser`)
 
 export const stopBrowser = (id: string) =>
-  api<string>('DELETE', `/sessions/${id}/browser`)
+  api<string>('DELETE', `/chats/${id}/browser`)
 
 export const deploy = (id: string, message: string) =>
-  api<DeployResult>('POST', `/sessions/${id}/deploy`, { message })
+  api<DeployResult>('POST', `/chats/${id}/deploy`, { message })
 
 export const fetchProviders = () => api<ProviderInfo[]>('GET', '/providers')
 

package/src/lib/openclaw-agent-id.test.ts

@@ -0,0 +1,14 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import { buildOpenClawMainSessionKey, normalizeOpenClawAgentId } from './openclaw-agent-id'
+
+test('normalizeOpenClawAgentId mirrors gateway-style normalization', () => {
+  assert.equal(normalizeOpenClawAgentId('OpenClaw Ops'), 'openclaw-ops')
+  assert.equal(normalizeOpenClawAgentId('  Agent / Research  '), 'agent-research')
+  assert.equal(normalizeOpenClawAgentId('main'), 'main')
+})
+
+test('buildOpenClawMainSessionKey uses normalized OpenClaw agent ids', () => {
+  assert.equal(buildOpenClawMainSessionKey('OpenClaw Ops'), 'agent:openclaw-ops:main')
+  assert.equal(buildOpenClawMainSessionKey('   '), null)
+})

package/src/lib/openclaw-agent-id.ts

@@ -0,0 +1,31 @@
+const VALID_ID_RE = /^[a-z0-9][a-z0-9_-]{0,63}$/i
+const INVALID_CHARS_RE = /[^a-z0-9_-]+/g
+const LEADING_DASH_RE = /^-+/
+const TRAILING_DASH_RE = /-+$/
+
+export function normalizeOpenClawAgentId(value: string | undefined | null): string {
+  const trimmed = (value ?? '').trim()
+  if (!trimmed) {
+    return 'main'
+  }
+  if (VALID_ID_RE.test(trimmed)) {
+    return trimmed.toLowerCase()
+  }
+  return (
+    trimmed
+      .toLowerCase()
+      .replace(INVALID_CHARS_RE, '-')
+      .replace(LEADING_DASH_RE, '')
+      .replace(TRAILING_DASH_RE, '')
+      .slice(0, 64)
+    || 'main'
+  )
+}
+
+export function buildOpenClawMainSessionKey(agentNameOrId: string | undefined | null): string | null {
+  const trimmed = (agentNameOrId ?? '').trim()
+  if (!trimmed) {
+    return null
+  }
+  return `agent:${normalizeOpenClawAgentId(trimmed)}:main`
+}