@anymux/ui-kit 0.1.0

package/src/file-browser/adapters/FileSystemBridge.ts

@@ -0,0 +1,168 @@
+import { makeAutoObservable } from 'mobx';
+import type { IFileSystem, Dirent, Stats } from '@anymux/file-system';
+
+export interface ScanProgress {
+  directoriesScanned: number;
+  filesFound: number;
+  totalSize: number;
+}
+
+export interface FileSystemItem {
+  id: string;
+  path: string;
+  name: string;
+  type: 'file' | 'directory';
+  size?: number;
+  modified?: Date;
+  isDirectory: boolean;
+  children?: FileSystemItem[];
+}
+
+export class FileSystemBridge {
+  constructor(private fileSystem: IFileSystem) {
+    makeAutoObservable(this, {
+      fileSystem: false,
+    });
+  }
+
+  // Tree operations (directories only)
+  async loadDirectoryTree(path: string): Promise<FileSystemItem[]> {
+    const dirents = await this.fileSystem.readdir(path, { withFileTypes: true });
+
+    return dirents
+      .filter(dirent => dirent.isDirectory())
+      .map(dirent => ({
+        id: `${path}/${dirent.name}`.replace(/\/\//g, '/'),
+        path: `${path}/${dirent.name}`.replace(/\/\//g, '/'),
+        name: dirent.name,
+        type: 'directory' as const,
+        isDirectory: true
+      }));
+  }
+
+  // List operations (all items)
+  async loadDirectoryContents(path: string): Promise<FileSystemItem[]> {
+    const dirents = await this.fileSystem.readdir(path, { withFileTypes: true });
+
+    const items = await Promise.all(
+      dirents.map(async (dirent) => {
+        const itemPath = `${path}/${dirent.name}`.replace(/\/\//g, '/');
+        let stats: Stats | null = null;
+
+        try {
+          stats = await this.fileSystem.stat(itemPath);
+        } catch (err) {
+          console.warn(`[FileSystemBridge] stat failed for ${itemPath}:`, err instanceof Error ? err.message : err);
+        }
+
+        return {
+          id: itemPath,
+          path: itemPath,
+          name: dirent.name,
+          type: dirent.isDirectory() ? 'directory' as const : 'file' as const,
+          size: stats?.size,
+          modified: stats?.mtime,
+          isDirectory: dirent.isDirectory()
+        };
+      })
+    );
+
+    // Sort: directories first, then files, both alphabetically
+    return items.sort((a, b) => {
+      if (a.type !== b.type) {
+        return a.type === 'directory' ? -1 : 1;
+      }
+      return a.name.localeCompare(b.name);
+    });
+  }
+
+  // Recursive directory scan for treemap — returns nested FileSystemItem tree
+  async loadDirectoryRecursive(
+    path: string,
+    maxDepth = 3,
+    onProgress?: (progress: ScanProgress) => void,
+    _progress?: ScanProgress,
+  ): Promise<FileSystemItem[]> {
+    const progress = _progress ?? { directoriesScanned: 0, filesFound: 0, totalSize: 0 };
+    const dirents = await this.fileSystem.readdir(path, { withFileTypes: true });
+
+    const items = await Promise.all(
+      dirents.map(async (dirent) => {
+        const itemPath = `${path}/${dirent.name}`.replace(/\/\//g, '/');
+        const isDir = dirent.isDirectory();
+        let stats: Stats | null = null;
+
+        try {
+          stats = await this.fileSystem.stat(itemPath);
+        } catch {
+          // skip stat errors
+        }
+
+        if (isDir) {
+          progress.directoriesScanned++;
+        } else {
+          progress.filesFound++;
+          if (stats?.size) progress.totalSize += stats.size;
+        }
+        onProgress?.(progress);
+
+        const item: FileSystemItem = {
+          id: itemPath,
+          path: itemPath,
+          name: dirent.name,
+          type: isDir ? 'directory' : 'file',
+          size: stats?.size,
+          modified: stats?.mtime,
+          isDirectory: isDir,
+        };
+
+        // Recursively load subdirectories
+        if (isDir && maxDepth > 0) {
+          try {
+            item.children = await this.loadDirectoryRecursive(itemPath, maxDepth - 1, onProgress, progress);
+          } catch {
+            item.children = [];
+          }
+        }
+
+        return item;
+      })
+    );
+
+    return items;
+  }
+
+  // File operations
+  async readFile(path: string): Promise<Buffer | string> {
+    return this.fileSystem.readFile(path);
+  }
+
+  async writeFile(path: string, content: Buffer | string): Promise<void> {
+    return this.fileSystem.writeFile(path, content);
+  }
+
+  async deleteItem(path: string, isDirectory: boolean): Promise<void> {
+    if (isDirectory) {
+      return this.fileSystem.rmdir(path, { recursive: true });
+    } else {
+      return this.fileSystem.unlink(path);
+    }
+  }
+
+  async createDirectory(path: string): Promise<void> {
+    await this.fileSystem.mkdir(path, { recursive: true });
+  }
+
+  async renameItem(oldPath: string, newPath: string): Promise<void> {
+    return this.fileSystem.rename(oldPath, newPath);
+  }
+
+  async exists(path: string): Promise<boolean> {
+    try {
+      await this.fileSystem.access(path);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+}

package/src/file-browser/adapters/GitBrowserAdapter.ts

@@ -0,0 +1,546 @@
+import { makeAutoObservable, reaction } from 'mobx';
+import { FileBrowserModel } from '../models/FileBrowserModel';
+import { FileBrowserItem } from '../types/FileBrowserTypes';
+
+/**
+ * Example adapter demonstrating how to integrate Git repository functionality
+ * with the dual-panel FileBrowser coordination system.
+ * 
+ * This adapter:
+ * - Extends FileBrowser with Git-specific features
+ * - Provides Git status information for files and directories
+ * - Coordinates Git operations with FileBrowser navigation
+ * - Maintains branch and commit selection across panels
+ * - Demonstrates advanced dual-panel coordination patterns
+ */
+
+export interface GitBrowserOptions {
+  repositoryPath?: string;
+  autoFetch?: boolean;
+  showHiddenFiles?: boolean;
+  defaultBranch?: string;
+  enableCoordination?: boolean;
+  statusRefreshInterval?: number; // ms
+}
+
+export interface GitFileStatus {
+  staged: boolean;
+  modified: boolean;
+  untracked: boolean;
+  conflicted: boolean;
+  deleted: boolean;
+  added: boolean;
+}
+
+export interface GitCommit {
+  hash: string;
+  message: string;
+  author: string;
+  date: Date;
+  parents: string[];
+}
+
+export interface GitBranch {
+  name: string;
+  isRemote: boolean;
+  isCurrent: boolean;
+  commit: string;
+  upstream?: string;
+}
+
+export interface GitRepositoryInfo {
+  path: string;
+  currentBranch: string;
+  branches: GitBranch[];
+  commits: GitCommit[];
+  status: Map<string, GitFileStatus>;
+  isClean: boolean;
+  hasUncommitted: boolean;
+}
+
+export class GitBrowserAdapter {
+  // Configuration
+  private options: Required<GitBrowserOptions>;
+  
+  // Git-specific state
+  repositoryInfo: GitRepositoryInfo | null = null;
+  selectedCommit: GitCommit | null = null;
+  selectedBranch: GitBranch | null = null;
+  isLoading = false;
+  error: string | null = null;
+  
+  // File status cache for performance
+  private statusCache = new Map<string, GitFileStatus>();
+  private refreshTimer: number | null = null;
+  
+  // Coordination
+  private fileBrowserModel: FileBrowserModel;
+  private disposers: Array<() => void> = [];
+
+  constructor(
+    fileBrowserModel: FileBrowserModel,
+    options: GitBrowserOptions = {}
+  ) {
+    this.fileBrowserModel = fileBrowserModel;
+    this.options = {
+      repositoryPath: '',
+      autoFetch: false,
+      showHiddenFiles: false,
+      defaultBranch: 'main',
+      enableCoordination: true,
+      statusRefreshInterval: 5000, // 5 seconds
+      ...options
+    };
+
+    makeAutoObservable(this);
+    
+    if (this.options.enableCoordination) {
+      this.setupCoordination();
+    }
+
+    this.setupStatusRefresh();
+
+    this.logInfo('GitBrowserAdapter initialized', {
+      repositoryPath: this.options.repositoryPath,
+      coordinationEnabled: this.options.enableCoordination,
+      refreshInterval: this.options.statusRefreshInterval
+    });
+  }
+
+  private setupCoordination() {
+    // Listen for selection changes to provide Git context
+    const selectionDisposer = reaction(
+      () => ({
+        selectedItems: Array.from(this.fileBrowserModel.selectionManager.selectedItems.keys()),
+        focusedItem: this.fileBrowserModel.selectionManager.focusedItem
+      }),
+      ({ selectedItems, focusedItem }) => {
+        this.handleSelectionChange(focusedItem);
+      },
+      { fireImmediately: true }
+    );
+
+    // Listen for navigation changes to update Git context
+    const navigationDisposer = reaction(
+      () => this.fileBrowserModel.navigationManager.currentPath,
+      (currentPath) => {
+        this.handleNavigationChange(currentPath || '/');
+      }
+    );
+
+    // Listen for left panel mode changes (for Git-specific views)
+    const leftPanelDisposer = reaction(
+      () => this.fileBrowserModel.leftPanel.currentMode,
+      (mode) => {
+        this.handleLeftPanelModeChange(mode);
+      }
+    );
+
+    this.disposers.push(selectionDisposer, navigationDisposer, leftPanelDisposer);
+  }
+
+  private setupStatusRefresh() {
+    if (this.options.statusRefreshInterval > 0) {
+      this.refreshTimer = window.setInterval(() => {
+        this.refreshGitStatus();
+      }, this.options.statusRefreshInterval);
+    }
+  }
+
+  private async handleSelectionChange(item: FileBrowserItem | null) {
+    if (!item || !this.repositoryInfo) return;
+
+    // Provide Git status for the selected item
+    const status = this.getFileStatus(item.path);
+    if (status) {
+      this.logInfo(`Git status for ${item.name}`, status);
+    }
+
+    // If it's a commit file, load commit details
+    if (this.isCommitReference(item)) {
+      await this.loadCommitDetails(item);
+    }
+  }
+
+  private async handleNavigationChange(currentPath: string) {
+    if (!this.repositoryInfo) return;
+
+    // Check if we've navigated outside the repository
+    if (!this.isPathInRepository(currentPath)) {
+      this.logInfo('Navigated outside repository');
+      return;
+    }
+
+    // Update Git status for the current directory
+    await this.refreshGitStatus();
+  }
+
+  private handleLeftPanelModeChange(mode: string | undefined) {
+    if (!mode) return;
+
+    switch (mode) {
+      case 'git-history':
+        this.loadRepositoryHistory();
+        break;
+      case 'git-branches':
+        this.loadBranches();
+        break;
+      case 'git-status':
+        this.loadWorkingTreeStatus();
+        break;
+    }
+  }
+
+  // Git operations
+
+  /**
+   * Initialize Git repository in the current path
+   */
+  async initializeRepository(path: string): Promise<void> {
+    this.isLoading = true;
+    this.error = null;
+
+    try {
+      // Simulate Git init operation
+      await this.simulateGitOperation('init', { path });
+      
+      this.repositoryInfo = {
+        path,
+        currentBranch: this.options.defaultBranch,
+        branches: [{
+          name: this.options.defaultBranch,
+          isRemote: false,
+          isCurrent: true,
+          commit: 'initial'
+        }],
+        commits: [],
+        status: new Map(),
+        isClean: true,
+        hasUncommitted: false
+      };
+
+      this.logInfo('Repository initialized', { path });
+
+    } catch (error) {
+      this.setError(`Failed to initialize repository: ${error}`);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  /**
+   * Load repository information
+   */
+  async loadRepository(path: string): Promise<void> {
+    this.isLoading = true;
+    this.error = null;
+
+    try {
+      // Simulate loading repository data
+      const repoData = await this.simulateGitOperation('load', { path });
+      
+      this.repositoryInfo = repoData as GitRepositoryInfo;
+      this.options.repositoryPath = path;
+
+      // Update FileBrowser to show Git-enhanced items
+      await this.enhanceFileBrowserItems();
+
+      this.logInfo('Repository loaded', { 
+        path, 
+        branch: this.repositoryInfo.currentBranch,
+        commits: this.repositoryInfo.commits.length
+      });
+
+    } catch (error) {
+      this.setError(`Failed to load repository: ${error}`);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  /**
+   * Switch to a different branch
+   */
+  async switchBranch(branchName: string): Promise<void> {
+    if (!this.repositoryInfo) return;
+
+    this.isLoading = true;
+
+    try {
+      // Simulate git checkout
+      await this.simulateGitOperation('checkout', { branch: branchName });
+      
+      // Update repository info
+      this.repositoryInfo.currentBranch = branchName;
+      this.repositoryInfo.branches.forEach(branch => {
+        branch.isCurrent = branch.name === branchName;
+      });
+
+      this.selectedBranch = this.repositoryInfo.branches.find(b => b.name === branchName) || null;
+
+      // Refresh file browser to show branch-specific content
+      await this.enhanceFileBrowserItems();
+
+      this.logInfo('Switched to branch', { branchName });
+
+    } catch (error) {
+      this.setError(`Failed to switch branch: ${error}`);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  /**
+   * Get Git status for a specific file
+   */
+  getFileStatus(filePath: string): GitFileStatus | null {
+    if (!this.repositoryInfo) return null;
+    return this.repositoryInfo.status.get(filePath) || null;
+  }
+
+  /**
+   * Stage file changes
+   */
+  async stageFile(filePath: string): Promise<void> {
+    if (!this.repositoryInfo) return;
+
+    try {
+      await this.simulateGitOperation('add', { files: [filePath] });
+      
+      // Update status
+      const status = this.repositoryInfo.status.get(filePath);
+      if (status) {
+        status.staged = true;
+        this.repositoryInfo.status.set(filePath, status);
+      }
+
+      this.logInfo('File staged', { filePath });
+
+    } catch (error) {
+      this.setError(`Failed to stage file: ${error}`);
+    }
+  }
+
+  /**
+   * Commit staged changes
+   */
+  async commitChanges(message: string): Promise<void> {
+    if (!this.repositoryInfo) return;
+
+    try {
+      const commitHash = await this.simulateGitOperation('commit', { message });
+      
+      // Create new commit
+      const newCommit: GitCommit = {
+        hash: commitHash as string,
+        message,
+        author: 'User',
+        date: new Date(),
+        parents: this.repositoryInfo.commits.length > 0 ? [this.repositoryInfo.commits[0]!.hash] : []
+      };
+
+      // Update repository state
+      this.repositoryInfo.commits.unshift(newCommit);
+      this.repositoryInfo.isClean = true;
+      this.repositoryInfo.hasUncommitted = false;
+
+      // Clear staged status
+      this.repositoryInfo.status.forEach((status, path) => {
+        if (status.staged) {
+          status.staged = false;
+          this.repositoryInfo!.status.set(path, status);
+        }
+      });
+
+      this.logInfo('Changes committed', { message, hash: commitHash });
+
+    } catch (error) {
+      this.setError(`Failed to commit changes: ${error}`);
+    }
+  }
+
+  // Coordination helpers
+
+  /**
+   * Enhance FileBrowser items with Git information
+   */
+  private async enhanceFileBrowserItems(): Promise<void> {
+    // This would add Git status icons, branch information, etc.
+    // to the FileBrowser items through the coordination system
+    
+    if (this.repositoryInfo) {
+      this.logInfo('Enhanced FileBrowser items with Git data');
+    }
+  }
+
+  /**
+   * Load repository history for left panel
+   */
+  private async loadRepositoryHistory(): Promise<void> {
+    if (!this.repositoryInfo) return;
+
+    // This would populate the left panel with commit history
+    this.logInfo('Loading repository history for left panel');
+  }
+
+  /**
+   * Load branches for left panel
+   */
+  private async loadBranches(): Promise<void> {
+    if (!this.repositoryInfo) return;
+
+    // This would populate the left panel with branch list
+    this.logInfo('Loading branches for left panel');
+  }
+
+  /**
+   * Load working tree status for left panel
+   */
+  private async loadWorkingTreeStatus(): Promise<void> {
+    if (!this.repositoryInfo) return;
+
+    // This would populate the left panel with file status
+    this.logInfo('Loading working tree status for left panel');
+  }
+
+  /**
+   * Refresh Git status for current directory
+   */
+  private async refreshGitStatus(): Promise<void> {
+    if (!this.repositoryInfo) return;
+
+    try {
+      // Simulate git status check
+      const statusData = await this.simulateGitOperation('status', {});
+      
+      // Update status cache
+      if (statusData && typeof statusData === 'object') {
+        const statusMap = statusData as Map<string, GitFileStatus>;
+        this.repositoryInfo.status = statusMap;
+      }
+
+    } catch (error) {
+      this.logError('Failed to refresh Git status', error);
+    }
+  }
+
+  // Utility methods
+
+  private isCommitReference(item: FileBrowserItem): boolean {
+    // Check if item represents a commit (e.g., in history view)
+    return item.name.match(/^[a-f0-9]{7,40}$/) !== null;
+  }
+
+  private isPathInRepository(path: string): boolean {
+    if (!this.repositoryInfo) return false;
+    return path.startsWith(this.repositoryInfo.path);
+  }
+
+  private async loadCommitDetails(item: FileBrowserItem): Promise<void> {
+    if (!this.repositoryInfo) return;
+
+    // Find commit by hash prefix
+    const commit = this.repositoryInfo.commits.find(c => 
+      c.hash.startsWith(item.name)
+    );
+
+    if (commit) {
+      this.selectedCommit = commit;
+      this.logInfo('Selected commit', { hash: commit.hash, message: commit.message });
+    }
+  }
+
+  private async simulateGitOperation(operation: string, params: any): Promise<any> {
+    // Simulate Git operations with realistic delays
+    await new Promise(resolve => setTimeout(resolve, 100 + Math.random() * 200));
+
+    switch (operation) {
+      case 'init':
+        return { success: true };
+      
+      case 'load':
+        return {
+          path: params.path,
+          currentBranch: 'main',
+          branches: [
+            { name: 'main', isRemote: false, isCurrent: true, commit: 'abc123' },
+            { name: 'develop', isRemote: false, isCurrent: false, commit: 'def456' }
+          ],
+          commits: [
+            {
+              hash: 'abc123',
+              message: 'Initial commit',
+              author: 'User',
+              date: new Date(),
+              parents: []
+            }
+          ],
+          status: new Map(),
+          isClean: true,
+          hasUncommitted: false
+        };
+      
+      case 'checkout':
+        return { success: true };
+      
+      case 'add':
+        return { success: true };
+      
+      case 'commit':
+        return `commit_${Date.now()}`;
+      
+      case 'status':
+        return new Map();
+      
+      default:
+        throw new Error(`Unknown Git operation: ${operation}`);
+    }
+  }
+
+  private setError(message: string): void {
+    this.error = message;
+    this.logError('GitBrowser error', new Error(message));
+  }
+
+  private logInfo(message: string, data?: any): void {
+    this.fileBrowserModel.logger?.info(`[GitBrowserAdapter] ${message}`, data);
+  }
+
+  private logError(message: string, error: any): void {
+    this.fileBrowserModel.logger?.error(`[GitBrowserAdapter] ${message}`, error);
+  }
+
+  // Public API
+
+  /**
+   * Get adapter statistics
+   */
+  get stats() {
+    return {
+      isLoaded: !!this.repositoryInfo,
+      repositoryPath: this.repositoryInfo?.path || null,
+      currentBranch: this.repositoryInfo?.currentBranch || null,
+      commitCount: this.repositoryInfo?.commits.length || 0,
+      isClean: this.repositoryInfo?.isClean || true,
+      statusCacheSize: this.statusCache.size
+    };
+  }
+
+  // Cleanup
+  dispose(): void {
+    this.disposers.forEach(dispose => dispose());
+    this.disposers = [];
+    
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+    
+    this.statusCache.clear();
+    this.repositoryInfo = null;
+    this.selectedCommit = null;
+    this.selectedBranch = null;
+    
+    this.logInfo('GitBrowserAdapter disposed');
+  }
+}