clawport-ui 0.6.0 → 0.6.2

package/README.md

@@ -1,5 +1,7 @@
 <div align="center">
 
+<img src="https://raw.githubusercontent.com/JohnRiceML/clawport-ui/main/clawport-logo.png" alt="ClawPort" width="160" />
+
 # ClawPort
 
 **A visual command centre for your AI agent team.**
@@ -14,7 +16,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, an activity console with live log streaming, 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, cost tracking, 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,6 +86,7 @@ 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.
+- **Cost Dashboard** -- Token usage and cost analysis across all cron jobs. Daily cost chart, per-job breakdown, model distribution, anomaly detection, week-over-week trends, and cache savings.
 - **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.

package/components/MobileSidebar.tsx

@@ -109,23 +109,16 @@ export function MobileSidebar({
               }}
             />
           ) : (
-            <span
+            <img
+              src="/clawport-logo.png"
+              alt=""
               style={{
-                width: '24px',
-                height: '24px',
-                borderRadius: '6px',
-                background: settings.accentColor
-                  ? `linear-gradient(135deg, ${settings.accentColor}, ${settings.accentColor}dd)`
-                  : 'transparent',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '13px',
+                width: '48px',
+                height: '48px',
+                objectFit: 'contain',
                 flexShrink: 0,
               }}
-            >
-              {settings.portalEmoji ?? '\ud83e\udd9e'}
-            </span>
+            />
           )}
           <span
             style={{
@@ -198,24 +191,16 @@ export function MobileSidebar({
                 }}
               />
             ) : (
-              <div
+              <img
+                src="/clawport-logo.png"
+                alt=""
                 style={{
-                  width: '36px',
-                  height: '36px',
-                  borderRadius: '10px',
-                  background: settings.accentColor
-                    ? `linear-gradient(135deg, ${settings.accentColor}, ${settings.accentColor}dd)`
-                    : 'transparent',
-                  boxShadow: 'var(--shadow-card)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: '18px',
+                  width: '72px',
+                  height: '72px',
+                  objectFit: 'contain',
                   flexShrink: 0,
                 }}
-              >
-                {settings.portalEmoji ?? '\ud83e\udd9e'}
-              </div>
+              />
             )}
             <div>
               <div

package/components/Sidebar.tsx

@@ -51,26 +51,16 @@ export function Sidebar() {
                 }}
               />
             ) : (
-              <div
+              <img
+                src="/clawport-logo.png"
+                alt=""
                 style={{
-                  width: '36px',
-                  height: '36px',
-                  borderRadius: '10px',
-                  background: settings.iconBgHidden
-                    ? 'transparent'
-                    : settings.accentColor
-                      ? `linear-gradient(135deg, ${settings.accentColor}, ${settings.accentColor}dd)`
-                      : 'transparent',
-                  boxShadow: settings.iconBgHidden ? 'none' : 'var(--shadow-card)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: settings.iconBgHidden ? '28px' : '18px',
+                  width: '72px',
+                  height: '72px',
+                  objectFit: 'contain',
                   flexShrink: 0,
                 }}
-              >
-                {settings.portalEmoji ?? '\ud83e\udd9e'}
-              </div>
+              />
             )}
             <div>
               <div

package/components/chat/ConversationView.tsx

@@ -5,6 +5,7 @@ import type { Agent } from '@/lib/types'
 import type { Conversation, ConversationStore, Message, MediaAttachment } from '@/lib/conversations'
 import { parseMedia, addMessage, updateLastMessage } from '@/lib/conversations'
 import { buildApiContent } from '@/lib/multimodal'
+import { generateId } from '@/lib/id'
 import { useSettings } from '@/app/settings-provider'
 import { FileAttachment } from './FileAttachment'
 import { MediaPreview } from './MediaPreview'
@@ -329,14 +330,14 @@ export function ConversationView({ agent, conversation, onUpdate, onBack }: Conv
     }
 
     const userMsg: Message = {
-      id: crypto.randomUUID(),
+      id: generateId(),
       role: 'user',
       content,
       timestamp: Date.now(),
       media: hasMedia ? mediaToSend : undefined,
     }
 
-    const assistantMsgId = crypto.randomUUID()
+    const assistantMsgId = generateId()
     const assistantMsg: Message = {
       id: assistantMsgId,
       role: 'assistant',
@@ -572,7 +573,7 @@ export function ConversationView({ agent, conversation, onUpdate, onBack }: Conv
       [agent.id]: {
         agentId: agent.id,
         messages: [{
-          id: crypto.randomUUID(),
+          id: generateId(),
           role: 'assistant' as const,
           content: `I'm ${agent.name}. ${agent.description} What do you need?`,
           timestamp: Date.now(),

package/components/kanban/TicketDetailPanel.tsx

@@ -6,6 +6,7 @@ import type { Agent } from '@/lib/types'
 import type { KanbanTicket, TicketStatus, TicketPriority } from '@/lib/kanban/types'
 import { PRIORITY_COLORS, ROLE_LABELS, COLUMNS } from '@/lib/kanban/types'
 import { AgentAvatar } from '@/components/AgentAvatar'
+import { generateId } from '@/lib/id'
 
 /* ── Chat message type (local to kanban) ─────────────── */
 
@@ -249,13 +250,13 @@ export function TicketDetailPanel({
     if (!text || isStreaming || !agent) return
 
     const userMsg: ChatMessage = {
-      id: crypto.randomUUID(),
+      id: generateId(),
       role: 'user',
       content: text,
       timestamp: Date.now(),
     }
 
-    const assistantMsgId = crypto.randomUUID()
+    const assistantMsgId = generateId()
     const assistantMsg: ChatMessage = {
       id: assistantMsgId,
       role: 'assistant',

package/docs/COMPONENTS.md

@@ -50,6 +50,8 @@ RootLayout (app/layout.tsx)
         CronsPage (app/crons/page.tsx)
           WeeklySchedule (components/crons/WeeklySchedule.tsx)
           PipelineGraph (components/crons/PipelineGraph.tsx)
+        CostsPage (app/costs/page.tsx)
+          CostsPage (components/costs/CostsPage.tsx)
         ActivityPage (app/activity/page.tsx)
           LogBrowser (components/activity/LogBrowser.tsx)
         MemoryPage (app/memory/page.tsx)
@@ -847,6 +849,31 @@ interface AgentNodeData {
 
 ---
 
+## Cost Components
+
+### CostsPage
+
+**File:** `components/costs/CostsPage.tsx`
+**Purpose:** Full cost dashboard with token usage analysis, daily cost chart, per-job breakdown, model distribution, anomaly detection, and week-over-week trends.
+
+**Key state:**
+- `summary` (useState) -- `CostSummary` fetched from `/api/costs`
+- `crons` (useState) -- `CronJob[]` for job name resolution
+- `hover` (useState) -- chart hover state for daily cost bars
+
+**Implementation:**
+- Fetches cost data from `/api/costs` (computed from cron run token usage)
+- Summary cards: total cost, top spender, week-over-week change (with trend arrows), cache savings
+- Daily cost bar chart (SVG) with hover tooltips
+- Per-job cost table sorted by total cost descending
+- Model breakdown showing token distribution percentages
+- Anomaly alerts for runs exceeding 5x median token usage
+- All cost computation in `lib/costs.ts` (pricing lookup, job aggregation, daily rollup, anomaly detection)
+
+**Used by:** `app/costs/page.tsx`
+
+---
+
 ## Activity Components
 
 ### ActivityPage

package/lib/conversations.ts

@@ -1,6 +1,7 @@
 'use client'
 
 import type { Agent } from './types'
+import { generateId } from './id'
 
 export type MediaType = 'image' | 'audio' | 'file'
 
@@ -56,7 +57,7 @@ export function getOrCreateConversation(store: ConversationStore, agent: Agent):
   return {
     agentId: agent.id,
     messages: [{
-      id: crypto.randomUUID(),
+      id: generateId(),
       role: 'assistant',
       content: `I'm ${agent.name}. ${agent.description} What do you need?`,
       timestamp: Date.now(),

package/lib/id.ts

@@ -0,0 +1,15 @@
+/**
+ * Generate a unique ID, with a fallback for non-secure contexts
+ * where crypto.randomUUID() is not available (e.g. HTTP, older browsers).
+ */
+export function generateId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  // Fallback: generate a UUID v4-like string
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0
+    const v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}

package/lib/kanban/automation.ts

@@ -1,6 +1,7 @@
 'use client'
 
 import type { KanbanTicket, TeamRole } from './types'
+import { generateId } from '../id'
 
 /* ── Role-specific work prompts ──────────────────────── */
 
@@ -159,8 +160,8 @@ export function persistWorkChat(
 ): void {
   const now = Date.now()
   const messages = [
-    { id: crypto.randomUUID(), role: 'user' as const, content: prompt, timestamp: now },
-    { id: crypto.randomUUID(), role: 'assistant' as const, content: response, timestamp: now + 1 },
+    { id: generateId(), role: 'user' as const, content: prompt, timestamp: now },
+    { id: generateId(), role: 'assistant' as const, content: response, timestamp: now + 1 },
   ]
 
   fetch(`/api/kanban/chat-history/${ticketId}`, {

package/lib/kanban/store.ts

@@ -1,6 +1,7 @@
 'use client'
 
 import type { KanbanTicket, TicketStatus, TicketPriority, WorkState } from './types'
+import { generateId } from '../id'
 
 export type KanbanStore = Record<string, KanbanTicket>
 
@@ -82,7 +83,7 @@ export function createTicket(
     workResult?: KanbanTicket['workResult']
   },
 ): KanbanStore {
-  const id = crypto.randomUUID()
+  const id = generateId()
   const now = Date.now()
   return {
     ...store,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clawport-ui",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Open-source dashboard for managing, monitoring, and chatting with your OpenClaw AI agents.",
   "homepage": "https://clawport.dev",
   "repository": {
@@ -25,6 +25,7 @@
   "files": [
     "app/",
     "bin/",
+    "clawport-logo.png",
     "components/",
     "docs/",
     "lib/",