electric-ax 0.2.21 → 0.2.22

package/dist/observe-ui.cjs

@@ -1,8 +1,7 @@
 "use strict";
 const require_chunk = require('./chunk-BCwAaXi7.cjs');
-const require_entity_stream_db = require('./entity-stream-db-uLb8jOQA.cjs');
+const require_entity_stream_db = require('./entity-stream-db-DJU-Famv.cjs');
 const __electric_ax_agents_runtime = require_chunk.__toESM(require("@electric-ax/agents-runtime"));
-const __durable_streams_state_db = require_chunk.__toESM(require("@durable-streams/state/db"));
 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"));
@@ -25,6 +24,159 @@ function formatTime(iso) {
 function truncate(s, max) {
 	return s.length > max ? s.slice(0, max - 3) + `...` : s;
 }
+function createMessageSendBody(text, opts) {
+	return {
+		...opts?.key ? { key: opts.key } : {},
+		payload: { text }
+	};
+}
+const OPTIMISTIC_INBOX_ORDER_START = Number.MAX_SAFE_INTEGER - 1e6;
+const SEND_TXID_TIMEOUT_MS = 1e4;
+let optimisticInboxOrderIndex = OPTIMISTIC_INBOX_ORDER_START;
+function nextOptimisticInboxOrderIndex() {
+	optimisticInboxOrderIndex += 1;
+	if (optimisticInboxOrderIndex >= Number.MAX_SAFE_INTEGER) optimisticInboxOrderIndex = OPTIMISTIC_INBOX_ORDER_START;
+	return optimisticInboxOrderIndex;
+}
+function createOptimisticInboxKey(pendingOrderIndex) {
+	return `optimistic-${Date.now()}-${pendingOrderIndex}`;
+}
+async function readSendTxid(res) {
+	const data = await res.json().catch(() => null);
+	const txid = data?.txid;
+	if (typeof txid === `string` || typeof txid === `number`) return String(txid);
+	throw new Error(`Send response did not include txid`);
+}
+function GutterLine({ prefix = `│ `, color, dimColor, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
+		width: "100%",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+			color,
+			dimColor,
+			children: prefix
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
+			flexGrow: 1,
+			flexShrink: 1,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+				color,
+				dimColor,
+				wrap: "wrap",
+				children
+			})
+		})]
+	});
+}
+function payloadText(payload) {
+	if (typeof payload === `string`) return payload;
+	if (typeof payload === `object` && payload !== null) {
+		const record = payload;
+		return typeof record.text === `string` ? record.text : JSON.stringify(payload);
+	}
+	return String(payload ?? ``);
+}
+function resultText(result) {
+	if (result === void 0) return void 0;
+	return typeof result === `string` ? result : JSON.stringify(result);
+}
+function isPlainObject(value) {
+	return typeof value === `object` && value !== null && !Array.isArray(value);
+}
+function timelineRowsToDisplayRows(rows) {
+	let userMessageCount = 0;
+	return rows.flatMap((row) => {
+		if (row.inbox) {
+			const section = {
+				kind: `user_message`,
+				from: row.inbox.from,
+				text: payloadText(row.inbox.payload),
+				timestamp: Date.parse(row.inbox.timestamp || ``) || Date.now(),
+				isInitial: userMessageCount === 0
+			};
+			userMessageCount++;
+			return [{
+				kind: `section`,
+				key: row.$key,
+				section
+			}];
+		}
+		if (row.wake) {
+			const timestamp = Date.parse(row.wake.payload.timestamp);
+			return [{
+				kind: `section`,
+				key: row.$key,
+				section: {
+					kind: `wake`,
+					payload: row.wake.payload,
+					timestamp: Number.isFinite(timestamp) ? timestamp : Date.now()
+				}
+			}];
+		}
+		if (row.run) return [{
+			kind: `run`,
+			key: row.$key,
+			run: row.run
+		}];
+		if (row.error) return [{
+			kind: `section`,
+			key: row.$key,
+			section: {
+				kind: `agent_response`,
+				items: [],
+				error: row.error.error_code ? `${row.error.error_code}: ${row.error.message}` : row.error.message
+			}
+		}];
+		return [];
+	});
+}
+function textContent(item) {
+	return typeof item?.content === `string` ? item.content : ``;
+}
+function compareTimelineOrderValues(left, right) {
+	if (typeof left === `number` && typeof right === `number`) return left - right;
+	return String(left).localeCompare(String(right));
+}
+function runItemKind(item) {
+	return item.text ? `text` : `toolCall`;
+}
+function runItemKey(item) {
+	return item.text?.key ?? item.toolCall?.key ?? ``;
+}
+function compareRunItems(left, right) {
+	const orderCompare = compareTimelineOrderValues(left.text?.order ?? left.toolCall?.order ?? `~`, right.text?.order ?? right.toolCall?.order ?? `~`);
+	if (orderCompare !== 0) return orderCompare;
+	const kindCompare = runItemKind(left).localeCompare(runItemKind(right));
+	if (kindCompare !== 0) return kindCompare;
+	return runItemKey(left).localeCompare(runItemKey(right));
+}
+function runItemsToContentItems(items) {
+	const contentItems = [];
+	for (const item of items) {
+		if (item.text) {
+			const content = textContent(item.text);
+			if (content.trim().length > 0) contentItems.push({
+				kind: `text`,
+				text: content
+			});
+			continue;
+		}
+		if (!item.toolCall) continue;
+		contentItems.push({
+			kind: `tool_call`,
+			toolCallId: item.toolCall.tool_call_id ?? item.toolCall.key,
+			toolName: item.toolCall.tool_name,
+			args: isPlainObject(item.toolCall.args) ? item.toolCall.args : {},
+			status: item.toolCall.status,
+			result: resultText(item.toolCall.result),
+			error: item.toolCall.error,
+			isError: item.toolCall.status === `failed`
+		});
+	}
+	return contentItems;
+}
+function runErrorsText(errors) {
+	const messages = errors.map((error) => error.error_code ? `${error.error_code}: ${error.message}` : error.message).filter(Boolean);
+	return messages.length > 0 ? messages.join(`; `) : void 0;
+}
 function UserMessageView({ msg }) {
 	const time = formatTime(msg.timestamp);
 	const payload = msg.payload;
@@ -44,9 +196,9 @@ function UserMessageView({ msg }) {
 		}), 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, {
+		}) : null] }), text.split(`\n`).map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GutterLine, {
 			color: "white",
-			children: `│ ${line}`
+			children: line
 		}, i))]
 	});
 }
@@ -60,9 +212,9 @@ function AgentTextView({ text, accumulatedText, label }) {
 			bold: true,
 			color: "green",
 			children: `┌ ${label ?? `assistant`}`
-		}) }), lines.map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+		}) }), lines.map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GutterLine, {
 			color: "white",
-			children: `│ ${line}${i === lines.length - 1 ? cursor : ``}`
+			children: `${line}${i === lines.length - 1 ? cursor : ``}`
 		}, i))]
 	});
 }
@@ -109,9 +261,10 @@ function ToolResultView({ result }) {
 	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, {
+		children: [shown.map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GutterLine, {
+			prefix: "    │ ",
 			dimColor: true,
-			children: `    │ ${truncate(line, 100)}`
+			children: truncate(line, 100)
 		}, i)), remaining > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
 			dimColor: true,
 			children: `    │ ... ${remaining} more lines`
@@ -121,26 +274,29 @@ function ToolResultView({ result }) {
 function MessageInput({ db, baseUrl, entityUrl, identity, headers, disabled }) {
 	const [value, setValue] = (0, react.useState)(``);
 	const [error, setError] = (0, react.useState)(null);
-	const sendAction = (0, react.useMemo)(() => (0, __durable_streams_state_db.createOptimisticAction)({
-		onMutate: ({ text }) => {
+	const sendAction = (0, react.useMemo)(() => (0, __tanstack_react_db.createOptimisticAction)({
+		onMutate: ({ text, key, pendingOrderIndex }) => {
+			const now = new Date().toISOString();
 			db.collections.inbox.insert({
-				key: `optimistic-${Date.now()}`,
+				key,
+				_timeline_order: (0, __electric_ax_agents_runtime.createPendingTimelineOrder)(pendingOrderIndex),
 				from: identity,
+				from_principal: identity,
 				payload: { text },
-				timestamp: new Date().toISOString()
+				timestamp: now,
+				mode: `immediate`,
+				status: `processed`,
+				processed_at: now
 			});
 		},
-		mutationFn: async ({ text }) => {
+		mutationFn: async ({ text, key }) => {
 			const res = await fetch(require_entity_stream_db.entityApiUrl(baseUrl, entityUrl, `/send`), {
 				method: `POST`,
 				headers: {
 					"content-type": `application/json`,
 					...headers
 				},
-				body: JSON.stringify({
-					from: identity,
-					payload: { text }
-				})
+				body: JSON.stringify(createMessageSendBody(text, { key }))
 			});
 			if (!res.ok) {
 				const body = await res.text().catch(() => ``);
@@ -155,6 +311,7 @@ function MessageInput({ db, baseUrl, entityUrl, identity, headers, disabled }) {
 				}
 				throw new Error(message);
 			}
+			await db.utils.awaitTxId(await readSendTxid(res), SEND_TXID_TIMEOUT_MS);
 		}
 	}), [
 		db,
@@ -168,7 +325,12 @@ function MessageInput({ db, baseUrl, entityUrl, identity, headers, disabled }) {
 		if (key.return) {
 			if (value.trim()) {
 				setError(null);
-				const tx = sendAction({ text: value.trim() });
+				const pendingOrderIndex = nextOptimisticInboxOrderIndex();
+				const tx = sendAction({
+					text: value.trim(),
+					key: createOptimisticInboxKey(pendingOrderIndex),
+					pendingOrderIndex
+				});
 				setValue(``);
 				tx.isPersisted.promise.catch((err) => {
 					setError(err.message);
@@ -206,6 +368,7 @@ function MessageInput({ db, baseUrl, entityUrl, identity, headers, disabled }) {
 function AgentResponseView({ section, label, isStreaming }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
 		flexDirection: "column",
+		width: "100%",
 		children: [
 			section.items.map((item, i) => {
 				if (item.kind === `text`) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentTextView, {
@@ -235,6 +398,31 @@ function AgentResponseView({ section, label, isStreaming }) {
 		]
 	});
 }
+function AgentRunView({ run, label, isStreaming }) {
+	const { data: items = [] } = (0, __tanstack_react_db.useLiveQuery)((q) => run.items ? q.from({ item: run.items }) : void 0, [run.items]);
+	const { data: errors = [] } = (0, __tanstack_react_db.useLiveQuery)((q) => run.errors ? q.from({ error: run.errors }) : void 0, [run.errors]);
+	const sortedItems = (0, react.useMemo)(() => [...items].sort(compareRunItems), [items]);
+	const runErrors = (0, react.useMemo)(() => runErrorsText(errors), [errors]);
+	const finishReason = run.status === `failed` && run.finish_reason ? `finish_reason=${run.finish_reason}` : void 0;
+	const section = (0, react.useMemo)(() => ({
+		kind: `agent_response`,
+		items: runItemsToContentItems(sortedItems),
+		...run.status === `completed` && { done: true },
+		...runErrors || finishReason ? { error: runErrors || finishReason } : {},
+		...run.tokens && { tokens: run.tokens }
+	}), [
+		finishReason,
+		run.status,
+		run.tokens,
+		runErrors,
+		sortedItems
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentResponseView, {
+		section,
+		label,
+		isStreaming
+	});
+}
 function wakeReason(section) {
 	const { payload } = section;
 	if (payload.timeout) return `timeout`;
@@ -267,64 +455,59 @@ function ObserveExitHotkey({ onExit }) {
 	return null;
 }
 function ObserveView({ db, entityUrl, baseUrl, identity, headers }) {
-	const timelineQuery = (0, react.useMemo)(() => (0, __electric_ax_agents_runtime.createEntityIncludesQuery)(db), [db]);
+	const timelineQuery = (0, react.useMemo)(() => (0, __electric_ax_agents_runtime.createEntityTimelineQuery)(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: [],
-		signals: [],
-		contextInserted: [],
-		contextRemoved: [],
-		entities: []
-	});
-	const typedRuns = timelineData.runs;
-	const typedInbox = timelineData.inbox;
-	const typedWakes = timelineData.wakes;
-	const timeline = (0, react.useMemo)(() => (0, __electric_ax_agents_runtime.buildSections)(typedRuns, typedInbox, typedWakes), [
-		typedRuns,
-		typedInbox,
-		typedWakes
-	]);
-	const { data: stopped = [] } = (0, __tanstack_react_db.useLiveQuery)((q) => q.from({ entityStopped: db.collections.entityStopped }), [db]);
-	const closed = stopped.length > 0;
+	const displayRows = (0, react.useMemo)(() => timelineRowsToDisplayRows(timelineRows), [timelineRows]);
+	const { data: entityStoppedRows = [] } = (0, __tanstack_react_db.useLiveQuery)((q) => q.from({ stopped: db.collections.entityStopped }), [db.collections.entityStopped]);
+	const closed = entityStoppedRows.length > 0;
 	const lastAgentIndex = (0, react.useMemo)(() => {
-		for (let i = timeline.length - 1; i >= 0; i--) if (timeline[i].kind === `agent_response`) return i;
+		for (let i = displayRows.length - 1; i >= 0; i--) {
+			const row = displayRows[i];
+			if (row.kind === `run` || row.kind === `section` && row.section.kind === `agent_response`) return i;
+		}
 		return -1;
-	}, [timeline]);
+	}, [displayRows]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ink.Box, {
 		flexDirection: "column",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
 				marginBottom: 1,
+				width: "100%",
 				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, {
+				width: "100%",
 				borderStyle: "single",
 				borderColor: "gray",
 				flexDirection: "column",
 				paddingX: 1,
 				children: [
-					timeline.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
+					displayRows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Text, {
 						dimColor: true,
 						children: "Waiting for events..."
 					}) : null,
-					timeline.map((section, i) => {
+					displayRows.map((row, i) => {
+						if (row.kind === `run`) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentRunView, {
+							run: row.run,
+							label: entityUrl,
+							isStreaming: !closed && i === lastAgentIndex && row.run.status !== `completed`
+						}, row.key);
+						const { section } = row;
 						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}`);
-						if (section.kind === `wake`) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WakeView, { section }, `wake-${i}`);
+						} }, row.key);
+						if (section.kind === `wake`) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WakeView, { section }, row.key);
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentResponseView, {
 							section,
 							label: entityUrl,
 							isStreaming: !closed && i === lastAgentIndex && !section.done
-						}, `agent-${i}`);
+						}, row.key);
 					}),
 					closed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ink.Box, {
 						marginTop: 1,
@@ -425,9 +608,15 @@ function renderObserve(opts) {
 exports.AgentTextView = AgentTextView
 exports.MessageInput = MessageInput
 exports.ObserveExitHotkey = ObserveExitHotkey
+exports.ObserveView = ObserveView
 exports.ToolCallView = ToolCallView
 exports.ToolResultView = ToolResultView
 exports.UserMessageView = UserMessageView
+exports.compareRunItems = compareRunItems
+exports.createMessageSendBody = createMessageSendBody
 exports.formatTime = formatTime
 exports.renderObserve = renderObserve
+exports.runItemKey = runItemKey
+exports.runItemKind = runItemKind
+exports.runItemsToContentItems = runItemsToContentItems
 exports.truncate = truncate

package/dist/observe-ui.d.cts

@@ -1,5 +1,5 @@
 import { EntityStreamDB } from "./entity-stream-db-BV4N31MR.cjs";
-import { EntityTimelineContentItem, MessageReceived } from "@electric-ax/agents-runtime";
+import { EntityTimelineContentItem, EntityTimelineRunItem, MessageReceived } from "@electric-ax/agents-runtime";
 import React from "react";
 
 //#region src/observe-ui.d.ts
@@ -9,6 +9,18 @@ interface StreamingText {
 }
 declare function formatTime(iso: string | undefined): string;
 declare function truncate(s: string, max: number): string;
+declare function createMessageSendBody(text: string, opts?: {
+  key?: string;
+}): {
+  key?: string;
+  payload: {
+    text: string;
+  };
+};
+declare function runItemKind(item: EntityTimelineRunItem): `text` | `toolCall`;
+declare function runItemKey(item: EntityTimelineRunItem): string;
+declare function compareRunItems(left: EntityTimelineRunItem, right: EntityTimelineRunItem): number;
+declare function runItemsToContentItems(items: Array<EntityTimelineRunItem>): Array<EntityTimelineContentItem>;
 declare function UserMessageView({
   msg
 }: {
@@ -55,6 +67,19 @@ declare function ObserveExitHotkey({
 }: {
   onExit: () => void;
 }): React.ReactElement | null;
+declare function ObserveView({
+  db,
+  entityUrl,
+  baseUrl,
+  identity,
+  headers
+}: {
+  db: EntityStreamDB;
+  entityUrl: string;
+  baseUrl: string;
+  identity: string;
+  headers?: Record<string, string>;
+}): React.ReactElement;
 declare function renderObserve(opts: {
   entityUrl: string;
   baseUrl: string;
@@ -64,4 +89,4 @@ declare function renderObserve(opts: {
 }): void;
 
 //#endregion
-export { AgentTextView, MessageInput, ObserveExitHotkey, ToolCallView, ToolResultView, UserMessageView, formatTime, renderObserve, truncate };
+export { AgentTextView, MessageInput, ObserveExitHotkey, ObserveView, ToolCallView, ToolResultView, UserMessageView, compareRunItems, createMessageSendBody, formatTime, renderObserve, runItemKey, runItemKind, runItemsToContentItems, truncate };

package/dist/observe-ui.d.ts

@@ -1,5 +1,5 @@
-import { EntityStreamDB } from "./entity-stream-db-BROzlu7p.js";
-import { EntityTimelineContentItem, MessageReceived } from "@electric-ax/agents-runtime";
+import { EntityStreamDB } from "./entity-stream-db-DRQk9DHe.js";
+import { EntityTimelineContentItem, EntityTimelineRunItem, MessageReceived } from "@electric-ax/agents-runtime";
 import React from "react";
 
 //#region src/observe-ui.d.ts
@@ -9,6 +9,18 @@ interface StreamingText {
 }
 declare function formatTime(iso: string | undefined): string;
 declare function truncate(s: string, max: number): string;
+declare function createMessageSendBody(text: string, opts?: {
+  key?: string;
+}): {
+  key?: string;
+  payload: {
+    text: string;
+  };
+};
+declare function runItemKind(item: EntityTimelineRunItem): `text` | `toolCall`;
+declare function runItemKey(item: EntityTimelineRunItem): string;
+declare function compareRunItems(left: EntityTimelineRunItem, right: EntityTimelineRunItem): number;
+declare function runItemsToContentItems(items: Array<EntityTimelineRunItem>): Array<EntityTimelineContentItem>;
 declare function UserMessageView({
   msg
 }: {
@@ -55,6 +67,19 @@ declare function ObserveExitHotkey({
 }: {
   onExit: () => void;
 }): React.ReactElement | null;
+declare function ObserveView({
+  db,
+  entityUrl,
+  baseUrl,
+  identity,
+  headers
+}: {
+  db: EntityStreamDB;
+  entityUrl: string;
+  baseUrl: string;
+  identity: string;
+  headers?: Record<string, string>;
+}): React.ReactElement;
 declare function renderObserve(opts: {
   entityUrl: string;
   baseUrl: string;
@@ -64,4 +89,4 @@ declare function renderObserve(opts: {
 }): void;
 
 //#endregion
-export { AgentTextView, MessageInput, ObserveExitHotkey, ToolCallView, ToolResultView, UserMessageView, formatTime, renderObserve, truncate };
+export { AgentTextView, MessageInput, ObserveExitHotkey, ObserveView, ToolCallView, ToolResultView, UserMessageView, compareRunItems, createMessageSendBody, formatTime, renderObserve, runItemKey, runItemKind, runItemsToContentItems, truncate };