@vibesdotdev/terminal-client 0.0.0-stage → 1.0.0-rc.3

package/dist/svelte/TerminalHostWorkspace.svelte

@@ -0,0 +1,264 @@
+<script lang="ts">
+	/**
+	 * <TerminalHostWorkspace> — the embeddable terminal experience.
+	 *
+	 * Host picker, session tabs, reconnect banner and the terminal itself, as
+	 * one component that fills whatever container it is given: a full page, a
+	 * dialog, or a side panel. The host app supplies the reachable hosts and a
+	 * session opener (dependency-injected transport); the workspace owns every
+	 * piece of terminal chrome so each surface looks and behaves the same.
+	 *
+	 * State lives in the rune-free `TerminalHostWorkspaceController`
+	 * (`./terminal-host-workspace.ts`); this file renders its snapshot.
+	 *
+	 * Styling is kit theme tokens only (`bg-background`, `border-border`, …), so
+	 * the workspace matches the surrounding app shell and theme.
+	 */
+	import { onDestroy, untrack, type Snippet } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Alert, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import { cn } from '@vibesdotdev/kit/utils';
+	import Terminal from './Terminal.svelte';
+	import HostPicker from './HostPicker.svelte';
+	import SessionTabs from './SessionTabs.svelte';
+	import ReconnectBanner from './ReconnectBanner.svelte';
+	import {
+		TerminalHostWorkspaceController,
+		terminalHostTabBanner,
+		type TerminalHostErrorDescriber,
+		type TerminalHostSessionOpener,
+		type TerminalHostWorkspaceLayout
+	} from './terminal-host-workspace.js';
+	import type { HostOption, TabSession, TerminalTheme } from './types.js';
+
+	interface Props {
+		/** Reachable hosts, in display order. */
+		hosts: HostOption[];
+		/** Opens a session on a host. The workspace never owns a transport. */
+		openSession: TerminalHostSessionOpener;
+		/** Deep-linked host id; an unknown id shows a "not reachable" notice and the picker. */
+		initialHostId?: string;
+		/** Deep-linked command: pre-filled in the picker, never run without an explicit click. */
+		initialCommand?: string;
+		/** Open on the initial host straight away (no picker) when no command is pre-filled. */
+		autoOpen?: boolean;
+		/** Observe mode for every session: output renders, keystrokes never reach the host. */
+		readonly?: boolean;
+		/** Density only — the workspace always fills its container. */
+		layout?: TerminalHostWorkspaceLayout;
+		/** Placeholder in the picker's command field. Blank opens the host's default shell. */
+		defaultCommand?: string;
+		/** Where "Add a machine" goes in the empty picker. */
+		addMachineHref?: string;
+		/** Host discovery failure copy; shown above the workspace. */
+		hostsError?: string;
+		hostsRefreshing?: boolean;
+		/** Retry host discovery. Shows a retry button next to `hostsError`. */
+		onRetryHosts?: () => void;
+		/** Replaces the picker when `hosts` is empty (e.g. a sign-in prompt). */
+		empty?: Snippet;
+		/** Extra toolbar actions (rendered at the end of the tab strip). */
+		actions?: Snippet;
+		/** Lock the grid (both required). */
+		cols?: number;
+		rows?: number;
+		theme?: TerminalTheme;
+		describeError?: TerminalHostErrorDescriber;
+		/** Accessible name of the workspace region. */
+		label?: string;
+		class?: string;
+	}
+
+	let {
+		hosts,
+		openSession,
+		initialHostId,
+		initialCommand,
+		autoOpen = false,
+		readonly = false,
+		layout = 'page',
+		defaultCommand = 'your shell',
+		addMachineHref,
+		hostsError = '',
+		hostsRefreshing = false,
+		onRetryHosts,
+		empty,
+		actions,
+		cols,
+		rows,
+		theme,
+		describeError,
+		label = 'Terminal',
+		class: className = ''
+	}: Props = $props();
+
+	const controller = untrack(
+		() =>
+			new TerminalHostWorkspaceController({
+				openSession: (request) => openSession(request),
+				readonly,
+				describeError: describeError ? (failure, host) => describeError(failure, host) : undefined
+			})
+	);
+	let view = $state(controller.snapshot);
+	const unsubscribe = controller.subscribe((next) => {
+		view = next;
+	});
+	untrack(() => controller.start({ hosts, initialHostId, initialCommand, autoOpen }));
+	$effect(() => controller.setHosts(hosts));
+	onDestroy(() => {
+		unsubscribe();
+		controller.dispose();
+	});
+
+	const lockedGrid = $derived(
+		cols !== undefined && rows !== undefined && cols > 0 && rows > 0 ? { cols, rows } : null
+	);
+	const activeTab = $derived(view.tabs.find((tab) => tab.key === view.activeKey));
+	const banner = $derived(terminalHostTabBanner(activeTab));
+	const stripTabs = $derived<TabSession[]>(
+		view.tabs.map((tab) => ({
+			id: tab.key,
+			command: tab.command ?? 'shell',
+			hostLabel: tab.hostLabel,
+			startedAt: 0,
+			detached: tab.status === 'reconnecting' || tab.status === 'failed',
+			exited: tab.status === 'exited'
+		}))
+	);
+	const lastGrid = new Map<string, { cols: number; rows: number }>();
+	const padding = $derived(layout === 'page' ? 'p-2 sm:p-3' : layout === 'dialog' ? 'p-2' : 'p-1');
+
+	function ready(key: string, dims: { cols: number; rows: number }): void {
+		const grid = lockedGrid ?? dims;
+		lastGrid.set(key, grid);
+		controller.terminalReady(key, grid);
+	}
+
+	function startOver(): void {
+		if (activeTab?.status === 'failed' && activeTab.session === null) {
+			controller.retry(activeTab.key, lastGrid.get(activeTab.key) ?? lockedGrid ?? { cols: 80, rows: 24 });
+			return;
+		}
+		controller.showPicker();
+	}
+</script>
+
+<section
+	class={cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden bg-background text-foreground', className)}
+	aria-label={label}
+	data-terminal-host-workspace
+	data-layout={layout}
+	data-picker-open={view.pickerOpen ? 'true' : 'false'}
+	data-active-status={activeTab?.status ?? 'none'}
+	data-banner-status={banner.status ?? 'none'}
+>
+	{#if view.tabs.length > 0 || actions}
+		<header class="flex shrink-0 items-stretch border-b border-border">
+			{#if view.tabs.length > 0}
+				<div class="-mb-px min-w-0 flex-1">
+					<SessionTabs
+						tabs={stripTabs}
+						activeId={view.activeKey}
+						onSelect={(key) => controller.select(key)}
+						onClose={(key) => controller.close(key)}
+						onNewTab={() => controller.showPicker()}
+					/>
+				</div>
+			{:else}
+				<div class="flex-1"></div>
+			{/if}
+			{#if actions}
+				<div class="flex shrink-0 items-center gap-2 px-2 py-1">{@render actions()}</div>
+			{/if}
+		</header>
+	{/if}
+
+	{#if hostsError}
+		<Alert class="shrink-0 rounded-none border-x-0 border-t-0" data-host-discovery-error>
+			<AlertDescription class="flex flex-wrap items-center justify-between gap-2">
+				<span>{hostsError}</span>
+				{#if onRetryHosts}
+					<Button variant="outline" size="sm" onclick={onRetryHosts} disabled={hostsRefreshing}>
+						{hostsRefreshing ? 'Refreshing…' : 'Retry'}
+					</Button>
+				{/if}
+			</AlertDescription>
+		</Alert>
+	{/if}
+
+	<div class="relative min-h-0 min-w-0 flex-1">
+		{#each view.tabs as tab (tab.key)}
+			{@const active = tab.key === view.activeKey}
+			<div
+				class={cn('absolute inset-0 flex min-h-0 flex-col', padding, !active && 'invisible')}
+				aria-hidden={!active}
+				data-terminal-tab={tab.key}
+				data-terminal-tab-status={tab.status}
+				data-terminal-tab-host={tab.hostId}
+			>
+				{#if tab.readonly}
+					<p class="mb-2 shrink-0 rounded-md border border-warning/40 bg-warning/10 px-3 py-1.5 text-xs text-warning" role="status">
+						Observe mode — input is disabled.
+					</p>
+				{/if}
+				<div class="min-h-0 flex-1">
+					<Terminal
+						session={tab.session}
+						{theme}
+						cols={lockedGrid?.cols}
+						rows={lockedGrid?.rows}
+						connectionState={tab.session ? 'live' : 'connecting'}
+						readonly={tab.readonly || tab.status !== 'live' || !tab.inputReady}
+						onReady={(dims) => ready(tab.key, dims)}
+						onInputReady={() => controller.inputReady(tab.key)}
+						onExit={(result) => controller.exited(tab.key, result.exitCode)}
+						onDisconnect={(reason) => controller.disconnected(tab.key, reason)}
+					/>
+				</div>
+				{#if active}
+					<ReconnectBanner
+						status={banner.status}
+						attempt={banner.attempt}
+						delayMs={banner.delayMs}
+						reason={banner.reason}
+						onNewSession={startOver}
+					/>
+				{/if}
+			</div>
+		{/each}
+
+		{#if view.pickerOpen}
+			<div
+				class={cn(
+					'absolute inset-0 z-10 flex items-center justify-center overflow-auto',
+					layout === 'panel' ? 'p-2' : 'p-4',
+					view.tabs.length > 0 && 'bg-background/80 backdrop-blur-sm'
+				)}
+				data-terminal-picker
+			>
+				<div class="flex w-full max-w-lg flex-col gap-3">
+					{#if view.requestedHostUnavailable}
+						<Alert variant="destructive" data-requested-host-unavailable>
+							<AlertDescription>The requested machine is not reachable. Pick another machine below.</AlertDescription>
+						</Alert>
+					{/if}
+					{#if hosts.length === 0 && empty}
+						{@render empty()}
+					{:else}
+						<HostPicker
+							{hosts}
+							preselectedHostId={view.pickerHostId}
+							initialCommand={view.pickerCommand}
+							{defaultCommand}
+							{addMachineHref}
+							allowDefaultShell
+							onOpen={(hostId, command) => controller.open(hostId, command)}
+							onCancel={view.tabs.length > 0 ? () => controller.hidePicker() : undefined}
+						/>
+					{/if}
+				</div>
+			</div>
+		{/if}
+	</div>
+</section>

package/dist/svelte/TerminalHostWorkspace.svelte.d.ts

@@ -0,0 +1,59 @@
+/**
+     * <TerminalHostWorkspace> — the embeddable terminal experience.
+     *
+     * Host picker, session tabs, reconnect banner and the terminal itself, as
+     * one component that fills whatever container it is given: a full page, a
+     * dialog, or a side panel. The host app supplies the reachable hosts and a
+     * session opener (dependency-injected transport); the workspace owns every
+     * piece of terminal chrome so each surface looks and behaves the same.
+     *
+     * State lives in the rune-free `TerminalHostWorkspaceController`
+     * (`./terminal-host-workspace.ts`); this file renders its snapshot.
+     *
+     * Styling is kit theme tokens only (`bg-background`, `border-border`, …), so
+     * the workspace matches the surrounding app shell and theme.
+     */
+import { type Snippet } from 'svelte';
+import { type TerminalHostErrorDescriber, type TerminalHostSessionOpener, type TerminalHostWorkspaceLayout } from './terminal-host-workspace.ts';
+import type { HostOption, TerminalTheme } from './types.ts';
+interface Props {
+    /** Reachable hosts, in display order. */
+    hosts: HostOption[];
+    /** Opens a session on a host. The workspace never owns a transport. */
+    openSession: TerminalHostSessionOpener;
+    /** Deep-linked host id; an unknown id shows a "not reachable" notice and the picker. */
+    initialHostId?: string;
+    /** Deep-linked command: pre-filled in the picker, never run without an explicit click. */
+    initialCommand?: string;
+    /** Open on the initial host straight away (no picker) when no command is pre-filled. */
+    autoOpen?: boolean;
+    /** Observe mode for every session: output renders, keystrokes never reach the host. */
+    readonly?: boolean;
+    /** Density only — the workspace always fills its container. */
+    layout?: TerminalHostWorkspaceLayout;
+    /** Placeholder in the picker's command field. Blank opens the host's default shell. */
+    defaultCommand?: string;
+    /** Where "Add a machine" goes in the empty picker. */
+    addMachineHref?: string;
+    /** Host discovery failure copy; shown above the workspace. */
+    hostsError?: string;
+    hostsRefreshing?: boolean;
+    /** Retry host discovery. Shows a retry button next to `hostsError`. */
+    onRetryHosts?: () => void;
+    /** Replaces the picker when `hosts` is empty (e.g. a sign-in prompt). */
+    empty?: Snippet;
+    /** Extra toolbar actions (rendered at the end of the tab strip). */
+    actions?: Snippet;
+    /** Lock the grid (both required). */
+    cols?: number;
+    rows?: number;
+    theme?: TerminalTheme;
+    describeError?: TerminalHostErrorDescriber;
+    /** Accessible name of the workspace region. */
+    label?: string;
+    class?: string;
+}
+declare const TerminalHostWorkspace: import("svelte").Component<Props, {}, "">;
+type TerminalHostWorkspace = ReturnType<typeof TerminalHostWorkspace>;
+export default TerminalHostWorkspace;
+//# sourceMappingURL=TerminalHostWorkspace.svelte.d.ts.map

package/dist/svelte/TerminalHostWorkspace.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalHostWorkspace.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/TerminalHostWorkspace.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;OAcI;AACJ,OAAO,EAAsB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQ1D,OAAO,EAGL,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,2BAA2B,EAChC,MAAM,8BAA8B,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAc,aAAa,EAAE,MAAM,YAAY,CAAC;AAGvE,UAAU,KAAK;IACd,yCAAyC;IACzC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,uEAAuE;IACvE,WAAW,EAAE,yBAAyB,CAAC;IACvC,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,uFAAuF;IACvF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAkKF,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/TerminalMobileToolbar.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+ import { Button } from '@vibesdotdev/kit/components/ui/button';
+ import { resolveSequence, type KeyChord } from '../ansi/keymap.js';
+
+ interface Props {
+  onInput?: (sequence: string) => void;
+  session?: { write: (data: string | Uint8Array) => Promise<void> | void } | null;
+  disabled?: boolean;
+  ctrlActive?: boolean;
+  altActive?: boolean;
+  class?: string;
+ }
+ let { onInput, session = null, disabled = false, class: className = '',
+  ctrlActive = $bindable(false), altActive = $bindable(false)
+ }: Props = $props();
+ const keys = [
+  { key: 'Escape', label: 'Escape', text: 'Esc' },
+  { key: 'Tab', label: 'Tab', text: 'Tab' },
+  { key: 'c', ctrl: true, label: 'Interrupt command', text: '^C' },
+  { key: 'd', ctrl: true, label: 'End input', text: '^D' },
+  { key: '|', label: 'Pipe', text: '|' },
+  { key: '\\', label: 'Backslash', text: '\\' },
+  { key: '~', label: 'Tilde', text: '~' },
+  { key: 'ArrowUp', label: 'Up Arrow', text: '↑' },
+  { key: 'ArrowDown', label: 'Down Arrow', text: '↓' },
+  { key: 'ArrowLeft', label: 'Left Arrow', text: '←' },
+  { key: 'ArrowRight', label: 'Right Arrow', text: '→' },
+  { key: 'PageUp', label: 'Page Up', text: 'PgUp' },
+  { key: 'PageDown', label: 'Page Down', text: 'PgDn' }
+ ];
+ function emit(chord: KeyChord) {
+  if (disabled) return;
+  const sequence = resolveSequence({ ...chord, ctrl: chord.ctrl ?? ctrlActive, alt: chord.alt ?? altActive });
+  ctrlActive = false;
+  altActive = false;
+  if (onInput) onInput(sequence);
+  else if (session) void session.write(sequence);
+ }
+</script>
+
+<div
+ class="flex shrink-0 items-center gap-1 overflow-x-auto border-t bg-background p-1.5 font-mono text-xs text-foreground touch-manipulation {className}"
+ role="toolbar"
+ aria-label="Terminal touch accessory keyboard"
+>
+ <Button type="button" variant={ctrlActive ? 'secondary' : 'ghost'} size="sm"
+  class="min-h-11 shrink-0" {disabled} aria-pressed={ctrlActive} aria-label="Control key"
+  onpointerdown={event => event.preventDefault()} onclick={() => ctrlActive = !ctrlActive}>Ctrl</Button>
+ <Button type="button" variant={altActive ? 'secondary' : 'ghost'} size="sm"
+  class="min-h-11 shrink-0" {disabled} aria-pressed={altActive} aria-label="Alt key"
+  onpointerdown={event => event.preventDefault()} onclick={() => altActive = !altActive}>Alt</Button>
+ {#each keys as key (key.label)}
+  <Button type="button" variant="ghost" size="sm" class="min-h-11 shrink-0" {disabled}
+   aria-label={key.label} onpointerdown={event => event.preventDefault()} onclick={() => emit(key)}>{key.text}</Button>
+ {/each}
+</div>

package/dist/svelte/TerminalMobileToolbar.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    onInput?: (sequence: string) => void;
+    session?: {
+        write: (data: string | Uint8Array) => Promise<void> | void;
+    } | null;
+    disabled?: boolean;
+    ctrlActive?: boolean;
+    altActive?: boolean;
+    class?: string;
+}
+declare const TerminalMobileToolbar: import("svelte").Component<Props, {}, "ctrlActive" | "altActive">;
+type TerminalMobileToolbar = ReturnType<typeof TerminalMobileToolbar>;
+export default TerminalMobileToolbar;
+//# sourceMappingURL=TerminalMobileToolbar.svelte.d.ts.map

package/dist/svelte/TerminalMobileToolbar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalMobileToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/TerminalMobileToolbar.svelte.ts"],"names":[],"mappings":"AAOC,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AA2CF,QAAA,MAAM,qBAAqB,mEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}