{action.input !== undefined && (
)}
diff --git a/src/components/turn.tsx b/src/components/turn.tsx
index 5e0541b..6e4ba17 100644
--- a/src/components/turn.tsx
+++ b/src/components/turn.tsx
@@ -1,21 +1,21 @@
import {
- ArrowDownToLine,
- ArrowUpToLine,
CircleAlert,
- Clock,
+ CircleHelp,
CornerDownRight,
MessageSquare,
- Wrench,
} from "lucide-preact";
+import { useState } from "preact/hooks";
+import { DisclosureChevron } from "@/components/disclosure-chevron";
import { Entry } from "@/components/entry";
import { Metric } from "@/components/metric";
import { Reasoning } from "@/components/reasoning";
import { StatusDot } from "@/components/status-dot";
+import { SummaryMetrics } from "@/components/summary-metrics";
import { ToolCall } from "@/components/tool-call";
import { useNow } from "@/hooks/use-now";
-import { formatDuration, formatTime, formatTokens } from "@/trace/format";
+import { formatDuration, formatTime } from "@/trace/format";
import { summarizeTurn } from "@/trace/summary";
-import type { Step, Turn as TurnData } from "@/trace/types";
+import type { Action, Step, Turn as TurnData } from "@/trace/types";
// A completed turn has its final duration; a running one measures from its
// start to the ticking clock.
@@ -32,37 +32,63 @@ function elapsedMs(turn: TurnData, now: number): number {
function TurnHeader({ index, turn }: { index: number; turn: TurnData }) {
const summary = summarizeTurn(turn);
const now = useNow(turn.status === "running");
+ let startedAt: string | undefined;
+ if (turn.startedAt !== undefined) {
+ startedAt = `Started at ${formatTime(turn.startedAt)}`;
+ }
+
return (
-
-
+
+
- Turn {index}
- {turn.startedAt !== undefined && (
-
- {formatTime(turn.startedAt)}
-
- )}
-
-
- }>{summary.tools}
- }>
- {formatTokens(summary.inputTokens)}
-
- }>
- {formatTokens(summary.outputTokens)}
+
+ Turn {index}
+
+
+ {formatDuration(elapsedMs(turn, now))}
- }>{formatDuration(elapsedMs(turn, now))}
-
-
+
+
+
+
+
+
+
+
);
}
+function ActionEntry({ action }: { action: Action }) {
+ if (action.question !== undefined) {
+ return (
+
}>
+
+
{action.question.prompt}
+ {action.question.options.length > 0 && (
+
+ {action.question.options.map((option) => (
+ - {option.label}
+ ))}
+
+ )}
+ {action.question.answer !== undefined && (
+
+ Answer: {action.question.answer}
+
+ )}
+
+
+ );
+ }
+ return
;
+}
+
function StepEntries({ step }: { step: Step }) {
return (
<>
{step.reasoning !== undefined &&
}
{step.actions.map((action) => (
-
+
))}
{step.response !== undefined && (
}>
@@ -87,20 +113,28 @@ function TurnError({ error }: { error: NonNullable
}) {
}
export function Turn({ turn, index }: { turn: TurnData; index: number }) {
+ const [expanded, setExpanded] = useState(true);
+
return (
-
-
- {turn.prompt !== undefined && (
-
}>
-
{turn.prompt}
-
- )}
- {turn.steps.map((step) => (
-
- ))}
- {turn.error !== undefined &&
}
-
setExpanded(event.currentTarget.open)}
+ >
+
+
+ {turn.prompt !== undefined && (
+
}>
+
{turn.prompt}
+
+ )}
+ {turn.steps.map((step) => (
+
+ ))}
+ {turn.error !== undefined &&
}
+
);
}
diff --git a/src/mount.tsx b/src/mount.tsx
index 98344e5..4c310ac 100644
--- a/src/mount.tsx
+++ b/src/mount.tsx
@@ -1,15 +1,39 @@
import { render } from "preact";
import { Panel } from "@/components/panel";
+import { createPageLayout } from "@/page-layout";
import styles from "@/styles.css?inline";
import { createTrace } from "@/trace/trace";
+function isDocument(root: Element | Document): root is Document {
+ return root.nodeType === Node.DOCUMENT_NODE;
+}
+
function parentFor(root: Element | Document): Element {
- if (root instanceof Document) {
+ if (isDocument(root)) {
return root.body;
}
return root;
}
+function pageFor(root: Element | Document): HTMLElement {
+ if (isDocument(root)) {
+ return root.documentElement;
+ }
+
+ const HTMLElement = root.ownerDocument.defaultView?.HTMLElement;
+ if (HTMLElement !== undefined && root instanceof HTMLElement) {
+ return root as HTMLElement;
+ }
+ return root.ownerDocument.documentElement;
+}
+
+function documentFor(root: Element | Document): Document {
+ if (isDocument(root)) {
+ return root;
+ }
+ return root.ownerDocument;
+}
+
function applyStyles(shadow: ShadowRoot): CSSStyleSheet {
const sheet = new CSSStyleSheet();
sheet.replaceSync(styles);
@@ -21,7 +45,10 @@ function applyStyles(shadow: ShadowRoot): CSSStyleSheet {
// ignored inside a shadow root: they only register from document-level
// stylesheets. They define no styles, so the host page is unaffected.
// Returns a function that releases them again.
-function adoptPropertyRules(sheet: CSSStyleSheet): () => void {
+function adoptPropertyRules(
+ sheet: CSSStyleSheet,
+ document: Document,
+): () => void {
const properties = new CSSStyleSheet();
for (const rule of sheet.cssRules) {
if (rule instanceof CSSPropertyRule) {
@@ -44,13 +71,15 @@ export type EveDevtools = {
export function mount(root: Element | Document = document): EveDevtools {
const trace = createTrace();
- const host = document.createElement("div");
+ const pageLayout = createPageLayout(pageFor(root));
+ const ownerDocument = documentFor(root);
+ const host = ownerDocument.createElement("div");
parentFor(root).appendChild(host);
const shadow = host.attachShadow({ mode: "open" });
const sheet = applyStyles(shadow);
- const releaseProperties = adoptPropertyRules(sheet);
- render(, shadow);
+ const releaseProperties = adoptPropertyRules(sheet, ownerDocument);
+ render(, shadow);
return {
onEvent: trace.push,
@@ -58,6 +87,7 @@ export function mount(root: Element | Document = document): EveDevtools {
render(null, shadow);
host.remove();
releaseProperties();
+ pageLayout.restore();
},
};
}
diff --git a/src/page-layout.test.ts b/src/page-layout.test.ts
new file mode 100644
index 0000000..58fb0d9
--- /dev/null
+++ b/src/page-layout.test.ts
@@ -0,0 +1,106 @@
+import { afterAll, beforeAll, describe, expect, test } from "bun:test";
+import { createPageLayout } from "@/page-layout";
+
+const pageAttribute = "data-eve-devtools-page";
+const widthProperty = "--eve-devtools-panel-width";
+const originalStyleSheet = globalThis.CSSStyleSheet;
+
+class TestStyleSheet {
+ replaceSync() {}
+}
+
+class TestStyle {
+ private values = new Map();
+ private priorities = new Map();
+
+ getPropertyPriority(name: string): string {
+ return this.priorities.get(name) ?? "";
+ }
+
+ getPropertyValue(name: string): string {
+ return this.values.get(name) ?? "";
+ }
+
+ removeProperty(name: string) {
+ this.values.delete(name);
+ this.priorities.delete(name);
+ }
+
+ setProperty(name: string, value: string, priority = "") {
+ this.values.set(name, value);
+ this.priorities.set(name, priority);
+ }
+}
+
+function createPage() {
+ const attributes = new Map();
+ const style = new TestStyle();
+ const ownerDocument = { adoptedStyleSheets: [] as CSSStyleSheet[] };
+ const page = {
+ ownerDocument,
+ style,
+ getAttribute(name: string) {
+ return attributes.get(name) ?? null;
+ },
+ hasAttribute(name: string) {
+ return attributes.has(name);
+ },
+ removeAttribute(name: string) {
+ attributes.delete(name);
+ },
+ setAttribute(name: string, value: string) {
+ attributes.set(name, value);
+ },
+ } as unknown as HTMLElement;
+ return { attributes, ownerDocument, page, style };
+}
+
+beforeAll(() => {
+ Object.defineProperty(globalThis, "CSSStyleSheet", {
+ configurable: true,
+ value: TestStyleSheet,
+ });
+});
+
+afterAll(() => {
+ if (originalStyleSheet === undefined) {
+ Reflect.deleteProperty(globalThis, "CSSStyleSheet");
+ return;
+ }
+ Object.defineProperty(globalThis, "CSSStyleSheet", {
+ configurable: true,
+ value: originalStyleSheet,
+ });
+});
+
+describe("createPageLayout", () => {
+ test("resizes and restores an untouched page", () => {
+ const { attributes, ownerDocument, page, style } = createPage();
+ const layout = createPageLayout(page);
+
+ expect(ownerDocument.adoptedStyleSheets).toHaveLength(1);
+ layout.resize(380);
+ expect(attributes.get(pageAttribute)).toBe("");
+ expect(style.getPropertyValue(widthProperty)).toBe("380px");
+
+ layout.restore();
+ expect(attributes.has(pageAttribute)).toBe(false);
+ expect(style.getPropertyValue(widthProperty)).toBe("");
+ expect(ownerDocument.adoptedStyleSheets).toHaveLength(0);
+ });
+
+ test("preserves existing host values", () => {
+ const { attributes, page, style } = createPage();
+ attributes.set(pageAttribute, "host-value");
+ style.setProperty(widthProperty, "24px", "important");
+ const layout = createPageLayout(page);
+
+ layout.resize(420);
+ layout.resize(null);
+
+ expect(attributes.get(pageAttribute)).toBe("host-value");
+ expect(style.getPropertyValue(widthProperty)).toBe("24px");
+ expect(style.getPropertyPriority(widthProperty)).toBe("important");
+ layout.restore();
+ });
+});
diff --git a/src/page-layout.ts b/src/page-layout.ts
new file mode 100644
index 0000000..34f043c
--- /dev/null
+++ b/src/page-layout.ts
@@ -0,0 +1,96 @@
+import styles from "@/page.css?inline";
+
+const pageAttribute = "data-eve-devtools-page";
+const widthProperty = "--eve-devtools-panel-width";
+
+type AttributeSnapshot = {
+ isPresent: boolean;
+ value: string;
+};
+
+type PropertySnapshot = {
+ value: string;
+ priority: string;
+};
+
+function readAttribute(element: Element, name: string): AttributeSnapshot {
+ return {
+ isPresent: element.hasAttribute(name),
+ value: element.getAttribute(name) ?? "",
+ };
+}
+
+function restoreAttribute(
+ element: Element,
+ name: string,
+ snapshot: AttributeSnapshot,
+) {
+ if (snapshot.isPresent) {
+ element.setAttribute(name, snapshot.value);
+ return;
+ }
+ element.removeAttribute(name);
+}
+
+function readProperty(
+ style: CSSStyleDeclaration,
+ name: string,
+): PropertySnapshot {
+ return {
+ value: style.getPropertyValue(name),
+ priority: style.getPropertyPriority(name),
+ };
+}
+
+function restoreProperty(
+ style: CSSStyleDeclaration,
+ name: string,
+ snapshot: PropertySnapshot,
+) {
+ if (snapshot.value !== "") {
+ style.setProperty(name, snapshot.value, snapshot.priority);
+ return;
+ }
+ style.removeProperty(name);
+}
+
+function adoptStyles(document: Document): () => void {
+ const sheet = new CSSStyleSheet();
+ sheet.replaceSync(styles);
+ document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+
+ return () => {
+ document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+ (adopted) => adopted !== sheet,
+ );
+ };
+}
+
+export type PageLayout = {
+ resize: (width: number | null) => void;
+ restore: () => void;
+};
+
+export function createPageLayout(page: HTMLElement): PageLayout {
+ const attribute = readAttribute(page, pageAttribute);
+ const property = readProperty(page.style, widthProperty);
+ const releaseStyles = adoptStyles(page.ownerDocument);
+
+ function resize(width: number | null) {
+ if (width === null) {
+ restoreAttribute(page, pageAttribute, attribute);
+ restoreProperty(page.style, widthProperty, property);
+ return;
+ }
+
+ page.setAttribute(pageAttribute, "");
+ page.style.setProperty(widthProperty, `${width}px`);
+ }
+
+ function restore() {
+ resize(null);
+ releaseStyles();
+ }
+
+ return { resize, restore };
+}
diff --git a/src/page.css b/src/page.css
new file mode 100644
index 0000000..5d82a5d
--- /dev/null
+++ b/src/page.css
@@ -0,0 +1,4 @@
+/* Changing only the width keeps the host DOM and positioning contexts intact. */
+[data-eve-devtools-page] {
+ width: calc(100% - var(--eve-devtools-panel-width));
+}
diff --git a/src/panel-size.test.ts b/src/panel-size.test.ts
new file mode 100644
index 0000000..2ed42b4
--- /dev/null
+++ b/src/panel-size.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, test } from "bun:test";
+import { canDock, maximumPanelWidth, panelWidth } from "@/panel-size";
+
+describe("panel sizing", () => {
+ test("uses the full viewport on mobile", () => {
+ expect(canDock(599)).toBe(false);
+ expect(panelWidth(380, 599)).toBe(599);
+ });
+
+ test("preserves a minimum width for the page and panel", () => {
+ expect(canDock(600)).toBe(true);
+ expect(panelWidth(200, 600)).toBe(280);
+ expect(panelWidth(500, 600)).toBe(280);
+ });
+
+ test("clamps the stored width on larger viewports", () => {
+ expect(maximumPanelWidth(1280)).toBe(960);
+ expect(panelWidth(200, 1280)).toBe(280);
+ expect(panelWidth(380, 1280)).toBe(380);
+ expect(panelWidth(1200, 1280)).toBe(960);
+ });
+});
diff --git a/src/panel-size.ts b/src/panel-size.ts
new file mode 100644
index 0000000..0102789
--- /dev/null
+++ b/src/panel-size.ts
@@ -0,0 +1,21 @@
+export const defaultPanelWidth = 380;
+export const minimumPanelWidth = 280;
+export const minimumPageWidth = 320;
+
+export function canDock(viewportWidth: number): boolean {
+ return viewportWidth >= minimumPanelWidth + minimumPageWidth;
+}
+
+export function maximumPanelWidth(viewportWidth: number): number {
+ return Math.max(minimumPanelWidth, viewportWidth - minimumPageWidth);
+}
+
+export function panelWidth(storedWidth: number, viewportWidth: number): number {
+ if (!canDock(viewportWidth)) {
+ return viewportWidth;
+ }
+ return Math.min(
+ maximumPanelWidth(viewportWidth),
+ Math.max(minimumPanelWidth, storedWidth),
+ );
+}
diff --git a/src/styles.css b/src/styles.css
index 2f5450b..659d33e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -13,13 +13,20 @@
--color-line-1: #262626;
--color-line-2: #404040;
--color-line-3: #525252;
+ --color-focus: #8c8c8c;
+ --color-metric-input: oklch(0.77 0.11 235);
+ --color-metric-output: oklch(0.78 0.12 55);
--font-mono: ui-monospace, SFMono-Regular, monospace;
- --shadow-panel: 0 2px 12px #00000059;
- --shadow-panel-open: 0 4px 12px #0000004d, 0 16px 40px #00000066;
+ --shadow-launcher: 0 2px 12px #00000059;
}
:host {
all: initial;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: 0;
color-scheme: dark;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 13px;
@@ -28,7 +35,70 @@
-moz-osx-font-smoothing: grayscale;
}
+@keyframes panel-enter {
+ from {
+ opacity: 0;
+ transform: translateX(4px);
+ }
+}
+
+@keyframes control-enter {
+ from {
+ opacity: 0;
+ transform: scale(0.96);
+ }
+}
+
+@keyframes disclosure-enter {
+ from {
+ opacity: 0;
+ transform: translateY(-2px);
+ }
+}
+
+.panel-enter {
+ animation: panel-enter 160ms ease-out;
+}
+
+.launcher {
+ right: max(0.75rem, env(safe-area-inset-right));
+ bottom: max(0.75rem, env(safe-area-inset-bottom));
+ animation: control-enter 120ms ease-out;
+}
+
+.safe-area {
+ padding: env(safe-area-inset-top) env(safe-area-inset-right)
+ env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+
+.disclosure-summary {
+ list-style: none;
+}
+
+.disclosure-summary::-webkit-details-marker {
+ display: none;
+}
+
+.disclosure-summary:focus,
+.reasoning-toggle:focus {
+ outline: none;
+}
+
+.disclosure-summary:focus-visible,
+.reasoning-toggle:focus-visible {
+ box-shadow: inset 2px 0 var(--color-focus);
+}
+
+.disclosure-summary:focus-visible {
+ background-color: var(--color-surface-3);
+}
+
+details[open] > .disclosure-content {
+ animation: disclosure-enter 120ms ease-out;
+}
+
.scroll {
+ scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: var(--color-line-2) transparent;
}
@@ -43,8 +113,16 @@
border-radius: 3px;
}
-/* Animate only the panel's open/close; nested details (tool calls) toggle
- instantly instead of lingering for the transition. */
-:host > details::details-content {
- transition: content-visibility 300ms allow-discrete;
+@media (prefers-reduced-motion: reduce) {
+ .panel-enter,
+ .launcher,
+ details[open] > .disclosure-content {
+ animation: none;
+ }
+
+ .disclosure-summary,
+ .disclosure-chevron,
+ .reasoning-toggle {
+ transition-duration: 0.01ms;
+ }
}
diff --git a/src/trace/events.ts b/src/trace/events.ts
index 8444c5d..abe7d5d 100644
--- a/src/trace/events.ts
+++ b/src/trace/events.ts
@@ -16,6 +16,26 @@ export type ActionRequest = {
input?: unknown;
};
+type InputRequest = {
+ requestId: string;
+ prompt: string;
+ options?: readonly {
+ id: string;
+ label: string;
+ }[];
+ action: {
+ callId: string;
+ toolName: string;
+ input?: unknown;
+ };
+};
+
+type InputResponse = {
+ requestId: string;
+ optionId?: string;
+ text?: string;
+};
+
type TraceEventBody =
| { type: "turn.started"; data: { turnId: string } }
| { type: "turn.completed"; data: { turnId: string } }
@@ -50,6 +70,18 @@ type TraceEventBody =
actions: readonly ActionRequest[];
};
}
+ | {
+ type: "input.requested";
+ data: {
+ turnId: string;
+ stepIndex: number;
+ requests: readonly InputRequest[];
+ };
+ }
+ | {
+ type: "client.input.responded";
+ data: { responses: readonly InputResponse[] };
+ }
| {
type: "action.result";
data: {
diff --git a/src/trace/format.test.ts b/src/trace/format.test.ts
new file mode 100644
index 0000000..0a4301a
--- /dev/null
+++ b/src/trace/format.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, test } from "bun:test";
+import { formatDuration, formatTokens } from "@/trace/format";
+
+describe("formatDuration", () => {
+ test("keeps milliseconds compact", () => {
+ expect(formatDuration(-1)).toBe("0ms");
+ expect(formatDuration(1)).toBe("1ms");
+ expect(formatDuration(12)).toBe("12ms");
+ expect(formatDuration(999)).toBe("999ms");
+ });
+
+ test("uses three significant digits for larger units", () => {
+ expect(formatDuration(1000)).toBe("1.00s");
+ expect(formatDuration(12_345)).toBe("12.3s");
+ expect(formatDuration(60_000)).toBe("1.00m");
+ expect(formatDuration(3_600_000)).toBe("1.00h");
+ });
+
+ test("promotes values that round across unit boundaries", () => {
+ expect(formatDuration(59_950)).toBe("1.00m");
+ expect(formatDuration(3_597_000)).toBe("1.00h");
+ });
+});
+
+describe("formatTokens", () => {
+ test("uses compact rounded units", () => {
+ expect(formatTokens(999)).toBe("999");
+ expect(formatTokens(1000)).toBe("1k");
+ expect(formatTokens(7100)).toBe("7k");
+ expect(formatTokens(999_499)).toBe("999k");
+ expect(formatTokens(999_500)).toBe("1m");
+ });
+});
diff --git a/src/trace/format.ts b/src/trace/format.ts
index 416a759..ee89778 100644
--- a/src/trace/format.ts
+++ b/src/trace/format.ts
@@ -1,21 +1,36 @@
export function formatDuration(ms: number): string {
if (ms < 1000) {
- return `${Math.round(ms)}ms`;
+ const milliseconds = Math.min(999, Math.max(0, Math.round(ms)));
+ return `${milliseconds}ms`;
}
const seconds = ms / 1000;
if (seconds < 60) {
- return `${seconds.toFixed(1)}s`;
+ const formattedSeconds = seconds.toPrecision(3);
+ if (Number(formattedSeconds) < 60) {
+ return `${formattedSeconds}s`;
+ }
+ return `${(Number(formattedSeconds) / 60).toPrecision(3)}m`;
}
- const minutes = Math.floor(seconds / 60);
- const rest = Math.floor(seconds % 60);
- return `${minutes}:${rest.toString().padStart(2, "0")}`;
+ const minutes = seconds / 60;
+ if (minutes < 60) {
+ const formattedMinutes = minutes.toPrecision(3);
+ if (Number(formattedMinutes) < 60) {
+ return `${formattedMinutes}m`;
+ }
+ return `${(Number(formattedMinutes) / 60).toPrecision(3)}h`;
+ }
+ return `${(minutes / 60).toPrecision(3)}h`;
}
export function formatTokens(count: number): string {
if (count < 1000) {
return `${count}`;
}
- return `${(count / 1000).toFixed(1)}k`;
+ const thousands = Math.round(count / 1000);
+ if (thousands < 1000) {
+ return `${thousands}k`;
+ }
+ return `${Math.round(count / 1_000_000)}m`;
}
export function formatTime(iso: string): string {
diff --git a/src/trace/projector.test.ts b/src/trace/projector.test.ts
new file mode 100644
index 0000000..944a4da
--- /dev/null
+++ b/src/trace/projector.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, test } from "bun:test";
+import type { TraceEvent } from "@/trace/events";
+import { createProjector } from "@/trace/projector";
+import { summarizeTurn } from "@/trace/summary";
+import type { Turn } from "@/trace/types";
+
+describe("createProjector", () => {
+ test("presents ask_question calls as questions", () => {
+ let turns: Turn[] = [];
+ const projector = createProjector((nextTurns) => {
+ turns = nextTurns;
+ });
+ const events: TraceEvent[] = [
+ { type: "turn.started", data: { turnId: "turn-1" } },
+ {
+ type: "message.appended",
+ data: { turnId: "turn-1", stepIndex: 0, messageSoFar: " \n " },
+ },
+ {
+ type: "message.completed",
+ data: { turnId: "turn-1", stepIndex: 0, message: "\n" },
+ },
+ {
+ type: "input.requested",
+ data: {
+ turnId: "turn-1",
+ stepIndex: 0,
+ requests: [
+ {
+ requestId: "request-1",
+ prompt: "Which city?",
+ options: [
+ { id: "tokyo", label: "Tokyo" },
+ { id: "paris", label: "Paris" },
+ ],
+ action: {
+ callId: "question-1",
+ toolName: "ask_question",
+ input: { prompt: "Which city?" },
+ },
+ },
+ ],
+ },
+ },
+ {
+ type: "client.input.responded",
+ data: {
+ responses: [{ requestId: "request-1", optionId: "paris" }],
+ },
+ },
+ ];
+
+ for (const event of events) {
+ projector.push(event);
+ }
+
+ const turn = turns[0];
+ if (turn === undefined) {
+ throw new Error("Expected the projected turn.");
+ }
+ expect(turn.steps[0]?.actions[0]?.question).toEqual({
+ requestId: "request-1",
+ prompt: "Which city?",
+ options: [
+ { id: "tokyo", label: "Tokyo" },
+ { id: "paris", label: "Paris" },
+ ],
+ answer: "Paris",
+ });
+ expect(turn.steps[0]?.response).toBeUndefined();
+ expect(summarizeTurn(turn).tools).toBe(0);
+ });
+});
diff --git a/src/trace/projector.ts b/src/trace/projector.ts
index 90c8145..a676cbc 100644
--- a/src/trace/projector.ts
+++ b/src/trace/projector.ts
@@ -1,5 +1,5 @@
import type { ActionRequest, TraceEvent } from "@/trace/events";
-import type { Action, Step, Turn } from "@/trace/types";
+import type { Action, Question, Step, Turn } from "@/trace/types";
export type Projector = {
push: (event: TraceEvent) => void;
@@ -19,12 +19,30 @@ function millisBetween(
return Date.parse(end) - Date.parse(start);
}
+function answerFor(
+ question: Question,
+ response: { optionId?: string; text?: string },
+): string | undefined {
+ const text = response.text?.trim();
+ if (text !== undefined && text !== "") {
+ return text;
+ }
+ if (response.optionId === undefined) {
+ return undefined;
+ }
+ return (
+ question.options.find((option) => option.id === response.optionId)?.label ??
+ response.optionId
+ );
+}
+
// Folds eve stream events into the Turn tree, calling onChange with a fresh
// snapshot after every event. The wire only reports completed, failed, and
// rejected action results; running and aborted are synthesized here.
export function createProjector(onChange: (turns: Turn[]) => void): Projector {
const turns: Turn[] = [];
const actionsByCallId = new Map();
+ const questionsByRequestId = new Map();
function turnById(turnId: string): Turn | undefined {
return turns.find((turn) => turn.id === turnId);
@@ -91,7 +109,7 @@ export function createProjector(onChange: (turns: Turn[]) => void): Projector {
return;
}
case "message.appended": {
- if (event.data.messageSoFar === "") {
+ if (event.data.messageSoFar.trim() === "") {
return;
}
const step = stepAt(event.data.turnId, event.data.stepIndex);
@@ -101,7 +119,7 @@ export function createProjector(onChange: (turns: Turn[]) => void): Projector {
return;
}
case "message.completed": {
- if (event.data.message === null) {
+ if (event.data.message === null || event.data.message.trim() === "") {
return;
}
const step = stepAt(event.data.turnId, event.data.stepIndex);
@@ -135,6 +153,46 @@ export function createProjector(onChange: (turns: Turn[]) => void): Projector {
}
return;
}
+ case "input.requested": {
+ for (const request of event.data.requests) {
+ if (request.action.toolName !== "ask_question") {
+ continue;
+ }
+ let action = actionsByCallId.get(request.action.callId);
+ if (action === undefined) {
+ const step = stepAt(event.data.turnId, event.data.stepIndex);
+ if (step === undefined) {
+ continue;
+ }
+ action = {
+ callId: request.action.callId,
+ name: request.action.toolName,
+ status: "running",
+ startedAt: event.meta?.at,
+ input: request.action.input,
+ };
+ actionsByCallId.set(action.callId, action);
+ step.actions.push(action);
+ }
+ action.question = {
+ requestId: request.requestId,
+ prompt: request.prompt,
+ options: request.options ?? [],
+ };
+ questionsByRequestId.set(request.requestId, action);
+ }
+ return;
+ }
+ case "client.input.responded": {
+ for (const response of event.data.responses) {
+ const action = questionsByRequestId.get(response.requestId);
+ if (action?.question === undefined) {
+ continue;
+ }
+ action.question.answer = answerFor(action.question, response);
+ }
+ return;
+ }
case "action.result": {
const action = actionsByCallId.get(event.data.result.callId);
if (action === undefined) {
@@ -176,6 +234,7 @@ export function createProjector(onChange: (turns: Turn[]) => void): Projector {
case "session.started": {
turns.length = 0;
actionsByCallId.clear();
+ questionsByRequestId.clear();
return;
}
case "session.completed":
diff --git a/src/trace/summary.ts b/src/trace/summary.ts
index 099180a..ba78cab 100644
--- a/src/trace/summary.ts
+++ b/src/trace/summary.ts
@@ -11,7 +11,11 @@ export function summarizeTurn(turn: Turn): TurnSummary {
let inputTokens = 0;
let outputTokens = 0;
for (const step of turn.steps) {
- tools += step.actions.length;
+ for (const action of step.actions) {
+ if (action.question === undefined) {
+ tools += 1;
+ }
+ }
inputTokens += step.usage?.inputTokens ?? 0;
outputTokens += step.usage?.outputTokens ?? 0;
}
@@ -21,14 +25,3 @@ export function summarizeTurn(turn: Turn): TurnSummary {
outputTokens,
};
}
-
-export function summarizeTurns(turns: Turn[]): TurnSummary {
- const total = { tools: 0, inputTokens: 0, outputTokens: 0 };
- for (const turn of turns) {
- const summary = summarizeTurn(turn);
- total.tools += summary.tools;
- total.inputTokens += summary.inputTokens;
- total.outputTokens += summary.outputTokens;
- }
- return total;
-}
diff --git a/src/trace/types.ts b/src/trace/types.ts
index 8de785e..c8a6c7e 100644
--- a/src/trace/types.ts
+++ b/src/trace/types.ts
@@ -19,10 +19,21 @@ export type TraceError = {
details?: unknown;
};
+export type Question = {
+ requestId: string;
+ prompt: string;
+ options: readonly {
+ id: string;
+ label: string;
+ }[];
+ answer?: string;
+};
+
export type Action = {
callId: string;
name: string;
status: ActionStatus;
+ question?: Question;
startedAt?: string; // ISO timestamp, from the event's `meta.at`
durationMs?: number;
input?: unknown;
diff --git a/tsconfig.json b/tsconfig.json
index 6a4a274..bbc3054 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
{
"compilerOptions": {
"lib": ["ESNext", "DOM"],
- "types": ["vite/client"],
+ "types": ["bun", "vite/client"],
"module": "ESNext",
"target": "ESNext",
"moduleResolution": "bundler",
diff --git a/vite.config.ts b/vite.config.ts
index ac45fc2..2e30598 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,7 +3,13 @@ import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
export default defineConfig({
- plugins: [tailwindcss(), dts({ include: ["index.ts", "react.ts", "src"] })],
+ plugins: [
+ tailwindcss(),
+ dts({
+ include: ["index.ts", "react.ts", "src"],
+ exclude: ["src/**/*.test.ts"],
+ }),
+ ],
resolve: { alias: { "@": `${import.meta.dirname}/src` } },
build: {
lib: {