@vibesdotdev/platform 0.0.0-stage → 1.0.0-rc.1

package/dist/svelte/fleets/AddMachineDialog.svelte

@@ -0,0 +1,633 @@
+<script lang="ts">
+	import { settle } from '@vibesdotdev/kernel';
+	/**
+	 * AddMachineDialog — multi-step "Add a machine" modal.
+	 *
+	 * Steps:
+	 *   choose   → user picks how to add
+	 *   install  → fill name/id, submit → caller returns {hostId, token}
+	 *   waiting  → shows daemon command; watches `hosts` (when the caller passes
+	 *              it — MachinesPanel refreshes it on an interval) and flips to
+	 *              "success" automatically once the enrolled host reports
+	 *              online/active. Without `hosts`, falls back to a manual
+	 *              "I ran it — check now" that re-triggers `onDone` (a refresh),
+	 *              never a bare self-assert.
+	 *   success  → machine connected (verified, when `hosts` was supplied)
+	 *   direct   → connect by address (canAddDirect)
+	 *   pairing  → 6-digit code (canPair)
+	 *
+	 * Capability gates: canEnroll / canAddDirect / canPair control which options
+	 * are shown in the "choose" step. At least one must be true or there's nothing
+	 * to show (callers must guard before opening).
+	 *
+	 * The caller provides action callbacks (register, addDirect, pairByCode) that
+	 * bridge to whichever backend the host app uses (SvelteKit action, fetch, etc.).
+	 *
+	 * Uses vibeskit Dialog, Input, Label, Button — never raw HTML role="dialog".
+	 */
+	import * as Dialog from '@vibesdotdev/kit/components/ui/dialog';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { slugify,daemonCommand,addMachineOptions } from './helpers.js';
+	import type { AddMachineDialogProps } from './types.js';
+
+	let {
+		open=$bindable(false),
+		onClose,
+		hosts=[],
+		canEnroll=false,
+		canAddDirect=false,
+		canPair=false,
+		platformHostsUrl=null,
+		register,
+		addDirect,
+		pairByCode,
+		onDone
+	}: AddMachineDialogProps=$props();
+
+	// The gated option list for the "choose" step — single source of truth in
+	// helpers.ts so it's unit-testable without mounting the component.
+	const options=$derived(
+		addMachineOptions({ canEnroll,canAddDirect,canPair,platformHostsUrl })
+	);
+
+	type DialogStep='choose'|'install'|'waiting'|'success'|'direct'|'pairing';
+	let step=$state<DialogStep>('choose');
+
+	// Install flow
+	let installName=$state('');
+	let installHostId=$state('');
+	let installHostIdEdited=$state(false);
+	let installSubmitting=$state(false);
+	let installError=$state('');
+	let enrolledHostId=$state('');
+	let enrolledToken=$state('');
+	let copied=$state<'token'|'command'|null>(null);
+	/** The copy the browser refused (clipboard permission); shown, never swallowed. */
+	let copyError=$state('');
+	let copyBlocked=$state<'token'|'command'|null>(null);
+
+	// The copy feedback clears after a moment. A browser UI flash is owned by
+	// this component: the effect's cleanup clears its timer when the feedback
+	// changes or the dialog unmounts, so no timer outlives the component.
+	$effect(() => {
+		if(copied===null&&copyBlocked===null) return;
+		const timer=setTimeout(() => {
+			copied=null;
+			copyBlocked=null;
+		},1600);
+		return () => clearTimeout(timer);
+	});
+	let tokenRevealed=$state(false);
+
+	// Direct flow
+	let directName=$state('');
+	let directAddress=$state('');
+	let directId=$state('');
+	let directIdEdited=$state(false);
+	let directSubmitting=$state(false);
+	let directError=$state('');
+
+	// Pairing flow
+	let pairingAddress=$state('');
+	let pairingCode=$state('');
+	let pairingLoading=$state(false);
+	let pairingError=$state('');
+
+	// Slug auto-fill
+	$effect(() => {
+		if(!installHostIdEdited&&installName) {
+			installHostId=slugify(installName);
+		}
+	});
+
+	$effect(() => {
+		if(!directIdEdited&&directName) {
+			directId=slugify(directName);
+		}
+	});
+
+	// Watch the caller's live host list while waiting: the moment the
+	// just-enrolled host reports online/active, flip to the (now truthfully
+	// verified) success step. MachinesPanel already re-fetches `hosts` on a
+	// 15s interval, so this "just works" without the dialog polling itself.
+	$effect(() => {
+		if(step!=='waiting'||!enrolledHostId) return;
+		const match=hosts.find((h) => h.hostId===enrolledHostId);
+		if(match&&(match.displayStatus==='online'||match.displayStatus==='active')) {
+			step='success';
+		}
+	});
+
+	function reset() {
+		step='choose';
+		installName='';
+		installHostId='';
+		installHostIdEdited=false;
+		installSubmitting=false;
+		installError='';
+		enrolledHostId='';
+		enrolledToken='';
+		copied=null;
+		copyBlocked=null;
+		tokenRevealed=false;
+		directName='';
+		directAddress='';
+		directId='';
+		directIdEdited=false;
+		directSubmitting=false;
+		directError='';
+		pairingAddress='';
+		pairingCode='';
+		pairingAddress='';
+		pairingLoading=false;
+		pairingError='';
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if(!newOpen) {
+			reset();
+			onClose();
+		}
+	}
+
+	async function handleInstallSubmit() {
+		if(!register) return;
+		if(!installName.trim()||!installHostId.trim()) return;
+		installSubmitting=true;
+		installError='';
+		try {
+			const operation=await settle(async () => {
+				const result=await register({ name: installName.trim(),hostId: installHostId.trim() });
+				enrolledHostId=result.hostId;
+				enrolledToken=result.token;
+				step='waiting';
+			});
+			if(!operation.ok) {
+				const err=operation.cause;
+				installError=err instanceof Error? err.message:'Registration failed. Please try again.';
+			}
+		} finally {
+			installSubmitting=false;
+		}
+	}
+
+	async function handleDirectSubmit() {
+		if(!addDirect) return;
+		if(!directAddress.trim()) return;
+		directSubmitting=true;
+		directError='';
+		try {
+			const operation=await settle(async () => {
+				await addDirect({ name: directName.trim(),address: directAddress.trim(),id: directId });
+				open=false;
+				onClose();
+				onDone?.();
+			});
+			if(!operation.ok) {
+				const err=operation.cause;
+				directError=err instanceof Error? err.message:'Could not connect. Please try again.';
+			}
+		} finally {
+			directSubmitting=false;
+		}
+	}
+
+	async function handlePairingSubmit() {
+		if(!pairByCode) return;
+		if(pairingCode.length!==6) return;
+		pairingLoading=true;
+		pairingError='';
+		try {
+			const operation=await settle(async () => {
+				const result=await pairByCode(pairingCode.trim(),pairingAddress.trim()||undefined);
+				enrolledHostId=result.hostId;
+				step='waiting';
+			});
+			if(!operation.ok) {
+				const err=operation.cause;
+				pairingError=
+					err instanceof Error
+						? err.message
+						:'No machine found with that code. Make sure the machine is nearby and the daemon is running.';
+			}
+		} finally {
+			pairingLoading=false;
+		}
+	}
+
+	async function copyText(value: string,which: 'token'|'command') {
+		const operation=await settle(async () => {
+			await navigator.clipboard.writeText(value);
+			copyBlocked=null;
+			copyError='';
+			copied=which;
+		});
+		if(!operation.ok) {
+			const error=operation.cause;
+			// Clipboard blocked: say so on the button; the text stays selectable.
+			copyError=error instanceof Error? error.message:String(error);
+			copied=null;
+			copyBlocked=which;
+		}
+	}
+
+	function handleDone() {
+		reset();
+		open=false;
+		onClose();
+		onDone?.();
+	}
+</script>
+
+{#if copyError}<p role="status">{copyError}</p>{/if}
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="max-w-lg">
+		<Dialog.Header class="border-b pb-4">
+			<div class="flex items-center gap-2">
+				{#if step !== 'choose'}
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-auto p-1 text-muted-foreground hover:text-foreground"
+						onclick={() => (step = 'choose')}
+						aria-label="Back"
+					>
+						<Icon icon="lucide:arrow-left" class="size-4" />
+					</Button>
+				{/if}
+				<Dialog.Title>
+					{#if step === 'choose'}
+						Add a machine
+					{:else if step === 'install'}
+						Install on this machine
+					{:else if step === 'waiting'}
+						Waiting for machine to connect
+					{:else if step === 'success'}
+						Machine connected
+					{:else if step === 'direct'}
+						Connect by address
+					{:else if step === 'pairing'}
+						Enter pairing code
+					{/if}
+				</Dialog.Title>
+			</div>
+		</Dialog.Header>
+
+		<div class="p-6">
+			<!-- ================================================================
+			     STEP: choose
+			     ================================================================ -->
+			{#if step === 'choose'}
+				{#snippet tileBody(icon: string, title: string, description: string)}
+					<div class="rounded-lg bg-primary/10 p-2.5 transition-colors group-hover:bg-primary/20">
+						<Icon {icon} class="size-5 text-primary" />
+					</div>
+					<div class="min-w-0">
+						<p class="font-medium">{title}</p>
+						<p class="mt-0.5 whitespace-normal text-sm text-muted-foreground">{description}</p>
+					</div>
+				{/snippet}
+				{@const tileClass =
+					'group h-auto w-full items-start justify-start gap-4 whitespace-normal rounded-xl border p-4 text-left font-normal shadow-none hover:border-primary hover:bg-accent'}
+				<p class="mb-5 text-sm text-muted-foreground">
+					Choose how you want to add a machine to your fleet.
+				</p>
+				<div class="grid gap-3">
+					{#each options as option (option)}
+						{#if option === 'install'}
+							<Button variant="outline" class={tileClass} onclick={() => (step = 'install')}>
+								{@render tileBody(
+									'lucide:download',
+									'Install on a machine you own',
+									'Get a one-line command to run on the machine — connects in under a minute.'
+								)}
+							</Button>
+						{:else if option === 'direct'}
+							<Button variant="outline" class={tileClass} onclick={() => (step = 'direct')}>
+								{@render tileBody(
+									'lucide:link',
+									'Connect by address',
+									'Already have the daemon running? Enter its address directly.'
+								)}
+							</Button>
+						{:else if option === 'pairing'}
+							<Button variant="outline" class={tileClass} onclick={() => (step = 'pairing')}>
+								{@render tileBody(
+									'lucide:hash',
+									'Pairing code',
+									"Enter the 6-digit code shown on a nearby machine's daemon."
+								)}
+							</Button>
+						{:else if option === 'provision'}
+							<Button variant="outline" class={tileClass} href={`${platformHostsUrl}/create`}>
+								{@render tileBody(
+									'lucide:cloud',
+									'Provision a cloud VM',
+									'Spin up a new machine on the Platform — we manage the VM for you.'
+								)}
+							</Button>
+						{/if}
+					{/each}
+				</div>
+
+			<!-- ================================================================
+			     STEP: install — fill name/id, submit
+			     ================================================================ -->
+			{:else if step === 'install'}
+				<p class="mb-5 text-sm text-muted-foreground">
+					Give this machine a name. You'll get a one-line command to paste into a terminal on that
+					machine — it installs and connects the daemon automatically.
+				</p>
+
+				{#if installError}
+					<div
+						class="mb-4 flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive"
+					>
+						<Icon icon="lucide:circle-alert" class="size-4 shrink-0" />
+						{installError}
+					</div>
+				{/if}
+
+				<div class="space-y-4">
+					<div class="space-y-1.5">
+						<Label for="fleet-install-name">Machine name</Label>
+						<Input
+							id="fleet-install-name"
+							type="text"
+							placeholder="e.g. Studio Mini, Work Laptop"
+							bind:value={installName}
+						/>
+					</div>
+					<div class="space-y-1.5">
+						<Label for="fleet-install-id">
+							Machine ID
+							<span class="ml-1 text-xs font-normal text-muted-foreground"
+								>lowercase letters, numbers, hyphens</span
+							>
+						</Label>
+						<Input
+							id="fleet-install-id"
+							type="text"
+							placeholder="e.g. studio-mini"
+							class="font-mono"
+							bind:value={installHostId}
+							oninput={() => (installHostIdEdited = true)}
+						/>
+					</div>
+					<div class="flex justify-end gap-2 pt-2">
+						<Button type="button" variant="outline" onclick={() => (step = 'choose')}>Back</Button>
+						<Button
+							type="button"
+							disabled={installSubmitting || !installName.trim() || !installHostId.trim()}
+							onclick={handleInstallSubmit}
+						>
+							{#if installSubmitting}
+								<Icon icon="lucide:loader-circle" class="mr-2 size-4 animate-spin" />
+								Generating...
+							{:else}
+								Get install command
+							{/if}
+						</Button>
+					</div>
+				</div>
+
+			<!-- ================================================================
+			     STEP: waiting — show daemon command, poll
+			     ================================================================ -->
+			{:else if step === 'waiting'}
+				<div class="space-y-5">
+					<div class="rounded-xl bg-muted px-4 py-4">
+						<p class="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+							Run this command on your machine
+						</p>
+						<div class="flex items-start gap-2">
+							<code class="flex-1 break-all font-mono text-sm">
+								{enrolledHostId && enrolledToken
+									? daemonCommand(enrolledHostId, enrolledToken)
+									: ''}
+							</code>
+							<Button
+								variant="ghost"
+								size="sm"
+								class="ml-1 h-auto shrink-0 p-1 text-muted-foreground hover:text-foreground"
+								onclick={() =>
+									enrolledHostId &&
+									enrolledToken &&
+									copyText(daemonCommand(enrolledHostId, enrolledToken), 'command')}
+								title="Copy command"
+							>
+								{#if copied === 'command'}
+									<Icon icon="lucide:check" class="size-4 text-emerald-500" />
+								{:else if copyBlocked === 'command'}
+									<Icon icon="lucide:clipboard-x" class="size-4 text-destructive" />
+								{:else}
+									<Icon icon="lucide:copy" class="size-4" />
+								{/if}
+							</Button>
+						</div>
+					</div>
+
+					<p class="text-xs text-muted-foreground">
+						The <code class="font-mono">--labels sandbox:code-execution</code> flag lets chat and code
+						sessions run commands on this machine. Omit it to monitor only.
+					</p>
+
+					<div class="flex items-center gap-3 text-sm text-muted-foreground">
+						<Icon icon="lucide:loader-circle" class="size-4 shrink-0 animate-spin" />
+						<span
+							>Waiting for <strong class="text-foreground">{enrolledHostId}</strong> to connect...</span
+						>
+					</div>
+
+					{#if enrolledToken}
+						<div>
+							<Button
+								variant="ghost"
+								size="sm"
+								class="h-auto p-0 text-xs font-normal text-muted-foreground hover:bg-transparent hover:text-foreground"
+								onclick={() => (tokenRevealed = !tokenRevealed)}
+								aria-expanded={tokenRevealed}
+							>
+								<Icon
+									icon="lucide:chevron-right"
+									class={`mr-1 size-3 transition-transform ${tokenRevealed ? 'rotate-90' : ''}`}
+								/>
+								One-time token (for manual use)
+							</Button>
+							{#if tokenRevealed}
+								<div class="mt-2 flex items-center gap-2 rounded-md border bg-muted px-3 py-2">
+									<code class="flex-1 break-all font-mono text-xs">{enrolledToken}</code>
+									<Button
+										variant="ghost"
+										size="sm"
+										class="h-auto shrink-0 p-1 text-muted-foreground hover:text-foreground"
+										onclick={() => copyText(enrolledToken, 'token')}
+										title="Copy token"
+									>
+										{#if copied === 'token'}
+											<Icon icon="lucide:check" class="size-3.5 text-emerald-500" />
+										{:else if copyBlocked === 'token'}
+											<Icon icon="lucide:clipboard-x" class="size-3.5 text-destructive" />
+										{:else}
+											<Icon icon="lucide:copy" class="size-3.5" />
+										{/if}
+									</Button>
+								</div>
+								<p class="mt-1 text-xs text-muted-foreground">
+									This token is valid for 24 hours and can only be used once.
+								</p>
+							{/if}
+						</div>
+					{/if}
+
+					<div class="flex justify-end gap-2">
+						<Button variant="outline" onclick={handleDone}>Done — I'll check back later</Button>
+						<Button
+							variant="secondary"
+							onclick={() => {
+								// Never self-assert success — trigger a refresh (onDone re-fetches
+								// hosts in MachinesPanel) and let the `hosts`-watching $effect above
+								// flip the step once the connection is actually verified.
+								onDone?.();
+							}}
+						>
+							<Icon icon="lucide:refresh-cw" class="mr-2 size-4" />
+							I ran it — check now
+						</Button>
+					</div>
+				</div>
+
+			<!-- ================================================================
+			     STEP: success
+			     ================================================================ -->
+			{:else if step === 'success'}
+				<div class="flex flex-col items-center py-4 text-center">
+					<div class="rounded-full bg-emerald-100 p-4 dark:bg-emerald-950">
+						<Icon
+							icon="lucide:check-circle"
+							class="size-10 text-emerald-600 dark:text-emerald-400"
+						/>
+					</div>
+					<h3 class="mt-4 text-lg font-semibold">Machine connected</h3>
+					<p class="mt-1 text-sm text-muted-foreground">
+						<strong>{enrolledHostId}</strong> is enrolled and reporting in. It shows as Online once
+						remote access is connected.
+					</p>
+					<div class="mt-6 flex gap-3">
+						<Button variant="outline" onclick={handleDone}>Done</Button>
+					</div>
+				</div>
+
+			<!-- ================================================================
+			     STEP: direct — connect by address
+			     ================================================================ -->
+			{:else if step === 'direct'}
+				{#if directError}
+					<div
+						class="mb-4 flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive"
+					>
+						<Icon icon="lucide:circle-alert" class="size-4 shrink-0" />
+						{directError}
+					</div>
+				{/if}
+				<div class="space-y-4">
+					<div class="space-y-1.5">
+						<Label for="fleet-direct-name">Name</Label>
+						<Input
+							id="fleet-direct-name"
+							type="text"
+							placeholder="e.g. NAS, Home Server"
+							bind:value={directName}
+						/>
+					</div>
+					<div class="space-y-1.5">
+						<Label for="fleet-direct-addr">Address</Label>
+						<Input
+							id="fleet-direct-addr"
+							type="text"
+							placeholder="e.g. 192.168.1.42:7777"
+							class="font-mono"
+							bind:value={directAddress}
+						/>
+					</div>
+					<div class="flex justify-end gap-2">
+						<Button type="button" variant="outline" onclick={() => (step = 'choose')}>Back</Button>
+						<Button
+							type="button"
+							disabled={directSubmitting || !directAddress.trim()}
+							onclick={handleDirectSubmit}
+						>
+							{#if directSubmitting}
+								<Icon icon="lucide:loader-circle" class="mr-2 size-4 animate-spin" />
+								Connecting...
+							{:else}
+								Save & connect
+							{/if}
+						</Button>
+					</div>
+				</div>
+
+			<!-- ================================================================
+			     STEP: pairing — 6-digit code
+			     ================================================================ -->
+			{:else if step === 'pairing'}
+				<p class="mb-5 text-sm text-muted-foreground">
+					On the machine you want to pair, run
+					<code class="font-mono text-xs">vibes fleet daemon</code>. It will display a 6-digit
+					code — enter the daemon address and code here.
+				</p>
+				{#if pairingError}
+					<div
+						class="mb-4 flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive"
+					>
+						<Icon icon="lucide:circle-alert" class="size-4 shrink-0" />
+						{pairingError}
+					</div>
+				{/if}
+				<div class="space-y-4">
+					<div class="space-y-2">
+						<Label for="pairing-address">Daemon address</Label>
+						<Input
+							id="pairing-address"
+							type="url"
+							placeholder="http://192.168.1.20:7331"
+							bind:value={pairingAddress}
+						/>
+					</div>
+					<Input
+						type="url"
+						placeholder="http://192.168.1.20:7331"
+						aria-label="Daemon address"
+						bind:value={pairingAddress}
+					/>
+					<Input
+						type="text"
+						maxlength={6}
+						inputmode="numeric"
+						placeholder="000000"
+						class="w-full text-center font-mono text-2xl tracking-widest"
+						bind:value={pairingCode}
+					/>
+					<div class="flex justify-end gap-2">
+						<Button variant="outline" onclick={() => (step = 'choose')}>Back</Button>
+						<Button
+							disabled={pairingCode.length !== 6 || pairingLoading}
+							onclick={handlePairingSubmit}
+						>
+							{#if pairingLoading}
+								<Icon icon="lucide:loader-circle" class="mr-2 size-4 animate-spin" />
+								Connecting...
+							{:else}
+								Connect
+							{/if}
+						</Button>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/svelte/fleets/AddMachineDialog.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { AddMachineDialogProps } from './types.ts';
+declare const AddMachineDialog: import("svelte").Component<AddMachineDialogProps, {}, "open">;
+type AddMachineDialog = ReturnType<typeof AddMachineDialog>;
+export default AddMachineDialog;
+//# sourceMappingURL=AddMachineDialog.svelte.d.ts.map

package/dist/svelte/fleets/AddMachineDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddMachineDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/fleets/AddMachineDialog.svelte.ts"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAuexD,QAAA,MAAM,gBAAgB,+DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}