@anymux/connect 0.1.0

package/dist/index.js

@@ -0,0 +1,2539 @@
+import { bitbucketService, browserFsService, dropboxService, getScopeLabel, getScopeLabels, giteaService, githubService, gitlabService, googleService, indexeddbService, s3Service, serviceRegistry, webdavService } from "./scope-labels-B4VAwoL6.js";
+import { GitHostBrowser, GitHostBrowserModel, GitRepoBrowser, GitRepoBrowserModel, showActionToast, showErrorToast, showInfoToast } from "./GitBrowser-BLgTNQyd.js";
+import { ObjectStorageBrowser, ObjectStorageBrowserModel } from "./ObjectStorageBrowser-B_25Emfu.js";
+import { RepoPicker, RepoPickerModel } from "./RepoPicker-CoHMiJ-3.js";
+import { createAuthClient } from "better-auth/client";
+import { genericOAuthClient } from "better-auth/client/plugins";
+import { flow, makeAutoObservable, runInAction } from "mobx";
+import { match } from "ts-pattern";
+import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import * as icons from "lucide-react";
+import { AlertTriangle, ArrowLeft, Check, Clock, Copy, ExternalLink, FileEdit, FilePlus, History, Info, Loader2, Lock, LogOut, Minus, MoreHorizontal, Move, RefreshCw, Search, Shield, Trash2, Undo2, Upload, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ConnectionBadge } from "@anymux/ui/components/connection-badge";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@anymux/ui/components/dropdown-menu";
+import { LoadingSpinner } from "@anymux/ui/components/loading-spinner";
+import { PathBreadcrumb } from "@anymux/ui/components/path-breadcrumb";
+import { ErrorDisplay } from "@anymux/ui/components/error-display";
+import { StatusIndicator } from "@anymux/ui/components/status-indicator";
+
+//#region src/registry/services/microsoft.ts
+const microsoftService = {
+	id: "microsoft",
+	name: "Microsoft",
+	icon: "AppWindow",
+	color: "#00A4EF",
+	authProvider: "microsoft",
+	grantsUrl: "https://account.live.com/consent/Manage",
+	capabilities: [
+		{
+			id: "file-system",
+			supported: true
+		},
+		{
+			id: "object-storage",
+			supported: false
+		},
+		{
+			id: "git-repo",
+			supported: false
+		},
+		{
+			id: "git-host",
+			supported: false
+		},
+		{
+			id: "media",
+			supported: false
+		},
+		{
+			id: "contacts",
+			supported: true
+		},
+		{
+			id: "calendar",
+			supported: true
+		}
+	],
+	scopes: {
+		"file-system": ["Files.ReadWrite.All"],
+		"contacts": ["Contacts.Read"],
+		"calendar": ["Calendars.Read"]
+	}
+};
+
+//#endregion
+//#region src/registry/services/icloud.ts
+const icloudService = {
+	id: "icloud",
+	name: "iCloud",
+	icon: "Cloud",
+	color: "#007AFF",
+	authProvider: "icloud",
+	grantsUrl: "https://appleid.apple.com/account/manage",
+	capabilities: [
+		{
+			id: "file-system",
+			supported: false
+		},
+		{
+			id: "object-storage",
+			supported: false
+		},
+		{
+			id: "git-repo",
+			supported: false
+		},
+		{
+			id: "git-host",
+			supported: false
+		},
+		{
+			id: "media",
+			supported: false
+		},
+		{
+			id: "contacts",
+			supported: true
+		},
+		{
+			id: "calendar",
+			supported: true
+		}
+	],
+	scopes: {
+		contacts: [],
+		calendar: []
+	}
+};
+
+//#endregion
+//#region src/auth/auth-client.ts
+const PENDING_SERVICE_KEY = "anymux-pending-service";
+function createConnectAuthClient(baseURL) {
+	const authClient = createAuthClient({
+		baseURL,
+		plugins: [genericOAuthClient()]
+	});
+	return {
+		async signIn(provider, serviceId) {
+			sessionStorage.setItem(PENDING_SERVICE_KEY, serviceId);
+			const GENERIC_OAUTH_PROVIDERS = ["box", "bitbucket"];
+			if (GENERIC_OAUTH_PROVIDERS.includes(provider)) await authClient.signIn.oauth2({
+				providerId: provider,
+				callbackURL: window.location.href
+			});
+			else await authClient.signIn.social({
+				provider,
+				callbackURL: window.location.href
+			});
+		},
+		async signOut() {
+			await authClient.signOut();
+		},
+		async getSession() {
+			const session = await authClient.getSession();
+			if (!session.data) return null;
+			return { user: {
+				id: session.data.user.id,
+				name: session.data.user.name,
+				...session.data.user.image ? { image: session.data.user.image } : {}
+			} };
+		},
+		async getAccessToken(providerId) {
+			const result = await authClient.getAccessToken({ providerId });
+			return result.data?.accessToken ?? null;
+		},
+		async fetchConfiguredProviders() {
+			const res = await fetch(`${baseURL}/api/auth/configured`);
+			if (!res.ok) return {
+				database: false,
+				authSecret: false,
+				providers: {}
+			};
+			return res.json();
+		},
+		async fetchGrantedScopes() {
+			const res = await fetch(`${baseURL}/api/auth/scopes`, { credentials: "include" });
+			if (!res.ok) return {};
+			return res.json();
+		},
+		async fetchTestCredentials() {
+			const res = await fetch(`${baseURL}/api/auth/test-credentials`);
+			if (!res.ok) return {};
+			return res.json();
+		},
+		async fetchUserProfiles() {
+			const res = await fetch(`${baseURL}/api/auth/user-profiles`, { credentials: "include" });
+			if (!res.ok) return {};
+			return res.json();
+		},
+		async revokeProvider(providerId) {
+			const res = await fetch(`${baseURL}/api/auth/revoke-provider?provider=${encodeURIComponent(providerId)}`, {
+				method: "DELETE",
+				credentials: "include"
+			});
+			if (!res.ok) {
+				const text = await res.text().catch(() => "");
+				throw new Error(`revokeProvider ${providerId} failed: ${res.status} ${text}`);
+			}
+			const data = await res.json().catch(() => ({}));
+			console.info(`[AnyMux] revokeProvider(${providerId}): deleted=${data.deleted ?? "?"}`);
+		},
+		getPendingServiceId() {
+			return sessionStorage.getItem(PENDING_SERVICE_KEY);
+		},
+		clearPendingServiceId() {
+			sessionStorage.removeItem(PENDING_SERVICE_KEY);
+		}
+	};
+}
+
+//#endregion
+//#region src/auth/token-manager.ts
+const STORAGE_PREFIX = "anymux-connect-token:";
+var TokenManager = class {
+	getToken(serviceId) {
+		try {
+			return localStorage.getItem(STORAGE_PREFIX + serviceId);
+		} catch {
+			return null;
+		}
+	}
+	setToken(serviceId, token) {
+		try {
+			localStorage.setItem(STORAGE_PREFIX + serviceId, token);
+		} catch {}
+	}
+	removeToken(serviceId) {
+		try {
+			localStorage.removeItem(STORAGE_PREFIX + serviceId);
+		} catch {}
+	}
+};
+
+//#endregion
+//#region src/models/ConnectionManagerModel.ts
+const STORAGE_KEY = "anymux-connect-connections";
+const USER_PROFILES_STORAGE_KEY = "anymux-connect-user-profiles";
+var ConnectionManagerModel = class {
+	constructor(options) {
+		this.connections = new Map();
+		this.grantedScopes = new Map();
+		this.initialized = false;
+		this.configuredProviders = new Set();
+		this.configError = null;
+		this.userProfiles = new Map();
+		this.testCredentials = {};
+		this.pendingReconnect = new Set();
+		this.tokenManager = new TokenManager();
+		this.disconnect = flow(function* (serviceId) {
+			const service = serviceRegistry.get(serviceId);
+			this.tokenManager.removeToken(serviceId);
+			this.connections.set(serviceId, {
+				serviceId,
+				status: "disconnected",
+				scopes: []
+			});
+			if (service) this.grantedScopes.delete(service.authProvider);
+			this.userProfiles.delete(serviceId);
+			this.persistToStorage();
+			if (this.authClient) {
+				if (service) try {
+					console.info(`[AnyMux] disconnect(${serviceId}): revoking provider ${service.authProvider}…`);
+					yield this.authClient.revokeProvider(service.authProvider);
+					console.info(`[AnyMux] disconnect(${serviceId}): revoke succeeded`);
+				} catch (err) {
+					console.error("[AnyMux] revokeProvider FAILED:", err instanceof Error ? err.message : err);
+				}
+				try {
+					yield this.authClient.signOut();
+					console.info(`[AnyMux] disconnect(${serviceId}): signOut succeeded`);
+				} catch (err) {
+					console.warn("[AnyMux] signOut failed:", err instanceof Error ? err.message : err);
+				}
+			}
+		});
+		this.authClient = options?.authClient ?? null;
+		makeAutoObservable(this);
+		this.loadFromStorage();
+	}
+	async initialize() {
+		if (this.initialized) return;
+		if (this.authClient) {
+			const pendingServiceId = this.authClient.getPendingServiceId();
+			if (pendingServiceId) await this.handleOAuthReturn(pendingServiceId);
+		}
+		for (const service of serviceRegistry.getAll()) if (!this.connections.has(service.id)) this.connections.set(service.id, {
+			serviceId: service.id,
+			status: "loading",
+			scopes: []
+		});
+		if (this.authClient) {
+			try {
+				const config = await this.authClient.fetchConfiguredProviders();
+				runInAction(() => {
+					if (!config.database) {
+						this.configError = "Database not configured. Set DATABASE_URL in .env.local";
+						return;
+					}
+					if (!config.authSecret) {
+						this.configError = "Auth secret not configured. Set BETTER_AUTH_SECRET in .env.local";
+						return;
+					}
+					for (const [provider, configured] of Object.entries(config.providers)) if (configured) this.configuredProviders.add(provider);
+					for (const service of serviceRegistry.getAll()) {
+						if (service.authProvider === "s3" || service.authProvider === "webdav" || service.authProvider === "gitea" || service.authProvider === "browser-fs" || service.authProvider === "indexeddb") continue;
+						if (!this.configuredProviders.has(service.authProvider) && !this.isConnected(service.id)) this.connections.set(service.id, {
+							serviceId: service.id,
+							status: "not_configured",
+							scopes: []
+						});
+					}
+				});
+			} catch (err) {
+				console.warn("[AnyMux] Failed to fetch configured providers:", err instanceof Error ? err.message : err);
+				runInAction(() => {
+					this.configError = "Failed to reach server. Check your connection.";
+				});
+			}
+			try {
+				const scopes = await this.authClient.fetchGrantedScopes();
+				runInAction(() => {
+					for (const [provider, scopeList] of Object.entries(scopes)) this.grantedScopes.set(provider, scopeList);
+				});
+			} catch (err) {
+				console.warn("[AnyMux] Failed to fetch granted scopes:", err instanceof Error ? err.message : err);
+			}
+			try {
+				const creds = await this.authClient.fetchTestCredentials();
+				runInAction(() => {
+					this.testCredentials = creds;
+				});
+			} catch (err) {
+				console.warn("[AnyMux] Failed to fetch test credentials:", err instanceof Error ? err.message : err);
+			}
+		}
+		runInAction(() => {
+			for (const [id, conn] of this.connections) if (conn.status === "loading") this.connections.set(id, {
+				...conn,
+				status: "disconnected"
+			});
+			this.initialized = true;
+		});
+		if (this.authClient) this.fetchAndStoreUserProfiles();
+	}
+	/** Fetch per-provider profiles from the server and update the userProfiles map */
+	async fetchAndStoreUserProfiles() {
+		if (!this.authClient) return;
+		try {
+			const profilesByProvider = await this.authClient.fetchUserProfiles();
+			runInAction(() => {
+				for (const service of serviceRegistry.getAll()) {
+					const providerProfile = profilesByProvider[service.authProvider];
+					if (providerProfile && this.isConnected(service.id)) this.userProfiles.set(service.id, {
+						...providerProfile,
+						provider: service.id
+					});
+				}
+				this.persistToStorage();
+			});
+		} catch (err) {
+			console.warn("[AnyMux] Failed to fetch user profiles:", err instanceof Error ? err.message : err);
+		}
+	}
+	async handleOAuthReturn(pendingServiceId) {
+		if (!this.authClient) return;
+		const service = serviceRegistry.get(pendingServiceId);
+		if (service) {
+			let token = null;
+			for (let attempt = 0; attempt < 4; attempt++) {
+				try {
+					token = await this.authClient.getAccessToken(service.authProvider);
+					if (token) break;
+				} catch {}
+				if (attempt < 3) await new Promise((r) => setTimeout(r, 500 * (attempt + 1)));
+			}
+			if (token) {
+				let fallbackProfile;
+				try {
+					const session = await this.authClient.getSession();
+					if (session) {
+						const profile = {
+							id: session.user.id,
+							name: session.user.name,
+							provider: pendingServiceId
+						};
+						if (session.user.image) profile.avatarUrl = session.user.image;
+						fallbackProfile = profile;
+					}
+				} catch (err) {
+					console.warn(`[AnyMux] Failed to fetch session for ${pendingServiceId}:`, err instanceof Error ? err.message : err);
+				}
+				runInAction(() => {
+					this.tokenManager.setToken(pendingServiceId, token);
+					this.connections.set(pendingServiceId, {
+						serviceId: pendingServiceId,
+						status: "connected",
+						accessToken: token,
+						scopes: Object.values(service.scopes).flat(),
+						connectedAt: new Date()
+					});
+					if (fallbackProfile) this.userProfiles.set(pendingServiceId, fallbackProfile);
+					this.persistToStorage();
+				});
+			} else try {
+				const session = await this.authClient.getSession();
+				if (session) console.warn(`[AnyMux] OAuth for ${pendingServiceId}: session exists but getAccessToken returned null after 4 attempts`);
+			} catch {}
+		}
+		this.authClient.clearPendingServiceId();
+	}
+	loadFromStorage() {
+		try {
+			const stored = localStorage.getItem(STORAGE_KEY);
+			if (stored) {
+				const data = JSON.parse(stored);
+				for (const [key, value] of data) {
+					const token = this.tokenManager.getToken(key);
+					if (token) this.connections.set(key, {
+						...value,
+						accessToken: token
+					});
+				}
+			}
+			const storedProfiles = localStorage.getItem(USER_PROFILES_STORAGE_KEY);
+			if (storedProfiles) {
+				const entries = JSON.parse(storedProfiles);
+				for (const [key, value] of entries) this.userProfiles.set(key, value);
+			}
+		} catch {}
+	}
+	persistToStorage() {
+		try {
+			const data = Array.from(this.connections.entries()).map(([key, conn]) => [key, {
+				...conn,
+				accessToken: void 0
+			}]);
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+			const profileData = Array.from(this.userProfiles.entries());
+			localStorage.setItem(USER_PROFILES_STORAGE_KEY, JSON.stringify(profileData));
+		} catch {}
+	}
+	async connect(serviceId) {
+		const service = serviceRegistry.get(serviceId);
+		if (!service) return;
+		if (!this.authClient) {
+			this.connections.set(serviceId, {
+				serviceId,
+				status: "error",
+				scopes: []
+			});
+			return;
+		}
+		this.connections.set(serviceId, {
+			serviceId,
+			status: "connecting",
+			scopes: []
+		});
+		await this.authClient.signIn(service.authProvider, serviceId);
+	}
+	connectWithCredentials(serviceId, credentialToken) {
+		const service = serviceRegistry.get(serviceId);
+		if (!service) return;
+		this.tokenManager.setToken(serviceId, credentialToken);
+		this.connections.set(serviceId, {
+			serviceId,
+			status: "connected",
+			accessToken: credentialToken,
+			scopes: Object.values(service.scopes).flat(),
+			connectedAt: new Date()
+		});
+		this.persistToStorage();
+	}
+	requestReconnect(serviceId) {
+		this.pendingReconnect.add(serviceId);
+	}
+	clearReconnectRequest(serviceId) {
+		this.pendingReconnect.delete(serviceId);
+	}
+	isConnected(serviceId) {
+		return this.connections.get(serviceId)?.status === "connected";
+	}
+	getStatus(serviceId) {
+		return this.connections.get(serviceId)?.status ?? "disconnected";
+	}
+	getToken(serviceId) {
+		return this.tokenManager.getToken(serviceId);
+	}
+	/** Refresh OAuth token from better-auth. Returns fresh token or null. */
+	async refreshToken(serviceId) {
+		const service = serviceRegistry.get(serviceId);
+		if (!service || !this.authClient) {
+			console.warn(`[AnyMux] refreshToken(${serviceId}): no service or authClient`);
+			return null;
+		}
+		if ([
+			"s3",
+			"webdav",
+			"gitea",
+			"icloud",
+			"browser-fs",
+			"indexeddb"
+		].includes(service.authProvider)) return this.tokenManager.getToken(serviceId);
+		const oldToken = this.tokenManager.getToken(serviceId);
+		try {
+			const token = await this.authClient.getAccessToken(service.authProvider);
+			if (token) {
+				const changed = token !== oldToken;
+				console.info(`[AnyMux] refreshToken(${serviceId}): got token (${token.slice(0, 8)}…${token.slice(-4)}), changed=${changed}`);
+				this.tokenManager.setToken(serviceId, token);
+				const conn = this.connections.get(serviceId);
+				if (conn) this.connections.set(serviceId, {
+					...conn,
+					accessToken: token
+				});
+				return token;
+			}
+			console.warn(`[AnyMux] refreshToken(${serviceId}): getAccessToken returned null`);
+		} catch (err) {
+			console.warn(`[AnyMux] refreshToken(${serviceId}): error:`, err instanceof Error ? err.message : err);
+		}
+		console.warn(`[AnyMux] refreshToken(${serviceId}): falling back to stored token (${oldToken ? oldToken.slice(0, 8) + "…" : "null"})`);
+		return oldToken;
+	}
+	/** Get the full user profile for a connected service */
+	getUserProfile(serviceId) {
+		return this.userProfiles.get(serviceId);
+	}
+	/** @deprecated Use getUserProfile() instead. Kept for backward compat. */
+	getUserInfo(serviceId) {
+		const profile = this.userProfiles.get(serviceId);
+		if (!profile) return null;
+		return {
+			name: profile.name,
+			...profile.avatarUrl ? { image: profile.avatarUrl } : {}
+		};
+	}
+	hasCapabilityScopes(serviceId, capabilityId) {
+		const service = serviceRegistry.get(serviceId);
+		if (!service) return false;
+		if (service.authProvider === "s3" || service.authProvider === "webdav" || service.authProvider === "gitea" || service.authProvider === "browser-fs" || service.authProvider === "indexeddb") return true;
+		const requiredScopes = service.scopes[capabilityId];
+		if (!requiredScopes || requiredScopes.length === 0) return false;
+		if (!this.grantedScopes.has(service.authProvider)) return true;
+		const granted = this.grantedScopes.get(service.authProvider);
+		return requiredScopes.every((s) => granted.includes(s));
+	}
+};
+
+//#endregion
+//#region src/models/ActionNotificationModel.ts
+let nextId = 1;
+/**
+* Tracks user actions for toast notifications with undo support.
+* Uses sonner's toast() externally — this model just manages the action log.
+*/
+var ActionNotificationModel = class {
+	constructor() {
+		this.actions = [];
+		this.maxHistory = 100;
+		makeAutoObservable(this, {});
+	}
+	/**
+	* Record an action. Returns the action ID for reference.
+	* The caller is responsible for showing the toast via sonner's toast().
+	*/
+	record(type, description, undo) {
+		const id = `action-${nextId++}`;
+		const action = {
+			id,
+			type,
+			description,
+			timestamp: new Date(),
+			undo,
+			undone: false
+		};
+		this.actions.unshift(action);
+		if (this.actions.length > this.maxHistory) this.actions = this.actions.slice(0, this.maxHistory);
+		return id;
+	}
+	/** Mark an action as undone */
+	markUndone(id) {
+		const action = this.actions.find((a) => a.id === id);
+		if (action) action.undone = true;
+	}
+	get recentActions() {
+		return this.actions.slice(0, 20);
+	}
+	get undoableActions() {
+		return this.actions.filter((a) => a.undo && !a.undone);
+	}
+	clear() {
+		this.actions = [];
+	}
+};
+
+//#endregion
+//#region src/models/DashboardModel.ts
+const REPO_STORAGE_KEY = "anymux-selected-repos";
+var DashboardModel = class {
+	constructor(connectionManager) {
+		this.selectedCell = null;
+		this.panelOpen = false;
+		this.selectedRepos = {};
+		this.browserPath = "/";
+		this.gitBrowserState = null;
+		this.actionNotifications = new ActionNotificationModel();
+		this.connectionManager = connectionManager;
+		makeAutoObservable(this, {
+			onCellChange: false,
+			onPathChange: false
+		});
+		try {
+			const stored = localStorage.getItem(REPO_STORAGE_KEY);
+			if (stored) this.selectedRepos = JSON.parse(stored);
+			const oldGithub = localStorage.getItem("anymux-github-repo");
+			if (oldGithub && !this.selectedRepos["github"]) {
+				this.selectedRepos["github"] = JSON.parse(oldGithub);
+				this.persistRepos();
+				localStorage.removeItem("anymux-github-repo");
+			}
+		} catch {}
+	}
+	/** @deprecated Use getSelectedRepo('github') instead */
+	get githubRepo() {
+		return this.selectedRepos["github"] ?? null;
+	}
+	/** @deprecated Use setSelectedRepo('github', repo) instead */
+	setGitHubRepo(repo) {
+		this.setSelectedRepo("github", repo);
+	}
+	/** @deprecated Use clearSelectedRepo('github') instead */
+	clearGitHubRepo() {
+		this.clearSelectedRepo("github");
+	}
+	setSelectedRepo(serviceId, repo) {
+		this.selectedRepos[serviceId] = repo;
+		this.persistRepos();
+	}
+	clearSelectedRepo(serviceId) {
+		delete this.selectedRepos[serviceId];
+		this.persistRepos();
+	}
+	getSelectedRepo(serviceId) {
+		return this.selectedRepos[serviceId] ?? null;
+	}
+	persistRepos() {
+		try {
+			localStorage.setItem(REPO_STORAGE_KEY, JSON.stringify(this.selectedRepos));
+		} catch {}
+	}
+	selectCell(serviceId, capabilityId) {
+		const service = serviceRegistry.get(serviceId);
+		if (!service) return;
+		const capability = service.capabilities.find((c) => c.id === capabilityId);
+		if (!capability?.supported) return;
+		if (capabilityId === "git-repo" || capabilityId === "git-host" || capabilityId === "file-system") this.clearSelectedRepo(serviceId);
+		if (!this.connectionManager.isConnected(serviceId)) return;
+		this.selectedCell = {
+			serviceId,
+			capabilityId
+		};
+		this.panelOpen = true;
+		this.onCellChange?.({
+			serviceId,
+			capabilityId
+		});
+	}
+	/** Open a cell without checking connection/capability (used for URL restore) */
+	openCell(serviceId, capabilityId) {
+		if (capabilityId === "git-repo" || capabilityId === "git-host" || capabilityId === "file-system") this.clearSelectedRepo(serviceId);
+		this.selectedCell = {
+			serviceId,
+			capabilityId
+		};
+		this.panelOpen = true;
+	}
+	setBrowserPath(path) {
+		this.browserPath = path;
+		this.onPathChange?.(path);
+	}
+	setGitBrowserState(state) {
+		this.gitBrowserState = state;
+	}
+	closePanel() {
+		this.selectedCell = null;
+		this.panelOpen = false;
+		this.browserPath = "/";
+		this.gitBrowserState = null;
+		this.onCellChange?.(null);
+	}
+	/** Close panel without triggering onCellChange (used for URL-driven state sync, e.g. browser back) */
+	closePanelSilent() {
+		this.selectedCell = null;
+		this.panelOpen = false;
+		this.browserPath = "/";
+		this.gitBrowserState = null;
+	}
+	/** Set browser path without triggering onPathChange (used for URL-driven state sync) */
+	setBrowserPathSilent(path) {
+		this.browserPath = path;
+	}
+	get selectedService() {
+		if (!this.selectedCell) return null;
+		return serviceRegistry.get(this.selectedCell.serviceId) ?? null;
+	}
+	get selectedCapability() {
+		if (!this.selectedCell || !this.selectedService) return null;
+		return this.selectedService.capabilities.find((c) => c.id === this.selectedCell.capabilityId) ?? null;
+	}
+};
+
+//#endregion
+//#region src/models/CredentialFormModel.ts
+var CredentialFormModel = class {
+	constructor() {
+		this.open = false;
+		this.serviceType = "s3";
+		this.accessKeyId = "";
+		this.secretAccessKey = "";
+		this.region = "us-east-1";
+		this.bucket = "";
+		this.endpoint = "";
+		this.url = "";
+		this.username = "";
+		this.password = "";
+		this.token = "";
+		this.owner = "";
+		this.repo = "";
+		this.email = "";
+		this.appPassword = "";
+		makeAutoObservable(this);
+	}
+	openForm(serviceType, prefill) {
+		this.serviceType = serviceType;
+		this.resetFields();
+		if (prefill) this.applyPrefill(prefill);
+		this.open = true;
+	}
+	closeForm() {
+		this.open = false;
+	}
+	setField(field, value) {
+		if (field in this) this[field] = value;
+	}
+	/** Serialize current form state to JSON credential string */
+	serialize() {
+		switch (this.serviceType) {
+			case "s3": {
+				const creds = {
+					accessKeyId: this.accessKeyId,
+					secretAccessKey: this.secretAccessKey,
+					region: this.region,
+					bucket: this.bucket
+				};
+				if (this.endpoint) creds.endpoint = this.endpoint;
+				return JSON.stringify(creds);
+			}
+			case "webdav": return JSON.stringify({
+				url: this.url,
+				username: this.username,
+				password: this.password
+			});
+			case "gitea": return JSON.stringify({
+				url: this.url,
+				username: this.username,
+				password: this.password,
+				token: this.token,
+				owner: this.owner,
+				repo: this.repo
+			});
+			case "icloud": return JSON.stringify({
+				email: this.email,
+				appPassword: this.appPassword
+			});
+		}
+	}
+	resetFields() {
+		this.accessKeyId = "";
+		this.secretAccessKey = "";
+		this.region = "us-east-1";
+		this.bucket = "";
+		this.endpoint = "";
+		this.url = "";
+		this.username = "";
+		this.password = "";
+		this.token = "";
+		this.owner = "";
+		this.repo = "";
+		this.email = "";
+		this.appPassword = "";
+	}
+	applyPrefill(values) {
+		for (const [k, v] of Object.entries(values)) if (typeof v === "string" && k in this) this[k] = v;
+	}
+};
+
+//#endregion
+//#region src/components/ServiceIcon.tsx
+/** Custom icons for services not available in lucide-react */
+const AppleIcon = ({ size = 24, color = "currentColor", strokeWidth: _sw,...props }) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: color,
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" })
+});
+const customIcons = { Apple: AppleIcon };
+const ServiceIcon = ({ name,...props }) => {
+	const CustomIcon = customIcons[name];
+	if (CustomIcon) return /* @__PURE__ */ jsx(CustomIcon, { ...props });
+	const Icon = icons[name];
+	if (!Icon) return /* @__PURE__ */ jsx(icons.HelpCircle, { ...props });
+	return /* @__PURE__ */ jsx(Icon, { ...props });
+};
+
+//#endregion
+//#region src/types/connection-state.ts
+function getServiceConnectionState(connectionManager, serviceId) {
+	const status = connectionManager.getStatus(serviceId);
+	return match(status).with("loading", () => ({ status: "loading" })).with("not_configured", () => ({ status: "not_configured" })).with("disconnected", () => ({ status: "disconnected" })).with("connecting", () => ({ status: "connecting" })).with("connected", () => ({
+		status: "connected",
+		token: connectionManager.getToken(serviceId) ?? "",
+		user: connectionManager.getUserInfo(serviceId),
+		profile: connectionManager.getUserProfile(serviceId)
+	})).with("error", () => ({ status: "error" })).with("expired", () => ({ status: "expired" })).exhaustive();
+}
+
+//#endregion
+//#region src/components/CredentialForm.tsx
+const CredentialForm = observer(({ model, onSubmit }) => {
+	if (!model.open) return null;
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		onSubmit(model.serialize());
+	};
+	const inputClass = "w-full rounded-md border border-border px-3 py-2 text-base sm:text-sm bg-card text-foreground focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring";
+	const labelClass = "block text-sm font-medium text-foreground mb-1";
+	const title = model.serviceType === "s3" ? "S3 Credentials" : model.serviceType === "webdav" ? "WebDAV Credentials" : model.serviceType === "icloud" ? "iCloud Credentials" : "Gitea Credentials";
+	return /* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+		onClick: () => model.closeForm(),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w-[calc(100%-2rem)] max-w-md max-h-[80vh] flex flex-col rounded-lg bg-card shadow-xl",
+			onClick: (e) => e.stopPropagation(),
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "px-4 sm:px-6 pt-4 sm:pt-6 pb-3 text-lg font-semibold text-foreground flex-shrink-0",
+				children: title
+			}), /* @__PURE__ */ jsxs("form", {
+				onSubmit: handleSubmit,
+				className: "flex flex-col flex-1 min-h-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-y-auto px-4 sm:px-6 space-y-3",
+					children: model.serviceType === "s3" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Access Key ID"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							required: true,
+							className: inputClass,
+							value: model.accessKeyId,
+							onChange: (e) => model.setField("accessKeyId", e.target.value)
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Secret Access Key"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "password",
+							required: true,
+							className: inputClass,
+							value: model.secretAccessKey,
+							onChange: (e) => model.setField("secretAccessKey", e.target.value)
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Region"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							required: true,
+							className: inputClass,
+							value: model.region,
+							onChange: (e) => model.setField("region", e.target.value)
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Bucket"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							required: true,
+							className: inputClass,
+							value: model.bucket,
+							onChange: (e) => model.setField("bucket", e.target.value)
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Endpoint (optional)"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							className: inputClass,
+							value: model.endpoint,
+							onChange: (e) => model.setField("endpoint", e.target.value),
+							placeholder: "https://s3.amazonaws.com"
+						})] })
+					] }) : model.serviceType === "webdav" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "URL"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "url",
+							required: true,
+							className: inputClass,
+							value: model.url,
+							onChange: (e) => model.setField("url", e.target.value),
+							placeholder: "https://example.com/webdav"
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Username"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							required: true,
+							className: inputClass,
+							value: model.username,
+							onChange: (e) => model.setField("username", e.target.value)
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Password"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "password",
+							required: true,
+							className: inputClass,
+							value: model.password,
+							onChange: (e) => model.setField("password", e.target.value)
+						})] })
+					] }) : model.serviceType === "icloud" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Apple ID Email"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "email",
+							required: true,
+							className: inputClass,
+							value: model.email,
+							onChange: (e) => model.setField("email", e.target.value),
+							placeholder: "you@icloud.com"
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "App-Specific Password"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "password",
+							required: true,
+							className: inputClass,
+							value: model.appPassword,
+							onChange: (e) => model.setField("appPassword", e.target.value),
+							placeholder: "xxxx-xxxx-xxxx-xxxx"
+						})] }),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-xs text-muted-foreground",
+							children: [
+								"Generate an app-specific password at",
+								" ",
+								/* @__PURE__ */ jsx("a", {
+									href: "https://appleid.apple.com/account/manage",
+									target: "_blank",
+									rel: "noopener noreferrer",
+									className: "underline text-primary hover:text-primary/80",
+									children: "appleid.apple.com"
+								}),
+								" ",
+								"under Sign-In and Security → App-Specific Passwords."
+							]
+						})
+					] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "URL"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "url",
+							required: true,
+							className: inputClass,
+							value: model.url,
+							onChange: (e) => model.setField("url", e.target.value),
+							placeholder: "https://gitea.example.com"
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Token (or use username/password below)"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "password",
+							className: inputClass,
+							value: model.token,
+							onChange: (e) => model.setField("token", e.target.value),
+							placeholder: "API token"
+						})] }),
+						!model.token && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Username"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							className: inputClass,
+							value: model.username,
+							onChange: (e) => model.setField("username", e.target.value)
+						})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Password"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "password",
+							className: inputClass,
+							value: model.password,
+							onChange: (e) => model.setField("password", e.target.value)
+						})] })] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Owner"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							required: true,
+							className: inputClass,
+							value: model.owner,
+							onChange: (e) => model.setField("owner", e.target.value)
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							className: labelClass,
+							children: "Repo"
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							required: true,
+							className: inputClass,
+							value: model.repo,
+							onChange: (e) => model.setField("repo", e.target.value)
+						})] })
+					] })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2 px-4 sm:px-6 py-3 border-t border-border flex-shrink-0",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => model.closeForm(),
+						className: "rounded-md px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-muted",
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: "rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+						children: "Connect"
+					})]
+				})]
+			})]
+		})
+	});
+});
+
+//#endregion
+//#region src/components/ConnectedMenu.tsx
+function formatConnectedDate(date) {
+	if (!date) return null;
+	const d = date instanceof Date ? date : new Date(date);
+	if (isNaN(d.getTime())) return null;
+	return d.toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+function ConnectedMenu({ service, connectionManager, user, profile, isOAuth }) {
+	const displayName = profile?.name ?? user?.name;
+	const avatarUrl = profile?.avatarUrl ?? user?.image;
+	const profileUrl = profile?.profileUrl;
+	const email = profile?.email;
+	const handleReconnect = async () => {
+		await connectionManager.disconnect(service.id);
+		await connectionManager.connect(service.id);
+	};
+	const handleDisconnect = () => {
+		connectionManager.disconnect(service.id);
+	};
+	const connection = connectionManager.connections.get(service.id);
+	const connectedDate = formatConnectedDate(connection?.connectedAt);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "inline-flex items-center gap-1",
+		children: [/* @__PURE__ */ jsx(ConnectionBadge, {
+			status: "connected",
+			...displayName ? { name: displayName } : {},
+			...avatarUrl ? { avatarUrl } : {}
+		}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				className: "inline-flex items-center justify-center rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+				children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "end",
+			className: "min-w-[200px]",
+			children: [
+				/* @__PURE__ */ jsxs(DropdownMenuLabel, {
+					className: "flex items-center gap-2",
+					children: [avatarUrl ? /* @__PURE__ */ jsx("img", {
+						src: avatarUrl,
+						alt: "",
+						className: "h-5 w-5 rounded-full shrink-0"
+					}) : /* @__PURE__ */ jsx(ServiceIcon, {
+						name: service.icon,
+						className: "h-4 w-4 shrink-0",
+						style: { color: service.color }
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: displayName ?? service.name
+						}), email && /* @__PURE__ */ jsx("span", {
+							className: "text-xs font-normal text-muted-foreground truncate",
+							children: email
+						})]
+					})]
+				}),
+				connectedDate && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 px-2 pb-1.5 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(Clock, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ jsxs("span", { children: ["Connected ", connectedDate] })]
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				profileUrl && /* @__PURE__ */ jsx(DropdownMenuItem, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs("a", {
+						href: profileUrl,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						children: [/* @__PURE__ */ jsx(ExternalLink, {}), "Open Profile"]
+					})
+				}),
+				service.grantsUrl && /* @__PURE__ */ jsx(DropdownMenuItem, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs("a", {
+						href: service.grantsUrl,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						children: [/* @__PURE__ */ jsx(Shield, {}), "Manage Permissions"]
+					})
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuItem, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs("a", {
+						href: `/providers/${service.id}`,
+						children: [
+							/* @__PURE__ */ jsx(Info, {}),
+							"About ",
+							service.name
+						]
+					})
+				}),
+				isOAuth && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: handleReconnect,
+					children: [/* @__PURE__ */ jsx(RefreshCw, {}), "Reconnect"]
+				}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					variant: "destructive",
+					onClick: handleDisconnect,
+					children: [/* @__PURE__ */ jsx(LogOut, {}), "Disconnect"]
+				})
+			]
+		})] })]
+	});
+}
+
+//#endregion
+//#region src/components/ConnectButton.tsx
+const ConnectButton = observer(({ service, connectionManager }) => {
+	const [formModel] = useState(() => new CredentialFormModel());
+	const state = getServiceConnectionState(connectionManager, service.id);
+	const needsCredentialForm = service.authProvider === "s3" || service.authProvider === "webdav" || service.authProvider === "gitea" || service.authProvider === "icloud";
+	const isBrowserFs = service.authProvider === "browser-fs";
+	const isIndexedDb = service.authProvider === "indexeddb";
+	const pendingReconnect = connectionManager.pendingReconnect.has(service.id);
+	useEffect(() => {
+		if (pendingReconnect) {
+			connectionManager.clearReconnectRequest(service.id);
+			handleConnect();
+		}
+	}, [pendingReconnect]);
+	const handleConnect = async () => {
+		if (isBrowserFs) {
+			try {
+				const { BrowserFileSystemFactory } = await import("@anymux/browser-fs");
+				const factory = new BrowserFileSystemFactory();
+				const [_fs, handleInfo] = await factory.createFromPicker();
+				connectionManager.connectWithCredentials(service.id, JSON.stringify({
+					id: handleInfo.id,
+					name: handleInfo.name
+				}));
+			} catch (err) {
+				if (err.name !== "AbortError") console.error("Failed to pick directory:", err);
+			}
+			return;
+		}
+		if (isIndexedDb) {
+			connectionManager.connectWithCredentials(service.id, JSON.stringify({ type: "indexeddb" }));
+			return;
+		}
+		if (needsCredentialForm) formModel.openForm(service.authProvider);
+		else connectionManager.connect(service.id);
+	};
+	const handleCredentialSubmit = (credentialToken) => {
+		connectionManager.connectWithCredentials(service.id, credentialToken);
+		formModel.closeForm();
+	};
+	const credentialFormElement = needsCredentialForm ? /* @__PURE__ */ jsx(CredentialForm, {
+		model: formModel,
+		onSubmit: handleCredentialSubmit
+	}) : null;
+	return match(state).with({ status: "loading" }, () => /* @__PURE__ */ jsx(ConnectionBadge, { status: "loading" })).with({ status: "not_configured" }, () => /* @__PURE__ */ jsx(ConnectionBadge, { status: "not-configured" })).with({ status: "connecting" }, () => /* @__PURE__ */ jsx(ConnectionBadge, { status: "connecting" })).with({ status: "connected" }, (s) => {
+		const isOAuth = !needsCredentialForm && !isBrowserFs && !isIndexedDb;
+		const user = isOAuth ? s.user : null;
+		return /* @__PURE__ */ jsx(ConnectedMenu, {
+			service,
+			connectionManager,
+			user,
+			...s.profile ? { profile: s.profile } : {},
+			isOAuth
+		});
+	}).with({ status: "error" }, () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		onClick: handleConnect,
+		className: "rounded-md px-3 py-1.5 text-xs font-medium text-white bg-destructive hover:bg-destructive/90 transition-colors",
+		children: "Retry"
+	}), credentialFormElement] })).with({ status: "expired" }, () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		onClick: handleConnect,
+		className: "rounded-md px-3 py-1.5 text-xs font-medium text-white bg-destructive hover:bg-destructive/90 transition-colors",
+		children: "Reconnect"
+	}), credentialFormElement] })).with({ status: "disconnected" }, () => {
+		const testCreds = connectionManager.testCredentials[service.authProvider];
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "inline-flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("button", {
+				onClick: handleConnect,
+				className: "rounded-md px-3 py-1.5 text-xs font-medium text-white transition-colors",
+				style: { backgroundColor: service.color },
+				children: "Connect"
+			}), testCreds && /* @__PURE__ */ jsx("button", {
+				onClick: () => {
+					if (needsCredentialForm) {
+						const values = {};
+						for (const [k, v] of Object.entries(testCreds)) if (typeof v === "string") values[k] = v;
+						formModel.openForm(service.authProvider, values);
+					} else connectionManager.connectWithCredentials(service.id, JSON.stringify(testCreds));
+				},
+				className: "rounded-md px-2 py-1.5 text-xs font-medium text-muted-foreground bg-muted hover:bg-muted/80 transition-colors",
+				children: "Quick Test"
+			})]
+		}), credentialFormElement] });
+	}).exhaustive();
+});
+
+//#endregion
+//#region src/components/CapabilityCell.tsx
+const CapabilityCell = observer(({ service, capabilityId, connectionManager, dashboardModel }) => {
+	const capability = service.capabilities.find((c) => c.id === capabilityId);
+	const gitHostCap = capabilityId === "git-repo" ? service.capabilities.find((c) => c.id === "git-host") : void 0;
+	const supported = (capability?.supported ?? false) || (gitHostCap?.supported ?? false);
+	const effectiveCapabilityId = capabilityId === "git-repo" && !capability?.supported && gitHostCap?.supported ? "git-host" : capabilityId;
+	const status = connectionManager.getStatus(service.id);
+	const isSelected = dashboardModel.selectedCell?.serviceId === service.id && (dashboardModel.selectedCell?.capabilityId === effectiveCapabilityId || capabilityId === "git-repo" && dashboardModel.selectedCell?.capabilityId === "git-host");
+	if (!supported) return /* @__PURE__ */ jsx("td", {
+		className: "px-3 py-2 text-center align-middle",
+		children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4 text-muted-foreground/30 mx-auto" })
+	});
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			dashboardModel.selectCell(service.id, effectiveCapabilityId);
+		}
+	};
+	return match(status).with("loading", () => /* @__PURE__ */ jsx("td", {
+		className: "px-3 py-2 text-center align-middle",
+		children: /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4 rounded bg-muted animate-pulse mx-auto" })
+	})).with("connected", () => {
+		if (!connectionManager.initialized) return /* @__PURE__ */ jsx("td", {
+			className: "px-3 py-2 text-center align-middle",
+			children: /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4 rounded bg-muted animate-pulse mx-auto" })
+		});
+		const hasScopes = connectionManager.hasCapabilityScopes(service.id, effectiveCapabilityId);
+		const hoverBg = hasScopes ? "hover:bg-green-50 dark:hover:bg-green-900/20" : "hover:bg-orange-50 dark:hover:bg-orange-900/20";
+		return /* @__PURE__ */ jsx("td", {
+			className: `px-3 py-2 text-center align-middle cursor-pointer transition-colors ${isSelected ? "bg-blue-100 dark:bg-blue-900/40" : hoverBg}`,
+			role: "button",
+			tabIndex: 0,
+			onClick: () => dashboardModel.selectCell(service.id, effectiveCapabilityId),
+			onKeyDown: handleKeyDown,
+			title: hasScopes ? void 0 : "Scope not granted",
+			children: /* @__PURE__ */ jsx("span", {
+				className: `inline-flex items-center justify-center w-5 h-5 rounded-full mx-auto ${hasScopes ? "bg-green-500" : "bg-orange-400"} text-white`,
+				children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
+			})
+		});
+	}).otherwise(() => /* @__PURE__ */ jsx("td", {
+		className: "px-3 py-2 text-center align-middle",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "inline-flex items-center justify-center w-5 h-5 rounded border border-muted-foreground/30 mx-auto",
+			children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-muted-foreground/50" })
+		})
+	}));
+});
+
+//#endregion
+//#region src/components/ServiceRow.tsx
+const CAPABILITY_COLUMNS$1 = [
+	"file-system",
+	"object-storage",
+	"git-repo",
+	"media",
+	"contacts",
+	"calendar"
+];
+const ServiceRow = observer(({ service, connectionManager, dashboardModel }) => {
+	return /* @__PURE__ */ jsxs("tr", {
+		className: "border-b border-border h-11",
+		children: [
+			/* @__PURE__ */ jsx("td", {
+				className: "px-3 py-2 align-middle",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(ServiceIcon, {
+						name: service.icon,
+						className: "h-4 w-4",
+						style: { color: service.color }
+					}), /* @__PURE__ */ jsx("a", {
+						href: `/providers/${service.id}`,
+						className: "text-sm font-medium truncate hover:underline",
+						title: service.name,
+						children: service.name
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "px-3 py-2 align-middle",
+				children: /* @__PURE__ */ jsx(ConnectButton, {
+					service,
+					connectionManager
+				})
+			}),
+			CAPABILITY_COLUMNS$1.map((cap) => /* @__PURE__ */ jsx(CapabilityCell, {
+				service,
+				capabilityId: cap,
+				connectionManager,
+				dashboardModel
+			}, cap))
+		]
+	});
+});
+
+//#endregion
+//#region src/components/CapabilityPill.tsx
+const CapabilityPill = ({ label, status, isSelected, hasScopes, onSelect, disabled = false }) => {
+	const connected = status === "connected";
+	const loading = status === "loading";
+	const className = `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium transition-colors ${loading ? "bg-muted text-muted-foreground" : isSelected ? "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300" : connected ? "bg-muted text-foreground hover:bg-muted/80 cursor-pointer" : "bg-muted/50 text-muted-foreground"}`;
+	const icon = match(status).with("loading", () => /* @__PURE__ */ jsx(LoadingSpinner, {
+		size: "sm",
+		label: "Loading",
+		className: "h-3 w-3"
+	})).with("connected", () => /* @__PURE__ */ jsx(Check, { className: `h-3 w-3 ${hasScopes ? "text-green-500" : "text-orange-400"}` })).otherwise(() => /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }));
+	return /* @__PURE__ */ jsxs("button", {
+		onClick: onSelect,
+		disabled: disabled || !connected,
+		className,
+		children: [icon, label]
+	});
+};
+
+//#endregion
+//#region src/components/ServiceCard.tsx
+const CAPABILITY_COLUMNS = [
+	{
+		id: "file-system",
+		label: "FS"
+	},
+	{
+		id: "object-storage",
+		label: "Obj"
+	},
+	{
+		id: "git-repo",
+		label: "Git"
+	},
+	{
+		id: "media",
+		label: "Media"
+	},
+	{
+		id: "contacts",
+		label: "Contacts"
+	},
+	{
+		id: "calendar",
+		label: "Cal"
+	}
+];
+const ServiceCard = observer(({ service, connectionManager, dashboardModel }) => {
+	const status = connectionManager.getStatus(service.id);
+	const connected = status === "connected";
+	const supportedCaps = CAPABILITY_COLUMNS.filter((cap) => {
+		const supported = service.capabilities.find((c) => c.id === cap.id)?.supported;
+		if (cap.id === "git-repo" && !supported) return service.capabilities.find((c) => c.id === "git-host")?.supported ?? false;
+		return supported;
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-lg border border-border bg-card p-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2 mb-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 min-w-0",
+				children: [/* @__PURE__ */ jsx(ServiceIcon, {
+					name: service.icon,
+					className: "h-5 w-5 flex-shrink-0",
+					style: { color: service.color }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium truncate",
+					title: service.name,
+					children: service.name
+				})]
+			}), /* @__PURE__ */ jsx(ConnectButton, {
+				service,
+				connectionManager
+			})]
+		}), supportedCaps.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-1.5",
+			children: supportedCaps.map((cap) => {
+				const isSelected = dashboardModel.selectedCell?.serviceId === service.id && dashboardModel.selectedCell?.capabilityId === cap.id;
+				const hasScopes = connected && connectionManager.hasCapabilityScopes(service.id, cap.id);
+				return /* @__PURE__ */ jsx(CapabilityPill, {
+					label: cap.label,
+					capabilityId: cap.id,
+					status,
+					isSelected,
+					hasScopes,
+					onSelect: () => {
+						if (connected) dashboardModel.selectCell(service.id, cap.id);
+					}
+				}, cap.id);
+			})
+		})]
+	});
+});
+
+//#endregion
+//#region src/adapters/adapter-registry.ts
+const factories = new Map();
+const adapterRegistry = {
+	register(serviceId, factory) {
+		factories.set(serviceId, factory);
+	},
+	async create(serviceId, token, capabilityId, context = {}) {
+		const factory = factories.get(serviceId);
+		if (!factory) throw new Error(`No adapter factory registered for service: ${serviceId}`);
+		return factory(token, capabilityId, context);
+	},
+	has(serviceId) {
+		return factories.has(serviceId);
+	}
+};
+adapterRegistry.register("google", async (token, capabilityId) => {
+	const m = await import("@anymux/google-drive");
+	const adapters = {
+		"file-system": () => new m.GoogleDriveFileSystem({ accessToken: token }),
+		"contacts": () => new m.GoogleContactsProvider(token),
+		"calendar": () => new m.GoogleCalendarProvider(token)
+	};
+	return adapters[capabilityId]();
+});
+adapterRegistry.register("dropbox", async (token) => {
+	const { DropboxFileSystem } = await import("@anymux/dropbox");
+	return new DropboxFileSystem({ accessToken: token });
+});
+adapterRegistry.register("box", async (token) => {
+	const { BoxFileSystem } = await import("@anymux/box");
+	return new BoxFileSystem({ accessToken: token });
+});
+adapterRegistry.register("github", async (token, capabilityId, ctx) => {
+	const repo = ctx.selectedRepo;
+	if (!repo) return null;
+	const config = {
+		token,
+		owner: repo.owner,
+		repo: repo.repo,
+		branch: ctx.branch ?? "main"
+	};
+	const m = await import("@anymux/github");
+	const adapters = {
+		"file-system": () => new m.GitHubFileSystem(config),
+		"git-repo": () => new m.GitHubGitRepo(config),
+		"git-host": () => new m.GitHubGitHost(config)
+	};
+	return adapters[capabilityId]();
+});
+adapterRegistry.register("gitlab", async (token, capabilityId, ctx) => {
+	const repo = ctx.selectedRepo;
+	if (!repo) return null;
+	const config = {
+		token,
+		projectId: `${repo.owner}/${repo.repo}`,
+		branch: ctx.branch ?? "main"
+	};
+	const m = await import("@anymux/gitlab");
+	const adapters = {
+		"file-system": () => new m.GitLabFileSystem(config),
+		"git-repo": () => new m.GitLabGitRepo(config),
+		"git-host": () => new m.GitLabGitHost(config)
+	};
+	return adapters[capabilityId]();
+});
+adapterRegistry.register("bitbucket", async (token, capabilityId, ctx) => {
+	const repo = ctx.selectedRepo;
+	if (!repo) return null;
+	const config = {
+		token,
+		workspace: repo.owner,
+		repo: repo.repo,
+		branch: ctx.branch ?? "main"
+	};
+	const m = await import("@anymux/bitbucket");
+	const adapters = {
+		"file-system": () => new m.BitbucketFileSystem(config),
+		"git-repo": () => new m.BitbucketGitRepo(config),
+		"git-host": () => new m.BitbucketGitHost(config)
+	};
+	return adapters[capabilityId]();
+});
+adapterRegistry.register("gitea", async (token, capabilityId, ctx) => {
+	const creds = JSON.parse(token);
+	const proxyUrl = typeof window !== "undefined" ? window.location.origin : void 0;
+	const config = {
+		url: creds.url,
+		token: creds.token,
+		username: creds.username,
+		password: creds.password,
+		owner: creds.owner,
+		repo: creds.repo,
+		branch: ctx.branch ?? creds.branch ?? "main",
+		proxyUrl
+	};
+	const m = await import("@anymux/gitea");
+	const adapters = {
+		"file-system": () => new m.GiteaFileSystem(config),
+		"git-repo": () => new m.GiteaGitRepo(config),
+		"git-host": () => new m.GiteaGitHost(config)
+	};
+	return adapters[capabilityId]();
+});
+adapterRegistry.register("webdav", async (token) => {
+	const creds = JSON.parse(token);
+	const { WebDAVFileSystem } = await import("@anymux/webdav");
+	const proxyUrl = typeof window !== "undefined" ? window.location.origin : void 0;
+	return new WebDAVFileSystem({
+		url: creds.url,
+		username: creds.username,
+		password: creds.password,
+		proxyUrl
+	});
+});
+adapterRegistry.register("s3", async (token) => {
+	const creds = JSON.parse(token);
+	const proxyUrl = typeof window !== "undefined" ? window.location.origin : void 0;
+	if (proxyUrl) {
+		const { S3ProxyStorage } = await import("@anymux/s3");
+		const storage$1 = new S3ProxyStorage({
+			proxyUrl,
+			endpoint: creds.endpoint,
+			region: creds.region?.trim(),
+			accessKeyId: creds.accessKeyId?.trim(),
+			secretAccessKey: creds.secretAccessKey?.trim(),
+			forcePathStyle: true
+		});
+		return {
+			storage: storage$1,
+			bucket: creds.bucket || "anymux-test"
+		};
+	}
+	const { S3ObjectStorage } = await import("@anymux/s3");
+	const storage = new S3ObjectStorage({
+		region: creds.region?.trim(),
+		endpoint: creds.endpoint,
+		credentials: {
+			accessKeyId: creds.accessKeyId?.trim(),
+			secretAccessKey: creds.secretAccessKey?.trim()
+		},
+		forcePathStyle: true
+	});
+	return {
+		storage,
+		bucket: creds.bucket || "anymux-test"
+	};
+});
+adapterRegistry.register("browser-fs", async () => {
+	const { BrowserFileSystemFactory } = await import("@anymux/browser-fs");
+	const factory = new BrowserFileSystemFactory();
+	const handleInfos = await factory.getAllHandleInfos();
+	if (handleInfos.length > 0) return factory.createFromHandleInfo(handleInfos[0].id);
+	throw new Error("No local file system connected. Please connect first.");
+});
+adapterRegistry.register("indexeddb", async () => {
+	const { IndexedDBFileSystem } = await import("@anymux/indexeddb");
+	const fs = new IndexedDBFileSystem();
+	await fs.init();
+	return fs;
+});
+
+//#endregion
+//#region src/components/useAdapter.ts
+/** Hook to async-create an adapter, run a pre-flight check, and track loading/error state */
+function useAdapter(factory, deps, preflight) {
+	const [adapter, setAdapter] = useState(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [retryCount, setRetryCount] = useState(0);
+	useEffect(() => {
+		let cancelled = false;
+		setLoading(true);
+		setError(null);
+		setAdapter(null);
+		factory().then(async (a) => {
+			if (preflight) await preflight(a);
+			if (!cancelled) {
+				setAdapter(a);
+				setLoading(false);
+			}
+		}).catch((e) => {
+			if (!cancelled) {
+				setError(e instanceof Error ? e.message : String(e));
+				setLoading(false);
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [...deps, retryCount]);
+	return {
+		adapter,
+		loading,
+		error,
+		retry: () => setRetryCount((c) => c + 1)
+	};
+}
+
+//#endregion
+//#region src/components/CapabilityError.tsx
+function isAuthError(error) {
+	return /\b(401|403|auth|token|expired|unauthorized|forbidden|denied|scope|permission|sign.?in|log.?in)\b/i.test(error);
+}
+/** Render error with contextual actions for capability panels */
+function CapabilityError({ error, onRetry, onReconnect, onGoBack }) {
+	const authError = isAuthError(error);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center h-64 gap-4 p-4",
+		children: [/* @__PURE__ */ jsx(ErrorDisplay, {
+			error,
+			title: authError ? "Authentication Required" : "Failed to Load",
+			variant: authError ? "warning" : "destructive",
+			className: "max-w-md w-full",
+			...onRetry != null ? { onRetry } : {}
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [onReconnect && /* @__PURE__ */ jsxs("button", {
+				onClick: onReconnect,
+				className: "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+				children: [/* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }), "Reconnect"]
+			}), onGoBack && /* @__PURE__ */ jsxs("button", {
+				onClick: onGoBack,
+				className: "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md bg-muted hover:bg-muted/80 transition-colors",
+				children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "h-3 w-3" }), "Back to Dashboard"]
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/CapabilityPanel.tsx
+const FileBrowser = React.lazy(() => import("@anymux/fs-ui").then((m) => ({ default: m.FileBrowser })));
+const LazyMediaBrowser = React.lazy(() => import("@anymux/object-ui").then((m) => ({ default: ({ provider }) => {
+	const model = new m.MediaBrowserModel(provider);
+	return React.createElement(m.MediaBrowser, {
+		model,
+		provider,
+		className: "h-full"
+	});
+} })));
+const LazyContactBrowser = React.lazy(() => import("@anymux/object-ui").then((m) => ({ default: ({ provider }) => {
+	const model = new m.ContactListModel(provider);
+	return React.createElement(m.ContactBrowser, {
+		model,
+		className: "h-full"
+	});
+} })));
+const LazyCalendarBrowser = React.lazy(() => import("@anymux/object-ui").then((m) => ({ default: ({ provider }) => {
+	const model = new m.CalendarModel(provider);
+	return React.createElement(m.CalendarBrowser, {
+		model,
+		className: "h-full"
+	});
+} })));
+const RepoPicker$1 = React.lazy(() => import("./RepoPicker-BprFGOn7.js").then((m) => ({ default: m.RepoPicker })));
+const ObjectStorageBrowserLazy = React.lazy(() => import("./ObjectStorageBrowser-B2YkUxMl.js").then((m) => ({ default: m.ObjectStorageBrowser })));
+const GitRepoBrowserLazy = React.lazy(() => import("./GitBrowser-CIyWiuX-.js").then((m) => ({ default: m.GitRepoBrowser })));
+const GitHostBrowserLazy = React.lazy(() => import("./GitBrowser-CIyWiuX-.js").then((m) => ({ default: m.GitHostBrowser })));
+const CAPABILITY_LABELS = {
+	"file-system": "File System",
+	"object-storage": "Object Storage",
+	"git-repo": "Git",
+	"git-host": "Git",
+	"media": "Media",
+	"contacts": "Contacts",
+	"calendar": "Calendar"
+};
+const REPO_SERVICES$1 = new Set([
+	"github",
+	"gitlab",
+	"bitbucket",
+	"gitea"
+]);
+const LoadingFallback = () => /* @__PURE__ */ jsx("div", {
+	className: "flex items-center justify-center h-64",
+	children: /* @__PURE__ */ jsx(LoadingSpinner, { label: "Loading..." })
+});
+function GitRepoBrowserContent({ serviceId, token, gitRepo, owner, repo, selectedRepo, onError, actionNotifications }) {
+	const createFileSystem = useCallback(async (branch) => {
+		const context = {
+			selectedRepo,
+			branch
+		};
+		const fs = await adapterRegistry.create(serviceId, token, "file-system", context);
+		return fs;
+	}, [
+		serviceId,
+		token,
+		selectedRepo
+	]);
+	const [gitHost, setGitHost] = useState();
+	React.useEffect(() => {
+		let cancelled = false;
+		adapterRegistry.create(serviceId, token, "git-host", { selectedRepo }).then((adapter) => {
+			if (!cancelled) setGitHost(adapter);
+		}).catch(() => {});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		serviceId,
+		token,
+		selectedRepo
+	]);
+	return /* @__PURE__ */ jsx(GitRepoBrowserLazy, {
+		gitRepo,
+		owner,
+		repo,
+		createFileSystem,
+		gitHost,
+		onError,
+		actionNotifications
+	});
+}
+function GitHostBrowserWithRepo({ serviceId, token, gitHost, owner, repo, selectedRepo, onError, actionNotifications }) {
+	const [gitRepo, setGitRepo] = useState();
+	const [repoLoaded, setRepoLoaded] = useState(false);
+	React.useEffect(() => {
+		let cancelled = false;
+		adapterRegistry.create(serviceId, token, "git-repo", { selectedRepo }).then((adapter) => {
+			if (!cancelled) setGitRepo(adapter);
+		}).catch(() => {}).finally(() => {
+			if (!cancelled) setRepoLoaded(true);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		serviceId,
+		token,
+		selectedRepo
+	]);
+	const createFileSystem = useCallback(async (branch) => {
+		const context = {
+			selectedRepo,
+			branch
+		};
+		const fs = await adapterRegistry.create(serviceId, token, "file-system", context);
+		return fs;
+	}, [
+		serviceId,
+		token,
+		selectedRepo
+	]);
+	if (!repoLoaded) return /* @__PURE__ */ jsx(LoadingFallback, {});
+	if (gitRepo) return /* @__PURE__ */ jsx(GitRepoBrowserLazy, {
+		gitRepo,
+		owner,
+		repo,
+		createFileSystem,
+		gitHost,
+		onError,
+		actionNotifications
+	});
+	return /* @__PURE__ */ jsx(GitHostBrowserLazy, { gitHost });
+}
+const GenericCapabilityContent = observer(function GenericCapabilityContent$1({ serviceId, capabilityId, token, dashboardModel, connectionManager }) {
+	const selectedRepo = dashboardModel.getSelectedRepo(serviceId);
+	const context = { selectedRepo: selectedRepo ?? void 0 };
+	const { adapter, loading, error, retry } = useAdapter(
+		async () => {
+			console.info(`[AnyMux] CapabilityPanel: refreshing token for ${serviceId}/${capabilityId}`);
+			const freshToken = await connectionManager.refreshToken(serviceId) ?? token;
+			console.info(`[AnyMux] CapabilityPanel: creating adapter with token ${freshToken.slice(0, 8)}…${freshToken.slice(-4)}`);
+			const a = adapterRegistry.create(serviceId, freshToken, capabilityId, context);
+			return a;
+		},
+		[
+			serviceId,
+			capabilityId,
+			token,
+			selectedRepo?.owner,
+			selectedRepo?.repo
+		],
+		// Pre-flight: verify the adapter actually works before mounting the browser UI.
+		// If we get a 401, try one more refresh — better-auth may not have detected
+		// the token as expired (e.g. missing accessTokenExpiresAt in the DB).
+		async (a) => {
+			const runCheck = async (adapter$1) => {
+				if (capabilityId === "file-system") await adapter$1.readdir("/");
+				else if (capabilityId === "git-host") {
+					if (adapter$1.listRepositories) await adapter$1.listRepositories({
+						page: 1,
+						perPage: 1
+					});
+				} else if (capabilityId === "git-repo") {
+					if (adapter$1.listBranches) await adapter$1.listBranches();
+				} else if (capabilityId === "calendar") {
+					if (adapter$1.getCalendars) await adapter$1.getCalendars();
+				} else if (capabilityId === "contacts") {
+					if (adapter$1.getContacts) await adapter$1.getContacts({ limit: 1 });
+				} else if (capabilityId === "media") {
+					if (adapter$1.getAlbums) await adapter$1.getAlbums();
+				}
+			};
+			try {
+				console.info(`[AnyMux] CapabilityPanel: running pre-flight for ${serviceId}/${capabilityId}`);
+				await runCheck(a);
+				console.info(`[AnyMux] CapabilityPanel: pre-flight passed`);
+			} catch (err) {
+				console.warn(`[AnyMux] CapabilityPanel: pre-flight failed for ${serviceId}/${capabilityId}:`, err instanceof Error ? err.message : err);
+				if (err instanceof Error && isAuthError(err.message)) {
+					console.info(`[AnyMux] CapabilityPanel: auth error detected, attempting second refresh`);
+					const retryToken = await connectionManager.refreshToken(serviceId);
+					if (retryToken && retryToken !== token) {
+						console.info(`[AnyMux] CapabilityPanel: got different token on retry, rebuilding adapter`);
+						const retryAdapter = await adapterRegistry.create(serviceId, retryToken, capabilityId, context);
+						await runCheck(retryAdapter);
+						Object.assign(a, retryAdapter);
+						return;
+					}
+					console.warn(`[AnyMux] CapabilityPanel: retry token same as original, giving up`);
+				}
+				throw err;
+			}
+		}
+);
+	const handleReconnect = async () => {
+		const service = dashboardModel.selectedService;
+		await connectionManager.disconnect(serviceId);
+		dashboardModel.closePanel();
+		const isOAuth = service && ![
+			"s3",
+			"webdav",
+			"gitea",
+			"icloud",
+			"browser-fs",
+			"indexeddb"
+		].includes(service.authProvider);
+		if (isOAuth) await connectionManager.connect(serviceId);
+		else connectionManager.requestReconnect(serviceId);
+	};
+	const handleGoBack = () => {
+		dashboardModel.closePanel();
+	};
+	const [runtimeError, setRuntimeError] = useState(null);
+	const handleRuntimeError = (err) => {
+		if (isAuthError(err.message)) setRuntimeError(err.message);
+	};
+	const handleNotify = useCallback((type, message) => {
+		if (type === "success") showActionToast(dashboardModel.actionNotifications, "create", message);
+		else showErrorToast(message);
+	}, [dashboardModel.actionNotifications]);
+	const handleAction = useCallback((action) => {
+		showActionToast(dashboardModel.actionNotifications, action.type, action.message, { undo: action.undo });
+	}, [dashboardModel.actionNotifications]);
+	if (loading) return /* @__PURE__ */ jsx(LoadingFallback, {});
+	if (error) return /* @__PURE__ */ jsx(CapabilityError, {
+		error,
+		onRetry: retry,
+		onReconnect: handleReconnect,
+		onGoBack: handleGoBack
+	});
+	if (runtimeError) return /* @__PURE__ */ jsx(CapabilityError, {
+		error: runtimeError,
+		onReconnect: handleReconnect,
+		onGoBack: handleGoBack
+	});
+	if (adapter === null) return null;
+	return match(capabilityId).with("file-system", () => /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(LoadingFallback, {}),
+		children: /* @__PURE__ */ jsx(FileBrowser, {
+			fileSystem: adapter,
+			className: "h-full",
+			initialPath: dashboardModel.browserPath !== "/" ? dashboardModel.browserPath : void 0,
+			onPathChange: (path) => dashboardModel.setBrowserPath(path),
+			onError: handleRuntimeError,
+			onNotify: handleNotify,
+			onAction: handleAction,
+			showBreadcrumbs: false
+		})
+	})).with("object-storage", () => {
+		const s3Result = adapter;
+		return /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(LoadingFallback, {}),
+			children: /* @__PURE__ */ jsx(ObjectStorageBrowserLazy, {
+				storage: s3Result.storage,
+				bucket: s3Result.bucket
+			})
+		});
+	}).with("git-repo", () => {
+		const repo = selectedRepo ?? {
+			owner: "",
+			repo: ""
+		};
+		return /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(LoadingFallback, {}),
+			children: /* @__PURE__ */ jsx(GitRepoBrowserContent, {
+				serviceId,
+				token,
+				gitRepo: adapter,
+				owner: repo.owner,
+				repo: repo.repo,
+				selectedRepo: selectedRepo ?? void 0,
+				onError: handleRuntimeError,
+				actionNotifications: dashboardModel.actionNotifications
+			})
+		});
+	}).with("git-host", () => {
+		const repo = selectedRepo ?? {
+			owner: "",
+			repo: ""
+		};
+		return /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(LoadingFallback, {}),
+			children: /* @__PURE__ */ jsx(GitHostBrowserWithRepo, {
+				serviceId,
+				token,
+				gitHost: adapter,
+				owner: repo.owner,
+				repo: repo.repo,
+				selectedRepo: selectedRepo ?? void 0,
+				onError: handleRuntimeError,
+				actionNotifications: dashboardModel.actionNotifications
+			})
+		});
+	}).with("media", () => /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(LoadingFallback, {}),
+		children: /* @__PURE__ */ jsx(LazyMediaBrowser, { provider: adapter })
+	})).with("contacts", () => /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(LoadingFallback, {}),
+		children: /* @__PURE__ */ jsx(LazyContactBrowser, { provider: adapter })
+	})).with("calendar", () => /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(LoadingFallback, {}),
+		children: /* @__PURE__ */ jsx(LazyCalendarBrowser, { provider: adapter })
+	})).exhaustive();
+});
+const CapabilityContent = observer(({ serviceId, capabilityId, connectionManager, dashboardModel }) => {
+	const service = dashboardModel.selectedService;
+	if (!service) return null;
+	const token = connectionManager.getToken(serviceId);
+	if (!token) return /* @__PURE__ */ jsx(CapabilityError, { error: "Not connected. Please connect the service first." });
+	if (REPO_SERVICES$1.has(serviceId) && (capabilityId === "file-system" || capabilityId === "git-repo" || capabilityId === "git-host")) {
+		let selectedRepo = dashboardModel.getSelectedRepo(serviceId);
+		if (!selectedRepo) try {
+			const creds = JSON.parse(token);
+			if (creds.owner && creds.repo) {
+				dashboardModel.setSelectedRepo(serviceId, {
+					owner: creds.owner,
+					repo: creds.repo
+				});
+				selectedRepo = {
+					owner: creds.owner,
+					repo: creds.repo
+				};
+			}
+		} catch {}
+		if (!selectedRepo) return /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(LoadingFallback, {}),
+			children: /* @__PURE__ */ jsx(RepoPicker$1, {
+				serviceId,
+				accessToken: token,
+				onSelectRepo: (repo) => dashboardModel.setSelectedRepo(serviceId, repo)
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(GenericCapabilityContent, {
+		serviceId,
+		capabilityId,
+		token,
+		dashboardModel,
+		connectionManager
+	});
+});
+const ScopeWarningBanner = observer(({ serviceId, capabilityId, connectionManager }) => {
+	const token = connectionManager.getToken(serviceId);
+	if (!token) return null;
+	const hasScopes = connectionManager.hasCapabilityScopes(serviceId, capabilityId);
+	if (hasScopes) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 px-4 py-2 bg-yellow-50 dark:bg-yellow-900/20 border-b border-yellow-200 dark:border-yellow-800",
+		children: [/* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-yellow-500 flex-shrink-0" }), /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-yellow-700 dark:text-yellow-400",
+			children: "Required scopes not granted. Some features may not work. Try reconnecting with the needed permissions."
+		})]
+	});
+});
+const CapabilityPanel = observer(({ dashboardModel, connectionManager }) => {
+	if (!dashboardModel.panelOpen || !dashboardModel.selectedCell) return null;
+	const { serviceId, capabilityId } = dashboardModel.selectedCell;
+	const service = dashboardModel.selectedService;
+	const selectedRepo = dashboardModel.getSelectedRepo(serviceId);
+	const hasRepo = REPO_SERVICES$1.has(serviceId) && selectedRepo;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border border-border rounded-lg mt-4 overflow-hidden bg-card flex flex-col h-[70vh]",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-4 py-2 bg-muted border-b border-border",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "text-sm font-medium truncate",
+						title: `${service?.name} — ${CAPABILITY_LABELS[capabilityId]}`,
+						children: [
+							service?.name,
+							" — ",
+							CAPABILITY_LABELS[capabilityId]
+						]
+					}), hasRepo && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+						className: "text-xs text-muted-foreground truncate",
+						title: `${selectedRepo.owner}/${selectedRepo.repo}`,
+						children: [
+							"(",
+							selectedRepo.owner,
+							"/",
+							selectedRepo.repo,
+							")"
+						]
+					}), /* @__PURE__ */ jsxs("button", {
+						onClick: () => dashboardModel.clearSelectedRepo(serviceId),
+						className: "inline-flex items-center gap-1 px-2 py-0.5 text-[11px] font-medium rounded bg-muted hover:bg-muted/80 transition-colors",
+						children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "h-3 w-3" }), "Change repo"]
+					})] })]
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: () => dashboardModel.closePanel(),
+					className: "p-1 rounded hover:bg-muted transition-colors",
+					children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsx(ScopeWarningBanner, {
+				serviceId,
+				capabilityId,
+				connectionManager
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-h-0 overflow-hidden",
+				children: /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx(LoadingFallback, {}),
+					children: /* @__PURE__ */ jsx(CapabilityContent, {
+						serviceId,
+						capabilityId,
+						connectionManager,
+						dashboardModel
+					})
+				})
+			})
+		]
+	});
+});
+
+//#endregion
+//#region src/components/ActionHistoryPanel.tsx
+const ACTION_ICONS = {
+	delete: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5 text-destructive" }),
+	rename: /* @__PURE__ */ jsx(FileEdit, { className: "h-3.5 w-3.5 text-blue-500" }),
+	create: /* @__PURE__ */ jsx(FilePlus, { className: "h-3.5 w-3.5 text-green-500" }),
+	upload: /* @__PURE__ */ jsx(Upload, { className: "h-3.5 w-3.5 text-purple-500" }),
+	copy: /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+	move: /* @__PURE__ */ jsx(Move, { className: "h-3.5 w-3.5 text-orange-500" })
+};
+function formatTimeAgo(date) {
+	const seconds = Math.floor((Date.now() - date.getTime()) / 1e3);
+	if (seconds < 60) return "just now";
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return `${minutes}m ago`;
+	const hours = Math.floor(minutes / 60);
+	if (hours < 24) return `${hours}h ago`;
+	return `${Math.floor(hours / 24)}d ago`;
+}
+const ActionItem = observer(({ action, model }) => {
+	const [undoing, setUndoing] = useState(false);
+	const handleUndo = async () => {
+		if (!action.undo || action.undone || undoing) return;
+		setUndoing(true);
+		try {
+			await action.undo();
+			model.markUndone(action.id);
+		} catch {} finally {
+			setUndoing(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex items-start gap-2 px-3 py-2 text-xs ${action.undone ? "opacity-50" : ""}`,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 flex-shrink-0",
+				children: ACTION_ICONS[action.type]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: `text-foreground truncate ${action.undone ? "line-through" : ""}`,
+					title: action.description,
+					children: action.description
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mt-0.5",
+					children: formatTimeAgo(action.timestamp)
+				})]
+			}),
+			action.undo && !action.undone && /* @__PURE__ */ jsx("button", {
+				onClick: handleUndo,
+				disabled: undoing,
+				className: "flex-shrink-0 p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50",
+				title: "Undo",
+				children: /* @__PURE__ */ jsx(Undo2, { className: "h-3.5 w-3.5" })
+			})
+		]
+	});
+});
+const ActionHistoryPanel = observer(({ model }) => {
+	const [open, setOpen] = useState(false);
+	const panelRef = useRef(null);
+	const actions = model.recentActions;
+	useEffect(() => {
+		if (!open) return;
+		const handleClick = (e) => {
+			if (panelRef.current && !panelRef.current.contains(e.target)) setOpen(false);
+		};
+		document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, [open]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		ref: panelRef,
+		children: [/* @__PURE__ */ jsxs("button", {
+			onClick: () => setOpen(!open),
+			className: "relative p-1.5 rounded-md hover:bg-background/80 text-muted-foreground hover:text-foreground transition-colors",
+			title: "Action history",
+			children: [/* @__PURE__ */ jsx(History, { className: "h-4 w-4" }), actions.length > 0 && /* @__PURE__ */ jsx("span", {
+				className: "absolute -top-0.5 -right-0.5 h-3.5 w-3.5 rounded-full bg-primary text-primary-foreground text-[9px] font-medium flex items-center justify-center",
+				children: actions.length > 9 ? "9+" : actions.length
+			})]
+		}), open && /* @__PURE__ */ jsxs("div", {
+			className: "absolute right-0 top-full mt-1 w-72 rounded-lg border border-border bg-card shadow-lg z-50 animate-in fade-in slide-in-from-top-1 duration-150",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-3 py-2 border-b border-border",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium text-foreground",
+					children: "Recent Actions"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [actions.length > 0 && /* @__PURE__ */ jsx("button", {
+						onClick: () => model.clear(),
+						className: "text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors",
+						children: "Clear"
+					}), /* @__PURE__ */ jsx("button", {
+						onClick: () => setOpen(false),
+						className: "p-0.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
+						children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "max-h-64 overflow-y-auto divide-y divide-border",
+				children: actions.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "px-3 py-6 text-center text-xs text-muted-foreground",
+					children: "No actions yet"
+				}) : actions.map((action) => /* @__PURE__ */ jsx(ActionItem, {
+					action,
+					model
+				}, action.id))
+			})]
+		})]
+	});
+});
+
+//#endregion
+//#region src/components/FullScreenBrowser.tsx
+const REPO_SERVICES = new Set([
+	"github",
+	"gitlab",
+	"bitbucket",
+	"gitea"
+]);
+const FullScreenBrowser = observer(({ dashboardModel, connectionManager }) => {
+	const cell = dashboardModel.selectedCell;
+	if (!cell) return null;
+	const { serviceId, capabilityId } = cell;
+	const service = dashboardModel.selectedService;
+	if (!service) return null;
+	const selectedRepo = dashboardModel.getSelectedRepo(serviceId);
+	const hasRepo = REPO_SERVICES.has(serviceId) && selectedRepo;
+	const browserPath = dashboardModel.browserPath;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-full flex-1 min-h-0",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1 px-2 sm:px-4 py-2 bg-muted border-b border-border text-xs sm:text-sm flex-shrink-0 min-h-[40px]",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1 flex-1 min-w-0 flex-wrap",
+					children: [/* @__PURE__ */ jsx(PathBreadcrumb, {
+						path: browserPath,
+						onNavigate: (path) => dashboardModel.setBrowserPath(path),
+						showHome: false,
+						editable: true,
+						prefixSegments: [
+							{
+								label: "Dashboard",
+								onClick: () => dashboardModel.closePanel()
+							},
+							{
+								label: service.name,
+								onClick: () => dashboardModel.closePanel()
+							},
+							{
+								label: CAPABILITY_LABELS[capabilityId],
+								onClick: () => dashboardModel.setBrowserPath("/")
+							},
+							...hasRepo ? [{ label: `${selectedRepo.owner}/${selectedRepo.repo}` }] : []
+						]
+					}), hasRepo && /* @__PURE__ */ jsxs("button", {
+						onClick: () => dashboardModel.clearSelectedRepo(serviceId),
+						className: "ml-1 px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted hover:bg-muted/80 transition-colors",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "hidden sm:inline",
+							children: "Change"
+						}), /* @__PURE__ */ jsx(ArrowLeft, { className: "h-3 w-3 sm:hidden" })]
+					})]
+				}), /* @__PURE__ */ jsx(ActionHistoryPanel, { model: dashboardModel.actionNotifications })]
+			}),
+			/* @__PURE__ */ jsx(ScopeWarningBanner, {
+				serviceId,
+				capabilityId,
+				connectionManager
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-h-0 overflow-hidden",
+				children: /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center h-64",
+						children: /* @__PURE__ */ jsx(LoadingSpinner, { label: "Loading..." })
+					}),
+					children: /* @__PURE__ */ jsx(CapabilityContent, {
+						serviceId,
+						capabilityId,
+						connectionManager,
+						dashboardModel
+					})
+				})
+			})
+		]
+	});
+});
+
+//#endregion
+//#region src/components/ServiceDashboard.tsx
+const COLUMN_HEADERS = [
+	{
+		label: "Service",
+		className: "text-left"
+	},
+	{
+		label: "Status",
+		className: "text-left"
+	},
+	{
+		label: "FS",
+		className: "text-center"
+	},
+	{
+		label: "Obj Storage",
+		className: "text-center"
+	},
+	{
+		label: "Git",
+		className: "text-center"
+	},
+	{
+		label: "Media",
+		className: "text-center"
+	},
+	{
+		label: "Contacts",
+		className: "text-center"
+	},
+	{
+		label: "Calendar",
+		className: "text-center"
+	}
+];
+const ServiceDashboard = observer(({ connectionManager, dashboardModel }) => {
+	const services = serviceRegistry.getAll();
+	if (dashboardModel.panelOpen && dashboardModel.selectedCell) return /* @__PURE__ */ jsx("div", {
+		className: "animate-in fade-in duration-200 h-full flex flex-col min-h-0",
+		children: /* @__PURE__ */ jsx(FullScreenBrowser, {
+			dashboardModel,
+			connectionManager
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+		className: "hidden md:block",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "overflow-x-auto rounded-lg border border-border",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full text-sm",
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+					className: "bg-muted border-b border-border",
+					children: COLUMN_HEADERS.map((col) => /* @__PURE__ */ jsx("th", {
+						className: `px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider ${col.className}`,
+						children: col.label
+					}, col.label))
+				}) }), /* @__PURE__ */ jsx("tbody", {
+					className: "bg-card divide-y divide-border",
+					children: services.map((service) => /* @__PURE__ */ jsx(ServiceRow, {
+						service,
+						connectionManager,
+						dashboardModel
+					}, service.id))
+				})]
+			})
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: "md:hidden space-y-3",
+		children: services.map((service) => /* @__PURE__ */ jsx(ServiceCard, {
+			service,
+			connectionManager,
+			dashboardModel
+		}, service.id))
+	})] });
+});
+
+//#endregion
+//#region src/components/ConnectionStatus.tsx
+const ConnectionStatusIndicator = ({ status }) => {
+	const config = match(status).with("disconnected", () => ({
+		status: "neutral",
+		label: "Disconnected"
+	})).with("connecting", () => ({
+		status: "warning",
+		label: "Connecting...",
+		pulse: true
+	})).with("connected", () => ({
+		status: "success",
+		label: "Connected"
+	})).with("expired", () => ({
+		status: "warning",
+		label: "Expired"
+	})).with("error", () => ({
+		status: "error",
+		label: "Error"
+	})).with("not_configured", () => ({
+		status: "neutral",
+		label: "Not Configured"
+	})).with("loading", () => ({
+		status: "neutral",
+		label: "Loading..."
+	})).exhaustive();
+	return /* @__PURE__ */ jsx(StatusIndicator, {
+		status: config.status,
+		label: config.label,
+		pulse: config.status === "warning" && status === "connecting"
+	});
+};
+
+//#endregion
+//#region src/components/GitHubRepoPicker.tsx
+function GitHubRepoPicker({ accessToken, onSelectRepo }) {
+	const [repos, setRepos] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [search, setSearch] = useState("");
+	useEffect(() => {
+		let cancelled = false;
+		async function fetchRepos() {
+			setLoading(true);
+			setError(null);
+			try {
+				const res = await fetch("https://api.github.com/user/repos?sort=updated&per_page=50", { headers: { Authorization: `Bearer ${accessToken}` } });
+				if (!res.ok) throw new Error(`GitHub API error: ${res.status}`);
+				const data = await res.json();
+				if (!cancelled) setRepos(data);
+			} catch (err) {
+				if (!cancelled) setError(err instanceof Error ? err.message : "Failed to fetch repos");
+			} finally {
+				if (!cancelled) setLoading(false);
+			}
+		}
+		fetchRepos();
+		return () => {
+			cancelled = true;
+		};
+	}, [accessToken]);
+	const filtered = useMemo(() => repos.filter((r) => r.full_name.toLowerCase().includes(search.toLowerCase())), [repos, search]);
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-center py-8 text-gray-400",
+		children: [/* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin mr-2" }), "Loading repositories..."]
+	});
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border border-red-800 bg-red-950/50 p-4 text-red-300 text-sm",
+		children: error
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" }), /* @__PURE__ */ jsx("input", {
+				type: "text",
+				placeholder: "Search repositories...",
+				value: search,
+				onChange: (e) => setSearch(e.target.value),
+				className: "w-full rounded-md border border-gray-700 bg-gray-900 py-2 pl-9 pr-3 text-sm text-gray-200 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "max-h-64 overflow-y-auto rounded-md border border-gray-700",
+			children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "px-4 py-6 text-center text-sm text-gray-500",
+				children: "No repositories found"
+			}) : filtered.map((repo) => {
+				const parts = repo.full_name.split("/");
+				const owner = parts[0] ?? "";
+				const name = parts[1] ?? "";
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => onSelectRepo({
+						owner,
+						repo: name
+					}),
+					className: "flex w-full items-start gap-3 border-b border-gray-800 px-4 py-3 text-left hover:bg-gray-800/60 last:border-b-0 transition-colors",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-sm font-medium text-blue-400 truncate",
+								title: repo.full_name,
+								children: repo.full_name
+							}), repo.private && /* @__PURE__ */ jsx(Lock, { className: "h-3 w-3 flex-shrink-0 text-gray-500" })]
+						}), repo.description && /* @__PURE__ */ jsx("p", {
+							className: "mt-0.5 text-xs text-gray-500 truncate",
+							title: repo.description,
+							children: repo.description.length > 80 ? `${repo.description.slice(0, 80)}...` : repo.description
+						})]
+					}), repo.language && /* @__PURE__ */ jsx("span", {
+						className: "flex-shrink-0 rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-400",
+						children: repo.language
+					})]
+				}, repo.full_name);
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/demos/ServiceDashboardDemo.tsx
+const ServiceDashboardDemo = observer(({ authBaseURL, initialService, initialCapability, initialPath, onCellChange, onPathChange }) => {
+	const connectionManager = useMemo(() => {
+		const authClient = createConnectAuthClient(authBaseURL);
+		return new ConnectionManagerModel({ authClient });
+	}, [authBaseURL]);
+	const dashboardModel = useMemo(() => {
+		const model = new DashboardModel(connectionManager);
+		if (initialService && initialCapability && connectionManager.isConnected(initialService)) {
+			if (initialPath) model.setBrowserPathSilent(initialPath);
+			model.openCell(initialService, initialCapability);
+		}
+		return model;
+	}, [connectionManager]);
+	dashboardModel.onCellChange = onCellChange;
+	dashboardModel.onPathChange = onPathChange;
+	useEffect(() => {
+		connectionManager.initialize();
+	}, [connectionManager]);
+	const isConnected = initialService ? connectionManager.isConnected(initialService) : false;
+	useEffect(() => {
+		if (!initialService || !initialCapability) {
+			if (dashboardModel.panelOpen) dashboardModel.closePanelSilent();
+			return;
+		}
+		if (!connectionManager.initialized || !isConnected) return;
+		const modelCell = dashboardModel.selectedCell;
+		if (!dashboardModel.panelOpen || modelCell?.serviceId !== initialService || modelCell?.capabilityId !== initialCapability) {
+			if (initialPath) dashboardModel.setBrowserPathSilent(initialPath);
+			dashboardModel.openCell(initialService, initialCapability);
+		}
+	}, [
+		initialService,
+		initialCapability,
+		initialPath,
+		isConnected,
+		connectionManager.initialized,
+		dashboardModel
+	]);
+	if (connectionManager.configError) return /* @__PURE__ */ jsx("div", {
+		className: "p-4",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "rounded-lg border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/30 p-4",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium text-red-800 dark:text-red-300",
+				children: "Dashboard cannot start"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm text-red-600 dark:text-red-400",
+				children: connectionManager.configError
+			})]
+		})
+	});
+	const showNotConnectedBanner = initialService && initialCapability && connectionManager.initialized && !connectionManager.isConnected(initialService) && !dashboardModel.panelOpen;
+	const bannerService = showNotConnectedBanner ? serviceRegistry.get(initialService) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: dashboardModel.panelOpen ? "flex-1 flex flex-col min-h-0" : "flex-1 min-h-0 overflow-auto p-4",
+		children: [showNotConnectedBanner && bannerService && /* @__PURE__ */ jsxs("div", {
+			className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30 p-4",
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "text-sm font-medium text-amber-800 dark:text-amber-300",
+				children: [bannerService.name, " is not connected"]
+			}), /* @__PURE__ */ jsxs("p", {
+				className: "mt-1 text-sm text-amber-600 dark:text-amber-400",
+				children: [
+					"Click the ",
+					/* @__PURE__ */ jsx("strong", { children: "Connect" }),
+					" button next to ",
+					bannerService.name,
+					" in the table below to sign in. The browser will open automatically once connected."
+				]
+			})]
+		}), /* @__PURE__ */ jsx(ServiceDashboard, {
+			connectionManager,
+			dashboardModel
+		})]
+	});
+});
+
+//#endregion
+export { ActionHistoryPanel, ActionNotificationModel, CapabilityCell, CapabilityPanel, CapabilityPill, ConnectButton, ConnectedMenu, ConnectionManagerModel, ConnectionStatusIndicator, CredentialForm, CredentialFormModel, DashboardModel, FullScreenBrowser, GitHostBrowser, GitHostBrowserModel, GitHubRepoPicker, GitRepoBrowser, GitRepoBrowserModel, ObjectStorageBrowser, ObjectStorageBrowserModel, RepoPicker, RepoPickerModel, ServiceCard, ServiceDashboard, ServiceDashboardDemo, ServiceIcon, ServiceRow, TokenManager, bitbucketService, browserFsService, createConnectAuthClient, dropboxService, getScopeLabel, getScopeLabels, giteaService, githubService, gitlabService, googleService, icloudService, indexeddbService, microsoftService, s3Service, serviceRegistry, showActionToast, showErrorToast, showInfoToast, webdavService };
+//# sourceMappingURL=index.js.map