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

package/client/plugin-icon.tsx

@@ -1,16 +1,50 @@
 import { useSettings } from "@getpaseo/plugin/client";
 import { Icon } from "@getpaseo/plugin/client/react-native";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { Image, Platform } from "react-native";
-import { type IconSettings, iconMarkup, paintColor } from "../shared/custom-icon";
+import { BUILT_IN_ICON, type IconSettings, iconMarkup, paintColor } from "../shared/custom-icon";
 import { linearSettings } from "../shared/settings";
 import { svgDataUri } from "./provider-icon";
 import type { Theme } from "./ui";
+import { readStored, writeStored } from "./web";
 
-// The plugin's icon in pills, the sidebar, and plugin screens. Native apps cannot draw SVG
-// images from plugins, so they show the built-in icon in the chosen color.
+// The plugin's icon in pills, the sidebar, and plugin screens. Without an SVG, and in native
+// apps, which cannot draw SVG images from plugins, it is the chosen built-in icon.
 
-export const BUILT_IN_ICON = "SquareKanban";
+// Panels and Command Center items take a Lucide name when they register, outside React.
+// Components that read the settings share the chosen name here. Paseo keeps the icon an open
+// tab got, so the web app remembers the name and registers with it on the next start.
+const MENU_ICON_KEY = "paseo-linear-plugin:menu-icon";
+let menuIcon = readStored(MENU_ICON_KEY) ?? BUILT_IN_ICON;
+
+/** The menu icon to register with first: the last one chosen on this device. */
+export function startMenuIcon(): string {
+  return menuIcon;
+}
+const menuListeners = new Set<(name: string) => void>();
+
+export function publishMenuIcon(name: string): void {
+  if (name === menuIcon) return;
+  menuIcon = name;
+  writeStored(MENU_ICON_KEY, name);
+  for (const listener of menuListeners) listener(name);
+}
+
+export function onMenuIconChange(listener: (name: string) => void): () => void {
+  menuListeners.add(listener);
+  return () => menuListeners.delete(listener);
+}
+
+/** The saved icon settings, or null while they load. Shares the menu icon on the way. */
+export function useIconSettings(): IconSettings | null {
+  const settings = useSettings(linearSettings);
+  const icon = settings.status === "ready" ? settings.values.icon : null;
+  const menu = icon?.menu;
+  useEffect(() => {
+    if (menu) publishMenuIcon(menu);
+  }, [menu]);
+  return icon;
+}
 
 export interface PluginIconProps {
   size: number;
@@ -31,13 +65,11 @@ export function IconGlyph(props: PluginIconProps & { icon: IconSettings | null }
     return markup ? { uri: svgDataUri(markup, color) } : null;
   }, [svg, color, paint, solid]);
   const style = useMemo(() => ({ width: size, height: size }), [size]);
-  if (!source) return <Icon name={BUILT_IN_ICON} size={size} color={paint ?? color} />;
+  if (!source) return <Icon name={icon?.menu ?? BUILT_IN_ICON} size={size} color={paint ?? color} />;
   return <Image source={source} style={style} resizeMode="contain" accessibilityIgnoresInvertColors />;
 }
 
 /** The plugin icon from the saved settings. The built-in icon shows while they load. */
 export function PluginIcon(props: PluginIconProps) {
-  const settings = useSettings(linearSettings);
-  const icon = settings.status === "ready" ? settings.values.icon : null;
-  return <IconGlyph {...props} icon={icon} />;
+  return <IconGlyph {...props} icon={useIconSettings()} />;
 }

package/client/settings-icon.tsx

@@ -8,6 +8,7 @@ import {
   SettingsSelect,
   SettingsSwitch,
 } from "@getpaseo/plugin/client/ui";
+import { Icon } from "@getpaseo/plugin/client/react-native";
 import { useCallback, useMemo, useState } from "react";
 import { Platform, Text, View } from "react-native";
 import {
@@ -15,10 +16,11 @@ import {
   type IconPaint,
   type IconSettings,
   MAX_SVG_LENGTH,
+  MENU_ICONS,
   parseIconSvg,
 } from "../shared/custom-icon";
 import { linearSettings } from "../shared/settings";
-import { IconGlyph } from "./plugin-icon";
+import { IconGlyph, useIconSettings } from "./plugin-icon";
 import { MultilineField, type ReadySettings, SaveBar, SettingsGate, useSettingsDraft } from "./settings-fields";
 import type { Theme } from "./ui";
 import { canPickFiles, pickTextFile } from "./web";
@@ -37,6 +39,7 @@ const MAX_FILE_BYTES = MAX_SVG_LENGTH * 4;
 
 export function IconSettingsScreen({ theme }: PluginSurfaceProps) {
   const settings = useSettings(linearSettings);
+  useIconSettings();
   const render = useCallback(
     (ready: ReadySettings) => <IconEditor theme={theme} settings={ready} />,
     [theme],
@@ -85,6 +88,33 @@ function IconPreview({ theme, icon }: { theme: Theme; icon: IconSettings }) {
   );
 }
 
+function MenuPreview({ theme, name }: { theme: Theme; name: string }) {
+  const { colors } = theme;
+  const styles = useMemo(
+    () => ({
+      tab: {
+        flexDirection: "row" as const,
+        alignSelf: "flex-start" as const,
+        alignItems: "center" as const,
+        gap: 6,
+        marginTop: 8,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 6,
+        backgroundColor: colors.surface2,
+      },
+      label: { color: colors.foreground, fontSize: 12 },
+    }),
+    [colors],
+  );
+  return (
+    <View style={styles.tab}>
+      <Icon name={name} size={14} color={colors.foregroundMuted} />
+      <Text style={styles.label}>Linear</Text>
+    </View>
+  );
+}
+
 function IconEditor({ theme, settings }: { theme: Theme; settings: ReadySettings }) {
   const { values, dirty, edit, save, discard } = useSettingsDraft(settings);
   const icon = values.icon;
@@ -123,7 +153,7 @@ function IconEditor({ theme, settings }: { theme: Theme; settings: ReadySettings
       }),
     [applyMarkup],
   );
-  const useBuiltIn = useCallback(() => {
+  const removeSvg = useCallback(() => {
     setFileName(null);
     applyMarkup("");
   }, [applyMarkup]);
@@ -145,6 +175,11 @@ function IconEditor({ theme, settings }: { theme: Theme; settings: ReadySettings
   }, [discard, settings.values.icon.svg]);
   const native = Platform.OS !== "web";
   const custom = icon.svg !== "";
+  const menuOptions = useMemo(() => {
+    const options = MENU_ICONS.map((entry) => ({ label: entry.label, value: entry.name }));
+    if (!options.some((option) => option.value === icon.menu)) options.push({ label: icon.menu, value: icon.menu });
+    return options;
+  }, [icon.menu]);
 
   return (
     <View>
@@ -155,7 +190,7 @@ function IconEditor({ theme, settings }: { theme: Theme; settings: ReadySettings
             hint={
               native
                 ? "The iOS and Android apps cannot draw plugin SVG images, so they show the built-in icon in the color you choose."
-                : "Composer pills, the Linear sidebar row, and Linear screens use this icon. Paseo menus and panel tabs keep the built-in icon."
+                : "Composer pills, the Linear sidebar row, and Linear screens use this icon. Panel tabs and menus use the built-in icon below."
             }
           >
             <IconPreview theme={theme} icon={icon} />
@@ -179,11 +214,11 @@ function IconEditor({ theme, settings }: { theme: Theme; settings: ReadySettings
             onChange={applyMarkup}
           />
           <SettingsAction
-            label="Built-in icon"
-            hint="Remove your SVG and use the Linear board icon."
-            actionLabel="Use built-in"
+            label="Remove SVG"
+            hint="Use the built-in icon everywhere."
+            actionLabel="Remove"
             disabled={!custom && markup === ""}
-            onPress={useBuiltIn}
+            onPress={removeSvg}
           />
         </SettingsCard>
       </SettingsSection>
@@ -208,13 +243,27 @@ function IconEditor({ theme, settings }: { theme: Theme; settings: ReadySettings
           ) : null}
           <SettingsSwitch
             label="Solid"
-            hint={custom ? "Fill shapes that only have an outline, so line icons show as solid shapes." : "Add your SVG to use this. The built-in icon stays as drawn."}
+            hint={custom ? "Fill shapes that only have an outline, so line icons show as solid shapes." : "Add an SVG to use this. Built-in icons stay as drawn."}
             value={icon.solid}
             disabled={!custom}
             onValueChange={(solid) => change({ solid })}
           />
         </SettingsCard>
       </SettingsSection>
+      <SettingsSection title="Built-in icon">
+        <SettingsCard>
+          <SettingsSelect
+            label="Built-in icon"
+            hint="Panel tabs, the new tab menu, and Command Center take built-in icons only, so they use this one. Without an SVG, every place uses it. Tabs that are open change when you reload Paseo or open them again."
+            value={icon.menu}
+            options={menuOptions}
+            onValueChange={(menu) => change({ menu })}
+          />
+          <SettingsRow label="Tab preview">
+            <MenuPreview theme={theme} name={icon.menu} />
+          </SettingsRow>
+        </SettingsCard>
+      </SettingsSection>
       <SaveBar
         theme={theme}
         dirty={dirty}

package/client/web.ts

@@ -3,6 +3,7 @@ import { Platform } from "react-native";
 // The only module that uses the DOM. React wheel listeners are passive, so they cannot keep
 // the page from scrolling while the wheel zooms the graph. Off the web each export does nothing.
 // The file picker is a hidden file input, because plugins cannot use native document pickers.
+// Local storage keeps small values for the next start; it can be missing or blocked.
 
 interface WheelEventLike {
   deltaY: number;
@@ -89,3 +90,34 @@ export function pickTextFile(accept: string, maxBytes: number, onPick: (file: Pi
   };
   input.click();
 }
+
+interface StorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+function storage(): StorageLike | null {
+  if (Platform.OS !== "web") return null;
+  try {
+    return (globalThis as { localStorage?: StorageLike }).localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** A value saved on this device, or null off the web or when storage is blocked. */
+export function readStored(key: string): string | null {
+  try {
+    return storage()?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function writeStored(key: string, value: string): void {
+  try {
+    storage()?.setItem(key, value);
+  } catch {
+    // Blocked storage only means the next start uses the built-in icon first.
+  }
+}

package/index.client.tsx

@@ -4,7 +4,7 @@ import { openPluginScreen, registerScreen } from "./client/compat";
 import { gateAgentPanel } from "./client/access";
 import { LivePanel } from "./client/live-panel";
 import { contributeComposerPills } from "./client/pill";
-import { PluginIcon } from "./client/plugin-icon";
+import { onMenuIconChange, PluginIcon, startMenuIcon } from "./client/plugin-icon";
 import { ConnectionSettings } from "./client/settings-connection";
 import { IconSettingsScreen } from "./client/settings-icon";
 import { LiveSettings } from "./client/settings-live";
@@ -12,6 +12,7 @@ import { ProjectSettings } from "./client/settings-projects";
 import { PromptSettings } from "./client/settings-prompts";
 import { focusIssue, panelScope, SCREEN_SCOPE, updateBrowser } from "./client/store";
 import { IssueCardRow } from "./client/timeline-card";
+import { BUILT_IN_ICON } from "./shared/custom-icon";
 import { issueAttachments } from "./shared/issues";
 import { ISSUE_CARD_KIND, IssueCardSchema, LINEAR_IDENTIFIER } from "./shared/linear";
 
@@ -19,23 +20,140 @@ const SCREEN_ID = "linear";
 const PANEL_ID = "issues";
 const LIVE_PANEL_ID = "live";
 
+type Cleanup = () => void;
+
+// Panels and Command Center items take the menu icon when they register, so a new choice
+// registers the whole group again. One group keeps their order the same.
+function contributeMenus(client: PluginClientContext, icon: string): Cleanup {
+  const cleanups: Cleanup[] = [];
+  const removeAll = () => {
+    for (const cleanup of cleanups.splice(0).reverse()) cleanup();
+  };
+  try {
+    cleanups.push(
+      client.addWorkspacePanel({
+        id: PANEL_ID,
+        title: "Linear",
+        icon,
+        context: "workspace",
+        locations: ["workspace", "explorer"],
+        Component: LinearPanel,
+      }),
+      client.addWorkspacePanel({
+        id: LIVE_PANEL_ID,
+        title: "Linear Live",
+        icon: "Radar",
+        context: "agent",
+        Component: gateAgentPanel(LivePanel),
+      }),
+      client.addCommandCenterItem({
+        id: "open-issues",
+        title: "Linear: Open issues",
+        icon,
+        keywords: ["linear", "issues", "tickets"],
+        context: "global",
+        onSelect(context) {
+          openPluginScreen(context, SCREEN_ID);
+        },
+      }),
+      client.addCommandCenterItem({
+        id: "create-issue",
+        title: "Linear: Create issue",
+        icon: "Plus",
+        keywords: ["linear", "new", "ticket"],
+        context: "global",
+        onSelect(context) {
+          updateBrowser(SCREEN_SCOPE, { creating: true });
+          openPluginScreen(context, SCREEN_ID);
+        },
+      }),
+      client.addCommandCenterItem({
+        id: "workspace-issues",
+        title: "Linear: Show issues in this workspace",
+        icon,
+        keywords: ["linear", "panel"],
+        context: "workspace",
+        onSelect({ openPanel }) {
+          openPanel(PANEL_ID);
+        },
+      }),
+      client.addCommandCenterItem({
+        id: "open-live",
+        title: "Linear: Open Linear Live",
+        icon: "Radar",
+        keywords: ["linear", "live", "progress", "map"],
+        context: "agent",
+        onSelect({ openPanel }) {
+          openPanel(LIVE_PANEL_ID);
+        },
+      }),
+      client.addCommandCenterItem({
+        id: "setup-project",
+        title: "Linear: Set up project prompts",
+        icon: "Sparkles",
+        keywords: ["linear", "init", "setup", "agents.md", "guidelines"],
+        context: "global",
+        onSelect({ openSettings }) {
+          openSettings("projects");
+        },
+      }),
+      client.addCommandCenterItem({
+        id: "settings",
+        title: "Linear: Settings",
+        icon: "Settings",
+        keywords: ["linear", "api key", "prompts", "projects"],
+        context: "global",
+        onSelect({ openSettings }) {
+          openSettings("connection");
+        },
+      }),
+    );
+  } catch (error) {
+    removeAll();
+    throw error;
+  }
+  return removeAll;
+}
+
+/** Registers the menus with the chosen icon, and again when it changes. */
+function contributeMenusWithIcon(client: PluginClientContext): Cleanup {
+  let icon = startMenuIcon();
+  let removeMenus: Cleanup;
+  try {
+    removeMenus = contributeMenus(client, icon);
+  } catch (error) {
+    console.error("Linear menu icon", error);
+    icon = BUILT_IN_ICON;
+    removeMenus = contributeMenus(client, icon);
+  }
+  const stop = onMenuIconChange((next) => {
+    if (next === icon) return;
+    removeMenus();
+    try {
+      removeMenus = contributeMenus(client, next);
+      icon = next;
+    } catch (error) {
+      // An icon this Paseo does not have: keep the built-in one.
+      console.error("Linear menu icon", error);
+      removeMenus = contributeMenus(client, BUILT_IN_ICON);
+      icon = BUILT_IN_ICON;
+    }
+  });
+  return () => {
+    stop();
+    removeMenus();
+  };
+}
+
 export default function contribute(client: PluginClientContext) {
   client.addAttachmentSource(issueAttachments);
   registerScreen(client, {
     id: SCREEN_ID,
     title: "Linear",
-    icon: "SquareKanban",
+    icon: BUILT_IN_ICON,
     RowIcon: PluginIcon,
     Component: LinearScreen,
   });
-  client.addWorkspacePanel({
-    id: PANEL_ID,
-    title: "Linear",
-    icon: "SquareKanban",
-    context: "workspace",
-    locations: ["workspace", "explorer"],
-    Component: LinearPanel,
-  });
   client.addSettingsScreen({
     id: "connection",
     title: "Account",
@@ -48,13 +166,6 @@ export default function contribute(client: PluginClientContext) {
     icon: "MessageSquare",
     Component: PromptSettings,
   });
-  client.addWorkspacePanel({
-    id: LIVE_PANEL_ID,
-    title: "Linear Live",
-    icon: "Radar",
-    context: "agent",
-    Component: gateAgentPanel(LivePanel),
-  });
   client.addSettingsScreen({
     id: "live",
     title: "Live",
@@ -73,67 +184,7 @@ export default function contribute(client: PluginClientContext) {
     icon: "FolderGit2",
     Component: ProjectSettings,
   });
-  client.addCommandCenterItem({
-    id: "open-issues",
-    title: "Linear: Open issues",
-    icon: "SquareKanban",
-    keywords: ["linear", "issues", "tickets"],
-    context: "global",
-    onSelect(context) {
-      openPluginScreen(context, SCREEN_ID);
-    },
-  });
-  client.addCommandCenterItem({
-    id: "create-issue",
-    title: "Linear: Create issue",
-    icon: "Plus",
-    keywords: ["linear", "new", "ticket"],
-    context: "global",
-    onSelect(context) {
-      updateBrowser(SCREEN_SCOPE, { creating: true });
-      openPluginScreen(context, SCREEN_ID);
-    },
-  });
-  client.addCommandCenterItem({
-    id: "workspace-issues",
-    title: "Linear: Show issues in this workspace",
-    icon: "SquareKanban",
-    keywords: ["linear", "panel"],
-    context: "workspace",
-    onSelect({ openPanel }) {
-      openPanel(PANEL_ID);
-    },
-  });
-  client.addCommandCenterItem({
-    id: "open-live",
-    title: "Linear: Open Linear Live",
-    icon: "Radar",
-    keywords: ["linear", "live", "progress", "map"],
-    context: "agent",
-    onSelect({ openPanel }) {
-      openPanel(LIVE_PANEL_ID);
-    },
-  });
-  client.addCommandCenterItem({
-    id: "setup-project",
-    title: "Linear: Set up project prompts",
-    icon: "Sparkles",
-    keywords: ["linear", "init", "setup", "agents.md", "guidelines"],
-    context: "global",
-    onSelect({ openSettings }) {
-      openSettings("projects");
-    },
-  });
-  client.addCommandCenterItem({
-    id: "settings",
-    title: "Linear: Settings",
-    icon: "Settings",
-    keywords: ["linear", "api key", "prompts", "projects"],
-    context: "global",
-    onSelect({ openSettings }) {
-      openSettings("connection");
-    },
-  });
+  const removeMenus = contributeMenusWithIcon(client);
   client.addSlashCommand({
     name: "linear",
     description: "Open Linear issues, or jump to one by key",
@@ -154,5 +205,9 @@ export default function contribute(client: PluginClientContext) {
     schema: IssueCardSchema,
     Component: IssueCardRow,
   });
-  return contributeComposerPills(client);
+  const removePills = contributeComposerPills(client);
+  return () => {
+    removeMenus();
+    removePills();
+  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yannelli/paseo-linear-plugin",
-  "version": "1.1.0-beta.3",
+  "version": "1.1.0-beta.4",
   "description": "Browse and triage Linear issues in Paseo and start agents from them",
   "license": "Apache-2.0",
   "type": "module",

package/shared/custom-icon.ts

@@ -12,6 +12,44 @@ export const LINEAR_INDIGO = "#5E6AD2";
 export const MAX_SVG_LENGTH = 64_000;
 export const HEX_COLOR = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
 
+/** Paseo draws panel tabs, the new tab menu, and Command Center with Lucide names only. */
+export const BUILT_IN_ICON = "SquareKanban";
+export const MENU_ICONS: readonly { name: string; label: string }[] = [
+  { name: BUILT_IN_ICON, label: "Board (default)" },
+  ...[
+    ["Kanban", "Kanban"],
+    ["LayoutGrid", "Grid"],
+    ["ListTodo", "To-do list"],
+    ["ClipboardList", "Clipboard"],
+    ["CircleDot", "Circle dot"],
+    ["Target", "Target"],
+    ["Zap", "Lightning"],
+    ["Rocket", "Rocket"],
+    ["Star", "Star"],
+    ["Hexagon", "Hexagon"],
+    ["Triangle", "Triangle"],
+    ["Diamond", "Diamond"],
+    ["Box", "Box"],
+    ["Layers", "Layers"],
+    ["Compass", "Compass"],
+    ["Flag", "Flag"],
+    ["Bookmark", "Bookmark"],
+    ["Ticket", "Ticket"],
+    ["Bug", "Bug"],
+    ["Sparkles", "Sparkles"],
+    ["Bot", "Bot"],
+    ["Gem", "Gem"],
+    ["Flame", "Flame"],
+    ["Shapes", "Shapes"],
+    ["Orbit", "Orbit"],
+    ["Workflow", "Workflow"],
+    ["Puzzle", "Puzzle"],
+    ["Atom", "Atom"],
+    ["Command", "Command"],
+  ].map(([name = "", label = ""]) => ({ name, label })),
+];
+const LUCIDE_NAME = /^[A-Z][A-Za-z0-9]*$/;
+
 export const IconSettingsSchema = z.object({
   /** Checked SVG markup. Empty uses the built-in icon. */
   svg: z.string().max(MAX_SVG_LENGTH).default(""),
@@ -20,6 +58,8 @@ export const IconSettingsSchema = z.object({
   color: z.string().regex(HEX_COLOR).default(LINEAR_INDIGO),
   /** Fill shapes that only have an outline. */
   solid: z.boolean().default(false),
+  /** The Lucide icon for panel tabs, the new tab menu, and Command Center. */
+  menu: z.string().regex(LUCIDE_NAME).default(BUILT_IN_ICON),
 });
 export type IconSettings = z.infer<typeof IconSettingsSchema>;
 

package/shared/graph-camera.ts

@@ -17,6 +17,11 @@ export interface Box {
   bottom: number;
 }
 
+/** A box with the point the view centers on when the box still fits around it. */
+export interface Focus extends Box {
+  center: Point;
+}
+
 export const FIT: Camera = { x: 0, y: 0, zoom: 1 };
 export const MIN_ZOOM = 1;
 export const MAX_ZOOM = 4;
@@ -27,6 +32,11 @@ const PAD_Y = 56;
 
 const clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));
 
+/** How much nodes, labels, and cursors grow on screen: less than the zoom, so they stay readable. */
+export function growth(zoom: number): number {
+  return Math.sqrt(zoom);
+}
+
 /** Where a canvas point draws in the view. */
 export function project(camera: Camera, at: Point, width: number, height: number): Point {
   return {
@@ -61,21 +71,31 @@ export function zoomAt(camera: Camera, at: Point, factor: number, width: number,
   return clampCamera({ zoom, x: at.x - cx - zoom * (px - cx), y: at.y - cy - zoom * (py - cy) }, width, height);
 }
 
-/** Shows the box as large as fits in the view, up to the auto zoom. */
-export function frameBox(box: Box, width: number, height: number): Camera {
+/** The center nearest `wanted` that keeps the span from low to high in a view of this size. */
+function centerFor(wanted: number, low: number, high: number, half: number): number {
+  return high - low >= half * 2 ? (low + high) / 2 : clamp(wanted, high - half, low + half);
+}
+
+/** Shows the box as large as fits in the view, up to the auto zoom, centered on its focus. */
+export function frameBox(box: Box | Focus, width: number, height: number): Camera {
   const fit = Math.min(width / Math.max(1, box.right - box.left), height / Math.max(1, box.bottom - box.top));
   const zoom = clamp(fit, MIN_ZOOM, AUTO_ZOOM);
-  const x = zoom * (width / 2 - (box.left + box.right) / 2);
-  const y = zoom * (height / 2 - (box.top + box.bottom) / 2);
-  return clampCamera({ zoom, x, y }, width, height);
+  const wanted = "center" in box ? box.center : { x: (box.left + box.right) / 2, y: (box.top + box.bottom) / 2 };
+  const middleX = centerFor(wanted.x, box.left, box.right, width / 2 / zoom);
+  const middleY = centerFor(wanted.y, box.top, box.bottom, height / 2 / zoom);
+  return clampCamera({ zoom, x: zoom * (width / 2 - middleX), y: zoom * (height / 2 - middleY) }, width, height);
 }
 
 // The area auto mode shows: the nodes the running agents work on and their neighbors, with
 // room for labels and cursors. Null when no agent works on a node other than the issue.
-export function focusBox(graph: Graph, positions: ReadonlyMap<string, Point>, targets: Iterable<string>): Box | null {
+export function focusBox(graph: Graph, positions: ReadonlyMap<string, Point>, targets: Iterable<string>): Focus | null {
   const ids = new Set<string>();
   for (const target of targets) if (target !== graph.root) ids.add(target);
   if (ids.size === 0) return null;
+  const spots = [...ids].flatMap((id) => positions.get(id) ?? []);
+  const center = spots.length
+    ? { x: spots.reduce((sum, at) => sum + at.x, 0) / spots.length, y: spots.reduce((sum, at) => sum + at.y, 0) / spots.length }
+    : null;
   for (const edge of graph.edges) {
     if (ids.has(edge.from) && edge.to !== graph.root) ids.add(edge.to);
     else if (ids.has(edge.to) && edge.from !== graph.root) ids.add(edge.from);
@@ -88,6 +108,6 @@ export function focusBox(graph: Graph, positions: ReadonlyMap<string, Point>, ta
       ? { left: Math.min(box.left, at.x), top: Math.min(box.top, at.y), right: Math.max(box.right, at.x), bottom: Math.max(box.bottom, at.y) }
       : { left: at.x, top: at.y, right: at.x, bottom: at.y };
   }
-  if (!box) return null;
-  return { left: box.left - PAD_X, top: box.top - PAD_Y, right: box.right + PAD_X, bottom: box.bottom + PAD_Y };
+  if (!box || !center) return null;
+  return { left: box.left - PAD_X, top: box.top - PAD_Y, right: box.right + PAD_X, bottom: box.bottom + PAD_Y, center };
 }