clawport-ui 0.5.4 → 0.6.0

package/README.md

@@ -6,7 +6,7 @@
 
 [![npm version](https://img.shields.io/npm/v/clawport-ui.svg)](https://www.npmjs.com/package/clawport-ui)
 [![license](https://img.shields.io/npm/l/clawport-ui.svg)](LICENSE)
-[![tests](https://img.shields.io/badge/tests-442%20passed-brightgreen)](#testing)
+[![tests](https://img.shields.io/badge/tests-501%20passed-brightgreen)](#testing)
 
 [Website](https://clawport.dev) | [Setup Guide](SETUP.md) | [API Docs](docs/API.md) | [npm](https://www.npmjs.com/package/clawport-ui)
 
@@ -14,7 +14,7 @@
 
 ---
 
-ClawPort is an open-source dashboard for managing, monitoring, and talking directly to your [OpenClaw](https://openclaw.ai) AI agents. It connects to your local OpenClaw gateway and gives you an org chart, direct agent chat with vision and voice, a kanban board, cron monitoring, and a memory browser -- all in one place.
+ClawPort is an open-source dashboard for managing, monitoring, and talking directly to your [OpenClaw](https://openclaw.ai) AI agents. It connects to your local OpenClaw gateway and gives you an org chart, direct agent chat with vision and voice, a kanban board, cron monitoring, an activity console with live log streaming, and a memory browser -- all in one place.
 
 No separate AI API keys needed. Everything routes through your OpenClaw gateway.
 
@@ -84,7 +84,8 @@ npm run dev
 - **Chat** -- Streaming text chat, image attachments with vision, voice messages with waveform playback, file attachments, clipboard paste and drag-and-drop. Conversations persist locally.
 - **Kanban** -- Task board for managing work across agents. Drag-and-drop cards with agent assignment and chat context.
 - **Cron Monitor** -- Live status of all scheduled jobs. Filter by status, sort errors to top, expand for details. Auto-refreshes every 60 seconds.
-- **Memory Browser** -- Read team memory, long-term memory, and daily logs. Markdown rendering, JSON syntax highlighting, search, and download.
+- **Activity Console** -- Log browser for historical events plus a floating live stream widget. Click any log row to expand the raw JSON. The live stream widget persists across page navigation.
+- **Memory Browser** -- Read team memory, long-term memory, and daily logs. Markdown rendering, JSON syntax highlighting, search, and download. Guide tab with categorized best practices.
 - **Agent Detail** -- Full profile per agent: SOUL.md viewer, tools, hierarchy, crons, voice ID, and direct chat link.
 - **Five Themes** -- Dark, Glass, Color, Light, and System. All CSS custom properties -- switch instantly.
 - **Auto-Discovery** -- Automatically finds agents from your OpenClaw workspace. No config file needed.
@@ -167,7 +168,7 @@ clawport help     # Show usage
 ## Testing
 
 ```bash
-npm test             # 442 tests across 21 suites (Vitest)
+npm test             # 501 tests across 23 suites (Vitest)
 npx tsc --noEmit     # Type-check (zero errors)
 npx next build       # Production build
 ```

package/app/activity/page.tsx

@@ -0,0 +1,287 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import type { LogEntry, LogFilter, LogSummary } from '@/lib/types'
+import { Skeleton } from '@/components/ui/skeleton'
+import { RefreshCw, Radio } from 'lucide-react'
+import { ErrorState } from '@/components/ErrorState'
+import { LogBrowser } from '@/components/activity/LogBrowser'
+
+/* ── Time helpers ──────────────────────────────────────────────── */
+
+function timeAgo(dateStr: string): string {
+  const d = new Date(dateStr)
+  if (isNaN(d.getTime())) return '--'
+  const diff = Date.now() - d.getTime()
+  const mins = Math.floor(diff / 60000)
+  const hrs = Math.floor(diff / 3600000)
+  const days = Math.floor(diff / 86400000)
+  if (mins < 1) return 'just now'
+  if (mins < 60) return `${mins}m ago`
+  if (hrs < 24) return `${hrs}h ago`
+  return `${days}d ago`
+}
+
+/* ── Summary Cards ─────────────────────────────────────────────── */
+
+function TotalCard({ count }: { count: number }) {
+  return (
+    <div style={{
+      background: 'var(--material-regular)',
+      border: '1px solid var(--separator)',
+      borderRadius: 'var(--radius-md)',
+      padding: 'var(--space-4)',
+    }}>
+      <div style={{ fontSize: 'var(--text-caption1)', color: 'var(--text-tertiary)', fontWeight: 'var(--weight-medium)', marginBottom: 'var(--space-1)' }}>
+        Total Events
+      </div>
+      <div style={{ fontSize: 'var(--text-title2)', color: 'var(--text-primary)', fontWeight: 'var(--weight-bold)' }}>
+        {count}
+      </div>
+    </div>
+  )
+}
+
+function ErrorCard({ count }: { count: number }) {
+  const hasErrors = count > 0
+  return (
+    <div style={{
+      background: 'var(--material-regular)',
+      border: '1px solid var(--separator)',
+      borderRadius: 'var(--radius-md)',
+      padding: 'var(--space-4)',
+    }}>
+      <div style={{ fontSize: 'var(--text-caption1)', color: 'var(--text-tertiary)', fontWeight: 'var(--weight-medium)', marginBottom: 'var(--space-1)' }}>
+        Errors
+      </div>
+      <div className="flex items-center" style={{ gap: 'var(--space-2)' }}>
+        {hasErrors && (
+          <span className="animate-error-pulse" style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--system-red)', flexShrink: 0 }} />
+        )}
+        <span style={{
+          fontSize: 'var(--text-title2)',
+          fontWeight: 'var(--weight-bold)',
+          color: hasErrors ? 'var(--system-red)' : 'var(--system-green)',
+        }}>
+          {count}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function SourcesCard({ cron, config }: { cron: number; config: number }) {
+  return (
+    <div style={{
+      background: 'var(--material-regular)',
+      border: '1px solid var(--separator)',
+      borderRadius: 'var(--radius-md)',
+      padding: 'var(--space-4)',
+    }}>
+      <div style={{ fontSize: 'var(--text-caption1)', color: 'var(--text-tertiary)', fontWeight: 'var(--weight-medium)', marginBottom: 'var(--space-1)' }}>
+        Sources
+      </div>
+      <div className="flex items-center" style={{ gap: 'var(--space-3)' }}>
+        <div>
+          <span style={{ fontSize: 'var(--text-footnote)', fontWeight: 'var(--weight-semibold)', color: 'var(--system-blue)' }}>{cron}</span>
+          <span style={{ fontSize: 'var(--text-caption1)', color: 'var(--text-tertiary)', marginLeft: 4 }}>cron</span>
+        </div>
+        <div>
+          <span style={{ fontSize: 'var(--text-footnote)', fontWeight: 'var(--weight-semibold)', color: 'var(--system-purple)' }}>{config}</span>
+          <span style={{ fontSize: 'var(--text-caption1)', color: 'var(--text-tertiary)', marginLeft: 4 }}>config</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/* ── Page ──────────────────────────────────────────────────────── */
+
+export default function ActivityPage() {
+  const [entries, setEntries] = useState<LogEntry[]>([])
+  const [summary, setSummary] = useState<LogSummary | null>(null)
+  const [filter, setFilter] = useState<LogFilter>('all')
+  const [lastRefresh, setLastRefresh] = useState<Date>(new Date())
+  const [loading, setLoading] = useState(true)
+  const [refreshing, setRefreshing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [updatedAgo, setUpdatedAgo] = useState('just now')
+
+  const refresh = useCallback(() => {
+    setRefreshing(true)
+    setError(null)
+    fetch('/api/logs')
+      .then(r => {
+        if (!r.ok) throw new Error('Failed to load logs')
+        return r.json()
+      })
+      .then((data: { entries: LogEntry[]; summary: LogSummary }) => {
+        setEntries(data.entries)
+        setSummary(data.summary)
+        setLastRefresh(new Date())
+        setLoading(false)
+        setRefreshing(false)
+      })
+      .catch(err => {
+        setError(err instanceof Error ? err.message : 'Unknown error')
+        setLoading(false)
+        setRefreshing(false)
+      })
+  }, [])
+
+  // Initial load + polling
+  useEffect(() => {
+    refresh()
+    const interval = setInterval(refresh, 60000)
+    return () => clearInterval(interval)
+  }, [refresh])
+
+  // Updated ago ticker
+  useEffect(() => {
+    const tick = () => setUpdatedAgo(timeAgo(lastRefresh.toISOString()))
+    tick()
+    const interval = setInterval(tick, 30000)
+    return () => clearInterval(interval)
+  }, [lastRefresh])
+
+  if (error && entries.length === 0) {
+    return <ErrorState message={error} onRetry={refresh} />
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden animate-fade-in" style={{ background: 'var(--bg)' }}>
+      {/* ── Sticky header ──────────────────────────────────────── */}
+      <header
+        className="sticky top-0 z-10 flex-shrink-0"
+        style={{
+          background: 'var(--material-regular)',
+          backdropFilter: 'blur(40px) saturate(180%)',
+          WebkitBackdropFilter: 'blur(40px) saturate(180%)',
+          borderBottom: '1px solid var(--separator)',
+        }}
+      >
+        <div className="flex items-center justify-between" style={{ padding: 'var(--space-4) var(--space-6)' }}>
+          <div>
+            <h1 style={{
+              fontSize: 'var(--text-title1)',
+              fontWeight: 'var(--weight-bold)',
+              color: 'var(--text-primary)',
+              letterSpacing: '-0.5px',
+              lineHeight: 'var(--leading-tight)',
+            }}>
+              Activity Console
+            </h1>
+            {!loading && summary && (
+              <p style={{ fontSize: 'var(--text-footnote)', color: 'var(--text-secondary)', marginTop: 'var(--space-1)' }}>
+                {summary.totalEntries} event{summary.totalEntries !== 1 ? 's' : ''}
+                {summary.errorCount > 0 && (
+                  <span style={{ color: 'var(--system-red)' }}>
+                    {' \u00b7 '}{summary.errorCount} error{summary.errorCount !== 1 ? 's' : ''}
+                  </span>
+                )}
+              </p>
+            )}
+          </div>
+          <div className="flex items-center" style={{ gap: 'var(--space-3)' }}>
+            {/* Open Live Stream */}
+            <button
+              onClick={() => window.dispatchEvent(new CustomEvent('clawport:open-stream-widget'))}
+              className="focus-ring flex items-center"
+              style={{
+                padding: '6px 14px',
+                borderRadius: 'var(--radius-sm)',
+                border: 'none',
+                cursor: 'pointer',
+                fontSize: 'var(--text-footnote)',
+                fontWeight: 'var(--weight-semibold)',
+                gap: 6,
+                background: 'var(--accent-fill)',
+                color: 'var(--accent)',
+                transition: 'all 200ms var(--ease-smooth)',
+              }}
+            >
+              <Radio size={14} />
+              Open Live Stream
+            </button>
+
+            <span style={{ fontSize: 'var(--text-caption1)', color: 'var(--text-tertiary)' }}>
+              Updated {updatedAgo}
+            </span>
+            <button
+              onClick={refresh}
+              className="focus-ring"
+              aria-label="Refresh activity data"
+              style={{
+                width: 32,
+                height: 32,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 'var(--radius-sm)',
+                border: 'none',
+                background: 'transparent',
+                color: 'var(--text-tertiary)',
+                cursor: 'pointer',
+                transition: 'color 150ms var(--ease-smooth)',
+              }}
+            >
+              <RefreshCw size={16} className={refreshing ? 'animate-spin' : ''} />
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* ── Scrollable content ─────────────────────────────────── */}
+      <div className="flex-1 overflow-y-auto flex flex-col" style={{ padding: 'var(--space-4) var(--space-6) var(--space-6)', minHeight: 0 }}>
+        {loading ? (
+          <>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--space-3)', marginBottom: 'var(--space-4)' }} className="summary-cards-grid">
+              {[1, 2, 3].map(i => (
+                <div key={i} style={{ background: 'var(--material-regular)', border: '1px solid var(--separator)', borderRadius: 'var(--radius-md)', padding: 'var(--space-4)' }}>
+                  <Skeleton style={{ width: 80, height: 10, marginBottom: 8 }} />
+                  <Skeleton style={{ width: 48, height: 20 }} />
+                </div>
+              ))}
+            </div>
+            <div style={{ borderRadius: 'var(--radius-md)', overflow: 'hidden', background: 'var(--material-regular)' }}>
+              {[1, 2, 3, 4, 5].map(i => (
+                <div key={i} className="flex items-center" style={{ padding: 'var(--space-3) var(--space-4)', borderBottom: i < 5 ? '1px solid var(--separator)' : undefined, gap: 'var(--space-3)' }}>
+                  <Skeleton className="flex-shrink-0" style={{ width: 8, height: 8, borderRadius: '50%' }} />
+                  <Skeleton style={{ width: 120, height: 12 }} />
+                  <Skeleton style={{ width: 50, height: 18, borderRadius: 4 }} />
+                  <Skeleton style={{ width: 200, height: 14, flex: 1 }} />
+                </div>
+              ))}
+            </div>
+          </>
+        ) : (
+          <>
+            {/* Summary cards */}
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-3)', marginBottom: 'var(--space-4)' }} className="summary-cards-grid">
+              <TotalCard count={summary?.totalEntries ?? 0} />
+              <ErrorCard count={summary?.errorCount ?? 0} />
+              <SourcesCard cron={summary?.sources.cron ?? 0} config={summary?.sources.config ?? 0} />
+            </div>
+
+            {/* Log browser */}
+            <LogBrowser
+              entries={entries}
+              summary={summary}
+              loading={false}
+              filter={filter}
+              onFilterChange={setFilter}
+            />
+          </>
+        )}
+      </div>
+
+      <style>{`
+        @media (max-width: 640px) {
+          .summary-cards-grid {
+            grid-template-columns: 1fr !important;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}

package/app/api/costs/route.ts

@@ -0,0 +1,14 @@
+import { getCronRuns } from '@/lib/cron-runs'
+import { computeCostSummary } from '@/lib/costs'
+import { apiErrorResponse } from '@/lib/api-error'
+import { NextResponse } from 'next/server'
+
+export async function GET() {
+  try {
+    const runs = getCronRuns()
+    const summary = computeCostSummary(runs)
+    return NextResponse.json(summary)
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to compute costs')
+  }
+}

package/app/api/logs/route.ts

@@ -0,0 +1,18 @@
+import { getLogEntries, computeLogSummary } from '@/lib/logs'
+import { apiErrorResponse } from '@/lib/api-error'
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  try {
+    const source = request.nextUrl.searchParams.get('source') ?? undefined
+    const limitParam = request.nextUrl.searchParams.get('limit')
+    const limit = limitParam ? parseInt(limitParam, 10) : undefined
+
+    const entries = getLogEntries({ source, limit })
+    const summary = computeLogSummary(entries)
+
+    return NextResponse.json({ entries, summary })
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to load logs')
+  }
+}

package/app/api/logs/stream/route.ts

@@ -0,0 +1,103 @@
+import { spawn } from 'child_process'
+import { requireEnv } from '@/lib/env'
+
+const MAX_LIFETIME_MS = 10 * 60 * 1000 // 10 minutes
+const HEARTBEAT_INTERVAL_MS = 15 * 1000 // 15 seconds
+
+export async function GET(request: Request) {
+  const encoder = new TextEncoder()
+  let child: ReturnType<typeof spawn> | null = null
+  let heartbeat: ReturnType<typeof setInterval> | null = null
+  let lifetime: ReturnType<typeof setTimeout> | null = null
+
+  const stream = new ReadableStream({
+    start(controller) {
+      const openclawBin = requireEnv('OPENCLAW_BIN')
+
+      try {
+        child = spawn(openclawBin, ['logs', '--follow', '--json'], {
+          stdio: ['ignore', 'pipe', 'pipe'],
+        })
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : 'Failed to spawn openclaw'
+        controller.enqueue(encoder.encode(`event: error\ndata: ${JSON.stringify({ error: msg })}\n\n`))
+        controller.close()
+        return
+      }
+
+      let buffer = ''
+
+      child.stdout?.on('data', (chunk: Buffer) => {
+        buffer += chunk.toString()
+        const lines = buffer.split('\n')
+        buffer = lines.pop() || ''
+        for (const line of lines) {
+          if (!line.trim()) continue
+          controller.enqueue(encoder.encode(`data: ${line}\n\n`))
+        }
+      })
+
+      child.stderr?.on('data', (chunk: Buffer) => {
+        const msg = chunk.toString().trim()
+        if (msg) {
+          controller.enqueue(encoder.encode(`event: error\ndata: ${JSON.stringify({ error: msg })}\n\n`))
+        }
+      })
+
+      child.on('error', (err) => {
+        controller.enqueue(encoder.encode(`event: error\ndata: ${JSON.stringify({ error: err.message })}\n\n`))
+        cleanup()
+        controller.close()
+      })
+
+      child.on('close', (code) => {
+        if (code !== null && code !== 0) {
+          controller.enqueue(encoder.encode(`event: error\ndata: ${JSON.stringify({ error: `Process exited with code ${code}` })}\n\n`))
+        }
+        cleanup()
+        controller.close()
+      })
+
+      // Heartbeat to prevent proxy timeouts
+      heartbeat = setInterval(() => {
+        try {
+          controller.enqueue(encoder.encode(`: heartbeat\n\n`))
+        } catch {
+          // Controller may be closed
+        }
+      }, HEARTBEAT_INTERVAL_MS)
+
+      // Max lifetime safety valve
+      lifetime = setTimeout(() => {
+        cleanup()
+        try {
+          controller.enqueue(encoder.encode(`event: error\ndata: ${JSON.stringify({ error: 'Stream max lifetime reached' })}\n\n`))
+          controller.close()
+        } catch {
+          // Already closed
+        }
+      }, MAX_LIFETIME_MS)
+
+      // Cleanup on client disconnect
+      request.signal.addEventListener('abort', () => {
+        cleanup()
+        try { controller.close() } catch { /* already closed */ }
+      })
+
+      function cleanup() {
+        if (heartbeat) { clearInterval(heartbeat); heartbeat = null }
+        if (lifetime) { clearTimeout(lifetime); lifetime = null }
+        if (child) { child.kill('SIGTERM'); child = null }
+      }
+    },
+  })
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache, no-transform',
+      'Connection': 'keep-alive',
+      'X-Accel-Buffering': 'no',
+    },
+  })
+}

package/app/costs/page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { CostsPage } from '@/components/costs/CostsPage'
+
+export default function CostsRoute() {
+  return <CostsPage />
+}

package/app/layout.tsx

@@ -5,6 +5,7 @@ import { SettingsProvider } from './settings-provider';
 import { Sidebar } from '@/components/Sidebar';
 import { DynamicFavicon } from '@/components/DynamicFavicon';
 import { OnboardingWizard } from '@/components/OnboardingWizard';
+import { LiveStreamWidget } from '@/components/LiveStreamWidget';
 
 export const metadata: Metadata = {
   title: 'ClawPort -- Command Centre',
@@ -23,6 +24,7 @@ export default function RootLayout({
           <SettingsProvider>
             <DynamicFavicon />
             <OnboardingWizard />
+            <LiveStreamWidget />
             <div
               className="flex h-screen overflow-hidden"
               style={{ background: 'var(--bg)' }}