@agentxjs/cli 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @agentxjs/cli
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [3b764d8]
+  - agentxjs@2.0.0
+  - @agentxjs/core@2.0.0
+  - @agentxjs/node-platform@2.0.0
+  - @agentxjs/mono-driver@2.0.0
+  - @agentxjs/server@2.0.0

package/bin/agentx

@@ -0,0 +1,2 @@
+#!/usr/bin/env bun
+import "../src/index.ts";

package/bunfig.toml

@@ -0,0 +1,4 @@
+preload = ["@opentui/solid/preload"]
+
+[test]
+preload = ["@opentui/solid/preload"]

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@agentxjs/cli",
+  "version": "0.0.2",
+  "description": "AgentX Terminal UI Client",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "agentx": "./bin/agentx"
+  },
+  "scripts": {
+    "dev": "bun run --conditions=browser src/index.ts",
+    "build": "bun build src/index.ts --outdir dist --target node",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@opentui/core": "^0.1.77",
+    "@opentui/solid": "^0.1.77",
+    "solid-js": "^1.9.10",
+    "agentxjs": "^2.0.0",
+    "@agentxjs/server": "^2.0.0",
+    "@agentxjs/node-platform": "^2.0.0",
+    "@agentxjs/mono-driver": "^2.0.0",
+    "@agentxjs/core": "^2.0.0",
+    "yargs": "^18.0.0",
+    "clipboardy": "^4.0.0",
+    "dotenv": "^16.6.1"
+  },
+  "devDependencies": {
+    "@types/yargs": "^17.0.33",
+    "typescript": "^5.3.3"
+  }
+}

package/src/app.tsx

@@ -0,0 +1,180 @@
+/**
+ * AgentX TUI Application
+ *
+ * Main entry point for the terminal UI.
+ */
+
+import { render, useTerminalDimensions, useKeyboard } from "@opentui/solid";
+import { ErrorBoundary, Switch, Match, createSignal } from "solid-js";
+import { ThemeProvider, useTheme } from "./context/theme";
+import { AgentXProvider, useAgentX } from "./context/agentx";
+import { DialogProvider, useDialog } from "./context/dialog";
+import { ToastProvider } from "./context/toast";
+import { RouteProvider, useRoute } from "./context/route";
+import { ExitProvider, useExit } from "./context/exit";
+import { Home } from "./routes/home";
+import { SessionView } from "./routes/session";
+import { DialogNewSession } from "./component/dialog-new-session";
+import { DialogSessionList } from "./component/dialog-session-list";
+import { createLogger } from "commonxjs/logger";
+
+const logger = createLogger("cli/app");
+
+export interface TuiOptions {
+  serverUrl: string;
+  theme?: string;
+}
+
+/**
+ * Start the TUI application
+ */
+export function tui(options: TuiOptions): Promise<void> {
+  return new Promise<void>((resolve) => {
+    const onExit = () => {
+      logger.info("Exiting TUI");
+      // Restore terminal state before exit
+      process.stdout.write("\x1b[?1000l"); // Disable mouse tracking
+      process.stdout.write("\x1b[?1002l"); // Disable mouse button tracking
+      process.stdout.write("\x1b[?1003l"); // Disable all mouse tracking
+      process.stdout.write("\x1b[?1006l"); // Disable SGR mouse mode
+      process.stdout.write("\x1b[?25h"); // Show cursor
+      process.stdout.write("\x1b[?1049l"); // Restore main screen buffer
+      resolve();
+      process.exit(0);
+    };
+
+    render(
+      () => (
+        <ErrorBoundary fallback={(error) => <ErrorScreen error={error} />}>
+          <ExitProvider onExit={onExit}>
+            <ToastProvider>
+              <RouteProvider>
+                <AgentXProvider serverUrl={options.serverUrl}>
+                  <ThemeProvider initialTheme={options.theme}>
+                    <DialogProvider>
+                      <App />
+                    </DialogProvider>
+                  </ThemeProvider>
+                </AgentXProvider>
+              </RouteProvider>
+            </ToastProvider>
+          </ExitProvider>
+        </ErrorBoundary>
+      ),
+      {
+        targetFps: 60,
+        exitOnCtrlC: false,
+      }
+    );
+  });
+}
+
+/**
+ * Main App component
+ */
+function App() {
+  const dimensions = useTerminalDimensions();
+  const { theme } = useTheme();
+  const exit = useExit();
+  const route = useRoute();
+  const dialog = useDialog();
+  const agentx = useAgentX();
+  const [lastKey, setLastKey] = createSignal("");
+
+  useKeyboard((evt) => {
+    // Show last key for debugging
+    const keyStr = `${evt.ctrl ? "Ctrl+" : ""}${evt.meta ? "Meta+" : ""}${evt.name}`;
+    setLastKey(keyStr);
+    logger.debug("Key pressed", {
+      key: keyStr,
+      connected: agentx.connected(),
+      dialogCount: dialog.stack.length,
+    });
+
+    // Ctrl+C to exit
+    if (evt.ctrl && evt.name === "c") {
+      logger.info("Exit requested");
+      exit();
+      return;
+    }
+
+    // Only handle shortcuts when connected
+    if (!agentx.connected()) {
+      logger.debug("Ignoring key - not connected");
+      return;
+    }
+
+    // Skip if dialog is open
+    if (dialog.stack.length > 0) {
+      logger.debug("Ignoring key - dialog open");
+      return;
+    }
+
+    // Ctrl+N - New session
+    if (evt.ctrl && (evt.name === "n" || evt.name === "N")) {
+      logger.info("Opening new session dialog");
+      dialog.show(() => <DialogNewSession />);
+      logger.info("dialog.show called", { stackLength: dialog.stack.length });
+      evt.preventDefault();
+      return;
+    }
+
+    // Ctrl+L - List sessions
+    if (evt.ctrl && (evt.name === "l" || evt.name === "L")) {
+      logger.info("Opening session list dialog");
+      dialog.show(() => <DialogSessionList />);
+      logger.info("dialog.show called", { stackLength: dialog.stack.length });
+      evt.preventDefault();
+      return;
+    }
+
+    // Escape - Go back
+    if (evt.name === "escape" && route.data.type !== "home") {
+      route.back();
+      evt.preventDefault();
+      return;
+    }
+  });
+
+  return (
+    <box
+      width={dimensions().width}
+      height={dimensions().height}
+      backgroundColor={theme().background}
+      flexDirection="column"
+    >
+      <box flexGrow={1}>
+        <Switch>
+          <Match when={route.data.type === "home"}>
+            <Home />
+          </Match>
+          <Match when={route.data.type === "session"}>
+            <SessionView sessionId={(route.data as { sessionId: string }).sessionId} />
+          </Match>
+        </Switch>
+      </box>
+      {/* Debug: show status */}
+      <box position="absolute" bottom={0} right={2}>
+        <text fg={theme().textMuted}>
+          Key: {lastKey()} | Connected: {agentx.connected() ? "Y" : "N"} | Dialogs:{" "}
+          {dialog.stack.length}
+        </text>
+      </box>
+    </box>
+  );
+}
+
+/**
+ * Error screen
+ */
+function ErrorScreen(props: { error: Error }) {
+  const dimensions = useTerminalDimensions();
+
+  return (
+    <box width={dimensions().width} height={dimensions().height} flexDirection="column" padding={2}>
+      <text fg="#ff0000">Fatal Error:</text>
+      <text fg="#ffffff">{props.error.message}</text>
+      <text fg="#808080">{props.error.stack}</text>
+    </box>
+  );
+}

package/src/component/dialog-new-session.tsx

@@ -0,0 +1,90 @@
+/**
+ * New Session Dialog - Create a new chat session
+ */
+
+import { useKeyboard } from "@opentui/solid";
+import { createSignal } from "solid-js";
+import { useTheme } from "../context/theme";
+import { useAgentX } from "../context/agentx";
+import { useDialog } from "../context/dialog";
+import { useRoute } from "../context/route";
+import { useToast } from "../context/toast";
+import { createLogger } from "commonxjs/logger";
+
+const logger = createLogger("cli/dialog-new-session");
+
+export function DialogNewSession() {
+  const { theme } = useTheme();
+  const agentx = useAgentX();
+  const dialog = useDialog();
+  const route = useRoute();
+  const toast = useToast();
+
+  const [creating, setCreating] = createSignal(false);
+  const [error, setError] = createSignal<string | null>(null);
+
+  async function createSession() {
+    logger.info("createSession called", { hasClient: !!agentx.client, creating: creating() });
+    if (!agentx.client || creating()) return;
+
+    setCreating(true);
+    setError(null);
+
+    try {
+      logger.info("Creating container...");
+      await agentx.client.containers.create("default");
+
+      logger.info("Creating image...");
+      const result = await agentx.client.images.create({
+        containerId: "default",
+        name: `Chat ${new Date().toLocaleString()}`,
+        systemPrompt: "You are a helpful assistant.",
+      });
+
+      logger.info("createImage response", { result: JSON.stringify(result) });
+
+      if (!result.record?.sessionId) {
+        throw new Error("Invalid response: missing sessionId");
+      }
+
+      logger.info("Session created", { sessionId: result.record.sessionId });
+      dialog.clear();
+      toast.show({ message: "Session created", variant: "success" });
+      route.navigate({ type: "session", sessionId: result.record.sessionId });
+    } catch (err) {
+      logger.error("Failed to create session", {
+        error: err instanceof Error ? err.message : String(err),
+      });
+      setError(err instanceof Error ? err.message : String(err));
+      setCreating(false);
+    }
+  }
+
+  // Auto-create on mount
+  createSession();
+
+  useKeyboard((evt) => {
+    if (evt.name === "return" && error()) {
+      // Retry
+      createSession();
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme().primary}>
+        <strong>New Session</strong>
+      </text>
+
+      {creating() && !error() ? (
+        <text fg={theme().textMuted}>Creating session...</text>
+      ) : error() ? (
+        <box flexDirection="column" gap={1}>
+          <text fg={theme().error}>Error: {error()}</text>
+          <text fg={theme().textMuted}>Press Enter to retry • Esc to cancel</text>
+        </box>
+      ) : null}
+    </box>
+  );
+}

package/src/component/dialog-session-list.tsx

@@ -0,0 +1,101 @@
+/**
+ * Session List Dialog - Shows available sessions
+ */
+
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid";
+import { createSignal, For, onMount, Show, createEffect } from "solid-js";
+import { useTheme } from "../context/theme";
+import { useAgentX } from "../context/agentx";
+import { useDialog } from "../context/dialog";
+import { useRoute } from "../context/route";
+import type { ImageRecord } from "agentxjs";
+
+export function DialogSessionList() {
+  const { theme } = useTheme();
+  const agentx = useAgentX();
+  const dialog = useDialog();
+  const route = useRoute();
+  const dimensions = useTerminalDimensions();
+
+  const [sessions, setSessions] = createSignal<ImageRecord[]>([]);
+  const [selected, setSelected] = createSignal(0);
+  const [loading, setLoading] = createSignal(true);
+  const [error, setError] = createSignal<string | null>(null);
+
+  // Load sessions
+  onMount(async () => {
+    if (!agentx.client) return;
+
+    try {
+      const result = await agentx.client.images.list();
+      setSessions(result.records);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  });
+
+  // Keyboard navigation
+  useKeyboard((evt) => {
+    const list = sessions();
+    if (list.length === 0) return;
+
+    if (evt.name === "up" || evt.name === "k") {
+      setSelected((s) => Math.max(0, s - 1));
+      evt.preventDefault();
+    } else if (evt.name === "down" || evt.name === "j") {
+      setSelected((s) => Math.min(list.length - 1, s + 1));
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      // Select session
+      const session = list[selected()];
+      if (session) {
+        dialog.clear();
+        route.navigate({ type: "session", sessionId: session.sessionId });
+      }
+      evt.preventDefault();
+    }
+  });
+
+  const maxItems = Math.min(10, dimensions().height - 10);
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme().primary}>
+        <strong>Sessions</strong>
+      </text>
+
+      <Show when={loading()}>
+        <text fg={theme().textMuted}>Loading...</text>
+      </Show>
+
+      <Show when={error()}>
+        <text fg={theme().error}>Error: {error()}</text>
+      </Show>
+
+      <Show when={!loading() && !error() && sessions().length === 0}>
+        <text fg={theme().textMuted}>No sessions yet. Press Ctrl+N to create one.</text>
+      </Show>
+
+      <Show when={!loading() && sessions().length > 0}>
+        <box flexDirection="column">
+          <For each={sessions().slice(0, maxItems)}>
+            {(session, index) => (
+              <box flexDirection="row">
+                <text fg={index() === selected() ? theme().primary : theme().text}>
+                  {index() === selected() ? "› " : "  "}
+                  {session.name || `Session ${session.imageId.slice(0, 8)}`}
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+
+        <box marginTop={1}>
+          <text fg={theme().textMuted}>↑/↓ navigate • Enter select • Esc close</text>
+        </box>
+      </Show>
+    </box>
+  );
+}

package/src/context/agentx.tsx

@@ -0,0 +1,70 @@
+/**
+ * AgentX Provider - Connect to AgentX server
+ */
+
+import {
+  createContext,
+  useContext,
+  onMount,
+  onCleanup,
+  createSignal,
+  type ParentProps,
+} from "solid-js";
+import { createAgentX, type AgentX } from "agentxjs";
+
+interface AgentXContext {
+  client: AgentX | null;
+  connected: () => boolean;
+  error: () => string | null;
+  reconnect: () => Promise<void>;
+}
+
+const AgentXCtx = createContext<AgentXContext>();
+
+export function AgentXProvider(props: ParentProps<{ serverUrl: string }>) {
+  const [client, setClient] = createSignal<AgentX | null>(null);
+  const [connected, setConnected] = createSignal(false);
+  const [error, setError] = createSignal<string | null>(null);
+
+  async function connect() {
+    try {
+      setError(null);
+      const agentx = await createAgentX({
+        serverUrl: props.serverUrl,
+        autoReconnect: true,
+      });
+      setClient(agentx);
+      setConnected(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setConnected(false);
+    }
+  }
+
+  onMount(() => {
+    connect();
+  });
+
+  onCleanup(() => {
+    client()?.dispose();
+  });
+
+  const ctx: AgentXContext = {
+    get client() {
+      return client();
+    },
+    connected,
+    error,
+    reconnect: connect,
+  };
+
+  return <AgentXCtx.Provider value={ctx}>{props.children}</AgentXCtx.Provider>;
+}
+
+export function useAgentX(): AgentXContext {
+  const ctx = useContext(AgentXCtx);
+  if (!ctx) {
+    throw new Error("useAgentX must be used within AgentXProvider");
+  }
+  return ctx;
+}

package/src/context/dialog.tsx

@@ -0,0 +1,109 @@
+/**
+ * Dialog Provider - Modal stack management
+ */
+
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid";
+import { createContext, useContext, Show, type ParentProps, type JSX } from "solid-js";
+import { createStore } from "solid-js/store";
+import { useTheme } from "./theme";
+import { createLogger } from "commonxjs/logger";
+
+const logger = createLogger("cli/dialog");
+
+interface DialogEntry {
+  element: () => JSX.Element;
+  onClose?: () => void;
+}
+
+interface DialogContext {
+  stack: DialogEntry[];
+  show: (element: () => JSX.Element, onClose?: () => void) => void;
+  replace: (element: () => JSX.Element, onClose?: () => void) => void;
+  clear: () => void;
+  pop: () => void;
+}
+
+const DialogCtx = createContext<DialogContext>();
+
+export function DialogProvider(props: ParentProps) {
+  const [store, setStore] = createStore<{ stack: DialogEntry[] }>({ stack: [] });
+  const { theme } = useTheme();
+  const dimensions = useTerminalDimensions();
+
+  useKeyboard((evt) => {
+    if (evt.name === "escape" && store.stack.length > 0) {
+      ctx.pop();
+      evt.preventDefault();
+      evt.stopPropagation();
+    }
+  });
+
+  const ctx: DialogContext = {
+    get stack() {
+      return store.stack;
+    },
+    show(element, onClose) {
+      logger.debug("dialog.show called", { currentStackSize: store.stack.length });
+      setStore("stack", [...store.stack, { element, onClose }]);
+      logger.debug("dialog.show completed", { newStackSize: store.stack.length });
+    },
+    replace(element, onClose) {
+      logger.debug("dialog.replace called");
+      for (const entry of store.stack) {
+        entry.onClose?.();
+      }
+      setStore("stack", [{ element, onClose }]);
+    },
+    clear() {
+      logger.debug("dialog.clear called", { stackSize: store.stack.length });
+      for (const entry of store.stack) {
+        entry.onClose?.();
+      }
+      setStore("stack", []);
+    },
+    pop() {
+      logger.debug("dialog.pop called", { stackSize: store.stack.length });
+      const current = store.stack.at(-1);
+      current?.onClose?.();
+      setStore("stack", store.stack.slice(0, -1));
+    },
+  };
+
+  return (
+    <DialogCtx.Provider value={ctx}>
+      {props.children}
+      <Show when={store.stack.length > 0}>
+        <box
+          position="absolute"
+          left={0}
+          top={0}
+          width={dimensions().width}
+          height={dimensions().height}
+          alignItems="center"
+          paddingTop={Math.floor(dimensions().height / 4)}
+          backgroundColor="rgba(0,0,0,0.6)"
+        >
+          <box
+            width={60}
+            maxWidth={dimensions().width - 4}
+            backgroundColor={theme().backgroundPanel}
+            paddingTop={1}
+            paddingBottom={1}
+            paddingLeft={2}
+            paddingRight={2}
+          >
+            {store.stack.at(-1)?.element()}
+          </box>
+        </box>
+      </Show>
+    </DialogCtx.Provider>
+  );
+}
+
+export function useDialog(): DialogContext {
+  const ctx = useContext(DialogCtx);
+  if (!ctx) {
+    throw new Error("useDialog must be used within DialogProvider");
+  }
+  return ctx;
+}

package/src/context/exit.tsx

@@ -0,0 +1,21 @@
+/**
+ * Exit Provider - Handle application exit
+ */
+
+import { createContext, useContext, type ParentProps } from "solid-js";
+
+type ExitFn = () => void;
+
+const ExitContext = createContext<ExitFn>();
+
+export function ExitProvider(props: ParentProps<{ onExit: () => void }>) {
+  return <ExitContext.Provider value={props.onExit}>{props.children}</ExitContext.Provider>;
+}
+
+export function useExit(): ExitFn {
+  const exit = useContext(ExitContext);
+  if (!exit) {
+    throw new Error("useExit must be used within ExitProvider");
+  }
+  return exit;
+}

package/src/context/route.tsx

@@ -0,0 +1,50 @@
+/**
+ * Route Provider - Simple screen navigation
+ */
+
+import { createContext, useContext, type ParentProps } from "solid-js";
+import { createStore } from "solid-js/store";
+
+export type RouteData = { type: "home" } | { type: "session"; sessionId: string };
+
+interface RouteContext {
+  data: RouteData;
+  navigate: (route: RouteData) => void;
+  back: () => void;
+}
+
+const RouteCtx = createContext<RouteContext>();
+
+export function RouteProvider(props: ParentProps) {
+  const [store, setStore] = createStore<{ data: RouteData; history: RouteData[] }>({
+    data: { type: "home" },
+    history: [],
+  });
+
+  const ctx: RouteContext = {
+    get data() {
+      return store.data;
+    },
+    navigate(route: RouteData) {
+      setStore("history", [...store.history, store.data]);
+      setStore("data", route);
+    },
+    back() {
+      const prev = store.history.at(-1);
+      if (prev) {
+        setStore("data", prev);
+        setStore("history", store.history.slice(0, -1));
+      }
+    },
+  };
+
+  return <RouteCtx.Provider value={ctx}>{props.children}</RouteCtx.Provider>;
+}
+
+export function useRoute(): RouteContext {
+  const ctx = useContext(RouteCtx);
+  if (!ctx) {
+    throw new Error("useRoute must be used within RouteProvider");
+  }
+  return ctx;
+}

package/src/context/theme.tsx

@@ -0,0 +1,134 @@
+/**
+ * Theme Provider - Terminal color theming
+ */
+
+import { createContext, useContext, createMemo, type ParentProps } from "solid-js";
+import { createStore } from "solid-js/store";
+
+/**
+ * Theme colors
+ */
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  accent: string;
+  error: string;
+  warning: string;
+  success: string;
+  info: string;
+  text: string;
+  textMuted: string;
+  background: string;
+  backgroundPanel: string;
+  backgroundElement: string;
+  border: string;
+  borderActive: string;
+}
+
+/**
+ * Built-in themes
+ */
+const THEMES: Record<string, ThemeColors> = {
+  opencode: {
+    primary: "#fab283",
+    secondary: "#c4a7e7",
+    accent: "#fab283",
+    error: "#eb6f92",
+    warning: "#f6c177",
+    success: "#9ccfd8",
+    info: "#31748f",
+    text: "#e0def4",
+    textMuted: "#6e6a86",
+    background: "#0a0a0a",
+    backgroundPanel: "#1a1a1a",
+    backgroundElement: "#2a2a2a",
+    border: "#3a3a3a",
+    borderActive: "#fab283",
+  },
+  dracula: {
+    primary: "#bd93f9",
+    secondary: "#ff79c6",
+    accent: "#8be9fd",
+    error: "#ff5555",
+    warning: "#ffb86c",
+    success: "#50fa7b",
+    info: "#8be9fd",
+    text: "#f8f8f2",
+    textMuted: "#6272a4",
+    background: "#282a36",
+    backgroundPanel: "#1e1f29",
+    backgroundElement: "#44475a",
+    border: "#44475a",
+    borderActive: "#bd93f9",
+  },
+  nord: {
+    primary: "#88c0d0",
+    secondary: "#81a1c1",
+    accent: "#8fbcbb",
+    error: "#bf616a",
+    warning: "#ebcb8b",
+    success: "#a3be8c",
+    info: "#5e81ac",
+    text: "#eceff4",
+    textMuted: "#4c566a",
+    background: "#2e3440",
+    backgroundPanel: "#3b4252",
+    backgroundElement: "#434c5e",
+    border: "#4c566a",
+    borderActive: "#88c0d0",
+  },
+  tokyonight: {
+    primary: "#7aa2f7",
+    secondary: "#bb9af7",
+    accent: "#7dcfff",
+    error: "#f7768e",
+    warning: "#e0af68",
+    success: "#9ece6a",
+    info: "#2ac3de",
+    text: "#c0caf5",
+    textMuted: "#565f89",
+    background: "#1a1b26",
+    backgroundPanel: "#24283b",
+    backgroundElement: "#414868",
+    border: "#414868",
+    borderActive: "#7aa2f7",
+  },
+};
+
+interface ThemeContext {
+  theme: () => ThemeColors;
+  themeName: () => string;
+  setTheme: (name: string) => void;
+  availableThemes: () => string[];
+}
+
+const ThemeCtx = createContext<ThemeContext>();
+
+export function ThemeProvider(props: ParentProps<{ initialTheme?: string }>) {
+  const [store, setStore] = createStore({
+    active: props.initialTheme ?? "opencode",
+  });
+
+  const theme = createMemo(() => THEMES[store.active] ?? THEMES.opencode);
+
+  const ctx: ThemeContext = {
+    theme,
+    themeName: () => store.active,
+    setTheme: (name: string) => {
+      if (THEMES[name]) {
+        setStore("active", name);
+      }
+    },
+    availableThemes: () => Object.keys(THEMES),
+  };
+
+  return <ThemeCtx.Provider value={ctx}>{props.children}</ThemeCtx.Provider>;
+}
+
+export function useTheme(): ThemeContext {
+  const ctx = useContext(ThemeCtx);
+  if (!ctx) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return ctx;
+}

package/src/context/toast.tsx

@@ -0,0 +1,66 @@
+/**
+ * Toast Provider - Notification system
+ */
+
+import { createContext, useContext, type ParentProps } from "solid-js";
+import { createStore } from "solid-js/store";
+
+export type ToastVariant = "info" | "success" | "warning" | "error";
+
+export interface Toast {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+  duration?: number;
+}
+
+interface ToastContext {
+  toasts: Toast[];
+  show: (options: { message: string; variant?: ToastVariant; duration?: number }) => void;
+  dismiss: (id: string) => void;
+  error: (err: unknown) => void;
+}
+
+const ToastCtx = createContext<ToastContext>();
+
+let toastId = 0;
+
+export function ToastProvider(props: ParentProps) {
+  const [store, setStore] = createStore<{ toasts: Toast[] }>({ toasts: [] });
+
+  const ctx: ToastContext = {
+    get toasts() {
+      return store.toasts;
+    },
+    show({ message, variant = "info", duration = 3000 }) {
+      const id = `toast-${++toastId}`;
+      const toast: Toast = { id, message, variant, duration };
+
+      setStore("toasts", [...store.toasts, toast]);
+
+      if (duration > 0) {
+        setTimeout(() => ctx.dismiss(id), duration);
+      }
+    },
+    dismiss(id: string) {
+      setStore(
+        "toasts",
+        store.toasts.filter((t) => t.id !== id)
+      );
+    },
+    error(err: unknown) {
+      const message = err instanceof Error ? err.message : String(err);
+      ctx.show({ message, variant: "error", duration: 5000 });
+    },
+  };
+
+  return <ToastCtx.Provider value={ctx}>{props.children}</ToastCtx.Provider>;
+}
+
+export function useToast(): ToastContext {
+  const ctx = useContext(ToastCtx);
+  if (!ctx) {
+    throw new Error("useToast must be used within ToastProvider");
+  }
+  return ctx;
+}

package/src/index.ts

@@ -0,0 +1,147 @@
+/**
+ * AgentX CLI - Terminal UI Client
+ *
+ * Starts an embedded server and connects to it automatically.
+ * If a server is already running on the port, connects to it instead.
+ * Use --server to connect to an external server.
+ */
+
+import "dotenv/config";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+import { tui } from "./app";
+import { createServer } from "@agentxjs/server";
+import { nodePlatform, FileLoggerFactory } from "@agentxjs/node-platform";
+import { createMonoDriver } from "@agentxjs/mono-driver";
+import type { CreateDriver } from "@agentxjs/core/driver";
+import { createLogger, setLoggerFactory } from "commonxjs/logger";
+import { connect } from "net";
+
+// Configure file logging early (before any logger is used)
+const dataPath = process.env.DATA_PATH ?? "./.agentx";
+const logDir = `${dataPath}/logs`;
+setLoggerFactory(new FileLoggerFactory({ logDir, level: "debug" }));
+
+const logger = createLogger("cli");
+
+/**
+ * Check if a port is in use
+ */
+async function isPortInUse(port: number): Promise<boolean> {
+  return new Promise((resolve) => {
+    const socket = connect(port, "127.0.0.1");
+    socket.on("connect", () => {
+      socket.destroy();
+      resolve(true);
+    });
+    socket.on("error", () => {
+      resolve(false);
+    });
+  });
+}
+
+/**
+ * Start embedded server or connect to existing
+ */
+async function getServerUrl(port: number): Promise<{ url: string; cleanup?: () => Promise<void> }> {
+  const url = `ws://127.0.0.1:${port}`;
+
+  // Check if server already running
+  if (await isPortInUse(port)) {
+    logger.info("Found existing server", { port });
+    return { url };
+  }
+
+  // Validate API key for starting new server
+  const apiKey = process.env.DEEPRACTICE_API_KEY;
+  if (!apiKey) {
+    console.error("Error: DEEPRACTICE_API_KEY environment variable is required");
+    console.error("");
+    console.error("Create a .env.local file with:");
+    console.error("  DEEPRACTICE_API_KEY=sk-xxx");
+    process.exit(1);
+  }
+
+  // Create driver factory that injects apiKey/baseUrl
+  const baseUrl = process.env.DEEPRACTICE_BASE_URL;
+  const wrappedCreateDriver: CreateDriver = (config) => {
+    return createMonoDriver({
+      ...config,
+      apiKey,
+      baseUrl,
+      options: { provider: "anthropic" },
+    });
+  };
+
+  const server = await createServer({
+    platform: nodePlatform({
+      dataPath,
+      // logDir already configured at startup
+    }),
+    createDriver: wrappedCreateDriver,
+    port,
+    host: "127.0.0.1",
+  });
+
+  await server.listen();
+
+  logger.info("Embedded server started", { port });
+
+  return {
+    url,
+    cleanup: async () => {
+      await server.dispose();
+    },
+  };
+}
+
+// Parse args and run
+yargs(hideBin(process.argv))
+  .scriptName("agentx")
+  .usage("$0 [command] [options]")
+  .command(
+    ["$0", "chat"],
+    "Start interactive chat session",
+    (yargs) =>
+      yargs
+        .option("server", {
+          alias: "s",
+          type: "string",
+          description: "Connect to external AgentX server URL (default: start embedded server)",
+        })
+        .option("port", {
+          alias: "p",
+          type: "number",
+          default: 5200,
+          description: "Port for embedded server",
+        })
+        .option("theme", {
+          alias: "t",
+          type: "string",
+          description: "Theme name",
+        }),
+    async (args) => {
+      let serverUrl = args.server;
+      let cleanup: (() => Promise<void>) | undefined;
+
+      // If no external server specified, use embedded or existing server
+      if (!serverUrl) {
+        const result = await getServerUrl(args.port);
+        serverUrl = result.url;
+        cleanup = result.cleanup;
+      }
+
+      try {
+        await tui({
+          serverUrl,
+          theme: args.theme,
+        });
+      } finally {
+        if (cleanup) {
+          await cleanup();
+        }
+      }
+    }
+  )
+  .help()
+  .parseAsync();

package/src/routes/home.tsx

@@ -0,0 +1,53 @@
+/**
+ * Home Screen - Welcome and connection status
+ */
+
+import { useTerminalDimensions } from "@opentui/solid";
+import { Show } from "solid-js";
+import { useTheme } from "../context/theme";
+import { useAgentX } from "../context/agentx";
+
+export function Home() {
+  const dimensions = useTerminalDimensions();
+  const { theme } = useTheme();
+  const agentx = useAgentX();
+
+  return (
+    <box width={dimensions().width} height={dimensions().height} flexDirection="column" padding={2}>
+      {/* Header */}
+      <box flexDirection="row" gap={1}>
+        <text fg={theme().primary}>
+          <strong>AgentX</strong>
+          <span style={{ fg: theme().textMuted }}> Terminal UI</span>
+        </text>
+      </box>
+
+      {/* Connection Status */}
+      <box marginTop={1}>
+        <Show
+          when={agentx.connected()}
+          fallback={
+            <Show when={agentx.error()} fallback={<text fg={theme().warning}>Connecting...</text>}>
+              <text fg={theme().error}>Error: {agentx.error()}</text>
+            </Show>
+          }
+        >
+          <text fg={theme().success}>Connected to server</text>
+        </Show>
+      </box>
+
+      {/* Instructions */}
+      <box marginTop={2} flexDirection="column" gap={1}>
+        <text fg={theme().textMuted}>Keyboard shortcuts:</text>
+        <text fg={theme().text}> Ctrl+C Exit</text>
+        <text fg={theme().text}> Ctrl+N New session</text>
+        <text fg={theme().text}> Ctrl+L List sessions</text>
+      </box>
+
+      {/* Footer */}
+      <box position="absolute" bottom={1} left={2}>
+        <text fg={theme().textMuted}>Press Ctrl+C to exit</text>
+      </box>
+    </box>
+  );
+}

package/src/routes/session.tsx

@@ -0,0 +1,171 @@
+/**
+ * Session View - Chat session interface
+ */
+
+import { useTerminalDimensions, useKeyboard } from "@opentui/solid";
+import { createSignal, onMount, Show, For, createEffect } from "solid-js";
+import { useTheme } from "../context/theme";
+import { useAgentX } from "../context/agentx";
+import { useRoute } from "../context/route";
+import { useToast } from "../context/toast";
+import { createLogger } from "commonxjs/logger";
+
+const logger = createLogger("cli/session");
+
+export interface SessionViewProps {
+  sessionId: string;
+}
+
+export function SessionView(props: SessionViewProps) {
+  const dimensions = useTerminalDimensions();
+  const { theme } = useTheme();
+  const agentx = useAgentX();
+  const route = useRoute();
+  const toast = useToast();
+
+  const [input, setInput] = createSignal("");
+  const [messages, setMessages] = createSignal<Array<{ role: string; content: string }>>([]);
+  const [loading, setLoading] = createSignal(false);
+  const [agentId, setAgentId] = createSignal<string | null>(null);
+  const [streamingText, setStreamingText] = createSignal("");
+
+  // Create agent on mount
+  onMount(async () => {
+    logger.info("SessionView mounted", { sessionId: props.sessionId });
+    if (!agentx.client) {
+      logger.warn("No agentx client");
+      return;
+    }
+
+    try {
+      // Get image by session ID
+      logger.info("Fetching images...");
+      const images = await agentx.client.images.list();
+      const image = images.records.find((r) => r.sessionId === props.sessionId);
+
+      if (!image) {
+        logger.error("Session not found", { sessionId: props.sessionId });
+        toast.error(new Error("Session not found"));
+        route.back();
+        return;
+      }
+
+      // Create agent
+      logger.info("Creating agent...", { imageId: image.imageId });
+      const result = await agentx.client.agents.create({ imageId: image.imageId });
+      setAgentId(result.agentId);
+      logger.info("Agent created", { agentId: result.agentId });
+
+      // Subscribe to events
+      agentx.client.on("text_delta", (event) => {
+        const data = event.data as { text: string };
+        setStreamingText((s) => s + data.text);
+      });
+
+      agentx.client.on("assistant_message", (event) => {
+        const data = event.data as { content: string };
+        logger.info("Assistant message received", { contentLength: data.content.length });
+        setMessages((m) => [...m, { role: "assistant", content: data.content }]);
+        setStreamingText("");
+        setLoading(false);
+      });
+    } catch (err) {
+      logger.error("Failed to initialize session", {
+        error: err instanceof Error ? err.message : String(err),
+      });
+      toast.error(err);
+    }
+  });
+
+  // Handle input
+  useKeyboard((evt) => {
+    if (loading()) return;
+
+    if (evt.name === "return" && input().trim()) {
+      sendMessage();
+      evt.preventDefault();
+    } else if (evt.name === "backspace") {
+      setInput((s) => s.slice(0, -1));
+      evt.preventDefault();
+    } else if (evt.name.length === 1 && !evt.ctrl && !evt.meta) {
+      // Single character input
+      setInput((s) => s + evt.name);
+      evt.preventDefault();
+    } else if (evt.name === "space") {
+      setInput((s) => s + " ");
+      evt.preventDefault();
+    }
+  });
+
+  async function sendMessage() {
+    const content = input().trim();
+    logger.info("sendMessage called", { content, hasClient: !!agentx.client, agentId: agentId() });
+    if (!content || !agentx.client || !agentId()) return;
+
+    setInput("");
+    setMessages((m) => [...m, { role: "user", content }]);
+    setLoading(true);
+    setStreamingText("");
+
+    try {
+      logger.info("Sending message to agent...");
+      await agentx.client.sessions.send(agentId()!, content);
+      logger.info("Message sent");
+    } catch (err) {
+      logger.error("Failed to send message", {
+        error: err instanceof Error ? err.message : String(err),
+      });
+      toast.error(err);
+      setLoading(false);
+    }
+  }
+
+  const visibleHeight = dimensions().height - 6; // Header + input area
+
+  return (
+    <box width={dimensions().width} height={dimensions().height} flexDirection="column">
+      {/* Header */}
+      <box padding={1} flexDirection="row" gap={2}>
+        <text fg={theme().primary}>
+          <strong>Chat</strong>
+        </text>
+        <text fg={theme().textMuted}>Session: {props.sessionId.slice(0, 8)}...</text>
+        <text fg={theme().textMuted}>(Esc to go back)</text>
+      </box>
+
+      {/* Messages */}
+      <box flexGrow={1} flexDirection="column" padding={1}>
+        <For each={messages().slice(-Math.floor(visibleHeight / 2))}>
+          {(msg) => (
+            <box marginBottom={1}>
+              <text fg={msg.role === "user" ? theme().primary : theme().text}>
+                <strong>{msg.role === "user" ? "You" : "AI"}:</strong> {msg.content}
+              </text>
+            </box>
+          )}
+        </For>
+
+        <Show when={streamingText()}>
+          <box marginBottom={1}>
+            <text fg={theme().text}>
+              <strong>AI:</strong> {streamingText()}
+              <span style={{ fg: theme().textMuted }}>▊</span>
+            </text>
+          </box>
+        </Show>
+
+        <Show when={loading() && !streamingText()}>
+          <text fg={theme().textMuted}>Thinking...</text>
+        </Show>
+      </box>
+
+      {/* Input */}
+      <box padding={1} border borderColor={theme().border}>
+        <text fg={theme().text}>
+          <span style={{ fg: theme().primary }}>›</span> {input()}
+          <span style={{ fg: theme().textMuted }}>▊</span>
+        </text>
+      </box>
+    </box>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "preserve",
+    "jsxImportSource": "@opentui/solid",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["bun-types"],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}