@pinagent/react-native 0.2.3 → 0.2.5

package/src/native/StreamSheet.tsx

@@ -14,56 +14,62 @@
  * reconnect replays the agent transcript, so we clear `events` on `onReset`
  * but keep local follow-ups.
  *
- * The sheet can be **minimized** to a compact status pill so the developer can
- * keep interacting with the app — e.g. to pick another element and spawn a
- * second agent. Minimizing doesn't tear the run down: the component stays
- * mounted (only its rendering changes), so the WebSocket keeps streaming in the
- * background and the live transcript is intact the moment it's re-expanded.
- * `<Pinagent/>` mounts one of these per concurrent run.
+ * The sheet can be **minimized**: the run drops into the compact bottom-left
+ * `AgentDock` (a chip / count bar) so the developer can keep interacting with
+ * the app — e.g. to pick another element and spawn a second agent. Minimizing
+ * doesn't tear the run down: this component stays mounted and simply renders
+ * `null` (the dock draws the compact UI), so the WebSocket keeps streaming in
+ * the background and the live transcript is intact the moment it's re-expanded.
+ * `<Pinagent/>` mounts one of these per concurrent run and reads each run's
+ * derived {@link RunState} (reported via `onState`) to drive the dock.
  */
 import type { ReactElement } from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Animated,
-  Modal,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { Modal, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import { isDismissKey } from './keyboard';
+import { useKeyboardHeight } from './keyboard-height';
+import { MarkdownView } from './MarkdownView';
+import { deriveRunState, interruptOverlayActive, type RunState } from './run-state';
+import { isNearBottom } from './scroll-follow';
 import { type AgentEvent, pendingAsk, renderTranscript } from './transcript';
 import { StreamClient } from './ws-client';
 
-/** Height of a minimized pill — drives the bottom-left stacking offset. */
-const PILL_HEIGHT = 40;
+/** Expanded-sheet header text per run state. */
+const HEADER_LABEL: Record<RunState, string> = {
+  connecting: 'Connecting',
+  working: 'Agent working',
+  awaiting: 'Agent needs input',
+  done: 'Agent finished',
+  failed: 'Agent failed',
+};
 
 export interface StreamSheetProps {
   feedbackId: string;
   /** Source label shown in the header (e.g. `file:line` or component name). */
   target: string;
-  /** Render as a compact pill (WS stays live) instead of the full sheet. */
+  /** Minimized → render nothing (the dock shows the compact chip); WS stays live. */
   minimized: boolean;
-  /** Stack position among minimized pills (0 = bottom-most), for layout. */
-  stackIndex: number;
-  /** Collapse the full sheet to its pill. */
+  /** Collapse the full sheet back into the dock. */
   onMinimize: () => void;
-  /** Expand the pill back to the full sheet. */
-  onExpand: () => void;
   /** Dismiss for good — tears down the WS and removes this run's view. */
   onClose: () => void;
+  /**
+   * Report the run's derived state up so the dock can render it. `interrupting`
+   * is the Stop overlay (ticket 015) — the developer tapped Stop and we're
+   * awaiting teardown; the dock relabels the chip to "Stopping…" while active.
+   */
+  onState: (state: RunState, interrupting: boolean) => void;
 }
 
 export function StreamSheet({
   feedbackId,
   target,
   minimized,
-  stackIndex,
   onMinimize,
-  onExpand,
   onClose,
-}: StreamSheetProps): ReactElement {
+  onState,
+}: StreamSheetProps): ReactElement | null {
   const [events, setEvents] = useState<AgentEvent[]>([]);
   const [followUps, setFollowUps] = useState<string[]>([]);
   const [answered, setAnswered] = useState<Record<string, string>>({});
@@ -71,13 +77,38 @@ export function StreamSheet({
   const [transportError, setTransportError] = useState<string | null>(null);
   const [draft, setDraft] = useState('');
   const [askDraft, setAskDraft] = useState('');
+  // The developer tapped Stop and we sent the interrupt frame; we keep showing
+  // "Interrupting…" (button disabled) until a terminal event lands (ticket 015).
+  // Purely a client-side affordance over the fire-and-forget `interrupt` frame.
+  const [interrupting, setInterrupting] = useState(false);
 
   const clientRef = useRef<StreamClient | null>(null);
   const scrollRef = useRef<ScrollView>(null);
+  // Whether the developer is pinned at (or near) the bottom of the transcript.
+  // Starts true so a freshly expanded sheet auto-follows the latest output;
+  // flips off the moment they scroll up to re-read, and back on when they
+  // return to the bottom. A ref (not state) so updating it on every scroll
+  // frame doesn't re-render the sheet.
+  const atBottomRef = useRef(true);
+  // True until the first auto-scroll on a non-empty transcript lands, so the
+  // initial scroll-to-end always fires regardless of measured position.
+  const didInitialScrollRef = useRef(false);
+  // The sheet is its own Modal, so KeyboardAvoidingView can't lift it — pad the
+  // backdrop up by the live keyboard height (matches the composer; keyboard-height.ts).
+  const keyboardHeight = useKeyboardHeight();
 
   useEffect(() => {
     const client = new StreamClient(feedbackId, {
-      onReset: () => setEvents([]),
+      // A reconnect replays the transcript from scratch, so clear the events —
+      // and the prior transport error, so a recovered run leaves the `failed`
+      // state instead of staying stuck red after a successful reconnect.
+      onReset: () => {
+        setEvents([]);
+        setTransportError(null);
+        // A reconnect replays a still-live run; drop any stale interrupting
+        // affordance so a recovered run reads as working, not stuck "Stopping…".
+        setInterrupting(false);
+      },
       onEvent: (event) => {
         setEvents((prev) => [...prev, event]);
         if (event.type === 'result') setDone(true);
@@ -92,67 +123,53 @@ export function StreamSheet({
 
   const rows = useMemo(() => renderTranscript(events), [events]);
   const ask = useMemo(() => pendingAsk(events), [events]);
-  const askOpen = ask && !answered[ask.askId];
-  const running = !done && !transportError;
-  // The agent is blocked on an `ask_user` we haven't answered. While minimized
-  // that would otherwise be invisible — the run just stalls — so the pill flags
-  // it and pulses to pull you back. (When expanded, the answer form shows.)
-  const needsInput = minimized && !!askOpen;
+  const state = deriveRunState({ events, done, transportError, answered });
+  const askOpen = state === 'awaiting' && !!ask;
+  const running = state === 'connecting' || state === 'working' || state === 'awaiting';
+  // The interrupt only shows while the run is still active; once a terminal
+  // event lands the run is done/failed and the overlay no longer applies.
+  const showInterrupting = interruptOverlayActive(state, interrupting);
 
-  // Drive the pulse on the minimized pill while it's waiting for input. The
-  // ref/effect are hooks, so they live above the early return; the loop only
-  // runs in the `needsInput` state and resets otherwise.
-  const pulse = useRef(new Animated.Value(1)).current;
+  // A terminal event cleared the run — drop the local interrupting flag so a
+  // subsequent follow-up (which resumes the run) starts fresh, not "Stopping…".
   useEffect(() => {
-    if (!needsInput) {
-      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();
-  }, [needsInput, pulse]);
+    if (interrupting && !interruptOverlayActive(state, true)) setInterrupting(false);
+  }, [state, interrupting]);
 
-  // Minimized: a compact, tappable status pill. The WS hooks above keep
-  // running because the component stays mounted — only the rendering changes —
-  // so the run streams on in the background and re-expands with full state.
-  if (minimized) {
-    return (
-      <Pressable
-        onPress={onExpand}
-        accessibilityRole="button"
-        style={[
-          styles.pill,
-          needsInput && styles.pillAsk,
-          { bottom: 40 + stackIndex * (PILL_HEIGHT + 8) },
-        ]}
-      >
-        <Animated.View
-          style={[
-            styles.pillDot,
-            needsInput
-              ? [styles.pillDotAsk, { opacity: pulse }]
-              : transportError
-                ? styles.pillDotError
-                : running
-                  ? styles.pillDotRunning
-                  : styles.pillDotDone,
-          ]}
-        />
-        <Text style={styles.pillText} numberOfLines={1}>
-          {needsInput ? `Needs input · ${target}` : target}
-        </Text>
-        <Pressable onPress={onClose} hitSlop={10} accessibilityRole="button">
-          <Text style={styles.pillClose}>✕</Text>
-        </Pressable>
-      </Pressable>
-    );
-  }
+  // Report the derived state up to <Pinagent/> so the dock reflects it. The
+  // callback is held in a ref so the effect fires only on a real state change
+  // (not whenever the parent passes a fresh inline `onState`). Runs while
+  // minimized too — this component stays mounted and only renders null.
+  const onStateRef = useRef(onState);
+  onStateRef.current = onState;
+  useEffect(() => {
+    onStateRef.current(state, showInterrupting);
+  }, [state, showInterrupting]);
+
+  // Track whether the developer is parked at the bottom so a content change
+  // only re-pins when they haven't scrolled up to re-read (chat-log behavior).
+  const onScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+    atBottomRef.current = isNearBottom({
+      offsetY: contentOffset.y,
+      viewportH: layoutMeasurement.height,
+      contentH: contentSize.height,
+    });
+  }, []);
+
+  // On a content change, auto-follow only when pinned at the bottom — except the
+  // very first non-empty layout, which always lands at the latest so a freshly
+  // expanded sheet opens scrolled to the end.
+  const onContentSizeChange = useCallback(() => {
+    if (didInitialScrollRef.current && !atBottomRef.current) return;
+    didInitialScrollRef.current = true;
+    scrollRef.current?.scrollToEnd({ animated: true });
+  }, []);
+
+  // Minimized: render nothing. The WS hooks above keep running because the
+  // component stays mounted; the compact chip is drawn by the dock from the
+  // state we report. Re-expanding shows the full sheet with live state intact.
+  if (minimized) return null;
 
   function submitAnswer(answer: string): void {
     if (!ask || !answer.trim()) return;
@@ -167,21 +184,40 @@ export function StreamSheet({
     clientRef.current?.sendUserMessage(text);
     setFollowUps((prev) => [...prev, text]);
     setDraft('');
-    setDone(false); // a follow-up resumes the run
+    // A follow-up resumes the run: clear the terminal/error flags so it leaves
+    // the done/failed state and reads as working again — and drop any pending
+    // interrupt (the developer is continuing, not stopping).
+    setDone(false);
+    setTransportError(null);
+    setInterrupting(false);
+  }
+
+  // Stop: send the interrupt frame and immediately show "Interrupting…" until a
+  // terminal event lands. `interrupt()` reports whether the frame actually went
+  // out — if the socket is mid-reconnect it can't, so surface that instead of a
+  // silent no-op (ticket 015). Guarded against repeat taps by the disabled state.
+  function handleStop(): void {
+    if (interrupting) return;
+    const sent = clientRef.current?.interrupt() ?? false;
+    if (sent) {
+      setInterrupting(true);
+    } else {
+      setTransportError("Couldn't stop — connection lost. Reconnecting…");
+    }
   }
 
   return (
     <Modal visible transparent animationType="slide" onRequestClose={onClose}>
-      <View style={styles.backdrop}>
+      <View style={[styles.backdrop, { paddingBottom: keyboardHeight }]}>
         <View style={styles.sheet}>
           <View style={styles.header}>
             <Text style={styles.headerTitle} numberOfLines={1}>
-              {running ? 'Agent working' : 'Agent finished'} · {target}
+              {showInterrupting ? 'Stopping' : HEADER_LABEL[state]} · {target}
             </Text>
             <View style={styles.headerBtns}>
-              {/* Minimize: collapse to a pill so the app is interactive again
-                  (e.g. to pick another element and spawn a second agent). The
-                  run keeps streaming in the background. */}
+              {/* Minimize: collapse into the dock so the app is interactive
+                  again (e.g. to pick another element and spawn a second agent).
+                  The run keeps streaming in the background. */}
               <Pressable onPress={onMinimize} hitSlop={8} accessibilityRole="button">
                 <Text style={styles.headerBtn}>—</Text>
               </Pressable>
@@ -195,7 +231,9 @@ export function StreamSheet({
             ref={scrollRef}
             style={styles.log}
             contentContainerStyle={styles.logContent}
-            onContentSizeChange={() => scrollRef.current?.scrollToEnd({ animated: true })}
+            onScroll={onScroll}
+            scrollEventThrottle={16}
+            onContentSizeChange={onContentSizeChange}
           >
             {rows.length === 0 && !transportError ? (
               <Text style={styles.muted}>Connecting…</Text>
@@ -238,11 +276,9 @@ export function StreamSheet({
                   </Text>
                 );
               }
-              return (
-                <Text key={row.id} style={styles.textRow}>
-                  {row.text}
-                </Text>
-              );
+              // Agent prose arrives as Markdown — render it as such rather than
+              // dumping the raw `**`/`` ` ``/`#` markers into a plain <Text>.
+              return <MarkdownView key={row.id} text={row.text} baseStyle={styles.textRow} />;
             })}
 
             {followUps.map((m, i) => (
@@ -259,18 +295,37 @@ export function StreamSheet({
           {askOpen ? (
             <View style={styles.inputBar}>
               {ask.options.length > 0 ? (
-                <View style={styles.options}>
+                // Height-bounded + scrollable so a many-option (or long-option)
+                // ask never grows the form past the sheet and shoves the text
+                // input + Send below the fold (worse with the keyboard up).
+                // `flexShrink` lets the transcript above keep most of the room.
+                <ScrollView
+                  style={styles.optionsScroll}
+                  contentContainerStyle={styles.options}
+                  keyboardShouldPersistTaps="handled"
+                >
                   {ask.options.map((opt) => (
                     <Pressable key={opt} onPress={() => submitAnswer(opt)} style={styles.optionBtn}>
-                      <Text style={styles.optionText}>{opt}</Text>
+                      <Text style={styles.optionText} numberOfLines={1}>
+                        {opt}
+                      </Text>
                     </Pressable>
                   ))}
-                </View>
+                </ScrollView>
               ) : null}
               <View style={styles.row}>
                 <TextInput
                   value={askDraft}
                   onChangeText={setAskDraft}
+                  // Enter sends the answer; Escape minimizes the sheet
+                  // (web-widget parity). Single-line, so onSubmitEditing fires
+                  // reliably on Return; submitBehavior keeps focus. keyboard.ts.
+                  returnKeyType="send"
+                  submitBehavior="submit"
+                  onSubmitEditing={() => submitAnswer(askDraft)}
+                  onKeyPress={(e) => {
+                    if (isDismissKey(e.nativeEvent.key)) onMinimize();
+                  }}
                   placeholder="Answer the agent…"
                   placeholderTextColor="#9aa0a6"
                   style={styles.input}
@@ -290,6 +345,15 @@ export function StreamSheet({
                 <TextInput
                   value={draft}
                   onChangeText={setDraft}
+                  // Enter sends the follow-up; Escape minimizes the sheet
+                  // (web-widget parity). submitBehavior keeps the keyboard up so
+                  // several can be queued in a row. keyboard.ts.
+                  returnKeyType="send"
+                  submitBehavior="submit"
+                  onSubmitEditing={sendFollowUp}
+                  onKeyPress={(e) => {
+                    if (isDismissKey(e.nativeEvent.key)) onMinimize();
+                  }}
                   placeholder={running ? 'Queue a follow-up…' : 'Send a follow-up…'}
                   placeholderTextColor="#9aa0a6"
                   style={styles.input}
@@ -303,10 +367,17 @@ export function StreamSheet({
                 </Pressable>
               </View>
               <Pressable
-                onPress={() => (running ? clientRef.current?.interrupt() : onClose())}
-                style={styles.bottomBtn}
+                onPress={() => (running ? handleStop() : onClose())}
+                // Disable repeat taps while the interrupt is in flight; the
+                // affordance clears itself on the run's terminal event.
+                disabled={running && showInterrupting}
+                accessibilityRole="button"
+                accessibilityState={{ disabled: running && showInterrupting }}
+                style={[styles.bottomBtn, showInterrupting && styles.disabled]}
               >
-                <Text style={styles.bottomBtnText}>{running ? 'Stop' : 'Dismiss'}</Text>
+                <Text style={styles.bottomBtnText}>
+                  {running ? (showInterrupting ? 'Interrupting…' : 'Stop') : 'Dismiss'}
+                </Text>
               </Pressable>
             </View>
           )}
@@ -337,7 +408,10 @@ const styles = StyleSheet.create({
   headerTitle: { flex: 1, fontSize: 14, fontWeight: '600', color: '#111827' },
   headerBtns: { flexDirection: 'row', alignItems: 'center', gap: 16 },
   headerBtn: { fontSize: 16, color: '#6b7280', paddingLeft: 4 },
-  log: { paddingHorizontal: 16 },
+  // `flexShrink` so a tall transcript yields room to the pinned input bar (and
+  // the bounded options) instead of overflowing the 80%-max sheet and pushing
+  // the text input + Send off-screen. Short transcripts still size compactly.
+  log: { paddingHorizontal: 16, flexShrink: 1 },
   logContent: { paddingVertical: 12, gap: 8 },
   muted: { color: '#9aa0a6', fontSize: 13 },
   textRow: { fontSize: 14, color: '#111827', lineHeight: 20 },
@@ -362,8 +436,14 @@ const styles = StyleSheet.create({
     gap: 8,
     borderTopWidth: 1,
     borderTopColor: '#f0f0f0',
+    // Never shrink the answer form — the transcript above yields room instead,
+    // so the text input + Send stay reachable however many options the ask has.
+    flexShrink: 0,
   },
   row: { flexDirection: 'row', alignItems: 'flex-end', gap: 8 },
+  // Cap the option area so the text input + Send below it always stay on-screen;
+  // `flexShrink` yields room to the transcript first. The options scroll within.
+  optionsScroll: { maxHeight: 132, flexShrink: 1 },
   options: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
   optionBtn: {
     borderWidth: 1,
@@ -371,6 +451,8 @@ const styles = StyleSheet.create({
     borderRadius: 999,
     paddingHorizontal: 12,
     paddingVertical: 6,
+    // A single long option ellipsizes instead of forcing the row wide.
+    maxWidth: '100%',
   },
   optionText: { color: '#6d28d9', fontSize: 13, fontWeight: '600' },
   input: {
@@ -394,33 +476,4 @@ const styles = StyleSheet.create({
   disabled: { opacity: 0.4 },
   bottomBtn: { alignSelf: 'center', paddingVertical: 8 },
   bottomBtnText: { color: '#6b7280', fontWeight: '600' },
-  // Minimized status pill, bottom-left so it never collides with the FAB
-  // (bottom-right). `bottom` is set inline from the stack index.
-  pill: {
-    position: 'absolute',
-    left: 20,
-    maxWidth: '70%',
-    height: PILL_HEIGHT,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    paddingHorizontal: 12,
-    borderRadius: PILL_HEIGHT / 2,
-    backgroundColor: 'rgba(17,24,39,0.95)',
-    shadowColor: '#000',
-    shadowOpacity: 0.25,
-    shadowRadius: 6,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 5,
-  },
-  // Waiting on `ask_user`: a purple-tinted pill (matching the expanded ask row)
-  // so a blocked run reads differently from a busy one at a glance.
-  pillAsk: { backgroundColor: 'rgba(76,29,149,0.97)' },
-  pillDot: { width: 8, height: 8, borderRadius: 4 },
-  pillDotRunning: { backgroundColor: '#3b82f6' },
-  pillDotDone: { backgroundColor: '#10b981' },
-  pillDotError: { backgroundColor: '#ef4444' },
-  pillDotAsk: { backgroundColor: '#c4b5fd' },
-  pillText: { flexShrink: 1, color: '#fff', fontSize: 13, fontWeight: '600' },
-  pillClose: { color: '#9aa0a6', fontSize: 13, paddingLeft: 2 },
 });