gitspace 0.2.0-rc.1

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

@@ -0,0 +1,210 @@
+/** @jsxImportSource react */
+/**
+ * MachineList - Web Display Component
+ *
+ * Dumb presentational component for web.
+ * Receives all state and actions from useMachineList hook.
+ */
+
+import { useState } from 'react';
+import type { UseMachineListReturn } from './MachineList.js';
+import { getStatusColor, getMachineLabel } from './MachineList.js';
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function MachineListWeb(props: UseMachineListReturn) {
+  const {
+    items,
+    error,
+    publicKey,
+    isLoading,
+    isEmpty,
+    hasError,
+    selectIndex,
+    connectSelected,
+    refresh,
+  } = props;
+
+  const [commandCopied, setCommandCopied] = useState(false);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64 px-4">
+        <div className="text-gray-400 text-center">Connecting to relay...</div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (hasError) {
+    return (
+      <div className="flex flex-col items-center justify-center h-64 gap-4 px-4">
+        <div className="text-red-400 text-center">{error}</div>
+        <button
+          onClick={refresh}
+          className="px-6 py-3 text-base bg-gray-700 hover:bg-gray-600 active:bg-gray-500 rounded-lg min-h-[48px]"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (isEmpty) {
+    const accessCommand = `gssh access add "${publicKey || '...'}"`;
+
+    const copyCommand = () => {
+      if (publicKey) {
+        navigator.clipboard.writeText(accessCommand);
+        setCommandCopied(true);
+        setTimeout(() => setCommandCopied(false), 2000);
+      }
+    };
+
+    return (
+      <div className="flex flex-col items-center justify-center h-full py-8 sm:py-12 gap-6 px-4">
+        <div className="text-gray-400 text-lg text-center">No machines available</div>
+
+        <div className="text-center w-full max-w-xl">
+          <p className="text-gray-500 text-sm mb-3">
+            To connect, run this command on your machine:
+          </p>
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 bg-gray-800 rounded-lg p-3">
+            <code className="flex-1 text-yellow-400 px-2 py-2 font-mono text-xs sm:text-sm break-all text-left">
+              {accessCommand}
+            </code>
+            <button
+              onClick={copyCommand}
+              className="px-4 py-3 text-sm bg-gray-700 hover:bg-gray-600 active:bg-gray-500 rounded-lg whitespace-nowrap min-h-[48px]"
+            >
+              {commandCopied ? 'Copied!' : 'Copy'}
+            </button>
+          </div>
+        </div>
+
+        {publicKey && (
+          <details className="text-center w-full max-w-xl">
+            <summary className="text-gray-500 text-xs cursor-pointer hover:text-gray-400 py-2">
+              Show public key
+            </summary>
+            <code className="text-green-400 bg-gray-900 px-3 py-2 rounded font-mono text-xs break-all block mt-2">
+              {publicKey}
+            </code>
+          </details>
+        )}
+
+        <button
+          onClick={refresh}
+          className="px-6 py-3 text-base bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-lg min-h-[48px]"
+        >
+          Refresh
+        </button>
+      </div>
+    );
+  }
+
+  // Machine list
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700">
+        <h2 className="text-lg font-medium text-white">Machines</h2>
+        <button
+          onClick={refresh}
+          className="text-sm text-gray-400 hover:text-white active:text-blue-400 px-3 py-2 -mr-3 min-h-[44px] flex items-center"
+        >
+          Refresh
+        </button>
+      </div>
+
+      {/* Machine list */}
+      <div className="flex-1 overflow-y-auto">
+        {items.map((item, index) => {
+          const { machine, isSelected, isConnectable } = item;
+          const statusColor = getStatusColor(machine);
+
+          return (
+            <div
+              key={machine.machineId}
+              onClick={() => {
+                selectIndex(index);
+                // On touch devices, single tap connects (since double-tap is awkward)
+                if (isConnectable && 'ontouchstart' in window) {
+                  connectSelected();
+                }
+              }}
+              onDoubleClick={() => isConnectable && connectSelected()}
+              className={`
+                px-4 py-4 cursor-pointer border-b border-gray-800 min-h-[60px]
+                ${isSelected ? 'bg-gray-700' : 'hover:bg-gray-800 active:bg-gray-700'}
+                ${!isConnectable ? 'opacity-50' : ''}
+              `}
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  {/* Status indicator */}
+                  <div
+                    className={`w-3 h-3 rounded-full flex-shrink-0 ${
+                      statusColor === 'green' ? 'bg-green-500' :
+                      statusColor === 'yellow' ? 'bg-yellow-500' :
+                      statusColor === 'red' ? 'bg-red-500' :
+                      'bg-gray-500'
+                    }`}
+                  />
+                  {/* Machine name */}
+                  <div className="min-w-0">
+                    <div className="text-white font-medium truncate">
+                      {getMachineLabel(machine)}
+                    </div>
+                    {machine.label && (
+                      <div className="text-xs text-gray-500 font-mono truncate">
+                        {machine.machineId}
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Status text and connect button on mobile */}
+                <div className="flex items-center gap-3 flex-shrink-0">
+                  <div className="text-sm text-gray-400 hidden sm:block">
+                    {machine.online ? 'Online' : 'Offline'}
+                  </div>
+                  {isConnectable && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        selectIndex(index);
+                        connectSelected();
+                      }}
+                      className="sm:hidden px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded text-white"
+                    >
+                      Connect
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Footer - keyboard hints on desktop, action buttons on mobile */}
+      <div className="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">
+          <span>↑↓ Navigate</span>
+          <span>Enter Connect</span>
+          <span>r Refresh</span>
+        </div>
+        {/* Mobile hint */}
+        <div className="sm:hidden text-xs text-gray-500 text-center">
+          Tap a machine to connect
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/shared/components/ProjectList.tsx

@@ -0,0 +1,176 @@
+/**
+ * ProjectList - Shared Hook
+ *
+ * Hook that manages project list state and actions.
+ * Used by both web and TUI renderers.
+ */
+
+import { useState, useCallback, useMemo, useEffect } from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/** Project info from local config */
+export interface ProjectInfo {
+  name: string;
+  repository: string;
+  workspaceCount: number;
+  isCurrent: boolean;
+  lastAccessed?: Date;
+}
+
+/** Project item with selection state */
+export interface ProjectListItem extends ProjectInfo {
+  isSelected: boolean;
+  index: number;
+}
+
+/** Props for useProjectList hook */
+export interface UseProjectListProps {
+  projects: ProjectInfo[];
+  onSelect: (project: ProjectInfo) => void;
+  onCreateNew: () => void;
+  onDelete: (project: ProjectInfo) => void;
+  onRefresh: () => void;
+}
+
+/** Return type of useProjectList hook */
+export interface UseProjectListReturn {
+  // Display data
+  items: ProjectListItem[];
+  selectedIndex: number;
+  selectedProject: ProjectInfo | null;
+
+  // Computed flags
+  isEmpty: boolean;
+
+  // Actions
+  moveUp: () => void;
+  moveDown: () => void;
+  selectIndex: (index: number) => void;
+  selectProject: () => void;
+  createNew: () => void;
+  deleteSelected: () => void;
+  refresh: () => void;
+}
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+export function useProjectList(props: UseProjectListProps): UseProjectListReturn {
+  const {
+    projects,
+    onSelect,
+    onCreateNew,
+    onDelete,
+    onRefresh,
+  } = props;
+
+  // Local UI state
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    // Default to current project
+    const currentIdx = projects.findIndex(p => p.isCurrent);
+    return currentIdx >= 0 ? currentIdx : 0;
+  });
+
+  // Build items with selection state
+  const items = useMemo(
+    () =>
+      projects.map((project, index) => ({
+        ...project,
+        isSelected: index === selectedIndex,
+        index,
+      })),
+    [projects, selectedIndex]
+  );
+
+  // Selected project
+  const selectedProject = projects[selectedIndex] ?? null;
+
+  // Computed
+  const isEmpty = projects.length === 0;
+
+  // Clamp selection when list changes
+  useEffect(() => {
+    if (selectedIndex >= projects.length && projects.length > 0) {
+      setSelectedIndex(projects.length - 1);
+    }
+  }, [projects.length, selectedIndex]);
+
+  // Actions
+  const moveUp = useCallback(() => {
+    setSelectedIndex(i => Math.max(0, i - 1));
+  }, []);
+
+  const moveDown = useCallback(() => {
+    setSelectedIndex(i => Math.min(projects.length - 1, i + 1));
+  }, [projects.length]);
+
+  const selectIndex = useCallback((index: number) => {
+    setSelectedIndex(Math.max(0, Math.min(index, projects.length - 1)));
+  }, [projects.length]);
+
+  const selectProject = useCallback(() => {
+    if (selectedProject) {
+      onSelect(selectedProject);
+    }
+  }, [selectedProject, onSelect]);
+
+  const createNew = useCallback(() => {
+    onCreateNew();
+  }, [onCreateNew]);
+
+  const deleteSelected = useCallback(() => {
+    if (selectedProject) {
+      onDelete(selectedProject);
+    }
+  }, [selectedProject, onDelete]);
+
+  const refresh = useCallback(() => {
+    console.log("[ProjectList] refresh() called");
+    onRefresh();
+  }, [onRefresh]);
+
+  return {
+    // Display data
+    items,
+    selectedIndex,
+    selectedProject,
+
+    // Computed flags
+    isEmpty,
+
+    // Actions
+    moveUp,
+    moveDown,
+    selectIndex,
+    selectProject,
+    createNew,
+    deleteSelected,
+    refresh,
+  };
+}
+
+// ============================================================================
+// Utilities
+// ============================================================================
+
+/** Get display name for project */
+export function getProjectDisplayName(project: ProjectInfo): string {
+  return project.name;
+}
+
+/** Get short repository name from full repo string */
+export function getShortRepoName(repository: string): string {
+  const parts = repository.split('/');
+  return parts[parts.length - 1] || repository;
+}
+
+/** Format workspace count for display */
+export function formatWorkspaceCount(count: number): string {
+  if (count === 0) return 'No workspaces';
+  if (count === 1) return '1 workspace';
+  return `${count} workspaces`;
+}

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

@@ -0,0 +1,109 @@
+/**
+ * ProjectList - TUI Display Component
+ *
+ * Dumb presentational component for OpenTUI.
+ * Receives all state and actions from useProjectList hook.
+ */
+
+import type { UseProjectListReturn } from './ProjectList.js';
+import { formatWorkspaceCount } from './ProjectList.js';
+
+// ============================================================================
+// Colors
+// ============================================================================
+
+const COLORS = {
+  border: '#555555',
+  borderFocused: '#00AAFF',
+  text: '#FFFFFF',
+  textDim: '#888888',
+  selected: '#00AAFF',
+  title: '#00FF88',
+  current: '#FFAA00',
+  repository: '#888888',
+};
+
+// ============================================================================
+// Props
+// ============================================================================
+
+interface ProjectListTUIProps extends UseProjectListReturn {
+  focused?: boolean;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function ProjectListTUI(props: ProjectListTUIProps) {
+  const {
+    items,
+    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}>
+          {' '}Projects{' '}
+        </text>
+        <box
+          flexDirection="column"
+          paddingLeft={1}
+          paddingTop={1}
+          flexGrow={1}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <text fg={COLORS.textDim}>No projects</text>
+          <text fg={COLORS.textDim} paddingTop={1}>
+            Press [n] to add one
+          </text>
+        </box>
+      </box>
+    );
+  }
+
+  return (
+    <box
+      flexGrow={1}
+      flexDirection="column"
+      border
+      borderStyle="single"
+      borderColor={focused ? COLORS.borderFocused : COLORS.border}
+    >
+      <text fg={COLORS.title} paddingLeft={1}>
+        {' '}Projects{' '}
+      </text>
+      <box flexDirection="column" paddingLeft={1} paddingTop={1} flexGrow={1} overflow="scroll">
+        {items.map((project) => {
+          const isSelected = project.isSelected && focused;
+          const prefix = isSelected ? '>' : ' ';
+          const currentIndicator = project.isCurrent ? '*' : '';
+
+          return (
+            <box key={project.name} flexDirection="column" height={2}>
+              <text
+                fg={isSelected ? COLORS.selected : project.isCurrent ? COLORS.current : COLORS.text}
+                height={1}
+              >
+                {prefix} {project.name} {currentIndicator}
+              </text>
+              <text fg={COLORS.repository} height={1}>
+                {'  '}{project.repository} ({formatWorkspaceCount(project.workspaceCount)})
+              </text>
+            </box>
+          );
+        })}
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,143 @@
+/** @jsxImportSource react */
+/**
+ * ProjectList - Web Display Component
+ *
+ * Dumb presentational component for web.
+ * Receives all state and actions from useProjectList hook.
+ */
+
+import type { UseProjectListReturn } from './ProjectList.js';
+import { formatWorkspaceCount, getShortRepoName } from './ProjectList.js';
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function ProjectListWeb(props: UseProjectListReturn) {
+  const {
+    items,
+    isEmpty,
+    selectIndex,
+    selectProject,
+    createNew,
+    deleteSelected,
+    refresh,
+  } = props;
+
+  // Empty state
+  if (isEmpty) {
+    return (
+      <div className="h-screen flex flex-col bg-gray-900">
+        <Header onRefresh={refresh} onCreateNew={createNew} />
+        <div className="flex-1 flex flex-col items-center justify-center text-gray-400">
+          <div className="text-lg mb-2">No projects</div>
+          <button
+            onClick={createNew}
+            className="text-blue-400 hover:text-blue-300"
+          >
+            Create your first project
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen flex flex-col bg-gray-900">
+      <Header onRefresh={refresh} onCreateNew={createNew} />
+
+      <div className="flex-1 overflow-y-auto">
+        {items.map((project) => (
+          <div
+            key={project.name}
+            onClick={() => {
+              selectIndex(project.index);
+              selectProject();
+            }}
+            className={`
+              px-4 py-3 cursor-pointer border-b border-gray-800 flex items-center justify-between
+              ${project.isSelected ? 'bg-gray-700 border-l-4 border-l-blue-500' : 'hover:bg-gray-800'}
+            `}
+          >
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded bg-gray-700 flex items-center justify-center text-lg">
+                📁
+              </div>
+              <div>
+                <div className="flex items-center gap-2">
+                  <span className="text-white font-medium">{project.name}</span>
+                  {project.isCurrent && (
+                    <span className="text-xs px-2 py-0.5 rounded bg-yellow-900 text-yellow-300">
+                      Current
+                    </span>
+                  )}
+                </div>
+                <div className="text-xs text-gray-500">
+                  {getShortRepoName(project.repository)} · {formatWorkspaceCount(project.workspaceCount)}
+                </div>
+              </div>
+            </div>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                selectIndex(project.index);
+                deleteSelected();
+              }}
+              className="text-gray-600 hover:text-red-400 p-2"
+              title="Delete project"
+            >
+              🗑️
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <Footer />
+    </div>
+  );
+}
+
+// ============================================================================
+// Subcomponents
+// ============================================================================
+
+function Header({
+  onRefresh,
+  onCreateNew,
+}: {
+  onRefresh: () => void;
+  onCreateNew: () => void;
+}) {
+  return (
+    <div className="bg-gray-800 px-4 py-3 flex items-center justify-between border-b border-gray-700">
+      <div className="text-white font-medium">Projects</div>
+      <div className="flex gap-2">
+        <button
+          onClick={onRefresh}
+          className="text-sm text-gray-400 hover:text-white px-2 py-1"
+        >
+          Refresh
+        </button>
+        <button
+          onClick={onCreateNew}
+          className="text-sm bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded"
+        >
+          + New Project
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function Footer() {
+  return (
+    <div className="bg-gray-800 px-4 py-2 border-t border-gray-700 text-xs text-gray-500 flex gap-4">
+      <span>↑↓ Navigate</span>
+      <span>Enter Select</span>
+      <span>n New</span>
+      <span>d Delete</span>
+      <span>r Refresh</span>
+      <span>Esc Back</span>
+    </div>
+  );
+}