@bendyline/docblocks-react 1.1.2 → 2.0.0

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>
+  );
+}

package/src/Git/GitDiffView.tsx

@@ -0,0 +1,105 @@
+/**
+ * GitDiffView — read-only Monaco side-by-side diff.
+ *
+ * Monaco is never statically imported: squisq's useMonacoLoader() lazily
+ * imports the editor bundle once per page and hands back the namespace.
+ * The diff editor and both text models are created imperatively into a
+ * host div and disposed on unmount (the classic Monaco leak). Content and
+ * theme changes update the existing editor without recreating it.
+ */
+
+import { useEffect, useRef } from 'react';
+import {
+  detectLanguageFromFileName,
+  useMonacoLoader,
+  type UseMonacoLoaderResult,
+} from '@bendyline/squisq-editor-react';
+
+type MonacoModule = NonNullable<UseMonacoLoaderResult['monaco']>;
+type DiffEditorInstance = ReturnType<MonacoModule['editor']['createDiffEditor']>;
+type TextModel = ReturnType<MonacoModule['editor']['createModel']>;
+
+export interface GitDiffViewProps {
+  original: string;
+  modified: string;
+  /** Used for language detection (markdown for .md, plain text otherwise). */
+  fileName: string;
+  theme: 'light' | 'dark';
+  /** Optional column headers rendered above the two panes. */
+  labels?: { original: string; modified: string };
+}
+
+function languageFor(fileName: string): string {
+  const detected = detectLanguageFromFileName(fileName);
+  if (detected) return detected;
+  return fileName.toLowerCase().endsWith('.md') ? 'markdown' : 'plaintext';
+}
+
+export function GitDiffView({ original, modified, fileName, theme, labels }: GitDiffViewProps) {
+  const { monaco, ready } = useMonacoLoader();
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const editorRef = useRef<DiffEditorInstance | null>(null);
+  const modelsRef = useRef<{ original: TextModel; modified: TextModel } | null>(null);
+
+  const language = languageFor(fileName);
+
+  // Create the editor once monaco settles; dispose editor AND models on unmount.
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!monaco || !host) return;
+    const originalModel = monaco.editor.createModel('', 'plaintext');
+    const modifiedModel = monaco.editor.createModel('', 'plaintext');
+    const editor = monaco.editor.createDiffEditor(host, {
+      readOnly: true,
+      renderSideBySide: true,
+      automaticLayout: true,
+      minimap: { enabled: false },
+      wordWrap: 'on',
+      scrollBeyondLastLine: false,
+      renderOverviewRuler: false,
+    });
+    editor.setModel({ original: originalModel, modified: modifiedModel });
+    editorRef.current = editor;
+    modelsRef.current = { original: originalModel, modified: modifiedModel };
+    return () => {
+      editorRef.current = null;
+      modelsRef.current = null;
+      editor.dispose();
+      originalModel.dispose();
+      modifiedModel.dispose();
+    };
+  }, [monaco]);
+
+  // Sync content + language into the existing models — never recreate the editor.
+  useEffect(() => {
+    if (!monaco) return;
+    const models = modelsRef.current;
+    if (!models) return;
+    if (models.original.getValue() !== original) models.original.setValue(original);
+    if (models.modified.getValue() !== modified) models.modified.setValue(modified);
+    monaco.editor.setModelLanguage(models.original, language);
+    monaco.editor.setModelLanguage(models.modified, language);
+  }, [monaco, original, modified, language]);
+
+  // React to theme prop changes.
+  useEffect(() => {
+    if (!monaco) return;
+    monaco.editor.setTheme(theme === 'dark' ? 'vs-dark' : 'vs');
+  }, [monaco, theme]);
+
+  if (!ready) {
+    return <div className="db-git-diff-loading">Loading diff…</div>;
+  }
+
+  return (
+    <>
+      {labels && (
+        <div className="db-git-diff-labels">
+          <span>{labels.original}</span>
+          <span>{labels.modified}</span>
+        </div>
+      )}
+      <div ref={hostRef} className="db-git-diff-host" />
+    </>
+  );
+}

package/src/Git/GitHistoryDialog.tsx

@@ -0,0 +1,195 @@
+/**
+ * GitHistoryDialog — paged commit log for the repository or a single file.
+ *
+ * Pages `git log` 50 commits at a time; a row expands (one at a time) to
+ * show the full message body and the files changed in that commit — each
+ * file opens the commit-vs-parent diff dialog (which replaces this one;
+ * acceptable for v1).
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import type { GitFileChange, GitLogEntry } from '@bendyline/docblocks/host';
+import { Dialog } from '../components/Dialog.js';
+import { useGitContext } from './GitContext.js';
+import { BADGE_GLYPHS, BADGE_LABELS, badgeKindFor } from './git-status.js';
+
+export interface GitHistoryDialogProps {
+  /** Slash-prefixed workspace-relative path; absent → whole-repo history. */
+  path?: string;
+  onClose: () => void;
+}
+
+const PAGE_SIZE = 50;
+
+type CommitDetail = { body: string; files: GitFileChange[] } | { error: string };
+
+/** Message body beyond the subject line, or '' when it adds nothing. */
+function extraBody(body: string, subject: string): string {
+  const trimmedBody = body.trim();
+  const trimmedSubject = subject.trim();
+  if (!trimmedBody || trimmedBody === trimmedSubject) return '';
+  if (trimmedBody.startsWith(trimmedSubject)) {
+    return trimmedBody.slice(trimmedSubject.length).trim();
+  }
+  return trimmedBody;
+}
+
+function formatDate(iso: string): string {
+  const date = new Date(iso);
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+}
+
+export function GitHistoryDialog({ path, onClose }: GitHistoryDialogProps) {
+  const git = useGitContext();
+  const gitApi = git?.gitApi ?? null;
+  const repositoryId = git?.repositoryId ?? null;
+
+  const [entries, setEntries] = useState<GitLogEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [expandedSha, setExpandedSha] = useState<string | null>(null);
+  const [details, setDetails] = useState<ReadonlyMap<string, CommitDetail>>(new Map());
+
+  const loadPage = useCallback(
+    async (skip: number) => {
+      if (!gitApi || !repositoryId) return;
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await gitApi.log(repositoryId, { path, maxCount: PAGE_SIZE, skip });
+        if (!result.ok) {
+          setError(result.error.message);
+          return;
+        }
+        setEntries((prev) => (skip === 0 ? result.value : [...prev, ...result.value]));
+        setHasMore(result.value.length === PAGE_SIZE);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [gitApi, repositoryId, path],
+  );
+
+  useEffect(() => {
+    setEntries([]);
+    setExpandedSha(null);
+    setDetails(new Map());
+    setHasMore(false);
+    void loadPage(0);
+  }, [loadPage]);
+
+  const handleRowClick = (sha: string) => {
+    if (expandedSha === sha) {
+      setExpandedSha(null);
+      return;
+    }
+    setExpandedSha(sha);
+    if (!gitApi || !repositoryId || details.has(sha)) return;
+    void gitApi.commitFiles(repositoryId, sha).then((result) => {
+      setDetails((prev) => {
+        const next = new Map(prev);
+        next.set(sha, result.ok ? result.value : { error: result.error.message });
+        return next;
+      });
+    });
+  };
+
+  if (!git) return null;
+
+  const baseName = path ? path.replace(/^\/+/, '').split('/').pop() : null;
+  const title = baseName ? `History — ${baseName}` : 'Commit history';
+
+  return (
+    <Dialog title={title} size="wide" onClose={onClose}>
+      {error && (
+        <p className="db-git-form-error" role="alert">
+          {error}
+        </p>
+      )}
+      {!error && entries.length === 0 && loading && <p className="db-git-hint">Loading history…</p>}
+      {!error && entries.length === 0 && !loading && <p className="db-git-hint">No commits yet.</p>}
+      {entries.length > 0 && (
+        <ul className="db-git-history-list">
+          {entries.map((entry) => {
+            const expanded = expandedSha === entry.sha;
+            const detail = details.get(entry.sha);
+            const meta = [
+              entry.authorName,
+              entry.sha.slice(0, 7),
+              formatDate(entry.authorDate),
+              entry.refs.join(', '),
+            ]
+              .filter(Boolean)
+              .join(' · ');
+            const body =
+              detail && !('error' in detail) ? extraBody(detail.body, entry.subject) : '';
+            return (
+              <li key={entry.sha} className="db-git-history-item">
+                <button
+                  type="button"
+                  className="db-git-history-toggle"
+                  aria-expanded={expanded}
+                  onClick={() => handleRowClick(entry.sha)}
+                >
+                  <span className="db-git-history-subject">{entry.subject}</span>
+                  <span className="db-git-history-meta">{meta}</span>
+                </button>
+                {expanded && !detail && <p className="db-git-hint">Loading…</p>}
+                {expanded && detail && 'error' in detail && (
+                  <p className="db-git-form-error" role="alert">
+                    {detail.error}
+                  </p>
+                )}
+                {expanded && detail && !('error' in detail) && (
+                  <>
+                    {body && <pre className="db-git-history-body">{body}</pre>}
+                    <ul className="db-git-history-files">
+                      {detail.files.map((file) => {
+                        const kind = badgeKindFor(file);
+                        return (
+                          <li key={file.path}>
+                            <button
+                              type="button"
+                              className="db-git-history-file"
+                              onClick={() =>
+                                git.openDialog({
+                                  kind: 'diff',
+                                  path: file.path,
+                                  revision: { sha: entry.sha },
+                                })
+                              }
+                            >
+                              <span
+                                className="db-git-file-kind"
+                                aria-label={BADGE_LABELS[kind]}
+                                title={BADGE_LABELS[kind]}
+                              >
+                                {BADGE_GLYPHS[kind]}
+                              </span>
+                              {file.path.replace(/^\/+/, '')}
+                            </button>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {hasMore && (
+        <button
+          type="button"
+          className="db-git-secondary-btn"
+          disabled={loading}
+          onClick={() => void loadPage(entries.length)}
+        >
+          Show older commits
+        </button>
+      )}
+    </Dialog>
+  );
+}

package/src/Git/GitStatusBar.tsx

@@ -0,0 +1,157 @@
+/**
+ * GitStatusBar — slim sidebar row showing branch, ahead/behind, and dirty
+ * count, with the repo actions menu (commit, sync, branches, history,
+ * remote conveniences). Renders nothing unless the active workspace is a
+ * git repository.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useGitContext } from './GitContext.js';
+import { formatAheadBehind, summarizeDirty } from './git-status.js';
+
+export function GitStatusBar() {
+  const git = useGitContext();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [menuOpen]);
+
+  const runItem = useCallback((action: () => void) => {
+    setMenuOpen(false);
+    action();
+  }, []);
+
+  if (!git || !git.repo || !git.status) return null;
+
+  const { status } = git;
+  const branchLabel = status.detached ? 'detached HEAD' : (status.branch ?? 'no branch');
+  const aheadBehind = formatAheadBehind(status);
+  const dirty = summarizeDirty(status);
+  const merging = status.operation === 'merge';
+  const chipLabelParts = [`Git: branch ${branchLabel}`];
+  if (status.ahead > 0) chipLabelParts.push(`${status.ahead} ahead`);
+  if (status.behind > 0) chipLabelParts.push(`${status.behind} behind`);
+  if (dirty) chipLabelParts.push(dirty);
+  if (merging) chipLabelParts.push('merge in progress');
+
+  const canCreatePr =
+    git.capabilities?.ghAvailable === true && git.remoteWeb?.host === 'github.com';
+
+  return (
+    <div ref={rootRef} className="db-git-statusbar">
+      <button
+        type="button"
+        className="db-git-statusbar-chip"
+        onClick={() => setMenuOpen((open) => !open)}
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        aria-label={chipLabelParts.join(', ')}
+        title={chipLabelParts.join(', ')}
+      >
+        <span className="db-git-branch-glyph" aria-hidden="true">
+          {'⎇'}
+        </span>
+        <span className="db-git-statusbar-branch">{branchLabel}</span>
+        {aheadBehind && <span className="db-git-statusbar-counts">{aheadBehind}</span>}
+        {dirty && <span className="db-git-statusbar-dirty">{dirty}</span>}
+        {merging && <span className="db-git-statusbar-merge">merging</span>}
+        {git.busy && (
+          <span className="db-git-statusbar-busy" aria-hidden="true">
+            {'…'}
+          </span>
+        )}
+      </button>
+
+      {menuOpen && (
+        <div className="db-git-menu" role="menu" aria-label="Git actions">
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            disabled={status.changes.length === 0 && !merging}
+            onClick={() => runItem(() => git.openDialog({ kind: 'commit' }))}
+          >
+            {merging ? 'Commit merge…' : 'Commit…'}
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            disabled={git.busy !== null}
+            onClick={() => runItem(() => void git.push())}
+          >
+            {status.upstream === null && !status.unborn ? 'Publish branch' : 'Push'}
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            disabled={git.busy !== null}
+            onClick={() => runItem(() => void git.pull())}
+          >
+            Pull
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            disabled={git.busy !== null}
+            onClick={() => runItem(() => void git.fetchRemote())}
+          >
+            Fetch
+          </button>
+          <div className="db-git-menu-divider" role="separator" />
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            onClick={() => runItem(() => git.openDialog({ kind: 'branches' }))}
+          >
+            Branches…
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            onClick={() => runItem(() => git.openDialog({ kind: 'history' }))}
+          >
+            Commit history…
+          </button>
+          {(git.remoteWeb || canCreatePr) && (
+            <div className="db-git-menu-divider" role="separator" />
+          )}
+          {git.remoteWeb && (
+            <button
+              type="button"
+              role="menuitem"
+              className="db-git-menu-item"
+              onClick={() => runItem(() => git.openOnRemote())}
+            >
+              Open on {git.remoteWeb.host}
+            </button>
+          )}
+          {canCreatePr && (
+            <button
+              type="button"
+              role="menuitem"
+              className="db-git-menu-item"
+              disabled={git.busy !== null}
+              onClick={() => runItem(() => void git.createPullRequest())}
+            >
+              Create pull request
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}