gitspace 0.2.0-rc.1

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

@@ -0,0 +1,221 @@
+/** @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

@@ -0,0 +1,103 @@
+/**
+ * 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

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

package/src/shared/hooks/useNavigation.ts

@@ -0,0 +1,226 @@
+/**
+ * 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

@@ -0,0 +1,122 @@
+/**
+ * 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'