From a6c7cf63c136b8a79e24c5308a9d3e3210ff42b0 Mon Sep 17 00:00:00 2001
From: Kunping Wang <146500293+wang-kaopu@users.noreply.github.com>
Date: Sat, 29 Aug 2026 10:13:52 +0800
Subject: [PATCH] =?UTF-8?q?perf(sidebar):=20=E9=81=BF=E5=85=8D=E5=B7=B2?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E4=BC=9A=E8=AF=9D=E5=88=97=E6=97=B6=E9=87=8D?=
 =?UTF-8?q?=E5=A4=8D=E6=9F=A5=E8=AF=A2=20DOM?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 缓存会话列仍连接时跳过 #root 全树 querySelector
- 保留 detached/HMR 回退定位与 1.5s safety net
- 补充 locator 行为测试覆盖缓存复用与节点替换
---
 src/client/Sidebar.tsx              | 14 +++++---
 src/client/center-column.ts         | 22 ++++++++++++
 tests/center-column-locator.spec.ts | 53 +++++++++++++++++++++++++++++
 3 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 src/client/center-column.ts
 create mode 100644 tests/center-column-locator.spec.ts

diff --git a/src/client/Sidebar.tsx b/src/client/Sidebar.tsx
index 8897571..1190a6f 100644
--- a/src/client/Sidebar.tsx
+++ b/src/client/Sidebar.tsx
@@ -47,6 +47,7 @@ import { IconPanelBottomOutline16, IconPanelRightOutline16 } from './icons.tsx'
 import { Workbench, type WorkbenchActions } from './split-pane.tsx'
 import { isNarrowWidth, useViewportSize } from './breakpoints.ts'
 import { layoutPushSize } from './layout-push.ts'
+import { resolveCenterColumn } from './center-column.ts'
 import { parseDesktopEnv } from './desktop-env.ts'
 import { getWcoSnapshot, subscribeWco } from './wco.ts'
 import { getShellPreset } from './shell-presets.ts'
@@ -738,8 +739,10 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
     // (observed: a 1px sliver at the viewport's left edge).
     const locate = (): void => {
       if (disposed) return
-      const col = document.querySelector('#root [data-slot="conversation"]')
-        ?.parentElement as HTMLElement | undefined
+      // Hot path (#403): streaming output mutates #root at token cadence.
+      // Reuse a still-connected center column and only query after boot/HMR
+      // detached the cached node.
+      const col = resolveCenterColumn(centerColRef.current)
       if (col === undefined || !col.isConnected) {
         if (centerColRef.current !== null) {
           centerColRef.current = null
@@ -771,7 +774,7 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
       // Mid-drag every frame writes --dsh-sidebar-* on <html>'s style
       // attribute, which is the mutation this watcher observes — relocating
       // per drag frame is pointless (the center column node cannot change
-      // while the pointer is captured) and adds a querySelector to every
+      // while the pointer is captured) and adds locator work to every
       // frame's budget (#315). The 1.5s retry below still covers any node
       // swap that somehow lands mid-drag.
       if (draggingRef.current) return
@@ -798,8 +801,9 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
     // may end up byte-identical, and the col may be swapped before the
     // subtree watcher attaches). A slow unconditional re-locate makes the
     // panel converge on the real column within a couple of seconds no
-    // matter what sequence the shell used. locate() is cheap when nothing
-    // changed (one querySelector + an identity compare; no forced layout).
+    // matter what sequence the shell used. locate() is query-free while the
+    // cached column stays connected; only a detached/missing cache falls
+    // back to the document selector.
     const retry = window.setInterval(locate, 1500)
     return () => {
       disposed = true
diff --git a/src/client/center-column.ts b/src/client/center-column.ts
new file mode 100644
index 0000000..ed9f5ab
--- /dev/null
+++ b/src/client/center-column.ts
@@ -0,0 +1,22 @@
+/** Stable selector for the DSH AppFrame conversation slot. */
+const CENTER_COLUMN_SELECTOR = '#root [data-slot="conversation"]'
+
+/**
+ * Resolve the AppFrame center column while keeping the hot path query-free.
+ *
+ * Streaming chat output mutates `#root` at token cadence, so Sidebar's
+ * MutationObserver can call this once per animation frame. Once the center
+ * column has been found, its DOM identity is stable for the conversation
+ * lifecycle; checking `isConnected` is enough to reuse it without scanning
+ * the whole app tree again. Boot/HMR replacement still falls through to the
+ * document query as soon as the cached node is detached.
+ */
+export function resolveCenterColumn(
+  current: HTMLElement | null,
+  query: () => Element | null = () => document.querySelector(CENTER_COLUMN_SELECTOR),
+): HTMLElement | undefined {
+  if (current !== null && current.isConnected) return current
+
+  const col = query()?.parentElement
+  return col !== null && col !== undefined && col.isConnected ? col : undefined
+}
diff --git a/tests/center-column-locator.spec.ts b/tests/center-column-locator.spec.ts
new file mode 100644
index 0000000..d1f9f90
--- /dev/null
+++ b/tests/center-column-locator.spec.ts
@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { resolveCenterColumn } from '../src/client/center-column.ts'
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+function connectedColumn(): { col: HTMLDivElement; slot: HTMLDivElement } {
+  const col = document.createElement('div')
+  const slot = document.createElement('div')
+  slot.dataset.slot = 'conversation'
+  col.append(slot)
+  document.body.append(col)
+  return { col, slot }
+}
+
+describe('center-column locator (issue #403)', () => {
+  it('reuses a connected cached column without querying the app tree', () => {
+    const { col } = connectedColumn()
+    const query = vi.fn<() => Element | null>(() => null)
+
+    expect(resolveCenterColumn(col, query)).toBe(col)
+    expect(query).not.toHaveBeenCalled()
+  })
+
+  it('queries and adopts the replacement after the cached column detaches', () => {
+    const stale = connectedColumn().col
+    stale.remove()
+    const { col: replacement, slot } = connectedColumn()
+    const query = vi.fn<() => Element | null>(() => slot)
+
+    expect(resolveCenterColumn(stale, query)).toBe(replacement)
+    expect(query).toHaveBeenCalledTimes(1)
+  })
+
+  it('queries when no column has been cached yet', () => {
+    const { col, slot } = connectedColumn()
+    const query = vi.fn<() => Element | null>(() => slot)
+
+    expect(resolveCenterColumn(null, query)).toBe(col)
+    expect(query).toHaveBeenCalledTimes(1)
+  })
+
+  it('rejects a missing or detached query result', () => {
+    expect(resolveCenterColumn(null, () => null)).toBeUndefined()
+
+    const detachedCol = document.createElement('div')
+    const detachedSlot = document.createElement('div')
+    detachedCol.append(detachedSlot)
+    expect(resolveCenterColumn(null, () => detachedSlot)).toBeUndefined()
+  })
+})