1.0.7

src/routes/api/stacks/[name]/check-path-change/+server.ts

@@ -0,0 +1,79 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { authorize } from '$lib/server/authorize';
+import { getStackSource } from '$lib/server/db';
+import { findStackDir } from '$lib/server/stacks';
+import { existsSync, readdirSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+
+/**
+ * POST /api/stacks/[name]/check-path-change
+ *
+ * Check if the proposed compose path differs from current and if old directory has files.
+ * Returns information about what would need to be moved if location changes.
+ */
+export const POST: RequestHandler = async ({ params, request, url, cookies }) => {
+	const auth = await authorize(cookies);
+	if (auth.authEnabled && !(await auth.can('stacks', 'edit'))) {
+		return json({ error: 'Permission denied' }, { status: 403 });
+	}
+
+	const { name } = params;
+	const envId = url.searchParams.get('env');
+	const envIdNum = envId ? parseInt(envId) : undefined;
+
+	try {
+		const body = await request.json();
+		const { newComposePath } = body;
+
+		// Get current source info
+		const source = await getStackSource(name, envIdNum);
+
+		// Determine current compose path and directory
+		let currentComposePath: string | null = null;
+		let currentDir: string | null = null;
+
+		if (source?.composePath) {
+			currentComposePath = source.composePath;
+			currentDir = dirname(source.composePath);
+		} else {
+			// Stack uses default directory structure
+			const stackDir = await findStackDir(name, envIdNum);
+			if (stackDir) {
+				const defaultComposePath = join(stackDir, 'docker-compose.yml');
+				if (existsSync(defaultComposePath)) {
+					currentComposePath = defaultComposePath;
+					currentDir = stackDir;
+				}
+			}
+		}
+
+		// Determine new directory
+		const newDir = newComposePath ? dirname(newComposePath) : null;
+
+		// Check if directories are different and old directory exists with files
+		let hasChanges = false;
+		let fileCount = 0;
+
+		if (currentDir && newDir && currentDir !== newDir && existsSync(currentDir)) {
+			try {
+				const files = readdirSync(currentDir);
+				fileCount = files.length;
+				hasChanges = fileCount > 0;
+			} catch {
+				// Ignore read errors
+			}
+		}
+
+		return json({
+			hasChanges,
+			oldDir: currentDir,
+			newDir,
+			fileCount,
+			currentComposePath
+		});
+	} catch (error: any) {
+		console.error(`Error checking path change for stack ${name}:`, error);
+		return json({ error: error.message || 'Failed to check path changes' }, { status: 500 });
+	}
+};

src/routes/api/stacks/[name]/relocate/+server.ts

@@ -0,0 +1,131 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { authorize } from '$lib/server/authorize';
+import { getStackSource, updateStackSource } from '$lib/server/db';
+import { existsSync, readdirSync, renameSync, readFileSync, writeFileSync, unlinkSync, mkdirSync, rmSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+
+/**
+ * POST /api/stacks/[name]/relocate
+ *
+ * Move all stack files from old directory to new location.
+ * Updates the database with new paths and returns refreshed content.
+ */
+export const POST: RequestHandler = async ({ params, request, url, cookies }) => {
+	const auth = await authorize(cookies);
+	if (auth.authEnabled && !(await auth.can('stacks', 'edit'))) {
+		return json({ error: 'Permission denied' }, { status: 403 });
+	}
+
+	const { name } = params;
+	const envId = url.searchParams.get('env');
+	const envIdNum = envId ? parseInt(envId) : undefined;
+
+	try {
+		const body = await request.json();
+		const { oldDir, newComposePath, newEnvPath } = body;
+
+		if (!oldDir || !newComposePath) {
+			return json({ error: 'oldDir and newComposePath are required' }, { status: 400 });
+		}
+
+		const newDir = dirname(newComposePath);
+
+		// Verify old directory exists
+		if (!existsSync(oldDir)) {
+			return json({ error: 'Source directory does not exist' }, { status: 400 });
+		}
+
+		// Create new directory if it doesn't exist
+		if (!existsSync(newDir)) {
+			mkdirSync(newDir, { recursive: true });
+		}
+
+		// Move all files from old directory to new directory
+		const files = readdirSync(oldDir);
+		const movedFiles: string[] = [];
+		const errors: string[] = [];
+
+		for (const file of files) {
+			const oldFilePath = join(oldDir, file);
+			const newFilePath = join(newDir, file);
+
+			try {
+				// Use rename for atomic move (same filesystem) or copy+delete for cross-filesystem
+				renameSync(oldFilePath, newFilePath);
+				movedFiles.push(file);
+			} catch (renameErr: any) {
+				if (renameErr.code === 'EXDEV') {
+					// Cross-filesystem move - copy then delete
+					try {
+						const data = readFileSync(oldFilePath);
+						writeFileSync(newFilePath, data);
+						unlinkSync(oldFilePath);
+						movedFiles.push(file);
+					} catch (copyErr: any) {
+						errors.push(`Failed to copy ${file}: ${copyErr.message}`);
+					}
+				} else {
+					errors.push(`Failed to move ${file}: ${renameErr.message}`);
+				}
+			}
+		}
+
+		// Remove old directory if it's now empty
+		try {
+			const remaining = readdirSync(oldDir);
+			if (remaining.length === 0) {
+				rmSync(oldDir, { recursive: true, force: true });
+			}
+		} catch {
+			// Ignore errors when checking/removing old directory
+		}
+
+		// Update database with new paths
+		await updateStackSource(name, envIdNum ?? null, {
+			composePath: newComposePath,
+			envPath: newEnvPath || null
+		});
+
+		// Read content from new location
+		let composeContent = '';
+		let rawEnvContent = '';
+		const envVars: { key: string; value: string; isSecret: boolean }[] = [];
+
+		// Read compose file
+		if (existsSync(newComposePath)) {
+			composeContent = readFileSync(newComposePath, 'utf-8');
+		}
+
+		// Read env file if it exists
+		const envFilePath = newEnvPath || join(newDir, '.env');
+		if (existsSync(envFilePath)) {
+			rawEnvContent = readFileSync(envFilePath, 'utf-8');
+
+			// Parse env vars from raw content
+			const lines = rawEnvContent.split('\n');
+			for (const line of lines) {
+				const trimmed = line.trim();
+				if (!trimmed || trimmed.startsWith('#')) continue;
+				const eqIndex = trimmed.indexOf('=');
+				if (eqIndex > 0) {
+					const key = trimmed.substring(0, eqIndex);
+					const value = trimmed.substring(eqIndex + 1);
+					envVars.push({ key, value, isSecret: false });
+				}
+			}
+		}
+
+		return json({
+			success: true,
+			movedFiles,
+			errors: errors.length > 0 ? errors : undefined,
+			composeContent,
+			rawEnvContent,
+			envVars
+		});
+	} catch (error: any) {
+		console.error(`Error relocating stack ${name}:`, error);
+		return json({ error: error.message || 'Failed to relocate stack' }, { status: 500 });
+	}
+};

src/routes/api/stacks/adopt/+server.ts

@@ -0,0 +1,41 @@
+import { json, type RequestHandler } from '@sveltejs/kit';
+import { authorize } from '$lib/server/authorize';
+import { adoptSelectedStacks, type DiscoveredStack } from '$lib/server/stack-scanner';
+
+export const POST: RequestHandler = async ({ request, cookies }) => {
+	const auth = await authorize(cookies);
+	if (auth.authEnabled && !await auth.can('stacks', 'create')) {
+		return json({ error: 'Permission denied' }, { status: 403 });
+	}
+
+	try {
+		const body = await request.json();
+		const stacks = body.stacks as DiscoveredStack[];
+		const environmentId = body.environmentId as number | undefined;
+
+		if (!stacks || !Array.isArray(stacks) || stacks.length === 0) {
+			return json({ error: 'No stacks provided' }, { status: 400 });
+		}
+
+		if (!environmentId || typeof environmentId !== 'number') {
+			return json({ error: 'Environment ID is required' }, { status: 400 });
+		}
+
+		// Validate each stack has required fields
+		for (const stack of stacks) {
+			if (!stack.name || !stack.composePath) {
+				return json({ error: 'Invalid stack data: missing name or composePath' }, { status: 400 });
+			}
+		}
+
+		const result = await adoptSelectedStacks(stacks, environmentId);
+
+		return json({
+			adopted: result.adopted,
+			failed: result.failed
+		});
+	} catch (error) {
+		const message = error instanceof Error ? error.message : 'Unknown error';
+		return json({ error: message }, { status: 500 });
+	}
+};

src/routes/api/stacks/base-path/+server.ts

@@ -0,0 +1,14 @@
+import { json } from '@sveltejs/kit';
+import { getStacksDir } from '$lib/server/stacks';
+import type { RequestHandler } from './$types';
+
+/**
+ * GET /api/stacks/base-path
+ *
+ * Returns the default Dockhand stacks directory path.
+ * This is where stacks are stored by default ($DATA_DIR/stacks/).
+ */
+export const GET: RequestHandler = async () => {
+	const basePath = getStacksDir();
+	return json({ basePath });
+};

src/routes/api/stacks/default-path/+server.ts

@@ -0,0 +1,54 @@
+import { json } from '@sveltejs/kit';
+import { join } from 'path';
+import { getStackDir } from '$lib/server/stacks';
+import { getEnvironment } from '$lib/server/db';
+import type { RequestHandler } from './$types';
+
+/**
+ * Get the default path for a new stack
+ * Used by the UI to show where files will be created
+ *
+ * Query params:
+ * - name: Stack name (required)
+ * - env: Environment ID (optional)
+ * - location: Custom base location path (optional)
+ *
+ * If location is provided, path will be: {location}/{envName}/{stackName}/
+ * Otherwise uses Dockhand's default: $DATA_DIR/stacks/{envName}/{stackName}/
+ */
+export const GET: RequestHandler = async ({ url }) => {
+	const stackName = url.searchParams.get('name');
+	const envId = url.searchParams.get('env');
+	const location = url.searchParams.get('location');
+	const envIdNum = envId ? parseInt(envId) : undefined;
+
+	if (!stackName) {
+		return json({ error: 'Stack name is required' }, { status: 400 });
+	}
+
+	let stackDir: string;
+
+	if (location) {
+		// Custom location: {location}/{envName}/{stackName}/
+		if (envIdNum) {
+			const env = await getEnvironment(envIdNum);
+			if (env) {
+				stackDir = join(location, env.name, stackName);
+			} else {
+				stackDir = join(location, stackName);
+			}
+		} else {
+			stackDir = join(location, stackName);
+		}
+	} else {
+		// Dockhand default location
+		stackDir = await getStackDir(stackName, envIdNum);
+	}
+
+	return json({
+		stackDir,
+		composePath: `${stackDir}/docker-compose.yml`,
+		envPath: `${stackDir}/.env`,
+		source: location ? 'custom' : 'default'
+	});
+};

src/routes/api/stacks/path-hints/+server.ts

@@ -0,0 +1,37 @@
+import { json, type RequestHandler } from '@sveltejs/kit';
+import { getStackPathHints } from '$lib/server/stacks';
+import { authorize } from '$lib/server/authorize';
+
+/**
+ * GET /api/stacks/path-hints?name=stackName&env=envId
+ * Returns path hints extracted from Docker container labels for a stack.
+ */
+export const GET: RequestHandler = async ({ url, cookies }) => {
+	const auth = await authorize(cookies);
+	if (auth.authEnabled && !auth.isAuthenticated) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const stackName = url.searchParams.get('name');
+	const envId = url.searchParams.get('env');
+
+	if (!stackName) {
+		return json({ error: 'Stack name is required' }, { status: 400 });
+	}
+
+	try {
+		const hints = await getStackPathHints(stackName, envId ? parseInt(envId) : undefined);
+
+		return json({
+			stackName,
+			workingDir: hints.workingDir,
+			configFiles: hints.configFiles
+		});
+	} catch (error) {
+		console.error('Failed to get stack path hints:', error);
+		return json(
+			{ error: error instanceof Error ? error.message : 'Failed to get path hints' },
+			{ status: 500 }
+		);
+	}
+};

src/routes/api/stacks/scan/+server.ts

@@ -0,0 +1,35 @@
+import { json, type RequestHandler } from '@sveltejs/kit';
+import { authorize } from '$lib/server/authorize';
+import { scanExternalPaths, scanPaths, detectRunningStacks } from '$lib/server/stack-scanner';
+
+export const POST: RequestHandler = async ({ request, cookies }) => {
+	const auth = await authorize(cookies);
+	if (auth.authEnabled && !await auth.can('stacks', 'create')) {
+		return json({ error: 'Permission denied' }, { status: 403 });
+	}
+
+	try {
+		const body = await request.json().catch(() => ({}));
+		const { path } = body;
+
+		let result;
+		if (path) {
+			// Scan a specific path provided by the user
+			result = await scanPaths([path]);
+		} else {
+			// Scan all configured external paths (legacy behavior)
+			result = await scanExternalPaths();
+		}
+
+		// Detect which stacks are already running on any environment
+		const discoveredWithRunning = await detectRunningStacks(result.discovered);
+
+		return json({
+			...result,
+			discovered: discoveredWithRunning
+		});
+	} catch (error) {
+		const message = error instanceof Error ? error.message : 'Unknown error';
+		return json({ error: message }, { status: 500 });
+	}
+};

src/routes/api/stacks/validate-path/+server.ts

@@ -0,0 +1,28 @@
+import { json, type RequestHandler } from '@sveltejs/kit';
+import { authorize } from '$lib/server/authorize';
+import { validatePath } from '$lib/server/stack-scanner';
+import { getExternalStackPaths } from '$lib/server/db';
+
+export const POST: RequestHandler = async ({ request, cookies }) => {
+	const auth = await authorize(cookies);
+	if (auth.authEnabled && !await auth.can('settings', 'edit')) {
+		return json({ error: 'Permission denied' }, { status: 403 });
+	}
+
+	try {
+		const { path } = await request.json();
+
+		if (!path || typeof path !== 'string') {
+			return json({ valid: false, error: 'Path is required' });
+		}
+
+		// Get existing paths to check for overlaps
+		const existingPaths = await getExternalStackPaths();
+
+		const result = validatePath(path, existingPaths);
+		return json(result);
+	} catch (error) {
+		const message = error instanceof Error ? error.message : 'Unknown error';
+		return json({ valid: false, error: message });
+	}
+};

src/routes/api/system/files/+server.ts

@@ -0,0 +1,80 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { readdirSync, statSync, existsSync } from 'node:fs';
+import { join, basename } from 'node:path';
+import { authorize } from '$lib/server/authorize';
+
+export interface FileEntry {
+	name: string;
+	path: string;
+	type: 'file' | 'directory' | 'symlink';
+	size: number;
+	mtime: string;
+	mode: string;
+}
+
+/**
+ * GET /api/system/files
+ * Browse Dockhand's local filesystem (for mount browsing)
+ *
+ * Query params:
+ * - path: Directory path to list
+ */
+export const GET: RequestHandler = async ({ url, cookies }) => {
+	const auth = await authorize(cookies);
+
+	if (auth.authEnabled && !await auth.can('stacks', 'edit')) {
+		return json({ error: 'Permission denied' }, { status: 403 });
+	}
+
+	const path = url.searchParams.get('path') || '/';
+
+	try {
+		if (!existsSync(path)) {
+			return json({ error: `Path not found: ${path}` }, { status: 404 });
+		}
+
+		const stat = statSync(path);
+		if (!stat.isDirectory()) {
+			return json({ error: `Not a directory: ${path}` }, { status: 400 });
+		}
+
+		const entries: FileEntry[] = [];
+		const dirEntries = readdirSync(path, { withFileTypes: true });
+
+		for (const entry of dirEntries) {
+			try {
+				const fullPath = join(path, entry.name);
+				const entryStat = statSync(fullPath);
+
+				entries.push({
+					name: entry.name,
+					path: fullPath,
+					type: entry.isDirectory() ? 'directory' : entry.isSymbolicLink() ? 'symlink' : 'file',
+					size: entryStat.size,
+					mtime: entryStat.mtime.toISOString(),
+					mode: (entryStat.mode & 0o777).toString(8).padStart(3, '0')
+				});
+			} catch {
+				// Skip entries we can't stat (permission issues, etc.)
+			}
+		}
+
+		// Sort: directories first, then alphabetically
+		entries.sort((a, b) => {
+			if (a.type === 'directory' && b.type !== 'directory') return -1;
+			if (a.type !== 'directory' && b.type === 'directory') return 1;
+			return a.name.localeCompare(b.name);
+		});
+
+		return json({
+			path,
+			parent: path === '/' ? null : join(path, '..'),
+			entries
+		});
+	} catch (error) {
+		console.error('Error listing directory:', error);
+		const message = error instanceof Error ? error.message : 'Unknown error';
+		return json({ error: `Failed to list directory: ${message}` }, { status: 500 });
+	}
+};

src/routes/api/system/files/content/+server.ts

@@ -0,0 +1,55 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { readFileSync, existsSync, statSync } from 'node:fs';
+import { authorize } from '$lib/server/authorize';
+
+/**
+ * GET /api/system/files/content
+ * Read file content from Dockhand's local filesystem
+ *
+ * Query params:
+ * - path: File path to read
+ */
+export const GET: RequestHandler = async ({ url, cookies }) => {
+	const auth = await authorize(cookies);
+
+	if (auth.authEnabled && !await auth.can('stacks', 'edit')) {
+		return json({ error: 'Permission denied' }, { status: 403 });
+	}
+
+	const path = url.searchParams.get('path');
+
+	if (!path) {
+		return json({ error: 'Path is required' }, { status: 400 });
+	}
+
+	try {
+		if (!existsSync(path)) {
+			return json({ error: `File not found: ${path}` }, { status: 404 });
+		}
+
+		const stat = statSync(path);
+		if (stat.isDirectory()) {
+			return json({ error: `Cannot read directory as file: ${path}` }, { status: 400 });
+		}
+
+		// Limit file size to 10MB
+		const maxSize = 10 * 1024 * 1024;
+		if (stat.size > maxSize) {
+			return json({ error: `File too large (max ${maxSize / 1024 / 1024}MB)` }, { status: 400 });
+		}
+
+		const content = readFileSync(path, 'utf-8');
+
+		return json({
+			path,
+			content,
+			size: stat.size,
+			mtime: stat.mtime.toISOString()
+		});
+	} catch (error) {
+		console.error('Error reading file:', error);
+		const message = error instanceof Error ? error.message : 'Unknown error';
+		return json({ error: `Failed to read file: ${message}` }, { status: 500 });
+	}
+};

src/routes/dashboard/dashboard-connecting-state.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Loader2 } from 'lucide-svelte';
+
+	interface Props {
+		compact?: boolean;
+	}
+
+	let { compact = false }: Props = $props();
+</script>
+
+{#if compact}
+	<div class="flex items-center gap-2 text-muted-foreground py-1">
+		<Loader2 class="w-4 h-4 animate-spin opacity-50" />
+		<span class="text-xs">Connecting...</span>
+	</div>
+{:else}
+	<div class="flex flex-col items-center justify-center py-8 text-muted-foreground">
+		<Loader2 class="w-8 h-8 mb-2 animate-spin opacity-50" />
+		<span class="text-sm">Connecting to environment...</span>
+	</div>
+{/if}

src/routes/settings/general/ScanResultsModal.svelte

@@ -0,0 +1,601 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import * as Select from '$lib/components/ui/select';
+	import { Button } from '$lib/components/ui/button';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Label } from '$lib/components/ui/label';
+	import { Search, FolderOpen, CheckCircle2, SkipForward, AlertCircle, FileText, Import, Loader2, Play, HelpCircle } from 'lucide-svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { toast } from 'svelte-sonner';
+	import { onMount } from 'svelte';
+	import { getIconComponent } from '$lib/utils/icons';
+
+	interface RunningStackInfo {
+		envId: number;
+		envName: string;
+		containerCount: number;
+	}
+
+	interface DiscoveredStack {
+		name: string;
+		composePath: string;
+		envPath: string | null;
+		sourceDir?: string;
+		runningOn?: RunningStackInfo[];
+	}
+
+	interface AdoptedStack {
+		name: string;
+		envId: number;
+	}
+
+	interface ScanResult {
+		adopted: string[];
+		skipped: DiscoveredStack[];
+		errors: { path: string; error: string }[];
+		discovered: DiscoveredStack[];
+	}
+
+	interface Environment {
+		id: number;
+		name: string;
+		icon: string;
+	}
+
+	interface Props {
+		open: boolean;
+		result: ScanResult | null;
+		scannedPaths: string[];
+		onclose: () => void;
+		onAdopted?: () => void; // Callback when stacks are adopted
+	}
+
+	let { open = $bindable(), result, scannedPaths, onclose, onAdopted }: Props = $props();
+
+	// Selection state - maps composePath to environmentId
+	let stackSelections = $state<Map<string, number>>(new Map());
+	let adopting = $state(false);
+
+	// Track adopted stacks with their environment (for display)
+	let adoptedStacks = $state<AdoptedStack[]>([]);
+
+	// Environment state
+	let environments = $state<Environment[]>([]);
+	let defaultEnvId = $state<number | null>(null);
+	let loadingEnvs = $state(true);
+
+	// Load environments on mount
+	onMount(async () => {
+		try {
+			const response = await fetch('/api/environments');
+			if (response.ok) {
+				environments = await response.json();
+				// Default to first environment
+				if (environments.length > 0) {
+					defaultEnvId = environments[0].id;
+				}
+			}
+		} catch (err) {
+			console.error('Failed to load environments:', err);
+		} finally {
+			loadingEnvs = false;
+		}
+	});
+
+	// Track if we've initialized selections for this modal session
+	let hasInitialized = $state(false);
+
+	// Reset selection when modal opens with new results (only on initial open)
+	$effect(() => {
+		if (open && result && defaultEnvId !== null && !hasInitialized) {
+			// Pre-select all discovered stacks
+			// Auto-select the environment where stack is already running, otherwise use default
+			const newSelections = new Map<string, number>();
+			for (const stack of result.discovered) {
+				const runningEnvId = stack.runningOn?.[0]?.envId;
+				newSelections.set(stack.composePath, runningEnvId ?? defaultEnvId);
+			}
+			stackSelections = newSelections;
+			hasInitialized = true;
+		}
+		// Reset tracker when modal closes
+		if (!open) {
+			hasInitialized = false;
+			adoptedStacks = [];
+		}
+	});
+
+	const selectedCount = $derived(stackSelections.size);
+
+	const allSelected = $derived(
+		result?.discovered.length > 0 &&
+		stackSelections.size === result.discovered.length
+	);
+
+	const someSelected = $derived(
+		stackSelections.size > 0 &&
+		result?.discovered.length > 0 &&
+		stackSelections.size < result.discovered.length
+	);
+
+	const defaultEnv = $derived(environments.find(e => e.id === defaultEnvId));
+	const defaultEnvName = $derived(defaultEnv?.name || 'Select environment');
+	const DefaultEnvIcon = $derived(defaultEnv ? getIconComponent(defaultEnv.icon || 'globe') : null);
+
+	function isSelected(composePath: string): boolean {
+		return stackSelections.has(composePath);
+	}
+
+	function getStackEnvId(composePath: string): number | null {
+		return stackSelections.get(composePath) ?? null;
+	}
+
+	function getStackEnv(composePath: string): Environment | null {
+		const envId = stackSelections.get(composePath);
+		return envId ? environments.find(e => e.id === envId) ?? null : null;
+	}
+
+	function toggleStack(composePath: string) {
+		const newMap = new Map(stackSelections);
+		if (newMap.has(composePath)) {
+			newMap.delete(composePath);
+		} else if (defaultEnvId !== null) {
+			newMap.set(composePath, defaultEnvId);
+		}
+		stackSelections = newMap;
+	}
+
+	function setStackEnv(composePath: string, envId: number) {
+		const newMap = new Map(stackSelections);
+		newMap.set(composePath, envId);
+		stackSelections = newMap;
+	}
+
+	function toggleAll() {
+		if (!result || defaultEnvId === null) return;
+
+		if (allSelected) {
+			stackSelections = new Map();
+		} else {
+			const newSelections = new Map<string, number>();
+			for (const stack of result.discovered) {
+				// Preserve existing env selection or use default
+				const existingEnv = stackSelections.get(stack.composePath);
+				newSelections.set(stack.composePath, existingEnv ?? defaultEnvId);
+			}
+			stackSelections = newSelections;
+		}
+	}
+
+	function applyDefaultEnvToAll() {
+		if (!result || defaultEnvId === null) return;
+		const newMap = new Map<string, number>();
+		for (const [path] of stackSelections) {
+			newMap.set(path, defaultEnvId);
+		}
+		stackSelections = newMap;
+	}
+
+	async function handleAdopt() {
+		if (!result || stackSelections.size === 0) return;
+
+		// Group stacks by environment
+		const stacksByEnv = new Map<number, DiscoveredStack[]>();
+		for (const [composePath, envId] of stackSelections) {
+			const stack = result.discovered.find(d => d.composePath === composePath);
+			if (stack) {
+				if (!stacksByEnv.has(envId)) {
+					stacksByEnv.set(envId, []);
+				}
+				stacksByEnv.get(envId)!.push(stack);
+			}
+		}
+
+		adopting = true;
+		let totalAdopted: AdoptedStack[] = [];
+		let totalFailed: { name: string; error: string }[] = [];
+
+		try {
+			// Adopt each group to its environment
+			for (const [envId, stacks] of stacksByEnv) {
+				const response = await fetch('/api/stacks/adopt', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({
+						stacks,
+						environmentId: envId
+					})
+				});
+
+				const data = await response.json();
+
+				if (!response.ok) {
+					// Add all stacks in this batch as failed
+					for (const stack of stacks) {
+						totalFailed.push({ name: stack.name, error: data.error || 'Failed to adopt' });
+					}
+				} else {
+					// Track adopted stacks with their environment
+					for (const name of (data.adopted || [])) {
+						totalAdopted.push({ name, envId });
+					}
+					totalFailed.push(...(data.failed || []));
+				}
+			}
+
+			if (totalAdopted.length > 0) {
+				toast.success(`Adopted ${totalAdopted.length} stack(s)`);
+			}
+			if (totalFailed.length > 0) {
+				toast.error(`Failed to adopt ${totalFailed.length} stack(s)`);
+			}
+
+			// Update the result to reflect adopted stacks
+			const adoptedNames = new Set(totalAdopted.map(s => s.name));
+			const adoptedPaths = new Set(
+				result.discovered
+					.filter(d => stackSelections.has(d.composePath) && adoptedNames.has(d.name))
+					.map(d => d.composePath)
+			);
+
+			// Add to local adopted stacks list (with env info)
+			adoptedStacks = [...adoptedStacks, ...totalAdopted];
+
+			result = {
+				...result,
+				adopted: [...result.adopted, ...totalAdopted.map(s => s.name)],
+				discovered: result.discovered.filter(d => !adoptedPaths.has(d.composePath))
+			};
+
+			// Clear selections for adopted stacks
+			const newSelections = new Map(stackSelections);
+			for (const path of adoptedPaths) {
+				newSelections.delete(path);
+			}
+			stackSelections = newSelections;
+
+			// Notify parent of adoption
+			onAdopted?.();
+
+		} catch (err) {
+			toast.error('Failed to adopt stacks');
+		} finally {
+			adopting = false;
+		}
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={(isOpen) => !isOpen && onclose()}>
+	<Dialog.Content class="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col">
+		<Dialog.Header>
+			<Dialog.Title class="flex items-center gap-2">
+				<Search class="w-5 h-5" />
+				External stack scan results
+			</Dialog.Title>
+			<Dialog.Description>
+				Scanned {scannedPaths.length} configured path{scannedPaths.length !== 1 ? 's' : ''} for Docker Compose files
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if result}
+			<!-- Sticky header with summary and environment selector -->
+			<div class="space-y-3 py-2 border-b bg-background">
+				<!-- Summary -->
+				<div class="flex items-center gap-4 p-3 rounded-lg bg-muted/50">
+					<div class="flex items-center gap-2">
+						<FolderOpen class="w-4 h-4 text-muted-foreground" />
+						<span class="text-sm font-medium">{result.discovered.length + result.skipped.length + adoptedStacks.length} found</span>
+					</div>
+					{#if result.discovered.length > 0}
+						<div class="flex items-center gap-1.5 text-blue-600 dark:text-blue-500">
+							<Import class="w-4 h-4" />
+							<span class="text-sm">{result.discovered.length} new</span>
+						</div>
+					{/if}
+					{#if adoptedStacks.length > 0}
+						<div class="flex items-center gap-1.5 text-green-600 dark:text-green-500">
+							<CheckCircle2 class="w-4 h-4" />
+							<span class="text-sm">{adoptedStacks.length} adopted</span>
+						</div>
+					{/if}
+					{#if result.skipped.length > 0}
+						<div class="flex items-center gap-1.5 text-muted-foreground">
+							<SkipForward class="w-4 h-4" />
+							<span class="text-sm">{result.skipped.length} already adopted</span>
+						</div>
+					{/if}
+					{#if result.errors.length > 0}
+						<div class="flex items-center gap-1.5 text-destructive">
+							<AlertCircle class="w-4 h-4" />
+							<span class="text-sm">{result.errors.length} errors</span>
+						</div>
+					{/if}
+				</div>
+
+				<!-- Default environment selector (apply to all) - only show when multiple environments -->
+				{#if result.discovered.length > 0}
+					{#if loadingEnvs}
+						<div class="flex items-center gap-3 p-3 rounded-lg border bg-muted/30">
+							<Label class="text-sm font-medium shrink-0">Adopt to:</Label>
+							<div class="flex items-center gap-2 text-muted-foreground">
+								<Loader2 class="w-4 h-4 animate-spin" />
+								<span class="text-sm">Loading...</span>
+							</div>
+						</div>
+					{:else if environments.length === 0}
+						<div class="flex items-center gap-3 p-3 rounded-lg border bg-muted/30">
+							<p class="text-sm text-destructive">No environments configured</p>
+						</div>
+					{:else if environments.length > 1}
+						<div class="flex items-center gap-3 p-3 rounded-lg border bg-muted/30">
+							<Label class="text-sm font-medium shrink-0">Adopt to:</Label>
+							<Select.Root
+								type="single"
+								value={defaultEnvId?.toString()}
+								onValueChange={(v) => {
+									defaultEnvId = v ? parseInt(v) : null;
+								}}
+							>
+								<Select.Trigger class="w-[220px]">
+									{#if DefaultEnvIcon}
+										<DefaultEnvIcon class="w-4 h-4 mr-2 shrink-0" />
+									{/if}
+									<span class="truncate">{defaultEnvName}</span>
+								</Select.Trigger>
+								<Select.Content>
+									{#each environments as env}
+										{@const EnvIcon = getIconComponent(env.icon || 'globe')}
+										<Select.Item value={env.id.toString()}>
+											<div class="flex items-center gap-2">
+												<EnvIcon class="w-4 h-4 shrink-0" />
+												<span>{env.name}</span>
+											</div>
+										</Select.Item>
+									{/each}
+								</Select.Content>
+							</Select.Root>
+							<Button variant="outline" size="sm" onclick={applyDefaultEnvToAll} disabled={stackSelections.size === 0}>
+								Apply to all
+							</Button>
+						</div>
+					{/if}
+				{/if}
+			</div>
+
+			<!-- Scrollable content -->
+			<div class="flex-1 overflow-y-auto space-y-4 py-2">
+				<!-- Discovered stacks (available for import) -->
+				{#if result.discovered.length > 0}
+					<div class="space-y-2">
+						<div class="flex items-center justify-between">
+							<h4 class="text-sm font-medium flex items-center gap-2 text-blue-600 dark:text-blue-500">
+								<Import class="w-4 h-4" />
+								Available for adoption
+							</h4>
+							<button
+								type="button"
+								class="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+								onclick={toggleAll}
+							>
+								<Checkbox checked={allSelected} indeterminate={someSelected} />
+								<span>{allSelected ? 'Deselect all' : 'Select all'}</span>
+							</button>
+						</div>
+						<div class="space-y-1.5">
+							{#each result.discovered as stack}
+								{@const stackEnvId = getStackEnvId(stack.composePath)}
+								{@const stackEnv = stackEnvId ? environments.find(e => e.id === stackEnvId) : null}
+								<div
+									class="flex items-start gap-3 p-2 rounded-md border transition-colors
+										{isSelected(stack.composePath)
+											? 'bg-blue-500/10 border-blue-500/30'
+											: 'bg-muted/30 border-transparent hover:bg-muted/50'}"
+								>
+									<button
+										type="button"
+										class="pt-0.5 shrink-0"
+										onclick={() => toggleStack(stack.composePath)}
+									>
+										<Checkbox checked={isSelected(stack.composePath)} />
+									</button>
+									<button
+										type="button"
+										class="flex-1 min-w-0 text-left"
+										onclick={() => toggleStack(stack.composePath)}
+									>
+										<div class="flex items-center gap-2 flex-wrap">
+											<p class="text-sm font-medium">{stack.name}</p>
+											{#if stack.runningOn && stack.runningOn.length > 0}
+												<Badge variant="outline" class="text-xs text-green-600 dark:text-green-500 border-green-300 dark:border-green-600 gap-1">
+													<Play class="w-3 h-3" />
+													Running on {stack.runningOn.map(r => r.envName).join(', ')}
+													<Tooltip.Root>
+														<Tooltip.Trigger>
+															<HelpCircle class="w-3 h-3 opacity-60" />
+														</Tooltip.Trigger>
+														<Tooltip.Content class="max-w-sm">
+															<p class="text-xs">This stack is already running (detected via Docker's <code class="bg-muted px-1 rounded">com.docker.compose.project</code> label). Adopting will allow you to manage it through Dockhand.</p>
+														</Tooltip.Content>
+													</Tooltip.Root>
+												</Badge>
+											{/if}
+										</div>
+										<code class="text-xs text-muted-foreground block truncate" title={stack.composePath}>{stack.composePath}</code>
+										{#if stack.envPath}
+											<p class="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
+												<FileText class="w-3 h-3" />
+												.env file detected
+											</p>
+										{/if}
+									</button>
+									<!-- Per-stack environment selector - only show when multiple environments -->
+									{#if isSelected(stack.composePath) && environments.length > 1}
+										<div class="shrink-0 flex items-center gap-2" onclick={(e) => e.stopPropagation()}>
+											<!-- Note if importing to different environment than running -->
+											{#if stack.runningOn && stack.runningOn.length > 0 && !stack.runningOn.some(r => r.envId === stackEnvId)}
+												<Badge variant="outline" class="text-xs text-amber-600 dark:text-amber-500 border-amber-300 dark:border-amber-600 gap-1">
+													Running elsewhere
+													<Tooltip.Root>
+														<Tooltip.Trigger>
+															<HelpCircle class="w-3 h-3 opacity-60" />
+														</Tooltip.Trigger>
+														<Tooltip.Content class="max-w-sm">
+															<p class="text-xs">This stack is running on a different environment ({stack.runningOn?.map(r => r.envName).join(', ')}). You can still adopt it here, but it won't affect the running containers.</p>
+														</Tooltip.Content>
+													</Tooltip.Root>
+												</Badge>
+											{/if}
+											<Select.Root
+												type="single"
+												value={stackEnvId?.toString() || ''}
+												onValueChange={(v) => {
+													if (v) setStackEnv(stack.composePath, parseInt(v));
+												}}
+											>
+												<Select.Trigger class="h-8 w-[220px] text-xs">
+													{#if getStackEnv(stack.composePath)}
+														{@const StackIcon = getIconComponent(getStackEnv(stack.composePath)?.icon || 'globe')}
+														<StackIcon class="w-3.5 h-3.5 mr-1.5 shrink-0" />
+													{/if}
+													<span class="truncate">{getStackEnv(stack.composePath)?.name || 'Select'}</span>
+												</Select.Trigger>
+												<Select.Content>
+													{#each environments as env}
+														{@const EnvIcon = getIconComponent(env.icon || 'globe')}
+														<Select.Item value={env.id.toString()}>
+															<div class="flex items-center gap-2">
+																<EnvIcon class="w-3.5 h-3.5 shrink-0" />
+																<span>{env.name}</span>
+															</div>
+														</Select.Item>
+													{/each}
+												</Select.Content>
+											</Select.Root>
+										</div>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				<!-- Adopted stacks (just adopted in this session) -->
+				{#if adoptedStacks.length > 0}
+					<div class="space-y-2">
+						<h4 class="text-sm font-medium flex items-center gap-2 text-green-600 dark:text-green-500">
+							<CheckCircle2 class="w-4 h-4" />
+							Adopted stacks
+						</h4>
+						<div class="space-y-1.5">
+							{#each adoptedStacks as adopted}
+								{@const env = environments.find(e => e.id === adopted.envId)}
+								{@const EnvIcon = env ? getIconComponent(env.icon || 'globe') : null}
+								<div class="flex items-center gap-2 p-2 rounded-md bg-green-500/10 border border-green-500/20">
+									<CheckCircle2 class="w-4 h-4 text-green-600 dark:text-green-500 shrink-0" />
+									<p class="text-sm font-medium flex-1">{adopted.name}</p>
+									{#if env}
+										<div class="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+											{#if EnvIcon}
+												<EnvIcon class="w-3.5 h-3.5" />
+											{/if}
+											<span>{env.name}</span>
+										</div>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				<!-- Skipped stacks (already adopted) -->
+				{#if result.skipped.length > 0}
+					<div class="space-y-2">
+						<h4 class="text-sm font-medium flex items-center gap-2 text-muted-foreground">
+							<SkipForward class="w-4 h-4" />
+							Already adopted
+						</h4>
+						<div class="space-y-1.5">
+							{#each result.skipped as stack}
+								<div class="flex items-start gap-2 p-2 rounded-md bg-muted/50">
+									<SkipForward class="w-4 h-4 text-muted-foreground shrink-0 mt-0.5" />
+									<div class="flex-1 min-w-0">
+										<p class="text-sm font-medium">{stack.name}</p>
+										<code class="text-xs text-muted-foreground block truncate" title={stack.composePath}>{stack.composePath}</code>
+									</div>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				<!-- Errors -->
+				{#if result.errors.length > 0}
+					<div class="space-y-2">
+						<h4 class="text-sm font-medium flex items-center gap-2 text-destructive">
+							<AlertCircle class="w-4 h-4" />
+							Errors
+						</h4>
+						<div class="space-y-1.5">
+							{#each result.errors as error}
+								<div class="flex items-start gap-2 p-2 rounded-md bg-destructive/10 border border-destructive/20">
+									<AlertCircle class="w-4 h-4 text-destructive shrink-0 mt-0.5" />
+									<div class="flex-1 min-w-0">
+										<code class="text-xs block truncate" title={error.path}>{error.path}</code>
+										<p class="text-xs text-destructive">{error.error}</p>
+									</div>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				<!-- No results message -->
+				{#if result.discovered.length === 0 && result.skipped.length === 0 && result.adopted.length === 0 && result.errors.length === 0}
+					<div class="text-center py-8 text-muted-foreground">
+						<FolderOpen class="w-12 h-12 mx-auto mb-3 opacity-50" />
+						<p class="text-sm">No Docker Compose files found in the configured paths.</p>
+						<p class="text-xs mt-1">Make sure your paths contain docker-compose.yml, compose.yml, or similar files.</p>
+					</div>
+				{/if}
+
+				<!-- Scanned paths -->
+				<div class="space-y-2 pt-2 border-t">
+					<h4 class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Scanned paths</h4>
+					<div class="space-y-1">
+						{#each scannedPaths as path}
+							<code class="text-xs text-muted-foreground block">{path}</code>
+						{/each}
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer class="flex items-center justify-between">
+			<div class="text-xs text-muted-foreground">
+				{#if selectedCount > 0}
+					{selectedCount} stack{selectedCount !== 1 ? 's' : ''} selected
+				{/if}
+			</div>
+			<div class="flex items-center gap-2">
+				<Button variant="outline" onclick={() => { open = false; onclose(); }}>Close</Button>
+				{#if result && result.discovered.length > 0}
+					<Button
+						onclick={handleAdopt}
+						disabled={selectedCount === 0 || adopting}
+					>
+						{#if adopting}
+							<Loader2 class="w-4 h-4 mr-2 animate-spin" />
+							Adopting...
+						{:else}
+							<Import class="w-4 h-4 mr-2" />
+							Adopt selected
+						{/if}
+					</Button>
+				{:else if adoptedStacks.length > 0}
+					<Button href="/stacks">View stacks</Button>
+				{/if}
+			</div>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

src/routes/stacks/FilesystemBrowser.svelte

@@ -0,0 +1,394 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Button } from '$lib/components/ui/button';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Loader2, FolderOpen, File, FileText, ChevronRight, ArrowUp, AlertCircle, FolderPlus, Search, Import } from 'lucide-svelte';
+	import type { Component } from 'svelte';
+	import RecentLocationsPanel from './RecentLocationsPanel.svelte';
+
+	export interface FileEntry {
+		name: string;
+		path: string;
+		type: 'file' | 'directory' | 'symlink';
+		size: number;
+		mtime: string;
+		mode: string;
+	}
+
+	interface Props {
+		open: boolean;
+		title?: string;
+		/** Optional icon component to display before the title */
+		icon?: Component<{ class?: string }>;
+		description?: string;
+		initialPath?: string;
+		selectFilter?: RegExp;
+		selectMode?: 'file' | 'directory' | 'file_or_directory' | 'adopt';
+		/** For adopt mode: filter to highlight (e.g., /\.ya?ml$/i for compose files) */
+		highlightFilter?: RegExp;
+		/** For adopt mode: called when user clicks on a matching file */
+		onFilePreview?: (entry: FileEntry) => void;
+		/** For adopt mode: called when user clicks "Scan this folder" */
+		onScanDirectory?: (path: string) => void;
+		/** For adopt mode: show loading state on scan button */
+		scanning?: boolean;
+		onSelect: (path: string, name: string) => void;
+		onClose: () => void;
+	}
+
+	let {
+		open = $bindable(false),
+		title = 'Select file',
+		icon,
+		description,
+		initialPath = '/',
+		selectFilter,
+		selectMode = 'file',
+		highlightFilter,
+		onFilePreview,
+		onScanDirectory,
+		scanning = false,
+		onSelect,
+		onClose
+	}: Props = $props();
+
+	let currentPath = $state<string | null>(null);
+	let entries = $state<FileEntry[]>([]);
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Track selected file
+	let selectedPath = $state<string | null>(null);
+	let selectedName = $state<string | null>(null);
+
+	// Reference to recent locations panel
+	let recentLocationsPanel = $state<{ addLocation: (path: string) => Promise<void>; getFirstLocation: () => string | null } | null>(null);
+
+	// Expose methods for parent to call
+	export function getCurrentPath(): string | null {
+		return currentPath;
+	}
+
+	export function addRecentLocation(path: string): Promise<void> {
+		return recentLocationsPanel?.addLocation(path) ?? Promise.resolve();
+	}
+
+	// Load directory when dialog opens
+	$effect(() => {
+		if (open && !currentPath) {
+			// Wait a tick for the panel to load, then use first location or initialPath
+			setTimeout(() => {
+				const firstLocation = recentLocationsPanel?.getFirstLocation();
+				loadDirectory(firstLocation || initialPath);
+			}, 50);
+		}
+	});
+
+	function handleRecentSelect(path: string) {
+		loadDirectory(path);
+	}
+
+	async function loadDirectory(path: string) {
+		loading = true;
+		error = null;
+
+		try {
+			const res = await fetch(`/api/system/files?path=${encodeURIComponent(path)}`);
+			const data = await res.json();
+
+			if (!res.ok) {
+				error = data.error || 'Failed to load directory';
+				return;
+			}
+
+			currentPath = data.path;
+			entries = data.entries;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load directory';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleEntryClick(entry: FileEntry, doubleClick: boolean = false) {
+		if (selectMode === 'adopt') {
+			// Adopt mode: click on directory navigates, click on highlighted file triggers preview
+			if (entry.type === 'directory') {
+				loadDirectory(entry.path);
+			} else if (highlightFilter?.test(entry.name) && onFilePreview) {
+				onFilePreview(entry);
+			}
+			return;
+		}
+
+		if (entry.type === 'directory') {
+			if (selectMode === 'file_or_directory' && !doubleClick) {
+				// Single click on directory in file_or_directory mode - select it
+				selectedPath = entry.path;
+				selectedName = entry.name;
+			} else {
+				// Double click or other modes - navigate into directory
+				selectedPath = null;
+				selectedName = null;
+				loadDirectory(entry.path);
+			}
+		} else if (selectMode === 'file' || selectMode === 'file_or_directory') {
+			// Select file
+			selectedPath = entry.path;
+			selectedName = entry.name;
+		}
+	}
+
+	function handleGoUp() {
+		if (!currentPath || currentPath === '/') return;
+
+		const parent = currentPath.replace(/\/[^/]+$/, '') || '/';
+		selectedPath = null;
+		selectedName = null;
+		loadDirectory(parent);
+	}
+
+	function handleConfirm() {
+		if (selectMode === 'directory' && currentPath) {
+			// In directory mode, select the current directory
+			const name = currentPath === '/' ? '/' : currentPath.split('/').pop() || '';
+			onSelect(currentPath, name);
+			handleClose();
+		} else if (selectedPath && selectedName) {
+			// In file or file_or_directory mode, select the selected item
+			onSelect(selectedPath, selectedName);
+			handleClose();
+		} else if (selectMode === 'file_or_directory' && currentPath) {
+			// In file_or_directory mode with nothing selected, use current directory
+			const name = currentPath === '/' ? '/' : currentPath.split('/').pop() || '';
+			onSelect(currentPath, name);
+			handleClose();
+		}
+	}
+
+	function handleClose() {
+		currentPath = null;
+		entries = [];
+		selectedPath = null;
+		selectedName = null;
+		error = null;
+		open = false;
+		onClose();
+	}
+
+	function handleScan() {
+		if (currentPath && onScanDirectory) {
+			onScanDirectory(currentPath);
+		}
+	}
+
+	function isSelectable(entry: FileEntry): boolean {
+		if (selectMode === 'adopt') {
+			// In adopt mode, nothing is "selectable" in the traditional sense
+			return false;
+		}
+		if (selectMode === 'directory') {
+			return entry.type === 'directory';
+		}
+		if (selectMode === 'file_or_directory') {
+			// Directories are always selectable, files must match filter
+			if (entry.type === 'directory') return true;
+			if (!selectFilter) return true;
+			return selectFilter.test(entry.name);
+		}
+		// File mode
+		if (entry.type === 'directory') return false;
+		if (!selectFilter) return true;
+		return selectFilter.test(entry.name);
+	}
+
+	function isHighlighted(entry: FileEntry): boolean {
+		if (entry.type === 'directory') return false;
+		if (!highlightFilter) return false;
+		return highlightFilter.test(entry.name);
+	}
+
+	function formatSize(bytes: number): string {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	}
+
+	const canGoUp = $derived(currentPath && currentPath !== '/');
+
+	// In directory mode, only show directories; otherwise show all
+	const filteredEntries = $derived(
+		selectMode === 'directory'
+			? entries.filter(e => e.type === 'directory')
+			: entries
+	);
+
+	const isAdoptMode = $derived(selectMode === 'adopt');
+</script>
+
+<Dialog.Root bind:open onOpenChange={(isOpen) => { if (!isOpen) handleClose(); }}>
+	<Dialog.Content class="max-w-4xl h-[80vh] flex flex-col {isAdoptMode ? 'p-0 gap-0' : ''}">
+		<Dialog.Header class={isAdoptMode ? 'px-6 py-4 border-b shrink-0' : ''}>
+			<Dialog.Title class="flex items-center gap-2">
+				{#if icon}
+					<svelte:component this={icon} class="w-5 h-5" />
+				{/if}
+				{title}
+			</Dialog.Title>
+			{#if description}
+				<Dialog.Description>{description}</Dialog.Description>
+			{/if}
+		</Dialog.Header>
+
+		<div class="flex-1 overflow-hidden flex {isAdoptMode ? 'min-h-0' : ''}">
+			<!-- Recent locations sidebar -->
+			<RecentLocationsPanel
+				bind:this={recentLocationsPanel}
+				{currentPath}
+				onSelect={handleRecentSelect}
+			/>
+
+			<!-- Main browser area -->
+			<div class="flex-1 flex flex-col min-h-0">
+				<!-- Path bar -->
+				<div class="flex items-center gap-2 px-4 py-2 border-b bg-muted/30">
+					<button
+						type="button"
+						class="p-1 rounded hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed"
+						disabled={!canGoUp}
+						onclick={handleGoUp}
+						title="Go up"
+					>
+						<ArrowUp class="w-4 h-4" />
+					</button>
+					<code class="text-xs bg-muted px-2 py-1 rounded truncate flex-1">{currentPath || '/'}</code>
+					{#if isAdoptMode}
+						<Button
+							variant="default"
+							size="sm"
+							onclick={handleScan}
+							disabled={scanning || !currentPath}
+						>
+							{#if scanning}
+								<Loader2 class="w-4 h-4 mr-2 animate-spin" />
+								Scanning...
+							{:else}
+								<Search class="w-4 h-4 mr-2" />
+								Scan this folder
+							{/if}
+						</Button>
+					{/if}
+				</div>
+
+				<!-- File list -->
+				<div class="flex-1 overflow-auto">
+				{#if loading}
+					<div class="flex items-center justify-center py-12">
+						<Loader2 class="w-6 h-6 animate-spin text-muted-foreground" />
+					</div>
+				{:else if error}
+					<div class="flex flex-col items-center justify-center py-12 px-4 text-center">
+						<div class="w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-4">
+							<AlertCircle class="w-8 h-8 text-red-500" />
+						</div>
+						<p class="text-red-600 dark:text-red-400 font-medium">Unable to browse files</p>
+						<p class="text-sm text-muted-foreground mt-1">{error}</p>
+						<Button variant="outline" size="sm" class="mt-4" onclick={() => currentPath && loadDirectory(currentPath)}>
+							Retry
+						</Button>
+					</div>
+				{:else if filteredEntries.length === 0}
+					<div class="flex flex-col items-center justify-center py-12 text-muted-foreground">
+						<FolderOpen class="w-12 h-12 mb-3 opacity-50" />
+						<p>{selectMode === 'directory' ? 'No subdirectories' : 'Directory is empty'}</p>
+					</div>
+				{:else}
+					<div class="divide-y">
+						{#each filteredEntries as entry}
+							{@const selectable = isSelectable(entry)}
+							{@const highlighted = isHighlighted(entry)}
+							<button
+								type="button"
+								class="w-full flex items-center gap-3 px-4 {isAdoptMode ? 'py-1.5' : 'py-2'} hover:bg-muted/50 text-left transition-colors
+									{entry.type === 'directory' ? 'cursor-pointer' : (selectable || highlighted) ? 'cursor-pointer' : 'opacity-50 cursor-not-allowed'}
+									{selectedPath === entry.path ? 'bg-blue-50 dark:bg-blue-900/20' : ''}"
+								onclick={() => (entry.type === 'directory' || selectable || highlighted) && handleEntryClick(entry, false)}
+								ondblclick={() => entry.type === 'directory' && handleEntryClick(entry, true)}
+								disabled={entry.type !== 'directory' && !selectable && !highlighted}
+							>
+								{#if entry.type === 'directory'}
+									<FolderOpen class="w-4 h-4 text-blue-500 shrink-0" />
+								{:else if highlighted}
+									<FileText class="w-4 h-4 text-green-500 shrink-0" />
+								{:else}
+									<File class="w-4 h-4 text-zinc-400 shrink-0 {selectable ? 'text-green-500' : ''}" />
+								{/if}
+								<span class="flex-1 truncate {isAdoptMode ? 'text-xs' : 'text-sm'} {(selectable || highlighted) && entry.type !== 'directory' ? 'text-green-600 dark:text-green-400 font-medium' : ''}">
+									{entry.name}
+								</span>
+								{#if highlighted && isAdoptMode}
+									<Badge variant="secondary" class="text-xs">Compose file</Badge>
+								{:else if entry.type !== 'directory' && !isAdoptMode}
+									<span class="text-xs text-muted-foreground">{formatSize(entry.size)}</span>
+								{/if}
+								{#if entry.type === 'directory'}
+									<ChevronRight class="w-4 h-4 text-muted-foreground" />
+								{/if}
+							</button>
+						{/each}
+					</div>
+				{/if}
+				</div>
+			</div>
+		</div>
+
+		{#if !isAdoptMode}
+			<Dialog.Footer class="border-t pt-4">
+				{#if selectMode === 'directory'}
+					<div class="flex-1 flex items-center gap-2 min-w-0">
+						<span class="text-xs text-muted-foreground shrink-0">Selected:</span>
+						<code class="text-xs font-mono bg-muted px-2 py-1 rounded truncate" title={currentPath || '/'}>{currentPath || '/'}</code>
+					</div>
+				{:else if selectMode === 'file_or_directory'}
+					<div class="flex-1 flex items-center gap-2 min-w-0">
+						{#if selectedPath}
+							<span class="text-xs text-muted-foreground shrink-0">Selected:</span>
+							<code class="text-xs font-mono bg-muted px-2 py-1 rounded truncate" title={selectedPath}>{selectedPath}</code>
+						{:else}
+							<span class="text-xs text-muted-foreground">Click to select file or folder, double-click to enter folder</span>
+						{/if}
+					</div>
+				{:else if selectedPath}
+					<div class="flex-1 flex items-center gap-2 min-w-0">
+						<span class="text-xs text-muted-foreground shrink-0">Selected:</span>
+						<code class="text-xs font-mono bg-muted px-2 py-1 rounded truncate" title={selectedPath}>{selectedPath}</code>
+					</div>
+				{:else}
+					<div class="flex-1 text-xs text-muted-foreground">
+						Click a file to select it
+					</div>
+				{/if}
+				<Button variant="outline" onclick={handleClose}>
+					Cancel
+				</Button>
+				{#if selectMode === 'directory'}
+					<Button onclick={handleConfirm}>
+						<FolderPlus class="w-4 h-4 mr-2" />
+						Select
+					</Button>
+				{:else if selectMode === 'file_or_directory'}
+					<Button onclick={handleConfirm}>
+						Select
+					</Button>
+				{:else}
+					<Button
+						disabled={!selectedPath}
+						onclick={handleConfirm}
+					>
+						Select
+					</Button>
+				{/if}
+			</Dialog.Footer>
+		{/if}
+	</Dialog.Content>
+</Dialog.Root>

src/routes/stacks/ImportStackModal.svelte

@@ -0,0 +1,494 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Button } from '$lib/components/ui/button';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Import, Loader2, Play, Info } from 'lucide-svelte';
+	import FilesystemBrowser, { type FileEntry } from './FilesystemBrowser.svelte';
+	import CodeEditor from '$lib/components/CodeEditor.svelte';
+	import { toast } from 'svelte-sonner';
+	import { currentEnvironment, environments } from '$lib/stores/environment';
+	import { getIconComponent } from '$lib/utils/icons';
+
+	interface DiscoveredStack {
+		name: string;
+		composePath: string;
+		envPath: string | null;
+		sourceDir?: string;
+		serviceCount?: number;
+		running?: boolean;
+		containerCount?: number;
+	}
+
+	interface Props {
+		open: boolean;
+		onClose: () => void;
+		onAdopted?: () => void;
+	}
+
+	let { open = $bindable(), onClose, onAdopted }: Props = $props();
+
+	// View state: 'browse' | 'results'
+	let view = $state<'browse' | 'results'>('browse');
+
+	// Reference to filesystem browser
+	let filesystemBrowser = $state<{ getCurrentPath: () => string | null; addRecentLocation: (path: string) => Promise<void> } | null>(null);
+
+	// Scan results state
+	let scanResults = $state<DiscoveredStack[]>([]);
+	let scanning = $state(false);
+
+	// Selection and adopt state
+	let stackSelections = $state<Map<string, boolean>>(new Map());
+	let adopting = $state(false);
+
+	// Preview dialog state (for single file click)
+	let showPreview = $state(false);
+	let previewFile = $state<FileEntry | null>(null);
+	let previewContent = $state<string | null>(null);
+	let previewServiceCount = $state<number>(0);
+	let loadingPreview = $state(false);
+
+	// Use current environment from store
+	const envId = $derived($currentEnvironment?.id ?? null);
+	const envName = $derived($currentEnvironment?.name ?? 'Unknown');
+	// Look up the icon from the environments list since currentEnvironment doesn't store it
+	const currentEnvData = $derived($environments.find(e => e.id === envId));
+	const envIcon = $derived(currentEnvData?.icon || 'globe');
+	const EnvIconComponent = $derived(getIconComponent(envIcon));
+
+	// Reset when modal closes
+	$effect(() => {
+		if (!open) {
+			view = 'browse';
+			scanResults = [];
+			stackSelections = new Map();
+			showPreview = false;
+			previewFile = null;
+			previewContent = null;
+			previewServiceCount = 0;
+		}
+	});
+
+	async function handleFilePreview(entry: FileEntry) {
+		previewFile = entry;
+		showPreview = true;
+		loadingPreview = true;
+		previewContent = null;
+		previewServiceCount = 0;
+
+		try {
+			const res = await fetch(`/api/system/files/content?path=${encodeURIComponent(entry.path)}`);
+			if (res.ok) {
+				const data = await res.json();
+				previewContent = data.content || '';
+				// Count services in the compose file
+				const serviceMatches = previewContent?.match(/^services:\s*\n((?:\s{2,}\w+:.*\n?)+)/m);
+				if (serviceMatches) {
+					const servicesBlock = serviceMatches[1];
+					const serviceNames = servicesBlock.match(/^\s{2}\w+:/gm);
+					previewServiceCount = serviceNames?.length || 0;
+				}
+			}
+		} catch (e) {
+			console.error('Failed to load preview:', e);
+		} finally {
+			loadingPreview = false;
+		}
+	}
+
+	function confirmAdoptFromPreview() {
+		if (previewFile) {
+			adoptSingleFile(previewFile);
+			showPreview = false;
+		}
+	}
+
+	async function handleScanDirectory(path: string) {
+		scanning = true;
+
+		try {
+			const res = await fetch('/api/stacks/scan', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ path })
+			});
+
+			const data = await res.json();
+
+			if (!res.ok) {
+				toast.error(data.error || 'Failed to scan directory');
+				return;
+			}
+
+			const discovered: DiscoveredStack[] = data.discovered || [];
+
+			// Detect running stacks on current environment
+			if (envId && discovered.length > 0) {
+				try {
+					const runningRes = await fetch(`/api/stacks?env=${envId}`);
+					if (runningRes.ok) {
+						const runningStacks: Array<{ name: string; containers?: any[] }> = await runningRes.json();
+						const runningMap = new Map(
+							runningStacks.map((s) => [s.name.toLowerCase(), s])
+						);
+
+						for (const stack of discovered) {
+							const runningStack = runningMap.get(stack.name.toLowerCase());
+							if (runningStack) {
+								stack.running = true;
+								stack.containerCount = runningStack.containers?.length || 0;
+							}
+						}
+					}
+				} catch (e) {
+					console.error('Failed to detect running stacks:', e);
+				}
+			}
+
+			scanResults = discovered;
+
+			if (discovered.length === 0) {
+				toast.info('No compose stacks found in this directory');
+			} else {
+				const selections = new Map<string, boolean>();
+				for (const stack of discovered) {
+					// Don't pre-select stacks that are already running on this environment
+					selections.set(stack.composePath, !stack.running);
+				}
+				stackSelections = selections;
+				view = 'results';
+			}
+
+			await filesystemBrowser?.addRecentLocation(path);
+
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : 'Failed to scan directory');
+		} finally {
+			scanning = false;
+		}
+	}
+
+	async function adoptSingleFile(entry: FileEntry) {
+		if (!envId) {
+			toast.error('No environment selected');
+			return;
+		}
+
+		adopting = true;
+
+		try {
+			const parentDir = entry.path.replace(/\/[^/]+$/, '');
+			const stackName = parentDir.split('/').pop() || 'adopted-stack';
+			const envFilePath = `${parentDir}/.env`;
+
+			const stack: DiscoveredStack = {
+				name: stackName,
+				composePath: entry.path,
+				envPath: envFilePath,
+				sourceDir: parentDir
+			};
+
+			const res = await fetch('/api/stacks/adopt', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					stacks: [stack],
+					environmentId: envId
+				})
+			});
+
+			const data = await res.json();
+
+			if (!res.ok) {
+				toast.error(data.error || 'Failed to adopt stack');
+				return;
+			}
+
+			if (data.adopted?.length > 0) {
+				toast.success(`Adopted stack "${data.adopted[0]}"`);
+				await filesystemBrowser?.addRecentLocation(parentDir);
+				onAdopted?.();
+				handleClose();
+			} else if (data.failed?.length > 0) {
+				toast.error(`Failed: ${data.failed[0].error}`);
+			}
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : 'Failed to adopt');
+		} finally {
+			adopting = false;
+		}
+	}
+
+	async function handleAdoptSelected() {
+		if (!envId || stackSelections.size === 0) return;
+
+		const selectedStacks = scanResults.filter(s => stackSelections.get(s.composePath));
+		if (selectedStacks.length === 0) return;
+
+		adopting = true;
+
+		try {
+			const res = await fetch('/api/stacks/adopt', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					stacks: selectedStacks,
+					environmentId: envId
+				})
+			});
+
+			const data = await res.json();
+
+			if (!res.ok) {
+				toast.error(data.error || 'Failed to adopt stacks');
+				return;
+			}
+
+			if (data.adopted?.length > 0) {
+				toast.success(`Adopted ${data.adopted.length} stack(s)`);
+				onAdopted?.();
+				handleClose();
+			}
+			if (data.failed?.length > 0) {
+				toast.error(`Failed to adopt ${data.failed.length} stack(s)`);
+			}
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : 'Failed to adopt');
+		} finally {
+			adopting = false;
+		}
+	}
+
+	function toggleStack(composePath: string) {
+		const newMap = new Map(stackSelections);
+		newMap.set(composePath, !newMap.get(composePath));
+		stackSelections = newMap;
+	}
+
+	function toggleAll() {
+		const allSelected = scanResults.every(s => stackSelections.get(s.composePath));
+		const newMap = new Map<string, boolean>();
+		for (const stack of scanResults) {
+			newMap.set(stack.composePath, !allSelected);
+		}
+		stackSelections = newMap;
+	}
+
+	function handleClose() {
+		open = false;
+		onClose();
+	}
+
+	function goBackToBrowse() {
+		view = 'browse';
+		scanResults = [];
+		stackSelections = new Map();
+	}
+
+	const selectedCount = $derived([...stackSelections.values()].filter(v => v).length);
+	const allSelected = $derived(scanResults.length > 0 && scanResults.every(s => stackSelections.get(s.composePath)));
+
+	// Browser title with environment info
+	const browserTitle = $derived.by(() => {
+		const envPart = envName ? ` · ${envName}` : '';
+		return `Adopt stacks${envPart}`;
+	});
+</script>
+
+{#if view === 'browse'}
+	<!-- File Browser View - using FilesystemBrowser component -->
+	<FilesystemBrowser
+		bind:this={filesystemBrowser}
+		bind:open
+		title={browserTitle}
+		icon={Import}
+		description="Browse to a compose file or scan a directory for stacks."
+		selectMode="adopt"
+		highlightFilter={/\.ya?ml$/i}
+		onFilePreview={handleFilePreview}
+		onScanDirectory={handleScanDirectory}
+		{scanning}
+		onSelect={() => {}}
+		onClose={handleClose}
+	/>
+{:else}
+	<!-- Scan Results View -->
+	<Dialog.Root bind:open onOpenChange={(o) => !o && handleClose()}>
+		<Dialog.Content class="max-w-4xl h-[80vh] flex flex-col p-0 gap-0">
+			<Dialog.Header class="px-6 py-4 border-b shrink-0">
+				<Dialog.Title class="flex items-center gap-2">
+					<Import class="w-5 h-5" />
+					Select stacks to adopt
+					<span class="text-muted-foreground">·</span>
+					<EnvIconComponent class="w-4 h-4 text-muted-foreground" />
+					<span class="text-muted-foreground font-normal">{envName}</span>
+				</Dialog.Title>
+				<Dialog.Description>
+					{scanResults.length} stack(s) found. Select which ones to adopt into {envName}.
+				</Dialog.Description>
+			</Dialog.Header>
+
+			<div class="flex-1 flex flex-col min-h-0">
+				<!-- Stack list -->
+				<div class="flex-1 overflow-y-auto p-4">
+					<div class="space-y-2">
+						{#each scanResults as stack}
+							{@const isSelected = stackSelections.get(stack.composePath)}
+							{@const countsMismatch = stack.running && stack.serviceCount && stack.containerCount !== stack.serviceCount}
+							<div
+								class="flex items-start gap-3 p-3 rounded-lg border {isSelected ? 'border-primary/50 bg-primary/5' : 'border-border'}"
+							>
+								<Checkbox
+									checked={isSelected}
+									onCheckedChange={() => toggleStack(stack.composePath)}
+									class="mt-0.5"
+								/>
+								<div class="flex-1 min-w-0">
+									<div class="flex items-center gap-2 flex-wrap">
+										<span class="font-medium truncate">{stack.name}</span>
+										{#if stack.serviceCount}
+											<Badge variant="outline" class="text-xs">
+												{stack.serviceCount} service{stack.serviceCount !== 1 ? 's' : ''}
+											</Badge>
+										{/if}
+										{#if stack.running}
+											<Badge variant="default" class="text-xs {countsMismatch ? 'bg-amber-600' : 'bg-green-600'}">
+												<Play class="w-3 h-3 mr-1" />
+												{stack.containerCount} running
+											</Badge>
+										{/if}
+									</div>
+									<p class="text-xs text-muted-foreground truncate mt-0.5" title={stack.composePath}>
+										{stack.composePath}
+									</p>
+									{#if stack.envPath}
+										<p class="text-xs text-muted-foreground truncate" title={stack.envPath}>
+											.env: {stack.envPath}
+										</p>
+									{/if}
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+				<!-- Adopt info -->
+				<div class="px-4 py-3 border-t shrink-0">
+					<div class="flex items-start gap-2.5 text-xs bg-zinc-100 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700 rounded-md px-3 py-2.5">
+						<Info class="w-4 h-4 text-amber-500 shrink-0 mt-0.5" />
+						<span><span class="font-medium text-amber-600 dark:text-amber-400">What happens when you adopt:</span> <span class="text-zinc-600 dark:text-zinc-400">Dockhand will track these compose files, letting you edit, start, and stop the stacks from the UI. Your files stay in their current location.</span></span>
+					</div>
+				</div>
+			</div>
+
+			<!-- Footer -->
+			<div class="px-6 py-4 border-t flex items-center justify-between shrink-0">
+				<div class="flex items-center gap-3">
+					<Checkbox
+						checked={allSelected}
+						onCheckedChange={toggleAll}
+					/>
+					<span class="text-sm text-muted-foreground">
+						<span class="font-medium text-foreground">{selectedCount}</span> of {scanResults.length} selected
+					</span>
+				</div>
+				<div class="flex gap-2">
+					<Button variant="outline" onclick={goBackToBrowse}>
+						Back
+					</Button>
+					<Button variant="outline" onclick={handleClose}>
+						Cancel
+					</Button>
+					<Button
+						variant="default"
+						onclick={handleAdoptSelected}
+						disabled={adopting || selectedCount === 0}
+					>
+						{#if adopting}
+							<Loader2 class="w-4 h-4 mr-2 animate-spin" />
+							Adopting...
+						{:else}
+							<Import class="w-4 h-4 mr-2" />
+							Adopt {selectedCount} stack(s)
+						{/if}
+					</Button>
+				</div>
+			</div>
+		</Dialog.Content>
+	</Dialog.Root>
+{/if}
+
+<!-- Preview dialog for single file adopt -->
+<Dialog.Root bind:open={showPreview}>
+	<Dialog.Content class="max-w-3xl h-[70vh] flex flex-col p-0 gap-0">
+		<Dialog.Header class="px-5 py-4 border-b shrink-0">
+			<Dialog.Title class="flex items-center gap-2">
+				<Import class="w-5 h-5" />
+				Adopt this stack?
+			</Dialog.Title>
+			<Dialog.Description>
+				Review the compose file before adopting.
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if previewFile}
+			<div class="flex-1 flex flex-col min-h-0 overflow-hidden">
+				<!-- Stack info bar -->
+				<div class="px-5 py-3 border-b bg-muted/30 flex items-center gap-4 shrink-0">
+					<div class="flex items-center gap-2">
+						<span class="text-sm text-muted-foreground">Stack:</span>
+						<span class="font-medium">{previewFile.path.replace(/\/[^/]+$/, '').split('/').pop() || 'unknown'}</span>
+						{#if previewServiceCount > 0}
+							<Badge variant="outline" class="text-xs">
+								{previewServiceCount} service{previewServiceCount !== 1 ? 's' : ''}
+							</Badge>
+						{/if}
+					</div>
+					<div class="flex-1 min-w-0">
+						<code class="text-xs bg-muted px-2 py-1 rounded truncate block">{previewFile.path}</code>
+					</div>
+				</div>
+
+				<!-- Preview content with syntax highlighting -->
+				<div class="flex-1 min-h-0 p-3">
+					{#if loadingPreview}
+						<div class="flex items-center justify-center h-full">
+							<Loader2 class="w-6 h-6 animate-spin text-muted-foreground" />
+						</div>
+					{:else if previewContent}
+						<CodeEditor
+							value={previewContent}
+							language="yaml"
+							theme="dark"
+							readonly={true}
+							class="h-full rounded-md overflow-hidden border border-zinc-200 dark:border-zinc-700"
+						/>
+					{/if}
+				</div>
+
+				<!-- Adopt info -->
+				<div class="px-5 py-3 border-t shrink-0">
+					<div class="flex items-start gap-2.5 text-xs bg-zinc-100 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700 rounded-md px-3 py-2.5">
+						<Info class="w-4 h-4 text-amber-500 shrink-0 mt-0.5" />
+						<span><span class="font-medium text-amber-600 dark:text-amber-400">What happens when you adopt:</span> <span class="text-zinc-600 dark:text-zinc-400">Dockhand will track this compose file, letting you edit, start, and stop the stack from the UI. Your files stay in their current location.</span></span>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<div class="px-5 py-3 border-t flex justify-end gap-2 shrink-0">
+			<Button variant="outline" onclick={() => showPreview = false}>
+				Cancel
+			</Button>
+			<Button onclick={confirmAdoptFromPreview} disabled={adopting}>
+				{#if adopting}
+					<Loader2 class="w-4 h-4 mr-2 animate-spin" />
+					Adopting...
+				{:else}
+					<Import class="w-4 h-4 mr-2" />
+					Adopt stack
+				{/if}
+			</Button>
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

src/routes/stacks/PathBarItem.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { Copy, Check, FolderOpen, FolderSync } from 'lucide-svelte';
+
+	interface Props {
+		label: string;
+		path: string | null;
+		placeholder: string;
+		onCopy: () => void;
+		onBrowse: () => void;
+		onChangeLocation?: () => void; // Optional: relocate entire folder
+		defaultText?: string;
+		isSuggested?: boolean;
+		copied?: boolean;
+		sourceHint?: string; // e.g., "Using default location"
+	}
+
+	let {
+		label,
+		path,
+		placeholder,
+		onCopy,
+		onBrowse,
+		onChangeLocation,
+		defaultText = 'Default location',
+		isSuggested = false,
+		copied = false,
+		sourceHint
+	}: Props = $props();
+
+	// Truncate long paths - only truncate if really necessary
+	function truncatePath(pathStr: string, maxLength: number = 80): { truncated: string; full: string } {
+		if (!pathStr || pathStr.length <= maxLength) return { truncated: pathStr, full: pathStr };
+
+		const parts = pathStr.split('/');
+		const filename = parts.pop() || '';
+		const parent = parts.pop() || '';
+		const grandparent = parts.pop() || '';
+
+		// Try to show more context: .../{grandparent}/{parent}/{filename}
+		let truncated = `.../${grandparent}/${parent}/${filename}`;
+		if (truncated.length > maxLength) {
+			// Fall back to just parent/filename
+			truncated = `.../${parent}/${filename}`;
+		}
+		return { truncated, full: pathStr };
+	}
+
+	const displayPath = $derived(path ? truncatePath(path) : { truncated: '', full: '' });
+</script>
+
+<div class="flex flex-col gap-0.5">
+<div class="flex items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400">
+	<span class="font-medium text-zinc-600 dark:text-zinc-300 shrink-0">{label}</span>
+	<code
+		class="flex-1 min-w-0 truncate font-mono h-6 leading-6 {!path || isSuggested ? 'text-zinc-400 dark:text-zinc-500 italic' : ''}"
+		title={displayPath.full}
+	>
+		{displayPath.truncated || defaultText}
+	</code>
+	<button
+		onclick={onBrowse}
+		class="p-1 rounded transition-colors shrink-0 hover:bg-zinc-200 dark:hover:bg-zinc-700"
+		title={`Browse for ${label.toLowerCase()}`}
+	>
+		<FolderOpen class="w-3.5 h-3.5" />
+	</button>
+	{#if onChangeLocation}
+		<button
+			onclick={onChangeLocation}
+			class="p-1 rounded transition-colors shrink-0 hover:bg-zinc-200 dark:hover:bg-zinc-700"
+			title="Change location"
+		>
+			<FolderSync class="w-3.5 h-3.5" />
+		</button>
+	{/if}
+	<button
+		onclick={onCopy}
+		class="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors shrink-0 {!path ? 'opacity-40 cursor-not-allowed' : ''}"
+		title="Copy path"
+		disabled={!path}
+	>
+		{#if copied}
+			<Check class="w-3.5 h-3.5 text-green-500" />
+		{:else}
+			<Copy class="w-3.5 h-3.5" />
+		{/if}
+	</button>
+</div>
+{#if sourceHint}
+	<span class="text-[10px] text-zinc-400 dark:text-zinc-500 pl-[4.5rem]">{sourceHint}</span>
+{/if}
+</div>

src/routes/stacks/RecentLocationsPanel.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { FolderOpen, X, Home } from 'lucide-svelte';
+
+	interface Props {
+		currentPath?: string | null;
+		onSelect: (path: string) => void;
+	}
+
+	let {
+		currentPath = null,
+		onSelect
+	}: Props = $props();
+
+	let locations = $state<string[]>([]);
+	let defaultBasePath = $state<string | null>(null);
+
+	// Load recent locations and default base path on mount
+	$effect(() => {
+		loadLocations();
+		loadDefaultBasePath();
+	});
+
+	async function loadDefaultBasePath() {
+		try {
+			const response = await fetch('/api/stacks/base-path');
+			if (response.ok) {
+				const data = await response.json();
+				defaultBasePath = data.basePath;
+			}
+		} catch (e) {
+			console.error('Failed to load default base path:', e);
+		}
+	}
+
+	async function loadLocations() {
+		try {
+			const response = await fetch('/api/settings/general');
+			if (response.ok) {
+				const settings = await response.json();
+				locations = settings.externalStackPaths || [];
+			}
+		} catch (e) {
+			console.error('Failed to load recent locations:', e);
+		}
+	}
+
+	async function saveLocations(newLocations: string[]) {
+		try {
+			await fetch('/api/settings/general', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ externalStackPaths: newLocations })
+			});
+		} catch (e) {
+			console.error('Failed to save recent locations:', e);
+		}
+	}
+
+	async function handleRemove(path: string) {
+		const newLocations = locations.filter(p => p !== path);
+		locations = newLocations;
+		await saveLocations(newLocations);
+	}
+
+	export async function addLocation(path: string) {
+		if (!path || locations.includes(path)) return;
+		const newLocations = [path, ...locations].slice(0, 10);
+		locations = newLocations;
+		await saveLocations(newLocations);
+	}
+
+	export function getFirstLocation(): string | null {
+		return locations[0] || null;
+	}
+</script>
+
+<div class="w-56 border-r p-3 overflow-y-auto shrink-0">
+	<h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">Locations</h3>
+	<div class="space-y-1">
+		<!-- Default Dockhand location (always shown, not removable) -->
+		{#if defaultBasePath}
+			<button
+				type="button"
+				class="w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs hover:bg-muted text-left {currentPath === defaultBasePath ? 'bg-muted' : ''}"
+				onclick={() => onSelect(defaultBasePath!)}
+			>
+				<Home class="w-4 h-4 shrink-0 text-sky-500" />
+				<span class="truncate" title={defaultBasePath}>Dockhand default</span>
+			</button>
+		{/if}
+
+		<!-- Recent locations -->
+		{#each locations.filter(l => l !== defaultBasePath) as location}
+			<div class="group flex items-center gap-1">
+				<button
+					type="button"
+					class="flex-1 flex items-center gap-2 px-2 py-1.5 rounded text-xs hover:bg-muted text-left truncate {currentPath === location ? 'bg-muted' : ''}"
+					onclick={() => onSelect(location)}
+				>
+					<FolderOpen class="w-4 h-4 shrink-0 text-muted-foreground" />
+					<span class="truncate" title={location}>{location.split('/').pop() || location}</span>
+				</button>
+				<button
+					type="button"
+					class="p-1 opacity-0 group-hover:opacity-100 hover:bg-muted rounded transition-opacity"
+					onclick={() => handleRemove(location)}
+					title="Remove from recent"
+				>
+					<X class="w-3 h-3 text-muted-foreground" />
+				</button>
+			</div>
+		{/each}
+
+		{#if !defaultBasePath && locations.length === 0}
+			<p class="text-xs text-muted-foreground italic px-2">
+				No locations yet. Browse folders to add them here.
+			</p>
+		{/if}
+	</div>
+</div>