@flowdular/sandbox 0.2.6 → 0.2.8

package/internal/coding-agent/src/drivers/byok.ts

@@ -85,19 +85,33 @@ export function createByokDriver(
 		allowedPaths: readonly string[],
 		emit: (event: CodingAgentEvent) => void,
 	): ToolSet {
+		let nextCall = 0;
 		const record = (
 			name: string,
 			detail: string,
 			run: () => Promise<string>,
 		) => {
-			emit({ type: 'tool.started', tool: name, detail });
+			const callId = String(++nextCall);
+			emit({ type: 'tool.started', callId, tool: name, detail });
 			return run().then(
 				(value) => {
-					emit({ type: 'tool.completed', tool: name, detail, ok: true });
+					emit({
+						type: 'tool.completed',
+						callId,
+						tool: name,
+						detail,
+						ok: true,
+					});
 					return value;
 				},
 				(error: unknown) => {
-					emit({ type: 'tool.completed', tool: name, detail, ok: false });
+					emit({
+						type: 'tool.completed',
+						callId,
+						tool: name,
+						detail,
+						ok: false,
+					});
 					return `Error: ${error instanceof Error ? error.message : String(error)}`;
 				},
 			);

package/internal/coding-agent/src/drivers/claude-code.ts

@@ -28,6 +28,8 @@ const DEFAULT_TOOLS = ['Read', 'Write', 'Edit', 'Glob', 'Grep'] as const;
 const DEFAULT_TIMEOUT_MS = 10 * 60 * 1000;
 
 interface ContentBlock {
+	readonly id?: string;
+	readonly tool_use_id?: string;
 	readonly type?: string;
 	readonly text?: string;
 	readonly thinking?: string;
@@ -41,7 +43,8 @@ function toolDetail(input: Record<string, unknown> | undefined): string {
 	if (!input) return '';
 	for (const key of ['file_path', 'path', 'pattern', 'query', 'command']) {
 		const value = input[key];
-		if (typeof value === 'string') return value.slice(0, 200);
+		if (typeof value === 'string')
+			return value.slice(0, key === 'file_path' || key === 'path' ? 4096 : 200);
 	}
 	return '';
 }
@@ -175,6 +178,7 @@ export function createClaudeCodeDriver(
 		let started = false;
 		let completed = false;
 		let currentResumeId = resumeId;
+		let lastActivityAt = -Infinity;
 		for await (const line of stream.lines) {
 			const message = parseJsonLine(line);
 			if (!message) continue;
@@ -200,14 +204,30 @@ export function createClaudeCodeDriver(
 				const block = partial?.content_block as
 					| Record<string, unknown>
 					| undefined;
+
+				const delta = partial?.delta as Record<string, unknown> | undefined;
+				const kind =
+					partial?.type === 'content_block_start'
+						? block?.type
+						: partial?.type === 'content_block_delta'
+							? delta?.type
+							: null;
+				const phase =
+					kind === 'thinking' || kind === 'thinking_delta'
+						? 'thinking'
+						: kind === 'text' ||
+							  kind === 'text_delta' ||
+							  kind === 'input_json_delta'
+							? 'responding'
+							: null;
+				const now = Date.now();
 				if (
-					partial?.type === 'content_block_start' &&
-					(block?.type === 'thinking' || block?.type === 'text')
+					phase &&
+					(partial?.type === 'content_block_start' ||
+						now - lastActivityAt >= 10_000)
 				) {
-					yield {
-						type: 'activity',
-						phase: block.type === 'thinking' ? 'thinking' : 'responding',
-					};
+					lastActivityAt = now;
+					yield { type: 'activity', phase };
 				}
 				continue;
 			}
@@ -219,12 +239,13 @@ export function createClaudeCodeDriver(
 					if (block.type === 'text' && block.text?.trim()) {
 						yield { type: 'assistant.message', text: block.text };
 					}
-					if (block.type === 'thinking' && typeof block.thinking === 'string') {
+					if (block.type === 'thinking' && block.thinking?.trim()) {
 						yield { type: 'reasoning', text: block.thinking };
 					}
 					if (block.type === 'tool_use' && block.name) {
 						yield {
 							type: 'tool.started',
+							...(block.id ? { callId: block.id } : {}),
 							tool: block.name,
 							detail: toolDetail(block.input),
 						};
@@ -244,6 +265,7 @@ export function createClaudeCodeDriver(
 					if (block.type !== 'tool_result') continue;
 					yield {
 						type: 'tool.completed',
+						...(block.tool_use_id ? { callId: block.tool_use_id } : {}),
 						tool: typeof result.type === 'string' ? result.type : 'tool',
 						detail: typeof result.filePath === 'string' ? result.filePath : '',
 						ok: block.is_error !== true,
@@ -290,6 +312,12 @@ export function createClaudeCodeDriver(
 
 		const exit = await stream.finished;
 		if (completed) return;
+		if (exit.timedOut) {
+			throw new CodingAgentError(
+				'DRIVER_TIMEOUT',
+				'The coding agent exceeded the turn time limit. Review the draft before continuing.',
+			);
+		}
 		if (exit.aborted) {
 			yield {
 				type: 'turn.completed',

package/internal/coding-agent/src/drivers/codex.ts

@@ -217,12 +217,14 @@ export function createCodexDriver(
 					yield done
 						? {
 								type: 'tool.completed',
+								...(item.id ? { callId: item.id } : {}),
 								tool: 'command',
 								detail: (item.command ?? '').slice(0, 200),
 								ok: (item.exit_code ?? 0) === 0,
 							}
 						: {
 								type: 'tool.started',
+								...(item.id ? { callId: item.id } : {}),
 								tool: 'command',
 								detail: (item.command ?? '').slice(0, 200),
 							};
@@ -262,6 +264,12 @@ export function createCodexDriver(
 
 		const exit = await stream.finished;
 		if (completed) return;
+		if (exit.timedOut) {
+			throw new CodingAgentError(
+				'DRIVER_TIMEOUT',
+				'The coding agent exceeded the turn time limit. Review the draft before continuing.',
+			);
+		}
 		if (exit.aborted) {
 			yield {
 				type: 'turn.completed',

package/internal/coding-agent/src/types.ts

@@ -20,11 +20,13 @@ export type CodingAgentEvent =
 	| { readonly type: 'activity'; readonly phase: 'thinking' | 'responding' }
 	| {
 			readonly type: 'tool.started';
+			readonly callId?: string;
 			readonly tool: string;
 			readonly detail: string;
 	  }
 	| {
 			readonly type: 'tool.completed';
+			readonly callId?: string;
 			readonly tool: string;
 			readonly detail: string;
 			readonly ok: boolean;

package/internal/coding-agent/src/workspace.ts

@@ -146,6 +146,7 @@ export interface ProcessLineStream {
 		readonly code: number | null;
 		readonly stderr: string;
 		readonly aborted: boolean;
+		readonly timedOut: boolean;
 	}>;
 }
 
@@ -171,6 +172,8 @@ export function spawnLineStream(options: SpawnJsonOptions): ProcessLineStream {
 	const stderrLimit = options.stderrLimit ?? 8_192;
 	let stderr = '';
 	let aborted = false;
+	let timedOut = false;
+	let killTimer: ReturnType<typeof setTimeout> | undefined;
 	child.stderr.setEncoding('utf8');
 	child.stderr.on('data', (chunk: string) => {
 		if (stderr.length < stderrLimit) {
@@ -179,27 +182,40 @@ export function spawnLineStream(options: SpawnJsonOptions): ProcessLineStream {
 	});
 
 	const stop = () => {
+		if (aborted) return;
 		aborted = true;
 		child.kill('SIGTERM');
-		setTimeout(() => child.kill('SIGKILL'), 2_000).unref();
+		killTimer = setTimeout(() => child.kill('SIGKILL'), 2_000);
+		killTimer.unref();
 	};
 	const timer =
 		options.timeoutMs === undefined
 			? undefined
-			: setTimeout(stop, options.timeoutMs);
+			: setTimeout(() => {
+					if (aborted) return;
+					timedOut = true;
+					stop();
+				}, options.timeoutMs);
 	timer?.unref();
 	if (options.signal) {
 		if (options.signal.aborted) stop();
 		else options.signal.addEventListener('abort', stop, { once: true });
 	}
 
+	const cleanup = () => {
+		if (timer) clearTimeout(timer);
+		if (killTimer) clearTimeout(killTimer);
+		options.signal?.removeEventListener('abort', stop);
+	};
+
 	const finished = new Promise<{
 		code: number | null;
 		stderr: string;
 		aborted: boolean;
+		timedOut: boolean;
 	}>((resolvePromise, rejectPromise) => {
 		child.on('error', (error) => {
-			if (timer) clearTimeout(timer);
+			cleanup();
 			rejectPromise(
 				new CodingAgentError(
 					'DRIVER_PROCESS_FAILED',
@@ -208,8 +224,8 @@ export function spawnLineStream(options: SpawnJsonOptions): ProcessLineStream {
 			);
 		});
 		child.on('close', (code) => {
-			if (timer) clearTimeout(timer);
-			resolvePromise({ code, stderr, aborted });
+			cleanup();
+			resolvePromise({ code, stderr, aborted, timedOut });
 		});
 	});
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@flowdular/sandbox",
-	"version": "0.2.6",
+	"version": "0.2.8",
 	"description": "The Flowdular sandbox: chat a change, build it behind the gates, preview it in the real application, deliver it as code.",
 	"license": "MIT",
 	"homepage": "https://github.com/flowdular/flowdular/tree/main/packages/sandbox#readme",

package/src/client/ChatPane.tsrx

@@ -17,6 +17,10 @@ import {
 	type ModuleSpecReview,
 	type RoleSummary,
 } from './api.ts';
+import { ToolEvent } from './ToolEvent.tsrx';
+import { transcriptRows, type TranscriptRow } from './transcript.ts';
+import { TurnActivity } from './TurnActivity.tsrx';
+import { ComposerSettings } from './ComposerSettings.tsrx';
 import { ApprovalHandoff } from './ApprovalHandoff.tsrx';
 import { ATTACH_ACCEPT, attachmentKind, formatBytes } from './attachments.ts';
 import {
@@ -115,29 +119,33 @@ function spoken(entry: ChatEntry): string {
 interface StreamBlock {
 	readonly key: number;
 	readonly entry: ChatEntry | null;
-	readonly events: readonly ChatEntry[] | null;
+	readonly events: readonly TranscriptRow[] | null;
 }
 
-const EVENT_TAIL = 6;
-
 /* One stream in the order it happened: a message, then the tool activity that
    followed it, so the newest thing on screen is the newest thing that happened.
-   A long run of tool events keeps only its tail, because the transcript is the
-   conversation and the events are its footnotes. */
+   Keep the complete history; paired calls retain their original position. */
 function streamBlocks(entries: readonly ChatEntry[]): readonly StreamBlock[] {
 	const blocks: {
 		key: number;
 		entry: ChatEntry | null;
-		events: ChatEntry[] | null;
+		events: TranscriptRow[] | null;
 	}[] = [];
-	for (const entry of entries) {
+	for (const row of transcriptRows(entries)) {
+		const entry = row.entry;
+		if (entry.event?.type === 'reasoning' && !entry.event.text.trim()) continue;
 		const last = blocks[blocks.length - 1];
 		if (entry.kind === 'event') {
 			if (last?.events) {
-				last.events.push(entry);
+				if (
+					entry.event?.type === 'activity' &&
+						last.events.at(-1)?.entry.event?.type === 'activity'
+				) {
+					last.events[last.events.length - 1] = row;
+				} else last.events.push(row);
 				continue;
 			}
-			blocks.push({ key: entry.sequence, entry: null, events: [entry] });
+			blocks.push({ key: entry.sequence, entry: null, events: [row] });
 			continue;
 		}
 		blocks.push({ key: entry.sequence, entry, events: null });
@@ -146,7 +154,7 @@ function streamBlocks(entries: readonly ChatEntry[]): readonly StreamBlock[] {
 		(block) => ({
 			key: block.key,
 			entry: block.entry,
-			events: block.events ? block.events.slice(-EVENT_TAIL) : null,
+			events: block.events,
 		}),
 	);
 }
@@ -167,6 +175,10 @@ export function ChatPane(props: ChatPaneProps) @{
 	const { t } = useTranslation();
 	const offered = props.drivers.filter((driver) => driver.offered);
 	const stream = streamBlocks(props.entries);
+	const isActive = (entry: ChatEntry) =>
+		props.running && entry.sequence === props.entries.at(-1)?.sequence &&
+			(entry.event?.type === 'activity' ||
+				entry.event?.type === 'tool.started');
 	/* Which module an entry belongs to only matters once a session has several;
    with one module the transcript stays as quiet as it was. */
 	const moduleLabel = (entry: ChatEntry) => props.modules.length > 1 &&
@@ -178,6 +190,7 @@ export function ChatPane(props: ChatPaneProps) @{
 	const open =
 		props.entries.filter((entry) => entry.handoff).at(-1)?.sequence ?? -1;
 	const scroller = useRef<HTMLDivElement | null>(null);
+	const followLatest = useRef(true);
 	const attachInput = useRef<HTMLInputElement | null>(null);
 	/* The composer manages its own attachments: App owns the transcript, but the
    session id from the URL is enough to upload, list and remove them here. */
@@ -206,11 +219,14 @@ export function ChatPane(props: ChatPaneProps) @{
 				? checkpoints.find((entry) => entry.sequence === 0)
 				: undefined);
 
-	/* The newest message is the one being written, so the transcript follows it. */
+	/* Follow new events only while the operator is already at the bottom. */
+	useEffect(() => {
+		followLatest.current = true;
+	}, [sessionId]);
 	useEffect(() => {
 		const node = scroller.current;
-		if (node) node.scrollTop = node.scrollHeight;
-	}, [props.entries.length, props.running]);
+		if (node && followLatest.current) node.scrollTop = node.scrollHeight;
+	}, [props.entries.length, props.running, sessionId]);
 
 	/* Seed the strip from the open session, and reset it when the session
    changes so one session's attachments never show under another. */
@@ -391,22 +407,50 @@ export function ChatPane(props: ChatPaneProps) @{
 	};
 
 	<section class="sandbox__chat">
-		<div class="sandbox__scroll" ref={scroller}>
+		<div
+			class="sandbox__scroll"
+			ref={scroller}
+			onScroll={(event) => {
+				const node = event.currentTarget;
+				followLatest.current = node.scrollHeight - node.scrollTop -
+					node.clientHeight <
+				64;
+			}}
+		>
 			<div class="chat sandbox__column">
 				@for (const block of stream; key blockKey(block)) {
 					@if (block.events) {
 						<ul class="chat__events">
-							@for (const entry of block.events; key entry.sequence) {
-								<li
-									class={[
-										'chat__event',
-										isError(entry) && 'chat__event--error',
-									]}
-									title={eventLabel(entry)}
-								>
-									<Icon name={isError(entry) ? 'alert' : 'check'} size={14} />
-									<span class="chat__event-text">{eventLabel(entry)}</span>
-								</li>
+							@for (const row of block.events; key row.key) {
+								@if (
+									row.entry.event?.type === 'tool.started' ||
+										row.entry.event?.type === 'tool.completed'
+								) {
+									<li>
+										<ToolEvent row={row} running={props.running} />
+									</li>
+								} @else {
+									<li
+										class={[
+											'chat__event',
+											isActive(row.entry) && 'chat__event--active',
+											isError(row.entry) && 'chat__event--error',
+										]}
+										title={eventLabel(row.entry)}
+									>
+										<Icon
+											name={isError(row.entry)
+												? 'alert'
+												: isActive(row.entry)
+													? 'refresh'
+													: 'check'}
+											size={14}
+										/>
+										<span class="chat__event-text">{eventLabel(
+											row.entry,
+										)}</span>
+									</li>
+								}
 							}
 						</ul>
 					} @else if (block.entry!.handoff) {
@@ -606,16 +650,14 @@ export function ChatPane(props: ChatPaneProps) @{
 				onInput={(event) => props.onMessage(event.currentTarget.value)}
 				onPaste={onPaste}
 			></textarea>
-			<label class="ui-checkbox" title={t('sandbox.chat.freshHelp')}>
-				<input
-					type="checkbox"
-					checked={freshContext}
-					disabled={props.running}
-					onChange={(event) => setFreshContext(event.currentTarget.checked)}
-				/>
-				<span>{t('sandbox.chat.fresh')}</span>
-			</label>
 			<div class="chat__composer-row">
+				<ComposerSettings
+					autoContinue={props.autoContinue}
+					freshContext={freshContext}
+					running={props.running}
+					onAutoContinue={props.onAutoContinue}
+					onFreshContext={setFreshContext}
+				/>
 				<button
 					class="chat__attach"
 					type="button"
@@ -668,16 +710,6 @@ export function ChatPane(props: ChatPaneProps) @{
 						<option value={driver.id}>{driver.label}</option>
 					}
 				</select>
-				<label class="chat__auto">
-					<input
-						type="checkbox"
-						checked={props.autoContinue}
-						onInput={(event) => props.onAutoContinue(
-							event.currentTarget.checked,
-						)}
-					/>
-					<span>{t('sandbox.chat.autoHandoff')}</span>
-				</label>
 				<span class="sandbox__spacer"></span>
 				@if (props.running) {
 					<Button size="sm" variant="danger" onClick={props.onStop}>{t(
@@ -698,7 +730,7 @@ export function ChatPane(props: ChatPaneProps) @{
 			@if (props.running || props.delivered) {
 				<p class="chat__composer-status">
 					{props.running
-						? t('sandbox.chat.working')
+						? <TurnActivity lastUpdateAt={props.entries.at(-1)?.at} />
 						: t('sandbox.chat.delivered')}
 				</p>
 			}

package/src/client/ComposerSettings.tsrx

@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'octane';
+import { Icon } from '@flowdular/sdk/ui';
+import { useTranslation } from './i18n.ts';
+
+export function ComposerSettings(props: {
+	readonly autoContinue: boolean;
+	readonly freshContext: boolean;
+	readonly running: boolean;
+	readonly onAutoContinue: (enabled: boolean) => void;
+	readonly onFreshContext: (enabled: boolean) => void;
+}) @{
+	const { t } = useTranslation();
+	const root = useRef<HTMLDivElement | null>(null);
+	const trigger = useRef<HTMLButtonElement | null>(null);
+	const [position, setPosition] = useState<
+		{ left: number; bottom: number } | null
+	>(null);
+	const toggle = () => {
+		if (position) return setPosition(null);
+		const rect = trigger.current?.getBoundingClientRect();
+		if (!rect) return;
+		setPosition({
+			left: Math.max(16, Math.min(rect.left, window.innerWidth - 336)),
+			bottom: window.innerHeight - rect.top + 8,
+		});
+	};
+	useEffect(() => {
+		if (!position) return;
+		const dismiss = (event: PointerEvent | FocusEvent) => {
+			if (!root.current?.contains(event.target as Node)) setPosition(null);
+		};
+		const escape = (event: KeyboardEvent) => {
+			if (event.key !== 'Escape') return;
+			event.preventDefault();
+			setPosition(null);
+			trigger.current?.focus();
+		};
+		const resize = () => setPosition(null);
+		document.addEventListener('pointerdown', dismiss);
+		document.addEventListener('focusin', dismiss);
+		document.addEventListener('keydown', escape);
+		window.addEventListener('resize', resize);
+		return () => {
+			document.removeEventListener('pointerdown', dismiss);
+			document.removeEventListener('focusin', dismiss);
+			document.removeEventListener('keydown', escape);
+			window.removeEventListener('resize', resize);
+		};
+	}, [position]);
+
+	<div ref={root} class="chat-settings">
+		<button
+			ref={trigger}
+			class="ui-btn ui-btn--ghost ui-btn--sm ui-btn--icon"
+			type="button"
+			aria-expanded={position !== null}
+			aria-controls="composer-settings"
+			aria-label={t('sandbox.chat.settings')}
+			title={t('sandbox.chat.settings')}
+			onClick={toggle}
+		>
+			<Icon name="settings" size={14} />
+		</button>
+		@if (position) {
+			<div
+				id="composer-settings"
+				class="ui-menu chat-settings__panel"
+				role="group"
+				aria-label={t('sandbox.chat.settings')}
+				style={{ left: position.left + 'px', bottom: position.bottom + 'px' }}
+			>
+				<label class="ui-menu__item ui-checkbox">
+					<input
+						type="checkbox"
+						checked={props.autoContinue}
+						onChange={(event) => props.onAutoContinue(
+							event.currentTarget.checked,
+						)}
+					/>
+					<span>{t('sandbox.chat.autoHandoff')}</span>
+				</label>
+				<label
+					class="ui-menu__item ui-checkbox"
+					title={t('sandbox.chat.freshHelp')}
+				>
+					<input
+						type="checkbox"
+						checked={props.freshContext}
+						disabled={props.running}
+						onChange={(event) => props.onFreshContext(
+							event.currentTarget.checked,
+						)}
+					/>
+					<span>{t('sandbox.chat.fresh')}</span>
+				</label>
+			</div>
+		}
+	</div>
+}

package/src/client/ToolEvent.tsrx

@@ -0,0 +1,77 @@
+import { Icon } from '@flowdular/sdk/ui';
+import { useTranslation } from './i18n.ts';
+import {
+	shortToolDetail,
+	toolAction,
+	type TranscriptRow,
+} from './transcript.ts';
+
+export function ToolEvent(props: {
+	readonly row: TranscriptRow;
+	readonly running: boolean;
+}) @{
+	const { t } = useTranslation();
+	const event = props.row.entry.event!;
+	const original = props.row.started?.event ?? event;
+	if (
+		event.type !== 'tool.started' && event.type !== 'tool.completed' ||
+			original.type !== 'tool.started' && original.type !== 'tool.completed'
+	) return;
+	const status =
+		event.type === 'tool.completed'
+			? event.ok
+				? 'done'
+				: 'failed'
+			: props.row.pending && props.running
+				? 'running'
+				: 'unknown';
+	const detail = original.detail || event.detail;
+	const action = toolAction(original.tool);
+	const target =
+		action === 'command' ? detail : shortToolDetail(detail);
+	const duration =
+		props.row.started
+			? (Math.max(0, props.row.entry.at - props.row.started.at) / 1000).toFixed(
+					1,
+				)
+			: null;
+	<details class={['chat-tool', 'chat-tool--' + status]} data-status={status}>
+		<summary class="chat-tool__summary">
+			<Icon
+				name={status === 'running'
+					? 'refresh'
+					: status === 'done'
+						? 'check'
+						: 'alert'}
+				size={14}
+			/>
+			<span class="chat-tool__action">{t(
+				'sandbox.chat.tool.action.' + action,
+			)}</span>
+			<span class="chat-tool__target" title={detail}>
+				{target || original.tool}
+			</span>
+			<span class="chat-tool__status">{t(
+				'sandbox.chat.tool.status.' + status,
+			)}</span>
+			@if (duration !== null) {
+				<span class="chat-tool__duration">{t('sandbox.chat.tool.duration', {
+					seconds: duration,
+				})}</span>
+			}
+			<Icon name="chevron-down" size={14} />
+		</summary>
+		<dl class="chat-tool__details">
+			<dt>{t('sandbox.chat.tool.name')}</dt>
+			<dd>{original.tool}</dd>
+			<dt>{t('sandbox.chat.tool.detail')}</dt>
+			<dd>{detail || t('sandbox.chat.tool.noDetail')}</dd>
+			@if (event.detail && event.detail !== detail) {
+				<>
+					<dt>{t('sandbox.chat.tool.result')}</dt>
+					<dd>{event.detail}</dd>
+				</>
+			}
+		</dl>
+	</details>
+}

package/src/client/TurnActivity.tsrx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'octane';
+import { useTranslation } from './i18n.ts';
+
+/* Mounted only while a turn runs. Age measures received updates, not provider
+   health: a quiet process can still be generating or waiting on the network. */
+export function TurnActivity(props: {
+	readonly lastUpdateAt: number | undefined;
+}) @{
+	const { t } = useTranslation();
+	const [startedAt] = useState(Date.now());
+	const [now, setNow] = useState(Date.now());
+	useEffect(() => {
+		const timer = setInterval(() => setNow(Date.now()), 1000);
+		return () => clearInterval(timer);
+	}, []);
+	const seconds = Math.max(
+		0,
+		Math.floor((now - (props.lastUpdateAt ?? startedAt)) / 1000),
+	);
+	<span class="chat__activity-age">{t(
+		seconds >= 30
+			? 'sandbox.chat.activity.quiet'
+			: 'sandbox.chat.activity.updated',
+		{ seconds },
+	)}</span>
+}