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

package/client/live-agents.tsx

@@ -1,7 +1,7 @@
 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 { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import {
@@ -12,9 +12,10 @@ import {
   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 } from "./live-timeline";
+import { useAgentTimelines, useSubagentLogs } from "./live-timeline";
 import { ProviderIcon } from "./provider-icon";
 import { type Theme, usePressableStyle } from "./ui";
 
@@ -22,9 +23,12 @@ import { type Theme, usePressableStyle } from "./ui";
 // 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 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"];
 
@@ -35,13 +39,49 @@ export interface ChildAgent {
   status: AgentStatus;
   cwd: string;
   color: string;
+  workspaceId?: string | null;
+  /** The issue it works on, from its Linear label or a key at the start of its title. */
+  issueKey?: string | null;
+}
+
+const LEADING_KEY = /^\s*([A-Za-z][A-Za-z0-9]*-\d+)\b/;
+
+/** The issue a child agent works on, such as ENG-42 for "ENG-42: Add the form". */
+export function childIssueKey(labels: Readonly<Record<string, string>> | undefined, title: string | null) {
+  const key = labels?.["linear.issue"] ?? LEADING_KEY.exec(title ?? "")?.[1] ?? null;
+  return key ? key.toUpperCase() : null;
 }
 
 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;
+  /** 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 {
@@ -79,10 +119,52 @@ export function useChildAgents(agentId: string, polling: boolean): ChildAgent[]
       status: agent.status as AgentStatus,
       cwd: agent.cwd,
       color: CHILD_COLORS[index % CHILD_COLORS.length] ?? "#38bdf8",
+      workspaceId: agent.workspaceId ?? null,
+      issueKey: childIssueKey(agent.labels, agent.title ?? 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(/\/+$/, "");
 }
@@ -112,7 +194,7 @@ export function agentMarkers(input: {
   }
   for (const child of input.children) {
     const current = child.activity?.current;
-    if (child.agent.status !== "running" || !child.sameFolder || !current) continue;
+    if (child.agent.status !== "running" || !child.sameRepo || !current) continue;
     add(markers, current.paths, {
       key: child.agent.id,
       kind: "child",
@@ -250,7 +332,7 @@ export function AgentsList(props: {
         detail={props.current?.text ?? null}
         live={parentRunning}
       />
-      {props.childAgents.map(({ agent, activity, sameFolder: shared }) => (
+      {props.childAgents.map(({ agent, activity, sameRepo: shared, subagent: subagentView }) => (
         <AgentRow
           key={agent.id}
           theme={theme}
@@ -258,10 +340,10 @@ export function AgentsList(props: {
           icon="provider"
           provider={agent.provider}
           title={agent.title}
-          status={STATUS_COPY[agent.status] ?? agent.status}
+          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 ? open(agent.id) : undefined}
+          onPress={onOpenAgent && !subagentView ? open(agent.id) : undefined}
         />
       ))}
       {props.subagents.map((run) => (
@@ -285,7 +367,7 @@ export function AgentsList(props: {
 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;
+    if (!child.sameRepo) continue;
     for (const file of child.activity?.files ?? []) {
       const known = merged.get(file.path);
       if (!known) {
@@ -307,26 +389,43 @@ 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 => {
+    () => [
+      ...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),
+          sameRepo: sameFolder(agent.cwd, cwd) || sameProject(projects, input.workspaceId, agent.workspaceId),
         };
       }),
-    [children, timelines, cwd],
+      ...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({
@@ -335,19 +434,27 @@ export function useLiveAgents(input: {
         working: status === "running",
         current: activity.current,
         children: views,
-        subagents: activity.subagents,
+        subagents,
       }),
-    [theme, provider, status, activity.current, activity.subagents, views],
+    [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.sameFolder ? (view.activity?.dirs ?? []) : [])),
+      ...views.flatMap((view) => (view.sameRepo ? (view.activity?.dirs ?? []) : [])),
     ],
     [activity.dirs, views],
   );
-  return { children: views, markers, files, dirs };
+  // 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 };
 }
 
 /** An agent that moves over the graph to what it works on. */
@@ -358,6 +465,8 @@ export interface CursorAgent {
   color: string;
   provider: string | null;
   focus: AgentFocus | null;
+  /** Where it hovers when its focus is not on the graph: the issue it works on. */
+  home: AgentFocus | null;
   running: boolean;
   /** What it does now, such as "Read page.tsx". */
   caption: string | null;
@@ -371,6 +480,8 @@ export function cursorAgents(input: {
   working: boolean;
   activity: Activity;
   children: readonly ChildView[];
+  /** Subagents with no cursor of their own, which circle the agent instead. */
+  subagents: readonly SubagentRun[];
 }): CursorAgent[] {
   const { activity } = input;
   const name = input.provider ? input.provider.charAt(0).toUpperCase() + input.provider.slice(1) : "Agent";
@@ -382,24 +493,28 @@ export function cursorAgents(input: {
       color: input.theme.colors.accent,
       provider: input.provider,
       focus: activity.focus,
+      home: null,
       running: input.working,
       caption: input.working ? (activity.current?.text ?? null) : null,
-      satellites: input.working ? activity.subagents.filter((run) => run.status === "running").length : 0,
+      satellites: input.working ? input.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;
+    if (!child.sameRepo) continue;
     const running = child.agent.status === "running";
+    // Finished subagents can be many, so only working ones get a cursor.
+    if (child.subagent && !running) continue;
     agents.push({
       id: child.agent.id,
       kind: "child",
       label: child.agent.title,
       color: child.agent.color,
       provider: null,
-      focus: child.activity.focus,
+      focus: child.activity?.focus ?? null,
+      home: child.agent.issueKey ? { kind: "issue", key: child.agent.issueKey } : null,
       running,
-      caption: running ? (child.activity.current?.text ?? null) : null,
+      caption: running ? (child.activity?.current?.text ?? null) : null,
       satellites: 0,
     });
   }

package/client/live-cursor.tsx

@@ -38,6 +38,8 @@ export interface CursorProps {
   hover(id: string): Point | null;
   /** Canvas width, to keep the caption inside it. */
   width: number;
+  /** One over the graph zoom, so the cursor keeps its size on screen. */
+  inverse: Animated.AnimatedInterpolation<number>;
   reduce: boolean;
 }
 
@@ -259,7 +261,7 @@ export const AgentCursor = memo(function AgentCursor(props: CursorProps) {
   return (
     <Animated.View
       pointerEvents="none"
-      style={[styles.anchor, { transform: [{ translateX: motion.x }, { translateY: motion.y }] }]}
+      style={[styles.anchor, { transform: [{ translateX: motion.x }, { translateY: motion.y }, { scale: props.inverse }] }]}
     >
       <Animated.View style={styles.float}>
         {agent.running ? <Animated.View style={styles.halo} /> : null}

package/client/live-graph.tsx

@@ -1,12 +1,16 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, type LayoutChangeEvent, Pressable, StyleSheet, Text, View } from "react-native";
+import { focusBox, project, unproject } from "../shared/graph-camera";
 import type { Placed, Point } from "../shared/graph-geometry";
 import { focusNode, type Graph, type GraphEdge, type GraphNode, graphKey, layoutGraph } from "../shared/graph-model";
 import type { IssueDetail, WorkflowState } from "../shared/linear";
+import type { GraphCamera } from "../shared/settings";
+import { CameraButtons, useGraphCamera } from "./graph-camera";
 import { captionWidth, graphLabels, HOVER_GAP, type Label, nodeSize } from "./graph-labels";
 import type { CursorAgent } from "./live-agents";
 import { AgentCursor, CAPTION_ROOM } from "./live-cursor";
 import { type IssueProgress, MONO } from "./live-issues";
+import type { LivePatch } from "./live-panel";
 import { NATIVE_DRIVER, type OwnerColors } from "./live-timeline";
 import { StateIcon, type Theme } from "./ui";
 
@@ -27,16 +31,31 @@ export interface GraphViewProps {
   agents: readonly CursorAgent[];
   focus: string | null;
   onFocus(key: string): void;
+  /** Saved camera mode: follow the running agents, or show the whole graph. */
+  camera: GraphCamera;
+  locked: boolean;
+  saveLive(patch: LivePatch): void;
   reduceMotion: boolean;
 }
 
+type Inverse = Animated.AnimatedInterpolation<number>;
+/** About half the height of a folder name, which scales around its middle. */
+const FOLDER_HALF = 7;
+
 interface EdgeStyle {
   color: string;
   thickness: number;
   opacity: number;
 }
 
-const EdgeLine = memo(function EdgeLine(props: { from: Point; to: Point; style: EdgeStyle }) {
+interface EdgeProps {
+  from: Point;
+  to: Point;
+  style: EdgeStyle;
+  inverse: Inverse;
+}
+
+const EdgeLine = memo(function EdgeLine(props: EdgeProps) {
   const { from, to, style } = props;
   const length = Math.hypot(to.x - from.x, to.y - from.y);
   const angle = Math.atan2(to.y - from.y, to.x - from.x);
@@ -49,13 +68,15 @@ const EdgeLine = memo(function EdgeLine(props: { from: Point; to: Point; style:
     borderRadius: style.thickness / 2,
     backgroundColor: style.color,
     opacity: style.opacity,
-    transform: [{ rotate: `${angle}rad` }],
+    // Rotate first, so the inverse zoom thins the line and leaves its length to the camera.
+    transform: [{ rotate: `${angle}rad` }, { scaleY: props.inverse }],
   } as const;
-  return <View pointerEvents="none" style={line} />;
+  return <Animated.View pointerEvents="none" style={line} />;
 }, sameEdge);
 
-function sameEdge(a: { from: Point; to: Point; style: EdgeStyle }, b: { from: Point; to: Point; style: EdgeStyle }) {
+function sameEdge(a: EdgeProps, b: EdgeProps) {
   return (
+    a.inverse === b.inverse &&
     a.from === b.from &&
     a.to === b.to &&
     a.style.color === b.style.color &&
@@ -75,6 +96,7 @@ interface NodeProps {
   /** An agent is working on it. */
   current: boolean;
   label: Label | null;
+  inverse: Inverse;
   reduce: boolean;
   onPress(id: string): void;
 }
@@ -95,6 +117,7 @@ function sameNode(a: NodeProps, b: NodeProps): boolean {
     a.label?.lines[0] === b.label?.lines[0] &&
     a.label?.lines[1] === b.label?.lines[1] &&
     a.theme === b.theme &&
+    a.inverse === b.inverse &&
     a.reduce === b.reduce &&
     a.onPress === b.onPress &&
     x.id === y.id &&
@@ -142,6 +165,7 @@ const GraphNodeView = memo(function GraphNodeView(props: NodeProps) {
         width: size,
         height: size,
         opacity: props.dim ? 0.22 : 1,
+        transform: [{ scale: props.inverse }],
       },
       shape: {
         width: size,
@@ -173,10 +197,10 @@ const GraphNodeView = memo(function GraphNodeView(props: NodeProps) {
       },
       second: { color: colors.foregroundMuted, fontSize: 10, textAlign: align },
     } as const;
-  }, [node, size, at, color, colors, touched, label, props.dim, props.selected, props.current, enter, beat]);
+  }, [node, size, at, color, colors, touched, label, props.dim, props.selected, props.current, props.inverse, enter, beat]);
   const press = useCallback(() => props.onPress(node.id), [props.onPress, node.id]);
   return (
-    <View style={styles.wrap} pointerEvents="box-none">
+    <Animated.View style={styles.wrap} pointerEvents="box-none">
       <Pressable accessibilityRole="button" accessibilityLabel={node.path ?? node.label} hitSlop={8} onPress={press}>
         <Animated.View style={styles.shape}>
           {node.kind !== "file" ? <View style={styles.tint} /> : null}
@@ -195,7 +219,7 @@ const GraphNodeView = memo(function GraphNodeView(props: NodeProps) {
           ) : null}
         </View>
       ) : null}
-    </View>
+    </Animated.View>
   );
 }, sameNode);
 
@@ -246,7 +270,12 @@ export function LiveGraph(props: GraphViewProps) {
     return map;
   }, [graph.root, issue]);
   const targets = useMemo(
-    () => props.agents.map((agent) => ({ agent, target: focusNode(graph, agent.focus) })),
+    () =>
+      props.agents.map((agent) => {
+        const target = focusNode(graph, agent.focus);
+        // A child agent whose file is off the graph hovers over the issue it works on.
+        return { agent, target: target === graph.root && agent.home ? focusNode(graph, agent.home) : target };
+      }),
     [props.agents, graph],
   );
   const working = useMemo(
@@ -316,10 +345,47 @@ export function LiveGraph(props: GraphViewProps) {
       }),
     [targets, hovers, width],
   );
-  const labels = useMemo(
-    () => graphLabels({ graph, positions, issue, progress, selected, working, cursors, width, height }),
-    [graph.nodes, positions, issue, progress, selected, working, cursors, width, height],
-  );
+  const { saveLive } = props;
+  const [auto, setAuto] = useState(props.camera === "auto");
+  const [locked, setLocked] = useState(props.locked);
+  const stopAuto = useCallback(() => {
+    setAuto(false);
+    saveLive({ graphCamera: "fit" });
+  }, [saveLive]);
+  const toggleAuto = useCallback(() => {
+    setAuto(!auto);
+    saveLive({ graphCamera: auto ? "fit" : "auto" });
+  }, [auto, saveLive]);
+  const toggleLock = useCallback(() => {
+    setLocked(!locked);
+    saveLive({ graphLocked: !locked });
+  }, [locked, saveLive]);
+  const box = useMemo(() => focusBox(graph, positions, working), [graph, positions, working]);
+  const camera = useGraphCamera({ width, height, focus: box, auto, locked, reduce: props.reduceMotion, onManual: stopAuto });
+  // Labels are placed in the view of the settled camera, then moved back onto the canvas.
+  const view = camera.settled;
+  const labels = useMemo(() => {
+    if (view.zoom === 1) return graphLabels({ graph, positions, issue, progress, selected, working, cursors, width, height });
+    const toView = (at: Point) => project(view, at, width, height);
+    const seen = new Map<string, Placed>();
+    for (const [id, at] of positions) {
+      const shown = toView(at);
+      if (shown.x > -20 && shown.x < width + 20 && shown.y > -20 && shown.y < height + 20) seen.set(id, { ...at, ...shown });
+    }
+    const viewCursors = cursors.map((cursor) => ({ ...cursor, at: toView(cursor.at) }));
+    const placed = graphLabels({ graph, positions: seen, issue, progress, selected, working, cursors: viewCursors, width, height, every: view.zoom >= 1.5 });
+    const nodes = new Map<string, Label>();
+    for (const [id, label] of placed.nodes) {
+      const at = positions.get(id);
+      const shown = seen.get(id);
+      if (at && shown) nodes.set(id, { ...label, left: label.left + at.x - shown.x, top: label.top + at.y - shown.y });
+    }
+    const folders = placed.folders.map((folder) => {
+      const middle = unproject(view, { x: folder.left + folder.width / 2, y: folder.top + FOLDER_HALF }, width, height);
+      return { ...folder, left: middle.x - folder.width / 2, top: middle.y - FOLDER_HALF };
+    });
+    return { nodes, folders };
+  }, [graph.nodes, positions, issue, progress, selected, working, cursors, width, height, view]);
   const press = useCallback(
     (id: string) => {
       setSelected((current) => (current === id ? null : id));
@@ -332,6 +398,7 @@ export function LiveGraph(props: GraphViewProps) {
     () =>
       ({
         canvas: { height, width: "100%", overflow: "hidden" },
+        world: { ...StyleSheet.absoluteFillObject, transform: camera.transform },
         waiting: { ...StyleSheet.absoluteFillObject, alignItems: "center", justifyContent: "center" },
         waitingText: { color: colors.foregroundMuted, fontSize: 12 },
         folder: { position: "absolute", color: colors.foregroundMuted, fontFamily: MONO, fontSize: 10, opacity: 0.75 },
@@ -346,79 +413,96 @@ export function LiveGraph(props: GraphViewProps) {
         captionText: { color: colors.foreground, fontSize: 12, fontFamily: MONO },
         hint: { color: colors.foregroundMuted, fontSize: 12 },
       }) as const,
-    [height, colors],
+    [height, colors, camera.transform],
   );
   const selectedNode = selected ? byId.get(selected) : undefined;
   const ordered = [...graph.edges].sort((a, b) => Number(trail.has(a.id)) - Number(trail.has(b.id)));
   return (
     <View>
-      <View style={styles.canvas} onLayout={measure}>
+      <View ref={camera.ref} style={styles.canvas} onLayout={measure} {...camera.handlers}>
+        <Animated.View pointerEvents="box-none" style={styles.world}>
+          {shown
+            ? ordered.map((edge) => {
+                const from = positions.get(edge.from);
+                const to = positions.get(edge.to);
+                if (!from || !to) return null;
+                return <EdgeLine key={edge.id} from={from} to={to} style={edgeStyle(edge)} inverse={camera.inverse} />;
+              })
+            : null}
+          {shown
+            ? labels.folders.map((folder) => (
+                <Animated.Text
+                  key={folder.folder}
+                  pointerEvents="none"
+                  numberOfLines={1}
+                  style={[
+                    styles.folder,
+                    { left: folder.left, top: folder.top, width: folder.width, transform: [{ scale: camera.inverse }] },
+                  ]}
+                >
+                  {folder.folder === "." ? "/" : `${folder.folder}/`}
+                </Animated.Text>
+              ))
+            : null}
+          {shown
+            ? graph.nodes.map((node) => {
+                const at = positions.get(node.id);
+                if (!at) return null;
+                return (
+                  <GraphNodeView
+                    key={node.id}
+                    theme={theme}
+                    node={node}
+                    at={at}
+                    color={nodeColor(node)}
+                    state={states.get(node.id) ?? null}
+                    dim={dimmed(node)}
+                    selected={selected === node.id}
+                    current={working.has(node.id)}
+                    label={labels.nodes.get(node.id) ?? null}
+                    inverse={camera.inverse}
+                    reduce={props.reduceMotion}
+                    onPress={press}
+                  />
+                );
+              })
+            : null}
+          {shown
+            ? targets.map(({ agent, target }) => {
+                const hover = hovers.get(agent.id);
+                if (!hover) return null;
+                return (
+                  <AgentCursor
+                    key={agent.id}
+                    theme={theme}
+                    agent={agent}
+                    graph={graph}
+                    target={target}
+                    layoutKey={layoutKey}
+                    hover={hover}
+                    width={width}
+                    inverse={camera.inverse}
+                    reduce={props.reduceMotion}
+                  />
+                );
+              })
+            : null}
+        </Animated.View>
         {!ready ? (
           <View style={styles.waiting}>
             <Text style={styles.waitingText}>Linking files…</Text>
           </View>
         ) : null}
-        {shown
-          ? ordered.map((edge) => {
-              const from = positions.get(edge.from);
-              const to = positions.get(edge.to);
-              if (!from || !to) return null;
-              return <EdgeLine key={edge.id} from={from} to={to} style={edgeStyle(edge)} />;
-            })
-          : null}
-        {shown
-          ? labels.folders.map((folder) => (
-              <Text
-                key={folder.folder}
-                pointerEvents="none"
-                numberOfLines={1}
-                style={[styles.folder, { left: folder.left, top: folder.top, width: folder.width }]}
-              >
-                {folder.folder === "." ? "/" : `${folder.folder}/`}
-              </Text>
-            ))
-          : null}
-        {shown
-          ? graph.nodes.map((node) => {
-              const at = positions.get(node.id);
-              if (!at) return null;
-              return (
-                <GraphNodeView
-                  key={node.id}
-                  theme={theme}
-                  node={node}
-                  at={at}
-                  color={nodeColor(node)}
-                  state={states.get(node.id) ?? null}
-                  dim={dimmed(node)}
-                  selected={selected === node.id}
-                  current={working.has(node.id)}
-                  label={labels.nodes.get(node.id) ?? null}
-                  reduce={props.reduceMotion}
-                  onPress={press}
-                />
-              );
-            })
-          : null}
-        {shown
-          ? targets.map(({ agent, target }) => {
-              const hover = hovers.get(agent.id);
-              if (!hover) return null;
-              return (
-                <AgentCursor
-                  key={agent.id}
-                  theme={theme}
-                  agent={agent}
-                  graph={graph}
-                  target={target}
-                  layoutKey={layoutKey}
-                  hover={hover}
-                  width={width}
-                  reduce={props.reduceMotion}
-                />
-              );
-            })
-          : null}
+        {shown ? (
+          <CameraButtons
+            theme={theme}
+            camera={camera}
+            auto={auto}
+            locked={locked}
+            onAuto={toggleAuto}
+            onLock={toggleLock}
+          />
+        ) : null}
       </View>
       <View style={styles.caption}>
         {selectedNode ? (