electric-ax 0.1.0

package/dist/observe-ui.cjs

@@ -0,0 +1,380 @@
+"use strict";
+const require_chunk = require('./chunk-BCwAaXi7.cjs');
+const require_entity_stream_db = require('./entity-stream-db-Djo-7a11.cjs');
+const __durable_streams_state = require_chunk.__toESM(require("@durable-streams/state"));
+const __electric_ax_agents_runtime = require_chunk.__toESM(require("@electric-ax/agents-runtime"));
+const react = require_chunk.__toESM(require("react"));
+const ink = require_chunk.__toESM(require("ink"));
+const __tanstack_react_db = require_chunk.__toESM(require("@tanstack/react-db"));
+const react_jsx_runtime = require_chunk.__toESM(require("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__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+		flexDirection: "column",
+		marginTop: 1,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			bold: true,
+			color: "cyan",
+			children: `┌ ${msg.from}`
+		}), time ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			dimColor: true,
+			children: `  ${time}`
+		}) : null] }), text.split(`\n`).map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color: "white",
+			children: `│ ${line}`
+		}, i))]
+	});
+}
+function AgentTextView({ text, accumulatedText, label }) {
+	const lines = accumulatedText.split(`\n`);
+	const cursor = text.status !== `completed` ? ` ▌` : ``;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+		flexDirection: "column",
+		marginTop: 1,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			bold: true,
+			color: "green",
+			children: `┌ ${label ?? `assistant`}`
+		}) }), lines.map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.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__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Text, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+				color: statusColor,
+				children: `  ${statusIcon} `
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+				bold: true,
+				dimColor: true,
+				children: tc.toolName
+			})] }),
+			resultStr !== void 0 && !tc.isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolResultView, { result: resultStr }) : null,
+			resultStr !== void 0 && tc.isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.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__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+		flexDirection: "column",
+		children: [shown.map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			dimColor: true,
+			children: `    │ ${truncate(line, 100)}`
+		}, i)), remaining > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			dimColor: true,
+			children: `    │ ... ${remaining} more lines`
+		}) : null]
+	});
+}
+function MessageInput({ db, baseUrl, entityUrl, identity, disabled }) {
+	const [value, setValue] = (0, react.useState)(``);
+	const [error, setError] = (0, react.useState)(null);
+	const sendAction = (0, react.useMemo)(() => (0, __durable_streams_state.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
+	]);
+	(0, ink.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+		flexDirection: "column",
+		marginTop: 1,
+		children: [error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color: "red",
+			children: `  ${error}`
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+				color: "cyan",
+				bold: true,
+				children: `> `
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, { children: value }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+				dimColor: true,
+				children: `▌`
+			})
+		] })]
+	});
+}
+function AgentResponseView({ section, label, isStreaming }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+		flexDirection: "column",
+		children: [
+			section.items.map((item, i) => {
+				if (item.kind === `text`) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentTextView, {
+					text: {
+						key: `${label}-text-${i}`,
+						status: isStreaming ? `streaming` : `completed`
+					},
+					accumulatedText: item.text,
+					label
+				}, `${label}-text-${i}`);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallView, { tc: item }, item.toolCallId);
+			}),
+			section.done ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+					color: "green",
+					children: `✓ complete`
+				})
+			}) : null,
+			section.error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+					color: "red",
+					children: `✗ ${section.error}`
+				})
+			}) : null
+		]
+	});
+}
+function ObserveView({ db, entityUrl, baseUrl, identity }) {
+	const timelineQuery = (0, react.useMemo)(() => (0, __electric_ax_agents_runtime.createEntityIncludesQuery)(db), [db]);
+	const { data: timelineRows = [] } = (0, __tanstack_react_db.useLiveQuery)(timelineQuery, [timelineQuery]);
+	const timelineData = (0, __electric_ax_agents_runtime.normalizeEntityTimelineData)(timelineRows[0] ?? {
+		runs: [],
+		inbox: [],
+		wakes: [],
+		entities: []
+	});
+	const typedRuns = timelineData.runs;
+	const typedInbox = timelineData.inbox;
+	const timeline = (0, react.useMemo)(() => (0, __electric_ax_agents_runtime.buildSections)(typedRuns, typedInbox), [typedRuns, typedInbox]);
+	const { data: stopped = [] } = (0, __tanstack_react_db.useLiveQuery)((q) => q.from({ entityStopped: db.collections.entityStopped }), [db]);
+	const closed = stopped.length > 0;
+	const lastAgentIndex = (0, react.useMemo)(() => {
+		for (let i = timeline.length - 1; i >= 0; i--) if (timeline[i].kind === `agent_response`) return i;
+		return -1;
+	}, [timeline]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+					dimColor: true,
+					children: `Observing ${entityUrl}${closed ? `` : ` (Ctrl+C to stop)`}`
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+				borderStyle: "single",
+				borderColor: "gray",
+				flexDirection: "column",
+				paddingX: 1,
+				children: [
+					timeline.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+						dimColor: true,
+						children: "Waiting for events..."
+					}) : null,
+					timeline.map((section, i) => {
+						if (section.kind === `user_message`) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMessageView, { msg: {
+							key: `timeline-${i}`,
+							from: section.from ?? `user`,
+							payload: { text: section.text },
+							timestamp: new Date(section.timestamp).toISOString()
+						} }, `msg-${i}`);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentResponseView, {
+							section,
+							label: entityUrl,
+							isStreaming: !closed && i === lastAgentIndex && !section.done
+						}, `agent-${i}`);
+					}),
+					closed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+						marginTop: 1,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+							color: "yellow",
+							children: `⚠ Entity stopped`
+						})
+					}) : null
+				]
+			}),
+			closed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+				marginTop: 1,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+					color: "yellow",
+					children: `Stream closed`
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Newline, {})]
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageInput, {
+				db,
+				baseUrl,
+				entityUrl,
+				identity,
+				disabled: closed
+			})
+		]
+	});
+}
+function ObserveApp({ entityUrl, baseUrl, identity, initialOffset }) {
+	const [db, setDb] = (0, react.useState)(null);
+	const [error, setError] = (0, react.useState)(null);
+	const closeRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		let cancelled = false;
+		require_entity_stream_db.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__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+		flexDirection: "column",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color: "red",
+			children: `Error: ${error}`
+		})
+	});
+	if (!db) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+		dimColor: true,
+		children: `Connecting to ${entityUrl}...`
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ObserveView, {
+		db,
+		entityUrl,
+		baseUrl,
+		identity
+	});
+}
+function renderObserve(opts) {
+	const { entityUrl, baseUrl, identity, initialOffset } = opts;
+	const app = (0, ink.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ObserveApp, {
+		entityUrl,
+		baseUrl,
+		identity,
+		initialOffset
+	}));
+	process.on(`SIGINT`, () => {
+		app.unmount();
+		process.exit(0);
+	});
+}
+
+//#endregion
+exports.AgentTextView = AgentTextView
+exports.MessageInput = MessageInput
+exports.ToolCallView = ToolCallView
+exports.ToolResultView = ToolResultView
+exports.UserMessageView = UserMessageView
+exports.formatTime = formatTime
+exports.renderObserve = renderObserve
+exports.truncate = truncate

package/dist/observe-ui.d.cts

@@ -0,0 +1,59 @@
+import { EntityStreamDB } from "./entity-stream-db-C2C3t_hD.cjs";
+import { EntityTimelineContentItem, MessageReceived } from "@electric-ax/agents-runtime";
+import React from "react";
+
+//#region src/observe-ui.d.ts
+interface StreamingText {
+  key: string;
+  status: `streaming` | `completed`;
+}
+declare function formatTime(iso: string | undefined): string;
+declare function truncate(s: string, max: number): string;
+declare function UserMessageView({
+  msg
+}: {
+  msg: MessageReceived;
+}): React.ReactElement;
+declare function AgentTextView({
+  text,
+  accumulatedText,
+  label
+}: {
+  text: StreamingText;
+  accumulatedText: string;
+  label?: string;
+}): React.ReactElement;
+declare function ToolCallView({
+  tc
+}: {
+  tc: Extract<EntityTimelineContentItem, {
+    kind: `tool_call`;
+  }>;
+}): React.ReactElement;
+declare function ToolResultView({
+  result
+}: {
+  result: string;
+}): React.ReactElement;
+declare function MessageInput({
+  db,
+  baseUrl,
+  entityUrl,
+  identity,
+  disabled
+}: {
+  db: EntityStreamDB;
+  baseUrl: string;
+  entityUrl: string;
+  identity: string;
+  disabled: boolean;
+}): React.ReactElement;
+declare function renderObserve(opts: {
+  entityUrl: string;
+  baseUrl: string;
+  identity: string;
+  initialOffset?: string;
+}): void;
+
+//#endregion
+export { AgentTextView, MessageInput, ToolCallView, ToolResultView, UserMessageView, formatTime, renderObserve, truncate };

package/dist/observe-ui.d.ts

@@ -0,0 +1,59 @@
+import { EntityStreamDB } from "./entity-stream-db-BzuIvhSy.js";
+import { EntityTimelineContentItem, MessageReceived } from "@electric-ax/agents-runtime";
+import React from "react";
+
+//#region src/observe-ui.d.ts
+interface StreamingText {
+  key: string;
+  status: `streaming` | `completed`;
+}
+declare function formatTime(iso: string | undefined): string;
+declare function truncate(s: string, max: number): string;
+declare function UserMessageView({
+  msg
+}: {
+  msg: MessageReceived;
+}): React.ReactElement;
+declare function AgentTextView({
+  text,
+  accumulatedText,
+  label
+}: {
+  text: StreamingText;
+  accumulatedText: string;
+  label?: string;
+}): React.ReactElement;
+declare function ToolCallView({
+  tc
+}: {
+  tc: Extract<EntityTimelineContentItem, {
+    kind: `tool_call`;
+  }>;
+}): React.ReactElement;
+declare function ToolResultView({
+  result
+}: {
+  result: string;
+}): React.ReactElement;
+declare function MessageInput({
+  db,
+  baseUrl,
+  entityUrl,
+  identity,
+  disabled
+}: {
+  db: EntityStreamDB;
+  baseUrl: string;
+  entityUrl: string;
+  identity: string;
+  disabled: boolean;
+}): React.ReactElement;
+declare function renderObserve(opts: {
+  entityUrl: string;
+  baseUrl: string;
+  identity: string;
+  initialOffset?: string;
+}): void;
+
+//#endregion
+export { AgentTextView, MessageInput, ToolCallView, ToolResultView, UserMessageView, formatTime, renderObserve, truncate };