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

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

@@ -1,221 +0,0 @@
-/** @jsxImportSource react */
-/**
- * SpacesBrowser - Web Display Component
- *
- * Dumb presentational component for web.
- * Receives all state and actions from useSpacesBrowser hook.
- */
-
-import type { UseSpacesBrowserReturn } from './SpacesBrowser.js';
-import { formatTime } from './SpacesBrowser.js';
-
-// ============================================================================
-// Component
-// ============================================================================
-
-export function SpacesBrowserWeb(props: UseSpacesBrowserReturn) {
-  const {
-    items,
-    machineName,
-    isEmpty,
-    selectIndex,
-    toggleWorkspace,
-    attachSession,
-    refresh,
-    back,
-  } = props;
-
-  // Empty state
-  if (isEmpty) {
-    return (
-      <div className="h-screen flex flex-col bg-gray-900">
-        <Header machineName={machineName} onBack={back} onRefresh={refresh} />
-        <div className="flex-1 flex flex-col items-center justify-center text-gray-400 px-4">
-          <div className="text-lg mb-2 text-center">No workspaces found</div>
-          <div className="text-sm text-gray-500 text-center">
-            Create workspaces with <code className="text-green-400">gssh add</code>
-          </div>
-        </div>
-        <Footer />
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-screen flex flex-col bg-gray-900">
-      <Header machineName={machineName} onBack={back} onRefresh={refresh} />
-
-      {/* Tree list */}
-      <div className="flex-1 overflow-y-auto">
-        {items.map((item) => {
-          const { isSelected, index } = item;
-
-          if (item.type === 'project') {
-            return (
-              <div
-                key={`project-${item.name}`}
-                className="px-4 py-3 text-xs text-gray-500 uppercase tracking-wide bg-gray-800 border-b border-gray-700 min-h-[44px] flex items-center"
-              >
-                {item.name} ({item.workspaceCount})
-              </div>
-            );
-          }
-
-          if (item.type === 'workspace') {
-            const ws = item.workspace;
-            return (
-              <div
-                key={`ws-${ws.id}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  console.log('[SpacesBrowser] Workspace clicked:', ws.id, ws.name);
-                  selectIndex(index);
-                  toggleWorkspace(ws.id);
-                }}
-                className={`
-                  px-4 py-4 cursor-pointer border-b border-gray-800 flex items-center justify-between min-h-[56px]
-                  ${isSelected ? 'bg-gray-700 border-l-4 border-l-blue-500' : 'hover:bg-gray-800 active:bg-gray-700'}
-                  ${ws.isStale ? 'opacity-60' : ''}
-                `}
-              >
-                <div className="flex items-center gap-3 min-w-0 flex-1">
-                  <span className="text-gray-500 w-5 flex-shrink-0 text-center">
-                    {item.expanded ? '▼' : '▶'}
-                  </span>
-                  <div className="min-w-0 flex-1">
-                    <div className="text-white font-medium truncate">{ws.name}</div>
-                    {ws.branch && (
-                      <div className="text-xs text-gray-500 truncate">
-                        <span className="text-purple-400">{ws.branch}</span>
-                      </div>
-                    )}
-                  </div>
-                </div>
-                <div className="text-right flex-shrink-0 ml-2">
-                  {ws.sessionCount > 0 && (
-                    <span className="text-xs px-2 py-1 rounded bg-green-900 text-green-300">
-                      {ws.sessionCount}
-                    </span>
-                  )}
-                </div>
-              </div>
-            );
-          }
-
-          if (item.type === 'session') {
-            const session = item.session;
-            return (
-              <div
-                key={`session-${session.id}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  console.log('[SpacesBrowser] Session clicked:', session.id, session.name);
-                  selectIndex(index);
-                  attachSession({ sessionId: session.id });
-                }}
-                className={`
-                  pl-10 sm:pl-12 pr-4 py-3 cursor-pointer border-b border-gray-800 flex items-center justify-between min-h-[52px]
-                  ${isSelected ? 'bg-gray-700 border-l-4 border-l-blue-500' : 'hover:bg-gray-800 active:bg-gray-700'}
-                `}
-              >
-                <div className="flex items-center gap-3 min-w-0 flex-1">
-                  <span className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${session.attached ? 'bg-yellow-500' : 'bg-green-500'}`} />
-                  <div className="min-w-0 flex-1">
-                    <span className="text-gray-300 truncate block">{session.name.split(':').pop()}</span>
-                    {session.processTitle && (
-                      <span className="text-xs text-yellow-400 truncate block">{session.processTitle}</span>
-                    )}
-                  </div>
-                </div>
-                <div className="text-xs text-gray-500 flex-shrink-0 ml-2">
-                  {session.attached ? 'attached' : formatTime(session.createdAt)}
-                </div>
-              </div>
-            );
-          }
-
-          if (item.type === 'new-session') {
-            return (
-              <div
-                key={`new-${item.workspaceId}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  console.log('[SpacesBrowser] New session clicked for workspace:', item.workspaceId);
-                  selectIndex(index);
-                  attachSession({ workspaceId: item.workspaceId });
-                }}
-                className={`
-                  pl-10 sm:pl-12 pr-4 py-3 cursor-pointer border-b border-gray-800 min-h-[48px] flex items-center
-                  ${isSelected ? 'bg-gray-700 border-l-4 border-l-blue-500' : 'hover:bg-gray-800 active:bg-gray-700'}
-                `}
-              >
-                <span className="text-blue-400">+ New Session</span>
-              </div>
-            );
-          }
-
-          return null;
-        })}
-      </div>
-
-      <Footer />
-    </div>
-  );
-}
-
-// ============================================================================
-// Subcomponents
-// ============================================================================
-
-function Header({
-  machineName,
-  onBack,
-  onRefresh,
-}: {
-  machineName: string | null;
-  onBack: () => void;
-  onRefresh: () => void;
-}) {
-  return (
-    <div className="bg-gray-800 px-4 py-3 flex items-center justify-between border-b border-gray-700 min-h-[52px]">
-      <div className="flex items-center gap-3 min-w-0 flex-1">
-        <button
-          onClick={onBack}
-          className="text-sm text-gray-400 hover:text-white active:text-blue-400 py-2 pr-2 -ml-2 min-h-[44px] flex items-center flex-shrink-0"
-        >
-          ← <span className="hidden sm:inline ml-1">Back</span>
-        </button>
-        <div className="text-white font-medium truncate">
-          {machineName || 'Workspaces'}
-        </div>
-      </div>
-      <button
-        onClick={onRefresh}
-        className="text-sm text-gray-400 hover:text-white active:text-blue-400 py-2 pl-2 -mr-2 min-h-[44px] flex items-center flex-shrink-0"
-      >
-        Refresh
-      </button>
-    </div>
-  );
-}
-
-function Footer() {
-  return (
-    <div className="bg-gray-800 px-4 py-2 border-t border-gray-700 safe-bottom">
-      {/* Desktop keyboard hints */}
-      <div className="hidden sm:flex gap-4 text-xs text-gray-500 flex-wrap">
-        <span>↑↓ Navigate</span>
-        <span>Enter Select</span>
-        <span>n New</span>
-        <span>x Kill</span>
-        <span>d Delete</span>
-        <span>r Refresh</span>
-        <span>Esc Back</span>
-      </div>
-      {/* Mobile hint */}
-      <div className="sm:hidden text-xs text-gray-500 text-center">
-        Tap to expand • Tap session to attach
-      </div>
-    </div>
-  );
-}

package/src/shared/components/index.ts

@@ -1,103 +0,0 @@
-/**
- * Shared components exports
- *
- * NOTE: Web components (*.web.js) are NOT exported here because they
- * depend on react-dom which is not available in CLI/TUI context.
- * Import web components directly from their files in the web project.
- *
- * TUI components are also not exported here to avoid @opentui/core deps.
- * Import TUI components directly from their files in the TUI project.
- */
-
-// MachineList
-export type {
-  ConnectionStatus,
-  MachineInfo,
-  UseMachineListProps,
-  MachineListItem,
-  UseMachineListReturn,
-} from './MachineList.js';
-
-export {
-  useMachineList,
-  formatLastSeen,
-  getStatusColor,
-  getMachineLabel,
-} from './MachineList.js';
-
-// SpacesBrowser
-export type {
-  WorkspaceInfo,
-  SessionInfo,
-  TreeItem,
-  TreeItemWithState,
-  UseSpacesBrowserProps,
-  UseSpacesBrowserReturn,
-} from './SpacesBrowser.js';
-
-export {
-  useSpacesBrowser,
-  formatTime,
-} from './SpacesBrowser.js';
-
-// Inbox
-export type {
-  InboxItemType,
-  InboxItem,
-  ParsedSessionName,
-  SessionGroup,
-  WorkspaceGroup,
-  ProjectGroup,
-  InboxDisplayItem,
-  UseInboxProps,
-  UseInboxReturn,
-} from './Inbox.js';
-
-export {
-  useInbox,
-  parseSessionName,
-  getInboxIcon,
-  getInboxTypeLabel,
-  formatTimeAgo,
-} from './Inbox.js';
-
-// ProjectList
-export type {
-  ProjectInfo,
-  ProjectListItem,
-  UseProjectListProps,
-  UseProjectListReturn,
-} from './ProjectList.js';
-
-export {
-  useProjectList,
-  getProjectDisplayName,
-  getShortRepoName,
-  formatWorkspaceCount,
-} from './ProjectList.js';
-
-// Flow (Modal System)
-export type {
-  FlowNone,
-  FlowMessage,
-  FlowLoading,
-  FlowHelp,
-  FlowConfirm,
-  FlowConfirmTyped,
-  FlowInput,
-  FlowSelect,
-  FlowWizardStep,
-  FlowWizard,
-  FlowState,
-  UseFlowProps,
-  UseFlowReturn,
-} from './Flow.js';
-
-export {
-  useFlow,
-  getDefaultShortcuts,
-  isFlowInput,
-  isFlowConfirmTyped,
-  isFlowWizard,
-  hasInputValue,
-} from './Flow.js';

package/src/shared/hooks/index.ts

@@ -1,16 +0,0 @@
-/**
- * Hook exports
- */
-
-export type {
-  NavigationState,
-  NavigationAction,
-} from './useNavigation.js';
-
-export {
-  createInitialNavigationState,
-  navigationReducer,
-  getCurrentMachineId,
-  getCurrentProjectName,
-  canGoBack,
-} from './useNavigation.js';

package/src/shared/hooks/useNavigation.ts

@@ -1,226 +0,0 @@
-/**
- * Navigation State Hook
- *
- * Manages navigation between screens (machines, projects, workspaces, sessions).
- * Platform-agnostic - works with both TUI and Web.
- */
-
-import type { NavigationLocation, PanelFocus } from '../types.js';
-
-/**
- * Navigation state
- */
-export interface NavigationState {
-  /** Current location in the app */
-  location: NavigationLocation;
-  /** Which panel has focus */
-  focus: PanelFocus;
-  /** History stack for back navigation */
-  history: NavigationLocation[];
-  /** Selected indices for each panel */
-  selectedIndices: {
-    machines: number;
-    projects: number;
-    workspaces: number;
-  };
-  /** Expanded items (e.g., workspaces showing sessions) */
-  expanded: Set<string>;
-}
-
-/**
- * Navigation actions
- */
-export type NavigationAction =
-  | { type: 'NAVIGATE'; location: NavigationLocation }
-  | { type: 'GO_BACK' }
-  | { type: 'SET_FOCUS'; focus: PanelFocus }
-  | { type: 'SWITCH_FOCUS' }
-  | { type: 'SELECT_INDEX'; panel: 'machines' | 'projects' | 'workspaces'; index: number }
-  | { type: 'MOVE_UP' }
-  | { type: 'MOVE_DOWN' }
-  | { type: 'TOGGLE_EXPANDED'; id: string }
-  | { type: 'RESET' };
-
-/**
- * Create initial navigation state
- */
-export function createInitialNavigationState(
-  startWithMachines: boolean = false
-): NavigationState {
-  return {
-    location: startWithMachines
-      ? { screen: 'machines' }
-      : { screen: 'projects', machineId: 'local' },
-    focus: startWithMachines ? 'machines' : 'projects',
-    history: [],
-    selectedIndices: {
-      machines: 0,
-      projects: 0,
-      workspaces: 0,
-    },
-    expanded: new Set(),
-  };
-}
-
-/**
- * Navigation reducer
- */
-export function navigationReducer(
-  state: NavigationState,
-  action: NavigationAction,
-  counts: { machines: number; projects: number; workspaces: number }
-): NavigationState {
-  switch (action.type) {
-    case 'NAVIGATE': {
-      // Push current location to history before navigating
-      const newHistory = [...state.history, state.location];
-
-      // Determine focus based on screen
-      let focus: PanelFocus = state.focus;
-      if (action.location.screen === 'machines') {
-        focus = 'machines';
-      } else if (action.location.screen === 'projects') {
-        focus = 'projects';
-      } else if (action.location.screen === 'workspaces' || action.location.screen === 'session') {
-        focus = 'workspaces';
-      }
-
-      return {
-        ...state,
-        location: action.location,
-        history: newHistory,
-        focus,
-      };
-    }
-
-    case 'GO_BACK': {
-      if (state.history.length === 0) {
-        return state;
-      }
-      const newHistory = [...state.history];
-      const previousLocation = newHistory.pop()!;
-
-      return {
-        ...state,
-        location: previousLocation,
-        history: newHistory,
-      };
-    }
-
-    case 'SET_FOCUS': {
-      return {
-        ...state,
-        focus: action.focus,
-      };
-    }
-
-    case 'SWITCH_FOCUS': {
-      // Cycle through available panels based on current screen
-      const { screen } = state.location;
-      let nextFocus: PanelFocus;
-
-      if (screen === 'machines') {
-        // Only machines panel available
-        nextFocus = 'machines';
-      } else if (screen === 'projects') {
-        // Toggle between machines and projects
-        nextFocus = state.focus === 'machines' ? 'projects' : 'machines';
-      } else {
-        // Toggle between projects and workspaces
-        nextFocus = state.focus === 'projects' ? 'workspaces' : 'projects';
-      }
-
-      return {
-        ...state,
-        focus: nextFocus,
-      };
-    }
-
-    case 'SELECT_INDEX': {
-      const maxIndex = counts[action.panel] - 1;
-      const index = Math.max(0, Math.min(action.index, maxIndex));
-
-      return {
-        ...state,
-        selectedIndices: {
-          ...state.selectedIndices,
-          [action.panel]: index,
-        },
-      };
-    }
-
-    case 'MOVE_UP': {
-      const panel = state.focus === 'inbox' ? 'workspaces' : state.focus;
-      const currentIndex = state.selectedIndices[panel as keyof typeof state.selectedIndices] ?? 0;
-      const newIndex = Math.max(0, currentIndex - 1);
-
-      return {
-        ...state,
-        selectedIndices: {
-          ...state.selectedIndices,
-          [panel]: newIndex,
-        },
-      };
-    }
-
-    case 'MOVE_DOWN': {
-      const panel = state.focus === 'inbox' ? 'workspaces' : state.focus;
-      const maxIndex = counts[panel as keyof typeof counts] - 1;
-      const currentIndex = state.selectedIndices[panel as keyof typeof state.selectedIndices] ?? 0;
-      const newIndex = Math.min(maxIndex, currentIndex + 1);
-
-      return {
-        ...state,
-        selectedIndices: {
-          ...state.selectedIndices,
-          [panel]: newIndex,
-        },
-      };
-    }
-
-    case 'TOGGLE_EXPANDED': {
-      const newExpanded = new Set(state.expanded);
-      if (newExpanded.has(action.id)) {
-        newExpanded.delete(action.id);
-      } else {
-        newExpanded.add(action.id);
-      }
-      return {
-        ...state,
-        expanded: newExpanded,
-      };
-    }
-
-    case 'RESET': {
-      return createInitialNavigationState(state.location.screen === 'machines');
-    }
-
-    default:
-      return state;
-  }
-}
-
-/**
- * Helper to get current machine ID from location
- */
-export function getCurrentMachineId(state: NavigationState): string | null {
-  const { location } = state;
-  if (location.screen === 'machines') return null;
-  return location.machineId;
-}
-
-/**
- * Helper to get current project name from location
- */
-export function getCurrentProjectName(state: NavigationState): string | null {
-  const { location } = state;
-  if (location.screen === 'machines' || location.screen === 'projects') return null;
-  return location.projectName;
-}
-
-/**
- * Helper to check if we can go back
- */
-export function canGoBack(state: NavigationState): boolean {
-  return state.history.length > 0;
-}

package/src/shared/index.ts

@@ -1,122 +0,0 @@
-/**
- * Shared module exports
- *
- * Platform-agnostic types, providers, hooks, and components for TUI and Web.
- */
-
-// Types
-export type {
-  MachineStatus,
-  MachineInfo as SharedMachineInfo,
-  Project,
-  Workspace,
-  WorkspaceSession,
-  InboxItem,
-  InboxItemType,
-  SessionStream,
-  NavigationLocation,
-  PanelFocus,
-} from './types.js';
-
-// Providers
-export type {
-  MachineProvider,
-  CreateSessionOptions,
-  AttachSessionOptions,
-  MachineProviderEvent,
-  MachineProviderEventHandler,
-  EventedMachineProvider,
-  RemoteMachineProviderConfig,
-} from './providers/index.js';
-
-export {
-  LocalMachineProvider,
-  getLocalMachineProvider,
-  RemoteMachineProvider,
-  createRemoteMachineProvider,
-} from './providers/index.js';
-
-// Hooks
-export type {
-  NavigationState,
-  NavigationAction,
-} from './hooks/index.js';
-
-export {
-  createInitialNavigationState,
-  navigationReducer,
-  getCurrentMachineId,
-  getCurrentProjectName,
-  canGoBack,
-} from './hooks/index.js';
-
-// Components - MachineList
-export type {
-  ConnectionStatus,
-  MachineInfo,
-  UseMachineListProps,
-  MachineListItem,
-  UseMachineListReturn,
-} from './components/index.js';
-
-export {
-  useMachineList,
-  formatLastSeen,
-  getStatusColor,
-  getMachineLabel,
-} from './components/index.js';
-
-// Components - SpacesBrowser
-export type {
-  WorkspaceInfo,
-  SessionInfo,
-  TreeItem,
-  TreeItemWithState,
-  UseSpacesBrowserProps,
-  UseSpacesBrowserReturn,
-} from './components/index.js';
-
-export {
-  useSpacesBrowser,
-  formatTime,
-} from './components/index.js';
-
-// Components - Inbox
-export type {
-  InboxItem as SharedInboxItem,
-  InboxItemType as SharedInboxItemType,
-  ParsedSessionName,
-  SessionGroup,
-  WorkspaceGroup,
-  ProjectGroup,
-  InboxDisplayItem,
-  UseInboxProps,
-  UseInboxReturn,
-} from './components/index.js';
-
-export {
-  useInbox,
-  parseSessionName,
-  getInboxIcon,
-  getInboxTypeLabel,
-  formatTimeAgo,
-} from './components/index.js';
-
-// Components - ProjectList
-export type {
-  ProjectInfo,
-  ProjectListItem,
-  UseProjectListProps,
-  UseProjectListReturn,
-} from './components/index.js';
-
-export {
-  useProjectList,
-  getProjectDisplayName,
-  getShortRepoName,
-  formatWorkspaceCount,
-} from './components/index.js';
-
-// Components - renderers (import separately for tree-shaking)
-// Web: import { MachineListWeb, SpacesBrowserWeb, InboxWeb, ProjectListWeb } from '@spaces/shared/components'
-// TUI: import { MachineListTUI, SpacesBrowserTUI, InboxTUI, ProjectListTUI } from '@spaces/shared/components'