@anymux/connect 0.1.0

package/src/components/GitHubRepoPicker.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Search, Lock, Loader2 } from 'lucide-react';
+
+interface GitHubRepoPickerProps {
+  accessToken: string;
+  onSelectRepo: (repo: { owner: string; repo: string }) => void;
+}
+
+interface GitHubRepoInfo {
+  full_name: string;
+  description: string | null;
+  language: string | null;
+  private: boolean;
+  stargazers_count: number;
+}
+
+export function GitHubRepoPicker({ accessToken, onSelectRepo }: GitHubRepoPickerProps) {
+  const [repos, setRepos] = useState<GitHubRepoInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function fetchRepos() {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await fetch('https://api.github.com/user/repos?sort=updated&per_page=50', {
+          headers: { Authorization: `Bearer ${accessToken}` },
+        });
+        if (!res.ok) throw new Error(`GitHub API error: ${res.status}`);
+        const data: GitHubRepoInfo[] = await res.json();
+        if (!cancelled) setRepos(data);
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to fetch repos');
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    fetchRepos();
+    return () => { cancelled = true; };
+  }, [accessToken]);
+
+  const filtered = useMemo(
+    () => repos.filter((r) => r.full_name.toLowerCase().includes(search.toLowerCase())),
+    [repos, search],
+  );
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8 text-gray-400">
+        <Loader2 className="h-5 w-5 animate-spin mr-2" />
+        Loading repositories...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-lg border border-red-800 bg-red-950/50 p-4 text-red-300 text-sm">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
+        <input
+          type="text"
+          placeholder="Search repositories..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-full rounded-md border border-gray-700 bg-gray-900 py-2 pl-9 pr-3 text-sm text-gray-200 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+        />
+      </div>
+      <div className="max-h-64 overflow-y-auto rounded-md border border-gray-700">
+        {filtered.length === 0 ? (
+          <div className="px-4 py-6 text-center text-sm text-gray-500">No repositories found</div>
+        ) : (
+          filtered.map((repo) => {
+            const parts = repo.full_name.split('/');
+            const owner = parts[0] ?? '';
+            const name = parts[1] ?? '';
+            return (
+              <button
+                key={repo.full_name}
+                type="button"
+                onClick={() => onSelectRepo({ owner, repo: name })}
+                className="flex w-full items-start gap-3 border-b border-gray-800 px-4 py-3 text-left hover:bg-gray-800/60 last:border-b-0 transition-colors"
+              >
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-blue-400 truncate" title={repo.full_name}>
+                      {repo.full_name}
+                    </span>
+                    {repo.private && (
+                      <Lock className="h-3 w-3 flex-shrink-0 text-gray-500" />
+                    )}
+                  </div>
+                  {repo.description && (
+                    <p className="mt-0.5 text-xs text-gray-500 truncate" title={repo.description}>
+                      {repo.description.length > 80
+                        ? `${repo.description.slice(0, 80)}...`
+                        : repo.description}
+                    </p>
+                  )}
+                </div>
+                {repo.language && (
+                  <span className="flex-shrink-0 rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-400">
+                    {repo.language}
+                  </span>
+                )}
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ObjectStorageBrowser.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Database, ArrowLeft, Download, RefreshCw, Folder, File, ChevronLeft, ChevronRight } from 'lucide-react';
+import { BrowserError } from '@anymux/ui/components/browser-error';
+import type { IObjectStorage } from '@anymux/file-system';
+import { ObjectStorageBrowserModel } from '../models/ObjectStorageBrowserModel';
+
+interface ObjectStorageBrowserProps {
+  storage: IObjectStorage;
+  bucket: string;
+}
+
+const formatSize = (bytes?: number) => {
+  if (bytes === undefined) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+export const ObjectStorageBrowser: React.FC<ObjectStorageBrowserProps> = observer(({ storage, bucket }) => {
+  const [model] = useState(() => new ObjectStorageBrowserModel(storage, bucket));
+
+  useEffect(() => {
+    model.initialize();
+  }, [model]);
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+        <Database className="h-4 w-4 text-gray-500" />
+        <span className="text-xs font-medium text-gray-700 dark:text-gray-300">{model.bucket}</span>
+        <div className="flex-1" />
+        {model.prefix && (
+          <button
+            onClick={() => model.navigateUp()}
+            className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+            title="Go up"
+          >
+            <ArrowLeft className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <button
+          onClick={() => model.refresh()}
+          disabled={model.loading}
+          className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+          title="Refresh"
+        >
+          <RefreshCw className={`h-3.5 w-3.5 ${model.loading ? 'animate-spin' : ''}`} />
+        </button>
+      </div>
+
+      {/* Breadcrumbs */}
+      <div className="flex items-center gap-1 px-4 py-1.5 text-xs text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-800">
+        <button
+          onClick={() => model.navigateToPrefix('')}
+          className="hover:text-gray-900 dark:hover:text-white"
+        >
+          /
+        </button>
+        {model.breadcrumbs.map((crumb) => (
+          <React.Fragment key={crumb.prefix}>
+            <span>/</span>
+            <button
+              onClick={() => model.navigateToPrefix(crumb.prefix)}
+              className="hover:text-gray-900 dark:hover:text-white"
+            >
+              {crumb.label}
+            </button>
+          </React.Fragment>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto">
+        {model.error && model.objects.length === 0 ? (
+          <BrowserError
+            error={model.error}
+            context={`Object Storage · ${model.bucket}`}
+            onRetry={() => model.refresh()}
+            onGoBack={model.prefix ? () => model.navigateUp() : undefined}
+          />
+        ) : model.error ? (
+          <div className="px-4 py-2 bg-red-50 dark:bg-red-900/20 text-xs text-red-600 dark:text-red-400 border-b border-red-200 dark:border-red-800">
+            {model.error}
+          </div>
+        ) : null}
+
+        {model.loading && model.objects.length === 0 && !model.error && (
+          <div className="flex items-center justify-center h-32 text-sm text-gray-400">
+            Loading...
+          </div>
+        )}
+
+        {!model.error && model.objects.length === 0 && !model.loading && (
+          <div className="flex items-center justify-center h-32 text-sm text-gray-400">
+            No objects found
+          </div>
+        )}
+
+        {model.objects.length > 0 && (
+          <table className="w-full text-sm">
+            <thead className="text-xs text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-800 sticky top-0 bg-white dark:bg-gray-900">
+              <tr>
+                <th className="text-left px-4 py-2 font-medium">Name</th>
+                <th className="text-right px-4 py-2 font-medium w-24">Size</th>
+                <th className="text-right px-4 py-2 font-medium w-40">Modified</th>
+                <th className="w-10" />
+              </tr>
+            </thead>
+            <tbody>
+              {model.objects.map((obj) => (
+                <tr
+                  key={obj.key}
+                  className="border-b border-gray-50 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
+                  onClick={() => obj.isPrefix && model.navigateToPrefix(obj.key)}
+                >
+                  <td className="px-4 py-2 flex items-center gap-2">
+                    {obj.isPrefix ? (
+                      <Folder className="h-4 w-4 text-blue-500 shrink-0" />
+                    ) : (
+                      <File className="h-4 w-4 text-gray-400 shrink-0" />
+                    )}
+                    <span className="truncate" title={obj.key}>{model.displayName(obj.key)}</span>
+                  </td>
+                  <td className="px-4 py-2 text-right text-gray-500">
+                    {!obj.isPrefix && formatSize(obj.size)}
+                  </td>
+                  <td className="px-4 py-2 text-right text-gray-500">
+                    {obj.lastModified && obj.lastModified.toLocaleDateString()}
+                  </td>
+                  <td className="px-2 py-2">
+                    {!obj.isPrefix && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          model.download(obj.key);
+                        }}
+                        className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+                        title="Download"
+                      >
+                        <Download className="h-3.5 w-3.5" />
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {(model.page > 0 || model.hasMore) && !model.loading && model.objects.length > 0 && (
+        <div className="flex items-center justify-between px-4 py-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+          <button
+            onClick={() => model.prevPage()}
+            disabled={model.page === 0}
+            className="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:pointer-events-none"
+          >
+            <ChevronLeft className="h-3.5 w-3.5" />
+            Previous
+          </button>
+          <span className="text-xs text-gray-500">Page {model.page + 1}</span>
+          <button
+            onClick={() => model.nextPage()}
+            disabled={!model.hasMore}
+            className="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:pointer-events-none"
+          >
+            Next
+            <ChevronRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/RepoPicker.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Search, Lock, Loader2, AlertCircle } from 'lucide-react';
+import { RepoPickerModel } from '../models/RepoPickerModel';
+
+interface RepoPickerProps {
+  serviceId: string;
+  accessToken: string;
+  onSelectRepo: (repo: { owner: string; repo: string }) => void;
+}
+
+export const RepoPicker: React.FC<RepoPickerProps> = observer(({ serviceId, accessToken, onSelectRepo }) => {
+  const [model] = useState(() => new RepoPickerModel(serviceId, accessToken));
+
+  useEffect(() => {
+    model.loadRepos();
+  }, [model]);
+
+  if (model.loading) {
+    return (
+      <div className="flex items-center justify-center py-8 text-gray-400">
+        <Loader2 className="h-5 w-5 animate-spin mr-2" />
+        Loading repositories...
+      </div>
+    );
+  }
+
+  if (model.error) {
+    return (
+      <div className="flex items-center gap-2 justify-center py-8 text-sm text-red-600 dark:text-red-400">
+        <AlertCircle className="h-4 w-4" />
+        {model.error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
+        <input
+          type="text"
+          placeholder="Search repositories..."
+          value={model.search}
+          onChange={(e) => model.setSearch(e.target.value)}
+          className="w-full rounded-md border border-gray-700 bg-gray-900 py-2 pl-9 pr-3 text-sm text-gray-200 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+        />
+      </div>
+      <div className="max-h-64 overflow-y-auto rounded-md border border-gray-700">
+        {model.filtered.length === 0 ? (
+          <div className="px-4 py-6 text-center text-sm text-gray-500">No repositories found</div>
+        ) : (
+          model.filtered.map((repo) => {
+            const parts = repo.fullName.split('/');
+            const owner = parts[0] ?? '';
+            const name = parts[1] ?? '';
+            return (
+              <button
+                key={repo.fullName}
+                type="button"
+                onClick={() => onSelectRepo({ owner, repo: name })}
+                className="flex w-full items-start gap-3 border-b border-gray-800 px-4 py-3 text-left hover:bg-gray-800/60 last:border-b-0 transition-colors"
+              >
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-blue-400 truncate" title={repo.fullName}>
+                      {repo.fullName}
+                    </span>
+                    {repo.isPrivate && (
+                      <Lock className="h-3 w-3 flex-shrink-0 text-gray-500" />
+                    )}
+                  </div>
+                  {repo.description && (
+                    <p className="mt-0.5 text-xs text-gray-500 truncate" title={repo.description}>
+                      {repo.description.length > 80
+                        ? `${repo.description.slice(0, 80)}...`
+                        : repo.description}
+                    </p>
+                  )}
+                </div>
+                {repo.language && (
+                  <span className="flex-shrink-0 rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-400">
+                    {repo.language}
+                  </span>
+                )}
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/ServiceCard.tsx

@@ -0,0 +1,77 @@
+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 { CapabilityPill } from './CapabilityPill';
+
+const CAPABILITY_COLUMNS: { id: CapabilityId; label: string }[] = [
+  { id: 'file-system', label: 'FS' },
+  { id: 'object-storage', label: 'Obj' },
+  { id: 'git-repo', label: 'Git' },
+  { id: 'media', label: 'Media' },
+  { id: 'contacts', label: 'Contacts' },
+  { id: 'calendar', label: 'Cal' },
+];
+
+interface ServiceCardProps {
+  service: ServiceDefinition;
+  connectionManager: ConnectionManagerModel;
+  dashboardModel: DashboardModel;
+}
+
+export const ServiceCard: React.FC<ServiceCardProps> = observer(
+  ({ service, connectionManager, dashboardModel }) => {
+    const status = connectionManager.getStatus(service.id);
+    const connected = status === 'connected';
+    const supportedCaps = CAPABILITY_COLUMNS.filter((cap) => {
+      const supported = service.capabilities.find((c) => c.id === cap.id)?.supported;
+      // For merged git column: also check git-host
+      if (cap.id === 'git-repo' && !supported) {
+        return service.capabilities.find((c) => c.id === 'git-host')?.supported ?? false;
+      }
+      return supported;
+    });
+
+    return (
+      <div className="rounded-lg border border-border bg-card p-3">
+        {/* Top row: icon + name + connect button */}
+        <div className="flex items-center justify-between gap-2 mb-2">
+          <div className="flex items-center gap-2 min-w-0">
+            <ServiceIcon name={service.icon} className="h-5 w-5 flex-shrink-0" style={{ color: service.color }} />
+            <span className="text-sm font-medium truncate" title={service.name}>{service.name}</span>
+          </div>
+          <ConnectButton service={service} connectionManager={connectionManager} />
+        </div>
+
+        {/* Capability pills */}
+        {supportedCaps.length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {supportedCaps.map((cap) => {
+              const isSelected =
+                dashboardModel.selectedCell?.serviceId === service.id &&
+                dashboardModel.selectedCell?.capabilityId === cap.id;
+              const hasScopes = connected && connectionManager.hasCapabilityScopes(service.id, cap.id);
+
+              return (
+                <CapabilityPill
+                  key={cap.id}
+                  label={cap.label}
+                  capabilityId={cap.id}
+                  status={status}
+                  isSelected={isSelected}
+                  hasScopes={hasScopes}
+                  onSelect={() => {
+                    if (connected) dashboardModel.selectCell(service.id, cap.id);
+                  }}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+);

package/src/components/ServiceCardGrid.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { match } from 'ts-pattern';
+import type { CapabilityId, ServiceDefinition } from '../types/service';
+import type { ConnectionManagerModel } from '../models/ConnectionManagerModel';
+import type { DashboardModel } from '../models/DashboardModel';
+import type { ConnectionStatus } from '../types/connection';
+import { ServiceIcon } from './ServiceIcon';
+import { ConnectButton } from './ConnectButton';
+
+const CAPABILITY_LABELS: { id: CapabilityId; label: string }[] = [
+  { id: 'file-system', label: 'FS' },
+  { id: 'object-storage', label: 'Obj Storage' },
+  { id: 'git-repo', label: 'Git' },
+  { id: 'git-host', label: 'Git Host' },
+  { id: 'media', label: 'Media' },
+  { id: 'contacts', label: 'Contacts' },
+  { id: 'calendar', label: 'Calendar' },
+];
+
+interface ServiceGridCardProps {
+  service: ServiceDefinition;
+  connectionManager: ConnectionManagerModel;
+  dashboardModel: DashboardModel;
+}
+
+const StatusDot: React.FC<{ status: ConnectionStatus }> = ({ status }) =>
+  match(status)
+    .with('connected', () => (
+      <span className="relative flex h-2.5 w-2.5">
+        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
+        <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-green-500" />
+      </span>
+    ))
+    .with('connecting', () => (
+      <span className="h-2.5 w-2.5 rounded-full bg-muted-foreground animate-pulse" />
+    ))
+    .with('error', () => (
+      <span className="h-2.5 w-2.5 rounded-full bg-destructive" />
+    ))
+    .with('expired', () => (
+      <span className="h-2.5 w-2.5 rounded-full bg-orange-400" />
+    ))
+    .otherwise(() => (
+      <span className="h-2.5 w-2.5 rounded-full bg-muted-foreground/30" />
+    ));
+
+const ServiceGridCard: React.FC<ServiceGridCardProps> = observer(
+  ({ service, connectionManager, dashboardModel }) => {
+    const status = connectionManager.getStatus(service.id);
+    const connected = status === 'connected';
+    const supportedCaps = CAPABILITY_LABELS.filter(
+      (cap) => service.capabilities.find((c) => c.id === cap.id)?.supported
+    );
+
+    return (
+      <div className="group relative rounded-xl border border-border bg-card overflow-hidden transition-shadow hover:shadow-md">
+        {/* Color accent top bar */}
+        <div className="h-1" style={{ backgroundColor: service.color }} />
+
+        {/* Icon area */}
+        <div className="flex items-center justify-center pt-6 pb-4">
+          <div
+            className="flex items-center justify-center w-16 h-16 rounded-xl"
+            style={{ backgroundColor: `${service.color}15` }}
+          >
+            <ServiceIcon
+              name={service.icon}
+              className="h-8 w-8"
+              style={{ color: service.color }}
+            />
+          </div>
+        </div>
+
+        {/* Status dot — top right */}
+        <div className="absolute top-3 right-3">
+          <StatusDot status={status} />
+        </div>
+
+        {/* Name + status */}
+        <div className="px-4 pb-3 text-center">
+          <h3 className="text-sm font-semibold truncate">{service.name}</h3>
+        </div>
+
+        {/* Capability pills */}
+        {supportedCaps.length > 0 && (
+          <div className="px-4 pb-3 flex flex-wrap justify-center gap-1">
+            {supportedCaps.map((cap) => {
+              const hasScopes = connected && connectionManager.hasCapabilityScopes(service.id, cap.id);
+              const clickable = connected;
+              return (
+                <button
+                  key={cap.id}
+                  disabled={!clickable}
+                  onClick={() => {
+                    if (clickable) dashboardModel.selectCell(service.id, cap.id);
+                  }}
+                  className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium transition-colors ${
+                    clickable
+                      ? hasScopes
+                        ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-900/50 cursor-pointer'
+                        : 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400 hover:bg-orange-200 cursor-pointer'
+                      : 'bg-muted text-muted-foreground'
+                  }`}
+                >
+                  {cap.label}
+                </button>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Connect button */}
+        <div className="px-4 pb-4 flex justify-center">
+          <ConnectButton service={service} connectionManager={connectionManager} />
+        </div>
+      </div>
+    );
+  }
+);
+
+interface ServiceCardGridProps {
+  connectionManager: ConnectionManagerModel;
+  dashboardModel: DashboardModel;
+  services: ServiceDefinition[];
+}
+
+export const ServiceCardGrid: React.FC<ServiceCardGridProps> = observer(
+  ({ connectionManager, dashboardModel, services }) => (
+    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+      {services.map((service) => (
+        <ServiceGridCard
+          key={service.id}
+          service={service}
+          connectionManager={connectionManager}
+          dashboardModel={dashboardModel}
+        />
+      ))}
+    </div>
+  )
+);