@vibesdotdev/code-sessions 0.0.0-stage → 1.0.0-rc.1

package/dist/svelte/components/CreateSessionDialog.svelte

@@ -0,0 +1,470 @@
+<script lang="ts" module>
+	import type { CodeSessionCreateInput, CodeSessionSeed } from '@vibesdotdev/code-sessions';
+
+	export type HostTargetOption = 'local' | 'fleet' | 'cloud';
+
+	export interface FleetHostOption {
+		hostId: string;
+		name: string;
+		online: boolean;
+	}
+
+	export interface CreateSessionDialogProps {
+		open?: boolean;
+		/**
+		 * Task this session is being started for, when the user got here from one.
+		 *
+		 * Reuses the platform's existing `CodeSessionSeed` contract rather than a
+		 * web-only shape: the work-items TUI already creates sessions with
+		 * `{ source: 'work-item', title, ref }`, the platform threads it into the
+		 * sandbox as `VIBES_SEED_*`, and the session record persists it verbatim.
+		 * A second convention here would mean a session started from the web could
+		 * not be traced back the way one started from the TUI can.
+		 */
+		seed?: CodeSessionSeed;
+		/** Called when the user submits the form; parent handles the actual create call. */
+		oncreate?: (input: CodeSessionCreateInput) => void | Promise<void>;
+		/** Called when the dialog is closed. */
+		onclose?: () => void;
+		/** Repository options to populate the picker. */
+		repositories?: Array<{
+			id: string;
+			name: string;
+			defaultBranch?: string | null;
+			description?: string | null;
+			group?: string;
+		}>;
+		/** Whether the create action is in progress. */
+		creating?: boolean;
+		/** Configuration-only embeddings may continue to a separate dispatch step. */
+		submitLabel?: string;
+		/** Error from a failed create attempt. */
+		createError?: string | null;
+		/** Optional URL for creating a repository in the owning forge surface. */
+		repositoryCreateHref?: string;
+		repositoryCreateLabel?: string;
+		/** Hide scratch mode when the caller requires a repository-backed outcome. */
+		allowEphemeral?: boolean;
+		/** Let the user explicitly request repository provisioning at the caller's submit boundary. */
+		allowRepositoryCreation?: boolean;
+		/** Execution targets the embedding surface can actually provision. */
+		allowedHostTargets?: HostTargetOption[];
+		/**
+		 * Fleet machines available for code execution (labeled sandbox:code-execution).
+		 * When empty the "Fleet host" radio is disabled and an onboarding hint is shown.
+		 */
+		fleetHosts?: FleetHostOption[];
+	}
+</script>
+
+<script lang="ts">
+	import * as Dialog from '@vibesdotdev/kit/components/ui/dialog';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '@vibesdotdev/kit/components';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { SearchSelect } from '@vibesdotdev/kit/svelte';
+	import {
+		buildCreateSessionInput,
+		canSubmitCreateSession,
+		describeCreateSessionBlocker,
+		isSelectableFleetHost,
+		resolveDefaultHostTarget,
+		resolveDefaultFleetHostId,
+		resolveSelectableHostTargets
+	} from '../create-session-form.js';
+
+	let {
+		open = false,
+		seed = undefined,
+		oncreate,
+		onclose,
+		repositories = [],
+		creating = false,
+		submitLabel = 'Start session',
+		createError = null,
+		repositoryCreateHref = undefined,
+		repositoryCreateLabel = 'Create git.vibes.dev repository',
+		allowEphemeral = true,
+		allowRepositoryCreation = false,
+		allowedHostTargets = ['cloud', 'local', 'fleet'],
+		fleetHosts = []
+	}: CreateSessionDialogProps = $props();
+
+	// --- Form state ---
+	let selectedHostTarget: HostTargetOption = $state('cloud');
+	let selectedRepositoryId: string = $state('');
+	let checkoutRef: string = $state('');
+	let ephemeral: boolean = $state(false);
+	let createRepositoryIfMissing: boolean = $state(false);
+	const defaultFleetHostId = $derived(resolveDefaultFleetHostId(fleetHosts));
+	const hasOnlineFleetHosts = $derived(defaultFleetHostId.length > 0);
+	let selectedFleetHostId: string = $state('');
+
+	const selectedRepo = $derived(repositories.find((r) => r.id === selectedRepositoryId));
+	const selectedFleetHost = $derived(fleetHosts.find((h) => h.hostId === selectedFleetHostId));
+	const selectableHostTargets = $derived(resolveSelectableHostTargets(allowedHostTargets, fleetHosts));
+	const defaultHostTarget = $derived(resolveDefaultHostTarget(selectableHostTargets));
+	const canStartSession = $derived(
+		canSubmitCreateSession({
+			ephemeral,
+			selectedRepositoryId,
+			createRepositoryIfMissing,
+			selectedHostTarget,
+			allowedHostTargets: selectableHostTargets,
+			selectedFleetHostId
+		})
+	);
+	// Why the submit button is disabled. Never null while `canStartSession` is
+	// false — the two are pinned to agree by test.
+	const submitBlocker = $derived(
+		describeCreateSessionBlocker({
+			ephemeral,
+			selectedRepositoryId,
+			createRepositoryIfMissing,
+			selectedHostTarget,
+			allowedHostTargets: selectableHostTargets,
+			selectedFleetHostId,
+			repositoryCount: repositories.length,
+			repositoryCreationAvailable: allowRepositoryCreation
+		})
+	);
+
+	function handleOpenChange(value: boolean) {
+		if (!value) onclose?.();
+	}
+
+	function resetForm() {
+		if (defaultHostTarget) selectedHostTarget = defaultHostTarget;
+		selectedRepositoryId = '';
+		checkoutRef = '';
+		ephemeral = false;
+		createRepositoryIfMissing = false;
+		selectedFleetHostId = defaultFleetHostId;
+	}
+
+	$effect(() => {
+		if (!allowEphemeral && ephemeral) ephemeral = false;
+	});
+
+	$effect(() => {
+		if (!allowRepositoryCreation || repositories.length > 0) createRepositoryIfMissing = false;
+	});
+
+	$effect(() => {
+		if (!isSelectableFleetHost(fleetHosts, selectedFleetHostId)) {
+			selectedFleetHostId = defaultFleetHostId;
+		}
+	});
+
+	$effect(() => {
+		if (!allowedHostTargets.includes(selectedHostTarget)) {
+			if (defaultHostTarget) selectedHostTarget = defaultHostTarget;
+		}
+	});
+
+	$effect(() => {
+		if (selectedHostTarget === 'fleet' && !hasOnlineFleetHosts) {
+			if (defaultHostTarget) selectedHostTarget = defaultHostTarget;
+		}
+	});
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		if (!canStartSession) return;
+
+		let hostTarget: CodeSessionCreateInput['hostTarget'];
+		if (selectedHostTarget === 'cloud') {
+			hostTarget = { kind: 'cloud' };
+		} else if (selectedHostTarget === 'local') {
+			hostTarget = { kind: 'host', hostId: 'local' };
+		} else {
+			// fleet — use the real hostId the user selected
+			hostTarget = { kind: 'host', hostId: selectedFleetHostId };
+		}
+
+		// Built by the pure helper so the contract — including that the seed
+		// survives the trip — is pinned by a test rather than by this component.
+		const input: CodeSessionCreateInput = buildCreateSessionInput({
+			hostTarget,
+			ephemeral,
+			selectedRepositoryId,
+			createRepositoryIfMissing,
+			checkoutRef,
+			seed
+		});
+
+		await oncreate?.(input);
+		if (!createError) {
+			resetForm();
+		}
+	}
+
+	const hostOptions: Array<{ value: HostTargetOption; label: string; description: string }> = [
+		{
+			value: 'cloud',
+			label: 'Cloud sandbox',
+			description: 'Runs in a managed cloud environment. Snapshot execution — re-runnable commands.'
+		},
+		{
+			value: 'local',
+			label: 'Local machine',
+			description: 'Runs on your local machine. Full interactive terminal.'
+		},
+		{
+			value: 'fleet',
+			label: 'Connected machine',
+			description: 'Runs on a paired fleet machine. Full interactive terminal.'
+		}
+	];
+	const visibleHostOptions = $derived(
+		hostOptions.filter((option) => allowedHostTargets.includes(option.value))
+	);
+</script>
+
+<!--
+	CreateSessionDialog — host-target picker with repository + ref fields.
+	No internal jargon. Destructive actions confirm with consequences stated.
+-->
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-lg">
+		<Dialog.Header>
+			<Dialog.Title>New code session</Dialog.Title>
+			<Dialog.Description>
+				Choose where to run your session and which repository to clone.
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if seed}
+			<!--
+				Shown, not hidden: the person needs to see which task this session will
+				be started for before they commit a sandbox to it.
+			-->
+			<div class="rounded-lg border bg-muted/40 p-3">
+				<p class="text-xs text-muted-foreground">Working on</p>
+				<p class="mt-1 font-medium leading-snug">{seed.title}</p>
+				{#if seed.body}
+					<p class="mt-1 text-sm text-muted-foreground line-clamp-3">{seed.body}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<form onsubmit={handleSubmit} class="space-y-5 pt-2">
+			<!-- Host target picker -->
+			<!--
+				A real radio group. These three radios previously sat in a bare
+				<div> under a <Label> that labelled nothing, so assistive tech
+				announced three orphaned controls with no group name.
+			-->
+			<div class="space-y-2" role="radiogroup" aria-labelledby="host-target-label">
+				<Label id="host-target-label">Where to run</Label>
+				<div class="grid gap-2">
+					{#each visibleHostOptions as opt}
+						{@const isFleet = opt.value === 'fleet'}
+						{@const fleetDisabled = isFleet && !hasOnlineFleetHosts}
+						<label
+							class={[
+								'flex items-start gap-3 rounded-lg border p-3 transition-colors',
+								fleetDisabled
+									? 'cursor-not-allowed opacity-60'
+									: 'cursor-pointer hover:bg-muted/40',
+								selectedHostTarget === opt.value ? 'border-primary bg-primary/5' : ''
+							].join(' ')}
+						>
+							<input
+								type="radio"
+								name="hostTarget"
+								value={opt.value}
+								bind:group={selectedHostTarget}
+								disabled={fleetDisabled}
+								class="mt-0.5 accent-primary"
+							/>
+							<div class="flex-1 min-w-0">
+								<p class="font-medium leading-none">{opt.label}</p>
+								<p class="mt-1 text-sm text-muted-foreground">{opt.description}</p>
+								{#if isFleet && fleetHosts.length === 0}
+									<p class="mt-2 text-xs text-muted-foreground">
+										No machines are set up for code execution. Add one from Machines, then run:
+										<code class="font-mono">vibes fleet daemon --labels sandbox:code-execution</code
+										>
+									</p>
+								{:else if isFleet && !hasOnlineFleetHosts}
+									<p class="mt-2 text-xs text-muted-foreground">
+										No code-execution machines are online. Start a paired machine, then run:
+										<code class="font-mono">vibes fleet daemon --labels sandbox:code-execution</code
+										>
+									</p>
+								{/if}
+								{#if isFleet && selectedHostTarget === 'fleet' && fleetHosts.length > 0}
+									<!-- Machine picker shown inline when fleet is selected -->
+									<div class="mt-3">
+										<Select type="single" bind:value={selectedFleetHostId}>
+											<SelectTrigger class="w-full">
+												<!-- Same defect as the repository picker: `SelectValue` only
+												     knows the hostId, so the trigger kept reading as empty
+												     after a real choice. Fixed here too rather than left for
+												     the next person to rediscover on a machine that has
+												     fleet hosts to select. -->
+												{selectedFleetHost?.name ?? 'Choose a machine…'}
+											</SelectTrigger>
+											<SelectContent>
+												{#each fleetHosts as host}
+													<SelectItem value={host.hostId} disabled={!host.online}>
+														{host.name}
+														{#if !host.online}
+															<span class="ml-1 text-xs text-muted-foreground">(Offline)</span>
+														{/if}
+													</SelectItem>
+												{/each}
+											</SelectContent>
+										</Select>
+									</div>
+								{/if}
+							</div>
+						</label>
+					{/each}
+				</div>
+			</div>
+
+			{#if allowEphemeral}
+			<!-- Ephemeral toggle -->
+			<div class="flex items-center gap-3">
+				<input
+					id="ephemeral-toggle"
+					type="checkbox"
+					bind:checked={ephemeral}
+					class="accent-primary"
+				/>
+				<Label for="ephemeral-toggle" class="cursor-pointer">
+					Ephemeral workspace
+					<span class="ml-1 text-xs text-muted-foreground">(no repository — scratch space)</span>
+				</Label>
+			</div>
+			{/if}
+
+			{#if !ephemeral}
+				<!-- Repository selector -->
+				<div class="space-y-2">
+					<Label for="repo-select">Repository</Label>
+					{#if repositories.length > 0}
+						<SearchSelect
+							id="repo-select"
+							label="Repository"
+							options={repositories.map((repo) => ({
+								value: repo.id,
+								label: repo.name,
+								description: repo.description,
+								group: repo.group
+							}))}
+							bind:value={selectedRepositoryId}
+							placeholder="Select a repository…"
+							searchPlaceholder="Search repositories…"
+							emptyMessage="No repositories found"
+							disabled={creating}
+						/>
+					{:else}
+						<div class="rounded-md border border-dashed border-border px-3 py-3 text-sm">
+							<p class="font-medium text-foreground">No repositories available</p>
+							{#if allowRepositoryCreation}
+								<label class="mt-2 flex cursor-pointer items-start gap-2">
+									<input
+										type="checkbox"
+										bind:checked={createRepositoryIfMissing}
+										class="mt-0.5 accent-primary"
+									/>
+									<span>
+										Create a repository when this assignment starts
+										<span class="mt-1 block text-xs text-muted-foreground">
+											Your project visibility and repository plan still apply.
+										</span>
+									</span>
+								</label>
+							{:else}
+								<p class="mt-1 text-xs text-muted-foreground">
+									Use an ephemeral workspace for scratch work, or create a git.vibes.dev repository
+									before starting a repository-backed session.
+								</p>
+							{/if}
+							{#if repositoryCreateHref}
+								<Button
+									href={repositoryCreateHref}
+									size="sm"
+									variant="outline"
+									class="mt-3 h-8 gap-1 text-xs"
+								>
+									<Icon icon="lucide:external-link" class="size-3.5" aria-hidden="true" />
+									{repositoryCreateLabel}
+								</Button>
+							{/if}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Branch/ref applies only to a repository that already exists. -->
+				{#if repositories.length > 0}
+					<div class="space-y-2">
+						<Label for="ref-input">
+							Branch or commit
+							<span class="ml-1 text-xs text-muted-foreground">(optional)</span>
+						</Label>
+						<Input
+							id="ref-input"
+							type="text"
+							placeholder={selectedRepo?.defaultBranch ?? 'main'}
+							bind:value={checkoutRef}
+						/>
+					</div>
+				{/if}
+			{/if}
+
+			{#if createError}
+				<!-- role="alert": a failed create used to render silently to assistive tech. -->
+				<div
+					role="alert"
+					class="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive"
+				>
+					<Icon icon="lucide:circle-x" class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+					{createError}
+				</div>
+			{/if}
+
+			{#if submitBlocker && !creating}
+				<!--
+					Say WHY "Start session" is unavailable. A disabled button with no
+					explanation is a dead end, and the worst case — an empty
+					repository list — is exactly when the user most needs to be told
+					where to go instead.
+				-->
+				<p
+					id="create-session-blocker"
+					class="flex items-start gap-2 text-sm text-muted-foreground"
+					role="status"
+					aria-live="polite"
+				>
+					<Icon icon="lucide:info" class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+					{submitBlocker.message}
+				</p>
+			{/if}
+
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={onclose} disabled={creating}>
+					Cancel
+				</Button>
+				<Button
+					type="submit"
+					disabled={creating || !canStartSession}
+					aria-describedby={submitBlocker && !creating ? 'create-session-blocker' : undefined}
+				>
+					{#if creating}
+						<Icon icon="lucide:loader-2" class="mr-2 size-4 animate-spin" aria-hidden="true" />
+						Starting…
+					{:else}
+						<Icon icon="lucide:play" class="mr-2 size-4" aria-hidden="true" />
+						{submitLabel}
+					{/if}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/svelte/components/CreateSessionDialog.svelte.d.ts

@@ -0,0 +1,57 @@
+import type { CodeSessionCreateInput, CodeSessionSeed } from '@vibesdotdev/code-sessions';
+export type HostTargetOption = 'local' | 'fleet' | 'cloud';
+export interface FleetHostOption {
+    hostId: string;
+    name: string;
+    online: boolean;
+}
+export interface CreateSessionDialogProps {
+    open?: boolean;
+    /**
+     * Task this session is being started for, when the user got here from one.
+     *
+     * Reuses the platform's existing `CodeSessionSeed` contract rather than a
+     * web-only shape: the work-items TUI already creates sessions with
+     * `{ source: 'work-item', title, ref }`, the platform threads it into the
+     * sandbox as `VIBES_SEED_*`, and the session record persists it verbatim.
+     * A second convention here would mean a session started from the web could
+     * not be traced back the way one started from the TUI can.
+     */
+    seed?: CodeSessionSeed;
+    /** Called when the user submits the form; parent handles the actual create call. */
+    oncreate?: (input: CodeSessionCreateInput) => void | Promise<void>;
+    /** Called when the dialog is closed. */
+    onclose?: () => void;
+    /** Repository options to populate the picker. */
+    repositories?: Array<{
+        id: string;
+        name: string;
+        defaultBranch?: string | null;
+        description?: string | null;
+        group?: string;
+    }>;
+    /** Whether the create action is in progress. */
+    creating?: boolean;
+    /** Configuration-only embeddings may continue to a separate dispatch step. */
+    submitLabel?: string;
+    /** Error from a failed create attempt. */
+    createError?: string | null;
+    /** Optional URL for creating a repository in the owning forge surface. */
+    repositoryCreateHref?: string;
+    repositoryCreateLabel?: string;
+    /** Hide scratch mode when the caller requires a repository-backed outcome. */
+    allowEphemeral?: boolean;
+    /** Let the user explicitly request repository provisioning at the caller's submit boundary. */
+    allowRepositoryCreation?: boolean;
+    /** Execution targets the embedding surface can actually provision. */
+    allowedHostTargets?: HostTargetOption[];
+    /**
+     * Fleet machines available for code execution (labeled sandbox:code-execution).
+     * When empty the "Fleet host" radio is disabled and an onboarding hint is shown.
+     */
+    fleetHosts?: FleetHostOption[];
+}
+declare const CreateSessionDialog: import("svelte").Component<CreateSessionDialogProps, {}, "">;
+type CreateSessionDialog = ReturnType<typeof CreateSessionDialog>;
+export default CreateSessionDialog;
+//# sourceMappingURL=CreateSessionDialog.svelte.d.ts.map

package/dist/svelte/components/CreateSessionDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateSessionDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CreateSessionDialog.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE1F,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,wBAAwB;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnE,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,YAAY,CAAC,EAAE,KAAK,CAAC;QACpB,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IACH,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,0EAA0E;IAC1E,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+FAA+F;IAC/F,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;CAC/B;AAqWF,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}