gitspace 0.2.0-rc.2 → 0.2.0-rc.21

package/src/shared/components/SpacesBrowser.tsx

@@ -1,332 +0,0 @@
-/**
- * SpacesBrowser - Shared Hook
- *
- * Hook that manages workspace/session browser state and actions.
- * Used by both web and TUI renderers.
- */
-
-import { useState, useCallback, useMemo, useEffect } from 'react';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-/** Workspace info from machine */
-export interface WorkspaceInfo {
-  id: string;
-  name: string;
-  path: string;
-  projectName: string;
-  branch?: string;
-  sessionCount: number;
-  isStale?: boolean;
-}
-
-/** Session info from machine */
-export interface SessionInfo {
-  id: string;
-  name: string;
-  workspaceId: string;
-  attached: boolean;
-  createdAt: number;
-  processTitle?: string;
-}
-
-/** Tree item types for flattened list */
-export type TreeItem =
-  | { type: 'project'; name: string; workspaceCount: number }
-  | { type: 'workspace'; workspace: WorkspaceInfo; expanded: boolean }
-  | { type: 'session'; session: SessionInfo; workspaceId: string }
-  | { type: 'new-session'; workspaceId: string };
-
-/** Tree item with selection state */
-export type TreeItemWithState = TreeItem & {
-  isSelected: boolean;
-  index: number;
-};
-
-/** Props for useSpacesBrowser hook */
-export interface UseSpacesBrowserProps {
-  workspaces: WorkspaceInfo[];
-  sessions: SessionInfo[];
-  onRequestSessions: (workspaceId: string) => void;
-  onAttachSession: (params: { sessionId?: string; workspaceId?: string }) => void;
-  onRefresh: () => void;
-  /** Called to refresh sessions for specific workspaces (e.g., on manual refresh) */
-  onRefreshSessions?: (workspaceIds: string[]) => void;
-  onBack: () => void;
-  /** Called when user wants to create a new workspace */
-  onCreateWorkspace?: () => void;
-  machineName?: string;
-  /** Whether to show project headers in the tree. Default true. */
-  showProjectHeaders?: boolean;
-}
-
-/** Return type of useSpacesBrowser hook */
-export interface UseSpacesBrowserReturn {
-  // Display data
-  items: TreeItemWithState[];
-  selectedIndex: number;
-  selectedItem: TreeItem | null;
-  expandedWorkspaces: Set<string>;
-  machineName: string | null;
-
-  // Computed flags
-  isEmpty: boolean;
-
-  // Actions
-  moveUp: () => void;
-  moveDown: () => void;
-  selectIndex: (index: number) => void;
-  toggleWorkspace: (workspaceId: string) => void;
-  activateSelected: () => void;
-  /** Direct attach - bypasses state timing issues on mobile */
-  attachSession: (params: { sessionId?: string; workspaceId?: string }) => void;
-  createNewSession: () => void;
-  createWorkspace: () => void;
-  refresh: () => void;
-  back: () => void;
-}
-
-// ============================================================================
-// Tree Building
-// ============================================================================
-
-interface ProjectGroup {
-  name: string;
-  workspaces: WorkspaceInfo[];
-}
-
-function groupByProject(workspaces: WorkspaceInfo[]): ProjectGroup[] {
-  const projectMap = new Map<string, WorkspaceInfo[]>();
-
-  for (const ws of workspaces) {
-    const list = projectMap.get(ws.projectName) || [];
-    list.push(ws);
-    projectMap.set(ws.projectName, list);
-  }
-
-  const groups: ProjectGroup[] = [];
-  for (const [name, wsList] of projectMap) {
-    groups.push({ name, workspaces: wsList });
-  }
-
-  return groups;
-}
-
-function buildTree(
-  workspaces: WorkspaceInfo[],
-  sessions: SessionInfo[],
-  expandedWorkspaces: Set<string>,
-  showProjectHeaders: boolean = true
-): TreeItem[] {
-  const items: TreeItem[] = [];
-  const projectGroups = groupByProject(workspaces);
-
-  for (const group of projectGroups) {
-    // Project header (optional)
-    if (showProjectHeaders) {
-      items.push({
-        type: 'project',
-        name: group.name,
-        workspaceCount: group.workspaces.length,
-      });
-    }
-
-    // Workspaces under this project
-    for (const ws of group.workspaces) {
-      const isExpanded = expandedWorkspaces.has(ws.id);
-      items.push({
-        type: 'workspace',
-        workspace: ws,
-        expanded: isExpanded,
-      });
-
-      // If expanded, show sessions and new session action
-      if (isExpanded) {
-        const workspaceSessions = sessions.filter(s => s.workspaceId === ws.id);
-        for (const session of workspaceSessions) {
-          items.push({
-            type: 'session',
-            session,
-            workspaceId: ws.id,
-          });
-        }
-        // New session action
-        items.push({
-          type: 'new-session',
-          workspaceId: ws.id,
-        });
-      }
-    }
-  }
-
-  return items;
-}
-
-function addSelectionState(items: TreeItem[], selectedIndex: number): TreeItemWithState[] {
-  return items.map((item, index) => ({
-    ...item,
-    isSelected: index === selectedIndex,
-    index,
-  }));
-}
-
-// ============================================================================
-// Hook
-// ============================================================================
-
-export function useSpacesBrowser(props: UseSpacesBrowserProps): UseSpacesBrowserReturn {
-  const {
-    workspaces,
-    sessions,
-    onRequestSessions,
-    onAttachSession,
-    onRefresh,
-    onRefreshSessions,
-    onBack,
-    onCreateWorkspace,
-    machineName,
-    showProjectHeaders = true,
-  } = props;
-
-  // Local UI state
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [expandedWorkspaces, setExpandedWorkspaces] = useState<Set<string>>(new Set());
-
-  // Build tree
-  const tree = useMemo(
-    () => buildTree(workspaces, sessions, expandedWorkspaces, showProjectHeaders),
-    [workspaces, sessions, expandedWorkspaces, showProjectHeaders]
-  );
-
-  // Add selection state
-  const items = useMemo(
-    () => addSelectionState(tree, selectedIndex),
-    [tree, selectedIndex]
-  );
-
-  // Selected item
-  const selectedItem = tree[selectedIndex] ?? null;
-
-  // Computed
-  const isEmpty = workspaces.length === 0;
-
-  // Clamp selection when tree changes
-  useEffect(() => {
-    if (selectedIndex >= tree.length && tree.length > 0) {
-      setSelectedIndex(tree.length - 1);
-    }
-  }, [tree.length, selectedIndex]);
-
-  // Actions
-  const moveUp = useCallback(() => {
-    setSelectedIndex(i => Math.max(0, i - 1));
-  }, []);
-
-  const moveDown = useCallback(() => {
-    setSelectedIndex(i => Math.min(tree.length - 1, i + 1));
-  }, [tree.length]);
-
-  const selectIndex = useCallback((index: number) => {
-    setSelectedIndex(Math.max(0, Math.min(index, tree.length - 1)));
-  }, [tree.length]);
-
-  const toggleWorkspace = useCallback((workspaceId: string) => {
-    console.log('[SpacesBrowser hook] toggleWorkspace called:', workspaceId);
-    setExpandedWorkspaces(prev => {
-      const next = new Set(prev);
-      if (next.has(workspaceId)) {
-        console.log('[SpacesBrowser hook] Collapsing workspace:', workspaceId);
-        next.delete(workspaceId);
-      } else {
-        console.log('[SpacesBrowser hook] Expanding workspace:', workspaceId);
-        next.add(workspaceId);
-        // Request sessions when expanding
-        onRequestSessions(workspaceId);
-      }
-      return next;
-    });
-  }, [onRequestSessions]);
-
-  const activateSelected = useCallback(() => {
-    if (!selectedItem) return;
-
-    if (selectedItem.type === 'workspace') {
-      toggleWorkspace(selectedItem.workspace.id);
-    } else if (selectedItem.type === 'session') {
-      onAttachSession({ sessionId: selectedItem.session.id });
-    } else if (selectedItem.type === 'new-session') {
-      onAttachSession({ workspaceId: selectedItem.workspaceId });
-    }
-  }, [selectedItem, toggleWorkspace, onAttachSession]);
-
-  const createNewSession = useCallback(() => {
-    if (!selectedItem) return;
-
-    let workspaceId: string | null = null;
-    if (selectedItem.type === 'workspace') {
-      workspaceId = selectedItem.workspace.id;
-    } else if (selectedItem.type === 'session' || selectedItem.type === 'new-session') {
-      workspaceId = selectedItem.workspaceId;
-    }
-
-    if (workspaceId) {
-      onAttachSession({ workspaceId });
-    }
-  }, [selectedItem, onAttachSession]);
-
-  const createWorkspace = useCallback(() => {
-    onCreateWorkspace?.();
-  }, [onCreateWorkspace]);
-
-  const refresh = useCallback(() => {
-    console.log("[SpacesBrowser] refresh() called, expandedWorkspaces:", expandedWorkspaces.size);
-    onRefresh();
-    // Also refresh sessions for all expanded workspaces
-    if (onRefreshSessions && expandedWorkspaces.size > 0) {
-      onRefreshSessions(Array.from(expandedWorkspaces));
-    }
-  }, [onRefresh, onRefreshSessions, expandedWorkspaces]);
-
-  const back = useCallback(() => {
-    onBack();
-  }, [onBack]);
-
-  return {
-    // Display data
-    items,
-    selectedIndex,
-    selectedItem,
-    expandedWorkspaces,
-    machineName: machineName ?? null,
-
-    // Computed flags
-    isEmpty,
-
-    // Actions
-    moveUp,
-    moveDown,
-    selectIndex,
-    toggleWorkspace,
-    activateSelected,
-    attachSession: onAttachSession,
-    createNewSession,
-    createWorkspace,
-    refresh,
-    back,
-  };
-}
-
-// ============================================================================
-// Utilities
-// ============================================================================
-
-/** Format timestamp for display */
-export function formatTime(timestamp: number): string {
-  const diff = Date.now() - timestamp;
-  if (diff < 60000) return 'now';
-  if (diff < 3600000) return `${Math.floor(diff / 60000)}m`;
-  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h`;
-  return `${Math.floor(diff / 86400000)}d`;
-}

package/src/shared/components/SpacesBrowser.tui.tsx

@@ -1,163 +0,0 @@
-/**
- * SpacesBrowser - TUI Display Component
- *
- * Dumb presentational component for OpenTUI.
- * Receives all state and actions from useSpacesBrowser hook.
- */
-
-import type { UseSpacesBrowserReturn } from './SpacesBrowser.js';
-import { formatTime } from './SpacesBrowser.js';
-
-// ============================================================================
-// Colors
-// ============================================================================
-
-const COLORS = {
-  border: '#555555',
-  borderFocused: '#00AAFF',
-  text: '#FFFFFF',
-  textDim: '#888888',
-  selected: '#00AAFF',
-  title: '#00FF88',
-  project: '#FFAA00',
-  workspace: '#FFFFFF',
-  branch: '#AA88FF',
-  session: '#88FFAA',
-  sessionAttached: '#FFAA00',
-  newSession: '#00AAFF',
-  stale: '#666666',
-  sessionCount: '#00FF00',
-};
-
-// ============================================================================
-// Props
-// ============================================================================
-
-interface SpacesBrowserTUIProps extends UseSpacesBrowserReturn {
-  focused?: boolean;
-}
-
-// ============================================================================
-// Component
-// ============================================================================
-
-export function SpacesBrowserTUI(props: SpacesBrowserTUIProps) {
-  const {
-    items,
-    machineName,
-    isEmpty,
-    focused = true,
-  } = props;
-
-  // Empty state
-  if (isEmpty) {
-    return (
-      <box
-        flexGrow={1}
-        flexDirection="column"
-        border
-        borderStyle="single"
-        borderColor={focused ? COLORS.borderFocused : COLORS.border}
-      >
-        <text fg={COLORS.title} paddingLeft={1}>
-          {' '}{machineName || 'Workspaces'}{' '}
-        </text>
-        <box flexDirection="column" paddingLeft={1} paddingTop={1} flexGrow={1} justifyContent="center" alignItems="center">
-          <text fg={COLORS.textDim}>No workspaces found</text>
-          <box flexDirection="row" paddingTop={1}>
-            <text fg={COLORS.textDim}>Press </text>
-            <text fg={COLORS.sessionCount}>[n]</text>
-            <text fg={COLORS.textDim}> to create a workspace</text>
-          </box>
-        </box>
-        <text fg={COLORS.textDim} height={1} paddingLeft={1}>
-          [n] New  [r] Refresh  [q] Back
-        </text>
-      </box>
-    );
-  }
-
-  return (
-    <box
-      flexGrow={1}
-      flexDirection="column"
-      border
-      borderStyle="single"
-      borderColor={focused ? COLORS.borderFocused : COLORS.border}
-    >
-      {/* Header */}
-      <text fg={COLORS.title} paddingLeft={1}>
-        {' '}{machineName || 'Workspaces'}{' '}
-      </text>
-
-      {/* Tree list */}
-      <box flexDirection="column" paddingLeft={1} paddingTop={1} flexGrow={1} overflow="scroll">
-        {items.map((item) => {
-          const { isSelected } = item;
-
-          if (item.type === 'project') {
-            return (
-              <text key={`project-${item.name}`} fg={COLORS.project} height={1}>
-                {item.name.toUpperCase()} ({item.workspaceCount})
-              </text>
-            );
-          }
-
-          if (item.type === 'workspace') {
-            const ws = item.workspace;
-            const textColor = isSelected ? COLORS.selected : ws.isStale ? COLORS.stale : COLORS.workspace;
-            const arrow = item.expanded ? '▼' : '▶';
-            const prefix = isSelected ? '>' : ' ';
-            const branchInfo = ws.branch ? ` [${ws.branch}]` : '';
-            const sessionInfo = ws.sessionCount > 0 ? ` (${ws.sessionCount})` : '';
-
-            return (
-              <box key={`ws-${ws.id}`} flexDirection="row" height={1}>
-                <text fg={textColor}>{prefix} {arrow} {ws.name}</text>
-                {ws.branch && <text fg={COLORS.branch}>{branchInfo}</text>}
-                {ws.sessionCount > 0 && <text fg={COLORS.sessionCount}>{sessionInfo}</text>}
-              </box>
-            );
-          }
-
-          if (item.type === 'session') {
-            const session = item.session;
-            const textColor = isSelected ? COLORS.selected : session.attached ? COLORS.sessionAttached : COLORS.session;
-            const indicator = session.attached ? '○' : '●';
-            const indicatorColor = session.attached ? COLORS.sessionAttached : COLORS.sessionCount;
-            const displayName = session.name.split(':').pop() || session.name;
-            const prefix = isSelected ? '>' : ' ';
-            const processInfo = session.processTitle ? ` [${session.processTitle}]` : '';
-            const timeInfo = session.attached ? '(attached)' : formatTime(session.createdAt);
-
-            return (
-              <box key={`session-${session.id}`} flexDirection="row" height={1}>
-                <text fg={textColor}>{prefix}   </text>
-                <text fg={indicatorColor}>{indicator}</text>
-                <text fg={textColor}> {displayName}</text>
-                {session.processTitle && <text fg={COLORS.sessionAttached}>{processInfo}</text>}
-                <text fg={COLORS.textDim}> {timeInfo}</text>
-              </box>
-            );
-          }
-
-          if (item.type === 'new-session') {
-            const textColor = isSelected ? COLORS.selected : COLORS.newSession;
-            return (
-              <text key={`new-${item.workspaceId}`} fg={textColor} height={1}>
-                {isSelected ? '>' : ' '}   + New Session
-              </text>
-            );
-          }
-
-          return null;
-        })}
-      </box>
-
-      {/* Footer hint */}
-      <text fg={COLORS.textDim} height={1} paddingLeft={1}>
-        [↑↓] Navigate  [Enter] Select  [n] New  [r] Refresh  [q] Back
-      </text>
-    </box>
-  );
-}