@chestnut23/dsh-conversation-outline 0.1.0

package/lib/client/OutlinePanel.js

@@ -0,0 +1,246 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { collectQuestions, filterQuestions, formatTime, isJumpTargetRow, } from "./outline.js";
+/** Stable getSnapshot value while no session is current (uSES contract). */
+const NO_SESSION = null;
+const JUMP_HEADROOM = 96;
+const JUMP_TIMEOUT_MS = 1500;
+const FLASH_MS = 1900;
+const COPIED_MS = 1500;
+/** Grace period before the hover panel collapses (lets the pointer travel). */
+const COLLAPSE_DELAY_MS = 240;
+/** Rail capacity; older questions fold into the "+N" marker. */
+const MAX_BARS = 60;
+/**
+ * The conversation view's header tablist, scoped to the conversation root:
+ * walk up from the scrollport's PARENT (the scrollport itself may contain
+ * other tablists, e.g. the trajectory event-details tabs) and return the
+ * nearest ancestor containing a `[role="tablist"]`. Never falls back to a
+ * document-wide query, so other tablists (trajectory event details,
+ * settings, cordis source viewer) are not hit.
+ */
+function findConversationTablist(scrollport) {
+    let node = scrollport.parentElement;
+    while (node) {
+        const tablist = node.querySelector('[role="tablist"]');
+        if (tablist)
+            return tablist;
+        node = node.parentElement;
+    }
+    return null;
+}
+/** RAF that prunes itself from the tracking ref once it fires. */
+function scheduleRaf(rafRef, fn) {
+    const id = requestAnimationFrame(() => {
+        rafRef.current = rafRef.current.filter((x) => x !== id);
+        fn();
+    });
+    rafRef.current.push(id);
+}
+/** Timeout that prunes itself from the tracking ref once it fires. */
+function scheduleTimeout(timeoutRef, fn, ms) {
+    const id = window.setTimeout(() => {
+        timeoutRef.current = timeoutRef.current.filter((x) => x !== id);
+        fn();
+    }, ms);
+    timeoutRef.current.push(id);
+}
+export function OutlinePanel({ sessions, useSessions, t }) {
+    const current = useSessions((s) => s.current);
+    const session = current ? sessions.binding(current)?.session : undefined;
+    // Conversation snapshot subscription (spec §1.5): live updates while the
+    // session runs, load-older, blank detection — all ride this one store.
+    const subscribe = useCallback((onChange) => (session ? session.subscribe(onChange) : () => { }), [session]);
+    const getSnapshot = useCallback(() => (session ? session.getSnapshot() : NO_SESSION), [session]);
+    const snapshot = useSyncExternalStore(subscribe, getSnapshot);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [copiedKey, setCopiedKey] = useState(null);
+    const timeoutsRef = useRef([]);
+    const rafsRef = useRef([]);
+    const flashedRowRef = useRef(null);
+    const collapseTimerRef = useRef(null);
+    // Cancel pending jump work (RAFs/timeouts), the flash highlight, and a
+    // scheduled hover collapse.
+    const clearPending = useCallback(() => {
+        for (const id of rafsRef.current)
+            window.cancelAnimationFrame(id);
+        for (const id of timeoutsRef.current)
+            window.clearTimeout(id);
+        rafsRef.current = [];
+        timeoutsRef.current = [];
+        if (collapseTimerRef.current !== null) {
+            window.clearTimeout(collapseTimerRef.current);
+            collapseTimerRef.current = null;
+        }
+        if (flashedRowRef.current) {
+            flashedRowRef.current.removeAttribute('data-dsh-outline-flash');
+            flashedRowRef.current = null;
+        }
+    }, []);
+    // Session change → cancel pending work and collapse (navigate closes the
+    // panel, spec §2.1; a mid-jump poll must not target the stale session).
+    useEffect(() => {
+        clearPending();
+        setOpen(false);
+    }, [current, clearPending]);
+    // Escape closes the panel (hover-opened or tap-pinned).
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (event) => {
+            if (event.key === 'Escape')
+                setOpen(false);
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [open]);
+    // Unmount cleanup: cancel pending flash/copied timeouts, jump RAFs, collapse
+    // timer, and the flash attribute.
+    useEffect(() => clearPending, [clearPending]);
+    const allItems = useMemo(() => (snapshot ? collectQuestions(snapshot) : []), [snapshot]);
+    const items = useMemo(() => filterQuestions(allItems, query), [allItems, query]);
+    const blank = snapshot?.blank ?? true;
+    const hasMore = snapshot?.hasMore ?? false;
+    const loadingOlder = snapshot?.loadingOlder ?? false;
+    // ---- hover-open mechanics (rail ⇄ panel travel survives via the grace) ---
+    const cancelCollapse = useCallback(() => {
+        if (collapseTimerRef.current !== null) {
+            window.clearTimeout(collapseTimerRef.current);
+            collapseTimerRef.current = null;
+        }
+    }, []);
+    const scheduleCollapse = useCallback(() => {
+        cancelCollapse();
+        collapseTimerRef.current = window.setTimeout(() => {
+            collapseTimerRef.current = null;
+            setOpen(false);
+        }, COLLAPSE_DELAY_MS);
+    }, [cancelCollapse]);
+    const showPanel = useCallback(() => {
+        cancelCollapse();
+        setOpen(true);
+    }, [cancelCollapse]);
+    /** Find the chat row for a node key (pure predicate over DOM rows). */
+    const findRow = useCallback((key) => {
+        const rows = document.querySelectorAll('[data-chat-anchor-key]');
+        for (const row of rows) {
+            if (isJumpTargetRow(row, key))
+                return row;
+        }
+        return null;
+    }, []);
+    /** Scroll the row into view (96px headroom) and flash a highlight. */
+    const flashAndScroll = useCallback((row) => {
+        const scrollport = row.closest('[data-conversation-scroll]') ?? document.querySelector('[data-conversation-scroll]');
+        if (scrollport) {
+            const flowTop = row.getBoundingClientRect().top - scrollport.getBoundingClientRect().top;
+            const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            scrollport.scrollTo({
+                top: scrollport.scrollTop + flowTop - JUMP_HEADROOM,
+                behavior: reduced ? 'auto' : 'smooth',
+            });
+        }
+        // A second jump within FLASH_MS: clear the previous row first.
+        if (flashedRowRef.current && flashedRowRef.current !== row) {
+            flashedRowRef.current.removeAttribute('data-dsh-outline-flash');
+        }
+        flashedRowRef.current = row;
+        row.setAttribute('data-dsh-outline-flash', 'true');
+        scheduleTimeout(timeoutsRef, () => {
+            if (flashedRowRef.current === row) {
+                row.removeAttribute('data-dsh-outline-flash');
+                flashedRowRef.current = null;
+            }
+        }, FLASH_MS);
+    }, []);
+    /** Jump-to-message algorithm (spec §2.2). */
+    const jumpTo = useCallback((key) => {
+        // The conversation page must be mounted; abort silently otherwise.
+        const scrollport = document.querySelector('[data-conversation-scroll]');
+        if (!scrollport)
+            return;
+        // Ensure the Chat view is active: chat is order 0 — the FIRST tab of the
+        // conversation-root tablist, when one exists (setView is idempotent).
+        // A profile without extra views has no header tablist at all — that is
+        // fine, the rows are already visible.
+        const tablist = findConversationTablist(scrollport);
+        if (tablist) {
+            const firstTab = tablist.querySelector('button[role="tab"]');
+            if (firstTab)
+                firstTab.click();
+        }
+        // Poll for the target row regardless of tablist presence — render timing
+        // only; the row is guaranteed in the loaded window (it came from the
+        // snapshot). Canceled on session change/unmount via clearPending.
+        const deadline = Date.now() + JUMP_TIMEOUT_MS;
+        const poll = () => {
+            const row = findRow(key);
+            if (row) {
+                flashAndScroll(row);
+                setOpen(false);
+                return;
+            }
+            if (Date.now() < deadline) {
+                scheduleRaf(rafsRef, poll);
+            }
+            else {
+                console.warn(t('jumpFailed'), { key });
+            }
+        };
+        scheduleRaf(rafsRef, poll);
+    }, [findRow, flashAndScroll, t]);
+    /** Copy a question's text (clipboard API with execCommand fallback). */
+    const copyText = useCallback((text, key) => {
+        const done = () => {
+            setCopiedKey(key);
+            scheduleTimeout(timeoutsRef, () => setCopiedKey((k) => (k === key ? null : k)), COPIED_MS);
+        };
+        const fallback = () => {
+            try {
+                const ta = document.createElement('textarea');
+                ta.value = text;
+                ta.setAttribute('readonly', '');
+                ta.style.position = 'fixed';
+                ta.style.opacity = '0';
+                document.body.appendChild(ta);
+                ta.select();
+                document.execCommand('copy');
+                ta.remove();
+                done();
+            }
+            catch {
+                // clipboard unavailable — ignore
+            }
+        };
+        if (navigator.clipboard?.writeText) {
+            navigator.clipboard.writeText(text).then(done, fallback);
+        }
+        else {
+            fallback();
+        }
+    }, []);
+    // No current session, or a blank session → render nothing (rail included).
+    // MUST stay below every hook: this overlay entry stays mounted across
+    // session changes, and blank flips false on the first accepted prompt, so a
+    // conditional hook would crash React (reviewer MUST-FIX #1).
+    if (!current || !session || blank)
+        return null;
+    // Rail bars: chronological top→bottom, capped at MAX_BARS with the overflow
+    // folded into a "+N" marker (the rail is a minimap, not the full list).
+    const start = Math.max(0, allItems.length - MAX_BARS);
+    const bars = allItems.slice(start);
+    const overflow = start;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "dso-rail", role: "group", "aria-label": t('title'), tabIndex: 0, onMouseEnter: showPanel, onMouseLeave: scheduleCollapse, onFocus: showPanel, onBlur: scheduleCollapse, onClick: (event) => {
+                    // Tap (touch) on the strip itself pins/unpins the panel.
+                    if (event.target === event.currentTarget)
+                        setOpen((v) => !v);
+                }, onKeyDown: (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        setOpen((v) => !v);
+                    }
+                }, children: [overflow > 0 && (_jsxs("span", { className: "dso-rail-more", "aria-label": t('moreBars', { count: overflow }), children: ["+", overflow] })), bars.map((item, index) => (_jsx("button", { type: "button", className: "dso-bar", "aria-label": t('barLabel', { n: start + index + 1 }), onClick: () => jumpTo(item.key) }, item.key)))] }), open && (_jsxs("div", { className: "dso-panel", role: "region", "aria-label": t('title'), onMouseEnter: showPanel, onMouseLeave: scheduleCollapse, onFocus: showPanel, onBlur: scheduleCollapse, children: [_jsxs("header", { className: "dso-panel-header", children: [_jsx("span", { className: "dso-panel-title", children: t('title') }), _jsx("span", { className: "dso-panel-count", children: t('count', { count: allItems.length }) }), _jsx("button", { type: "button", className: "dso-panel-close", "aria-label": t('close'), onClick: () => setOpen(false), children: "\u00D7" })] }), _jsx("input", { className: "dso-search", type: "search", value: query, placeholder: t('searchPlaceholder'), "aria-label": t('searchPlaceholder'), onChange: (event) => setQuery(event.target.value) }), _jsx("div", { className: "dso-list", children: items.length === 0 ? (_jsx("div", { className: "dso-empty", children: t('empty') })) : (items.map((item) => (_jsxs("div", { className: "dso-row", children: [_jsxs("button", { type: "button", className: "dso-row-main", onClick: () => jumpTo(item.key), children: [_jsx("span", { className: "dso-turn", children: item.turn !== undefined ? `#${item.turn}` : '' }), _jsx("span", { className: "dso-text", children: item.text }), item.kind === 'steering' && _jsx("span", { className: "dso-steer", children: t('steerTag') }), _jsx("span", { className: "dso-time", children: formatTime(item.time) })] }), _jsx("button", { type: "button", className: copiedKey === item.key ? 'dso-copy dso-copied' : 'dso-copy', "aria-label": copiedKey === item.key ? t('copied') : t('copy'), onClick: () => copyText(item.text, item.key), children: copiedKey === item.key ? t('copied') : t('copy') })] }, item.key)))) }), hasMore && (_jsx("footer", { className: "dso-footer", children: _jsx("button", { type: "button", className: "dso-load-older", disabled: loadingOlder, onClick: () => {
+                                void session.loadOlder();
+                            }, children: loadingOlder ? t('loadingOlder') : t('loadOlder') }) }))] }))] }));
+}

package/lib/client/index.js

@@ -0,0 +1,27 @@
+import { OutlinePanel } from "./OutlinePanel.js";
+import { NS, dictionaries } from "./locales.js";
+import { injectStyle } from "./styles.js";
+/**
+ * Client entry (implementation-spec §1.1/§2.4): the browser half of the
+ * plugin. Cordis services this fiber waits for before apply() runs.
+ */
+export const inject = ['slots', 'sessions', 'locale'];
+export function apply(ctx) {
+    // Locale dictionaries — the typed register form (both shipped locales
+    // required, keys compile-checked). The disposer is owned by the fiber, so
+    // HMR removes the namespace on unload.
+    ctx.effect(() => ctx.locale.register(NS, dictionaries), 'dsh-conversation-outline: locale');
+    // Panel CSS as an HMR-safe <style data-plugin> tag (effect-owned).
+    injectStyle(ctx);
+    // Right-edge rail + hover panel in the frame-wide overlay layer.
+    // slots.inject waits for the layout's declaration of `shell.overlay` and
+    // routes the registration (and its unload cascade) through this fiber.
+    // `locale: NS` gives the component the typed `t` seat; the inject factory
+    // passes the sessions service face.
+    ctx.slots.inject('shell.overlay', () => ctx.slots.register({
+        name: 'shell.overlay',
+        id: 'dsh-conversation-outline.rail',
+        locale: NS,
+        inject: () => ({ sessions: ctx.sessions }),
+    }, OutlinePanel));
+}

package/lib/client/locales.js

@@ -0,0 +1,32 @@
+export const NS = 'dsh-conversation-outline';
+export const zh = {
+    title: '会话大纲',
+    count: '{count} 个问题',
+    searchPlaceholder: '搜索问题…',
+    empty: '当前会话还没有问题',
+    loadOlder: '加载更早',
+    loadingOlder: '加载中…',
+    copy: '复制',
+    copied: '已复制',
+    steerTag: '追问',
+    close: '关闭',
+    jumpFailed: '跳转失败：未找到对应消息',
+    barLabel: '跳到第 {n} 个问题',
+    moreBars: '还有 {count} 个更早的问题',
+};
+export const en = {
+    title: 'Outline',
+    count: '{count} questions',
+    searchPlaceholder: 'Search questions…',
+    empty: 'No questions in this conversation yet',
+    loadOlder: 'Load older',
+    loadingOlder: 'Loading…',
+    copy: 'Copy',
+    copied: 'Copied',
+    steerTag: 'steer',
+    close: 'Close',
+    jumpFailed: 'Jump failed: target message not found',
+    barLabel: 'Jump to question {n}',
+    moreBars: '{count} more earlier questions',
+};
+export const dictionaries = { zh, en };

package/lib/client/outline.js

@@ -0,0 +1,83 @@
+/**
+ * Pure logic for the conversation outline (implementation-spec §2.3).
+ *
+ * Deliberately has NO DOM access and NO React imports so scripts/verify.mjs can
+ * import it directly in Node from the tsc output (lib/client/outline.js) and
+ * assert the derivations offline.
+ *
+ * Input shapes are structural "lite" views of the runtime snapshot types
+ * (@deepseek-ai/dsh-client-runtime/client) — the real objects are assignable
+ * to them, and Node can import this module without the browser type graph.
+ */
+const IMAGE_PLACEHOLDER = '[image]';
+/**
+ * Flatten message content blocks into a single display string: text blocks are
+ * joined, image blocks become a placeholder, and whitespace is trimmed and
+ * collapsed.
+ */
+export function flattenQuestionText(content) {
+    return content
+        .map((block) => {
+        if (block.type === 'text')
+            return block.text ?? '';
+        if (block.type === 'image')
+            return IMAGE_PLACEHOLDER;
+        return '';
+    })
+        .join(' ')
+        .trim()
+        .replace(/\s+/g, ' ');
+}
+/** Turn number of a node location: step/turn → location.turn.turn, else undefined. */
+function turnOf(location) {
+    if (!location)
+        return undefined;
+    if (location.kind === 'step' || location.kind === 'turn')
+        return location.turn?.turn;
+    return undefined;
+}
+/**
+ * Walk the chat flow in order, keep user/steering nodes, skip empty text, and
+ * produce chronological outline items (spec §2.3).
+ */
+export function collectQuestions(snapshot) {
+    const items = [];
+    for (const key of snapshot.chat.order) {
+        const node = snapshot.chat.nodes.get(key);
+        if (!node)
+            continue;
+        if (node.kind !== 'user' && node.kind !== 'steering')
+            continue;
+        const data = node.data;
+        const text = flattenQuestionText(data?.content ?? []);
+        if (!text)
+            continue;
+        items.push({
+            key: node.key,
+            kind: node.kind,
+            seq: data?.seq ?? 0,
+            time: data?.time ?? 0,
+            turn: turnOf(node.location),
+            text,
+        });
+    }
+    return items;
+}
+/** Case-insensitive substring filter over the flattened question text. */
+export function filterQuestions(items, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return items;
+    return items.filter((item) => item.text.toLowerCase().includes(q));
+}
+/** Local `HH:MM` from a unix-ms timestamp (spec §2.3). */
+export function formatTime(ms) {
+    const d = new Date(ms);
+    const hh = String(d.getHours()).padStart(2, '0');
+    const mm = String(d.getMinutes()).padStart(2, '0');
+    return `${hh}:${mm}`;
+}
+/** Pure DOM predicate for the jump loop: is this row the target node? */
+export function isJumpTargetRow(row, key) {
+    return row.getAttribute('data-chat-anchor-key') === key;
+}

package/lib/client/styles.js

@@ -0,0 +1,304 @@
+/**
+ * Outline rail + hover panel CSS (implementation-spec §1.8/§2.1, revised):
+ * a thin right-edge rail (conversation minimap) that is always visible while
+ * the session has questions, and a preview panel that expands on hover.
+ * Plain CSS string injected via an HMR-safe
+ * `<style data-plugin="dsh-conversation-outline" data-plugin-css="...">` tag.
+ * Stable prefixed class names (`dso_*`), DSH theme vars (`--dsw-alias-*`) —
+ * never hashed class names of other packages. No layout shift: the panel is a
+ * pure overlay.
+ */
+export const panelCss = `
+/* ---- Right-edge rail (always-visible minimap) --------------------------- */
+.dso-rail {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  z-index: 2147483000;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  width: 30px;
+  max-height: 55vh;
+  padding: 8px 10px;
+  overflow: hidden;
+  cursor: pointer;
+}
+.dso-rail-more {
+  flex: none;
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 10px;
+  color: var(--dsw-alias-label-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+.dso-bar {
+  flex: none;
+  width: 10px;
+  height: 6px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--dsw-alias-label-tertiary) 45%, transparent);
+  cursor: pointer;
+  transition: background 0.12s, transform 0.12s;
+}
+.dso-bar:hover {
+  background: var(--dsw-alias-state-business-primary);
+  transform: scaleX(1.35);
+}
+.dso-rail:focus-visible,
+.dso-bar:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 2px;
+}
+
+/* ---- Hover-expanded preview panel --------------------------------------- */
+.dso-panel {
+  position: fixed;
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+  z-index: 2147483000;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: min(340px, calc(100vw - 24px));
+  max-height: min(70vh, 600px);
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-line-normal);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--dsw-alias-bg-module-platform) 92%, transparent);
+  backdrop-filter: blur(20px);
+  box-shadow: 0 16px 48px color-mix(in srgb, var(--dsw-alias-label-primary) 18%, transparent);
+  color: var(--dsw-alias-label-primary);
+  animation: dso-panel-in 140ms ease-out;
+}
+@keyframes dso-panel-in {
+  from { opacity: 0; transform: translateY(-50%) translateX(12px); }
+  to { opacity: 1; transform: translateY(-50%) translateX(0); }
+}
+
+.dso-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px 10px;
+  border-bottom: 1px solid var(--dsw-alias-line-normal);
+}
+.dso-panel-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+}
+.dso-panel-count {
+  flex: 1;
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary);
+}
+.dso-panel-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.dso-panel-close:hover { background: var(--dsw-alias-interactive-bg-hover-solid); }
+
+.dso-panel-close:focus-visible,
+.dso-search:focus-visible,
+.dso-row-main:focus-visible,
+.dso-copy:focus-visible,
+.dso-load-older:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 2px;
+}
+
+.dso-search {
+  margin: 10px 12px 4px;
+  box-sizing: border-box;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--dsw-alias-line-normal);
+  border-radius: 8px;
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 12px;
+  outline: none;
+}
+.dso-search::placeholder { color: var(--dsw-alias-label-tertiary); }
+
+/* ---- Question list ------------------------------------------------------ */
+.dso-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+}
+/* Row container: two sibling buttons (jump + copy) — no nested interactive
+   controls. Hover highlights the whole row. */
+.dso-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px;
+  border-radius: 10px;
+  transition: background 0.12s;
+}
+.dso-row:hover { background: var(--dsw-alias-interactive-bg-hover-solid); }
+.dso-row-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 2px 6px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.dso-row-main:hover { background: var(--dsw-alias-interactive-bg-hover-solid); }
+
+.dso-turn {
+  flex: none;
+  min-width: 26px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-fill-business);
+  color: var(--dsw-alias-label-on-fill);
+  font-size: 10px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+/* Single-line truncation: shows the opening words of each question —
+   anything longer simply ellipsizes (per user request). */
+.dso-text {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dso-time {
+  flex: none;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-tertiary);
+}
+.dso-steer {
+  flex: none;
+  padding: 0 6px;
+  border: 1px solid var(--dsw-alias-line-normal);
+  border-radius: 999px;
+  font-size: 10px;
+  color: var(--dsw-alias-label-secondary);
+}
+.dso-copy {
+  flex: none;
+  padding: 2px 6px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s, color 0.12s, background 0.12s;
+}
+.dso-row:hover .dso-copy,
+.dso-row:focus-within .dso-copy,
+.dso-copy:focus-visible { opacity: 1; }
+.dso-copy:hover { background: var(--dsw-alias-bg-fill-neutral); }
+.dso-copy.dso-copied { color: var(--dsw-alias-state-success); }
+
+.dso-empty {
+  padding: 28px 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* ---- Footer / load older ------------------------------------------------ */
+.dso-footer {
+  display: flex;
+  justify-content: center;
+  padding: 8px 12px 10px;
+  border-top: 1px solid var(--dsw-alias-line-normal);
+}
+.dso-load-older {
+  padding: 4px 14px;
+  border: none;
+  border-radius: 14px;
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.dso-load-older:disabled { cursor: default; opacity: 0.6; }
+
+/* ---- Jump flash highlight ----------------------------------------------- */
+[data-dsh-outline-flash] {
+  animation: dso-flash 1.8s ease-out;
+}
+@keyframes dso-flash {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--dsw-alias-state-business-primary) 50%, transparent);
+    background-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 24%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 6px transparent;
+    background-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 8%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+    background-color: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dso-panel { animation: none; }
+  .dso-bar { transition: none; }
+  [data-dsh-outline-flash] { animation: none; }
+}
+`;
+/** Inject the style tag, owned by the client fiber (removed on dispose/HMR). */
+export function injectStyle(ctx) {
+    ctx.effect(() => {
+        const tag = document.createElement('style');
+        tag.dataset.plugin = 'dsh-conversation-outline';
+        tag.dataset.pluginCss = 'dsh-conversation-outline/panel.css';
+        tag.textContent = panelCss;
+        document.head.appendChild(tag);
+        return () => {
+            tag.remove();
+        };
+    }, 'dsh-conversation-outline: panel css');
+}