@vibesdotdev/storage 0.0.2 → 1.0.0-rc.3

package/dist/svelte/components/StorageExplorer.svelte

@@ -0,0 +1,954 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { noteStoreFailure } from '../note-store-failure.js';
+	import { toast } from 'svelte-sonner';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import { EmptyState } from '@vibesdotdev/kit/components/layout';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Skeleton } from '@vibesdotdev/kit/components/ui/skeleton';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import * as Resizable from '@vibesdotdev/kit/components/ui/resizable';
+	import StorageBrowser from './StorageBrowser.svelte';
+	import StorageProviderSidebar from './StorageProviderSidebar.svelte';
+	import StorageDetailsPane from './StorageDetailsPane.svelte';
+	import StorageDropzone from './StorageDropzone.svelte';
+	import ConnectStorageProviderDialog from './ConnectStorageProviderDialog.svelte';
+	import {
+		createStorageBrowseStore,
+		type StorageBrowseStore
+	} from '../stores/storage-browse.svelte.js';
+	import { settleStorage } from '../../client/storage-failure.js';
+	import {
+		resolveScopeDrives,
+		resolveObjectUrl,
+		uploadObject,
+		deleteEntry,
+		createStorageExplorerBrowseClient,
+		classifyStorageExplorerError,
+		resolveStorageExplorerClient,
+		storageRef,
+		searchStorageEntries,
+		targetSupportsSearch,
+		microsoftConnectUrl,
+		type StorageTarget,
+		type StorageEntry,
+		type StorageExplorerScope,
+		type StorageExplorerAction,
+		type StoragePreview,
+		type ConnectableScope,
+		type StorageExplorerClient,
+		type StorageExplorerFailureKind,
+		type StorageExplorerTransport
+	} from '../storage-explorer-runtime.js';
+	import StorageSearchBox from './StorageSearchBox.svelte';
+	import type {
+		StorageBrowserAction,
+		StorageBrowserEntryDecoration,
+		BrowseLocationContext
+	} from '../storage-browse-runtime.js';
+
+	// Multi-backend storage explorer (Finder/Explorer-like): a scope's drives in a
+	// sidebar, the runtime-resolved browser in the middle, an extensible details
+	// pane on the right, drag-drop upload over the whole thing. Backends are
+	// browsed + mutated entirely through the platform client; this component owns
+	// only layout + the built-in actions, leaving context actions + preview to
+	// the host via props.
+	let {
+		scope = {},
+		title = 'Files',
+		providerId = undefined,
+		connect = false,
+		connectCta = undefined,
+		contextActions = undefined,
+		decorate = undefined,
+		previewFor = undefined,
+		onAiAction = undefined,
+		canUpload = true,
+		canDelete = true,
+		canOpenObjects = true,
+		transport = 'auto',
+		environmentId = undefined,
+		connectScopes = undefined,
+		platformOrigin = '',
+		authOrigin = '',
+		scopeLabels = {}
+	}: {
+		scope?: StorageExplorerScope;
+		title?: string;
+		/** Preferred provider selected by a host-owned locations rail. */
+		providerId?: string;
+		/** Open the provider connection flow when this surface mounts. */
+		connect?: boolean;
+		connectCta?: { href: string; label: string };
+		/** Host actions appended to the built-ins (download/copy-link/delete + AI).
+		 *  `ctx` carries the current drive + path so actions can build links. */
+		contextActions?: (
+			entry: StorageEntry,
+			target: StorageTarget,
+			ctx: BrowseLocationContext
+		) => StorageExplorerAction[];
+		/** Host badge / disabled decoration per entry (e.g. "Job linked", "Pinned").
+		 *  `target` is the drive the entry lives on (for backend-keyed state). */
+		decorate?: (
+			entry: StorageEntry,
+			ctx: BrowseLocationContext,
+			target: StorageTarget
+		) => StorageBrowserEntryDecoration;
+		/** Resolve a details-pane preview for an entry (default: image thumbnails). */
+		previewFor?: (
+			entry: StorageEntry,
+			target: StorageTarget
+		) => StoragePreview | Promise<StoragePreview>;
+		/** Wire "Edit/Create with AI" to the host's chat surface (receives a storage ref). */
+		onAiAction?: (mode: 'edit' | 'create', ref: string, entry: StorageEntry) => void;
+		canUpload?: boolean;
+		/** Whether the owner has certified permanent-delete confirmation semantics. */
+		canDelete?: boolean;
+		/** Whether previews, downloads, and share links may leave this surface.
+		 * Native hosts keep this false until bounded binary streaming is projected. */
+		canOpenObjects?: boolean;
+		/** Native hosts require the trusted daemon projection; web hosts use auto fallback. */
+		transport?: StorageExplorerTransport;
+		/** Named Vibes Cloud environment used by the projected connection-status probe. */
+		environmentId?: string;
+		/** Scopes the user can connect a provider into (personal + admin'd orgs).
+		 *  When provided, a "+ Connect storage" entry opens the connect dialog. */
+		connectScopes?: ConnectableScope[];
+		/** Absolute platform origin for the cross-app admin-consent link (org SharePoint). */
+		platformOrigin?: string;
+		/** Absolute auth origin for the personal Microsoft account-link flow. */
+		authOrigin?: string;
+		/** Display-label overrides for scope ids (orgId → name) — the surface knows
+		 *  org names (its layout org list); the server only has ids. For sidebar groups. */
+		scopeLabels?: Record<string, string>;
+	} = $props();
+
+	let targets = $state<StorageTarget[]>([]);
+	let drivesLoading = $state(true);
+	let drivesError = $state(false);
+	let drivesFailureKind = $state<StorageExplorerFailureKind>('unknown');
+	/** Human-readable error message from `loadDrives`, shown in the sidebar + empty pane. */
+	let drivesErrorMessage = $state<string | null>(null);
+	let selectedTarget = $state<StorageTarget | null>(null);
+	let store = $state<StorageBrowseStore | null>(null);
+	let selectedEntry = $state<StorageEntry | null>(null);
+	let preview = $state<StoragePreview>({ kind: 'none' });
+	let connectOpen = $state(false);
+	// Captured at component init; the runtime is handed down, never read ambiently.
+	const runtimeStore = getRuntimeSvelteContext();
+	let clientPromise: Promise<StorageExplorerClient> | null = null;
+
+	function explorerClient(): Promise<StorageExplorerClient> {
+		clientPromise ??= runtimeStore
+			.load()
+			.then((runtime) => resolveStorageExplorerClient(runtime, transport));
+		return clientPromise;
+	}
+
+	// When the scope includes personal and no personal Microsoft drive is present,
+	// surface a connect CTA in the sidebar so users discover the link flow.
+	// `personalMicrosoftConnectUrl` is null when authOrigin is not provided (the
+	// host hasn't wired the Microsoft flow) — CTA is suppressed in that case.
+	// `personal: false` explicitly excludes personal drives; all other cases
+	// (personal: true, personal: undefined) include them.
+	const scopeIncludesPersonal = $derived(scope.personal !== false);
+
+	// The page's own location, read once mounted (only in a browser), so the
+	// derived link never touches it during SSR.
+	let pageOrigin = $state('');
+	let pagePath = $state('');
+	onMount(() => {
+		pageOrigin = window.location.origin;
+		pagePath = window.location.pathname;
+	});
+
+	const personalMicrosoftConnectUrl = $derived.by(() => {
+		if (!authOrigin || !scopeIncludesPersonal) return null;
+		// Build the personal delegated link (auth-web /connect?provider=microsoft).
+		const returnTo = pageOrigin ? `${pageOrigin}${pagePath}` : '';
+		return microsoftConnectUrl(platformOrigin || authOrigin, returnTo, undefined, authOrigin);
+	});
+
+	// True when the scope includes personal but no personal Microsoft drive was loaded.
+	// Used to decide whether to show the connect CTA vs a normal empty state.
+	// Only a personal-scoped SharePoint target counts — a connected personal
+	// bucket (user_s3/user_r2/user_gcs) says nothing about the Microsoft link.
+	const missingPersonalMicrosoft = $derived.by(() => {
+		if (!personalMicrosoftConnectUrl || drivesLoading || drivesError) return false;
+		return !targets.some((t) => t.type === 'sharepoint' && t.scope?.kind === 'personal');
+	});
+
+	// Search state — an active query shows results in the entry pane instead of
+	// the normal browse view; clearing returns to browse without side-effects on
+	// the underlying store.
+	let searchQuery = $state('');
+	let searchResults = $state<StorageEntry[]>([]);
+	let searchLoading = $state(false);
+	let searchError = $state<string | null>(null);
+	const searchActive = $derived(searchQuery.trim().length > 0);
+	const canSearch = $derived(targetSupportsSearch(selectedTarget) && !!store?.currentDriveId);
+
+	// Below `md` the explorer is single-pane: the user navigates between the
+	// locations rail, the entry list, and the details pane one at a time (a
+	// back/menu affordance switches). At/above `md` all three show at once in the
+	// Resizable group, so this state is inert there.
+	let mobilePane = $state<'list' | 'locations' | 'details'>('list');
+
+	$effect(() => {
+		if (connect) connectOpen = true;
+	});
+
+	async function loadDrives(): Promise<void> {
+		drivesLoading = true;
+		drivesError = false;
+		drivesFailureKind = 'unknown';
+		drivesErrorMessage = null;
+		try {
+			// null: the device session is disconnected (no drives to list).
+			const attempt = await settleStorage(async () => {
+				const client = await explorerClient();
+				const status = await client.status(environmentId);
+				return status.state === 'disconnected' ? null : resolveScopeDrives(scope, client);
+			});
+			if (!attempt.ok) {
+				drivesError = true;
+				const failure = classifyStorageExplorerError(attempt.cause);
+				drivesFailureKind = failure.kind;
+				drivesErrorMessage = failure.message;
+				return;
+			}
+			if (attempt.value === null) {
+				drivesError = true;
+				drivesFailureKind = 'signed-out';
+				drivesErrorMessage = 'Connect Vibes Cloud to browse account storage on this Mac.';
+				targets = [];
+				selectedTarget = null;
+				return;
+			}
+			targets = attempt.value;
+			if (targets.length > 0 && !selectedTarget) {
+				selectTarget(targets.find((target) => target.providerId === providerId) ?? targets[0]);
+			}
+		} finally {
+			drivesLoading = false;
+		}
+	}
+
+	// Re-enumerate when the scope filter changes (also covers initial mount), so a
+	// consumer whose `scope` is reactive (e.g. casework once its org resolves) gets
+	// a fresh drive list rather than a stale one.
+	$effect(() => {
+		void scope; // track scope identity
+		void transport;
+		void environmentId;
+		clientPromise = null;
+		selectedTarget = null; // a selection from the previous scope may not exist now
+		mobilePane = 'list'; // don't strand the user on a stale details/locations pane
+		// Clear any active search — it belongs to the previous target scope.
+		searchQuery = '';
+		searchResults = [];
+		searchError = null;
+		void loadDrives();
+	});
+
+	function selectTarget(target: StorageTarget): void {
+		selectedTarget = target;
+		selectedEntry = null;
+		preview = { kind: 'none' };
+		// Reset search when the target changes so stale results don't linger.
+		searchQuery = '';
+		searchResults = [];
+		searchError = null;
+		store = createStorageBrowseStore({
+			adapterId: target.adapterId,
+			client: createStorageExplorerBrowseClient(target, explorerClient)
+		});
+		void store.loadDrives().catch(noteStoreFailure(runtimeStore, 'loadDrives'));
+	}
+
+	/** Execute a content search against the selected target's current drive. */
+	async function runSearch(query: string): Promise<void> {
+		const target = selectedTarget;
+		const driveId = store?.currentDriveId;
+		if (!query || !target || !driveId) {
+			searchResults = [];
+			searchError = null;
+			return;
+		}
+		searchLoading = true;
+		searchError = null;
+		try {
+			const attempt = await settleStorage(async () =>
+				searchStorageEntries(target, driveId, query, undefined, await explorerClient())
+			);
+			// A failed search shows its setup or reconnect copy, never the raw error.
+			searchResults = attempt.ok ? attempt.value : [];
+			searchError = attempt.ok ? null : classifyStorageExplorerError(attempt.cause).message;
+		} finally {
+			searchLoading = false;
+		}
+	}
+
+	/** A copy of `target` namespaced to the currently-open drive (a SharePoint site
+	 *  or OneDrive `me`) so object ops (url/download/copy-link/delete) address the
+	 *  right drive. Multi-drive backends carry no namespace on the base target;
+	 *  single-root backends (R2 `root`) keep theirs. */
+	function withDrive(target: StorageTarget): StorageTarget {
+		const driveId = store?.currentDriveId ?? null;
+		return driveId && driveId !== 'root' ? { ...target, namespace: driveId } : target;
+	}
+
+	/** Default preview: inline image/PDF; everything else falls to the icon. */
+	async function defaultPreview(
+		entry: StorageEntry,
+		target: StorageTarget
+	): Promise<StoragePreview> {
+		if (!canOpenObjects || entry.kind !== 'file') return { kind: 'none' };
+		const isImage = /\.(png|jpe?g|gif|webp|svg|avif|bmp)$/i.test(entry.name);
+		const isPdf = /\.pdf$/i.test(entry.name);
+		// PDFs + images are the common casework file (drawings, scans) — inline a
+		// real preview rather than a bare icon. Both ride the inline object URL
+		// (Graph SAS for SharePoint/OneDrive, signed/public for R2/S3).
+		if (isImage || isPdf) {
+			const attempt = await settleStorage(async () =>
+				resolveObjectUrl(target, entry, { disposition: 'inline' }, await explorerClient(), store?.currentDriveId ?? null)
+			);
+			if (attempt.ok) return { kind: isPdf ? 'pdf' : 'image', url: attempt.value.url };
+			// A preview is optional decoration; the entry stays usable, and the reason is logged.
+			noteStoreFailure(runtimeStore, 'defaultPreview')(attempt.cause);
+			return { kind: 'none' };
+		}
+		return { kind: 'none' };
+	}
+
+	async function showDetails(entry: StorageEntry): Promise<void> {
+		selectedEntry = entry;
+		mobilePane = 'details'; // on mobile, slide the details pane in over the list
+		preview = { kind: 'none' };
+		const target = selectedTarget;
+		if (!target) return;
+		const resolve = previewFor ?? defaultPreview;
+		const attempt = await settleStorage(() => resolve(entry, target));
+		if (!attempt.ok) noteStoreFailure(runtimeStore, 'previewFor')(attempt.cause);
+		preview = attempt.ok ? attempt.value : { kind: 'none' };
+	}
+
+	/** Built-in entry actions; shown in the details pane and (inline) in the browser. */
+	function builtInActions(entry: StorageEntry, target: StorageTarget): StorageExplorerAction[] {
+		const actions: StorageExplorerAction[] = [];
+		if (canOpenObjects && entry.kind === 'file') {
+			actions.push({
+				id: 'download',
+				label: 'Download',
+				icon: 'lucide:download',
+				run: async (e, t) => {
+					const u = await resolveObjectUrl(
+						t,
+						e,
+						{ disposition: 'attachment' },
+						await explorerClient(),
+						store?.currentDriveId ?? null
+					);
+					// An action handler: it runs only in the browser.
+					window.open(u.url, '_blank', 'noopener');
+				}
+			});
+			actions.push({
+				id: 'copy-link',
+				label: 'Copy link',
+				icon: 'lucide:link',
+				run: async (e, t) => {
+					const u = await resolveObjectUrl(
+						t,
+						e,
+						undefined,
+						await explorerClient(),
+						store?.currentDriveId ?? null
+					);
+					const clipboard = navigator.clipboard;
+					if (!clipboard) {
+						toast.error('Could not copy the link');
+						return;
+					}
+					const copied = await settleStorage(() => clipboard.writeText(u.url));
+					if (copied.ok) {
+						toast.success('Link copied');
+					} else {
+						noteStoreFailure(runtimeStore, 'clipboard.writeText')(copied.cause);
+						toast.error('Could not copy the link');
+					}
+				}
+			});
+		}
+		if (onAiAction) {
+			actions.push({
+				id: 'ai-edit',
+				label: 'Open in chat',
+				icon: 'lucide:messages-square',
+				visible: (e) => e.kind === 'file',
+				run: (e, t) => onAiAction!('edit', storageRef(t, store?.currentDriveId ?? null, e.path), e)
+			});
+			actions.push({
+				id: 'ai-create',
+				label: 'Create with AI',
+				icon: 'lucide:wand-sparkles',
+				visible: (e) => e.kind === 'directory',
+				run: (e, t) =>
+					onAiAction!('create', storageRef(t, store?.currentDriveId ?? null, e.path), e)
+			});
+		}
+		if (canDelete) {
+			actions.push({
+				id: 'delete',
+				label: 'Delete permanently',
+				icon: 'lucide:trash-2',
+				variant: 'destructive',
+				visible: (e) => e.kind === 'file',
+				run: async (e, t) => {
+					await deleteEntry(withDrive(t), e, await explorerClient());
+					if (selectedEntry?.id === e.id) selectedEntry = null;
+					await store?.refresh().catch(noteStoreFailure(runtimeStore, 'refresh'));
+				}
+			});
+		}
+		const ctx: BrowseLocationContext = {
+			driveId: store?.currentDriveId ?? null,
+			path: store?.currentPath ?? ''
+		};
+		const extra = contextActions ? contextActions(entry, target, ctx) : [];
+		return [...actions, ...extra];
+	}
+
+	/** Adapt built-ins to the StorageBrowser's row-action shape (entry-only run). */
+	function rowActions(entry: StorageEntry, _ctx: BrowseLocationContext): StorageBrowserAction[] {
+		const target = selectedTarget;
+		if (!target) return [];
+		return builtInActions(entry, target).map((a) => ({
+			id: a.id,
+			label: a.label,
+			icon: a.icon,
+			variant: a.variant === 'destructive' ? 'ghost' : a.variant,
+			visible: a.visible ? (e: StorageEntry) => a.visible!(e, target) : undefined,
+			run: (e: StorageEntry) => a.run(e, target)
+		}));
+	}
+
+	async function onDropFiles(files: File[]): Promise<void> {
+		const target = selectedTarget;
+		if (!target) return;
+		const uploadTo = withDrive(target);
+		const base = store?.currentPath ?? '';
+		// Upload each file independently so a single failure doesn't abort the batch.
+		const failures: Array<{ name: string; message: string }> = [];
+		let succeeded = 0;
+		for (const file of files) {
+			const key = [base, file.name].filter(Boolean).join('/');
+			const uploaded = await settleStorage(async () => uploadObject(uploadTo, key, file, await explorerClient()));
+			if (uploaded.ok) {
+				succeeded++;
+			} else {
+				// The reason a user can act on (reconnect, setup), never the raw error text.
+				failures.push({ name: file.name, message: classifyStorageExplorerError(uploaded.cause).message });
+			}
+		}
+		// Refresh the listing when at least one file made it through.
+		if (succeeded > 0) await store?.refresh().catch(noteStoreFailure(runtimeStore, 'refresh'));
+		// Toast success only when something actually succeeded.
+		if (succeeded > 0 && failures.length === 0) {
+			toast.success(succeeded === 1 ? 'File uploaded' : `${succeeded} files uploaded`);
+		} else if (succeeded > 0 && failures.length > 0) {
+			toast.success(`${succeeded} of ${files.length} files uploaded`);
+		}
+		// Toast each failure with the underlying reason so the user knows what to fix.
+		for (const f of failures) {
+			toast.error(`Failed to upload "${f.name}": ${f.message}`);
+		}
+	}
+
+	let fileInput = $state<HTMLInputElement | null>(null);
+
+	/** Open the OS file picker → upload into the current drive + folder. */
+	function triggerUpload(): void {
+		fileInput?.click();
+	}
+
+	async function onUploadInput(event: Event): Promise<void> {
+		const input = event.currentTarget;
+		if (!(input instanceof HTMLInputElement)) return;
+		const files = input.files ? Array.from(input.files) : [];
+		input.value = ''; // let the same file be picked again later
+		if (files.length > 0) await onDropFiles(files);
+	}
+
+	/** Finder "open" on a file (double-click / Enter) → hand it to the host's chat
+	 *  surface when wired; otherwise fall back to showing its details/preview. */
+	function activateEntry(entry: StorageEntry): void {
+		const target = selectedTarget;
+		if (!target || entry.kind !== 'file') return;
+		if (onAiAction) {
+			onAiAction('edit', storageRef(target, store?.currentDriveId ?? null, entry.path), entry);
+		} else {
+			void showDetails(entry);
+		}
+	}
+
+	const detailActions = $derived(
+		selectedTarget && selectedEntry ? builtInActions(selectedEntry, selectedTarget) : []
+	);
+</script>
+
+<div class="@container/storage border-border bg-background h-full min-h-0 w-full min-w-0 overflow-hidden rounded-lg border">
+	<!-- Wide explorer: the 3-pane Finder layout. The breakpoint follows this
+	     explorer, not the viewport — the editor opens it inside a dialog on a
+	     wide window. `hidden` / `@min-[48rem]/storage:block` lives on this wrapper, NOT
+	     on the PaneGroup. Paneforge sets an inline `display:flex` on its root,
+	     which beats Tailwind's (non-important) `.hidden`, so a hidden class on
+	     the group itself never hid. Toggling an ancestor removes the subtree. -->
+	<div class="hidden h-full @min-[48rem]/storage:block">
+		<Resizable.PaneGroup direction="horizontal" autoSaveId="vibes:storage-explorer" class="h-full">
+			<!-- Locations rail — resizable -->
+			<Resizable.Pane defaultSize={20} minSize={14} maxSize={32} class="min-w-0">
+				<div class="h-full" data-storage-pane="locations">
+					<StorageProviderSidebar
+						{targets}
+						selectedId={selectedTarget?.providerId}
+						loading={drivesLoading}
+						error={drivesError}
+						signedOut={drivesError && drivesFailureKind === 'signed-out'}
+						{scopeLabels}
+						{connectCta}
+						microsoftConnectCta={missingPersonalMicrosoft ? personalMicrosoftConnectUrl : null}
+						onSelect={selectTarget}
+						onConnect={connectScopes && connectScopes.length > 0
+							? () => (connectOpen = true)
+							: undefined}
+					/>
+				</div>
+			</Resizable.Pane>
+
+			<Resizable.Handle />
+
+			<!-- File browser -->
+			<Resizable.Pane defaultSize={53} minSize={30} class="min-w-0">
+				<div class="flex h-full min-w-0 flex-col" data-storage-pane="list">
+					{#if selectedTarget && store && (canSearch || searchActive)}
+						<!-- Search toolbar: shown when the active provider supports search -->
+						<div class="border-border flex shrink-0 items-center gap-2 border-b px-3 py-2">
+							<StorageSearchBox
+								bind:value={searchQuery}
+								disabled={!canSearch}
+								disabledHint="This storage provider does not support content search"
+								placeholder="Search files…"
+								onSearch={(q) => void runSearch(q)}
+								onClear={() => {
+									searchResults = [];
+									searchError = null;
+								}}
+							/>
+							{#if searchActive}
+								<span class="text-muted-foreground text-xs" aria-live="polite">
+									{#if searchLoading}
+										Searching…
+									{:else if searchError}
+										Search error
+									{:else}
+										{searchResults.length} result{searchResults.length === 1 ? '' : 's'}
+									{/if}
+								</span>
+							{/if}
+						</div>
+					{/if}
+					<div class="min-h-0 flex-1 overflow-auto">
+						{#if drivesError}
+							<div class="flex h-full items-center justify-center p-6">
+								{#if drivesFailureKind === 'signed-out'}
+									<EmptyState
+										size="sm"
+										icon="lucide:cloud"
+										title="Connect Vibes Cloud"
+										description="Sign in once to browse connected storage here. Folders on this Mac remain available offline."
+									>
+										{#if connectCta}
+											<Button type="button" size="sm" href={connectCta.href}>
+												{connectCta.label}
+											</Button>
+										{/if}
+									</EmptyState>
+								{:else}
+									<EmptyState
+										size="sm"
+										icon="lucide:cloud-alert"
+										title="Couldn't load your files"
+										description={drivesErrorMessage ?? 'Something went wrong. Please try again.'}
+									>
+										<div class="flex flex-wrap items-center justify-center gap-2">
+											<Button type="button" size="sm" onclick={() => void loadDrives()}>
+												Try again
+											</Button>
+											{#if connectCta}
+												<Button type="button" size="sm" variant="outline" href={connectCta.href}>
+													{connectCta.label}
+												</Button>
+											{/if}
+										</div>
+									</EmptyState>
+								{/if}
+							</div>
+						{:else if selectedTarget && store && searchActive}
+							<!-- Search results view — flat entry list reusing the details pane on click -->
+							{#if searchLoading}
+								<div class="flex flex-col gap-2 p-4" aria-busy="true" aria-label="Searching">
+									{#each [0, 1, 2, 3, 4] as i (i)}
+										<Skeleton class="h-8 w-full rounded-md" />
+									{/each}
+								</div>
+							{:else if searchError}
+								<div class="flex h-full items-center justify-center p-6">
+									<EmptyState
+										size="sm"
+										icon="lucide:search-x"
+										title="Search failed"
+										description={searchError}
+									/>
+								</div>
+							{:else if searchResults.length === 0}
+								<div class="flex h-full items-center justify-center p-6">
+									<EmptyState
+										size="sm"
+										icon="lucide:search"
+										title="No results"
+										description="No files matched your search. Try a different query."
+									/>
+								</div>
+							{:else}
+								<ul
+									class="flex flex-col gap-0.5 p-2"
+									data-storage-list
+									role="list"
+									aria-label="Search results"
+								>
+									{#each searchResults as entry (entry.id)}
+										<li>
+											<button
+												type="button"
+												data-storage-row
+												class="hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:ring-ring flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none
+												{selectedEntry?.id === entry.id ? 'bg-accent/60' : ''}"
+												onclick={() => void showDetails(entry)}
+												ondblclick={() => activateEntry(entry)}
+											>
+												<Icon
+													icon={entry.kind === 'directory' ? 'lucide:folder' : 'lucide:file'}
+													class="text-muted-foreground size-4 shrink-0"
+												/>
+												<span class="min-w-0 flex-1 truncate">{entry.name}</span>
+												{#if entry.path}
+													<span
+														class="text-muted-foreground ml-auto hidden max-w-[40%] shrink-0 truncate text-xs sm:block"
+														title={entry.path}
+													>
+														{entry.path}
+													</span>
+												{/if}
+											</button>
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						{:else if selectedTarget && store}
+							<StorageDropzone disabled={!canUpload} onDrop={onDropFiles}>
+								<div class="h-full overflow-auto">
+									<StorageBrowser
+										{store}
+										adapterId={selectedTarget.adapterId}
+										config={selectedTarget.config}
+										title={selectedTarget.name}
+										loadOnMount={false}
+										{connectCta}
+										{rowActions}
+										decorate={decorate ? (e, c) => decorate(e, c, selectedTarget!) : () => ({})}
+										onOpenFile={showDetails}
+										onActivate={activateEntry}
+										onUpload={canUpload ? triggerUpload : undefined}
+									/>
+								</div>
+							</StorageDropzone>
+						{:else if drivesLoading}
+							<div
+								class="flex flex-col gap-2 p-4"
+								aria-busy="true"
+								aria-label="Loading your storage"
+							>
+								{#each [0, 1, 2, 3, 4, 5] as i (i)}
+									<Skeleton class="h-8 w-full rounded-md" />
+								{/each}
+							</div>
+						{:else}
+							<div class="flex h-full items-center justify-center p-6">
+								<EmptyState
+									size="sm"
+									icon="lucide:folder"
+									title="Pick a place to start"
+									description="Choose a storage location on the left to see your files."
+								/>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</Resizable.Pane>
+
+			{#if !drivesError}
+				<Resizable.Handle />
+
+				<!-- Details / preview — only useful once a storage location can be browsed. -->
+				<Resizable.Pane defaultSize={27} minSize={16} maxSize={42} class="min-w-0">
+					<div class="h-full" data-storage-pane="details">
+						<StorageDetailsPane
+							entry={selectedEntry}
+							target={selectedTarget}
+							{preview}
+							actions={detailActions}
+						/>
+					</div>
+				</Resizable.Pane>
+			{/if}
+		</Resizable.PaneGroup>
+	</div>
+
+	<!-- Narrow explorer: one pane at a time. Start on the entry list, a menu
+	     affordance reaches the locations rail, tapping an entry slides in details.
+	     Each branch carries a `back` affordance. -->
+	<div class="flex h-full min-h-0 flex-col @min-[48rem]/storage:hidden">
+		<div class="border-border flex h-11 shrink-0 items-center gap-1 border-b px-2">
+			{#if mobilePane === 'list'}
+				<button
+					type="button"
+					data-storage-nav="locations"
+					class="hover:bg-accent/50 focus-visible:ring-ring flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
+					onclick={() => (mobilePane = 'locations')}
+				>
+					<Icon icon="lucide:panel-left-open" class="text-muted-foreground size-4 shrink-0" />
+					<span class="truncate">{selectedTarget?.name ?? 'Locations'}</span>
+					<Icon icon="lucide:chevrons-up-down" class="text-muted-foreground size-3.5 shrink-0" />
+				</button>
+			{:else}
+				<button
+					type="button"
+					data-storage-nav="back"
+					class="hover:bg-accent/50 focus-visible:ring-ring flex min-w-0 items-center gap-1 rounded-md px-2 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
+					onclick={() => (mobilePane = 'list')}
+				>
+					<Icon icon="lucide:chevron-left" class="size-4 shrink-0" />
+					<span class="truncate">
+						{mobilePane === 'locations' ? 'Locations' : (selectedEntry?.name ?? 'Details')}
+					</span>
+				</button>
+			{/if}
+		</div>
+
+		<div class="min-h-0 flex-1 overflow-hidden">
+			{#if mobilePane === 'locations'}
+				<div class="h-full" data-storage-pane="locations">
+					<StorageProviderSidebar
+						{targets}
+						selectedId={selectedTarget?.providerId}
+						loading={drivesLoading}
+						error={drivesError}
+						signedOut={drivesError && drivesFailureKind === 'signed-out'}
+						{scopeLabels}
+						{connectCta}
+						microsoftConnectCta={missingPersonalMicrosoft ? personalMicrosoftConnectUrl : null}
+						onSelect={(t) => {
+							selectTarget(t);
+							mobilePane = 'list';
+						}}
+						onConnect={connectScopes && connectScopes.length > 0
+							? () => (connectOpen = true)
+							: undefined}
+					/>
+				</div>
+			{:else if mobilePane === 'details'}
+				<div class="h-full" data-storage-pane="details">
+					<StorageDetailsPane
+						entry={selectedEntry}
+						target={selectedTarget}
+						{preview}
+						actions={detailActions}
+					/>
+				</div>
+			{:else}
+				<div class="flex h-full flex-col" data-storage-pane="list">
+					{#if selectedTarget && store && (canSearch || searchActive)}
+						<!-- Mobile search bar -->
+						<div class="border-border flex shrink-0 items-center gap-2 border-b px-3 py-2">
+							<StorageSearchBox
+								bind:value={searchQuery}
+								disabled={!canSearch}
+								disabledHint="This storage provider does not support content search"
+								placeholder="Search files…"
+								onSearch={(q) => void runSearch(q)}
+								onClear={() => {
+									searchResults = [];
+									searchError = null;
+								}}
+							/>
+							{#if searchActive}
+								<span class="text-muted-foreground text-xs" aria-live="polite">
+									{#if searchLoading}Searching…{:else if searchError}Search error{:else}{searchResults.length}{/if}
+								</span>
+							{/if}
+						</div>
+					{/if}
+					<div class="min-h-0 flex-1 overflow-auto">
+						{#if drivesError}
+							<div class="flex h-full items-center justify-center p-4">
+								{#if drivesFailureKind === 'signed-out'}
+									<EmptyState
+										size="sm"
+										icon="lucide:cloud"
+										title="Connect Vibes Cloud"
+										description="Sign in once to browse connected storage here. Folders on this Mac remain available offline."
+									>
+										{#if connectCta}
+											<Button type="button" size="sm" href={connectCta.href}>
+												{connectCta.label}
+											</Button>
+										{/if}
+									</EmptyState>
+								{:else}
+									<EmptyState
+										size="sm"
+										icon="lucide:cloud-alert"
+										title="Couldn't load your files"
+										description={drivesErrorMessage ?? 'Something went wrong. Please try again.'}
+									>
+										<div class="flex flex-wrap items-center justify-center gap-2">
+											<Button type="button" size="sm" onclick={() => void loadDrives()}>
+												Try again
+											</Button>
+											{#if connectCta}
+												<Button type="button" size="sm" variant="outline" href={connectCta.href}>
+													{connectCta.label}
+												</Button>
+											{/if}
+										</div>
+									</EmptyState>
+								{/if}
+							</div>
+						{:else if selectedTarget && store && searchActive}
+							<!-- Mobile search results -->
+							{#if searchLoading}
+								<div class="flex flex-col gap-2 p-4" aria-busy="true" aria-label="Searching">
+									{#each [0, 1, 2, 3] as i (i)}
+										<Skeleton class="h-8 w-full rounded-md" />
+									{/each}
+								</div>
+							{:else if searchError}
+								<div class="flex h-full items-center justify-center p-4">
+									<EmptyState
+										size="sm"
+										icon="lucide:search-x"
+										title="Search failed"
+										description={searchError}
+									/>
+								</div>
+							{:else if searchResults.length === 0}
+								<div class="flex h-full items-center justify-center p-4">
+									<EmptyState
+										size="sm"
+										icon="lucide:search"
+										title="No results"
+										description="Try a different query."
+									/>
+								</div>
+							{:else}
+								<ul
+									class="flex flex-col gap-0.5 p-2"
+									data-storage-list
+									role="list"
+									aria-label="Search results"
+								>
+									{#each searchResults as entry (entry.id)}
+										<li>
+											<button
+												type="button"
+												data-storage-row
+												class="hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:ring-ring flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none
+												{selectedEntry?.id === entry.id ? 'bg-accent/60' : ''}"
+												onclick={() => {
+													void showDetails(entry);
+													mobilePane = 'details';
+												}}
+											>
+												<Icon
+													icon={entry.kind === 'directory' ? 'lucide:folder' : 'lucide:file'}
+													class="text-muted-foreground size-4 shrink-0"
+												/>
+												<span class="min-w-0 flex-1 truncate">{entry.name}</span>
+											</button>
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						{:else if selectedTarget && store}
+							<StorageDropzone disabled={!canUpload} onDrop={onDropFiles}>
+								<StorageBrowser
+									{store}
+									adapterId={selectedTarget.adapterId}
+									config={selectedTarget.config}
+									title={selectedTarget.name}
+									loadOnMount={false}
+									{connectCta}
+									{rowActions}
+									decorate={decorate ? (e, c) => decorate(e, c, selectedTarget!) : () => ({})}
+									onOpenFile={showDetails}
+									onActivate={activateEntry}
+									onUpload={canUpload ? triggerUpload : undefined}
+								/>
+							</StorageDropzone>
+						{:else if drivesLoading}
+							<div
+								class="flex flex-col gap-2 p-4"
+								aria-busy="true"
+								aria-label="Loading your storage"
+							>
+								{#each [0, 1, 2, 3] as i (i)}
+									<Skeleton class="h-8 w-full rounded-md" />
+								{/each}
+							</div>
+						{:else}
+							<div class="flex h-full items-center justify-center p-4">
+								<EmptyState
+									size="sm"
+									icon="lucide:folder"
+									title="Pick a place to start"
+									description="Choose a storage location to see your files."
+								/>
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<input
+		bind:this={fileInput}
+		type="file"
+		multiple
+		class="hidden"
+		aria-hidden="true"
+		tabindex="-1"
+		onchange={onUploadInput}
+	/>
+</div>
+
+{#if connectScopes && connectScopes.length > 0}
+	<ConnectStorageProviderDialog
+		bind:open={connectOpen}
+		scopes={connectScopes}
+		{platformOrigin}
+		{authOrigin}
+		onConnected={() => void loadDrives()}
+	/>
+{/if}