feat(opentui-solid,ui): add solidjs export

package.json

@@ -39,6 +39,10 @@
       "types": "./dist/npm/opentui/index.d.ts",
       "import": "./dist/npm/opentui/index.js"
     },
+    "./opentui-solid": {
+      "types": "./dist/npm/opentui-solid/index.d.ts",
+      "import": "./dist/npm/opentui-solid/index.js"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -86,8 +90,9 @@
     "@hunk/session-broker-bun": "workspace:*",
     "@hunk/session-broker-core": "workspace:*",
     "@hunk/session-broker-node": "workspace:*",
-    "@opentui/core": "^0.1.88",
-    "@opentui/react": "^0.1.88",
+    "@opentui/core": "^0.1.107",
+    "@opentui/react": "^0.1.107",
+    "@opentui/solid": "^0.1.107",
     "@types/bun": "1.3.13",
     "@types/react": "^19.2.14",
     "@types/ws": "^8.18.1",
@@ -96,13 +101,24 @@
     "oxlint": "^1.56.0",
     "react": "^19.2.4",
     "simple-git-hooks": "^2.13.1",
+    "solid-js": "^1.9.0",
     "tuistory": "^0.0.16",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "@opentui/core": "^0.1.88",
     "@opentui/react": "^0.1.88",
-    "react": "^19.2.4"
+    "@opentui/solid": "^0.1.88",
+    "react": "^19.2.4",
+    "solid-js": "^1.9.0"
+  },
+  "peerDependenciesMeta": {
+    "@opentui/solid": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    }
   },
   "simple-git-hooks": {
     "pre-commit": "bunx lint-staged"

scripts/build-npm.ts

@@ -2,12 +2,14 @@
 
 import { chmodSync, copyFileSync, mkdirSync, readdirSync, rmSync } from "node:fs";
 import path from "node:path";
+import solidPlugin from "@opentui/solid/bun-plugin";
 
 const repoRoot = path.resolve(import.meta.dir, "..");
 const outdir = path.join(repoRoot, "dist", "npm");
 const typesOutdir = path.join(repoRoot, "dist", "npm-types");
 const opentuiOutdir = path.join(outdir, "opentui");
 const opentuiTypesDir = path.join(typesOutdir, "opentui");
+const opentuiSolidOutdir = path.join(outdir, "opentui-solid");
 
 const bunEnv = {
   ...process.env,
@@ -32,6 +34,7 @@ function runBun(args: string[]) {
 rmSync(outdir, { recursive: true, force: true });
 rmSync(typesOutdir, { recursive: true, force: true });
 mkdirSync(opentuiOutdir, { recursive: true });
+mkdirSync(opentuiSolidOutdir, { recursive: true });
 
 runBun([
   "build",
@@ -81,6 +84,30 @@ runBun([
   "index.js",
 ]);
 
+const opentuiSolidBuild = await Bun.build({
+  entrypoints: [path.join(repoRoot, "src", "opentui-solid", "index.ts")],
+  target: "node",
+  format: "esm",
+  outdir: opentuiSolidOutdir,
+  naming: { entry: "index.js" },
+  external: [
+    "solid-js",
+    "solid-js/web",
+    "solid-js/html",
+    "@opentui/core",
+    "@opentui/solid",
+    "@pierre/diffs",
+  ],
+  plugins: [solidPlugin],
+});
+
+if (!opentuiSolidBuild.success) {
+  for (const log of opentuiSolidBuild.logs) {
+    console.error(log.message);
+  }
+  throw new Error("Failed to build OpenTUI Solid export.");
+}
+
 runBun(["x", "tsc", "-p", path.join(repoRoot, "tsconfig.opentui.json")]);
 
 for (const entry of readdirSync(opentuiTypesDir)) {
@@ -89,7 +116,13 @@ for (const entry of readdirSync(opentuiTypesDir)) {
   }
 }
 
+copyFileSync(
+  path.join(repoRoot, "src", "opentui-solid", "index.d.ts"),
+  path.join(opentuiSolidOutdir, "index.d.ts"),
+);
+
 rmSync(typesOutdir, { recursive: true, force: true });
 
 console.log(`Built ${mainJs}`);
 console.log(`Built ${path.join(opentuiOutdir, "index.js")}`);
+console.log(`Built ${path.join(opentuiSolidOutdir, "index.js")}`);

src/main.tsx

@@ -83,7 +83,7 @@ async function main() {
     useMouse: shouldUseMouseForApp({
       hasControllingTerminal: Boolean(controllingTerminal),
     }),
-    useAlternateScreen: true,
+    screenMode: "alternate-screen",
     exitOnCtrlC: false,
     openConsoleOnError: true,
     onDestroy: () => controllingTerminal?.close(),

src/opentui-solid/HunkDiffBody.tsx

@@ -0,0 +1,94 @@
+/** @jsxImportSource @opentui/solid */
+import { createMemo } from "solid-js";
+import { findMaxLineNumber } from "../ui/diff/codeColumns";
+import { buildSplitRows, buildStackRows } from "../ui/diff/pierre";
+import { diffMessage, DiffRowViewComponent, fitText } from "../ui/diff/renderRows";
+import { useHighlightedDiff } from "./useHighlightedDiff";
+import { resolveTheme } from "../ui/themes";
+import { toInternalDiffFile } from "../opentui/model";
+import type { HunkDiffBodyProps } from "../opentui/types";
+
+/**
+ * Agent note / hunk annotation highlighting is intentionally disabled in the
+ * `opentui` / `opentui-solid` primitive exports. Annotations require the full
+ * Hunk app shell (session broker, agent context loading, note state). Both
+ * React and Solid entrypoints share this parity — see src/opentui/HunkDiffBody.tsx.
+ */
+const EMPTY_ANNOTATED_HUNK_INDICES = new Set<number>();
+
+/** Render one diff file body without owning navigation, app chrome, or global shortcuts. */
+export function HunkDiffBody(props: HunkDiffBodyProps) {
+  const layout = () => props.layout ?? "split";
+  const width = () => props.width;
+  const showLineNumbers = () => props.showLineNumbers ?? true;
+  const showHunkHeaders = () => props.showHunkHeaders ?? true;
+  const wrapLines = () => props.wrapLines ?? false;
+  const horizontalOffset = () => props.horizontalOffset ?? 0;
+  const highlight = () => props.highlight ?? true;
+  const selectedHunkIndex = () => props.selectedHunkIndex ?? 0;
+
+  const resolvedTheme = resolveTheme(props.theme, null);
+  const internalFile = createMemo(() => (props.file ? toInternalDiffFile(props.file) : undefined));
+  const resolvedHighlighted = useHighlightedDiff({
+    get file() {
+      return internalFile();
+    },
+    get appearance() {
+      return resolvedTheme.appearance;
+    },
+    get shouldLoadHighlight() {
+      return highlight();
+    },
+  });
+  const rows = createMemo(() =>
+    internalFile()
+      ? layout() === "split"
+        ? buildSplitRows(internalFile()!, resolvedHighlighted(), resolvedTheme)
+        : buildStackRows(internalFile()!, resolvedHighlighted(), resolvedTheme)
+      : [],
+  );
+  const lineNumberDigits = createMemo(
+    () => String(internalFile() ? findMaxLineNumber(internalFile()!) : 1).length,
+  );
+
+  if (!internalFile()) {
+    return (
+      <box style={{ width: "100%", paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={resolvedTheme.muted}>
+          {fitText("No file selected.", Math.max(1, width() - 2))}
+        </text>
+      </box>
+    );
+  }
+
+  if (internalFile()!.metadata.hunks.length === 0) {
+    return (
+      <box style={{ width: "100%", paddingLeft: 1, paddingRight: 1, paddingBottom: 1 }}>
+        <text fg={resolvedTheme.muted}>
+          {fitText(diffMessage(internalFile()!), Math.max(1, width() - 2))}
+        </text>
+      </box>
+    );
+  }
+
+  return (
+    <box style={{ width: "100%", flexDirection: "column" }}>
+      {rows().map((row) => (
+        <box style={{ width: "100%", flexDirection: "column" }}>
+          <DiffRowViewComponent
+            row={row}
+            width={width()}
+            lineNumberDigits={lineNumberDigits()}
+            showLineNumbers={showLineNumbers()}
+            showHunkHeaders={showHunkHeaders()}
+            wrapLines={wrapLines()}
+            codeHorizontalOffset={horizontalOffset()}
+            theme={resolvedTheme}
+            selected={row.hunkIndex === selectedHunkIndex()}
+            annotated={EMPTY_ANNOTATED_HUNK_INDICES.has(row.hunkIndex)}
+          />
+        </box>
+      ))}
+    </box>
+  );
+}

src/opentui-solid/HunkDiffFileHeader.tsx

@@ -0,0 +1,28 @@
+/** @jsxImportSource @opentui/solid */
+import { createMemo } from "solid-js";
+import { DiffFileHeaderRow } from "../ui/components/panes/DiffFileHeaderRow";
+import { resolveTheme } from "../ui/themes";
+import { toInternalDiffFile } from "../opentui/model";
+import type { HunkDiffFileHeaderProps } from "../opentui/types";
+
+/** Render Hunk's compact file header row for custom OpenTUI review layouts. */
+export function HunkDiffFileHeader(props: HunkDiffFileHeaderProps) {
+  const resolvedTheme = resolveTheme(props.theme, null);
+  const internalFile = createMemo(() => toInternalDiffFile(props.file));
+  const headerStatsWidth = () =>
+    Math.max(
+      7,
+      `+${internalFile().stats.additions}${internalFile().statsTruncated ? "+" : ""} -${internalFile().stats.deletions}`
+        .length,
+    );
+
+  return (
+    <DiffFileHeaderRow
+      file={internalFile()}
+      headerLabelWidth={Math.max(1, props.width - headerStatsWidth() - 2)}
+      headerStatsWidth={headerStatsWidth()}
+      theme={resolvedTheme}
+      onSelect={props.onSelect}
+    />
+  );
+}

src/opentui-solid/HunkDiffView.tsx

@@ -0,0 +1,19 @@
+/** @jsxImportSource @opentui/solid */
+import { HunkDiffBody } from "./HunkDiffBody";
+import type { HunkDiffViewProps } from "../opentui/types";
+
+/** Render one diff file body with an optional OpenTUI scrollbox wrapper. */
+export function HunkDiffView(props: HunkDiffViewProps) {
+  const scrollable = props.scrollable ?? true;
+  const content = <HunkDiffBody file={props.diff} {...props} />;
+
+  if (!scrollable) {
+    return content;
+  }
+
+  return (
+    <scrollbox width="100%" height="100%" scrollY={true} viewportCulling={true} focused={false}>
+      {content}
+    </scrollbox>
+  );
+}

src/opentui-solid/HunkFileNav.tsx

@@ -0,0 +1,43 @@
+/** @jsxImportSource @opentui/solid */
+import { createMemo } from "solid-js";
+import { FileGroupHeader, FileListItem } from "../ui/components/panes/FileListItem";
+import { buildSidebarEntries, sidebarEntryStatsWidth } from "../ui/lib/files";
+import { resolveTheme } from "../ui/themes";
+import { toInternalDiffFiles } from "../opentui/model";
+import type { HunkFileNavProps } from "../opentui/types";
+
+/** Render Hunk's file navigation list without global shortcuts, scrolling, borders, or surrounding chrome. */
+export function HunkFileNav(props: HunkFileNavProps) {
+  const resolvedTheme = resolveTheme(props.theme, null);
+  const internalFiles = createMemo(() => toInternalDiffFiles(props.files));
+  const entries = createMemo(() => buildSidebarEntries(internalFiles()));
+  const fileEntries = () => entries().filter((entry) => entry.kind === "file");
+  const statsWidth = () =>
+    Math.max(0, ...fileEntries().map((entry) => sidebarEntryStatsWidth(entry)));
+  const textWidth = () => Math.max(1, props.width - 1);
+
+  return (
+    <box style={{ width: "100%", flexDirection: "column", backgroundColor: resolvedTheme.panel }}>
+      {entries().map((entry) =>
+        entry.kind === "group" ? (
+          <FileGroupHeader
+            entry={entry}
+            paddingLeft={0}
+            textWidth={Math.max(1, props.width)}
+            theme={resolvedTheme}
+          />
+        ) : (
+          <FileListItem
+            entry={entry}
+            paddingLeft={0}
+            selected={entry.id === props.selectedFileId}
+            statsWidth={statsWidth()}
+            textWidth={textWidth()}
+            theme={resolvedTheme}
+            onSelect={() => props.onSelectFile?.(entry.id)}
+          />
+        ),
+      )}
+    </box>
+  );
+}

src/opentui-solid/HunkReviewStream.tsx

@@ -0,0 +1,83 @@
+/** @jsxImportSource @opentui/solid */
+import { createMemo } from "solid-js";
+import { resolveTheme } from "../ui/themes";
+import { HunkDiffBody } from "./HunkDiffBody";
+import { HunkDiffFileHeader } from "./HunkDiffFileHeader";
+import type { HunkDiffFileInput, HunkDiffSelection, HunkReviewStreamProps } from "../opentui/types";
+
+/** Resolve the active selection, defaulting to the first file and first hunk. */
+function resolveSelection(files: HunkDiffFileInput[], selection: HunkDiffSelection | undefined) {
+  if (selection && files.some((file) => file.id === selection.fileId)) {
+    return selection;
+  }
+
+  const first = files[0];
+  return first ? { fileId: first.id, hunkIndex: 0 } : undefined;
+}
+
+/** Render a top-to-bottom multi-file review stream without Hunk's app shell, keybindings, or scrolling. */
+export function HunkReviewStream(props: HunkReviewStreamProps) {
+  const resolvedTheme = resolveTheme(props.theme, null);
+  const activeSelection = createMemo(() => resolveSelection(props.files, props.selection));
+
+  if (props.files.length === 0) {
+    return (
+      <box style={{ width: "100%", paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={resolvedTheme.muted}>No files to render.</text>
+      </box>
+    );
+  }
+
+  const showFileSeparators = () => props.showFileSeparators ?? true;
+  const showFileHeaders = () => props.showFileHeaders ?? true;
+  const showLineNumbers = () => props.showLineNumbers ?? true;
+  const showHunkHeaders = () => props.showHunkHeaders ?? true;
+  const wrapLines = () => props.wrapLines ?? false;
+  const horizontalOffset = () => props.horizontalOffset ?? 0;
+  const highlight = () => props.highlight ?? true;
+
+  return (
+    <box style={{ width: "100%", flexDirection: "column", backgroundColor: resolvedTheme.panel }}>
+      {props.files.map((file, index) => {
+        const selectedHunkIndex =
+          activeSelection()?.fileId === file.id ? activeSelection()!.hunkIndex : -1;
+
+        return (
+          <box
+            style={{
+              width: "100%",
+              flexDirection: "column",
+              backgroundColor: resolvedTheme.panel,
+            }}
+          >
+            {showFileSeparators() && index > 0 ? (
+              <box style={{ width: "100%", height: 1, paddingLeft: 1, paddingRight: 1 }}>
+                <text fg={resolvedTheme.border}>{"─".repeat(Math.max(1, props.width - 2))}</text>
+              </box>
+            ) : null}
+            {showFileHeaders() ? (
+              <HunkDiffFileHeader
+                file={file}
+                width={props.width}
+                theme={props.theme}
+                onSelect={() => props.onSelectionChange?.({ fileId: file.id, hunkIndex: 0 })}
+              />
+            ) : null}
+            <HunkDiffBody
+              file={file}
+              layout={props.layout}
+              width={props.width}
+              theme={props.theme}
+              showLineNumbers={showLineNumbers()}
+              showHunkHeaders={showHunkHeaders()}
+              wrapLines={wrapLines()}
+              horizontalOffset={horizontalOffset()}
+              highlight={highlight()}
+              selectedHunkIndex={selectedHunkIndex}
+            />
+          </box>
+        );
+      })}
+    </box>
+  );
+}