paseo-bm-plugin 0.0.0-placeholder.0

package/client/slot.ts

@@ -0,0 +1,47 @@
+/**
+ * A single-value hand-off between something that cannot talk to a surface (a
+ * Command Center item, a slash command) and the surface that acts on it
+ * (delta 20260918f §4.1). The newest `put` wins.
+ *
+ * `take()` tells readers when it clears a value, so a surface that reads the
+ * slot through `useSyncExternalStore` redraws when a notice is dismissed. A
+ * reader that takes again while being told gets `null` and tells nobody, so
+ * there is no loop.
+ *
+ * Pure: no React, no React Native, no `server/` import.
+ */
+export interface Slot<T> {
+  put(value: T): void;
+  /** Returns and clears the value. */
+  take(): T | null;
+  /** Reads the value without clearing it. */
+  peek(): T | null;
+  subscribe(listener: () => void): () => void;
+}
+
+export function createSlot<T>(): Slot<T> {
+  let pending: T | null = null;
+  const listeners = new Set<() => void>();
+  const tell = () => {
+    for (const listener of listeners) listener();
+  };
+  return {
+    put(value) {
+      pending = value;
+      tell();
+    },
+    take() {
+      const value = pending;
+      pending = null;
+      if (value !== null) tell();
+      return value;
+    },
+    peek: () => pending,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}

package/client/tree.tsx

@@ -0,0 +1,204 @@
+/**
+ * "Beads agents" workspace panel (WP-113): the Manager -> Worker -> Reviewer
+ * tree with per-agent status, polled through `agents.list`, and the role
+ * configuration in effect from `roles.describe`.
+ *
+ * `AgentTreePanel` owns the data (RPC + query); `AgentTreeView` only renders
+ * from props and uses no hooks, so it can be rendered in tests without a
+ * renderer. Tree building, texts and styles live in `agent-tree.ts`.
+ *
+ * Read-only: pressing a row opens that agent. There is no stop, archive or
+ * delete action; agent lifecycle belongs to the user (ADR-005).
+ *
+ * Client rules: React Native primitives only, every color from theme.colors,
+ * no Node builtin imports.
+ */
+import { type PluginTheme } from "@getpaseo/plugin";
+import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { ActivityIndicator, Pressable, ScrollView, Text, View } from "react-native";
+import { agentsListRpc, rolesDescribeRpc, type AgentNode, type RoleDescriptor } from "../shared/contracts";
+import {
+  AGENT_TREE_POLL_MS,
+  EMPTY_AGENTS_TEXT,
+  NO_ROLES_TEXT,
+  agentSections,
+  buildAgentTree,
+  indentFor,
+  loadErrorText,
+  roleConfigRows,
+  treeStyles,
+  treeToneColor,
+  type TreeStyles,
+} from "./agent-tree";
+
+/** Loading state of one RPC, as the view needs it. */
+export type Loadable<T> =
+  | { status: "pending" }
+  | { status: "error"; error: unknown }
+  | { status: "success"; data: T };
+
+export interface AgentTreeViewProps {
+  theme: PluginTheme;
+  compact: boolean;
+  agents: Loadable<readonly AgentNode[]>;
+  roles: Loadable<readonly RoleDescriptor[]>;
+  /** Undefined on hosts without `navigation.openAgent`: rows are then not pressable. */
+  openAgent?: (input: { agentId: string }) => void;
+  onRetryAgents?: () => void;
+  onRetryRoles?: () => void;
+}
+
+export function AgentTreePanel({ theme, layout, navigation, workspaceId }: PluginWorkspacePanelProps) {
+  const listAgents = useRpc(agentsListRpc);
+  const describeRoles = useRpc(rolesDescribeRpc);
+
+  const agents = useQuery({
+    queryKey: ["paseo-bm", "agent-tree", "agents", workspaceId],
+    queryFn: async () => (await listAgents({ workspaceId })).agents,
+    refetchInterval: AGENT_TREE_POLL_MS,
+  });
+  const roles = useQuery({
+    queryKey: ["paseo-bm", "agent-tree", "roles"],
+    queryFn: async () => (await describeRoles({})).roles,
+  });
+
+  return (
+    <AgentTreeView
+      theme={theme}
+      compact={layout.compact}
+      agents={toLoadable(agents)}
+      roles={toLoadable(roles)}
+      openAgent={navigation?.openAgent}
+      onRetryAgents={() => void agents.refetch()}
+      onRetryRoles={() => void roles.refetch()}
+    />
+  );
+}
+
+function toLoadable<T>(query: { status: "pending" | "error" | "success"; data: T | undefined; error: unknown }): Loadable<T> {
+  // Keep showing the last good data while a background poll fails.
+  if (query.data !== undefined) return { status: "success", data: query.data };
+  if (query.status === "error") return { status: "error", error: query.error };
+  return { status: "pending" };
+}
+
+export function AgentTreeView(props: AgentTreeViewProps) {
+  const { theme, compact } = props;
+  const styles = treeStyles(theme, compact);
+
+  return (
+    <ScrollView style={styles.screen} contentContainerStyle={styles.content}>
+      <Text style={styles.heading}>Beads agents</Text>
+      {!props.openAgent ? (
+        <Text style={[styles.notice, { color: treeToneColor(theme, "warning") }]}>
+          This Paseo version cannot open agents from plugins. Update Paseo to open them from here.
+        </Text>
+      ) : null}
+      <AgentsBlock {...props} styles={styles} />
+
+      <Text style={styles.heading}>Role configuration</Text>
+      <RolesBlock {...props} styles={styles} />
+    </ScrollView>
+  );
+}
+
+function RetryButton({ label, onPress, styles }: { label: string; onPress?: () => void; styles: TreeStyles }) {
+  if (!onPress) return null;
+  return (
+    <Pressable accessibilityRole="button" accessibilityLabel={label} onPress={onPress} style={styles.button}>
+      <Text style={styles.buttonText}>Retry</Text>
+    </Pressable>
+  );
+}
+
+function AgentsBlock({ theme, compact, agents, openAgent, onRetryAgents, styles }: AgentTreeViewProps & { styles: TreeStyles }) {
+  if (agents.status === "pending") return <ActivityIndicator color={styles.spinner.color} />;
+  if (agents.status === "error") {
+    return (
+      <View style={{ gap: 6 }}>
+        <Text accessibilityLiveRegion="polite" style={[styles.notice, { color: treeToneColor(theme, "danger") }]}>
+          {loadErrorText("agents", agents.error)}
+        </Text>
+        <RetryButton label="Retry loading agents" onPress={onRetryAgents} styles={styles} />
+      </View>
+    );
+  }
+
+  const sections = agentSections(buildAgentTree(agents.data));
+  if (sections.length === 0) return <Text style={styles.body}>{EMPTY_AGENTS_TEXT}</Text>;
+
+  return (
+    <View style={{ gap: compact ? 8 : 12 }}>
+      {sections.map((section) => (
+        <View key={section.key} style={{ gap: 6 }}>
+          <Text style={styles.sectionTitle}>{section.title}</Text>
+          {section.rows.map((row) => {
+            const content = (
+              <>
+                <View style={{ flexShrink: 1 }}>
+                  <Text style={styles.rowTitle}>{row.label}</Text>
+                  <Text style={styles.rowRole}>{row.roleLabel}</Text>
+                </View>
+                <Text style={[styles.rowStatus, { color: treeToneColor(theme, row.statusTone) }]}>{row.status}</Text>
+              </>
+            );
+            const indent = { marginLeft: indentFor(row.depth, compact) };
+            return openAgent ? (
+              <Pressable
+                key={row.agentId}
+                accessibilityRole="button"
+                accessibilityLabel={row.accessibilityLabel}
+                onPress={() => openAgent({ agentId: row.agentId })}
+                style={({ pressed }) => [styles.row, indent, pressed ? styles.rowPressed : null]}
+              >
+                {content}
+              </Pressable>
+            ) : (
+              <View key={row.agentId} style={[styles.row, indent]}>
+                {content}
+              </View>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function RolesBlock({ theme, roles, onRetryRoles, styles }: AgentTreeViewProps & { styles: TreeStyles }) {
+  if (roles.status === "pending") return <ActivityIndicator color={styles.spinner.color} />;
+  if (roles.status === "error") {
+    return (
+      <View style={{ gap: 6 }}>
+        <Text accessibilityLiveRegion="polite" style={[styles.notice, { color: treeToneColor(theme, "danger") }]}>
+          {loadErrorText("role configuration", roles.error)}
+        </Text>
+        <RetryButton label="Retry loading role configuration" onPress={onRetryRoles} styles={styles} />
+      </View>
+    );
+  }
+
+  const rows = roleConfigRows(roles.data);
+  if (rows.length === 0) {
+    return <Text style={[styles.notice, { color: treeToneColor(theme, "warning") }]}>{NO_ROLES_TEXT}</Text>;
+  }
+
+  return (
+    <View style={{ gap: 8 }}>
+      {rows.map((row) => (
+        <View key={row.role} style={styles.card}>
+          <Text style={styles.rowTitle}>{row.role}</Text>
+          {row.fields.map((field) => (
+            <View key={field.label} style={styles.field}>
+              <Text style={styles.fieldLabel}>{field.label}</Text>
+              <Text selectable style={styles.fieldValue}>
+                {field.value}
+              </Text>
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}

package/client/ui.tsx

@@ -0,0 +1,262 @@
+/**
+ * The pieces the Metric and Beads screens share: stat cards, a bar chart, a
+ * chip, the agent role mark, and the style of a bead title. Styling comes from
+ * `dashboardStyles`, colours from the theme.
+ *
+ * Client rules: React Native primitives only, no Node import, no `server/`
+ * import.
+ */
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import type { ReactNode } from "react";
+import type { BeadRow } from "../shared/contracts";
+import { beadTitleTone } from "./beads-model";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Pressable, Text, View } from "react-native";
+import { ROLE_MARK, barShare, toneColor, type Badge, type Bar, type GraphNode, type Tone, type dashboardStyles } from "./dashboard-model";
+
+export type Styles = ReturnType<typeof dashboardStyles>;
+export type Theme = PluginSurfaceProps["theme"];
+
+/** Props of the two per-workspace screens, Beads and Metric. */
+export interface WorkspaceScreenProps extends PluginSurfaceProps {
+  workspaceId: string;
+  /** Omitted inside the workspace's own "Beads" tab: the tab already says where it is. */
+  workspaceLabel?: string;
+  /** Omitted inside the "Beads" tab, which has no screen to go back to. */
+  onBack?: () => void;
+  /** What the ← says to a screen reader; the surface names where it leads. */
+  backLabel?: string;
+  /** The Beads Manager surface's status strip; the "Beads" tab has none. */
+  status?: ReactNode;
+}
+
+/**
+ * The first row of the Beads and Metric screens: an optional ←, the title (or
+ * a spacer when the screen sits in its own workspace tab), then the screen's
+ * own buttons. The surface's status strip, when given, sits right under it, so
+ * a slash command's notice is seen on these screens too. Hook-free, so tests
+ * can expand it.
+ */
+export function WorkspaceScreenHeader({
+  title,
+  onBack,
+  backLabel,
+  right,
+  status,
+  styles,
+}: {
+  title: string | null;
+  onBack?: () => void;
+  backLabel: string;
+  right: ReactNode;
+  status?: ReactNode;
+  styles: Styles;
+}) {
+  return (
+    <>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+        {onBack === undefined ? null : (
+          <Pressable accessibilityRole="button" accessibilityLabel={backLabel} onPress={onBack} style={styles.secondaryButton}>
+            <Text style={styles.secondaryButtonText}>←</Text>
+          </Pressable>
+        )}
+        {title === null ? (
+          <View style={{ flex: 1 }} />
+        ) : (
+          <Text style={[styles.title, { flex: 1 }]} numberOfLines={1}>
+            {title}
+          </Text>
+        )}
+        {right}
+      </View>
+      {status}
+    </>
+  );
+}
+
+export function StatCards({
+  cards,
+  styles,
+}: {
+  cards: ReadonlyArray<{ label: string; value: string; hint: string }>;
+  styles: Styles;
+}) {
+  return (
+    <View style={styles.cards}>
+      {cards.map((card) => (
+        <View key={card.label} style={styles.statCard}>
+          <Text style={styles.body}>{card.label}</Text>
+          <Text style={styles.statValue}>{card.value}</Text>
+          <Text style={styles.body} numberOfLines={1}>
+            {card.hint}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+/** Horizontal bars; a bar with an `agentId` opens that agent when `onOpen` is given. */
+export function BarChart({
+  title,
+  bars,
+  styles,
+  labelWidth = 140,
+  onOpen,
+}: {
+  title: string;
+  bars: Bar[];
+  styles: Styles;
+  labelWidth?: number;
+  onOpen?: (agentId: string) => void;
+}) {
+  return (
+    <View style={[styles.card, { flexGrow: 1, minWidth: 220 }]}>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      {bars.length === 0 ? <Text style={styles.body}>Nothing yet.</Text> : null}
+      {bars.map((bar) => {
+        const row = (
+          <View style={{ gap: 2 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Text style={[styles.body, { width: labelWidth }]} numberOfLines={1}>
+                {bar.label}
+              </Text>
+              <View style={styles.barTrack}>
+                <View style={[styles.barFill, { width: `${Math.round(barShare(bar, bars) * 100)}%` }]} />
+              </View>
+              <Text style={[styles.body, { minWidth: 30, textAlign: "right" }]}>{bar.display}</Text>
+            </View>
+            {bar.hint === undefined ? null : (
+              <Text style={styles.body} numberOfLines={1}>
+                {bar.hint}
+              </Text>
+            )}
+          </View>
+        );
+        const agentId = bar.agentId;
+        return agentId !== undefined && onOpen !== undefined ? (
+          <Pressable key={agentId} accessibilityRole="button" accessibilityLabel={`Open ${bar.label}`} onPress={() => onOpen(agentId)}>
+            {row}
+          </Pressable>
+        ) : (
+          <View key={agentId ?? bar.label}>{row}</View>
+        );
+      })}
+    </View>
+  );
+}
+
+/** A coloured chip; pressable and selectable when `onPress` is given. */
+export function Chip({
+  badge,
+  selected,
+  onPress,
+  styles,
+  theme,
+}: {
+  badge: Badge;
+  selected?: boolean;
+  onPress?: () => void;
+  styles: Styles;
+  theme: Theme;
+}) {
+  const colour = toneColor(theme, badge.tone);
+  const body = (
+    <View style={[styles.chip, { borderColor: colour, backgroundColor: selected ? theme.colors.surface2 : "transparent" }]}>
+      <Text style={[styles.badge, { color: colour }]}>{`${selected ? "● " : ""}${badge.text}`}</Text>
+    </View>
+  );
+  return onPress === undefined ? (
+    body
+  ) : (
+    <Pressable accessibilityRole="button" accessibilityState={{ selected: selected === true }} onPress={onPress}>
+      {body}
+    </Pressable>
+  );
+}
+
+/**
+ * A bead title in a list: the section size, not bold, in its status colour
+ * (owner decisions Q3 and Q8, delta 20260918e). `null` keeps the plain text
+ * colour, for a bead shown outside a list.
+ */
+export function beadTitleStyle(styles: Styles, theme: Theme, tone: Tone | null) {
+  return [styles.sectionTitle, { fontWeight: "400" as const, color: tone === null ? theme.colors.foreground : toneColor(theme, tone) }];
+}
+
+/**
+ * One bead row, shared by the Beads screen and the "Beads in this chat" panel:
+ * the title coloured by status (not bold) with ▸ / ▾, then what the list shows
+ * about the bead (`meta`), and the detail once the row is open. The detail is
+ * passed in, so this file never imports the Beads screen. Hook-free.
+ */
+export function BeadRowCard({
+  bead,
+  open,
+  onToggle,
+  meta,
+  detail,
+  styles,
+  theme,
+}: {
+  bead: Pick<BeadRow, "title" | "status" | "ready">;
+  open: boolean;
+  onToggle: () => void;
+  meta: ReactNode;
+  detail: ReactNode;
+  styles: Styles;
+  theme: Theme;
+}) {
+  return (
+    <View style={styles.card}>
+      <Pressable accessibilityRole="button" accessibilityState={{ expanded: open }} onPress={onToggle}>
+        {/* The title is what a reader scans for; the id comes second. */}
+        <Text style={beadTitleStyle(styles, theme, beadTitleTone(bead))} numberOfLines={open ? undefined : 2}>
+          {`${open ? "▾" : "▸"} ${bead.title ?? "(untitled)"}`}
+        </Text>
+        {meta}
+      </Pressable>
+      {open ? detail : null}
+    </View>
+  );
+}
+
+/** A small role icon on a soft, round tint of the role's colour. */
+export function RoleMark({ kind, theme, size = 22 }: { kind: GraphNode["kind"]; theme: Theme; size?: number }) {
+  const mark = ROLE_MARK[kind];
+  const colour = toneColor(theme, mark.tone);
+  return (
+    <View
+      accessibilityLabel={mark.role}
+      style={{ width: size, height: size, borderRadius: size / 2, alignItems: "center", justifyContent: "center" }}
+    >
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          borderRadius: size / 2,
+          backgroundColor: colour,
+          opacity: 0.16,
+        }}
+      />
+      <Icon name={mark.icon} size={Math.round(size * 0.6)} color={colour} />
+    </View>
+  );
+}
+
+/** One line naming each role next to its mark, so the graph reads without guessing. */
+export function RoleLegend({ styles, theme }: { styles: Styles; theme: Theme }) {
+  return (
+    <View style={[styles.chipRow, { gap: 12 }]}>
+      {(Object.keys(ROLE_MARK) as Array<GraphNode["kind"]>).map((kind) => (
+        <View key={kind} style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+          <RoleMark kind={kind} theme={theme} size={18} />
+          <Text style={styles.body}>{`${ROLE_MARK[kind].role} · ${ROLE_MARK[kind].does}`}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}

package/client/waiting-pills-model.ts

@@ -0,0 +1,156 @@
+/**
+ * Which "questions waiting" pills a Manager's chat shows (delta
+ * 20260918d-card-replies §4.8, REQ-059 j): one per Worker whose latest report
+ * asks the user something, as `chat.waiting` answers. And one per Manager
+ * whose chat has fallback incidents waiting for the user's decision, counting
+ * them (delta 20260921 §4.4.6, REQ-065 c).
+ *
+ * Pure: no React, no React Native, no `server/` import.
+ */
+import type { FallbackIncident, WaitingFallback, WaitingWorker } from "../shared/contracts";
+import { partyName, toChatCard } from "./chat-cards";
+
+/** How often the pills are read again. The pill of an answered Worker goes within one period. */
+export const WAITING_POLL_MS = 15_000;
+
+/** A Lucide icon name, as the host's other buttons use. */
+export const WAITING_PILL_ICON = "MessageCircleQuestion";
+
+/** The fallback pill's Lucide icon. */
+export const FALLBACK_PILL_ICON = "TriangleAlert";
+
+/** The composer pill of one waiting Worker. */
+export interface WaitingPill {
+  kind: "questions";
+  id: string;
+  /** Changes whenever the pill must be redrawn. */
+  key: string;
+  label: string;
+  title: string;
+  entry: WaitingWorker;
+}
+
+/** The composer pill of one Manager's pending fallback incidents. */
+export interface FallbackPill {
+  kind: "fallback";
+  id: string;
+  /** Changes whenever the pill must be redrawn. */
+  key: string;
+  label: string;
+  title: string;
+  managerId: string;
+  workspaceId: string;
+  /** Oldest first; never empty. */
+  incidents: FallbackIncident[];
+}
+
+export type ComposerPill = WaitingPill | FallbackPill;
+
+/**
+ * FNV-1a 32-bit over the UTF-16 code units of `text`, as 8 hex digits. Small
+ * and dependency-free; it only has to notice that a report's text changed.
+ */
+export function fnv1a32Hex(text: string): string {
+  let hash = 0x811c9dc5;
+  for (let index = 0; index < text.length; index += 1) {
+    hash ^= text.charCodeAt(index);
+    hash = Math.imul(hash, 0x01000193) >>> 0;
+  }
+  return hash.toString(16).padStart(8, "0");
+}
+
+export function pillIdOf(workerId: string): string {
+  return `bm-waiting-${workerId}`;
+}
+
+export function fallbackPillIdOf(managerId: string): string {
+  return `bm-fallback-${managerId}`;
+}
+
+/** The report's questions, as the card reads them; 0 when the text has none. */
+export function questionCountOf(entry: WaitingWorker): number {
+  return toChatCard({ type: "user_message", text: entry.text }, "complete")?.questions.length ?? 0;
+}
+
+export function pillOf(entry: WaitingWorker): WaitingPill | null {
+  const count = questionCountOf(entry);
+  if (count === 0) return null;
+  const name = partyName({ role: "worker", id: entry.workerId, title: entry.workerTitle });
+  const label = `${name} · ${count} ${count === 1 ? "question" : "questions"}`;
+  return {
+    kind: "questions",
+    id: pillIdOf(entry.workerId),
+    // The text's hash too: without a timestamp, a new report with the same
+    // number of questions would otherwise never reach the popover (delta
+    // 20260918f F14).
+    key: [entry.managerId, entry.workspaceId, entry.requestId, label, entry.at ?? "", fnv1a32Hex(entry.text)].join("|"),
+    label,
+    title: `Questions from ${name} about ${entry.requestId}`,
+    entry,
+  };
+}
+
+/**
+ * One pill per Manager, counting the `pending` incidents whose `managerId` is
+ * that Manager. `chat.waiting` already sends only those; the test is repeated
+ * here so a pill never counts anything else.
+ */
+export function fallbackPillsOf(fallback: readonly WaitingFallback[]): FallbackPill[] {
+  const byManager = new Map<string, { workspaceId: string; incidents: FallbackIncident[] }>();
+  for (const entry of fallback) {
+    if (entry.incident.status !== "pending" || entry.incident.managerId !== entry.managerId) continue;
+    const group = byManager.get(entry.managerId) ?? { workspaceId: entry.workspaceId, incidents: [] };
+    if (!group.incidents.some((incident) => incident.id === entry.incident.id)) group.incidents.push(entry.incident);
+    byManager.set(entry.managerId, group);
+  }
+  return [...byManager].map(([managerId, { workspaceId, incidents }]) => {
+    const count = incidents.length;
+    const label = `Fallback · ${count} ${count === 1 ? "decision" : "decisions"}`;
+    return {
+      kind: "fallback",
+      id: fallbackPillIdOf(managerId),
+      key: [managerId, workspaceId, label, incidents.map((incident) => incident.id).join(",")].join("|"),
+      label,
+      title:
+        count === 1
+          ? "An agent stopped by its provider plan waits for your decision"
+          : `${count} agents stopped by their provider plan wait for your decision`,
+      managerId,
+      workspaceId,
+      incidents,
+    };
+  });
+}
+
+/** The chat a pill belongs to. */
+export function pillChatOf(pill: ComposerPill): { managerId: string; workspaceId: string } {
+  return pill.kind === "questions"
+    ? { managerId: pill.entry.managerId, workspaceId: pill.entry.workspaceId }
+    : { managerId: pill.managerId, workspaceId: pill.workspaceId };
+}
+
+/**
+ * What to add, redraw and remove, given the pills shown now (`id → key`) and
+ * the latest `chat.waiting` answer. A pill whose key did not change is left alone.
+ */
+export function planPills(
+  current: ReadonlyMap<string, string>,
+  waiting: readonly WaitingWorker[],
+  fallback: readonly WaitingFallback[] = [],
+): { add: ComposerPill[]; update: ComposerPill[]; remove: string[] } {
+  const next = new Map<string, ComposerPill>();
+  for (const entry of waiting) {
+    const pill = pillOf(entry);
+    if (pill !== null && !next.has(pill.id)) next.set(pill.id, pill);
+  }
+  for (const pill of fallbackPillsOf(fallback)) next.set(pill.id, pill);
+  const add: ComposerPill[] = [];
+  const update: ComposerPill[] = [];
+  for (const pill of next.values()) {
+    const shown = current.get(pill.id);
+    if (shown === undefined) add.push(pill);
+    else if (shown !== pill.key) update.push(pill);
+  }
+  const remove = [...current.keys()].filter((id) => !next.has(id));
+  return { add, update, remove };
+}