gitspace 0.2.0-rc.1

package/src/tui/hooks/useRemoteMachines.ts

@@ -0,0 +1,209 @@
+/**
+ * TUI Hook for Remote Machine Connections
+ *
+ * Manages relay connection and provides a unified interface for
+ * both local and remote machine operations.
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { MachineInfo } from '../../shared/components/index.js';
+import type { MachineProvider } from '../../shared/providers/index.js';
+import type WS from 'ws';
+
+export interface RelayConfig {
+  url: string;
+}
+
+export interface UseRemoteMachinesOptions {
+  relayConfig?: RelayConfig;
+  onError?: (error: Error) => void;
+}
+
+export type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
+
+export interface UseRemoteMachinesReturn {
+  // Connection state
+  status: ConnectionStatus;
+  error: string | null;
+
+  // Machine list
+  machines: MachineInfo[];
+  selectedMachine: MachineInfo | null;
+
+  // Actions
+  connect: () => Promise<void>;
+  disconnect: () => void;
+  selectMachine: (machine: MachineInfo) => Promise<MachineProvider | null>;
+  refreshMachines: () => Promise<void>;
+
+  // Mode
+  isRemoteMode: boolean;
+  isLocal: (machine: MachineInfo) => boolean;
+}
+
+export function useRemoteMachines(options: UseRemoteMachinesOptions = {}): UseRemoteMachinesReturn {
+  const { relayConfig, onError } = options;
+
+  const [status, setStatus] = useState<ConnectionStatus>('disconnected');
+  const [error, setError] = useState<string | null>(null);
+  const [machines, setMachines] = useState<MachineInfo[]>([]);
+  const [selectedMachine, setSelectedMachine] = useState<MachineInfo | null>(null);
+  const wsRef = useRef<WS | null>(null);
+
+  const isRemoteMode = !!relayConfig;
+
+  // Local machine info
+  const localMachine: MachineInfo = {
+    machineId: 'local',
+    label: 'This Machine',
+    online: true,
+    isAuthorized: true,
+  };
+
+  // Check if machine is local
+  const isLocal = useCallback((machine: MachineInfo) => {
+    return machine.machineId === 'local';
+  }, []);
+
+  // Connect to relay
+  const connect = useCallback(async () => {
+    if (!relayConfig) {
+      // No relay config - just use local machine
+      setMachines([localMachine]);
+      setStatus('connected');
+      return;
+    }
+
+    setStatus('connecting');
+    setError(null);
+
+    try {
+      const { default: WebSocket } = await import('ws');
+      const socket = new WebSocket(relayConfig.url);
+
+      socket.on('open', () => {
+        // Request machine list (auth happens via challenge-response)
+        socket.send(JSON.stringify({ type: 'list-machines' }));
+      });
+
+      socket.on('message', (data: Buffer) => {
+        try {
+          const message = JSON.parse(data.toString());
+
+          if (message.type === 'machines') {
+            setStatus('connected');
+            // Combine local with remote machines
+            const remoteMachines: MachineInfo[] = message.machines.map((m: any) => ({
+              machineId: m.machineId,
+              label: m.label,
+              online: m.online,
+              hasAccess: m.hasAccess,
+              lastConnectedAt: m.lastConnectedAt,
+            }));
+            setMachines([localMachine, ...remoteMachines]);
+          } else if (message.type === 'error') {
+            setError(message.message);
+            if (onError) onError(new Error(message.message));
+          }
+        } catch (e) {
+          // Ignore parse errors
+        }
+      });
+
+      socket.on('error', (err) => {
+        setError(err.message);
+        setStatus('error');
+        if (onError) onError(err);
+      });
+
+      socket.on('close', () => {
+        setStatus('disconnected');
+        wsRef.current = null;
+      });
+
+      wsRef.current = socket;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to connect');
+      setError(error.message);
+      setStatus('error');
+      if (onError) onError(error);
+    }
+  }, [relayConfig, localMachine, onError]);
+
+  // Disconnect from relay
+  const disconnect = useCallback(() => {
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setStatus('disconnected');
+    setMachines([]);
+    setSelectedMachine(null);
+  }, []);
+
+  // Select a machine and get its provider
+  const selectMachine = useCallback(async (machine: MachineInfo): Promise<MachineProvider | null> => {
+    setSelectedMachine(machine);
+
+    if (isLocal(machine)) {
+      // Return local provider
+      const { getLocalMachineProvider } = await import('../../shared/providers/index.js');
+      return getLocalMachineProvider();
+    }
+
+    // Return remote provider
+    if (!relayConfig || !wsRef.current) {
+      setError('Not connected to relay');
+      return null;
+    }
+
+    const { createRemoteMachineProvider } = await import('../../shared/providers/index.js');
+    return createRemoteMachineProvider({
+      relayUrl: relayConfig.url,
+      machineId: machine.machineId,
+    });
+  }, [isLocal, relayConfig]);
+
+  // Refresh machine list
+  const refreshMachines = useCallback(async () => {
+    if (!relayConfig) {
+      setMachines([localMachine]);
+      return;
+    }
+
+    const ws = wsRef.current;
+    if (ws && ws.readyState === ws.OPEN) {
+      ws.send(JSON.stringify({ type: 'list-machines' }));
+    }
+  }, [relayConfig, localMachine]);
+
+  // Auto-connect on mount if relay config is provided
+  useEffect(() => {
+    if (relayConfig) {
+      connect();
+    } else {
+      // Just show local machine
+      setMachines([localMachine]);
+      setStatus('connected');
+    }
+
+    return () => {
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, []); // Only run on mount
+
+  return {
+    status,
+    error,
+    machines,
+    selectedMachine,
+    connect,
+    disconnect,
+    selectMachine,
+    refreshMachines,
+    isRemoteMode,
+    isLocal,
+  };
+}

package/src/tui/index.ts

@@ -0,0 +1,24 @@
+/**
+ * TUI entry point
+ * Exports the main TUI launcher
+ */
+
+export { launchTUI, type TUIRelayConfig } from './app.jsx';
+export * from './state.js';
+// Note: hooks/index exports AppState which conflicts with state.js
+// Explicitly re-export without the duplicate
+export {
+  useRemoteMachines,
+  type RelayConfig,
+  type UseRemoteMachinesOptions,
+  type ConnectionStatus,
+  type UseRemoteMachinesReturn,
+  useAppState,
+  type AppView,
+  type PanelFocus,
+  type AppAction,
+  type UseAppStateOptions,
+  useTUIInbox,
+} from './hooks/index.js';
+// Export hook's AppState with a distinct name
+export type { AppState as HookAppState } from './hooks/index.js';

package/src/tui/state.ts

@@ -0,0 +1,299 @@
+/**
+ * TUI state management
+ * Handles application state for the terminal user interface
+ */
+
+import {
+  getAllProjectNames,
+  readProjectConfig,
+  getCurrentProject,
+  setCurrentProject,
+  getProjectWorkspacesDir,
+} from '../core/config.js';
+import { getWorktreeInfo } from '../core/git.js';
+import { existsSync, readdirSync } from 'fs';
+import { join } from 'path';
+import type { WorktreeInfo } from '../types/workspace.js';
+import {
+  listSessions,
+  getInbox,
+  type Session,
+  type InboxItem,
+} from '../lib/tmux-lite/cli.js';
+
+export interface ProjectState {
+  name: string;
+  repository: string;
+  workspaceCount: number;
+  isCurrent: boolean;
+}
+
+export interface WorkspaceSession {
+  id: string;
+  name: string;
+  attached: boolean;
+  createdAt: number;
+  processTitle?: string;
+}
+
+export interface WorkspaceState extends WorktreeInfo {
+  isStale: boolean;
+  sessions: WorkspaceSession[];
+}
+
+// Tree item for flat list rendering
+export type TreeItem =
+  | { type: 'workspace'; workspace: WorkspaceState }
+  | { type: 'session'; workspace: WorkspaceState; session: WorkspaceSession }
+  | { type: 'new-session'; workspace: WorkspaceState };
+
+export interface AppState {
+  projects: ProjectState[];
+  workspaces: WorkspaceState[];
+  selectedProjectIndex: number;
+  selectedTreeIndex: number;  // Index into flattened tree
+  expandedWorkspaces: Set<string>;  // Set of expanded workspace names
+  activePanel: 'projects' | 'workspaces';
+  currentProject: string | null;
+  isLoading: boolean;
+  error: string | null;
+  inbox: InboxItem[];
+  unreadCount: number;
+}
+
+// Build flat tree from workspaces and expanded state
+export function buildTree(workspaces: WorkspaceState[], expanded: Set<string>): TreeItem[] {
+  const items: TreeItem[] = [];
+  for (const ws of workspaces) {
+    items.push({ type: 'workspace', workspace: ws });
+    if (expanded.has(ws.name)) {
+      // Add sessions
+      for (const session of ws.sessions) {
+        items.push({ type: 'session', workspace: ws, session });
+      }
+      // Add "new session" option
+      items.push({ type: 'new-session', workspace: ws });
+    }
+  }
+  return items;
+}
+
+const STALE_DAYS = 30;
+
+/**
+ * Create initial app state
+ */
+export function createInitialState(): AppState {
+  return {
+    projects: [],
+    workspaces: [],
+    selectedProjectIndex: 0,
+    selectedTreeIndex: 0,
+    expandedWorkspaces: new Set(),
+    activePanel: 'projects',
+    currentProject: null,
+    isLoading: true,
+    error: null,
+    inbox: [],
+    unreadCount: 0,
+  };
+}
+
+/**
+ * Load projects from config
+ */
+export function loadProjects(): ProjectState[] {
+  const projectNames = getAllProjectNames();
+  const currentProject = getCurrentProject();
+
+  return projectNames.map((name) => {
+    const config = readProjectConfig(name);
+    const workspacesDir = getProjectWorkspacesDir(name);
+    let workspaceCount = 0;
+
+    if (existsSync(workspacesDir)) {
+      workspaceCount = readdirSync(workspacesDir).filter((entry) => {
+        const path = join(workspacesDir, entry);
+        return existsSync(path) && readdirSync(path).length > 0;
+      }).length;
+    }
+
+    return {
+      name,
+      repository: config.repository,
+      workspaceCount,
+      isCurrent: name === currentProject,
+    };
+  });
+}
+
+/**
+ * Load workspaces for a project with session info
+ */
+export async function loadWorkspaces(projectName: string): Promise<WorkspaceState[]> {
+  const workspacesDir = getProjectWorkspacesDir(projectName);
+
+  if (!existsSync(workspacesDir)) {
+    return [];
+  }
+
+  const workspaceNames = readdirSync(workspacesDir).filter((entry) => {
+    const path = join(workspacesDir, entry);
+    return existsSync(path) && readdirSync(path).length > 0;
+  });
+
+  // Get all tmux-lite sessions
+  let allSessions: Session[] = [];
+  try {
+    allSessions = await listSessions();
+  } catch {
+    // Server might not be running, that's fine
+  }
+
+  const workspaces: WorkspaceState[] = [];
+  const now = new Date();
+
+  for (const name of workspaceNames) {
+    const workspacePath = join(workspacesDir, name);
+    const info = await getWorktreeInfo(workspacePath);
+
+    if (info) {
+      const daysSinceCommit = Math.floor(
+        (now.getTime() - info.lastCommitDate.getTime()) / (1000 * 60 * 60 * 24)
+      );
+
+      // Find sessions for this workspace by matching cwd.
+      // Note: Session cwd is set once at creation time and does NOT change
+      // as users navigate within the shell. This is intentional - we want to
+      // show sessions that were *created for* this workspace, not sessions
+      // that happen to currently be in this directory.
+      const workspaceSessions = allSessions
+        .filter(s => s.cwd === workspacePath)
+        .map(s => ({
+          id: s.id,
+          name: s.name,
+          attached: s.attached,
+          createdAt: s.createdAt,
+          processTitle: s.processTitle,
+        }));
+
+      workspaces.push({
+        ...info,
+        isStale: daysSinceCommit > STALE_DAYS,
+        sessions: workspaceSessions,
+      });
+    }
+  }
+
+  return workspaces;
+}
+
+/**
+ * Load inbox items
+ */
+export async function loadInbox(): Promise<{ items: InboxItem[]; unreadCount: number }> {
+  try {
+    const items = await getInbox();
+    const unreadCount = items.filter(i => !i.read).length;
+    return { items, unreadCount };
+  } catch {
+    // Server might not be running
+    return { items: [], unreadCount: 0 };
+  }
+}
+
+/**
+ * State update actions
+ */
+export type StateAction =
+  | { type: 'SET_LOADING'; loading: boolean }
+  | { type: 'SET_ERROR'; error: string | null }
+  | { type: 'SET_PROJECTS'; projects: ProjectState[] }
+  | { type: 'SET_WORKSPACES'; workspaces: WorkspaceState[] }
+  | { type: 'SELECT_PROJECT'; index: number }
+  | { type: 'SELECT_TREE_ITEM'; index: number }
+  | { type: 'TOGGLE_WORKSPACE'; workspaceName: string }
+  | { type: 'SET_ACTIVE_PANEL'; panel: 'projects' | 'workspaces' }
+  | { type: 'SET_CURRENT_PROJECT'; project: string | null }
+  | { type: 'SET_INBOX'; inbox: InboxItem[]; unreadCount: number }
+  | { type: 'MOVE_UP' }
+  | { type: 'MOVE_DOWN' }
+  | { type: 'SWITCH_PANEL' };
+
+/**
+ * State reducer
+ */
+export function stateReducer(state: AppState, action: StateAction): AppState {
+  switch (action.type) {
+    case 'SET_LOADING':
+      return { ...state, isLoading: action.loading };
+
+    case 'SET_ERROR':
+      return { ...state, error: action.error };
+
+    case 'SET_PROJECTS':
+      return { ...state, projects: action.projects };
+
+    case 'SET_WORKSPACES':
+      return { ...state, workspaces: action.workspaces, selectedTreeIndex: 0 };
+
+    case 'SELECT_PROJECT': {
+      const index = Math.max(0, Math.min(action.index, state.projects.length - 1));
+      return { ...state, selectedProjectIndex: index };
+    }
+
+    case 'SELECT_TREE_ITEM': {
+      const tree = buildTree(state.workspaces, state.expandedWorkspaces);
+      const index = Math.max(0, Math.min(action.index, tree.length - 1));
+      return { ...state, selectedTreeIndex: index };
+    }
+
+    case 'TOGGLE_WORKSPACE': {
+      const newExpanded = new Set(state.expandedWorkspaces);
+      if (newExpanded.has(action.workspaceName)) {
+        newExpanded.delete(action.workspaceName);
+      } else {
+        newExpanded.add(action.workspaceName);
+      }
+      return { ...state, expandedWorkspaces: newExpanded };
+    }
+
+    case 'SET_ACTIVE_PANEL':
+      return { ...state, activePanel: action.panel };
+
+    case 'SET_CURRENT_PROJECT':
+      return { ...state, currentProject: action.project };
+
+    case 'SET_INBOX':
+      return { ...state, inbox: action.inbox, unreadCount: action.unreadCount };
+
+    case 'MOVE_UP':
+      if (state.activePanel === 'projects') {
+        const index = Math.max(0, state.selectedProjectIndex - 1);
+        return { ...state, selectedProjectIndex: index };
+      } else {
+        const tree = buildTree(state.workspaces, state.expandedWorkspaces);
+        const index = Math.max(0, state.selectedTreeIndex - 1);
+        return { ...state, selectedTreeIndex: index };
+      }
+
+    case 'MOVE_DOWN':
+      if (state.activePanel === 'projects') {
+        const index = Math.min(state.projects.length - 1, state.selectedProjectIndex + 1);
+        return { ...state, selectedProjectIndex: index };
+      } else {
+        const tree = buildTree(state.workspaces, state.expandedWorkspaces);
+        const index = Math.min(tree.length - 1, state.selectedTreeIndex + 1);
+        return { ...state, selectedTreeIndex: index };
+      }
+
+    case 'SWITCH_PANEL':
+      return {
+        ...state,
+        activePanel: state.activePanel === 'projects' ? 'workspaces' : 'projects',
+      };
+
+    default:
+      return state;
+  }
+}

package/src/tui/terminal-bracketed-paste.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "bun:test";
+import { BracketedPasteModeTracker, wrapPaste } from "./terminal-bracketed-paste";
+
+describe("BracketedPasteModeTracker", () => {
+  test("defaults to disabled", () => {
+    const t = new BracketedPasteModeTracker();
+    expect(t.isEnabled).toBe(false);
+  });
+
+  test("enables on CSI ? 2004 h and disables on CSI ? 2004 l", () => {
+    const t = new BracketedPasteModeTracker();
+    t.update(Buffer.from("\x1b[?2004h"));
+    expect(t.isEnabled).toBe(true);
+    t.update(Buffer.from("\x1b[?2004l"));
+    expect(t.isEnabled).toBe(false);
+  });
+
+  test("handles sequences split across chunks", () => {
+    const t = new BracketedPasteModeTracker();
+    t.update(Buffer.from("\x1b[?20"));
+    expect(t.isEnabled).toBe(false);
+    t.update(Buffer.from("04h"));
+    expect(t.isEnabled).toBe(true);
+  });
+
+  test("last occurrence wins when both appear", () => {
+    const t = new BracketedPasteModeTracker();
+    t.update(Buffer.from("\x1b[?2004h...\x1b[?2004l"));
+    expect(t.isEnabled).toBe(false);
+    t.update(Buffer.from("\x1b[?2004l...\x1b[?2004h"));
+    expect(t.isEnabled).toBe(true);
+  });
+});
+
+describe("wrapPaste", () => {
+  test("wraps when enabled", () => {
+    expect(wrapPaste("hi", true)).toBe("\x1b[200~hi\x1b[201~");
+  });
+
+  test("passes through when disabled", () => {
+    expect(wrapPaste("hi", false)).toBe("hi");
+  });
+});
+
+

package/src/tui/terminal-bracketed-paste.ts

@@ -0,0 +1,47 @@
+/**
+ * Bracketed paste mode tracking (DECSET 2004).
+ *
+ * Remote programs can enable bracketed paste by emitting CSI ? 2004 h and
+ * disable it with CSI ? 2004 l. When enabled, pasted content should be wrapped
+ * in ESC[200~ ... ESC[201~ so shells/editors can treat it as a paste.
+ */
+
+const ENABLE = Buffer.from("\x1b[?2004h");
+const DISABLE = Buffer.from("\x1b[?2004l");
+
+export class BracketedPasteModeTracker {
+  private enabled = false;
+  private tail = Buffer.alloc(0);
+
+  get isEnabled(): boolean {
+    return this.enabled;
+  }
+
+  /**
+   * Update mode based on an output chunk from the remote PTY.
+   * Handles sequences split across chunks by keeping a short tail.
+   */
+  update(chunk: Buffer): void {
+    if (chunk.length === 0) return;
+
+    const scanBuf = this.tail.length > 0 ? Buffer.concat([this.tail, chunk]) : chunk;
+
+    const lastEnable = scanBuf.lastIndexOf(ENABLE);
+    const lastDisable = scanBuf.lastIndexOf(DISABLE);
+    if (lastEnable !== -1 || lastDisable !== -1) {
+      this.enabled = lastEnable > lastDisable;
+    }
+
+    const keep = Math.max(ENABLE.length, DISABLE.length) - 1;
+    this.tail = scanBuf.length > keep
+      ? Buffer.from(scanBuf.subarray(scanBuf.length - keep))
+      : Buffer.from(scanBuf);
+  }
+}
+
+export function wrapPaste(text: string, bracketedPasteEnabled: boolean): string {
+  if (!bracketedPasteEnabled) return text;
+  return `\x1b[200~${text}\x1b[201~`;
+}
+
+