@anymux/connect 0.1.0

package/src/components/ServiceDashboard.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { ConnectionManagerModel } from '../models/ConnectionManagerModel';
+import type { DashboardModel } from '../models/DashboardModel';
+import { serviceRegistry } from '../registry/service-registry';
+import { ServiceRow } from './ServiceRow';
+import { ServiceCard } from './ServiceCard';
+import { FullScreenBrowser } from './FullScreenBrowser';
+
+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' },
+];
+
+interface ServiceDashboardProps {
+  connectionManager: ConnectionManagerModel;
+  dashboardModel: DashboardModel;
+}
+
+export const ServiceDashboard: React.FC<ServiceDashboardProps> = observer(
+  ({ connectionManager, dashboardModel }) => {
+    const services = serviceRegistry.getAll();
+
+    if (dashboardModel.panelOpen && dashboardModel.selectedCell) {
+      return (
+        <div className="animate-in fade-in duration-200 h-full flex flex-col min-h-0">
+          <FullScreenBrowser dashboardModel={dashboardModel} connectionManager={connectionManager} />
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        {/* Desktop view — table */}
+        <div className="hidden md:block">
+          <div className="overflow-x-auto rounded-lg border border-border">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="bg-muted border-b border-border">
+                  {COLUMN_HEADERS.map((col) => (
+                    <th
+                      key={col.label}
+                      className={`px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider ${col.className}`}
+                    >
+                      {col.label}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="bg-card divide-y divide-border">
+                {services.map((service) => (
+                  <ServiceRow
+                    key={service.id}
+                    service={service}
+                    connectionManager={connectionManager}
+                    dashboardModel={dashboardModel}
+                  />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* Mobile: card layout (always) */}
+        <div className="md:hidden space-y-3">
+          {services.map((service) => (
+            <ServiceCard
+              key={service.id}
+              service={service}
+              connectionManager={connectionManager}
+              dashboardModel={dashboardModel}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/ServiceIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import * as icons from 'lucide-react';
+import type { LucideProps } from 'lucide-react';
+
+/** Custom icons for services not available in lucide-react */
+const AppleIcon: React.FC<LucideProps> = ({ size = 24, color = 'currentColor', strokeWidth: _sw, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill={color}
+    {...props}
+  >
+    <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" />
+  </svg>
+);
+
+const customIcons: Record<string, React.FC<LucideProps>> = {
+  Apple: AppleIcon,
+};
+
+interface ServiceIconProps extends LucideProps {
+  name: string;
+}
+
+export const ServiceIcon: React.FC<ServiceIconProps> = ({ name, ...props }) => {
+  const CustomIcon = customIcons[name];
+  if (CustomIcon) {
+    return <CustomIcon {...props} />;
+  }
+  const Icon = (icons as unknown as Record<string, React.FC<LucideProps>>)[name];
+  if (!Icon) {
+    return <icons.HelpCircle {...props} />;
+  }
+  return <Icon {...props} />;
+};

package/src/components/ServiceRow.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { CapabilityId, ServiceDefinition } from '../types/service';
+import type { ConnectionManagerModel } from '../models/ConnectionManagerModel';
+import type { DashboardModel } from '../models/DashboardModel';
+import { ServiceIcon } from './ServiceIcon';
+import { ConnectButton } from './ConnectButton';
+import { CapabilityCell } from './CapabilityCell';
+
+const CAPABILITY_COLUMNS: CapabilityId[] = [
+  'file-system',
+  'object-storage',
+  'git-repo',
+  'media',
+  'contacts',
+  'calendar',
+];
+
+interface ServiceRowProps {
+  service: ServiceDefinition;
+  connectionManager: ConnectionManagerModel;
+  dashboardModel: DashboardModel;
+}
+
+export const ServiceRow: React.FC<ServiceRowProps> = observer(
+  ({ service, connectionManager, dashboardModel }) => {
+    return (
+      <tr className="border-b border-border h-11">
+        <td className="px-3 py-2 align-middle">
+          <div className="flex items-center gap-2">
+            <ServiceIcon name={service.icon} className="h-4 w-4" style={{ color: service.color }} />
+            <a href={`/providers/${service.id}`} className="text-sm font-medium truncate hover:underline" title={service.name}>{service.name}</a>
+          </div>
+        </td>
+        <td className="px-3 py-2 align-middle">
+          <ConnectButton service={service} connectionManager={connectionManager} />
+        </td>
+        {CAPABILITY_COLUMNS.map((cap) => (
+          <CapabilityCell
+            key={cap}
+            service={service}
+            capabilityId={cap}
+            connectionManager={connectionManager}
+            dashboardModel={dashboardModel}
+          />
+        ))}
+      </tr>
+    );
+  }
+);

package/src/components/useAdapter.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+/** Hook to async-create an adapter, run a pre-flight check, and track loading/error state */
+export function useAdapter<T>(
+  factory: () => Promise<T>,
+  deps: unknown[],
+  preflight?: (adapter: T) => Promise<void>
+): { adapter: T | null; loading: boolean; error: string | null; retry: () => void } {
+  const [adapter, setAdapter] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [retryCount, setRetryCount] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setAdapter(null);
+
+    factory()
+      .then(async (a) => {
+        // Run pre-flight check (e.g. readdir) to catch auth errors before mounting UI
+        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; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...deps, retryCount]);
+
+  return { adapter, loading, error, retry: () => setRetryCount((c) => c + 1) };
+}

package/src/demos/ServiceDashboardDemo.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useMemo } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ConnectionManagerModel } from '../models/ConnectionManagerModel';
+import { DashboardModel } from '../models/DashboardModel';
+import { ServiceDashboard } from '../components/ServiceDashboard';
+import { createConnectAuthClient } from '../auth/auth-client';
+import { serviceRegistry } from '../registry/service-registry';
+
+export interface ServiceDashboardDemoProps {
+  authBaseURL: string;
+  /** Initial service to open (from URL) */
+  initialService?: string;
+  /** Initial capability to open (from URL) */
+  initialCapability?: string;
+  /** Initial file browser path (from URL) */
+  initialPath?: string;
+  /** Callback when selected cell changes (for URL sync) */
+  onCellChange?: (cell: { serviceId: string; capabilityId: string } | null) => void;
+  /** Callback when file browser path changes (for URL sync) */
+  onPathChange?: (path: string) => void;
+}
+
+export const ServiceDashboardDemo: React.FC<ServiceDashboardDemoProps> = 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);
+    // Restore panel state immediately from URL if service is already connected
+    // (loadFromStorage runs synchronously in constructor, so tokens are available here)
+    if (initialService && initialCapability && connectionManager.isConnected(initialService)) {
+      if (initialPath) model.setBrowserPathSilent(initialPath);
+      model.openCell(initialService, initialCapability as any);
+    }
+    return model;
+  }, [connectionManager]);
+
+  // Wire callbacks directly (no hooks needed — observer re-renders on prop change)
+  dashboardModel.onCellChange = onCellChange;
+  dashboardModel.onPathChange = onPathChange;
+
+  // Initialize connection manager once
+  useEffect(() => {
+    connectionManager.initialize();
+  }, [connectionManager]);
+
+  // Bidirectional URL ↔ Model sync (handles browser back/forward, late connections, and cell selection)
+  const isConnected = initialService ? connectionManager.isConnected(initialService) : false;
+  useEffect(() => {
+    // URL has no cell → close panel if open (browser back to dashboard)
+    if (!initialService || !initialCapability) {
+      if (dashboardModel.panelOpen) {
+        dashboardModel.closePanelSilent();
+      }
+      return;
+    }
+
+    // Wait for connection manager to be ready and service connected
+    if (!connectionManager.initialized || !isConnected) return;
+
+    // URL has a cell — open panel if it doesn't match current model state
+    const modelCell = dashboardModel.selectedCell;
+    if (!dashboardModel.panelOpen ||
+        modelCell?.serviceId !== initialService ||
+        modelCell?.capabilityId !== initialCapability) {
+      if (initialPath) dashboardModel.setBrowserPathSilent(initialPath);
+      dashboardModel.openCell(initialService, initialCapability as any);
+    }
+  }, [initialService, initialCapability, initialPath, isConnected, connectionManager.initialized, dashboardModel]);
+
+  if (connectionManager.configError) {
+    return (
+      <div className="p-4">
+        <div className="rounded-lg border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/30 p-4">
+          <p className="text-sm font-medium text-red-800 dark:text-red-300">Dashboard cannot start</p>
+          <p className="mt-1 text-sm text-red-600 dark:text-red-400">{connectionManager.configError}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show banner when URL requests a service+capability that isn't connected
+  const showNotConnectedBanner =
+    initialService && initialCapability &&
+    connectionManager.initialized &&
+    !connectionManager.isConnected(initialService) &&
+    !dashboardModel.panelOpen;
+  const bannerService = showNotConnectedBanner ? serviceRegistry.get(initialService) : null;
+
+  return (
+    <div className={dashboardModel.panelOpen ? 'flex-1 flex flex-col min-h-0' : 'flex-1 min-h-0 overflow-auto p-4'}>
+      {showNotConnectedBanner && bannerService && (
+        <div className="mb-4 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30 p-4">
+          <p className="text-sm font-medium text-amber-800 dark:text-amber-300">
+            {bannerService.name} is not connected
+          </p>
+          <p className="mt-1 text-sm text-amber-600 dark:text-amber-400">
+            Click the <strong>Connect</strong> button next to {bannerService.name} in the table below to sign in.
+            The browser will open automatically once connected.
+          </p>
+        </div>
+      )}
+      <ServiceDashboard connectionManager={connectionManager} dashboardModel={dashboardModel} />
+    </div>
+  );
+});

package/src/index.ts

@@ -0,0 +1,68 @@
+// Types
+export type { CapabilityId, ServiceCapability, ServiceDefinition } from './types/service';
+export type { ConnectionStatus, ConnectedService } from './types/connection';
+export type { IUserProfile } from './types/user-profile';
+
+// Registry
+export { serviceRegistry } from './registry/service-registry';
+export { googleService } from './registry/services/google';
+export { dropboxService } from './registry/services/dropbox';
+export { githubService } from './registry/services/github';
+export { microsoftService } from './registry/services/microsoft';
+export { s3Service } from './registry/services/s3';
+export { webdavService } from './registry/services/webdav';
+export { gitlabService } from './registry/services/gitlab';
+export { bitbucketService } from './registry/services/bitbucket';
+export { giteaService } from './registry/services/gitea';
+export { browserFsService } from './registry/services/browser-fs';
+export { indexeddbService } from './registry/services/indexeddb';
+export { icloudService } from './registry/services/icloud';
+
+// Auth
+export { createConnectAuthClient } from './auth/auth-client';
+export type { ConnectAuthClient } from './auth/auth-client';
+export { TokenManager } from './auth/token-manager';
+
+// Models
+export { ConnectionManagerModel } from './models/ConnectionManagerModel';
+export { DashboardModel } from './models/DashboardModel';
+export type { SelectedCell } from './models/DashboardModel';
+export { GitRepoBrowserModel } from './models/GitRepoBrowserModel';
+export type { SidebarTab } from './models/GitRepoBrowserModel';
+export { ObjectStorageBrowserModel } from './models/ObjectStorageBrowserModel';
+export type { DisplayObject } from './models/ObjectStorageBrowserModel';
+export { RepoPickerModel } from './models/RepoPickerModel';
+export type { RepoInfo } from './models/RepoPickerModel';
+export { GitHostBrowserModel } from './models/GitHostBrowserModel';
+export type { HostTab } from './models/GitHostBrowserModel';
+export { ActionNotificationModel } from './models/ActionNotificationModel';
+export type { ActionRecord, ActionType } from './models/ActionNotificationModel';
+export { CredentialFormModel } from './models/CredentialFormModel';
+export type { CredentialServiceType } from './models/CredentialFormModel';
+
+// Utils
+export { showActionToast, showErrorToast, showInfoToast } from './utils/action-toast';
+export { getScopeLabels, getScopeLabel } from './utils/scope-labels';
+
+// Components
+export { ServiceDashboard } from './components/ServiceDashboard';
+export { ServiceRow } from './components/ServiceRow';
+export { ServiceCard } from './components/ServiceCard';
+export { CapabilityCell } from './components/CapabilityCell';
+export { CapabilityPill } from './components/CapabilityPill';
+export { ConnectButton } from './components/ConnectButton';
+export { ConnectedMenu } from './components/ConnectedMenu';
+export { CredentialForm } from './components/CredentialForm';
+export { ServiceIcon } from './components/ServiceIcon';
+export { CapabilityPanel } from './components/CapabilityPanel';
+export { ConnectionStatusIndicator } from './components/ConnectionStatus';
+export { ObjectStorageBrowser } from './components/ObjectStorageBrowser';
+export { GitRepoBrowser, GitHostBrowser } from './components/GitBrowser';
+export { GitHubRepoPicker } from './components/GitHubRepoPicker';
+export { RepoPicker } from './components/RepoPicker';
+export { FullScreenBrowser } from './components/FullScreenBrowser';
+export { ActionHistoryPanel } from './components/ActionHistoryPanel';
+
+// Demos
+export { ServiceDashboardDemo } from './demos/ServiceDashboardDemo';
+export type { ServiceDashboardDemoProps } from './demos/ServiceDashboardDemo';

package/src/models/ActionNotificationModel.ts

@@ -0,0 +1,72 @@
+import { makeAutoObservable } from 'mobx';
+
+export type ActionType = 'delete' | 'move' | 'rename' | 'upload' | 'create' | 'copy';
+
+export interface ActionRecord {
+  id: string;
+  type: ActionType;
+  description: string;
+  timestamp: Date;
+  /** Undo function — called when user clicks Undo */
+  undo?: () => Promise<void>;
+  /** Whether undo was executed */
+  undone: boolean;
+}
+
+let nextId = 1;
+
+/**
+ * Tracks user actions for toast notifications with undo support.
+ * Uses sonner's toast() externally — this model just manages the action log.
+ */
+export class ActionNotificationModel {
+  actions: ActionRecord[] = [];
+  /** Maximum actions to keep in history */
+  maxHistory = 100;
+
+  constructor() {
+    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: ActionType, description: string, undo?: () => Promise<void>): string {
+    const id = `action-${nextId++}`;
+    const action: ActionRecord = {
+      id,
+      type,
+      description,
+      timestamp: new Date(),
+      undo,
+      undone: false,
+    };
+    this.actions.unshift(action);
+
+    // Trim history
+    if (this.actions.length > this.maxHistory) {
+      this.actions = this.actions.slice(0, this.maxHistory);
+    }
+
+    return id;
+  }
+
+  /** Mark an action as undone */
+  markUndone(id: string) {
+    const action = this.actions.find((a) => a.id === id);
+    if (action) action.undone = true;
+  }
+
+  get recentActions(): ActionRecord[] {
+    return this.actions.slice(0, 20);
+  }
+
+  get undoableActions(): ActionRecord[] {
+    return this.actions.filter((a) => a.undo && !a.undone);
+  }
+
+  clear() {
+    this.actions = [];
+  }
+}