@anymux/connect 0.1.0

package/src/components/ConnectButton.tsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { match } from 'ts-pattern';
+import { ConnectionBadge } from '@anymux/ui/components/connection-badge';
+import type { ConnectionManagerModel } from '../models/ConnectionManagerModel';
+import type { ServiceDefinition } from '../types/service';
+import { getServiceConnectionState } from '../types/connection-state';
+import { CredentialFormModel, type CredentialServiceType } from '../models/CredentialFormModel';
+import { CredentialForm } from './CredentialForm';
+import { ConnectedMenu } from './ConnectedMenu';
+
+interface ConnectButtonProps {
+  service: ServiceDefinition;
+  connectionManager: ConnectionManagerModel;
+}
+
+export const ConnectButton: React.FC<ConnectButtonProps> = 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';
+
+  // Auto-trigger connect flow when reconnect is requested (e.g. from CapabilityPanel)
+  const pendingReconnect = connectionManager.pendingReconnect.has(service.id);
+  useEffect(() => {
+    if (pendingReconnect) {
+      connectionManager.clearReconnectRequest(service.id);
+      handleConnect();
+    }
+  }, [pendingReconnect]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  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: any) {
+        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 as CredentialServiceType);
+    } else {
+      connectionManager.connect(service.id);
+    }
+  };
+
+  const handleCredentialSubmit = (credentialToken: string) => {
+    connectionManager.connectWithCredentials(service.id, credentialToken);
+    formModel.closeForm();
+  };
+
+  const credentialFormElement = needsCredentialForm ? (
+    <CredentialForm model={formModel} onSubmit={handleCredentialSubmit} />
+  ) : null;
+
+  return match(state)
+    .with({ status: 'loading' }, () => (
+      <ConnectionBadge status="loading" />
+    ))
+    .with({ status: 'not_configured' }, () => (
+      <ConnectionBadge status="not-configured" />
+    ))
+    .with({ status: 'connecting' }, () => (
+      <ConnectionBadge status="connecting" />
+    ))
+    .with({ status: 'connected' }, (s) => {
+      const isOAuth = !needsCredentialForm && !isBrowserFs && !isIndexedDb;
+      const user = isOAuth ? s.user : null;
+      return (
+        <ConnectedMenu
+          service={service}
+          connectionManager={connectionManager}
+          user={user}
+          {...(s.profile ? { profile: s.profile } : {})}
+          isOAuth={isOAuth}
+        />
+      );
+    })
+    .with({ status: 'error' }, () => (
+      <>
+        <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"
+        >
+          Retry
+        </button>
+        {credentialFormElement}
+      </>
+    ))
+    .with({ status: 'expired' }, () => (
+      <>
+        <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"
+        >
+          Reconnect
+        </button>
+        {credentialFormElement}
+      </>
+    ))
+    .with({ status: 'disconnected' }, () => {
+      const testCreds = connectionManager.testCredentials[service.authProvider] as Record<string, unknown> | undefined;
+      return (
+        <>
+          <div className="inline-flex items-center gap-1.5">
+            <button
+              onClick={handleConnect}
+              className="rounded-md px-3 py-1.5 text-xs font-medium text-white transition-colors"
+              style={{ backgroundColor: service.color }}
+            >
+              Connect
+            </button>
+            {testCreds && (
+              <button
+                onClick={() => {
+                  if (needsCredentialForm) {
+                    const values: Record<string, string> = {};
+                    for (const [k, v] of Object.entries(testCreds)) {
+                      if (typeof v === 'string') values[k] = v;
+                    }
+                    formModel.openForm(service.authProvider as CredentialServiceType, 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"
+              >
+                Quick Test
+              </button>
+            )}
+          </div>
+          {credentialFormElement}
+        </>
+      );
+    })
+    .exhaustive();
+});

package/src/components/ConnectedMenu.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { ExternalLink, Info, LogOut, MoreHorizontal, RefreshCw, Clock, Shield } from 'lucide-react';
+import { ConnectionBadge } from '@anymux/ui/components/connection-badge';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@anymux/ui/components/dropdown-menu';
+import type { ConnectionManagerModel } from '../models/ConnectionManagerModel';
+import type { ServiceDefinition } from '../types/service';
+import type { IUserProfile } from '../types/user-profile';
+import { ServiceIcon } from './ServiceIcon';
+
+interface ConnectedMenuProps {
+  service: ServiceDefinition;
+  connectionManager: ConnectionManagerModel;
+  /** @deprecated Use profile instead */
+  user: { name: string; image?: string } | null;
+  profile?: IUserProfile;
+  isOAuth: boolean;
+}
+
+function formatConnectedDate(date: Date | undefined): string | null {
+  if (!date) return null;
+  const d = date instanceof Date ? date : new Date(date);
+  if (isNaN(d.getTime())) return null;
+  return d.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function ConnectedMenu({
+  service,
+  connectionManager,
+  user,
+  profile,
+  isOAuth,
+}: ConnectedMenuProps) {
+  // Prefer profile data (provider-specific) over generic session user data
+  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 (
+    <div className="inline-flex items-center gap-1">
+      <ConnectionBadge
+        status="connected"
+        {...(displayName ? { name: displayName } : {})}
+        {...(avatarUrl ? { avatarUrl } : {})}
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="inline-flex items-center justify-center rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+            <MoreHorizontal className="h-4 w-4" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="min-w-[200px]">
+          {/* Provider header with per-service profile info */}
+          <DropdownMenuLabel className="flex items-center gap-2">
+            {avatarUrl ? (
+              <img src={avatarUrl} alt="" className="h-5 w-5 rounded-full shrink-0" />
+            ) : (
+              <ServiceIcon
+                name={service.icon}
+                className="h-4 w-4 shrink-0"
+                style={{ color: service.color }}
+              />
+            )}
+            <div className="flex flex-col min-w-0">
+              <span className="truncate">{displayName ?? service.name}</span>
+              {email && (
+                <span className="text-xs font-normal text-muted-foreground truncate">{email}</span>
+              )}
+            </div>
+          </DropdownMenuLabel>
+
+          {/* Connection timestamp */}
+          {connectedDate && (
+            <div className="flex items-center gap-2 px-2 pb-1.5 text-xs text-muted-foreground">
+              <Clock className="h-3 w-3 shrink-0" />
+              <span>Connected {connectedDate}</span>
+            </div>
+          )}
+
+          <DropdownMenuSeparator />
+
+          {/* Actions */}
+          {profileUrl && (
+            <DropdownMenuItem asChild>
+              <a href={profileUrl} target="_blank" rel="noopener noreferrer">
+                <ExternalLink />
+                Open Profile
+              </a>
+            </DropdownMenuItem>
+          )}
+          {service.grantsUrl && (
+            <DropdownMenuItem asChild>
+              <a href={service.grantsUrl} target="_blank" rel="noopener noreferrer">
+                <Shield />
+                Manage Permissions
+              </a>
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem asChild>
+            <a href={`/providers/${service.id}`}>
+              <Info />
+              About {service.name}
+            </a>
+          </DropdownMenuItem>
+          {isOAuth && (
+            <DropdownMenuItem onClick={handleReconnect}>
+              <RefreshCw />
+              Reconnect
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem variant="destructive" onClick={handleDisconnect}>
+            <LogOut />
+            Disconnect
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/components/ConnectionStatus.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StatusIndicator } from '@anymux/ui/components/status-indicator';
+import { match } from 'ts-pattern';
+import type { ConnectionStatus as Status } from '../types/connection';
+
+interface ConnectionStatusProps {
+  status: Status;
+}
+
+export const ConnectionStatusIndicator: React.FC<ConnectionStatusProps> = ({ status }) => {
+  const config = match(status)
+    .with('disconnected', () => ({ status: 'neutral' as const, label: 'Disconnected' }))
+    .with('connecting', () => ({ status: 'warning' as const, label: 'Connecting...', pulse: true }))
+    .with('connected', () => ({ status: 'success' as const, label: 'Connected' }))
+    .with('expired', () => ({ status: 'warning' as const, label: 'Expired' }))
+    .with('error', () => ({ status: 'error' as const, label: 'Error' }))
+    .with('not_configured', () => ({ status: 'neutral' as const, label: 'Not Configured' }))
+    .with('loading', () => ({ status: 'neutral' as const, label: 'Loading...' }))
+    .exhaustive();
+
+  return (
+    <StatusIndicator
+      status={config.status}
+      label={config.label}
+      pulse={config.status === 'warning' && status === 'connecting'}
+    />
+  );
+};

package/src/components/CredentialForm.tsx

@@ -0,0 +1,246 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { CredentialFormModel } from '../models/CredentialFormModel';
+
+interface CredentialFormProps {
+  model: CredentialFormModel;
+  onSubmit: (credentials: string) => void;
+}
+
+export const CredentialForm: React.FC<CredentialFormProps> = observer(({ model, onSubmit }) => {
+  if (!model.open) return null;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    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 (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => model.closeForm()}>
+      <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()}
+      >
+        <h2 className="px-4 sm:px-6 pt-4 sm:pt-6 pb-3 text-lg font-semibold text-foreground flex-shrink-0">{title}</h2>
+
+        <form onSubmit={handleSubmit} className="flex flex-col flex-1 min-h-0">
+          <div className="flex-1 overflow-y-auto px-4 sm:px-6 space-y-3">
+          {model.serviceType === 's3' ? (
+            <>
+              <div>
+                <label className={labelClass}>Access Key ID</label>
+                <input
+                  type="text"
+                  required
+                  className={inputClass}
+                  value={model.accessKeyId}
+                  onChange={(e) => model.setField('accessKeyId', e.target.value)}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Secret Access Key</label>
+                <input
+                  type="password"
+                  required
+                  className={inputClass}
+                  value={model.secretAccessKey}
+                  onChange={(e) => model.setField('secretAccessKey', e.target.value)}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Region</label>
+                <input
+                  type="text"
+                  required
+                  className={inputClass}
+                  value={model.region}
+                  onChange={(e) => model.setField('region', e.target.value)}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Bucket</label>
+                <input
+                  type="text"
+                  required
+                  className={inputClass}
+                  value={model.bucket}
+                  onChange={(e) => model.setField('bucket', e.target.value)}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Endpoint (optional)</label>
+                <input
+                  type="text"
+                  className={inputClass}
+                  value={model.endpoint}
+                  onChange={(e) => model.setField('endpoint', e.target.value)}
+                  placeholder="https://s3.amazonaws.com"
+                />
+              </div>
+            </>
+          ) : model.serviceType === 'webdav' ? (
+            <>
+              <div>
+                <label className={labelClass}>URL</label>
+                <input
+                  type="url"
+                  required
+                  className={inputClass}
+                  value={model.url}
+                  onChange={(e) => model.setField('url', e.target.value)}
+                  placeholder="https://example.com/webdav"
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Username</label>
+                <input
+                  type="text"
+                  required
+                  className={inputClass}
+                  value={model.username}
+                  onChange={(e) => model.setField('username', e.target.value)}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Password</label>
+                <input
+                  type="password"
+                  required
+                  className={inputClass}
+                  value={model.password}
+                  onChange={(e) => model.setField('password', e.target.value)}
+                />
+              </div>
+            </>
+          ) : model.serviceType === 'icloud' ? (
+            <>
+              <div>
+                <label className={labelClass}>Apple ID Email</label>
+                <input
+                  type="email"
+                  required
+                  className={inputClass}
+                  value={model.email}
+                  onChange={(e) => model.setField('email', e.target.value)}
+                  placeholder="you@icloud.com"
+                />
+              </div>
+              <div>
+                <label className={labelClass}>App-Specific Password</label>
+                <input
+                  type="password"
+                  required
+                  className={inputClass}
+                  value={model.appPassword}
+                  onChange={(e) => model.setField('appPassword', e.target.value)}
+                  placeholder="xxxx-xxxx-xxxx-xxxx"
+                />
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Generate an app-specific password at{' '}
+                <a
+                  href="https://appleid.apple.com/account/manage"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline text-primary hover:text-primary/80"
+                >
+                  appleid.apple.com
+                </a>
+                {' '}under Sign-In and Security &rarr; App-Specific Passwords.
+              </p>
+            </>
+          ) : (
+            <>
+              <div>
+                <label className={labelClass}>URL</label>
+                <input
+                  type="url"
+                  required
+                  className={inputClass}
+                  value={model.url}
+                  onChange={(e) => model.setField('url', e.target.value)}
+                  placeholder="https://gitea.example.com"
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Token (or use username/password below)</label>
+                <input
+                  type="password"
+                  className={inputClass}
+                  value={model.token}
+                  onChange={(e) => model.setField('token', e.target.value)}
+                  placeholder="API token"
+                />
+              </div>
+              {!model.token && (
+                <>
+                  <div>
+                    <label className={labelClass}>Username</label>
+                    <input
+                      type="text"
+                      className={inputClass}
+                      value={model.username}
+                      onChange={(e) => model.setField('username', e.target.value)}
+                    />
+                  </div>
+                  <div>
+                    <label className={labelClass}>Password</label>
+                    <input
+                      type="password"
+                      className={inputClass}
+                      value={model.password}
+                      onChange={(e) => model.setField('password', e.target.value)}
+                    />
+                  </div>
+                </>
+              )}
+              <div>
+                <label className={labelClass}>Owner</label>
+                <input
+                  type="text"
+                  required
+                  className={inputClass}
+                  value={model.owner}
+                  onChange={(e) => model.setField('owner', e.target.value)}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>Repo</label>
+                <input
+                  type="text"
+                  required
+                  className={inputClass}
+                  value={model.repo}
+                  onChange={(e) => model.setField('repo', e.target.value)}
+                />
+              </div>
+            </>
+          )}
+          </div>
+
+          <div className="flex justify-end gap-2 px-4 sm:px-6 py-3 border-t border-border flex-shrink-0">
+            <button
+              type="button"
+              onClick={() => model.closeForm()}
+              className="rounded-md px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-muted"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+            >
+              Connect
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+});

package/src/components/FullScreenBrowser.tsx

@@ -0,0 +1,84 @@
+import React, { Suspense } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ArrowLeft } from 'lucide-react';
+import { PathBreadcrumb } from '@anymux/ui/components/path-breadcrumb';
+import { LoadingSpinner } from '@anymux/ui/components/loading-spinner';
+import type { DashboardModel } from '../models/DashboardModel';
+import type { ConnectionManagerModel } from '../models/ConnectionManagerModel';
+import { CapabilityContent, CAPABILITY_LABELS, ScopeWarningBanner } from './CapabilityPanel';
+import { ActionHistoryPanel } from './ActionHistoryPanel';
+
+const REPO_SERVICES = new Set(['github', 'gitlab', 'bitbucket', 'gitea']);
+
+interface FullScreenBrowserProps {
+  dashboardModel: DashboardModel;
+  connectionManager: ConnectionManagerModel;
+}
+
+export const FullScreenBrowser: React.FC<FullScreenBrowserProps> = 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 (
+      <div className="flex flex-col h-full flex-1 min-h-0">
+        {/* Breadcrumb bar */}
+        <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]">
+          <div className="flex items-center gap-1 flex-1 min-w-0 flex-wrap">
+            <PathBreadcrumb
+              path={browserPath}
+              onNavigate={(path) => dashboardModel.setBrowserPath(path)}
+              showHome={false}
+              editable
+              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 && (
+              <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"
+              >
+                <span className="hidden sm:inline">Change</span>
+                <ArrowLeft className="h-3 w-3 sm:hidden" />
+              </button>
+            )}
+          </div>
+          <ActionHistoryPanel model={dashboardModel.actionNotifications} />
+        </div>
+
+        {/* Scope warning */}
+        <ScopeWarningBanner serviceId={serviceId} capabilityId={capabilityId} connectionManager={connectionManager} />
+
+        {/* Browser content */}
+        <div className="flex-1 min-h-0 overflow-hidden">
+          <Suspense
+            fallback={
+              <div className="flex items-center justify-center h-64">
+                <LoadingSpinner label="Loading..." />
+              </div>
+            }
+          >
+            <CapabilityContent
+              serviceId={serviceId}
+              capabilityId={capabilityId}
+              connectionManager={connectionManager}
+              dashboardModel={dashboardModel}
+            />
+          </Suspense>
+        </div>
+      </div>
+    );
+  }
+);