@anymux/ui-kit 0.1.0

package/src/git/CommitGraph.tsx

@@ -0,0 +1,239 @@
+import React from 'react';
+import type { GitCommit } from '@anymux/file-system';
+
+// ---- Graph Layout Types ----
+
+export interface GraphNode {
+  sha: string;
+  column: number;
+  /** Paths to draw FROM this node downward to parents */
+  connections: GraphConnection[];
+}
+
+export interface GraphConnection {
+  /** Column of the parent commit */
+  toColumn: number;
+  /** Row index of the parent commit (-1 if parent is off-screen) */
+  toRow: number;
+  /** Color index for the connection line */
+  colorIndex: number;
+}
+
+// ---- Lane Colors ----
+
+const LANE_COLORS = [
+  '#3b82f6', // blue-500
+  '#10b981', // emerald-500
+  '#f59e0b', // amber-500
+  '#ef4444', // red-500
+  '#8b5cf6', // violet-500
+  '#06b6d4', // cyan-500
+  '#ec4899', // pink-500
+  '#14b8a6', // teal-500
+  '#f97316', // orange-500
+  '#6366f1', // indigo-500
+];
+
+function laneColor(index: number): string {
+  return LANE_COLORS[index % LANE_COLORS.length]!;
+}
+
+// ---- Graph Layout Algorithm ----
+
+export function computeGraphLayout(commits: GitCommit[]): GraphNode[] {
+  const shaToRow = new Map<string, number>();
+  commits.forEach((c, i) => shaToRow.set(c.sha, i));
+
+  // Lanes: array of active SHAs that occupy each column
+  // When a commit is encountered, it takes over the lane reserved for it.
+  // When a commit has parents, lanes are allocated for them.
+  const lanes: (string | null)[] = [];
+  const nodes: GraphNode[] = [];
+
+  function findLane(sha: string): number {
+    const idx = lanes.indexOf(sha);
+    return idx >= 0 ? idx : -1;
+  }
+
+  function allocateLane(sha: string): number {
+    // Reuse empty lane if available
+    for (let i = 0; i < lanes.length; i++) {
+      if (lanes[i] === null) {
+        lanes[i] = sha;
+        return i;
+      }
+    }
+    lanes.push(sha);
+    return lanes.length - 1;
+  }
+
+  for (let row = 0; row < commits.length; row++) {
+    const commit = commits[row]!;
+    let column = findLane(commit.sha);
+
+    if (column === -1) {
+      // First commit or branch start — allocate new lane
+      column = allocateLane(commit.sha);
+    }
+
+    // Free this lane (will be reassigned to first parent)
+    lanes[column] = null;
+
+    const connections: GraphConnection[] = [];
+    const parents = commit.parents;
+
+    for (let pi = 0; pi < parents.length; pi++) {
+      const parentSha = parents[pi]!;
+      const parentRow = shaToRow.get(parentSha) ?? -1;
+      let parentLane = findLane(parentSha);
+
+      if (parentLane === -1) {
+        if (pi === 0) {
+          // First parent: reuse this commit's column for continuity
+          lanes[column] = parentSha;
+          parentLane = column;
+        } else {
+          // Merge parent: allocate a new lane
+          parentLane = allocateLane(parentSha);
+        }
+      }
+
+      connections.push({
+        toColumn: parentLane,
+        toRow: parentRow,
+        colorIndex: parentLane,
+      });
+    }
+
+    nodes.push({ sha: commit.sha, column, connections });
+  }
+
+  return nodes;
+}
+
+// ---- Graph Renderer ----
+
+const ROW_HEIGHT = 40; // Must match commit row height
+const COL_WIDTH = 14;
+const NODE_RADIUS = 4;
+const LEFT_PAD = 8;
+
+export interface CommitGraphProps {
+  nodes: GraphNode[];
+  totalRows: number;
+  /** SHA of the HEAD commit — its lane will be visually highlighted */
+  headSha?: string;
+  className?: string;
+}
+
+export const CommitGraph: React.FC<CommitGraphProps> = ({ nodes, totalRows, headSha, className }) => {
+  if (nodes.length === 0) return null;
+
+  // Find the column of the HEAD commit for lane highlighting
+  const headNode = headSha ? nodes.find((n) => n.sha === headSha) : undefined;
+  const headColumn = headNode?.column;
+
+  const maxColumn = Math.max(...nodes.map((n) => {
+    const connMax = n.connections.length > 0
+      ? Math.max(...n.connections.map((c) => c.toColumn))
+      : 0;
+    return Math.max(n.column, connMax);
+  }));
+
+  const width = LEFT_PAD + (maxColumn + 1) * COL_WIDTH + NODE_RADIUS + 2;
+
+  function x(col: number): number {
+    return LEFT_PAD + col * COL_WIDTH + COL_WIDTH / 2;
+  }
+
+  function y(row: number): number {
+    return row * ROW_HEIGHT + ROW_HEIGHT / 2;
+  }
+
+  return (
+    <svg
+      className={className}
+      width={width}
+      height={totalRows * ROW_HEIGHT}
+      style={{ position: 'absolute', left: 0, top: 0, pointerEvents: 'none' }}
+    >
+      {/* Draw connections (lines) first so they're behind nodes */}
+      {nodes.map((node, row) =>
+        node.connections.map((conn, ci) => {
+          const x1 = x(node.column);
+          const y1 = y(row);
+          const x2 = x(conn.toColumn);
+          // If parent is off-screen, draw to bottom
+          const y2 = conn.toRow >= 0 ? y(conn.toRow) : totalRows * ROW_HEIGHT;
+          const color = laneColor(conn.colorIndex);
+          const isHeadLane = headColumn !== undefined && node.column === headColumn && conn.toColumn === headColumn;
+          const sw = isHeadLane ? 2.5 : 2;
+
+          if (x1 === x2) {
+            // Straight vertical line
+            return (
+              <line
+                key={`${node.sha}-${ci}`}
+                x1={x1}
+                y1={y1}
+                x2={x2}
+                y2={y2}
+                stroke={color}
+                strokeWidth={sw}
+                strokeLinecap="round"
+                opacity={headColumn !== undefined && !isHeadLane ? 0.5 : 1}
+              />
+            );
+          }
+
+          // Curved path for branch/merge
+          const midY = y1 + ROW_HEIGHT * 0.6;
+          return (
+            <path
+              key={`${node.sha}-${ci}`}
+              d={`M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`}
+              stroke={color}
+              strokeWidth={sw}
+              fill="none"
+              strokeLinecap="round"
+              opacity={headColumn !== undefined && !isHeadLane ? 0.5 : 1}
+            />
+          );
+        })
+      )}
+
+      {/* Draw active lane lines (continuation between nodes) */}
+
+      {/* Draw commit nodes on top */}
+      {nodes.map((node, row) => {
+        const isHead = node.sha === headSha;
+        const isOnHeadLane = headColumn !== undefined && node.column === headColumn;
+        const dimmed = headColumn !== undefined && !isOnHeadLane;
+        return (
+          <circle
+            key={node.sha}
+            cx={x(node.column)}
+            cy={y(row)}
+            r={isHead ? NODE_RADIUS + 1.5 : NODE_RADIUS}
+            fill={laneColor(node.column)}
+            stroke={isHead ? laneColor(node.column) : 'white'}
+            strokeWidth={isHead ? 2.5 : 1.5}
+            opacity={dimmed ? 0.5 : 1}
+          />
+        );
+      })}
+    </svg>
+  );
+};
+
+/** Compute the width the graph will take, for adding left padding to commit rows */
+export function graphWidth(nodes: GraphNode[]): number {
+  if (nodes.length === 0) return 0;
+  const maxColumn = Math.max(...nodes.map((n) => {
+    const connMax = n.connections.length > 0
+      ? Math.max(...n.connections.map((c) => c.toColumn))
+      : 0;
+    return Math.max(n.column, connMax);
+  }));
+  return LEFT_PAD + (maxColumn + 1) * COL_WIDTH + NODE_RADIUS + 2;
+}

package/src/git/CommitList.tsx

@@ -0,0 +1,258 @@
+import React, { useState, useMemo } from 'react';
+import {
+  GitCommit as GitCommitIcon,
+  ChevronDown,
+  ChevronRight,
+  User,
+  Clock,
+  Hash,
+  FileText,
+} from 'lucide-react';
+import type { GitCommit } from '@anymux/file-system';
+import { CommitGraph, computeGraphLayout, graphWidth } from './CommitGraph';
+
+// ---- Helpers ----
+
+function formatRelativeTime(date: Date): string {
+  const now = Date.now();
+  const diffMs = now - new Date(date).getTime();
+  const seconds = Math.floor(diffMs / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const weeks = Math.floor(days / 7);
+  const months = Math.floor(days / 30);
+
+  if (seconds < 60) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+  if (weeks < 5) return `${weeks}w ago`;
+  if (months < 12) return `${months}mo ago`;
+  return new Date(date).toLocaleDateString();
+}
+
+function shortSha(sha: string): string {
+  return sha.slice(0, 7);
+}
+
+function firstLine(message: string): string {
+  return message.split('\n')[0] ?? message;
+}
+
+function authorInitials(name: string): string {
+  const parts = name.split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase();
+}
+
+/** Deterministic color from a string (for avatar backgrounds). */
+function authorColor(name: string): string {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const colors = [
+    'bg-blue-500',
+    'bg-emerald-500',
+    'bg-violet-500',
+    'bg-amber-500',
+    'bg-rose-500',
+    'bg-cyan-500',
+    'bg-pink-500',
+    'bg-teal-500',
+  ];
+  return colors[Math.abs(hash) % colors.length]!;
+}
+
+// ---- Types ----
+
+export interface CommitListProps {
+  commits: GitCommit[];
+  headSha?: string;
+  /** Number of changed files per commit (keyed by sha). Optional enrichment. */
+  changedFileCounts?: Record<string, number>;
+  onSelectCommit?: (commit: GitCommit) => void;
+  selectedSha?: string;
+  /** Show commit graph (branch lanes) alongside the list */
+  showGraph?: boolean;
+  className?: string;
+}
+
+// ---- Commit Row ----
+
+interface CommitRowProps {
+  commit: GitCommit;
+  isHead: boolean;
+  changedFileCount?: number;
+  isSelected: boolean;
+  onSelect: () => void;
+}
+
+function CommitRow({ commit, isHead, changedFileCount, isSelected, onSelect }: CommitRowProps) {
+  const [expanded, setExpanded] = useState(false);
+  const message = firstLine(commit.message);
+  const hasFullBody = commit.message.includes('\n');
+
+  return (
+    <div
+      className={`group border-b border-gray-100 dark:border-gray-800 transition-colors ${
+        isSelected
+          ? 'bg-blue-50 dark:bg-blue-900/20'
+          : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
+      }`}
+    >
+      {/* Main row */}
+      <button
+        onClick={onSelect}
+        className="flex items-center gap-2.5 w-full px-3 py-2 text-left"
+      >
+        {/* Expand toggle */}
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setExpanded(!expanded);
+          }}
+          className="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0"
+        >
+          {expanded ? (
+            <ChevronDown className="h-3 w-3" />
+          ) : (
+            <ChevronRight className="h-3 w-3" />
+          )}
+        </button>
+
+        {/* Author avatar */}
+        <div
+          className={`w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-bold text-white flex-shrink-0 ${authorColor(commit.author.name)}`}
+        >
+          {authorInitials(commit.author.name)}
+        </div>
+
+        {/* Message + metadata */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-medium truncate">
+              {message}
+            </span>
+            {isHead && (
+              <span className="px-1.5 py-0.5 text-[9px] font-bold bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300 rounded flex-shrink-0">
+                HEAD
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2 mt-0.5">
+            <span className="text-[10px] text-gray-500 dark:text-gray-400">
+              {commit.author.name}
+            </span>
+            <span className="text-[10px] text-gray-400 dark:text-gray-500">
+              {formatRelativeTime(commit.author.date)}
+            </span>
+          </div>
+        </div>
+
+        {/* SHA badge */}
+        <code className="text-[10px] font-mono text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded flex-shrink-0">
+          {shortSha(commit.sha)}
+        </code>
+      </button>
+
+      {/* Expanded detail */}
+      {expanded && (
+        <div className="px-3 pb-3 pl-[52px] space-y-2">
+          {/* Full commit message */}
+          {hasFullBody && (
+            <div className="text-xs text-gray-600 dark:text-gray-300 whitespace-pre-wrap bg-gray-50 dark:bg-gray-800/50 rounded p-2 border border-gray-100 dark:border-gray-700">
+              {commit.message}
+            </div>
+          )}
+
+          <div className="flex flex-wrap gap-x-4 gap-y-1 text-[10px] text-gray-500 dark:text-gray-400">
+            <div className="flex items-center gap-1">
+              <User className="h-3 w-3" />
+              <span>{commit.author.name}</span>
+              <span className="text-gray-400 dark:text-gray-500">&lt;{commit.author.email}&gt;</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              <span>{new Date(commit.author.date).toLocaleString()}</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <Hash className="h-3 w-3" />
+              <code className="font-mono">{commit.sha}</code>
+            </div>
+            {commit.parents.length > 0 && (
+              <div className="flex items-center gap-1">
+                <GitCommitIcon className="h-3 w-3" />
+                <span>
+                  {commit.parents.length === 1 ? 'Parent' : 'Parents'}:{' '}
+                  {commit.parents.map((p) => shortSha(p)).join(', ')}
+                </span>
+              </div>
+            )}
+            {changedFileCount !== undefined && (
+              <div className="flex items-center gap-1">
+                <FileText className="h-3 w-3" />
+                <span>{changedFileCount} file{changedFileCount !== 1 ? 's' : ''} changed</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---- CommitList Component ----
+
+export const CommitList: React.FC<CommitListProps> = ({
+  commits,
+  headSha,
+  changedFileCounts,
+  onSelectCommit,
+  selectedSha,
+  showGraph = true,
+  className,
+}) => {
+  const graphNodes = useMemo(
+    () => (showGraph ? computeGraphLayout(commits) : []),
+    [commits, showGraph],
+  );
+  const gWidth = showGraph ? graphWidth(graphNodes) : 0;
+
+  if (commits.length === 0) {
+    return (
+      <div className={`flex items-center justify-center py-8 text-xs text-gray-400 ${className ?? ''}`}>
+        No commits found
+      </div>
+    );
+  }
+
+  return (
+    <div className={`overflow-auto ${className ?? ''}`}>
+      <div className="relative" style={{ minWidth: gWidth + 200 }}>
+        {showGraph && graphNodes.length > 0 && (
+          <CommitGraph
+            nodes={graphNodes}
+            totalRows={commits.length}
+            headSha={headSha}
+          />
+        )}
+        <div style={{ paddingLeft: gWidth }}>
+          {commits.map((commit) => (
+            <CommitRow
+              key={commit.sha}
+              commit={commit}
+              isHead={commit.sha === headSha}
+              changedFileCount={changedFileCounts?.[commit.sha]}
+              isSelected={commit.sha === selectedSha}
+              onSelect={() => onSelectCommit?.(commit)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};