@bendyline/docblocks-react 1.1.1 → 2.0.0

package/src/Git/GitCloneDialog.tsx

@@ -0,0 +1,200 @@
+/**
+ * GitCloneDialog — clone a remote repository into a new local workspace.
+ *
+ * The renderer only collects the URL; the main process shows the native
+ * destination picker, streams progress back, and registers the clone as a
+ * workspace. An auth failure swaps the body to the shared credential
+ * guidance copy (no credentials are ever collected here).
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import type {
+  ElectronWorkspaceInfo,
+  GitCloneHandle,
+  GitCloneProgress,
+} from '@bendyline/docblocks/host';
+import { Dialog } from '../components/Dialog.js';
+import { useGitContext } from './GitContext.js';
+import { deriveCloneFolderName, isLikelyGitUrl } from './git-clone-utils.js';
+import { GitCredentialGuidance } from './GitAuthGuidanceDialog.js';
+
+export function GitCloneDialog({
+  onClose,
+  onCloned,
+}: {
+  onClose: () => void;
+  onCloned: (info: ElectronWorkspaceInfo) => void;
+}) {
+  const git = useGitContext();
+  const gitApi = git?.gitApi ?? null;
+
+  const [url, setUrl] = useState('');
+  const [cloning, setCloning] = useState(false);
+  const [progress, setProgress] = useState<GitCloneProgress | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  /** Non-null → show embedded credential guidance instead of the form. */
+  const [authDetail, setAuthDetail] = useState<{ detail?: string } | null>(null);
+  const handleRef = useRef<GitCloneHandle | null>(null);
+  const urlInputRef = useRef<HTMLInputElement>(null);
+
+  // Closing the dialog mid-clone abandons it — kill git and clean up.
+  useEffect(
+    () => () => {
+      handleRef.current?.cancel();
+    },
+    [],
+  );
+
+  if (!gitApi || typeof gitApi.clone !== 'function') return null;
+
+  const canClone = isLikelyGitUrl(url) && !cloning;
+
+  const handleClone = async () => {
+    if (!canClone) return;
+    setCloning(true);
+    setError(null);
+    setProgress(null);
+    const handle = gitApi.clone(url.trim(), (p) => setProgress(p));
+    handleRef.current = handle;
+    const result = await handle.result;
+    handleRef.current = null;
+    setCloning(false);
+    setProgress(null);
+    if (!result.ok) {
+      switch (result.error.code) {
+        case 'invalid-url':
+          setError('That doesn’t look like a valid repository URL.');
+          break;
+        case 'destination-exists':
+          setError('A folder with that name already exists there. Pick a different location.');
+          break;
+        case 'auth-failed':
+          setAuthDetail({ detail: result.error.message });
+          break;
+        case 'cancelled':
+          break; // user cancelled — just return to the form
+        default:
+          setError(result.error.message);
+      }
+      return;
+    }
+    if (result.value === null) return; // user cancelled the destination picker
+    onCloned(result.value);
+  };
+
+  const progressPercent = progress?.percent ?? null;
+  const progressText =
+    progress !== null
+      ? `${progress.phase}…${progressPercent !== null ? ` ${Math.round(progressPercent)}%` : ''}`
+      : 'Starting clone…';
+
+  if (authDetail !== null) {
+    return (
+      <Dialog
+        title="Clone repository"
+        onClose={onClose}
+        footer={
+          <>
+            <button
+              type="button"
+              className="db-git-secondary-btn"
+              onClick={() => setAuthDetail(null)}
+            >
+              Back
+            </button>
+            <button type="button" className="db-git-primary-btn" onClick={onClose}>
+              Close
+            </button>
+          </>
+        }
+      >
+        <p className="db-settings-hint">Git could not authenticate with that remote.</p>
+        <GitCredentialGuidance detail={authDetail.detail} />
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog
+      title="Clone repository"
+      onClose={onClose}
+      closeOnBackdrop={!cloning}
+      initialFocusRef={urlInputRef}
+      footer={
+        <>
+          <button
+            type="button"
+            className="db-git-secondary-btn"
+            onClick={onClose}
+            disabled={cloning}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="db-git-primary-btn"
+            disabled={!canClone}
+            onClick={() => void handleClone()}
+          >
+            Clone
+          </button>
+        </>
+      }
+    >
+      <div className="db-git-form-row">
+        <label className="db-git-form-label" htmlFor="db-git-clone-url">
+          Repository URL
+        </label>
+        <input
+          id="db-git-clone-url"
+          ref={urlInputRef}
+          className="db-git-form-input"
+          type="text"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') void handleClone();
+          }}
+          placeholder="https://github.com/owner/repo.git"
+          disabled={cloning}
+          spellCheck={false}
+        />
+      </div>
+      {isLikelyGitUrl(url) && (
+        <p className="db-git-hint">
+          Will clone into: <b>{deriveCloneFolderName(url)}</b> — you&rsquo;ll pick where next
+        </p>
+      )}
+      <p className="db-git-hint">
+        HTTPS and SSH URLs both work. You&rsquo;ll choose the destination folder in the next step.
+      </p>
+      {error !== null && (
+        <p className="db-git-form-error" role="alert">
+          {error}
+        </p>
+      )}
+      {cloning && (
+        <div className="db-git-progress">
+          {progressPercent !== null && (
+            <div
+              className="db-git-progress-bar"
+              role="progressbar"
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-valuenow={Math.round(progressPercent)}
+              style={{ width: `${progressPercent}%` }}
+            />
+          )}
+          <p className="db-git-progress-text">{progressText}</p>
+          <button
+            type="button"
+            className="db-git-secondary-btn"
+            onClick={() => handleRef.current?.cancel()}
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+    </Dialog>
+  );
+}

package/src/Git/GitCommitDialog.tsx

@@ -0,0 +1,119 @@
+/**
+ * GitCommitDialog — message + per-file selection for committing changes.
+ *
+ * All changed files are included by default; while a merge is being
+ * concluded, conflicted files are force-included (locked) because a commit
+ * that omits them would not resolve the merge. Selection logic lives in
+ * commit-selection.ts so it stays unit-testable.
+ */
+
+import { useRef, useState } from 'react';
+import { Dialog } from '../components/Dialog.js';
+import { useGitContext } from './GitContext.js';
+import { BADGE_LABELS, badgeKindFor } from './git-status.js';
+import {
+  canCommit,
+  initSelection,
+  isMergeCommit,
+  selectedPaths,
+  setAllSelected,
+  toggleSelection,
+  type CommitSelection,
+} from './commit-selection.js';
+
+export function GitCommitDialog({ onClose }: { onClose: () => void }) {
+  const git = useGitContext();
+  const status = git?.status ?? null;
+  const merging = isMergeCommit(status);
+
+  const [message, setMessage] = useState('');
+  const [selection, setSelection] = useState<CommitSelection>(() =>
+    initSelection(status?.changes ?? [], merging),
+  );
+  const messageRef = useRef<HTMLTextAreaElement>(null);
+
+  if (!git || !status) return null;
+
+  const allOn = [...selection.included.values()].every(Boolean);
+  const commitDisabled = !canCommit(message, selection) || git.busy !== null;
+
+  const handleCommit = async () => {
+    const ok = await git.commit(message, selectedPaths(selection));
+    if (ok) onClose();
+  };
+
+  return (
+    <Dialog
+      title={merging ? 'Commit merge' : 'Commit changes'}
+      onClose={onClose}
+      size="wide"
+      closeOnBackdrop={false}
+      initialFocusRef={messageRef}
+      footer={
+        <>
+          <button type="button" className="db-git-secondary-btn" onClick={onClose}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="db-git-primary-btn"
+            disabled={commitDisabled}
+            onClick={() => void handleCommit()}
+          >
+            Commit
+          </button>
+        </>
+      }
+    >
+      {merging && (
+        <p className="db-settings-hint">
+          You&rsquo;re completing a merge. Committing will conclude it.
+        </p>
+      )}
+      <textarea
+        ref={messageRef}
+        className="db-git-commit-message"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="Commit message"
+        aria-label="Commit message"
+        rows={3}
+      />
+      <div className="db-git-form-row">
+        <button
+          type="button"
+          className="db-git-secondary-btn"
+          onClick={() => setSelection((s) => setAllSelected(s, !allOn))}
+        >
+          {allOn ? 'Select none' : 'Select all'}
+        </button>
+      </div>
+      <ul className="db-git-file-list">
+        {status.changes.map((change) => {
+          const kind = badgeKindFor(change);
+          const locked = selection.locked.has(change.path);
+          const checked = locked || (selection.included.get(change.path) ?? true);
+          return (
+            <li key={change.path} className="db-git-file-row">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  disabled={locked}
+                  onChange={() => setSelection((s) => toggleSelection(s, change.path))}
+                />
+                <span>{change.path.replace(/^\/+/, '')}</span>
+              </label>
+              <span className="db-git-file-kind">{BADGE_LABELS[kind]}</span>
+            </li>
+          );
+        })}
+      </ul>
+      {git.lastResult?.tone === 'error' && (
+        <p className="db-git-form-error" role="alert">
+          {git.lastResult.message}
+        </p>
+      )}
+    </Dialog>
+  );
+}

package/src/Git/GitConflictsDialog.tsx

@@ -0,0 +1,62 @@
+/**
+ * GitConflictsDialog — lists conflicted files after a pull hits a merge
+ * conflict. Each row opens the file in the editor so the user can resolve
+ * the markers; the primary action hands off to the commit dialog, which
+ * concludes the merge.
+ */
+
+import { Dialog } from '../components/Dialog.js';
+import { useGitContext } from './GitContext.js';
+
+export function GitConflictsDialog({
+  paths,
+  onOpenFile,
+  onClose,
+}: {
+  paths: string[];
+  onOpenFile: (path: string) => void;
+  onClose: () => void;
+}) {
+  const git = useGitContext();
+
+  return (
+    <Dialog
+      title="Merge conflicts"
+      onClose={onClose}
+      footer={
+        <>
+          <button type="button" className="db-git-secondary-btn" onClick={onClose}>
+            Close
+          </button>
+          <button
+            type="button"
+            className="db-git-primary-btn"
+            onClick={() => git?.openDialog({ kind: 'commit' })}
+          >
+            Open commit dialog
+          </button>
+        </>
+      }
+    >
+      <p className="db-settings-hint">
+        These files contain conflict markers. Edit each one to resolve the conflicts, then commit to
+        complete the merge.
+      </p>
+      <ul className="db-git-file-list">
+        {paths.map((path) => (
+          <li key={path} className="db-git-file-row">
+            <button
+              type="button"
+              onClick={() => {
+                onOpenFile(path);
+                onClose();
+              }}
+            >
+              {path.replace(/^\/+/, '')}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </Dialog>
+  );
+}

package/src/Git/GitContext.tsx

@@ -0,0 +1,88 @@
+/**
+ * GitContext — the seam between DocBlocksShell and every git UI surface.
+ *
+ * The shell calls useGit() once and provides the value here; the status
+ * bar, file-tree badges, toolbar control, and dialogs all consume it.
+ * Consumers must tolerate a null context (FileExplorer renders standalone
+ * in tests and on surfaces with no git).
+ */
+
+import { createContext, useContext } from 'react';
+import type {
+  DocBlocksHostGitAPI,
+  GitCapabilities,
+  GitRepoDetection,
+  GitStatus,
+} from '@bendyline/docblocks/host';
+import type { FileSystemProvider } from '@bendyline/docblocks/filesystem';
+import type { GitBadgeKind } from './git-status.js';
+
+export type GitDialogState =
+  | { kind: 'none' }
+  | { kind: 'commit' }
+  | { kind: 'branches'; createFocus?: boolean }
+  | { kind: 'history'; path?: string }
+  /** `revision` absent → working tree vs HEAD; present → that commit vs its parent. */
+  | { kind: 'diff'; path: string; revision?: { sha: string } }
+  | { kind: 'clone' }
+  | {
+      kind: 'auth-guidance';
+      operation: 'push' | 'pull' | 'fetch' | 'clone' | 'pr';
+      detail?: string;
+    }
+  | { kind: 'conflicts'; paths: string[] };
+
+export type GitBusyKind = 'push' | 'pull' | 'fetch' | 'commit' | 'branch' | 'pr' | null;
+
+export interface GitInlineResult {
+  tone: 'info' | 'error';
+  message: string;
+}
+
+export interface GitValue {
+  /** Tier 1 — Electron host with a working git. Gates the clone entry. */
+  available: boolean;
+  capabilities: GitCapabilities | null;
+  /** Tier 2 — the active workspace root is a repository. Gates everything else. */
+  repo: GitRepoDetection | null;
+  /** Main-owned repository capability; never a native path. */
+  repositoryId: string | null;
+  /** Parsed web location of the first remote, when one exists and parses. */
+  remoteWeb: { host: string; owner: string; repo: string; webUrl: string } | null;
+  /** Raw host API for read-heavy dialogs (log, branches, file-at-revision). */
+  gitApi: DocBlocksHostGitAPI | null;
+  provider: FileSystemProvider | null;
+  theme: 'light' | 'dark';
+
+  status: GitStatus | null;
+  badges: ReadonlyMap<string, GitBadgeKind>;
+  busy: GitBusyKind;
+  /** Latest operation outcome, surfaced in an aria-live region. */
+  lastResult: GitInlineResult | null;
+
+  refresh: () => void;
+  /** Debounced refresh — used after autosave writes. */
+  scheduleRefresh: () => void;
+
+  /** Actions route their typed errors to dialogs/lastResult internally. */
+  commit: (message: string, paths: string[]) => Promise<boolean>;
+  push: () => Promise<void>;
+  pull: () => Promise<void>;
+  fetchRemote: () => Promise<void>;
+  createBranch: (name: string) => Promise<boolean>;
+  switchBranch: (name: string) => Promise<boolean>;
+  /** Open the repo (or a file within it) on the remote's web host. */
+  openOnRemote: (filePath?: string) => void;
+  createPullRequest: () => Promise<void>;
+
+  dialog: GitDialogState;
+  openDialog: (dialog: GitDialogState) => void;
+  closeDialog: () => void;
+}
+
+export const GitContext = createContext<GitValue | null>(null);
+
+/** Null when no provider is mounted — callers must degrade gracefully. */
+export function useGitContext(): GitValue | null {
+  return useContext(GitContext);
+}

package/src/Git/GitDiffDialog.tsx

@@ -0,0 +1,147 @@
+/**
+ * GitDiffDialog — full-size modal showing a file diff.
+ *
+ * Without a revision: working tree vs HEAD (HEAD side via the git host API,
+ * working side via the workspace FileSystemProvider). With a revision: that
+ * commit vs its parent, both sides via readFileAtRevision. Absent sides
+ * render as empty text with an "(absent)" label; binary files short-circuit
+ * to a hint since there is no text diff to show.
+ */
+
+import { useEffect, useState } from 'react';
+import { getFileSystemProviderV2, parseWorkspacePath } from '@bendyline/docblocks/filesystem';
+import { Dialog } from '../components/Dialog.js';
+import { useGitContext } from './GitContext.js';
+import { GitDiffView } from './GitDiffView.js';
+
+export interface GitDiffDialogProps {
+  /** Slash-prefixed workspace-relative path. */
+  path: string;
+  /** Absent → working tree vs HEAD; present → that commit vs its parent. */
+  revision?: { sha: string };
+  onClose: () => void;
+}
+
+type DiffLoadState =
+  | { phase: 'loading' }
+  | { phase: 'error'; message: string }
+  | { phase: 'binary' }
+  | {
+      phase: 'ready';
+      original: string;
+      modified: string;
+      labels: { original: string; modified: string };
+    };
+
+export function GitDiffDialog({ path, revision, onClose }: GitDiffDialogProps) {
+  const git = useGitContext();
+  const gitApi = git?.gitApi ?? null;
+  const provider = git?.provider ?? null;
+  const repositoryId = git?.repositoryId ?? null;
+  const sha = revision?.sha ?? null;
+
+  const [state, setState] = useState<DiffLoadState>({ phase: 'loading' });
+
+  useEffect(() => {
+    if (!gitApi || !repositoryId) {
+      setState({ phase: 'error', message: 'Git is not available for this workspace.' });
+      return;
+    }
+    let cancelled = false;
+    setState({ phase: 'loading' });
+
+    const load = async (): Promise<DiffLoadState> => {
+      if (sha) {
+        const short = sha.slice(0, 7);
+        const [parent, at] = await Promise.all([
+          gitApi.readFileAtRevision(repositoryId, path, { kind: 'parent-of', sha }),
+          gitApi.readFileAtRevision(repositoryId, path, { kind: 'commit', sha }),
+        ]);
+        if (!parent.ok) return { phase: 'error', message: parent.error.message };
+        if (!at.ok) return { phase: 'error', message: at.error.message };
+        if (
+          (parent.value.content === null && parent.value.binary) ||
+          (at.value.content === null && at.value.binary)
+        ) {
+          return { phase: 'binary' };
+        }
+        return {
+          phase: 'ready',
+          original: parent.value.content ?? '',
+          modified: at.value.content ?? '',
+          labels: {
+            original: parent.value.content === null ? `${short}^ (absent)` : `${short}^`,
+            modified: at.value.content === null ? `${short} (absent)` : short,
+          },
+        };
+      }
+
+      if (!provider) {
+        return { phase: 'error', message: 'Workspace files are not available.' };
+      }
+      const providerV2 = getFileSystemProviderV2(provider);
+      const [head, working] = await Promise.all([
+        gitApi.readFileAtRevision(repositoryId, path, { kind: 'head' }),
+        providerV2
+          ? providerV2
+              .readFile(parseWorkspacePath(path))
+              .then((file) => (file ? new TextDecoder().decode(file.data) : null))
+          : provider.readFile(path),
+      ]);
+      if (!head.ok) return { phase: 'error', message: head.error.message };
+      if (head.value.content === null && head.value.binary) return { phase: 'binary' };
+      return {
+        phase: 'ready',
+        original: head.value.content ?? '',
+        modified: working ?? '',
+        labels: {
+          original: head.value.content === null ? 'HEAD (absent)' : 'HEAD',
+          modified: working === null ? 'Working tree (absent)' : 'Working tree',
+        },
+      };
+    };
+
+    load()
+      .catch(
+        (err: unknown): DiffLoadState => ({
+          phase: 'error',
+          message: err instanceof Error ? err.message : 'Failed to load the diff',
+        }),
+      )
+      .then((next) => {
+        if (!cancelled) setState(next);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [gitApi, provider, repositoryId, path, sha]);
+
+  if (!git) return null;
+
+  const fullPath = path.replace(/^\/+/, '');
+  const baseName = fullPath.split('/').pop() || fullPath;
+
+  return (
+    <Dialog title={baseName} size="full" onClose={onClose}>
+      <p className="db-settings-hint">{fullPath}</p>
+      {state.phase === 'loading' && <p className="db-git-hint">Loading changes…</p>}
+      {state.phase === 'error' && (
+        <p className="db-git-form-error" role="alert">
+          {state.message}
+        </p>
+      )}
+      {state.phase === 'binary' && (
+        <p className="db-git-hint">Binary file — no text diff available.</p>
+      )}
+      {state.phase === 'ready' && (
+        <GitDiffView
+          original={state.original}
+          modified={state.modified}
+          fileName={baseName}
+          theme={git.theme}
+          labels={state.labels}
+        />
+      )}
+    </Dialog>
+  );
+}