@flowdular/sandbox 0.2.0

package/src/client/SpecReviewCard.tsrx

@@ -0,0 +1,321 @@
+import { useState } from 'octane';
+import { Button, Icon, Tag } from '@flowdular/sdk/ui';
+import type {
+	ModuleSpecReview,
+	SpecChangeKind,
+	SpecFieldChange,
+} from '../server/spec.ts';
+import { useTranslation } from './i18n.ts';
+
+export interface SpecReviewCardProps {
+	readonly review: ModuleSpecReview;
+	readonly busy: boolean;
+	readonly onApprove: () => void;
+	readonly onRequestChanges: (comment: string) => void;
+	readonly onEdit: () => void;
+}
+
+const FIELD_LABELS: Readonly<Record<string, string>> = {
+	id: 'id',
+	specVersion: 'version',
+	status: 'status',
+	name: 'name',
+	description: 'description',
+	profile: 'profile',
+	tenancy: 'tenancy',
+	capabilities: 'capability',
+	locales: 'locale',
+	dependencies: 'dependency',
+	invariants: 'invariant',
+	dataOwnership: 'dataOwnership',
+	permissions: 'permission',
+	acceptanceScenarios: 'scenario',
+};
+
+const IDENTIFIER_FIELDS = new Set([
+	'id',
+	'specVersion',
+	'status',
+	'profile',
+	'tenancy',
+	'capabilities',
+	'locales',
+	'dependencies',
+	'permissions',
+	'acceptanceScenarios',
+]);
+
+function changeSign(kind: SpecChangeKind): string {
+	if (kind === 'added') return '+';
+	if (kind === 'removed') return '-';
+	return '~';
+}
+
+function changeKey(change: SpecFieldChange): string {
+	return `${change.field}:${change.kind}:${change.key ?? ''}`;
+}
+
+/* What the entry became, without repeating the identifier that names it. */
+function changeValue(change: SpecFieldChange): string {
+	if (change.kind === 'changed') {
+		return `${change.before ?? ''} → ${change.after ?? ''}`;
+	}
+	const value = change.after ?? change.before ?? '';
+	return value === change.key ? '' : value;
+}
+
+/* What the operator approves: the specification as it stands, and for a change
+   the difference from the copy the session started with. */
+export function SpecReviewCard(props: SpecReviewCardProps) @{
+	const { t } = useTranslation();
+	const review = props.review;
+	const draft = review.draft;
+	const changes = review.changes;
+	const isEdit = review.kind === 'edit';
+	const marks = new Map<string, SpecChangeKind>();
+	for (const change of changes) {
+		if (change.key) marks.set(change.field + ':' + change.key, change.kind);
+	}
+	const markOf = (field: string, key: string) => isEdit
+		? marks.get(field + ':' + key) ?? null
+		: null;
+	const [asking, setAsking] = useState(false);
+	const [comment, setComment] = useState('');
+
+	<section class="spec-review">
+		<header class="spec-review__head">
+			<span class="ui-mono">{review.moduleId}</span>
+			<Tag mono tone={review.approved ? 'success' : 'warning'}>
+				{review.status === 'draft' || review.status === 'approved' ||
+				review.status === 'rejected'
+					? t('sandbox.spec.status.' + review.status)
+					: review.status ?? t('sandbox.spec.status.none')}
+			</Tag>
+			@if (draft && draft.specVersion) {
+				<Tag mono>{'v' + draft.specVersion}</Tag>
+			}
+			<span class="sandbox__spacer"></span>
+			<span class="spec-review__path ui-mono">{review.path}</span>
+		</header>
+
+		@if (!draft) {
+			<p class="spec-review__empty">
+				{review.present
+					? t('sandbox.spec.unreadable')
+					: t('sandbox.spec.missing')}
+			</p>
+		} @else {
+			<>
+				@if (isEdit) {
+					<div class="spec-review__block">
+						<h4 class="spec-review__title">
+							{changes.length === 0
+								? t('sandbox.spec.changes.empty')
+								: t('sandbox.spec.changes.title')}
+						</h4>
+						@if (changes.length > 0) {
+							<ul class="spec-review__changes">
+								@for (const change of changes; key changeKey(change)) {
+									<li
+										class={'spec-review__change spec-review__change--' +
+											change.kind}
+									>
+										<span class="spec-review__sign">{changeSign(
+											change.kind,
+										)}</span>
+										<span class="spec-review__field">
+											{FIELD_LABELS[change.field]
+												? t('sandbox.spec.field.' + FIELD_LABELS[change.field])
+												: change.field}
+										</span>
+										@if (change.key) {
+											<span
+												class={IDENTIFIER_FIELDS.has(change.field)
+													? 'ui-mono'
+													: ''}
+											>{change.key}</span>
+										}
+										@if (changeValue(change)) {
+											<span class="spec-review__value">{changeValue(
+												change,
+											)}</span>
+										}
+									</li>
+								}
+							</ul>
+						}
+					</div>
+				}
+
+				<div class="spec-review__block">
+					<h4 class="spec-review__title">{draft.name || review.moduleId}</h4>
+					<p class="spec-review__text">{draft.description}</p>
+					<dl class="spec-review__facts">
+						<dt>{t('sandbox.spec.facts.capabilities')}</dt>
+						<dd class="ui-mono">
+							{draft.capabilities.join(', ') || t('sandbox.common.none')}
+						</dd>
+						<dt>{t('sandbox.spec.facts.tenancy')}</dt>
+						<dd class="ui-mono">
+							{draft.tenancy || t('sandbox.common.unset')}
+						</dd>
+						<dt>{t('sandbox.spec.facts.profile')}</dt>
+						<dd class="ui-mono">
+							{draft.profile || t('sandbox.common.unset')}
+						</dd>
+					</dl>
+				</div>
+
+				@if (draft.permissions.length > 0) {
+					<div class="spec-review__block">
+						<h4 class="spec-review__title">{t('sandbox.spec.permissions')}</h4>
+						<ul class="spec-review__list">
+							@for (const permission of draft.permissions; key permission.id) {
+								<li
+									class={[
+										'spec-review__item',
+										markOf('permissions', permission.id) &&
+											'spec-review__item--' +
+												markOf('permissions', permission.id),
+									]}
+								>
+									<span class="ui-mono">{permission.id}</span>
+									<span>{permission.description}</span>
+								</li>
+							}
+						</ul>
+					</div>
+				}
+
+				@if (draft.invariants.length > 0) {
+					<div class="spec-review__block">
+						<h4 class="spec-review__title">{t('sandbox.spec.invariants')}</h4>
+						<ul class="spec-review__list">
+							@for (const invariant of draft.invariants; key invariant) {
+								<li
+									class={[
+										'spec-review__item',
+										markOf('invariants', invariant) &&
+											'spec-review__item--' + markOf('invariants', invariant),
+									]}
+								>
+									<span>{invariant}</span>
+								</li>
+							}
+						</ul>
+					</div>
+				}
+
+				@if (draft.dataOwnership.length > 0) {
+					<div class="spec-review__block">
+						<h4 class="spec-review__title">{t(
+							'sandbox.spec.dataOwnership',
+						)}</h4>
+						<ul class="spec-review__list">
+							@for (const sentence of draft.dataOwnership; key sentence) {
+								<li
+									class={[
+										'spec-review__item',
+										markOf('dataOwnership', sentence) &&
+											'spec-review__item--' + markOf('dataOwnership', sentence),
+									]}
+								>
+									<span>{sentence}</span>
+								</li>
+							}
+						</ul>
+					</div>
+				}
+
+				@if (draft.acceptanceScenarios.length > 0) {
+					<div class="spec-review__block">
+						<h4 class="spec-review__title">{t(
+							'sandbox.spec.acceptanceScenarios',
+						)}</h4>
+						<ul class="spec-review__list">
+							@for (const scenario of draft.acceptanceScenarios; key scenario.id) {
+								<li
+									class={[
+										'spec-review__scenario',
+										markOf('acceptanceScenarios', scenario.id) &&
+											'spec-review__item--' +
+												markOf('acceptanceScenarios', scenario.id),
+									]}
+								>
+									<span class="ui-mono">{scenario.id}</span>
+									<span>
+										<b>{t('sandbox.spec.given')}</b>
+										{' ' + scenario.given}
+									</span>
+									<span>
+										<b>{t('sandbox.spec.when')}</b>
+										{' ' + scenario.when}
+									</span>
+									<span>
+										<b>{t('sandbox.spec.then')}</b>
+										{' ' + scenario.then}
+									</span>
+								</li>
+							}
+						</ul>
+					</div>
+				}
+			</>
+		}
+
+		@if (asking) {
+			<div class="spec-review__ask">
+				<textarea
+					class="ui-textarea"
+					rows={3}
+					placeholder={t('sandbox.spec.request.placeholder')}
+					value={comment}
+					onInput={(event) => setComment(event.currentTarget.value)}
+				></textarea>
+				<div class="ui-form__actions">
+					<Button
+						size="sm"
+						variant="primary"
+						disabled={props.busy || comment.trim().length === 0}
+						onClick={() => {
+							props.onRequestChanges(comment.trim());
+							setComment('');
+							setAsking(false);
+						}}
+					>
+						<Icon name="play" size={14} />
+						{t('sandbox.spec.request.send')}
+					</Button>
+					<Button size="sm" variant="ghost" onClick={() => setAsking(false)}>{t(
+						'sandbox.common.cancel',
+					)}</Button>
+				</div>
+			</div>
+		} @else {
+			<div class="ui-form__actions">
+				<Button
+					size="sm"
+					variant="primary"
+					disabled={props.busy || !draft}
+					onClick={props.onApprove}
+				>
+					<Icon name="check" size={14} />
+					{t('sandbox.spec.approve')}
+				</Button>
+				<Button
+					size="sm"
+					variant="secondary"
+					disabled={props.busy}
+					onClick={() => setAsking(true)}
+				>
+					<Icon name="help" size={14} />
+					{t('sandbox.spec.request.action')}
+				</Button>
+				<Button size="sm" variant="ghost" onClick={props.onEdit}>
+					<Icon name="code" size={14} />
+					{t('sandbox.spec.edit')}
+				</Button>
+			</div>
+		}
+	</section>
+}

package/src/client/WorkCard.tsrx

@@ -0,0 +1,128 @@
+import { useEffect } from 'octane';
+import { Button, Icon, Tag } from '@flowdular/sdk/ui';
+import type { SandboxSession } from '../server/sessions.ts';
+import { DiffPane, type ModuleDiff } from './DiffPane.tsrx';
+import { useTranslation } from './i18n.ts';
+
+export type WorkCardMode = 'preview' | 'code';
+
+export interface WorkCardProps {
+	readonly session: SandboxSession;
+	readonly diffs: readonly ModuleDiff[];
+	readonly mode: WorkCardMode;
+	readonly nonce: number;
+	/* The module the card shows; empty means every module of the session. */
+	readonly activeModule: string;
+	readonly previewData: 'fixtures' | 'bridge';
+	readonly onMode: (mode: WorkCardMode) => void;
+	readonly onOpen: () => void;
+	readonly onReload: () => void;
+	readonly onAskAbout: (path: string) => void;
+}
+
+/* The card floats beside the conversation and carries both surfaces the work
+   produces: the running module and its diff. It is a viewport, so a click
+   opens the same content full screen where it becomes interactive. */
+/* The preview renders at a real workspace width and is scaled to the card, so
+   the card shows the desktop layout rather than a narrow rendering. The factor
+   depends on the card width, which only the browser knows. */
+const PREVIEW_WIDTH = 1440;
+
+function fitPreview(): void {
+	const viewport = document.querySelector<HTMLElement>('.work-card__viewport');
+	const frame = viewport?.querySelector<HTMLElement>('.preview-frame');
+	if (!viewport || !frame) return;
+	const scale = viewport.clientWidth / PREVIEW_WIDTH;
+	if (scale <= 0) return;
+	frame.style.width = `${PREVIEW_WIDTH}px`;
+	frame.style.height = `${Math.round(viewport.clientHeight / scale)}px`;
+	frame.style.transform = `scale(${scale})`;
+}
+
+export function WorkCard(props: WorkCardProps) @{
+	const { t } = useTranslation();
+	const source =
+		'/preview/' + props.session.id + '?n=' + props.nonce +
+		(props.activeModule ? '&module=' + props.activeModule : '');
+	const shown =
+		props.activeModule
+			? props.diffs.filter((diff) => diff.module === props.activeModule)
+			: props.diffs;
+
+	useEffect(() => {
+		fitPreview();
+		const observer = new ResizeObserver(() => fitPreview());
+		const viewport = document.querySelector('.work-card__viewport');
+		if (viewport) observer.observe(viewport);
+		return () => observer.disconnect();
+	}, [props.mode, props.nonce]);
+
+	<article class="work-card">
+		<header class="work-card__head">
+			<Button
+				size="sm"
+				variant={props.mode === 'preview' ? 'primary' : 'ghost'}
+				onClick={() => props.onMode('preview')}
+			>{t('sandbox.work.preview')}</Button>
+			<Button
+				size="sm"
+				variant={props.mode === 'code' ? 'primary' : 'ghost'}
+				onClick={() => props.onMode('code')}
+			>{t('sandbox.work.code', { count: shown.length })}</Button>
+			<span class="ui-mono">
+				{props.activeModule
+					? 'modules/' + props.activeModule
+					: props.session.modules.length === 1
+						? props.session.moduleId
+						: t('sandbox.session.modules', {
+								count: props.session.modules.length,
+							})}
+			</span>
+			<span class="sandbox__spacer"></span>
+			@if (props.mode === 'preview') {
+				<Tag tone={props.previewData === 'bridge' ? 'info' : 'neutral'}>
+					{props.previewData === 'bridge'
+						? t('sandbox.work.liveData')
+						: t('sandbox.work.fixtures')}
+				</Tag>
+			}
+			<Button size="sm" variant="ghost" onClick={props.onReload}>
+				<Icon name="refresh" size={14} />
+			</Button>
+			<Button size="sm" variant="ghost" onClick={props.onOpen}>
+				<Icon name="external" size={14} />
+			</Button>
+		</header>
+
+		@if (props.mode === 'preview') {
+			<div class="work-card__stage">
+				<div class="work-card__viewport">
+					<iframe
+						class="preview-frame"
+						src={source}
+						title={t('sandbox.work.previewTitle')}
+					></iframe>
+				</div>
+				<button
+					class="work-card__open"
+					type="button"
+					onClick={props.onOpen}
+					aria-label={t('sandbox.work.openFull')}
+				>
+					<span class="work-card__hint">
+						<Icon name="external" size={14} />
+						{t('sandbox.work.open')}
+					</span>
+				</button>
+			</div>
+		} @else {
+			<div class="work-card__stage work-card__stage--code">
+				<DiffPane
+					diffs={props.diffs}
+					activeModule={props.activeModule}
+					onAsk={props.onAskAbout}
+				/>
+			</div>
+		}
+	</article>
+}

package/src/client/WorkbenchModal.tsrx

@@ -0,0 +1,161 @@
+import { useEffect } from 'octane';
+import { Button, Icon } from '@flowdular/sdk/ui';
+import type { SandboxSession } from '../server/sessions.ts';
+import { SpecEditor } from './SpecEditor.tsrx';
+import { DiffPane, type ModuleDiff } from './DiffPane.tsrx';
+import { useTranslation } from './i18n.ts';
+
+export type WorkbenchMode = 'preview' | 'diff' | 'spec';
+
+export interface WorkbenchModalProps {
+	readonly mode: WorkbenchMode;
+	readonly session: SandboxSession;
+	readonly diffs: readonly ModuleDiff[];
+	readonly nonce: number;
+	readonly selecting: boolean;
+	/* The module the preview opens on and the diff is filtered to; empty means
+   every module of the session. */
+	readonly activeModule: string;
+	readonly previewData: 'fixtures' | 'bridge';
+	readonly onModule: (directory: string) => void;
+	readonly onMode: (mode: WorkbenchMode) => void;
+	readonly onToggleSelect: () => void;
+	readonly onReload: () => void;
+	readonly onPreviewData: (mode: 'fixtures' | 'bridge') => void;
+	readonly onAskAbout: (path: string) => void;
+	/* The specification on disk changed, so the session view is stale. */
+	readonly onSpecSaved: () => void;
+	readonly onClose: () => void;
+}
+
+/* Full screen is where the module is actually worked on: the preview is
+   interactive here, and the diff finally has the width it needs. */
+export function WorkbenchModal(props: WorkbenchModalProps) @{
+	const { t } = useTranslation();
+	const source =
+		'/preview/' + props.session.id + '?n=' + props.nonce +
+			(props.selecting ? '&select=1' : '') +
+		(props.activeModule ? '&module=' + props.activeModule : '');
+	const shown =
+		props.activeModule
+			? props.diffs.filter((diff) => diff.module === props.activeModule)
+			: props.diffs;
+	const specModule = props.activeModule || props.session.modules[0]!.directory;
+	const sessionId = props.session.id;
+
+	useEffect(() => {
+		const onKey = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') props.onClose();
+		};
+		window.addEventListener('keydown', onKey);
+		return () => window.removeEventListener('keydown', onKey);
+	}, []);
+
+	<div class="workbench" role="dialog" aria-modal="true">
+		<div class="workbench__panel">
+			<header class="workbench__head">
+				<Button
+					size="sm"
+					variant={props.mode === 'preview' ? 'primary' : 'secondary'}
+					onClick={() => props.onMode('preview')}
+				>{t('sandbox.work.preview')}</Button>
+				<Button
+					size="sm"
+					variant={props.mode === 'diff' ? 'primary' : 'secondary'}
+					onClick={() => props.onMode('diff')}
+				>{t('sandbox.session.changes', { count: shown.length })}</Button>
+				<Button
+					size="sm"
+					variant={props.mode === 'spec' ? 'primary' : 'secondary'}
+					onClick={() => props.onMode('spec')}
+				>{t('sandbox.workbench.specification')}</Button>
+				<span class="ui-mono">
+					{props.session.modules.length === 1
+						? props.session.moduleId
+						: t('sandbox.session.modules', {
+								count: props.session.modules.length,
+							})}
+				</span>
+				@if (props.session.modules.length > 1) {
+					<select
+						class="chat__picker"
+						aria-label={t('sandbox.workbench.module')}
+						value={props.mode === 'spec' ? specModule : props.activeModule}
+						onChange={(event) => props.onModule(event.currentTarget.value)}
+					>
+						@if (props.mode !== 'spec') {
+							<option value="">{t('sandbox.session.module.all')}</option>
+						}
+						@for (const module of props.session.modules; key module.id) {
+							<option value={module.directory}>{module.id}</option>
+						}
+					</select>
+				}
+				<span class="sandbox__spacer"></span>
+				@if (props.mode === 'preview') {
+					<>
+						<select
+							class="ui-select"
+							value={props.previewData}
+							onChange={(event) => props.onPreviewData(
+								event.currentTarget.value === 'bridge' ? 'bridge' : 'fixtures',
+							)}
+						>
+							<option value="fixtures">{t('sandbox.work.fixtures')}</option>
+							<option value="bridge">{t('sandbox.workbench.liveData')}</option>
+						</select>
+						<Button
+							size="sm"
+							variant={props.selecting ? 'primary' : 'secondary'}
+							onClick={props.onToggleSelect}
+						>
+							<Icon name="filter" size={14} />
+							{props.selecting
+								? t('sandbox.workbench.selecting')
+								: t('sandbox.workbench.selectElement')}
+						</Button>
+						<Button size="sm" onClick={props.onReload}>
+							<Icon name="refresh" size={14} />
+							{t('sandbox.workbench.reload')}
+						</Button>
+					</>
+				}
+				<Button size="sm" variant="ghost" onClick={props.onClose}>
+					<Icon name="x" size={14} />
+					{t('sandbox.common.close')}
+				</Button>
+			</header>
+			@if (props.mode === 'preview') {
+				<div
+					class={[
+						'workbench__body',
+						props.selecting && 'preview-frame__wrap--selecting',
+					]}
+				>
+					<iframe
+						class="preview-frame"
+						src={source}
+						title={t('sandbox.work.previewTitle')}
+					></iframe>
+				</div>
+			} @else if (props.mode === 'spec') {
+				<div class="workbench__body workbench__body--scroll">
+					<SpecEditor
+						key={sessionId + '/' + specModule}
+						sessionId={sessionId}
+						module={specModule}
+						onSaved={props.onSpecSaved}
+					/>
+				</div>
+			} @else {
+				<div class="workbench__body workbench__body--scroll">
+					<DiffPane
+						diffs={props.diffs}
+						activeModule={props.activeModule}
+						onAsk={props.onAskAbout}
+					/>
+				</div>
+			}
+		</div>
+	</div>
+}