@dsh-cove/dsh-web-all 0.0.0-stage → 0.4.4

package/src/client/conversation/session-lane-chip.tsx

@@ -0,0 +1,262 @@
+/**
+ * Conversation header chip: which branch this conversation runs on, rendered
+ * immediately after the session title.
+ *
+ * Seat: `conversation.session.header.actions` (declared `kind: "list"`,
+ * `scope: "session"`), i.e. the same header row as the title, to its right.
+ * The chip owns four rules:
+ *   1. it always answers "which branch is this conversation on": a lane shows
+ *      its branch plus the lane's state, and a conversation on the repository's
+ *      main checkout shows `Main checkout · <branch>`;
+ *   2. for a lane it is also the worktree's whole lifecycle surface — clicking
+ *      it opens {@link LaneMenu} (facts, submit PR, clean up, remove). There is
+ *      no sidebar page for that anymore;
+ *   3. it renders nothing when the session has no repository (or the host half
+ *      predates the routes) — a header must never break because of a chip;
+ *   4. it never changes the branch: selection stays in the composer picker, so
+ *      exactly one control decides which branch a conversation starts on.
+ *
+ * Data: `POST /worktree/lane` resolves the lane from the session id alone, and
+ * `POST /git/status` resolves the main-checkout branch for the session's cwd.
+ * @module dsh-client-ui-worktree/client/session-lane-chip
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { Context as ClientContext } from '@deepseek-ai/cordis'
+import type { PropsLocale, PropsRuntime, Translate } from '@deepseek-ai/dsh-client-ui-slots'
+import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
+import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
+import type { RepoStatus } from '../../core/git-graph/protocol.ts'
+import type { LaneLookupInput, LaneView } from '../../core/worktree/types.ts'
+import { IconBranchOutline16 } from '../ui-icons.ts'
+import { WORKTREE_PART_LANE_CHIP, WORKTREE_PLUGIN } from './worktree/semantic.ts'
+import { WorktreeApi } from './worktree/api.ts'
+import { LaneMenu } from './worktree/lane-menu.tsx'
+import { createLaneBinder, type LaneBinder } from './worktree/lane-binding.ts'
+import { GitApi } from './git-graph/api.ts'
+import { en, zh, type SessionLaneKey } from './session-lane-locales.ts'
+import css from './conversation.module.css'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** Conversation header lane chip copy. */
+    'web-all-session-lane': SessionLaneKey
+  }
+}
+
+/** The browser session summary the chip reads the cwd and run state from. */
+interface SessionSummaryLike {
+  byId?: Record<string, { cwd?: string; running?: boolean } | undefined>
+}
+
+/** The client service surface the chip uses to find the session's cwd. */
+interface SessionsFace {
+  list?: { getSnapshot?: () => SessionSummaryLike | undefined }
+}
+
+/** The injected face the position module hands the chip. */
+export interface SessionLaneInjected {
+  /** Lane lookup (session id only; the host resolves the cwd). */
+  lane: Pick<WorktreeApi, 'lane'>['lane']
+  /** Repository snapshot for the session's cwd; null when it is not a repo. */
+  repoStatus: (sessionId: string) => Promise<RepoStatus | null>
+  /** Whether the conversation is running a turn (teardown has to wait). */
+  running: (sessionId: string) => boolean
+  /** Worktree API for the lane menu's actions (it owns their dialogs). */
+  api: WorktreeApi
+  /** Namespace-bound translator for the lane menu and dialogs. */
+  worktreeT: PropsLocale<'worktree'>['t']
+  /** Namespace-bound translator for the chip itself. */
+  t: Translate<SessionLaneKey>
+}
+
+/**
+ * The status word for one lane. Precedence is deliberate: uncommitted work
+ * is the most actionable fact, then merge state, then the PR, then whether
+ * anything was pushed at all.
+ */
+export function laneStatusKey(
+  lane: Pick<LaneView, 'dirty' | 'merged' | 'prNumber' | 'pushed'>,
+): SessionLaneKey {
+  if ((lane.dirty ?? 0) > 0) return 'lane.dirty'
+  if (lane.merged) return 'lane.merged'
+  if (lane.prNumber !== null) return 'lane.pr'
+  if (lane.pushed) return 'lane.pushed'
+  return 'lane.local'
+}
+
+/**
+ * The header chip: the branch this conversation is on, and — on a lane — the
+ * way to finish that branch off.
+ * Renders nothing unless the conversation belongs to a git repository.
+ */
+export function SessionLaneChip(
+  props: PropsRuntime<'conversation.session.header.actions'> & { sessionId?: string } & SessionLaneInjected,
+) {
+  const { sessionId, lane: lookup, repoStatus, running, api, worktreeT, t } = props
+  const [lane, setLane] = useState<LaneView | null>(null)
+  const [repo, setRepo] = useState<RepoStatus | null>(null)
+  const [open, setOpen] = useState(false)
+  const [bindFailed, setBindFailed] = useState(false)
+  // One binder per mounted chip: it holds the per-session "already attempted"
+  // set, so a refused binding is reported instead of retried forever.
+  const binderRef = useRef<LaneBinder | null>(null)
+  // The binder resolves through the same lookup the chip already receives, so
+  // the two never disagree about which lane this conversation is on.
+  binderRef.current ??= createLaneBinder({ lane: lookup, bindLane: (input) => api.bindLane(input) })
+  const binder = binderRef.current
+
+  useEffect(() => {
+    if (sessionId === undefined) {
+      setLane(null)
+      setRepo(null)
+      return
+    }
+    let live = true
+    const refresh = (): void => {
+      // `binder.bind` resolves the lane AND records the pairing when the host
+      // does not have it yet (see the module doc).
+      void Promise.all([binder.bind(sessionId), repoStatus(sessionId)]).then(
+        ([binding, repoValue]) => {
+          if (!live) return
+          setBindFailed(binding.bindFailed)
+          setLane(binding.lane)
+          setRepo(repoValue)
+        },
+        () => { if (live) { setLane(null); setRepo(null) } },
+      )
+    }
+    refresh()
+    // The branch can change while the session id stays the same (a
+    // mid-conversation branch switch, or a cleanup that archived the lane) and
+    // there is no push channel, so revalidate whenever the tab is looked at.
+    const revalidate = (): void => {
+      if (document.visibilityState === 'visible') refresh()
+    }
+    document.addEventListener('visibilitychange', revalidate)
+    window.addEventListener('focus', revalidate)
+    return () => {
+      live = false
+      document.removeEventListener('visibilitychange', revalidate)
+      window.removeEventListener('focus', revalidate)
+    }
+  }, [sessionId, lookup, repoStatus, binder])
+
+  /** Re-read the lane after the menu changed it (PR, refresh, teardown). */
+  const reload = useCallback((): void => {
+    if (sessionId === undefined) return
+    void lookup({ sessionId }).then((value) => { setLane(value) }, () => { /* keep the last answer */ })
+  }, [lookup, sessionId])
+
+  if (lane !== null && lane.branch !== null && sessionId !== undefined) {
+    const status = t(laneStatusKey(lane), { number: lane.prNumber ?? 0 })
+    return (
+      <span className={css.laneChipWrap}>
+        <button
+          type="button"
+          className={css.laneChip}
+          data-dsh-plugin={WORKTREE_PLUGIN}
+          data-dsh-part={WORKTREE_PART_LANE_CHIP}
+          title={t('lane.aria', { branch: lane.branch })}
+          aria-haspopup="menu"
+          aria-expanded={open}
+          onClick={() => { setOpen((value) => !value) }}
+        >
+          <IconBranchOutline16 size={14} />
+          <span className={css.laneBranch}>{lane.branch}</span>
+          <span className={css.laneStatus}>{status}</span>
+          {(lane.permissionPresetApplied === false || bindFailed) && (
+            <span className={css.laneWarning}>{t('lane.presetMissing')}</span>
+          )}
+        </button>
+        {open && (
+          <LaneMenu
+            sessionId={sessionId}
+            lane={lane}
+            api={api}
+            running={running(sessionId)}
+            ownLane
+            onClose={() => { setOpen(false) }}
+            onChanged={reload}
+            t={worktreeT}
+          />
+        )}
+      </span>
+    )
+  }
+
+  // No lane: the conversation works on the repository's main checkout. The
+  // branch is still the answer to "which branch am I on", so say it — but there
+  // is no lane to finish off, so this one stays read-only.
+  if (repo === null || repo.branch === '') return null
+
+  return (
+    <span
+      className={css.laneChip}
+      data-dsh-plugin={WORKTREE_PLUGIN}
+      data-dsh-part={WORKTREE_PART_LANE_CHIP}
+      data-dsh-kind="main"
+      title={t('lane.mainCheckoutAria', { branch: repo.branch })}
+    >
+      <IconBranchOutline16 size={14} />
+      <span className={css.laneStatus}>{t('lane.mainCheckout')}</span>
+      <span className={css.laneBranch}>{repo.branch}</span>
+    </span>
+  )
+}
+
+export { en as sessionLaneEn, zh as sessionLaneZh }
+export type { SessionLaneKey }
+
+/** Optional service lookup that survives a missing or reshaped service. */
+function optionalService<T>(ctx: ClientContext, name: string): T | undefined {
+  try {
+    return (ctx.get as unknown as (id: string, strict?: boolean) => unknown)(name, false) as T | undefined
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Mount the lane chip on the session-header actions seat. The seat is
+ * `scope: "session"`, so the runtime injects the session id and the chip
+ * needs no other identity.
+ */
+export function mountSessionLaneChip(ctx: ClientContext): () => void {
+  const api = new WorktreeApi()
+  const git = new GitApi()
+  const translate = ctx.locale.bind('web-all-session-lane')
+  const t: Translate<SessionLaneKey> = (key, params) => translate(key, params)
+  const worktreeTranslate = ctx.locale.bind('worktree')
+  const worktreeT: PropsLocale<'worktree'>['t'] = (key, params) => worktreeTranslate(key, params)
+  const sessions = (): SessionsFace | undefined => optionalService<SessionsFace>(ctx, 'sessions')
+  // Identity matters: the chip's effect lists these as dependencies, so a
+  // per-render closure would refetch on every render. Create them once for the
+  // lifetime of the mount.
+  const lane = (input: LaneLookupInput) => api.lane(input)
+  const repoStatus = async (sessionId: string): Promise<RepoStatus | null> => {
+    const cwd = sessions()?.list?.getSnapshot?.()?.byId?.[sessionId]?.cwd
+    if (typeof cwd !== 'string' || cwd === '') return null
+    const result = await git.status(cwd)
+    return result.ok ? result.value : null
+  }
+  const running = (sessionId: string): boolean =>
+    sessions()?.list?.getSnapshot?.()?.byId?.[sessionId]?.running === true
+  const face = (props: PropsRuntime<'conversation.session.header.actions'>) => (
+    <SessionLaneChip
+      {...props}
+      lane={lane}
+      repoStatus={repoStatus}
+      running={running}
+      api={api}
+      worktreeT={worktreeT}
+      t={t}
+    />
+  )
+  return ctx.slots.inject('conversation.session.header.actions', () => ctx.slots.register({
+    name: 'conversation.session.header.actions',
+    id: 'web-all-session-lane-chip',
+    order: 100,
+    inject: (sessionId: string) => ({ sessionId }),
+  }, face))
+}

package/src/client/conversation/session-lane-locales.ts

@@ -0,0 +1,34 @@
+/**
+ * `web-all-session-lane` dictionaries: the conversation header lane chip.
+ * `zh` is the key source; `en` mirrors its key set exactly.
+ * @module dsh-client-ui-worktree/client/session-lane-locales
+ */
+
+/** Chinese dictionary (key source). */
+export const zh = {
+  'lane.aria': '当前分支目录：{branch}',
+  'lane.local': '未推送',
+  'lane.dirty': '有未提交改动',
+  'lane.pushed': '已推送',
+  'lane.pr': 'PR #{number}',
+  'lane.merged': '已合并',
+  'lane.presetMissing': '需完全权限才能提交',
+  'lane.mainCheckout': '项目主目录',
+  'lane.mainCheckoutAria': '当前对话在项目主目录：{branch}',
+} as const
+
+/** The session-lane namespace key union. */
+export type SessionLaneKey = keyof typeof zh
+
+/** English dictionary (complete mirror of `zh`). */
+export const en: Record<SessionLaneKey, string> = {
+  'lane.aria': 'Current branch directory: {branch}',
+  'lane.local': 'Not pushed',
+  'lane.dirty': 'Uncommitted changes',
+  'lane.pushed': 'Pushed',
+  'lane.pr': 'PR #{number}',
+  'lane.merged': 'Merged',
+  'lane.presetMissing': 'needs full access to commit',
+  'lane.mainCheckout': 'Main directory',
+  'lane.mainCheckoutAria': "This conversation is in the project's main directory: {branch}",
+}

package/src/client/conversation/subagent-model-dom.ts

@@ -0,0 +1,157 @@
+/**
+ * Position-owned DOM presentation for subagent model badges. The conversation
+ * module is the only owner of this augmentation; the 0.2 fact resolution stays
+ * under src/core/subagent-model.
+ *
+ * Badge text now comes from the sessions list snapshot (each child row's
+ * `modelSelection` projection), so a scan is a single synchronous pass: rows
+ * whose text matches a known child label get the badge, rows without a known
+ * model are simply left alone.
+ */
+import css from './conversation.module.css'
+
+export const SUBAGENT_MODEL_PLUGIN = 'subagent-model'
+export const SUBAGENT_MODEL_PART = 'badge'
+
+export interface SubagentBadgeDeps {
+  /** Child label (or row title) → child session id. */
+  readonly labels: ReadonlyMap<string, string>
+  /** Child session id → rendered `model` or `model · effort`. */
+  readonly models: ReadonlyMap<string, string>
+  readonly ariaLabel: (modelAndEffort: string) => string
+}
+
+const BADGE_SELECTOR = `[data-dsh-plugin="${SUBAGENT_MODEL_PLUGIN}"]`
+const TOOL_ROW_PREFIX = 'Tool call subagent'
+const CATALOG_ROLE = 'treeitem'
+
+/** Augment catalog rows and all tool rows beneath root. */
+export function scanSubagentRows(root: ParentNode, deps: SubagentBadgeDeps): void {
+  scanSubagentCatalogRows(root, deps)
+  if (deps.labels.size === 0) return
+  const pattern = compileLabelPattern(deps.labels)
+  const seen = new Set<string>()
+  for (const child of elementChildren(root)) {
+    walkToolRows(child, deps, pattern, seen)
+  }
+}
+
+/** Augment only structured subagent catalog rows. */
+export function scanSubagentCatalogRows(root: ParentNode, deps: SubagentBadgeDeps): void {
+  if (deps.labels.size === 0) return
+  const pattern = compileLabelPattern(deps.labels)
+  let rows: NodeListOf<Element>
+  try {
+    rows = root.querySelectorAll(`[role="${CATALOG_ROLE}"]`)
+  } catch {
+    return
+  }
+  for (const row of Array.from(rows)) {
+    try {
+      const text = row.textContent ?? ''
+      if (!text.includes('·') && !text.includes('tok')) continue
+      const childId = matchChildId(text, deps.labels, pattern)
+      if (childId === undefined) continue
+      const metrics = row.querySelector('[class*="metrics"]')
+      const labelNode = row.querySelector('[class*="label"]')
+      const anchor = metrics ?? labelNode?.parentElement ?? row
+      handleRow(row, anchor, childId, deps)
+    } catch {
+      // One malformed row must not break progressive enhancement.
+    }
+  }
+}
+
+/** Augment tool-call rows inside a mutation-affected subtree. */
+export function scanSubagentToolRows(root: ParentNode, deps: SubagentBadgeDeps): void {
+  if (deps.labels.size === 0) return
+  const pattern = compileLabelPattern(deps.labels)
+  const seen = new Set<string>()
+  for (const child of elementChildren(root)) {
+    walkToolRows(child, deps, pattern, seen)
+  }
+}
+
+function elementChildren(root: ParentNode): Element[] {
+  if (root instanceof Element) return [root]
+  if ('children' in root) return Array.from(root.children)
+  return []
+}
+
+function walkToolRows(
+  node: Element,
+  deps: SubagentBadgeDeps,
+  pattern: RegExp,
+  seen: Set<string>,
+): boolean {
+  let descendantMatched = false
+  for (const child of Array.from(node.children)) {
+    if (walkToolRows(child, deps, pattern, seen)) descendantMatched = true
+  }
+  if (descendantMatched) return true
+  const text = node.textContent ?? ''
+  if (!text.includes(TOOL_ROW_PREFIX)) return false
+  const childId = matchChildId(text, deps.labels, pattern)
+  if (childId === undefined) return false
+  handleRow(node, node, childId, deps)
+  seen.add(childId)
+  return true
+}
+
+function handleRow(
+  row: Element,
+  anchor: Element,
+  childId: string,
+  deps: SubagentBadgeDeps,
+): void {
+  const text = deps.models.get(childId)
+  // No projection value yet: leave whatever is already rendered in place.
+  if (text === undefined) return
+  const existing = row.querySelector<HTMLElement>(BADGE_SELECTOR)
+  if (existing !== null) {
+    existing.textContent = text
+    existing.title = text
+    existing.setAttribute('aria-label', deps.ariaLabel(text))
+    return
+  }
+  const badge = document.createElement('span')
+  badge.className = css.subagentModelBadge ?? ''
+  badge.textContent = text
+  badge.title = text
+  badge.setAttribute('aria-label', deps.ariaLabel(text))
+  badge.setAttribute('data-dsh-plugin', SUBAGENT_MODEL_PLUGIN)
+  badge.setAttribute('data-dsh-part', SUBAGENT_MODEL_PART)
+  anchor.appendChild(badge)
+}
+
+function compileLabelPattern(labels: ReadonlyMap<string, string>): RegExp {
+  const alternatives = [...labels.keys()]
+    .filter(label => label.length > 0)
+    .sort((a, b) => b.length - a.length)
+    .map(escapeRegExp)
+  return alternatives.length === 0
+    ? /(?!)/g
+    : new RegExp(`(?:${alternatives.join('|')})`, 'g')
+}
+
+function matchChildId(
+  text: string,
+  labels: ReadonlyMap<string, string>,
+  pattern: RegExp,
+): string | undefined {
+  pattern.lastIndex = 0
+  let best: string | undefined
+  let bestLabel: string | undefined
+  for (const match of text.matchAll(pattern)) {
+    const candidate = match[0]
+    if (labels.has(candidate) && (bestLabel === undefined || candidate.length > bestLabel.length)) {
+      bestLabel = candidate
+      best = labels.get(candidate)
+    }
+  }
+  return best
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}

package/src/client/conversation/subagent-model.ts

@@ -0,0 +1,198 @@
+/**
+ * Conversation-owned subagent model surface.
+ *
+ * It augments already-rendered catalog/tool rows with each child's model and
+ * reasoning effort, read from the sessions list snapshot's `modelSelection`
+ * projection (DSH 0.2). Nothing is fetched and no child session is opened or
+ * retained: the rows the badge targets are rendered by the official UI, and the
+ * projections that describe them travel with the same list snapshot.
+ *
+ * The conversation position is a root scope, so the current session comes from
+ * the public `uiSession.adapter.current` binding (the private `uiSession.current`
+ * and the workspace selection cell remain as fallbacks for older cohorts).
+ */
+import type { Context as ClientContext } from '@deepseek-ai/cordis'
+import type { ISessions } from '@deepseek-ai/dsh-api-session-controller/client'
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+import {
+  resolveSubagentBadges,
+  type SubagentListSnapshotLike,
+} from '../../core/subagent-model/badges.ts'
+import {
+  scanSubagentCatalogRows,
+  scanSubagentRows,
+  scanSubagentToolRows,
+} from './subagent-model-dom.ts'
+import { NS, type ConversationLocaleKey } from './index.ts'
+
+const SCAN_DEBOUNCE_MS = 300
+
+/** A useSyncExternalStore-compatible source (cordis binding source or snapshot store). */
+interface SnapshotSource<T> {
+  getSnapshot(): T
+  subscribe(listener: () => void): () => void
+}
+
+/** The selection faces the conversation root may read for "the session I am in". */
+interface SelectionFaces {
+  uiSession?: {
+    adapter?: { current?: SnapshotSource<{ key?: string } | undefined> }
+    current?: SnapshotSource<{ key?: string } | undefined>
+  }
+  uiWorkspace?: { selection?: SnapshotSource<{ sessionId?: string } | undefined> }
+}
+
+const zh = {
+  'subagentModel.badge.aria': '子代理模型与推理深度 {model}',
+} as const
+
+const en: Record<keyof typeof zh, string> = {
+  'subagentModel.badge.aria': 'Subagent model and reasoning effort {model}',
+}
+
+/** Take one optional service without requiring it in the plugin's inject list. */
+function optionalService<T>(ctx: ClientContext, name: string): T | undefined {
+  try {
+    return (ctx.get as unknown as (id: string, strict?: boolean) => unknown)(name, false) as T | undefined
+  } catch {
+    return undefined
+  }
+}
+
+/** Read a source without letting a hostile or proxied face throw. */
+function read<T>(reader: () => T): T | undefined {
+  try {
+    return reader()
+  } catch {
+    return undefined
+  }
+}
+
+/** The session the operator is in: public adapter binding first. */
+function currentSessionId(faces: SelectionFaces): string | undefined {
+  const candidates = [
+    read(() => faces.uiSession?.adapter?.current?.getSnapshot()?.key),
+    read(() => faces.uiSession?.current?.getSnapshot()?.key),
+    read(() => faces.uiWorkspace?.selection?.getSnapshot()?.sessionId),
+  ]
+  for (const candidate of candidates) {
+    if (typeof candidate === 'string' && candidate !== '') return candidate
+  }
+  return undefined
+}
+
+/** Mount the read-only model badge observer within the conversation position. */
+export function mountSubagentModel(ctx: ClientContext): () => void {
+  const sessions = optionalService<ISessions>(ctx, 'sessions')
+  if (sessions === undefined || typeof sessions.list?.subscribe !== 'function') return () => {}
+  const disposers: Array<() => void> = []
+
+  try {
+    disposers.push(ctx.locale.register(NS, { zh, en }))
+  } catch {
+    // A duplicate namespace registration must not break the web shell.
+  }
+  const translate = ctx.locale.bind(NS)
+  const ariaLabel = (value: string): string => translate(
+    'subagentModel.badge.aria' as ConversationLocaleKey,
+    { model: value },
+  )
+
+  const labels = new Map<string, string>()
+  const models = new Map<string, string>()
+  const dirtyRoots = new Set<Element>()
+  let scanTimer: ReturnType<typeof setTimeout> | undefined
+  let idleHandle: number | undefined
+  let fullScanPending = true
+
+  /** The selection faces, re-read per scan so a late service is picked up. */
+  const selectionFaces = (): SelectionFaces => ({
+    uiSession: optionalService<SelectionFaces['uiSession']>(ctx, 'uiSession'),
+    uiWorkspace: optionalService<SelectionFaces['uiWorkspace']>(ctx, 'uiWorkspace'),
+  })
+
+  /** Project the list snapshot into the DOM matcher's two maps. */
+  const rebuild = (): void => {
+    labels.clear()
+    models.clear()
+    const snapshot = sessions.list.getSnapshot() as unknown as SubagentListSnapshotLike
+    const { badges } = resolveSubagentBadges(snapshot, currentSessionId(selectionFaces()))
+    for (const badge of badges) {
+      for (const label of badge.labels) labels.set(label, badge.childId)
+      if (badge.modelText !== undefined) models.set(badge.childId, badge.modelText)
+    }
+  }
+
+  const scheduleScan = (): void => {
+    if (scanTimer !== undefined) clearTimeout(scanTimer)
+    scanTimer = setTimeout(() => {
+      scanTimer = undefined
+      const requestIdle = (globalThis as {
+        requestIdleCallback?: (callback: () => void) => number
+      }).requestIdleCallback
+      if (typeof requestIdle === 'function') {
+        idleHandle = requestIdle(() => { runScan() })
+      } else {
+        runScan()
+      }
+    }, SCAN_DEBOUNCE_MS)
+  }
+
+  function runScan(): void {
+    if (typeof document === 'undefined' || document.body === null) return
+    try {
+      rebuild()
+      const deps = { labels, models, ariaLabel }
+      if (fullScanPending) scanSubagentRows(document.body, deps)
+      else scanSubagentCatalogRows(document.body, deps)
+      fullScanPending = false
+      for (const root of dirtyRoots) {
+        if (!root.isConnected) continue
+        scanSubagentToolRows(root, deps)
+      }
+      dirtyRoots.clear()
+    } catch {
+      // The badge is progressive enhancement and never blocks the shell.
+    }
+  }
+
+  if (typeof document !== 'undefined' && document.body !== null && typeof MutationObserver !== 'undefined') {
+    const observer = new MutationObserver((records) => {
+      for (const record of records) {
+        const nodes = record.addedNodes.length > 0 ? record.addedNodes : [record.target]
+        for (const node of Array.from(nodes)) {
+          const element = node instanceof Element ? node : node.parentElement
+          if (element === null) continue
+          dirtyRoots.add(element)
+          while (dirtyRoots.size > 32) {
+            const oldest = dirtyRoots.values().next().value
+            if (oldest === undefined) break
+            dirtyRoots.delete(oldest)
+          }
+        }
+      }
+      scheduleScan()
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
+    const unsubscribe = sessions.list.subscribe(() => {
+      fullScanPending = true
+      scheduleScan()
+    })
+    scheduleScan()
+    disposers.push(() => {
+      observer.disconnect()
+      unsubscribe()
+      if (scanTimer !== undefined) clearTimeout(scanTimer)
+      if (idleHandle !== undefined) {
+        const cancelIdle = (globalThis as {
+          cancelIdleCallback?: (handle: number) => void
+        }).cancelIdleCallback
+        cancelIdle?.(idleHandle)
+      }
+    })
+  }
+
+  return () => {
+    for (const dispose of disposers.reverse()) dispose()
+  }
+}