@pinagent/react-native 0.2.3 → 0.2.5

package/src/native/inspector.ts

@@ -140,6 +140,9 @@ const HOST_COMPONENT = 5;
 interface FiberLike {
   tag?: number;
   return?: FiberLike | null;
+  /** First child / next sibling — the render-tree walk for the measure fallback. */
+  child?: FiberLike | null;
+  sibling?: FiberLike | null;
   stateNode?: { canonical?: { publicInstance?: unknown } } | null;
   /** Host fibers carry the committed props — where `data-pa-loc` rides. */
   memoizedProps?: RawProps;
@@ -224,6 +227,12 @@ function paLocOf(props: RawProps): Loc | null {
   return parsePaLoc(props?.['data-pa-loc']);
 }
 
+/** The enclosing component name the babel plugin records as `data-pa-comp`. */
+function compOf(props: RawProps): string | null {
+  const c = props?.['data-pa-comp'];
+  return typeof c === 'string' && c.length > 0 ? c : null;
+}
+
 /**
  * Walk a host fiber's render-tree parent (`return`) chain, returning the first
  * `data-pa-loc` found on a fiber's `memoizedProps` — the tapped element itself,
@@ -429,6 +438,160 @@ export function measureFrame(measure?: (cb: RawMeasureCb) => void): Promise<Fram
   });
 }
 
+/** True when window-coordinate point (x, y) lies within frame `f`. */
+export function frameContains(f: Frame, x: number, y: number): boolean {
+  return x >= f.x && y >= f.y && x <= f.x + f.width && y <= f.y + f.height;
+}
+
+/** A measure-resolved hit: the deepest tagged host whose frame holds the tap. */
+interface MeasuredHit {
+  fiber: FiberLike;
+  loc: Loc;
+  name: string | null;
+  frame: Frame;
+}
+
+/**
+ * Measure a host fiber's on-screen rect via its public instance's
+ * `measureInWindow` (window coordinates). Guarded + timed-out like
+ * {@link measureFrame}; resolves null for a non-host fiber, a missing instance,
+ * or a zero-size / never-firing measure. The RN-runtime half of the measure
+ * fallback — not unit-tested (see {@link measureHitTest}, which injects this).
+ */
+function measureFiberInWindow(fiber: FiberLike): Promise<Frame | null> {
+  const inst = fiber.stateNode?.canonical?.publicInstance as
+    | { measureInWindow?: (cb: (x: number, y: number, w: number, h: number) => void) => void }
+    | undefined;
+  const measure = inst?.measureInWindow;
+  if (typeof measure !== 'function') return Promise.resolve(null);
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = (f: Frame | null) => {
+      if (!settled) {
+        settled = true;
+        resolve(f);
+      }
+    };
+    const timer = setTimeout(() => finish(null), 120);
+    try {
+      measure.call(inst, (x, y, width, height) => {
+        clearTimeout(timer);
+        finish(width > 0 || height > 0 ? { x, y, width, height } : null);
+      });
+    } catch {
+      clearTimeout(timer);
+      finish(null);
+    }
+  });
+}
+
+/**
+ * Measure-based hit-test — the fallback for when RN's geometric
+ * `findNodeAtPoint` can't descend to the tapped element.
+ *
+ * `react-native-pager-view` (and anything that hosts content in a native
+ * container) detaches a page's *native* views from the Fabric shadow tree
+ * `findNodeAtPoint` walks, so the native hit-test bottoms out at the page
+ * wrapper — it returns no touched instance at all (`closestPublicInstance` is
+ * null). But the React **fiber** tree is intact and the page's widgets are
+ * on-screen, hence measurable — so we hit-test ourselves: DFS the fiber subtree
+ * under `root` (the app root, an ancestor of every on-screen view), measuring
+ * each host, and keep the DEEPEST tagged host inside the tapped region.
+ *
+ * `region` threads the frame of the nearest measurable host ancestor that
+ * CONTAINS the tap (null until we enter one). Two subtleties this handles:
+ *
+ *  - **Pruning.** A host with a real frame that MISSES the tap can't have a
+ *    (non-overflowing) descendant that hits, so its subtree is skipped — like
+ *    the browser's `elementFromPoint`.
+ *  - **Flattened / detached hosts.** RN flattens layout-only `<View>`s (no
+ *    native view → `measure` returns null) and pager pages are detached, so a
+ *    widget's own tagged hosts often can't be measured. Once we're inside a
+ *    measurable containing region we keep recording tagged hosts even when they
+ *    can't be measured (they borrow the region's frame for the highlight) and
+ *    descend through them — otherwise geometry bottoms out at the outermost
+ *    non-flattened wrapper (e.g. an animated card) and every widget collapses to
+ *    that shared wrapper's source. Measurable siblings still prune wrong
+ *    branches, so we stay within the tapped element.
+ *
+ * Composite / fragment fibers carry no frame, so we always descend through them
+ * to reach their hosts. `measure` is injected so the traversal is unit-testable
+ * without an RN runtime.
+ */
+export async function measureHitTest(
+  root: FiberLike | null,
+  x: number,
+  y: number,
+  measure: (fiber: FiberLike) => Promise<Frame | null>,
+): Promise<MeasuredHit | null> {
+  let best: MeasuredHit | null = null;
+  let bestDepth = -1;
+
+  async function visitChildren(
+    parent: FiberLike,
+    depth: number,
+    region: Frame | null,
+  ): Promise<void> {
+    let n = 0;
+    for (let node = parent.child ?? null; node && n < 100_000; node = node.sibling ?? null, n++) {
+      await visitNode(node, depth, region);
+    }
+  }
+
+  async function visitNode(node: FiberLike, depth: number, region: Frame | null): Promise<void> {
+    let nextRegion = region;
+    if (node.tag === HOST_COMPONENT) {
+      const frame = await measure(node);
+      if (frame) {
+        // A measurable host that misses the tap prunes its whole subtree.
+        if (!frameContains(frame, x, y)) return;
+        nextRegion = frame; // tighten the containing region to this host
+      }
+      // Record any tagged host reached INSIDE a measurable containing region —
+      // including flattened ones (null frame) geometry can't see. Deepest wins;
+      // on a tie the later (over-painted) sibling does. Flattened hosts borrow
+      // the region's frame for the highlight.
+      if (nextRegion) {
+        const loc = paLocOf(node.memoizedProps);
+        if (loc && depth >= bestDepth) {
+          best = { fiber: node, loc, name: compOf(node.memoizedProps), frame: frame ?? nextRegion };
+          bestDepth = depth;
+        }
+      }
+    }
+    await visitChildren(node, depth + 1, nextRegion);
+  }
+
+  if (root) await visitNode(root, 0, null);
+  return best;
+}
+
+/**
+ * The chain of distinctly-located tagged hosts from `leaf` up to the root,
+ * root-first (matching {@link crumbsOf}'s order). Built from the fiber `return`
+ * chain for the measure-fallback breadcrumb. Consecutive hosts sharing a
+ * `data-pa-loc` (a forwarding wrapper re-emitting the call site) collapse to a
+ * single crumb; names come from the babel plugin's `data-pa-comp`. Pure over a
+ * fiber-like chain (capped against a malformed `return` cycle); exported for
+ * unit testing.
+ */
+export function taggedAncestors(
+  leaf: FiberLike | null,
+): { name: string; loc: Loc; fiber: FiberLike }[] {
+  const out: { name: string; loc: Loc; fiber: FiberLike }[] = [];
+  const seen = new Set<string>();
+  for (let f = leaf, i = 0; f && i < 10_000; f = f.return ?? null, i++) {
+    if (f.tag !== HOST_COMPONENT) continue;
+    const loc = paLocOf(f.memoizedProps);
+    if (!loc) continue;
+    const key = `${loc.file}:${loc.line}:${loc.col}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push({ name: compOf(f.memoizedProps) ?? 'View', loc, fiber: f });
+  }
+  return out.reverse();
+}
+
 /**
  * Resolve a tap (in window coordinates) to a {@link PickResult}.
  *
@@ -466,42 +629,73 @@ export function resolvePick(
     try {
       fn(inspectedView, x, y, (data) => {
         clearTimeout(timer);
-        const frame = data.frame
-          ? {
-              x: data.frame.left,
-              y: data.frame.top,
-              width: data.frame.width,
-              height: data.frame.height,
+        void (async () => {
+          const frame = data.frame
+            ? {
+                x: data.frame.left,
+                y: data.frame.top,
+                width: data.frame.width,
+                height: data.frame.height,
+              }
+            : null;
+          const rawCrumbs = crumbsOf(data);
+          const loc = pickLoc(data, projectRoot);
+          const nameChain = nameChainOf(data);
+
+          // Measure fallback: RN's native `findNodeAtPoint` can't descend into
+          // content hosted by a native container — react-native-pager-view
+          // detaches each page from the Fabric shadow tree the hit-test walks,
+          // so a tap inside a pager page resolves NO touched instance
+          // (`closestPublicInstance` is null) and bottoms out at the page
+          // wrapper. The React fiber tree stays intact and the page's widgets
+          // are on-screen, so when there's no touched instance we hit-test
+          // ourselves: DFS the fiber tree from the app root (an ancestor of
+          // every on-screen view), measuring each host, and take the deepest
+          // tagged host inside the measurable region under the tap.
+          //
+          // Gated on the native hit-test failing to resolve an instance, so
+          // every screen where it succeeds (the common case) keeps its existing
+          // native path untouched — no regression. Paper surfaces only a numeric
+          // view tag, so `getHandleFromPublicInstance` returns null there too
+          // and the app-root bridge below also fails, degrading to the native
+          // path.
+          const nativeLeaf = getHandleFromPublicInstance(data.closestPublicInstance);
+          if (!nativeLeaf) {
+            const appRoot = getHandleFromPublicInstance(inspectedView);
+            const hit = appRoot ? await measureHitTest(appRoot, x, y, measureFiberInWindow) : null;
+            if (hit) {
+              const ancestors = taggedAncestors(hit.fiber);
+              const crumbFrames = await Promise.all(
+                ancestors.map((a) => measureFiberInWindow(a.fiber)),
+              );
+              done({
+                loc: hit.loc,
+                nameChain: ancestors.map((a) => a.name),
+                chain: ancestors.map((a, i) => ({
+                  name: a.name,
+                  loc: a.loc,
+                  frame: crumbFrames[i] ?? null,
+                })),
+                frame: hit.frame,
+              });
+              return;
             }
-          : null;
-        const rawCrumbs = crumbsOf(data);
-        const loc = pickLoc(data, projectRoot);
-        const nameChain = nameChainOf(data);
-        // Measure each crumb so pressing one can move the on-screen highlight
-        // to that ancestor. Concurrent, each guarded — adds ~one measure pass.
-        Promise.all(rawCrumbs.map((c) => measureFrame(c.measure)))
-          .then((frames) => {
-            done({
-              loc,
-              nameChain,
-              chain: rawCrumbs.map((c, i) => ({
-                name: c.name,
-                loc: c.loc,
-                frame: frames[i] ?? null,
-              })),
-              frame,
-            });
-          })
-          .catch(() => {
-            // Measuring failed wholesale — still return the pick without
-            // per-crumb frames rather than hang.
-            done({
-              loc,
-              nameChain,
-              chain: rawCrumbs.map((c) => ({ name: c.name, loc: c.loc, frame: null })),
-              frame,
-            });
+          }
+
+          // Native pick: measure each crumb so pressing one can move the
+          // on-screen highlight to that ancestor. Concurrent, each guarded.
+          const frames = await Promise.all(rawCrumbs.map((c) => measureFrame(c.measure)));
+          done({
+            loc,
+            nameChain,
+            chain: rawCrumbs.map((c, i) => ({
+              name: c.name,
+              loc: c.loc,
+              frame: frames[i] ?? null,
+            })),
+            frame,
           });
+        })().catch(() => done({ loc: null, nameChain: [], chain: [], frame: null }));
       });
     } catch {
       clearTimeout(timer);

package/src/native/keyboard-height.ts

@@ -0,0 +1,34 @@
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Soft-keyboard height hook for the RN widget's modal sheets.
+ *
+ * Both the composer (Pinagent.tsx) and the stream sheet (StreamSheet.tsx)
+ * present in their own `Modal`, and both need to lift their pinned input above
+ * the soft keyboard. `KeyboardAvoidingView` is unreliable inside a `Modal` —
+ * the modal presents in its own window, so the view's measured origin is wrong
+ * and the computed inset never lifts the sheet. Driving a `paddingBottom` inset
+ * off the live keyboard frame is the robust cross-platform path, so the logic
+ * lives here once and both sheets share it.
+ *
+ * iOS fires the `*Will*` events (in sync with the slide animation); Android
+ * only fires `*Did*`.
+ */
+import { useEffect, useState } from 'react';
+import { Keyboard, Platform } from 'react-native';
+
+/** Live soft-keyboard height in px (0 when hidden). */
+export function useKeyboardHeight(): number {
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const showEvt = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvt = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const show = Keyboard.addListener(showEvt, (e) => setHeight(e.endCoordinates.height));
+    const hide = Keyboard.addListener(hideEvt, () => setHeight(0));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+  return height;
+}

package/src/native/keyboard.ts

@@ -0,0 +1,40 @@
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Keyboard-shortcut helpers for the React Native widget.
+ *
+ * The browser widget wires its hotkeys to `document`-level `keydown`
+ * listeners (see packages/widget/src/keyboard.ts). React Native has no such
+ * global key stream in JS: the core `Keyboard` module only reports the soft
+ * keyboard showing/hiding, never key presses, and there's no document to
+ * listen on. A faithful port of the *global* web hotkeys (toggle picker,
+ * hop-to-next-agent, minimize-all) would need a native module — iOS
+ * `UIKeyCommand` / an Android key bridge — which we deliberately avoid: the RN
+ * widget ships as plain JS source for Metro with zero native setup.
+ *
+ * What IS reachable, and all we need in practice, are the key events a focused
+ * `TextInput` surfaces — so the shortcuts live where a hardware keyboard is
+ * actually in play (the composer and the stream sheet, both modal):
+ *   - Return/Enter, via `onSubmitEditing` on the single-line inputs — submits
+ *     the agent answer and the follow-up, mirroring the web composer's
+ *     Enter-to-send. Wired directly on the input (no key inspection needed).
+ *   - Escape, via `onKeyPress` — backs out of a sheet, mirroring the web
+ *     widget's Escape. Decided here so the (RN-runtime-only, untestable)
+ *     components stay thin and the rule is unit-tested.
+ *
+ * `onKeyPress`'s `nativeEvent` only carries `key` on native platforms (no
+ * modifier flags), so these predicates take the bare key name — there's no
+ * Shift/Cmd to branch on, which is also why plain Enter stays a newline in the
+ * multiline composer rather than hijacking submit. Hardware Back (Android) is
+ * handled separately by each Modal's `onRequestClose`.
+ */
+
+/**
+ * Should this key event back out of the current sheet? Escape on a hardware
+ * keyboard — the RN analog of the web widget's Escape. Only the Escape key
+ * qualifies; every printable key (i.e. normal typing) is ignored, so an
+ * `onKeyPress` handler built on this never interferes with text entry.
+ */
+export function isDismissKey(key: string): boolean {
+  return key === 'Escape';
+}

package/src/native/markdown.ts

@@ -0,0 +1,194 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * Tiny, dependency-free Markdown parser for the RN widget.
+ *
+ * The agent streams its replies as Markdown — Claude writes **bold**, `code`,
+ * fenced blocks, bullet/numbered lists, headings and links. The StreamSheet
+ * used to drop that straight into a <Text>, so the markers showed up as
+ * literal characters. This module folds the raw text into a small block/inline
+ * tree that `Markdown.tsx` renders with React Native primitives — no
+ * markdown-it, no extra runtime dependency, in keeping with the rest of the
+ * native source (see transcript.ts for the same "mirror, don't import" stance).
+ *
+ * It is intentionally a *subset* of CommonMark covering what shows up in chat:
+ * ATX headings, fenced code, blockquotes, unordered/ordered lists, thematic
+ * breaks, paragraphs, and inline code / bold / italic / links. Anything it
+ * doesn't recognise falls through as plain text, so the worst case degrades to
+ * the old behaviour rather than dropping content. Pure and deterministic, so
+ * it's unit-tested like the transcript reducer.
+ */
+
+/** An inline run carrying at most the marks we render. */
+export interface InlineSpan {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  code?: boolean;
+  /** Present on link spans; the destination URL. */
+  href?: string;
+}
+
+export type MdBlock =
+  | { type: 'heading'; level: number; spans: InlineSpan[] }
+  | { type: 'paragraph'; spans: InlineSpan[] }
+  | { type: 'code'; text: string; lang?: string }
+  | { type: 'list'; ordered: boolean; items: InlineSpan[][] }
+  | { type: 'quote'; spans: InlineSpan[] }
+  | { type: 'hr' };
+
+/**
+ * Inline scanner: walk the string and, at each step, take the earliest of the
+ * recognised markers — ties broken by priority (code > link > bold > italic),
+ * so `**x**` reads as one bold run rather than two italics, and a backtick span
+ * is never re-parsed for emphasis. Text between markers is emitted verbatim;
+ * an unbalanced marker (a lone `*`) never matches and stays literal, so we
+ * never swallow content.
+ */
+export function parseInline(input: string): InlineSpan[] {
+  const matchers: Array<{ re: RegExp; make: (m: RegExpExecArray) => InlineSpan }> = [
+    { re: /`([^`]+)`/, make: (m) => ({ text: m[1] ?? '', code: true }) },
+    { re: /\[([^\]]+)\]\(([^)\s]+)\)/, make: (m) => ({ text: m[1] ?? '', href: m[2] ?? '' }) },
+    { re: /\*\*([^*]+)\*\*/, make: (m) => ({ text: m[1] ?? '', bold: true }) },
+    { re: /__([^_]+)__/, make: (m) => ({ text: m[1] ?? '', bold: true }) },
+    { re: /\*([^*]+)\*/, make: (m) => ({ text: m[1] ?? '', italic: true }) },
+    { re: /_([^_]+)_/, make: (m) => ({ text: m[1] ?? '', italic: true }) },
+  ];
+
+  const spans: InlineSpan[] = [];
+  let rest = input;
+  while (rest.length > 0) {
+    let best: { index: number; length: number; span: InlineSpan } | null = null;
+    for (const { re, make } of matchers) {
+      const m = re.exec(rest);
+      // Strictly-less keeps the higher-priority matcher on an index tie.
+      if (m && (best === null || m.index < best.index)) {
+        best = { index: m.index, length: (m[0] ?? '').length, span: make(m) };
+      }
+    }
+    if (best === null) {
+      pushText(spans, rest);
+      break;
+    }
+    pushText(spans, rest.slice(0, best.index));
+    spans.push(best.span);
+    rest = rest.slice(best.index + best.length);
+  }
+  return spans;
+}
+
+function pushText(spans: InlineSpan[], text: string): void {
+  if (text) spans.push({ text });
+}
+
+/**
+ * Fold raw Markdown into render-ready blocks. Line-oriented and greedy:
+ * consecutive list items fold into one list, consecutive `>` lines into one
+ * quote, and consecutive plain lines into one paragraph (soft-wrapped lines are
+ * joined with a space). Blank lines separate paragraphs. Pure and
+ * deterministic.
+ */
+export function parseMarkdown(source: string): MdBlock[] {
+  const blocks: MdBlock[] = [];
+  const lines = source.replace(/\r\n?/g, '\n').split('\n');
+
+  let paragraph: string[] = [];
+  function flushParagraph(): void {
+    const text = paragraph.join(' ').trim();
+    paragraph = [];
+    if (text) blocks.push({ type: 'paragraph', spans: parseInline(text) });
+  }
+
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i] ?? '';
+
+    // Fenced code block: ``` or ```lang … until a closing ``` (or EOF).
+    const fence = /^\s*```(.*)$/.exec(line);
+    if (fence) {
+      flushParagraph();
+      const lang = (fence[1] ?? '').trim();
+      const body: string[] = [];
+      i++;
+      while (i < lines.length) {
+        const l = lines[i] ?? '';
+        if (/^\s*```\s*$/.test(l)) break;
+        body.push(l);
+        i++;
+      }
+      i++; // consume the closing fence (no-op at EOF)
+      blocks.push({ type: 'code', text: body.join('\n'), ...(lang ? { lang } : {}) });
+      continue;
+    }
+
+    // Blank line: end the current paragraph.
+    if (/^\s*$/.test(line)) {
+      flushParagraph();
+      i++;
+      continue;
+    }
+
+    // Thematic break: a line of 3+ identical -, * or _.
+    if (/^\s*([-*_])\1{2,}\s*$/.test(line)) {
+      flushParagraph();
+      blocks.push({ type: 'hr' });
+      i++;
+      continue;
+    }
+
+    // ATX heading (#–######), trailing #'s stripped.
+    const heading = /^\s*(#{1,6})\s+(.*?)\s*#*\s*$/.exec(line);
+    if (heading) {
+      flushParagraph();
+      blocks.push({
+        type: 'heading',
+        level: (heading[1] ?? '').length,
+        spans: parseInline(heading[2] ?? ''),
+      });
+      i++;
+      continue;
+    }
+
+    // Blockquote: fold consecutive `>` lines together.
+    if (/^\s*>/.test(line)) {
+      flushParagraph();
+      const quoted: string[] = [];
+      while (i < lines.length) {
+        const l = lines[i] ?? '';
+        if (!/^\s*>/.test(l)) break;
+        quoted.push(l.replace(/^\s*>\s?/, ''));
+        i++;
+      }
+      blocks.push({ type: 'quote', spans: parseInline(quoted.join(' ').trim()) });
+      continue;
+    }
+
+    // List: fold consecutive items of the same kind (ordered vs unordered).
+    const first = matchListItem(line);
+    if (first) {
+      flushParagraph();
+      const items: InlineSpan[][] = [];
+      while (i < lines.length) {
+        const it = matchListItem(lines[i] ?? '');
+        if (!it || it.ordered !== first.ordered) break;
+        items.push(parseInline(it.text));
+        i++;
+      }
+      blocks.push({ type: 'list', ordered: first.ordered, items });
+      continue;
+    }
+
+    // Otherwise accumulate into the running paragraph.
+    paragraph.push(line.trim());
+    i++;
+  }
+  flushParagraph();
+  return blocks;
+}
+
+function matchListItem(line: string): { ordered: boolean; text: string } | null {
+  const ul = /^\s*[-*+]\s+(.*)$/.exec(line);
+  if (ul) return { ordered: false, text: ul[1] ?? '' };
+  const ol = /^\s*\d+[.)]\s+(.*)$/.exec(line);
+  if (ol) return { ordered: true, text: ol[1] ?? '' };
+  return null;
+}