@anymux/connect 0.1.0

package/src/components/CapabilityPanel.tsx

@@ -0,0 +1,530 @@
+import React, { Suspense, useState, useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { showActionToast, showErrorToast } from '../utils/action-toast';
+import { match } from 'ts-pattern';
+import { X, ArrowLeft, AlertTriangle } from 'lucide-react';
+import { LoadingSpinner } from '@anymux/ui/components/loading-spinner';
+import type { DashboardModel } from '../models/DashboardModel';
+import type { ConnectionManagerModel } from '../models/ConnectionManagerModel';
+import type { ActionNotificationModel } from '../models/ActionNotificationModel';
+import type { CapabilityId } from '../types/service';
+import type { IFileSystem, IObjectStorage } from '@anymux/file-system';
+import { adapterRegistry } from '../adapters/adapter-registry';
+import { useAdapter } from './useAdapter';
+import { CapabilityError, isAuthError } from './CapabilityError';
+
+// Lazy-load browser components
+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 }: { provider: unknown }) => {
+      const model = new m.MediaBrowserModel(provider as never);
+      return React.createElement(m.MediaBrowser, { model, provider: provider as never, className: 'h-full' });
+    },
+  }))
+);
+
+const LazyContactBrowser = React.lazy(() =>
+  import('@anymux/object-ui').then((m) => ({
+    default: ({ provider }: { provider: unknown }) => {
+      const model = new m.ContactListModel(provider as never);
+      return React.createElement(m.ContactBrowser, { model, className: 'h-full' });
+    },
+  }))
+);
+
+const LazyCalendarBrowser = React.lazy(() =>
+  import('@anymux/object-ui').then((m) => ({
+    default: ({ provider }: { provider: unknown }) => {
+      const model = new m.CalendarModel(provider as never);
+      return React.createElement(m.CalendarBrowser, { model, className: 'h-full' });
+    },
+  }))
+);
+
+// Lazy-load RepoPicker
+const RepoPicker = React.lazy(() =>
+  import('./RepoPicker').then((m) => ({ default: m.RepoPicker }))
+);
+
+// Lazy-load browser components from this package
+const ObjectStorageBrowserLazy = React.lazy(() =>
+  import('./ObjectStorageBrowser').then((m) => ({ default: m.ObjectStorageBrowser }))
+);
+
+const GitRepoBrowserLazy = React.lazy(() =>
+  import('./GitBrowser').then((m) => ({ default: m.GitRepoBrowser }))
+);
+
+const GitHostBrowserLazy = React.lazy(() =>
+  import('./GitBrowser').then((m) => ({ default: m.GitHostBrowser }))
+);
+
+const CAPABILITY_LABELS: Record<CapabilityId, string> = {
+  'file-system': 'File System',
+  'object-storage': 'Object Storage',
+  'git-repo': 'Git',
+  'git-host': 'Git',
+  'media': 'Media',
+  'contacts': 'Contacts',
+  'calendar': 'Calendar',
+};
+
+// Services that need repo selection before showing capability content
+const REPO_SERVICES = new Set(['github', 'gitlab', 'bitbucket', 'gitea']);
+
+const LoadingFallback = () => (
+  <div className="flex items-center justify-center h-64">
+    <LoadingSpinner label="Loading..." />
+  </div>
+);
+
+// --- Git repo browser wrapper that provides createFileSystem ---
+
+function GitRepoBrowserContent({
+  serviceId,
+  token,
+  gitRepo,
+  owner,
+  repo,
+  selectedRepo,
+  onError,
+  actionNotifications,
+}: {
+  serviceId: string;
+  token: string;
+  gitRepo: import('@anymux/file-system').IGitRepo;
+  owner: string;
+  repo: string;
+  selectedRepo?: { owner: string; repo: string };
+  onError?: (err: { message: string }) => void;
+  actionNotifications?: ActionNotificationModel;
+}) {
+  const createFileSystem = useCallback(
+    async (branch: string): Promise<IFileSystem> => {
+      const context = { selectedRepo, branch };
+      const fs = await adapterRegistry.create(serviceId, token, 'file-system', context);
+      return fs as IFileSystem;
+    },
+    [serviceId, token, selectedRepo],
+  );
+
+  // Also load git-host adapter for PRs/Issues tabs
+  const [gitHost, setGitHost] = useState<import('@anymux/file-system').IGitHost | undefined>();
+  React.useEffect(() => {
+    let cancelled = false;
+    adapterRegistry.create(serviceId, token, 'git-host', { selectedRepo })
+      .then((adapter) => { if (!cancelled) setGitHost(adapter as any); })
+      .catch(() => {}); // Silently fail — PRs/Issues just won't show
+    return () => { cancelled = true; };
+  }, [serviceId, token, selectedRepo]);
+
+  return (
+    <GitRepoBrowserLazy
+      gitRepo={gitRepo}
+      owner={owner}
+      repo={repo}
+      createFileSystem={createFileSystem}
+      gitHost={gitHost}
+      onError={onError}
+      actionNotifications={actionNotifications}
+    />
+  );
+}
+
+// --- Git Host wrapper that also loads git-repo adapter for unified browser ---
+
+function GitHostBrowserWithRepo({
+  serviceId,
+  token,
+  gitHost,
+  owner,
+  repo,
+  selectedRepo,
+  onError,
+  actionNotifications,
+}: {
+  serviceId: string;
+  token: string;
+  gitHost: import('@anymux/file-system').IGitHost;
+  owner: string;
+  repo: string;
+  selectedRepo?: { owner: string; repo: string };
+  onError?: (err: { message: string }) => void;
+  actionNotifications?: ActionNotificationModel;
+}) {
+  const [gitRepo, setGitRepo] = useState<import('@anymux/file-system').IGitRepo | undefined>();
+  const [repoLoaded, setRepoLoaded] = useState(false);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    adapterRegistry.create(serviceId, token, 'git-repo', { selectedRepo })
+      .then((adapter) => { if (!cancelled) setGitRepo(adapter as any); })
+      .catch(() => {}) // Silently fail — just show PRs/Issues
+      .finally(() => { if (!cancelled) setRepoLoaded(true); });
+    return () => { cancelled = true; };
+  }, [serviceId, token, selectedRepo]);
+
+  const createFileSystem = useCallback(
+    async (branch: string): Promise<IFileSystem> => {
+      const context = { selectedRepo, branch };
+      const fs = await adapterRegistry.create(serviceId, token, 'file-system', context);
+      return fs as IFileSystem;
+    },
+    [serviceId, token, selectedRepo],
+  );
+
+  if (!repoLoaded) return <LoadingFallback />;
+
+  // If we have git-repo, show unified browser with all tabs
+  if (gitRepo) {
+    return (
+      <GitRepoBrowserLazy
+        gitRepo={gitRepo}
+        owner={owner}
+        repo={repo}
+        createFileSystem={createFileSystem}
+        gitHost={gitHost}
+        onError={onError}
+        actionNotifications={actionNotifications}
+      />
+    );
+  }
+
+  // Fallback: just show PRs/Issues if git-repo adapter not available
+  return <GitHostBrowserLazy gitHost={gitHost} />;
+}
+
+// --- Generic capability content renderer ---
+
+const GenericCapabilityContent = observer(function GenericCapabilityContent({
+  serviceId,
+  capabilityId,
+  token,
+  dashboardModel,
+  connectionManager,
+}: {
+  serviceId: string;
+  capabilityId: CapabilityId;
+  token: string;
+  dashboardModel: DashboardModel;
+  connectionManager: ConnectionManagerModel;
+}) {
+  const selectedRepo = dashboardModel.getSelectedRepo(serviceId);
+  const context = { selectedRepo: selectedRepo ?? undefined };
+
+  const { adapter, loading, error, retry } = useAdapter(
+    async () => {
+      // Refresh OAuth token before creating adapter to avoid stale 401s
+      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: any) => {
+        if (capabilityId === 'file-system') {
+          await (adapter as IFileSystem).readdir('/');
+        } else if (capabilityId === 'git-host') {
+          if (adapter.listRepositories) await adapter.listRepositories({ page: 1, perPage: 1 });
+        } else if (capabilityId === 'git-repo') {
+          if (adapter.listBranches) await adapter.listBranches();
+        } else if (capabilityId === 'calendar') {
+          if (adapter.getCalendars) await adapter.getCalendars();
+        } else if (capabilityId === 'contacts') {
+          if (adapter.getContacts) await adapter.getContacts({ limit: 1 });
+        } else if (capabilityId === 'media') {
+          if (adapter.getAlbums) await adapter.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 we get a 401/auth error, try one more refresh and rebuild the adapter
+        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 as any, 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();
+    // For OAuth services, immediately redirect to provider consent screen
+    const isOAuth = service && !['s3', 'webdav', 'gitea', 'icloud', 'browser-fs', 'indexeddb'].includes(service.authProvider);
+    if (isOAuth) {
+      await connectionManager.connect(serviceId);
+    } else {
+      // Signal ConnectButton to auto-open credential form / file picker
+      connectionManager.requestReconnect(serviceId);
+    }
+  };
+
+  const handleGoBack = () => {
+    dashboardModel.closePanel();
+  };
+
+  // Track runtime auth errors (e.g. 401 from API calls after adapter is created)
+  const [runtimeError, setRuntimeError] = useState<string | null>(null);
+
+  const handleRuntimeError = (err: { message: string }) => {
+    if (isAuthError(err.message)) {
+      setRuntimeError(err.message);
+    }
+  };
+
+  const handleNotify = useCallback((type: 'success' | 'error' | 'warning', message: string) => {
+    if (type === 'success') {
+      showActionToast(dashboardModel.actionNotifications, 'create', message);
+    } else {
+      showErrorToast(message);
+    }
+  }, [dashboardModel.actionNotifications]);
+
+  const handleAction = useCallback((action: { type: 'create' | 'rename' | 'delete' | 'upload'; message: string; undo?: () => Promise<void> }) => {
+    showActionToast(dashboardModel.actionNotifications, action.type, action.message, { undo: action.undo });
+  }, [dashboardModel.actionNotifications]);
+
+  if (loading) return <LoadingFallback />;
+  if (error) return <CapabilityError error={error} onRetry={retry} onReconnect={handleReconnect} onGoBack={handleGoBack} />;
+  if (runtimeError) return <CapabilityError error={runtimeError} onReconnect={handleReconnect} onGoBack={handleGoBack} />;
+  if (adapter === null) return null; // Should not happen after repo selection
+
+  // Route by capability type
+  return match(capabilityId)
+    .with('file-system', () => (
+      <Suspense fallback={<LoadingFallback />}>
+        <FileBrowser
+          fileSystem={adapter as IFileSystem}
+          className="h-full"
+          initialPath={dashboardModel.browserPath !== '/' ? dashboardModel.browserPath : undefined}
+          onPathChange={(path) => dashboardModel.setBrowserPath(path)}
+          onError={handleRuntimeError}
+          onNotify={handleNotify}
+          onAction={handleAction}
+          showBreadcrumbs={false}
+        />
+      </Suspense>
+    ))
+    .with('object-storage', () => {
+      const s3Result = adapter as { storage: IObjectStorage; bucket: string };
+      return (
+        <Suspense fallback={<LoadingFallback />}>
+          <ObjectStorageBrowserLazy storage={s3Result.storage} bucket={s3Result.bucket} />
+        </Suspense>
+      );
+    })
+    .with('git-repo', () => {
+      const repo = selectedRepo ?? { owner: '', repo: '' };
+      return (
+        <Suspense fallback={<LoadingFallback />}>
+          <GitRepoBrowserContent
+            serviceId={serviceId}
+            token={token}
+            gitRepo={adapter as any}
+            owner={repo.owner}
+            repo={repo.repo}
+            selectedRepo={selectedRepo ?? undefined}
+            onError={handleRuntimeError}
+            actionNotifications={dashboardModel.actionNotifications}
+          />
+        </Suspense>
+      );
+    })
+    .with('git-host', () => {
+      // Route git-host to unified browser: show PRs/Issues alongside git-repo tabs
+      const repo = selectedRepo ?? { owner: '', repo: '' };
+      return (
+        <Suspense fallback={<LoadingFallback />}>
+          <GitHostBrowserWithRepo
+            serviceId={serviceId}
+            token={token}
+            gitHost={adapter as any}
+            owner={repo.owner}
+            repo={repo.repo}
+            selectedRepo={selectedRepo ?? undefined}
+            onError={handleRuntimeError}
+            actionNotifications={dashboardModel.actionNotifications}
+          />
+        </Suspense>
+      );
+    })
+    .with('media', () => (
+      <Suspense fallback={<LoadingFallback />}>
+        <LazyMediaBrowser provider={adapter} />
+      </Suspense>
+    ))
+    .with('contacts', () => (
+      <Suspense fallback={<LoadingFallback />}>
+        <LazyContactBrowser provider={adapter} />
+      </Suspense>
+    ))
+    .with('calendar', () => (
+      <Suspense fallback={<LoadingFallback />}>
+        <LazyCalendarBrowser provider={adapter} />
+      </Suspense>
+    ))
+    .exhaustive();
+});
+
+/** Routes to the correct capability content based on service + capability */
+export { CAPABILITY_LABELS };
+export const CapabilityContent = observer(({
+  serviceId,
+  capabilityId,
+  connectionManager,
+  dashboardModel,
+}: {
+  serviceId: string;
+  capabilityId: CapabilityId;
+  connectionManager: ConnectionManagerModel;
+  dashboardModel: DashboardModel;
+}) => {
+  const service = dashboardModel.selectedService;
+  if (!service) return null;
+
+  const token = connectionManager.getToken(serviceId);
+  if (!token) {
+    return <CapabilityError error="Not connected. Please connect the service first." />;
+  }
+
+  // Services needing repo selection show picker first
+  if (REPO_SERVICES.has(serviceId) && (capabilityId === 'file-system' || capabilityId === 'git-repo' || capabilityId === 'git-host')) {
+    let selectedRepo = dashboardModel.getSelectedRepo(serviceId);
+    // Auto-extract owner/repo from credential token (e.g. Gitea Quick Test includes them)
+    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 {
+        // Token is not JSON (e.g. OAuth token) — show picker
+      }
+    }
+    if (!selectedRepo) {
+      return (
+        <Suspense fallback={<LoadingFallback />}>
+          <RepoPicker
+            serviceId={serviceId}
+            accessToken={token}
+            onSelectRepo={(repo) => dashboardModel.setSelectedRepo(serviceId, repo)}
+          />
+        </Suspense>
+      );
+    }
+  }
+
+  return (
+    <GenericCapabilityContent
+      serviceId={serviceId}
+      capabilityId={capabilityId}
+      token={token}
+      dashboardModel={dashboardModel}
+      connectionManager={connectionManager}
+    />
+  );
+});
+
+export const ScopeWarningBanner = observer(({ serviceId, capabilityId, connectionManager }: {
+  serviceId: string;
+  capabilityId: CapabilityId;
+  connectionManager: ConnectionManagerModel;
+}) => {
+  const token = connectionManager.getToken(serviceId);
+  if (!token) return null;
+  const hasScopes = connectionManager.hasCapabilityScopes(serviceId, capabilityId);
+  if (hasScopes) return null;
+  return (
+    <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">
+      <AlertTriangle className="h-4 w-4 text-yellow-500 flex-shrink-0" />
+      <span className="text-xs text-yellow-700 dark:text-yellow-400">
+        Required scopes not granted. Some features may not work. Try reconnecting with the needed permissions.
+      </span>
+    </div>
+  );
+});
+
+interface CapabilityPanelProps {
+  dashboardModel: DashboardModel;
+  connectionManager: ConnectionManagerModel;
+}
+
+export const CapabilityPanel: React.FC<CapabilityPanelProps> = 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.has(serviceId) && selectedRepo;
+
+  return (
+    <div className="border border-border rounded-lg mt-4 overflow-hidden bg-card flex flex-col h-[70vh]">
+      <div className="flex items-center justify-between px-4 py-2 bg-muted border-b border-border">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium truncate" title={`${service?.name} — ${CAPABILITY_LABELS[capabilityId]}`}>
+            {service?.name} — {CAPABILITY_LABELS[capabilityId]}
+          </span>
+          {hasRepo && (
+            <>
+              <span className="text-xs text-muted-foreground truncate" title={`${selectedRepo.owner}/${selectedRepo.repo}`}>
+                ({selectedRepo.owner}/{selectedRepo.repo})
+              </span>
+              <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"
+              >
+                <ArrowLeft className="h-3 w-3" />
+                Change repo
+              </button>
+            </>
+          )}
+        </div>
+        <button
+          onClick={() => dashboardModel.closePanel()}
+          className="p-1 rounded hover:bg-muted transition-colors"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+      <ScopeWarningBanner serviceId={serviceId} capabilityId={capabilityId} connectionManager={connectionManager} />
+      <div className="flex-1 min-h-0 overflow-hidden">
+        <Suspense fallback={<LoadingFallback />}>
+          <CapabilityContent
+            serviceId={serviceId}
+            capabilityId={capabilityId}
+            connectionManager={connectionManager}
+            dashboardModel={dashboardModel}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+});

package/src/components/CapabilityPill.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Check, Minus } from 'lucide-react';
+import { match } from 'ts-pattern';
+import { LoadingSpinner } from '@anymux/ui/components/loading-spinner';
+import type { ConnectionStatus } from '../types/connection';
+import type { CapabilityId } from '../types/service';
+
+interface CapabilityPillProps {
+  label: string;
+  capabilityId: CapabilityId;
+  status: ConnectionStatus;
+  isSelected: boolean;
+  hasScopes: boolean;
+  onSelect: () => void;
+  disabled?: boolean;
+}
+
+export const CapabilityPill: React.FC<CapabilityPillProps> = ({
+  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', () => <LoadingSpinner size="sm" label="Loading" className="h-3 w-3" />)
+    .with('connected', () => (
+      <Check className={`h-3 w-3 ${hasScopes ? 'text-green-500' : 'text-orange-400'}`} />
+    ))
+    .otherwise(() => <Minus className="h-3 w-3" />);
+
+  return (
+    <button
+      onClick={onSelect}
+      disabled={disabled || !connected}
+      className={className}
+    >
+      {icon}
+      {label}
+    </button>
+  );
+};