src/lib/components/3d/elements/compute/modal/AISessionConnectionModal.svelte

<script lang="ts">
	import * as Dialog from "@/components/ui/dialog";
	import { Button } from "@/components/ui/button";
	import * as Card from "@/components/ui/card";
	import { Badge } from "@/components/ui/badge";
	import { Input } from "@/components/ui/input";
	import { Label } from "@/components/ui/label";
	import * as Alert from "@/components/ui/alert";
	import { remoteComputeManager } from "$lib/elements/compute//RemoteComputeManager.svelte";
	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
	import type { AISessionConfig } from "$lib/elements/compute//RemoteComputeManager.svelte";
	import { settings } from "$lib/runes/settings.svelte";
	import { toast } from "svelte-sonner";

	interface Props {
		workspaceId: string;
		open: boolean;
		compute: RemoteCompute;
	}

	let { open = $bindable(), compute, workspaceId }: Props = $props();

	let isConnecting = $state(false);
	let sessionId = $state("");
	let policyPath = $state("./checkpoints/act_so101_beyond");
	let cameraNames = $state("front");
	let useProvidedWorkspace = $state(false);

	// Auto-generate session ID when modal opens
	$effect(() => {
		if (open && compute && !sessionId) {
			sessionId = `${compute.id}-session-${Date.now()}`;
		}
	});

	async function handleCreateSession() {
		if (!compute) return;

		if (!sessionId.trim() || !policyPath.trim()) {
			toast.error("Please fill in all required fields");
			return;
		}

		isConnecting = true;
		try {
			const cameras = cameraNames
				.split(",")
				.map((name) => name.trim())
				.filter((name) => name);
			if (cameras.length === 0) {
				cameras.push("front");
			}

			const config: AISessionConfig = {
				sessionId: sessionId.trim(),
				policyPath: policyPath.trim(),
				cameraNames: cameras,
				transportServerUrl: settings.transportServerUrl,
				workspaceId: useProvidedWorkspace ? workspaceId : undefined
			};

			const result = await remoteComputeManager.createSession(compute.id, config);
			if (result.success) {
				toast.success(`Inference Session created: ${sessionId}`);
				open = false;
			} else {
				toast.error(`Failed to create session: ${result.error}`);
			}
		} catch (error) {
			console.error("Session creation error:", error);
			toast.error("Failed to create session");
		} finally {
			isConnecting = false;
		}
	}

	async function handleStartSession() {
		if (!compute) return;

		isConnecting = true;
		try {
			const result = await remoteComputeManager.startSession(compute.id);
			if (result.success) {
				toast.success("Inference Session started");
			} else {
				toast.error(`Failed to start session: ${result.error}`);
			}
		} catch (error) {
			console.error("Session start error:", error);
			toast.error("Failed to start session");
		} finally {
			isConnecting = false;
		}
	}

	async function handleStopSession() {
		if (!compute) return;

		isConnecting = true;
		try {
			const result = await remoteComputeManager.stopSession(compute.id);
			if (result.success) {
				toast.success("Inference Session stopped");
			} else {
				toast.error(`Failed to stop session: ${result.error}`);
			}
		} catch (error) {
			console.error("Session stop error:", error);
			toast.error("Failed to stop session");
		} finally {
			isConnecting = false;
		}
	}

	async function handleDeleteSession() {
		if (!compute) return;

		isConnecting = true;
		try {
			const result = await remoteComputeManager.deleteSession(compute.id);
			if (result.success) {
				toast.success("Inference Session deleted");
			} else {
				toast.error(`Failed to delete session: ${result.error}`);
			}
		} catch (error) {
			console.error("Session delete error:", error);
			toast.error("Failed to delete session");
		} finally {
			isConnecting = false;
		}
	}
</script>

<Dialog.Root bind:open>
	<Dialog.Content
		class="max-h-[80vh] max-w-2xl overflow-y-auto border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
	>
		<Dialog.Header class="pb-3">
			<Dialog.Title
				class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100"
			>
				<span class="icon-[mdi--robot-outline] size-5 text-purple-500 dark:text-purple-400"></span>
				AI Compute Session - {compute.name || "No Compute Selected"}
			</Dialog.Title>
			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
				Configure and manage ACT model inference sessions for robot control
			</Dialog.Description>
		</Dialog.Header>

		<div class="space-y-4">
			<!-- Current Session Status -->
			<div
				class="flex items-center justify-between rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
			>
				<div class="flex items-center gap-2">
					<span class="icon-[mdi--brain] size-4 text-purple-500 dark:text-purple-400"></span>
					<span class="text-sm font-medium text-purple-700 dark:text-purple-300"
						>Session Status</span
					>
				</div>
				{#if compute.hasSession}
					<Badge variant="default" class="bg-purple-500 text-xs dark:bg-purple-600">
						{compute.statusInfo.statusText}
					</Badge>
				{:else}
					<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400"
						>No Session</Badge
					>
				{/if}
			</div>

			<!-- Current Session Details -->
			{#if compute.hasSession && compute.sessionData}
				<Card.Root
					class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5"
				>
					<Card.Header>
						<Card.Title
							class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200"
						>
							<span class="icon-[mdi--cog] size-4"></span>
							Current Session
						</Card.Title>
					</Card.Header>
					<Card.Content>
						<div class="space-y-3">
							<div
								class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
							>
								<div class="grid grid-cols-2 gap-2 text-xs">
									<div>
										<span class="font-medium text-purple-700 dark:text-purple-300">Session ID:</span
										>
										<span class="block text-purple-800 dark:text-purple-100"
											>{compute.sessionId}</span
										>
									</div>
									<div>
										<span class="font-medium text-purple-700 dark:text-purple-300">Status:</span>
										<span class="block text-purple-800 dark:text-purple-100"
											>{compute.statusInfo.emoji} {compute.statusInfo.statusText}</span
										>
									</div>
									<div>
										<span class="font-medium text-purple-700 dark:text-purple-300">Policy:</span>
										<span class="block text-purple-800 dark:text-purple-100"
											>{compute.sessionConfig?.policyPath}</span
										>
									</div>
									<div>
										<span class="font-medium text-purple-700 dark:text-purple-300">Cameras:</span>
										<span class="block text-purple-800 dark:text-purple-100"
											>{compute.sessionConfig?.cameraNames.join(", ")}</span
										>
									</div>
								</div>
							</div>

							<!-- Connection Details -->
							<div
								class="rounded-lg border border-green-300/30 bg-green-100/20 p-3 dark:border-green-500/30 dark:bg-green-900/20"
							>
								<div class="mb-2 text-sm font-medium text-green-700 dark:text-green-300">
									📡 Inference Server Connections
								</div>
								<div class="space-y-1 text-xs">
									<div>
										<span class="text-green-600 dark:text-green-400">Workspace:</span>
										<span class="ml-2 font-mono text-green-700 dark:text-green-200"
											>{compute.sessionData.workspace_id}</span
										>
									</div>
									{#each Object.entries(compute.sessionData.camera_room_ids) as [camera, roomId]}
										<div>
											<span class="text-green-600 dark:text-green-400">📹 {camera}:</span>
											<span class="ml-2 font-mono text-green-700 dark:text-green-200">{roomId}</span
											>
										</div>
									{/each}
									<div>
										<span class="text-green-600 dark:text-green-400">📥 Joint Input:</span>
										<span class="ml-2 font-mono text-green-700 dark:text-green-200"
											>{compute.sessionData.joint_input_room_id}</span
										>
									</div>
									<div>
										<span class="text-green-600 dark:text-green-400">📤 Joint Output:</span>
										<span class="ml-2 font-mono text-green-700 dark:text-green-200"
											>{compute.sessionData.joint_output_room_id}</span
										>
									</div>
								</div>
							</div>

							<!-- Session Controls -->
							<div class="flex gap-2">
								{#if compute.canStart}
									<Button
										variant="default"
										size="sm"
										onclick={handleStartSession}
										disabled={isConnecting}
										class="bg-green-500 text-xs hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
									>
										{#if isConnecting}
											<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
											Starting...
										{:else}
											<span class="icon-[mdi--play] mr-1 size-3"></span>
											Start Inference
										{/if}
									</Button>
								{/if}
								{#if compute.canStop}
									<Button
										variant="secondary"
										size="sm"
										onclick={handleStopSession}
										disabled={isConnecting}
										class="text-xs disabled:opacity-50"
									>
										{#if isConnecting}
											<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
											Stopping...
										{:else}
											<span class="icon-[mdi--stop] mr-1 size-3"></span>
											Stop Inference
										{/if}
									</Button>
								{/if}
								<Button
									variant="destructive"
									size="sm"
									onclick={handleDeleteSession}
									disabled={isConnecting}
									class="text-xs disabled:opacity-50"
								>
									{#if isConnecting}
										<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
										Deleting...
									{:else}
										<span class="icon-[mdi--delete] mr-1 size-3"></span>
										Delete Session
									{/if}
								</Button>
							</div>
						</div>
					</Card.Content>
				</Card.Root>
			{/if}

			<!-- Create New Session -->
			{#if !compute.hasSession}
				<Card.Root
					class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5"
				>
					<Card.Header>
						<Card.Title
							class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200"
						>
							<span class="icon-[mdi--plus-circle] size-4"></span>
							Create Inference Session
						</Card.Title>
					</Card.Header>
					<Card.Content>
						<div class="space-y-4">
							<div class="grid grid-cols-2 gap-4">
								<div class="space-y-2">
									<Label for="sessionId" class="text-purple-700 dark:text-purple-300"
										>Session ID</Label
									>
									<Input
										id="sessionId"
										bind:value={sessionId}
										placeholder="my-session-01"
										class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
									/>
								</div>
								<div class="space-y-2">
									<Label for="policyPath" class="text-purple-700 dark:text-purple-300"
										>Policy Path</Label
									>
									<Input
										id="policyPath"
										bind:value={policyPath}
										placeholder="./checkpoints/act_so101_beyond"
										class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
									/>
								</div>
							</div>

							<div class="grid grid-cols-2 gap-4">
								<div class="space-y-2">
									<Label for="cameraNames" class="text-purple-700 dark:text-purple-300"
										>Camera Names</Label
									>
									<Input
										id="cameraNames"
										bind:value={cameraNames}
										placeholder="front, wrist, overhead"
										class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
									/>
									<p class="text-xs text-slate-600 dark:text-slate-400">
										Comma-separated camera names
									</p>
								</div>
								<div class="space-y-2">
									<Label for="transportServerUrl" class="text-purple-700 dark:text-purple-300"
										>Transport Server URL</Label
									>
									<Input
										id="transportServerUrl"
										value={settings.transportServerUrl}
										disabled
										placeholder="http://localhost:8000"
										class="cursor-not-allowed border-slate-300 bg-slate-50 text-slate-900 opacity-60 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
										title="Change this value in the settings panel"
									/>
									<p class="text-xs text-slate-600 dark:text-slate-400">
										Configure in settings panel
									</p>
								</div>
							</div>

							<div class="flex items-center space-x-2">
								<input
									type="checkbox"
									id="useWorkspace"
									bind:checked={useProvidedWorkspace}
									class="rounded border-slate-300 bg-slate-50 dark:border-slate-600 dark:bg-slate-800"
								/>
								<Label for="useWorkspace" class="text-sm text-purple-700 dark:text-purple-300">
									Use current workspace ({workspaceId})
								</Label>
							</div>

							<Alert.Root>
								<span class="icon-[mdi--information] size-4"></span>
								<Alert.Description>
									This will create a new ACT inference session with dedicated rooms for camera
									inputs, joint inputs, and joint outputs in the inference server communication
									system.
								</Alert.Description>
							</Alert.Root>

							<Button
								variant="default"
								onclick={handleCreateSession}
								disabled={isConnecting || !sessionId.trim() || !policyPath.trim()}
								class="w-full bg-purple-500 hover:bg-purple-600 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
							>
								{#if isConnecting}
									<span class="icon-[mdi--loading] mr-2 size-4 animate-spin"></span>
									Creating Session...
								{:else}
									<span class="icon-[mdi--rocket-launch] mr-2 size-4"></span>
									Create Inference Session
								{/if}
							</Button>
						</div>
					</Card.Content>
				</Card.Root>
			{/if}

			<!-- Quick Info -->
			<div
				class="rounded border border-slate-300 bg-slate-100/30 p-2 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-800/30 dark:text-slate-500"
			>
				<span class="icon-[mdi--information] mr-1 size-3"></span>
				Inference Sessions require a trained ACT model and create dedicated communication rooms for video
				inputs, robot joint states, and control outputs in the inference server system.
			</div>
		</div>
	</Dialog.Content>
</Dialog.Root>