@flowdular/sandbox 0.2.0

package/src/client/SessionPicker.tsrx

@@ -0,0 +1,472 @@
+import { useState } from 'octane';
+import {
+	Alert,
+	Button,
+	ConfirmDialog,
+	Drawer,
+	Filters,
+	FormField,
+	Icon,
+	Kpi,
+	PageHeader,
+	SearchField,
+	TableCard,
+	Tag,
+	type TableColumn,
+} from '@flowdular/sdk/ui';
+import type { SandboxSession } from '../server/sessions.ts';
+import type {
+	DashboardRow,
+	SandboxDashboard,
+	WorkStatus,
+} from '../server/dashboard.ts';
+import type { DriverSummary, RoleSummary } from './api.ts';
+import { NewSessionForm } from './NewSessionForm.tsrx';
+import { filterWork, formatCost, formatTokens } from './dashboard.ts';
+import { activeLocale, t, useTranslation } from './i18n.ts';
+
+export interface SessionPickerProps {
+	readonly onDeliverySettings: () => void;
+	readonly sessions: readonly SandboxSession[];
+	readonly dashboard?: SandboxDashboard | undefined;
+	readonly onRefresh: () => void;
+	readonly onReject: (id: string) => void;
+	/* Ids of the sessions with a turn in flight; those cannot be deleted. */
+	readonly running: readonly string[];
+	readonly roles: readonly RoleSummary[];
+	readonly drivers: readonly DriverSummary[];
+	readonly driver: string;
+	readonly busy: boolean;
+	/* The card whose action menu is open, and the one waiting for a delete
+   confirmation; empty when none. */
+	readonly openMenu: string;
+	readonly confirmDelete: string;
+	readonly showArchived: boolean;
+	readonly onDriver: (driver: string) => void;
+	readonly onOpen: (id: string) => void;
+	readonly onCreate: (brief: string, driver: string, attachments: readonly File[]) => void;
+	readonly onMenu: (id: string) => void;
+	readonly onShowArchived: (show: boolean) => void;
+	readonly onArchive: (id: string) => void;
+	readonly onRestore: (id: string) => void;
+	readonly onConfirmDelete: (id: string) => void;
+	readonly onDelete: (id: string) => void;
+}
+
+const statuses: readonly WorkStatus[] = [
+	'draft',
+	'working',
+	'approval',
+	'approved',
+	'changes',
+	'rejected',
+	'attention',
+	'review',
+	'delivered',
+	'archived',
+];
+
+function tone(
+	status: WorkStatus,
+): 'neutral' | 'success' | 'warning' | 'danger' | 'info' {
+	if (status === 'rejected' || status === 'attention') return 'danger';
+	if (status === 'approved' || status === 'delivered') return 'success';
+	if (status === 'approval' || status === 'changes') return 'warning';
+	return status === 'working' || status === 'review' ? 'info' : 'neutral';
+}
+
+function columns(): readonly TableColumn<DashboardRow>[] {
+	return [
+		{
+			key: 'work',
+			header: t('sandbox.dashboard.work'),
+			width: '32%',
+			cell: (row) => <span class="ui-cell">
+				<b>{row.session.title}</b>
+				<small>
+					{t(
+						row.session.kind === 'new-module'
+							? 'sandbox.sessions.kind.new'
+							: 'sandbox.sessions.kind.change',
+					)}
+					·
+					{t('sandbox.dashboard.modules', {
+						count: row.session.modules.length,
+					})}
+				</small>
+				{row.personal
+					? null
+					: <small>{t('sandbox.dashboard.legacyRow')}</small>}
+			</span>,
+		},
+		{
+			key: 'status',
+			header: t('sandbox.dashboard.status'),
+			width: '20%',
+			cell: (row) =>
+				<Tag tone={tone(row.status)} dot>{t(
+					'sandbox.dashboard.status.' + row.status,
+				)}</Tag>,
+		},
+		{
+			key: 'tokens',
+			header: t('sandbox.dashboard.table.tokens'),
+			width: '13%',
+			numeric: true,
+			cell: (row) => formatTokens(row.usage, activeLocale()),
+		},
+		{
+			key: 'cost',
+			header: t('sandbox.dashboard.table.cost'),
+			width: '13%',
+			numeric: true,
+			cell: (row) => 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),
+		},
+	];
+}
+
+export function SessionPicker(props: SessionPickerProps) @{
+	const { t } = useTranslation();
+	const [creating, setCreating] = useState(false);
+	const [query, setQuery] = useState('');
+	const [status, setStatus] = useState('');
+	const [filtersOpen, setFiltersOpen] = useState(false);
+	const [detailId, setDetailId] = useState('');
+	const [confirmation, setConfirmation] = useState<'reject' | 'delete' | ''>(
+		'',
+	);
+	const dashboard = props.dashboard;
+	const rows = filterWork(
+		dashboard?.rows ?? [],
+		query,
+		status,
+		props.showArchived,
+		activeLocale(),
+	);
+	const detail =
+		dashboard?.rows.find((row) => row.session.id === detailId) ?? null;
+	const counts = dashboard?.counts;
+	const usage = dashboard?.usage;
+	const locked =
+		props.busy || detail !== null && props.running.includes(detail.session.id);
+	const number = (value: number) =>
+		new Intl.NumberFormat(activeLocale()).format(value);
+	const closeDetail = () => {
+		setDetailId('');
+		setConfirmation('');
+	};
+
+	<div class="sessions">
+		<PageHeader
+			eyebrow={t('sandbox.dashboard.eyebrow')}
+			title={t('sandbox.dashboard.title')}
+			description={t('sandbox.dashboard.description')}
+		>
+			<div class="sessions__actions">
+				<Button size="sm" disabled={props.busy} onClick={props.onRefresh}>
+					<Icon name="refresh" size={14} />
+					{t('sandbox.dashboard.refresh')}
+				</Button>
+				<Button size="sm" onClick={props.onDeliverySettings}>
+					<Icon name="settings" size={14} />
+					{t('sandbox.github.dashboardAction')}
+				</Button>
+				<Button
+					size="sm"
+					variant="primary"
+					disabled={props.busy}
+					onClick={() => setCreating(true)}
+				>
+					<Icon name="plus" size={14} />
+					{t('sandbox.dashboard.new')}
+				</Button>
+			</div>
+		</PageHeader>
+		<div class="ui-kpi-grid">
+			<Kpi
+				label={t('sandbox.dashboard.inProgress')}
+				value={counts
+					? number(
+							counts.draft + counts.working + counts.changes + counts.attention,
+						)
+					: '…'}
+				note={t('sandbox.dashboard.inProgressNote')}
+			/>
+			<Kpi
+				label={t('sandbox.dashboard.status.approval')}
+				value={counts ? number(counts.approval) : '…'}
+				note={t('sandbox.dashboard.approvalNote')}
+			/>
+			<Kpi
+				label={t('sandbox.dashboard.status.approved')}
+				value={counts
+					? number(counts.approved + counts.review + counts.delivered)
+					: '…'}
+				note={t('sandbox.dashboard.acceptedNote', {
+					delivered: counts?.delivered ?? 0,
+					review: counts?.review ?? 0,
+				})}
+			/>
+			<Kpi
+				label={t('sandbox.dashboard.status.rejected')}
+				value={counts ? number(counts.rejected) : '…'}
+				note={t('sandbox.dashboard.rejectedNote')}
+			/>
+		</div>
+		<div class="ui-grid-2">
+			<Kpi
+				label={t('sandbox.dashboard.tokens')}
+				value={usage ? formatTokens(usage, activeLocale()) : '…'}
+				note={t('sandbox.dashboard.tokensNote', {
+					input: number(usage?.inputTokens ?? 0),
+					output: number(usage?.outputTokens ?? 0),
+				})}
+			/>
+			<Kpi
+				label={t('sandbox.dashboard.cost')}
+				value={usage ? formatCost(usage, activeLocale()) : '…'}
+				note={t('sandbox.dashboard.costNote')}
+			/>
+		</div>
+		@if (usage && (usage.unpricedTurns > 0 || usage.missingUsage > 0)) {
+			<Alert tone="info">{t('sandbox.dashboard.incomplete', {
+				cost: usage.unpricedTurns,
+				tokens: usage.missingUsage,
+			})}</Alert>
+		}
+		@if (dashboard && dashboard.legacySessions > 0) {
+			<Alert tone="info">{t('sandbox.dashboard.legacyNote', {
+				count: dashboard.legacySessions,
+			})}</Alert>
+		}
+		<TableCard
+			title={t('sandbox.dashboard.sessions')}
+			count={number(rows.length)}
+			columns={columns()}
+			rows={rows}
+			rowKey={(row) => row.session.id}
+			status={dashboard ? 'idle' : 'loading'}
+			loadingLabel={t('sandbox.dashboard.loading')}
+			search={<SearchField
+				value={query}
+				onInput={setQuery}
+				label={t('sandbox.dashboard.search')}
+				placeholder={t('sandbox.dashboard.search')}
+			/>}
+			filters={<Filters
+				open={filtersOpen}
+				onToggle={() => setFiltersOpen(!filtersOpen)}
+				activeCount={(status ? 1 : 0) + (props.showArchived ? 1 : 0)}
+				label={t('sandbox.dashboard.filters')}
+			>
+				<FormField label={t('sandbox.dashboard.status')}>
+					<select
+						class="ui-select"
+						value={status}
+						onChange={(event) => setStatus(event.currentTarget.value)}
+					>
+						<option value="">{t('sandbox.dashboard.all')}</option>
+						@for (const item of statuses; key item) {
+							<option value={item}>{t(
+								'sandbox.dashboard.status.' + item,
+							)}</option>
+						}
+					</select>
+				</FormField>
+				<label class="ui-checkbox">
+					<input
+						type="checkbox"
+						checked={props.showArchived}
+						onChange={(event) => props.onShowArchived(
+							event.currentTarget.checked,
+						)}
+					/>
+					<span>{t('sandbox.sessions.archived.show')}</span>
+				</label>
+			</Filters>}
+			filtered={Boolean(query.trim() || status || props.showArchived)}
+			empty={{
+				icon: 'flask',
+				title: t('sandbox.dashboard.empty'),
+				hint: t('sandbox.dashboard.emptyHint'),
+			}}
+			emptyFiltered={{
+				icon: 'search',
+				title: t('sandbox.dashboard.noMatch'),
+				hint: t('sandbox.dashboard.noMatchHint'),
+			}}
+			actionsWidth="240px"
+			actionsLabel={t('sandbox.sessions.actions')}
+			actions={(row) => [
+				{
+					id: 'open',
+					label: t('sandbox.dashboard.open'),
+					icon: 'external',
+					onSelect: () => props.onOpen(row.session.id),
+				},
+				{
+					id: 'details',
+					label: t('sandbox.dashboard.details'),
+					icon: 'activity',
+					onSelect: () => setDetailId(row.session.id),
+				},
+			]}
+			note={t('sandbox.dashboard.scopeNote', {
+				count: dashboard?.deletedSessions ?? 0,
+			})}
+		/>
+		<Drawer
+			open={creating}
+			title={t('sandbox.dashboard.new')}
+			subtitle={t('sandbox.dashboard.newHint')}
+			width="lg"
+			onClose={() => {
+				if (!props.busy) setCreating(false);
+			}}
+		>
+			<NewSessionForm
+				drivers={props.drivers}
+				driver={props.driver}
+				busy={props.busy}
+				onDriver={props.onDriver}
+				onCreate={props.onCreate}
+			/>
+		</Drawer>
+		<Drawer
+			open={detail !== null}
+			title={detail?.session.title ?? ''}
+			subtitle={t('sandbox.dashboard.detailHint')}
+			width="lg"
+			onClose={closeDetail}
+		>
+			<div class="ui-drawer__body">
+				@if (detail) {
+					<div class="ui-form">
+						<div class="ui-tag-cloud">
+							<Tag tone={tone(detail.status)} dot>{t(
+								'sandbox.dashboard.status.' + detail.status,
+							)}</Tag>
+						</div>
+						<p class="ui-help">{detail.session.brief}</p>
+						<div class="ui-grid-2">
+							<Kpi
+								label={t('sandbox.dashboard.tokens')}
+								value={formatTokens(detail.usage, activeLocale())}
+								note={t('sandbox.dashboard.tokensHelp')}
+							/>
+							<Kpi
+								label={t('sandbox.dashboard.cost')}
+								value={formatCost(detail.usage, activeLocale())}
+								note={t('sandbox.dashboard.costNote')}
+							/>
+						</div>
+						<p class="ui-help">{t('sandbox.dashboard.moduleApprovals', {
+							approved: detail.approvedModules,
+							total: detail.session.modules.length,
+						})}</p>
+						<TableCard
+							title={t('sandbox.dashboard.phases')}
+							rows={detail.phases}
+							rowKey={(phase) => phase.role}
+							columns={[
+								{
+									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),
+								},
+								{
+									key: 'tokens',
+									header: t('sandbox.dashboard.table.tokens'),
+									width: '25%',
+									numeric: true,
+									cell: (phase) => formatTokens(phase.usage, activeLocale()),
+								},
+								{
+									key: 'cost',
+									header: t('sandbox.dashboard.table.cost'),
+									width: '25%',
+									numeric: true,
+									cell: (phase) => formatCost(phase.usage, activeLocale()),
+								},
+							]}
+							empty={{
+								icon: 'activity',
+								title: t('sandbox.dashboard.noUsage'),
+								hint: t('sandbox.dashboard.noUsageHint'),
+							}}
+						/>
+						<div class="ui-form__actions">
+							@if (detail.session.archivedAt) {
+								<Button
+									disabled={locked}
+									onClick={() => props.onRestore(detail.session.id)}
+								>{t('sandbox.common.restore')}</Button>
+							} @else {
+								<Button
+									disabled={locked}
+									onClick={() => props.onArchive(detail.session.id)}
+								>{t('sandbox.sessions.archive')}</Button>
+							}
+							@if (!detail.session.ejectedAt && !detail.session.rejectedAt) {
+								<Button
+									disabled={locked}
+									onClick={() => setConfirmation('reject')}
+								>{t('sandbox.dashboard.reject')}</Button>
+							}
+						</div>
+						<div class="ui-form__section ui-form__section--danger">
+							<div class="ui-form__section-head">
+								<b>{t('sandbox.common.delete')}</b>
+								<small>{t('sandbox.dashboard.deleteHint')}</small>
+							</div>
+							<Button
+								variant="danger"
+								disabled={locked}
+								onClick={() => setConfirmation('delete')}
+							>{t('sandbox.common.delete')}</Button>
+						</div>
+					</div>
+				}
+			</div>
+		</Drawer>
+		<ConfirmDialog
+			open={confirmation !== '' && detail !== null}
+			title={t(
+				confirmation === 'reject'
+					? 'sandbox.dashboard.rejectTitle'
+					: 'sandbox.common.delete',
+			)}
+			confirmLabel={t(
+				confirmation === 'reject'
+					? 'sandbox.dashboard.reject'
+					: 'sandbox.common.delete',
+			)}
+			cancelLabel={t('sandbox.common.cancel')}
+			busy={props.busy}
+			onCancel={() => setConfirmation('')}
+			onConfirm={() => {
+				if (!detail) return;
+				if (confirmation === 'reject') props.onReject(detail.session.id);
+				else props.onDelete(detail.session.id);
+				closeDetail();
+			}}
+		>{t(
+			confirmation === 'reject'
+				? 'sandbox.dashboard.rejectHint'
+				: 'sandbox.dashboard.deleteHint',
+		)}</ConfirmDialog>
+	</div>
+}

package/src/client/SpecEditor.tsrx

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from 'octane';
+import { Alert, Button, Icon } from '@flowdular/sdk/ui';
+import { loadModuleSpec, saveModuleSpec } from './api.ts';
+import { useTranslation } from './i18n.ts';
+
+export interface SpecEditorProps {
+	readonly sessionId: string;
+	readonly module: string;
+	readonly onSaved: () => void;
+}
+
+// Keyed by session and module in WorkbenchModal. A document cannot be saved
+// until this editor has loaded it; stale responses never populate another editor.
+export function SpecEditor(props: SpecEditorProps) @{
+	const { t } = useTranslation();
+	const [text, setText] = useState('');
+	const [loaded, setLoaded] = useState(false);
+	const [saving, setSaving] = useState(false);
+	const [error, setError] = useState('');
+	const [saved, setSaved] = useState(false);
+	const [attempt, setAttempt] = useState(0);
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		let cancelled = false;
+		setLoaded(false);
+		setError('');
+		void loadModuleSpec(props.sessionId, props.module).then((document) => {
+			if (cancelled) return;
+			if (document.module !== props.module) throw new Error(t(
+				'sandbox.workbench.spec.readFailed',
+			));
+			setText(document.text);
+			setLoaded(true);
+		}).catch((failure: unknown) => {
+			if (!cancelled) setError(
+				failure instanceof Error
+					? failure.message
+					: t('sandbox.workbench.spec.readFailed'),
+			);
+		});
+		return () => {
+			cancelled = true;
+			mounted.current = false;
+		};
+	}, [attempt]);
+	const save = async () => {
+		if (!loaded || saving || !text.trim()) return;
+		setSaving(true);
+		setError('');
+		setSaved(false);
+		try {
+			await saveModuleSpec(props.sessionId, props.module, text);
+			if (!mounted.current) return;
+			setSaved(true);
+			props.onSaved();
+		} catch (failure) {
+			if (mounted.current) setError(
+				failure instanceof Error
+					? failure.message
+					: t('sandbox.workbench.spec.saveFailed'),
+			);
+		} finally {
+			if (mounted.current) setSaving(false);
+		}
+	};
+	<div class="spec-editor">
+		<div class="spec-editor__bar">
+			<span class="ui-mono">
+				{'modules/' + props.module + '/spec/module.yaml'}
+			</span>
+			<span class="sandbox__spacer"></span>
+			<Button
+				size="sm"
+				variant="primary"
+				disabled={!loaded || saving || !text.trim()}
+				onClick={() => void save()}
+			>
+				<Icon name="check" size={14} />
+				{saving ? t('sandbox.common.saving') : t('sandbox.common.save')}
+			</Button>
+		</div>
+		@if (error) {
+			<Alert>{error}</Alert>
+		} @else if (saved) {
+			<Alert tone="info">{t('sandbox.workbench.spec.saved')}</Alert>
+		}
+		@if (!loaded) {
+			@if (error) {
+				<Button onClick={() => setAttempt(attempt + 1)}>{t(
+					'sandbox.dashboard.refresh',
+				)}</Button>
+			} @else {
+				<p class="ui-help">{t('sandbox.workbench.spec.loading')}</p>
+			}
+		}
+		<textarea
+			class="ui-textarea spec-editor__text"
+			aria-label={t('sandbox.workbench.specification')}
+			spellcheck={false}
+			disabled={!loaded || saving}
+			value={text}
+			onInput={(event) => {
+				setText(event.currentTarget.value);
+				setSaved(false);
+			}}
+		></textarea>
+	</div>
+}