@flowdular/sandbox 0.2.5 → 0.2.7

package/README.md

@@ -146,6 +146,12 @@ browser. An empty key field preserves the existing key only when the provider
 and destination are unchanged. The settings also let you clear the key or
 remove BYOK entirely.
 
+Provider conversations are scoped to the current specialist, module, task skill,
+write permissions, approved specification and model. A handoff that changes
+that scope starts a fresh conversation with the brief and recent messages;
+continuing the same scope resumes its existing conversation. Legacy shared
+conversations are replaced on the next turn.
+
 For a long CLI conversation, select **Fresh agent context** before sending the
 next message. It starts a new CLI conversation with the original brief and
 recent sandbox messages, preserving draft files, the approved specification
@@ -155,6 +161,10 @@ Claude activity is shown from the start of streamed response blocks, with
 completed reasoning and tool events following as they arrive. This does not
 reduce provider queue or inference time.
 
+Source-change logs group repeated saves into a short summary such as
+`Draft blog (96a64f10) · 4 files changed`. These report file changes, not a
+successful build. Use `--verbose` to see individual paths.
+
 ## Sessions
 
 The home dashboard lists the operator's ideas, current stages, recorded token

package/bin/flowdular-sandbox.mjs

@@ -2,6 +2,62 @@
 
 // ../sandbox/bin/flowdular-sandbox.mjs
 import "./register-types.mjs";
+
+// ../sandbox/src/server/reload-log.ts
+import { relative } from "node:path";
+function watchSandboxReloads(server, appRoot2, write, verbose = false) {
+  const groups = /* @__PURE__ */ new Map();
+  let timer;
+  let pendingFiles = 0;
+  const flush = () => {
+    if (timer) clearTimeout(timer);
+    timer = void 0;
+    for (const [label, files] of groups) {
+      if (verbose) {
+        for (const path of files) write(path);
+      } else {
+        write(
+          `${label} \xB7 ${files.size} ${files.size === 1 ? "file" : "files"} changed`
+        );
+      }
+    }
+    groups.clear();
+    pendingFiles = 0;
+  };
+  const changed = (event, path) => {
+    if (!["add", "change", "unlink"].includes(event)) return;
+    const normalized = path.replaceAll("\\", "/");
+    const draft = normalized.match(
+      /\/(?:\.flowdular|\.coreloom)\/sandbox\/sessions\/([^/]+)\/workspace\/modules\/([^/]+)\//
+    );
+    const local = relative(appRoot2, path);
+    if (!draft && (local === ".." || local.startsWith("../") || local.startsWith("..\\")))
+      return;
+    const label = draft ? `Draft ${draft[2]} (${draft[1].slice(0, 8)})` : "Sandbox";
+    const files = groups.get(label) ?? /* @__PURE__ */ new Set();
+    if (!files.has(path)) pendingFiles += 1;
+    files.add(path);
+    groups.set(label, files);
+    if (!timer) {
+      timer = setTimeout(flush, 750);
+      timer.unref?.();
+    }
+    if (pendingFiles >= 256) flush();
+  };
+  const dispose = () => {
+    if (timer) clearTimeout(timer);
+    timer = void 0;
+    groups.clear();
+    pendingFiles = 0;
+    server.watcher.off("all", changed);
+    server.httpServer?.off("close", dispose);
+  };
+  server.watcher.on("all", changed);
+  server.httpServer?.once("close", dispose);
+  return dispose;
+}
+
+// ../sandbox/bin/flowdular-sandbox.mjs
 import process2 from "node:process";
 import { realpathSync } from "node:fs";
 import { dirname, resolve } from "node:path";
@@ -168,18 +224,6 @@ function installOctaneConsoleBridge(verbose, useColor) {
     console.error = originalError;
   };
 }
-function watchReloads(server, root, useColor) {
-  let lastChange = "";
-  let lastChangeAt = 0;
-  server.watcher.on("change", (path) => {
-    const changed = path.startsWith(root) ? path.slice(root.length + 1) : path;
-    const now = Date.now();
-    if (changed === lastChange && now - lastChangeAt < 100) return;
-    lastChange = changed;
-    lastChangeAt = now;
-    console.log(formatDevEvent("reload", changed, useColor));
-  });
-}
 
 // ../sandbox/bin/flowdular-sandbox.mjs
 var appRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
@@ -362,7 +406,12 @@ async function startSandbox(argv = process2.argv.slice(2)) {
       ]
     ]
   });
-  watchReloads(server, appRoot, useColor);
+  watchSandboxReloads(
+    server,
+    appRoot,
+    (message) => console.log(formatDevEvent("reload", message, useColor)),
+    options.verbose
+  );
   const close = async () => {
     console.log(`
 ${formatDevEvent("process", "Sandbox stopped.", useColor)}`);

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/roles/contract.ts

@@ -3,6 +3,7 @@ export const SANDBOX_AGENT_CONTRACT = `You are one coding specialist in a Flowdu
 
 Always-active invariants
 - Write only to the active module and the allowed Session paths. reference/ is read-only. Preserve unrelated work. Never edit platform composition or flowdular.json.
+- Implement only the portions of the selected skill that belong to your current role and Session write paths. Other sections describe your teammates' work; hand those parts off instead of editing their files.
 - Read the one task skill named under Session before editing. Do not load other SKILL.md files or the full skill catalog. Read only the owning code and references needed for this task; copy the example-module shape where relevant.
 - Batch independent reads and searches when the tools allow it. Reuse files already read in this conversation unless they changed. Search for a symbol in its owning package before widening the search. Do not read whole reference trees or node_modules to discover an API. If a required public API is absent, report that blocker rather than repeating broad searches.
 - Module implementation requires operator approval of the exact current spec hash. Agents never approve specs. Any later spec edit, request for changes, or added module invalidates the approval. Stop implementation until it is renewed.
@@ -40,7 +41,7 @@ export function composeSessionFacts(context: InstructionContext): string {
 		`- Module directory in this workspace: ${context.modulePath}`,
 		`- Session kind: ${context.sessionKind === 'new-module' ? 'new module; author its specification first, then wait for operator approval of the exact spec hash before implementation' : 'change to an existing module; author its spec delta first, then wait for operator approval of the exact spec hash before implementation'}`,
 		`- Blueprint: ${context.blueprint}`,
-		`- Paths you may write: ${context.allowedPaths.join(', ')}`,
+		`- Paths you may write: ${context.allowedPaths.length ? context.allowedPaths.join(', ') : 'none (read-only)'}`,
 	];
 	if (context.skill) {
 		lines.push(`- Task skill: reference/skills/${context.skill}/SKILL.md`);

package/internal/coding-agent/src/roles/registry.ts

@@ -145,12 +145,6 @@ export function composeInstruction(
 		'',
 		role.instruction,
 		'',
-		composeSessionFacts({
-			...context,
-			allowedPaths:
-				context.allowedPaths.length > 0
-					? context.allowedPaths
-					: role.allowedPaths,
-		}),
+		composeSessionFacts(context),
 	].join('\n');
 }

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