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

package/dist/svelte/components/SessionCard.svelte

@@ -0,0 +1,216 @@
+<script lang="ts" module>
+	import type { SessionListItem } from '../session-list-item.js';
+
+	export interface SessionCardProps {
+		session: SessionListItem;
+		/**
+		 * Destination for the primary "open this session" navigation.
+		 *
+		 * Prefer this over `onopen`. With an href the card's title is a real
+		 * anchor, so ⌘/ctrl-click, middle-click, "open in new tab" and "copy link
+		 * address" all work on the feature's main navigation target — none of
+		 * which are possible through a click handler. SvelteKit still routes it
+		 * client-side, so nothing is lost.
+		 */
+		href?: string;
+		/**
+		 * Fallback navigation for callers that cannot express the destination as
+		 * a URL. Ignored when `href` is set.
+		 */
+		onopen?: (session: SessionListItem) => void;
+		/** Called when the user confirms session deletion. */
+		ondelete?: (sessionId: string) => void;
+		/** Show the delete action. Defaults to true. */
+		showDelete?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { formatAbsoluteTime, formatRelativeAge } from '../relative-time.js';
+	import { sharedNow } from '../clock.svelte.js';
+
+	let { session, href, onopen, ondelete, showDelete = true }: SessionCardProps = $props();
+
+	const now = sharedNow();
+
+	function statusColor(status: string): string {
+		switch (status) {
+			case 'active':
+				return 'bg-green-500';
+			case 'initializing':
+				return 'bg-yellow-400 animate-pulse';
+			case 'error':
+				return 'bg-red-500';
+			default:
+				return 'bg-muted-foreground';
+		}
+	}
+
+	function hostLabel(session: SessionListItem): string {
+		if (session.hostTarget.kind === 'cloud') return 'Cloud sandbox';
+		if (session.hostTarget.kind === 'host') {
+			const hostId = session.hostTarget.hostId;
+			return hostId === 'local' ? 'Local machine' : `Host: ${hostId}`;
+		}
+		if (session.hostTarget.kind === 'provisioned')
+			return `provisioned:${session.hostTarget.adapter}`;
+		return 'Remote';
+	}
+
+	function capabilityLabel(session: SessionListItem): string {
+		return session.capability === 'transcript' ? 'Snapshot execution' : 'Interactive';
+	}
+
+	const displayName = $derived(
+		session.repositoryName ??
+			(session.ephemeral ? 'Ephemeral workspace' : session.sessionId.slice(0, 8))
+	);
+
+	const age = $derived(formatRelativeAge(session.lastActivityAt, now.value));
+	const absoluteAge = $derived(formatAbsoluteTime(session.lastActivityAt));
+
+	const containerClass =
+		'relative block w-full rounded-md border p-3 text-left transition-colors hover:bg-muted/40';
+
+	/**
+	 * Native buttons activate on BOTH Enter and Space; a `role="button"` element
+	 * has to reproduce that itself. The old handler only listened for Enter, so
+	 * Space scrolled the page instead of opening the focused card.
+	 */
+	function handleFallbackKeydown(event: KeyboardEvent): void {
+		if (event.key !== 'Enter' && event.key !== ' ') return;
+		event.preventDefault();
+		onopen?.(session);
+	}
+</script>
+
+<!--
+	SessionCard — shows status, host target, age, and optional preview link.
+	Zero internal jargon (no "descriptor", "runtimeId", "impl").
+
+	Two shapes, one body. With an `href` the whole card is a stretched link
+	(`after:absolute after:inset-0` on the title anchor); the delete button and
+	the preview link are SIBLINGS floated above that overlay on `z-10`, not
+	descendants of it.
+
+	That sibling relationship is the fix. The previous markup made the card
+	itself a `role="button"` div that CONTAINED a button and an anchor — nesting
+	interactive elements inside a control, which screen readers flatten into one
+	ambiguous target. There are still three interactive elements here; the
+	difference is that none of them contains another.
+
+	Load-bearing detail: the title anchor must stay non-`relative`, or its
+	`::after` takes the anchor as its containing block and the stretched hit area
+	collapses to the width of the title text.
+-->
+{#snippet cardBody()}
+	<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+		<div class="flex w-full min-w-0 items-start gap-3">
+			<div class="relative mt-0.5 shrink-0 rounded-md bg-primary/10 p-2">
+				<Icon
+					icon={session.capability === 'transcript' ? 'lucide:film' : 'lucide:terminal'}
+					class="size-5 text-primary"
+					aria-hidden="true"
+				/>
+				<span
+					class={`absolute -bottom-1 -right-1 size-3 rounded-full border-2 border-background ${statusColor(session.status)}`}
+					aria-hidden="true"
+				></span>
+			</div>
+
+			<div class="min-w-0 flex-1">
+				<div class="flex flex-wrap items-center gap-2">
+					{#if href}
+						<a
+							{href}
+							class="truncate font-medium outline-none after:absolute after:inset-0 after:rounded-md after:content-[''] hover:underline focus-visible:after:ring-2 focus-visible:after:ring-ring"
+						>
+							{displayName}
+						</a>
+					{:else}
+						<p class="truncate font-medium">{displayName}</p>
+					{/if}
+					<Badge variant="secondary" class="shrink-0 text-xs">
+						{capabilityLabel(session)}
+					</Badge>
+					{#if session.checkoutRef}
+						<Badge variant="outline" class="shrink-0 font-mono text-xs">
+							{session.checkoutRef}
+						</Badge>
+					{/if}
+				</div>
+				<p class="mt-0.5 truncate text-sm text-muted-foreground">{hostLabel(session)}</p>
+			</div>
+		</div>
+
+		<div class="relative z-10 flex shrink-0 items-center gap-2 self-end sm:self-auto">
+			<Badge variant="outline" class="capitalize">{session.status}</Badge>
+			{#if showDelete && ondelete}
+				<Button
+					variant="ghost"
+					size="icon"
+					class="size-7 text-muted-foreground hover:text-destructive"
+					onclick={(e: MouseEvent) => {
+						e.stopPropagation();
+						e.preventDefault();
+						ondelete?.(session.sessionId);
+					}}
+					aria-label={`Delete session ${displayName}`}
+				>
+					<Icon icon="lucide:trash-2" class="size-3.5" aria-hidden="true" />
+				</Button>
+			{/if}
+		</div>
+	</div>
+
+	<div class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
+		<!--
+			`relative z-10` so the absolute-time tooltip is actually reachable. The
+			title anchor's stretched `::after` covers the whole card, so without
+			this, hovering the timestamp hit-tests to the anchor — which has no
+			title — and the tooltip could never appear on any card with an href
+			(i.e. every card in production).
+		-->
+		<span class="relative z-10">
+			Last active
+			<time datetime={session.lastActivityAt} title={absoluteAge ?? undefined}>{age}</time>
+		</span>
+		{#if session.previewUrl}
+			<a
+				href={session.previewUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="relative z-10 flex items-center gap-1 text-primary hover:underline"
+				onclick={(e: MouseEvent) => e.stopPropagation()}
+			>
+				<Icon icon="lucide:external-link" class="size-3" aria-hidden="true" />
+				Preview
+			</a>
+		{/if}
+	</div>
+{/snippet}
+
+{#if href}
+	<div class={containerClass}>
+		{@render cardBody()}
+	</div>
+{:else}
+	{#if onopen}
+		<div
+			role="button"
+			tabindex="0"
+			class={`${containerClass} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
+			onclick={() => onopen(session)}
+			onkeydown={handleFallbackKeydown}
+		>
+			{@render cardBody()}
+		</div>
+	{:else}
+		<div class={containerClass}>
+			{@render cardBody()}
+		</div>
+	{/if}
+{/if}

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

@@ -0,0 +1,27 @@
+import type { SessionListItem } from '../session-list-item.ts';
+export interface SessionCardProps {
+    session: SessionListItem;
+    /**
+     * Destination for the primary "open this session" navigation.
+     *
+     * Prefer this over `onopen`. With an href the card's title is a real
+     * anchor, so ⌘/ctrl-click, middle-click, "open in new tab" and "copy link
+     * address" all work on the feature's main navigation target — none of
+     * which are possible through a click handler. SvelteKit still routes it
+     * client-side, so nothing is lost.
+     */
+    href?: string;
+    /**
+     * Fallback navigation for callers that cannot express the destination as
+     * a URL. Ignored when `href` is set.
+     */
+    onopen?: (session: SessionListItem) => void;
+    /** Called when the user confirms session deletion. */
+    ondelete?: (sessionId: string) => void;
+    /** Show the delete action. Defaults to true. */
+    showDelete?: boolean;
+}
+declare const SessionCard: import("svelte").Component<SessionCardProps, {}, "">;
+type SessionCard = ReturnType<typeof SessionCard>;
+export default SessionCard;
+//# sourceMappingURL=SessionCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SessionCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SessionCard.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE/D,MAAM,WAAW,gBAAgB;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAuJF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/SessionList.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+	import type { SessionListItem } from '../session-list-item.js';
+
+	export interface SessionListProps {
+		sessions: SessionListItem[];
+		loading?: boolean;
+		error?: string | null;
+		/**
+		 * Destination for each row's primary navigation. Prefer this over
+		 * `onopen` — it gives every card a real anchor, so ⌘-click, new tab and
+		 * copy-link work. Routes differ per app, so the caller supplies the
+		 * mapping rather than this package assuming `/sessions/<id>`.
+		 */
+		sessionHref?: (session: SessionListItem) => string;
+		/** Fallback navigation for callers that cannot express a URL. */
+		onopen?: (session: SessionListItem) => void;
+		/** Called when the user confirms deleting a session. */
+		ondelete?: (sessionId: string) => void;
+		/** Called when the user clicks the "New session" button in the empty state. */
+		oncreate?: () => void;
+	}
+</script>
+
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import SessionCard from './SessionCard.svelte';
+
+	let {
+		sessions,
+		loading = false,
+		error = null,
+		sessionHref,
+		onopen,
+		ondelete,
+		oncreate
+	}: SessionListProps = $props();
+</script>
+
+<!--
+	SessionList — list of SessionCards with an empty state that teaches creation.
+	Zero internal jargon.
+-->
+<section class="space-y-2" aria-label="Code sessions" aria-busy={loading}>
+	{#if loading}
+		<div class="flex items-center justify-center py-8 text-sm text-muted-foreground" role="status" aria-live="polite">
+			<Icon icon="lucide:loader-2" class="mr-2 size-4 animate-spin" aria-hidden="true" />
+			Loading sessions…
+		</div>
+	{:else if error}
+		<div class="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive" role="alert">
+			<div class="flex items-center gap-2">
+				<Icon icon="lucide:circle-x" class="size-4 shrink-0" aria-hidden="true" />
+				<span>{error}</span>
+			</div>
+		</div>
+	{:else if sessions.length === 0}
+		<!-- Empty state: names the next action and offers it as a button -->
+		<div class="flex flex-col items-center gap-4 rounded-lg border border-dashed py-10 text-center" role="status" aria-live="polite">
+			<div class="rounded-full bg-muted p-3">
+				<Icon icon="lucide:terminal" class="size-6 text-muted-foreground" aria-hidden="true" />
+			</div>
+			<div class="space-y-1">
+				<p class="font-medium">No code sessions yet</p>
+				<p class="max-w-xs text-sm text-muted-foreground">
+					Start a session to run commands and browse your workspace. Cloud sessions run in seconds.
+				</p>
+			</div>
+			{#if oncreate}
+				<Button type="button" onclick={oncreate} size="sm">
+					<Icon icon="lucide:plus" class="mr-2 size-4" aria-hidden="true" />
+					New session
+				</Button>
+			{/if}
+		</div>
+	{:else}
+		{#each sessions as session (session.sessionId)}
+			<SessionCard
+				{session}
+				href={sessionHref?.(session)}
+				{onopen}
+				{ondelete}
+			/>
+		{/each}
+	{/if}
+</section>

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

@@ -0,0 +1,23 @@
+import type { SessionListItem } from '../session-list-item.ts';
+export interface SessionListProps {
+    sessions: SessionListItem[];
+    loading?: boolean;
+    error?: string | null;
+    /**
+     * Destination for each row's primary navigation. Prefer this over
+     * `onopen` — it gives every card a real anchor, so ⌘-click, new tab and
+     * copy-link work. Routes differ per app, so the caller supplies the
+     * mapping rather than this package assuming `/sessions/<id>`.
+     */
+    sessionHref?: (session: SessionListItem) => string;
+    /** Fallback navigation for callers that cannot express a URL. */
+    onopen?: (session: SessionListItem) => void;
+    /** Called when the user confirms deleting a session. */
+    ondelete?: (sessionId: string) => void;
+    /** Called when the user clicks the "New session" button in the empty state. */
+    oncreate?: () => void;
+}
+declare const SessionList: import("svelte").Component<SessionListProps, {}, "">;
+type SessionList = ReturnType<typeof SessionList>;
+export default SessionList;
+//# sourceMappingURL=SessionList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SessionList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SessionList.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE/D,MAAM,WAAW,gBAAgB;IAChC,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IACnD,iEAAiE;IACjE,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAmEF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/SessionSeed.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" module>
+	import type { SessionWithCapability } from '@vibesdotdev/code-sessions';
+
+	export interface SessionSeedProps {
+		/** The session whose seed to render. Renders nothing when it has none. */
+		session: SessionWithCapability;
+	}
+
+	/** Human label for a seed source. Unknown sources fall back to the raw value. */
+	function sourceLabel(source: string): string {
+		switch (source) {
+			case 'work-item':
+				return 'Work item';
+			default:
+				return source;
+		}
+	}
+</script>
+
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components';
+
+	let { session }: SessionSeedProps = $props();
+
+	const seed = $derived(session.seed);
+</script>
+
+<!--
+	"Started for …" — the provenance the record has always carried and no surface
+	ever showed.
+
+	`CodeSessionSeed` is persisted verbatim, threaded into the sandbox as
+	`VIBES_SEED_*`, and its own type comment says it exists "so surfaces can
+	render 'opened for <title>'". Until now nothing did: a session started from a
+	work item was indistinguishable from one started cold, so the task a session
+	belongs to was write-only data.
+
+	`ref` is shown as text, NOT a link. There is no work-item detail route to
+	link to (hq-web has `/workboard`, which takes no item parameter), and this
+	codebase's own rule — see `forgePullRequestUrl` returning `null` rather than
+	a dead button — is that a link nobody can follow is worse than none. Make it
+	an anchor when a real destination exists.
+-->
+{#if seed}
+	<div class="flex items-start gap-2 text-sm">
+		<Icon icon="lucide:target" class="mt-0.5 size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+		<div class="min-w-0">
+			<p class="text-muted-foreground">
+				Started for
+				<span class="font-medium text-foreground">{seed.title}</span>
+			</p>
+			<p class="mt-0.5 text-xs text-muted-foreground">
+				{sourceLabel(seed.source)}{#if seed.ref}<span class="ml-1 font-mono">{seed.ref}</span>{/if}
+			</p>
+			{#if seed.body}
+				<p class="mt-1 whitespace-pre-wrap text-xs text-muted-foreground">{seed.body}</p>
+			{/if}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { SessionWithCapability } from '@vibesdotdev/code-sessions';
+export interface SessionSeedProps {
+    /** The session whose seed to render. Renders nothing when it has none. */
+    session: SessionWithCapability;
+}
+declare const SessionSeed: import("svelte").Component<SessionSeedProps, {}, "">;
+type SessionSeed = ReturnType<typeof SessionSeed>;
+export default SessionSeed;
+//# sourceMappingURL=SessionSeed.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SessionSeed.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SessionSeed.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAExE,MAAM,WAAW,gBAAgB;IAChC,0EAA0E;IAC1E,OAAO,EAAE,qBAAqB,CAAC;CAC/B;AA8CF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}