gitspace 0.2.0-rc.20 → 0.2.0-rc.21

package/src/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-[#8b949e] 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-[#f85149] text-center">{error}</div>
-        <button
-          onClick={refresh}
-          className="px-6 py-3 text-base bg-[#21262d] hover:bg-[#30363d] active:bg-[#161b22] border border-[#30363d] rounded-lg min-h-[48px] text-[#e6edf3]"
-        >
-          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-[#8b949e] text-lg text-center">No machines available</div>
-
-        <div className="text-center w-full max-w-xl">
-          <p className="text-[#6e7681] 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-[#161b22] border border-[#30363d] rounded-lg p-3">
-            <code className="flex-1 text-[#d29922] 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-[#21262d] hover:bg-[#30363d] active:bg-[#161b22] border border-[#30363d] rounded-lg whitespace-nowrap min-h-[48px] text-[#e6edf3]"
-            >
-              {commandCopied ? 'Copied!' : 'Copy'}
-            </button>
-          </div>
-        </div>
-
-        {publicKey && (
-          <details className="text-center w-full max-w-xl">
-            <summary className="text-[#6e7681] text-xs cursor-pointer hover:text-[#8b949e] py-2">
-              Show public key
-            </summary>
-            <code className="text-[#3fb950] bg-[#0d1117] border border-[#30363d] 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-[#22c55e] hover:bg-[#16a34a] active:bg-[#16a34a] text-[#0d1117] font-medium shadow-glow 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-[#30363d] bg-[#161b22]">
-        <h2 className="text-lg font-medium text-[#e6edf3]">Machines</h2>
-        <button
-          onClick={refresh}
-          className="text-sm text-[#8b949e] hover:text-[#e6edf3] active:text-[#22c55e] 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-[#30363d] min-h-[60px]
-                ${isSelected ? 'bg-[#21262d]' : 'hover:bg-[#161b22] active:bg-[#21262d]'}
-                ${!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-[#3fb950] shadow-glow' :
-                      statusColor === 'yellow' ? 'bg-[#d29922]' :
-                      statusColor === 'red' ? 'bg-[#f85149]' :
-                      'bg-[#6e7681]'
-                    }`}
-                  />
-                  {/* Machine name */}
-                  <div className="min-w-0">
-                    <div className="text-[#e6edf3] font-medium truncate">
-                      {getMachineLabel(machine)}
-                    </div>
-                    {machine.label && (
-                      <div className="text-xs text-[#8b949e] 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-[#8b949e] 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-[#22c55e] hover:bg-[#16a34a] active:bg-[#16a34a] text-[#0d1117] font-medium rounded shadow-glow"
-                    >
-                      Connect
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Footer - keyboard hints on desktop, action buttons on mobile */}
-      <div className="px-4 py-2 border-t border-[#30363d] bg-[#161b22] safe-bottom">
-        {/* Desktop keyboard hints */}
-        <div className="hidden sm:flex gap-4 text-xs text-[#6e7681]">
-          <span>↑↓ Navigate</span>
-          <span>Enter Connect</span>
-          <span>r Refresh</span>
-        </div>
-        {/* Mobile hint */}
-        <div className="sm:hidden text-xs text-[#6e7681] text-center">
-          Tap a machine to connect
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/NumPad.web.tsx

@@ -1,270 +0,0 @@
-import React, { useCallback, useState, useRef } from 'react';
-import { triggerHaptic } from '../utils/device.web';
-
-export interface NumPadProps {
-  /** Callback when a number is pressed */
-  onNumber: (num: number) => void;
-  /** Callback to close the NumPad */
-  onClose: () => void;
-  /** Current modifier state for display */
-  modifiers?: {
-    ctrl: boolean;
-    shift: boolean;
-    alt: boolean;
-  };
-}
-
-// Grid layout constants
-const CELL_WIDTH = 56; // px - matches Tailwind w-14
-const CELL_HEIGHT = 48; // px - matches Tailwind h-12
-const GAP = 6; // px - gap between cells
-const PADDING = 16; // px - padding around grid
-
-// Calculate total dimensions
-const PAD_WIDTH = CELL_WIDTH * 3 + GAP * 2 + PADDING * 2;
-
-// Number grid layout (calculator style)
-// Row 1: 7 8 9
-// Row 2: 4 5 6
-// Row 3: 1 2 3
-// Row 4: - 0 -
-const GRID = [
-  [7, 8, 9],
-  [4, 5, 6],
-  [1, 2, 3],
-  [null, 0, null],
-];
-
-/**
- * Calculate which number is at a given touch point.
- * Returns null if touch is in gap or outside valid cells.
- */
-export function getNumAtPoint(
-  clientX: number,
-  clientY: number,
-  padRect: DOMRect
-): number | null {
-  const relX = clientX - padRect.left - PADDING;
-  const relY = clientY - padRect.top - PADDING - 24; // -24 for indicator
-
-  if (relX < 0 || relY < 0) return null;
-
-  // Calculate column (0-2)
-  const colWithGap = relX / (CELL_WIDTH + GAP);
-  const col = Math.floor(colWithGap);
-  const colFraction = colWithGap - col;
-
-  // Check if we're in the gap
-  if (col >= 3) return null;
-  if (colFraction > CELL_WIDTH / (CELL_WIDTH + GAP)) return null;
-
-  // Calculate row (0-3)
-  const rowWithGap = relY / (CELL_HEIGHT + GAP);
-  const row = Math.floor(rowWithGap);
-  const rowFraction = rowWithGap - row;
-
-  // Check if we're in the gap
-  if (row >= 4) return null;
-  if (rowFraction > CELL_HEIGHT / (CELL_HEIGHT + GAP)) return null;
-
-  // Get the number from grid
-  const num = GRID[row]?.[col];
-  return num ?? null;
-}
-
-export function NumPad({
-  onNumber,
-  onClose,
-  modifiers,
-}: NumPadProps): React.ReactElement {
-  const [activeNum, setActiveNum] = useState<number | null>(null);
-  const padRef = useRef<HTMLDivElement>(null);
-
-  // Handle touch start - detect initial number for tap support
-  const handleTouchStart = useCallback((e: React.TouchEvent) => {
-    e.preventDefault();
-    if (!padRef.current) return;
-
-    const touch = e.touches[0];
-    const rect = padRef.current.getBoundingClientRect();
-    const num = getNumAtPoint(touch.clientX, touch.clientY, rect);
-
-    setActiveNum(num);
-    if (num !== null) {
-      triggerHaptic(5);
-    }
-  }, []);
-
-  // Handle touch move - update selection as finger moves
-  const handleTouchMove = useCallback(
-    (e: React.TouchEvent) => {
-      e.preventDefault();
-      if (!padRef.current) return;
-
-      const touch = e.touches[0];
-      const rect = padRef.current.getBoundingClientRect();
-      const num = getNumAtPoint(touch.clientX, touch.clientY, rect);
-
-      if (num !== activeNum) {
-        setActiveNum(num);
-        if (num !== null) {
-          triggerHaptic(5);
-        }
-      }
-    },
-    [activeNum]
-  );
-
-  // Handle touch end - send the number
-  const handleTouchEnd = useCallback(
-    (e: React.TouchEvent) => {
-      e.preventDefault();
-      if (activeNum !== null) {
-        triggerHaptic(8);
-        onNumber(activeNum);
-      }
-      setActiveNum(null);
-      onClose();
-    },
-    [activeNum, onNumber, onClose]
-  );
-
-  // Handle click for mouse users
-  const handleClick = useCallback(
-    (num: number) => {
-      triggerHaptic(8);
-      onNumber(num);
-      onClose();
-    },
-    [onNumber, onClose]
-  );
-
-  // Handle backdrop click to close
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.target === e.currentTarget) {
-        onClose();
-      }
-    },
-    [onClose]
-  );
-
-  // Get modifier indicator text
-  const modifierText = modifiers
-    ? [
-        modifiers.ctrl && 'Ctrl',
-        modifiers.shift && 'Shift',
-        modifiers.alt && 'Alt',
-      ]
-        .filter(Boolean)
-        .join('+')
-    : '';
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      style={{
-        backgroundColor: 'rgba(0, 0, 0, 0.6)',
-        backdropFilter: 'blur(4px)',
-        WebkitBackdropFilter: 'blur(4px)',
-      }}
-      onClick={handleBackdropClick}
-    >
-      {/* NumPad container */}
-      <div
-        ref={padRef}
-        className="bg-[#161b22] rounded-xl shadow-2xl border border-[#30363d]"
-        style={{
-          width: PAD_WIDTH,
-          padding: PADDING,
-        }}
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
-      >
-        {/* Active number indicator */}
-        <div
-          className="text-center text-lg font-mono text-[#e6edf3] mb-2"
-          style={{ height: 24 }}
-        >
-          {activeNum !== null ? (
-            <span>
-              {modifierText && (
-                <span className="text-[#22c55e]">{modifierText}+</span>
-              )}
-              {activeNum}
-            </span>
-          ) : (
-            <span className="text-[#6e7681]">
-              {modifierText ? `${modifierText}+` : 'Tap a number'}
-            </span>
-          )}
-        </div>
-
-        {/* Number grid */}
-        <div
-          className="grid"
-          style={{
-            gridTemplateColumns: `repeat(3, ${CELL_WIDTH}px)`,
-            gap: GAP,
-          }}
-        >
-          {GRID.flat().map((num, idx) => (
-            <NumKey
-              key={idx}
-              num={num}
-              active={activeNum === num}
-              onClick={num !== null ? () => handleClick(num) : undefined}
-            />
-          ))}
-        </div>
-      </div>
-
-      {/* Instructions */}
-      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-[#6e7681] text-sm">
-        Tap number • Tap outside to close
-      </div>
-    </div>
-  );
-}
-
-// Number key component
-interface NumKeyProps {
-  num: number | null;
-  active: boolean;
-  onClick?: () => void;
-}
-
-function NumKey({ num, active, onClick }: NumKeyProps): React.ReactElement {
-  if (num === null) {
-    // Empty cell
-    return <div style={{ width: CELL_WIDTH, height: CELL_HEIGHT }} />;
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`
-        rounded-lg font-mono text-xl font-medium
-        transition-all duration-75 active:scale-95
-        ${
-          active
-            ? 'bg-[#22c55e] text-[#0d1117] shadow-glow'
-            : 'bg-[#21262d] text-[#e6edf3] hover:bg-[#30363d]'
-        }
-      `}
-      style={{
-        width: CELL_WIDTH,
-        height: CELL_HEIGHT,
-        touchAction: 'none',
-        WebkitTouchCallout: 'none',
-        WebkitUserSelect: 'none',
-        userSelect: 'none',
-        WebkitTapHighlightColor: 'transparent',
-      }}
-    >
-      {num}
-    </button>
-  );
-}

package/src/components/ProjectList.tsx

@@ -1,175 +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 | Promise<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: () => Promise<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(async () => {
-    await 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`;
-}