Live GitHub PR demo + shared diff-viewer core

.changeset/live-pr-demo-shared-core.md

@@ -0,0 +1,5 @@
+---
+"diffhub": patch
+---
+
+Fix the diff viewer occasionally rendering blank (line backgrounds only, no code) on first load until you scroll — the shared CodeView now reliably paints its first window. Internally, the diff viewer engine and chrome (status bar, file list, per-file header, sidebar) were extracted into a shared `@diffhub/diff-core` package that also powers the new diffhub.blode.co live PR viewer.

README.md

@@ -7,6 +7,8 @@ Local diff viewer for cmux.
 
 DiffHub opens your branch in a browser split so you can review it locally. By default it compares against the detected base branch, usually `origin/main`.
 
+**Live demo:** browse any GitHub PR in the viewer — e.g. [diffhub.blode.co/oven-sh/bun/pull/16000](https://diffhub.blode.co/oven-sh/bun/pull/16000).
+
 ![DiffHub screenshot](apps/cli/public/screenshot.png)
 
 ## Quick start

apps/cli/app/globals.css

@@ -2,6 +2,10 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
+/* Scan the shared diff-viewer package so its utility classes (sidebar, chrome,
+ * button variants) are generated — Tailwind skips node_modules by default. */
+@source "../../../packages/diff-core/src";
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {

apps/cli/app/layout.tsx

@@ -2,7 +2,7 @@ import { Agentation } from "agentation";
 import type { Metadata } from "next";
 import { JetBrains_Mono } from "next/font/google";
 import localFont from "next/font/local";
-import { DiffsWorkerProvider } from "@/components/DiffsWorkerProvider";
+import { DiffsWorkerProvider } from "@diffhub/diff-core/react";
 import { ThemeProvider } from "@/components/theme-provider";
 import "./globals.css";
 

apps/cli/components/DiffApp.tsx

@@ -2,25 +2,27 @@
 
 import type { AnnotationSide } from "@pierre/diffs";
 import { useCallback, useEffect, useMemo, useRef, useState, startTransition } from "react";
-import { StatusBar } from "./StatusBar";
-import type { DiffMode, WatchStatus } from "./StatusBar";
-import { FileList } from "./FileList";
+import { useTheme } from "next-themes";
+import { FileList, SidebarInset, SidebarProvider, StatusBar } from "@diffhub/diff-core/react";
+import type { DiffMode } from "@diffhub/diff-core/react";
 import { DiffViewer } from "./DiffViewer";
 import type { DiffViewerHandle } from "./DiffViewer";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { Button } from "@/components/ui/button";
 import { toCommentSide } from "@/lib/comment-sides";
 import type { Comment, CommentTag } from "@/lib/comment-types";
+import { exportCommentsAsPrompt } from "@/lib/export-comments";
 import { useLocalStorage } from "@/lib/use-local-storage";
+import { getWatchStatusMeta } from "@/lib/watch-status";
+import type { WatchStatus } from "@/lib/watch-status";
 import { WATCH_STREAM_EVENTS } from "@/lib/watch-stream";
-import type { DisplaySettings } from "@/lib/display-settings";
+import type { DisplaySettings, DiffThemeSelection } from "@diffhub/diff-core";
 import {
+  DEFAULT_DIFF_THEMES,
   DEFAULT_DISPLAY_SETTINGS,
   DISPLAY_SETTINGS_KEY,
+  normalizeDiffThemes,
   normalizeDisplaySettings,
-} from "@/lib/display-settings";
-import type { DiffThemeSelection } from "@/lib/diff-themes";
-import { DEFAULT_DIFF_THEMES, normalizeDiffThemes } from "@/lib/diff-themes";
+} from "@diffhub/diff-core";
 
 const DIFF_THEME_KEY = "diffhub-diff-theme";
 
@@ -823,6 +825,26 @@ export const DiffApp = ({
     return true;
   }, []);
 
+  // The shared StatusBar is decoupled from next-themes / comment storage, so the
+  // CLI feeds it the color mode and a comment-export callback here.
+  const { theme, setTheme } = useTheme();
+  const themeMode: "system" | "light" | "dark" =
+    theme === "light" || theme === "dark" ? theme : "system";
+
+  const commentsByFile = useMemo(() => {
+    const map = new Map<string, number>();
+    for (const comment of comments) {
+      map.set(comment.file, (map.get(comment.file) ?? 0) + 1);
+    }
+    return map;
+  }, [comments]);
+
+  const handleCopyComments = useCallback(async () => {
+    const text = exportCommentsAsPrompt(comments);
+    await navigator.clipboard.writeText(text);
+    await handleClearComments();
+  }, [comments, handleClearComments]);
+
   const syncNotice = getSyncNotice(loadError, filesData);
 
   if (loadError && filesData === null) {
@@ -851,7 +873,7 @@ export const DiffApp = ({
         files={filesData?.files ?? []}
         selectedFile={selectedFile}
         onSelectFile={scrollToFile}
-        comments={comments}
+        commentsByFile={commentsByFile}
         filterQuery={filterQuery}
         onFilterChange={setFilterQuery}
         isLoading={filesData === null}
@@ -870,9 +892,9 @@ export const DiffApp = ({
             baseBranch={filesData?.baseBranch ?? "main"}
             refreshing={refreshing}
             onRefresh={handleManualRefresh}
-            watchStatus={watchStatus}
-            comments={comments}
-            onClearComments={handleClearComments}
+            watch={getWatchStatusMeta(watchStatus, refreshing)}
+            commentCount={comments.length}
+            onCopyComments={handleCopyComments}
             diffMode={diffMode}
             onDiffModeChange={handleDiffModeChange}
             layout={layout}
@@ -885,6 +907,8 @@ export const DiffApp = ({
             onDisplaySettingsChange={handleDisplaySettingsChange}
             diffThemes={diffThemes}
             onDiffThemesChange={handleDiffThemesChange}
+            themeMode={themeMode}
+            onThemeModeChange={setTheme}
           />
         </div>
 

apps/cli/components/DiffViewer.tsx

@@ -27,11 +27,13 @@ import { useWorkerPool } from "@pierre/diffs/react";
 import { toAnnotationSide } from "@/lib/comment-sides";
 import type { Comment, CommentTag } from "@/lib/comment-types";
 import type { DiffFileStat } from "@/lib/diff-file-stat";
-import { DEFAULT_DIFF_THEMES } from "@/lib/diff-themes";
-import { CODE_VIEW_LAYOUT } from "@/lib/diff-stream/constants";
-import { usePatchLoader } from "./use-patch-loader";
-import { useIsWorkerPoolReady } from "./use-worker-pool-ready";
-import { FileDiffHeader } from "./FileDiffHeader";
+import { CODE_VIEW_LAYOUT, DEFAULT_DIFF_THEMES } from "@diffhub/diff-core";
+import {
+  FileDiffHeader,
+  useCodeViewPaintNudge,
+  useIsWorkerPoolReady,
+  usePatchLoader,
+} from "@diffhub/diff-core/react";
 import { cn } from "@/lib/utils";
 import { BranchIcon, CopySimpleIcon, TrashIcon, CheckIcon } from "blode-icons-react";
 import { Button } from "@/components/ui/button";
@@ -520,6 +522,7 @@ const DiffViewerInner = (
 
   const codeViewRef = useRef<CodeViewHandle<AnnotationData> | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const diffRootRef = useRef<HTMLDivElement | null>(null);
 
   // Single active inline-comment input target (gutter "+").
   const [commentTarget, setCommentTarget] = useState<CommentTarget | null>(null);
@@ -606,20 +609,28 @@ const DiffViewerInner = (
     setCommentTarget(null);
   }, []);
 
-  const diffQuery = useMemo(
-    () => (diffMode === "uncommitted" ? "?mode=uncommitted" : ""),
+  const endpoint = useMemo(
+    () => (diffMode === "uncommitted" ? "/api/diff?mode=uncommitted" : "/api/diff"),
     [diffMode],
   );
 
   const { initialItems, loadState, errorMessage, viewerKey, retry } =
     usePatchLoader<AnnotationData>({
-      diffQuery,
+      endpoint,
       onReset: handleReset,
       prepareItems,
       reloadKey,
       viewerRef: codeViewRef,
     });
 
+  // Force CodeView's first window to paint (Chrome can skip compositing the
+  // freshly-mounted shadow-DOM grid until a repaint is forced).
+  useCodeViewPaintNudge(
+    diffRootRef,
+    isWorkerReady && (loadState === "ready" || initialItems.length > 0),
+    viewerKey,
+  );
+
   // ── Push theme changes into the worker pool ────────────────────────────────
   // Background tokenizers keep the pair they were initialized with unless we
   // tell them otherwise, so re-resolve on every theme/themeType change.
@@ -924,7 +935,7 @@ const DiffViewerInner = (
   }
 
   return (
-    <div id="diff-container" className="flex min-h-0 flex-1 flex-col">
+    <div id="diff-container" className="flex min-h-0 flex-1 flex-col" ref={diffRootRef}>
       <DiffErrorBoundary>
         <CodeView
           key={viewerKey}

apps/cli/next.config.ts

@@ -15,6 +15,8 @@ const nextConfig: NextConfig = {
   // .next/standalone/apps/cli/server.js (mirroring the workspace path).
   outputFileTracingRoot: join(import.meta.dirname, "../.."),
   reactCompiler: true,
+  // Source-only workspace package shared with apps/web — Next transpiles it.
+  transpilePackages: ["@diffhub/diff-core"],
 };
 
 export default nextConfig;

apps/cli/package.json

@@ -64,6 +64,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.0",
+    "@diffhub/diff-core": "*",
     "@tailwindcss/postcss": "^4",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

apps/web/app/(marketing)/page.tsx

@@ -13,7 +13,9 @@ import { SplitText } from "griffo/motion";
 import { stagger } from "motion";
 import { MotionConfig, motion } from "motion/react";
 import Image from "next/image";
+import Link from "next/link";
 
+import { DemoLauncher } from "@/components/shared/demo-launcher";
 import { Button } from "@/components/ui/button";
 import { CopyButton } from "@/components/ui/copy-button";
 import { Kbd, KbdGroup } from "@/components/ui/kbd";
@@ -134,9 +136,16 @@ export default function HomePage(): React.JSX.Element {
             </motion.p>
             <motion.div
               {...blurUp}
-              className="mt-4 flex items-center justify-center"
+              className="mt-4 flex items-center justify-center gap-4"
               transition={{ ...blurUp.transition, delay: 0.6 }}
             >
+              <Link
+                className="inline-flex items-center gap-1.5 py-2 text-sm text-link transition-colors hover:text-link/90"
+                href={siteConfig.links.demo}
+              >
+                <SplitIcon aria-hidden="true" className="size-3.5 shrink-0" />
+                Try the live demo
+              </Link>
               <a
                 className="inline-flex items-center gap-1.5 py-2 text-sm text-link transition-colors hover:text-link/90"
                 href={siteConfig.links.loom}
@@ -147,6 +156,13 @@ export default function HomePage(): React.JSX.Element {
                 Watch demo
               </a>
             </motion.div>
+            <motion.div
+              {...blurUp}
+              className="mt-8"
+              transition={{ ...blurUp.transition, delay: 0.65 }}
+            >
+              <DemoLauncher />
+            </motion.div>
           </div>
 
           <motion.div
@@ -159,16 +175,20 @@ export default function HomePage(): React.JSX.Element {
               ease: [0.25, 1, 0.5, 1],
             }}
           >
-            <div className="rounded bg-card p-6">
+            <Link
+              aria-label="Open the live DiffHub demo for oven-sh/bun #16000"
+              className="block rounded bg-card p-6 transition-shadow hover:shadow-lg"
+              href={siteConfig.links.demo}
+            >
               <Image
-                alt="DiffHub showing a branch diff with file sidebar and split view"
+                alt="DiffHub live demo rendering a GitHub pull request diff with a file sidebar and split view"
                 className="w-full rounded"
                 height={777}
                 priority
                 src="/screenshot-2.png"
                 width={1400}
               />
-            </div>
+            </Link>
           </motion.div>
         </section>