@anymux/connect 0.1.0

package/src/components/GitBrowser.tsx

@@ -0,0 +1,705 @@
+import React, { useState, useEffect, useRef, useCallback, Suspense } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  GitBranch as GitBranchIcon,
+  Tag as TagIcon,
+  GitPullRequest,
+  AlertCircle,
+  Loader2,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Check,
+  FolderTree,
+  GitCommit as GitCommitIcon,
+  Diff,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import type { ActionNotificationModel } from '../models/ActionNotificationModel';
+import { showActionToast, showErrorToast } from '../utils/action-toast';
+import { BrowserError } from '@anymux/ui/components/browser-error';
+import type {
+  IGitRepo,
+  GitBranch,
+  GitTag,
+  IGitHost,
+  IFileSystem,
+} from '@anymux/file-system';
+import { GitRepoBrowserModel, type SidebarTab } from '../models/GitRepoBrowserModel';
+import { GitHostBrowserModel } from '../models/GitHostBrowserModel';
+
+// Lazy-load the heavy FileBrowser from fs-ui
+const FileBrowser = React.lazy(() =>
+  import('@anymux/fs-ui').then((m) => ({ default: m.FileBrowser }))
+);
+
+const CommitList = React.lazy(() =>
+  import('@anymux/fs-ui').then((m) => ({ default: m.CommitList }))
+);
+
+const BranchList = React.lazy(() =>
+  import('@anymux/fs-ui').then((m) => ({ default: m.BranchList }))
+);
+
+const DiffViewer = React.lazy(() =>
+  import('@anymux/fs-ui').then((m) => ({ default: m.DiffViewer }))
+);
+
+// ---- Helpers ----
+
+function formatRelativeTime(date: Date): string {
+  const now = Date.now();
+  const diffMs = now - new Date(date).getTime();
+  const seconds = Math.floor(diffMs / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const weeks = Math.floor(days / 7);
+  const months = Math.floor(days / 30);
+
+  if (seconds < 60) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+  if (weeks < 5) return `${weeks}w ago`;
+  if (months < 12) return `${months}mo ago`;
+  return new Date(date).toLocaleDateString();
+}
+
+function LoadingSpinner() {
+  return (
+    <div className="flex items-center justify-center py-8">
+      <Loader2 className="h-5 w-5 text-gray-400 animate-spin" />
+    </div>
+  );
+}
+
+function ErrorMessage({ message }: { message: string }) {
+  return (
+    <div className="flex items-center gap-2 px-4 py-6 text-sm text-red-600 dark:text-red-400 justify-center">
+      <AlertCircle className="h-4 w-4 shrink-0" />
+      <span>{message}</span>
+    </div>
+  );
+}
+
+// ---- Branch/Tag Selector Dropdown ----
+
+type RefType = 'branch' | 'tag';
+interface RefItem {
+  type: RefType;
+  name: string;
+  sha: string;
+  isDefault?: boolean;
+}
+
+interface RefSelectorProps {
+  branches: GitBranch[];
+  tags: GitTag[];
+  currentRef: string;
+  onSelectRef: (ref: string, type: RefType) => void;
+}
+
+function RefSelector({ branches, tags, currentRef, onSelectRef }: RefSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [filterTab, setFilterTab] = useState<'branches' | 'tags'>('branches');
+  const [search, setSearch] = useState('');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close on click outside
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen]);
+
+  const items: RefItem[] = filterTab === 'branches'
+    ? branches.map((b) => ({ type: 'branch' as const, name: b.name, sha: b.sha, isDefault: b.isDefault }))
+    : tags.map((t) => ({ type: 'tag' as const, name: t.name, sha: t.sha }));
+
+  const filtered = search
+    ? items.filter((i) => i.name.toLowerCase().includes(search.toLowerCase()))
+    : items;
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="inline-flex items-center gap-1.5 px-3 py-1.5 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"
+      >
+        <GitBranchIcon className="h-3.5 w-3.5 text-gray-500" />
+        <span className="max-w-[160px] truncate" title={currentRef}>{currentRef}</span>
+        <ChevronDown className="h-3 w-3 text-gray-400" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute left-0 top-full mt-1 z-50 w-72 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
+          {/* Search */}
+          <div className="p-2 border-b border-gray-200 dark:border-gray-700">
+            <input
+              type="text"
+              placeholder="Filter branches/tags..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              autoFocus
+            />
+          </div>
+
+          {/* Tabs */}
+          <div className="flex border-b border-gray-200 dark:border-gray-700">
+            <button
+              onClick={() => { setFilterTab('branches'); setSearch(''); }}
+              className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors ${
+                filterTab === 'branches'
+                  ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
+                  : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+              }`}
+            >
+              <GitBranchIcon className="h-3 w-3" />
+              Branches
+            </button>
+            <button
+              onClick={() => { setFilterTab('tags'); setSearch(''); }}
+              className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors ${
+                filterTab === 'tags'
+                  ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
+                  : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+              }`}
+            >
+              <TagIcon className="h-3 w-3" />
+              Tags
+            </button>
+          </div>
+
+          {/* Items */}
+          <div className="max-h-64 overflow-auto">
+            {filtered.length === 0 ? (
+              <div className="px-3 py-4 text-center text-xs text-gray-400">
+                {search ? 'No matches found' : `No ${filterTab} found`}
+              </div>
+            ) : (
+              filtered.map((item) => (
+                <button
+                  key={`${item.type}-${item.name}`}
+                  onClick={() => {
+                    onSelectRef(item.name, item.type);
+                    setIsOpen(false);
+                    setSearch('');
+                  }}
+                  className="flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+                >
+                  <span className="w-4 flex-shrink-0">
+                    {item.name === currentRef && (
+                      <Check className="h-3.5 w-3.5 text-blue-500" />
+                    )}
+                  </span>
+                  <span className="text-xs truncate flex-1" title={item.name}>{item.name}</span>
+                  {item.isDefault && (
+                    <span className="px-1.5 py-0.5 text-[9px] font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 rounded flex-shrink-0">
+                      default
+                    </span>
+                  )}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---- Git Repository File Browser ----
+
+export interface GitRepoBrowserProps {
+  gitRepo: IGitRepo;
+  owner: string;
+  repo: string;
+  /** Creates an IFileSystem scoped to a particular branch/ref */
+  createFileSystem: (branch: string) => Promise<IFileSystem>;
+  /** Optional git host adapter for PRs/Issues tabs */
+  gitHost?: IGitHost;
+  onError?: (err: { message: string }) => void;
+  /** Optional action notifications model for recording actions */
+  actionNotifications?: ActionNotificationModel;
+}
+
+export const GitRepoBrowser: React.FC<GitRepoBrowserProps> = observer(({
+  gitRepo,
+  owner,
+  repo,
+  createFileSystem,
+  gitHost,
+  onError,
+  actionNotifications,
+}) => {
+  const [model] = useState(
+    () => new GitRepoBrowserModel(gitRepo, gitHost, createFileSystem, onError)
+  );
+
+  // When gitHost arrives asynchronously after model construction, inject it
+  useEffect(() => {
+    if (gitHost && !model.hasGitHost) {
+      model.setGitHost(gitHost);
+    }
+  }, [gitHost, model]);
+
+  const handleNotify = useCallback((type: 'success' | 'error' | 'warning', message: string) => {
+    if (type === 'success' && actionNotifications) {
+      const actionType = message.startsWith('Renamed') ? 'rename' as const
+        : message.startsWith('Deleted') ? 'delete' as const
+        : message.startsWith('Created') ? 'create' as const
+        : message.startsWith('Uploaded') || message.includes('upload') ? 'upload' as const
+        : 'create' as const;
+      showActionToast(actionNotifications, actionType, message);
+    } else if (type === 'error') {
+      showErrorToast(message);
+    } else {
+      toast[type](message);
+    }
+  }, [actionNotifications]);
+
+  useEffect(() => {
+    model.initialize();
+  }, [model]);
+
+  if (model.loading && !model.fileSystem) {
+    return <LoadingSpinner />;
+  }
+
+  if (model.error && !model.fileSystem) {
+    return (
+      <BrowserError
+        error={model.error}
+        context={`${owner}/${repo}`}
+        onRetry={() => window.location.reload()}
+      />
+    );
+  }
+
+  const sidebarTabs: Array<{ id: SidebarTab; label: string; icon: React.ReactNode }> = [
+    { id: 'files', label: 'Files', icon: <FolderTree className="h-3.5 w-3.5" /> },
+    { id: 'branches', label: 'Branches', icon: <GitBranchIcon className="h-3.5 w-3.5" /> },
+    { id: 'commits', label: 'Commits', icon: <GitCommitIcon className="h-3.5 w-3.5" /> },
+    ...(model.hasGitHost ? [
+      { id: 'prs' as const, label: 'PRs', icon: <GitPullRequest className="h-3.5 w-3.5" /> },
+      { id: 'issues' as const, label: 'Issues', icon: <AlertCircle className="h-3.5 w-3.5" /> },
+    ] : []),
+  ];
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header with branch selector */}
+      <div className="flex items-center gap-3 px-3 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-shrink-0">
+        <RefSelector
+          branches={model.branches}
+          tags={model.tags}
+          currentRef={model.currentRef}
+          onSelectRef={(ref) => model.switchRef(ref)}
+        />
+        <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 min-w-0">
+          <span className="font-medium text-gray-700 dark:text-gray-300 truncate" title={owner}>
+            {owner}
+          </span>
+          <span>/</span>
+          <span className="font-medium text-gray-700 dark:text-gray-300 truncate" title={repo}>
+            {repo}
+          </span>
+        </div>
+      </div>
+
+      {/* Sidebar tabs */}
+      <div className="flex border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        {sidebarTabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => model.setActiveTab(tab.id)}
+            className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${
+              model.activeTab === tab.id
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+            }`}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 min-h-0 relative flex flex-col">
+        {model.loading && (
+          <div className="absolute inset-0 bg-white/60 dark:bg-gray-900/60 z-10 flex items-center justify-center">
+            <Loader2 className="h-5 w-5 text-gray-400 animate-spin" />
+          </div>
+        )}
+        {model.error && model.fileSystem && (
+          <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 flex-shrink-0">
+            {model.error}
+          </div>
+        )}
+
+        {/* Files tab */}
+        {model.activeTab === 'files' && model.fileSystem && (
+          <div className="flex-1 min-h-0">
+            <Suspense fallback={<LoadingSpinner />}>
+              <FileBrowser
+                key={model.currentRef}
+                fileSystem={model.fileSystem}
+                className="h-full"
+                onError={onError}
+                onNotify={handleNotify}
+              />
+            </Suspense>
+          </div>
+        )}
+
+        {/* Branches tab */}
+        {model.activeTab === 'branches' && (
+          <div className="flex-1 min-h-0">
+            <Suspense fallback={<LoadingSpinner />}>
+              <BranchList
+                branches={model.branches}
+                currentBranch={model.currentRef}
+                onSelectBranch={(branch) => model.selectBranch(branch)}
+                className="h-full"
+              />
+            </Suspense>
+          </div>
+        )}
+
+        {/* Commits tab */}
+        {model.activeTab === 'commits' && (
+          <div className="flex-1 min-h-0 flex flex-col">
+            {model.commitsLoading ? (
+              <LoadingSpinner />
+            ) : (
+              <>
+                <Suspense fallback={<LoadingSpinner />}>
+                  <CommitList
+                    commits={model.commits}
+                    headSha={model.headSha}
+                    selectedSha={model.selectedCommitSha}
+                    onSelectCommit={(commit) => model.selectCommit(commit)}
+                    className={model.selectedCommitSha ? 'max-h-[50%] overflow-auto flex-shrink-0' : 'flex-1 overflow-auto'}
+                  />
+                </Suspense>
+
+                {/* Commits pagination */}
+                {(model.commitsPage > 0 || model.hasMoreCommits) && (
+                  <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 flex-shrink-0">
+                    <button
+                      onClick={() => model.prevCommitsPage()}
+                      disabled={model.commitsPage === 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.commitsPage + 1}</span>
+                    <button
+                      onClick={() => model.nextCommitsPage()}
+                      disabled={!model.hasMoreCommits}
+                      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>
+                )}
+
+                {/* Diff panel below commits when a commit is selected */}
+                {model.selectedCommitSha && (
+                  <div className="flex-1 min-h-0 border-t border-gray-200 dark:border-gray-700 overflow-auto">
+                    <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+                      <Diff className="h-3.5 w-3.5 text-gray-400" />
+                      <span className="text-[10px] font-medium text-gray-600 dark:text-gray-300">
+                        Changes in{' '}
+                        <code className="font-mono text-blue-600 dark:text-blue-400">
+                          {model.selectedCommitSha.slice(0, 7)}
+                        </code>
+                      </span>
+                    </div>
+                    {model.diffLoading ? (
+                      <LoadingSpinner />
+                    ) : (
+                      <Suspense fallback={<LoadingSpinner />}>
+                        <DiffViewer entries={model.diffEntries} className="p-2" />
+                      </Suspense>
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        )}
+
+        {/* PRs tab */}
+        {model.activeTab === 'prs' && model.hasGitHost && (
+          <div className="flex-1 min-h-0 flex flex-col">
+            {model.hostLoading && <LoadingSpinner />}
+            {!model.hostLoading && model.hostError && (
+              <BrowserError error={model.hostError} context="Pull Requests" onRetry={() => model.retryPRs()} />
+            )}
+            {!model.hostLoading && !model.hostError && (
+              model.prs.length === 0 ? (
+                <div className="flex items-center justify-center py-8 text-xs text-gray-400">No pull requests found</div>
+              ) : (
+                <>
+                  <div className="flex-1 overflow-auto divide-y divide-gray-100 dark:divide-gray-800">
+                    {model.prs.map((pr) => (
+                      <div key={pr.number} className="flex items-start gap-3 px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                        <GitPullRequest className="h-4 w-4 text-gray-400 shrink-0 mt-0.5" />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm truncate" title={pr.title}>{pr.title}</span>
+                            <span className={`px-1.5 py-0.5 text-[10px] font-medium rounded ${
+                              pr.state === 'open' ? 'text-green-600 bg-green-50 dark:text-green-400 dark:bg-green-900/30' :
+                              pr.state === 'merged' ? 'text-purple-600 bg-purple-50 dark:text-purple-400 dark:bg-purple-900/30' :
+                              'text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-900/30'
+                            }`}>
+                              {pr.state}
+                            </span>
+                          </div>
+                          <span className="text-xs text-gray-500">
+                            #{pr.number} · {pr.author} · {formatRelativeTime(pr.createdAt)}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  {(model.prPage > 0 || model.hasMorePrs) && (
+                    <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 flex-shrink-0">
+                      <button
+                        onClick={() => model.prevPrPage()}
+                        disabled={model.prPage === 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.prPage + 1}</span>
+                      <button
+                        onClick={() => model.nextPrPage()}
+                        disabled={!model.hasMorePrs}
+                        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>
+        )}
+
+        {/* Issues tab */}
+        {model.activeTab === 'issues' && model.hasGitHost && (
+          <div className="flex-1 min-h-0 flex flex-col">
+            {model.hostLoading && <LoadingSpinner />}
+            {!model.hostLoading && model.hostError && (
+              <BrowserError error={model.hostError} context="Issues" onRetry={() => model.retryIssues()} />
+            )}
+            {!model.hostLoading && !model.hostError && (
+              model.issues.length === 0 ? (
+                <div className="flex items-center justify-center py-8 text-xs text-gray-400">No issues found</div>
+              ) : (
+                <>
+                  <div className="flex-1 overflow-auto divide-y divide-gray-100 dark:divide-gray-800">
+                    {model.issues.map((issue) => (
+                      <div key={issue.number} className="flex items-start gap-3 px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                        <AlertCircle className={`h-4 w-4 shrink-0 mt-0.5 ${issue.state === 'open' ? 'text-green-500' : 'text-red-400'}`} />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm truncate" title={issue.title}>{issue.title}</span>
+                            {issue.labels.map((l) => (
+                              <span key={l} className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
+                                {l}
+                              </span>
+                            ))}
+                          </div>
+                          <span className="text-xs text-gray-500">
+                            #{issue.number} · {issue.author} · {formatRelativeTime(issue.createdAt)}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  {(model.issuePage > 0 || model.hasMoreIssues) && (
+                    <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 flex-shrink-0">
+                      <button
+                        onClick={() => model.prevIssuePage()}
+                        disabled={model.issuePage === 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.issuePage + 1}</span>
+                      <button
+                        onClick={() => model.nextIssuePage()}
+                        disabled={!model.hasMoreIssues}
+                        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>
+        )}
+      </div>
+    </div>
+  );
+});
+
+// ---- Git Host Browser (PRs / Issues) ----
+
+interface GitHostBrowserProps {
+  gitHost: IGitHost;
+}
+
+function EmptyState({ message }: { message: string }) {
+  return (
+    <div className="flex items-center justify-center py-8 text-xs text-gray-400">
+      {message}
+    </div>
+  );
+}
+
+function statusColor(status: string) {
+  switch (status) {
+    case 'open': return 'text-green-600 bg-green-50 dark:text-green-400 dark:bg-green-900/30';
+    case 'merged': return 'text-purple-600 bg-purple-50 dark:text-purple-400 dark:bg-purple-900/30';
+    case 'closed': return 'text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-900/30';
+    default: return 'text-gray-600 bg-gray-50';
+  }
+}
+
+export const GitHostBrowser: React.FC<GitHostBrowserProps> = observer(({ gitHost }) => {
+  const [model] = useState(() => new GitHostBrowserModel(gitHost));
+
+  useEffect(() => {
+    model.loadData();
+  }, [model]);
+
+  const tabDefs: Array<{ id: 'prs' | 'issues'; label: string; icon: React.ReactNode }> = [
+    { id: 'prs', label: 'Pull Requests', icon: <GitPullRequest className="h-3.5 w-3.5" /> },
+    { id: 'issues', label: 'Issues', icon: <AlertCircle className="h-3.5 w-3.5" /> },
+  ];
+
+  return (
+    <div className="flex flex-col h-full">
+      <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">
+        <GitPullRequest className="h-4 w-4 text-gray-500" />
+        <span className="text-xs font-medium text-gray-700 dark:text-gray-300">
+          Git Host Browser
+        </span>
+      </div>
+
+      <div className="flex border-b border-gray-200 dark:border-gray-700">
+        {tabDefs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => model.setActiveTab(tab.id)}
+            className={`flex items-center gap-1.5 px-4 py-2 text-xs font-medium border-b-2 transition-colors ${
+              model.activeTab === tab.id
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+            }`}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex-1 overflow-auto">
+        {model.loading && <LoadingSpinner />}
+        {!model.loading && model.error && (
+          <BrowserError
+            error={model.error}
+            context="Git Host"
+            onRetry={() => model.retry()}
+          />
+        )}
+
+        {!model.loading && !model.error && model.activeTab === 'prs' && (
+          model.prs.length === 0 ? <EmptyState message="No pull requests found" /> : (
+            <div className="divide-y divide-gray-100 dark:divide-gray-800">
+              {model.prs.map((pr) => (
+                <div key={pr.number} className="flex items-start gap-3 px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                  <GitPullRequest className="h-4 w-4 text-gray-400 shrink-0 mt-0.5" />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm truncate" title={pr.title}>{pr.title}</span>
+                      <span className={`px-1.5 py-0.5 text-[10px] font-medium rounded ${statusColor(pr.state)}`}>
+                        {pr.state}
+                      </span>
+                    </div>
+                    <span className="text-xs text-gray-500">
+                      #{pr.number} · {pr.author} · {formatRelativeTime(pr.createdAt)}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )
+        )}
+
+        {!model.loading && !model.error && model.activeTab === 'issues' && (
+          model.issues.length === 0 ? <EmptyState message="No issues found" /> : (
+            <div className="divide-y divide-gray-100 dark:divide-gray-800">
+              {model.issues.map((issue) => (
+                <div key={issue.number} className="flex items-start gap-3 px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                  <AlertCircle className="h-4 w-4 text-green-500 shrink-0 mt-0.5" />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm truncate" title={issue.title}>{issue.title}</span>
+                      {issue.labels.map((l) => (
+                        <span key={l} className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
+                          {l}
+                        </span>
+                      ))}
+                    </div>
+                    <span className="text-xs text-gray-500">
+                      #{issue.number} · {issue.author} · {formatRelativeTime(issue.createdAt)}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )
+        )}
+      </div>
+
+      {model.showPagination && !model.loading && !model.error && model.currentItems.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>
+  );
+});