clawport-ui 0.6.7 → 0.8.0

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/activity/page.tsx

@@ -2,26 +2,12 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import type { LogEntry, LogFilter, LogSummary } from '@/lib/types'
+import { timeAgo } from '@/lib/cron-utils'
 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 }) {
@@ -201,7 +187,7 @@ export default function ActivityPage() {
               }}
             >
               <Radio size={14} />
-              Open Live Stream
+              Open Live Logs
             </button>
 
             <span style={{ fontSize: 'var(--text-caption1)', color: 'var(--text-tertiary)' }}>

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/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/pipelines/route.ts

@@ -0,0 +1,53 @@
+import { NextResponse } from "next/server"
+import { existsSync, mkdirSync, writeFileSync } from "fs"
+import { join } from "path"
+import { loadPipelines } from "@/lib/cron-pipelines.server"
+
+export async function GET() {
+  return NextResponse.json(loadPipelines())
+}
+
+export async function POST(req: Request) {
+  const workspacePath = process.env.WORKSPACE_PATH
+  if (!workspacePath) {
+    return NextResponse.json({ error: "WORKSPACE_PATH not set" }, { status: 500 })
+  }
+
+  const body = await req.json()
+
+  // Validate: must be array
+  if (!Array.isArray(body)) {
+    return NextResponse.json({ error: "Must be an array" }, { status: 400 })
+  }
+
+  // Validate each pipeline
+  for (let i = 0; i < body.length; i++) {
+    const p = body[i]
+    if (typeof p.name !== "string" || !p.name.trim()) {
+      return NextResponse.json({ error: `Pipeline ${i}: missing "name" string` }, { status: 400 })
+    }
+    if (!Array.isArray(p.edges)) {
+      return NextResponse.json({ error: `Pipeline "${p.name}": missing "edges" array` }, { status: 400 })
+    }
+    for (let j = 0; j < p.edges.length; j++) {
+      const e = p.edges[j]
+      if (typeof e.from !== "string" || typeof e.to !== "string" || typeof e.artifact !== "string") {
+        return NextResponse.json(
+          { error: `Pipeline "${p.name}", edge ${j}: requires "from", "to", and "artifact" strings` },
+          { status: 400 },
+        )
+      }
+    }
+  }
+
+  // Ensure clawport/ dir exists
+  const dir = join(workspacePath, "clawport")
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true })
+  }
+
+  // Write pipelines.json
+  writeFileSync(join(dir, "pipelines.json"), JSON.stringify(body, null, 2) + "\n", "utf-8")
+
+  return NextResponse.json({ ok: true })
+}

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/api/usage/stream/route.ts

@@ -0,0 +1,75 @@
+import { fetchClaudeCodeUsage } from '@/lib/claude-usage'
+
+const POLL_INTERVAL_MS = 60 * 1000 // 60 seconds
+const HEARTBEAT_INTERVAL_MS = 15 * 1000
+const MAX_LIFETIME_MS = 30 * 60 * 1000 // 30 minutes
+
+export async function GET(request: Request) {
+  const encoder = new TextEncoder()
+
+  const stream = new ReadableStream({
+    start(controller) {
+      let poll: ReturnType<typeof setInterval> | null = null
+      let heartbeat: ReturnType<typeof setInterval> | null = null
+      let lifetime: ReturnType<typeof setTimeout> | null = null
+
+      function send(data: string) {
+        try {
+          controller.enqueue(encoder.encode(`data: ${data}\n\n`))
+        } catch { /* controller closed */ }
+      }
+
+      let lastGood: Awaited<ReturnType<typeof fetchClaudeCodeUsage>> = null
+
+      async function tick() {
+        try {
+          const usage = await fetchClaudeCodeUsage()
+          if (usage) lastGood = usage
+          send(JSON.stringify({ type: 'usage', data: usage ?? lastGood }))
+        } catch {
+          send(JSON.stringify({ type: 'usage', data: lastGood }))
+        }
+      }
+
+      // Immediate first fetch
+      tick()
+
+      // Poll every 60s
+      poll = setInterval(tick, POLL_INTERVAL_MS)
+
+      // Heartbeat to prevent proxy timeouts
+      heartbeat = setInterval(() => {
+        try {
+          controller.enqueue(encoder.encode(`: heartbeat\n\n`))
+        } catch { /* closed */ }
+      }, HEARTBEAT_INTERVAL_MS)
+
+      // Max lifetime safety valve
+      lifetime = setTimeout(() => {
+        cleanup()
+        try { 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 (poll) { clearInterval(poll); poll = null }
+        if (heartbeat) { clearInterval(heartbeat); heartbeat = null }
+        if (lifetime) { clearTimeout(lifetime); lifetime = 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/crons/page.tsx

@@ -4,51 +4,14 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import type { Agent, CronJob, CronRun } from "@/lib/types";
 import type { Pipeline } from "@/lib/cron-pipelines";
-import { formatDuration } from "@/lib/cron-utils";
+import { formatDuration, timeAgo, nextRunLabel } from "@/lib/cron-utils";
 import { Skeleton } from "@/components/ui/skeleton";
 import { RefreshCw, BarChart3, Calendar, GitBranch, Copy, Check } from "lucide-react";
 import { ErrorState } from "@/components/ErrorState";
 import { WeeklySchedule } from "@/components/crons/WeeklySchedule";
 import { PipelineGraph } from "@/components/crons/PipelineGraph";
-
-/* ─── Time helpers ──────────────────────────────────────────────── */
-
-function timeAgo(dateStr: string | null): string {
-  if (!dateStr) return "never";
-  const d = new Date(dateStr);
-  if (isNaN(d.getTime())) return "\u2014";
-  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 (diff < 0) {
-    const absDiff = Math.abs(diff);
-    const m = Math.floor(absDiff / 60000);
-    const h = Math.floor(absDiff / 3600000);
-    const dy = Math.floor(absDiff / 86400000);
-    if (m < 60) return `in ${m}m`;
-    if (h < 24) return `in ${h}h`;
-    return `in ${dy}d`;
-  }
-  if (mins < 1) return "just now";
-  if (mins < 60) return `${mins}m ago`;
-  if (hrs < 24) return `${hrs}h ago`;
-  return `${days}d ago`;
-}
-
-function nextRunLabel(dateStr: string | null): string {
-  if (!dateStr) return "not scheduled";
-  const d = new Date(dateStr);
-  if (isNaN(d.getTime())) return "\u2014";
-  const diff = d.getTime() - Date.now();
-  if (diff < 0) return "overdue";
-  const mins = Math.floor(diff / 60000);
-  const hrs = Math.floor(diff / 3600000);
-  const days = Math.floor(diff / 86400000);
-  if (mins < 60) return `in ${mins}m`;
-  if (hrs < 24) return `in ${hrs}h`;
-  return `in ${days}d`;
-}
+import { PipelineDetailPanel } from "@/components/crons/PipelineDetailPanel";
+import { PipelineWizard } from "@/components/crons/PipelineWizard";
 
 /* ─── Types ─────────────────────────────────────────────────────── */
 
@@ -439,6 +402,8 @@ export default function CronsPage() {
   const [error, setError] = useState<string | null>(null);
   const [updatedAgo, setUpdatedAgo] = useState("just now");
   const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [wizardOpen, setWizardOpen] = useState(false);
+  const [selectedPipelineJob, setSelectedPipelineJob] = useState<string | null>(null);
 
   const pillsRef = useRef<HTMLDivElement>(null);
 
@@ -862,11 +827,46 @@ export default function CronsPage() {
             {tab === "schedule" && <WeeklySchedule crons={crons} />}
 
             {/* ─── PIPELINES TAB ─────────────────────────────── */}
-            {tab === "pipelines" && <PipelineGraph crons={crons} agents={agents} pipelines={pipelines} />}
+            {tab === "pipelines" && (
+              <PipelineGraph
+                crons={crons}
+                agents={agents}
+                pipelines={pipelines}
+                onSetupClick={() => setWizardOpen(true)}
+                onEditClick={() => setWizardOpen(true)}
+                onClearClick={() => {
+                  fetch("/api/pipelines", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify([]),
+                  }).then(() => refresh())
+                }}
+                onJobSelect={setSelectedPipelineJob}
+                selectedJob={selectedPipelineJob}
+              />
+            )}
           </>
         )}
       </div>
 
+      <PipelineWizard
+        open={wizardOpen}
+        onOpenChange={setWizardOpen}
+        agents={agents}
+        crons={crons}
+        onSaved={refresh}
+      />
+
+      {selectedPipelineJob && (
+        <PipelineDetailPanel
+          jobName={selectedPipelineJob}
+          crons={crons}
+          agents={agents}
+          pipelines={pipelines}
+          onClose={() => setSelectedPipelineJob(null)}
+        />
+      )}
+
       <style>{`
         @media (max-width: 640px) {
           .summary-cards-grid {

package/app/memory/page.tsx

@@ -19,6 +19,7 @@ import {
   BookOpen,
 } from "lucide-react";
 import { renderMarkdown, colorizeJson } from "@/lib/sanitize";
+import { timeAgo } from "@/lib/cron-utils";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ErrorState } from "@/components/ErrorState";
 
@@ -35,17 +36,6 @@ const TABS: { key: Tab; label: string; Icon: typeof BarChart3 }[] = [
 
 /* ─── Helpers ────────────────────────────────────────────────── */
 
-function timeAgo(dateStr: string): string {
-  const diff = Date.now() - new Date(dateStr).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`;
-}
-
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes}B`;
   const kb = bytes / 1024;

package/app/providers.tsx

@@ -18,13 +18,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     setThemeState(t);
     localStorage.setItem('clawport-theme', t);
     const html = document.documentElement;
-    html.removeAttribute('data-theme');
-    if (t === 'system') {
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      html.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
-    } else {
-      html.setAttribute('data-theme', t);
-    }
+    html.setAttribute('data-theme', t);
   }
 
   return (

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()