camelagi 0.5.49 → 0.5.51

package/tui/src/hooks/useAgent.ts

@@ -0,0 +1,202 @@
+// WebSocket-based agent hook. Connects to CamelAGI gateway and maps events
+// into the same reducer dispatch calls the original spawn-based hook used.
+
+import { useCallback, useEffect, useReducer, useRef } from "react"
+import { parseEvent } from "../agent/parse.js"
+import type { ApprovalBehavior, PermissionMode } from "../agent/types.js"
+import { initialState, reduce } from "../state/reducer.js"
+import { WS_URL } from "../config.js"
+
+export interface UseAgentOptions {
+  model: string
+  effort?: string
+  cwd: string
+  wsUrl?: string
+  token?: string
+  sessionId?: string
+}
+
+export function useAgent(opts: UseAgentOptions) {
+  const [state, dispatch] = useReducer(reduce, initialState)
+  const wsRef = useRef<WebSocket | null>(null)
+  const runningRef = useRef(false)
+  const optsRef = useRef(opts)
+  optsRef.current = opts
+  const sessionIdRef = useRef(opts.sessionId ?? `tui-${Date.now()}`)
+
+  // Connect WebSocket on mount
+  useEffect(() => {
+    const url = opts.wsUrl ?? WS_URL
+    const fullUrl = opts.token ? `${url}?token=${opts.token}` : url
+    const ws = new WebSocket(fullUrl)
+    wsRef.current = ws
+
+    ws.addEventListener("open", () => {
+      dispatch({ type: "system_note", text: "Connected to gateway" })
+    })
+
+    ws.addEventListener("message", (event) => {
+      let msg: Record<string, unknown>
+      try {
+        msg = JSON.parse(String(event.data))
+      } catch {
+        return
+      }
+
+      const type = msg.type as string
+
+      // Gateway-specific messages that aren't standard agent events
+      if (type === "done") {
+        const usage = msg.usage as Record<string, unknown> | undefined
+        dispatch({
+          type: "agent_event",
+          event: {
+            type: "done",
+            response: String(msg.response ?? ""),
+            usage: usage ? {
+              inputTokens: Number(usage.inputTokens ?? 0),
+              outputTokens: Number(usage.outputTokens ?? 0),
+              cacheReadTokens: Number(usage.cacheReadTokens ?? 0),
+              cacheWriteTokens: Number(usage.cacheWriteTokens ?? 0),
+            } : undefined,
+          },
+        })
+        runningRef.current = false
+        return
+      }
+
+      if (type === "error") {
+        dispatch({
+          type: "agent_event",
+          event: { type: "error", message: String(msg.message ?? "Unknown error") },
+        })
+        runningRef.current = false
+        return
+      }
+
+      if (type === "aborted") {
+        dispatch({ type: "abort" })
+        runningRef.current = false
+        return
+      }
+
+      if (type === "compacted") {
+        dispatch({
+          type: "system_note",
+          text: `History compacted: ${msg.oldCount} → ${msg.newCount} messages`,
+        })
+        return
+      }
+
+      if (type === "retry") {
+        dispatch({
+          type: "system_note",
+          text: `Retrying (attempt ${msg.attempt}, ${msg.kind})...`,
+          tone: "warn",
+        })
+        return
+      }
+
+      if (type === "queued") {
+        dispatch({ type: "system_note", text: "Message queued — waiting for current run to finish" })
+        return
+      }
+
+      if (type === "model.switched") {
+        dispatch({
+          type: "system_note",
+          text: `Model: ${msg.model}${msg.thinking ? ` | Thinking: ${msg.thinking}` : ""}${msg.effort ? ` | Effort: ${msg.effort}` : ""}`,
+        })
+        return
+      }
+
+      // Standard agent events — parse through the same pipeline as spawn mode
+      const events = parseEvent(msg)
+      for (const ev of events) {
+        dispatch({ type: "agent_event", event: ev })
+      }
+    })
+
+    ws.addEventListener("close", () => {
+      dispatch({ type: "system_note", text: "Disconnected from gateway", tone: "warn" })
+      wsRef.current = null
+      runningRef.current = false
+    })
+
+    ws.addEventListener("error", () => {
+      dispatch({
+        type: "agent_event",
+        event: { type: "error", message: "WebSocket connection failed. Is the gateway running?" },
+      })
+    })
+
+    return () => {
+      ws.close()
+      wsRef.current = null
+    }
+  }, [opts.wsUrl, opts.token])
+
+  const wsSend = useCallback((msg: Record<string, unknown>) => {
+    const ws = wsRef.current
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      dispatch({
+        type: "agent_event",
+        event: { type: "error", message: "Not connected to gateway" },
+      })
+      return
+    }
+    ws.send(JSON.stringify(msg))
+  }, [])
+
+  const submit = useCallback((prompt: string) => {
+    if (runningRef.current) return
+
+    dispatch({ type: "user_submit", text: prompt })
+    runningRef.current = true
+
+    wsSend({
+      type: "chat",
+      message: prompt,
+      session: sessionIdRef.current,
+    })
+  }, [wsSend])
+
+  const respondToApproval = useCallback((behavior: ApprovalBehavior) => {
+    if (!state.pendingApproval) return
+    wsSend({
+      type: "approval.decide",
+      id: state.pendingApproval.id,
+      decision: behavior === "allow" ? "allow-once" : "deny",
+    })
+    dispatch({ type: "approval_resolved" })
+  }, [state.pendingApproval, wsSend])
+
+  const setPermissionMode = useCallback((mode: PermissionMode) => {
+    dispatch({ type: "set_permission_mode", mode })
+  }, [])
+
+  const abort = useCallback(() => {
+    wsSend({ type: "abort" })
+    runningRef.current = false
+    dispatch({ type: "abort" })
+  }, [wsSend])
+
+  const clear = useCallback(() => {
+    abort()
+    sessionIdRef.current = `tui-${Date.now()}`
+    dispatch({ type: "clear" })
+  }, [abort])
+
+  const pushSystem = useCallback((text: string, tone?: "info" | "warn" | "error") => {
+    dispatch({ type: "system_note", text, tone })
+  }, [])
+
+  const switchModel = useCallback((model: string, thinking?: string, effort?: string) => {
+    wsSend({ type: "model.switch", model, thinking, effort })
+  }, [wsSend])
+
+  return {
+    state, submit, respondToApproval, setPermissionMode, abort, clear,
+    pushSystem, switchModel, wsSend, sessionId: sessionIdRef.current,
+  }
+}

package/tui/src/main.tsx

@@ -0,0 +1,12 @@
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
+import { App } from "./App.js"
+import { DEFAULT_MODEL } from "./config.js"
+
+const model = process.env.CAMELAGI_MODEL ?? DEFAULT_MODEL
+const cwd = process.env.CAMELAGI_CWD ?? process.cwd()
+const wsUrl = process.env.CAMELAGI_WS_URL
+const token = process.env.CAMELAGI_TOKEN
+
+const renderer = await createCliRenderer({ exitOnCtrlC: false, useMouse: false })
+createRoot(renderer).render(<App model={model} cwd={cwd} wsUrl={wsUrl} token={token} />)

package/tui/src/models.ts

@@ -0,0 +1,26 @@
+// Model list matching CamelAGI's supported models
+
+export interface ModelOption {
+  id: string
+  label: string
+  vendor: string
+  notes?: string
+}
+
+export const MODELS: ModelOption[] = [
+  { id: "claude-sonnet-4-20250514",  label: "Claude Sonnet 4",  vendor: "Anthropic", notes: "balanced default" },
+  { id: "claude-opus-4-20250514",    label: "Claude Opus 4",    vendor: "Anthropic", notes: "best reasoning" },
+  { id: "claude-haiku-4-20250506",   label: "Claude Haiku 4",   vendor: "Anthropic", notes: "fastest" },
+  { id: "gpt-4o",                    label: "GPT-4o",           vendor: "OpenAI" },
+  { id: "gpt-4o-mini",              label: "GPT-4o Mini",      vendor: "OpenAI",    notes: "fast" },
+  { id: "google/gemini-2.5-pro",     label: "Gemini 2.5 Pro",  vendor: "Google" },
+  { id: "deepseek/deepseek-r1",      label: "DeepSeek R1",     vendor: "DeepSeek" },
+  { id: "deepseek/deepseek-chat",    label: "DeepSeek Chat",   vendor: "DeepSeek" },
+]
+
+export const EFFORT_LEVELS = ["low", "medium", "high", "max"] as const
+export type Effort = typeof EFFORT_LEVELS[number]
+
+export function findModel(id: string): ModelOption | undefined {
+  return MODELS.find(m => m.id === id)
+}

package/tui/src/state/reducer.ts

@@ -0,0 +1,290 @@
+// Pure reducer: (state, event) => state. The component tree is a function
+// of state, not events — so streaming, retries, and approvals are all just
+// state transitions. Keep this file free of any I/O or side effects.
+
+import type { AgentEvent, ApprovalRequest, PermissionMode, UsageInfo } from "../agent/types.js"
+
+export type ChatStatus = "idle" | "thinking" | "streaming" | "awaiting_approval" | "error"
+
+export type ChatEntry =
+  | { kind: "user"; id: string; text: string }
+  | { kind: "assistant"; id: string; text: string; thinking: string; streaming: boolean }
+  | {
+      kind: "tool"
+      id: string
+      name: string
+      args: Record<string, unknown>
+      status: "running" | "done" | "error" | "denied"
+      result?: string
+    }
+  | { kind: "subagent"; id: string; agentId: string; toolCount?: number; duration?: number; done: boolean }
+  | { kind: "system"; id: string; text: string; tone?: "info" | "warn" | "error" }
+  | { kind: "divider"; id: string }
+
+export interface ChatState {
+  entries: ChatEntry[]
+  status: ChatStatus
+  pendingApproval: ApprovalRequest | null
+  permissionMode: PermissionMode
+  sessionId: string | null
+  usage: UsageInfo | null
+  liveTokens: number
+  runStartedAt: number | null
+  activityLabel: string | null
+  error: string | null
+}
+
+export const initialState: ChatState = {
+  entries: [],
+  status: "idle",
+  pendingApproval: null,
+  permissionMode: "bypassPermissions",
+  sessionId: null,
+  usage: null,
+  liveTokens: 0,
+  runStartedAt: null,
+  activityLabel: null,
+  error: null,
+}
+
+export type StateAction =
+  | { type: "user_submit"; text: string }
+  | { type: "agent_event"; event: AgentEvent }
+  | { type: "set_permission_mode"; mode: PermissionMode }
+  | { type: "approval_resolved" }
+  | { type: "system_note"; text: string; tone?: "info" | "warn" | "error" }
+  | { type: "clear" }
+  | { type: "abort" }
+
+let nextId = 0
+const newId = (prefix: string) => `${prefix}-${++nextId}`
+
+export function reduce(state: ChatState, action: StateAction): ChatState {
+  switch (action.type) {
+    case "user_submit":
+      return {
+        ...state,
+        entries: [
+          ...state.entries,
+          { kind: "user", id: newId("u"), text: action.text },
+        ],
+        status: "thinking",
+        liveTokens: 0,
+        runStartedAt: Date.now(),
+        activityLabel: "Thinking",
+        error: null,
+      }
+
+    case "agent_event":
+      return reduceEvent(state, action.event)
+
+    case "set_permission_mode":
+      return { ...state, permissionMode: action.mode }
+
+    case "approval_resolved":
+      return {
+        ...state,
+        pendingApproval: null,
+        status: state.status === "awaiting_approval" ? "thinking" : state.status,
+      }
+
+    case "system_note":
+      return {
+        ...state,
+        entries: [
+          ...state.entries,
+          { kind: "system", id: newId("sys"), text: action.text, tone: action.tone },
+        ],
+      }
+
+    case "clear":
+      return { ...initialState, permissionMode: state.permissionMode }
+
+    case "abort":
+      return {
+        ...state,
+        status: "idle",
+        runStartedAt: null,
+        activityLabel: null,
+        entries: finalizeStreaming(state.entries),
+      }
+  }
+}
+
+function estimateTokens(s: string): number {
+  return Math.ceil(s.length / 4)
+}
+
+function reduceEvent(state: ChatState, ev: AgentEvent): ChatState {
+  switch (ev.type) {
+    case "init":
+      return { ...state, sessionId: ev.sessionId || state.sessionId }
+
+    case "stream_text": {
+      const entries = appendAssistantText(state.entries, ev.text)
+      return {
+        ...state,
+        entries,
+        status: "streaming",
+        activityLabel: "Responding",
+        liveTokens: state.liveTokens + estimateTokens(ev.text),
+      }
+    }
+
+    case "thinking_delta": {
+      const entries = appendAssistantThinking(state.entries, ev.text)
+      return {
+        ...state,
+        entries,
+        status: "thinking",
+        activityLabel: "Thinking",
+        liveTokens: state.liveTokens + estimateTokens(ev.text),
+      }
+    }
+
+    case "thinking":
+      return state
+
+    case "tool_call": {
+      const entry: ChatEntry = {
+        kind: "tool",
+        id: ev.id,
+        name: ev.name,
+        args: ev.args,
+        status: "running",
+      }
+      return {
+        ...state,
+        entries: [...finalizeStreaming(state.entries), entry],
+        status: "thinking",
+        activityLabel: `Running ${ev.name}`,
+      }
+    }
+
+    case "tool_result": {
+      const entries = state.entries.map(e => {
+        if (e.kind !== "tool" || e.id !== ev.id) return e
+        return {
+          ...e,
+          status: ev.isError ? ("error" as const) : ("done" as const),
+          result: ev.preview,
+        }
+      })
+      return { ...state, entries, activityLabel: "Thinking" }
+    }
+
+    case "approval_request":
+      return {
+        ...state,
+        pendingApproval: ev.request,
+        status: "awaiting_approval",
+      }
+
+    case "permission_denied": {
+      const entries = state.entries.map(e =>
+        e.kind === "tool" && e.id === ev.id
+          ? { ...e, status: "denied" as const, result: ev.message }
+          : e
+      )
+      return { ...state, entries }
+    }
+
+    case "subagent_start":
+      return {
+        ...state,
+        entries: [
+          ...finalizeStreaming(state.entries),
+          { kind: "subagent", id: newId("sa"), agentId: ev.agentId, done: false },
+        ],
+      }
+
+    case "subagent_progress": {
+      const entries = updateLatestSubagent(state.entries, ev.agentId, sa => ({
+        ...sa,
+        toolCount: ev.toolCount ?? sa.toolCount,
+        duration: ev.duration ?? sa.duration,
+      }))
+      return { ...state, entries }
+    }
+
+    case "subagent_done": {
+      const entries = updateLatestSubagent(state.entries, ev.agentId, sa => ({ ...sa, done: true }))
+      return { ...state, entries }
+    }
+
+    case "usage":
+      return { ...state, usage: ev.usage }
+
+    case "done":
+      return {
+        ...state,
+        entries: finalizeStreaming(state.entries),
+        usage: ev.usage ?? state.usage,
+        status: "idle",
+        runStartedAt: null,
+        activityLabel: null,
+      }
+
+    case "error":
+      return {
+        ...state,
+        status: "error",
+        error: ev.message,
+        entries: [
+          ...finalizeStreaming(state.entries),
+          { kind: "system", id: newId("err"), text: ev.message, tone: "error" },
+        ],
+      }
+  }
+}
+
+function appendAssistantText(entries: ChatEntry[], text: string): ChatEntry[] {
+  const last = entries[entries.length - 1]
+  if (last && last.kind === "assistant" && last.streaming) {
+    return entries.map((e, i) =>
+      i === entries.length - 1 && e.kind === "assistant"
+        ? { ...e, text: e.text + text }
+        : e
+    )
+  }
+  return [
+    ...entries,
+    { kind: "assistant", id: newId("a"), text, thinking: "", streaming: true },
+  ]
+}
+
+function appendAssistantThinking(entries: ChatEntry[], text: string): ChatEntry[] {
+  const last = entries[entries.length - 1]
+  if (last && last.kind === "assistant" && last.streaming) {
+    return entries.map((e, i) =>
+      i === entries.length - 1 && e.kind === "assistant"
+        ? { ...e, thinking: e.thinking + text }
+        : e
+    )
+  }
+  return [
+    ...entries,
+    { kind: "assistant", id: newId("a"), text: "", thinking: text, streaming: true },
+  ]
+}
+
+function finalizeStreaming(entries: ChatEntry[]): ChatEntry[] {
+  return entries.map(e =>
+    e.kind === "assistant" && e.streaming ? { ...e, streaming: false } : e
+  )
+}
+
+function updateLatestSubagent(
+  entries: ChatEntry[],
+  agentId: string,
+  fn: (sa: Extract<ChatEntry, { kind: "subagent" }>) => Extract<ChatEntry, { kind: "subagent" }>,
+): ChatEntry[] {
+  for (let i = entries.length - 1; i >= 0; i--) {
+    const e = entries[i]
+    if (e.kind === "subagent" && e.agentId === agentId && !e.done) {
+      const updated = fn(e)
+      return [...entries.slice(0, i), updated, ...entries.slice(i + 1)]
+    }
+  }
+  return entries
+}

package/tui/src/theme.ts

@@ -0,0 +1,28 @@
+export const theme = {
+  // Codex-inspired neutral palette: minimal color, lots of dim, sparing accent.
+  user: "#e5e7eb",
+  userBg: "#373737",          // subtle highlight strip behind user messages
+  codeBg: "#0f172a",           // darker bg for fenced code blocks
+  assistant: "#e5e7eb",
+  thinking: "#a78bfa",
+  toolRunning: "#fbbf24",
+  toolDone: "#34d399",
+  toolError: "#f87171",
+  toolDenied: "#f59e0b",
+  system: "#9ca3af",
+  dim: "#6b7280",
+  border: "#334155",
+  borderActive: "#64748b",
+  accent: "#22d3ee",           // teal — used for links, /commands, list numbers
+  divider: "#334155",
+  diffAdd: "#022900",
+  diffRemove: "#3D0200",
+  diffAddFg: "#86efac",
+  diffRemoveFg: "#fca5a5",
+  modeAcceptEdits: "#34d399",
+  modeBypass: "#f87171",
+  modePlan: "#60a5fa",
+  bullet: "#9ca3af",           // • marker color
+  branch: "#64748b",           // └ tree branch
+  number: "#22d3ee",           // colored list numbers
+} as const

package/tui/src/util/nativeNotify.ts

@@ -0,0 +1,47 @@
+// Cross-platform desktop notification, no native deps. Each branch shells
+// out to the OS's bundled tool:
+//   • macOS  → osascript display notification
+//   • Linux  → notify-send (libnotify, present on most distros)
+//   • Win32  → PowerShell + BurntToast-free toast via Windows.UI.Notifications
+//
+// Failures are swallowed — a missing notify-send shouldn't crash a flow run.
+// Strings are escaped before being interpolated into shell strings to keep
+// quotes / backslashes safe.
+
+import { spawn } from "node:child_process"
+
+function escapeAppleScript(s: string): string {
+  return s.replace(/\\/g, "\\\\").replace(/"/g, '\\"')
+}
+
+export function nativeNotify(title: string, body?: string, sound = true): void {
+  try {
+    if (process.platform === "darwin") {
+      const t = escapeAppleScript(title)
+      const b = escapeAppleScript(body ?? "")
+      const soundClause = sound ? ' sound name "default"' : ""
+      const script = `display notification "${b}" with title "${t}"${soundClause}`
+      spawn("osascript", ["-e", script], { stdio: "ignore", detached: true }).unref()
+      return
+    }
+    if (process.platform === "linux") {
+      const args = [title]
+      if (body) args.push(body)
+      spawn("notify-send", args, { stdio: "ignore", detached: true }).unref()
+      return
+    }
+    if (process.platform === "win32") {
+      const t = title.replace(/"/g, '`"')
+      const b = (body ?? "").replace(/"/g, '`"')
+      const ps = `[Windows.UI.Notifications.ToastNotificationManager,Windows.UI.Notifications,ContentType=WindowsRuntime]>$null;` +
+        `$x=[Windows.UI.Notifications.ToastNotificationManager]::GetTemplateContent(1);` +
+        `$x.GetElementsByTagName('text').Item(0).AppendChild($x.CreateTextNode("${t}"))>$null;` +
+        `$x.GetElementsByTagName('text').Item(1).AppendChild($x.CreateTextNode("${b}"))>$null;` +
+        `[Windows.UI.Notifications.ToastNotificationManager]::CreateToastNotifier('LiquidAgente').Show([Windows.UI.Notifications.ToastNotification]::new($x));`
+      spawn("powershell", ["-NoProfile", "-Command", ps], { stdio: "ignore", detached: true }).unref()
+      return
+    }
+  } catch {
+    // No notifier available — silently skip rather than failing the run.
+  }
+}

package/tui/src/util/spinner.ts

@@ -0,0 +1,11 @@
+// Braille-pattern spinner frames — the de-facto standard for terminal
+// spinners. OpenTUI doesn't ship one, so we share this single source
+// instead of duplicating the array across components.
+
+export const SPINNER_FRAMES = [
+  "⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏",
+] as const
+
+export function spinnerFrame(tick: number): string {
+  return SPINNER_FRAMES[tick % SPINNER_FRAMES.length]!
+}

package/tui/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@opentui/react",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*", "scripts/**/*", "../../liquidagente-flow-core/src/**/*", "../../../liquidagente-flow-core/src/**/*"]
+}