@anscribe/opentui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 msmps
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,136 @@
+# @anscribe/opentui
+
+> Capture live UI from an [OpenTUI](https://github.com/sst/opentui) app and hand it to an agent. Clipboard by default, opt-in MCP queue.
+
+`installCapture` installs an Anscribe Capture Mode overlay on an OpenTUI `CliRenderer`. A headless `<Anscribe />` component is exposed for OpenTUI React apps.
+
+## Install
+
+```bash
+bun add @anscribe/opentui
+```
+
+To also persist Captures into a project-local queue that agents pull from, install [`@anscribe/mcp`](https://www.npmjs.com/package/@anscribe/mcp).
+
+## OpenTUI Core
+
+```ts
+import { installCapture } from "@anscribe/opentui";
+import { createCliRenderer } from "@opentui/core";
+
+const renderer = await createCliRenderer({ useMouse: true });
+
+const capture = installCapture(renderer, { keybinding: "ctrl+g" });
+
+// On shutdown:
+await capture.close();
+```
+
+The returned handle exposes `dispose()` (sync) and `close()` (async). Call one before destroying the renderer so any in-flight sink writes complete.
+
+## OpenTUI React
+
+```tsx
+import "@anscribe/opentui/react/preload";
+
+import { Anscribe } from "@anscribe/opentui/react";
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+
+function App() {
+  return (
+    <>
+      <Anscribe keybinding="ctrl+g" />
+      <text id="save-action" content="Save" />
+    </>
+  );
+}
+
+const renderer = await createCliRenderer({ useMouse: true });
+createRoot(renderer).render(<App />);
+```
+
+`@anscribe/opentui/react/preload` **must be imported before `@opentui/react`**. It installs a React DevTools hook that lets Anscribe enrich Captures with `componentName` and `componentPath`. If the preload is missing or imported late, Capture Mode still works — React metadata is simply absent and `<Anscribe />` warns once in development.
+
+The preload is a side-effect re-export of [`@anscribe/react/preload`](https://www.npmjs.com/package/@anscribe/react). Use the OpenTUI subpath here; reach for `@anscribe/react/preload` directly only if you're building a non-OpenTUI adapter.
+
+## Capture Mode
+
+| Key | Action |
+|---|---|
+| `ctrl+g` | Enter Capture Mode (configurable via `keybinding`) |
+| `tab` / `↓` / `→` / `j` | Next selectable renderable |
+| `shift+tab` / `↑` / `←` / `k` | Previous renderable |
+| `space` / `enter` | Toggle current selection |
+| `backspace` / `delete` | Deselect current target |
+| `a` | Open instruction prompt |
+| `enter` (in prompt) | Save pending Capture |
+| `esc` (in prompt) | Cancel draft, keep selection |
+| `esc` / `q` | Exit Capture Mode |
+
+With mouse input enabled, left-clicking a renderable selects it (clicks on text-node children resolve to the containing renderable). Capture Mode draws a translucent highlight over the current target. Normal app input is paused while Capture Mode is active and resumes on exit.
+
+## Options
+
+`installCapture(renderer, options?)` and `<Anscribe />` share the same options:
+
+| Option | Type | Default | |
+|---|---|---|---|
+| `keybinding` | `string` | `"ctrl+g"` | Entry shortcut |
+| `highlightColor` | hex | — | Color of the current target highlight |
+| `selectedColor` | hex | — | Color of selected targets |
+
+## Clipboard handoff (always on)
+
+Every committed Capture is written to the system clipboard via [OSC52](https://chromium.googlesource.com/apps/libapps/+/master/hterm/doc/ControlSequences.md#OSC-52) as markdown. Works over SSH, inside dev containers, and on terminals without native bindings or permission prompts.
+
+The payload format:
+
+```
+fix this row to use the new auth flow
+
+<BoxRenderable id="settings-status"> "Status: unsaved preference changes"
+  in SettingsPanel (at src/settings.tsx:42)
+  in App (at src/index.tsx:10)
+```
+
+## Sinks (opt-in fan-out)
+
+Every committed Capture goes to the clipboard first; additional sinks fan out from there. The canonical sink is the MCP queue from [`@anscribe/mcp`](https://www.npmjs.com/package/@anscribe/mcp) — added with a single side-effect import at the top of your entry file:
+
+```ts
+import "@anscribe/mcp/sink";
+
+import { installCapture } from "@anscribe/opentui";
+// ...installCapture as usual; the sink is already wired.
+```
+
+The side-effect module registers the sink with `@anscribe/opentui`'s internal registry. `installCapture` snapshots the registry at host install time, so the import must run before the first `installCapture` call.
+
+### Custom and programmatic sinks
+
+For dynamic registration (tests, multi-tenant runners, custom destinations) reach for `@anscribe/opentui/sinks`:
+
+```ts
+import { registerCaptureSink, type CaptureSink } from "@anscribe/opentui/sinks";
+
+const webhookSink: CaptureSink = {
+  name: "webhook",
+  write: async (capture) => {
+    await fetch("https://example.com/captures", {
+      method: "POST",
+      body: JSON.stringify(capture),
+    });
+  },
+};
+
+registerCaptureSink(webhookSink);
+```
+
+`CaptureSink` lives in `@anscribe/core`; the subpath here re-exports it for ergonomics. `resetCaptureSinks()` is also exported for test isolation — production code should not use it.
+
+If a sink fails, the host's failure reporter logs the error tagged with the sink's name. The clipboard handoff has already happened, so the user-visible state stays consistent. The capture state machine has already committed the Capture; sink failures don't roll it back.
+
+## License
+
+MIT © [msmps](https://github.com/msmps)

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+import { n as InstallCaptureOptions, t as CaptureInstallation } from "./install-Bbw_EVFu.mjs";
+import { Capture, CaptureId, CaptureMetadata, CaptureSink, CaptureStatus, CapturedTarget, CapturedTargetId, IsoTimestamp, SourceReference, TerminalCellBounds } from "@anscribe/core";
+import { CliRenderer } from "@opentui/core";
+
+//#region src/index.d.ts
+declare function installCapture(renderer: CliRenderer, options?: InstallCaptureOptions): CaptureInstallation;
+//#endregion
+export { type Capture, type CaptureId, type CaptureInstallation, type CaptureMetadata, type CaptureSink, type CaptureStatus, type CapturedTarget, type CapturedTargetId, type InstallCaptureOptions, type IsoTimestamp, type SourceReference, type TerminalCellBounds, installCapture };

package/dist/index.mjs

@@ -0,0 +1,8 @@
+import { t as installCaptureWithEnrichment } from "./install-DYrt2HTN.mjs";
+import { CaptureMetadataEnrichment } from "@anscribe/core";
+//#region src/index.ts
+function installCapture(renderer, options = {}) {
+	return installCaptureWithEnrichment(renderer, options, CaptureMetadataEnrichment.live);
+}
+//#endregion
+export { installCapture };

package/dist/install-Bbw_EVFu.d.mts

@@ -0,0 +1,18 @@
+import { CaptureMetadataEnrichment } from "@anscribe/core";
+import { Layer } from "effect";
+import { CliRenderer } from "@opentui/core";
+
+//#region src/internal/install.d.ts
+interface InstallCaptureOptions {
+  readonly keybinding?: string;
+  /** Hex color (e.g. "#ffd166") drawn over the target under the cursor. */
+  readonly highlightColor?: string;
+  /** Hex color drawn over each selected target. */
+  readonly selectedColor?: string;
+}
+interface CaptureInstallation {
+  readonly dispose: () => void;
+  readonly close: () => Promise<void>;
+}
+//#endregion
+export { InstallCaptureOptions as n, CaptureInstallation as t };

package/dist/install-DYrt2HTN.mjs

@@ -0,0 +1,711 @@
+import { t as readRegisteredCaptureSinks } from "./sink-registry-DAlYVk2U.mjs";
+import { CaptureHostFailureReporter, CaptureMetadataEnrichment, CaptureMode, CaptureModeIntent, CapturePersistence, CapturePersistenceError, CapturedTarget, decodeAnscribeDataEffect, formatCaptureForClipboard, generateCapturedTargetId, isAnscribeOverlay, markAsOverlay, noCaptureEnrichment, resolveTargetAtCell, selectCurrentTarget } from "@anscribe/core";
+import { Effect, Fiber, Layer, ManagedRuntime } from "effect";
+import { BoxRenderable, InputRenderable, InputRenderableEvents, RGBA, TextRenderable } from "@opentui/core";
+import { customAlphabet } from "nanoid";
+//#region src/renderable-tree.ts
+function asRenderableRecord(value) {
+	return value !== null && typeof value === "object" ? value : void 0;
+}
+function readRenderableChildren(renderable) {
+	const opentuiChildren = typeof renderable.getChildren === "function" ? renderable.getChildren() : void 0;
+	return Array.isArray(opentuiChildren) ? opentuiChildren : [];
+}
+function walkRenderableTree(rootRenderable, visit, options = {}) {
+	const step = (value, ancestry) => {
+		const renderable = asRenderableRecord(value);
+		if (renderable === void 0) return;
+		if (options.shouldSkipSubtree?.(renderable) === true) return;
+		const nextAncestry = [...ancestry, readRenderableType(renderable)];
+		visit(renderable, nextAncestry);
+		for (const child of readRenderableChildren(renderable)) step(child, nextAncestry);
+	};
+	step(rootRenderable, []);
+}
+function isRenderableVisible(renderable) {
+	return renderable.visible !== false;
+}
+function readRenderableType(renderable) {
+	return readConstructorName(renderable.constructor) ?? "Renderable";
+}
+function readFiniteNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+function readConstructorName(value) {
+	if (typeof value === "function") return value.name.length > 0 ? value.name : void 0;
+	const name = asRenderableRecord(value)?.name;
+	return typeof name === "string" && name.length > 0 ? name : void 0;
+}
+//#endregion
+//#region src/discovery.ts
+const discoverVisibleTargets = Effect.fn("Discovery.discoverVisibleTargets")(function* (rootRenderable, options) {
+	const candidates = [];
+	walkRenderableTree(rootRenderable, (renderable, ancestry) => {
+		if (!isRenderableVisible(renderable)) return;
+		candidates.push({
+			renderable,
+			ancestry
+		});
+	}, { shouldSkipSubtree: isAnscribeOverlay });
+	return yield* Effect.forEach(candidates, ({ renderable, ancestry }) => Effect.gen(function* () {
+		const visibleContent = readVisibleContent(renderable);
+		const target = yield* decodeAnscribeDataEffect(CapturedTarget, {
+			id: yield* generateCapturedTargetId,
+			type: readRenderableType(renderable),
+			bounds: readBounds(renderable),
+			ancestry,
+			...visibleContent != null && { visibleContent }
+		});
+		const enrichment = yield* readEnrichment(options, renderable, target);
+		return enrichment === void 0 ? target : yield* decodeAnscribeDataEffect(CapturedTarget, {
+			...target,
+			...enrichment.metadata !== void 0 && { metadata: enrichment.metadata },
+			...enrichment.sourceReferences !== void 0 && { sourceReferences: enrichment.sourceReferences }
+		});
+	}));
+});
+function readBounds(renderable) {
+	return {
+		x: readFiniteNumber(renderable.screenX),
+		y: readFiniteNumber(renderable.screenY),
+		width: readFiniteNumber(renderable.width),
+		height: readFiniteNumber(renderable.height)
+	};
+}
+function readVisibleContent(renderable) {
+	const text = stringifyVisibleContent(renderable.plainText ?? renderable.content ?? renderable.title);
+	return text.length > 0 ? text : void 0;
+}
+function stringifyVisibleContent(content) {
+	if (typeof content === "string") return content;
+	const chunks = asRenderableRecord(content)?.chunks;
+	if (Array.isArray(chunks)) return chunks.map((chunk) => asRenderableRecord(chunk)?.text).filter((text) => typeof text === "string").join("");
+	return "";
+}
+function readEnrichment(options, renderable, target) {
+	return Effect.gen(function* () {
+		const enriched = yield* options.metadataEnricher?.({
+			renderable,
+			target
+		}) ?? noCaptureEnrichment;
+		const identifier = readRenderableIdentifier(renderable);
+		const metadata = enriched?.metadata === void 0 && identifier === void 0 ? void 0 : {
+			...enriched?.metadata,
+			...identifier !== void 0 ? { identifier } : {}
+		};
+		const sourceReferences = enriched?.sourceReferences;
+		const hasSources = sourceReferences !== void 0 && sourceReferences.length > 0;
+		if (metadata === void 0 && !hasSources) return;
+		return {
+			...metadata !== void 0 && { metadata },
+			...hasSources && { sourceReferences }
+		};
+	});
+}
+function readRenderableIdentifier(renderable) {
+	const identifier = renderable.id;
+	return typeof identifier === "string" && identifier.length > 0 ? identifier : void 0;
+}
+//#endregion
+//#region src/internal/ids.ts
+const generateRenderableIdSuffix = customAlphabet("0123456789abcdefghijklmnopqrstuvwxyz", 12);
+//#endregion
+//#region src/host-helpers.ts
+const CAPTURE_MOUSE_HANDLED = Symbol("anscribe.captureMouseHandled");
+function readSelectedTargets(state) {
+	return state.selectedTargetIds.map((targetId) => state.targets.find((target) => target.id === targetId)).filter((target) => target !== void 0);
+}
+function subscribeToKeypress(renderer, listener) {
+	const keyInput = renderer.keyInput;
+	if (keyInput === void 0) return;
+	if (typeof keyInput.prependListener === "function") keyInput.prependListener("keypress", listener);
+	else if (typeof keyInput.on === "function") keyInput.on("keypress", listener);
+	else return;
+	return () => {
+		if (typeof keyInput.off === "function") {
+			keyInput.off("keypress", listener);
+			return;
+		}
+		if (typeof keyInput.removeListener === "function") keyInput.removeListener("keypress", listener);
+	};
+}
+function readRendererWidth(renderer) {
+	const rendererRecord = asRenderableRecord(renderer);
+	const rootRecord = asRenderableRecord(renderer.root);
+	return readFiniteNumber(rendererRecord?.width ?? rootRecord?.width) || 80;
+}
+function readRendererSize(renderer) {
+	const rendererRecord = asRenderableRecord(renderer);
+	const rootRecord = asRenderableRecord(renderer.root);
+	return {
+		width: readFiniteNumber(rendererRecord?.width ?? rootRecord?.width) || 80,
+		height: readFiniteNumber(rendererRecord?.height ?? rootRecord?.height) || 24
+	};
+}
+function shouldSelectFromMouseEvent(event) {
+	return event.type === "down" && event.button === 0 && event[CAPTURE_MOUSE_HANDLED] !== true;
+}
+function discoverMouseRenderables(renderer) {
+	const mouseRenderables = [];
+	walkRenderableTree(renderer.root, (renderable) => {
+		if (isRenderableVisible(renderable) && hasProcessMouseEvent(renderable)) mouseRenderables.push(renderable);
+	}, { shouldSkipSubtree: isAnscribeOverlay });
+	return mouseRenderables;
+}
+function hasProcessMouseEvent(renderable) {
+	return typeof renderable.processMouseEvent === "function";
+}
+//#endregion
+//#region src/inspector.ts
+const INSPECTOR_BORDER_COLOR = "#ffffff";
+const INSPECTOR_TEXT_COLOR = "#ffffff";
+const INSPECTOR_DIM_COLOR = "#777777";
+const VISIBLE_CONTENT_PREVIEW_LIMIT = 32;
+function formatInspectorLines(target) {
+	return [
+		target.metadata?.componentName ?? target.type,
+		readSubtitle(target),
+		formatSourceReference(target.sourceReferences?.[0])
+	].filter((line) => line !== void 0);
+}
+function readSubtitle(target) {
+	const componentName = target.metadata?.componentName;
+	const identifier = target.metadata?.identifier;
+	if (identifier !== void 0 && identifier !== componentName) return `#${identifier}`;
+	const preview = readVisibleContentPreview(target.visibleContent);
+	if (preview !== void 0) return preview;
+	return componentName !== void 0 ? target.type : void 0;
+}
+function readVisibleContentPreview(content) {
+	if (content === void 0) return void 0;
+	const collapsed = content.replace(/\s+/g, " ").trim();
+	if (collapsed.length === 0) return void 0;
+	return `"${collapsed.length > VISIBLE_CONTENT_PREVIEW_LIMIT ? `${collapsed.slice(0, VISIBLE_CONTENT_PREVIEW_LIMIT - 1)}…` : collapsed}"`;
+}
+function formatSourceReference(reference) {
+	if (reference === void 0) return void 0;
+	const { file, line } = reference;
+	if (file === void 0) return void 0;
+	const basename = file.slice(file.lastIndexOf("/") + 1);
+	return line === void 0 ? basename : `${basename}:${line}`;
+}
+//#endregion
+//#region src/host-core.ts
+const DEFAULT_HIGHLIGHT_HEX = "#06b6d4";
+const DEFAULT_SELECTED_HEX = "#ec4899";
+const HIGHLIGHT_ALPHA = 100;
+const SELECTED_ALPHA = 130;
+const HOVER_PLACEHOLDER_MESSAGE = "Move mouse over a target";
+const INSPECTOR_BACKGROUND_RGBA = RGBA.fromValues(0, 0, 0, .6);
+const INSPECTOR_ID_PREFIX = "anscribe-inspector-";
+const SELECTED_OVERLAY_Z_INDEX = 999998;
+const HIGHLIGHT_OVERLAY_Z_INDEX = 999999;
+const HIGHLIGHT_OVERLAY_ID_PREFIX = "anscribe-highlight-";
+const SELECTED_OVERLAY_ID_PREFIX = "anscribe-selected-";
+function installPickerHostCore(renderer, initialState, options) {
+	const highlightRGBA = hexToOverlayRGBA(options.highlightColor ?? DEFAULT_HIGHLIGHT_HEX, HIGHLIGHT_ALPHA);
+	const selectedRGBA = hexToOverlayRGBA(options.selectedColor ?? DEFAULT_SELECTED_HEX, SELECTED_ALPHA);
+	let lastSyncedState = initialState;
+	let hoveredTargetId;
+	const requestRender = () => {
+		renderer.requestRender?.();
+	};
+	let highlightOverlay;
+	const selectedOverlays = /* @__PURE__ */ new Map();
+	const makeOverlay = (target, background, zIndex, idPrefix) => {
+		const overlay = new BoxRenderable(renderer, {
+			id: `${idPrefix}${generateRenderableIdSuffix()}`,
+			position: "absolute",
+			left: target.bounds.x,
+			top: target.bounds.y,
+			width: Math.max(target.bounds.width, 1),
+			height: Math.max(target.bounds.height, 1),
+			zIndex,
+			backgroundColor: background,
+			shouldFill: true
+		});
+		markAsOverlay(overlay);
+		renderer.root.add(overlay);
+		return overlay;
+	};
+	const applyOverlayBounds = (overlay, bounds) => {
+		overlay.left = bounds.x;
+		overlay.top = bounds.y;
+		overlay.width = Math.max(bounds.width, 1);
+		overlay.height = Math.max(bounds.height, 1);
+	};
+	const destroyHighlightOverlay = () => {
+		if (highlightOverlay === void 0) return;
+		highlightOverlay.destroyRecursively();
+		highlightOverlay = void 0;
+	};
+	const destroyAllSelectedOverlays = () => {
+		for (const overlay of selectedOverlays.values()) overlay.destroyRecursively();
+		selectedOverlays.clear();
+	};
+	const syncHighlightOverlay = (state) => {
+		const highlighted = selectCurrentTarget(state);
+		const selectedTargets = state.active ? readSelectedTargets(state) : [];
+		const wantSelectedIds = new Set(selectedTargets.map((target) => target.id));
+		for (const [id, overlay] of selectedOverlays) {
+			if (wantSelectedIds.has(id)) continue;
+			overlay.destroyRecursively();
+			selectedOverlays.delete(id);
+		}
+		for (const target of selectedTargets) {
+			const existing = selectedOverlays.get(target.id);
+			if (existing !== void 0) {
+				applyOverlayBounds(existing, target.bounds);
+				continue;
+			}
+			selectedOverlays.set(target.id, makeOverlay(target, selectedRGBA, SELECTED_OVERLAY_Z_INDEX, SELECTED_OVERLAY_ID_PREFIX));
+		}
+		if (highlighted === void 0) destroyHighlightOverlay();
+		else if (highlightOverlay === void 0) highlightOverlay = makeOverlay(highlighted, highlightRGBA, HIGHLIGHT_OVERLAY_Z_INDEX, HIGHLIGHT_OVERLAY_ID_PREFIX);
+		else applyOverlayBounds(highlightOverlay, highlighted.bounds);
+		requestRender();
+	};
+	let liveInspector;
+	let lastSyncedInspectorLines;
+	const destroyInspector = () => {
+		if (liveInspector === void 0) return;
+		liveInspector.container.destroyRecursively();
+		liveInspector = void 0;
+		lastSyncedInspectorLines = void 0;
+	};
+	const ensureInspector = () => {
+		if (liveInspector !== void 0) return liveInspector;
+		const container = new BoxRenderable(renderer, {
+			id: `${INSPECTOR_ID_PREFIX}${generateRenderableIdSuffix()}`,
+			position: "absolute",
+			right: 1,
+			top: 1,
+			width: 36,
+			height: 3,
+			zIndex: 1e6,
+			border: true,
+			borderStyle: "single",
+			borderColor: INSPECTOR_BORDER_COLOR,
+			backgroundColor: INSPECTOR_BACKGROUND_RGBA,
+			shouldFill: true,
+			title: "inspector",
+			paddingX: 1
+		});
+		const text = new TextRenderable(renderer, {
+			id: `${container.id}-text`,
+			content: "",
+			fg: INSPECTOR_TEXT_COLOR
+		});
+		markAsOverlay(container);
+		markAsOverlay(text);
+		container.add(text);
+		renderer.root.add(container);
+		liveInspector = {
+			container,
+			text
+		};
+		return liveInspector;
+	};
+	const syncInspector = (state) => {
+		const content = computeInspectorContent(state, hoveredTargetId);
+		if (content === void 0) {
+			destroyInspector();
+			return;
+		}
+		const lines = content.lines;
+		const inspector = ensureInspector();
+		inspector.container.height = Math.max(lines.length + 2, 3);
+		if (lastSyncedInspectorLines === void 0 || lastSyncedInspectorLines.length !== lines.length || lastSyncedInspectorLines.some((line, index) => line !== lines[index])) {
+			inspector.text.content = lines.join("\n");
+			inspector.text.fg = content.kind === "placeholder" ? INSPECTOR_DIM_COLOR : INSPECTOR_TEXT_COLOR;
+			lastSyncedInspectorLines = lines;
+		}
+	};
+	const updateHoverFromEvent = (event) => {
+		if (!lastSyncedState.active) return;
+		const nextHoveredId = resolveTargetAtCell(lastSyncedState.targets, event.x, event.y)?.id;
+		if (nextHoveredId === hoveredTargetId) return;
+		hoveredTargetId = nextHoveredId;
+		syncInspector(lastSyncedState);
+		requestRender();
+	};
+	const mousePatches = /* @__PURE__ */ new Map();
+	const restoreMouseHandlers = () => {
+		for (const [renderable, processMouseEvent] of mousePatches) renderable.processMouseEvent = processMouseEvent;
+		mousePatches.clear();
+	};
+	const patchMouseHandlers = () => {
+		for (const renderable of discoverMouseRenderables(renderer)) {
+			if (mousePatches.has(renderable)) continue;
+			const originalProcessMouseEvent = renderable.processMouseEvent.bind(renderable);
+			mousePatches.set(renderable, originalProcessMouseEvent);
+			renderable.processMouseEvent = (event) => {
+				if (lastSyncedState.active) {
+					if (event.type === "move" || event.type === "drag") updateHoverFromEvent(event);
+					else if (shouldSelectFromMouseEvent(event)) {
+						event[CAPTURE_MOUSE_HANDLED] = true;
+						options.onPrimaryClick(event);
+						event.preventDefault();
+						event.stopPropagation();
+						requestRender();
+						return;
+					}
+				}
+				originalProcessMouseEvent(event);
+			};
+		}
+	};
+	const clearHover = () => {
+		if (hoveredTargetId === void 0) return;
+		hoveredTargetId = void 0;
+	};
+	const syncRenderables = (next) => {
+		const previous = lastSyncedState;
+		lastSyncedState = next;
+		if (!previous.active && next.active) patchMouseHandlers();
+		else if (previous.active && !next.active) {
+			restoreMouseHandlers();
+			clearHover();
+		}
+		if (hoveredTargetId !== void 0 && !next.targets.some((target) => target.id === hoveredTargetId)) clearHover();
+		syncHighlightOverlay(next);
+		syncInspector(next);
+	};
+	const removeKeypressListener = subscribeToKeypress(renderer, options.onKeypress);
+	syncRenderables(initialState);
+	return {
+		syncRenderables,
+		requestRender,
+		dispose: () => {
+			removeKeypressListener?.();
+			destroyInspector();
+			destroyHighlightOverlay();
+			destroyAllSelectedOverlays();
+			restoreMouseHandlers();
+		}
+	};
+}
+function computeInspectorContent(state, hoveredTargetId) {
+	if (!state.active) return void 0;
+	const hovered = hoveredTargetId !== void 0 ? state.targets.find((target) => target.id === hoveredTargetId) : void 0;
+	if (hovered !== void 0) return {
+		kind: "target",
+		lines: formatInspectorLines(hovered)
+	};
+	const firstSelected = readSelectedTargets(state)[0];
+	if (firstSelected !== void 0) return {
+		kind: "target",
+		lines: formatInspectorLines(firstSelected)
+	};
+	const current = selectCurrentTarget(state);
+	if (current !== void 0) return {
+		kind: "target",
+		lines: formatInspectorLines(current)
+	};
+	if (state.targets.length > 0) return {
+		kind: "placeholder",
+		lines: [HOVER_PLACEHOLDER_MESSAGE]
+	};
+}
+function hexToOverlayRGBA(hex, alpha0to255) {
+	const cleaned = hex.replace(/^#/, "");
+	const r = parseInt(cleaned.slice(0, 2), 16);
+	const g = parseInt(cleaned.slice(2, 4), 16);
+	const b = parseInt(cleaned.slice(4, 6), 16);
+	return RGBA.fromInts(r, g, b, alpha0to255);
+}
+//#endregion
+//#region src/keys.ts
+function routeCaptureKey(input) {
+	const { state, key } = input;
+	if (state.instructionDraft) return key === "escape" || key === "esc" ? {
+		_tag: "Intent",
+		intent: CaptureModeIntent.CancelDraft()
+	} : void 0;
+	if (!state.active && key === normalizeKey(input.keybinding ?? "ctrl+g")) return { _tag: "EnterMode" };
+	if (!state.active) return;
+	const intent = mapActiveKey(key);
+	return intent === void 0 ? void 0 : {
+		_tag: "Intent",
+		intent
+	};
+}
+const EXIT_KEYS = new Set([
+	"escape",
+	"esc",
+	"q"
+]);
+const NEXT_KEYS = new Set([
+	"tab",
+	"arrowdown",
+	"arrowright",
+	"down",
+	"right",
+	"j"
+]);
+const PREVIOUS_KEYS = new Set([
+	"shift+tab",
+	"arrowup",
+	"arrowleft",
+	"up",
+	"left",
+	"k"
+]);
+const TOGGLE_KEYS = new Set([
+	" ",
+	"space",
+	"enter",
+	"return"
+]);
+const DESELECT_KEYS = new Set(["backspace", "delete"]);
+function mapActiveKey(key) {
+	if (EXIT_KEYS.has(key)) return CaptureModeIntent.ExitMode();
+	if (key === "a") return CaptureModeIntent.StartDraft();
+	if (NEXT_KEYS.has(key)) return CaptureModeIntent.MoveSelection({ direction: "next" });
+	if (PREVIOUS_KEYS.has(key)) return CaptureModeIntent.MoveSelection({ direction: "previous" });
+	if (TOGGLE_KEYS.has(key)) return CaptureModeIntent.ToggleCurrent();
+	if (DESELECT_KEYS.has(key)) return CaptureModeIntent.DeselectCurrent();
+}
+function readKeyEventInput(event) {
+	const parts = [];
+	if (event.ctrl) parts.push("ctrl");
+	if (event.meta || event.option) parts.push("meta");
+	if (event.shift) parts.push("shift");
+	parts.push(event.name === "linefeed" ? "enter" : event.name);
+	return normalizeKey(parts.join("+"));
+}
+function normalizeKey(input) {
+	return input.trim().toLowerCase().replaceAll(" ", "");
+}
+//#endregion
+//#region src/capture-host.ts
+const INSTRUCTION_BORDER_COLOR = "#ffffff";
+const INSTRUCTION_TEXT_COLOR = "#ffffff";
+const INSTRUCTION_BACKGROUND_COLOR = "#000000";
+const INSTRUCTION_HEIGHT = 3;
+function makeCaptureHostLayer(renderer, options = {}) {
+	return Layer.effectDiscard(buildCaptureHost(renderer, options));
+}
+const buildCaptureHost = (renderer, options) => Effect.gen(function* () {
+	const captureMode = yield* CaptureMode;
+	const capturePersistence = yield* CapturePersistence;
+	const enrichment = yield* CaptureMetadataEnrichment;
+	const failureReporter = yield* CaptureHostFailureReporter;
+	const captureModeContext = yield* Effect.context();
+	const pendingPersistence = /* @__PURE__ */ new Set();
+	const discoveryOptions = { metadataEnricher: (input) => enrichment.enrich(input) };
+	const initialState = yield* captureMode.current();
+	let lastSyncedState = initialState;
+	let liveInstructionDraft;
+	const commitDraftFromInput = (body) => {
+		dispatch(CaptureModeIntent.CommitDraft({ body }));
+	};
+	const syncInstructionDraftRenderable = (state) => {
+		if (!state.instructionDraft) {
+			if (liveInstructionDraft !== void 0) {
+				destroyInstructionDraft(liveInstructionDraft);
+				liveInstructionDraft = void 0;
+			}
+			return;
+		}
+		if (liveInstructionDraft === void 0) {
+			const target = readAnchorTarget(state);
+			if (target === void 0) return;
+			liveInstructionDraft = createInstructionDraft(renderer, commitDraftFromInput, target.bounds);
+		}
+	};
+	const dispatch = (intent) => {
+		const previous = lastSyncedState;
+		const result = Effect.runSyncWith(captureModeContext)(captureMode.dispatch(intent).pipe(Effect.catch((error) => Effect.as(failureReporter.report(error), { state: previous }))));
+		const next = result.state;
+		lastSyncedState = next;
+		hostCore.syncRenderables(next);
+		syncInstructionDraftRenderable(next);
+		if (result.toPersist !== void 0) {
+			const fiber = Effect.runForkWith(captureModeContext)(capturePersistence.createCapture(result.toPersist).pipe(Effect.catch((error) => failureReporter.report(error))));
+			fiber.addObserver(() => {
+				pendingPersistence.delete(fiber);
+			});
+			pendingPersistence.add(fiber);
+		}
+	};
+	const handleKeypress = (event) => {
+		const route = routeCaptureKey({
+			state: lastSyncedState,
+			key: readKeyEventInput(event),
+			keybinding: options.keybinding
+		});
+		if (route === void 0) return;
+		if (route._tag === "EnterMode") {
+			const targets = Effect.runSyncWith(captureModeContext)(discoverVisibleTargets(renderer.root, discoveryOptions).pipe(Effect.catch((error) => Effect.as(failureReporter.report(error), []))));
+			dispatch(CaptureModeIntent.EnterMode({ targets }));
+		} else dispatch(route.intent);
+		event.preventDefault();
+		event.stopPropagation();
+		hostCore.requestRender();
+	};
+	const hostCore = installPickerHostCore(renderer, initialState, {
+		onPrimaryClick: (event) => {
+			if (lastSyncedState.instructionDraft) {
+				dispatch(CaptureModeIntent.CancelDraft());
+				return;
+			}
+			dispatch(CaptureModeIntent.SelectAtCell({
+				x: event.x,
+				y: event.y
+			}));
+		},
+		onKeypress: handleKeypress,
+		highlightColor: options.highlightColor,
+		selectedColor: options.selectedColor
+	});
+	const handleResize = () => {
+		if (liveInstructionDraft === void 0) return;
+		resizeInstructionDraft(liveInstructionDraft, renderer);
+		hostCore.requestRender();
+	};
+	renderer.on("resize", handleResize);
+	yield* Effect.addFinalizer(() => Effect.gen(function* () {
+		dispatch(CaptureModeIntent.ExitMode());
+		renderer.off("resize", handleResize);
+		if (liveInstructionDraft !== void 0) {
+			destroyInstructionDraft(liveInstructionDraft);
+			liveInstructionDraft = void 0;
+		}
+		hostCore.dispose();
+		yield* Fiber.awaitAll(pendingPersistence).pipe(Effect.asVoid);
+	}));
+});
+function computeDraftWidths(renderer) {
+	const boxWidth = Math.max(Math.min(readRendererWidth(renderer), 44), 18);
+	return {
+		boxWidth,
+		inputWidth: Math.max(boxWidth - 4, 1)
+	};
+}
+const PLACEMENT_PADDING = 1;
+function computeDraftPlacement(viewport, width, targetBounds) {
+	const candidates = [
+		{
+			left: targetBounds.x - width - PLACEMENT_PADDING,
+			top: targetBounds.y
+		},
+		{
+			left: targetBounds.x + targetBounds.width + PLACEMENT_PADDING,
+			top: targetBounds.y
+		},
+		{
+			left: targetBounds.x,
+			top: targetBounds.y + targetBounds.height + PLACEMENT_PADDING
+		},
+		{
+			left: targetBounds.x,
+			top: targetBounds.y - INSTRUCTION_HEIGHT - PLACEMENT_PADDING
+		}
+	];
+	for (const candidate of candidates) if (candidate.left >= 0 && candidate.top >= 0 && candidate.left + width <= viewport.width && candidate.top + INSTRUCTION_HEIGHT <= viewport.height) return candidate;
+	const fallback = candidates[0];
+	return {
+		left: Math.max(0, Math.min(fallback.left, Math.max(viewport.width - width, 0))),
+		top: Math.max(0, Math.min(fallback.top, Math.max(viewport.height - INSTRUCTION_HEIGHT, 0)))
+	};
+}
+function readAnchorTarget(state) {
+	return readSelectedTargets(state)[0] ?? selectCurrentTarget(state);
+}
+function createInstructionDraft(renderer, onSubmit, targetBounds) {
+	const { boxWidth, inputWidth } = computeDraftWidths(renderer);
+	const placement = computeDraftPlacement(readRendererSize(renderer), boxWidth, targetBounds);
+	const container = new BoxRenderable(renderer, {
+		id: `anscribe-capture-instruction-${generateRenderableIdSuffix()}`,
+		position: "absolute",
+		left: placement.left,
+		top: placement.top,
+		width: boxWidth,
+		height: INSTRUCTION_HEIGHT,
+		zIndex: 1e4,
+		border: true,
+		borderStyle: "single",
+		borderColor: INSTRUCTION_BORDER_COLOR,
+		backgroundColor: INSTRUCTION_BACKGROUND_COLOR,
+		shouldFill: true,
+		title: "capture instruction",
+		paddingX: 1
+	});
+	const input = new InputRenderable(renderer, {
+		id: `${container.id}-input`,
+		width: inputWidth,
+		value: "",
+		placeholder: "enter instruction",
+		backgroundColor: INSTRUCTION_BACKGROUND_COLOR,
+		focusedBackgroundColor: INSTRUCTION_BACKGROUND_COLOR,
+		textColor: INSTRUCTION_TEXT_COLOR,
+		focusedTextColor: INSTRUCTION_TEXT_COLOR,
+		placeholderColor: "#777777",
+		cursorColor: INSTRUCTION_BORDER_COLOR
+	});
+	input.on(InputRenderableEvents.ENTER, onSubmit);
+	markAsOverlay(container);
+	markAsOverlay(input);
+	container.add(input);
+	renderer.root.add(container);
+	input.focus();
+	return {
+		container,
+		input,
+		targetBounds
+	};
+}
+function resizeInstructionDraft(draft, renderer) {
+	const { boxWidth, inputWidth } = computeDraftWidths(renderer);
+	const placement = computeDraftPlacement(readRendererSize(renderer), boxWidth, draft.targetBounds);
+	if (draft.container !== void 0) {
+		draft.container.width = boxWidth;
+		draft.container.left = placement.left;
+		draft.container.top = placement.top;
+	}
+	if (draft.input !== void 0) draft.input.width = inputWidth;
+}
+function destroyInstructionDraft(draft) {
+	if (draft === void 0) return;
+	if (draft.input !== void 0) {
+		draft.input.blur();
+		draft.input = void 0;
+	}
+	draft.container?.destroyRecursively();
+	draft.container = void 0;
+}
+//#endregion
+//#region src/internal/install.ts
+function installCaptureWithEnrichment(renderer, options, enricherLayer) {
+	const sinks = readRegisteredCaptureSinks();
+	const composedLayer = makeCaptureHostLayer(renderer, options).pipe(Layer.provideMerge(Layer.mergeAll(CaptureMode.live, makeCompositePersistenceLayer(renderer, sinks), enricherLayer, CaptureHostFailureReporter.live)));
+	const runtime = ManagedRuntime.make(composedLayer);
+	runtime.runSync(Effect.void);
+	return {
+		close: () => runtime.dispose(),
+		dispose() {
+			runtime.dispose().catch(() => void 0);
+		}
+	};
+}
+const makeCompositePersistenceLayer = (renderer, sinks) => Layer.effect(CapturePersistence, Effect.gen(function* () {
+	for (const sink of sinks) {
+		const cleanup = sink.close;
+		if (cleanup !== void 0) yield* Effect.addFinalizer(() => Effect.promise(() => cleanup()).pipe(Effect.orDie));
+	}
+	return CapturePersistence.of({ createCapture: (capture) => Effect.gen(function* () {
+		yield* Effect.sync(() => {
+			renderer.copyToClipboardOSC52(formatCaptureForClipboard(capture));
+		});
+		yield* Effect.forEach(sinks, (sink) => Effect.tryPromise({
+			try: () => sink.write(capture),
+			catch: (cause) => new CapturePersistenceError({
+				message: `Anscribe sink "${sink.name}" failed to persist Capture`,
+				cause
+			})
+		}), { discard: true });
+	}) });
+}));
+//#endregion
+export { installCaptureWithEnrichment as t };

package/dist/react/preload.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/react/preload.mjs

@@ -0,0 +1,2 @@
+import "@anscribe/react/preload";
+export {};

package/dist/react.d.mts

@@ -0,0 +1,6 @@
+import { n as InstallCaptureOptions } from "./install-Bbw_EVFu.mjs";
+
+//#region src/react/index.d.ts
+declare function Anscribe(props: InstallCaptureOptions): null;
+//#endregion
+export { Anscribe };

package/dist/react.mjs

@@ -0,0 +1,42 @@
+import { t as installCaptureWithEnrichment } from "./install-DYrt2HTN.mjs";
+import { CaptureMetadataEnrichment } from "@anscribe/core";
+import { isReactRuntimeEnrichmentAvailable, reactMetadataEnricher } from "@anscribe/react";
+import { useRenderer } from "@opentui/react";
+import { useEffect } from "react";
+//#region src/react/index.ts
+let warnedReactPreloadUnavailable = false;
+const reactEnrichmentLayer = CaptureMetadataEnrichment.layer(reactMetadataEnricher);
+const isProductionEnv = readNodeEnv() === "production";
+function Anscribe(props) {
+	const renderer = useRenderer();
+	const { keybinding, highlightColor, selectedColor } = props;
+	useEffect(() => {
+		warnIfReactPreloadUnavailable();
+		const capture = installCaptureWithEnrichment(renderer, {
+			keybinding,
+			highlightColor,
+			selectedColor
+		}, reactEnrichmentLayer);
+		return () => {
+			capture.dispose();
+		};
+	}, [
+		keybinding,
+		highlightColor,
+		selectedColor,
+		renderer
+	]);
+	return null;
+}
+function warnIfReactPreloadUnavailable() {
+	if (warnedReactPreloadUnavailable || isProductionEnv) return;
+	if (isReactRuntimeEnrichmentAvailable()) return;
+	warnedReactPreloadUnavailable = true;
+	const warn = globalThis.console["warn"];
+	warn("Anscribe React enrichment is unavailable. Import \"@anscribe/opentui/react/preload\" before \"@opentui/react\" to capture component metadata.");
+}
+function readNodeEnv() {
+	return globalThis.process?.env?.NODE_ENV;
+}
+//#endregion
+export { Anscribe };

package/dist/sink-registry-DAlYVk2U.mjs

@@ -0,0 +1,16 @@
+//#region src/internal/sink-registry.ts
+const registeredSinks = /* @__PURE__ */ new Map();
+const registerCaptureSink = (sink) => {
+	registeredSinks.set(sink.name, sink);
+};
+const readRegisteredCaptureSinks = () => Array.from(registeredSinks.values());
+/**
+* Test-only escape hatch. Production code should never call this — the
+* registry is process-global so a stray reset between two consumers in the
+* same process would silently break the second one.
+*/
+const resetCaptureSinks = () => {
+	registeredSinks.clear();
+};
+//#endregion
+export { registerCaptureSink as n, resetCaptureSinks as r, readRegisteredCaptureSinks as t };

package/dist/sinks.d.mts

@@ -0,0 +1,13 @@
+import { CaptureSink, CaptureSink as CaptureSink$1 } from "@anscribe/core";
+
+//#region src/internal/sink-registry.d.ts
+declare const registerCaptureSink: (sink: CaptureSink$1) => void;
+declare const readRegisteredCaptureSinks: () => ReadonlyArray<CaptureSink$1>;
+/**
+ * Test-only escape hatch. Production code should never call this — the
+ * registry is process-global so a stray reset between two consumers in the
+ * same process would silently break the second one.
+ */
+declare const resetCaptureSinks: () => void;
+//#endregion
+export { type CaptureSink, readRegisteredCaptureSinks, registerCaptureSink, resetCaptureSinks };

package/dist/sinks.mjs

@@ -0,0 +1,2 @@
+import { n as registerCaptureSink, r as resetCaptureSinks, t as readRegisteredCaptureSinks } from "./sink-registry-DAlYVk2U.mjs";
+export { readRegisteredCaptureSinks, registerCaptureSink, resetCaptureSinks };

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@anscribe/opentui",
+  "version": "0.1.0",
+  "description": "Anscribe OpenTUI adapter: install capture mode in OpenTUI apps and stream captures to an agent via MCP.",
+  "keywords": [
+    "agent",
+    "anscribe",
+    "capture",
+    "mcp",
+    "opentui",
+    "tui"
+  ],
+  "homepage": "https://github.com/msmps/anscribe",
+  "bugs": {
+    "url": "https://github.com/msmps/anscribe/issues"
+  },
+  "license": "MIT",
+  "author": "msmps",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/msmps/anscribe.git",
+    "directory": "packages/opentui"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.mts",
+      "import": "./dist/react.mjs"
+    },
+    "./react/preload": {
+      "types": "./dist/react/preload.d.mts",
+      "import": "./dist/react/preload.mjs"
+    },
+    "./sinks": {
+      "types": "./dist/sinks.d.mts",
+      "import": "./dist/sinks.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org"
+  },
+  "dependencies": {
+    "effect": "^4.0.0-beta.65",
+    "nanoid": "^5.1.6",
+    "@anscribe/core": "0.1.0",
+    "@anscribe/react": "0.1.0"
+  },
+  "peerDependencies": {
+    "@opentui/core": "^0.2.8",
+    "@opentui/react": "0.2.8",
+    "react": ">=19.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@opentui/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "test:integration": "bun test test/integration"
+  }
+}