@bendyline/docblocks-react 2.0.0 → 2.1.0

package/src/Git/GitDiffDialog.tsx

@@ -1,147 +0,0 @@
-/**
- * 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

@@ -1,105 +0,0 @@
-/**
- * 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

@@ -1,195 +0,0 @@
-/**
- * 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

@@ -1,157 +0,0 @@
-/**
- * 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>
-  );
-}