pi-weave 0.3.10 → 0.3.11

package/src/web/client/graph/Graph.tsx

@@ -51,6 +51,8 @@ import {
   SHEET_LABEL,
   SHEET_OPEN,
   SHEET_OPEN_SPLIT,
+  SPOTLIGHT_BY_AGENT,
+  SPOTLIGHT_BY_AGENT_HINT,
   SPOTLIGHT_CLEAR,
   SPOTLIGHT_CLEAR_HINT,
   SPOTLIGHT_LABEL,
@@ -126,6 +128,8 @@ export interface GraphProps {
    * They light alongside the spotlight's own matches; omitted means none.
    */
   found?: readonly string[];
+  /** Whether `query` is the agent's newest search rather than the person's (`trail.model.ts`'s `agentSpotlight`). */
+  byAgent?: boolean;
   /**
    * Where the spotlight field writes. **Its presence is what makes this the
    * full graph view**: with it the column shows the floating spotlight field
@@ -347,6 +351,7 @@ export function Graph(props: GraphProps) {
             aria-label={SPOTLIGHT_LABEL} spellcheck={false} autoComplete="off" onInput={(event) => props.onQuery?.(event.currentTarget.value)} />
           {spot === null ? null : (
             <>
+              {props.byAgent === true ? <span class="weave-spotlight-by" title={SPOTLIGHT_BY_AGENT_HINT}>{SPOTLIGHT_BY_AGENT}</span> : null}
               <span class={`weave-spotlight-count${spot.count === 0 ? " weave-spotlight-none" : ""}`} role="status">{litLabel(spot.count)}</span>
               <button type="button" class="weave-spotlight-clear" title={SPOTLIGHT_CLEAR_HINT} aria-label={SPOTLIGHT_CLEAR_HINT}
                 onClick={() => { props.onQuery?.(""); field.current?.focus(); }}>{SPOTLIGHT_CLEAR}</button>

package/src/web/client/graph/spotlight.model.ts

@@ -47,6 +47,10 @@ export const SPOTLIGHT_LABEL = "Light up in graph";
 export const SPOTLIGHT_CLEAR = "Esc";
 export const SPOTLIGHT_CLEAR_HINT = "Clear the spotlight (Esc)";
 
+/** The tag on the field while it shows the agent's newest search, and its hint. */
+export const SPOTLIGHT_BY_AGENT = "agent";
+export const SPOTLIGHT_BY_AGENT_HINT = "Your agent searched for this. Type to light up something else.";
+
 /** The legend while a spotlight is up, replacing the neighbourhood's. */
 export const SPOTLIGHT_LEGEND = { lit: "lit", dimmed: "not lit" } as const;
 

package/src/web/client/shell/Shell.tsx

@@ -20,7 +20,7 @@ import type { WorkspaceHandle } from "../workspace";
 import { ContextRail } from "./ContextRail";
 import { contextCount, contextModel } from "../context/context.model";
 import { startTrailPoll } from "../trail/trail";
-import { TRAIL_TICK_MS, trailLive, trailMarks, trailTurns } from "../trail/trail.model";
+import { TRAIL_TICK_MS, agentSearch, agentSpotlight, trailLive, trailMarks, trailTurns } from "../trail/trail.model";
 import type { TrailReplay } from "../trail/trail.model";
 import { ResizeHandle } from "./ResizeHandle";
 import { deeplinkSelection, formatHash } from "./deeplink.model";
@@ -142,6 +142,9 @@ export function Shell(props: ShellProps) {
   // What the search palette listed when it lit the graph up, for that query.
   // Typing a different query in the spotlight leaves these behind.
   const [graphFound, setGraphFound] = useState<{ query: string; ids: readonly string[] } | null>(null);
+  // The agent search the spotlight is showing (its trail `seq`), or `null`
+  // when the spotlight is the person's — see `agentSpotlight`.
+  const [agentLit, setAgentLit] = useState<number | null>(null);
   const draggedTab = useRef<string | null>(null);
   const [dropTab, setDropTab] = useState<{ paneId: string; before: string | null } | null>(null);
   const [dropPane, setDropPane] = useState<string | null>(null);
@@ -228,8 +231,10 @@ export function Shell(props: ShellProps) {
   const lightUp = (query: string, ids: readonly string[] = []): void => {
     setGraphQuery(query);
     setGraphFound({ query, ids });
+    setAgentLit(null);
     showGraph();
   };
+  const typeSpotlight = (query: string): void => { setGraphQuery(query); setAgentLit(null); };
   live.current = { layout, overlay, selectedId, graphPreviewId, select };
   const mayMutate = (slugs: readonly string[]): boolean => mayMutateDrafts(drafts, slugs, () => window.confirm("Discard unsaved changes to the affected notes before changing files?"));
   const save: SaveNote = async (slug, body, options) => {
@@ -323,6 +328,17 @@ export function Shell(props: ShellProps) {
   }, [trailGlowing]);
   const glows = useMemo(() => trailMarks(trail, trailNow, replay), [trail, trailNow, replay]);
   const turns = useMemo(() => trailTurns(trail, data.graph), [trail, data.graph]);
+  // The agent's searches light up in the graph view's spotlight, like the
+  // palette's "light up in graph", without switching to the graph.
+  const search = useMemo(() => agentSearch(trail), [trail]);
+  useEffect(() => {
+    const composing = graphQuery.trim() !== "" && document.activeElement?.classList.contains("weave-spotlight-input") === true;
+    const next = agentSpotlight(agentLit, search, composing);
+    if (next === null) return;
+    setGraphQuery(next.query);
+    setGraphFound({ query: next.query, ids: next.ids });
+    setAgentLit(next.agent);
+  }, [search?.seq]);
   // A floating card stays out of the way when it has nothing to say (no
   // selection, no agent turn), and over the graph, whose own sheet is its context.
   const coveredPane = layout.split === "down" ? layout.panes[0] : layout.panes.at(-1);
@@ -514,7 +530,7 @@ export function Shell(props: ShellProps) {
       </nav>
       <div class="weave-sidebar-dock weave-notes-dock" data-open={layout.treeVisible} inert={!layout.treeVisible} aria-hidden={!layout.treeVisible} style={{ "--weave-sidebar-width": `${Math.min(layout.treeWidth, width - 90)}px` }}><aside class="weave-sidebar weave-sidebar-notes" aria-label="Notes sidebar">
         <div class="weave-sidebar-heading"><button type="button" aria-pressed={!recentMode} onClick={() => setRecentMode(false)}>Files</button><button type="button" aria-pressed={recentMode} onClick={() => setRecentMode(true)}>Recent</button><button type="button" aria-label="Hide notes sidebar" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle notes sidebar"]')?.focus(); setLayout({ ...layout, treeVisible: false }); }}>«</button></div>
-        {recentMode ? <RecentList visits={visits} graph={data.graph} selectedId={selectedId} onSelect={select} /> : <Tree graph={data.graph} selectedId={selectedId} recentIds={data.recentIds} trail={glows} onSelect={(id, newTab, keepSidebar) => select(id, newTab, layout.activePane, keepSidebar)} onMutate={mayMutate} onRefresh={() => workspace.current?.refresh()} now={now} />}
+        {recentMode ? <RecentList visits={visits} graph={data.graph} selectedId={selectedId} onSelect={select} /> : <Tree graph={data.graph} selectedId={selectedId} recentIds={data.recentIds} onSelect={(id, newTab, keepSidebar) => select(id, newTab, layout.activePane, keepSidebar)} onMutate={mayMutate} onRefresh={() => workspace.current?.refresh()} now={now} />}
         <div class="weave-vault-label"><span>Workspace</span><strong title={props.cwd}>{props.cwd.split(/[\\/]/).filter(Boolean).pop() ?? "Weave"}</strong></div>
       </aside><ResizeHandle label="Resize notes sidebar" min={180} max={420} value={layout.treeWidth} onChange={(delta) => setLayout((value) => ({ ...value, treeWidth: Math.max(180, Math.min(420, value.treeWidth + delta)) }))} /></div>
       <main class={`weave-panes weave-split-${layout.split}`} style={layout.panes.length === 2 && width >= 850 ? { [layout.split === "right" ? "gridTemplateColumns" : "gridTemplateRows"]: `minmax(0, ${layout.ratio}fr) 4px minmax(0, ${1 - layout.ratio}fr)` } : {}}>
@@ -535,7 +551,7 @@ export function Shell(props: ShellProps) {
         aria-hidden={!graphVisible} inert={!graphVisible} role={contextGraphActive ? "region" : undefined} aria-label={contextGraphActive ? "Note graph" : undefined}
         style={{ ...graphBox, visibility: graphVisible ? "visible" : "hidden", pointerEvents: graphVisible ? "auto" : "none" }}>
         <Graph graph={data.graph} selectedId={selectedId} previewId={graphPreviewId} onSelect={selectGraph} onOpen={openGraphNode} renderer={createSigmaRenderer} storage={localStorage} host={window} scheme={graphTheme} forces={layout.preferences.forces} groupColors={layout.preferences.groupColors} bootFailed={data.graphFailed} fit={fit} trail={glows}
-          {...(contextGraphActive ? {} : { query: graphQuery, ...(graphFound?.query === graphQuery ? { found: graphFound.ids } : {}), onQuery: setGraphQuery, onOpenSplit: openGraphNodeInSplit })} now={now} />
+          {...(contextGraphActive ? {} : { query: graphQuery, ...(graphFound?.query === graphQuery ? { found: graphFound.ids } : {}), byAgent: agentLit !== null, onQuery: typeSpotlight, onOpenSplit: openGraphNodeInSplit })} now={now} />
       </div> : null}
     </div>
     <div class="weave-footer"><StatusBar model={statusBarModel(props.cwd, selectedId, searchShortcut(looksApple(props.platform)))} />

package/src/web/client/shell/icons.model.ts

@@ -131,7 +131,7 @@ export const ICONS: Readonly<Record<IconName, IconDef>> = {
   /** An open loop with its arrowhead. */
   refresh: { d: ["M13 8a5 5 0 1 1-1.5-3.55", "M13 2.75V5.5h-2.75"], filled: false },
   /** A hub with eight spokes. */
-  settings: { d: ["M10 8a2 2 0 1 1-4 0a2 2 0 1 1 4 0Z", "M8 1.75v1.5M8 12.75v1.5M1.75 8h1.5M12.75 8h1.5M3.6 3.6l1.05 1.05M11.35 11.35l1.05 1.05M3.6 12.4l1.05-1.05M11.35 4.65l1.05-1.05"], filled: false },
+  settings: { d: ["M6.50 3.65L6.89 1.70L9.11 1.70L9.50 3.65A4.6 4.6 0 0 1 11.02 4.53L12.90 3.89L14.01 5.81L12.52 7.12A4.6 4.6 0 0 1 12.52 8.88L14.01 10.19L12.90 12.11L11.02 11.47A4.6 4.6 0 0 1 9.50 12.35L9.11 14.30L6.89 14.30L6.50 12.35A4.6 4.6 0 0 1 4.98 11.47L3.10 12.11L1.99 10.19L3.48 8.88A4.6 4.6 0 0 1 3.48 7.12L1.99 5.81L3.10 3.89L4.98 4.53A4.6 4.6 0 0 1 6.50 3.65Z", "M10 8a2 2 0 1 1-4 0a2 2 0 1 1 4 0Z"], filled: false },
   /** A light theme. */
   sun: { d: ["M10.5 8a2.5 2.5 0 1 1-5 0a2.5 2.5 0 1 1 5 0Z", "M8 1.75V3M8 13v1.25M1.75 8H3M13 8h1.25M3.6 3.6l.9.9M11.5 11.5l.9.9M3.6 12.4l.9-.9M11.5 4.5l.9-.9"], filled: false },
   /** A dark theme. */

package/src/web/client/shell/theme.ts

@@ -164,7 +164,11 @@ body{font-size:var(--weave-px-base)}
    provenance glyph shape carries the distinction the colour swap drops;
    elsewhere the hues are unaffected. The palette's hit rows need the same
    remap: same selected ground, same failure. The label is restated last
-   so the selected row is always readable. */
+   so the selected row is always readable. The ground itself is the Context
+   rail's selection: the --weave-new tint plus a 2px inset accent bar, kept
+   under the pointer too. It is the only tinted row: the tree is where you
+   are, not what the agent touched (the graph shows that). */
+.weave-row-on,.weave-row-on:hover{background:var(--weave-new);box-shadow:inset 2px 0 0 var(--weave-accent)}
 .weave-row-on .weave-twisty,.weave-row-on .weave-kind,.weave-row-on .weave-prov,
 .weave-row-on .weave-meta,.weave-row-on .weave-label{color:var(--weave-fg)}
 .weave-hit-on .weave-hit-icon,.weave-hit-on .weave-hit-detail,.weave-hit-on .weave-hit-meta{color:var(--weave-fg)}
@@ -179,16 +183,6 @@ body{font-size:var(--weave-px-base)}
   40%{font-weight:700}
   100%{background:transparent;font-weight:400}
 }
-/* Recall trail (issue #78): a note the agent searched, read or wrote. The
-   tint follows the graph's palette for the same kinds (warn → ok → accent)
-   and steps down through three strength buckets as the glow fades. */
-.weave-row-trail{--weave-trail:var(--weave-warn);box-shadow:inset 2px 0 0 color-mix(in srgb,var(--weave-trail) var(--weave-trail-mix),transparent);background:color-mix(in srgb,var(--weave-trail) calc(var(--weave-trail-mix) / 6),transparent)}
-.weave-row-trail-read{--weave-trail:var(--weave-ok)}
-.weave-row-trail-wrote{--weave-trail:var(--weave-accent)}
-.weave-row-trail-3{--weave-trail-mix:90%}
-.weave-row-trail-2{--weave-trail-mix:55%}
-.weave-row-trail-1{--weave-trail-mix:25%}
-.weave-row-trail-wrote.weave-row-trail-3 .weave-label{font-weight:600}
 .weave-twisty{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--weave-faint);cursor:pointer}
 .weave-kind{flex:none;color:var(--weave-faint);font-size:var(--weave-px-ui)}
 .weave-prov{flex:none;font-size:var(--weave-px-prov)}
@@ -602,6 +596,7 @@ body{font-size:var(--weave-px-base)}
   color:var(--weave-warn);background:color-mix(in srgb,var(--weave-warn) 16%,transparent);border-radius:999px;
 }
 .weave-spotlight-none{color:var(--weave-dim);background:var(--weave-line)}
+.weave-spotlight-by{flex:none;font-size:var(--weave-px-caption);color:var(--weave-dim);white-space:nowrap}
 .weave-spotlight .weave-spotlight-clear{
   flex:none;padding:1px 5px;cursor:pointer;font-family:var(--weave-mono);font-size:var(--weave-px-prov);
   color:var(--weave-faint);background:transparent;border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
@@ -693,9 +688,8 @@ body{font-size:var(--weave-px-base)}
 .weave-trail{padding-top:6px;padding-bottom:6px;border-bottom:1px solid var(--weave-line)}
 .weave-trail-head{display:flex;align-items:center;gap:6px;font-size:var(--weave-px-caption);font-weight:600;letter-spacing:.09em;color:var(--weave-faint);text-transform:uppercase}
 .weave-trail-head .weave-ctx-count{margin-left:0}
-.weave-trail-replay,.weave-trail-turn{font:inherit;font-size:var(--weave-px-caption);letter-spacing:0;text-transform:none;color:var(--weave-dim);background:none;border:1px solid var(--weave-line);border-radius:var(--weave-radius);padding:0 6px;cursor:pointer}
-.weave-trail-replay{margin-left:auto}
-.weave-trail-replay:hover,.weave-trail-turn:hover{color:var(--weave-fg)}
+.weave-trail-turn{font:inherit;font-size:var(--weave-px-caption);letter-spacing:0;text-transform:none;color:var(--weave-dim);background:none;border:1px solid var(--weave-line);border-radius:var(--weave-radius);padding:0 6px;cursor:pointer}
+.weave-trail-turn:hover{color:var(--weave-fg)}
 .weave-trail-turn-on{color:var(--weave-accent);border-color:var(--weave-accent)}
 .weave-trail-steps{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
 .weave-trail-step{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;padding-left:10px;position:relative;line-height:1.45}

package/src/web/client/trail/TrailStrip.tsx

@@ -27,7 +27,6 @@ export function TrailStrip(props: TrailStripProps) {
       <h4 class="weave-ctx-head weave-trail-head">
         <span class="weave-trail-title">{turnHeading(shown, shown === latest)}</span>
         <span class="weave-ctx-count" title="Notes read or written">{shown.used}</span>
-        {shown.steps.length === 0 ? null : <button type="button" class="weave-trail-replay" title="Replay this turn's glow" onClick={() => props.onReplay(shown.turn)}>Replay</button>}
       </h4>
       {shown.steps.length === 0 ? <p class="weave-trail-empty">{TRAIL_EMPTY_TURN}</p> : null}
       <ol class="weave-trail-steps">

package/src/web/client/trail/trail.model.ts

@@ -9,6 +9,8 @@
  *    steps one after another from the moment it was clicked.
  *  - {@link trailTurns}: the "This turn" strip — each turn's steps in order,
  *    worded as `searched "auth" → read Auth migration → appended Auth migration`.
+ *  - {@link agentSearch}: the agent's newest search this turn, which the
+ *    graph view lights up in its spotlight ({@link agentSpotlight}).
  *
  * Pure, DOM-free and clock-free (every function takes `now`), like the other
  * `*.model.ts` files, so the whole feature is covered by unit tests.
@@ -179,17 +181,70 @@ export function trailTurns(trail: TrailPayload | null, graph: GraphPayload | nul
   return views.slice(0, TRAIL_TURNS_SHOWN);
 }
 
-/** The strip's heading for a turn: the latest is "This turn", older ones are their time. */
 /** What the strip says for a turn with no steps yet. */
 export const TRAIL_EMPTY_TURN = "Nothing recalled yet.";
 
+/** The strip's heading for a turn: the latest is "This turn", older ones are their time. */
 export function turnHeading(view: TrailTurnView, latest: boolean): string {
   return latest ? "This turn" : view.time === "" ? `Turn ${view.turn}` : view.time;
 }
 
-/** The tree row's class for a glow, or `""`. Strength is bucketed so the class list stays small. */
-export function trailRowClass(mark: TrailMark | undefined): string {
-  if (mark === undefined) return "";
-  const level = mark.strength > 0.66 ? 3 : mark.strength > 0.33 ? 2 : 1;
-  return ` weave-row-trail weave-row-trail-${mark.kind} weave-row-trail-${level}`;
+// --- the agent's search in the graph view's spotlight ----------------------------------
+
+/** The agent's newest search this turn: what the graph view's spotlight lights. */
+export interface AgentSearch {
+  /** The event's `seq`, so a new search is a new number even for the same words. */
+  seq: number;
+  query: string;
+  /** The notes the search returned, as node ids. */
+  ids: readonly string[];
+}
+
+/**
+ * The agent's newest search in the current turn, or `null`.
+ *
+ * Only the current turn counts, so the spotlight a search lit goes out when
+ * the agent moves on to the next request. A search with no words (the wire
+ * allows one) has nothing to spell in the field and is skipped.
+ */
+export function agentSearch(trail: TrailPayload | null): AgentSearch | null {
+  if (trail === null) return null;
+  for (let index = trail.events.length - 1; index >= 0; index--) {
+    const event = trail.events[index]!;
+    if (event.turn !== trail.turn) return null;
+    if (event.kind !== "searched" || event.query === undefined || event.query.trim() === "") continue;
+    return { seq: event.seq, query: event.query, ids: event.slugs.map((slug) => `note:${slug}`) };
+  }
+  return null;
+}
+
+/** What the spotlight becomes: its query, the ids lit alongside, and the agent search that set it (`null`: the person's). */
+export interface AgentSpotlight {
+  query: string;
+  ids: readonly string[];
+  agent: number | null;
+}
+
+/**
+ * How the graph view's spotlight follows the agent's searches, when
+ * {@link agentSearch} changes. `null` leaves the spotlight alone.
+ *
+ * A new search takes the spotlight over, the way the palette's "light up in
+ * graph" does, unless the person is in the middle of a query of their own:
+ * the field focused with words they typed. A focused field that is empty, or
+ * still shows an earlier agent search, is not theirs and follows along, so a
+ * field left focused never swallows a search. When the turn that searched is
+ * over, the spotlight it lit goes out, unless the person has made it theirs
+ * since by typing or lighting something up.
+ */
+export function agentSpotlight(
+  /** The `seq` of the agent search the spotlight shows now, or `null` when it is the person's (or empty). */
+  shown: number | null,
+  search: AgentSearch | null,
+  /** Whether the field has focus and holds words; `shown` says whose words they are. */
+  composing: boolean,
+): AgentSpotlight | null {
+  if (search === null) return shown === null ? null : { query: "", ids: [], agent: null };
+  if (search.seq === shown || (composing && shown === null)) return null;
+  return { query: search.query, ids: search.ids, agent: search.seq };
 }

package/src/web/client/tree/Tree.tsx

@@ -1,7 +1,5 @@
 /** The vault and repository tree column. */
 
-import type { TrailMark } from "../trail/trail.model";
-import { trailRowClass } from "../trail/trail.model";
 import { NOTE_DRAG_TYPE } from "../shell/shell.model";
 import { useLayoutEffect, useRef, useState } from "preact/hooks";
 import { createFolder, deleteFolder, deleteNote, moveNote, renameFolder, renameNote } from "../api";
@@ -48,8 +46,6 @@ export interface TreeProps {
   graph: GraphPayload | null;
   selectedId: string | null;
   recentIds: ReadonlySet<string>;
-  /** Recall-trail glows by row id (`trail/trail.model.ts`). */
-  trail?: ReadonlyMap<string, TrailMark>;
   onSelect: (id: string, newTab?: boolean, keepSidebar?: boolean) => void;
   /**
    * Ask before a mutation that would invalidate an open draft. `false` means
@@ -80,13 +76,13 @@ export function Icon({ name, class: className }: { name: IconName; class?: strin
   );
 }
 
-function Row({ view, recentIds, trail, edit, onEdit, onRename, onSelect, onToggle, onMenu, onDrop }: { view: ReturnType<typeof rowViews>[number]; recentIds: ReadonlySet<string>; trail: TrailMark | undefined; edit: string | null; onEdit: (value: string) => void; onRename: (value: string | null) => void; onSelect: (newTab: boolean) => void; onToggle: () => void; onMenu: (x: number, y: number) => void; onDrop: (id: string) => void }) {
+function Row({ view, recentIds, edit, onEdit, onRename, onSelect, onToggle, onMenu, onDrop }: { view: ReturnType<typeof rowViews>[number]; recentIds: ReadonlySet<string>; edit: string | null; onEdit: (value: string) => void; onRename: (value: string | null) => void; onSelect: (newTab: boolean) => void; onToggle: () => void; onMenu: (x: number, y: number) => void; onDrop: (id: string) => void }) {
   const folder = dropFolder(view.id);
   return (
     <li
       id={view.domId}
       data-row-id={view.id}
-      class={`weave-row weave-row-${view.kind}${view.selected ? " weave-row-on" : ""}${recentIds.has(view.id) ? " weave-row-new" : ""}${trailRowClass(trail)}`}
+      class={`weave-row weave-row-${view.kind}${view.selected ? " weave-row-on" : ""}${recentIds.has(view.id) ? " weave-row-new" : ""}`}
       role="treeitem"
       aria-level={view.level}
       aria-posinset={view.posinset}
@@ -301,7 +297,7 @@ export function Tree(props: TreeProps) {
             setMenu({ id: "vault", label: "Vault", x: event.clientX, y: event.clientY });
           }}
         >
-          {rowViews(rows, props.selectedId, props.now).map((view) => <Row key={view.id} view={view} recentIds={props.recentIds} trail={props.trail?.get(view.id)} edit={editing?.id === view.id ? editing.value : null} onEdit={(value) => setEditing((current) => current === null ? null : { ...current, value })} onRename={commitEdit} onSelect={(newTab) => { props.onSelect(view.id, newTab); if (view.hasKids) setState((current) => toggleExpanded(current, view.id)); }} onToggle={() => setState(toggleExpanded(state, view.id))} onMenu={(x, y) => setMenu({ id: view.id, label: view.label, x, y })} onDrop={(dragged) => { const folder = dropFolder(view.id); if (dragged.startsWith("note:") && folder !== undefined) { const target = mutableTreeRow(dragged); if (target !== null && !props.onMutate(affectedNoteSlugs(props.graph, target))) return; void run(moveNote(fetchJson, dragged.slice("note:".length), folder)); } }} />)}
+          {rowViews(rows, props.selectedId, props.now).map((view) => <Row key={view.id} view={view} recentIds={props.recentIds} edit={editing?.id === view.id ? editing.value : null} onEdit={(value) => setEditing((current) => current === null ? null : { ...current, value })} onRename={commitEdit} onSelect={(newTab) => { props.onSelect(view.id, newTab); if (view.hasKids) setState((current) => toggleExpanded(current, view.id)); }} onToggle={() => setState(toggleExpanded(state, view.id))} onMenu={(x, y) => setMenu({ id: view.id, label: view.label, x, y })} onDrop={(dragged) => { const folder = dropFolder(view.id); if (dragged.startsWith("note:") && folder !== undefined) { const target = mutableTreeRow(dragged); if (target !== null && !props.onMutate(affectedNoteSlugs(props.graph, target))) return; void run(moveNote(fetchJson, dragged.slice("note:".length), folder)); } }} />)}
         </ul>
       ) : <p class="weave-tree-empty">{empty}</p>}
       <p class="weave-tree-count">{rowCountLabel(rows)}</p>