dsh-sidecard-ask 2.0.1 → 2.1.0

package/client.js

@@ -35,7 +35,77 @@ window.__ModuleLoader__.load({
     // ─────────────────────────────────────────────────────────────────────
 
     const PLUGIN_ID = 'dsh-sidecard-ask'
-    const API = '/sidecard-ask/api'
+    /**
+     * Base path of this plugin's Host API.
+     *
+     * Resolved against `document.baseURI` rather than hard-coded as the
+     * root-absolute `/sidecard-ask/api`, which is what the Host's own Client
+     * does for its transport base (`dsh-client-connection/lib/client.browser.js`:
+     * `const base = baseUrl ?? document.baseURI`). A root-absolute path drops
+     * the deployment prefix, so a DSH served under a path prefix
+     * (`dsh web --public-url https://host/dsh/`) sent every request to
+     * `/sidecard-ask/api/*` and got a 404. The Electron shell also loads the app
+     * from `dsh-app://app/`, where only a document-relative path is meaningful.
+     *
+     * At the document root (both the default Web deployment and the Electron
+     * shell) this evaluates to exactly the previous `/sidecard-ask/api`, so no
+     * existing deployment changes behaviour. `document.baseURI` already carries
+     * the trailing slash the Host normalises its public root to; the explicit
+     * `replace` below keeps that true even if a `<base>` without one is used.
+     */
+    const API = (() => {
+      try {
+        const base = typeof document === 'undefined' ? undefined : document.baseURI
+        if (typeof base !== 'string' || base === '') return '/sidecard-ask/api'
+        return `${new URL('.', base).pathname.replace(/\/$/, '')}/sidecard-ask/api`
+      } catch {
+        return '/sidecard-ask/api'
+      }
+    })()
+
+    /** Root-absolute base — the retry target when the prefix guess misses. */
+    const API_ROOT = '/sidecard-ask/api'
+
+    /**
+     * The base actually used from now on.
+     *
+     * `new URL('.', base)` treats the last path segment as a FILE name, so a
+     * deployment whose public URL has no trailing slash (`https://host/dsh`)
+     * resolves to the document root and loses the prefix. There is no way to
+     * tell `/dsh` (directory) from `/dsh` (file) without asking the server, so
+     * the first `404` retries once against the root-absolute base: 404 is the
+     * only unambiguous signal here — auth answers `401`, a foreign origin
+     * `403`, and `404` means the route is not mounted at this path at all.
+     */
+    let apiBase = API
+
+    /**
+     * The base to use after one response.
+     * @param {number} status - HTTP status of the attempt.
+     * @param {string} current - the base that produced it.
+     * @returns {string} the base for the next attempt (unchanged unless 404).
+     */
+    function apiBaseAfter(status, current) {
+      return status === 404 && current !== API_ROOT ? API_ROOT : current
+    }
+
+    /**
+     * `fetch` against the plugin API, retrying once on a 404 with the other
+     * base. A 404 body is never consumed here: the caller's own error path
+     * reads it (or ignores it), exactly as before.
+     * @param {string} path - `/state` or `/ask`, appended to the base.
+     * @param {RequestInit} [init] - fetch options (body must be replayable).
+     * @returns {Promise<Response>} the response of whichever attempt answered.
+     */
+    async function fetchApi(path, init) {
+      const attempted = apiBase
+      let response = await fetch(`${attempted}${path}`, init)
+      if (response.status === 404 && attempted !== API_ROOT) {
+        apiBase = apiBaseAfter(response.status, attempted)
+        response = await fetch(`${apiBase}${path}`, init)
+      }
+      return response
+    }
     /** Slot ids contributed by this plugin (also the overlay entry ids). */
     const IDS = {
       overlay: 'sidecard-ask',
@@ -47,7 +117,7 @@ window.__ModuleLoader__.load({
      * the Host and the module's `api.version` both read it, so a report can
      * never claim a generation the browser is not actually running.
      */
-    const CLIENT_VERSION = '2.0.1'
+    const CLIENT_VERSION = '2.1.0'
 
     /**
      * Tab kind served by the DSH native right rail (also its implementation id).
@@ -77,6 +147,41 @@ window.__ModuleLoader__.load({
      */
     const HISTORY_TURNS = 6
 
+    // Per-turn wire caps mirroring the Host's prompt-side limits: a long earlier
+    // answer must neither bloat the request body past the 1 MiB limit nor push
+    // the current question out of the child prompt.
+    const HISTORY_TURN_Q_CHARS = 500
+    const HISTORY_TURN_A_CHARS = 4000
+
+    /**
+     * Streaming flush cadence.
+     *
+     * 50 ms is the cadence that reads as "live"; a 32 k+ answer costs 1.2–2.0 ms
+     * of markdown parsing per frame (measured, both Chromium 150 and 155), so
+     * past that length the cadence doubles — the eye cannot tell, and the work
+     * halves.
+     */
+    const STREAM_FLUSH_MS = 50
+    const STREAM_FLUSH_SLOW_MS = 100
+    const STREAM_SLOW_CHARS = 32_000
+
+    /**
+     * How many cards may stay mounted at once. Past this the oldest finished
+     * card is hidden (not deleted): its body unmounts, its data stays, and the
+     * durable history still restores it.
+     */
+    const MAX_LIVE_CARDS = 20
+
+    /**
+     * How many characters of history a page load may re-render unfolded.
+     *
+     * Replay used to restore every saved card `open:true`, bounded only by the
+     * card count (default 10) and a 64 k per-field limit — a worst case of
+     * ~640 k characters of markdown parsed and mounted before the page is
+     * usable. Past this budget the older cards come back collapsed.
+     */
+    const REPLAY_OPEN_BUDGET_CHARS = 200_000
+
     /**
      * Client-side mirror of the Host `DEFAULT_CONFIG`. The client needs values
      * before `/state` answers (first paint) and when the Host is unreachable;
@@ -508,6 +613,8 @@ window.__ModuleLoader__.load({
         errorNoParentBody: '当前没有活动的会话代理，无法发起独立作答',
         errorAborted: '作答被取消或超时',
         errorUnreachableBody: '宿主接口不可达',
+        errorUnauthorizedBody: '需要先通过 DSH 登录（宿主会话未认证）',
+        errorForbiddenBody: '请求来源不受信任（Host / Origin 不匹配）',
         errorBadResponseBody: '宿主返回了无法解析的响应',
         errorStreamBrokenBody: '流式连接中断',
         errorStreamEndedBody: '流式连接意外结束',
@@ -776,6 +883,8 @@ window.__ModuleLoader__.load({
         errorNoParentBody: 'No active session agent to answer independently',
         errorAborted: 'The answer was cancelled or timed out',
         errorUnreachableBody: 'The host API is unreachable',
+        errorUnauthorizedBody: 'Sign in to DSH first (the host session is not authenticated)',
+        errorForbiddenBody: 'Untrusted request origin (Host / Origin mismatch)',
         errorBadResponseBody: 'The host returned an unreadable response',
         errorStreamBrokenBody: 'The stream connection broke',
         errorStreamEndedBody: 'The stream ended without a terminal event',
@@ -1049,6 +1158,11 @@ window.__ModuleLoader__.load({
       'no-parent': { key: 'errorNoParentBody' },
       aborted: { key: 'errorAborted' },
       unreachable: { key: 'errorUnreachableBody' },
+      // The Host now gates these routes on the DSH browser session, so both are
+      // fully known Client-side: "log in" and "untrusted origin" are actionable
+      // in a way a generic unreachable message is not.
+      unauthorized: { key: 'errorUnauthorizedBody' },
+      forbidden: { key: 'errorForbiddenBody' },
       'bad-response': { key: 'errorBadResponseBody' },
       'stream-broken': { key: 'errorStreamBrokenBody' },
       'stream-ended': { key: 'errorStreamEndedBody' },
@@ -1080,7 +1194,7 @@ window.__ModuleLoader__.load({
     async function postJson(method, payload) {
       let response
       try {
-        response = await fetch(`${API}/${method}`, {
+        response = await fetchApi(`/${method}`, {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify(payload ?? {}),
@@ -1102,10 +1216,24 @@ window.__ModuleLoader__.load({
 
     /** GET the plugin state (`/state` also answers POST, GET keeps it cacheable-free). */
     async function getState() {
-      const response = await fetch(`${API}/state`, { method: 'GET' })
-      const body = await response.json()
-      if (body?.ok !== true) throw Object.assign(new Error('state failed'), { code: 'bad-response' })
-      return body.value
+      let response
+      try {
+        response = await fetchApi('/state', { method: 'GET' })
+      } catch (error) {
+        throw Object.assign(new Error(String(error?.message ?? error)), { code: 'unreachable' })
+      }
+      let body
+      try {
+        body = await response.json()
+      } catch {
+        throw Object.assign(new Error(`HTTP ${response.status}`), { code: 'bad-response' })
+      }
+      // Keep the Host's own code: a 401 ("log in first") and a 403 ("untrusted
+      // origin") are actionable in a way that a generic bad-response is not.
+      if (body?.ok === true) return body.value
+      const failure = new Error(body?.error?.message ?? `HTTP ${response.status}`)
+      failure.code = body?.error?.code ?? 'bad-response'
+      throw failure
     }
 
     /**
@@ -1118,7 +1246,7 @@ window.__ModuleLoader__.load({
     async function streamAsk(payload, handlers) {
       let response
       try {
-        response = await fetch(`${API}/ask`, {
+        response = await fetchApi('/ask', {
           method: 'POST',
           headers: { 'content-type': 'application/json', accept: 'text/event-stream' },
           body: JSON.stringify(payload),
@@ -1130,7 +1258,18 @@ window.__ModuleLoader__.load({
         return
       }
       if (!response.ok || response.body === null) {
-        handlers.onError({ code: `http-${response.status}`, message: `HTTP ${response.status}` })
+        // Non-200 answers are JSON errors ({ok:false,error:{code,message}}),
+        // not SSE; surface the server's localized code instead of a bare
+        // "HTTP 400".
+        let wire = null
+        try {
+          const rawBody = await response.text()
+          const parsed = rawBody ? JSON.parse(rawBody) : null
+          if (parsed?.error !== null && typeof parsed?.error === 'object') wire = parsed.error
+        } catch { wire = null }
+        handlers.onError(wire && typeof wire.code === 'string'
+          ? wire
+          : { code: `http-${response.status}`, message: `HTTP ${response.status}` })
         return
       }
       const reader = response.body.getReader()
@@ -1257,6 +1396,57 @@ window.__ModuleLoader__.load({
       return store.state
     }
 
+    /**
+     * Per-card handler bundle with a STABLE identity.
+     *
+     * `store.set` bumps a revision on every streamed delta, and the floating
+     * layer re-renders on each one. Handing `AnswerCard` a fresh arrow per
+     * render makes every prop compare unequal, so `React.memo` could never bail
+     * out. The bundle is therefore created once per card id and reads the card
+     * through a ref at call time — a closure must never capture a stale card,
+     * or "copy" would copy the text from two deltas ago.
+     * @param {object} actions - the plugin's action table (stable for the
+     *   lifetime of `apply`).
+     * @returns {(card: object) => object} handler bundle for one card.
+     */
+    function useCardHandlers(actions) {
+      const latest = React.useRef(new Map())
+      const cache = React.useRef(new Map())
+      return React.useCallback((card) => {
+        if (card === null || card === undefined) return null
+        latest.current.set(card.id, card)
+        let bundle = cache.current.get(card.id)
+        if (bundle === undefined) {
+          // The maps are keyed by card id and live for the whole session, so a
+          // long session would keep one tiny bundle per card ever shown. Past a
+          // generous ceiling both are dropped: the live cards simply get a
+          // fresh (still stable) bundle and re-render once.
+          if (cache.current.size > 64) {
+            cache.current.clear()
+            latest.current.clear()
+          }
+          const current = () => latest.current.get(card.id) ?? card
+          bundle = {
+            onCopy: element => actions.copy(current(), element),
+            onFollowUp: text => actions.followUp(current(), text),
+            onRetry: () => actions.retry(current()),
+            onRetryEdit: text => actions.retryEdit(current(), text),
+            onCancel: () => actions.cancel(current()),
+            onSendToMain: () => { void actions.sendToMain(current()) },
+            onClose: () => actions.close(current()),
+            onLocate: target => actions.locateCard(target ?? current()),
+            onExport: target => actions.exportCard(target ?? current()),
+            onInsert: target => actions.insertAnswer(target ?? current()),
+            onReplace: target => actions.insertAnswer(target ?? current(), { replace: true }),
+            onViewVersion: index => actions.viewVersion(current(), index),
+            onDelete: () => actions.deleteCard(current()),
+          }
+          cache.current.set(card.id, bundle)
+        }
+        return bundle
+      }, [actions])
+    }
+
     // ─────────────────────────────────────────────────────────────────────
     // §4.5 family singleton
     //
@@ -1364,20 +1554,63 @@ window.__ModuleLoader__.load({
       return cards.find(card => card.id === id)
     }
 
-    /** Append text to one card's streaming answer. */
-    function appendCardText(id, delta) {
-      const cards = store.state.cards.map(card => (
-        card.id === id ? { ...card, text: card.text + delta } : card
-      ))
-      store.set({ cards })
+    /**
+     * Hide the oldest finished cards once a stack exceeds its cap.
+     *
+     * Pure so the rule can be asserted without a renderer: the newest card and
+     * anything still streaming are never hidden, `open:false` cards are skipped
+     * (already hidden), and the input array is not mutated.
+     * @param {object[]} cards - newest first.
+     * @param {number} [cap] - how many may stay visible.
+     * @param {string|null} [keptId] - id that must survive this pass.
+     * @returns {object[]} the same list, with overflow entries closed.
+     */
+    function capLiveCards(cards, cap = MAX_LIVE_CARDS, keptId = null) {
+      if (!Array.isArray(cards) || cards.length <= cap) return cards
+      const next = [...cards]
+      let excess = next.length - cap
+      for (let index = next.length - 1; index >= 0 && excess > 0; index -= 1) {
+        const item = next[index]
+        if (item === null || item === undefined) continue
+        if (item.id === keptId || item.open === false) continue
+        if (item.status === 'pending' || item.status === 'streaming') continue
+        next[index] = { ...item, open: false }
+        excess -= 1
+      }
+      return next
     }
 
-    /** Append reasoning text to one card. */
-    function appendCardReasoning(id, delta) {
-      const cards = store.state.cards.map(card => (
-        card.id === id ? { ...card, reasoning: card.reasoning + delta } : card
-      ))
-      store.set({ cards })
+    /**
+     * Whether replayed card `index` comes back unfolded.
+     *
+     * The newest replay always does — a page load that hides everything would
+     * look like data loss — and the rest only while the running total stays
+     * inside the budget.
+     * @param {number} index - 0 = newest.
+     * @param {number} replayedChars - characters replayed so far, inclusive.
+     * @returns {boolean} true when the card should mount unfolded.
+     */
+    function replayCardOpen(index, replayedChars) {
+      return index === 0 || replayedChars <= REPLAY_OPEN_BUDGET_CHARS
+    }
+
+    /**
+     * Prepend one card, hiding the oldest FINISHED card once the stack grows
+     * past the live cap.
+     *
+     * Cards used to accumulate for the whole session: nothing capped
+     * `store.state.cards`, so a long session kept every answer mounted (each
+     * one a full React subtree). Past the cap the oldest finished card is
+     * hidden — `open:false` keeps its data, unmounts its body, and the durable
+     * history still offers it back. A card that is still streaming is never
+     * hidden: that would orphan its stream.
+     * @param {object} card - the card to put on top.
+     * @param {object} [extra] - additional store fields to commit in the same
+     *   update (the carrier's surface label, for instance).
+     */
+    function pushCard(card, extra = null) {
+      const cards = capLiveCards([card, ...store.state.cards], MAX_LIVE_CARDS, card.id)
+      store.set(extra === null ? { cards } : { ...extra, cards })
     }
 
     /** Show a transient toast line. */
@@ -1531,14 +1764,25 @@ window.__ModuleLoader__.load({
      * Truncate an over-long selection for an outgoing prompt, keeping head and
      * tail. Mirrors the Host's `truncateSelection` (asserted by contract test):
      * code points, not UTF-16 units, so a surrogate pair is never split.
+     *
+     * The omission note is charged to the budget, not added on top of it: an
+     * "inclusive cap" that the note itself overflows by ~19 characters is not a
+     * cap, and the Host sizes its prompt budget from what a fixed prompt
+     * leaves over.
      * @returns {{text: string, truncated: boolean, droppedChars: number}}
      */
     function truncateSelection(text, maxChars) {
       const source = typeof text === 'string' ? text : ''
       const points = Array.from(source)
-      if (points.length <= maxChars) return { text: source, truncated: false, droppedChars: 0 }
-      const head = Math.max(1, Math.ceil(maxChars * 0.7))
-      const tail = Math.max(0, maxChars - head)
+      const cap = Number.isFinite(maxChars) ? Math.max(0, Math.floor(maxChars)) : points.length
+      if (points.length <= cap) return { text: source, truncated: false, droppedChars: 0 }
+      const noteLength = Array.from(`\n…（已省略中间 ${points.length} 个字符）…\n`).length
+      const room = cap - noteLength
+      if (room < 2) {
+        return { text: points.slice(0, cap).join(''), truncated: true, droppedChars: points.length - cap }
+      }
+      const head = Math.max(1, Math.ceil(room * 0.7))
+      const tail = Math.max(0, room - head)
       const dropped = points.length - head - tail
       return {
         text: `${points.slice(0, head).join('')}\n…（已省略中间 ${dropped} 个字符）…\n${tail > 0 ? points.slice(points.length - tail).join('') : ''}`,
@@ -2525,14 +2769,24 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
       return h('style', { 'data-dsa-style': '' }, CSS_TEXT)
     }
 
+    /**
+     * Inline markdown-lite token scanner.
+     *
+     * Hoisted out of {@link inlineNodes} because a long answer calls it once per
+     * line/paragraph on every render, and a fresh RegExp literal per call was
+     * pure allocation on the streaming hot path. `/g` is stateful, so the
+     * scanner resets `lastIndex` before each use (it never recurses).
+     */
+    const INLINE_TOKEN_RE = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*\n]+\*|\[[^\]\n]+\]\(https?:\/\/[^\s)]+\))/g
+
     /** Inline markdown-lite: `code`, **bold**, *italic*, [label](http url) — never innerHTML. */
     function inlineNodes(text, key) {
       const out = []
-      const pattern = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*\n]+\*|\[[^\]\n]+\]\(https?:\/\/[^\s)]+\))/g
+      INLINE_TOKEN_RE.lastIndex = 0
       let last = 0
       let match
       let index = 0
-      while ((match = pattern.exec(text)) !== null) {
+      while ((match = INLINE_TOKEN_RE.exec(text)) !== null) {
         if (match.index > last) out.push(text.slice(last, match.index))
         const token = match[0]
         if (token.startsWith('`')) {
@@ -3873,18 +4127,27 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
       // context, not the answer, and a long chain-of-thought would otherwise
       // bury the answer the user asked for. Collapsed by default, open on
       // demand — the text inside still streams live while it is open.
-      const reasoning = typeof card.reasoning === 'string' && card.reasoning !== ''
+      const reasoningText = typeof card.reasoning === 'string' ? card.reasoning : ''
+      // Memoised like the answer below: without this every 50 ms delta of the
+      // ANSWER re-parsed the whole reasoning stream as well, and reasoning is
+      // usually the longer of the two.
+      const reasoningNodes = React.useMemo(() => renderRichText(reasoningText), [reasoningText])
+      const reasoning = reasoningText !== ''
         ? h('details', { className: 'dsa-details' },
             h('summary', null, t('reasoningTitle')),
-            h('div', { className: 'dsa-reasoning' }, renderRichText(card.reasoning)))
+            h('div', { className: 'dsa-reasoning' }, reasoningNodes))
         : null
       // P2-4: the `<followups>` block is machine-readable scaffolding, never
       // prose. While streaming it is hidden from the first unclosed tag (a
       // half-written marker must not flash); once terminal the whole block is
       // stripped and only the answer is rendered.
-      const bodyText = card.status === 'streaming'
+      // P6: parseFollowUps/streamVisibleText run over the whole answer on every
+      // 50ms flush; memoize by the text so an unrelated store update does not
+      // re-parse a long answer.
+      const bodyText = React.useMemo(() => card.status === 'streaming'
         ? streamVisibleText(card.text)
-        : parseFollowUps(card.text).text
+        : parseFollowUps(card.text).text, [card.text, card.status])
+      const answerNodes = React.useMemo(() => renderRichText(bodyText), [bodyText])
       // Follow the stream only while the reader sits at the bottom; scrolling
       // up to reread an earlier paragraph must win over the auto-scroll. The
       // 48px slack keeps single-line deltas from losing the tail.
@@ -3914,7 +4177,7 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
         return h('div', null, reasoning, h('div', { className: 'dsa-muted' }, t('answerEmpty')))
       }
       return h('div', { className: 'dsa-answer', ref: containerRef },
-        reasoning, renderRichText(bodyText))
+        reasoning, answerNodes)
     }
 
     /** Card footer: status, copy, follow-up, retry/edit-retry, close. */
@@ -4335,6 +4598,19 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
           : null)
     }
 
+    /**
+     * Memoised {@link AnswerCard}.
+     *
+     * Only the card that actually changed gets a new `card` object
+     * (`patchCard` / the stream flush keep every other card by reference), and
+     * the handler bundle from {@link useCardHandlers} is stable per id — so a
+     * delta on card A no longer re-renders cards B..N. `React.memo` is probed
+     * because the test double (and any trimmed-down React a host might hand a
+     * plugin) does not have to implement it; without it this is the same
+     * component, just un-memoised.
+     */
+    const MemoAnswerCard = typeof React.memo === 'function' ? React.memo(AnswerCard) : AnswerCard
+
     /**
      * The flow surface, i.e. the floating layer (A).
      *
@@ -4354,6 +4630,7 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
       const containerRef = React.useRef(null)
       const dockRef = React.useRef(null)
       const state = useStoreState()
+      const handlersFor = useCardHandlers(actions)
       const [dock, setDock] = React.useState(null)
       const visible = cards.filter(card => card.surface === 'flow' && card.open)
       const total = visible.length
@@ -4467,16 +4744,20 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
         }
         if (typeof window.addEventListener === 'function') window.addEventListener('resize', schedule)
         // Opening/closing the rail changes no size this effect already watches,
-        // so the DOM itself has to be the trigger. Attributes only (no
-        // childList): streaming tokens rewrite text nodes continuously and must
-        // not wake the layer on every frame.
+        // so the DOM itself has to be the trigger. The two data attributes are
+        // the only signals that MEAN "the rail geometry changed". `class` and
+        // `style` used to be in this list too, and a chat pane rewrites both
+        // constantly (hover, scroll state, streaming badges) — every one of
+        // those woke this observer and forced a layout read on the next frame.
+        // Streaming tokens rewrite text nodes, which `childList`-free observing
+        // already ignores.
         if (typeof window.MutationObserver === 'function' && document.body !== null && document.body !== undefined) {
           try {
             mutation = new window.MutationObserver(schedule)
             mutation.observe(document.body, {
               attributes: true,
               subtree: true,
-              attributeFilter: ['data-sidebar-right-open', 'data-dockkit-pane-active', 'style', 'class'],
+              attributeFilter: ['data-sidebar-right-open', 'data-dockkit-pane-active'],
             })
           } catch { mutation = null }
         }
@@ -4529,24 +4810,14 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
           : null),
       }, children)
 
-      const cardNodes = visible.map(card => h(AnswerCard, {
+      const cardNodes = visible.map(card => h(MemoAnswerCard, {
         key: card.id,
         card,
         surfaceLabel: null,
-        onCopy: element => actions.copy(card, element),
-        onFollowUp: text => actions.followUp(card, text),
-        onRetry: () => actions.retry(card),
-        onRetryEdit: text => actions.retryEdit(card, text),
-        onCancel: () => actions.cancel(card),
-        onSendToMain: () => actions.sendToMain(card),
-        onClose: () => actions.close(card),
-        onLocate: target => actions.locateCard(target ?? card),
-        onExport: target => actions.exportCard(target ?? card),
-        onInsert: target => actions.insertAnswer(target ?? card),
-        onReplace: target => actions.insertAnswer(target ?? card, { replace: true }),
-        onViewVersion: index => actions.viewVersion(card, index),
         onFloatMode: setFloatMode,
-        onDelete: () => actions.deleteCard(card),
+        // Stable per card id (see useCardHandlers), which is what lets
+        // React.memo skip every card that did not change in this tick.
+        ...handlersFor(card),
       }))
 
       if (mode === 'capsule') {
@@ -5382,6 +5653,31 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
         const PERSIST_LEGACY_KEY = 'dsh-sidecard-ask:cards:v1'
         const PERSIST_FALLBACK_CARDS = 10
         const PERSIST_TEXT_LIMIT = 65536
+        /**
+         * Total character budget for the whole v3 payload (every card, every
+         * field), in UTF-16 code units — what the localStorage quota counts.
+         *
+         * The per-field cap alone allows ~0.9 MB for ONE card (four 64k fields
+         * plus five 64k×2 versions), so the default 10-card history could reach
+         * ~9 MB and blow the usual 5 MB quota on every write, which then fell
+         * into the drop-one-and-retry loop below. 2M units stays under the
+         * quota for mixed CJK/ASCII content and still holds ~20 long answers.
+         */
+        const PERSIST_TOTAL_CHARS = 2_000_000
+
+        /** Size of one history entry, in UTF-16 code units. */
+        const entryChars = (entry) => {
+          let total = 0
+          for (const key of ['question', 'selected', 'selection', 'text', 'reasoning']) {
+            total += String(entry?.[key] ?? '').length
+          }
+          for (const version of Array.isArray(entry?.versions) ? entry.versions : []) {
+            total += String(version?.question ?? '').length
+              + String(version?.text ?? '').length
+              + String(version?.reasoning ?? '').length
+          }
+          return total
+        }
 
         /** Configured durable cap, clamped to the Host's 0–50 range. */
         const historyCap = () => {
@@ -5425,12 +5721,36 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
         }
 
         function writePersisted(cards) {
-          try {
-            window.localStorage?.setItem(PERSIST_KEY, JSON.stringify({ version: 3, cards }))
-          } catch (error) {
-            // Quota or privacy mode — the cards stay on screen, just not durable.
-            console.warn(`[${PLUGIN_ID}] card history not persisted:`, error)
+          let remaining = Array.isArray(cards) ? [...cards] : []
+          // Budget the WHOLE payload first (see PERSIST_TOTAL_CHARS). Trimming
+          // here keeps the common case on the first successful write instead of
+          // walking into the quota branch at all.
+          let total = remaining.reduce((sum, entry) => sum + entryChars(entry), 0)
+          while (remaining.length > 0 && total > PERSIST_TOTAL_CHARS) {
+            total -= entryChars(remaining[remaining.length - 1])
+            remaining.pop()
+          }
+          // Newest first (cards are prepended); on quota, drop the OLDEST (tail)
+          // and retry instead of abandoning every card. An EMPTY array must still
+          // be written: deleting the last card clears the durable set on disk.
+          // Returns what actually landed so the manager mirrors the durable set.
+          let lastError = null
+          for (;;) {
+            try {
+              window.localStorage?.setItem(PERSIST_KEY, JSON.stringify({ version: 3, cards: remaining }))
+              return remaining
+            } catch (error) {
+              lastError = error
+              if (remaining.length === 0) break
+              // Drop HALF, not one: every retry re-serialises the whole payload,
+              // so the old one-at-a-time fallback was O(n²) stringify work on the
+              // main thread — exactly while the UI is finishing a card.
+              remaining = remaining.slice(0, Math.floor(remaining.length / 2))
+            }
           }
+          // Quota or privacy mode — the cards stay on screen, just not durable.
+          if (lastError !== null) console.warn(`[${PLUGIN_ID}] card history not persisted:`, lastError)
+          return []
         }
 
         /** Recompute the durable set from the live store and write it. */
@@ -5480,8 +5800,8 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
             store.set({ history: [] })
             return
           }
-          writePersisted(finished)
-          store.set({ history: finished })
+          const persisted = writePersisted(finished)
+          store.set({ history: persisted })
         }
 
         /** Replay finished cards from a previous page load into the store. */
@@ -5501,37 +5821,47 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
           if (cap > 0 && (currentRaw === null || currentRaw === undefined)) {
             writePersisted(saved)
           }
-          const replayed = saved.map(entry => ({
-            id: entry.id,
-            question: entry.question,
-            selected: String(entry.selected ?? ''),
-            selection: String(entry.selection ?? ''),
-            text: String(entry.text ?? ''),
-            reasoning: String(entry.reasoning ?? ''),
-            status: entry.status === 'stopped' ? 'stopped' : 'done',
-            carrier: 'side',
-            zone: entry.zone,
-            truncated: entry.truncated === true,
-            droppedChars: Number(entry.droppedChars ?? 0),
-            streaming: null,
-            error: null,
-            provider: typeof entry.provider === 'string' && entry.provider !== '' ? entry.provider : null,
-            elapsedMs: Number.isFinite(entry.elapsedMs) ? entry.elapsedMs : null,
-            createdAt: Number.isFinite(entry.createdAt) ? entry.createdAt : 0,
-            // P2-5b: replayed versions stay switchable after a reload.
-            versions: replayVersions(entry.versions),
-            viewingVersion: null,
-            actionId: typeof entry.actionId === 'string' && entry.actionId !== '' ? entry.actionId : null,
-            // A native/better tab cannot survive a reload, so history always
-            // comes back on the flow stack where it is visible immediately.
-            surface: 'flow',
-            open: true,
-            history: Array.isArray(entry.history)
-              ? entry.history
-                  .filter(turn => turn !== null && typeof turn === 'object')
-                  .map(turn => ({ question: String(turn.question ?? ''), answer: String(turn.answer ?? '') }))
-              : [],
-          }))
+          // Replay budget: the newest card always comes back unfolded, and the
+          // rest stay unfolded only while the running total of replayed
+          // characters stays under the budget. A page load used to mount up to
+          // 10 × 64 k characters of markdown before it was usable; past the
+          // budget the older cards come back collapsed and are parsed when the
+          // user opens them.
+          let replayedChars = 0
+          const replayed = saved.map((entry, index) => {
+            replayedChars += String(entry.text ?? '').length + String(entry.reasoning ?? '').length
+            return {
+              id: entry.id,
+              question: entry.question,
+              selected: String(entry.selected ?? ''),
+              selection: String(entry.selection ?? ''),
+              text: String(entry.text ?? ''),
+              reasoning: String(entry.reasoning ?? ''),
+              status: entry.status === 'stopped' ? 'stopped' : 'done',
+              carrier: 'side',
+              zone: entry.zone,
+              truncated: entry.truncated === true,
+              droppedChars: Number(entry.droppedChars ?? 0),
+              streaming: null,
+              error: null,
+              provider: typeof entry.provider === 'string' && entry.provider !== '' ? entry.provider : null,
+              elapsedMs: Number.isFinite(entry.elapsedMs) ? entry.elapsedMs : null,
+              createdAt: Number.isFinite(entry.createdAt) ? entry.createdAt : 0,
+              // P2-5b: replayed versions stay switchable after a reload.
+              versions: replayVersions(entry.versions),
+              viewingVersion: null,
+              actionId: typeof entry.actionId === 'string' && entry.actionId !== '' ? entry.actionId : null,
+              // A native/better tab cannot survive a reload, so history always
+              // comes back on the flow stack where it is visible immediately.
+              surface: 'flow',
+              open: replayCardOpen(index, replayedChars),
+              history: Array.isArray(entry.history)
+                ? entry.history
+                    .filter(turn => turn !== null && typeof turn === 'object')
+                    .map(turn => ({ question: String(turn.question ?? ''), answer: String(turn.answer ?? '') }))
+                : [],
+            }
+          })
           store.set({ cards: [...replayed, ...store.state.cards] })
         }
 
@@ -5605,7 +5935,7 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
             if (store.state.cards.some(card => card.id === id)) {
               patchCard(id, { surface: 'flow', open: true })
             } else {
-              store.set({ cards: [historyEntryToCard(entry), ...store.state.cards] })
+              pushCard(historyEntryToCard(entry))
             }
             // A collapsed (capsule) layer would swallow the restored card;
             // this is a session-only override, exactly like clicking expand.
@@ -5734,7 +6064,7 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
               actionId: payload?.actionId ?? null,
             }
             if (payload.carrier === 'main') {
-              store.set({ cards: [card, ...store.state.cards] })
+              pushCard(card)
               try {
                 const result = await askInMainConversation({
                   ctx,
@@ -5760,7 +6090,7 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
             }
             const { adapter, fellBack } = pickSurface(config.sideSurface)
             card.surface = adapter.kind
-            store.set({ cards: [card, ...store.state.cards], surface: adapter.kind })
+            pushCard(card, { surface: adapter.kind })
             if (fellBack) {
               store.set({ surfaceNote: t('surfaceFellBack', { name: adapter.label() }) })
               toast(t('surfaceUnavailable'))
@@ -5905,7 +6235,10 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
             return result
           },
           followUp(card, text) {
-            const history = [...card.history, { question: card.question, answer: card.text }]
+            const history = [...card.history, {
+              question: String(card.question ?? '').slice(0, HISTORY_TURN_Q_CHARS),
+              answer: String(card.text ?? '').slice(0, HISTORY_TURN_A_CHARS),
+            }].slice(-HISTORY_TURNS)
             const next = patchCard(card.id, {
               question: text,
               history,
@@ -6093,31 +6426,65 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
         const pendingReasonings = new Map()
         let deltaFlushTimer = null
 
+        /**
+         * Commit every buffered chunk for this tick as ONE store update.
+         *
+         * The previous shape published text and reasoning separately, so a
+         * single 50 ms tick could bump the store twice per streaming card —
+         * and every bump re-renders the whole overlay. With the concurrency
+         * cap at 3 that is up to 120 tree renders per second for two string
+         * appends. Cards that saw no chunk keep their identity, so a memoised
+         * card is not touched at all.
+         */
         const flushStreamBuffers = () => {
           if (deltaFlushTimer !== null) {
             clearTimeout(deltaFlushTimer)
             deltaFlushTimer = null
           }
-          if (pendingDeltas.size > 0) {
-            for (const [cardId, chunk] of [...pendingDeltas.entries()]) appendCardText(cardId, chunk)
-            pendingDeltas.clear()
-          }
-          if (pendingReasonings.size > 0) {
-            for (const [cardId, chunk] of [...pendingReasonings.entries()]) appendCardReasoning(cardId, chunk)
-            pendingReasonings.clear()
+          if (pendingDeltas.size === 0 && pendingReasonings.size === 0) return
+          const cards = store.state.cards.map((card) => {
+            const text = pendingDeltas.get(card.id)
+            const reasoning = pendingReasonings.get(card.id)
+            if (text === undefined && reasoning === undefined) return card
+            const next = { ...card }
+            if (text !== undefined) next.text = `${card.text}${text}`
+            if (reasoning !== undefined) next.reasoning = `${card.reasoning}${reasoning}`
+            return next
+          })
+          pendingDeltas.clear()
+          pendingReasonings.clear()
+          store.set({ cards })
+        }
+
+        /**
+         * Milliseconds to wait before the next flush.
+         *
+         * 50 ms is the "feels live" cadence, but the cost of one frame grows
+         * with the answer: `renderRichText` measured 0.2–0.3 ms at 8 k
+         * characters and 1.2–2.0 ms at 64 k. Past 32 k a 100 ms cadence is
+         * indistinguishable to the eye and halves the work.
+         * @returns {number} the delay for the next flush tick.
+         */
+        const streamFlushDelay = () => {
+          let longest = 0
+          for (const card of store.state.cards) {
+            if (card.status === 'streaming' && typeof card.text === 'string' && card.text.length > longest) {
+              longest = card.text.length
+            }
           }
+          return longest > STREAM_SLOW_CHARS ? STREAM_FLUSH_SLOW_MS : STREAM_FLUSH_MS
         }
 
         const bufferStreamDelta = (cardId, chunk) => {
           if (chunk === '') return
           pendingDeltas.set(cardId, (pendingDeltas.get(cardId) ?? '') + chunk)
-          if (deltaFlushTimer === null) deltaFlushTimer = setTimeout(flushStreamBuffers, 50)
+          if (deltaFlushTimer === null) deltaFlushTimer = setTimeout(flushStreamBuffers, streamFlushDelay())
         }
 
         const bufferStreamReasoning = (cardId, chunk) => {
           if (chunk === '') return
           pendingReasonings.set(cardId, (pendingReasonings.get(cardId) ?? '') + chunk)
-          if (deltaFlushTimer === null) deltaFlushTimer = setTimeout(flushStreamBuffers, 50)
+          if (deltaFlushTimer === null) deltaFlushTimer = setTimeout(flushStreamBuffers, streamFlushDelay())
         }
 
         /** Stream one side answer into its card. */
@@ -6146,7 +6513,10 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
             zone: card.zone,
             carrier: 'side',
             sessionId: currentSessionId(ctx),
-            history: card.history.slice(-HISTORY_TURNS),
+            history: card.history.slice(-HISTORY_TURNS).map(turn => ({
+              question: String(turn?.question ?? '').slice(0, HISTORY_TURN_Q_CHARS),
+              answer: String(turn?.answer ?? '').slice(0, HISTORY_TURN_A_CHARS),
+            })),
           }, {
             signal: controller.signal,
             onStart: (data) => {
@@ -6717,7 +7087,7 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
           }
           return h('div', { className: 'dsa-settings', 'data-dsa-root': '', 'data-dsa-rail-host': '', style: { padding: '10px' } },
             h(Styles, null),
-            h(AnswerCard, {
+            h(MemoAnswerCard, {
               card,
               surfaceLabel: state.surface === 'better-sidebar' ? t('surfaceBetter') : t('surfaceNative'),
               onCopy: element => actions.copy(card, element),
@@ -6789,12 +7159,33 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
           scheduleReport(0)
         }
         const legacyTimers = [300, 1200, 3000].map(delay => setTimeout(detectLegacy, delay))
+        // Coalesce the observer: `detectLegacy` runs a whole-document
+        // `querySelectorAll`, and a streaming answer mutates the DOM dozens of
+        // times per second — unthrottled, every one of those mutations became a
+        // full-tree scan for the first six seconds of the page's life. One
+        // trailing scan per 250 ms is plenty for a layer that only has to be
+        // noticed, never measured.
+        let legacyScanTimer = null
+        const queueLegacyScan = () => {
+          if (legacyScanTimer !== null) return
+          legacyScanTimer = setTimeout(() => {
+            legacyScanTimer = null
+            detectLegacy()
+          }, 250)
+        }
         if (typeof document !== 'undefined' && typeof MutationObserver === 'function') {
-          legacyObserver = new MutationObserver(() => detectLegacy())
+          legacyObserver = new MutationObserver(queueLegacyScan)
           try {
             legacyObserver.observe(document.documentElement ?? document, { childList: true, subtree: true })
           } catch { /* document without a root yet — timers still cover it */ }
         }
+        // After the boot probe window closes with no legacy, stop the
+        // document-wide observer: left attached it would re-scan the whole tree
+        // on every DOM mutation for the page's lifetime.
+        const legacyStopTimer = setTimeout(() => {
+          try { legacyObserver?.disconnect() } catch { /* already gone */ }
+          legacyObserver = null
+        }, 6000)
 
         reelect()
         void refreshState().catch(() => { /* the settings page shows the failure */ })
@@ -6815,6 +7206,8 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
           if (toastTimer !== null) clearTimeout(toastTimer)
           if (reportTimer !== null) clearTimeout(reportTimer)
           for (const timer of legacyTimers) clearTimeout(timer)
+          clearTimeout(legacyStopTimer)
+          if (legacyScanTimer !== null) clearTimeout(legacyScanTimer)
           try {
             if (typeof document !== 'undefined' && document.getElementById) {
               document.getElementById('dsa-family-legacy-style')?.remove()
@@ -6869,6 +7262,15 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
           CARD_KIND,
           CARD_KIND_BETTER,
           HISTORY_TURNS,
+          API_ROOT,
+          apiBaseAfter,
+          MAX_LIVE_CARDS,
+          REPLAY_OPEN_BUDGET_CHARS,
+          STREAM_FLUSH_MS,
+          STREAM_FLUSH_SLOW_MS,
+          STREAM_SLOW_CHARS,
+          capLiveCards,
+          replayCardOpen,
           estimateLabelWidth,
           parseSseBlock,
           truncateSelection,