@anymux/connect 0.1.0

package/src/models/ConnectionManagerModel.ts

@@ -0,0 +1,410 @@
+import { makeAutoObservable, runInAction, flow } from 'mobx';
+import type { ConnectedService, ConnectionStatus } from '../types/connection';
+import type { ConnectAuthClient } from '../auth/auth-client';
+import type { CapabilityId } from '../types/service';
+import type { IUserProfile } from '../types/user-profile';
+import { TokenManager } from '../auth/token-manager';
+import { serviceRegistry } from '../registry/service-registry';
+
+const STORAGE_KEY = 'anymux-connect-connections';
+const USER_PROFILES_STORAGE_KEY = 'anymux-connect-user-profiles';
+
+export class ConnectionManagerModel {
+  connections = new Map<string, ConnectedService>();
+  grantedScopes = new Map<string, string[]>();
+  initialized = false;
+  configuredProviders = new Set<string>();
+  configError: string | null = null;
+  /** Per-service user profiles with provider-specific name, avatar, and profile link */
+  userProfiles = new Map<string, IUserProfile>();
+  testCredentials: Record<string, unknown> = {};
+  pendingReconnect = new Set<string>();
+  private tokenManager = new TokenManager();
+  private authClient: ConnectAuthClient | null;
+
+  constructor(options?: { authClient?: ConnectAuthClient }) {
+    this.authClient = options?.authClient ?? null;
+    makeAutoObservable(this);
+    this.loadFromStorage();
+  }
+
+  async initialize(): Promise<void> {
+    if (this.initialized) return;
+
+    // BUG-2: Handle pending OAuth return FIRST so only that service updates immediately
+    if (this.authClient) {
+      const pendingServiceId = this.authClient.getPendingServiceId();
+      if (pendingServiceId) {
+        await this.handleOAuthReturn(pendingServiceId);
+      }
+    }
+
+    // BUG-3: Set loading state for services not yet resolved from storage or OAuth
+    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) {
+      // Fetch which OAuth providers have credentials configured on the server
+      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);
+          }
+          // Mark unconfigured OAuth services as not_configured
+          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.';
+        });
+      }
+
+      // Fetch granted scopes
+      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);
+      }
+
+      // Fetch test credentials
+      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);
+      }
+    }
+
+    // BUG-3: Resolve any remaining 'loading' services to 'disconnected'
+    runInAction(() => {
+      for (const [id, conn] of this.connections) {
+        if (conn.status === 'loading') {
+          this.connections.set(id, { ...conn, status: 'disconnected' });
+        }
+      }
+      this.initialized = true;
+    });
+
+    // Fetch per-provider user profiles in the background (enriches fallback data with
+    // provider-specific avatars, profile URLs, etc.)
+    if (this.authClient) {
+      this.fetchAndStoreUserProfiles();
+    }
+  }
+
+  /** Fetch per-provider profiles from the server and update the userProfiles map */
+  private async fetchAndStoreUserProfiles(): Promise<void> {
+    if (!this.authClient) return;
+    try {
+      const profilesByProvider = await this.authClient.fetchUserProfiles();
+      runInAction(() => {
+        // Map providerId → serviceId(s) and store profiles
+        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);
+    }
+  }
+
+  // BUG-2: Extracted OAuth return handler — only updates the single pending service
+  private async handleOAuthReturn(pendingServiceId: string): Promise<void> {
+    if (!this.authClient) return;
+    const service = serviceRegistry.get(pendingServiceId);
+    if (service) {
+      // Retry token retrieval — after OAuth redirect the server may not have
+      // finished processing the callback yet (race condition)
+      let token: string | null = null;
+      for (let attempt = 0; attempt < 4; attempt++) {
+        try {
+          token = await this.authClient.getAccessToken(service.authProvider);
+          if (token) break;
+        } catch {
+          // getAccessToken threw — retry
+        }
+        if (attempt < 3) {
+          await new Promise(r => setTimeout(r, 500 * (attempt + 1)));
+        }
+      }
+
+      if (token) {
+        // Capture session user info as an immediate fallback for the profile
+        let fallbackProfile: IUserProfile | undefined;
+        try {
+          const session = await this.authClient.getSession();
+          if (session) {
+            const profile: IUserProfile = {
+              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 {
+        // OAuth flow completed but token retrieval failed after retries.
+        // Check if we have a session — if so, the user authenticated but
+        // the token endpoint is having issues.
+        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 {
+          // ignore
+        }
+      }
+    }
+    this.authClient.clearPendingServiceId();
+  }
+
+  private loadFromStorage() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        const data = JSON.parse(stored) as Array<[string, ConnectedService]>;
+        for (const [key, value] of data) {
+          const token = this.tokenManager.getToken(key);
+          if (token) {
+            this.connections.set(key, { ...value, accessToken: token });
+          }
+        }
+      }
+      // Restore per-service user profiles
+      const storedProfiles = localStorage.getItem(USER_PROFILES_STORAGE_KEY);
+      if (storedProfiles) {
+        const entries = JSON.parse(storedProfiles) as Array<[string, IUserProfile]>;
+        for (const [key, value] of entries) {
+          this.userProfiles.set(key, value);
+        }
+      }
+    } catch {
+      // storage unavailable
+    }
+  }
+
+  private persistToStorage() {
+    try {
+      const data = Array.from(this.connections.entries()).map(
+        ([key, conn]) => [key, { ...conn, accessToken: undefined }] as const
+      );
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+      // Persist per-service user profiles
+      const profileData = Array.from(this.userProfiles.entries());
+      localStorage.setItem(USER_PROFILES_STORAGE_KEY, JSON.stringify(profileData));
+    } catch {
+      // storage unavailable
+    }
+  }
+
+  async connect(serviceId: string): Promise<void> {
+    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: [],
+    });
+
+    // Redirect-based flow: browser navigates away
+    await this.authClient.signIn(service.authProvider, serviceId);
+  }
+
+  connectWithCredentials(serviceId: string, credentialToken: string): void {
+    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();
+  }
+
+  disconnect = flow(function* (this: ConnectionManagerModel, serviceId: string) {
+    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) {
+      // Delete the account row first so better-auth creates a fresh one
+      // with updated scopes on the next OAuth sign-in
+      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);
+      }
+    }
+  });
+
+  requestReconnect(serviceId: string): void {
+    this.pendingReconnect.add(serviceId);
+  }
+
+  clearReconnectRequest(serviceId: string): void {
+    this.pendingReconnect.delete(serviceId);
+  }
+
+  isConnected(serviceId: string): boolean {
+    return this.connections.get(serviceId)?.status === 'connected';
+  }
+
+  getStatus(serviceId: string): ConnectionStatus {
+    return this.connections.get(serviceId)?.status ?? 'disconnected';
+  }
+
+  getToken(serviceId: string): string | null {
+    return this.tokenManager.getToken(serviceId);
+  }
+
+  /** Refresh OAuth token from better-auth. Returns fresh token or null. */
+  async refreshToken(serviceId: string): Promise<string | null> {
+    const service = serviceRegistry.get(serviceId);
+    if (!service || !this.authClient) {
+      console.warn(`[AnyMux] refreshToken(${serviceId}): no service or authClient`);
+      return null;
+    }
+    // Skip credential-based services — their tokens don't expire
+    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: string): IUserProfile | undefined {
+    return this.userProfiles.get(serviceId);
+  }
+
+  /** @deprecated Use getUserProfile() instead. Kept for backward compat. */
+  getUserInfo(serviceId: string): { name: string; image?: string } | null {
+    const profile = this.userProfiles.get(serviceId);
+    if (!profile) return null;
+    return { name: profile.name, ...(profile.avatarUrl ? { image: profile.avatarUrl } : {}) };
+  }
+
+  hasCapabilityScopes(serviceId: string, capabilityId: CapabilityId): boolean {
+    const service = serviceRegistry.get(serviceId);
+    if (!service) return false;
+    // S3/WebDAV/Gitea don't use OAuth scopes — treat all as granted
+    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 scopes haven't been loaded yet, assume granted to avoid a flash warning
+    if (!this.grantedScopes.has(service.authProvider)) return true;
+    const granted = this.grantedScopes.get(service.authProvider)!;
+    return requiredScopes.every(s => granted.includes(s));
+  }
+}

package/src/models/CredentialFormModel.ts

@@ -0,0 +1,111 @@
+import { makeAutoObservable } from 'mobx';
+
+export type CredentialServiceType = 's3' | 'webdav' | 'gitea' | 'icloud';
+
+export class CredentialFormModel {
+  open = false;
+  serviceType: CredentialServiceType = 's3';
+
+  // S3 fields
+  accessKeyId = '';
+  secretAccessKey = '';
+  region = 'us-east-1';
+  bucket = '';
+  endpoint = '';
+
+  // WebDAV fields
+  url = '';
+  username = '';
+  password = '';
+
+  // Gitea fields
+  token = '';
+  owner = '';
+  repo = '';
+  // Gitea also uses url, username, password above
+
+  // iCloud fields
+  email = '';
+  appPassword = '';
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  openForm(serviceType: CredentialServiceType, prefill?: Record<string, string>): void {
+    this.serviceType = serviceType;
+    this.resetFields();
+    if (prefill) this.applyPrefill(prefill);
+    this.open = true;
+  }
+
+  closeForm(): void {
+    this.open = false;
+  }
+
+  setField(field: string, value: string): void {
+    if (field in this) {
+      (this as Record<string, unknown>)[field] = value;
+    }
+  }
+
+  /** Serialize current form state to JSON credential string */
+  serialize(): string {
+    switch (this.serviceType) {
+      case 's3': {
+        const creds: Record<string, string> = {
+          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,
+        });
+    }
+  }
+
+  private resetFields(): void {
+    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 = '';
+  }
+
+  private applyPrefill(values: Record<string, string>): void {
+    for (const [k, v] of Object.entries(values)) {
+      if (typeof v === 'string' && k in this) {
+        (this as Record<string, unknown>)[k] = v;
+      }
+    }
+  }
+}

package/src/models/DashboardModel.ts

@@ -0,0 +1,157 @@
+import { makeAutoObservable } from 'mobx';
+import type { CapabilityId } from '../types/service';
+import type { ConnectionManagerModel } from './ConnectionManagerModel';
+import { ActionNotificationModel } from './ActionNotificationModel';
+import { serviceRegistry } from '../registry/service-registry';
+
+export interface SelectedCell {
+  serviceId: string;
+  capabilityId: CapabilityId;
+}
+
+export interface GitBrowserState {
+  serviceId: string;
+  owner?: string;
+  repo?: string;
+  ref?: string;
+  path?: string;
+}
+
+const REPO_STORAGE_KEY = 'anymux-selected-repos';
+
+export class DashboardModel {
+  selectedCell: SelectedCell | null = null;
+  panelOpen = false;
+  /** Generic repo selection per service (replaces githubRepo) */
+  selectedRepos: Record<string, { owner: string; repo: string }> = {};
+  browserPath = '/';
+  gitBrowserState: GitBrowserState | null = null;
+  actionNotifications = new ActionNotificationModel();
+  private connectionManager: ConnectionManagerModel;
+  /** Optional callback when selected cell changes (for URL sync) */
+  onCellChange?: (cell: SelectedCell | null) => void;
+  /** Optional callback when browser path changes (for URL sync) */
+  onPathChange?: (path: string) => void;
+
+  constructor(connectionManager: ConnectionManagerModel) {
+    this.connectionManager = connectionManager;
+    makeAutoObservable(this, { onCellChange: false, onPathChange: false });
+    // Load repos from localStorage
+    try {
+      const stored = localStorage.getItem(REPO_STORAGE_KEY);
+      if (stored) this.selectedRepos = JSON.parse(stored);
+      // Migrate old github-repo key
+      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(): { owner: string; repo: string } | null {
+    return this.selectedRepos['github'] ?? null;
+  }
+
+  /** @deprecated Use setSelectedRepo('github', repo) instead */
+  setGitHubRepo(repo: { owner: string; repo: string }): void {
+    this.setSelectedRepo('github', repo);
+  }
+
+  /** @deprecated Use clearSelectedRepo('github') instead */
+  clearGitHubRepo(): void {
+    this.clearSelectedRepo('github');
+  }
+
+  setSelectedRepo(serviceId: string, repo: { owner: string; repo: string }): void {
+    this.selectedRepos[serviceId] = repo;
+    this.persistRepos();
+  }
+
+  clearSelectedRepo(serviceId: string): void {
+    delete this.selectedRepos[serviceId];
+    this.persistRepos();
+  }
+
+  getSelectedRepo(serviceId: string): { owner: string; repo: string } | null {
+    return this.selectedRepos[serviceId] ?? null;
+  }
+
+  private persistRepos(): void {
+    try {
+      localStorage.setItem(REPO_STORAGE_KEY, JSON.stringify(this.selectedRepos));
+    } catch {}
+  }
+
+  selectCell(serviceId: string, capabilityId: CapabilityId): void {
+    const service = serviceRegistry.get(serviceId);
+    if (!service) return;
+
+    const capability = service.capabilities.find((c) => c.id === capabilityId);
+    if (!capability?.supported) return;
+
+    // Clear selected repo so the picker always shows when clicking a cell
+    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: string, capabilityId: CapabilityId): void {
+    // Clear selected repo — URL doesn't carry repo info, so always show picker
+    if (capabilityId === 'git-repo' || capabilityId === 'git-host' || capabilityId === 'file-system') {
+      this.clearSelectedRepo(serviceId);
+    }
+    this.selectedCell = { serviceId, capabilityId };
+    this.panelOpen = true;
+  }
+
+  setBrowserPath(path: string): void {
+    this.browserPath = path;
+    this.onPathChange?.(path);
+  }
+
+  setGitBrowserState(state: GitBrowserState | null): void {
+    this.gitBrowserState = state;
+  }
+
+  closePanel(): void {
+    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(): void {
+    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: string): void {
+    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;
+  }
+}