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

package/dist/svelte/SessionTabs.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	/**
+	 * <SessionTabs> — tab strip for multiple concurrent terminal sessions.
+	 *
+	 * Each tab shows: command label (truncated) + host suffix, active/detached
+	 * indicator, and a close button. Clicking a tab makes it active; clicking a
+	 * close button kills the session (with confirmation when still running). The
+	 * "+" button opens the picker for a new session.
+	 *
+	 * Keyboard: Left/Right arrow keys navigate tabs; Delete/Backspace on a tab
+	 * opens the kill confirmation.
+	 *
+	 * Detached sessions are shown with a dimmed indicator — the PTY is running
+	 * but no browser client is watching. Clicking them re-attaches.
+	 */
+
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { cn } from '@vibesdotdev/kit/utils';
+	import type { TabSession } from './types.js';
+
+	interface Props {
+		/** Ordered list of tabs to render. */
+		tabs: TabSession[];
+		/** The id of the currently visible (active) tab. */
+		activeId: string;
+		/** Called when a tab is clicked to activate it. */
+		onSelect: (id: string) => void;
+		/** Called when the user confirms closing (killing) a session. */
+		onClose: (id: string) => void;
+		/** Called when the + button is pressed to open the picker for a new session. */
+		onNewTab: () => void;
+	}
+
+	let { tabs, activeId, onSelect, onClose, onNewTab }: Props = $props();
+
+	/** Tab whose close button was clicked, pending user confirmation. */
+	let confirmingCloseId = $state<string | null>(null);
+
+	const confirmingTab = $derived(
+		confirmingCloseId !== null ? tabs.find((t) => t.id === confirmingCloseId) : null
+	);
+
+	function handleTabKeydown(e: KeyboardEvent, tabId: string, idx: number) {
+		if (e.key === 'ArrowRight') {
+			e.preventDefault();
+			const next = tabs[idx + 1];
+			if (next) onSelect(next.id);
+		} else if (e.key === 'ArrowLeft') {
+			e.preventDefault();
+			const prev = tabs[idx - 1];
+			if (prev) onSelect(prev.id);
+		} else if (e.key === 'Delete' || e.key === 'Backspace') {
+			e.preventDefault();
+			confirmingCloseId = tabId;
+		}
+	}
+
+	function requestClose(id: string) {
+		const tab = tabs.find((t) => t.id === id);
+		if (!tab) return;
+		// If process has exited there's nothing running — close without confirm.
+		if (tab.exited) {
+			onClose(id);
+		} else {
+			confirmingCloseId = id;
+		}
+	}
+
+	function confirmClose() {
+		if (confirmingCloseId) {
+			onClose(confirmingCloseId);
+			confirmingCloseId = null;
+		}
+	}
+
+	function cancelClose() {
+		confirmingCloseId = null;
+	}
+
+	/** Reference to the cancel button so we can focus it when the dialog mounts. */
+	let cancelBtnEl = $state<HTMLButtonElement | null>(null);
+
+	$effect(() => {
+		if (confirmingCloseId && cancelBtnEl) {
+			cancelBtnEl.focus();
+		}
+	});
+
+	function shortLabel(tab: TabSession): string {
+		const cmd = tab.command.split('/').pop() ?? tab.command;
+		const host = tab.hostLabel ? ` — ${tab.hostLabel}` : '';
+		return cmd + host;
+	}
+
+	function tabClass(tab: TabSession): string {
+		return cn(
+			'group relative flex min-w-20 max-w-44 cursor-pointer select-none items-center gap-1.5 border-r border-border px-2.5 text-xs text-muted-foreground outline-none transition-colors hover:bg-card hover:text-foreground focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+			tab.id === activeId && 'border-b-2 border-b-primary bg-card text-foreground',
+			tab.detached && !tab.exited && 'opacity-70',
+			tab.exited && 'opacity-50'
+		);
+	}
+
+	function indicatorClass(tab: TabSession): string {
+		return cn(
+			'size-2 shrink-0 rounded-full bg-muted-foreground',
+			!tab.detached && !tab.exited && 'bg-success',
+			tab.detached && !tab.exited && 'bg-warning'
+		);
+	}
+</script>
+
+<div
+	class="flex min-h-9 shrink-0 items-stretch overflow-x-auto border-b border-border bg-background"
+	role="tablist"
+	aria-label="Terminal sessions"
+>
+	{#each tabs as tab, idx (tab.id)}
+		<div
+			class={tabClass(tab)}
+			role="tab"
+			aria-selected={tab.id === activeId}
+			aria-label="{shortLabel(tab)}{tab.detached && !tab.exited ? ' (detached — running)' : ''}{tab.exited ? ' (ended)' : ''}"
+			tabindex={tab.id === activeId ? 0 : -1}
+			onclick={() => onSelect(tab.id)}
+			onkeydown={(e) => handleTabKeydown(e, tab.id, idx)}
+		>
+			<span
+				class={indicatorClass(tab)}
+				title={tab.detached && !tab.exited ? 'Running — not connected' : tab.exited ? 'Session ended' : 'Live'}
+			></span>
+			<span class="min-w-0 flex-1 truncate font-mono">{shortLabel(tab)}</span>
+			<button
+				class={cn(
+					'flex size-4 shrink-0 items-center justify-center rounded-sm text-sm leading-none text-muted-foreground/60 opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+					tab.id === activeId && 'opacity-100',
+					'group-hover:opacity-100'
+				)}
+				type="button"
+				aria-label="Close {shortLabel(tab)}"
+				onclick={(e) => {
+					e.stopPropagation();
+					requestClose(tab.id);
+				}}
+				tabindex={-1}
+			>×</button>
+		</div>
+	{/each}
+
+	<Button
+		variant="ghost"
+		size="icon-sm"
+		class="h-9 min-w-9 rounded-none border-r border-border text-muted-foreground hover:text-foreground"
+		aria-label="Open a new terminal tab"
+		title="New tab"
+		onclick={onNewTab}
+	>+</Button>
+</div>
+
+{#if confirmingTab}
+	<!-- Kill confirmation overlay -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-background/80 px-4"
+		role="dialog"
+		aria-modal="true"
+		aria-label="Close session"
+	>
+		<div class="w-full max-w-80 rounded-md border border-border bg-card px-6 py-5">
+			<p class="mb-4 mt-0 text-sm leading-normal text-card-foreground">
+				{#if confirmingTab.exited}
+					Remove this tab?
+				{:else}
+					Close "<strong>{shortLabel(confirmingTab)}</strong>"?
+					The running process will be stopped.
+				{/if}
+			</p>
+			<div class="flex justify-end gap-2">
+				<Button
+					variant="outline"
+					size="sm"
+					onclick={cancelClose}
+					bind:ref={cancelBtnEl}
+				>Keep running</Button>
+				<Button
+					variant="destructive"
+					size="sm"
+					onclick={confirmClose}
+				>{confirmingTab.exited ? 'Remove' : 'Stop and close'}</Button>
+			</div>
+		</div>
+	</div>
+{/if}

package/dist/svelte/SessionTabs.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { TabSession } from './types.ts';
+interface Props {
+    /** Ordered list of tabs to render. */
+    tabs: TabSession[];
+    /** The id of the currently visible (active) tab. */
+    activeId: string;
+    /** Called when a tab is clicked to activate it. */
+    onSelect: (id: string) => void;
+    /** Called when the user confirms closing (killing) a session. */
+    onClose: (id: string) => void;
+    /** Called when the + button is pressed to open the picker for a new session. */
+    onNewTab: () => void;
+}
+declare const SessionTabs: import("svelte").Component<Props, {}, "">;
+type SessionTabs = ReturnType<typeof SessionTabs>;
+export default SessionTabs;
+//# sourceMappingURL=SessionTabs.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SessionTabs.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/SessionTabs.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG5C,UAAU,KAAK;IACd,sCAAsC;IACtC,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,iEAAiE;IACjE,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,gFAAgF;IAChF,QAAQ,EAAE,MAAM,IAAI,CAAC;CACrB;AA6HF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}