@pinagent/react-native 0.2.4 → 0.2.5

package/src/native/AgentDock.tsx

@@ -0,0 +1,232 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * Compact dock for minimized agent runs (bottom-left).
+ *
+ * Replaces the old one-fat-pill-per-run stack. It renders the pure
+ * {@link dockModel} aggregation:
+ *
+ * - **Active runs** (connecting/working/awaiting) follow a hybrid rule — a
+ *   single slim chip when one runs, and a collapsed `◐ N agents · M needs you`
+ *   count bar (tap to expand the chip list) once two or more do.
+ * - **Finished runs** (done/failed) always roll into a `▸ N finished` summary
+ *   you tap to review and clear.
+ *
+ * Each `StreamSheet` stays mounted (it renders `null` while minimized) so its
+ * WebSocket keeps streaming; this dock is fed each run's derived `state` from
+ * the parent and is purely presentational. Tapping a chip expands that run's
+ * full sheet; ✕ tears it down.
+ *
+ * All decision logic (partitioning, ordering, headline text) lives in the pure
+ * `run-state` module — this file is intentionally just layout + animation, the
+ * un-testable RN-runtime layer.
+ */
+import type { ReactElement } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { type DockRun, dockModel, type RunTone, runPresentation } from './run-state';
+
+export interface AgentDockProps {
+  /** Minimized runs with their derived state (the expanded one is excluded). */
+  runs: DockRun[];
+  /** Expand a run to its full sheet. */
+  onExpand: (id: string) => void;
+  /** Tear a run down (stops its WS, removes it). */
+  onClose: (id: string) => void;
+}
+
+/** Concrete colors per semantic tone (kept out of the pure layer). */
+const TONE: Record<RunTone, string> = {
+  neutral: '#9aa0a6',
+  active: '#60a5fa',
+  attention: '#c4b5fd',
+  success: '#34d399',
+  danger: '#f87171',
+};
+
+export function AgentDock({ runs, onExpand, onClose }: AgentDockProps): ReactElement | null {
+  const model = dockModel(runs);
+  // Inline-expand the collapsed active bar / the finished summary into lists.
+  const [activeOpen, setActiveOpen] = useState(false);
+  const [finishedOpen, setFinishedOpen] = useState(false);
+
+  if (model.active.length === 0 && model.finished.length === 0) return null;
+
+  const showActiveList = !model.collapseActive || activeOpen;
+
+  return (
+    <View style={styles.dock} pointerEvents="box-none">
+      {/* Active runs: chips when ≤1 (or expanded), else a count bar. */}
+      {showActiveList
+        ? model.active.map((run) => (
+            <AgentChip key={run.id} run={run} onExpand={onExpand} onClose={onClose} />
+          ))
+        : null}
+      {model.collapseActive ? (
+        <SummaryBar
+          glyph={runPresentation(model.summaryState).glyph}
+          tone={runPresentation(model.summaryState).tone}
+          pulse={model.awaitingCount > 0}
+          label={model.activeHeadline}
+          open={activeOpen}
+          onPress={() => setActiveOpen((v) => !v)}
+        />
+      ) : null}
+
+      {/* Finished runs: a roll-up summary, expandable to review/clear. */}
+      {model.finished.length > 0 ? (
+        <>
+          {finishedOpen
+            ? model.finished.map((run) => (
+                <AgentChip key={run.id} run={run} onExpand={onExpand} onClose={onClose} />
+              ))
+            : null}
+          <SummaryBar
+            glyph="▸"
+            tone={model.finishedHasFailure ? 'danger' : 'neutral'}
+            pulse={false}
+            label={`${model.finished.length} finished`}
+            open={finishedOpen}
+            onPress={() => setFinishedOpen((v) => !v)}
+            muted
+          />
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+/** One run as a slim chip: glyph (tone-colored, pulses when blocked) + label. */
+function AgentChip({
+  run,
+  onExpand,
+  onClose,
+}: {
+  run: DockRun;
+  onExpand: (id: string) => void;
+  onClose: (id: string) => void;
+}): ReactElement {
+  // Pass the interrupting overlay through so a stopping chip relabels to
+  // "Stopping…" (and stops pulsing) without changing the underlying state.
+  const p = runPresentation(run.state, run.interrupting);
+  const pulse = usePulse(p.pulse);
+  return (
+    <Pressable
+      onPress={() => onExpand(run.id)}
+      accessibilityRole="button"
+      accessibilityLabel={`${p.label}: ${run.target}`}
+      style={[styles.chip, p.tone === 'attention' && styles.chipAttention]}
+    >
+      <Animated.Text style={[styles.chipGlyph, { color: TONE[p.tone], opacity: pulse }]}>
+        {p.glyph}
+      </Animated.Text>
+      <Text style={styles.chipText} numberOfLines={1}>
+        {p.label === 'Stopping…' ? `${p.label} · ${run.target}` : run.target}
+      </Text>
+      <Pressable
+        onPress={() => onClose(run.id)}
+        hitSlop={10}
+        accessibilityRole="button"
+        accessibilityLabel={`Dismiss ${run.target}`}
+      >
+        <Text style={styles.chipClose}>✕</Text>
+      </Pressable>
+    </Pressable>
+  );
+}
+
+/** The collapsed count bar for active runs / the finished roll-up. */
+function SummaryBar({
+  glyph,
+  tone,
+  pulse,
+  label,
+  open,
+  onPress,
+  muted,
+}: {
+  glyph: string;
+  tone: RunTone;
+  pulse: boolean;
+  label: string;
+  open: boolean;
+  onPress: () => void;
+  muted?: boolean;
+}): ReactElement {
+  const pulseVal = usePulse(pulse);
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={`${label}, tap to ${open ? 'collapse' : 'expand'}`}
+      style={[styles.chip, muted && styles.barMuted]}
+    >
+      <Animated.Text style={[styles.chipGlyph, { color: TONE[tone], opacity: pulseVal }]}>
+        {glyph}
+      </Animated.Text>
+      <Text style={[styles.chipText, muted && styles.barMutedText]} numberOfLines={1}>
+        {label}
+      </Text>
+      <Text style={styles.barCaret}>{open ? '▾' : '▴'}</Text>
+    </Pressable>
+  );
+}
+
+/**
+ * Drive a looping opacity pulse while `on`, resetting to fully opaque otherwise.
+ * Returns the animated value to bind to a glyph's `opacity`.
+ */
+function usePulse(on: boolean): Animated.Value {
+  const pulse = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    if (!on) {
+      pulse.setValue(1);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 0.35, duration: 600, useNativeDriver: true }),
+        Animated.timing(pulse, { toValue: 1, duration: 600, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [on, pulse]);
+  return pulse;
+}
+
+const CHIP_HEIGHT = 30;
+
+const styles = StyleSheet.create({
+  // Bottom-left cluster: chips stack upward, finished summary sits at the
+  // bottom. maxWidth keeps it clear of the bottom-right FAB.
+  dock: {
+    position: 'absolute',
+    left: 16,
+    bottom: 32,
+    maxWidth: '72%',
+    gap: 6,
+    alignItems: 'flex-start',
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 7,
+    height: CHIP_HEIGHT,
+    paddingHorizontal: 11,
+    borderRadius: CHIP_HEIGHT / 2,
+    backgroundColor: 'rgba(17,24,39,0.95)',
+    shadowColor: '#000',
+    shadowOpacity: 0.25,
+    shadowRadius: 5,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 5,
+  },
+  // A blocked run tints purple so it reads as attention-needed even past color.
+  chipAttention: { backgroundColor: 'rgba(76,29,149,0.97)' },
+  chipGlyph: { fontSize: 13, fontWeight: '700', width: 14, textAlign: 'center' },
+  chipText: { flexShrink: 1, color: '#f3f4f6', fontSize: 12.5, fontWeight: '600' },
+  chipClose: { color: '#9aa0a6', fontSize: 12, paddingLeft: 2 },
+  barMuted: { backgroundColor: 'rgba(17,24,39,0.82)' },
+  barMutedText: { color: '#c7cad1', fontWeight: '500' },
+  barCaret: { color: '#9aa0a6', fontSize: 11, paddingLeft: 2 },
+});

package/src/native/MarkdownView.tsx

@@ -0,0 +1,154 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * Render agent Markdown with React Native primitives.
+ *
+ * `parseMarkdown` (markdown.ts) does the parsing; this maps its block/inline
+ * tree onto <View>/<Text>. Inline marks ride as nested <Text> inside the
+ * paragraph's <Text>, which inherits the caller's `baseStyle` (the sheet's text
+ * row), so plain prose keeps its existing look and only the marked-up runs pick
+ * up bold/italic/code/link styling. Like the rest of `src/native`, it leans on
+ * RN core only — no markdown renderer dependency — so it ships as source and
+ * Metro bundles it onto the device unchanged.
+ *
+ * The file is `MarkdownView` (not `Markdown`) so it doesn't collide with
+ * `markdown.ts` on case-insensitive filesystems — tsc treats the two as the
+ * same module otherwise.
+ */
+import type { ReactElement } from 'react';
+import type { StyleProp } from 'react-native';
+import { Linking, Platform, StyleSheet, Text, type TextStyle, View } from 'react-native';
+import { type InlineSpan, type MdBlock, parseMarkdown } from './markdown';
+
+export interface MarkdownViewProps {
+  text: string;
+  /** Base text style for paragraphs/inline runs (the sheet's text row). */
+  baseStyle?: StyleProp<TextStyle>;
+}
+
+export function MarkdownView({ text, baseStyle }: MarkdownViewProps): ReactElement {
+  const blocks = parseMarkdown(text);
+  return (
+    <View style={styles.root}>
+      {blocks.map((block, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: blocks are re-derived from `text` every render, append-only and never reordered
+        <Block key={i} block={block} baseStyle={baseStyle} />
+      ))}
+    </View>
+  );
+}
+
+function Block({
+  block,
+  baseStyle,
+}: {
+  block: MdBlock;
+  baseStyle?: StyleProp<TextStyle>;
+}): ReactElement {
+  switch (block.type) {
+    case 'heading':
+      return (
+        <Text style={[baseStyle, styles.heading, HEADING_SIZE[block.level - 1]]}>
+          <Spans spans={block.spans} />
+        </Text>
+      );
+    case 'code':
+      return (
+        <View style={styles.codeBlock}>
+          <Text style={styles.codeText}>{block.text}</Text>
+        </View>
+      );
+    case 'list':
+      return (
+        <View style={styles.list}>
+          {block.items.map((item, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: items are re-derived from `text` every render, append-only and never reordered
+            <View key={i} style={styles.listItem}>
+              <Text style={baseStyle}>{block.ordered ? `${i + 1}.` : '•'}</Text>
+              <Text style={[baseStyle, styles.listText]}>
+                <Spans spans={item} />
+              </Text>
+            </View>
+          ))}
+        </View>
+      );
+    case 'quote':
+      return (
+        <View style={styles.quote}>
+          <Text style={[baseStyle, styles.quoteText]}>
+            <Spans spans={block.spans} />
+          </Text>
+        </View>
+      );
+    case 'hr':
+      return <View style={styles.hr} />;
+    default:
+      return (
+        <Text style={baseStyle}>
+          <Spans spans={block.spans} />
+        </Text>
+      );
+  }
+}
+
+function Spans({ spans }: { spans: InlineSpan[] }): ReactElement {
+  return (
+    <>
+      {spans.map((span, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: spans are re-derived from `text` every render, append-only and never reordered
+        <Span key={i} span={span} />
+      ))}
+    </>
+  );
+}
+
+function Span({ span }: { span: InlineSpan }): ReactElement {
+  if (span.href) {
+    const href = span.href;
+    return (
+      <Text style={styles.link} onPress={() => openUrl(href)}>
+        {span.text}
+      </Text>
+    );
+  }
+  const style: TextStyle[] = [];
+  if (span.bold) style.push(styles.bold);
+  if (span.italic) style.push(styles.italic);
+  if (span.code) style.push(styles.code);
+  // No marks: a bare <Text> inherits the enclosing paragraph's style.
+  return style.length ? <Text style={style}>{span.text}</Text> : <Text>{span.text}</Text>;
+}
+
+function openUrl(href: string): void {
+  // Dev widget: opening a tapped link is best-effort. Linking.openURL rejects
+  // on unsupported schemes / no handler — swallow it rather than throw.
+  void Linking.openURL(href).catch(() => {});
+}
+
+const MONO = Platform.OS === 'ios' ? 'Menlo' : 'monospace';
+
+/** Heading font sizes by level (index = level - 1). */
+const HEADING_SIZE: TextStyle[] = [
+  { fontSize: 20 },
+  { fontSize: 18 },
+  { fontSize: 16 },
+  { fontSize: 15 },
+  { fontSize: 14 },
+  { fontSize: 13 },
+];
+
+const styles = StyleSheet.create({
+  root: { gap: 6 },
+  heading: { fontWeight: '700', color: '#111827' },
+  bold: { fontWeight: '700' },
+  italic: { fontStyle: 'italic' },
+  code: { fontFamily: MONO, fontSize: 13, backgroundColor: '#f3f4f6', color: '#b91c1c' },
+  codeBlock: { backgroundColor: '#f6f8fa', borderRadius: 8, padding: 10 },
+  codeText: { fontFamily: MONO, fontSize: 13, color: '#1f2937', lineHeight: 18 },
+  link: { color: '#2563eb', textDecorationLine: 'underline' },
+  list: { gap: 4 },
+  listItem: { flexDirection: 'row', gap: 8, alignItems: 'flex-start' },
+  listText: { flex: 1 },
+  quote: { borderLeftWidth: 3, borderLeftColor: '#d1d5db', paddingLeft: 10 },
+  quoteText: { color: '#4b5563', fontStyle: 'italic' },
+  hr: { height: 1, backgroundColor: '#e5e7eb', marginVertical: 4 },
+});

package/src/native/Pinagent.tsx

@@ -25,16 +25,16 @@
  * (MCP) pickup. "+ Add element" multi-picks several targets into one comment
  * (sent as `additionalAnchors`); a single pick leaves them null.
  *
- * The transcript sheet can be minimized to a pill, freeing the screen to pick
- * another element and spawn a second agent. Each run keeps its own live sheet,
- * so multiple agents can stream concurrently — the expanded one shows its full
- * sheet; the rest sit as pills that keep streaming until tapped open.
+ * The transcript sheet can be minimized into the compact bottom-left dock,
+ * freeing the screen to pick another element and spawn a second agent. Each run
+ * keeps its own live sheet, so multiple agents can stream concurrently — the
+ * expanded one shows its full sheet; the rest collapse into the dock (a chip, or
+ * a count bar at 2+) and keep streaming until tapped open.
  */
 import type { ReactElement } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Animated,
-  Keyboard,
   Modal,
   PanResponder,
   Platform,
@@ -45,11 +45,15 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native';
+import { AgentDock } from './AgentDock';
 import { BRAND_CREAM, BRAND_GOLD, BRAND_INK } from './brand';
 import { resolvePick } from './inspector';
+import { isDismissKey } from './keyboard';
+import { useKeyboardHeight } from './keyboard-height';
 import { buildAdditionalAnchors, type ChipPick, removeChip } from './multi-pick';
 import { PinIcon } from './pin-icon';
 import { restorePills } from './restore';
+import type { RunState } from './run-state';
 import { StreamSheet } from './StreamSheet';
 import { captureScreenshot } from './screenshot';
 import { submitOutcome } from './submit-outcome';
@@ -83,29 +87,6 @@ function nextPaint(): Promise<void> {
   });
 }
 
-/**
- * Track the soft keyboard's height so the composer can sit directly above it.
- * `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 the inset off the keyboard frame is the
- * robust cross-platform path. iOS fires the `*Will*` events (in sync with the
- * slide animation); Android only fires `*Did*`.
- */
-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;
-}
-
 const FAB_SIZE = 52;
 // Resting insets matching the old fixed layout (right/bottom), plus a uniform
 // edge margin used to keep the button on-screen once it's free to roam.
@@ -250,12 +231,18 @@ function PinagentDev({ projectRoot = '', screenName }: PinagentProps): ReactElem
   // instead of losing everything to a vanishing toast (ticket 002).
   const [submitError, setSubmitError] = useState<string | null>(null);
   // Live agent runs. Each spawned agent gets a StreamSheet; one can be expanded
-  // (full sheet) while the rest sit as minimized pills that keep streaming in
-  // the background — so you can minimize a run, interact with the app, and
-  // spawn another. `expandedId` is the one showing its full sheet (null = all
-  // minimized).
+  // (full sheet) while the rest collapse into the compact bottom-left dock and
+  // keep streaming in the background — so you can minimize a run, interact with
+  // the app, and spawn another. `expandedId` is the one showing its full sheet
+  // (null = all minimized into the dock).
   const [streams, setStreams] = useState<{ id: string; target: string }[]>([]);
   const [expandedId, setExpandedId] = useState<string | null>(null);
+  // Each run's derived lifecycle state, reported up by its StreamSheet, so the
+  // dock can render the right chip / count-bar without owning the WS state.
+  const [statuses, setStatuses] = useState<Record<string, RunState>>({});
+  // Which runs are mid-interrupt (Stop tapped, awaiting teardown) — an overlay
+  // over `statuses`, so the dock chip relabels to "Stopping…" (ticket 015).
+  const [interrupting, setInterrupting] = useState<Record<string, boolean>>({});
 
   // The surface this widget is mounted on — the same value we record as the
   // comment `url` (web sends the page URL). Used to scope restored pills to
@@ -265,6 +252,25 @@ function PinagentDev({ projectRoot = '', screenName }: PinagentProps): ReactElem
   const closeStream = useCallback((id: string) => {
     setStreams((prev) => prev.filter((s) => s.id !== id));
     setExpandedId((cur) => (cur === id ? null : cur));
+    setStatuses((prev) => {
+      if (!(id in prev)) return prev;
+      const { [id]: _drop, ...rest } = prev;
+      return rest;
+    });
+    setInterrupting((prev) => {
+      if (!(id in prev)) return prev;
+      const { [id]: _drop, ...rest } = prev;
+      return rest;
+    });
+  }, []);
+
+  // A StreamSheet reports its derived state (and Stop overlay) here (stable
+  // identity so the sheet's effect doesn't re-fire on every parent render).
+  const onRunState = useCallback((id: string, state: RunState, stopping: boolean) => {
+    setStatuses((prev) => (prev[id] === state ? prev : { ...prev, [id]: state }));
+    setInterrupting((prev) =>
+      (prev[id] ?? false) === stopping ? prev : { ...prev, [id]: stopping },
+    );
   }, []);
 
   // Tapping the FAB toggles picking; cancelling a pick also drops a pending
@@ -479,8 +485,8 @@ function PinagentDev({ projectRoot = '', screenName }: PinagentProps): ReactElem
     setPhase('idle');
 
     // Agent spawned → stream the run live and expand its sheet (any previously
-    // expanded run drops to a minimized pill). Otherwise (spawn off) fall back
-    // to a transient toast; pull mode (MCP) picks it up.
+    // expanded run collapses into the dock). Otherwise (spawn off) fall back to
+    // a transient toast; pull mode (MCP) picks it up.
     if (outcome.streamId) {
       const id = outcome.streamId;
       setStreams((prev) => (prev.some((s) => s.id === id) ? prev : [...prev, { id, target }]));
@@ -549,7 +555,7 @@ function PinagentDev({ projectRoot = '', screenName }: PinagentProps): ReactElem
         onRequestClose={onDismissComposer}
       >
         {/* Pad the docked composer up by the live keyboard height so the
-            input and actions clear the soft keyboard (see useKeyboardHeight
+            input and actions clear the soft keyboard (see keyboard-height.ts
             for why KeyboardAvoidingView can't do this inside a Modal). */}
         <View style={[styles.composerBackdrop, { paddingBottom: keyboardHeight }]}>
           <View style={styles.composer}>
@@ -634,6 +640,14 @@ function PinagentDev({ projectRoot = '', screenName }: PinagentProps): ReactElem
               multiline
               value={comment}
               onChangeText={setComment}
+              // Escape backs out of the composer (web-widget parity) when a
+              // hardware keyboard is attached. Enter stays a newline: the
+              // composer is multiline (agent prompts run long) and RN's
+              // onKeyPress can't see Shift to tell submit from newline, so Send
+              // stays the explicit action. See keyboard.ts.
+              onKeyPress={(e) => {
+                if (isDismissKey(e.nativeEvent.key)) onDismissComposer();
+              }}
               placeholder="What should change here?"
               placeholderTextColor="#9aa0a6"
               style={styles.input}
@@ -687,29 +701,37 @@ function PinagentDev({ projectRoot = '', screenName }: PinagentProps): ReactElem
         </View>
       )}
 
-      {/* Live agent transcripts — one per spawned run. The expanded one shows
-          its full sheet; the rest render as minimized pills (stacked bottom-
-          left) that keep streaming. Each stays mounted across minimize/expand
-          so its WebSocket — and live transcript — survive. */}
-      {streams.map((s, i) => {
-        const minimized = s.id !== expandedId;
-        // Stack index among the minimized pills only, so they don't overlap.
-        const stackIndex = streams
-          .filter((o) => o.id !== expandedId)
-          .findIndex((o) => o.id === s.id);
-        return (
-          <StreamSheet
-            key={s.id}
-            feedbackId={s.id}
-            target={s.target}
-            minimized={minimized}
-            stackIndex={stackIndex < 0 ? i : stackIndex}
-            onMinimize={() => setExpandedId(null)}
-            onExpand={() => setExpandedId(s.id)}
-            onClose={() => closeStream(s.id)}
-          />
-        );
-      })}
+      {/* Live agent transcripts — one per spawned run. Each stays mounted so
+          its WebSocket and transcript survive minimize/expand; the expanded one
+          renders its full sheet, the rest render null and surface as compact
+          chips in the dock below (each reports its state via onState). */}
+      {streams.map((s) => (
+        <StreamSheet
+          key={s.id}
+          feedbackId={s.id}
+          target={s.target}
+          minimized={s.id !== expandedId}
+          onMinimize={() => setExpandedId(null)}
+          onClose={() => closeStream(s.id)}
+          onState={(state, stopping) => onRunState(s.id, state, stopping)}
+        />
+      ))}
+
+      {/* Compact dock for the minimized runs (bottom-left): a chip when one
+          runs, a count bar at 2+, with finished runs rolled into a summary.
+          The expanded run is excluded — it's showing its full sheet. */}
+      <AgentDock
+        runs={streams
+          .filter((s) => s.id !== expandedId)
+          .map((s) => ({
+            id: s.id,
+            target: s.target,
+            state: statuses[s.id] ?? 'connecting',
+            interrupting: interrupting[s.id] ?? false,
+          }))}
+        onExpand={setExpandedId}
+        onClose={closeStream}
+      />
     </View>
   );
 }