@anymux/connect 0.1.0

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@anymux/connect",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "HelloJS-style service connection dashboard for AnyMux",
+  "keywords": [
+    "anymux",
+    "connect",
+    "oauth",
+    "dashboard",
+    "services"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AnyMux/AnyMuxMonorepo.git",
+    "directory": "packages/connect"
+  },
+  "homepage": "https://github.com/AnyMux/AnyMuxMonorepo/tree/main/packages/connect#readme",
+  "engines": {
+    "node": ">=20"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./registry": {
+      "types": "./dist/registry.d.ts",
+      "import": "./dist/registry.js",
+      "default": "./dist/registry.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "dependencies": {
+    "better-auth": "^1.2.0",
+    "sonner": "^2.0.3",
+    "ts-pattern": "^5.6.0",
+    "zod": "^3.24.0",
+    "@anymux/box": "0.1.0",
+    "@anymux/bitbucket": "0.1.0",
+    "@anymux/dropbox": "0.1.0",
+    "@anymux/file-system": "0.1.0",
+    "@anymux/browser-fs": "0.1.0",
+    "@anymux/flickr": "0.1.0",
+    "@anymux/instagram": "0.1.0",
+    "@anymux/gitea": "0.1.0",
+    "@anymux/github": "0.1.0",
+    "@anymux/icloud": "0.1.0",
+    "@anymux/gitlab": "0.1.0",
+    "@anymux/microsoft": "0.1.0",
+    "@anymux/indexeddb": "0.1.0",
+    "@anymux/google-drive": "0.1.0",
+    "@anymux/ui": "0.1.0",
+    "@anymux/s3": "0.1.0",
+    "@anymux/webdav": "0.1.0"
+  },
+  "peerDependencies": {
+    "mobx": "^6.13.5",
+    "mobx-react-lite": "^4.0.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^0.475.0",
+    "tsdown": "^0.10.2",
+    "typescript": "^5.7.3",
+    "@anymux/fs-ui": "0.1.0",
+    "@anymux/object-ui": "0.1.0",
+    "@anymux/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "check": "tsc -p tsconfig.json --noEmit"
+  }
+}

package/src/adapters/adapter-registry.ts

@@ -0,0 +1,177 @@
+import type { CapabilityId } from '../types/service';
+
+export interface AdapterContext {
+  /** Selected repo for git-backed services */
+  selectedRepo?: { owner: string; repo: string };
+  /** Override the branch/ref for file-system adapters */
+  branch?: string;
+}
+
+export type AdapterFactory = (
+  token: string,
+  capabilityId: CapabilityId,
+  context: AdapterContext,
+) => Promise<unknown>;
+
+const factories = new Map<string, AdapterFactory>();
+
+export const adapterRegistry = {
+  register(serviceId: string, factory: AdapterFactory): void {
+    factories.set(serviceId, factory);
+  },
+
+  async create(
+    serviceId: string,
+    token: string,
+    capabilityId: CapabilityId,
+    context: AdapterContext = {},
+  ): Promise<unknown> {
+    const factory = factories.get(serviceId);
+    if (!factory) {
+      throw new Error(`No adapter factory registered for service: ${serviceId}`);
+    }
+    return factory(token, capabilityId, context);
+  },
+
+  has(serviceId: string): boolean {
+    return factories.has(serviceId);
+  },
+};
+
+// --- Register all adapter factories ---
+// Capability validation is handled by the service registry; factories only create adapters.
+
+// Google Drive / Contacts / Calendar
+adapterRegistry.register('google', async (token, capabilityId) => {
+  const m = await import('@anymux/google-drive');
+  const adapters: Partial<Record<CapabilityId, () => unknown>> = {
+    'file-system': () => new m.GoogleDriveFileSystem({ accessToken: token }),
+    'contacts': () => new m.GoogleContactsProvider(token),
+    'calendar': () => new m.GoogleCalendarProvider(token),
+  };
+  return adapters[capabilityId]!();
+});
+
+// Dropbox
+adapterRegistry.register('dropbox', async (token) => {
+  const { DropboxFileSystem } = await import('@anymux/dropbox');
+  return new DropboxFileSystem({ accessToken: token });
+});
+
+// Box
+adapterRegistry.register('box', async (token) => {
+  const { BoxFileSystem } = await import('@anymux/box');
+  return new BoxFileSystem({ accessToken: token });
+});
+
+// GitHub
+adapterRegistry.register('github', async (token, capabilityId, ctx) => {
+  const repo = ctx.selectedRepo;
+  if (!repo) return null; // needs repo selection first
+  const config = { token, owner: repo.owner, repo: repo.repo, branch: ctx.branch ?? 'main' };
+  const m = await import('@anymux/github');
+  const adapters: Partial<Record<CapabilityId, () => unknown>> = {
+    'file-system': () => new m.GitHubFileSystem(config),
+    'git-repo': () => new m.GitHubGitRepo(config),
+    'git-host': () => new m.GitHubGitHost(config),
+  };
+  return adapters[capabilityId]!();
+});
+
+// GitLab
+adapterRegistry.register('gitlab', async (token, capabilityId, ctx) => {
+  const repo = ctx.selectedRepo;
+  if (!repo) return null; // needs repo selection first
+  const config = { token, projectId: `${repo.owner}/${repo.repo}`, branch: ctx.branch ?? 'main' };
+  const m = await import('@anymux/gitlab');
+  const adapters: Partial<Record<CapabilityId, () => unknown>> = {
+    'file-system': () => new m.GitLabFileSystem(config),
+    'git-repo': () => new m.GitLabGitRepo(config),
+    'git-host': () => new m.GitLabGitHost(config),
+  };
+  return adapters[capabilityId]!();
+});
+
+// Bitbucket
+adapterRegistry.register('bitbucket', async (token, capabilityId, ctx) => {
+  const repo = ctx.selectedRepo;
+  if (!repo) return null; // needs repo selection first
+  const config = { token, workspace: repo.owner, repo: repo.repo, branch: ctx.branch ?? 'main' };
+  const m = await import('@anymux/bitbucket');
+  const adapters: Partial<Record<CapabilityId, () => unknown>> = {
+    'file-system': () => new m.BitbucketFileSystem(config),
+    'git-repo': () => new m.BitbucketGitRepo(config),
+    'git-host': () => new m.BitbucketGitHost(config),
+  };
+  return adapters[capabilityId]!();
+});
+
+// Gitea
+adapterRegistry.register('gitea', async (token, capabilityId, ctx) => {
+  const creds = JSON.parse(token);
+  const proxyUrl = typeof window !== 'undefined' ? window.location.origin : undefined;
+  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: Partial<Record<CapabilityId, () => unknown>> = {
+    'file-system': () => new m.GiteaFileSystem(config),
+    'git-repo': () => new m.GiteaGitRepo(config),
+    'git-host': () => new m.GiteaGitHost(config),
+  };
+  return adapters[capabilityId]!();
+});
+
+// WebDAV
+adapterRegistry.register('webdav', async (token) => {
+  const creds = JSON.parse(token);
+  const { WebDAVFileSystem } = await import('@anymux/webdav');
+  const proxyUrl = typeof window !== 'undefined' ? window.location.origin : undefined;
+  return new WebDAVFileSystem({ url: creds.url, username: creds.username, password: creds.password, proxyUrl });
+});
+
+// S3
+adapterRegistry.register('s3', async (token) => {
+  const creds = JSON.parse(token);
+  const proxyUrl = typeof window !== 'undefined' ? window.location.origin : undefined;
+  if (proxyUrl) {
+    // Browser: use proxy to avoid CORS
+    const { S3ProxyStorage } = await import('@anymux/s3');
+    const storage = new S3ProxyStorage({
+      proxyUrl,
+      endpoint: creds.endpoint,
+      region: creds.region?.trim(),
+      accessKeyId: creds.accessKeyId?.trim(),
+      secretAccessKey: creds.secretAccessKey?.trim(),
+      forcePathStyle: true,
+    });
+    return { storage, bucket: creds.bucket || 'anymux-test' };
+  }
+  // Server: use direct SDK
+  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' };
+});
+
+// BrowserFS (File System Access API)
+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.');
+});
+
+// IndexedDB
+adapterRegistry.register('indexeddb', async () => {
+  const { IndexedDBFileSystem } = await import('@anymux/indexeddb');
+  const fs = new IndexedDBFileSystem();
+  await fs.init();
+  return fs;
+});
+

package/src/auth/auth-client.ts

@@ -0,0 +1,101 @@
+import { createAuthClient } from 'better-auth/client';
+import { genericOAuthClient } from 'better-auth/client/plugins';
+
+const PENDING_SERVICE_KEY = 'anymux-pending-service';
+
+export interface ConnectAuthClient {
+  signIn(provider: string, serviceId: string): Promise<void>;
+  signOut(): Promise<void>;
+  getSession(): Promise<{ user: { id: string; name: string; image?: string } } | null>;
+  getAccessToken(providerId: string): Promise<string | null>;
+  fetchConfiguredProviders(): Promise<{ database: boolean; authSecret: boolean; providers: Record<string, boolean> }>;
+  fetchGrantedScopes(): Promise<Record<string, string[]>>;
+  fetchTestCredentials(): Promise<Record<string, unknown>>;
+  fetchUserProfiles(): Promise<Record<string, { id: string; name: string; email?: string; avatarUrl?: string; profileUrl?: string }>>;
+  revokeProvider(providerId: string): Promise<void>;
+  getPendingServiceId(): string | null;
+  clearPendingServiceId(): void;
+}
+
+export function createConnectAuthClient(baseURL: string): ConnectAuthClient {
+  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: provider as 'google' | 'github' | 'dropbox' | 'microsoft' | 'apple',
+          callbackURL: window.location.href,
+        });
+      }
+      // Browser redirects away — this line won't execute
+    },
+
+    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: string) {
+      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: string) {
+      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 as Record<string, unknown>).deleted ?? '?'}`);
+    },
+
+    getPendingServiceId() {
+      return sessionStorage.getItem(PENDING_SERVICE_KEY);
+    },
+
+    clearPendingServiceId() {
+      sessionStorage.removeItem(PENDING_SERVICE_KEY);
+    },
+  };
+}

package/src/auth/token-manager.ts

@@ -0,0 +1,27 @@
+const STORAGE_PREFIX = 'anymux-connect-token:';
+
+export class TokenManager {
+  getToken(serviceId: string): string | null {
+    try {
+      return localStorage.getItem(STORAGE_PREFIX + serviceId);
+    } catch {
+      return null;
+    }
+  }
+
+  setToken(serviceId: string, token: string): void {
+    try {
+      localStorage.setItem(STORAGE_PREFIX + serviceId, token);
+    } catch {
+      // localStorage unavailable
+    }
+  }
+
+  removeToken(serviceId: string): void {
+    try {
+      localStorage.removeItem(STORAGE_PREFIX + serviceId);
+    } catch {
+      // localStorage unavailable
+    }
+  }
+}

package/src/components/ActionHistoryPanel.tsx

@@ -0,0 +1,137 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { History, Undo2, Trash2, FileEdit, FilePlus, Upload, Copy, Move, X } from 'lucide-react';
+import type { ActionNotificationModel, ActionRecord, ActionType } from '../models/ActionNotificationModel';
+
+const ACTION_ICONS: Record<ActionType, React.ReactNode> = {
+  delete: <Trash2 className="h-3.5 w-3.5 text-destructive" />,
+  rename: <FileEdit className="h-3.5 w-3.5 text-blue-500" />,
+  create: <FilePlus className="h-3.5 w-3.5 text-green-500" />,
+  upload: <Upload className="h-3.5 w-3.5 text-purple-500" />,
+  copy: <Copy className="h-3.5 w-3.5 text-muted-foreground" />,
+  move: <Move className="h-3.5 w-3.5 text-orange-500" />,
+};
+
+function formatTimeAgo(date: Date): string {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+  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: React.FC<{ action: ActionRecord; model: ActionNotificationModel }> = 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 {
+      // Error toast is handled by showActionToast
+    } finally {
+      setUndoing(false);
+    }
+  };
+
+  return (
+    <div className={`flex items-start gap-2 px-3 py-2 text-xs ${action.undone ? 'opacity-50' : ''}`}>
+      <span className="mt-0.5 flex-shrink-0">{ACTION_ICONS[action.type]}</span>
+      <div className="flex-1 min-w-0">
+        <p className={`text-foreground truncate ${action.undone ? 'line-through' : ''}`} title={action.description}>
+          {action.description}
+        </p>
+        <p className="text-muted-foreground mt-0.5">{formatTimeAgo(action.timestamp)}</p>
+      </div>
+      {action.undo && !action.undone && (
+        <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"
+        >
+          <Undo2 className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  );
+});
+
+interface ActionHistoryPanelProps {
+  model: ActionNotificationModel;
+}
+
+export const ActionHistoryPanel: React.FC<ActionHistoryPanelProps> = observer(({ model }) => {
+  const [open, setOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const actions = model.recentActions;
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  return (
+    <div className="relative" ref={panelRef}>
+      <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"
+      >
+        <History className="h-4 w-4" />
+        {actions.length > 0 && (
+          <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">
+            {actions.length > 9 ? '9+' : actions.length}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <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">
+          <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+            <span className="text-xs font-medium text-foreground">Recent Actions</span>
+            <div className="flex items-center gap-1">
+              {actions.length > 0 && (
+                <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"
+                >
+                  Clear
+                </button>
+              )}
+              <button
+                onClick={() => setOpen(false)}
+                className="p-0.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          </div>
+
+          <div className="max-h-64 overflow-y-auto divide-y divide-border">
+            {actions.length === 0 ? (
+              <div className="px-3 py-6 text-center text-xs text-muted-foreground">
+                No actions yet
+              </div>
+            ) : (
+              actions.map((action) => (
+                <ActionItem key={action.id} action={action} model={model} />
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/CapabilityCell.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Check, Minus } from 'lucide-react';
+import { match } from 'ts-pattern';
+import type { CapabilityId, ServiceDefinition } from '../types/service';
+import type { ConnectionManagerModel } from '../models/ConnectionManagerModel';
+import type { DashboardModel } from '../models/DashboardModel';
+
+interface CapabilityCellProps {
+  service: ServiceDefinition;
+  capabilityId: CapabilityId;
+  connectionManager: ConnectionManagerModel;
+  dashboardModel: DashboardModel;
+}
+
+export const CapabilityCell: React.FC<CapabilityCellProps> = observer(
+  ({ service, capabilityId, connectionManager, dashboardModel }) => {
+    const capability = service.capabilities.find((c) => c.id === capabilityId);
+    // For merged git column: show as supported if either git-repo or git-host is supported
+    const gitHostCap = capabilityId === 'git-repo'
+      ? service.capabilities.find((c) => c.id === 'git-host')
+      : undefined;
+    const supported = (capability?.supported ?? false) || (gitHostCap?.supported ?? false);
+    // Route to the right capability when clicking: prefer git-repo, fallback to git-host
+    const effectiveCapabilityId = capabilityId === 'git-repo' && !capability?.supported && gitHostCap?.supported
+      ? 'git-host' as CapabilityId
+      : 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 (
+        <td className="px-3 py-2 text-center align-middle">
+          <Minus className="h-4 w-4 text-muted-foreground/30 mx-auto" />
+        </td>
+      );
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        dashboardModel.selectCell(service.id, effectiveCapabilityId);
+      }
+    };
+
+    return match(status)
+      .with('loading', () => (
+        <td className="px-3 py-2 text-center align-middle">
+          <span className="inline-block h-4 w-4 rounded bg-muted animate-pulse mx-auto" />
+        </td>
+      ))
+      .with('connected', () => {
+        // Don't show green/orange until scopes have been fetched
+        if (!connectionManager.initialized) {
+          return (
+            <td className="px-3 py-2 text-center align-middle">
+              <span className="inline-block h-4 w-4 rounded bg-muted animate-pulse mx-auto" />
+            </td>
+          );
+        }
+        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 (
+          <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 ? undefined : 'Scope not granted'}
+          >
+            <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`}>
+              <Check className="h-3 w-3" />
+            </span>
+          </td>
+        );
+      })
+      .otherwise(() => (
+        <td className="px-3 py-2 text-center align-middle">
+          <span className="inline-flex items-center justify-center w-5 h-5 rounded border border-muted-foreground/30 mx-auto">
+            <Check className="h-3 w-3 text-muted-foreground/50" />
+          </span>
+        </td>
+      ));
+  }
+);

package/src/components/CapabilityError.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ArrowLeft, RefreshCw } from 'lucide-react';
+import { ErrorDisplay } from '@anymux/ui/components/error-display';
+
+function isAuthError(error: string): boolean {
+  return /\b(401|403|auth|token|expired|unauthorized|forbidden|denied|scope|permission|sign.?in|log.?in)\b/i.test(error);
+}
+
+export { isAuthError };
+
+/** Render error with contextual actions for capability panels */
+export function CapabilityError({ error, onRetry, onReconnect, onGoBack }: {
+  error: string;
+  onRetry?: () => void;
+  onReconnect?: () => void;
+  onGoBack?: () => void;
+}) {
+  const authError = isAuthError(error);
+  return (
+    <div className="flex flex-col items-center justify-center h-64 gap-4 p-4">
+      <ErrorDisplay
+        error={error}
+        title={authError ? 'Authentication Required' : 'Failed to Load'}
+        variant={authError ? 'warning' as const : 'destructive' as const}
+        className="max-w-md w-full"
+        {...(onRetry != null ? { onRetry } : {})}
+      />
+      <div className="flex items-center gap-2">
+        {onReconnect && (
+          <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"
+          >
+            <RefreshCw className="h-3 w-3" />
+            Reconnect
+          </button>
+        )}
+        {onGoBack && (
+          <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"
+          >
+            <ArrowLeft className="h-3 w-3" />
+            Back to Dashboard
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}