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

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

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

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

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

@@ -1,143 +0,0 @@
-/** @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>
-  );
-}