camelagi 0.5.50 → 0.5.51

package/dist/core/version.js

@@ -1,4 +1,4 @@
 // Auto-synced with package.json version
-export const VERSION = "0.5.50";
+export const VERSION = "0.5.51";
 export const NAME = "camelagi";
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camelagi",
-  "version": "0.5.50",
+  "version": "0.5.51",
   "description": "Personal AI agent powered by Claude Agent SDK — manage everything from Telegram",
   "type": "module",
   "bin": {
@@ -15,7 +15,7 @@
     "lint": "tsc --noEmit",
     "bundle:gateway": "node esbuild.gateway.mjs",
     "build:all": "npm run build && npm run bundle:gateway",
-    "postinstall": "echo '\n  \\033[36mCamelAGI\\033[0m installed!\\n\\n  Get started:\\n    camel setup    # First-time setup\\n    camel serve    # Start server\\n    camel chat     # Terminal UI\\n'",
+    "postinstall": "echo '\n  \\033[36mCamelAGI\\033[0m installed!\\n\\n  Get started:\\n    camel setup    # First-time setup\\n    camel serve    # Start server\\n    camel chat     # Terminal UI\\n' && (command -v bun >/dev/null 2>&1 && cd tui && bun install --silent 2>/dev/null || true)",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
@@ -58,6 +58,9 @@
   "files": [
     "dist/",
     "dashboard/",
+    "tui/src/",
+    "tui/package.json",
+    "tui/tsconfig.json",
     "camelagi.mjs",
     "config.example.yaml",
     "README.md",

package/tui/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "camelagi-tui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "description": "CamelAGI terminal UI (OpenTUI + Bun). Connects to the CamelAGI gateway via WebSocket.",
+  "scripts": {
+    "dev": "bun src/main.tsx",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@opentui/core": "^0.1.27",
+    "@opentui/react": "^0.1.27",
+    "diff": "^7.0.0",
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/diff": "^7.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "typescript": "^5.6.0"
+  }
+}

package/tui/src/App.tsx

@@ -0,0 +1,161 @@
+// Root component. Owns settings state (model/effort/cwd) and the optional
+// picker overlay; wires everything to useAgent (WebSocket to gateway).
+
+import { useCallback, useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { useAgent } from "./hooks/useAgent.js"
+import { Chat } from "./components/Chat.js"
+import { Input } from "./components/Input.js"
+import { ApprovalPrompt } from "./components/ApprovalPrompt.js"
+import { Welcome } from "./components/Welcome.js"
+import { nextMode } from "./components/PermissionBanner.js"
+import { ActivityIndicator } from "./components/ActivityIndicator.js"
+import { HorizontalRule } from "./components/HorizontalRule.js"
+import { BottomBar } from "./components/BottomBar.js"
+import { SlashMenu } from "./components/SlashMenu.js"
+import { Picker, type PickerItem } from "./components/Picker.js"
+import { findCommand, type CommandContext, type Settings } from "./commands/registry.js"
+import { DEFAULT_MODEL } from "./config.js"
+import type { SlashCommand } from "./commands/registry.js"
+
+const VERSION = "0.5.49"
+
+export interface AppProps {
+  model: string
+  cwd: string
+  wsUrl?: string
+  token?: string
+}
+
+interface PickerState {
+  title: string
+  items: PickerItem[]
+  initialIndex?: number
+  onSelect: (value: string) => void
+}
+
+export function App(props: AppProps) {
+  const [settings, setSettingsState] = useState<Settings>({
+    model: props.model || DEFAULT_MODEL,
+    effort: "high",
+    cwd: props.cwd,
+  })
+  const setSettings = useCallback(
+    (patch: Partial<Settings>) => setSettingsState(s => ({ ...s, ...patch })),
+    [],
+  )
+
+  const agent = useAgent({
+    model: settings.model,
+    effort: settings.effort,
+    cwd: settings.cwd,
+    wsUrl: props.wsUrl,
+    token: props.token,
+  })
+
+  const [slashState, setSlashState] = useState<{ matches: SlashCommand[]; selectedIndex: number; argMode?: boolean } | null>(null)
+  const [picker, setPicker] = useState<PickerState | null>(null)
+
+  const cmdCtx: CommandContext = {
+    pushSystem: (text, tone) => agent.pushSystem(text, tone),
+    agent: {
+      state: agent.state,
+      clear: agent.clear,
+      abort: agent.abort,
+      setPermissionMode: agent.setPermissionMode,
+      switchModel: agent.switchModel,
+      wsSend: agent.wsSend,
+      sessionId: agent.sessionId,
+    },
+    settings,
+    setSettings,
+    openPicker: opts => setPicker(opts),
+    exit: () => process.exit(0),
+  }
+
+  const handleSlash = useCallback((name: string, args: string[]) => {
+    const cmd = findCommand(name)
+    if (!cmd) {
+      agent.pushSystem(`Unknown command: /${name}`, "warn")
+      return
+    }
+    void cmd.run(cmdCtx, args)
+  }, [cmdCtx, agent])
+
+  const handleCyclePermission = useCallback(() => {
+    const next = nextMode(agent.state.permissionMode)
+    agent.setPermissionMode(next)
+  }, [agent])
+
+  useKeyboard(key => {
+    if (key.ctrl && key.name === "c") {
+      if (agent.state.status !== "idle") agent.abort()
+      else process.exit(0)
+    }
+    if (key.ctrl && key.name === "l") {
+      agent.clear()
+    }
+  })
+
+  const busy = agent.state.status !== "idle" && agent.state.status !== "error"
+
+  const welcome = (
+    <Welcome
+      cwd={settings.cwd}
+      model={settings.model}
+      version={VERSION}
+    />
+  )
+
+  const overlayOpen = picker !== null || agent.state.pendingApproval !== null
+
+  return (
+    <box flexDirection="column" width="100%" height="100%">
+      <Chat entries={agent.state.entries} header={welcome} />
+      {picker ? (
+        <Picker
+          title={picker.title}
+          items={picker.items}
+          initialIndex={picker.initialIndex}
+          onSelect={value => {
+            const cb = picker.onSelect
+            setPicker(null)
+            cb(value)
+          }}
+          onCancel={() => setPicker(null)}
+        />
+      ) : null}
+      {agent.state.pendingApproval ? (
+        <ApprovalPrompt
+          request={agent.state.pendingApproval}
+          onResolve={behavior => agent.respondToApproval(behavior)}
+        />
+      ) : null}
+      {!overlayOpen ? (
+        <>
+          <ActivityIndicator
+            active={busy}
+            startedAt={agent.state.runStartedAt}
+            label={agent.state.activityLabel}
+            liveTokens={agent.state.liveTokens}
+          />
+          <HorizontalRule />
+          <Input
+            disabled={busy}
+            onSubmit={agent.submit}
+            onSlash={handleSlash}
+            onAbort={agent.abort}
+            onCyclePermission={handleCyclePermission}
+            onSlashState={setSlashState}
+          />
+          <HorizontalRule />
+          {slashState && slashState.matches.length > 0 ? (
+            <SlashMenu commands={slashState.matches} selectedIndex={slashState.selectedIndex} argMode={slashState.argMode} />
+          ) : (
+            <BottomBar state={agent.state} />
+          )}
+        </>
+      ) : null}
+    </box>
+  )
+}

package/tui/src/agent/parse.ts

@@ -0,0 +1,184 @@
+// Normalize raw stream-json events from node-host/host.mjs into the typed
+// AgentEvent union. Direct port of liquidagente-desktop/src/lib/localAgent.ts:58-188.
+// Keep these two in lockstep — divergence here means the TUI silently
+// misses events the React app handles.
+
+import type { AgentEvent, UsageInfo } from "./types.js"
+
+type Raw = Record<string, unknown>
+
+const PERMISSION_DENIAL_MARKERS = [
+  "requested permissions",
+  "requires approval",
+  "haven't granted",
+  "multiple operations",
+  "permission denied",
+  "not allowed",
+]
+
+export function parseEvent(raw: Raw): AgentEvent[] {
+  const out: AgentEvent[] = []
+  const type = raw.type as string
+
+  if (type === "error" || type === "host_error") {
+    out.push({ type: "error", message: String(raw.message ?? "unknown error") })
+    return out
+  }
+
+  if (type === "approval-request") {
+    out.push({
+      type: "approval_request",
+      request: {
+        id: String(raw.id ?? ""),
+        tool: String(raw.tool ?? ""),
+        input: (raw.input as Record<string, unknown>) ?? {},
+        blockedPath: raw.blockedPath as string | undefined,
+        decisionReason: raw.decisionReason as string | undefined,
+      },
+    })
+    return out
+  }
+
+  if (type === "system") {
+    const subtype = raw.subtype as string
+    if (subtype === "init") {
+      out.push({ type: "init", sessionId: String(raw.session_id ?? "") })
+    } else if (subtype === "task_started") {
+      out.push({
+        type: "subagent_start",
+        agentId: String(raw.agent_id ?? "subagent"),
+        taskId: raw.task_id as string | undefined,
+      })
+    } else if (subtype === "task_progress") {
+      const ms = raw.duration_ms as number | undefined
+      out.push({
+        type: "subagent_progress",
+        agentId: String(raw.agent_id ?? "subagent"),
+        toolCount: raw.tool_count as number | undefined,
+        duration: ms ? Math.round(ms / 1000) : undefined,
+      })
+    } else if (subtype === "task_notification") {
+      out.push({
+        type: "subagent_done",
+        agentId: String(raw.agent_id ?? "subagent"),
+        toolUseId: raw.tool_use_id as string | undefined,
+      })
+    }
+    return out
+  }
+
+  if (type === "assistant") {
+    const msg = raw.message as Raw | undefined
+    const content = msg?.content as Array<Raw> | undefined
+    if (!content) return out
+    for (const block of content) {
+      if (block.type === "text" && block.text) {
+        out.push({ type: "stream_text", text: String(block.text) })
+      } else if (block.type === "tool_use") {
+        out.push({
+          type: "tool_call",
+          id: String(block.id ?? ""),
+          name: String(block.name ?? ""),
+          args: (block.input as Record<string, unknown>) ?? {},
+        })
+      }
+    }
+    return out
+  }
+
+  if (type === "user") {
+    const msg = raw.message as Raw | undefined
+    const content = msg?.content as Array<Raw> | undefined
+    if (!content) return out
+    for (const block of content) {
+      if (block.type !== "tool_result") continue
+      const resultContent = block.content
+      let preview = ""
+      if (typeof resultContent === "string") {
+        preview = resultContent
+      } else if (Array.isArray(resultContent)) {
+        preview = (resultContent as Array<Raw>)
+          .filter(b => b.type === "text")
+          .map(b => String(b.text ?? ""))
+          .join("\n")
+      }
+      const isError = block.is_error === true
+      const isPermissionDenial = isError && PERMISSION_DENIAL_MARKERS.some(m => preview.includes(m))
+      if (isPermissionDenial) {
+        out.push({
+          type: "permission_denied",
+          id: String(block.tool_use_id ?? ""),
+          message: preview,
+        })
+      }
+      out.push({
+        type: "tool_result",
+        id: String(block.tool_use_id ?? ""),
+        preview: preview.slice(0, 2000),
+        isError,
+      })
+    }
+    return out
+  }
+
+  if (type === "result") {
+    const usage = parseUsage(raw.usage as Raw | undefined)
+    if (usage) out.push({ type: "usage", usage })
+    out.push({
+      type: "done",
+      response: String(raw.result ?? ""),
+      subtype: raw.subtype as string | undefined,
+      usage,
+    })
+    return out
+  }
+
+  if (type === "tool_use") {
+    out.push({
+      type: "tool_call",
+      id: String(raw.tool_use_id ?? ""),
+      name: String(raw.name ?? ""),
+      args: (raw.input as Record<string, unknown>) ?? {},
+    })
+    return out
+  }
+
+  if (type === "tool_result") {
+    out.push({
+      type: "tool_result",
+      id: String(raw.tool_use_id ?? ""),
+      preview: String(raw.content ?? ""),
+    })
+    return out
+  }
+
+  if (type === "stream_event") {
+    const event = raw.event as Raw | undefined
+    if (!event) return out
+    if (event.type === "content_block_start" && (event.content_block as Raw)?.type === "thinking") {
+      out.push({ type: "thinking", state: "start" })
+    } else if (event.type === "content_block_delta") {
+      const delta = event.delta as Raw | undefined
+      if (delta?.type === "text_delta" && delta.text) {
+        out.push({ type: "stream_text", text: String(delta.text) })
+      } else if (delta?.type === "thinking_delta" && delta.thinking) {
+        out.push({ type: "thinking_delta", text: String(delta.thinking) })
+      }
+    } else if (event.type === "content_block_stop") {
+      out.push({ type: "thinking", state: "end" })
+    }
+    return out
+  }
+
+  return out
+}
+
+function parseUsage(u: Raw | undefined): UsageInfo | undefined {
+  if (!u) return undefined
+  return {
+    inputTokens: Number(u.input_tokens ?? 0),
+    outputTokens: Number(u.output_tokens ?? 0),
+    cacheReadTokens: Number(u.cache_read_input_tokens ?? 0),
+    cacheWriteTokens: Number(u.cache_creation_input_tokens ?? 0),
+  }
+}

package/tui/src/agent/types.ts

@@ -0,0 +1,75 @@
+// Agent protocol types. Mirrors node-host/host.mjs in/out shapes and the
+// normalized event shape produced by parse.ts (which is itself a port of
+// liquidagente-desktop/src/lib/localAgent.ts:58-188).
+
+export type PermissionMode = "default" | "acceptEdits" | "bypassPermissions" | "plan"
+
+/** Which agent runtime to spawn.
+ *  - cli:  the `claude` binary directly. Auth via claude-cli login. Same path
+ *          the desktop uses by default. Best for users who already ran
+ *          `claude login`.
+ *  - sdk:  node-host/host.mjs (the Node sidecar that wraps the Agent SDK).
+ *          Needed for direct API key usage or gateway-proxied auth. */
+export type AgentRuntime = "cli" | "sdk"
+
+/** Config passed to host.mjs via LIQUIDAGENTE_CONFIG env var (sdk mode) or
+ *  translated to CLI args (cli mode). */
+export interface AgentConfig {
+  prompt: string
+  model: string
+  cwd: string
+  runtime?: AgentRuntime
+  baseUrl?: string
+  authToken?: string
+  systemPrompt?: string
+  permissionMode?: PermissionMode
+  maxTurns?: number
+  effort?: string
+  sessionId?: string
+  resume?: boolean
+  allowedTools?: string[]
+  disallowedTools?: string[]
+  tools?: string[]
+  agentId?: string
+}
+
+export interface ApprovalRequest {
+  id: string
+  tool: string
+  input: Record<string, unknown>
+  blockedPath?: string
+  decisionReason?: string
+}
+
+export interface UsageInfo {
+  inputTokens: number
+  outputTokens: number
+  cacheReadTokens: number
+  cacheWriteTokens: number
+}
+
+export type AgentEvent =
+  | { type: "init"; sessionId: string }
+  | { type: "stream_text"; text: string }
+  | { type: "thinking"; state: "start" | "end" }
+  | { type: "thinking_delta"; text: string }
+  | { type: "tool_call"; id: string; name: string; args: Record<string, unknown> }
+  | { type: "tool_result"; id: string; preview: string; isError?: boolean }
+  | { type: "approval_request"; request: ApprovalRequest }
+  | { type: "permission_denied"; id: string; message: string }
+  | { type: "subagent_start"; agentId: string; taskId?: string }
+  | { type: "subagent_progress"; agentId: string; toolCount?: number; duration?: number }
+  | { type: "subagent_done"; agentId: string; toolUseId?: string }
+  | { type: "usage"; usage: UsageInfo }
+  | { type: "done"; response: string; subtype?: string; usage?: UsageInfo }
+  | { type: "error"; message: string }
+
+export type ApprovalBehavior = "allow" | "deny"
+
+/** Sent on host.mjs stdin in response to an approval-request. */
+export interface ApprovalResponse {
+  type: "approval-response"
+  id: string
+  behavior: ApprovalBehavior
+  message?: string
+}