@flowdular/sandbox 0.2.6 → 0.2.7

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.7",
 	"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>
+}

package/src/client/locales/en.json

@@ -257,6 +257,7 @@
 	"chat.role": "Role",
 	"chat.targetModule": "Target module",
 	"chat.auto": "Auto",
+	"chat.settings": "Settings",
 	"chat.autoHandoff": "Continue handoffs automatically",
 	"chat.stop": "Stop",
 	"chat.send": "Send",
@@ -480,8 +481,27 @@
 	"models.save": "Save",
 	"models.saved": "Model settings saved.",
 	"models.error": "Could not save model settings.",
+	"chat.activity.updated": "Last update {seconds}s ago",
+	"chat.activity.quiet": "No update for {seconds}s. The agent may still be working.",
 	"chat.activity.thinking": "Agent is thinking…",
 	"chat.activity.responding": "Agent is preparing a response…",
 	"chat.fresh": "Fresh agent context",
-	"chat.freshHelp": "The next message starts a fresh context with the brief and recent messages. Draft files, specification and sandbox history are preserved."
+	"chat.freshHelp": "The next message starts a fresh context with the brief and recent messages. Draft files, specification and sandbox history are preserved.",
+	"chat.tool.name": "Tool",
+	"chat.tool.detail": "Target or command",
+	"chat.tool.result": "Completion detail",
+	"chat.tool.noDetail": "No detail provided",
+	"chat.tool.duration": "{seconds}s",
+	"chat.tool.action.read": "Read file",
+	"chat.tool.action.edit": "Edit file",
+	"chat.tool.action.write": "Write file",
+	"chat.tool.action.delete": "Delete file",
+	"chat.tool.action.list": "Find files",
+	"chat.tool.action.search": "Search",
+	"chat.tool.action.command": "Run command",
+	"chat.tool.action.tool": "Tool call",
+	"chat.tool.status.done": "Done",
+	"chat.tool.status.failed": "Failed",
+	"chat.tool.status.running": "Running",
+	"chat.tool.status.unknown": "No result"
 }

package/src/client/locales/pl.json

@@ -257,6 +257,7 @@
 	"chat.role": "Rola",
 	"chat.targetModule": "Moduł docelowy",
 	"chat.auto": "Automatycznie",
+	"chat.settings": "Ustawienia",
 	"chat.autoHandoff": "Automatycznie kontynuuj przekazania",
 	"chat.stop": "Zatrzymaj",
 	"chat.send": "Wyślij",
@@ -480,8 +481,27 @@
 	"models.save": "Zapisz",
 	"models.saved": "Zapisano ustawienia modeli.",
 	"models.error": "Nie udało się zapisać ustawień modeli.",
+	"chat.activity.updated": "Ostatnia aktualizacja {seconds}s temu",
+	"chat.activity.quiet": "Brak aktualizacji od {seconds}s. Agent może nadal pracować.",
 	"chat.activity.thinking": "Agent analizuje zadanie…",
 	"chat.activity.responding": "Agent przygotowuje odpowiedź…",
 	"chat.fresh": "Świeży kontekst agenta",
-	"chat.freshHelp": "Następna wiadomość rozpocznie nowy kontekst z briefem i ostatnimi wiadomościami. Pliki, specyfikacja i historia sandboxa pozostaną zachowane."
+	"chat.freshHelp": "Następna wiadomość rozpocznie nowy kontekst z briefem i ostatnimi wiadomościami. Pliki, specyfikacja i historia sandboxa pozostaną zachowane.",
+	"chat.tool.name": "Narzędzie",
+	"chat.tool.detail": "Plik lub polecenie",
+	"chat.tool.result": "Szczegóły zakończenia",
+	"chat.tool.noDetail": "Brak szczegółów",
+	"chat.tool.duration": "{seconds}s",
+	"chat.tool.action.read": "Odczyt pliku",
+	"chat.tool.action.edit": "Edycja pliku",
+	"chat.tool.action.write": "Zapis pliku",
+	"chat.tool.action.delete": "Usunięcie pliku",
+	"chat.tool.action.list": "Wyszukiwanie plików",
+	"chat.tool.action.search": "Wyszukiwanie",
+	"chat.tool.action.command": "Polecenie",
+	"chat.tool.action.tool": "Narzędzie",
+	"chat.tool.status.done": "Gotowe",
+	"chat.tool.status.failed": "Błąd",
+	"chat.tool.status.running": "W toku",
+	"chat.tool.status.unknown": "Brak wyniku"
 }

package/src/client/transcript.ts

@@ -0,0 +1,110 @@
+import type { ChatEntry } from '../server/sessions.ts';
+
+export interface TranscriptRow {
+	readonly key: number;
+	entry: ChatEntry;
+	started?: ChatEntry;
+	pending: boolean;
+}
+
+/* Pair calls by provider identity, including parallel calls to the same file.
+   Old transcripts without ids are paired only with one unambiguous pending call.
+   This is presentation only: persisted events and their full details stay intact. */
+export function transcriptRows(entries: readonly ChatEntry[]): TranscriptRow[] {
+	const rows: TranscriptRow[] = [];
+	const calls = new Map<string, TranscriptRow>();
+	const pending = new Set<TranscriptRow>();
+	const closeTurn = () => {
+		for (const row of pending) row.pending = false;
+		pending.clear();
+		calls.clear();
+	};
+	for (const entry of entries) {
+		const event = entry.event;
+		if (
+			entry.kind === 'user' ||
+			entry.handoff ||
+			event?.type === 'turn.started' ||
+			event?.type === 'turn.completed'
+		)
+			closeTurn();
+		if (event?.type === 'reasoning' && !event.text.trim()) continue;
+		if (event?.type === 'tool.completed') {
+			let start = event.callId ? calls.get(event.callId) : undefined;
+			if (!event.callId && pending.size === 1) {
+				const candidate = pending.values().next().value!;
+				const original = candidate.entry.event;
+				if (
+					original?.type === 'tool.started' &&
+					!original.callId &&
+					(event.tool === original.tool || event.tool === 'tool') &&
+					(!event.detail || event.detail === original.detail)
+				)
+					start = candidate;
+			}
+			if (
+				start &&
+				start.entry.role === entry.role &&
+				start.entry.module === entry.module
+			) {
+				start.started = start.entry;
+				start.entry = entry;
+				start.pending = false;
+				pending.delete(start);
+				if (event.callId) calls.delete(event.callId);
+				continue;
+			}
+		}
+		const row: TranscriptRow = {
+			key: entry.sequence,
+			entry,
+			pending: event?.type === 'tool.started',
+		};
+		rows.push(row);
+		if (event?.type === 'tool.started') {
+			pending.add(row);
+			if (event.callId) calls.set(event.callId, row);
+		}
+	}
+	return rows;
+}
+
+export function shortToolDetail(detail: string): string {
+	if (!/^(?:\/|[A-Za-z]:[\\/]|modules[\\/])/.test(detail)) return detail;
+	return detail
+		.replaceAll('\\', '/')
+		.replace(
+			/^.*?\/(?:\.flowdular|\.coreloom)\/sandbox\/sessions\/[^/]+\/workspace\//,
+			'',
+		)
+		.replace(/^modules\//, '');
+}
+
+export function toolAction(name: string): string {
+	switch (name.toLowerCase()) {
+		case 'read':
+		case 'read_file':
+			return 'read';
+		case 'edit':
+		case 'multiedit':
+		case 'update':
+			return 'edit';
+		case 'write':
+		case 'write_file':
+		case 'create':
+			return 'write';
+		case 'delete_file':
+		case 'delete':
+			return 'delete';
+		case 'glob':
+		case 'list_files':
+			return 'list';
+		case 'grep':
+			return 'search';
+		case 'bash':
+		case 'command':
+			return 'command';
+		default:
+			return 'tool';
+	}
+}

package/src/server/auto-review.ts

@@ -9,6 +9,7 @@ import {
 	writeFile,
 } from 'node:fs/promises';
 import { basename, join } from 'node:path';
+import { referenceSource } from './reference.ts';
 import {
 	basePathOf,
 	modulePathOf,
@@ -107,7 +108,7 @@ export async function prepareAutoReview(
 	const skill = join(paths.workspace, 'reference', 'skills', 'auto-review');
 	await mkdir(skill, { recursive: true });
 	await cp(
-		join(workspaceRoot, '.ai', 'skills', 'auto-review', 'SKILL.md'),
+		await referenceSource(workspaceRoot, '.ai/skills/auto-review/SKILL.md'),
 		join(skill, 'SKILL.md'),
 	);
 }

package/src/server/gate-repair.ts

@@ -0,0 +1,88 @@
+import { matchesGlob } from 'node:path';
+import type { AgentRoleDefinition } from '#coding-agent';
+import type { GateResult } from './gates.ts';
+
+interface DiagnosticPath {
+	path: string;
+	module: string;
+}
+
+/* Read diagnostic locations, never instructions embedded in output. Manifest
+   reports name the module; their issues name the file that actually failed. */
+function locations(gate: GateResult, activeModule: string): DiagnosticPath[] {
+	const module = gate.module ?? activeModule;
+	const output = gate.output.slice(0, 16_000);
+	try {
+		const result = JSON.parse(
+			output.slice(output.indexOf('{'), output.lastIndexOf('}') + 1),
+		);
+		const reports = result?.error?.details?.reports;
+		if (Array.isArray(reports)) {
+			return reports.flatMap((report) => {
+				const target =
+					typeof report.file === 'string'
+						? (/(?:^|\/)modules\/([a-z0-9-]+)\/module\.json$/.exec(
+								report.file,
+							)?.[1] ?? module)
+						: module;
+				return Array.isArray(report.issues)
+					? report.issues
+							.filter(
+								(issue: { severity?: string; path?: unknown }) =>
+									issue.severity === 'error' && typeof issue.path === 'string',
+							)
+							.map((issue: { path: string }) => ({
+								path: issue.path,
+								module: target,
+							}))
+					: [];
+			});
+		}
+	} catch {
+		/* Compiler and formatter output is plain text. */
+	}
+	return output.split('\n').flatMap((line) => {
+		const match =
+			/^\s*(?:FAIL\s+)?((?:modules\/[a-z0-9-]+\/)?(?:src|tests|translations|migrations)\/[^\s:(]+)(?:\(\d+,\d+\)|:\d+|\s|$)/.exec(
+				line,
+			);
+		if (!match) return [];
+		const qualified = /^modules\/([a-z0-9-]+)\/(.+)$/.exec(match[1]!);
+		return [
+			{ path: qualified?.[2] ?? match[1]!, module: qualified?.[1] ?? module },
+		];
+	});
+}
+
+export function gateRepairOwner(
+	gate: GateResult,
+	activeModule: string,
+	roles: readonly AgentRoleDefinition[],
+	modules: readonly string[],
+): { role: string; module: string } | null {
+	for (const location of locations(gate, activeModule)) {
+		if (
+			!modules.includes(location.module) ||
+			location.path.split('/').includes('..')
+		)
+			continue;
+		const preferred =
+			location.path.startsWith('src/client/') ||
+			location.path.startsWith('translations/')
+				? 'frontend-engineer'
+				: location.path.startsWith('spec/')
+					? 'business-manager'
+					: location.path.startsWith('src/agent/') ||
+						  location.path.startsWith('src/tools/')
+						? 'agentic-engineer'
+						: 'backend-engineer';
+		const candidates = roles.filter((role) =>
+			role.allowedPaths.some((pattern) => matchesGlob(location.path, pattern)),
+		);
+		const owner =
+			candidates.find((role) => role.id === preferred) ??
+			(candidates.length === 1 ? candidates[0] : undefined);
+		if (owner) return { role: owner.id, module: location.module };
+	}
+	return null;
+}

package/src/server/planning.ts

@@ -8,6 +8,7 @@ import type {
 	HandoffDeclaration,
 } from '#coding-agent';
 import type { GateResult } from './gates.ts';
+import { gateRepairOwner } from './gate-repair.ts';
 import { SandboxSetupError } from './workspace-root.ts';
 import {
 	moduleSuffixOf,
@@ -573,20 +574,29 @@ export function planHandoff(context: HandoffContext): HandoffPlan {
 	   there even when the finished turn worked somewhere else. */
 	const failedGate = context.gates.find((gate) => gate.status !== 'passed');
 	if (failedGate) {
-		const repairRole = context.reviewing
-			? (validateDeclared(context).role ?? context.role)
-			: context.role;
+		const owner = gateRepairOwner(
+			failedGate,
+			context.module,
+			roles,
+			context.routing.session.modules.map((module) => module.directory),
+		);
+		const repairRole =
+			owner?.role ??
+			(context.reviewing
+				? (validateDeclared(context).role ?? context.role)
+				: context.role);
 		return plan(
 			'continue',
 			repairRole,
 			`The ${gateLabel(failedGate)} gate failed, so the responsible specialist fixes it before delivery.`,
 			[
-				`The ${gateLabel(failedGate)} gate failed after your change. Fix exactly what it reports, change nothing else, and end with your handoff line.`,
+				`Continue as ${roleName(roles, repairRole)}. The ${gateLabel(failedGate)} gate failed. Fix the reported files within your role, preserve other work, and end with your handoff line.`,
+				`Recorded gate results:\n${context.gates.map((gate) => `${gateLabel(gate)}: ${gate.status}`).join('\n')}`,
 				`Gate command: ${failedGate.command}`,
 				`Gate output (first ${GATE_PROMPT_OUTPUT} characters; the transcript holds the rest):`,
 				failedGate.output.slice(0, GATE_PROMPT_OUTPUT),
 			].join('\n\n'),
-			failedGate.module ?? context.module,
+			owner?.module ?? failedGate.module ?? context.module,
 		);
 	}
 

package/src/server/preview-hot-updates.ts

@@ -0,0 +1,40 @@
+import { relative } from 'node:path';
+import type { Plugin } from 'vite';
+
+/* Octane broadcasts full-reload for every TSRX change, including modules used
+   only by preview iframes. Draft saves must invalidate cached transforms without
+   navigating the operator's page. The preview refreshes at turn completion or
+   on request, when its isolated worker also selects the current revision. */
+export function isolatePreviewHotUpdates(
+	plugins: Plugin[],
+	workspaceRoot: string,
+): Plugin[] {
+	return plugins.map((plugin) => {
+		const hook = plugin.hotUpdate;
+		if (!hook) return plugin;
+		const original = typeof hook === 'function' ? hook : hook.handler;
+		return {
+			...plugin,
+			hotUpdate: {
+				...(typeof hook === 'function' ? {} : hook),
+				async handler(options) {
+					const path = relative(workspaceRoot, options.file).replaceAll(
+						'\\',
+						'/',
+					);
+					if (/^(?:\.flowdular|\.coreloom)\/sandbox\/sessions\//.test(path)) {
+						for (const environment of Object.values(
+							options.server.environments,
+						)) {
+							const graph = environment.moduleGraph;
+							for (const module of graph.getModulesByFile(options.file) ?? [])
+								graph.invalidateModule(module);
+						}
+						return [];
+					}
+					return original.call(this, options);
+				},
+			},
+		};
+	});
+}

package/src/server/reference.ts

@@ -9,7 +9,7 @@ import {
 } from 'node:fs/promises';
 import { dirname, join, relative } from 'node:path';
 
-async function referenceSource(
+export async function referenceSource(
 	workspaceRoot: string,
 	path: string,
 ): Promise<string> {

package/src/styles.css

@@ -683,13 +683,16 @@
 	color: var(--danger);
 }
 
-.chat__auto {
+.chat-settings {
 	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-	white-space: nowrap;
+}
+
+.chat-settings__panel {
+	position: fixed;
+	z-index: 20;
+	width: min(320px, calc(100vw - 32px));
+	max-height: calc(100dvh - 32px);
+	overflow-y: auto;
 }
 
 .chat__selection {
@@ -1571,3 +1574,102 @@
 	font-size: var(--text-md);
 	color: var(--ink-3);
 }
+
+@keyframes chat-activity-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+.chat__event--active > svg {
+	animation: chat-activity-spin 1.5s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+	.chat__event--active > svg {
+		animation: none;
+	}
+}
+
+/* Compact operation summaries with the original details available on demand. */
+.chat-tool {
+	min-width: 0;
+	color: var(--ink-2);
+	font-size: var(--text-sm);
+}
+.chat-tool__summary {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	padding: 6px 0;
+	cursor: pointer;
+	list-style: none;
+}
+.chat-tool__summary::-webkit-details-marker {
+	display: none;
+}
+.chat-tool__summary:focus-visible {
+	outline: 2px solid var(--focus);
+	outline-offset: 2px;
+}
+.chat-tool__summary > svg {
+	flex-shrink: 0;
+}
+.chat-tool__action {
+	flex-shrink: 0;
+}
+.chat-tool__target {
+	min-width: 0;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-family: var(--font-mono);
+}
+.chat-tool__status,
+.chat-tool__duration {
+	color: var(--ink-3);
+	flex-shrink: 0;
+	font-variant-numeric: tabular-nums;
+}
+.chat-tool--failed .chat-tool__status,
+.chat-tool--failed .chat-tool__summary > svg:first-child {
+	color: var(--danger);
+}
+.chat-tool[open] .chat-tool__summary > svg:last-child {
+	transform: rotate(180deg);
+}
+.chat-tool__details {
+	margin: 0 0 8px 22px;
+	padding: 12px;
+	border: 1px solid var(--line);
+	border-radius: var(--r-sm);
+}
+.chat-tool__details dt {
+	color: var(--ink-3);
+	margin-bottom: 4px;
+}
+.chat-tool__details dd {
+	margin: 0 0 8px;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	font-family: var(--font-mono);
+}
+.chat-tool__details dd:last-child {
+	margin-bottom: 0;
+}
+.chat-tool--running .chat-tool__summary > svg:first-child {
+	animation: chat-activity-spin 1.5s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+	.chat-tool--running .chat-tool__summary > svg:first-child {
+		animation: none;
+	}
+}
+@media (max-width: 600px) {
+	.chat-tool__summary {
+		flex-wrap: wrap;
+	}
+	.chat-tool__target {
+		flex-basis: calc(100% - 32px);
+	}
+}

package/vite.config.ts

@@ -9,6 +9,7 @@ import { defineConfig } from 'vite';
 import { sandboxDirectory } from './src/server/config.ts';
 import { findFlowdularWorkspace } from './src/server/workspace-root.ts';
 import { resolvePreviewModules } from './src/server/preview-modules.ts';
+import { isolatePreviewHotUpdates } from './src/server/preview-hot-updates.ts';
 import type { SandboxSession } from './src/server/sessions.ts';
 
 Object.assign(process.env, flowdularEnvironment(process.env));
@@ -103,7 +104,10 @@ function previewModules(workspaceRoot: string): Plugin {
 
 const config = {
 	root: appRoot,
-	plugins: [previewModules(workspace.root), octane()],
+	plugins: [
+		previewModules(workspace.root),
+		...isolatePreviewHotUpdates(octane(), workspace.root),
+	],
 	resolve: {
 		/* Draft module code is loaded from a session workspace outside this app.
 		   It resolves the workspace packages through the node_modules link the