gitspace 0.2.0-rc.1

package/src/tui/hooks/useAppState.ts

@@ -0,0 +1,314 @@
+/**
+ * TUI App State Management
+ *
+ * Unified state management for the TUI that works with both local and remote modes.
+ * Uses shared components and providers.
+ */
+
+import { useState, useCallback, useEffect, useReducer } from 'react';
+import type { MachineInfo } from '../../shared/components/index.js';
+import type { MachineProvider } from '../../shared/providers/index.js';
+import type { Project, Workspace, WorkspaceSession, InboxItem } from '../../shared/types.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/** App view modes */
+export type AppView =
+  | 'machines'     // Machine list (when in remote mode or has multiple machines)
+  | 'projects'     // Project list (local mode default)
+  | 'workspaces'   // Workspace browser for selected project
+  | 'terminal';    // Attached to session
+
+/** Panel focus */
+export type PanelFocus = 'projects' | 'workspaces';
+
+/** App state */
+export interface AppState {
+  // View state
+  view: AppView;
+  panelFocus: PanelFocus;
+
+  // Machine state (remote mode)
+  selectedMachine: MachineInfo | null;
+  machineProvider: MachineProvider | null;
+
+  // Project state
+  projects: Project[];
+  selectedProjectIndex: number;
+  currentProject: string | null;
+
+  // Workspace state
+  workspaces: Workspace[];
+  sessions: Map<string, WorkspaceSession[]>;
+  selectedWorkspaceIndex: number;
+  expandedWorkspaces: Set<string>;
+
+  // Inbox
+  inbox: InboxItem[];
+  unreadCount: number;
+
+  // UI state
+  isLoading: boolean;
+  error: string | null;
+}
+
+/** State actions */
+export type AppAction =
+  | { type: 'SET_LOADING'; loading: boolean }
+  | { type: 'SET_ERROR'; error: string | null }
+  | { type: 'SET_VIEW'; view: AppView }
+  | { type: 'SET_PANEL_FOCUS'; focus: PanelFocus }
+  | { type: 'SET_MACHINE'; machine: MachineInfo | null; provider: MachineProvider | null }
+  | { type: 'SET_PROJECTS'; projects: Project[] }
+  | { type: 'SELECT_PROJECT'; index: number }
+  | { type: 'SET_CURRENT_PROJECT'; project: string | null }
+  | { type: 'SET_WORKSPACES'; workspaces: Workspace[] }
+  | { type: 'SET_SESSIONS'; workspaceId: string; sessions: WorkspaceSession[] }
+  | { type: 'SELECT_WORKSPACE'; index: number }
+  | { type: 'TOGGLE_WORKSPACE'; workspaceId: string }
+  | { type: 'SET_INBOX'; inbox: InboxItem[]; unreadCount: number }
+  | { type: 'SWITCH_PANEL' }
+  | { type: 'MOVE_UP' }
+  | { type: 'MOVE_DOWN' };
+
+// ============================================================================
+// Reducer
+// ============================================================================
+
+function appReducer(state: AppState, action: AppAction): AppState {
+  switch (action.type) {
+    case 'SET_LOADING':
+      return { ...state, isLoading: action.loading };
+
+    case 'SET_ERROR':
+      return { ...state, error: action.error };
+
+    case 'SET_VIEW':
+      return { ...state, view: action.view };
+
+    case 'SET_PANEL_FOCUS':
+      return { ...state, panelFocus: action.focus };
+
+    case 'SET_MACHINE':
+      return {
+        ...state,
+        selectedMachine: action.machine,
+        machineProvider: action.provider,
+        // Reset project/workspace state when switching machines
+        projects: [],
+        workspaces: [],
+        sessions: new Map(),
+        selectedProjectIndex: 0,
+        selectedWorkspaceIndex: 0,
+        expandedWorkspaces: new Set(),
+      };
+
+    case 'SET_PROJECTS':
+      return { ...state, projects: action.projects };
+
+    case 'SELECT_PROJECT': {
+      const index = Math.max(0, Math.min(action.index, state.projects.length - 1));
+      return { ...state, selectedProjectIndex: index };
+    }
+
+    case 'SET_CURRENT_PROJECT':
+      return { ...state, currentProject: action.project };
+
+    case 'SET_WORKSPACES':
+      return { ...state, workspaces: action.workspaces, selectedWorkspaceIndex: 0 };
+
+    case 'SET_SESSIONS': {
+      const newSessions = new Map(state.sessions);
+      newSessions.set(action.workspaceId, action.sessions);
+      return { ...state, sessions: newSessions };
+    }
+
+    case 'SELECT_WORKSPACE': {
+      const maxIndex = getMaxWorkspaceIndex(state);
+      const index = Math.max(0, Math.min(action.index, maxIndex));
+      return { ...state, selectedWorkspaceIndex: index };
+    }
+
+    case 'TOGGLE_WORKSPACE': {
+      const newExpanded = new Set(state.expandedWorkspaces);
+      if (newExpanded.has(action.workspaceId)) {
+        newExpanded.delete(action.workspaceId);
+      } else {
+        newExpanded.add(action.workspaceId);
+      }
+      return { ...state, expandedWorkspaces: newExpanded };
+    }
+
+    case 'SET_INBOX':
+      return { ...state, inbox: action.inbox, unreadCount: action.unreadCount };
+
+    case 'SWITCH_PANEL':
+      return {
+        ...state,
+        panelFocus: state.panelFocus === 'projects' ? 'workspaces' : 'projects',
+      };
+
+    case 'MOVE_UP':
+      if (state.panelFocus === 'projects') {
+        const index = Math.max(0, state.selectedProjectIndex - 1);
+        return { ...state, selectedProjectIndex: index };
+      } else {
+        const index = Math.max(0, state.selectedWorkspaceIndex - 1);
+        return { ...state, selectedWorkspaceIndex: index };
+      }
+
+    case 'MOVE_DOWN':
+      if (state.panelFocus === 'projects') {
+        const index = Math.min(state.projects.length - 1, state.selectedProjectIndex + 1);
+        return { ...state, selectedProjectIndex: index };
+      } else {
+        const maxIndex = getMaxWorkspaceIndex(state);
+        const index = Math.min(maxIndex, state.selectedWorkspaceIndex + 1);
+        return { ...state, selectedWorkspaceIndex: index };
+      }
+
+    default:
+      return state;
+  }
+}
+
+function getMaxWorkspaceIndex(state: AppState): number {
+  // Count total items in tree (workspaces + sessions + new-session options)
+  let count = 0;
+  for (const ws of state.workspaces) {
+    count++; // workspace itself
+    if (state.expandedWorkspaces.has(ws.name)) {
+      const sessions = state.sessions.get(ws.name) || [];
+      count += sessions.length; // sessions
+      count++; // new-session option
+    }
+  }
+  return Math.max(0, count - 1);
+}
+
+// ============================================================================
+// Initial State
+// ============================================================================
+
+function createInitialState(isRemoteMode: boolean): AppState {
+  return {
+    view: isRemoteMode ? 'machines' : 'projects',
+    panelFocus: 'projects',
+    selectedMachine: null,
+    machineProvider: null,
+    projects: [],
+    selectedProjectIndex: 0,
+    currentProject: null,
+    workspaces: [],
+    sessions: new Map(),
+    selectedWorkspaceIndex: 0,
+    expandedWorkspaces: new Set(),
+    inbox: [],
+    unreadCount: 0,
+    isLoading: true,
+    error: null,
+  };
+}
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+export interface UseAppStateOptions {
+  isRemoteMode: boolean;
+}
+
+export function useAppState(options: UseAppStateOptions) {
+  const { isRemoteMode } = options;
+
+  const [state, dispatch] = useReducer(appReducer, isRemoteMode, createInitialState);
+
+  // Convenience methods
+  const setLoading = useCallback((loading: boolean) => {
+    dispatch({ type: 'SET_LOADING', loading });
+  }, []);
+
+  const setError = useCallback((error: string | null) => {
+    dispatch({ type: 'SET_ERROR', error });
+  }, []);
+
+  const setView = useCallback((view: AppView) => {
+    dispatch({ type: 'SET_VIEW', view });
+  }, []);
+
+  const setPanelFocus = useCallback((focus: PanelFocus) => {
+    dispatch({ type: 'SET_PANEL_FOCUS', focus });
+  }, []);
+
+  const setMachine = useCallback((machine: MachineInfo | null, provider: MachineProvider | null) => {
+    dispatch({ type: 'SET_MACHINE', machine, provider });
+  }, []);
+
+  const setProjects = useCallback((projects: Project[]) => {
+    dispatch({ type: 'SET_PROJECTS', projects });
+  }, []);
+
+  const selectProject = useCallback((index: number) => {
+    dispatch({ type: 'SELECT_PROJECT', index });
+  }, []);
+
+  const setCurrentProject = useCallback((project: string | null) => {
+    dispatch({ type: 'SET_CURRENT_PROJECT', project });
+  }, []);
+
+  const setWorkspaces = useCallback((workspaces: Workspace[]) => {
+    dispatch({ type: 'SET_WORKSPACES', workspaces });
+  }, []);
+
+  const setSessions = useCallback((workspaceId: string, sessions: WorkspaceSession[]) => {
+    dispatch({ type: 'SET_SESSIONS', workspaceId, sessions });
+  }, []);
+
+  const selectWorkspace = useCallback((index: number) => {
+    dispatch({ type: 'SELECT_WORKSPACE', index });
+  }, []);
+
+  const toggleWorkspace = useCallback((workspaceId: string) => {
+    dispatch({ type: 'TOGGLE_WORKSPACE', workspaceId });
+  }, []);
+
+  const setInbox = useCallback((inbox: InboxItem[], unreadCount: number) => {
+    dispatch({ type: 'SET_INBOX', inbox, unreadCount });
+  }, []);
+
+  const switchPanel = useCallback(() => {
+    dispatch({ type: 'SWITCH_PANEL' });
+  }, []);
+
+  const moveUp = useCallback(() => {
+    dispatch({ type: 'MOVE_UP' });
+  }, []);
+
+  const moveDown = useCallback(() => {
+    dispatch({ type: 'MOVE_DOWN' });
+  }, []);
+
+  return {
+    state,
+    dispatch,
+    // Actions
+    setLoading,
+    setError,
+    setView,
+    setPanelFocus,
+    setMachine,
+    setProjects,
+    selectProject,
+    setCurrentProject,
+    setWorkspaces,
+    setSessions,
+    selectWorkspace,
+    toggleWorkspace,
+    setInbox,
+    switchPanel,
+    moveUp,
+    moveDown,
+  };
+}

package/src/tui/hooks/useDaemonStatus.ts

@@ -0,0 +1,174 @@
+/**
+ * Hook for monitoring daemon status (tmux-lite and serve)
+ *
+ * Provides real-time status of:
+ * - tmux-lite server (sessions count, version)
+ * - serve daemon (relay connection, clients count)
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { getStatus as getTmuxStatus, isServerRunning as isTmuxRunning } from '../../lib/tmux-lite/cli.js';
+import { queryServeStatus, isServeRunning, type StatusResponse } from '../../serve/daemon.js';
+
+/** Package version for comparison */
+const PACKAGE_VERSION = '1.0.0';
+
+/** Tmux daemon status */
+export interface TmuxStatus {
+  running: boolean;
+  version?: string;
+  sessions?: number;
+  attached?: number;
+  uptime?: number;
+}
+
+/** Serve daemon status */
+export interface ServeStatus {
+  running: boolean;
+  version?: string;
+  relayUrl?: string;
+  relayStatus?: 'connecting' | 'connected' | 'disconnected' | 'reconnecting';
+  clients?: number;
+  uptime?: number;
+  hosting?: {
+    subdomain: string;
+    tunnelActive: boolean;
+  };
+}
+
+/** Combined daemon status */
+export interface DaemonStatus {
+  tmux: TmuxStatus;
+  serve: ServeStatus;
+  versionMismatch: boolean;
+  packageVersion: string;
+}
+
+/** Hook options */
+export interface UseDaemonStatusOptions {
+  /** Polling interval in ms (default: 5000) */
+  pollInterval?: number;
+  /** Whether to poll automatically (default: true) */
+  autoPoll?: boolean;
+}
+
+/** Hook return type */
+export interface UseDaemonStatusReturn {
+  status: DaemonStatus;
+  refresh: () => Promise<void>;
+  isLoading: boolean;
+}
+
+/**
+ * Hook for monitoring daemon status
+ */
+export function useDaemonStatus(options: UseDaemonStatusOptions = {}): UseDaemonStatusReturn {
+  const { pollInterval = 5000, autoPoll = true } = options;
+
+  const [status, setStatus] = useState<DaemonStatus>({
+    tmux: { running: false },
+    serve: { running: false },
+    versionMismatch: false,
+    packageVersion: PACKAGE_VERSION,
+  });
+  const [isLoading, setIsLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    try {
+      // Query tmux status
+      let tmuxStatus: TmuxStatus = { running: false };
+      if (await isTmuxRunning()) {
+        try {
+          const tmux = await getTmuxStatus();
+          tmuxStatus = {
+            running: true,
+            version: tmux.version,
+            sessions: tmux.sessions,
+            attached: tmux.attached,
+            uptime: tmux.uptime,
+          };
+        } catch {
+          tmuxStatus = { running: true }; // Running but couldn't get details
+        }
+      }
+
+      // Query serve status
+      let serveStatus: ServeStatus = { running: false };
+      if (isServeRunning()) {
+        try {
+          const serve = await queryServeStatus();
+          if (serve) {
+            serveStatus = {
+              running: true,
+              version: serve.version,
+              relayUrl: serve.relay.url,
+              relayStatus: serve.relay.status,
+              clients: serve.clients,
+              uptime: serve.uptime,
+              hosting: serve.hosting,
+            };
+          } else {
+            serveStatus = { running: true }; // Running but couldn't get details
+          }
+        } catch {
+          serveStatus = { running: true }; // Running but couldn't get details
+        }
+      }
+
+      // Check version mismatch
+      const versionMismatch =
+        (tmuxStatus.version && tmuxStatus.version !== PACKAGE_VERSION) ||
+        (serveStatus.version && serveStatus.version !== PACKAGE_VERSION);
+
+      setStatus({
+        tmux: tmuxStatus,
+        serve: serveStatus,
+        versionMismatch: !!versionMismatch,
+        packageVersion: PACKAGE_VERSION,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Initial load
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  // Polling
+  useEffect(() => {
+    if (!autoPoll) return;
+
+    const interval = setInterval(refresh, pollInterval);
+    return () => clearInterval(interval);
+  }, [autoPoll, pollInterval, refresh]);
+
+  return { status, refresh, isLoading };
+}
+
+/**
+ * Format uptime in human-readable format
+ */
+export function formatUptime(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
+  const hours = Math.floor(seconds / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+  if (hours < 24) return `${hours}h ${mins}m`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ${hours % 24}h`;
+}
+
+/**
+ * Format relay status for display
+ */
+export function formatRelayStatus(status: ServeStatus['relayStatus']): string {
+  switch (status) {
+    case 'connected': return '●';
+    case 'connecting': return '◐';
+    case 'reconnecting': return '◐';
+    case 'disconnected': return '○';
+    default: return '?';
+  }
+}

package/src/tui/hooks/useInboxTUI.ts

@@ -0,0 +1,113 @@
+/**
+ * TUI-specific wrapper for shared useInbox hook
+ *
+ * Integrates with TUI's renderer suspend/resume and tmux-lite CLI.
+ */
+
+import { useCallback } from 'react';
+import { spawn } from 'child_process';
+import { useInbox, type UseInboxProps, type UseInboxReturn } from '../../shared/components/Inbox.js';
+import type { InboxItem } from '../../lib/tmux-lite/cli.js';
+
+interface UseTUIInboxOptions {
+  items: InboxItem[];
+  unreadCount: number;
+  onClose: () => void;
+  onRefreshWorkspaces: () => Promise<void>;
+  onRefreshInbox: () => Promise<{ items: InboxItem[]; unreadCount: number }>;
+  renderer: {
+    suspend: () => void;
+    resume: () => void;
+  };
+}
+
+interface UseTUIInboxReturn extends UseInboxReturn {
+  /** Refresh inbox after operations */
+  refreshInbox: () => Promise<void>;
+}
+
+export function useTUIInbox(options: UseTUIInboxOptions): UseTUIInboxReturn {
+  const {
+    items,
+    unreadCount,
+    onClose,
+    onRefreshWorkspaces,
+    onRefreshInbox,
+    renderer,
+  } = options;
+
+  // Clear a single inbox item
+  const onClearItem = useCallback(async (itemId: string) => {
+    const { clearInbox } = await import('../../lib/tmux-lite/cli.js');
+    await clearInbox(itemId);
+  }, []);
+
+  // Clear all inbox items
+  const onClearAll = useCallback(async () => {
+    const { clearInbox } = await import('../../lib/tmux-lite/cli.js');
+    await clearInbox();
+  }, []);
+
+  // Mark an item as read
+  const onMarkRead = useCallback(async (itemId: string) => {
+    const { markInboxRead } = await import('../../lib/tmux-lite/cli.js');
+    await markInboxRead(itemId);
+  }, []);
+
+  // Attach to a session
+  const onAttachSession = useCallback(async (sessionId: string) => {
+    const { listSessions } = await import('../../lib/tmux-lite/cli.js');
+    const sessions = await listSessions();
+    const session = sessions.find(s => s.id === sessionId);
+
+    if (!session) {
+      throw new Error('Session no longer exists');
+    }
+
+    // Get CLI path for tmux-lite
+    const cliPath = new URL('../../lib/tmux-lite/cli.ts', import.meta.url).pathname;
+
+    // Suspend TUI, attach to session, resume TUI
+    renderer.suspend();
+    const proc = spawn('bun', ['run', cliPath, 'attach', session.id, '-f'], { stdio: 'inherit' });
+    await new Promise<void>((resolve) => proc.on('exit', () => resolve()));
+    renderer.resume();
+
+    // Refresh workspaces after detaching
+    await onRefreshWorkspaces();
+  }, [renderer, onRefreshWorkspaces]);
+
+  // Convert TUI InboxItem to shared InboxItem format
+  const convertedItems = items.map(item => ({
+    id: item.id,
+    sessionId: item.sessionId,
+    sessionName: item.sessionName,
+    type: item.type as 'exit' | 'title' | 'idle' | 'bell',
+    context: item.context,
+    timestamp: item.timestamp,
+    read: item.read,
+    processTitle: item.processTitle,
+    exitCode: item.exitCode,
+  }));
+
+  // Use the shared hook
+  const hookReturn = useInbox({
+    items: convertedItems,
+    unreadCount,
+    onClearItem,
+    onClearAll,
+    onMarkRead,
+    onAttachSession,
+    onClose,
+  });
+
+  // Wrap refresh to also update the TUI state
+  const refreshInbox = useCallback(async () => {
+    await onRefreshInbox();
+  }, [onRefreshInbox]);
+
+  return {
+    ...hookReturn,
+    refreshInbox,
+  };
+}