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

package/OVERVIEW.md

@@ -27,21 +27,25 @@ 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
 
 Turn on **Update Linear from agent todos** in the Live settings. After each turn, a todo that starts with a sub-issue key, such as `ENG-124: add the queue`, moves that sub-issue to In Progress, and then to Done when all its todos are done. The parent moves to In Review when every sub-issue is done, never to Done. Statuses only move forward.
 
+## Project knowledge
+
+The daemon keeps a map of each project's files without an agent: its folders, services, packages, languages, commands, and guide files. Explore and setup agents start from it. Ticket-text maps use it to match short paths to real files and to put a named service on the map. When an agent works off the map, Linear Live shows the service or folder it is in. See it, or inspect again, under **Project knowledge** in **Projects**.
+
 ## Set up project prompts
 
-In **Projects**, select **Start** under **Set up with an agent**. An agent reads the repository's guidelines, scripts, and CI files and proposes project instructions, steps, and prompt additions. You accept each change before it is saved.
+In **Projects**, select **Start** under **Set up with an agent**. An agent reads the repository's guidelines, scripts, and CI files and proposes project instructions, steps, and prompt additions. You accept each change before it is saved. **Open agent** shows the agent while it works, and the lines it writes about the project and its areas go into the project knowledge.
 
 ## Choose projects
 
@@ -53,4 +57,4 @@ Choose **Attach Linear issue** in the composer attachment menu. The agent gets t
 
 ## Data and permissions
 
-Only the daemon sends requests to `https://api.linear.app/graphql`. The daemon never sends a key back to the app. Paseo sends the prompt, with the issue snapshot, to the agent provider. Explore and setup agents read project files and send them to your agent provider. The daemon saves explore maps, and agents that wait for a map, beside the key file, and Linear Live lists and reads files only inside the agent's folder. For Claude agents, the daemon also reads the subagent transcripts Claude saves for the session, to show what each subagent does. With agent guidance on, it writes Claude Code hooks with the issue keys and titles beside the key file, and it serves the Linear tools on 127.0.0.1 with a token for each agent. Each token reaches only its issue and that issue's sub-issues. With todo sync on, the daemon changes issue statuses in Linear. The daemon keeps recent Linear responses in memory for up to 24 hours, and the list shows them with **Showing saved results. Updating…** while it gets new data.
+Only the daemon sends requests to `https://api.linear.app/graphql`. The daemon never sends a key back to the app. Paseo sends the prompt, with the issue snapshot, to the agent provider. Explore and setup agents read project files and send them to your agent provider. The daemon saves explore maps, project knowledge, and agents that wait for a map, beside the key file, and Linear Live lists and reads files only inside the agent's folder. For Claude agents, the daemon also reads the subagent transcripts Claude saves for the session, to show what each subagent does. With agent guidance on, it writes Claude Code hooks with the issue keys and titles beside the key file, and it serves the Linear tools on 127.0.0.1 with a token for each agent. Each token reaches only its issue and that issue's sub-issues. With todo sync on, the daemon changes issue statuses in Linear. The daemon keeps recent Linear responses in memory for up to 24 hours, and the list shows them with **Showing saved results. Updating…** while it gets new data.

package/README.md

@@ -156,16 +156,16 @@ The **Linear** screen in the sidebar is not tied to a project, so it stays avail
 Linear Live is an agent panel. Open it from the Linear pill, or with **Linear: Open Linear Live** in the command center while an agent is open. It works for agents started from an issue, with Claude, Codex, and other providers.
 
 - **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. 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 and how many files it links to. 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.
+- **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, 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.
 
 The map comes from one of two sources. Choose it in **Settings → Plugins → Linear → Live**:
 
-- **Ticket text** (the default) finds file and folder paths in the issue title, description, and sub-issue titles. It costs nothing, but it finds only paths the issue names. Linear sends sub-issue titles but not their descriptions.
-- **Explore agent** maps the files first when you start an implement agent. It reads the repository and lists the files for each sub-issue. The implement agent starts when the map is ready, or with the ticket-text map if exploring fails. A saved map is used again, so each issue is explored once. The plugin archives the explore agent when it finishes. Choose its model and effort in the Live settings. A faster, cheaper model, such as Haiku, is usually enough. It lists up to 150 files.
+- **Ticket text** (the default) finds file and folder paths in the issue title, description, and sub-issue titles. It costs nothing, but it finds only paths the issue names. Linear sends sub-issue titles but not their descriptions. With project knowledge, a short path such as `queries.ts` becomes the one project file that ends with it, and a service or package that the text names, such as `billing-api` or "the billing service", puts its folder on the map. A plain folder counts only when the text calls it a folder, such as "the docs folder".
+- **Explore agent** maps the files first when you start an implement agent. It starts from the project map in the project knowledge, reads the repository, and lists the files for each sub-issue. The implement agent starts when the map is ready, or with the ticket-text map if exploring fails. A saved map is used again, so each issue is explored once. The plugin archives the explore agent when it finishes. Choose its model and effort in the Live settings. A faster, cheaper model, such as Haiku, is usually enough. It lists up to 150 files.
 
 The buttons on the map card control the saved map. **Read files and links again** reloads the map, the folder lists, and the links. **Build** or **Rebuild the map with the explore agent** starts an explore run now and replaces the saved map when it finishes. **Clear the saved map** deletes it, so the map uses the ticket text until the next explore run. You cannot clear a map while an explore run makes it.
 
@@ -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.
 
@@ -199,9 +200,20 @@ Turn on **Update Linear from agent todos** in the Live settings. After each turn
 
 The daemon reads the issue from Linear before each sync, so a status you changed by hand counts. **Sync now** in the pill runs the same check at once.
 
+### Project knowledge
+
+The daemon keeps a map of each project's files, so explore and setup agents, ticket-text maps, and Linear Live know the project before an agent reads it. No agent runs for it, and it costs no provider usage. The daemon makes it the first time a project needs it: when you open the project in **Settings → Plugins → Linear → Projects**, open Linear Live for one of its agents, or start an explore or setup run. It makes it again when it is 6 hours old, and **Inspect again** under **Project knowledge** makes it at once.
+
+- **Files:** the files git tracks or would track, without ignored files. Outside a git repository, the daemon walks the folder and skips folders such as `node_modules`, `dist`, and `.git`. It keeps up to 20,000 paths, the shallow ones first.
+- **Areas:** services, packages, and main folders. A folder with a manifest such as `package.json`, `go.mod`, `Cargo.toml`, `pyproject.toml`, or a `.csproj` file is a package, named by the manifest. A folder with a `Dockerfile`, `Procfile`, `fly.toml`, or a similar file, a folder that a compose file builds, and a package under a folder such as `apps/` or `services/` is a service. Each top folder is an area too, and so is each subfolder of a top folder that holds 40% or more of the files. Folder names give a role, such as backend, frontend, tests, or docs. Manifests in fixture, example, and template folders do not count.
+- **Languages, commands, and guides:** file counts by language, the root package scripts and Makefile targets, and files that guide agents, such as `AGENTS.md`, `CLAUDE.md`, the README, CONTRIBUTING, and CI workflows.
+- **Summaries:** the setup agent adds one line about the project and one line about each area. They stay when the daemon makes the map again.
+
+The **Project knowledge** section in the Projects settings shows what the daemon found.
+
 ### Set up project prompts with an agent
 
-In **Settings → Plugins → Linear → Projects**, select **Start** under **Set up with an agent**. An agent reads the project's AGENTS.md, CLAUDE.md, CONTRIBUTING, README, scripts, and CI files. It then proposes project instructions, steps, and text to add to the Implement and Review prompts. Each change shows the current and proposed text. Turn off the ones you do not want, select **Use accepted changes**, and then save. Nothing changes until you save.
+In **Settings → Plugins → Linear → Projects**, select **Start** under **Set up with an agent**. The daemon makes the project knowledge again first, and the agent starts from that project map. While it runs, **Open agent** opens the setup agent so you can watch it. The agent reads the project's AGENTS.md, CLAUDE.md, CONTRIBUTING, README, scripts, and CI files. It then proposes project instructions, steps, and text to add to the Implement and Review prompts. Each change shows the current and proposed text. Turn off the ones you do not want, select **Use accepted changes**, and then save. Nothing changes until you save. The agent also describes the project and each area, and the daemon saves those lines to the project knowledge at once.
 
 ## Data and permissions
 
@@ -209,10 +221,11 @@ In **Settings → Plugins → Linear → Projects**, select **Start** under **Se
 - **Data sent to Linear:** queries for issues, teams, users, and comments, and the changes you make. When you start an agent with the options on, the plugin moves the issue to In Progress and assigns it to you.
 - **Data sent to the agent provider:** the prompt. It holds the template text and an issue snapshot: identifier, title, URL, team, status, priority, assignee, project, labels, parent, description, sub-issues, and links. It holds comments only when **Include comments in the prompt** is on. It also holds the project instructions and steps from the Projects settings. An attached issue sends the identifier, title, URL, status, priority, assignee, project, labels, and description.
 - **Linear Live and setup agents:** the explore agent gets the issue snapshot without comments, and both agents read files in the project. Your agent provider gets what they read. The map of an explore run is saved in `live-maps.json` beside the key file, for up to 200 issues. An agent that waits for a map is saved in `pending-launches.json` there until it starts. Linear Live lists files only in the folders it shows, and reads the files on the graph to find their links, inside the agent's own folder. It does not follow links that lead outside that folder. For a Claude agent with subagents, the daemon reads the tool calls in the subagent transcripts that Claude saves for that session. It sends the app only the tool names, file paths, and commands, never file text.
+- **Project knowledge:** the daemon lists the files of a Paseo project with `git ls-files`, or by walking the folder, and reads small manifest files (up to 256 KB) inside the project folder. It does not follow links that lead outside the folder. It saves file paths, manifest names, script names, and summaries in `knowledge/` beside the key file, one file per project. The app gets the areas, counts, commands, and guides, never the file list. Explore and setup prompts hold the project map: folder names with file counts, areas, commands, and guide file names. Your agent provider gets that text.
 - **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.
@@ -240,7 +253,7 @@ Linear errors, such as a rejected key or a rate limit, show in the panel or as a
 | `client/live-map.tsx`, `client/live-graph.tsx`, `client/graph-labels.ts`, `client/graph-camera.tsx`, `client/live-cursor.tsx`, `client/live-agents.tsx` | App | File map, file graph with its labels and camera, agent cursors, and the agents list |
 | `client/tool-buttons.tsx`, `client/web.ts` | App | Icon buttons for the map and graph, and the wheel listener and file picker on the web |
 | `client/pill.tsx` | App | Linear pill in each agent's composer |
-| `client/project-init.tsx` | App | Project setup proposal in the Projects settings |
+| `client/project-init.tsx`, `client/project-knowledge.tsx` | App | Project setup proposal and the Project knowledge section in the Projects settings |
 | `shared/linear.ts` | Both | RPC contracts and issue schemas |
 | `shared/issues.ts` | Both | The `issues.search` RPC and the composer attachment source |
 | `shared/settings.ts` | Both | Settings schema: templates, agent defaults, and project settings |
@@ -252,6 +265,7 @@ Linear errors, such as a rejected key or a rate limit, show in the panel or as a
 | `shared/agent-hooks.ts`, `server/agent-hooks.ts` | Both, Daemon | Claude Code hooks for agent guidance, and the plugin folder the daemon writes |
 | `shared/agent-tools.ts`, `server/agent-tools.ts`, `server/mcp-http.ts` | Both, Daemon | The `linear` MCP server: its tools, tokens, and HTTP transport |
 | `shared/todo-sync.ts`, `shared/project-setup.ts` | Both | Todo keys, status moves, and setup proposals |
+| `shared/knowledge.ts` | Both | Project knowledge contracts, areas and their labels, the project map for prompts, and ticket path matching |
 | `server/handlers.ts` | Daemon | RPC handlers, key lookup, and cache use |
 | `server/credentials.ts` | Daemon | Key file and key order |
 | `server/cache.ts` | Daemon | Response cache in memory |
@@ -259,6 +273,7 @@ Linear errors, such as a rejected key or a rate limit, show in the panel or as a
 | `server/linear.ts` | Daemon | Search and snapshot text for the composer attachment |
 | `server/live.ts`, `server/links.ts`, `server/subagent-logs.ts`, `server/agent-runs.ts` | Daemon | File listing, links between files, subagent transcripts, explore runs, and the saved maps |
 | `server/sync.ts`, `server/init.ts` | Daemon | Todo sync after each turn, and project setup runs |
+| `server/inspect.ts`, `server/knowledge.ts` | Daemon | Project inspection without an agent, and the saved project knowledge |
 
 The client bundle holds no credentials and makes no calls to Linear.
 

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>
   );