@flowdular/sandbox 0.2.0

package/src/client/GitHubSettingsModal.tsrx

@@ -0,0 +1,219 @@
+import { useState } from 'octane';
+import { Alert, Button, Drawer, FormField } from '@flowdular/sdk/ui';
+import { githubSettingsInput } from './github-settings.ts';
+import type { SafeSandboxConfiguration } from '../server/config.ts';
+import { useTranslation } from './i18n.ts';
+
+export interface GitHubSettingsInput {
+	readonly githubEnabled: boolean;
+	readonly githubOverridesProject: boolean;
+	readonly githubRemote: string;
+	readonly githubRepository: string;
+	readonly githubBaseBranch: string;
+	readonly githubBranchPrefix: string;
+	readonly githubMode: 'auto' | 'direct' | 'fork';
+	readonly githubForkOwner: string;
+	readonly githubReviewers: readonly string[];
+	readonly githubToken?: string;
+	readonly githubClearToken?: boolean;
+}
+
+export interface GitHubSettingsModalProps {
+	readonly configuration: SafeSandboxConfiguration;
+	readonly busy: boolean;
+	readonly error: string;
+	readonly onSave: (input: GitHubSettingsInput) => void;
+	readonly onClose: () => void;
+}
+
+export function GitHubSettingsModal(props: GitHubSettingsModalProps) @{
+	const { t } = useTranslation();
+	const github = props.configuration.github;
+	const [enabled, setEnabled] = useState(github.enabled);
+	const [custom, setCustom] = useState(github.overridesProject);
+	const submit = (event: SubmitEvent) => {
+		event.preventDefault();
+		props.onSave(
+			githubSettingsInput(
+				new FormData(event.currentTarget as HTMLFormElement),
+				github,
+			),
+		);
+	};
+
+	<Drawer
+		open={true}
+		title={t('sandbox.github.title')}
+		subtitle={t('sandbox.github.description')}
+		width="lg"
+		onClose={() => {
+			if (!props.busy) props.onClose();
+		}}
+	>
+		<form class="ui-drawer__form" onSubmit={submit}>
+			<div class="ui-drawer__body">
+				<div class="ui-form">
+					<label class="ui-checkbox">
+						<input
+							type="checkbox"
+							name="githubEnabled"
+							checked={enabled}
+							onChange={(event) => setEnabled(event.currentTarget.checked)}
+						/>
+						<span>{t('sandbox.github.offer')}</span>
+					</label>
+					<Alert tone="info">{t('sandbox.github.safety')}</Alert>
+					<label class="ui-checkbox">
+						<input
+							type="checkbox"
+							name="githubOverridesProject"
+							checked={custom}
+							onChange={(event) => setCustom(event.currentTarget.checked)}
+						/>
+						<span>{t('sandbox.github.overrideProject')}</span>
+					</label>
+					@if (!custom) {
+						<p class="ui-help">{t('sandbox.github.projectHelp')}</p>
+					} @else {
+						<div class="ui-form__section">
+							<FormField
+								label={t('sandbox.github.repository.label')}
+								help={t('sandbox.github.repository.help')}
+							>
+								<input
+									class="ui-input ui-mono"
+									name="githubRepository"
+									defaultValue={github.repository ?? ''}
+									placeholder={t('sandbox.github.repository.placeholder')}
+									maxlength={200}
+								/>
+							</FormField>
+							<FormField
+								label={t('sandbox.github.mode.label')}
+								help={t('sandbox.github.mode.help')}
+							>
+								<select
+									class="ui-select"
+									name="githubMode"
+									defaultValue={github.mode}
+								>
+									<option value="auto">{t('sandbox.github.mode.auto')}</option>
+									<option value="direct">{t(
+										'sandbox.github.mode.direct',
+									)}</option>
+									<option value="fork">{t('sandbox.github.mode.fork')}</option>
+								</select>
+							</FormField>
+							<FormField
+								label={t('sandbox.github.reviewers.label')}
+								help={t('sandbox.github.reviewers.help')}
+							>
+								<input
+									class="ui-input ui-mono"
+									name="githubReviewers"
+									defaultValue={github.reviewers.join(', ')}
+									maxlength={1000}
+								/>
+							</FormField>
+							<details>
+								<summary class="ui-label">{t(
+									'sandbox.github.advanced',
+								)}</summary>
+								<div class="ui-form">
+									<div class="ui-form__row">
+										<FormField
+											label={t('sandbox.github.remote.label')}
+											help={t('sandbox.github.remote.help')}
+										>
+											<input
+												class="ui-input ui-mono"
+												name="githubRemote"
+												defaultValue={github.remote}
+												maxlength={120}
+											/>
+										</FormField>
+										<FormField
+											label={t('sandbox.github.base.label')}
+											help={t('sandbox.github.base.help')}
+										>
+											<input
+												class="ui-input ui-mono"
+												name="githubBaseBranch"
+												defaultValue={github.baseBranch}
+												maxlength={120}
+											/>
+										</FormField>
+									</div>
+									<div class="ui-form__row">
+										<FormField label={t('sandbox.github.prefix.label')}>
+											<input
+												class="ui-input ui-mono"
+												name="githubBranchPrefix"
+												defaultValue={github.branchPrefix}
+												maxlength={120}
+											/>
+										</FormField>
+										<FormField
+											label={t('sandbox.github.forkOwner.label')}
+											help={t('sandbox.github.forkOwner.help')}
+										>
+											<input
+												class="ui-input ui-mono"
+												name="githubForkOwner"
+												defaultValue={github.forkOwner ?? ''}
+												maxlength={120}
+											/>
+										</FormField>
+									</div>
+								</div>
+							</details>
+						</div>
+					}
+					<div class="ui-form__section">
+						<div class="ui-form__section-head">
+							<b>{t('sandbox.github.access')}</b>
+							<small>{t('sandbox.github.accessHelp')}</small>
+						</div>
+						<FormField
+							label={t('sandbox.github.token.label')}
+							help={github.tokenFingerprint
+								? t('sandbox.github.token.stored', {
+										fingerprint: github.tokenFingerprint,
+									})
+								: t('sandbox.github.token.help')}
+						>
+							<input
+								class="ui-input ui-mono"
+								name="githubToken"
+								type="password"
+								autocomplete="new-password"
+								placeholder={t('sandbox.github.token.placeholder')}
+								maxlength={16384}
+							/>
+						</FormField>
+						@if (github.tokenFingerprint) {
+							<label class="ui-checkbox">
+								<input type="checkbox" name="githubClearToken" />
+								<span>{t('sandbox.github.token.remove')}</span>
+							</label>
+						}
+					</div>
+					@if (props.error) {
+						<Alert>{props.error}</Alert>
+					}
+				</div>
+			</div>
+			<div class="ui-drawer__foot">
+				<small>{t('sandbox.github.saveNote')}</small>
+				<div class="ui-form__actions">
+					<Button onClick={props.onClose} disabled={props.busy}>{t(
+						'sandbox.common.cancel',
+					)}</Button>
+					<Button type="submit" variant="primary" disabled={props.busy}>
+						{props.busy ? t('sandbox.common.saving') : t('sandbox.github.save')}
+					</Button>
+				</div>
+			</div>
+		</form>
+	</Drawer>
+}

package/src/client/NewSessionForm.tsrx

@@ -0,0 +1,214 @@
+import { useEffect, useRef, useState } from 'octane';
+import { Button, Icon } from '@flowdular/sdk/ui';
+import type { DriverSummary } from './api.ts';
+import {
+	ATTACH_ACCEPT,
+	attachmentKind,
+	attachmentRefusal,
+	formatBytes,
+} from './attachments.ts';
+import { useTranslation } from './i18n.ts';
+
+export interface NewSessionFormProps {
+	readonly drivers: readonly DriverSummary[];
+	readonly driver: string;
+	readonly busy: boolean;
+	readonly onDriver: (driver: string) => void;
+	readonly onCreate: (brief: string, driver: string, attachments: readonly File[]) => void;
+}
+/* A file the operator attached before the session exists. It is uploaded to
+   the new session id right after the session is created. */
+interface PickedFile {
+	readonly key: string;
+	readonly file: File;
+	readonly kind: 'image' | 'file';
+	/* Object URL for an image thumbnail, empty otherwise. Revoked on removal
+   and when the screen goes away. */
+	readonly url: string;
+}
+
+export function NewSessionForm(props: NewSessionFormProps) @{
+	const { t } = useTranslation();
+	const offered = props.drivers.filter((driver) => driver.offered);
+	const selected =
+		offered.find((driver) => driver.id === props.driver) ?? offered[0] ?? null;
+	const attachInput = useRef<HTMLInputElement | null>(null);
+	const opened = useRef<string[]>([]);
+	const [picked, setPicked] = useState<readonly PickedFile[]>([]);
+	const [attachError, setAttachError] = useState('');
+
+	/* Thumbnails hold object URLs; nothing else releases them, so the screen
+   does it when it goes away. */
+	useEffect(
+		() => () => {
+			for (const url of opened.current) URL.revokeObjectURL(url);
+		},
+		[],
+	);
+
+	const addFiles = (chosen: readonly File[]) => {
+		const next = [...picked];
+		let refusal = '';
+		for (const file of chosen) {
+			const reason = attachmentRefusal(file, next.length);
+			if (reason) {
+				refusal = reason;
+				continue;
+			}
+			const kind = attachmentKind(file);
+			const url =
+				kind === 'image' ? URL.createObjectURL(file) : '';
+			if (url) opened.current.push(url);
+			next.push({
+				key: `${file.name}-${Date.now()}-${Math.random().toString(36).slice(
+					2,
+					8,
+				)}`,
+				file,
+				kind,
+				url,
+			});
+		}
+		setPicked(next);
+		setAttachError(refusal);
+	};
+
+	const removeFile = (key: string) => {
+		const found = picked.find((item) => item.key === key);
+		if (found?.url) URL.revokeObjectURL(found.url);
+		setPicked(picked.filter((item) => item.key !== key));
+	};
+
+	const onPaste = (event: ClipboardEvent) => {
+		const files = event.clipboardData?.files;
+		if (!files || files.length === 0) return;
+		const images = Array.from(files).filter(
+			(file) => file.type.startsWith('image/'),
+		);
+		if (images.length === 0) return;
+		event.preventDefault();
+		addFiles(images);
+	};
+
+	const onPick = (event: Event & { currentTarget: HTMLInputElement }) => {
+		const chosen = event.currentTarget.files;
+		if (chosen && chosen.length > 0) addFiles(Array.from(chosen));
+		event.currentTarget.value = '';
+	};
+
+	const submit = (event: SubmitEvent) => {
+		event.preventDefault();
+		const form = new FormData(event.currentTarget as HTMLFormElement);
+		const brief = form.get('brief');
+		if (typeof brief === 'string' && brief.trim().length > 7 && selected) {
+			props.onCreate(
+				brief.trim(),
+				selected.id,
+				picked.map((item) => item.file),
+			);
+		}
+	};
+
+	<form class="ui-drawer__form" onSubmit={submit}>
+		<div class="ui-drawer__body">
+			<div class="ui-form">
+				@if (picked.length > 0 || attachError) {
+					<div class="chat__attachments">
+						@for (const item of picked; key item.key) {
+							<div class="chat__attachment">
+								@if (item.kind === 'image') {
+									<img
+										class="chat__attachment-thumb"
+										src={item.url}
+										alt={item.file.name}
+									/>
+								} @else {
+									<span
+										class="chat__attachment-thumb chat__attachment-thumb--file"
+									>
+										<Icon name="file-text" size={18} />
+									</span>
+								}
+								<span class="chat__attachment-info">
+									<span class="chat__attachment-name">{item.file.name}</span>
+									<span class="chat__attachment-size">{formatBytes(
+										item.file.size,
+									)}</span>
+								</span>
+								<button
+									class="chat__attachment-remove"
+									type="button"
+									aria-label={t('sandbox.attachments.remove', {
+										name: item.file.name,
+									})}
+									onClick={() => removeFile(item.key)}
+								>
+									<Icon name="x" size={12} />
+								</button>
+							</div>
+						}
+						@if (attachError) {
+							<span class="chat__attachment-error">{attachError}</span>
+						}
+					</div>
+				}
+				<textarea
+					class="ui-textarea"
+					aria-label={t('sandbox.sessions.brief.placeholder')}
+					minlength={8}
+					maxlength={20000}
+					name="brief"
+					rows={4}
+					placeholder={t('sandbox.sessions.brief.placeholder')}
+					required
+					onPaste={onPaste}
+				></textarea>
+			</div>
+		</div>
+		<div class="ui-drawer__foot">
+			<button
+				class="chat__attach"
+				type="button"
+				aria-label={t('sandbox.attachments.action')}
+				title={t('sandbox.attachments.help')}
+				onClick={() => attachInput.current?.click()}
+			>
+				<Icon name="plus" size={16} />
+			</button>
+			<input
+				ref={attachInput}
+				class="chat__attach-input"
+				type="file"
+				multiple
+				accept={ATTACH_ACCEPT}
+				onChange={onPick}
+			/>
+			<select
+				class="chat__picker"
+				aria-label={t('sandbox.sessions.driver.label')}
+				value={selected?.id ?? ''}
+				disabled={offered.length === 0}
+				onChange={(event) => props.onDriver(event.currentTarget.value)}
+			>
+				@for (const driver of offered; key driver.id) {
+					<option value={driver.id}>{driver.label}</option>
+				}
+			</select>
+			<span class="sandbox__spacer"></span>
+			<Button
+				size="sm"
+				variant="primary"
+				type="submit"
+				disabled={props.busy || offered.length === 0}
+			>
+				<Icon name="play" size={14} />
+				{props.busy
+					? t('sandbox.sessions.planning')
+					: t('sandbox.sessions.start')}
+			</Button>
+		</div>
+		<p class="ui-note">
+			{selected ? selected.description : t('sandbox.sessions.driver.none')}
+		</p>
+	</form>
+}

package/src/client/SessionBar.tsrx

@@ -0,0 +1,151 @@
+import { useState } from 'octane';
+import { Button, Icon, Tag } from '@flowdular/sdk/ui';
+import type { SandboxSession } from '../server/sessions.ts';
+import type { WorkspaceModuleSummary } from './api.ts';
+import { useTranslation } from './i18n.ts';
+
+export interface SessionBarProps {
+	readonly session: SandboxSession;
+	readonly changes: number;
+	readonly busy: boolean;
+	/* The module the panes show; empty means every module of the session. */
+	readonly activeModule: string;
+	/* Every module of the workspace, so the session can take another one in. */
+	readonly workspaceModules: readonly WorkspaceModuleSummary[];
+	readonly onModule: (directory: string) => void;
+	readonly onAddModule: (moduleId: string) => void;
+	readonly onBack: () => void;
+	readonly onGates: () => void;
+	readonly onChanges: () => void;
+	readonly onPreview: () => void;
+	readonly onEject: () => void;
+}
+
+function stateTone(
+	state: SandboxSession['state'],
+): 'success' | 'warning' | 'danger' | 'info' | 'neutral' {
+	if (state === 'accepted') return 'success';
+	if (state === 'failed' || state === 'blocked') return 'danger';
+	if (state === 'awaiting-approval' || state === 'validating') return 'warning';
+	if (state === 'draft') return 'neutral';
+	return 'info';
+}
+
+/* Everything here belongs to one module session. The application bar above
+   stays global, so a session action can never look like a workspace action. */
+export function SessionBar(props: SessionBarProps) @{
+	const { t } = useTranslation();
+	const delivered = Boolean(props.session.ejectedAt);
+	const modules = props.session.modules;
+	const held = new Set(modules.map((module) => module.id));
+	const candidates = props.workspaceModules.filter(
+		(module) => !held.has(module.id),
+	);
+	const [adding, setAdding] = useState(false);
+	const [chosen, setChosen] = useState('');
+
+	<div class="session-bar">
+		<button class="session-bar__back" type="button" onClick={props.onBack}>
+			<Icon name="chevron-down" size={14} />
+			{t('sandbox.session.back')}
+		</button>
+		<span class="session-bar__title">
+			<b>{props.session.title}</b>
+			<small class="ui-mono">
+				{modules.length === 1
+					? props.session.moduleId
+					: t('sandbox.session.modules', { count: modules.length })}
+			</small>
+		</span>
+		<Tag tone={stateTone(props.session.state)} dot>
+			{delivered
+				? t('sandbox.session.state.delivered')
+				: t('sandbox.session.state.' + props.session.state)}
+		</Tag>
+		@if (modules.length > 1) {
+			<select
+				class="chat__picker"
+				aria-label={t('sandbox.session.module.visible')}
+				value={props.activeModule}
+				onChange={(event) => props.onModule(event.currentTarget.value)}
+			>
+				<option value="">{t('sandbox.session.module.all')}</option>
+				@for (const module of modules; key module.id) {
+					<option value={module.directory}>{module.id}</option>
+				}
+			</select>
+		}
+		@if (adding) {
+			<>
+				<select
+					class="chat__picker"
+					aria-label={t('sandbox.session.module.addLabel')}
+					value={chosen}
+					onChange={(event) => setChosen(event.currentTarget.value)}
+				>
+					<option value="">{t('sandbox.session.module.choose')}</option>
+					@for (const module of candidates; key module.id) {
+						<option value={module.id}>{module.id}</option>
+					}
+				</select>
+				<Button
+					size="sm"
+					variant="primary"
+					disabled={props.busy || !chosen}
+					onClick={() => {
+						props.onAddModule(chosen);
+						setChosen('');
+						setAdding(false);
+					}}
+				>{t('sandbox.common.add')}</Button>
+				<Button size="sm" variant="ghost" onClick={() => setAdding(false)}>{t(
+					'sandbox.common.cancel',
+				)}</Button>
+			</>
+		} @else if (!delivered && candidates.length > 0) {
+			<button
+				class="session-bar__add"
+				type="button"
+				disabled={props.busy}
+				onClick={() => setAdding(true)}
+			>
+				<Icon name="plus" size={12} />
+				{t('sandbox.session.module.add')}
+			</button>
+		}
+		<span class="sandbox__spacer"></span>
+		<Button size="sm" variant="ghost" onClick={props.onPreview}>
+			<Icon name="play" size={14} />
+			{t('sandbox.work.preview')}
+		</Button>
+		<Button
+			size="sm"
+			variant="ghost"
+			onClick={props.onGates}
+			disabled={props.busy}
+		>
+			<Icon name="check" size={14} />
+			{t('sandbox.session.gates')}
+		</Button>
+		<Button
+			size="sm"
+			variant="ghost"
+			onClick={props.onChanges}
+			disabled={props.changes === 0}
+		>
+			<Icon name="code" size={14} />
+			{t('sandbox.session.changes', { count: props.changes })}
+		</Button>
+		<Button
+			size="sm"
+			variant={delivered ? 'ghost' : 'secondary'}
+			onClick={props.onEject}
+			disabled={props.busy || props.changes === 0}
+		>
+			<Icon name={delivered ? 'check' : 'download'} size={14} />
+			{delivered
+				? t('sandbox.session.deliverAgain')
+				: t('sandbox.session.eject')}
+		</Button>
+	</div>
+}