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

package/client/live-graph.tsx

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

package/client/live-header.tsx

@@ -10,6 +10,7 @@ import { eventTone, KIND_ICONS } from "./live-feed";
 import { type IssueProgress, MONO, ProgressBar } from "./live-issues";
 import { type LiveMap, NATIVE_DRIVER, type OwnerColors } from "./live-timeline";
 import { ProviderIcon } from "./provider-icon";
+import { ToolButton, ToolGroup } from "./tool-buttons";
 import { Button, StateIcon, type Theme } from "./ui";
 
 type AgentStatus = PluginAgentSnapshot["status"];
@@ -256,6 +257,34 @@ export function MapSource(props: { theme: Theme; live: LiveMap; mapping: Mapping
   );
 }
 
+/** Read the file data again, rebuild the map with the explore agent, or clear the saved map. */
+export function MapActions(props: { theme: Theme; live: LiveMap }) {
+  const { theme, live } = props;
+  const { explore, refresh, clear } = live;
+  const running = live.job?.status === "running";
+  const rebuild = useCallback(() => explore(true), [explore]);
+  return (
+    <ToolGroup theme={theme}>
+      <ToolButton theme={theme} icon="RefreshCw" label="Read files and links again" onPress={refresh} />
+      <ToolButton
+        theme={theme}
+        icon="Sparkles"
+        label={live.stored ? "Rebuild the map with the explore agent" : "Build the map with the explore agent"}
+        busy={live.starting || running}
+        onPress={rebuild}
+      />
+      <ToolButton
+        theme={theme}
+        icon="Eraser"
+        label="Clear the saved map and use the ticket text"
+        disabled={!live.stored || running}
+        busy={live.clearing}
+        onPress={clear}
+      />
+    </ToolGroup>
+  );
+}
+
 export function ViewToggle(props: {
   theme: Theme;
   value: LiveView;

package/client/live-panel.tsx

@@ -6,13 +6,13 @@ import { type LayoutChangeEvent, Text, View } from "react-native";
 import { deriveActivity } from "../shared/activity";
 import type { IssueDetail } from "../shared/linear";
 import { AGENT_LABELS } from "../shared/prompts";
-import { type LinearSettings, type LiveView, linearSettings, type MappingMode } from "../shared/settings";
+import { type GraphCamera, type LinearSettings, type LiveView, linearSettings, type MappingMode } from "../shared/settings";
 import { KeyScopeProvider } from "./key-scope";
 import { buildGraph, graphFiles } from "../shared/graph-model";
 import { AgentsList, cursorAgents, useLiveAgents } from "./live-agents";
 import { ActivityFeed } from "./live-feed";
 import { LiveGraph } from "./live-graph";
-import { LiveHeader, MapSource, ViewToggle } from "./live-header";
+import { LiveHeader, MapActions, MapSource, ViewToggle } from "./live-header";
 import { type FocusKey, IssueRail, issueProgress, SubIssues } from "./live-issues";
 import { MapLegend, RepoMap } from "./live-map";
 import {
@@ -33,6 +33,7 @@ interface AgentInfo {
   identifier: string | null;
   project: string | null;
   cwd: string;
+  workspaceId: string | null;
   status: AgentStatus;
   provider: string;
 }
@@ -41,11 +42,14 @@ const selectAgent = (agent: PluginAgentSnapshot): AgentInfo => ({
   identifier: agent.labels[AGENT_LABELS.issue] ?? null,
   project: agent.labels[AGENT_LABELS.project] ?? null,
   cwd: agent.cwd,
+  workspaceId: agent.workspaceId ?? null,
   status: agent.status,
   provider: agent.provider,
 });
 
-type LivePatch = Partial<Pick<LinearSettings["live"], "view" | "issuesCollapsed">>;
+export type LivePatch = Partial<
+  Pick<LinearSettings["live"], "view" | "issuesCollapsed" | "graphCamera" | "graphLocked">
+>;
 
 const STACK_WIDTH = 760;
 const COLUMN_WIDTH = 330;
@@ -103,6 +107,8 @@ export function LivePanel(props: PluginAgentPanelProps) {
         mapping={live?.mapping ?? "semantic"}
         view={live?.view ?? "map"}
         issuesCollapsed={live?.issuesCollapsed ?? false}
+        graphCamera={live?.graphCamera ?? "auto"}
+        graphLocked={live?.graphLocked ?? false}
         saveLive={saveLive}
         openAgent={props.navigation ? (id) => props.navigation?.openAgent({ agentId: id }) : undefined}
       />
@@ -119,6 +125,8 @@ interface BodyProps {
   mapping: MappingMode;
   view: LiveView;
   issuesCollapsed: boolean;
+  graphCamera: GraphCamera;
+  graphLocked: boolean;
   saveLive(patch: LivePatch): void;
   openAgent?: (agentId: string) => void;
 }
@@ -206,6 +214,7 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
     theme,
     agentId,
     cwd: agent.cwd,
+    workspaceId: agent.workspaceId,
     status: agent.status,
     provider: agent.provider,
     activity,
@@ -249,8 +258,16 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
     [view, graphInput, links.links],
   );
   const cursors = useMemo(
-    () => cursorAgents({ theme, provider: agent.provider, working, activity, children: agents.children }),
-    [theme, agent.provider, working, activity, agents.children],
+    () =>
+      cursorAgents({
+        theme,
+        provider: agent.provider,
+        working,
+        activity,
+        children: agents.children,
+        subagents: agents.subagents,
+      }),
+    [theme, agent.provider, working, activity, agents.children, agents.subagents],
   );
   const owners = useMemo(() => ownerColors(issue, colors.accent), [issue, colors.accent]);
   const progress = useMemo(() => issueProgress(issue, activity.todos), [issue, activity.todos]);
@@ -322,6 +339,7 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
       right={
         <View style={styles.tools}>
           {stacked || view === "graph" ? null : <MapLegend theme={theme} />}
+          <MapActions theme={theme} live={liveMap} />
           {toggle}
         </View>
       }
@@ -346,6 +364,9 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
             agents={cursors}
             focus={focus}
             onFocus={toggleFocus}
+            camera={props.graphCamera}
+            locked={props.graphLocked}
+            saveLive={saveLive}
             reduceMotion={reduceMotion}
           />
         ) : (
@@ -367,14 +388,14 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
     <Card theme={theme} title="Activity">
       <ActivityFeed
         theme={theme}
-        events={activity.events}
+        events={agents.events}
         loading={timeline.loading}
         error={timeline.error}
         reduceMotion={reduceMotion}
       />
     </Card>
   );
-  const helpers = agents.children.length + activity.subagents.length;
+  const helpers = agents.children.length + agents.subagents.length;
   const agentsCard =
     helpers > 0 ? (
       <Card theme={theme} title="Agents" meta={<Text style={styles.hit}>{`${helpers + 1}`}</Text>}>
@@ -384,7 +405,7 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
           status={agent.status}
           current={activity.current}
           childAgents={agents.children}
-          subagents={activity.subagents}
+          subagents={agents.subagents}
           onOpenAgent={props.openAgent}
         />
       </Card>

package/client/live-timeline.ts

@@ -1,17 +1,20 @@
 import { usePaseo, useRpc } from "@getpaseo/plugin/client";
-import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
-import { useEffect, useMemo, useState } from "react";
+import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { AccessibilityInfo, Platform } from "react-native";
 import type { DirTouch, FileTouch, TimelineItemLike } from "../shared/activity";
 import type { IssueDetail } from "../shared/linear";
 import type { FileLink } from "../shared/links";
 import {
+  clearMapRpc,
   exploreRpc,
   type IssueMap,
   type Job,
   listFilesRpc,
   linksRpc,
   liveMapRpc,
+  type SubagentLog,
+  subagentLogsRpc,
   MAX_LINK_FILES,
   MAX_LIST_DIRS,
   type MapFile,
@@ -244,6 +247,11 @@ export interface LiveMap {
   starting: boolean;
   error: string | null;
   explore(force: boolean): void;
+  /** Reads the map, folder listings, links, and subagents again. */
+  refresh(): void;
+  /** Forgets the saved explore map; the map falls back to the ticket text. */
+  clear(): void;
+  clearing: boolean;
 }
 
 export function useLiveMap(
@@ -270,9 +278,13 @@ export function useLiveMap(
     onSettled: () => void refetch(),
   });
   const { mutate } = explore;
+  const queries = useQueryClient();
+  const refresh = useCallback(() => void queries.invalidateQueries({ queryKey: ["linear", "live"] }), [queries]);
+  const clearMap = useRpc(clearMapRpc);
+  const clear = useMutation({ mutationFn: () => clearMap({ agentId }), onSettled: refresh });
   const fallback = useMemo(() => semanticMap(issue), [issue]);
   const stored = query.data?.map ?? null;
-  const failure = explore.error ?? query.error;
+  const failure = explore.error ?? clear.error ?? query.error;
   return {
     map: stored ?? fallback,
     stored: stored !== null,
@@ -281,6 +293,9 @@ export function useLiveMap(
     starting: explore.isPending,
     error: failure ? errorMessage(failure) : null,
     explore: mutate,
+    refresh,
+    clear: clear.mutate as () => void,
+    clearing: clear.isPending,
   };
 }
 
@@ -339,3 +354,23 @@ export function useFileLinks(
     ready: sorted.length === 0 || query.data !== undefined || query.isError,
   };
 }
+
+const NO_RUNS: readonly SubagentLog[] = [];
+
+/** Tool calls of the agent's subagents, read again every few seconds while the agent works. */
+export function useSubagentLogs(
+  agentId: string,
+  enabled: boolean,
+  polling: boolean,
+): { runs: readonly SubagentLog[]; checkedAt: number } {
+  const read = useRpc(subagentLogsRpc);
+  const query = useQuery({
+    queryKey: ["linear", "live", "subagents", agentId],
+    queryFn: () => read({ agentId }),
+    enabled,
+    refetchInterval: polling ? 3_000 : false,
+    placeholderData: keepPreviousData,
+    staleTime: 2_000,
+  });
+  return { runs: query.data?.runs ?? NO_RUNS, checkedAt: query.dataUpdatedAt };
+}

package/client/pill.tsx

@@ -17,6 +17,7 @@ import { progressByKey } from "../shared/todo-sync";
 import { currentAccess, onAccessChange, publishAccess } from "./access";
 import { KeyScopeProvider } from "./key-scope";
 import { MONO } from "./live-issues";
+import { PluginIcon } from "./plugin-icon";
 import { useIssue } from "./queries";
 import { focusIssue, panelScope } from "./store";
 import { Button, errorMessage, StateIcon, type Theme } from "./ui";
@@ -144,7 +145,7 @@ function LinkedIssue(props: ContentProps & { open: Open }) {
         <Button
           theme={theme}
           size="xs"
-          icon="SquareKanban"
+          icon={PluginIcon}
           label="Open issue"
           onPress={() => {
             focusIssue(panelScope(workspaceId), identifier);
@@ -337,13 +338,13 @@ export function contributeComposerPills(client: PluginClientContext) {
       button: identifier
         ? {
             title: `Linear issue ${identifier}`,
-            icon: "SquareKanban",
+            icon: PluginIcon,
             label: identifier,
             behavior: { kind: "popover", Content: Linked },
           }
         : {
             title: "Send a Linear issue to this agent",
-            icon: "SquareKanban",
+            icon: PluginIcon,
             label: "Linear",
             behavior: { kind: "popover", Content: Search },
           },

package/client/plugin-icon.tsx

@@ -0,0 +1,43 @@
+import { useSettings } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useMemo } from "react";
+import { Image, Platform } from "react-native";
+import { type IconSettings, iconMarkup, paintColor } from "../shared/custom-icon";
+import { linearSettings } from "../shared/settings";
+import { svgDataUri } from "./provider-icon";
+import type { Theme } from "./ui";
+
+// 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.
+
+export const BUILT_IN_ICON = "SquareKanban";
+
+export interface PluginIconProps {
+  size: number;
+  /** The color Paseo gives the icon in this place. */
+  color: string;
+  theme?: Theme | null;
+}
+
+/** Draws icon settings, saved or not yet saved. */
+export function IconGlyph(props: PluginIconProps & { icon: IconSettings | null }) {
+  const { icon, size, color } = props;
+  const accent = props.theme?.colors.accent ?? color;
+  const paint = icon ? paintColor(icon, { ink: color, accent }) : null;
+  const svg = Platform.OS === "web" ? (icon?.svg ?? "") : "";
+  const solid = icon?.solid === true;
+  const source = useMemo(() => {
+    const markup = svg ? iconMarkup(svg, { ink: color, paint, solid }) : 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} />;
+  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} />;
+}