@yannelli/paseo-linear-plugin 1.0.1 → 1.1.0-beta.0

package/client/live-agents.tsx

@@ -0,0 +1,407 @@
+import type { PluginAgentSnapshot } from "@getpaseo/plugin";
+import { usePaseo } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import {
+  type Activity,
+  type ActivityEvent,
+  type AgentFocus,
+  type DirTouch,
+  deriveActivity,
+  type FileTouch,
+} from "../shared/activity";
+import type { SubagentRun } from "../shared/subagents";
+import { MONO } from "./live-issues";
+import { useAgentTimelines } from "./live-timeline";
+import { ProviderIcon } from "./provider-icon";
+import { type Theme, usePressableStyle } from "./ui";
+
+// Agents working on the issue besides the one the panel belongs to: Paseo child agents, which
+// have their own timelines, and provider subagents, which only report what they were asked.
+
+const CHILD_LABEL = "paseo.parent-agent-id";
+const MAX_CHILDREN = 4;
+const CHILD_COLORS = ["#e879f9", "#38bdf8", "#facc15", "#fb7185"];
+const POLL_MS = 10_000;
+
+export type AgentStatus = PluginAgentSnapshot["status"];
+
+export interface ChildAgent {
+  id: string;
+  title: string;
+  provider: string;
+  status: AgentStatus;
+  cwd: string;
+  color: string;
+}
+
+export interface ChildView {
+  agent: ChildAgent;
+  activity: Activity | null;
+  /** Works in the parent's folder, so its files can go on the same map. */
+  sameFolder: boolean;
+}
+
+export interface AgentMarker {
+  key: string;
+  kind: "main" | "child" | "subagent";
+  color: string;
+  provider: string | null;
+  label: string;
+}
+
+/** Child agents of an agent, newest running ones first. Polls only while the parent works. */
+export function useChildAgents(agentId: string, polling: boolean): ChildAgent[] {
+  const paseo = usePaseo();
+  const query = useQuery({
+    queryKey: ["linear", "live", "children", agentId],
+    queryFn: async () => {
+      const result = await paseo.agents.list({
+        filter: { labels: { [CHILD_LABEL]: agentId }, includeArchived: true },
+        page: { limit: 20 },
+      });
+      return result.entries.map((entry) => entry.agent);
+    },
+    refetchInterval: polling ? POLL_MS : false,
+    staleTime: 5_000,
+  });
+  return useMemo(() => {
+    const agents = [...(query.data ?? [])].sort((a, b) => {
+      const running = Number(b.status === "running") - Number(a.status === "running");
+      return running || String(b.updatedAt ?? "").localeCompare(String(a.updatedAt ?? ""));
+    });
+    return agents.slice(0, MAX_CHILDREN).map((agent, index) => ({
+      id: agent.id,
+      title: agent.title ?? "Child agent",
+      provider: agent.provider,
+      status: agent.status as AgentStatus,
+      cwd: agent.cwd,
+      color: CHILD_COLORS[index % CHILD_COLORS.length] ?? "#38bdf8",
+    }));
+  }, [query.data]);
+}
+
+export function sameFolder(a: string, b: string): boolean {
+  return a.replace(/\/+$/, "") === b.replace(/\/+$/, "");
+}
+
+function add(markers: Map<string, AgentMarker[]>, paths: readonly string[], marker: AgentMarker) {
+  for (const path of paths) {
+    if (path.endsWith("/")) continue;
+    const list = markers.get(path) ?? [];
+    if (!list.some((entry) => entry.key === marker.key)) markers.set(path, [...list, marker]);
+  }
+}
+
+/** Which agents are on which file: where the main and child agents work, and subagent targets. */
+export function agentMarkers(input: {
+  theme: Theme;
+  provider: string;
+  working: boolean;
+  current: ActivityEvent | null;
+  children: readonly ChildView[];
+  subagents: readonly SubagentRun[];
+}): ReadonlyMap<string, AgentMarker[]> {
+  const { colors } = input.theme;
+  const markers = new Map<string, AgentMarker[]>();
+  if (input.working && input.current) {
+    const main = { key: "main", kind: "main", color: colors.accent, provider: input.provider, label: "Agent" } as const;
+    add(markers, input.current.paths, main);
+  }
+  for (const child of input.children) {
+    const current = child.activity?.current;
+    if (child.agent.status !== "running" || !child.sameFolder || !current) continue;
+    add(markers, current.paths, {
+      key: child.agent.id,
+      kind: "child",
+      color: child.agent.color,
+      provider: child.agent.provider,
+      label: child.agent.title,
+    });
+  }
+  for (const run of input.subagents) {
+    if (run.status !== "running") continue;
+    add(markers, run.targets, {
+      key: run.key,
+      kind: "subagent",
+      color: colors.foregroundMuted,
+      provider: null,
+      label: run.description || run.type,
+    });
+  }
+  return markers;
+}
+
+function subagentStatus(run: SubagentRun, parentRunning: boolean): string {
+  if (run.status === "completed") return "Done";
+  if (run.status === "failed") return "Failed";
+  if (run.status === "canceled") return "Canceled";
+  return parentRunning ? "Running" : "Started, no report since";
+}
+
+function names(paths: readonly string[]): string {
+  const shown = paths.slice(0, 2).map((path) => path.replace(/\/$/, "").split("/").pop() ?? path);
+  return `${shown.join(", ")}${paths.length > 2 ? ` +${paths.length - 2}` : ""}`;
+}
+
+interface RowProps {
+  theme: Theme;
+  color: string;
+  icon: "provider" | "bot";
+  provider: string | null;
+  title: string;
+  status: string;
+  detail: string | null;
+  live: boolean;
+  onPress?: () => void;
+}
+
+function AgentRow(props: RowProps) {
+  const { theme } = props;
+  const { colors } = theme;
+  const styles = useMemo(() => {
+    const idle = { flexDirection: "row", gap: 10, padding: 8, borderRadius: 8 } as const;
+    return {
+      idle,
+      hover: { ...idle, backgroundColor: colors.surface1 },
+      badge: {
+        width: 24,
+        height: 24,
+        borderRadius: 7,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: colors.surface2,
+        borderWidth: 1,
+        borderColor: props.icon === "bot" ? colors.border : props.color,
+      },
+      tint: { ...StyleSheet.absoluteFillObject, borderRadius: 6, backgroundColor: props.color, opacity: 0.18 },
+      body: { flex: 1, minWidth: 0, gap: 2 },
+      line: { flexDirection: "row", alignItems: "center", gap: 6 },
+      title: { flex: 1, color: colors.foreground, fontSize: 13, fontWeight: "500" },
+      status: { color: props.live ? colors.statusSuccess : colors.foregroundMuted, fontSize: 11 },
+      detail: { color: colors.foregroundMuted, fontSize: 11, fontFamily: MONO },
+    } as const;
+  }, [colors, props.color, props.icon, props.live]);
+  const pressStyle = usePressableStyle(styles.idle, styles.hover);
+  const content = (
+    <>
+      <View style={styles.badge}>
+        {props.icon === "bot" ? null : <View style={styles.tint} />}
+        {props.icon === "provider" && props.provider ? (
+          <ProviderIcon provider={props.provider} size={12} color={colors.foreground} />
+        ) : (
+          <Icon name="Bot" size={12} color={colors.foregroundMuted} />
+        )}
+      </View>
+      <View style={styles.body}>
+        <View style={styles.line}>
+          <Text numberOfLines={1} style={styles.title}>
+            {props.title}
+          </Text>
+          <Text style={styles.status}>{props.status}</Text>
+        </View>
+        {props.detail ? (
+          <Text numberOfLines={1} style={styles.detail}>
+            {props.detail}
+          </Text>
+        ) : null}
+      </View>
+    </>
+  );
+  if (!props.onPress) return <View style={styles.idle}>{content}</View>;
+  return (
+    <Pressable accessibilityRole="button" accessibilityLabel={`Open ${props.title}`} onPress={props.onPress} style={pressStyle}>
+      {content}
+    </Pressable>
+  );
+}
+
+const STATUS_COPY: Record<AgentStatus, string> = {
+  initializing: "Starting",
+  idle: "Idle",
+  running: "Working",
+  error: "Error",
+  closed: "Closed",
+};
+
+export function AgentsList(props: {
+  theme: Theme;
+  provider: string;
+  status: AgentStatus;
+  current: ActivityEvent | null;
+  childAgents: readonly ChildView[];
+  subagents: readonly SubagentRun[];
+  onOpenAgent?: (agentId: string) => void;
+}) {
+  const { theme, onOpenAgent } = props;
+  const parentRunning = props.status === "running";
+  const open = useCallback((id: string) => () => onOpenAgent?.(id), [onOpenAgent]);
+  return (
+    <View>
+      <AgentRow
+        theme={theme}
+        color={theme.colors.accent}
+        icon="provider"
+        provider={props.provider}
+        title={props.provider ? props.provider.charAt(0).toUpperCase() + props.provider.slice(1) : "Agent"}
+        status={STATUS_COPY[props.status] ?? props.status}
+        detail={props.current?.text ?? null}
+        live={parentRunning}
+      />
+      {props.childAgents.map(({ agent, activity, sameFolder: shared }) => (
+        <AgentRow
+          key={agent.id}
+          theme={theme}
+          color={agent.color}
+          icon="provider"
+          provider={agent.provider}
+          title={agent.title}
+          status={STATUS_COPY[agent.status] ?? agent.status}
+          detail={shared ? (activity?.current?.text ?? null) : `In ${agent.cwd.split("/").pop() ?? agent.cwd}`}
+          live={agent.status === "running"}
+          onPress={onOpenAgent ? open(agent.id) : undefined}
+        />
+      ))}
+      {props.subagents.map((run) => (
+        <AgentRow
+          key={run.key}
+          theme={theme}
+          color={theme.colors.foregroundMuted}
+          icon="bot"
+          provider={null}
+          title={run.description ? `${run.type}: ${run.description}` : run.type}
+          status={subagentStatus(run, parentRunning)}
+          detail={run.targets.length > 0 ? `Asked about ${names(run.targets)}` : null}
+          live={run.status === "running" && parentRunning}
+        />
+      ))}
+    </View>
+  );
+}
+
+/** Files the main agent and its same-folder child agents touched, counted together. */
+function mergeTouches(own: readonly FileTouch[], children: readonly ChildView[]): FileTouch[] {
+  const merged = new Map(own.map((file) => [file.path, { ...file }]));
+  for (const child of children) {
+    if (!child.sameFolder) continue;
+    for (const file of child.activity?.files ?? []) {
+      const known = merged.get(file.path);
+      if (!known) {
+        merged.set(file.path, { ...file });
+        continue;
+      }
+      known.reads += file.reads;
+      known.edits += file.edits;
+      known.added += file.added;
+      known.removed += file.removed;
+      known.created ||= file.created;
+    }
+  }
+  return [...merged.values()];
+}
+
+/** Child agents with their activity, every agent's place on the map, and all touched files. */
+export function useLiveAgents(input: {
+  theme: Theme;
+  agentId: string;
+  cwd: string;
+  status: AgentStatus;
+  provider: string;
+  activity: Activity;
+}) {
+  const { theme, agentId, cwd, status, provider, activity } = input;
+  const children = useChildAgents(agentId, status === "running");
+  const ids = useMemo(() => children.map((child) => child.id), [children]);
+  const timelines = useAgentTimelines(ids);
+  const views = useMemo(
+    () =>
+      children.map((agent): ChildView => {
+        const timeline = timelines.get(agent.id);
+        return {
+          agent,
+          activity: timeline ? deriveActivity(timeline.items, agent.cwd) : null,
+          sameFolder: sameFolder(agent.cwd, cwd),
+        };
+      }),
+    [children, timelines, cwd],
+  );
+  const markers = useMemo(
+    () =>
+      agentMarkers({
+        theme,
+        provider,
+        working: status === "running",
+        current: activity.current,
+        children: views,
+        subagents: activity.subagents,
+      }),
+    [theme, provider, status, activity.current, activity.subagents, views],
+  );
+  const files = useMemo(() => mergeTouches(activity.files, views), [activity.files, views]);
+  const dirs = useMemo(
+    (): DirTouch[] => [
+      ...activity.dirs,
+      ...views.flatMap((view) => (view.sameFolder ? (view.activity?.dirs ?? []) : [])),
+    ],
+    [activity.dirs, views],
+  );
+  return { children: views, markers, files, dirs };
+}
+
+/** An agent that moves over the graph to what it works on. */
+export interface CursorAgent {
+  id: string;
+  kind: "main" | "child";
+  label: string;
+  color: string;
+  provider: string | null;
+  focus: AgentFocus | null;
+  running: boolean;
+  /** What it does now, such as "Read page.tsx". */
+  caption: string | null;
+  /** Subagents running inside it. */
+  satellites: number;
+}
+
+export function cursorAgents(input: {
+  theme: Theme;
+  provider: string;
+  working: boolean;
+  activity: Activity;
+  children: readonly ChildView[];
+}): CursorAgent[] {
+  const { activity } = input;
+  const name = input.provider ? input.provider.charAt(0).toUpperCase() + input.provider.slice(1) : "Agent";
+  const agents: CursorAgent[] = [
+    {
+      id: "main",
+      kind: "main",
+      label: name,
+      color: input.theme.colors.accent,
+      provider: input.provider,
+      focus: activity.focus,
+      running: input.working,
+      caption: input.working ? (activity.current?.text ?? null) : null,
+      satellites: input.working ? activity.subagents.filter((run) => run.status === "running").length : 0,
+    },
+  ];
+  for (const child of input.children) {
+    // Paths are relative to each agent's folder, so only agents in this folder fit the graph.
+    if (!child.sameFolder || !child.activity) continue;
+    const running = child.agent.status === "running";
+    agents.push({
+      id: child.agent.id,
+      kind: "child",
+      label: child.agent.title,
+      color: child.agent.color,
+      provider: null,
+      focus: child.activity.focus,
+      running,
+      caption: running ? (child.activity.current?.text ?? null) : null,
+      satellites: 0,
+    });
+  }
+  return agents;
+}

package/client/live-cursor.tsx

@@ -0,0 +1,291 @@
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Easing, Text, View } from "react-native";
+import { type Point, pointAt, type Route, route } from "../shared/graph-geometry";
+import { type Graph, graphPath } from "../shared/graph-model";
+import type { CursorAgent } from "./live-agents";
+import { NATIVE_DRIVER } from "./live-timeline";
+import { ProviderIcon } from "./provider-icon";
+import type { Theme } from "./ui";
+
+// An agent hovers over the node it works on. When the work moves, it glides along the shortest
+// walk of imports and issues to the next node, in one eased motion.
+
+type Coordinate = number | Animated.Value | Animated.AnimatedInterpolation<number>;
+
+interface Motion {
+  x: Coordinate;
+  y: Coordinate;
+}
+
+const BADGE = 26;
+export const CAPTION_ROOM = 210;
+const MAX_SATELLITES = 3;
+
+function glideTime(length: number): number {
+  return Math.min(1200, Math.max(420, 380 + length * 0.8));
+}
+
+export interface CursorProps {
+  theme: Theme;
+  agent: CursorAgent;
+  graph: Graph;
+  /** Node id the agent works on. */
+  target: string;
+  /** Changes when node positions change. */
+  layoutKey: string;
+  /** Where the cursor hovers over a node. */
+  hover(id: string): Point | null;
+  /** Canvas width, to keep the caption inside it. */
+  width: number;
+  reduce: boolean;
+}
+
+export const AgentCursor = memo(function AgentCursor(props: CursorProps) {
+  const { theme, agent, target, reduce } = props;
+  const { colors } = theme;
+  const [bob] = useState(() => new Animated.Value(0));
+  const [halo] = useState(() => new Animated.Value(0));
+  const [spin] = useState(() => new Animated.Value(0));
+  const [motion, setMotion] = useState<Motion | null>(null);
+  const [flip, setFlip] = useState(false);
+  const latest = useRef(props);
+  latest.current = props;
+  // Each glide gets its own value, so binding a new route never jumps to the old start.
+  const active = useRef<{ value: Animated.Value; path: Route; layoutKey: string } | null>(null);
+  const state = useRef({
+    at: null as string | null,
+    point: null as Point | null,
+    moving: false,
+    pending: null as string | null,
+  });
+
+  // These read only refs, so the animation callbacks never see stale props.
+  const land = (point: Point) => {
+    state.current.point = point;
+    setFlip(point.x > latest.current.width - CAPTION_ROOM);
+  };
+  const rest = (id: string) => {
+    state.current.at = id;
+    const point = latest.current.hover(id);
+    if (!point) return;
+    land(point);
+    setMotion({ x: point.x, y: point.y });
+  };
+  const glide = (points: Point[], to: string) => {
+    const path = route(points);
+    if (latest.current.reduce || !path) {
+      state.current.moving = false;
+      rest(to);
+      return;
+    }
+    active.current?.value.stopAnimation();
+    const value = new Animated.Value(0);
+    active.current = { value, path, layoutKey: latest.current.layoutKey };
+    state.current.moving = true;
+    land(path.points[path.points.length - 1] as Point);
+    setMotion({
+      x: value.interpolate({ inputRange: path.stops, outputRange: path.points.map((point) => point.x) }),
+      y: value.interpolate({ inputRange: path.stops, outputRange: path.points.map((point) => point.y) }),
+    });
+    Animated.timing(value, {
+      toValue: 1,
+      duration: glideTime(path.length),
+      easing: Easing.inOut(Easing.cubic),
+      useNativeDriver: NATIVE_DRIVER,
+    }).start(({ finished }) => {
+      if (!finished || active.current?.value !== value) return;
+      state.current.moving = false;
+      state.current.at = to;
+      // Bursts of reads queue only the newest target, so the cursor lands before it moves on.
+      const next = state.current.pending;
+      state.current.pending = null;
+      if (next && next !== to) go(to, next);
+    });
+  };
+  const go = (from: string, to: string) => {
+    const { graph, hover } = latest.current;
+    const points = graphPath(graph, from, to).flatMap((id) => {
+      const point = hover(id);
+      return point ? [point] : [];
+    });
+    // The start node may have left the graph; then the glide starts where the cursor is.
+    const start = state.current.point;
+    if (start && (points.length === 0 || hover(from) === null)) points.unshift(start);
+    glide(points, to);
+  };
+
+  useEffect(() => {
+    const current = state.current;
+    if (current.at === null) rest(target);
+    else if (current.moving) current.pending = target;
+    else if (current.at !== target) go(current.at, target);
+  }, [target]);
+
+  // Nodes moved: glide from where the cursor is now to where its target is now.
+  useEffect(() => {
+    const current = state.current;
+    const goal = latest.current.target;
+    const end = latest.current.hover(goal);
+    const glideNow = active.current;
+    if (!end) return;
+    if (current.moving && glideNow) {
+      if (glideNow.layoutKey === props.layoutKey) return;
+      current.pending = null;
+      glideNow.value.stopAnimation((share) => glide([pointAt(glideNow.path, share), end], goal));
+    } else if (current.point && (current.point.x !== end.x || current.point.y !== end.y)) {
+      glide([current.point, end], goal);
+    }
+  }, [props.layoutKey]);
+
+  useEffect(() => () => active.current?.value.stopAnimation(), []);
+
+  const running = agent.running && !reduce;
+  useEffect(() => {
+    if (!running) {
+      bob.setValue(0);
+      halo.setValue(0);
+      return;
+    }
+    const float = Animated.loop(
+      Animated.sequence([
+        Animated.timing(bob, { toValue: 1, duration: 1300, easing: Easing.inOut(Easing.sin), useNativeDriver: NATIVE_DRIVER }),
+        Animated.timing(bob, { toValue: 0, duration: 1300, easing: Easing.inOut(Easing.sin), useNativeDriver: NATIVE_DRIVER }),
+      ]),
+    );
+    const pulse = Animated.loop(
+      Animated.timing(halo, { toValue: 1, duration: 1600, easing: Easing.out(Easing.quad), useNativeDriver: NATIVE_DRIVER }),
+    );
+    float.start();
+    pulse.start();
+    return () => {
+      float.stop();
+      pulse.stop();
+    };
+  }, [running, bob, halo]);
+
+  const satellites = Math.min(MAX_SATELLITES, agent.satellites);
+  useEffect(() => {
+    if (satellites === 0 || reduce) return;
+    spin.setValue(0);
+    const loop = Animated.loop(
+      Animated.timing(spin, { toValue: 1, duration: 2600, easing: Easing.linear, useNativeDriver: NATIVE_DRIVER }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [satellites, reduce, spin]);
+
+  const caption = agent.caption ?? (agent.kind === "child" ? agent.label : null);
+  const styles = useMemo(() => {
+    const half = BADGE / 2;
+    return {
+      anchor: { position: "absolute", left: 0, top: 0, width: 0, height: 0, opacity: agent.running ? 1 : 0.75 },
+      float: { transform: [{ translateY: bob.interpolate({ inputRange: [0, 1], outputRange: [0, -3] }) }] },
+      halo: {
+        position: "absolute",
+        left: -half - 6,
+        top: -half - 6,
+        width: BADGE + 12,
+        height: BADGE + 12,
+        borderRadius: (BADGE + 12) / 2,
+        backgroundColor: agent.color,
+        opacity: halo.interpolate({ inputRange: [0, 1], outputRange: [0.35, 0] }),
+        transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1.5] }) }],
+      },
+      badge: {
+        position: "absolute",
+        left: -half,
+        top: -half,
+        width: BADGE,
+        height: BADGE,
+        borderRadius: half,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: agent.color,
+        borderWidth: 2,
+        borderColor: colors.surface0,
+      },
+      pointer: {
+        position: "absolute",
+        left: -5,
+        top: half - 1,
+        width: 0,
+        height: 0,
+        borderLeftWidth: 5,
+        borderRightWidth: 5,
+        borderTopWidth: 7,
+        borderLeftColor: "transparent",
+        borderRightColor: "transparent",
+        borderTopColor: agent.color,
+      },
+      caption: {
+        position: "absolute",
+        ...(flip ? { right: half + 6 } : { left: half + 6 }),
+        top: -10,
+        height: 20,
+        maxWidth: 190,
+        paddingHorizontal: 8,
+        justifyContent: "center",
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.surface2,
+      },
+      captionText: { color: colors.foreground, fontSize: 11 },
+      orbit: {
+        position: "absolute",
+        left: -22,
+        top: -22,
+        width: 44,
+        height: 44,
+        transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }],
+      },
+      moon: {
+        position: "absolute",
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        borderWidth: 1.5,
+        borderColor: colors.surface0,
+        backgroundColor: colors.foregroundMuted,
+      },
+    } as const;
+  }, [agent.color, agent.running, colors, bob, halo, spin, flip]);
+  if (!motion) return null;
+  const moons = Array.from({ length: satellites }, (_, index) => {
+    const angle = (index / Math.max(1, satellites)) * Math.PI * 2;
+    return { left: 18 + Math.cos(angle) * 20, top: 18 + Math.sin(angle) * 20 };
+  });
+  return (
+    <Animated.View
+      pointerEvents="none"
+      style={[styles.anchor, { transform: [{ translateX: motion.x }, { translateY: motion.y }] }]}
+    >
+      <Animated.View style={styles.float}>
+        {agent.running ? <Animated.View style={styles.halo} /> : null}
+        {moons.length > 0 ? (
+          <Animated.View style={styles.orbit}>
+            {moons.map((moon, index) => (
+              <View key={index} style={[styles.moon, moon]} />
+            ))}
+          </Animated.View>
+        ) : null}
+        <View style={styles.pointer} />
+        <View style={styles.badge}>
+          {agent.provider ? (
+            <ProviderIcon provider={agent.provider} size={13} color={colors.accentForeground} />
+          ) : (
+            <Icon name="Bot" size={13} color={colors.surface0} />
+          )}
+        </View>
+        {caption ? (
+          <View style={styles.caption}>
+            <Text numberOfLines={1} style={styles.captionText}>
+              {caption}
+            </Text>
+          </View>
+        ) : null}
+      </Animated.View>
+    </Animated.View>
+  );
+});