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

package/client/live-graph.tsx

@@ -1,14 +1,15 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, type LayoutChangeEvent, Pressable, StyleSheet, Text, View } from "react-native";
-import { focusBox, project, unproject } from "../shared/graph-camera";
+import { focusBox, growth, project, unproject } from "../shared/graph-camera";
 import type { Placed, Point } from "../shared/graph-geometry";
 import { focusNode, type Graph, type GraphEdge, type GraphNode, graphKey, layoutGraph } from "../shared/graph-model";
+import { type AreaRef, whereLabel } from "../shared/knowledge";
 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 { AgentCursor, captionFlips, type Hover } from "./live-cursor";
 import { type IssueProgress, MONO } from "./live-issues";
 import type { LivePatch } from "./live-panel";
 import { NATIVE_DRIVER, type OwnerColors } from "./live-timeline";
@@ -29,6 +30,8 @@ export interface GraphViewProps {
   progress: IssueProgress;
   owners: OwnerColors;
   agents: readonly CursorAgent[];
+  /** Areas of the project, to say where an off-map file is. */
+  areas: readonly AreaRef[];
   focus: string | null;
   onFocus(key: string): void;
   /** Saved camera mode: follow the running agents, or show the whole graph. */
@@ -38,9 +41,11 @@ export interface GraphViewProps {
   reduceMotion: boolean;
 }
 
-type Inverse = Animated.AnimatedInterpolation<number>;
+type ItemScale = Animated.AnimatedInterpolation<number>;
 /** About half the height of a folder name, which scales around its middle. */
 const FOLDER_HALF = 7;
+/** The camera buttons in the top right corner, with a margin; labels stay out of it. */
+const TOOLBAR = { width: 160, height: 44 };
 
 interface EdgeStyle {
   color: string;
@@ -52,7 +57,7 @@ interface EdgeProps {
   from: Point;
   to: Point;
   style: EdgeStyle;
-  inverse: Inverse;
+  itemScale: ItemScale;
 }
 
 const EdgeLine = memo(function EdgeLine(props: EdgeProps) {
@@ -68,15 +73,15 @@ const EdgeLine = memo(function EdgeLine(props: EdgeProps) {
     borderRadius: style.thickness / 2,
     backgroundColor: style.color,
     opacity: style.opacity,
-    // Rotate first, so the inverse zoom thins the line and leaves its length to the camera.
-    transform: [{ rotate: `${angle}rad` }, { scaleY: props.inverse }],
+    // Rotate first, so the item scale sets the thickness and leaves the length to the camera.
+    transform: [{ rotate: `${angle}rad` }, { scaleY: props.itemScale }],
   } as const;
   return <Animated.View pointerEvents="none" style={line} />;
 }, sameEdge);
 
 function sameEdge(a: EdgeProps, b: EdgeProps) {
   return (
-    a.inverse === b.inverse &&
+    a.itemScale === b.itemScale &&
     a.from === b.from &&
     a.to === b.to &&
     a.style.color === b.style.color &&
@@ -96,7 +101,7 @@ interface NodeProps {
   /** An agent is working on it. */
   current: boolean;
   label: Label | null;
-  inverse: Inverse;
+  itemScale: ItemScale;
   reduce: boolean;
   onPress(id: string): void;
 }
@@ -117,7 +122,7 @@ function sameNode(a: NodeProps, b: NodeProps): boolean {
     a.label?.lines[0] === b.label?.lines[0] &&
     a.label?.lines[1] === b.label?.lines[1] &&
     a.theme === b.theme &&
-    a.inverse === b.inverse &&
+    a.itemScale === b.itemScale &&
     a.reduce === b.reduce &&
     a.onPress === b.onPress &&
     x.id === y.id &&
@@ -165,7 +170,7 @@ const GraphNodeView = memo(function GraphNodeView(props: NodeProps) {
         width: size,
         height: size,
         opacity: props.dim ? 0.22 : 1,
-        transform: [{ scale: props.inverse }],
+        transform: [{ scale: props.itemScale }],
       },
       shape: {
         width: size,
@@ -197,7 +202,7 @@ const GraphNodeView = memo(function GraphNodeView(props: NodeProps) {
       },
       second: { color: colors.foregroundMuted, fontSize: 10, textAlign: align },
     } as const;
-  }, [node, size, at, color, colors, touched, label, props.dim, props.selected, props.current, props.inverse, enter, beat]);
+  }, [node, size, at, color, colors, touched, label, props.dim, props.selected, props.current, props.itemScale, enter, beat]);
   const press = useCallback(() => props.onPress(node.id), [props.onPress, node.id]);
   return (
     <Animated.View style={styles.wrap} pointerEvents="box-none">
@@ -223,7 +228,7 @@ const GraphNodeView = memo(function GraphNodeView(props: NodeProps) {
   );
 }, sameNode);
 
-function caption(node: GraphNode, issue: IssueDetail, graph: Graph): string {
+function caption(node: GraphNode, issue: IssueDetail, graph: Graph, areas: readonly AreaRef[]): string {
   if (node.kind === "issue") return `${issue.identifier} · ${issue.title}`;
   if (node.kind === "subissue") {
     const child = issue.children.find((entry) => entry.identifier.toUpperCase() === node.label);
@@ -231,7 +236,7 @@ function caption(node: GraphNode, issue: IssueDetail, graph: Graph): string {
     return `${node.label} · ${child?.state.name ?? ""} · ${child?.title ?? ""}${folded}`;
   }
   const tile = node.tile;
-  const where = tile?.onMap ? `on the map for ${node.owner}` : "not on the map";
+  const where = tile?.onMap ? `on the map for ${node.owner}` : `not on the map, in ${whereLabel(node.path ?? "", areas)}`;
   const touch = !tile || tile.touch === "none" ? "not touched yet" : tile.touch;
   const lines = tile && (tile.added > 0 || tile.removed > 0) ? ` · +${tile.added} -${tile.removed}` : "";
   const linked = graph.edges.filter((edge) => edge.kind !== "owns" && (edge.from === node.id || edge.to === node.id)).length;
@@ -325,11 +330,11 @@ export function LiveGraph(props: GraphViewProps) {
       targets.map(({ agent, target }) => {
         const slot = seen.get(target) ?? 0;
         seen.set(target, slot + 1);
-        const hover = (id: string): Point | null => {
+        const hover = (id: string): Hover | null => {
           const at = positions.get(id);
           const node = byId.get(id);
           if (!at || !node) return null;
-          return { x: at.x + slot * 30, y: at.y - nodeSize(node) / 2 - HOVER_GAP };
+          return { x: at.x, y: at.y, dx: slot * 30, dy: -nodeSize(node) / 2 - HOVER_GAP };
         };
         return [agent.id, hover] as const;
       }),
@@ -341,9 +346,9 @@ export function LiveGraph(props: GraphViewProps) {
         const at = hovers.get(agent.id)?.(target);
         if (!at) return [];
         const text = agent.caption ?? (agent.kind === "child" ? agent.label : null);
-        return [{ at, caption: captionWidth(text), flip: at.x > width - CAPTION_ROOM }];
+        return [{ at, caption: captionWidth(text) }];
       }),
-    [targets, hovers, width],
+    [targets, hovers],
   );
   const { saveLive } = props;
   const [auto, setAuto] = useState(props.camera === "auto");
@@ -362,18 +367,40 @@ export function LiveGraph(props: GraphViewProps) {
   }, [locked, saveLive]);
   const box = useMemo(() => focusBox(graph, positions, working), [graph, positions, working]);
   const camera = useGraphCamera({ width, height, focus: box, auto, locked, reduce: props.reduceMotion, onManual: stopAuto });
-  // Labels are placed in the view of the settled camera, then moved back onto the canvas.
+  // Labels are placed in the view of the settled camera, in units of the grown items so their
+  // sizes hold, then moved back onto the canvas.
   const view = camera.settled;
   const labels = useMemo(() => {
-    if (view.zoom === 1) return graphLabels({ graph, positions, issue, progress, selected, working, cursors, width, height });
-    const toView = (at: Point) => project(view, at, width, height);
+    const grow = growth(view.zoom);
+    const toView = (at: Point) => {
+      const shown = project(view, at, width, height);
+      return { x: shown.x / grow, y: shown.y / grow };
+    };
     const seen = new Map<string, Placed>();
     for (const [id, at] of positions) {
       const shown = toView(at);
-      if (shown.x > -20 && shown.x < width + 20 && shown.y > -20 && shown.y < height + 20) seen.set(id, { ...at, ...shown });
+      if (shown.x * grow > -20 && shown.x * grow < width + 20 && shown.y * grow > -20 && shown.y * grow < height + 20) {
+        seen.set(id, { ...at, ...shown });
+      }
     }
-    const viewCursors = cursors.map((cursor) => ({ ...cursor, at: toView(cursor.at) }));
-    const placed = graphLabels({ graph, positions: seen, issue, progress, selected, working, cursors: viewCursors, width, height, every: view.zoom >= 1.5 });
+    const viewCursors = cursors.map(({ at, caption }) => {
+      const middle = toView(at);
+      return { at: { x: middle.x + at.dx, y: middle.y + at.dy }, caption, flip: captionFlips(at, view, width, height) };
+    });
+    const toolbar = { left: (width - TOOLBAR.width) / grow, top: 0, right: width / grow, bottom: TOOLBAR.height / grow };
+    const placed = graphLabels({
+      graph,
+      positions: seen,
+      issue,
+      progress,
+      selected,
+      working,
+      cursors: viewCursors,
+      width: width / grow,
+      height: height / grow,
+      every: view.zoom >= 1.5,
+      blocked: [toolbar],
+    });
     const nodes = new Map<string, Label>();
     for (const [id, label] of placed.nodes) {
       const at = positions.get(id);
@@ -381,7 +408,8 @@ export function LiveGraph(props: GraphViewProps) {
       if (at && shown) nodes.set(id, { ...label, left: label.left + at.x - shown.x, top: label.top + at.y - shown.y });
     }
     const folders = placed.folders.map((folder) => {
-      const middle = unproject(view, { x: folder.left + folder.width / 2, y: folder.top + FOLDER_HALF }, width, height);
+      const shown = { x: (folder.left + folder.width / 2) * grow, y: (folder.top + FOLDER_HALF) * grow };
+      const middle = unproject(view, shown, width, height);
       return { ...folder, left: middle.x - folder.width / 2, top: middle.y - FOLDER_HALF };
     });
     return { nodes, folders };
@@ -426,7 +454,7 @@ export function LiveGraph(props: GraphViewProps) {
                 const from = positions.get(edge.from);
                 const to = positions.get(edge.to);
                 if (!from || !to) return null;
-                return <EdgeLine key={edge.id} from={from} to={to} style={edgeStyle(edge)} inverse={camera.inverse} />;
+                return <EdgeLine key={edge.id} from={from} to={to} style={edgeStyle(edge)} itemScale={camera.itemScale} />;
               })
             : null}
           {shown
@@ -437,7 +465,7 @@ export function LiveGraph(props: GraphViewProps) {
                   numberOfLines={1}
                   style={[
                     styles.folder,
-                    { left: folder.left, top: folder.top, width: folder.width, transform: [{ scale: camera.inverse }] },
+                    { left: folder.left, top: folder.top, width: folder.width, transform: [{ scale: camera.itemScale }] },
                   ]}
                 >
                   {folder.folder === "." ? "/" : `${folder.folder}/`}
@@ -460,7 +488,7 @@ export function LiveGraph(props: GraphViewProps) {
                     selected={selected === node.id}
                     current={working.has(node.id)}
                     label={labels.nodes.get(node.id) ?? null}
-                    inverse={camera.inverse}
+                    itemScale={camera.itemScale}
                     reduce={props.reduceMotion}
                     onPress={press}
                   />
@@ -481,7 +509,9 @@ export function LiveGraph(props: GraphViewProps) {
                     layoutKey={layoutKey}
                     hover={hover}
                     width={width}
-                    inverse={camera.inverse}
+                    height={height}
+                    view={view}
+                    itemScale={camera.itemScale}
                     reduce={props.reduceMotion}
                   />
                 );
@@ -507,7 +537,7 @@ export function LiveGraph(props: GraphViewProps) {
       <View style={styles.caption}>
         {selectedNode ? (
           <Text numberOfLines={2} style={styles.captionText}>
-            {caption(selectedNode, issue, graph)}
+            {caption(selectedNode, issue, graph, props.areas)}
           </Text>
         ) : (
           <Text style={styles.hint}>Select a node to see its file or issue.</Text>

package/client/live-header.tsx

@@ -79,7 +79,7 @@ function StatusChip(props: { theme: Theme; status: AgentStatus; provider: string
   );
 }
 
-function NowLine(props: { theme: Theme; event: ActivityEvent; live: boolean }) {
+function NowLine(props: { theme: Theme; event: ActivityEvent; live: boolean; offMap: string | null }) {
   const { theme, event } = props;
   const { colors } = theme;
   const tone = eventTone(theme, event);
@@ -106,6 +106,18 @@ function NowLine(props: { theme: Theme; event: ActivityEvent; live: boolean }) {
         tint: { ...StyleSheet.absoluteFillObject, borderRadius: 6, backgroundColor: tone, opacity: 0.14 },
         text: { color: props.live ? colors.foreground : colors.foregroundMuted, fontSize: 13 },
         detail: { flex: 1, color: colors.foregroundMuted, fontFamily: MONO, fontSize: 11 },
+        off: {
+          flexShrink: 0,
+          maxWidth: 220,
+          paddingHorizontal: 7,
+          paddingVertical: 2,
+          borderRadius: 6,
+          borderWidth: 1,
+          borderStyle: "dashed",
+          borderColor: colors.statusWarning,
+          color: colors.statusWarning,
+          fontSize: 11,
+        },
       }) as const,
     [colors, tone, props.live],
   );
@@ -124,6 +136,11 @@ function NowLine(props: { theme: Theme; event: ActivityEvent; live: boolean }) {
           {event.detail}
         </Text>
       ) : null}
+      {props.offMap ? (
+        <Text numberOfLines={1} style={styles.off} accessibilityLabel={`Off the map, in ${props.offMap}`}>
+          {`Off the map · ${props.offMap}`}
+        </Text>
+      ) : null}
     </View>
   );
 }
@@ -136,6 +153,8 @@ export function LiveHeader(props: {
   status: AgentStatus;
   provider: string;
   current: ActivityEvent | null;
+  /** Where the current file is when the agent works off the map. */
+  offMap: string | null;
   reduceMotion: boolean;
 }) {
   const { theme, issue, progress, owners } = props;
@@ -204,7 +223,12 @@ export function LiveHeader(props: {
       </View>
       {counts.length > 0 ? <Text style={styles.counts}>{counts.join(" · ")}</Text> : null}
       {props.current ? (
-        <NowLine theme={theme} event={props.current} live={props.status === "running"} />
+        <NowLine
+          theme={theme}
+          event={props.current}
+          live={props.status === "running"}
+          offMap={props.offMap}
+        />
       ) : null}
     </View>
   );

package/client/live-map.tsx

@@ -8,6 +8,7 @@ import {
   type MapZone,
   masonry,
   ZONE_GAP,
+  zoneAreaLabel,
 } from "../shared/map-model";
 import { NATIVE_DRIVER, type OwnerColors } from "./live-timeline";
 import type { AgentMarker } from "./live-agents";
@@ -197,7 +198,8 @@ function Zone(props: RepoMapProps & { zone: MapZone }) {
           opacity: 0.35,
         },
         header: { flexDirection: "row", alignItems: "center", gap: 6 },
-        dir: { flex: 1, color: colors.foregroundMuted, fontFamily: MONO, fontSize: 11 },
+        dir: { flexShrink: 1, color: colors.foregroundMuted, fontFamily: MONO, fontSize: 11 },
+        area: { flex: 1, color: colors.foregroundMuted, fontSize: 11, opacity: 0.8 },
         count: { color: hot ? colors.foreground : colors.foregroundMuted, fontSize: 11 },
         tiles: { flexDirection: "row", flexWrap: "wrap", gap: 6 },
       }) as const,
@@ -207,6 +209,7 @@ function Zone(props: RepoMapProps & { zone: MapZone }) {
   let count: string | null = null;
   if (zone.predicted > 0) count = `${zone.hits}/${zone.predicted}${off > 0 ? ` +${off} off` : ""}`;
   else if (off > 0) count = `${off} off the map`;
+  const area = zoneAreaLabel(zone);
   return (
     <View style={styles.zone}>
       {hot ? <View pointerEvents="none" style={styles.ring} /> : null}
@@ -219,6 +222,9 @@ function Zone(props: RepoMapProps & { zone: MapZone }) {
         <Text numberOfLines={1} style={styles.dir}>
           {zone.dir || "./"}
         </Text>
+        <Text numberOfLines={1} style={styles.area}>
+          {area ?? ""}
+        </Text>
         {count ? <Text style={styles.count}>{count}</Text> : null}
       </View>
       <View style={styles.tiles}>

package/client/live-panel.tsx

@@ -23,7 +23,7 @@ import {
   useMapModel,
   useReduceMotion,
 } from "./live-timeline";
-import { hitRateLine } from "../shared/map-model";
+import { hitRateLine, offMapLine, offMapWhere } from "../shared/map-model";
 import { useIssue } from "./queries";
 import { Button, EmptyState, errorMessage, IconButton, type Theme } from "./ui";
 
@@ -219,7 +219,10 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
     provider: agent.provider,
     activity,
   });
-  const model = useMapModel(agentId, liveMap.map.files, agents.files, agents.dirs);
+  const model = useMapModel(agentId, liveMap.map.files, agents.files, agents.dirs, liveMap.areas);
+  const offMap = offMapLine(model);
+  const currentPath = activity.current?.path ?? null;
+  const where = useMemo(() => offMapWhere(model, currentPath, liveMap.areas), [model, currentPath, liveMap.areas]);
   // Hold the map until its first full data, so it does not draw once and then swap.
   const mapShown = useRef(false);
   if (liveMap.ready && model.ready) mapShown.current = true;
@@ -300,6 +303,7 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
         main: { flex: 1, minWidth: 0 },
         mainContent: { gap: 16, paddingBottom: 32 },
         hit: { color: colors.foregroundMuted, fontSize: 12 },
+        off: { color: colors.statusWarning, fontSize: 12 },
         tools: { flexDirection: "row", alignItems: "center", gap: 12 },
         mapHead: { gap: 8 },
         mapWait: { minHeight: 240, alignItems: "center", justifyContent: "center" },
@@ -316,6 +320,7 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
       status={agent.status}
       provider={agent.provider}
       current={activity.current}
+      offMap={where}
       reduceMotion={reduceMotion}
     />
   );
@@ -351,6 +356,7 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
       ) : (
       <View style={styles.mapHead}>
         <Text style={styles.hit}>{hitRateLine(model)}</Text>
+        {offMap ? <Text style={styles.off}>{offMap}</Text> : null}
         {graph ? (
           <LiveGraph
             theme={theme}
@@ -362,6 +368,7 @@ function LiveView(props: BodyProps & { issue: IssueDetail }) {
             progress={progress}
             owners={owners}
             agents={cursors}
+            areas={liveMap.areas}
             focus={focus}
             onFocus={toggleFocus}
             camera={props.graphCamera}

package/client/live-timeline.ts

@@ -3,6 +3,7 @@ import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tansta
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { AccessibilityInfo, Platform } from "react-native";
 import type { DirTouch, FileTouch, TimelineItemLike } from "../shared/activity";
+import { type AreaRef, liveProjectRpc, MAX_RESOLVE_PATHS } from "../shared/knowledge";
 import type { IssueDetail } from "../shared/linear";
 import type { FileLink } from "../shared/links";
 import {
@@ -240,6 +241,8 @@ export function ownerColors(issue: IssueDetail, accent: string): OwnerColors {
 // runs, and slowly while there is no map, since a launch can start a job after this mounts.
 export interface LiveMap {
   map: IssueMap;
+  /** Services, packages, and main folders of the agent's project, from its saved knowledge. */
+  areas: readonly AreaRef[];
   stored: boolean;
   /** The stored map has been read once, so the map no longer swaps from the fallback. */
   ready: boolean;
@@ -282,13 +285,14 @@ export function useLiveMap(
   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 project = useProjectKnowledge(agentId, issue);
   const stored = query.data?.map ?? null;
   const failure = explore.error ?? clear.error ?? query.error;
   return {
-    map: stored ?? fallback,
+    map: stored ?? project.fallback,
+    areas: project.areas,
     stored: stored !== null,
-    ready: query.data !== undefined || query.isError,
+    ready: (query.data !== undefined || query.isError) && project.ready,
     job: query.data?.job ?? null,
     starting: explore.isPending,
     error: failure ? errorMessage(failure) : null,
@@ -299,6 +303,32 @@ export function useLiveMap(
   };
 }
 
+const NO_AREAS: readonly AreaRef[] = [];
+
+/** The project's areas, and the ticket-text map with its paths matched to real files. */
+function useProjectKnowledge(agentId: string, issue: IssueDetail) {
+  const read = useRpc(liveProjectRpc);
+  const base = useMemo(() => semanticMap(issue), [issue]);
+  const paths = useMemo(
+    () => base.files.map((file) => file.path).slice(0, MAX_RESOLVE_PATHS).sort(),
+    [base],
+  );
+  const query = useQuery({
+    queryKey: ["linear", "live", "project", agentId, paths],
+    queryFn: () => read({ agentId, paths }),
+    staleTime: 5 * 60_000,
+    // Without knowledge the map still works, so a failure shows it at once.
+    retry: false,
+  });
+  const { data } = query;
+  const fallback = useMemo(() => {
+    if (!data) return base;
+    const resolved = new Map(data.resolved.map((entry) => [entry.from, entry.to]));
+    return semanticMap(issue, new Date(base.createdAt), { resolved, areas: data.areas });
+  }, [issue, base, data]);
+  return { fallback, areas: data?.areas ?? NO_AREAS, ready: data !== undefined || query.isError };
+}
+
 const NO_LISTING: ReadonlyMap<string, readonly string[]> = new Map();
 
 export function useMapModel(
@@ -306,6 +336,7 @@ export function useMapModel(
   files: readonly MapFile[],
   touches: readonly FileTouch[],
   explored: readonly DirTouch[],
+  areas: readonly AreaRef[] = NO_AREAS,
 ): MapModel & { ready: boolean } {
   const list = useRpc(listFilesRpc);
   const dirs = useMemo(
@@ -325,8 +356,8 @@ export function useMapModel(
   }, [listing.data]);
   const ready = dirs.length === 0 || listing.data !== undefined || listing.isError;
   return useMemo(
-    () => ({ ...buildMapModel(files, touches, byDir, explored), ready }),
-    [files, touches, byDir, explored, ready],
+    () => ({ ...buildMapModel(files, touches, byDir, explored, areas), ready }),
+    [files, touches, byDir, explored, areas, ready],
   );
 }
 

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/project-init.tsx

@@ -6,7 +6,7 @@ import {
   SettingsSection,
   SettingsSwitch,
 } from "@getpaseo/plugin/client/ui";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Text, View } from "react-native";
 import { initStartRpc, initStatusRpc } from "../shared/live";
@@ -17,6 +17,7 @@ import {
   proposalDiffs,
 } from "../shared/project-setup";
 import type { ProjectConfig } from "../shared/settings";
+import { knowledgeKey } from "./project-knowledge";
 import { Button, errorMessage, type Theme } from "./ui";
 
 // Setup runs on the daemon. Remember the job per project so leaving the screen keeps it.
@@ -26,8 +27,10 @@ export function ProjectSetup(props: {
   theme: Theme;
   config: ProjectConfig;
   change(patch: Partial<ProjectConfig>): void;
+  /** Opens the setup agent while it runs; absent on hosts without navigation. */
+  openAgent?: (agentId: string) => void;
 }) {
-  const { theme, config, change } = props;
+  const { theme, config, change, openAgent } = props;
   const start = useRpc(initStartRpc);
   const status = useRpc(initStatusRpc);
   const [jobId, setJobId] = useState(() => jobsByProject.get(config.projectId) ?? null);
@@ -47,6 +50,12 @@ export function ProjectSetup(props: {
   });
   const state = job.data?.job ?? null;
   const proposal = job.data?.proposal ?? null;
+  // The daemon saved the agent's area summaries; show them in Project knowledge.
+  const queries = useQueryClient();
+  const finished = state?.status === "done";
+  useEffect(() => {
+    if (finished) void queries.invalidateQueries({ queryKey: knowledgeKey(config.projectId) });
+  }, [finished, queries, config.projectId]);
   const diffs = useMemo(
     () => (proposal ? proposalDiffs(config, proposal) : []),
     [config, proposal],
@@ -76,12 +85,27 @@ export function ProjectSetup(props: {
       <SettingsCard>
         <SettingsAction
           label="Read this repository's guidelines"
-          hint="An agent reads AGENTS.md, CONTRIBUTING, scripts, and CI, then proposes instructions and steps. It is told not to edit. You review each change before it is used."
+          hint="The daemon inspects the project first, and the agent starts from that project map. The agent reads AGENTS.md, CONTRIBUTING, scripts, and CI, then proposes instructions and steps, and describes each area for Project knowledge. It is told not to edit. You review each prompt change before it is used."
           actionLabel={running ? "Reading…" : proposal ? "Run again" : "Start"}
           disabled={running || !config.rootPath}
           onPress={() => begin.mutate()}
         />
-        {running ? <SettingsRow label="The setup agent is reading the repository." /> : null}
+        {running ? (
+          <SettingsRow
+            label={state?.agentId ? "The setup agent is reading the repository." : "Inspecting the project…"}
+          >
+            {state?.agentId && openAgent ? (
+              <View style={ACTIONS_STYLE}>
+                <Button
+                  theme={theme}
+                  icon="Bot"
+                  label="Open agent"
+                  onPress={() => openAgent(state.agentId ?? "")}
+                />
+              </View>
+            ) : null}
+          </SettingsRow>
+        ) : null}
         {failure ? <SettingsRow label="Setup did not finish" error={failure} /> : null}
         {state?.status === "done" && diffs.length === 0 ? (
           <SettingsAction