electric-ax 0.1.0

package/dist/observe-ui.js

@@ -0,0 +1,371 @@
+import { createEntityStreamDB } from "./entity-stream-db-CGP2xVeJ.js";
+import { createOptimisticAction } from "@durable-streams/state";
+import { buildSections, createEntityIncludesQuery, normalizeEntityTimelineData } from "@electric-ax/agents-runtime";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Newline, Text, render, useInput } from "ink";
+import { useLiveQuery } from "@tanstack/react-db";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/observe-ui.tsx
+function formatTime(iso) {
+	if (!iso) return ``;
+	try {
+		const d = new Date(iso);
+		return d.toLocaleTimeString([], {
+			hour: `2-digit`,
+			minute: `2-digit`,
+			second: `2-digit`
+		});
+	} catch {
+		return ``;
+	}
+}
+function truncate(s, max) {
+	return s.length > max ? s.slice(0, max - 3) + `...` : s;
+}
+function UserMessageView({ msg }) {
+	const time = formatTime(msg.timestamp);
+	const payload = msg.payload;
+	let text = ``;
+	if (typeof payload === `string`) text = payload;
+	else if (typeof payload === `object` && payload !== null) {
+		const p = payload;
+		text = typeof p.text === `string` ? p.text : JSON.stringify(payload);
+	}
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		marginTop: 1,
+		children: [/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+			bold: true,
+			color: "cyan",
+			children: `┌ ${msg.from}`
+		}), time ? /* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: `  ${time}`
+		}) : null] }), text.split(`\n`).map((line, i) => /* @__PURE__ */ jsx(Text, {
+			color: "white",
+			children: `│ ${line}`
+		}, i))]
+	});
+}
+function AgentTextView({ text, accumulatedText, label }) {
+	const lines = accumulatedText.split(`\n`);
+	const cursor = text.status !== `completed` ? ` ▌` : ``;
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		marginTop: 1,
+		children: [/* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(Text, {
+			bold: true,
+			color: "green",
+			children: `┌ ${label ?? `assistant`}`
+		}) }), lines.map((line, i) => /* @__PURE__ */ jsx(Text, {
+			color: "white",
+			children: `│ ${line}${i === lines.length - 1 ? cursor : ``}`
+		}, i))]
+	});
+}
+function ToolCallView({ tc }) {
+	let statusIcon;
+	let statusColor;
+	if (tc.status === `started`) {
+		statusIcon = `○`;
+		statusColor = `yellow`;
+	} else if (tc.isError) {
+		statusIcon = `✗`;
+		statusColor = `red`;
+	} else if (tc.result !== void 0) {
+		statusIcon = `✓`;
+		statusColor = `green`;
+	} else {
+		statusIcon = `⟳`;
+		statusColor = `yellow`;
+	}
+	const resultStr = tc.result;
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+				color: statusColor,
+				children: `  ${statusIcon} `
+			}), /* @__PURE__ */ jsx(Text, {
+				bold: true,
+				dimColor: true,
+				children: tc.toolName
+			})] }),
+			resultStr !== void 0 && !tc.isError ? /* @__PURE__ */ jsx(ToolResultView, { result: resultStr }) : null,
+			resultStr !== void 0 && tc.isError ? /* @__PURE__ */ jsx(Text, {
+				color: "red",
+				children: `    ↳ ${truncate(resultStr, 120)}`
+			}) : null
+		]
+	});
+}
+function ToolResultView({ result }) {
+	const lines = result.split(`\n`);
+	const maxLines = 5;
+	const shown = lines.slice(0, maxLines);
+	const remaining = lines.length - maxLines;
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [shown.map((line, i) => /* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: `    │ ${truncate(line, 100)}`
+		}, i)), remaining > 0 ? /* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: `    │ ... ${remaining} more lines`
+		}) : null]
+	});
+}
+function MessageInput({ db, baseUrl, entityUrl, identity, disabled }) {
+	const [value, setValue] = useState(``);
+	const [error, setError] = useState(null);
+	const sendAction = useMemo(() => createOptimisticAction({
+		onMutate: ({ text }) => {
+			db.collections.inbox.insert({
+				key: `optimistic-${Date.now()}`,
+				from: identity,
+				payload: { text },
+				timestamp: new Date().toISOString()
+			});
+		},
+		mutationFn: async ({ text }) => {
+			const res = await fetch(`${baseUrl}${entityUrl}/send`, {
+				method: `POST`,
+				headers: { "content-type": `application/json` },
+				body: JSON.stringify({
+					from: identity,
+					payload: { text }
+				})
+			});
+			if (!res.ok) {
+				const body = await res.text().catch(() => ``);
+				let message = `Send failed (${res.status})`;
+				if (body) try {
+					const data = JSON.parse(body);
+					if (data.message) message = String(data.message);
+					else message = body;
+				} catch (err) {
+					if (err instanceof SyntaxError) message = body;
+					else throw err;
+				}
+				throw new Error(message);
+			}
+		}
+	}), [
+		db,
+		baseUrl,
+		entityUrl,
+		identity
+	]);
+	useInput((input, key) => {
+		if (disabled) return;
+		if (key.return) {
+			if (value.trim()) {
+				setError(null);
+				const tx = sendAction({ text: value.trim() });
+				setValue(``);
+				tx.isPersisted.promise.catch((err) => {
+					setError(err.message);
+				});
+			}
+			return;
+		}
+		if (key.backspace || key.delete) {
+			setValue((prev) => prev.slice(0, -1));
+			return;
+		}
+		if (input && !key.ctrl && !key.meta) setValue((prev) => prev + input);
+	}, { isActive: !disabled });
+	if (disabled) return /* @__PURE__ */ jsx(Fragment, {});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		marginTop: 1,
+		children: [error ? /* @__PURE__ */ jsx(Text, {
+			color: "red",
+			children: `  ${error}`
+		}) : null, /* @__PURE__ */ jsxs(Box, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: "cyan",
+				bold: true,
+				children: `> `
+			}),
+			/* @__PURE__ */ jsx(Text, { children: value }),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: `▌`
+			})
+		] })]
+	});
+}
+function AgentResponseView({ section, label, isStreaming }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			section.items.map((item, i) => {
+				if (item.kind === `text`) return /* @__PURE__ */ jsx(AgentTextView, {
+					text: {
+						key: `${label}-text-${i}`,
+						status: isStreaming ? `streaming` : `completed`
+					},
+					accumulatedText: item.text,
+					label
+				}, `${label}-text-${i}`);
+				return /* @__PURE__ */ jsx(ToolCallView, { tc: item }, item.toolCallId);
+			}),
+			section.done ? /* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsx(Text, {
+					color: "green",
+					children: `✓ complete`
+				})
+			}) : null,
+			section.error ? /* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsx(Text, {
+					color: "red",
+					children: `✗ ${section.error}`
+				})
+			}) : null
+		]
+	});
+}
+function ObserveView({ db, entityUrl, baseUrl, identity }) {
+	const timelineQuery = useMemo(() => createEntityIncludesQuery(db), [db]);
+	const { data: timelineRows = [] } = useLiveQuery(timelineQuery, [timelineQuery]);
+	const timelineData = normalizeEntityTimelineData(timelineRows[0] ?? {
+		runs: [],
+		inbox: [],
+		wakes: [],
+		entities: []
+	});
+	const typedRuns = timelineData.runs;
+	const typedInbox = timelineData.inbox;
+	const timeline = useMemo(() => buildSections(typedRuns, typedInbox), [typedRuns, typedInbox]);
+	const { data: stopped = [] } = useLiveQuery((q) => q.from({ entityStopped: db.collections.entityStopped }), [db]);
+	const closed = stopped.length > 0;
+	const lastAgentIndex = useMemo(() => {
+		for (let i = timeline.length - 1; i >= 0; i--) if (timeline[i].kind === `agent_response`) return i;
+		return -1;
+	}, [timeline]);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsx(Text, {
+					dimColor: true,
+					children: `Observing ${entityUrl}${closed ? `` : ` (Ctrl+C to stop)`}`
+				})
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				borderStyle: "single",
+				borderColor: "gray",
+				flexDirection: "column",
+				paddingX: 1,
+				children: [
+					timeline.length === 0 ? /* @__PURE__ */ jsx(Text, {
+						dimColor: true,
+						children: "Waiting for events..."
+					}) : null,
+					timeline.map((section, i) => {
+						if (section.kind === `user_message`) return /* @__PURE__ */ jsx(UserMessageView, { msg: {
+							key: `timeline-${i}`,
+							from: section.from ?? `user`,
+							payload: { text: section.text },
+							timestamp: new Date(section.timestamp).toISOString()
+						} }, `msg-${i}`);
+						return /* @__PURE__ */ jsx(AgentResponseView, {
+							section,
+							label: entityUrl,
+							isStreaming: !closed && i === lastAgentIndex && !section.done
+						}, `agent-${i}`);
+					}),
+					closed ? /* @__PURE__ */ jsx(Box, {
+						marginTop: 1,
+						children: /* @__PURE__ */ jsx(Text, {
+							color: "yellow",
+							children: `⚠ Entity stopped`
+						})
+					}) : null
+				]
+			}),
+			closed ? /* @__PURE__ */ jsxs(Box, {
+				marginTop: 1,
+				children: [/* @__PURE__ */ jsx(Text, {
+					color: "yellow",
+					children: `Stream closed`
+				}), /* @__PURE__ */ jsx(Newline, {})]
+			}) : null,
+			/* @__PURE__ */ jsx(MessageInput, {
+				db,
+				baseUrl,
+				entityUrl,
+				identity,
+				disabled: closed
+			})
+		]
+	});
+}
+function ObserveApp({ entityUrl, baseUrl, identity, initialOffset }) {
+	const [db, setDb] = useState(null);
+	const [error, setError] = useState(null);
+	const closeRef = useRef(null);
+	useEffect(() => {
+		let cancelled = false;
+		createEntityStreamDB({
+			baseUrl,
+			entityUrl,
+			initialOffset
+		}).then((result) => {
+			if (cancelled) {
+				result.close();
+				return;
+			}
+			closeRef.current = result.close;
+			setDb(result.db);
+		}).catch((err) => {
+			if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+		});
+		return () => {
+			cancelled = true;
+			closeRef.current?.();
+		};
+	}, [
+		baseUrl,
+		entityUrl,
+		initialOffset
+	]);
+	if (error) return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		children: /* @__PURE__ */ jsx(Text, {
+			color: "red",
+			children: `Error: ${error}`
+		})
+	});
+	if (!db) return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
+		dimColor: true,
+		children: `Connecting to ${entityUrl}...`
+	}) });
+	return /* @__PURE__ */ jsx(ObserveView, {
+		db,
+		entityUrl,
+		baseUrl,
+		identity
+	});
+}
+function renderObserve(opts) {
+	const { entityUrl, baseUrl, identity, initialOffset } = opts;
+	const app = render(/* @__PURE__ */ jsx(ObserveApp, {
+		entityUrl,
+		baseUrl,
+		identity,
+		initialOffset
+	}));
+	process.on(`SIGINT`, () => {
+		app.unmount();
+		process.exit(0);
+	});
+}
+
+//#endregion
+export { AgentTextView, MessageInput, ToolCallView, ToolResultView, UserMessageView, formatTime, renderObserve, truncate };

package/docker-compose.full.yml

@@ -0,0 +1,68 @@
+services:
+  postgres:
+    image: postgres:18-alpine
+    restart: unless-stopped
+    command:
+      - postgres
+      - -c
+      - wal_level=logical
+      - -c
+      - max_connections=300
+      - -c
+      - shared_buffers=256MB
+    environment:
+      POSTGRES_DB: ${ELECTRIC_AGENTS_POSTGRES_DB:-electric_agents}
+      POSTGRES_USER: ${ELECTRIC_AGENTS_POSTGRES_USER:-electric_agents}
+      POSTGRES_PASSWORD: ${ELECTRIC_AGENTS_POSTGRES_PASSWORD:-electric_agents}
+    healthcheck:
+      test:
+        [
+          'CMD-SHELL',
+          'pg_isready -U ${ELECTRIC_AGENTS_POSTGRES_USER:-electric_agents} -d ${ELECTRIC_AGENTS_POSTGRES_DB:-electric_agents}',
+        ]
+      interval: 2s
+      timeout: 5s
+      retries: 30
+    volumes:
+      - electric-agents-postgres-data:/var/lib/postgresql/data
+
+  electric:
+    image: electricsql/electric:latest
+    restart: unless-stopped
+    depends_on:
+      postgres:
+        condition: service_healthy
+    environment:
+      DATABASE_URL: postgres://${ELECTRIC_AGENTS_POSTGRES_USER:-electric_agents}:${ELECTRIC_AGENTS_POSTGRES_PASSWORD:-electric_agents}@postgres:5432/${ELECTRIC_AGENTS_POSTGRES_DB:-electric_agents}
+      ELECTRIC_INSECURE: 'true'
+
+  electric-agents:
+    image: electricax/agents-server:latest
+    restart: unless-stopped
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    depends_on:
+      postgres:
+        condition: service_healthy
+      electric:
+        condition: service_started
+    environment:
+      ELECTRIC_AGENTS_LOG_LEVEL: ${ELECTRIC_AGENTS_LOG_LEVEL:-debug}
+      ELECTRIC_AGENTS_BASE_URL: http://electric-agents:4437
+      DATABASE_URL: postgres://${ELECTRIC_AGENTS_POSTGRES_USER:-electric_agents}:${ELECTRIC_AGENTS_POSTGRES_PASSWORD:-electric_agents}@postgres:5432/${ELECTRIC_AGENTS_POSTGRES_DB:-electric_agents}
+      ELECTRIC_AGENTS_HOST: 0.0.0.0
+      ELECTRIC_AGENTS_PORT: 4437
+      ELECTRIC_AGENTS_STREAMS_DATA_DIR: /var/lib/electric-agents/streams
+      ELECTRIC_AGENTS_DURABLE_STREAMS_URL: ${ELECTRIC_AGENTS_DURABLE_STREAMS_URL:-}
+      ELECTRIC_AGENTS_STREAMS_HOST: ${ELECTRIC_AGENTS_STREAMS_HOST:-127.0.0.1}
+      ELECTRIC_AGENTS_STREAMS_PORT: ${ELECTRIC_AGENTS_STREAMS_PORT:-0}
+      ELECTRIC_AGENTS_ELECTRIC_URL: ${ELECTRIC_AGENTS_ELECTRIC_URL:-http://electric:3000}
+      ELECTRIC_AGENTS_REWRITE_LOOPBACK_WEBHOOKS_TO: ${ELECTRIC_AGENTS_REWRITE_LOOPBACK_WEBHOOKS_TO:-host.docker.internal}
+    ports:
+      - '${ELECTRIC_AGENTS_PORT:-4437}:4437'
+    volumes:
+      - electric-agents-streams-data:/var/lib/electric-agents/streams
+
+volumes:
+  electric-agents-postgres-data:
+  electric-agents-streams-data:

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "electric-ax",
+  "version": "0.1.0",
+  "description": "CLI for Electric Agents",
+  "author": "ElectricSQL team and contributors",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "electric": "./dist/index.js",
+    "electric-ax": "./dist/index.js",
+    "electric-dev": "./bin/electric-dev.mjs"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./entity-stream-db": {
+      "import": {
+        "types": "./dist/entity-stream-db.d.ts",
+        "default": "./dist/entity-stream-db.js"
+      },
+      "require": {
+        "types": "./dist/entity-stream-db.d.cts",
+        "default": "./dist/entity-stream-db.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@durable-streams/client": "npm:@electric-ax/durable-streams-client-beta@^0.3.0",
+    "@durable-streams/state": "npm:@electric-ax/durable-streams-state-beta@^0.3.0",
+    "@electric-sql/client": "^1.5.14",
+    "@tanstack/db": "^0.6.4",
+    "@tanstack/react-db": "^0.1.82",
+    "commander": "^13.1.0",
+    "ink": "^6.8.0",
+    "omelette": "^0.4.17",
+    "react": "^19.2.0",
+    "@electric-ax/agents": "0.1.0",
+    "@electric-ax/agents-runtime": "0.0.1"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.1.0",
+    "@types/node": "^22.19.15",
+    "@types/omelette": "^0.4.5",
+    "@types/react": "^19.2.14",
+    "ink-testing-library": "^4.0.0",
+    "tsdown": "^0.9.0",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "vitest": "^4.1.0"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "docker-compose.full.yml"
+  ],
+  "keywords": [
+    "agents",
+    "cli",
+    "electric",
+    "electric-agents"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/electric-sql/electric.git",
+    "directory": "packages/electric-ax"
+  },
+  "bugs": {
+    "url": "https://github.com/electric-sql/electric/issues"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest run",
+    "coverage": "pnpm exec vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "stylecheck": "eslint . --quiet"
+  }
+}