@blario/react-native 0.0.0-stage → 0.1.0

package/src/agent-mode/ui/AgentTap.tsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+
+import { centerOf, type Point } from '../../host/rect.ts';
+import type { CursorSnapshot } from '../cursor.ts';
+
+export interface AgentTapProps {
+  snapshot: CursorSnapshot;
+  color: string;
+  reduceMotion: boolean;
+  onAttach: () => void;
+  onDetach: () => void;
+}
+
+interface TapRingProps {
+  point: Point;
+  landed: boolean;
+  ending: boolean;
+  color: string;
+  reduceMotion: boolean;
+  onEnded: () => void;
+}
+
+interface Ripple {
+  id: number;
+  point: Point;
+}
+
+const RING = 40;
+const WRAP = RING + 2;
+const APPROACH_MS = 220;
+const PRESS_MS = 90;
+const RELEASE_MS = 160;
+const FADE_MS = 200;
+const RIPPLE_MS = 500;
+const END_FADE_MS = 150;
+const REDUCED_IN_MS = 150;
+const REDUCED_HOLD_MS = 250;
+const REST_FILL = 0.24;
+const PRESSED_FILL = 0.5;
+
+const APPROACH = Easing.bezier(0.22, 1, 0.36, 1);
+const PRESS = Easing.bezier(0.33, 0, 0.67, 1);
+const RELEASE = Easing.bezier(0.34, 1.56, 0.64, 1);
+const RIPPLE = Easing.bezier(0.16, 1, 0.3, 1);
+const EASE_OUT = Easing.out(Easing.ease);
+
+function timing(value: Animated.Value, toValue: number, duration: number, easing: (value: number) => number, delay = 0): Animated.CompositeAnimation {
+  return Animated.timing(value, { toValue, duration, easing, delay, useNativeDriver: true });
+}
+
+function useLatest<T>(value: T): { current: T } {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+function placed(point: Point): { left: number; top: number } {
+  return { left: point.x - WRAP / 2, top: point.y - WRAP / 2 };
+}
+
+function TapRing({ point, landed, ending, color, reduceMotion, onEnded }: TapRingProps): React.JSX.Element {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(reduceMotion ? 1 : 1.5)).current;
+  const fill = useRef(new Animated.Value(REST_FILL)).current;
+  const ended = useLatest(onEnded);
+
+  useEffect(() => {
+    const approach = reduceMotion
+      ? timing(opacity, 1, REDUCED_IN_MS, EASE_OUT)
+      : Animated.parallel([timing(opacity, 1, APPROACH_MS, APPROACH), timing(scale, 1, APPROACH_MS, APPROACH)]);
+    approach.start();
+  }, [opacity, scale, reduceMotion]);
+
+  useEffect(() => {
+    if (!landed) {
+      return;
+    }
+    if (reduceMotion) {
+      fill.setValue(PRESSED_FILL);
+      timing(opacity, 0, FADE_MS, EASE_OUT, REDUCED_HOLD_MS).start();
+      return;
+    }
+    Animated.parallel([
+      Animated.sequence([timing(scale, 0.84, PRESS_MS, PRESS), timing(scale, 1, RELEASE_MS, RELEASE)]),
+      Animated.sequence([timing(fill, PRESSED_FILL, PRESS_MS, PRESS), timing(fill, REST_FILL, RELEASE_MS, RELEASE)]),
+      timing(opacity, 0, FADE_MS, EASE_OUT, PRESS_MS + RELEASE_MS),
+    ]).start();
+  }, [landed, reduceMotion, fill, opacity, scale]);
+
+  useEffect(() => {
+    if (ending) {
+      timing(opacity, 0, END_FADE_MS, EASE_OUT).start(() => ended.current());
+    }
+  }, [ending, opacity, ended]);
+
+  return (
+    <Animated.View style={[styles.wrap, placed(point), { opacity, transform: [{ scale }] }]}>
+      <Animated.View style={[styles.fill, { backgroundColor: color, opacity: fill }]} />
+      <View style={styles.ring} />
+      <View style={styles.innerHairline} />
+    </Animated.View>
+  );
+}
+
+function TapRipple({ point, onDone }: { point: Point; onDone: () => void }): React.JSX.Element {
+  const progress = useRef(new Animated.Value(0)).current;
+  const done = useLatest(onDone);
+  useEffect(() => {
+    timing(progress, 1, RIPPLE_MS, RIPPLE, PRESS_MS).start(() => done.current());
+  }, [progress, done]);
+  return (
+    <Animated.View
+      style={[
+        styles.rippleWrap,
+        placed(point),
+        {
+          opacity: progress.interpolate({ inputRange: [0, 0.001, 1], outputRange: [0, 0.9, 0] }),
+          transform: [{ scale: progress.interpolate({ inputRange: [0, 1], outputRange: [1, 2.2] }) }],
+        },
+      ]}
+    >
+      <View style={styles.rippleRing} />
+    </Animated.View>
+  );
+}
+
+export function AgentTap({ snapshot, color, reduceMotion, onAttach, onDetach }: AgentTapProps): React.JSX.Element {
+  const { tap, target, landed } = snapshot;
+  const [ripples, setRipples] = useState<Ripple[]>([]);
+  const [endedTap, setEndedTap] = useState(0);
+  const lastPoint = useRef<{ tap: number; point: Point } | null>(null);
+
+  useEffect(() => onDetach, [onDetach]);
+
+  if (target !== null) {
+    const next = centerOf(target);
+    const last = lastPoint.current;
+    if (last === null || last.tap !== tap || last.point.x !== next.x || last.point.y !== next.y) {
+      lastPoint.current = { tap, point: next };
+    }
+  }
+  const point = lastPoint.current !== null && lastPoint.current.tap === tap ? lastPoint.current.point : null;
+
+  useEffect(() => {
+    if (!landed || point === null || reduceMotion) {
+      return;
+    }
+    setRipples((current) => [...current.filter((existing) => existing.id !== tap), { id: tap, point }]);
+  }, [landed, tap, point, reduceMotion]);
+
+  const showRing = point !== null && tap !== endedTap && !(target === null && landed);
+  return (
+    <View pointerEvents="none" style={StyleSheet.absoluteFill} onLayout={onAttach}>
+      {ripples.map((ripple) => (
+        <TapRipple key={ripple.id} point={ripple.point} onDone={() => setRipples((current) => current.filter((existing) => existing.id !== ripple.id))} />
+      ))}
+      {showRing ? (
+        <TapRing key={tap} point={point} landed={landed} ending={target === null} color={color} reduceMotion={reduceMotion} onEnded={() => setEndedTap(tap)} />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    position: 'absolute',
+    width: WRAP,
+    height: WRAP,
+    borderRadius: WRAP / 2,
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.2)',
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.28,
+    shadowRadius: 5,
+  },
+  fill: { ...StyleSheet.absoluteFillObject, borderRadius: RING / 2 },
+  ring: { ...StyleSheet.absoluteFillObject, borderRadius: RING / 2, borderWidth: 2.5, borderColor: '#ffffff' },
+  innerHairline: { position: 'absolute', left: 2.5, top: 2.5, right: 2.5, bottom: 2.5, borderRadius: RING / 2 - 2.5, borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0.12)' },
+  rippleWrap: {
+    position: 'absolute',
+    width: WRAP,
+    height: WRAP,
+    borderRadius: WRAP / 2,
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.16)',
+  },
+  rippleRing: { ...StyleSheet.absoluteFillObject, borderRadius: RING / 2, borderWidth: 2, borderColor: '#ffffff' },
+});

package/src/agent-mode/ui/MarkdownText.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { StyleSheet, Text, View, type TextStyle } from 'react-native';
+
+import { type Inline, type InlineKind, type MarkdownBlock, parseMarkdown } from '../markdown.ts';
+
+export interface MarkdownTextProps {
+  source: string;
+  linkColor: string;
+  textStyle?: TextStyle;
+}
+
+const INLINE_STYLES: Readonly<Record<InlineKind, TextStyle>> = {
+  text: {},
+  bold: { fontWeight: '600' },
+  italic: { fontStyle: 'italic' },
+  code: { fontFamily: 'monospace', fontSize: 12, backgroundColor: '#f3f4f6' },
+  link: {},
+};
+
+function renderInlines(inlines: Inline[], linkColor: string): React.JSX.Element[] {
+  return inlines.map((inline, index) => (
+    <Text key={index} style={[INLINE_STYLES[inline.kind], inline.kind === 'link' ? { color: linkColor } : null]}>
+      {inline.text}
+    </Text>
+  ));
+}
+
+function renderBlock(block: MarkdownBlock, index: number, last: boolean, linkColor: string, textStyle: TextStyle | undefined): React.JSX.Element {
+  const spacing = last ? null : styles.spaced;
+  if (block.kind === 'paragraph') {
+    return (
+      <Text key={index} style={[styles.text, textStyle, spacing]}>
+        {renderInlines(block.inlines, linkColor)}
+      </Text>
+    );
+  }
+  return (
+    <View key={index} style={[styles.item, spacing]}>
+      <Text style={[styles.text, textStyle]}>{block.kind === 'bullet' ? '•' : block.marker}</Text>
+      <Text style={[styles.text, textStyle, styles.itemText]}>{renderInlines(block.inlines, linkColor)}</Text>
+    </View>
+  );
+}
+
+export function MarkdownText({ source, linkColor, textStyle }: MarkdownTextProps): React.JSX.Element {
+  const blocks = parseMarkdown(source);
+  return <View>{blocks.map((block, index) => renderBlock(block, index, index === blocks.length - 1, linkColor, textStyle))}</View>;
+}
+
+const styles = StyleSheet.create({
+  text: { fontSize: 14, lineHeight: 20, color: '#1f2937' },
+  spaced: { marginBottom: 6 },
+  item: { flexDirection: 'row', gap: 6, paddingLeft: 4 },
+  itemText: { flex: 1 },
+});

package/src/agent-mode/ui/MessageBubbles.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, ScrollView, StyleSheet } from 'react-native';
+
+import type { AgentBubble } from '../bubbles.ts';
+import { MarkdownText } from './MarkdownText.tsx';
+
+export interface MessageBubblesProps {
+  bubbles: AgentBubble[];
+  width: number;
+  bottom: number;
+  linkColor: string;
+}
+
+const SLIDE_MS = 300;
+const SLIDE_DISTANCE = 20;
+
+function Bubble({ bubble, linkColor }: { bubble: AgentBubble; linkColor: string }): React.JSX.Element {
+  const shown = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(shown, { toValue: bubble.leaving ? 0 : 1, duration: SLIDE_MS, useNativeDriver: true }).start();
+  }, [bubble.leaving, shown]);
+  const translateY = shown.interpolate({ inputRange: [0, 1], outputRange: [SLIDE_DISTANCE, 0] });
+  return (
+    <Animated.View style={[styles.bubble, { opacity: shown, transform: [{ translateY }] }]}>
+      <ScrollView style={styles.scroll} contentContainerStyle={styles.content}>
+        <MarkdownText source={bubble.text} linkColor={linkColor} />
+      </ScrollView>
+    </Animated.View>
+  );
+}
+
+export function MessageBubbles({ bubbles, width, bottom, linkColor }: MessageBubblesProps): React.JSX.Element | null {
+  if (bubbles.length === 0) {
+    return null;
+  }
+  return (
+    <Animated.View style={[styles.column, { width, bottom }]} pointerEvents="box-none">
+      {bubbles.map((bubble) => (
+        <Bubble key={bubble.id} bubble={bubble} linkColor={linkColor} />
+      ))}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  column: { position: 'absolute', alignSelf: 'center', gap: 10 },
+  bubble: {
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    elevation: 6,
+    shadowColor: '#000000',
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 4 },
+  },
+  scroll: { maxHeight: 140 },
+  content: { paddingHorizontal: 14, paddingVertical: 12 },
+});

package/src/agent-mode/ui/PendingOverlay.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export interface PendingOverlayProps {
+  text: string;
+}
+
+export function PendingOverlay({ text }: PendingOverlayProps): React.JSX.Element {
+  return (
+    <View style={styles.backdrop} onStartShouldSetResponder={() => true} accessibilityLiveRegion="polite">
+      <View style={styles.pill}>
+        <Text style={styles.text}>{text}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0, 0, 0, 0.3)', alignItems: 'center', justifyContent: 'center' },
+  pill: {
+    backgroundColor: 'rgba(255, 255, 255, 0.85)',
+    borderRadius: 10,
+    paddingHorizontal: 24,
+    paddingVertical: 14,
+    elevation: 6,
+    shadowColor: '#000000',
+    shadowOpacity: 0.15,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 4 },
+  },
+  text: { fontSize: 14, fontWeight: '500', color: '#1f2937' },
+});

package/src/agent-mode/ui/SpotlightLayer.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, View } from 'react-native';
+
+import type { SpotlightSnapshot } from '../spotlight-controller.ts';
+import type { ActiveSpotlight } from './AgentPanel.tsx';
+import { SPOTLIGHT_DIM, SpotlightOverlay } from './SpotlightOverlay.tsx';
+import { TargetPulse } from './TargetPulse.tsx';
+
+export interface SpotlightLayerProps {
+  spotlight: SpotlightSnapshot;
+  color: string;
+  reduceMotion: boolean;
+  onBackdropPress: () => void;
+}
+
+const FADE_MS = 200;
+const REDUCED_MS = 150;
+
+export function SpotlightLayer({ spotlight, color, reduceMotion, onBackdropPress }: SpotlightLayerProps): React.JSX.Element | null {
+  const visible = spotlight.kind !== 'none' && spotlight.shown;
+  const last = useRef<ActiveSpotlight | null>(null);
+  const opacity = useRef(new Animated.Value(0)).current;
+  const [gone, setGone] = useState(true);
+
+  if (spotlight.kind !== 'none' && spotlight.shown) {
+    last.current = spotlight;
+  }
+
+  useEffect(() => {
+    const duration = reduceMotion ? REDUCED_MS : FADE_MS;
+    if (visible) {
+      setGone(false);
+      Animated.timing(opacity, { toValue: 1, duration, easing: Easing.out(Easing.ease), useNativeDriver: true }).start();
+      return;
+    }
+    Animated.timing(opacity, { toValue: 0, duration, easing: Easing.out(Easing.ease), useNativeDriver: true }).start(({ finished }) => {
+      if (finished) {
+        setGone(true);
+      }
+    });
+  }, [visible, reduceMotion, opacity]);
+
+  const current = last.current;
+  if (current === null || (gone && !visible)) {
+    return null;
+  }
+  return (
+    <Animated.View pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, { opacity }]}>
+      {current.kind === 'confirming' ? <Pressable style={StyleSheet.absoluteFill} onPress={onBackdropPress} /> : null}
+      {current.hole === null ? <View pointerEvents="none" style={styles.dim} /> : <SpotlightOverlay hole={current.hole} />}
+      {current.kind === 'confirming' && current.target !== null ? (
+        <TargetPulse target={current.target} radius={current.request.target?.radius ?? 0} color={color} reduceMotion={reduceMotion} />
+      ) : null}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  dim: { ...StyleSheet.absoluteFillObject, backgroundColor: SPOTLIGHT_DIM },
+});

package/src/agent-mode/ui/SpotlightOverlay.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+
+import type { Hole } from '../spotlight.ts';
+
+export interface SpotlightOverlayProps {
+  hole: Hole;
+}
+
+export const SPOTLIGHT_DIM = 'rgba(0, 0, 0, 0.6)';
+
+export function SpotlightOverlay({ hole }: SpotlightOverlayProps): React.JSX.Element {
+  const { width, height } = useWindowDimensions();
+  const span = Math.max(width, height) * 2;
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.mask,
+        {
+          left: hole.x - span,
+          top: hole.y - span,
+          width: hole.width + span * 2,
+          height: hole.height + span * 2,
+          borderWidth: span,
+          borderRadius: hole.radius + span,
+        },
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  mask: { position: 'absolute', borderColor: SPOTLIGHT_DIM },
+});

package/src/agent-mode/ui/StatusCard.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { onColor, withAlpha } from '../colors.ts';
+
+export interface StatusCardProps {
+  status: string;
+  queued: string | null;
+  stopLabel: string;
+  color: string;
+  stopHidden: boolean;
+  corners: StatusCorners;
+  pulse: number;
+  cleared: boolean;
+  onStop: () => void;
+}
+
+export type StatusCorners = 'round' | 'square-top' | 'square-bottom';
+
+const RADIUS = 16;
+
+function cornersOf(corners: StatusCorners): { borderTopLeftRadius: number; borderTopRightRadius: number; borderBottomLeftRadius: number; borderBottomRightRadius: number } {
+  const top = corners === 'square-top' ? 0 : RADIUS;
+  const bottom = corners === 'square-bottom' ? 0 : RADIUS;
+  return { borderTopLeftRadius: top, borderTopRightRadius: top, borderBottomLeftRadius: bottom, borderBottomRightRadius: bottom };
+}
+
+const STOP_HIT_SLOP = 8;
+const PULSE_STEP_MS = 400;
+const PULSE_TIMES = 3;
+const BORDER_MS = 2_500;
+const CLEAR_MS = 150;
+const RETURN_MS = 200;
+
+function useClearance(cleared: boolean): Animated.Value {
+  const opacity = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    Animated.timing(opacity, { toValue: cleared ? 0 : 1, duration: cleared ? CLEAR_MS : RETURN_MS, useNativeDriver: true }).start();
+  }, [cleared, opacity]);
+  return opacity;
+}
+
+function useStopPulse(pulse: number): { scale: Animated.Value; bordered: boolean } {
+  const scale = useRef(new Animated.Value(1)).current;
+  const [bordered, setBordered] = useState(false);
+  useEffect(() => {
+    if (pulse === 0) {
+      return undefined;
+    }
+    setBordered(true);
+    const beat = Animated.sequence([
+      Animated.timing(scale, { toValue: 1.2, duration: PULSE_STEP_MS, useNativeDriver: true }),
+      Animated.timing(scale, { toValue: 1, duration: PULSE_STEP_MS, useNativeDriver: true }),
+    ]);
+    const animation = Animated.loop(beat, { iterations: PULSE_TIMES });
+    animation.start();
+    const timer = setTimeout(() => setBordered(false), BORDER_MS);
+    return () => {
+      animation.stop();
+      clearTimeout(timer);
+    };
+  }, [pulse, scale]);
+  return { scale, bordered };
+}
+
+export function StatusCard({ status, queued, stopLabel, color, stopHidden, corners, pulse, cleared, onStop }: StatusCardProps): React.JSX.Element {
+  const { scale, bordered } = useStopPulse(pulse);
+  const opacity = useClearance(cleared);
+  const ink = onColor(color);
+  return (
+    <Animated.View
+      pointerEvents={cleared ? 'none' : 'auto'}
+      style={[styles.card, cornersOf(corners), { backgroundColor: color, opacity }]}
+      accessibilityLiveRegion="polite"
+    >
+      <View style={styles.header}>
+        <Text style={[styles.status, { color: withAlpha(ink, 0.85) }]} numberOfLines={2}>
+          {status}
+        </Text>
+        <Animated.View style={[{ transform: [{ scale }] }, stopHidden ? styles.hidden : null]}>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={stopLabel}
+            hitSlop={STOP_HIT_SLOP}
+            style={[styles.stop, { backgroundColor: withAlpha(ink, 0.2) }, bordered ? { borderWidth: 2, borderColor: withAlpha(ink, 0.8) } : null]}
+            onPress={onStop}
+          >
+            <View style={[styles.stopIcon, { backgroundColor: ink }]} />
+          </Pressable>
+        </Animated.View>
+      </View>
+      {queued === null ? null : (
+        <View style={styles.queued}>
+          <Text style={styles.queuedIcon}>✓</Text>
+          <Text style={styles.queuedText} numberOfLines={1}>
+            {queued}
+          </Text>
+        </View>
+      )}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    gap: 10,
+    paddingHorizontal: 18,
+    paddingVertical: 14,
+    elevation: 8,
+    shadowColor: '#000000',
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 4 },
+  },
+  header: { flexDirection: 'row', alignItems: 'center', gap: 10, minHeight: 28 },
+  hidden: { display: 'none' },
+  status: { flex: 1, fontSize: 13, lineHeight: 17, fontWeight: '500', fontStyle: 'italic' },
+  stop: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stopIcon: { width: 12, height: 12, borderRadius: 1 },
+  queued: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: 'rgba(134, 239, 172, 0.2)',
+  },
+  queuedIcon: { fontSize: 12, color: '#86efac' },
+  queuedText: { flex: 1, fontSize: 11, color: '#86efac' },
+});

package/src/agent-mode/ui/TargetPulse.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+
+import type { Rect } from '../../host/rect.ts';
+import { withAlpha } from '../colors.ts';
+
+export interface TargetPulseProps {
+  target: Rect;
+  radius: number;
+  color: string;
+  reduceMotion: boolean;
+}
+
+const OUTLINE_OFFSET = 4;
+const OUTLINE_WIDTH = 3;
+// A white hairline right outside the outline keeps a near-black brand readable on the dim.
+const EDGE_WIDTH = 1.5;
+const EDGE_COLOR = 'rgba(255, 255, 255, 0.9)';
+const PULSE_MS = 2_000;
+
+function ring(target: Rect, radius: number, spread: number): { left: number; top: number; width: number; height: number; borderRadius: number } {
+  return {
+    left: target.x - spread,
+    top: target.y - spread,
+    width: target.width + spread * 2,
+    height: target.height + spread * 2,
+    borderRadius: radius + spread,
+  };
+}
+
+export function TargetPulse({ target, radius, color, reduceMotion }: TargetPulseProps): React.JSX.Element {
+  const phase = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (reduceMotion) {
+      phase.setValue(0.5);
+      return undefined;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(phase, { toValue: 1, duration: PULSE_MS / 2, easing: Easing.inOut(Easing.ease), useNativeDriver: false }),
+        Animated.timing(phase, { toValue: 0, duration: PULSE_MS / 2, easing: Easing.inOut(Easing.ease), useNativeDriver: false }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [phase, reduceMotion]);
+  const spread = phase.interpolate({ inputRange: [0, 1], outputRange: [4, 8] });
+  const outer = ring(target, radius, OUTLINE_OFFSET + OUTLINE_WIDTH);
+  const edge = ring(target, radius, OUTLINE_OFFSET + OUTLINE_WIDTH + EDGE_WIDTH);
+  return (
+    <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+      <Animated.View
+        style={[
+          styles.band,
+          {
+            left: Animated.subtract(target.x, spread),
+            top: Animated.subtract(target.y, spread),
+            width: Animated.add(target.width, Animated.multiply(spread, 2)),
+            height: Animated.add(target.height, Animated.multiply(spread, 2)),
+            borderWidth: spread,
+            borderRadius: Animated.add(radius, spread),
+            borderColor: phase.interpolate({ inputRange: [0, 1], outputRange: [withAlpha(color, 0.4), withAlpha(color, 0.3)] }),
+          },
+        ]}
+      />
+      <View style={[styles.band, outer, { borderWidth: OUTLINE_WIDTH, borderColor: color }]} />
+      <View style={[styles.band, edge, { borderWidth: EDGE_WIDTH, borderColor: EDGE_COLOR }]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  band: { position: 'absolute' },
+});

package/src/agent-mode/ui/TouchShield.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+export interface TouchShieldProps {
+  onBlockedTap: () => void;
+}
+
+export function TouchShield({ onBlockedTap }: TouchShieldProps): React.JSX.Element {
+  return (
+    <View
+      style={styles.shield}
+      onStartShouldSetResponder={() => true}
+      onResponderRelease={onBlockedTap}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  shield: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0, 0, 0, 0.08)' },
+});