clawport-ui 0.7.0 → 0.8.1

package/.env.example

@@ -29,6 +29,10 @@ OPENCLAW_GATEWAY_TOKEN=your-gateway-token-here
 # Optional
 # ---------------------------------------------------------------------------
 
+# OpenClaw gateway port (default: 18789).
+# Change this if you configured a custom port in openclaw.json (gateway.http.port).
+# OPENCLAW_GATEWAY_PORT=18789
+
 # ElevenLabs API key — enables voice indicators on agent profiles.
 # Get one at: https://elevenlabs.io
 # Leave blank or remove this line if you don't need voice features.

package/README.md

@@ -42,7 +42,7 @@ After onboarding, verify the gateway is running:
 openclaw gateway status
 ```
 
-You should see your gateway URL (`localhost:18789`) and auth token. See the [OpenClaw docs](https://docs.openclaw.ai/getting-started) for more detail.
+You should see your gateway URL (default `localhost:18789`) and auth token. If you use a custom port, `clawport setup` will detect it automatically. See the [OpenClaw docs](https://docs.openclaw.ai/getting-started) for more detail.
 
 ### 2. Install ClawPort
 
@@ -100,7 +100,7 @@ npm run dev
 ClawPort reads your OpenClaw workspace to discover agents, then connects to the gateway for all AI operations:
 
 ```
-Browser  -->  ClawPort (Next.js)  -->  OpenClaw Gateway (localhost:18789)  -->  Claude
+Browser  -->  ClawPort (Next.js)  -->  OpenClaw Gateway (localhost:18789 default)  -->  Claude
                   |                          |
                   |                     Text: /v1/chat/completions (streaming SSE)
                   |                     Vision: openclaw gateway call chat.send (CLI)

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

@@ -4,10 +4,11 @@ import { getAgent } from '@/lib/agents'
 import { validateChatMessages } from '@/lib/validation'
 import { hasImageContent, extractImageAttachments, buildTextPrompt, sendViaOpenClaw } from '@/lib/anthropic'
 import OpenAI from 'openai'
+import { gatewayBaseUrl } from '@/lib/env'
 
 // Route through the OpenClaw gateway — no separate API key needed
 const openai = new OpenAI({
-  baseURL: 'http://localhost:18789/v1',
+  baseURL: gatewayBaseUrl(),
   apiKey: process.env.OPENCLAW_GATEWAY_TOKEN,
 })
 

package/app/api/conversations/[agentId]/route.ts

@@ -0,0 +1,77 @@
+import { NextRequest } from 'next/server'
+import { getMessages, appendMessages, clearConversation, validateAgentId, StoredMessage } from '@/lib/conversation-store'
+import { apiErrorResponse } from '@/lib/api-error'
+
+function isValidMessage(m: unknown): m is StoredMessage {
+  if (!m || typeof m !== 'object') return false
+  const msg = m as Record<string, unknown>
+  return (
+    typeof msg.id === 'string' && msg.id.length > 0 &&
+    (msg.role === 'user' || msg.role === 'assistant') &&
+    typeof msg.content === 'string' &&
+    (typeof msg.timestamp === 'number' || msg.timestamp === undefined)
+  )
+}
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ agentId: string }> },
+) {
+  try {
+    const { agentId } = await params
+    validateAgentId(agentId)
+    const messages = getMessages(agentId)
+    return Response.json(messages)
+  } catch (err) {
+    if (err instanceof Error && err.message.startsWith('Invalid agent ID')) {
+      return Response.json({ error: err.message }, { status: 400 })
+    }
+    return apiErrorResponse(err, 'Failed to load conversation')
+  }
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ agentId: string }> },
+) {
+  try {
+    const { agentId } = await params
+    validateAgentId(agentId)
+
+    const body = await req.json()
+    const messages: unknown[] = body.messages
+
+    if (!Array.isArray(messages) || messages.length === 0) {
+      return Response.json({ error: 'messages array required' }, { status: 400 })
+    }
+
+    if (!messages.every(isValidMessage)) {
+      return Response.json({ error: 'Invalid message format: each message needs id, role (user|assistant), and content' }, { status: 400 })
+    }
+
+    appendMessages(agentId, messages)
+    return Response.json({ ok: true })
+  } catch (err) {
+    if (err instanceof Error && err.message.startsWith('Invalid agent ID')) {
+      return Response.json({ error: err.message }, { status: 400 })
+    }
+    return apiErrorResponse(err, 'Failed to save conversation')
+  }
+}
+
+export async function DELETE(
+  _req: NextRequest,
+  { params }: { params: Promise<{ agentId: string }> },
+) {
+  try {
+    const { agentId } = await params
+    validateAgentId(agentId)
+    clearConversation(agentId)
+    return Response.json({ ok: true })
+  } catch (err) {
+    if (err instanceof Error && err.message.startsWith('Invalid agent ID')) {
+      return Response.json({ error: err.message }, { status: 400 })
+    }
+    return apiErrorResponse(err, 'Failed to clear conversation')
+  }
+}

package/app/api/conversations/route.ts

@@ -0,0 +1,11 @@
+import { listAgentIds } from '@/lib/conversation-store'
+import { apiErrorResponse } from '@/lib/api-error'
+
+export async function GET() {
+  try {
+    const ids = listAgentIds()
+    return Response.json(ids)
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to list conversations')
+  }
+}

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

@@ -2,9 +2,10 @@ export const runtime = 'nodejs'
 
 import { getAgent } from '@/lib/agents'
 import OpenAI from 'openai'
+import { gatewayBaseUrl } from '@/lib/env'
 
 const openai = new OpenAI({
-  baseURL: 'http://localhost:18789/v1',
+  baseURL: gatewayBaseUrl(),
   apiKey: process.env.OPENCLAW_GATEWAY_TOKEN,
 })
 

package/app/api/onboarded/route.ts

@@ -0,0 +1,24 @@
+import { NextRequest } from 'next/server'
+import { isOnboarded, setOnboarded } from '@/lib/conversation-store'
+import { apiErrorResponse } from '@/lib/api-error'
+
+export async function GET() {
+  try {
+    return Response.json({ onboarded: isOnboarded() })
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to check onboarded status')
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json()
+    if (typeof body.onboarded !== 'boolean') {
+      return Response.json({ error: 'onboarded boolean required' }, { status: 400 })
+    }
+    setOnboarded(body.onboarded)
+    return Response.json({ ok: true })
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to update onboarded status')
+  }
+}

package/app/api/transcribe/route.ts

@@ -1,9 +1,10 @@
 export const runtime = 'nodejs'
 
 import OpenAI from 'openai'
+import { gatewayBaseUrl } from '@/lib/env'
 
 const openai = new OpenAI({
-  baseURL: 'http://localhost:18789/v1',
+  baseURL: gatewayBaseUrl(),
   apiKey: process.env.OPENCLAW_GATEWAY_TOKEN,
 })
 

package/app/api/tts/route.ts

@@ -1,9 +1,10 @@
 export const runtime = 'nodejs'
 
 import OpenAI from 'openai'
+import { gatewayBaseUrl } from '@/lib/env'
 
 const openai = new OpenAI({
-  baseURL: 'http://localhost:18789/v1',
+  baseURL: gatewayBaseUrl(),
   apiKey: process.env.OPENCLAW_GATEWAY_TOKEN,
 })
 

package/app/chat/page.tsx

@@ -1,12 +1,13 @@
 'use client'
-import { useEffect, useState, useCallback, Suspense } from 'react'
+import { useEffect, useState, useCallback, useRef, Suspense } from 'react'
 import { useSearchParams, useRouter } from 'next/navigation'
 import type { Agent } from '@/lib/types'
 import { AgentList, AgentListMobile } from '@/components/chat/AgentList'
 import { ConversationView } from '@/components/chat/ConversationView'
 import {
   loadConversations, saveConversations, getOrCreateConversation,
-  markRead, type ConversationStore
+  markRead, type ConversationStore, type Message,
+  fetchConversation, syncToServer, fromStoredMessage,
 } from '@/lib/conversations'
 
 function MessengerApp() {
@@ -31,13 +32,72 @@ function MessengerApp() {
     setConversations(loadConversations())
   }, [])
 
-  // Save conversations whenever they change
+  // Save conversations whenever they change (localStorage + server sync)
+  const prevConversationsRef = useRef<ConversationStore>({})
   useEffect(() => {
     if (Object.keys(conversations).length > 0) {
       saveConversations(conversations)
+
+      // Sync only new messages to server (fire-and-forget)
+      const prev = prevConversationsRef.current
+      for (const agentId of Object.keys(conversations)) {
+        const prevMsgs = prev[agentId]?.messages || []
+        const currMsgs = conversations[agentId]?.messages || []
+        if (currMsgs.length > prevMsgs.length) {
+          const prevIds = new Set(prevMsgs.map((m: Message) => m.id))
+          const newMsgs = currMsgs.filter((m: Message) => !prevIds.has(m.id))
+          if (newMsgs.length > 0) {
+            syncToServer(agentId, newMsgs)
+          }
+        }
+      }
+      prevConversationsRef.current = conversations
     }
   }, [conversations])
 
+  // Background merge: fetch server conversations and merge with localStorage
+  const mergedRef = useRef(false)
+  useEffect(() => {
+    if (loading || agents.length === 0 || mergedRef.current) return
+    mergedRef.current = true
+
+    Promise.all(
+      agents.map(async (agent) => {
+        const serverMsgs = await fetchConversation(agent.id)
+        return { agentId: agent.id, messages: serverMsgs }
+      })
+    ).then(results => {
+      setConversations(prev => {
+        let merged = { ...prev }
+        for (const { agentId, messages: serverMsgs } of results) {
+          if (serverMsgs.length === 0) continue
+          const existing = merged[agentId]
+          if (!existing) {
+            // Server has messages but localStorage doesn't — create conversation
+            merged[agentId] = {
+              agentId,
+              messages: serverMsgs.map(fromStoredMessage),
+              unread: 0,
+              lastActivity: serverMsgs[serverMsgs.length - 1].timestamp,
+            }
+          } else {
+            // Merge by message ID, sort by timestamp
+            const existingIds = new Set(existing.messages.map((m: Message) => m.id))
+            const newFromServer = serverMsgs
+              .filter(m => !existingIds.has(m.id))
+              .map(fromStoredMessage)
+            if (newFromServer.length > 0) {
+              const allMessages = [...existing.messages, ...newFromServer]
+                .sort((a, b) => a.timestamp - b.timestamp)
+              merged[agentId] = { ...existing, messages: allMessages }
+            }
+          }
+        }
+        return merged
+      })
+    })
+  }, [loading, agents])
+
   // Set default active agent on desktop only (don't auto-select on mobile)
   useEffect(() => {
     if (!loading && agents.length > 0 && !activeAgentId) {

package/app/settings/page.tsx

@@ -6,6 +6,7 @@ import type { Agent } from '@/lib/types'
 import { useSettings } from '@/app/settings-provider'
 import { AgentAvatar } from '@/components/AgentAvatar'
 import { OnboardingWizard } from '@/components/OnboardingWizard'
+import { deleteOnServer } from '@/lib/conversations'
 
 // ---------------------------------------------------------------------------
 // Accent color presets
@@ -921,6 +922,38 @@ export default function SettingsPage() {
               <Trash2 size={16} />
               Reset All Settings
             </button>
+            <button
+              onClick={async () => {
+                if (!window.confirm('Delete all server-side conversation data?')) return
+                try {
+                  const res = await fetch('/api/conversations')
+                  if (!res.ok) throw new Error()
+                  const ids: string[] = await res.json()
+                  ids.forEach(id => deleteOnServer(id))
+                  alert('Cleared')
+                } catch {
+                  alert('Failed to clear server data')
+                }
+              }}
+              className="btn-scale"
+              style={{
+                padding: 'var(--space-2) var(--space-6)',
+                borderRadius: 'var(--radius-md)',
+                background: 'var(--system-red)',
+                color: '#fff',
+                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)',
+              }}
+            >
+              <Trash2 size={16} />
+              Clear Server Data
+            </button>
           </div>
         </section>
 

package/bin/clawport.mjs

@@ -84,9 +84,13 @@ function run(cmd, args = []) {
   child.on('close', (code) => process.exit(code ?? 0))
 }
 
+function getGatewayPort() {
+  return parseInt(process.env.OPENCLAW_GATEWAY_PORT || '18789', 10)
+}
+
 async function checkGateway() {
   try {
-    const res = await fetch('http://127.0.0.1:18789/', {
+    const res = await fetch(`http://127.0.0.1:${getGatewayPort()}/`, {
       signal: AbortSignal.timeout(3000),
     })
     return res.ok || res.status > 0
@@ -187,10 +191,11 @@ async function cmdStatus() {
   // Check gateway
   const gatewayUp = await checkGateway()
 
+  const gwPort = getGatewayPort()
   if (gatewayUp) {
-    console.log(`  ${green('+')} Gateway reachable at ${dim('localhost:18789')}`)
+    console.log(`  ${green('+')} Gateway reachable at ${dim(`localhost:${gwPort}`)}`)
   } else {
-    console.log(`  ${red('x')} Gateway not responding at ${dim('localhost:18789')}`)
+    console.log(`  ${red('x')} Gateway not responding at ${dim(`localhost:${gwPort}`)}`)
     console.log(`    ${dim('Start it with: openclaw gateway run')}`)
   }
 
@@ -254,7 +259,7 @@ async function cmdDoctor() {
 
   // 4. Gateway reachable
   const gatewayUp = await checkGateway()
-  check(gatewayUp, 'Gateway reachable at localhost:18789', 'Start it with: openclaw gateway run')
+  check(gatewayUp, `Gateway reachable at localhost:${getGatewayPort()}`, 'Start it with: openclaw gateway run')
 
   // 5. Configuration -- .env.local with required vars (package root or ~/.config/clawport-ui)
   const envPath = getEnvLocalPath()

package/components/OnboardingWizard.tsx

@@ -6,6 +6,7 @@ import { useSettings } from '@/app/settings-provider'
 import { useTheme } from '@/app/providers'
 import { THEMES } from '@/lib/themes'
 import type { ThemeId } from '@/lib/themes'
+import { fetchOnboarded, syncOnboarded } from '@/lib/conversations'
 
 // ---------------------------------------------------------------------------
 // Accent color presets (same as settings page)
@@ -105,8 +106,16 @@ export function OnboardingWizard({ forceOpen, onClose }: OnboardingWizardProps)
       setVisible(true)
       return
     }
-    if (typeof window !== 'undefined' && !localStorage.getItem('clawport-onboarded')) {
-      setVisible(true)
+    if (typeof window !== 'undefined') {
+      if (localStorage.getItem('clawport-onboarded')) return
+      // Check server-side flag before showing wizard
+      fetchOnboarded().then(onboarded => {
+        if (onboarded) {
+          localStorage.setItem('clawport-onboarded', '1')
+        } else {
+          setVisible(true)
+        }
+      })
     }
   }, [forceOpen]) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -181,6 +190,7 @@ export function OnboardingWizard({ forceOpen, onClose }: OnboardingWizardProps)
     } else {
       if (!forceOpen) {
         localStorage.setItem('clawport-onboarded', '1')
+        syncOnboarded(true)
       }
       setVisible(false)
       onClose?.()
@@ -442,7 +452,7 @@ export function OnboardingWizard({ forceOpen, onClose }: OnboardingWizardProps)
                     </div>
                     {cronsStatus === 'ok' && (
                       <div style={{ fontSize: 'var(--text-caption1)', color: 'var(--text-tertiary)' }}>
-                        Connected at localhost:18789
+                        Connected to gateway
                       </div>
                     )}
                     {cronsError && (

package/components/chat/ConversationView.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react'
 import { useRouter } from 'next/navigation'
 import type { Agent } from '@/lib/types'
 import type { Conversation, ConversationStore, Message, MediaAttachment } from '@/lib/conversations'
-import { parseMedia, addMessage, updateLastMessage } from '@/lib/conversations'
+import { parseMedia, addMessage, updateLastMessage, deleteOnServer } from '@/lib/conversations'
 import { buildApiContent } from '@/lib/multimodal'
 import { generateId } from '@/lib/id'
 import { useSettings } from '@/app/settings-provider'
@@ -633,6 +633,7 @@ export function ConversationView({ agent, conversation, onUpdate, onBack }: Conv
   ), [])
 
   function clearChat() {
+    deleteOnServer(agent.id)
     onUpdate(agent.id, prev => ({
       ...prev,
       [agent.id]: {
@@ -724,7 +725,7 @@ export function ConversationView({ agent, conversation, onUpdate, onBack }: Conv
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
             }}>
-              {agent.title}
+              {agent.title}{messages.length > 1 && ' · Synced'}
             </div>
           </div>
         </div>