ompchamber 0.3.0

package/src/client/components/workspace/git-panel/commit-modal/CommitDiffViewer.tsx

@@ -0,0 +1,205 @@
+import { useMemo, useState } from 'preact/hooks';
+import { ChevronDown, ChevronUp } from 'lucide-preact';
+import { getLanguageFromPath, highlightLines } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+
+interface DiffLineItem {
+  type: 'add' | 'del' | 'context' | 'meta';
+  text: string;
+  oldNum?: number;
+  newNum?: number;
+}
+
+interface CommitDiffViewerProps {
+  diffText?: string;
+  isLoading?: boolean;
+  filePath?: string;
+}
+
+export function CommitDiffViewer({ diffText, isLoading, filePath }: CommitDiffViewerProps) {
+  const [expandedAll, setExpandedAll] = useState(false);
+  const syntaxReady = useSyntaxReady();
+
+  const lines = useMemo(() => {
+    if (!diffText) return [];
+    const parsed: DiffLineItem[] = [];
+    let oldCounter = 1;
+    let newCounter = 1;
+
+    const rawLines = diffText.split(/\r?\n/);
+    let hasHunk = rawLines.some((l) => l.startsWith('@@'));
+
+    // If no hunk header is found, but lines exist, wrap into a synthesized initial hunk
+    const linesToProcess = hasHunk
+      ? rawLines
+      : [`@@ -0,0 +1,${rawLines.length} @@`, ...rawLines.map((l) => (l.startsWith('+') || l.startsWith('-') ? l : `+${l}`))];
+
+    for (const line of linesToProcess) {
+      if (
+        line.startsWith('diff --git') ||
+        line.startsWith('index ') ||
+        line.startsWith('---') ||
+        line.startsWith('+++') ||
+        line.startsWith('new file mode') ||
+        line.startsWith('deleted file mode') ||
+        line.startsWith('similarity index') ||
+        line.startsWith('old mode') ||
+        line.startsWith('new mode') ||
+        line.startsWith('\\ No newline')
+      ) {
+        continue;
+      }
+      if (line.startsWith('@@')) {
+        // Parse hunk header @@ -oldStart,oldLen +newStart,newLen @@
+        const match = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+        if (match) {
+          oldCounter = parseInt(match[1], 10);
+          newCounter = parseInt(match[2], 10);
+        }
+        parsed.push({ type: 'meta', text: line });
+      } else if (line.startsWith('+')) {
+        parsed.push({ type: 'add', text: line.slice(1), newNum: newCounter++ });
+      } else if (line.startsWith('-')) {
+        parsed.push({ type: 'del', text: line.slice(1), oldNum: oldCounter++ });
+      } else {
+        const text = line.startsWith(' ') ? line.slice(1) : line;
+        parsed.push({ type: 'context', text, oldNum: oldCounter++, newNum: newCounter++ });
+      }
+    }
+    return parsed;
+  }, [diffText]);
+
+  const language = getLanguageFromPath(filePath);
+  const htmlByIndex = useMemo(() => {
+    const out = new Array<string>(lines.length).fill('');
+    let start = -1;
+    const flush = (end: number) => {
+      if (start < 0) return;
+      const html = highlightLines(lines.slice(start, end).map((l) => l.text).join('\n'), language);
+      for (let i = start; i < end; i++) out[i] = html[i - start] ?? '';
+      start = -1;
+    };
+    lines.forEach((line, idx) => {
+      if (line.type === 'meta') flush(idx);
+      else if (start < 0) start = idx;
+    });
+    flush(lines.length);
+    return out;
+  }, [lines, language, syntaxReady]);
+
+  if (isLoading) {
+    return (
+      <div className="my-2 p-4 rounded bg-canvas border border-ink/10 text-ink/40 font-mono text-xs flex items-center justify-center">
+        Loading commit diff...
+      </div>
+    );
+  }
+
+  if (!diffText || lines.length === 0) {
+    return (
+      <div className="my-2 p-3 rounded bg-canvas border border-ink/10 text-ink/40 font-mono text-xs text-center">
+        No diff content available for this file.
+      </div>
+    );
+  }
+
+  // Segment lines into blocks of context / changes
+  return (
+    <div className="my-2 rounded border border-ink/15 bg-paper overflow-hidden text-[11px] font-mono leading-relaxed shadow-xs text-ink">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-canvas border-b border-ink/10 text-ink/70 text-[10.5px]">
+        <span className="font-semibold text-meta">Diff preview</span>
+        <button
+          type="button"
+          onClick={() => setExpandedAll(!expandedAll)}
+          className="hover:text-ink flex items-center gap-1 cursor-pointer transition-colors"
+        >
+          {expandedAll ? (
+            <>
+              <ChevronUp size={12} /> Collapse context
+            </>
+          ) : (
+            <>
+              <ChevronDown size={12} /> Expand all context
+            </>
+          )}
+        </button>
+      </div>
+
+      <div className="overflow-x-auto max-h-72 select-text">
+        <div className="w-max min-w-full divide-y divide-ink/[0.04]">
+          {lines.map((line, idx) => {
+            if (line.type === 'meta') {
+              return (
+                <div
+                  key={idx}
+                  className="flex items-center gap-2 px-3 py-1 bg-canvas border-y border-ink/10 text-meta text-[10px] font-semibold"
+                >
+                  <span>↕</span>
+                  <span>{line.text}</span>
+                </div>
+              );
+            }
+
+            const isAdd = line.type === 'add';
+            const isDel = line.type === 'del';
+
+            return (
+              <div
+                key={idx}
+                className={`flex items-start font-mono ${
+                  isAdd
+                    ? 'bg-success/10 hover:bg-success/15'
+                    : isDel
+                    ? 'bg-error/10 hover:bg-error/15'
+                    : 'text-ink hover:bg-ink/[0.02]'
+                }`}
+              >
+                {/* Line numbers column */}
+                <div
+                  className={`w-10 flex-shrink-0 text-right pr-2 py-0.5 select-none border-r border-ink/10 text-[10px] tabular-nums font-mono ${
+                    isDel
+                      ? 'bg-error/15 text-error font-semibold'
+                      : isAdd
+                      ? 'bg-success/15 text-success/70'
+                      : 'bg-canvas/50 text-ink/40'
+                  }`}
+                >
+                  {line.oldNum ?? (isAdd ? '+' : '')}
+                </div>
+                <div
+                  className={`w-10 flex-shrink-0 text-right pr-2 py-0.5 select-none border-r border-ink/10 text-[10px] tabular-nums font-mono ${
+                    isAdd
+                      ? 'bg-success/15 text-success font-semibold'
+                      : isDel
+                      ? 'bg-error/15 text-error/70'
+                      : 'bg-canvas/50 text-ink/40'
+                  }`}
+                >
+                  {line.newNum ?? (isDel ? '-' : '')}
+                </div>
+
+                {/* Diff marker */}
+                <div
+                  className={`w-4 flex-shrink-0 text-center py-0.5 select-none font-bold ${
+                    isAdd ? 'text-success' : isDel ? 'text-error' : 'opacity-0'
+                  }`}
+                >
+                  {isAdd ? '+' : isDel ? '-' : ' '}
+                </div>
+
+                {/* Code text */}
+                <div className="flex-1 py-0.5 pr-3 whitespace-pre text-ink">
+                  {line.text ? (
+                    <span className="shiki" dangerouslySetInnerHTML={{ __html: htmlByIndex[idx] }} />
+                  ) : (
+                    ' '
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/git-panel/commit-modal/CommitRow.tsx

@@ -0,0 +1,179 @@
+import type { TargetedMouseEvent } from 'preact';
+import { useState } from 'preact/hooks';
+import { Check, ChevronDown, ChevronRight, Copy } from 'lucide-preact';
+import type { GitCommit, GitCommitFile } from '@/shared/types/git';
+import { CommitActions } from '@/client/components/workspace/git-panel/commit-modal/CommitActions';
+import { CommitDiffViewer } from '@/client/components/workspace/git-panel/commit-modal/CommitDiffViewer';
+
+interface CommitRowProps {
+  commit: GitCommit;
+  isSelected: boolean;
+  isGraphMode: boolean;
+  onSelect: (commit: GitCommit) => void;
+  onAction: (action: string, commit: GitCommit, extra?: any) => void;
+  onToggleFile: (commitHash: string, file: GitCommitFile) => void;
+  isExpandedFile: (commitHash: string, filePath: string) => boolean;
+  isLoadingFile: (commitHash: string, filePath: string) => boolean;
+  fileDiffs: Record<string, string>;
+  headerRef?: (el: HTMLDivElement | null) => void;
+}
+
+export function CommitRow({
+  commit,
+  isSelected,
+  isGraphMode,
+  onSelect,
+  onAction,
+  onToggleFile,
+  isExpandedFile,
+  isLoadingFile,
+  fileDiffs,
+  headerRef,
+}: CommitRowProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyHash = (e: globalThis.MouseEvent) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(commit.hash);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleToggleFile = (e: TargetedMouseEvent<HTMLElement>, file: GitCommitFile) => {
+    e.stopPropagation();
+    onToggleFile(commit.hash, file);
+  };
+
+  return (
+    <div
+      onClick={() => onSelect(commit)}
+      className={`border-b border-ink/5 transition-colors cursor-pointer ${
+        isSelected ? 'bg-ink/[0.03]' : 'hover:bg-ink/[0.015]'
+      }`}
+    >
+      <div className="py-2.5 pr-4 pl-1 flex flex-col">
+        {/* Commit Header Line */}
+        <div className="flex flex-col gap-1">
+          {/* Ref tags / Branch badges */}
+          {commit.refs && commit.refs.length > 0 && (
+            <div className="flex flex-wrap items-center gap-1.5 pb-0.5">
+              {commit.refs.map((refTag, idx) => {
+                const isStash = refTag.includes('stash');
+                const isHead = refTag.includes('HEAD') || refTag.includes('main') || refTag.includes('master');
+                return (
+                  <span
+                    key={idx}
+                    className={`px-2 py-0.5 rounded text-[10px] font-mono border ${
+                      isStash
+                        ? 'bg-warning/10 text-warning border-warning/25 font-semibold'
+                        : isHead
+                        ? 'bg-ink/10 text-ink font-semibold border-ink/20'
+                        : 'bg-canvas text-meta border-ink/10 font-medium'
+                    }`}
+                  >
+                    {refTag}
+                  </span>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Subject message (Node dot anchor) */}
+          <div
+            ref={headerRef}
+            className="text-[13px] font-semibold text-ink leading-snug break-words"
+          >
+            {commit.message}
+          </div>
+
+          {/* Metadata line: Author • Date • Hash with copy button */}
+          <div className="flex items-center gap-2 text-[11px] text-ink/50 font-mono flex-wrap">
+            <span>{commit.author}</span>
+            <span>•</span>
+            <span>{commit.date}</span>
+            <span>•</span>
+            <button
+              type="button"
+              onClick={handleCopyHash}
+              title="Copy commit hash"
+              className="inline-flex items-center gap-1 hover:text-ink transition-colors cursor-pointer text-ink/70"
+            >
+              <span>{commit.shortHash}</span>
+              {copied ? <Check size={11} className="text-success" /> : <Copy size={11} />}
+            </button>
+          </div>
+        </div>
+
+        {/* Action buttons (always visible when selected, or in graph mode when selected) */}
+        {(isSelected || isGraphMode) && (
+          <div className="mt-2">
+            <CommitActions commit={commit} onAction={onAction} />
+          </div>
+        )}
+
+          {/* Changed Files List */}
+        {commit.files && commit.files.length > 0 && (
+          <div className="mt-2 flex flex-col gap-1">
+            {commit.files.map((file, fileIdx) => {
+              const isExpanded = isExpandedFile(commit.hash, file.file);
+              const diffKey = `${commit.hash}:${file.file}`;
+              const activeDiff = fileDiffs[diffKey] !== undefined ? fileDiffs[diffKey] : file.diff;
+              const isLoading = isLoadingFile(commit.hash, file.file);
+
+              const statusColor =
+                file.status === 'A'
+                  ? 'text-success font-bold'
+                  : file.status === 'D'
+                  ? 'text-error font-bold'
+                  : file.status === 'R'
+                  ? 'text-meta font-bold'
+                  : 'text-info font-bold';
+
+              return (
+                <div key={fileIdx} className="flex flex-col">
+                  <div
+                    onClick={(e) => handleToggleFile(e, file)}
+                    className="flex items-center gap-2 py-1 px-2 rounded hover:bg-ink/5 text-[11.5px] font-mono text-ink/80 transition-colors group cursor-pointer border border-transparent hover:border-ink/10"
+                  >
+                    {/* Status badge: M / A / D */}
+                    <span className={`w-3.5 text-center flex-shrink-0 text-[11px] ${statusColor}`}>
+                      {file.status || 'M'}
+                    </span>
+
+                    {/* File Path */}
+                    <span className="truncate flex-1 min-w-0 text-ink/90 group-hover:text-ink font-medium">
+                      {file.file}
+                    </span>
+
+                    {/* Stats: +3 / -2 */}
+                    <span className="flex items-center gap-1 text-[10.5px] tabular-nums flex-shrink-0 font-medium">
+                      <span className="text-success">+{file.additions}</span>
+                      <span className="text-ink/30">/</span>
+                      <span className="text-error">-{file.deletions}</span>
+                    </span>
+
+                    {/* Expand icon */}
+                    <span className="text-ink/40 group-hover:text-ink flex-shrink-0">
+                      {isExpanded ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
+                    </span>
+                  </div>
+
+                  {/* Inline Diff Viewer when expanded */}
+                  {isExpanded && (
+                    <div className="pl-4 pr-1">
+                      <CommitDiffViewer
+                        diffText={activeDiff}
+                        isLoading={isLoading}
+                        filePath={file.file}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/git-panel/commit-modal/GraphCanvas.tsx

@@ -0,0 +1,164 @@
+import { useMemo } from 'preact/hooks';
+import type { GitCommit } from '@/shared/types/git';
+import { LANE_COLORS, buildBezierPath, computeCommitLanes, computeGraphLinks } from '@/shared/lib/fs/git-graph';
+
+interface GraphCanvasProps {
+  commits: GitCommit[];
+  nodePositions: Record<string, number>;
+  selectedHash?: string;
+  hoveredHash?: string;
+  isGraphMode: boolean;
+  laneWidth?: number;
+  paddingLeft?: number;
+  totalHeight: number;
+}
+
+export function GraphCanvas({
+  commits,
+  nodePositions,
+  selectedHash,
+  hoveredHash,
+  isGraphMode,
+  laneWidth = 18,
+  paddingLeft = 16,
+  totalHeight,
+}: GraphCanvasProps) {
+  const laneMap = useMemo(() => {
+    if (!isGraphMode) {
+      // In history mode, all commits are in a single lane
+      const m = new Map<string, number>();
+      commits.forEach((c) => m.set(c.hash, 0));
+      return m;
+    }
+    return computeCommitLanes(commits);
+  }, [commits, isGraphMode]);
+
+  const maxLane = useMemo(() => {
+    let max = 0;
+    laneMap.forEach((lane) => {
+      if (lane > max) max = lane;
+    });
+    return max;
+  }, [laneMap]);
+
+  const canvasWidth = isGraphMode ? (maxLane + 1) * laneWidth + paddingLeft * 2 : 36;
+
+  const links = useMemo(() => {
+    if (!isGraphMode) {
+      // In history mode, a single continuous vertical line connects all commits sequentially!
+      const histLinks = [];
+      for (let i = 0; i < commits.length - 1; i++) {
+        const fromY = nodePositions[commits[i].hash] ?? (i * 60 + 20);
+        const toY = nodePositions[commits[i + 1].hash] ?? ((i + 1) * 60 + 20);
+        histLinks.push({
+          fromHash: commits[i].hash,
+          toHash: commits[i + 1].hash,
+          fromLane: 0,
+          toLane: 0,
+          fromY,
+          toY,
+          color: 'var(--theme-ink)',
+        });
+      }
+      return histLinks;
+    }
+
+    return computeGraphLinks(
+      commits,
+      laneMap,
+      nodePositions,
+      totalHeight
+    );
+  }, [commits, laneMap, nodePositions, totalHeight, isGraphMode]);
+
+  return (
+    <div
+      className="absolute top-0 left-0 pointer-events-none z-10"
+      style={{ width: canvasWidth, height: totalHeight }}
+    >
+      <svg
+        className="w-full h-full overflow-visible"
+        style={{ width: canvasWidth, height: totalHeight }}
+      >
+        <defs>
+          <filter id="node-glow" x="-20%" y="-20%" width="140%" height="140%">
+            <feDropShadow dx="0" dy="0" stdDeviation="2" floodOpacity="0.35" />
+          </filter>
+        </defs>
+
+        {/* 1. Continuous Connecting Lines */}
+        {links.map((link) => {
+          const x1 = isGraphMode ? paddingLeft + link.fromLane * laneWidth : 16;
+          const x2 = isGraphMode ? paddingLeft + link.toLane * laneWidth : 16;
+          const stroke = isGraphMode ? link.color : 'currentColor';
+          const strokeOpacity = isGraphMode ? 0.95 : 0.25;
+
+          const pathD = buildBezierPath(x1, link.fromY, x2, link.toY);
+
+          return (
+            <path
+              key={`${link.fromHash}->${link.toHash}`}
+              d={pathD}
+              fill="none"
+              stroke={stroke}
+              strokeWidth={isGraphMode ? 2.25 : 1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeOpacity={strokeOpacity}
+            />
+          );
+        })}
+
+        {/* 2. Commit Node Circles */}
+        {commits.map((commit) => {
+          const lane = laneMap.get(commit.hash) ?? 0;
+          const cx = isGraphMode ? paddingLeft + lane * laneWidth : 16;
+          const cy = nodePositions[commit.hash] ?? 20;
+          const isSelected = selectedHash === commit.hash || selectedHash === commit.shortHash;
+          const isHovered = hoveredHash === commit.hash || hoveredHash === commit.shortHash;
+          const laneColor = isGraphMode
+            ? LANE_COLORS[lane % LANE_COLORS.length]
+            : 'var(--theme-success)'; // Theme success variable in History mode
+
+          return (
+            <g key={`node-${commit.hash}`}>
+              {/* Outer halo when active or hovered */}
+              {(isSelected || isHovered) && (
+                <circle
+                  cx={cx}
+                  cy={cy}
+                  r={8}
+                  fill={laneColor}
+                  fillOpacity={isSelected ? 0.35 : 0.2}
+                  stroke={laneColor}
+                  strokeWidth={1}
+                />
+              )}
+
+              {/* Solid commit node */}
+              <circle
+                cx={cx}
+                cy={cy}
+                r={isGraphMode ? 4 : 4.5}
+                fill={isGraphMode ? 'var(--theme-paper)' : laneColor}
+                stroke={laneColor}
+                strokeWidth={isGraphMode ? 2.5 : 1.5}
+                filter="url(#node-glow)"
+              />
+
+              {/* Inner dot for Graph Mode */}
+              {isGraphMode && (
+                <circle
+                  cx={cx}
+                  cy={cy}
+                  r={1.8}
+                  fill={laneColor}
+                />
+              )}
+            </g>
+          );
+        })}
+      </svg>
+    </div>
+  );
+}

package/src/client/components/workspace/git-panel/commit-modal/Header.tsx

@@ -0,0 +1,127 @@
+import { GitMerge, History, RotateCw, Search, X } from 'lucide-preact';
+
+interface HeaderProps {
+  isGraphMode: boolean;
+  onToggleMode: (graph: boolean) => void;
+  searchQuery: string;
+  onSearchChange: (q: string) => void;
+  onRefresh: () => void;
+  onClose: () => void;
+  isRefreshing?: boolean;
+  totalCommits: number;
+  totalCount?: number;
+}
+
+export function Header({
+  isGraphMode,
+  onToggleMode,
+  searchQuery,
+  onSearchChange,
+  onRefresh,
+  onClose,
+  isRefreshing,
+  totalCommits,
+  totalCount,
+}: HeaderProps) {
+  return (
+    <div
+      className="flex flex-col gap-2 px-3 lg:px-5 py-3 border-b border-ink/10 bg-paper select-none
+        pl-[max(0.75rem,env(safe-area-inset-left,0px))] pr-[max(0.75rem,env(safe-area-inset-right,0px))]"
+    >
+      <div className="flex items-center justify-between gap-2 lg:gap-4">
+        {/* Title and Subtitle */}
+        <div className="flex flex-col min-w-0">
+          <div className="flex items-center gap-2.5 min-w-0">
+            <h2 className="text-base font-semibold text-ink tracking-tight">
+              {isGraphMode ? 'Graph' : 'History'}
+            </h2>
+            <span className="text-[11px] font-mono px-2 py-0.5 rounded-full bg-ink/5 text-ink/50 border border-ink/10 whitespace-nowrap">
+              {totalCount && totalCount > totalCommits
+                ? `${totalCommits} of ${totalCount}`
+                : `${totalCommits} commits`}
+            </span>
+          </div>
+          <p className="text-xs text-ink/50 mt-0.5 hidden lg:block">
+            Browse recent commits and inspect changed files.
+          </p>
+        </div>
+
+        {/* Action Controls on the Right */}
+        <div className="flex items-center gap-1.5 lg:gap-2 flex-shrink-0">
+          {/* Mode Switcher */}
+          <div className="flex items-center bg-ink/5 p-0.5 rounded-lg border border-ink/10 text-xs">
+            <button
+              type="button"
+              onClick={() => onToggleMode(false)}
+              title="History view"
+              className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md font-medium transition-colors cursor-pointer ${
+                !isGraphMode
+                  ? 'bg-paper text-ink shadow-xs'
+                  : 'text-ink/60 hover:text-ink hover:bg-ink/5'
+              }`}
+            >
+              <History size={13} />
+              <span className="hidden lg:inline">History</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => onToggleMode(true)}
+              title="Graph view"
+              className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md font-medium transition-colors cursor-pointer ${
+                isGraphMode
+                  ? 'bg-paper text-ink shadow-xs'
+                  : 'text-ink/60 hover:text-ink hover:bg-ink/5'
+              }`}
+            >
+              <GitMerge size={13} />
+              <span className="hidden lg:inline">Graph</span>
+            </button>
+          </div>
+
+          {/* Refresh Button */}
+          <button
+            type="button"
+            onClick={onRefresh}
+            disabled={isRefreshing}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border border-ink/15 hover:bg-ink/5 text-ink/70 hover:text-ink transition-colors cursor-pointer text-xs disabled:opacity-40"
+            title="Refresh commit history"
+          >
+            <RotateCw size={13} className={isRefreshing ? 'animate-spin text-ink' : ''} />
+            <span className="hidden lg:inline">refresh</span>
+          </button>
+
+          {/* Close Button */}
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-2 -mr-1 rounded-md hover:bg-ink/5 text-ink/60 hover:text-ink transition-colors cursor-pointer"
+            title="Close modal"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+
+      {/* Search Input Filter */}
+      <div className="relative mt-1">
+        <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-ink/40" />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.currentTarget.value)}
+          placeholder="Filter commits by message, author, or hash..."
+          className="w-full bg-ink/[0.03] border border-ink/15 rounded-md pl-8 pr-3 py-1.5 text-xs text-ink placeholder-ink/40 focus:outline-none focus:border-ink/40 transition-colors font-mono"
+        />
+        {searchQuery && (
+          <button
+            type="button"
+            onClick={() => onSearchChange('')}
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-ink/40 hover:text-ink cursor-pointer"
+          >
+            <X size={12} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}