@abelfubu/dv 0.1.0

package/dist/web-utils.js

@@ -0,0 +1,363 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@opentuah/react/jsx-runtime";
+// Web preview generation utilities for uploading diffs to critique.work.
+// Renders diff components using opentui test renderer, converts to HTML with responsive layout,
+// and uploads desktop/mobile versions for shareable diff viewing.
+import { getResolvedTheme, rgbaToHex } from "./themes.js";
+import { buildDirectoryTree } from "./directory-tree.js";
+import { DiffRenderable } from "@opentuah/core";
+/**
+ * Calculate the actual content height from root's children after layout.
+ * Returns the maximum bottom edge (top + height) of all children.
+ */
+function getContentHeight(root) {
+    const children = root.getChildren();
+    if (children.length === 0)
+        return 0;
+    let maxBottom = 0;
+    for (const child of children) {
+        const layout = child.getLayoutNode().getComputedLayout();
+        const bottom = layout.top + layout.height;
+        if (bottom > maxBottom) {
+            maxBottom = bottom;
+        }
+    }
+    return Math.ceil(maxBottom);
+}
+/**
+ * Find all DiffRenderable instances in the renderer tree.
+ * Walks the tree recursively checking instanceof DiffRenderable.
+ */
+function findDiffRenderables(root) {
+    const results = [];
+    function walk(node) {
+        if (!node.getChildren)
+            return;
+        for (const child of node.getChildren()) {
+            if (child instanceof DiffRenderable) {
+                results.push(child);
+            }
+            walk(child);
+        }
+    }
+    walk(root);
+    return results;
+}
+/**
+ * Wait for tree-sitter syntax highlighting to complete on all diff elements,
+ * then wait for rendering to stabilize (no more requestRender calls).
+ *
+ * Two-phase approach:
+ * 1. Wait for DiffRenderable.isHighlighting to become false on all diffs
+ *    (deterministic, exits as soon as tree-sitter is done)
+ * 2. Wait for render idle — no new requestRender calls for idleMs
+ *    (catches deferred rebuilds like DiffRenderable.requestRebuild which
+ *    uses queueMicrotask to schedule buildView + requestRender after
+ *    highlighting completes)
+ *
+ * Phase 2 is critical because DiffRenderable's split view rebuild happens
+ * asynchronously via microtask AFTER isHighlighting goes false. Without it,
+ * the captured frame may have concealed (unhighlighted) content on one side.
+ */
+async function waitForHighlightAndRenderStabilization(renderer, renderOnce, maxMs = 2000) {
+    const startTime = Date.now();
+    const pollMs = 20;
+    const idleMs = 80;
+    // Track render requests to detect when rendering has quiesced
+    let lastRenderTime = Date.now();
+    const originalRequestRender = renderer.root.requestRender.bind(renderer.root);
+    renderer.root.requestRender = function () {
+        lastRenderTime = Date.now();
+        originalRequestRender();
+    };
+    // Do one render cycle to kick off highlighting
+    await renderOnce();
+    // Phase 1: wait for isHighlighting to become false on all diffs
+    while (Date.now() - startTime < maxMs) {
+        const diffs = findDiffRenderables(renderer.root);
+        if (diffs.length === 0 || diffs.every(d => !d.isHighlighting)) {
+            break;
+        }
+        await new Promise(resolve => setTimeout(resolve, pollMs));
+        await renderOnce();
+    }
+    // Phase 2: wait for render to stabilize (catches deferred rebuilds)
+    // Reset the render timestamp so we wait for any post-highlight renders
+    lastRenderTime = Date.now();
+    await renderOnce();
+    while (Date.now() - startTime < maxMs) {
+        const now = Date.now();
+        if (now - lastRenderTime >= idleMs)
+            break;
+        await new Promise(resolve => setTimeout(resolve, pollMs));
+        await renderOnce();
+    }
+}
+/**
+ * Render diff to CapturedFrame using opentui test renderer.
+ * Uses content-fitting: renders with initial height, measures actual content,
+ * then resizes to exact content height to avoid wasting memory.
+ */
+async function renderDiffToFrameWithSectionPositions(diffContent, options) {
+    const { createTestRenderer } = await import("@opentuah/core/testing");
+    const { createRoot } = await import("@opentuah/react");
+    const { getTreeSitterClient } = await import("@opentuah/core");
+    const { parsePatch, formatPatch } = await import("diff");
+    // Pre-initialize TreeSitter client to ensure syntax highlighting works
+    const tsClient = getTreeSitterClient();
+    await tsClient.initialize();
+    const { DiffView, DirectoryTreeView } = await import("./components/index.js");
+    const { getFileName, getOldFileName, countChanges, getFileStatus, getViewMode, processFiles, detectFiletype, stripSubmoduleHeaders, parseGitDiffFiles, } = await import("./diff-utils.js");
+    const { themeNames, defaultThemeName } = await import("./themes.js");
+    const themeName = options.themeName && themeNames.includes(options.themeName)
+        ? options.themeName
+        : defaultThemeName;
+    // Parse the diff (with rename detection support)
+    const files = parseGitDiffFiles(stripSubmoduleHeaders(diffContent), parsePatch);
+    const filesWithRawDiff = processFiles(files, formatPatch);
+    const fileNames = filesWithRawDiff.map((file) => getFileName(file));
+    const treeFiles = filesWithRawDiff.map((file, idx) => {
+        const { additions, deletions } = countChanges(file.hunks);
+        return {
+            path: getFileName(file),
+            status: getFileStatus(file),
+            additions,
+            deletions,
+            fileIndex: idx,
+        };
+    });
+    const treeFileOrder = buildDirectoryTree(treeFiles)
+        .filter((node) => node.isFile && node.fileIndex !== undefined)
+        .map((node) => node.fileIndex);
+    if (filesWithRawDiff.length === 0) {
+        throw new Error("No files to display");
+    }
+    // Store refs to each file section container so we can map file headers
+    // to exact rendered line indexes (avoids text-regex false positives).
+    const fileSectionRefs = new Map();
+    // Get theme colors
+    const webTheme = getResolvedTheme(themeName);
+    const webBg = webTheme.background;
+    const webText = rgbaToHex(webTheme.text);
+    const webMuted = rgbaToHex(webTheme.textMuted);
+    const showNotice = options.showNotice === true;
+    // Create the diff view component
+    // NOTE: No height: "100%" - let content determine its natural height
+    function WebApp() {
+        return (_jsxs("box", { style: {
+                flexDirection: "column",
+                backgroundColor: webBg,
+            }, children: [_jsx("box", { style: { marginBottom: 2 }, children: _jsx(DirectoryTreeView, { files: treeFiles, themeName: themeName }) }), filesWithRawDiff.map((file, idx) => {
+                    const fileName = getFileName(file);
+                    const oldFileName = getOldFileName(file);
+                    const filetype = detectFiletype(fileName);
+                    const { additions, deletions } = countChanges(file.hunks);
+                    // Use forced viewMode if set, otherwise auto-detect (higher threshold 150 for web vs TUI 100)
+                    const viewMode = options.viewMode || getViewMode(additions, deletions, options.cols, 150);
+                    return (_jsxs("box", { ref: (r) => {
+                            if (r)
+                                fileSectionRefs.set(idx, r);
+                            else
+                                fileSectionRefs.delete(idx);
+                        }, style: { flexDirection: "column", marginBottom: 2 }, children: [_jsxs("box", { style: {
+                                    paddingBottom: 1,
+                                    paddingLeft: 1,
+                                    paddingRight: 1,
+                                    flexShrink: 0,
+                                    flexDirection: "row",
+                                    alignItems: "center",
+                                }, children: [oldFileName ? (_jsxs(_Fragment, { children: [_jsx("text", { fg: webMuted, children: oldFileName.trim() }), _jsx("text", { fg: webMuted, children: " \u2192 " }), _jsx("text", { fg: webText, children: fileName.trim() })] })) : (_jsx("text", { fg: webText, children: fileName.trim() })), _jsxs("text", { fg: "#2d8a47", children: [" +", additions] }), _jsxs("text", { fg: "#c53b53", children: ["-", deletions] })] }), _jsx(DiffView, { diff: file.rawDiff || "", view: viewMode, filetype: filetype, themeName: themeName, wrapMode: options.wrapMode })] }, idx));
+                })] }));
+    }
+    // Content-fitting rendering:
+    // 1. Start with small initial height
+    // 2. If content is clipped (content height == buffer height), double the buffer
+    // 3. Repeat until content fits or we hit max
+    // 4. Shrink to exact content height
+    let currentHeight = 100; // Start small
+    const { renderer, renderOnce, resize } = await createTestRenderer({
+        width: options.cols,
+        height: currentHeight,
+    });
+    // Mount and do initial render
+    createRoot(renderer).render(_jsx(WebApp, {}));
+    await renderOnce();
+    // Wait for React to mount components (may take a few render cycles)
+    let contentHeight = getContentHeight(renderer.root);
+    while (contentHeight === 0) {
+        await new Promise(resolve => setTimeout(resolve, 10));
+        await renderOnce();
+        contentHeight = getContentHeight(renderer.root);
+    }
+    // If content height == buffer height, content is clipped - double until it fits
+    while (contentHeight >= currentHeight && currentHeight < options.maxRows) {
+        currentHeight = Math.min(currentHeight * 2, options.maxRows);
+        resize(options.cols, currentHeight);
+        await renderOnce();
+        contentHeight = getContentHeight(renderer.root);
+    }
+    // Shrink to exact content height (remove empty space at bottom)
+    const finalHeight = Math.min(Math.max(contentHeight, 1), options.maxRows);
+    if (finalHeight < renderer.height) {
+        resize(options.cols, finalHeight);
+        await renderOnce();
+    }
+    // Wait for tree-sitter highlighting + render stabilization
+    await waitForHighlightAndRenderStabilization(renderer, renderOnce, options.stabilizeMs ?? 2000);
+    const sectionPositions = [];
+    for (let idx = 0; idx < fileNames.length; idx++) {
+        const section = fileSectionRefs.get(idx);
+        if (!section)
+            continue;
+        const layout = section.getLayoutNode().getComputedLayout();
+        sectionPositions.push({
+            lineIndex: Math.max(0, Math.round(layout.top)),
+            fileName: fileNames[idx],
+            fileIndex: idx,
+        });
+    }
+    // Capture the final frame
+    const buffer = renderer.currentRenderBuffer;
+    const cursorState = renderer.getCursorState();
+    const frame = {
+        cols: buffer.width,
+        rows: buffer.height,
+        cursor: [cursorState.x, cursorState.y],
+        lines: buffer.getSpanLines(),
+    };
+    renderer.destroy();
+    return {
+        frame,
+        sectionPositions,
+        treeFileOrder,
+    };
+}
+export async function renderDiffToFrame(diffContent, options) {
+    const { frame } = await renderDiffToFrameWithSectionPositions(diffContent, options);
+    return frame;
+}
+/**
+ * Convert a file path to a URL-safe anchor slug.
+ * e.g. "src/components/foo-bar.tsx" → "src-components-foo-bar-tsx"
+ */
+export function slugifyFileName(name) {
+    return name
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
+}
+/**
+ * Return a unique ID, appending -2, -3, etc. if the base already exists.
+ */
+function dedupeId(id, usedIds) {
+    if (!usedIds.has(id))
+        return id;
+    let i = 2;
+    while (usedIds.has(`${id}-${i}`))
+        i++;
+    return `${id}-${i}`;
+}
+/**
+ * Extract line numbers from a captured diff line's spans.
+ * In split view each row has two line number columns (old + new):
+ *   " " "29" " - " ...content... " " "29" " + " ...content...
+ * In unified view there's only one.
+ *
+ * Returns the new-file (right) line number when available,
+ * falling back to the old-file (left) number for deleted-only rows.
+ * Returns null for non-diff lines (headers, hunk markers, etc.).
+ */
+export function extractLineNumber(line) {
+    let firstNum = null;
+    let secondNum = null;
+    let foundNonEmpty = false;
+    for (const span of line.spans) {
+        const trimmed = span.text.trim();
+        if (trimmed === "")
+            continue;
+        if (/^\d+$/.test(trimmed)) {
+            if (!firstNum) {
+                firstNum = trimmed;
+            }
+            else if (!secondNum) {
+                secondNum = trimmed;
+            }
+        }
+        else if (!foundNonEmpty) {
+            // First non-empty span is not a number — not a diff line
+            return null;
+        }
+        foundNonEmpty = true;
+    }
+    // Prefer new-file (right/second) number; fall back to old-file (left/first)
+    return secondNum ?? firstNum;
+}
+/**
+ * Match a rendered tree file row and extract the file path label.
+ * Examples:
+ *   "│   ├── index.ts (+5,-2)"
+ *   "└── README.md (-15)"
+ */
+export function extractTreeFilePath(lineText) {
+    const match = lineText.match(/^\s*[│ ]*[├└]──\s+(.+?)\s+\([^)]*\)\s*$/);
+    if (!match || !match[1])
+        return null;
+    return match[1].trim();
+}
+function escapeHtmlAttribute(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/"/g, "&quot;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}
+/**
+ * Build line-indexed anchors from file section layout positions.
+ * This avoids regex detection on rendered text, which can produce
+ * false positives when code lines mimic file-header patterns.
+ */
+export function buildAnchorMap(sections) {
+    const anchors = new Map();
+    const usedIds = new Set();
+    for (const section of sections) {
+        if (!Number.isFinite(section.lineIndex) || section.lineIndex < 0)
+            continue;
+        if (anchors.has(section.lineIndex))
+            continue;
+        const label = section.fileName.trim();
+        const baseSlug = slugifyFileName(label) || "file";
+        const id = dedupeId(baseSlug, usedIds);
+        usedIds.add(id);
+        anchors.set(section.lineIndex, { id, label });
+    }
+    return anchors;
+}
+// CSS for file section anchors — injected via extraCss hook.
+// Clicking a file link copies the filename to clipboard and updates the URL hash.
+const SECTION_ANCHOR_CSS = `
+  .file-section { scroll-margin-top: 16px; }
+  .file-link { color: inherit; text-decoration: none; cursor: copy; }
+  .file-link:hover { text-decoration: underline; }
+  .tree-file-link { color: inherit; text-decoration: none; }
+  .tree-file-link:hover { text-decoration: underline; }
+`;
+// JS: scroll to hash fragment on page load + click-to-copy filename on .file-link click.
+// On click: copies the filename text to clipboard and updates the URL hash.
+const SECTION_ANCHOR_JS = `
+  // Scroll to hash on page load
+  if (location.hash) {
+    var el = document.getElementById(location.hash.slice(1));
+    if (el) setTimeout(function () { el.scrollIntoView({ behavior: 'smooth' }) }, 100);
+  }
+
+  // Click file link: copy filename to clipboard + update URL hash
+  document.addEventListener('click', function (e) {
+    var link = e.target.closest('.file-link');
+    if (!link) return;
+    e.preventDefault();
+    var text = link.textContent;
+    var section = link.closest('.file-section');
+    if (section && section.id) history.replaceState(null, '', '#' + section.id);
+    navigator.clipboard.writeText(text);
+  });
+`;

package/package.json

@@ -0,0 +1,37 @@
+{
+	"name": "@abelfubu/dv",
+	"type": "module",
+	"version": "0.1.0",
+	"license": "MIT",
+	"bin": "./dist/cli.js",
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"dist",
+		"public"
+	],
+	"scripts": {
+		"cli": "bun src/cli.tsx",
+		"cli:watch": "bun --watch src/cli.tsx",
+		"build": "rm -rf dist && tsc",
+		"prepublishOnly": "bun run build"
+	},
+	"devDependencies": {
+		"@types/bun": "1.3.5",
+		"tuistory": "^0.0.13",
+		"typescript": "^5.9.3"
+	},
+	"dependencies": {
+		"@opentuah/core": "0.1.97",
+		"@opentuah/react": "0.1.97",
+		"@parcel/watcher": "^2.5.6",
+		"diff": "^8.0.2",
+		"goke": "^6.6.1",
+		"picocolors": "^1.1.1",
+		"react": "^19.2.0",
+		"strip-ansi": "^7.1.2",
+		"supports-color": "^10.2.2",
+		"zustand": "^5.0.8"
+	}
+}