@kabmo-labs/kabmo 0.0.0-stage → 0.0.1

package/src/client/components/workspace/git-panel/branch-modal/index.tsx

@@ -0,0 +1,229 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { Loader2, RefreshCw, Search } from 'lucide-preact';
+import type { GitBranchDetail } from '@/shared/types/git';
+import { Modal } from '@/client/components/common/Modal';
+import { BranchRow } from '@/client/components/workspace/git-panel/branch-modal/BranchRow';
+import { RenameBranchDialog } from '@/client/components/workspace/git-panel/branch-modal/RenameDialog';
+import { DeleteBranchDialog } from '@/client/components/workspace/git-panel/branch-modal/DeleteDialog';
+
+interface GitBranchModalProps {
+  isOpen: boolean;
+  rootPath?: string;
+  repo: string;
+  /** The checked-out branch, for the header and for disabling self-actions. */
+  currentBranch: string;
+  detached: boolean;
+  /**
+   * A panel action is in flight. The list re-reads when this flips back to
+   * false — the one moment an action dispatched from this dialog can have
+   * landed. Without it the modal kept rendering the branch list it fetched on
+   * open, so a rename looked like it had done nothing until the dialog was
+   * closed and reopened (verified in the browser: the rename was on disk and
+   * the list still showed the old name).
+   */
+  isBusy: boolean;
+  onClose: () => void;
+  /** Runs `checkout` / `merge_branch` / `rename_branch` / `delete_branch`. */
+  onAction: (actionType: string, extra?: Record<string, string>) => void;
+  /** Opens the panel's confirm modal for a delete. */
+  onConfirmDelete: (name: string, force: boolean) => void;
+}
+
+/**
+ * The branch management modal, opened from the branch dropdown.
+ *
+ * The dropdown could not host this: it is 224px wide with a 192px scroll area
+ * and one `<button>` per branch, which stops working at the scale branches
+ * actually reach (measured: `for-each-ref` over 501 branches is 0.03s, but 501
+ * buttons in a 192px panel is not a list). It also cannot carry per-branch
+ * actions — the row's click is already checkout — and a row that both checks
+ * out and merges is a row whose click means two things.
+ *
+ * Follows the commit modal's shell (`lg:w-[min(96vw,980px)] lg:h-[88vh]`,
+ * full-screen on phones), so this is a sibling of an existing surface rather
+ * than a new convention.
+ *
+ * **Everything the row shows comes from ONE read** (`?branches=1`, a single
+ * `for-each-ref` with the upstream/ahead-behind/date/subject fields), fetched
+ * when the modal opens. It is deliberately not on the status payload: that read
+ * is on the realtime topic and republished on every tool call, and this list is
+ * opened by hand.
+ *
+ * **Branch creation is NOT here.** It already exists in the dropdown
+ * (`create_branch`) and in the commit modal (`create_branch_at`), and a third
+ * entry point would be a third place for the same validation to drift.
+ */
+export function GitBranchModal({
+  isOpen,
+  rootPath,
+  repo,
+  currentBranch,
+  detached,
+  isBusy,
+  onClose,
+  onAction,
+  onConfirmDelete,
+}: GitBranchModalProps) {
+  const [branches, setBranches] = useState<GitBranchDetail[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
+  const [renaming, setRenaming] = useState<GitBranchDetail | null>(null);
+  const [deleting, setDeleting] = useState<GitBranchDetail | null>(null);
+  const [forceDelete, setForceDelete] = useState(false);
+
+  const load = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    const params = new URLSearchParams({ branches: '1', repo: repo || '.' });
+    if (rootPath) params.set('root', rootPath);
+    try {
+      const res = await fetch(`/api/fs/git?${params.toString()}`);
+      const body = await res.json() as { success?: boolean; branches?: GitBranchDetail[]; error?: string };
+      if (body.success && Array.isArray(body.branches)) setBranches(body.branches);
+      else setError(body.error || `Failed to read branches (HTTP ${res.status})`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to read branches');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [rootPath, repo]);
+
+  useEffect(() => {
+    if (isOpen) void load();
+  }, [isOpen, load]);
+
+  /**
+   * Re-read after an action this dialog dispatched settles.
+   *
+   * A rename, a delete or a merge changes the list, and the dialog owns no
+   * other signal for it: the panel's `isBusy` dropping back to false is the one
+   * moment an action can have landed. Without this the list kept rendering
+   * what it fetched on open — verified in the browser, the rename was on disk
+   * while the row still showed the old name.
+   *
+   * The first pass is skipped (`wasBusy` starts false) so opening the dialog
+   * does not fire a second read on top of the one above.
+   */
+  const wasBusyRef = useRef(false);
+  useEffect(() => {
+    if (!isOpen) {
+      wasBusyRef.current = false;
+      return;
+    }
+    if (wasBusyRef.current && !isBusy) void load();
+    wasBusyRef.current = isBusy;
+  }, [isOpen, isBusy, load]);
+
+  // A closed modal keeps no stale dialogs: reopening on a different repo would
+  // otherwise offer to rename a branch that is not there.
+  useEffect(() => {
+    if (!isOpen) {
+      setRenaming(null);
+      setDeleting(null);
+      setForceDelete(false);
+      setQuery('');
+    }
+  }, [isOpen]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return branches;
+    return branches.filter((b) => b.name.toLowerCase().includes(q) || b.upstream.toLowerCase().includes(q));
+  }, [branches, query]);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <Modal
+        onClose={onClose}
+        maxWidthClass="max-w-[min(96vw,720px)]"
+        header={
+          <div className="flex items-center gap-2 min-w-0">
+            <h2 className="text-sm font-semibold text-ink">Branches</h2>
+            <span className="text-[10px] font-mono text-ink/50">
+              {detached ? `detached at ${currentBranch}` : `on ${currentBranch}`}
+            </span>
+          </div>
+        }
+      >
+        <div className="px-5 py-3 flex items-center gap-2 border-b border-ink/10">
+          <Search size={12} className="text-ink/40 flex-shrink-0" />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.currentTarget.value)}
+            placeholder="Filter branches…"
+            aria-label="Filter branches"
+            className="flex-1 min-w-0 bg-transparent outline-none text-xs text-ink placeholder-ink/40"
+            autoFocus
+          />
+          <button
+            type="button"
+            onClick={() => void load()}
+            disabled={isLoading}
+            title="Refresh"
+            aria-label="Refresh branches"
+            className="text-ink/40 hover:text-ink transition-colors cursor-pointer disabled:opacity-40 flex-shrink-0"
+          >
+            <RefreshCw size={12} className={isLoading ? 'animate-spin' : ''} />
+          </button>
+        </div>
+
+        <div className="min-h-[40vh] max-h-[60vh] overflow-y-auto scrollbar-overlay-container">
+          {isLoading && branches.length === 0 ? (
+            <div className="flex items-center justify-center gap-2 py-12 text-xs text-ink/50 font-mono">
+              <Loader2 size={14} className="animate-spin text-info" />
+              Loading branches…
+            </div>
+          ) : error ? (
+            <div className="py-12 px-6 text-center text-xs text-error font-mono">{error}</div>
+          ) : filtered.length === 0 ? (
+            <div className="py-12 text-center text-xs text-ink/40 font-mono">
+              {query.trim() ? 'No matching branches.' : 'No branches.'}
+            </div>
+          ) : (
+            filtered.map((b) => (
+              <BranchRow
+                key={b.name}
+                branch={b}
+                detached={detached}
+                onCheckout={() => { onAction('checkout', { branch: b.name }); onClose(); }}
+                onMerge={() => { onAction('merge_branch', { branch: b.name }); onClose(); }}
+                onRename={() => setRenaming(b)}
+                onDelete={() => { setDeleting(b); setForceDelete(false); }}
+              />
+            ))
+          )}
+        </div>
+      </Modal>
+
+      <RenameBranchDialog
+        // The `key` is what remounts the form when a DIFFERENT branch is
+        // renamed, so the field is seeded from that branch at mount instead of
+        // being reset by an effect after paint (which is what discarded a
+        // keystroke typed in the gap).
+        key={renaming?.name ?? 'none'}
+        branch={renaming}
+        onClose={() => setRenaming(null)}
+        onSubmit={(from, to, remote) => {
+          onAction('rename_branch', { branch: from, newName: to, ...(remote ? { remote: '1' } : {}) });
+          setRenaming(null);
+        }}
+      />
+
+      <DeleteBranchDialog
+        branch={deleting}
+        force={forceDelete}
+        onForceChange={setForceDelete}
+        onClose={() => { setDeleting(null); setForceDelete(false); }}
+        onConfirm={(name) => {
+          onConfirmDelete(name, forceDelete);
+          setDeleting(null);
+          setForceDelete(false);
+        }}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,89 @@
+import type { GitCommit } from '@/shared/types/git';
+
+interface CommitActionsProps {
+  commit: GitCommit;
+  onAction: (action: string, commit: GitCommit, extra?: any) => void;
+}
+
+export function CommitActions({ commit, onAction }: CommitActionsProps) {
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 pt-1.5 pb-2">
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onAction('checkout', commit);
+        }}
+        className="px-2.5 py-1 text-[11px] font-mono rounded border border-ink/20 hover:bg-ink/5 text-ink/80 hover:text-ink transition-colors cursor-pointer disabled:opacity-40"
+      >
+        checkout
+      </button>
+
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onAction('create_branch_here', commit);
+        }}
+        className="px-2.5 py-1 text-[11px] font-mono rounded border border-ink/20 hover:bg-ink/5 text-ink/80 hover:text-ink transition-colors cursor-pointer disabled:opacity-40"
+      >
+        create branch here
+      </button>
+
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onAction('cherry_pick', commit);
+        }}
+        className="px-2.5 py-1 text-[11px] font-mono rounded border border-ink/20 hover:bg-ink/5 text-ink/80 hover:text-ink transition-colors cursor-pointer disabled:opacity-40"
+      >
+        cherry-pick
+      </button>
+
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onAction('revert', commit);
+        }}
+        className="px-2.5 py-1 text-[11px] font-mono rounded border border-ink/20 hover:bg-ink/5 text-ink/80 hover:text-ink transition-colors cursor-pointer disabled:opacity-40"
+      >
+        revert
+      </button>
+
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onAction('reset', commit);
+        }}
+        className="px-2.5 py-1 text-[11px] font-mono rounded border border-ink/20 hover:bg-ink/5 text-ink/80 hover:text-ink transition-colors cursor-pointer disabled:opacity-40"
+      >
+        reset...
+      </button>
+
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onAction('merge', commit);
+        }}
+        className="px-2.5 py-1 text-[11px] font-mono rounded border border-ink/20 hover:bg-ink/5 text-ink/80 hover:text-ink transition-colors cursor-pointer disabled:opacity-40"
+      >
+        merge into current
+      </button>
+
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onAction('rebase', commit);
+        }}
+        className="px-2.5 py-1 text-[11px] font-mono rounded border border-ink/20 hover:bg-ink/5 text-ink/80 hover:text-ink transition-colors cursor-pointer disabled:opacity-40"
+      >
+        rebase onto this
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,285 @@
+import { useMemo } from 'preact/hooks';
+import { ChevronDown, ChevronUp } from 'lucide-preact';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
+import { 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;
+}
+
+/**
+ * A run of context lines hidden by the "Collapse context" toggle.
+ *
+ * It is a row of its own rather than a shorter slice so the reader can see that
+ * lines are missing and how many — a diff that silently drops its middle reads
+ * as a smaller change than it is.
+ */
+interface ElidedRow {
+  type: 'elided';
+  count: number;
+}
+
+/** Context lines kept at each end of a collapsed run. */
+const CONTEXT_KEEP = 3;
+
+/**
+ * Hide the middle of a long run of unchanged lines.
+ *
+ * Only the `context` rows are elided; a hunk header (`meta`) and every changed
+ * line stay, which is what makes the collapsed view a summary of the change
+ * rather than a truncated diff. Each kept row carries its ORIGINAL index, since
+ * the highlighted HTML is keyed to the full parse and a re-indexed row would
+ * paint a different line's tokens.
+ */
+function collapseContext(
+  rows: DiffLineItem[],
+): Array<{ row: DiffLineItem | ElidedRow; index: number }> {
+  const out: Array<{ row: DiffLineItem | ElidedRow; index: number }> = [];
+  for (let i = 0; i < rows.length; i += 1) {
+    if (rows[i].type !== 'context') {
+      out.push({ row: rows[i], index: i });
+      continue;
+    }
+    let end = i;
+    while (end < rows.length && rows[end].type === 'context') end += 1;
+    const run = end - i;
+    if (run > CONTEXT_KEEP * 2 + 1) {
+      for (let k = i; k < i + CONTEXT_KEEP; k += 1) out.push({ row: rows[k], index: k });
+      out.push({ row: { type: 'elided', count: run - CONTEXT_KEEP * 2 }, index: -1 });
+      for (let k = end - CONTEXT_KEEP; k < end; k += 1) out.push({ row: rows[k], index: k });
+    } else {
+      for (let k = i; k < end; k += 1) out.push({ row: rows[k], index: k });
+    }
+    i = end - 1;
+  }
+  return out;
+}
+
+interface CommitDiffViewerProps {
+  diffText?: string;
+  isLoading?: boolean;
+  filePath?: string;
+  /**
+   * Whether the diff on hand was read with the whole file around the change.
+   * The toggle is CONTROLLED because expanding it is a re-read, not a client
+   * expansion: git's default patch carries three context lines, so there is
+   * nothing more in the payload to reveal.
+   */
+  fullContext?: boolean;
+  onToggleContext?: () => void;
+}
+
+export function CommitDiffViewer({ diffText, isLoading, filePath, fullContext = false, onToggleContext }: CommitDiffViewerProps) {
+  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]);
+
+  // The toggle's label and the elision both follow the SERVER's answer, so the
+  // two cannot disagree about whether the whole file is on screen.
+  const rendered = useMemo(
+    () => (fullContext ? lines.map((row, index) => ({ row, index })) : collapseContext(lines)),
+    [lines, fullContext],
+  );
+
+  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={onToggleContext}
+          disabled={!onToggleContext}
+          className="hover:text-ink flex items-center gap-1 cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-default"
+          title={fullContext ? 'Show only the changed hunks' : 'Read the whole file around the change'}
+          aria-pressed={fullContext}
+        >
+          {fullContext ? (
+            <>
+              <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]">
+          {rendered.map(({ row, index }, position) => {
+            if (row.type === 'elided') {
+              return (
+                <div
+                  key={`elided-${position}`}
+                  className="px-3 py-1 bg-canvas text-ink/40 text-[10px] text-center select-none"
+                  title={`${row.count} unchanged line(s) hidden`}
+                >
+                  ⋯ {row.count} unchanged line{row.count === 1 ? '' : 's'} hidden ⋯
+                </div>
+              );
+            }
+
+            const line = row;
+            const idx = index;
+            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>
+  );
+}