@flowdular/sdk 0.1.0 → 0.2.0

package/packages/sandbox/src/client/GitHubSettingsModal.tsrx

@@ -1,219 +0,0 @@
-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/packages/sandbox/src/client/NewSessionForm.tsrx

@@ -1,214 +0,0 @@
-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/packages/sandbox/src/client/SessionBar.tsrx

@@ -1,151 +0,0 @@
-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>
-}