@flowdular/sandbox 0.3.2 → 0.4.0

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

@@ -26,6 +26,7 @@ import {
 	type CodingAgentAvailability,
 	type CodingAgentDriver,
 	type CodingAgentEvent,
+	type CodingAgentTool,
 	type CodingAgentTurnRequest,
 	type FileChangeKind,
 } from '../types.ts';
@@ -84,6 +85,7 @@ export function createByokDriver(
 		workspacePath: string,
 		allowedPaths: readonly string[],
 		emit: (event: CodingAgentEvent) => void,
+		lent: readonly CodingAgentTool[] = [],
 	): ToolSet {
 		let nextCall = 0;
 		const record = (
@@ -128,7 +130,7 @@ export function createByokDriver(
 			}
 		};
 
-		return {
+		const files: ToolSet = {
 			list_files: tool({
 				description:
 					'List the files of the session workspace, relative to its root.',
@@ -233,6 +235,18 @@ export function createByokDriver(
 					}),
 			}),
 		};
+		for (const entry of lent) {
+			if (entry.name in files) continue;
+			files[entry.name] = tool({
+				description: entry.description,
+				inputSchema: jsonSchema<Record<string, unknown>>(entry.inputSchema),
+				execute: (input) =>
+					record(entry.name, JSON.stringify(input).slice(0, 200), () =>
+						entry.execute(input),
+					),
+			});
+		}
+		return files;
 	}
 
 	return {
@@ -299,6 +313,7 @@ export function createByokDriver(
 						   supplies an explicit allowlist for its selected specialist. */
 						request.allowedPaths ?? [],
 						emit,
+						request.tools,
 					),
 				});
 

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

@@ -6,6 +6,7 @@ export {
 	type CodingAgentDriverKind,
 	type CodingAgentEvent,
 	type CodingAgentMessage,
+	type CodingAgentTool,
 	type CodingAgentTurnRequest,
 	type FileChangeKind,
 	type SandboxRuntimeMode,

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

@@ -62,6 +62,13 @@ If the requested surface needs a missing endpoint/service, hand off to backend.
 			'src/index.ts',
 			'migrations/**',
 			'tests/**',
+			'preview/**',
+			'src/preview.ts',
+			'src/research.ts',
+			'src/adapters/**',
+			'research-fixtures.json',
+			'adapters/**',
+			'templates/**',
 			'module.json',
 			'package.json',
 		],
@@ -75,6 +82,8 @@ Permission constants equal the approved spec. All tenant reads and writes use te
 
 Test observable behavior: successful operations, validation bounds, 401/403, uniqueness, replay and two-tenant isolation. Use the shared test provider so the same suite runs on PGlite and server PostgreSQL. Never use an owner connection to bypass a failing runtime test.
 
+Operator sample data comes from the sample-data tool or reference/sample-data.json. Derive tests/fixtures/*.json and preview/seed.json from its shape with invented names, contacts and identifiers. src/preview.ts exports an idempotent seed({ tenantId, accountId, data, databases }) that writes through the module repository. A spec research section reads research-fixtures.json and each adapter its adapters/<id>.recorded.json; never declare a live adapter.
+
 Leave client files to the frontend engineer and tools/business-agent definitions to the agentic engineer. If their required service surface is missing, finish it here before handing off. Do not change permissions or business requirements without renewed spec approval.`,
 	},
 	{

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

@@ -34,6 +34,7 @@ export const ROLE_SKILLS: Readonly<Record<string, readonly string[]>> = {
 		'test-hardening',
 		'auth-security-review',
 		'cli-extension',
+		'integration-adapter',
 		'perf-audit',
 	],
 	'frontend-engineer': [

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

@@ -54,6 +54,16 @@ export interface CodingAgentMessage {
 	readonly text: string;
 }
 
+/* A read-only tool the orchestrator lends one turn. Drivers with a tool channel
+   offer it to the model; the local CLI drivers have none and ignore it, so the
+   orchestrator also leaves its answer under reference/. */
+export interface CodingAgentTool {
+	readonly name: string;
+	readonly description: string;
+	readonly inputSchema: Readonly<Record<string, unknown>>;
+	execute(input: Readonly<Record<string, unknown>>): Promise<string>;
+}
+
 export interface CodingAgentTurnRequest {
 	/* The only directory the driver may read from or write to. */
 	readonly workspacePath: string;
@@ -69,6 +79,7 @@ export interface CodingAgentTurnRequest {
 	   and resume by identifier; the BYOK driver replays it. */
 	readonly history?: readonly CodingAgentMessage[] | undefined;
 	readonly model?: string | null;
+	readonly tools?: readonly CodingAgentTool[] | undefined;
 	readonly signal?: AbortSignal | undefined;
 	readonly timeoutMs?: number | undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@flowdular/sandbox",
-	"version": "0.3.2",
+	"version": "0.4.0",
 	"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",
@@ -57,7 +57,7 @@
 		"octane": "0.1.51",
 		"segment-state": "0.2.1",
 		"vite": "8.2.2",
-		"@flowdular/sdk": "0.3.2"
+		"@flowdular/sdk": "0.4.0"
 	},
 	"imports": {
 		"#coding-agent": "./internal/coding-agent/src/index.ts"

package/src/App.tsrx

@@ -2,7 +2,15 @@ import { useEffect, useMemo, useState } from 'octane';
 import { ModelSettingsModal } from './client/ModelSettingsModal.tsrx';
 import type { ConfigurationPatch } from './client/api.ts';
 import { Head, Seo } from '@octanejs/seo';
-import { Alert, BrandMark, Button, Icon, Tag } from '@flowdular/sdk/ui';
+import {
+	Alert,
+	BrandMark,
+	Button,
+	Icon,
+	Tag,
+	TableLocaleContext,
+	type TableLocale,
+} from '@flowdular/sdk/ui';
 import { useValue } from 'segment-state';
 import type { RenderRouteProps } from '@octanejs/vite-plugin';
 import type {
@@ -92,7 +100,18 @@ function startingPoint(
 }
 
 export function App(props?: RenderRouteProps) @{
-	const { t } = useTranslation();
+	const { locale, t } = useTranslation();
+	const tableLocale = useMemo<TableLocale>(
+		() => ({
+			locale,
+			expand: t('shell.table.expand'),
+			collapse: t('shell.table.collapse'),
+			moreActions: t('shell.table.moreActions'),
+			copy: t('shell.table.copy'),
+			copied: t('shell.table.copied'),
+		}),
+		[locale],
+	);
 	const sandbox = useMemo(() => createSandboxClientState(), []);
 	const [state] = useValue(sandbox.state.state);
 	const [view] = useValue(sandbox.state.view);
@@ -826,60 +845,62 @@ export function App(props?: RenderRouteProps) @{
 
 					@if (!activeSessionId || !view) {
 						<div class="sandbox__scroll">
-							<SessionPicker
-								onDeliverySettings={() => {
-									setError('');
-									setGitHubSettingsOpen(true);
-								}}
-								dashboard={state.dashboard}
-								onRefresh={() => void refreshState().catch(
-									(error) => setError(
-										message(error, t('sandbox.app.error.state')),
-									),
-								)}
-								onReject={(id) => void sessionAction(
-									id,
-									() => rejectSandboxSession(id),
-									t('sandbox.dashboard.rejectError'),
-								)}
-								sessions={state.sessions}
-								running={state.running}
-								roles={state.roles}
-								drivers={state.drivers}
-								driver={driver || state.configuration.driver}
-								busy={busy}
-								openMenu={sessionMenu}
-								confirmDelete={confirmDelete}
-								showArchived={showArchived}
-								onDriver={setDriver}
-								onOpen={(id) => void openSession(id)}
-								onCreate={(brief, chosen, attachments) => void startSession(
-									brief,
-									chosen,
-									attachments,
-								)}
-								onMenu={(id) => {
-									setSessionMenu(id);
-									setConfirmDelete('');
-								}}
-								onShowArchived={setShowArchived}
-								onArchive={(id) => void sessionAction(
-									id,
-									() => archiveSandboxSession(id),
-									t('sandbox.app.error.archiveSession'),
-								)}
-								onRestore={(id) => void sessionAction(
-									id,
-									() => restoreSandboxSession(id),
-									t('sandbox.app.error.restoreSession'),
-								)}
-								onConfirmDelete={setConfirmDelete}
-								onDelete={(id) => void sessionAction(
-									id,
-									() => deleteSandboxSession(id),
-									t('sandbox.app.error.deleteSession'),
-								)}
-							/>
+							<TableLocaleContext.Provider value={tableLocale}>
+								<SessionPicker
+									onDeliverySettings={() => {
+										setError('');
+										setGitHubSettingsOpen(true);
+									}}
+									dashboard={state.dashboard}
+									onRefresh={() => void refreshState().catch(
+										(error) => setError(
+											message(error, t('sandbox.app.error.state')),
+										),
+									)}
+									onReject={(id) => void sessionAction(
+										id,
+										() => rejectSandboxSession(id),
+										t('sandbox.dashboard.rejectError'),
+									)}
+									sessions={state.sessions}
+									running={state.running}
+									roles={state.roles}
+									drivers={state.drivers}
+									driver={driver || state.configuration.driver}
+									busy={busy}
+									openMenu={sessionMenu}
+									confirmDelete={confirmDelete}
+									showArchived={showArchived}
+									onDriver={setDriver}
+									onOpen={(id) => void openSession(id)}
+									onCreate={(brief, chosen, attachments) => void startSession(
+										brief,
+										chosen,
+										attachments,
+									)}
+									onMenu={(id) => {
+										setSessionMenu(id);
+										setConfirmDelete('');
+									}}
+									onShowArchived={setShowArchived}
+									onArchive={(id) => void sessionAction(
+										id,
+										() => archiveSandboxSession(id),
+										t('sandbox.app.error.archiveSession'),
+									)}
+									onRestore={(id) => void sessionAction(
+										id,
+										() => restoreSandboxSession(id),
+										t('sandbox.app.error.restoreSession'),
+									)}
+									onConfirmDelete={setConfirmDelete}
+									onDelete={(id) => void sessionAction(
+										id,
+										() => deleteSandboxSession(id),
+										t('sandbox.app.error.deleteSession'),
+									)}
+								/>
+							</TableLocaleContext.Provider>
 						</div>
 					} @else {
 						<>

package/src/client/DiffPane.tsrx

@@ -76,13 +76,9 @@ export function DiffPane(props: DiffPaneProps) @{
 						@if (groups.length > 1) {
 							<header class="diff__module">
 								<span class="ui-mono">{'modules/' + group.module}</span>
-								<span class="ui-help">
-									{group.diffs.length === 1
-										? t('sandbox.diff.file.one')
-										: t('sandbox.diff.file.other', {
-												count: group.diffs.length,
-											})}
-								</span>
+								<span class="ui-help">{t('sandbox.diff.file', {
+									count: group.diffs.length,
+								})}</span>
 							</header>
 						}
 						@for (const diff of group.diffs; key fileKey(diff)) {

package/src/client/EjectModal.tsrx

@@ -134,10 +134,9 @@ function newPackagesOf(plan: EjectPlanView): readonly string[] {
 
 /* What landed, named: one module by its id, several by their ids. */
 function delivered(summary: EjectSummary): string {
-	return `${summary.modules.join(', ')} ${t(
-		'sandbox.eject.deliveredVerb.' +
-			(summary.modules.length === 1 ? 'one' : 'other'),
-	)}`;
+	return `${summary.modules.join(', ')} ${t('sandbox.eject.deliveredVerb', {
+			count: summary.modules.length,
+		})}`;
 }
 
 function deliveredAt(at: number): string {
@@ -174,11 +173,10 @@ export function EjectModal(props: EjectModalProps) @{
 					}
 					{phase === 'done'
 						? t('sandbox.eject.delivered')
-						: props.plan.modules.length === 1
-							? t('sandbox.eject.title.one', { module: props.plan.moduleId })
-							: t('sandbox.eject.title.other', {
-									count: props.plan.modules.length,
-								})}
+						: t('sandbox.eject.title', {
+								module: props.plan.moduleId,
+								count: props.plan.modules.length,
+							})}
 				</span>
 				<span class="sandbox__spacer"></span>
 				<Tag mono>

package/src/client/GitHubSettingsModal.tsrx

@@ -85,7 +85,7 @@ export function GitHubSettingsModal(props: GitHubSettingsModalProps) @{
 									name="githubRepository"
 									defaultValue={github.repository ?? ''}
 									placeholder={t('sandbox.github.repository.placeholder')}
-									maxlength={200}
+									maxLength={200}
 								/>
 							</FormField>
 							<FormField
@@ -112,7 +112,7 @@ export function GitHubSettingsModal(props: GitHubSettingsModalProps) @{
 									class="ui-input ui-mono"
 									name="githubReviewers"
 									defaultValue={github.reviewers.join(', ')}
-									maxlength={1000}
+									maxLength={1000}
 								/>
 							</FormField>
 							<details>
@@ -129,7 +129,7 @@ export function GitHubSettingsModal(props: GitHubSettingsModalProps) @{
 												class="ui-input ui-mono"
 												name="githubRemote"
 												defaultValue={github.remote}
-												maxlength={120}
+												maxLength={120}
 											/>
 										</FormField>
 										<FormField
@@ -140,7 +140,7 @@ export function GitHubSettingsModal(props: GitHubSettingsModalProps) @{
 												class="ui-input ui-mono"
 												name="githubBaseBranch"
 												defaultValue={github.baseBranch}
-												maxlength={120}
+												maxLength={120}
 											/>
 										</FormField>
 									</div>
@@ -150,7 +150,7 @@ export function GitHubSettingsModal(props: GitHubSettingsModalProps) @{
 												class="ui-input ui-mono"
 												name="githubBranchPrefix"
 												defaultValue={github.branchPrefix}
-												maxlength={120}
+												maxLength={120}
 											/>
 										</FormField>
 										<FormField
@@ -161,7 +161,7 @@ export function GitHubSettingsModal(props: GitHubSettingsModalProps) @{
 												class="ui-input ui-mono"
 												name="githubForkOwner"
 												defaultValue={github.forkOwner ?? ''}
-												maxlength={120}
+												maxLength={120}
 											/>
 										</FormField>
 									</div>
@@ -186,9 +186,9 @@ export function GitHubSettingsModal(props: GitHubSettingsModalProps) @{
 								class="ui-input ui-mono"
 								name="githubToken"
 								type="password"
-								autocomplete="new-password"
+								autoComplete="new-password"
 								placeholder={t('sandbox.github.token.placeholder')}
-								maxlength={16384}
+								maxLength={16384}
 							/>
 						</FormField>
 						@if (github.tokenFingerprint) {

package/src/client/ModelSettingsModal.tsrx

@@ -71,7 +71,7 @@ export function ModelSettingsModal(props: {
 							class="ui-input"
 							name="model"
 							required
-							maxlength={160}
+							maxLength={160}
 							defaultValue={saved?.model ?? ''}
 						/>
 					</FormField>
@@ -85,8 +85,8 @@ export function ModelSettingsModal(props: {
 							class="ui-input"
 							name="credential"
 							type="password"
-							autocomplete="new-password"
-							maxlength={16384}
+							autoComplete="new-password"
+							maxLength={16384}
 						/>
 					</FormField>
 					<FormField label={t('sandbox.models.url')}>
@@ -95,7 +95,7 @@ export function ModelSettingsModal(props: {
 							name="baseURL"
 							type="url"
 							required={kind === 'openai-compatible'}
-							maxlength={2048}
+							maxLength={2048}
 							defaultValue={saved?.baseURL ?? ''}
 						/>
 					</FormField>
@@ -105,7 +105,7 @@ export function ModelSettingsModal(props: {
 								class="ui-input"
 								name="resourceName"
 								required
-								maxlength={160}
+								maxLength={160}
 								defaultValue={saved?.resourceName ?? ''}
 							/>
 						</FormField>

package/src/client/NewSessionForm.tsrx

@@ -156,7 +156,7 @@ export function NewSessionForm(props: NewSessionFormProps) @{
 					class="ui-textarea"
 					aria-label={t('sandbox.sessions.brief.placeholder')}
 					minlength={8}
-					maxlength={20000}
+					maxLength={20000}
 					name="brief"
 					rows={4}
 					placeholder={t('sandbox.sessions.brief.placeholder')}

package/src/client/PendingQuestionsCard.tsrx

@@ -140,7 +140,7 @@ export function PendingQuestionsCard(props: PendingQuestionsCardProps) @{
 									<input
 										class="ui-input"
 										type="text"
-										maxlength={MAX_ANSWER_LENGTH}
+										maxLength={MAX_ANSWER_LENGTH}
 										aria-label={t('sandbox.questions.freeText')}
 										placeholder={t('sandbox.questions.freeTextPlaceholder')}
 										value={draft.typed[question.id] ?? ''}

package/src/client/SessionPicker.tsrx

@@ -10,6 +10,10 @@ import {
 	Kpi,
 	PageHeader,
 	SearchField,
+	CellStack,
+	CellTag,
+	CellText,
+	CellTime,
 	TableCard,
 	Tag,
 	type TableColumn,
@@ -80,56 +84,56 @@ function columns(): readonly TableColumn<DashboardRow>[] {
 		{
 			key: 'work',
 			header: t('sandbox.dashboard.work'),
-			width: '32%',
-			cell: (row) => <span class="ui-cell">
-				<b>{row.session.title}</b>
-				<small>
-					{t(
+			width: 'auto',
+			cell: (row) => <CellStack
+				primary={row.session.title}
+				secondary={[
+					t(
 						row.session.kind === 'new-module'
 							? 'sandbox.sessions.kind.new'
 							: 'sandbox.sessions.kind.change',
-					)}
-					·
-					{t('sandbox.dashboard.modules', {
+					),
+					t('sandbox.dashboard.modules', {
 						count: row.session.modules.length,
-					})}
-				</small>
-				{row.personal
-					? null
-					: <small>{t('sandbox.dashboard.legacyRow')}</small>}
-			</span>,
+					}),
+					...(row.personal ? [] : [t('sandbox.dashboard.legacyRow')]),
+				].join(' · ')}
+			/>,
 		},
 		{
 			key: 'status',
 			header: t('sandbox.dashboard.status'),
-			width: '20%',
+			width: '160px',
 			cell: (row) =>
-				<Tag tone={tone(row.status)} dot>{t(
-					'sandbox.dashboard.status.' + row.status,
-				)}</Tag>,
+				<CellTag
+					tone={tone(row.status)}
+					dot
+					label={t('sandbox.dashboard.status.' + row.status)}
+				/>,
 		},
 		{
 			key: 'tokens',
 			header: t('sandbox.dashboard.table.tokens'),
-			width: '13%',
+			width: '120px',
 			numeric: true,
-			cell: (row) => formatTokens(row.usage, activeLocale()),
+			priority: 2,
+			cell: (row) =>
+				<CellText value={formatTokens(row.usage, activeLocale())} />,
 		},
 		{
 			key: 'cost',
 			header: t('sandbox.dashboard.table.cost'),
-			width: '13%',
+			width: '120px',
 			numeric: true,
-			cell: (row) => formatCost(row.usage, activeLocale()),
+			priority: 2,
+			cell: (row) => <CellText value={formatCost(row.usage, activeLocale())} />,
 		},
 		{
 			key: 'updated',
 			header: t('sandbox.dashboard.table.updated'),
-			width: '12%',
-			cell: (row) => new Intl.DateTimeFormat(activeLocale(), {
-				day: 'numeric',
-				month: 'short',
-			}).format(row.session.updatedAt),
+			width: '120px',
+			priority: 2,
+			cell: (row) => <CellTime value={row.session.updatedAt} kind="date" />,
 		},
 	];
 }
@@ -381,25 +385,34 @@ export function SessionPicker(props: SessionPickerProps) @{
 								{
 									key: 'phase',
 									header: t('sandbox.dashboard.phase'),
-									width: '50%',
-									cell: (phase) => t('sandbox.dashboard.role.' + phase.role) ===
-									'sandbox.dashboard.role.' + phase.role
-										? t('sandbox.dashboard.role.unknown')
-										: t('sandbox.dashboard.role.' + phase.role),
+									width: 'auto',
+									cell: (phase) =>
+										<CellText
+											value={t('sandbox.dashboard.role.' + phase.role) ===
+											'sandbox.dashboard.role.' + phase.role
+												? t('sandbox.dashboard.role.unknown')
+												: t('sandbox.dashboard.role.' + phase.role)}
+										/>,
 								},
 								{
 									key: 'tokens',
 									header: t('sandbox.dashboard.table.tokens'),
-									width: '25%',
+									width: '140px',
 									numeric: true,
-									cell: (phase) => formatTokens(phase.usage, activeLocale()),
+									cell: (phase) =>
+										<CellText
+											value={formatTokens(phase.usage, activeLocale())}
+										/>,
 								},
 								{
 									key: 'cost',
 									header: t('sandbox.dashboard.table.cost'),
-									width: '25%',
+									width: '140px',
 									numeric: true,
-									cell: (phase) => formatCost(phase.usage, activeLocale()),
+									cell: (phase) =>
+										<CellText
+											value={formatCost(phase.usage, activeLocale())}
+										/>,
 								},
 							]}
 							empty={{

package/src/client/SpecEditor.tsrx

@@ -97,7 +97,7 @@ export function SpecEditor(props: SpecEditorProps) @{
 		<textarea
 			class="ui-textarea spec-editor__text"
 			aria-label={t('sandbox.workbench.specification')}
-			spellcheck={false}
+			spellCheck={false}
 			disabled={!loaded || saving}
 			value={text}
 			onInput={(event) => {