clawport-ui 0.8.2 → 0.8.5

package/README.md

@@ -8,7 +8,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-536%20passed-brightgreen)](#testing)
+[![tests](https://img.shields.io/badge/tests-781%20passed-brightgreen)](#testing)
 
 [Website](https://clawport.dev) | [Setup Guide](SETUP.md) | [API Docs](docs/API.md) | [npm](https://www.npmjs.com/package/clawport-ui)
 
@@ -20,6 +20,24 @@ ClawPort is an open-source dashboard for managing, monitoring, and talking direc
 
 No separate AI API keys needed. Everything routes through your OpenClaw gateway.
 
+<img src="docs/screenshots/org-map.png" alt="Org Map" width="100%" />
+
+<details>
+<summary><strong>More screenshots</strong></summary>
+
+| | |
+|---|---|
+| <img src="docs/screenshots/chat.png" alt="Agent Chat" /> | <img src="docs/screenshots/kanban.png" alt="Kanban Board" /> |
+| **Chat** -- streaming text, vision, voice, file attachments | **Kanban** -- drag-and-drop task board across agents |
+| <img src="docs/screenshots/pipelines.png" alt="Cron Pipelines" /> | <img src="docs/screenshots/cron-schedule.png" alt="Cron Schedule" /> |
+| **Pipelines** -- DAG visualization with health checks | **Schedule** -- weekly heatmap and job management |
+| <img src="docs/screenshots/activity.png" alt="Activity Console" /> | <img src="docs/screenshots/live-logs.png" alt="Live Logs" /> |
+| **Activity** -- historical log browser with JSON expansion | **Live Logs** -- real-time streaming widget |
+| <img src="docs/screenshots/costs.png" alt="Cost Dashboard" /> | <img src="docs/screenshots/memory.png" alt="Memory Browser" /> |
+| **Costs** -- token usage, anomalies, optimization insights | **Memory** -- team memory browser with markdown rendering |
+
+</details>
+
 ---
 
 ## Quick Start
@@ -171,7 +189,7 @@ clawport help     # Show usage
 ## Testing
 
 ```bash
-npm test             # 536 tests across 24 suites (Vitest)
+npm test             # 781 tests across 32 suites (Vitest)
 npx tsc --noEmit     # Type-check (zero errors)
 npx next build       # Production build
 ```
@@ -199,6 +217,7 @@ npx next build       # Production build
 | [docs/THEMING.md](docs/THEMING.md) | Theme system, CSS tokens, settings API |
 | [CONTRIBUTING.md](CONTRIBUTING.md) | How to contribute |
 | [CHANGELOG.md](CHANGELOG.md) | Version history |
+| [docs/OPENCLAW.md](docs/OPENCLAW.md) | OpenClaw integration reference |
 | [CLAUDE.md](CLAUDE.md) | Developer architecture guide |
 
 ---

package/app/agents/[id]/page.tsx

@@ -490,6 +490,22 @@ export default function AgentDetailPage({
             >
               {agent.title}
             </p>
+            {agent.model && (
+              <span
+                style={{
+                  display: "inline-block",
+                  marginTop: "var(--space-1)",
+                  fontSize: "var(--text-caption2)",
+                  fontFamily: "var(--font-mono)",
+                  color: "var(--text-tertiary)",
+                  background: "var(--fill-secondary)",
+                  padding: "1px 8px",
+                  borderRadius: 6,
+                }}
+              >
+                {agent.model.split("/").pop()}
+              </span>
+            )}
             {/* Color swatch */}
             <div
               style={{

package/app/agents-provider.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+import { useAgents, type UseAgentsResult } from '@/lib/useAgents'
+
+const AgentsContext = createContext<UseAgentsResult>({
+  agents: [],
+  loading: true,
+  error: null,
+  refresh: () => {},
+  lastUpdated: null,
+})
+
+export function AgentsProvider({ children }: { children: React.ReactNode }) {
+  const agentsState = useAgents()
+  return (
+    <AgentsContext.Provider value={agentsState}>
+      {children}
+    </AgentsContext.Provider>
+  )
+}
+
+export const useAgentsContext = () => useContext(AgentsContext)

package/app/api/agents/fingerprint/route.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from 'next/server'
+import { statSync, readdirSync, existsSync } from 'fs'
+import { join } from 'path'
+
+/**
+ * Lightweight fingerprint endpoint for agent change detection.
+ *
+ * Returns a cheap hash based on:
+ *   - agents/ directory mtime + entry count
+ *   - clawport/agents.json mtime (if exists)
+ *   - root SOUL.md mtime (if exists)
+ *
+ * Avoids the expensive parts of loadRegistry() (reading file content,
+ * execSync CLI calls, multi-workspace merging).
+ */
+export async function GET() {
+  const workspacePath = process.env.WORKSPACE_PATH
+
+  if (!workspacePath) {
+    return NextResponse.json({ fingerprint: 'no-workspace' })
+  }
+
+  const parts: (string | number)[] = []
+
+  // agents/ directory: mtime + entry count
+  const agentsDir = join(workspacePath, 'agents')
+  if (existsSync(agentsDir)) {
+    try {
+      const stat = statSync(agentsDir)
+      const entries = readdirSync(agentsDir)
+      parts.push(stat.mtimeMs, entries.length)
+    } catch {
+      parts.push('agents-err')
+    }
+  } else {
+    parts.push('no-agents-dir')
+  }
+
+  // clawport/agents.json user override mtime
+  const userRegistry = join(workspacePath, 'clawport', 'agents.json')
+  if (existsSync(userRegistry)) {
+    try {
+      parts.push(statSync(userRegistry).mtimeMs)
+    } catch {
+      parts.push('override-err')
+    }
+  }
+
+  // Root SOUL.md mtime
+  const rootSoul = join(workspacePath, 'SOUL.md')
+  if (existsSync(rootSoul)) {
+    try {
+      parts.push(statSync(rootSoul).mtimeMs)
+    } catch {
+      parts.push('soul-err')
+    }
+  }
+
+  return NextResponse.json({ fingerprint: JSON.stringify(parts) })
+}

package/app/api/chat/[id]/route.ts

@@ -93,7 +93,7 @@ export async function POST(
 
   try {
     const stream = await openai.chat.completions.create({
-      model: 'claude-sonnet-4-6',
+      model: agent.model || 'claude-sonnet-4-6',
       stream: true,
       messages: [
         { role: 'system' as const, content: systemPrompt },

package/app/api/kanban/chat/[id]/route.ts

@@ -90,7 +90,7 @@ Help the user with this ticket. Stay in character as ${agent.name}, ${agent.titl
 
   try {
     const stream = await openai.chat.completions.create({
-      model: 'claude-sonnet-4-6',
+      model: agent.model || 'claude-sonnet-4-6',
       stream: true,
       messages: [
         { role: 'system' as const, content: systemPrompt },

package/app/chat/page.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState, useCallback, useRef, Suspense } from 'react'
 import { useSearchParams, useRouter } from 'next/navigation'
 import type { Agent } from '@/lib/types'
+import { useAgentsContext } from '@/app/agents-provider'
 import { AgentList, AgentListMobile } from '@/components/chat/AgentList'
 import { ConversationView } from '@/components/chat/ConversationView'
 import {
@@ -13,20 +14,11 @@ import {
 function MessengerApp() {
   const router = useRouter()
   const searchParams = useSearchParams()
-  const [agents, setAgents] = useState<Agent[]>([])
+  const { agents, loading } = useAgentsContext()
   const [conversations, setConversations] = useState<ConversationStore>({})
   const [activeAgentId, setActiveAgentId] = useState<string | null>(searchParams.get('agent'))
-  const [loading, setLoading] = useState(true)
   const [mobileShowConversation, setMobileShowConversation] = useState(!!searchParams.get('agent'))
 
-  // Load agents
-  useEffect(() => {
-    fetch('/api/agents').then(r => r.json()).then((data: Agent[]) => {
-      setAgents(data)
-      setLoading(false)
-    })
-  }, [])
-
   // Load conversations from localStorage
   useEffect(() => {
     setConversations(loadConversations())

package/app/crons/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import type { Agent, CronJob, CronRun } from "@/lib/types";
+import { useAgentsContext } from "@/app/agents-provider";
 import type { Pipeline } from "@/lib/cron-pipelines";
 import { formatDuration, timeAgo, nextRunLabel } from "@/lib/cron-utils";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -390,8 +391,8 @@ function RecentRuns({ jobId }: { jobId: string }) {
 /* ─── Component ─────────────────────────────────────────────────── */
 
 export default function CronsPage() {
+  const { agents } = useAgentsContext();
   const [crons, setCrons] = useState<CronJob[]>([]);
-  const [agents, setAgents] = useState<Agent[]>([]);
   const [pipelines, setPipelines] = useState<Pipeline[]>([]);
   const [filter, setFilter] = useState<Filter>("all");
   const [tab, setTab] = useState<Tab>("overview");
@@ -410,18 +411,12 @@ export default function CronsPage() {
   const refresh = useCallback(() => {
     setRefreshing(true);
     setError(null);
-    Promise.all([
-      fetch("/api/crons").then((r) => {
+    fetch("/api/crons")
+      .then((r) => {
         if (!r.ok) throw new Error("Failed to load crons");
         return r.json();
-      }),
-      fetch("/api/agents").then((r) => {
-        if (!r.ok) throw new Error("Failed to load agents");
-        return r.json();
-      }),
-    ])
-      .then(([cronData, a]) => {
-        // Backward compat: if response is a plain array, treat as crons-only
+      })
+      .then((cronData) => {
         if (Array.isArray(cronData)) {
           setCrons(cronData);
           setPipelines([]);
@@ -429,7 +424,6 @@ export default function CronsPage() {
           setCrons(cronData.crons);
           setPipelines(cronData.pipelines || []);
         }
-        setAgents(a);
         setLastRefresh(new Date());
         setLoading(false);
         setRefreshing(false);

package/app/kanban/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useCallback } from 'react'
 import type { Agent } from '@/lib/types'
+import { useAgentsContext } from '@/app/agents-provider'
 import type { KanbanTicket, TicketStatus, TicketPriority, TeamRole } from '@/lib/kanban/types'
 import {
   loadTickets,
@@ -23,30 +24,17 @@ import { Skeleton } from '@/components/ui/skeleton'
 
 export default function KanbanPage() {
   const [tickets, setTickets] = useState<KanbanStore>({})
-  const [agents, setAgents] = useState<Agent[]>([])
+  const { agents, loading: agentsLoading, error, refresh: refreshAgents } = useAgentsContext()
   const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
   const [createOpen, setCreateOpen] = useState(false)
   const [selectedTicket, setSelectedTicket] = useState<KanbanTicket | null>(null)
   const [filterAgentId, setFilterAgentId] = useState<string | null>(null)
 
   const loadData = useCallback(() => {
-    setLoading(true)
-    setError(null)
-
     // Load tickets from localStorage
     const stored = loadTickets()
     setTickets(stored)
-
-    // Load agents from API
-    fetch('/api/agents')
-      .then((r) => {
-        if (!r.ok) throw new Error('Failed to fetch agents')
-        return r.json()
-      })
-      .then((a: Agent[]) => setAgents(a))
-      .catch((e) => setError(e.message))
-      .finally(() => setLoading(false))
+    setLoading(false)
   }, [])
 
   useEffect(() => {

package/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import './globals.css';
 import { ThemeProvider } from './providers';
 import { SettingsProvider } from './settings-provider';
+import { AgentsProvider } from './agents-provider';
 import { Sidebar } from '@/components/Sidebar';
 import { DynamicFavicon } from '@/components/DynamicFavicon';
 import { OnboardingWizard } from '@/components/OnboardingWizard';
@@ -22,6 +23,7 @@ export default function RootLayout({
       <body>
         <ThemeProvider>
           <SettingsProvider>
+            <AgentsProvider>
             <DynamicFavicon />
             <OnboardingWizard />
             <LiveStreamWidget />
@@ -39,6 +41,7 @@ export default function RootLayout({
                 {children}
               </main>
             </div>
+          </AgentsProvider>
           </SettingsProvider>
         </ThemeProvider>
       </body>

package/app/page.tsx

@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation"
 import Link from "next/link"
 import dynamic from "next/dynamic"
 import type { Agent, CronJob } from "@/lib/types"
+import { useAgentsContext } from "@/app/agents-provider"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Map as MapIcon, LayoutGrid, List, X, MessageSquare, User } from "lucide-react"
 import { ErrorState } from "@/components/ErrorState"
@@ -117,38 +118,40 @@ const VIEW_OPTIONS: { key: View; label: string }[] = [
    ────────────────────────────────────────────── */
 export default function HomePage() {
   const router = useRouter()
-  const [agents, setAgents] = useState<Agent[]>([])
+  const { agents, loading: agentsLoading, error: agentsError, refresh: refreshAgents } = useAgentsContext()
   const [crons, setCrons] = useState<CronJob[]>([])
   const [selected, setSelected] = useState<Agent | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  const [cronsLoading, setCronsLoading] = useState(true)
+  const [cronsError, setCronsError] = useState<string | null>(null)
   const [view, setView] = useState<View>("map")
   const closeRef = useRef<HTMLButtonElement>(null)
 
-  const loadData = useCallback(() => {
-    setLoading(true)
-    setError(null)
-    Promise.all([
-      fetch("/api/agents").then((r) => {
-        if (!r.ok) throw new Error("Failed to fetch agents")
-        return r.json()
-      }),
-      fetch("/api/crons").then((r) => {
+  const loading = agentsLoading || cronsLoading
+  const error = agentsError || cronsError
+
+  const loadCrons = useCallback(() => {
+    setCronsLoading(true)
+    setCronsError(null)
+    fetch("/api/crons")
+      .then((r) => {
         if (!r.ok) throw new Error("Failed to fetch crons")
         return r.json()
-      }),
-    ])
-      .then(([a, cronData]) => {
-        setAgents(a)
+      })
+      .then((cronData) => {
         setCrons(Array.isArray(cronData) ? cronData : cronData.crons ?? [])
       })
-      .catch((e) => setError(e.message))
-      .finally(() => setLoading(false))
+      .catch((e) => setCronsError(e.message))
+      .finally(() => setCronsLoading(false))
   }, [])
 
   useEffect(() => {
-    loadData()
-  }, [loadData])
+    loadCrons()
+  }, [loadCrons])
+
+  const loadData = useCallback(() => {
+    refreshAgents()
+    loadCrons()
+  }, [refreshAgents, loadCrons])
 
   // Focus close button when panel opens
   useEffect(() => {

package/app/settings/page.tsx

@@ -1,9 +1,10 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { ChevronRight, RotateCcw, Trash2, Upload, X } from 'lucide-react'
+import { ChevronRight, RotateCcw, Trash2, Upload, X, RefreshCw } from 'lucide-react'
 import type { Agent } from '@/lib/types'
 import { useSettings } from '@/app/settings-provider'
+import { useAgentsContext } from '@/app/agents-provider'
 import { AgentAvatar } from '@/components/AgentAvatar'
 import { OnboardingWizard } from '@/components/OnboardingWizard'
 import { deleteOnServer } from '@/lib/conversations'
@@ -75,9 +76,10 @@ export default function SettingsPage() {
     resetAll,
   } = useSettings()
 
+  const { agents, refresh: refreshAgents, loading: agentsLoading } = useAgentsContext()
   const [wizardOpen, setWizardOpen] = useState(false)
-  const [agents, setAgents] = useState<Agent[]>([])
   const [expandedAgent, setExpandedAgent] = useState<string | null>(null)
+  const [rescanResult, setRescanResult] = useState<string | null>(null)
   const [nameValue, setNameValue] = useState(settings.portalName ?? '')
   const [subtitleValue, setSubtitleValue] = useState(settings.portalSubtitle ?? '')
   const [operatorNameValue, setOperatorNameValue] = useState(settings.operatorName ?? '')
@@ -93,19 +95,6 @@ export default function SettingsPage() {
     setEmojiValue(settings.portalEmoji ?? '')
   }, [settings.portalName, settings.portalSubtitle, settings.operatorName, settings.portalEmoji])
 
-  // Fetch agents
-  useEffect(() => {
-    fetch('/api/agents')
-      .then((r) => {
-        if (!r.ok) throw new Error(`HTTP ${r.status}`)
-        return r.json()
-      })
-      .then((data: unknown) => {
-        if (Array.isArray(data)) setAgents(data as Agent[])
-      })
-      .catch(() => setAgents([]))
-  }, [])
-
   async function handleIconUpload(file: File) {
     try {
       const dataUrl = await resizeImage(file, 200)
@@ -897,6 +886,35 @@ export default function SettingsPage() {
               <RotateCcw size={16} />
               Re-run Setup
             </button>
+            <button
+              onClick={() => {
+                refreshAgents()
+                setRescanResult(null)
+                // Show result after a short delay to let the fetch complete
+                setTimeout(() => {
+                  setRescanResult(`Found ${agents.length} agents`)
+                  setTimeout(() => setRescanResult(null), 2000)
+                }, 600)
+              }}
+              className="btn-scale"
+              style={{
+                padding: 'var(--space-2) var(--space-6)',
+                borderRadius: 'var(--radius-md)',
+                background: 'var(--fill-tertiary)',
+                color: 'var(--text-primary)',
+                border: 'none',
+                cursor: 'pointer',
+                fontSize: 'var(--text-body)',
+                fontWeight: 'var(--weight-semibold)',
+                transition: 'all 150ms var(--ease-spring)',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 'var(--space-2)',
+              }}
+            >
+              <RefreshCw size={16} className={agentsLoading ? 'animate-spin' : ''} />
+              {rescanResult || 'Rescan Agents'}
+            </button>
             <button
               onClick={() => {
                 if (window.confirm('Reset all settings to defaults?')) {

package/app/settings-provider.tsx

@@ -31,11 +31,12 @@ interface SettingsContextValue {
   setAgentOverride: (agentId: string, override: AgentOverride) => void
   clearAgentOverride: (agentId: string) => void
   getAgentDisplay: (agent: Agent) => AgentDisplay
+  setLiveStreamPosition: (pos: { x: number; y: number } | null) => void
   resetAll: () => void
 }
 
 const SettingsContext = createContext<SettingsContextValue>({
-  settings: { accentColor: null, portalName: null, portalSubtitle: null, portalEmoji: null, portalIcon: null, iconBgHidden: false, emojiOnly: false, operatorName: null, agentOverrides: {} },
+  settings: { accentColor: null, portalName: null, portalSubtitle: null, portalEmoji: null, portalIcon: null, iconBgHidden: false, emojiOnly: false, operatorName: null, agentOverrides: {}, liveStreamPosition: null },
   setAccentColor: () => {},
   setPortalName: () => {},
   setPortalSubtitle: () => {},
@@ -47,6 +48,7 @@ const SettingsContext = createContext<SettingsContextValue>({
   setAgentOverride: () => {},
   clearAgentOverride: () => {},
   getAgentDisplay: (agent) => ({ emoji: agent.emoji }),
+  setLiveStreamPosition: () => {},
   resetAll: () => {},
 })
 
@@ -156,6 +158,13 @@ export function SettingsProvider({ children }: { children: React.ReactNode }) {
     [settings, update],
   )
 
+  const setLiveStreamPosition = useCallback(
+    (pos: { x: number; y: number } | null) => {
+      update({ ...settings, liveStreamPosition: pos })
+    },
+    [settings, update],
+  )
+
   const getAgentDisplay = useCallback(
     (agent: Agent): AgentDisplay => {
       const override = settings.agentOverrides[agent.id]
@@ -179,6 +188,7 @@ export function SettingsProvider({ children }: { children: React.ReactNode }) {
       emojiOnly: false,
       operatorName: null,
       agentOverrides: {},
+      liveStreamPosition: null,
     }
     update(defaults)
   }, [update])
@@ -198,6 +208,7 @@ export function SettingsProvider({ children }: { children: React.ReactNode }) {
         setAgentOverride,
         clearAgentOverride,
         getAgentDisplay,
+        setLiveStreamPosition,
         resetAll,
       }}
     >

package/components/AgentNode.tsx

@@ -129,6 +129,24 @@ export function AgentNode({ data, selected }: NodeProps) {
             {reportCount} reports
           </span>
         )}
+        {agent.model && (
+          <span
+            style={{
+              fontSize: "var(--text-caption2)",
+              fontWeight: "var(--weight-medium)",
+              color: "var(--text-tertiary)",
+              background: "var(--fill-tertiary)",
+              padding: "1px 7px",
+              borderRadius: 10,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              maxWidth: 120,
+            }}
+          >
+            {agent.model.split("/").pop()}
+          </span>
+        )}
         {hasCrons && (
           <span
             style={{

package/components/GlobalSearch.tsx

@@ -12,7 +12,8 @@ import {
   Timer,
   Settings,
 } from 'lucide-react';
-import type { Agent, CronJob } from '@/lib/types';
+import type { CronJob } from '@/lib/types';
+import { useAgentsContext } from '@/app/agents-provider';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -110,7 +111,7 @@ export function GlobalSearch() {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
   const [activeIndex, setActiveIndex] = useState(0);
-  const [agents, setAgents] = useState<Agent[]>([]);
+  const { agents } = useAgentsContext();
   const [crons, setCrons] = useState<CronJob[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
@@ -149,17 +150,7 @@ export function GlobalSearch() {
     // Reset state
     setQuery('');
     setActiveIndex(0);
-    // Fetch agents
-    fetch('/api/agents')
-      .then((r) => {
-        if (!r.ok) throw new Error(`HTTP ${r.status}`);
-        return r.json();
-      })
-      .then((data: unknown) => {
-        if (Array.isArray(data)) setAgents(data as Agent[]);
-      })
-      .catch(() => setAgents([]));
-    // Fetch crons
+    // Fetch crons (agents come from context)
     fetch('/api/crons')
       .then((r) => {
         if (!r.ok) throw new Error(`HTTP ${r.status}`);