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

package/client/live-agents.tsx

@@ -0,0 +1,446 @@
+import type { PluginAgentSnapshot } from "@getpaseo/plugin";
+import { usePaseo } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import {
+  type Activity,
+  type ActivityEvent,
+  type DirTouch,
+  deriveActivity,
+  type FileTouch,
+} from "../shared/activity";
+import type { SubagentLog } from "../shared/live";
+import type { SubagentRun } from "../shared/subagents";
+import { MONO } from "./live-issues";
+import { useAgentTimelines, useSubagentLogs } 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 = 8;
+const CHILD_COLORS = ["#e879f9", "#38bdf8", "#facc15", "#fb7185", "#4ade80", "#f97316", "#818cf8", "#2dd4bf"];
+const POLL_MS = 10_000;
+const SUBAGENT_COLORS = ["#a78bfa", "#34d399", "#f97316", "#22d3ee", "#f472b6", "#a3e635", "#fbbf24", "#60a5fa"];
+// A transcript that has not grown for this long belongs to a subagent that stopped.
+const SUBAGENT_IDLE_MS = 3 * 60_000;
+
+export type AgentStatus = PluginAgentSnapshot["status"];
+
+export interface ChildAgent {
+  id: string;
+  title: string;
+  provider: string;
+  status: AgentStatus;
+  cwd: string;
+  color: string;
+  workspaceId?: string | null;
+}
+
+export interface ChildView {
+  agent: ChildAgent;
+  activity: Activity | null;
+  /** Works in the parent's folder or a worktree of the same project, so its paths fit the map. */
+  sameRepo: boolean;
+  /** A provider subagent read from its transcript, which Paseo cannot open as an agent. */
+  subagent?: boolean;
+}
+
+const runKey = (log: SubagentLog) => `${log.type}\u0000${log.description}`;
+const runTitle = (type: string, description: string) => (description ? `${type}: ${description}` : type);
+
+/** Subagents with a transcript, as views like child agents in the parent's folder. */
+export function subagentViews(logs: readonly SubagentLog[], cwd: string, checkedAt: number): ChildView[] {
+  return logs.map((log, index) => {
+    const running = !log.finished && checkedAt - log.updatedAt < SUBAGENT_IDLE_MS;
+    return {
+      agent: {
+        id: `sub:${log.id}`,
+        title: runTitle(log.type, log.description),
+        provider: "claude",
+        status: running ? "running" : "idle",
+        cwd,
+        color: SUBAGENT_COLORS[index % SUBAGENT_COLORS.length] ?? "#a78bfa",
+      },
+      activity: deriveActivity(log.items, cwd),
+      sameRepo: true,
+      subagent: true,
+    };
+  });
+}
+
+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",
+      workspaceId: agent.workspaceId ?? null,
+    }));
+  }, [query.data]);
+}
+
+const projectOf = new Map<string, string | null>();
+
+/** The Paseo project of each workspace. A workspace never changes project, so each is read once. */
+export function useWorkspaceProjects(workspaceIds: readonly (string | null | undefined)[]) {
+  const paseo = usePaseo();
+  const ids = useMemo(
+    () => [...new Set(workspaceIds.filter((id): id is string => Boolean(id)))].sort(),
+    [workspaceIds],
+  );
+  const query = useQuery({
+    queryKey: ["linear", "live", "workspace-projects", ids],
+    queryFn: async () => {
+      await Promise.all(
+        ids
+          .filter((id) => !projectOf.has(id))
+          .map(async (id) => {
+            const handle = paseo.workspaces.ref(id);
+            const info = await handle.refresh().catch(() => null);
+            projectOf.set(id, info?.projectId ?? handle.projectId ?? null);
+          }),
+      );
+      return new Map(ids.map((id) => [id, projectOf.get(id) ?? null]));
+    },
+    enabled: ids.length > 0,
+    staleTime: Number.POSITIVE_INFINITY,
+    placeholderData: keepPreviousData,
+  });
+  return query.data;
+}
+
+/** Both workspaces belong to one Paseo project, so a worktree's paths match the parent's. */
+export function sameProject(
+  projects: ReadonlyMap<string, string | null> | undefined,
+  a: string | null | undefined,
+  b: string | null | undefined,
+): boolean {
+  const first = a ? projects?.get(a) : null;
+  return Boolean(first) && first === (b ? projects?.get(b) : null);
+}
+
+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.sameRepo || !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, sameRepo: shared, subagent: subagentView }) => (
+        <AgentRow
+          key={agent.id}
+          theme={theme}
+          color={agent.color}
+          icon="provider"
+          provider={agent.provider}
+          title={agent.title}
+          status={subagentView && agent.status !== "running" ? "Done" : (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 && !subagentView ? 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.sameRepo) 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;
+  workspaceId: string | null;
+  status: AgentStatus;
+  provider: string;
+  activity: Activity;
+}) {
+  const { theme, agentId, cwd, status, provider, activity } = input;
+  const children = useChildAgents(agentId, status === "running");
+  const projects = useWorkspaceProjects(
+    useMemo(() => [input.workspaceId, ...children.map((child) => child.workspaceId)], [input.workspaceId, children]),
+  );
+  const ids = useMemo(() => children.map((child) => child.id), [children]);
+  const timelines = useAgentTimelines(ids);
+  const logs = useSubagentLogs(
+    agentId,
+    provider.split("/")[0] === "claude" && activity.subagents.length > 0,
+    status === "running",
+  );
+  const subViews = useMemo(() => subagentViews(logs.runs, cwd, logs.checkedAt), [logs, cwd]);
+  const views = useMemo(
+    () => [
+      ...children.map((agent): ChildView => {
+        const timeline = timelines.get(agent.id);
+        return {
+          agent,
+          activity: timeline ? deriveActivity(timeline.items, agent.cwd) : null,
+          sameRepo: sameFolder(agent.cwd, cwd) || sameProject(projects, input.workspaceId, agent.workspaceId),
+        };
+      }),
+      ...subViews,
+    ],
+    [children, timelines, cwd, subViews, projects, input.workspaceId],
+  );
+  // Subagents with a transcript show as agents; the rest only report what they were asked.
+  const subagents = useMemo(() => {
+    const covered = new Set(logs.runs.map(runKey));
+    return activity.subagents.filter((run) => !covered.has(run.key));
+  }, [activity.subagents, logs.runs]);
+  const markers = useMemo(
+    () =>
+      agentMarkers({
+        theme,
+        provider,
+        working: status === "running",
+        current: activity.current,
+        children: views,
+        subagents,
+      }),
+    [theme, provider, status, activity.current, subagents, views],
+  );
+  const files = useMemo(() => mergeTouches(activity.files, views), [activity.files, views]);
+  const dirs = useMemo(
+    (): DirTouch[] => [
+      ...activity.dirs,
+      ...views.flatMap((view) => (view.sameRepo ? (view.activity?.dirs ?? []) : [])),
+    ],
+    [activity.dirs, views],
+  );
+  // A subagent's row in the feed shows what it does now.
+  const events = useMemo(() => {
+    const doing = new Map(subViews.map((view) => [view.agent.title, view.activity?.current?.text ?? null]));
+    return activity.events.map((event) => {
+      const now = event.kind === "agent" ? doing.get(event.text) : undefined;
+      return now ? { ...event, detail: now } : event;
+    });
+  }, [activity.events, subViews]);
+  return { children: views, subagents, markers, files, dirs, events };
+}

package/client/live-feed.tsx

@@ -0,0 +1,151 @@
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useEffect, useMemo, useState } from "react";
+import { ActivityIndicator, Animated, StyleSheet, Text, View } from "react-native";
+import type { ActivityEvent, EventKind } from "../shared/activity";
+import { MONO } from "./live-issues";
+import { NATIVE_DRIVER } from "./live-timeline";
+import type { Theme } from "./ui";
+
+export const KIND_ICONS: Record<EventKind, string> = {
+  read: "Eye",
+  edit: "Pencil",
+  write: "FilePlus",
+  search: "Search",
+  list: "FolderOpen",
+  shell: "SquareTerminal",
+  agent: "Bot",
+  tool: "Wrench",
+};
+const FEED_SIZE = 14;
+
+export function eventFailed(event: ActivityEvent): boolean {
+  return event.status === "failed" || (event.exitCode !== null && event.exitCode !== 0);
+}
+
+/** The color of an event's icon: changes in green, failures in red, the rest muted. */
+export function eventTone(theme: Theme, event: ActivityEvent): string {
+  const { colors } = theme;
+  if (eventFailed(event) && event.kind !== "search") return colors.statusDanger;
+  if (event.kind === "edit" || event.kind === "write") return colors.statusSuccess;
+  if (event.kind === "read" || event.kind === "search") return colors.foreground;
+  return colors.foregroundMuted;
+}
+
+function FeedRow(props: { theme: Theme; event: ActivityEvent; animate: boolean }) {
+  const { theme, event } = props;
+  const { colors } = theme;
+  const [entering] = useState(props.animate);
+  const [progress] = useState(() => new Animated.Value(entering ? 0 : 1));
+  useEffect(() => {
+    if (!entering) return;
+    const animation = Animated.timing(progress, {
+      toValue: 1,
+      duration: 280,
+      useNativeDriver: NATIVE_DRIVER,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [entering, progress]);
+  const failed = eventFailed(event);
+  const tone = eventTone(theme, event);
+  const styles = useMemo(() => {
+    const slide = progress.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] });
+    return {
+      row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        paddingVertical: 6,
+        paddingHorizontal: 8,
+        borderRadius: 8,
+        opacity: progress,
+        transform: [{ translateY: slide }],
+      },
+      icon: {
+        width: 24,
+        height: 24,
+        borderRadius: 7,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: colors.surface2,
+      },
+      tint: { ...StyleSheet.absoluteFillObject, borderRadius: 7, backgroundColor: tone, opacity: 0.12 },
+      body: { flex: 1, minWidth: 0, gap: 2 },
+      text: { color: colors.foreground, fontSize: 13 },
+      detail: { color: colors.foregroundMuted, fontFamily: MONO, fontSize: 11 },
+      added: { color: colors.statusSuccess, fontSize: 11 },
+      removed: { color: colors.statusDanger, fontSize: 11 },
+      exit: { color: failed ? colors.statusDanger : colors.foregroundMuted, fontSize: 11 },
+    } as const;
+  }, [colors, progress, failed, tone]);
+  const showExit = event.exitCode !== null && event.exitCode !== 0 && event.kind !== "search";
+  return (
+    <Animated.View style={styles.row} accessible accessibilityLabel={event.text}>
+      <View style={styles.icon}>
+        <View style={styles.tint} />
+        <Icon name={KIND_ICONS[event.kind]} size={13} color={tone} />
+      </View>
+      <View style={styles.body}>
+        <Text numberOfLines={1} style={styles.text}>
+          {event.text}
+        </Text>
+        {event.detail ? (
+          <Text numberOfLines={1} style={styles.detail}>
+            {event.detail}
+          </Text>
+        ) : null}
+      </View>
+      {event.added > 0 ? <Text style={styles.added}>{`+${event.added}`}</Text> : null}
+      {event.removed > 0 ? <Text style={styles.removed}>{`-${event.removed}`}</Text> : null}
+      {showExit ? <Text style={styles.exit}>{`exit ${event.exitCode}`}</Text> : null}
+      {event.status === "running" ? (
+        <ActivityIndicator size="small" color={colors.foregroundMuted} />
+      ) : null}
+      {event.status === "failed" && event.exitCode === null ? (
+        <Icon name="TriangleAlert" size={14} color={colors.statusDanger} />
+      ) : null}
+    </Animated.View>
+  );
+}
+
+export function ActivityFeed(props: {
+  theme: Theme;
+  events: readonly ActivityEvent[];
+  loading: boolean;
+  error: string | null;
+  reduceMotion: boolean;
+}) {
+  const { theme } = props;
+  const { colors } = theme;
+  const rows = props.events.slice(0, FEED_SIZE);
+  // The loaded tail renders in place; only rows that arrive after it slide in.
+  const [settled, setSettled] = useState(false);
+  useEffect(() => {
+    if (!props.loading) setSettled(true);
+  }, [props.loading]);
+  const styles = useMemo(
+    () =>
+      ({
+        list: { gap: 2 },
+        note: { color: colors.foregroundMuted, fontSize: 13, padding: 8 },
+        error: { color: colors.statusDanger, fontSize: 13, padding: 8 },
+      }) as const,
+    [colors],
+  );
+  let empty: string | null = null;
+  if (rows.length === 0) empty = props.loading ? "Loading activity" : "No tool calls yet";
+  return (
+    <View style={styles.list}>
+      {props.error ? <Text style={styles.error}>{props.error}</Text> : null}
+      {empty ? <Text style={styles.note}>{empty}</Text> : null}
+      {rows.map((event) => (
+        <FeedRow
+          key={event.id}
+          theme={theme}
+          event={event}
+          animate={settled && !props.reduceMotion}
+        />
+      ))}
+    </View>
+  );
+}