@yannelli/paseo-linear-plugin 1.1.0-beta.3 → 1.1.0-beta.4

package/OVERVIEW.md

@@ -27,13 +27,13 @@ Select **Start agent** or **Start review** on an issue. The setup page shows the
 
 ## Linear Live
 
-Open **Linear Live** from the Linear pill in an agent's composer. It shows the issue's sub-issues with their statuses and the agent's todos, a map of the files the agent reads and edits, or a graph of those files joined by their imports and links, with the agent gliding to what it works on, the agents it starts, and its latest commands. It works with Claude, Codex, and other providers. The map comes from paths in the ticket text, or, if you choose it in **Settings → Plugins → Linear → Live**, from an explore agent that reads the repository before the agent starts. The implement agent waits for the map. The explore agent uses provider usage. Buttons on the map reload it, build it again with the explore agent, or clear it. On the graph, a button follows the running agents and zooms to their files. You can also zoom with the buttons, the wheel, or a pinch, and lock the view so the page scrolls. Agents in worktrees of the same project show on the map and the graph. Explore and setup agents are told to only read. The plugin starts Claude in Always Ask and answers the permission requests these agents raise: it allows reads and search commands in the project folder and denies the rest. Codex has no read-only mode, so it runs in its default mode, and the plugin answers only the requests Codex raises.
+Open **Linear Live** from the Linear pill in an agent's composer. It shows the issue's sub-issues with their statuses and the agent's todos, a map of the files the agent reads and edits, or a graph of those files joined by their imports and links, with the agent gliding to what it works on, the agents it starts, and its latest commands. It works with Claude, Codex, and other providers. The map comes from paths in the ticket text, or, if you choose it in **Settings → Plugins → Linear → Live**, from an explore agent that reads the repository before the agent starts. The implement agent waits for the map. The explore agent uses provider usage. Buttons on the map reload it, build it again with the explore agent, or clear it. On the graph, a button follows the running agents and zooms to their files. You can also zoom with the buttons, the wheel, or a pinch, and lock the view so the page scrolls. Nodes, labels, and agent cursors grow as you zoom in. Agents in worktrees of the same project show on the map and the graph. Explore and setup agents are told to only read. The plugin starts Claude in Always Ask and answers the permission requests these agents raise: it allows reads and search commands in the project folder and denies the rest. Codex has no read-only mode, so it runs in its default mode, and the plugin answers only the requests Codex raises.
 
 On agents not started from an issue, the Linear pill searches Linear and sends an issue to the agent.
 
 ## Plugin icon
 
-In **Settings → Plugins → Linear → Icon**, choose an SVG file or paste SVG markup. Composer pills, the Linear sidebar row, the timeline card, and the Linear screens use it. Paseo menus and panel tabs keep the built-in icon. Keep the original colors, or paint the icon with the theme color, the theme accent, Linear indigo, or a custom color. **Solid** fills outline shapes. The plugin refuses SVGs with scripts, event handlers, or links to other files. The iOS and Android apps show the built-in icon in the chosen color.
+In **Settings → Plugins → Linear → Icon**, choose an SVG file or paste SVG markup. Composer pills, the Linear sidebar row, the timeline card, and the Linear screens use it. Panel tabs, the new tab menu, and Command Center take built-in icons only, so pick one of those for them. Keep the original colors, or paint the icon with the theme color, the theme accent, Linear indigo, or a custom color. **Solid** fills outline shapes. The plugin refuses SVGs with scripts, event handlers, or links to other files. The iOS and Android apps show the built-in icon in the chosen color.
 
 ## Update Linear from todos
 

package/README.md

@@ -158,7 +158,7 @@ Linear Live is an agent panel. Open it from the Linear pill, or with **Linear: O
 - **Sub-issues:** each sub-issue shows its Linear status and the agent's todo progress. The todos of the current sub-issue show under it. Select a sub-issue to show only its files on the map. Hide the issues column with the button on the **Issue** card to give the map or the graph the full width. The column becomes a strip with the status of each issue. Select an issue there to show only its files.
 - **Map:** files are grouped by folder. The map marks the files the agent read, edited, or created, and the file it is on now. Files the agent touched but the map did not predict have a dashed border. A folder the agent listed or searched gets a solid border, and its header shows how many of its files the agent touched. The header also names the service, package, or main folder the folder is in, from the [project knowledge](#project-knowledge). When the agent touches files the map did not predict, the line under the map tells where they are, such as `Off the map: billing-api · service (2), docs (1)`, and the **Now** line in the header shows **Off the map** with the place of the current file. Reads through the shell count too: `cat`, `sed -n`, `head`, `grep`, `rg`, `ls`, `find`, `git show`, and redirects to files.
 - **Graph:** the files and the links between them. A line joins two files when one imports the other, a Markdown or style file links to the other, `package.json` names it, or the text of one names the path of the other. This works for TypeScript and JavaScript (with `tsconfig` paths and workspace packages), Python, Go, Rust, Ruby, CSS and Sass, Markdown, HTML, and config files. Files of one folder sit together under the folder name and take the color of their sub-issue. The issue is in the center, with its sub-issues joined to the files the map gives them. The agent hovers over what it works on: the file it reads or edits, or the sub-issue whose todo it just started. When the work moves, it glides along the links to the next node, and the lines at that node take its color. New files join without moving the rest. Agents that this agent started get their own cursor when they work in the same folder or in a worktree of the same project. An agent with no file activity yet hovers over the sub-issue whose key starts its title. Running subagents circle the agent that started them. Select a sub-issue to show only its files. Select any node to see what it is, how many files it links to, and for an off-map file, the service or folder it is in. Switch between **Map** and **Graph** on the card, or set the default in **Show files as** in the Live settings.
-- **Graph view:** the icon buttons at the top right of the graph move the view. **Follow the running agents** zooms to the nodes the running agents work on and the files next to them, and moves with the agents. **Show the whole graph** zooms out. **Zoom out** and **Zoom in** change the zoom in steps. Scroll to zoom at the pointer, drag to move when zoomed in, or pinch on a touch screen. Each of these stops following. The lock button lets the wheel and drags scroll the page instead. Nodes, lines, and labels keep their size when you zoom, and more file names show when there is room. The graph keeps your follow and lock choices.
+- **Graph view:** the icon buttons at the top right of the graph move the view. **Follow the running agents** zooms to the nodes the running agents work on and the files next to them, centers on the agents as far as those files stay in view, and moves with the agents. **Show the whole graph** zooms out. **Zoom out** and **Zoom in** change the zoom in steps. Scroll to zoom at the pointer, drag to move when zoomed in, or pinch on a touch screen. Each of these stops following. The lock button lets the wheel and drags scroll the page instead. Nodes, lines, labels, and agent cursors grow with the square root of the zoom, so at 4x zoom they are twice their size, and more file names show when there is room. Labels stay clear of the buttons, and an agent's caption moves to its left side near the right edge. The graph keeps your follow and lock choices.
 - **Agents:** the agents that work under this agent. Paseo agents that this agent started show their status, their files, and their own markers on the map when they work in the same folder or in a worktree of the same project. Select one to open it. Subagents that run inside the provider, such as Claude's Agent tool, show their type, description, and status. For Claude, the daemon reads each subagent's transcript, also for subagents that run in the background, so a subagent shows what it does now, gets its own cursor, and adds its files to the map. Other providers do not send subagent file reads, so the map shows only the files named in the subagent's prompt.
 - **Activity:** the latest reads, edits, searches, and commands, with line counts and exit codes.
 
@@ -181,10 +181,11 @@ Each agent's composer has a **Linear** pill. On an agent started from an issue,
 
 ### Plugin icon
 
-In **Settings → Plugins → Linear → Icon**, choose an SVG file or paste SVG markup. Composer pills, the Linear sidebar row on Paseo 0.11 and newer, the issue card in the timeline, and the Linear screens then use it. Paseo menus, panel tabs, and settings take only built-in icon names, so they keep the Linear board icon. The plugin accepts SVG only. It refuses scripts, event handlers, HTML content, entities, and links to other files or bitmap images. The SVG needs a viewBox, or a width and height in pixels.
+In **Settings → Plugins → Linear → Icon**, choose an SVG file or paste SVG markup. Composer pills, the Linear sidebar row on Paseo 0.11 and newer, the issue card in the timeline, and the Linear screens then use it. The plugin accepts SVG only. It refuses scripts, event handlers, HTML content, entities, and links to other files or bitmap images. The SVG needs a viewBox, or a width and height in pixels.
 
 - **Color:** **Original colors** keeps the SVG as drawn, and `currentColor` takes the color Paseo gives the icon. **Theme color**, **Theme accent**, **Linear indigo**, and **Custom color** paint the whole icon one color and keep its transparency. These choices also apply to the built-in icon.
 - **Solid:** fills shapes that only have an outline, with their stroke color, so a line icon shows as a solid shape.
+- **Built-in icon:** Paseo draws panel tabs, the new tab menu, and Command Center with built-in Lucide icons only, so your SVG cannot show there. Pick the built-in icon for those places, such as Rocket or Target. Without an SVG, every place uses it. Tabs that are open change when you reload Paseo or open them again. The web app keeps the choice on the device, so the tabs get it as Paseo starts.
 
 The preview shows each change before you save. The iOS and Android apps cannot draw SVG images from plugins, so they show the built-in icon in the chosen color.
 
@@ -224,7 +225,7 @@ In **Settings → Plugins → Linear → Projects**, select **Start** under **Se
 - **Linear tools for agents:** the daemon runs the `linear` MCP server on `127.0.0.1` only, and only after an agent gets it. Each agent gets its own random token, and its tools reach only its issue and that issue's sub-issues. Edits use the Linear key of the project that loaded the issue. Requests from a web page are refused. `agent-tools.json` beside the key file keeps the port and a hash of each token, so agents keep their tools after a restart. The token itself is in the agent's Paseo config.
 - **Claude hooks:** when an **Agent guidance** switch is on for a Claude agent, the daemon writes a Claude Code plugin to `claude-hooks/` beside the key file, one folder for each issue and set of hooks. It holds the issue key and title and the sub-issue keys and titles. The agent starts with `--plugin-dir` set to that folder. The hooks print that text and run no other command. The daemon does not write hooks on Windows hosts.
 - **Todo sync:** when it is on, the daemon changes issue statuses in Linear with the key of the project that loaded the issue.
-- **Plugin icon:** the SVG is saved in the plugin settings on the daemon host. The app draws it as an image, which does not run scripts or load other files.
+- **Plugin icon:** the SVG is saved in the plugin settings on the daemon host. The app draws it as an image, which does not run scripts or load other files. The web app keeps the name of the built-in icon in its local storage.
 - **Cached results:** the daemon keeps up to 300 recent Linear responses in memory for up to 24 hours. It groups them by a hash of the key, so two keys never share results. The app shows saved results at once with **Showing saved results. Updating…** while it gets new data. An edit clears the cached lists and issues for that key. Saving or removing a key clears the whole cache. The cache is not written to disk, and a daemon restart clears it.
 
 Linear errors, such as a rejected key or a rate limit, show in the panel or as a message.

package/client/graph-camera.tsx

@@ -1,19 +1,30 @@
 import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Easing, type GestureResponderHandlers, PanResponder, View } from "react-native";
-import { type Box, type Camera, clampCamera, FIT, frameBox, MAX_ZOOM, MIN_ZOOM, zoomAt } from "../shared/graph-camera";
+import {
+  type Box,
+  type Camera,
+  clampCamera,
+  FIT,
+  type Focus,
+  frameBox,
+  growth,
+  MAX_ZOOM,
+  MIN_ZOOM,
+  zoomAt,
+} from "../shared/graph-camera";
 import { NATIVE_DRIVER } from "./live-timeline";
 import { ToolButton, ToolGroup } from "./tool-buttons";
 import type { Theme } from "./ui";
 import { listenWheel } from "./web";
 
 // Animated values move the graph canvas, so a wheel or a drag never renders the graph again.
-// Nodes, edges, and cursors scale by the inverse zoom, so they keep their size on screen.
+// Nodes, edges, labels, and cursors scale back part of the zoom, so they grow less than it.
 
 export interface CameraOptions {
   width: number;
   height: number;
   /** Where auto mode looks; null shows the whole graph. */
-  focus: Box | null;
+  focus: Box | Focus | null;
   auto: boolean;
   /** Wheel and drag move the page, not the camera. */
   locked: boolean;
@@ -28,8 +39,8 @@ export interface CameraControl {
   ref: RefObject<View | null>;
   handlers: GestureResponderHandlers;
   transform: [{ translateX: Animated.Value }, { translateY: Animated.Value }, { scale: Animated.Value }];
-  /** One over the zoom: the scale that keeps a canvas item its own size on screen. */
-  inverse: Animated.AnimatedInterpolation<number>;
+  /** The scale of canvas items, so they draw at growth(zoom) times their size on screen. */
+  itemScale: Animated.AnimatedInterpolation<number>;
   limit: ZoomLimit;
   /** The camera once it stops moving; labels are placed for it. */
   settled: Camera;
@@ -40,6 +51,8 @@ export interface CameraControl {
 const ZOOM_STEP = 1.5;
 const DRAG_START = 6;
 const SETTLE_MS = 160;
+/** Zooms where the item scale is exact; it is linear between them. */
+const ZOOM_SAMPLES = [1, 1.25, 1.5, 1.75, 2, 2.5, 3, 3.5, 4];
 
 type Touch = { pageX: number; pageY: number };
 const spreadOf = (touches: readonly Touch[]) => {
@@ -49,7 +62,13 @@ const spreadOf = (touches: readonly Touch[]) => {
 
 export function useGraphCamera(options: CameraOptions): CameraControl {
   const [values] = useState(() => ({ x: new Animated.Value(0), y: new Animated.Value(0), zoom: new Animated.Value(1) }));
-  const [inverse] = useState(() => Animated.divide<number>(new Animated.Value(1), values.zoom));
+  const [itemScale] = useState(() =>
+    values.zoom.interpolate({
+      inputRange: ZOOM_SAMPLES,
+      outputRange: ZOOM_SAMPLES.map((zoom) => growth(zoom) / zoom),
+      extrapolate: "clamp",
+    }),
+  );
   const [limit, setLimit] = useState<ZoomLimit>("min");
   const [settled, setSettled] = useState<Camera>(FIT);
   const pause = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -99,7 +118,8 @@ export function useGraphCamera(options: CameraOptions): CameraControl {
   );
 
   const { width, height, auto, locked, focus } = options;
-  const focusKey = focus ? [focus.left, focus.top, focus.right, focus.bottom].map(Math.round).join(",") : "";
+  const center = focus && "center" in focus ? [focus.center.x, focus.center.y] : [];
+  const focusKey = focus ? [focus.left, focus.top, focus.right, focus.bottom, ...center].map(Math.round).join(",") : "";
   useEffect(() => {
     if (width === 0 || !auto) return;
     const box = latest.current.focus;
@@ -168,7 +188,7 @@ export function useGraphCamera(options: CameraOptions): CameraControl {
     [move],
   );
   const fit = useCallback(() => move(FIT, true), [move]);
-  return { ref, handlers, transform, inverse, limit, settled, zoomBy, fit };
+  return { ref, handlers, transform, itemScale, limit, settled, zoomBy, fit };
 }
 
 export function CameraButtons(props: {

package/client/graph-labels.ts

@@ -1,4 +1,4 @@
-import { type LabelRequest, labelBox, labelSides, type Placed, type Point, placeLabels } from "../shared/graph-geometry";
+import { type LabelRequest, labelBox, labelSides, type Placed, type Point, placeLabels, type Rect } from "../shared/graph-geometry";
 import { folderCenters, type Graph, type GraphNode } from "../shared/graph-model";
 import type { IssueDetail } from "../shared/linear";
 import { todoStatus } from "../shared/todo-sync";
@@ -52,6 +52,8 @@ export interface LabelInput {
   height: number;
   /** Zoomed in, so files no agent touched get labels too when they fit. */
   every?: boolean;
+  /** Areas covered by controls, such as the camera buttons. */
+  blocked?: readonly Rect[];
 }
 
 function linesOf(node: GraphNode, input: LabelInput): readonly [string, string | null] {
@@ -114,10 +116,11 @@ export function graphLabels(input: LabelInput): { nodes: Map<string, Label>; fol
     requests.push({ id, width, height: 14, spots: [{ left: center.x - width / 2, top: center.top - 30 }, { left: center.x - width / 2, top: center.y - 7 }] });
   }
   for (const node of wanted.filter((entry) => order(entry) > 2)) push(node);
-  const shapes: { at: Point; radius: number }[] = graph.nodes.flatMap((node) => {
+  const shapes: ({ at: Point; radius: number } | Rect)[] = [...(input.blocked ?? [])];
+  for (const node of graph.nodes) {
     const at = positions.get(node.id);
-    return at ? [{ at, radius: nodeSize(node) / 2 }] : [];
-  });
+    if (at) shapes.push({ at, radius: nodeSize(node) / 2 });
+  }
   // Keep labels out from under the agents and their captions, as a row of small circles.
   for (const cursor of input.cursors) {
     shapes.push({ at: cursor.at, radius: 16 });

package/client/live-cursor.tsx

@@ -1,6 +1,7 @@
 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 Camera, growth, project } from "../shared/graph-camera";
 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";
@@ -13,12 +14,23 @@ import type { Theme } from "./ui";
 
 type Coordinate = number | Animated.Value | Animated.AnimatedInterpolation<number>;
 
+/** A node's middle on the canvas, and the pin's offset from it, which grows with the node. */
+export interface Hover extends Point {
+  dx: number;
+  dy: number;
+}
+
 interface Motion {
   x: Coordinate;
   y: Coordinate;
+  dx: Coordinate;
+  dy: Coordinate;
 }
 
 const BADGE = 26;
+/** The pin runs from the badge top to the pointer tip; the pulse rings its middle. */
+const PIN_MIDDLE = 3;
+const RING = 34;
 export const CAPTION_ROOM = 210;
 const MAX_SATELLITES = 3;
 
@@ -26,6 +38,12 @@ function glideTime(length: number): number {
   return Math.min(1200, Math.max(420, 380 + length * 0.8));
 }
 
+/** The caption goes left when it would run past the right edge of the view. */
+export function captionFlips(at: Hover, view: Camera, width: number, height: number): boolean {
+  const grow = growth(view.zoom);
+  return project(view, at, width, height).x + at.dx * grow > width - CAPTION_ROOM * grow;
+}
+
 export interface CursorProps {
   theme: Theme;
   agent: CursorAgent;
@@ -35,11 +53,13 @@ export interface CursorProps {
   /** 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. */
+  hover(id: string): Hover | null;
+  /** Canvas size and the settled camera, to keep the caption inside the view. */
   width: number;
-  /** One over the graph zoom, so the cursor keeps its size on screen. */
-  inverse: Animated.AnimatedInterpolation<number>;
+  height: number;
+  view: Camera;
+  /** The camera's item scale, so the cursor grows as nodes do. */
+  itemScale: Animated.AnimatedInterpolation<number>;
   reduce: boolean;
 }
 
@@ -50,31 +70,31 @@ export const AgentCursor = memo(function AgentCursor(props: CursorProps) {
   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 [landed, setLanded] = useState<Hover | null>(null);
   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 active = useRef<{ value: Animated.Value; path: Route<Hover>; layoutKey: string } | null>(null);
   const state = useRef({
     at: null as string | null,
-    point: null as Point | null,
+    point: null as Hover | null,
     moving: false,
     pending: null as string | null,
   });
 
   // These read only refs, so the animation callbacks never see stale props.
-  const land = (point: Point) => {
+  const land = (point: Hover) => {
     state.current.point = point;
-    setFlip(point.x > latest.current.width - CAPTION_ROOM);
+    setLanded(point);
   };
   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 });
+    setMotion({ x: point.x, y: point.y, dx: point.dx, dy: point.dy });
   };
-  const glide = (points: Point[], to: string) => {
+  const glide = (points: Hover[], to: string) => {
     const path = route(points);
     if (latest.current.reduce || !path) {
       state.current.moving = false;
@@ -85,11 +105,10 @@ export const AgentCursor = memo(function AgentCursor(props: CursorProps) {
     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) }),
-    });
+    land(path.points[path.points.length - 1] as Hover);
+    const along = (pick: (point: Hover) => number) =>
+      value.interpolate({ inputRange: path.stops, outputRange: path.points.map(pick) });
+    setMotion({ x: along((point) => point.x), y: along((point) => point.y), dx: along((point) => point.dx), dy: along((point) => point.dy) });
     Animated.timing(value, {
       toValue: 1,
       duration: glideTime(path.length),
@@ -135,7 +154,7 @@ export const AgentCursor = memo(function AgentCursor(props: CursorProps) {
       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)) {
+    } else if (current.point && ["x", "y", "dx", "dy"].some((key) => current.point?.[key as keyof Hover] !== end[key as keyof Hover])) {
       glide([current.point, end], goal);
     }
   }, [props.layoutKey]);
@@ -178,6 +197,11 @@ export const AgentCursor = memo(function AgentCursor(props: CursorProps) {
   }, [satellites, reduce, spin]);
 
   const caption = agent.caption ?? (agent.kind === "child" ? agent.label : null);
+  const flip = landed ? captionFlips(landed, props.view, props.width, props.height) : false;
+  const offset = useMemo(
+    () => (motion ? { transform: [{ translateX: motion.dx }, { translateY: motion.dy }] } : null),
+    [motion],
+  );
   const styles = useMemo(() => {
     const half = BADGE / 2;
     return {
@@ -185,14 +209,15 @@ export const AgentCursor = memo(function AgentCursor(props: CursorProps) {
       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] }) }],
+        left: -RING / 2,
+        top: PIN_MIDDLE - RING / 2,
+        width: RING,
+        height: RING,
+        borderRadius: RING / 2,
+        borderWidth: 2,
+        borderColor: agent.color,
+        opacity: halo.interpolate({ inputRange: [0, 1], outputRange: [0.6, 0] }),
+        transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [1, 1.7] }) }],
       },
       badge: {
         position: "absolute",
@@ -261,32 +286,34 @@ export const AgentCursor = memo(function AgentCursor(props: CursorProps) {
   return (
     <Animated.View
       pointerEvents="none"
-      style={[styles.anchor, { transform: [{ translateX: motion.x }, { translateY: motion.y }, { scale: props.inverse }] }]}
+      style={[styles.anchor, { transform: [{ translateX: motion.x }, { translateY: motion.y }, { scale: props.itemScale }] }]}
     >
-      <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>
+      <Animated.View style={offset}>
+        <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>
-        ) : null}
+          {caption ? (
+            <View style={styles.caption}>
+              <Text numberOfLines={1} style={styles.captionText}>
+                {caption}
+              </Text>
+            </View>
+          ) : null}
+        </Animated.View>
       </Animated.View>
     </Animated.View>
   );

package/client/live-graph.tsx

@@ -1,6 +1,6 @@
 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 { focusBox, growth, 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 AreaRef, whereLabel } from "../shared/knowledge";
@@ -9,7 +9,7 @@ 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 { AgentCursor, captionFlips, type Hover } from "./live-cursor";
 import { type IssueProgress, MONO } from "./live-issues";
 import type { LivePatch } from "./live-panel";
 import { NATIVE_DRIVER, type OwnerColors } from "./live-timeline";
@@ -41,9 +41,11 @@ export interface GraphViewProps {
   reduceMotion: boolean;
 }
 
-type Inverse = Animated.AnimatedInterpolation<number>;
+type ItemScale = Animated.AnimatedInterpolation<number>;
 /** About half the height of a folder name, which scales around its middle. */
 const FOLDER_HALF = 7;
+/** The camera buttons in the top right corner, with a margin; labels stay out of it. */
+const TOOLBAR = { width: 160, height: 44 };
 
 interface EdgeStyle {
   color: string;
@@ -55,7 +57,7 @@ interface EdgeProps {
   from: Point;
   to: Point;
   style: EdgeStyle;
-  inverse: Inverse;
+  itemScale: ItemScale;
 }
 
 const EdgeLine = memo(function EdgeLine(props: EdgeProps) {
@@ -71,15 +73,15 @@ const EdgeLine = memo(function EdgeLine(props: EdgeProps) {
     borderRadius: style.thickness / 2,
     backgroundColor: style.color,
     opacity: style.opacity,
-    // Rotate first, so the inverse zoom thins the line and leaves its length to the camera.
-    transform: [{ rotate: `${angle}rad` }, { scaleY: props.inverse }],
+    // Rotate first, so the item scale sets the thickness and leaves the length to the camera.
+    transform: [{ rotate: `${angle}rad` }, { scaleY: props.itemScale }],
   } as const;
   return <Animated.View pointerEvents="none" style={line} />;
 }, sameEdge);
 
 function sameEdge(a: EdgeProps, b: EdgeProps) {
   return (
-    a.inverse === b.inverse &&
+    a.itemScale === b.itemScale &&
     a.from === b.from &&
     a.to === b.to &&
     a.style.color === b.style.color &&
@@ -99,7 +101,7 @@ interface NodeProps {
   /** An agent is working on it. */
   current: boolean;
   label: Label | null;
-  inverse: Inverse;
+  itemScale: ItemScale;
   reduce: boolean;
   onPress(id: string): void;
 }
@@ -120,7 +122,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.itemScale === b.itemScale &&
     a.reduce === b.reduce &&
     a.onPress === b.onPress &&
     x.id === y.id &&
@@ -168,7 +170,7 @@ const GraphNodeView = memo(function GraphNodeView(props: NodeProps) {
         width: size,
         height: size,
         opacity: props.dim ? 0.22 : 1,
-        transform: [{ scale: props.inverse }],
+        transform: [{ scale: props.itemScale }],
       },
       shape: {
         width: size,
@@ -200,7 +202,7 @@ 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, props.inverse, enter, beat]);
+  }, [node, size, at, color, colors, touched, label, props.dim, props.selected, props.current, props.itemScale, enter, beat]);
   const press = useCallback(() => props.onPress(node.id), [props.onPress, node.id]);
   return (
     <Animated.View style={styles.wrap} pointerEvents="box-none">
@@ -328,11 +330,11 @@ export function LiveGraph(props: GraphViewProps) {
       targets.map(({ agent, target }) => {
         const slot = seen.get(target) ?? 0;
         seen.set(target, slot + 1);
-        const hover = (id: string): Point | null => {
+        const hover = (id: string): Hover | null => {
           const at = positions.get(id);
           const node = byId.get(id);
           if (!at || !node) return null;
-          return { x: at.x + slot * 30, y: at.y - nodeSize(node) / 2 - HOVER_GAP };
+          return { x: at.x, y: at.y, dx: slot * 30, dy: -nodeSize(node) / 2 - HOVER_GAP };
         };
         return [agent.id, hover] as const;
       }),
@@ -344,9 +346,9 @@ export function LiveGraph(props: GraphViewProps) {
         const at = hovers.get(agent.id)?.(target);
         if (!at) return [];
         const text = agent.caption ?? (agent.kind === "child" ? agent.label : null);
-        return [{ at, caption: captionWidth(text), flip: at.x > width - CAPTION_ROOM }];
+        return [{ at, caption: captionWidth(text) }];
       }),
-    [targets, hovers, width],
+    [targets, hovers],
   );
   const { saveLive } = props;
   const [auto, setAuto] = useState(props.camera === "auto");
@@ -365,18 +367,40 @@ export function LiveGraph(props: GraphViewProps) {
   }, [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.
+  // Labels are placed in the view of the settled camera, in units of the grown items so their
+  // sizes hold, 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 grow = growth(view.zoom);
+    const toView = (at: Point) => {
+      const shown = project(view, at, width, height);
+      return { x: shown.x / grow, y: shown.y / grow };
+    };
     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 });
+      if (shown.x * grow > -20 && shown.x * grow < width + 20 && shown.y * grow > -20 && shown.y * grow < 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 viewCursors = cursors.map(({ at, caption }) => {
+      const middle = toView(at);
+      return { at: { x: middle.x + at.dx, y: middle.y + at.dy }, caption, flip: captionFlips(at, view, width, height) };
+    });
+    const toolbar = { left: (width - TOOLBAR.width) / grow, top: 0, right: width / grow, bottom: TOOLBAR.height / grow };
+    const placed = graphLabels({
+      graph,
+      positions: seen,
+      issue,
+      progress,
+      selected,
+      working,
+      cursors: viewCursors,
+      width: width / grow,
+      height: height / grow,
+      every: view.zoom >= 1.5,
+      blocked: [toolbar],
+    });
     const nodes = new Map<string, Label>();
     for (const [id, label] of placed.nodes) {
       const at = positions.get(id);
@@ -384,7 +408,8 @@ export function LiveGraph(props: GraphViewProps) {
       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);
+      const shown = { x: (folder.left + folder.width / 2) * grow, y: (folder.top + FOLDER_HALF) * grow };
+      const middle = unproject(view, shown, width, height);
       return { ...folder, left: middle.x - folder.width / 2, top: middle.y - FOLDER_HALF };
     });
     return { nodes, folders };
@@ -429,7 +454,7 @@ export function LiveGraph(props: GraphViewProps) {
                 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} />;
+                return <EdgeLine key={edge.id} from={from} to={to} style={edgeStyle(edge)} itemScale={camera.itemScale} />;
               })
             : null}
           {shown
@@ -440,7 +465,7 @@ export function LiveGraph(props: GraphViewProps) {
                   numberOfLines={1}
                   style={[
                     styles.folder,
-                    { left: folder.left, top: folder.top, width: folder.width, transform: [{ scale: camera.inverse }] },
+                    { left: folder.left, top: folder.top, width: folder.width, transform: [{ scale: camera.itemScale }] },
                   ]}
                 >
                   {folder.folder === "." ? "/" : `${folder.folder}/`}
@@ -463,7 +488,7 @@ export function LiveGraph(props: GraphViewProps) {
                     selected={selected === node.id}
                     current={working.has(node.id)}
                     label={labels.nodes.get(node.id) ?? null}
-                    inverse={camera.inverse}
+                    itemScale={camera.itemScale}
                     reduce={props.reduceMotion}
                     onPress={press}
                   />
@@ -484,7 +509,9 @@ export function LiveGraph(props: GraphViewProps) {
                     layoutKey={layoutKey}
                     hover={hover}
                     width={width}
-                    inverse={camera.inverse}
+                    height={height}
+                    view={view}
+                    itemScale={camera.itemScale}
                     reduce={props.reduceMotion}
                   />
                 );