clawport-ui 0.1.0

package/app/api/agents/route.ts

@@ -0,0 +1,12 @@
+import { getAgents } from '@/lib/agents'
+import { apiErrorResponse } from '@/lib/api-error'
+import { NextResponse } from 'next/server'
+
+export async function GET() {
+  try {
+    const agents = await getAgents()
+    return NextResponse.json(agents)
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to load agents')
+  }
+}

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

@@ -0,0 +1,139 @@
+export const runtime = 'nodejs'
+
+import { getAgent } from '@/lib/agents'
+import { validateChatMessages } from '@/lib/validation'
+import { hasImageContent, extractImageAttachments, buildTextPrompt, sendViaOpenClaw } from '@/lib/anthropic'
+import OpenAI from 'openai'
+
+// Route through the OpenClaw gateway — no separate API key needed
+const openai = new OpenAI({
+  baseURL: 'http://localhost:18789/v1',
+  apiKey: process.env.OPENCLAW_GATEWAY_TOKEN,
+})
+
+const GATEWAY_TOKEN = process.env.OPENCLAW_GATEWAY_TOKEN || ''
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  const agent = await getAgent(id)
+
+  if (!agent) {
+    return new Response(JSON.stringify({ error: 'Agent not found' }), {
+      status: 404,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+
+  let body: unknown
+  try {
+    body = await request.json()
+  } catch {
+    return new Response(
+      JSON.stringify({ error: 'Invalid JSON in request body.' }),
+      { status: 400, headers: { 'Content-Type': 'application/json' } }
+    )
+  }
+
+  const result = validateChatMessages(body)
+  if (!result.ok) {
+    return new Response(
+      JSON.stringify({ error: result.error }),
+      { status: 400, headers: { 'Content-Type': 'application/json' } }
+    )
+  }
+
+  const { messages } = result
+
+  const rawBody = body as Record<string, unknown>
+  const operatorName = typeof rawBody.operatorName === 'string' ? rawBody.operatorName : 'Operator'
+
+  const systemPrompt = agent.soul
+    ? `${agent.soul}\n\nYou are speaking directly with ${operatorName}, your operator. Stay fully in character. Be concise — this is a live chat. 2-4 sentences unless detail is asked for. No em dashes.`
+    : `You are ${agent.name}, ${agent.title}. Respond in character. Be concise. No em dashes.`
+
+  // When the LATEST user message contains images, use the OpenClaw gateway's
+  // chat.send pipeline. Only check the last message — older messages with images
+  // should not force all future messages through this path.
+  const lastUserMsg = [...messages].reverse().find(m => m.role === 'user')
+  const latestHasImages = lastUserMsg ? hasImageContent([lastUserMsg]) : false
+
+  if (latestHasImages && GATEWAY_TOKEN) {
+    const attachments = extractImageAttachments([lastUserMsg!])
+    const textPrompt = buildTextPrompt(systemPrompt, messages)
+
+    const response = await sendViaOpenClaw({
+      gatewayToken: GATEWAY_TOKEN,
+      message: textPrompt,
+      attachments,
+    })
+
+    // Return as a non-streaming SSE response (complete text at once)
+    const encoder = new TextEncoder()
+    const content = response || 'I had trouble processing that image. Could you try again or describe what you see?'
+    const streamBody = new ReadableStream({
+      start(controller) {
+        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ content })}\n\n`))
+        controller.enqueue(encoder.encode('data: [DONE]\n\n'))
+        controller.close()
+      },
+    })
+
+    return new Response(streamBody, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+      },
+    })
+  }
+
+  try {
+    const stream = await openai.chat.completions.create({
+      model: 'claude-sonnet-4-6',
+      stream: true,
+      messages: [
+        { role: 'system' as const, content: systemPrompt },
+        ...messages.map(m => ({ role: m.role, content: m.content })),
+      ] as OpenAI.ChatCompletionMessageParam[],
+    })
+
+    const streamBody = new ReadableStream({
+      async start(controller) {
+        const encoder = new TextEncoder()
+        try {
+          for await (const chunk of stream) {
+            const content = chunk.choices[0]?.delta?.content || ''
+            if (content) {
+              controller.enqueue(
+                encoder.encode(`data: ${JSON.stringify({ content })}\n\n`)
+              )
+            }
+          }
+          controller.enqueue(encoder.encode('data: [DONE]\n\n'))
+        } catch (err) {
+          console.error('Stream error:', err)
+          controller.enqueue(encoder.encode('data: [DONE]\n\n'))
+        } finally {
+          controller.close()
+        }
+      },
+    })
+
+    return new Response(streamBody, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+      },
+    })
+  } catch (err) {
+    console.error('Chat API error:', err)
+    return new Response(
+      JSON.stringify({ error: 'Chat failed. Make sure OpenClaw gateway is running.' }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    )
+  }
+}

package/app/api/cron-runs/route.ts

@@ -0,0 +1,13 @@
+import { getCronRuns } from '@/lib/cron-runs'
+import { apiErrorResponse } from '@/lib/api-error'
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  try {
+    const jobId = request.nextUrl.searchParams.get('jobId') ?? undefined
+    const runs = getCronRuns(jobId)
+    return NextResponse.json(runs)
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to load cron runs')
+  }
+}

package/app/api/crons/route.ts

@@ -0,0 +1,12 @@
+import { getCrons } from '@/lib/crons'
+import { apiErrorResponse } from '@/lib/api-error'
+import { NextResponse } from 'next/server'
+
+export async function GET() {
+  try {
+    const crons = await getCrons()
+    return NextResponse.json(crons)
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to load cron jobs')
+  }
+}

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

@@ -0,0 +1,119 @@
+export const runtime = 'nodejs'
+
+import { getAgent } from '@/lib/agents'
+import OpenAI from 'openai'
+
+const openai = new OpenAI({
+  baseURL: 'http://localhost:18789/v1',
+  apiKey: process.env.OPENCLAW_GATEWAY_TOKEN,
+})
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  const agent = await getAgent(id)
+
+  if (!agent) {
+    return new Response(JSON.stringify({ error: 'Agent not found' }), {
+      status: 404,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+
+  let body: { messages?: unknown; ticket?: unknown }
+  try {
+    body = await request.json()
+  } catch {
+    return new Response(
+      JSON.stringify({ error: 'Invalid JSON in request body.' }),
+      { status: 400, headers: { 'Content-Type': 'application/json' } }
+    )
+  }
+
+  const { messages, ticket } = body as {
+    messages: { role: 'user' | 'assistant'; content: string }[]
+    ticket: {
+      title: string
+      description: string
+      status: string
+      priority: string
+      assigneeRole: string | null
+      workResult: string | null
+    }
+  }
+
+  if (!Array.isArray(messages)) {
+    return new Response(
+      JSON.stringify({ error: 'messages must be an array' }),
+      { status: 400, headers: { 'Content-Type': 'application/json' } }
+    )
+  }
+
+  // Build system prompt with ticket context
+  const workContext = ticket?.workResult
+    ? `\n\nYou already completed work on this ticket. Here is what you produced:\n${ticket.workResult}\n\nReference this work when answering follow-up questions. Build on it, don't repeat it unless asked.`
+    : ''
+
+  const ticketContext = ticket
+    ? `You are working on ticket: "${ticket.title}".
+Description: ${ticket.description || 'No description provided.'}
+Status: ${ticket.status}
+Priority: ${ticket.priority}
+Your role: ${ticket.assigneeRole || 'unassigned'}${workContext}
+
+Help the user with this ticket. Stay in character as ${agent.name}, ${agent.title}. Be concise — 2-4 sentences unless detail is asked for. No em dashes.`
+    : `You are ${agent.name}, ${agent.title}. Respond in character. Be concise. No em dashes.`
+
+  const systemPrompt = agent.soul
+    ? `${agent.soul}\n\n${ticketContext}`
+    : ticketContext
+
+  try {
+    const stream = await openai.chat.completions.create({
+      model: 'claude-sonnet-4-6',
+      stream: true,
+      messages: [
+        { role: 'system' as const, content: systemPrompt },
+        ...messages.map(m => ({ role: m.role, content: m.content })),
+      ] as OpenAI.ChatCompletionMessageParam[],
+    })
+
+    const streamBody = new ReadableStream({
+      async start(controller) {
+        const encoder = new TextEncoder()
+        try {
+          for await (const chunk of stream) {
+            const content = chunk.choices[0]?.delta?.content || ''
+            if (content) {
+              controller.enqueue(
+                encoder.encode(`data: ${JSON.stringify({ content })}\n\n`)
+              )
+            }
+          }
+          controller.enqueue(encoder.encode('data: [DONE]\n\n'))
+        } catch (err) {
+          console.error('Kanban chat stream error:', err)
+          controller.enqueue(encoder.encode('data: [DONE]\n\n'))
+        } finally {
+          controller.close()
+        }
+      },
+    })
+
+    return new Response(streamBody, {
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+      },
+    })
+  } catch (err) {
+    console.error('Kanban chat API error:', err)
+    return new Response(
+      JSON.stringify({ error: 'Chat failed. Make sure OpenClaw gateway is running.' }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    )
+  }
+}

package/app/api/kanban/chat-history/[ticketId]/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest } from 'next/server'
+import { getChatMessages, appendChatMessages, StoredChatMessage } from '@/lib/kanban/chat-store'
+import { apiErrorResponse } from '@/lib/api-error'
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ ticketId: string }> },
+) {
+  try {
+    const { ticketId } = await params
+    const messages = getChatMessages(ticketId)
+    return Response.json(messages)
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to load chat history')
+  }
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ ticketId: string }> },
+) {
+  try {
+    const { ticketId } = await params
+    const body = await req.json()
+    const messages: StoredChatMessage[] = body.messages
+
+    if (!Array.isArray(messages) || messages.length === 0) {
+      return Response.json({ error: 'messages array required' }, { status: 400 })
+    }
+
+    appendChatMessages(ticketId, messages)
+    return Response.json({ ok: true })
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to save chat history')
+  }
+}

package/app/api/memory/route.ts

@@ -0,0 +1,12 @@
+import { getMemoryFiles } from '@/lib/memory'
+import { apiErrorResponse } from '@/lib/api-error'
+import { NextResponse } from 'next/server'
+
+export async function GET() {
+  try {
+    const files = await getMemoryFiles()
+    return NextResponse.json(files)
+  } catch (err) {
+    return apiErrorResponse(err, 'Failed to load memory files')
+  }
+}

package/app/api/transcribe/route.ts

@@ -0,0 +1,37 @@
+export const runtime = 'nodejs'
+
+import OpenAI from 'openai'
+
+const openai = new OpenAI({
+  baseURL: 'http://localhost:18789/v1',
+  apiKey: process.env.OPENCLAW_GATEWAY_TOKEN,
+})
+
+export async function POST(request: Request) {
+  let formData: FormData
+  try {
+    formData = await request.formData()
+  } catch {
+    return Response.json({ error: 'Expected multipart form data' }, { status: 400 })
+  }
+
+  const audioFile = formData.get('audio')
+  if (!audioFile || !(audioFile instanceof File)) {
+    return Response.json({ error: 'Missing audio file' }, { status: 400 })
+  }
+
+  try {
+    const transcription = await openai.audio.transcriptions.create({
+      model: 'whisper-1',
+      file: audioFile,
+    })
+
+    return Response.json({ text: transcription.text })
+  } catch (err) {
+    console.error('Transcription error:', err)
+    return Response.json(
+      { error: 'Transcription failed. Check OpenClaw gateway.' },
+      { status: 500 }
+    )
+  }
+}

package/app/api/tts/route.ts

@@ -0,0 +1,42 @@
+export const runtime = 'nodejs'
+
+import OpenAI from 'openai'
+
+const openai = new OpenAI({
+  baseURL: 'http://localhost:18789/v1',
+  apiKey: process.env.OPENCLAW_GATEWAY_TOKEN,
+})
+
+export async function POST(request: Request) {
+  try {
+    const { text, voice } = await request.json()
+
+    if (!text || typeof text !== 'string') {
+      return new Response(JSON.stringify({ error: 'Missing or invalid "text" field' }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      })
+    }
+
+    const response = await openai.audio.speech.create({
+      model: 'tts-1',
+      voice: voice || 'alloy',
+      input: text,
+    })
+
+    const buffer = Buffer.from(await response.arrayBuffer())
+
+    return new Response(buffer, {
+      headers: {
+        'Content-Type': 'audio/mpeg',
+        'Content-Length': String(buffer.length),
+      },
+    })
+  } catch (err) {
+    console.error('TTS API error:', err)
+    return new Response(
+      JSON.stringify({ error: 'TTS failed. Make sure OpenClaw gateway is running.' }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    )
+  }
+}

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

@@ -0,0 +1,10 @@
+'use client'
+import { use, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function ChatRedirect({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+  const router = useRouter()
+  useEffect(() => { router.replace(`/chat?agent=${id}`) }, [id, router])
+  return null
+}

package/app/chat/page.tsx

@@ -0,0 +1,200 @@
+'use client'
+import { useEffect, useState, useCallback, 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
+} from '@/lib/conversations'
+
+function MessengerApp() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [agents, setAgents] = useState<Agent[]>([])
+  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())
+  }, [])
+
+  // Save conversations whenever they change
+  useEffect(() => {
+    if (Object.keys(conversations).length > 0) {
+      saveConversations(conversations)
+    }
+  }, [conversations])
+
+  // Set default active agent on desktop only (don't auto-select on mobile)
+  useEffect(() => {
+    if (!loading && agents.length > 0 && !activeAgentId) {
+      // On desktop (>= 768px), select first agent
+      if (window.innerWidth >= 768) {
+        setActiveAgentId(agents[0].id)
+      }
+    }
+  }, [loading, agents, activeAgentId])
+
+  const handleSelectAgent = useCallback((agent: Agent) => {
+    setActiveAgentId(agent.id)
+    setMobileShowConversation(true)
+    setConversations(prev => {
+      const conv = getOrCreateConversation(prev, agent)
+      const next = { ...prev, [agent.id]: conv }
+      return markRead(next, agent.id)
+    })
+    router.replace(`/chat?agent=${agent.id}`, { scroll: false })
+  }, [router])
+
+  const handleConversationUpdate = useCallback((agentId: string, updater: (prev: ConversationStore) => ConversationStore) => {
+    setConversations(prev => updater(prev))
+  }, [])
+
+  const handleMobileBack = useCallback(() => {
+    setMobileShowConversation(false)
+  }, [])
+
+  const activeAgent = agents.find(a => a.id === activeAgentId) || null
+
+  // Init conversation for active agent
+  useEffect(() => {
+    if (activeAgent) {
+      setConversations(prev => {
+        const conv = getOrCreateConversation(prev, activeAgent)
+        return markRead({ ...prev, [activeAgent.id]: conv }, activeAgent.id)
+      })
+    }
+  }, [activeAgent?.id])  // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div style={{ display: 'flex', height: '100%', background: 'var(--bg)' }}>
+      {/* Desktop sidebar — always visible on md+ */}
+      <AgentList
+        agents={agents}
+        conversations={conversations}
+        activeId={activeAgentId}
+        onSelect={handleSelectAgent}
+        loading={loading}
+      />
+
+      {/* Mobile agent list — shown when no conversation selected */}
+      <div
+        className={`md:hidden ${mobileShowConversation ? 'hidden' : 'flex flex-col'}`}
+        style={{
+          flex: 1,
+          height: '100%',
+        }}
+      >
+        <AgentListMobile
+          agents={agents}
+          conversations={conversations}
+          onSelect={handleSelectAgent}
+          loading={loading}
+        />
+      </div>
+
+      {/* Desktop conversation view — visible when agent selected on md+ */}
+      <div
+        className="hidden md:flex md:flex-col"
+        style={{ flex: 1, height: '100%' }}
+      >
+        {activeAgent && conversations[activeAgent.id] ? (
+          <ConversationView
+            key={activeAgent.id}
+            agent={activeAgent}
+            conversation={conversations[activeAgent.id]}
+            onUpdate={handleConversationUpdate}
+          />
+        ) : (
+          <EmptyState />
+        )}
+      </div>
+
+      {/* Mobile conversation view — shown full width when agent selected */}
+      {mobileShowConversation && activeAgent && conversations[activeAgent.id] && (
+        <div
+          className="flex flex-col md:hidden"
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 20,
+            background: 'var(--bg)',
+          }}
+        >
+          <ConversationView
+            key={activeAgent.id}
+            agent={activeAgent}
+            conversation={conversations[activeAgent.id]}
+            onUpdate={handleConversationUpdate}
+            onBack={handleMobileBack}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function EmptyState() {
+  return (
+    <div style={{
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'var(--bg)',
+      gap: 'var(--space-3)',
+      padding: 'var(--space-8)',
+    }}>
+      <div style={{ fontSize: 48, marginBottom: 'var(--space-2)' }}>
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+      </div>
+      <div style={{
+        fontSize: 'var(--text-title3)',
+        fontWeight: 'var(--weight-bold)',
+        color: 'var(--text-primary)',
+        letterSpacing: '-0.3px',
+      }}>
+        ClawPort Messages
+      </div>
+      <div style={{
+        fontSize: 'var(--text-subheadline)',
+        color: 'var(--text-secondary)',
+        textAlign: 'center',
+        lineHeight: 'var(--leading-relaxed)',
+      }}>
+        Select an agent from the sidebar to start chatting
+      </div>
+      <div style={{
+        fontSize: 'var(--text-caption1)',
+        color: 'var(--text-quaternary)',
+        marginTop: 'var(--space-2)',
+      }}>
+        Press Cmd+K to search agents
+      </div>
+    </div>
+  )
+}
+
+export default function ChatPage() {
+  return (
+    <Suspense>
+      <MessengerApp />
+    </Suspense>
+  )
+}