@deepseek-ai/dsh-client-ui-primitives 0.1.1-rc.2 → 0.1.2-alpha.3

package/lib/index.js

@@ -12,20 +12,21 @@ import css$6 from "./HoverCard.module.css";
 import css$7 from "./Modal.module.css";
 import css$8 from "./OnboardingSurface.module.css";
 import css$9 from "./RiskConfirmation.module.css";
-import css$10 from "./ConnectionBanner.module.css";
-import css$11 from "./Tooltip.module.css";
-import css$12 from "./Toast.module.css";
-import css$13 from "./JsonTree.module.css";
+import css$10 from "./ConnectionIndicator.module.css";
+import css$11 from "./user-text.module.css";
+import css$12 from "./Tooltip.module.css";
+import css$13 from "./Toast.module.css";
+import css$14 from "./JsonTree.module.css";
 import Anser from "anser";
-import css$14 from "./TerminalBlock.module.css";
+import css$15 from "./TerminalBlock.module.css";
 import { createCssVariablesTheme, createHighlighterCoreSync } from "shiki/core";
 import { createJavaScriptRegexEngine, defaultJavaScriptRegexConstructor } from "shiki/engine/javascript";
 import langTs from "@shikijs/langs/typescript";
 import langBash from "@shikijs/langs/shellscript";
 import langJson from "@shikijs/langs/json";
-import css$15 from "./ReadBlock.module.css";
-import css$16 from "./DiffBlock.module.css";
-import css$17 from "./SearchBlock.module.css";
+import css$16 from "./ReadBlock.module.css";
+import css$17 from "./DiffBlock.module.css";
+import css$18 from "./SearchBlock.module.css";
 import { fromMarkdown } from "mdast-util-from-markdown";
 import { gfmFromMarkdown } from "mdast-util-gfm";
 import { mathFromMarkdown } from "mdast-util-math";
@@ -37,13 +38,13 @@ import { classifyCharacter } from "micromark-util-classify-character";
 import { codes, constants, types } from "micromark-util-symbol";
 import { factorySpace } from "micromark-factory-space";
 import { normalizeUri } from "micromark-util-sanitize-uri";
-import css$18 from "./markdown/CodeBlock.module.css";
+import css$19 from "./markdown/CodeBlock.module.css";
 import katex from "katex";
-import css$19 from "./markdown/MarkdownText.module.css";
+import css$20 from "./markdown/MarkdownText.module.css";
 import "katex/dist/katex.min.css";
-import css$20 from "./WebBlock.module.css";
-import css$21 from "./markdown/JsonBlock.module.css";
-import css$22 from "./markdown/MessageText.module.css";
+import css$21 from "./WebBlock.module.css";
+import css$22 from "./markdown/JsonBlock.module.css";
+import css$23 from "./markdown/MessageText.module.css";
 //#region lib/types/StateDot.js
 /** Outer 3x3 matrix cells (2px pixels on a 10px grid), clockwise from top-left. */
 const MATRIX_CELLS = [
@@ -618,6 +619,33 @@ const IconBrowseOutline16 = ({ size = 16, className }) => jsxs("svg", {
 		})
 	]
 });
+/** ic_ds_context_injection_outline_16 (figma extract): browse document frame with an open top and an arrow dropping in. */
+const IconContextInjectionOutline16 = ({ size = 16, className }) => jsxs("svg", {
+	width: size,
+	height: size,
+	className,
+	viewBox: "0 0 16 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [
+		jsx("path", {
+			d: "M11.9512 1.13281C12.401 1.20666 12.8093 1.34164 13.1738 1.60645C13.4282 1.79137 13.6521 2.01609 13.8369 2.27051C14.1574 2.71187 14.2892 3.21614 14.3506 3.78223C14.4105 4.33532 14.4102 5.02658 14.4102 5.87305V10.0273C14.4102 10.8738 14.4105 11.5651 14.3506 12.1182C14.2892 12.6843 14.1574 13.1885 13.8369 13.6299C13.652 13.8843 13.4282 14.109 13.1738 14.2939C12.7324 14.6146 12.2273 14.7462 11.6611 14.8076C11.1081 14.8675 10.4166 14.8672 9.57031 14.8672H6.43164C5.58533 14.8672 4.89387 14.8675 4.34082 14.8076C3.77474 14.7463 3.27046 14.6144 2.8291 14.2939C2.57453 14.109 2.35003 13.8844 2.16504 13.6299C1.84444 13.1885 1.71272 12.6844 1.65137 12.1182C1.59147 11.5651 1.5918 10.8738 1.5918 10.0273V5.87305C1.5918 5.02655 1.59146 4.33533 1.65137 3.78223C1.71272 3.21606 1.84443 2.71191 2.16504 2.27051C2.35003 2.01596 2.57453 1.79141 2.8291 1.60645C3.19332 1.34202 3.60062 1.20669 4.0498 1.13281V2.56445C3.87191 2.61154 3.74906 2.66836 3.65137 2.73926C3.51583 2.83777 3.3964 2.95726 3.29785 3.09277C3.1794 3.25581 3.09143 3.4856 3.04297 3.93262C2.9931 4.39287 2.99219 4.99529 2.99219 5.87305V10.0273C2.99219 10.905 2.99312 11.5075 3.04297 11.9678C3.09142 12.4147 3.17943 12.6446 3.29785 12.8076C3.3964 12.9431 3.51583 13.0626 3.65137 13.1611C3.81441 13.2795 4.04437 13.3676 4.49121 13.416C4.95142 13.4658 5.55411 13.4668 6.43164 13.4668H9.57031C10.4479 13.4668 11.0505 13.4659 11.5107 13.416C11.9576 13.3675 12.1876 13.2796 12.3506 13.1611C12.4861 13.0626 12.6056 12.9431 12.7041 12.8076C12.8224 12.6446 12.9106 12.4146 12.959 11.9678C13.0088 11.5075 13.0098 10.905 13.0098 10.0273V5.87305C13.0098 4.99532 13.0088 4.39286 12.959 3.93262C12.9105 3.48579 12.8225 3.2558 12.7041 3.09277C12.6056 2.95727 12.4861 2.83778 12.3506 2.73926C12.2527 2.66816 12.1296 2.61064 11.9512 2.56348V1.13281Z",
+			fill: "currentColor"
+		}),
+		jsx("path", {
+			d: "M9.32227 11.4141H4.95508V10.2148H9.32227V11.4141Z",
+			fill: "currentColor"
+		}),
+		jsx("path", {
+			d: "M11.0439 8.90039H4.95508V7.70117H11.0439V8.90039Z",
+			fill: "currentColor"
+		}),
+		jsx("path", {
+			d: "M8.59961 3.75781L9.70996 2.64746L10.5586 3.49609L8.49512 5.55957C8.22173 5.83266 7.77816 5.83285 7.50488 5.55957L5.44141 3.49512L6.28906 2.64746L7.40039 3.75781V1.09668H8.59961V3.75781Z",
+			fill: "currentColor"
+		})
+	]
+});
 /** ic_ds_link_outline_14 */
 const IconLinkOutline14 = ({ size = 14, className }) => jsxs("svg", {
 	width: size,
@@ -1127,6 +1155,55 @@ const IconDataOutline16 = ({ size = 16, className }) => jsxs("svg", {
 		fill: "currentColor"
 	})]
 });
+/** IconDataOutline16 without its gear: a three-tier database cylinder. */
+const IconDatabaseOutline16 = ({ size = 16, className }) => jsxs("svg", {
+	width: size,
+	height: size,
+	className,
+	viewBox: "0 0 16 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [
+		jsx("ellipse", {
+			cx: "8",
+			cy: "3.6",
+			rx: "5.75",
+			ry: "2.4",
+			stroke: "currentColor",
+			strokeWidth: "1.25"
+		}),
+		jsx("path", {
+			d: "M2.25 3.6V12.3A5.75 2.4 0 0 0 13.75 12.3V3.6",
+			stroke: "currentColor",
+			strokeWidth: "1.25"
+		}),
+		jsx("path", {
+			d: "M2.25 7.95A5.75 2.4 0 0 0 13.75 7.95",
+			stroke: "currentColor",
+			strokeWidth: "1.25"
+		})
+	]
+});
+/** Thin-stroke clock: outlined dial with square-cut hour and minute hands. */
+const IconClockOutline16 = ({ size = 16, className }) => jsxs("svg", {
+	width: size,
+	height: size,
+	className,
+	viewBox: "0 0 16 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [jsx("circle", {
+		cx: "8",
+		cy: "8",
+		r: "6.375",
+		stroke: "currentColor",
+		strokeWidth: "1.25"
+	}), jsx("path", {
+		d: "M8 4.4V8.3L10.7 9.85",
+		stroke: "currentColor",
+		strokeWidth: "1.25"
+	})]
+});
 /** ic_send_outline_14 (figma extract): thin-stroke upward send arrow. */
 const IconSendOutline14 = ({ size = 14, className }) => jsx("svg", {
 	width: size,
@@ -1318,6 +1395,56 @@ const IconQuestionOutline14 = ({ size = 14, className }) => jsxs("svg", {
 		})
 	]
 });
+/** Alarm clock outline for active scheduled-task indicators. */
+const IconAlarmClockOutline16 = ({ size = 16, className }) => jsxs("svg", {
+	"aria-hidden": "true",
+	width: size,
+	height: size,
+	className,
+	viewBox: "0 0 16 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [
+		jsx("path", {
+			d: "M3.5 2.5 1.75 4",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			strokeLinecap: "round"
+		}),
+		jsx("path", {
+			d: "M12.5 2.5 14.25 4",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			strokeLinecap: "round"
+		}),
+		jsx("circle", {
+			cx: "8",
+			cy: "8.5",
+			r: "4.75",
+			stroke: "currentColor",
+			strokeWidth: "1.25"
+		}),
+		jsx("path", {
+			d: "M8 5.75V8.5L10 9.75",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		jsx("path", {
+			d: "m4.75 12.25-1 1.5",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			strokeLinecap: "round"
+		}),
+		jsx("path", {
+			d: "m11.25 12.25 1 1.5",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			strokeLinecap: "round"
+		})
+	]
+});
 /** ic_ds_archive_outline_20 (figma extract): lidded box + label slot. The export's
 *  0.11px stroke ring around the box contour is dropped — it restates the same
 *  contour in the same ink, which currentColor already carries. */
@@ -1755,19 +1882,19 @@ function useAnchoredMaxHeight(ref, cap, signal) {
 *
 * A portaled panel is positioned from its anchor's viewport rect, which stops
 * being true the moment anything scrolls or the window resizes. This owns that
-* one concern: measure the anchor, offset the panel below it, clamp the result
-* inside the viewport, and re-run on scroll (capture phase, so scrollers nested
-* inside the page are caught too), on resize, and on the panel's own size
-* changes while the element is open.
+* one concern: measure the anchor, offset the panel below or above it, clamp
+* the result inside the viewport, and re-run on scroll (capture phase, so
+* scrollers nested inside the page are caught too), on resize, and on the
+* panel's own size changes while the element is open.
 * @module @deepseek-ai/dsh-client-ui-primitives/useAnchoredPosition
 */
 /**
 * Track an anchor and return the panel's fixed coordinates.
-* @param options - the open state, the two refs, and the gap/margin distances.
+* @param options - the open state, the two refs, the placement side, and the gap/margin distances.
 * @returns `left`/`top` for the panel, or `null` before the first measurement.
 */
 function useAnchoredPosition(options) {
-	const { open, anchorRef, panelRef, gap, margin } = options;
+	const { open, anchorRef, panelRef, side = "bottom", gap, margin } = options;
 	const [position, setPosition] = useState(null);
 	useLayoutEffect(() => {
 		if (!open) {
@@ -1784,7 +1911,7 @@ function useAnchoredPosition(options) {
 			const width = panel?.offsetWidth ?? 0;
 			const height = panel?.offsetHeight ?? 0;
 			let left = rect.left;
-			let top = rect.bottom + gap;
+			let top = side === "top" ? rect.top - gap - height : rect.bottom + gap;
 			if (width > 0) left = Math.min(Math.max(left, margin), window.innerWidth - width - margin);
 			if (height > 0) top = Math.min(Math.max(top, margin), window.innerHeight - height - margin);
 			/* v8 ignore stop */
@@ -1811,6 +1938,7 @@ function useAnchoredPosition(options) {
 		open,
 		anchorRef,
 		panelRef,
+		side,
 		gap,
 		margin
 	]);
@@ -1827,12 +1955,14 @@ function useAnchoredPosition(options) {
 * @param root - element containing both the trigger and the open surface.
 * @param open - whether the surface is showing; false detaches the listener.
 * @param setOpen - state setter invoked with false on an outside pointerdown.
+* @param portal - surface portaled outside the root (a `document.body` dialog)
+* that also counts as inside; omit when the root contains the whole popover.
 */
-function useDismissOnOutsidePointer(root, open, setOpen) {
+function useDismissOnOutsidePointer(root, open, setOpen, portal) {
 	useEffect(() => {
 		if (!open) return;
 		const closeOutside = (event) => {
-			if (event.target instanceof Node && !root.current?.contains(event.target)) setOpen(false);
+			if (event.target instanceof Node && root.current?.contains(event.target) !== true && portal?.current?.contains(event.target) !== true) setOpen(false);
 		};
 		document.addEventListener("pointerdown", closeOutside);
 		return () => {
@@ -1841,7 +1971,8 @@ function useDismissOnOutsidePointer(root, open, setOpen) {
 	}, [
 		root,
 		open,
-		setOpen
+		setOpen,
+		portal
 	]);
 }
 //#endregion
@@ -1888,11 +2019,11 @@ async function writeClipboard(text) {
 * @param props.disabled - suppress opening; turning true closes an open card.
 * @param props.copyText - optional primary value copied by activation and
 * included in the card's accessible name.
-* @param props.copyLabel - accessible activation-label prefix (default "复制").
-* @param props.copiedLabel - visible success label (default "复制成功").
+* @param props.copyLabel - localized accessible activation-label prefix.
+* @param props.copiedLabel - localized visible success label.
 * @returns anchor wrapper with the conditional portaled card.
 */
-function HoverCard({ anchor, content, openDelayMs = 500, disabled = false, copyText, copyLabel = "复制", copiedLabel = "复制成功" }) {
+function HoverCard({ anchor, content, openDelayMs = 500, disabled = false, copyText, copyLabel, copiedLabel }) {
 	const rootRef = useRef(null);
 	const cardRef = useRef(null);
 	const timerRef = useRef(null);
@@ -2058,23 +2189,20 @@ function HoverCard({ anchor, content, openDelayMs = 500, disabled = false, copyT
 //#endregion
 //#region lib/types/Modal.js
 /**
-* Render a centered modal over a blurred page mask.
+* Render a centered, body-portaled modal over a blurred page mask.
 * @param props.open - whether the dialog is showing.
 * @param props.onClose - Escape or mask click.
 * @param props.title - dialog heading (aria-label in every mode).
-* @param props.closeLabel - accessible close-button label.
+* @param props.closeLabel - localized accessible close-button label.
 * @param props.description - optional supporting sentence under the title.
 * @param props.children - body (inputs, etc.).
 * @param props.footer - action row (Cancel / Create).
 * @param props.contentClassName - optional class for a scrollable content region.
 * @param props.headless - render children directly in the card (no default
-* header/close/body chrome) for dialogs whose figma frame owns its own
-* header structure; mask, card, Escape, and aria-label remain.
-* @param props.closeLabel - close-button aria label; the owner passes
-* localized copy (this package is cordis-free, so copy arrives via props).
+* header/close/body chrome); mask, card, Escape, and aria-label remain.
 * @returns null when closed; otherwise the overlay tree.
 */
-function Modal({ open, onClose, title, closeLabel = "Close", description, children, footer, className, contentClassName, headless = false }) {
+function Modal({ open, onClose, title, closeLabel, description, children, footer, className, contentClassName, headless = false }) {
 	useEffect(() => {
 		if (!open) return;
 		const onKeyDown = (e) => {
@@ -2133,8 +2261,8 @@ function Modal({ open, onClose, title, closeLabel = "Close", description, childr
 //#endregion
 //#region lib/types/OnboardingSurface.js
 /**
-* Render the onboarding takeover chrome (mask + opaque stage) around one
-* step's content and keep the application root inert while mounted.
+* Render a body-portaled onboarding stage and keep the application root inert
+* while mounted.
 * @param props.children - the step's page content, centered on the stage.
 * @returns the body-portaled overlay tree.
 */
@@ -2169,11 +2297,12 @@ function OnboardingSurface({ children }) {
 * Render one in-page confirmation whose primary action is unavailable until
 * the caller-controlled acknowledgement is checked.
 */
-function RiskConfirmation({ open, title, description, acknowledgeLabel, cancelLabel, confirmLabel, acknowledged, disabled = false, onAcknowledgedChange, onCancel, onConfirm }) {
+function RiskConfirmation({ open, title, description, acknowledgeLabel, cancelLabel, closeLabel, confirmLabel, acknowledged, disabled = false, onAcknowledgedChange, onCancel, onConfirm }) {
 	return jsxs(Modal, {
 		open,
 		onClose: onCancel,
 		title,
+		closeLabel,
 		className: css$9.confirmation ?? "",
 		contentClassName: css$9.confirmationContent ?? "",
 		footer: jsxs(Fragment, { children: [jsx(Button, {
@@ -2209,23 +2338,112 @@ function RiskConfirmation({ open, title, description, acknowledgeLabel, cancelLa
 	});
 }
 //#endregion
-//#region lib/types/ConnectionBanner.js
+//#region lib/types/ConnectionIndicator.js
 /**
-* Render the reconnecting banner.
-* @param props.reconnecting - true while the connection is in backoff/retry.
-* @param props.label - banner text; the owner passes localized copy (this
-* package is cordis-free, so copy arrives via props).
-* @returns the banner, or null when connected.
+* Render an inline connection-recovery control.
+* @param props.state - visible outage, retry-attempt, or recovered state.
+* @param props.disconnectedLabel - localized outage text.
+* @param props.reconnectLabel - localized action text shown on hover or focus.
+* @param props.connectingLabel - localized retry text followed by the attempt dots.
+* @param props.recoveredLabel - localized recovery confirmation.
+* @param props.reconnectActionLabel - accessible label for the outage action.
+* @param props.restartActionLabel - accessible label for replacing an active attempt.
+* @param props.onReconnect - request an immediate reconnect attempt.
+* @returns the indicator, or null when no connection feedback is active.
 */
-function ConnectionBanner({ reconnecting, label = "连接已断开，正在重连…" }) {
-	if (!reconnecting) return null;
-	return jsx("div", {
-		className: css$10.banner,
-		children: label
+function ConnectionIndicator({ state, disconnectedLabel, reconnectLabel, connectingLabel, recoveredLabel, reconnectActionLabel, restartActionLabel, onReconnect }) {
+	if (state === void 0) return null;
+	const sizeLabels = jsxs(Fragment, { children: [
+		jsx("span", {
+			className: css$10.sizeLabel,
+			"aria-hidden": "true",
+			children: disconnectedLabel
+		}),
+		jsx("span", {
+			className: css$10.sizeLabel,
+			"aria-hidden": "true",
+			children: reconnectLabel
+		}),
+		jsxs("span", {
+			className: css$10.sizeLabel,
+			"aria-hidden": "true",
+			children: [connectingLabel, jsx("span", {
+				className: css$10.dots,
+				children: "..."
+			})]
+		}),
+		jsx("span", {
+			className: css$10.sizeLabel,
+			"aria-hidden": "true",
+			children: recoveredLabel
+		})
+	] });
+	if (state === "recovered") return jsxs("div", {
+		className: `${css$10.indicator} ${css$10.success}`,
+		role: "status",
+		"aria-label": recoveredLabel,
+		children: [jsx("span", {
+			className: css$10.icon,
+			"aria-hidden": "true",
+			children: jsx(IconCheckOutline16, { size: 14 })
+		}), jsxs("span", {
+			className: css$10.label,
+			children: [sizeLabels, jsx("span", {
+				className: css$10.stateLabel,
+				children: recoveredLabel
+			})]
+		})]
+	});
+	const connecting = state === "connecting";
+	return jsxs("button", {
+		type: "button",
+		className: `${css$10.indicator} ${css$10.warning}`,
+		"data-phase": state,
+		"aria-label": connecting ? restartActionLabel : reconnectActionLabel,
+		onClick: onReconnect,
+		children: [jsx("span", {
+			className: css$10.icon,
+			"aria-hidden": "true",
+			children: jsx(IconWarningOutline16, { size: 14 })
+		}), jsxs("span", {
+			className: css$10.label,
+			children: [
+				sizeLabels,
+				jsx("span", {
+					className: css$10.stateLabel,
+					children: connecting ? jsxs(Fragment, { children: [connectingLabel, jsxs("span", {
+						className: css$10.dots,
+						"aria-hidden": "true",
+						children: [
+							jsx("span", { children: "." }),
+							jsx("span", {
+								className: css$10.secondDot,
+								children: "."
+							}),
+							jsx("span", {
+								className: css$10.thirdDot,
+								children: "."
+							})
+						]
+					})] }) : disconnectedLabel
+				}),
+				jsx("span", {
+					className: css$10.hoverLabel,
+					children: reconnectLabel
+				})
+			]
+		})]
 	});
 }
 //#endregion
 //#region lib/types/FishLogo.js
+/** Native viewBox of {@link FISH_LOGO_PATH} (width and height in user units). */
+const FISH_LOGO_VIEWBOX = {
+	width: 23.16,
+	height: 17.04
+};
+/** The fish silhouette path data, exported for consumers that compose their own svg (entrance effects, masks) around the same geometry. */
+const FISH_LOGO_PATH = "M22.9168 1.43018C22.6713 1.31018 22.5658 1.53918 22.4223 1.65519C22.3733 1.69269 22.3318 1.74169 22.2903 1.78669C21.9317 2.1697 21.5127 2.42121 20.9657 2.39121C20.1657 2.34621 19.4827 2.59771 18.8787 3.20973C18.7502 2.45521 18.3236 2.0047 17.6746 1.71569C17.3351 1.56568 16.9916 1.41518 16.7536 1.08867C16.5876 0.856163 16.5421 0.597155 16.4591 0.341647C16.4061 0.187643 16.3536 0.0301382 16.1761 0.00363739C15.9836 -0.0263635 15.9081 0.135141 15.8326 0.270145C15.5306 0.822162 15.4136 1.43018 15.4251 2.0462C15.4516 3.43174 16.0366 4.53527 17.1991 5.3203C17.3311 5.4103 17.3651 5.5003 17.3236 5.63181C17.2441 5.90231 17.1501 6.16482 17.0671 6.43533C17.0141 6.60784 16.9351 6.64584 16.7501 6.57033C16.1121 6.30383 15.5611 5.90931 15.074 5.4328C14.2475 4.63328 13.5 3.75075 12.568 3.05973C12.349 2.89822 12.13 2.74822 11.9034 2.60522C10.9524 1.68169 12.028 0.923165 12.277 0.833162C12.5375 0.739159 12.3675 0.41615 11.5259 0.42015C10.6844 0.42365 9.91439 0.705658 8.93286 1.08117C8.78935 1.13767 8.63835 1.17867 8.48384 1.21267C7.59332 1.04367 6.66829 1.00617 5.70226 1.11517C3.88321 1.31768 2.43016 2.1777 1.36213 3.64575C0.0790928 5.4103 -0.222916 7.41536 0.146595 9.50642C0.535106 11.7105 1.66014 13.535 3.38869 14.9616C5.18125 16.4406 7.24581 17.1657 9.60138 17.0266C11.0319 16.9441 12.6245 16.7526 14.421 15.2321C14.874 15.4576 15.3496 15.5476 16.1381 15.6151C16.7456 15.6716 17.3306 15.5851 17.7836 15.4911C18.4931 15.3411 18.4441 14.6841 18.1876 14.5636C16.1081 13.595 16.5646 13.9891 16.1496 13.67C17.2061 12.42 18.8202 10.1979 19.3182 7.17235C19.3672 6.83834 19.4297 6.36783 19.4222 6.09732C19.4182 5.93231 19.4562 5.86831 19.6447 5.84931C20.1657 5.78931 20.6712 5.64681 21.1357 5.3913C22.4833 4.65528 23.0268 3.44624 23.1548 1.9972C23.1738 1.77569 23.1508 1.54668 22.9168 1.43018ZM11.1749 14.4736C9.15936 12.889 8.18184 12.3675 7.77832 12.39C7.40081 12.4125 7.46881 12.8445 7.55182 13.126C7.63882 13.404 7.75182 13.5955 7.91033 13.8396C8.01983 14.0011 8.09533 14.2411 7.80083 14.4216C7.15181 14.8231 6.02327 14.2866 5.97027 14.2601C4.65673 13.4865 3.5587 12.4655 2.78467 11.069C2.03715 9.72493 1.60314 8.28289 1.53164 6.74384C1.51264 6.37233 1.62214 6.24082 1.99215 6.17332C2.47916 6.08332 2.98118 6.06432 3.46769 6.13582C5.52476 6.43633 7.27581 7.35586 8.74385 8.8129C9.58188 9.64243 10.2159 10.634 10.8689 11.6025C11.5634 12.631 12.3105 13.611 13.262 14.4146C13.598 14.6961 13.866 14.9101 14.1225 15.0681C13.349 15.1546 12.058 15.1731 11.1749 14.4746L11.1749 14.4736ZM12.141 8.25988C12.141 8.09488 12.273 7.96338 12.439 7.96338C12.4765 7.96338 12.5105 7.97088 12.541 7.98188C12.5825 7.99688 12.6205 8.01938 12.6505 8.05338C12.7035 8.10588 12.7335 8.18088 12.7335 8.25988C12.7335 8.42489 12.6015 8.55639 12.4355 8.55639C12.2695 8.55639 12.141 8.42489 12.141 8.25988ZM15.1415 9.79893C14.949 9.87793 14.7565 9.94544 14.5715 9.95294C14.2845 9.96794 13.9715 9.85143 13.8015 9.70893C13.5375 9.48742 13.3485 9.36342 13.2695 8.97691C13.2355 8.8119 13.2545 8.55639 13.2845 8.40989C13.3525 8.09438 13.277 7.89187 13.0545 7.70787C12.8735 7.55786 12.643 7.51636 12.39 7.51636C12.2955 7.51636 12.209 7.47486 12.1445 7.44136C12.039 7.38886 11.9519 7.25735 12.035 7.09585C12.0615 7.04335 12.19 6.91584 12.22 6.89334C12.5635 6.69784 12.9595 6.76184 13.326 6.90834C13.6655 7.04735 13.9225 7.30236 14.292 7.66287C14.6695 8.09838 14.7375 8.21838 14.9525 8.54539C15.1225 8.8009 15.277 9.06341 15.3831 9.36392C15.4471 9.55142 15.3641 9.70493 15.1415 9.79893Z";
 /**
 * Render the fish logo.
 * @param props.size - width in px (default 24; height keeps the 23.16:17.04 ratio).
@@ -2235,13 +2453,13 @@ function ConnectionBanner({ reconnecting, label = "连接已断开，正在重
 function FishLogo({ size = 24, className }) {
 	return jsx("svg", {
 		width: size,
-		height: size * 17.04 / 23.16,
+		height: size * FISH_LOGO_VIEWBOX.height / FISH_LOGO_VIEWBOX.width,
 		className,
-		viewBox: "0 0 23.16 17.04",
+		viewBox: `0 0 ${FISH_LOGO_VIEWBOX.width} ${FISH_LOGO_VIEWBOX.height}`,
 		fill: "none",
 		"aria-hidden": "true",
 		children: jsx("path", {
-			d: "M22.9168 1.43018C22.6713 1.31018 22.5658 1.53918 22.4223 1.65519C22.3733 1.69269 22.3318 1.74169 22.2903 1.78669C21.9317 2.1697 21.5127 2.42121 20.9657 2.39121C20.1657 2.34621 19.4827 2.59771 18.8787 3.20973C18.7502 2.45521 18.3236 2.0047 17.6746 1.71569C17.3351 1.56568 16.9916 1.41518 16.7536 1.08867C16.5876 0.856163 16.5421 0.597155 16.4591 0.341647C16.4061 0.187643 16.3536 0.0301382 16.1761 0.00363739C15.9836 -0.0263635 15.9081 0.135141 15.8326 0.270145C15.5306 0.822162 15.4136 1.43018 15.4251 2.0462C15.4516 3.43174 16.0366 4.53527 17.1991 5.3203C17.3311 5.4103 17.3651 5.5003 17.3236 5.63181C17.2441 5.90231 17.1501 6.16482 17.0671 6.43533C17.0141 6.60784 16.9351 6.64584 16.7501 6.57033C16.1121 6.30383 15.5611 5.90931 15.074 5.4328C14.2475 4.63328 13.5 3.75075 12.568 3.05973C12.349 2.89822 12.13 2.74822 11.9034 2.60522C10.9524 1.68169 12.028 0.923165 12.277 0.833162C12.5375 0.739159 12.3675 0.41615 11.5259 0.42015C10.6844 0.42365 9.91439 0.705658 8.93286 1.08117C8.78935 1.13767 8.63835 1.17867 8.48384 1.21267C7.59332 1.04367 6.66829 1.00617 5.70226 1.11517C3.88321 1.31768 2.43016 2.1777 1.36213 3.64575C0.0790928 5.4103 -0.222916 7.41536 0.146595 9.50642C0.535106 11.7105 1.66014 13.535 3.38869 14.9616C5.18125 16.4406 7.24581 17.1657 9.60138 17.0266C11.0319 16.9441 12.6245 16.7526 14.421 15.2321C14.874 15.4576 15.3496 15.5476 16.1381 15.6151C16.7456 15.6716 17.3306 15.5851 17.7836 15.4911C18.4931 15.3411 18.4441 14.6841 18.1876 14.5636C16.1081 13.595 16.5646 13.9891 16.1496 13.67C17.2061 12.42 18.8202 10.1979 19.3182 7.17235C19.3672 6.83834 19.4297 6.36783 19.4222 6.09732C19.4182 5.93231 19.4562 5.86831 19.6447 5.84931C20.1657 5.78931 20.6712 5.64681 21.1357 5.3913C22.4833 4.65528 23.0268 3.44624 23.1548 1.9972C23.1738 1.77569 23.1508 1.54668 22.9168 1.43018ZM11.1749 14.4736C9.15936 12.889 8.18184 12.3675 7.77832 12.39C7.40081 12.4125 7.46881 12.8445 7.55182 13.126C7.63882 13.404 7.75182 13.5955 7.91033 13.8396C8.01983 14.0011 8.09533 14.2411 7.80083 14.4216C7.15181 14.8231 6.02327 14.2866 5.97027 14.2601C4.65673 13.4865 3.5587 12.4655 2.78467 11.069C2.03715 9.72493 1.60314 8.28289 1.53164 6.74384C1.51264 6.37233 1.62214 6.24082 1.99215 6.17332C2.47916 6.08332 2.98118 6.06432 3.46769 6.13582C5.52476 6.43633 7.27581 7.35586 8.74385 8.8129C9.58188 9.64243 10.2159 10.634 10.8689 11.6025C11.5634 12.631 12.3105 13.611 13.262 14.4146C13.598 14.6961 13.866 14.9101 14.1225 15.0681C13.349 15.1546 12.058 15.1731 11.1749 14.4746L11.1749 14.4736ZM12.141 8.25988C12.141 8.09488 12.273 7.96338 12.439 7.96338C12.4765 7.96338 12.5105 7.97088 12.541 7.98188C12.5825 7.99688 12.6205 8.01938 12.6505 8.05338C12.7035 8.10588 12.7335 8.18088 12.7335 8.25988C12.7335 8.42489 12.6015 8.55639 12.4355 8.55639C12.2695 8.55639 12.141 8.42489 12.141 8.25988ZM15.1415 9.79893C14.949 9.87793 14.7565 9.94544 14.5715 9.95294C14.2845 9.96794 13.9715 9.85143 13.8015 9.70893C13.5375 9.48742 13.3485 9.36342 13.2695 8.97691C13.2355 8.8119 13.2545 8.55639 13.2845 8.40989C13.3525 8.09438 13.277 7.89187 13.0545 7.70787C12.8735 7.55786 12.643 7.51636 12.39 7.51636C12.2955 7.51636 12.209 7.47486 12.1445 7.44136C12.039 7.38886 11.9519 7.25735 12.035 7.09585C12.0615 7.04335 12.19 6.91584 12.22 6.89334C12.5635 6.69784 12.9595 6.76184 13.326 6.90834C13.6655 7.04735 13.9225 7.30236 14.292 7.66287C14.6695 8.09838 14.7375 8.21838 14.9525 8.54539C15.1225 8.8009 15.277 9.06341 15.3831 9.36392C15.4471 9.55142 15.3641 9.70493 15.1415 9.79893Z",
+			d: FISH_LOGO_PATH,
 			fill: "currentColor"
 		})
 	});
@@ -2369,6 +2587,120 @@ function BrandWordmark({ size = 24, className, includeMark = true }) {
 	});
 }
 //#endregion
+//#region lib/types/ReferenceIcon.js
+/**
+* Render the icon that identifies one inline reference domain.
+* @param props - Reference kind, optional size, and optional CSS class.
+* @returns The corresponding current-color SVG glyph.
+*/
+function ReferenceIcon({ kind, size = 16, className }) {
+	switch (kind) {
+		case "session": return jsx("svg", {
+			width: size,
+			height: size,
+			className,
+			viewBox: "0 0 16 16",
+			fill: "none",
+			"aria-hidden": true,
+			children: jsx("path", {
+				d: "M8 0.597656C3.91296 0.597656 0.599716 3.91103 0.599609 7.99805C0.599609 9.13171 0.854567 10.2079 1.31152 11.1699L1.59277 11.7607L2.77441 11.1992L2.49414 10.6084L2.36035 10.3076C2.06865 9.59612 1.90723 8.81645 1.90723 7.99805C1.90733 4.63362 4.63554 1.90625 8 1.90625C11.3644 1.90635 14.0917 4.63368 14.0918 7.99805C14.0918 11.3625 11.3644 14.0907 8 14.0908C7.311 14.0908 6.80642 14.0414 6.35938 13.918C5.919 13.7963 5.50105 13.5929 5.00098 13.2441C4.26805 12.7329 3.21756 12.5526 2.35156 13.0996L2.33789 13.1084L2.32422 13.1182L1.74805 13.5234L2.18164 14.8184L3.05957 14.2002C3.37505 14.0068 3.84248 14.0319 4.25195 14.3174C4.84447 14.7307 5.39718 15.009 6.01172 15.1787C6.61963 15.3465 7.25579 15.3984 8 15.3984C12.087 15.3983 15.4004 12.0851 15.4004 7.99805C15.4003 3.9111 12.087 0.59776 8 0.597656ZM4.56836 8.50977V9.80371H8.12402V8.50977H4.56836ZM4.56836 7.30078H11.4619V6.00684H4.56836V7.30078Z",
+				fill: "currentColor"
+			})
+		});
+		case "file": return jsx(IconBrowseOutline16, {
+			size,
+			className
+		});
+		case "folder": return jsx(IconFolderClose16, {
+			size,
+			className
+		});
+	}
+}
+//#endregion
+//#region lib/types/user-text.js
+/** The wire form a session chip serializes to; label is the display text. */
+const SESSION_WIRE_RE = /@\[([^\]\n]+)\]\(dsh-session:[^)\s]+\)/gu;
+/**
+* Split one sent text into inline plain runs and reference chips.
+* @param text - the logged model text of the message or queue row.
+* @param sessionLabels - exact session mention labels associated by an adjacent recall.
+* @returns inline nodes covering the whole text.
+*/
+function projectUserText(text, sessionLabels) {
+	const ranges = [];
+	SESSION_WIRE_RE.lastIndex = 0;
+	let wire;
+	while ((wire = SESSION_WIRE_RE.exec(text)) !== null) ranges.push({
+		start: wire.index,
+		end: wire.index + wire[0].length,
+		label: wire[0],
+		kind: "session",
+		display: wire[1]
+	});
+	for (const rawLabel of [...new Set(sessionLabels)].sort((a, b) => b.length - a.length)) {
+		const label = `@${rawLabel}`;
+		let start = text.indexOf(label);
+		while (start >= 0) {
+			ranges.push({
+				start,
+				end: start + label.length,
+				label,
+				kind: "session"
+			});
+			start = text.indexOf(label, start + label.length);
+		}
+	}
+	const re = /(^|\s)(\/[\w-]+|@"[^"\n]+"|@[^\s]+)/gu;
+	let m;
+	while ((m = re.exec(text)) !== null) {
+		const tokenStart = m.index + m[1].length;
+		const rawLabel = m[2];
+		const label = rawLabel.startsWith("@\"") ? rawLabel : rawLabel.replace(/[.,;:!?，。；：！？]+$/gu, "");
+		if (label.length <= 1) continue;
+		ranges.push({
+			start: tokenStart,
+			end: tokenStart + label.length,
+			label,
+			kind: "plain"
+		});
+	}
+	const rankOf = (range) => range.kind === "session" ? 0 : 1;
+	ranges.sort((a, b) => a.start - b.start || rankOf(a) - rankOf(b) || b.end - a.end);
+	const parts = [];
+	let cursor = 0;
+	const pushPlain = (from, to) => {
+		parts.push(jsx("span", {
+			className: css$11.plainRun,
+			children: text.slice(from, to)
+		}, `t${from}`));
+	};
+	for (const range of ranges) {
+		if (range.start < cursor) continue;
+		const { start: tokenStart, end, label, kind } = range;
+		if (tokenStart > cursor) pushPlain(cursor, tokenStart);
+		const referenceKind = kind === "session" ? "session" : label.startsWith("@") ? label.endsWith("/") ? "folder" : "file" : void 0;
+		const displayLabel = range.display ?? (referenceKind === void 0 ? label : referenceKind === "session" ? label.slice(1) : label.slice(1).replace(/^"|"$/gu, "").split(/[\\/]/u).filter(Boolean).at(-1) ?? label.slice(1));
+		parts.push(jsxs("span", {
+			className: css$11.refChip,
+			"data-ref-chip": referenceKind ?? "skill",
+			title: label,
+			children: [referenceKind !== void 0 && jsx(ReferenceIcon, {
+				kind: referenceKind,
+				size: 16,
+				className: css$11.refIcon
+			}), displayLabel]
+		}, tokenStart));
+		cursor = end;
+	}
+	if (parts.length === 0) return jsx("span", {
+		className: css$11.plainRun,
+		children: text
+	});
+	if (cursor < text.length) pushPlain(cursor, text.length);
+	return jsx(Fragment, { children: parts });
+}
+//#endregion
 //#region lib/types/Tooltip.js
 /**
 * Attach a hover/focus tooltip to an anchor element.
@@ -2500,7 +2832,7 @@ function Tooltip({ label, side = "right", delayMs = 0, disabled = false, maxWidt
 		}
 	}), pos !== null && jsx("span", {
 		ref: bubble,
-		className: css$11.bubble,
+		className: css$12.bubble,
 		"data-side": placement,
 		style: {
 			left: pos.x,
@@ -2513,6 +2845,10 @@ function Tooltip({ label, side = "right", delayMs = 0, disabled = false, maxWidt
 }
 //#endregion
 //#region lib/types/Toast.js
+/** Full-opacity hold before the fade starts, when the owner names none. */
+const HOLD_MS = 3e3;
+/** Fade duration. Must agree with the stylesheet's toast-fade duration. */
+const FADE_MS = 1e3;
 /**
 * Transient top-center banner: slides in, holds at full opacity, fades out,
 * then reports done so the owner can unmount it. Re-showing the same text
@@ -2521,21 +2857,28 @@ function Tooltip({ label, side = "right", delayMs = 0, disabled = false, maxWidt
 * transformed or filtered ancestor cannot trap the fixed banner in that
 * ancestor's box.
 *
+* The hold is the owner's to set, because how long a banner has to stay
+* depends on how much there is to read: a one-line limit lands in the default
+* window, while a failure that names what broke does not. One value drives
+* both the unmount timer and the stylesheet's fade delay — the stylesheet
+* reads it as a custom property — so the two can no longer disagree and leave
+* the banner unmounting mid-fade.
 * @param props.text - resolved banner copy; the owner passes localized text.
 * @param props.icon - optional leading glyph (e.g. a warning icon).
+* @param props.holdMs - full-opacity hold before the fade; defaults to 3000.
 * @param props.anchor - optional element whose horizontal center the banner
 * follows (e.g. the composer card, so the banner centers over the chat column
 * rather than the whole window); omitted, it centers on the viewport.
 * @param props.onDone - called once the fade completes; unmount the toast here.
 * @returns the floating banner.
 */
-function Toast({ text, icon, anchor, onDone }) {
+function Toast({ text, icon, anchor, holdMs = HOLD_MS, onDone }) {
 	useEffect(() => {
-		const timer = setTimeout(onDone, 4e3);
+		const timer = setTimeout(onDone, holdMs + FADE_MS);
 		return () => {
 			clearTimeout(timer);
 		};
-	}, [onDone]);
+	}, [holdMs, onDone]);
 	const [left, setLeft] = useState(null);
 	useLayoutEffect(() => {
 		if (anchor == null) return;
@@ -2550,36 +2893,73 @@ function Toast({ text, icon, anchor, onDone }) {
 		};
 	}, [anchor]);
 	return createPortal(jsxs("div", {
-		className: css$12.toast,
+		className: css$13.toast,
 		role: "alert",
-		style: left === null ? void 0 : { left },
+		style: {
+			...left === null ? {} : { left },
+			"--dsh-toast-hold": `${String(holdMs)}ms`
+		},
 		children: [icon !== void 0 && jsx("span", {
-			className: css$12.icon,
+			className: css$13.icon,
 			"aria-hidden": true,
 			children: icon
 		}), jsx("span", {
-			className: css$12.text,
+			className: css$13.text,
 			children: text
 		})]
 	}), document.body);
 }
 //#endregion
+//#region lib/types/relative-time.js
+/**
+* Compact relative-time bucketing shared by every surface that dates a
+* session. Bucketing is here so two surfaces naming the same session agree;
+* the words stay in each plugin's own dictionary, per locale-owned copy.
+*
+* @module @deepseek-ai/dsh-client-ui-primitives/relative-time
+*/
+/**
+* Compact relative time, as a structured bucket the renderer localizes
+* ("now"/"5min"/"3h"/"2d"/"4mo"/"1y" in en).
+* @param at - epoch ms of the dated moment.
+* @param now - current epoch ms (injected for pure rendering).
+* @returns the row's trailing time bucket and magnitude.
+*/
+function relativeTime(at, now) {
+	const MIN = 6e4;
+	const HOUR = 36e5;
+	const DAY = 864e5;
+	const diff = Math.max(0, now - at);
+	if (diff < MIN) return {
+		unit: "now",
+		n: 0
+	};
+	if (diff < HOUR) return {
+		unit: "minutes",
+		n: Math.floor(diff / MIN)
+	};
+	if (diff < DAY) return {
+		unit: "hours",
+		n: Math.floor(diff / HOUR)
+	};
+	if (diff < 30 * DAY) return {
+		unit: "days",
+		n: Math.floor(diff / DAY)
+	};
+	if (diff < 365 * DAY) return {
+		unit: "months",
+		n: Math.floor(diff / (30 * DAY))
+	};
+	return {
+		unit: "years",
+		n: Math.floor(diff / (365 * DAY))
+	};
+}
+//#endregion
 //#region lib/types/JsonTree.js
 const OBJECT_PREVIEW_LIMIT = 4;
 const ARRAY_PREVIEW_LIMIT = 5;
 const PREVIEW_DEPTH_LIMIT = 2;
-const DEFAULT_LABELS$1 = {
-	copyValue: "Copy value",
-	copyJson: "Copy JSON",
-	copyPath: "Copy property path",
-	copyPrettyJson: "Copy pretty JSON",
-	copyCompactJson: "Copy compact JSON",
-	copied: "Copied",
-	copyFailed: "Copy failed",
-	collapseNode: "Collapse JSON node",
-	expandNode: "Expand JSON node",
-	copyButtonTitle: (action) => `${action}; right-click for copy options`
-};
 function valueCopyMenuItems(labels) {
 	return [
 		{
@@ -2624,35 +3004,35 @@ function bracketOf(value) {
 }
 function previewPrimitive(value) {
 	if (value === null) return jsx("span", {
-		className: css$13.keywordValue,
+		className: css$14.keywordValue,
 		children: "null"
 	});
 	if (typeof value === "string") return jsx("span", {
-		className: css$13.stringValue,
+		className: css$14.stringValue,
 		children: JSON.stringify(value)
 	});
 	if (typeof value === "number") return jsx("span", {
-		className: css$13.numberValue,
+		className: css$14.numberValue,
 		children: String(value)
 	});
 	if (typeof value === "boolean") return jsx("span", {
-		className: css$13.keywordValue,
+		className: css$14.keywordValue,
 		children: String(value)
 	});
 	if (typeof value === "bigint") return jsx("span", {
-		className: css$13.otherValue,
+		className: css$14.otherValue,
 		children: value.toString()
 	});
 	if (typeof value === "undefined") return jsx("span", {
-		className: css$13.otherValue,
+		className: css$14.otherValue,
 		children: "undefined"
 	});
 	if (typeof value === "symbol") return jsx("span", {
-		className: css$13.otherValue,
+		className: css$14.otherValue,
 		children: value.description ?? "Symbol"
 	});
 	if (typeof value === "function") return jsx("span", {
-		className: css$13.otherValue,
+		className: css$14.otherValue,
 		children: value.name || "Function"
 	});
 	return null;
@@ -2666,71 +3046,71 @@ function previewValue(value, depth) {
 	const [open, close] = bracketOf(value);
 	return jsxs(Fragment, { children: [
 		jsx("span", {
-			className: css$13.punctuation,
+			className: css$14.punctuation,
 			children: open
 		}),
 		depth >= PREVIEW_DEPTH_LIMIT ? jsx("span", {
-			className: css$13.previewEllipsis,
+			className: css$14.previewEllipsis,
 			children: "…"
 		}) : visible.map(([key, item], index) => jsxs("span", { children: [
 			index > 0 && jsx("span", {
-				className: css$13.punctuation,
+				className: css$14.punctuation,
 				children: ", "
 			}),
 			!array && jsxs(Fragment, { children: [jsx("span", {
-				className: css$13.previewProperty,
+				className: css$14.previewProperty,
 				children: key
 			}), jsx("span", {
-				className: css$13.punctuation,
+				className: css$14.punctuation,
 				children: ": "
 			})] }),
 			previewValue(item, depth + 1)
 		] }, key)),
 		depth < PREVIEW_DEPTH_LIMIT && entries.length > limit && jsx("span", {
-			className: css$13.previewEllipsis,
+			className: css$14.previewEllipsis,
 			children: ", …"
 		}),
 		jsx("span", {
-			className: css$13.punctuation,
+			className: css$14.punctuation,
 			children: close
 		})
 	] });
 }
 function primitiveValue(value) {
 	if (value === null) return jsx("span", {
-		className: css$13.keywordValue,
+		className: css$14.keywordValue,
 		children: "null"
 	});
 	if (typeof value === "string") return jsx("span", {
-		className: css$13.stringValue,
+		className: css$14.stringValue,
 		children: JSON.stringify(value)
 	});
 	if (typeof value === "boolean") return jsx("span", {
-		className: css$13.keywordValue,
+		className: css$14.keywordValue,
 		children: String(value)
 	});
 	if (typeof value === "number") return jsx("span", {
-		className: css$13.numberValue,
+		className: css$14.numberValue,
 		children: String(value)
 	});
 	if (typeof value === "bigint") return jsx("span", {
-		className: css$13.numberValue,
+		className: css$14.numberValue,
 		children: `${value.toString()}n`
 	});
 	if (value instanceof Date) return jsx("span", {
-		className: css$13.otherValue,
+		className: css$14.otherValue,
 		children: value.toISOString()
 	});
 	if (typeof value === "function") return jsxs("span", {
-		className: css$13.otherValue,
+		className: css$14.otherValue,
 		children: ["function() ", "{ }"]
 	});
 	if (typeof value === "undefined") return jsx("span", {
-		className: css$13.otherValue,
+		className: css$14.otherValue,
 		children: "undefined"
 	});
 	return jsx("span", {
-		className: css$13.otherValue,
+		className: css$14.otherValue,
 		children: value.toString()
 	});
 }
@@ -2758,7 +3138,7 @@ function moveFocus(button, direction) {
 function NodeField({ field, expandable, onToggle }) {
 	if (field === void 0) return null;
 	return jsxs("span", {
-		className: clsx(css$13.label, expandable && css$13.clickableLabel),
+		className: clsx(css$14.label, expandable && css$14.clickableLabel),
 		onClick: expandable ? onToggle : void 0,
 		children: [fieldText(field), ":"]
 	});
@@ -2787,7 +3167,7 @@ function JsonTreeNode({ field, initialExpanded, labels, lastElement, onClaimTabS
 		}
 	};
 	const row = (children, ariaExpanded) => jsx("div", {
-		className: css$13.row,
+		className: css$14.row,
 		role: "treeitem",
 		"aria-expanded": ariaExpanded,
 		onMouseOver: (event) => {
@@ -2807,7 +3187,7 @@ function JsonTreeNode({ field, initialExpanded, labels, lastElement, onClaimTabS
 		}),
 		primitiveValue(value),
 		!lastElement && jsx("span", {
-			className: css$13.punctuation,
+			className: css$14.punctuation,
 			children: ","
 		})
 	] }));
@@ -2819,22 +3199,22 @@ function JsonTreeNode({ field, initialExpanded, labels, lastElement, onClaimTabS
 			onToggle: toggle
 		}),
 		jsx("span", {
-			className: css$13.punctuation,
+			className: css$14.punctuation,
 			children: open
 		}),
 		jsx("span", {
-			className: css$13.punctuation,
+			className: css$14.punctuation,
 			children: close
 		}),
 		!lastElement && jsx("span", {
-			className: css$13.punctuation,
+			className: css$14.punctuation,
 			children: ","
 		})
 	] }));
 	return row(jsxs(Fragment, { children: [
 		jsx("span", {
 			ref: expanderRef,
-			className: clsx(css$13.expander, expanded ? css$13.collapseIcon : css$13.expandIcon),
+			className: clsx(css$14.expander, expanded ? css$14.collapseIcon : css$14.expandIcon),
 			"data-json-expander": true,
 			role: "button",
 			"aria-label": expanded ? labels.collapseNode : labels.expandNode,
@@ -2853,17 +3233,17 @@ function JsonTreeNode({ field, initialExpanded, labels, lastElement, onClaimTabS
 			onToggle: toggle
 		}),
 		jsx("span", {
-			className: css$13.preview,
+			className: css$14.preview,
 			children: previewValue(value, 0)
 		}),
 		!lastElement && jsx("span", {
-			className: css$13.punctuation,
+			className: css$14.punctuation,
 			children: ","
 		}),
 		expanded && jsx("ul", {
 			id: contentsId,
 			role: "group",
-			className: css$13.children,
+			className: css$14.children,
 			children: entries.map(([key, item], index) => jsx(JsonTreeNode, {
 				field: key,
 				value: item,
@@ -2900,11 +3280,7 @@ function copyText$2(target, mode) {
 * @param props - Parsed data, accessible label, and display options.
 * @returns A read-only JSON tree with an optionally fixed-open top level.
 */
-function JsonTree({ data, label = "JSON", className, copyable = true, expandTopLevel = true, labels }) {
-	const copyLabels = useMemo(() => labels === void 0 ? DEFAULT_LABELS$1 : {
-		...DEFAULT_LABELS$1,
-		...labels
-	}, [labels]);
+function JsonTree({ data, label, className, copyable = true, expandTopLevel = true, labels }) {
 	const rootEntries = entriesOf(data);
 	const firstExpandableIndex = rootEntries.findIndex(([, value]) => isExpandableValue(value) && entriesOf(value).length > 0);
 	const firstExpandableEntry = rootEntries[firstExpandableIndex];
@@ -3025,20 +3401,20 @@ function JsonTree({ data, label = "JSON", className, copyable = true, expandTopL
 	const [rootOpen, rootClose] = bracketOf(data);
 	const copyTargetIsObject = typeof copyTarget?.value === "object" && copyTarget.value !== null;
 	const defaultCopyMode = copyTargetIsObject ? "prettyJson" : "value";
-	const copyTitle = copyState === "copied" ? copyLabels.copied : copyState === "failed" ? copyLabels.copyFailed : copyTargetIsObject ? copyLabels.copyPrettyJson : copyLabels.copyValue;
+	const copyTitle = copyState === "copied" ? labels.copied : copyState === "failed" ? labels.copyFailed : copyTargetIsObject ? labels.copyPrettyJson : labels.copyValue;
 	return jsxs("div", {
 		ref: rootRef,
-		className: clsx(css$13.root, className),
+		className: clsx(css$14.root, className),
 		onMouseOver: handleRootMouseOver,
 		onMouseLeave: () => {
 			if (!copyMenuOpenRef.current) clearCopyTarget();
 		},
 		onScroll: handleScroll,
 		children: [expandTopLevel ? jsxs("div", {
-			className: css$13.expandedTopLevel,
+			className: css$14.expandedTopLevel,
 			children: [
 				jsx("div", {
-					className: clsx(css$13.row, css$13.topLevelBracket),
+					className: clsx(css$14.row, css$14.topLevelBracket),
 					"data-json-root-row": true,
 					onMouseOver: (event) => {
 						event.stopPropagation();
@@ -3048,19 +3424,19 @@ function JsonTree({ data, label = "JSON", className, copyable = true, expandTopL
 						});
 					},
 					children: jsx("span", {
-						className: css$13.punctuation,
+						className: css$14.punctuation,
 						children: rootOpen
 					})
 				}),
 				jsx("div", {
 					"aria-label": label,
-					className: clsx(css$13.container, css$13.expandedTopLevelContainer),
+					className: clsx(css$14.container, css$14.expandedTopLevelContainer),
 					role: "tree",
 					children: rootEntries.map(([key, value], index) => jsx(JsonTreeNode, {
 						field: key,
 						value,
 						path: [Array.isArray(data) ? index : key],
-						labels: copyLabels,
+						labels,
 						lastElement: index === rootEntries.length - 1,
 						initialExpanded: false,
 						tabStopId,
@@ -3069,21 +3445,21 @@ function JsonTree({ data, label = "JSON", className, copyable = true, expandTopL
 					}, key))
 				}),
 				jsx("div", {
-					className: clsx(css$13.row, css$13.topLevelBracket),
+					className: clsx(css$14.row, css$14.topLevelBracket),
 					children: jsx("span", {
-						className: css$13.punctuation,
+						className: css$14.punctuation,
 						children: rootClose
 					})
 				})
 			]
 		}) : jsx("div", {
 			"aria-label": label,
-			className: css$13.container,
+			className: css$14.container,
 			role: "tree",
 			children: jsx(JsonTreeNode, {
 				value: data,
 				path: [],
-				labels: copyLabels,
+				labels,
 				lastElement: true,
 				initialExpanded: true,
 				tabStopId,
@@ -3091,7 +3467,7 @@ function JsonTree({ data, label = "JSON", className, copyable = true, expandTopL
 				onRowHover: handleRowHover
 			})
 		}), copyTarget !== void 0 && jsx("span", {
-			className: css$13.copyAnchor,
+			className: css$14.copyAnchor,
 			style: {
 				left: copyTarget.left,
 				top: copyTarget.top
@@ -3105,11 +3481,11 @@ function JsonTree({ data, label = "JSON", className, copyable = true, expandTopL
 				anchor: jsx("button", {
 					ref: copyButtonRef,
 					type: "button",
-					className: css$13.copyButton,
+					className: css$14.copyButton,
 					"data-json-copy-button": true,
 					"data-state": copyState,
 					"aria-label": copyTitle,
-					title: copyLabels.copyButtonTitle(copyTitle),
+					title: labels.copyButtonTitle(copyTitle),
 					onClick: () => void copy(defaultCopyMode),
 					onContextMenu: (event) => {
 						event.preventDefault();
@@ -3119,7 +3495,7 @@ function JsonTree({ data, label = "JSON", className, copyable = true, expandTopL
 					},
 					children: copyState === "copied" ? jsx(IconCheckOutline16, { size: 12 }) : jsx(IconCopyOutline16, { size: 12 })
 				}),
-				items: copyTargetIsObject ? objectCopyMenuItems(copyLabels) : valueCopyMenuItems(copyLabels),
+				items: copyTargetIsObject ? objectCopyMenuItems(labels) : valueCopyMenuItems(labels),
 				onSelect: (id) => {
 					copy(id);
 					copyMenuOpenRef.current = false;
@@ -3572,26 +3948,8 @@ function useCopyFeedback(text) {
 }
 //#endregion
 //#region lib/types/TerminalBlock.js
-/**
-* Output lines shown before the height cap collapses the middle. Matches the
-* TUI transcript's default tool-output budget so both front ends cut a long
-* command's output at the same place.
-*/
+/** Output lines shown before the height cap collapses the middle. */
 const DEFAULT_TERMINAL_MAX_LINES = 16;
-const DEFAULT_LABELS = {
-	signal: (signal) => `信号 ${signal}`,
-	exitCode: (exitCode) => `退出码 ${exitCode}`,
-	running: "运行中",
-	failed: "失败",
-	done: "已完成",
-	copy: "复制",
-	copied: "复制成功",
-	noOutput: "无输出",
-	collapseAria: "收起输出",
-	collapse: "收起",
-	expandAria: (hidden) => `展开其余 ${hidden} 行输出`,
-	expand: (hidden) => `… 其余 ${hidden} 行`
-};
 /**
 * Prompt label for a working directory: `~` for the home directory itself,
 * otherwise the path's last segment (both separators accepted, trailing
@@ -3656,7 +4014,7 @@ function runState(running, exitCode, signal, labels) {
 * @param line - the line's styled runs.
 * @returns the line's children.
 */
-function renderLine(line) {
+function renderLine$1(line) {
 	return line.map((span, index) => span.style === void 0 ? span.text : jsx("span", {
 		style: span.style,
 		children: span.text
@@ -3668,10 +4026,7 @@ function renderLine(line) {
 * @returns the terminal block element.
 */
 function TerminalBlock({ command, cwd, home, output, exitCode, signal, running = false, maxLines = 16, className, labels }) {
-	const copy = useMemo(() => labels === void 0 ? DEFAULT_LABELS : {
-		...DEFAULT_LABELS,
-		...labels
-	}, [labels]);
+	const copy = labels;
 	const text = output ?? "";
 	const lines = useMemo(() => {
 		const parsed = parseAnsiLines(text);
@@ -3691,73 +4046,90 @@ function TerminalBlock({ command, cwd, home, output, exitCode, signal, running =
 	const empty = lines.every((line) => line.every((span) => span.text.trim() === ""));
 	const { hidden, capped, headLines, tailLines } = headTailCap(lines.length, maxLines, expanded);
 	return jsxs("div", {
-		className: clsx(css$14.block, className),
+		className: clsx(css$15.block, className),
 		"data-terminal": "",
 		"data-running": running ? "" : void 0,
 		children: [jsxs("div", {
-			className: css$14.header,
+			className: css$15.header,
 			children: [
 				jsxs("div", {
-					className: css$14.prompt,
+					className: css$15.prompt,
 					children: [jsx("span", {
-						className: css$14.runStateLabel,
+						className: css$15.runStateLabel,
 						children: state.label
 					}), commandLines.map((line, index) => jsxs("div", {
-						className: css$14.promptLine,
+						className: css$15.promptLine,
 						children: [
 							index === 0 && jsx(StateDot, {
 								state: state.state,
-								className: css$14.runState
+								className: css$15.runState
 							}),
 							jsx("span", {
-								className: css$14.cwd,
+								className: css$15.cwd,
 								children: index > 0 || cwd === void 0 ? "$" : promptLabel(cwd, home)
 							}),
 							jsx("span", {
-								className: css$14.command,
+								className: css$15.command,
 								children: line
 							})
 						]
 					}, index))]
 				}),
 				status !== void 0 && jsx(Pill, {
-					className: css$14.status,
+					className: css$15.status,
 					children: status
 				}),
 				!running && !empty && jsx("button", {
 					type: "button",
-					className: css$14.copyButton,
+					className: css$15.copyButton,
 					onClick: onCopy,
 					children: copied ? copy.copied : copy.copy
 				})
 			]
 		}), !running && (empty ? jsx("div", {
-			className: css$14.empty,
+			className: css$15.empty,
 			children: copy.noOutput
 		}) : jsxs("div", {
-			className: css$14.output,
+			className: css$15.output,
 			children: [
 				(capped ? lines.slice(0, headLines) : lines).map((line, index) => jsx("div", {
-					className: css$14.line,
-					children: renderLine(line)
+					className: css$15.line,
+					children: renderLine$1(line)
 				}, index)),
 				hidden > 0 && jsx("button", {
 					type: "button",
-					className: css$14.expand,
+					className: css$15.expand,
 					"aria-expanded": expanded,
 					"aria-label": expanded ? copy.collapseAria : copy.expandAria(hidden),
 					onClick: onToggle,
 					children: expanded ? copy.collapse : copy.expand(hidden)
 				}),
 				capped && lines.slice(lines.length - tailLines).map((line, index) => jsx("div", {
-					className: css$14.line,
-					children: renderLine(line)
+					className: css$15.line,
+					children: renderLine$1(line)
 				}, index))
 			]
 		}))]
 	});
 }
 //#endregion
+//#region lib/types/FoldToggle.js
+/**
+* Render the shared head-tail fold control with caller-owned localized copy.
+* @param props - Fold state, localized labels, and toggle callback.
+* @returns The accessible expand or collapse button.
+*/
+function FoldToggle({ className, expanded, hidden, labels, onToggle }) {
+	return jsx("button", {
+		type: "button",
+		className,
+		"aria-expanded": expanded,
+		"aria-label": expanded ? labels.collapseAria : labels.expandAria(hidden),
+		onClick: onToggle,
+		children: expanded ? labels.collapse : labels.expand(hidden)
+	});
+}
+//#endregion
 //#region lib/types/markdown/highlight.js
 /**
 * The client's ONE syntax highlighter: a synchronous fine-grained shiki core
@@ -3881,6 +4253,14 @@ const LANG_ALIASES = new Map([
 	["xml", "xml"],
 	["lua", "lua"]
 ]);
+/**
+* Whether a language hint can use the shared syntax highlighter.
+* @param lang - Language hint from a code surface.
+* @returns Whether the hint resolves to a supported grammar.
+*/
+function supportsHighlighting(lang) {
+	return lang !== void 0 && LANG_ALIASES.has(lang.toLowerCase());
+}
 /** All token colors resolve through `--shiki-*` custom properties (theme package sheets). */
 const cssVariablesTheme = createCssVariablesTheme({
 	name: "css-variables",
@@ -4008,6 +4388,153 @@ function highlightToHtml(code, lang) {
 		theme: "css-variables"
 	});
 }
+/** vscode-textmate FontStyle bits shiki folds into `text-decoration` values. */
+const DECORATION_BITS = [[4, "underline"], [8, "line-through"]];
+/**
+* The inline style shiki's HTML arm assigns one token (`getTokenStyleObject`
+* mirrored onto React style keys): the css-variables color plus the
+* vscode-textmate font-style bits the theme lets through — italic (1), bold
+* (2), and the {@link DECORATION_BITS} decorations (the theme injects bold,
+* italic, and underline rules for markup scopes, so markdown fences carry
+* them). The theme has no per-scope backgrounds, so `background-color` never
+* occurs; the arm-parity tests fail loud if a shiki upgrade changes that.
+*/
+function spanStyle(token) {
+	const style = { color: token.color };
+	/* v8 ignore next -- fontStyle is optional in ThemedToken's type; tokenizeWithTheme always stamps it. */
+	const bits = token.fontStyle ?? 0;
+	if ((bits & 1) !== 0) style.fontStyle = "italic";
+	if ((bits & 2) !== 0) style.fontWeight = "bold";
+	const decorations = DECORATION_BITS.filter(([bit]) => (bits & bit) !== 0);
+	if (decorations.length > 0) style.textDecoration = decorations.map(([, value]) => value).join(" ");
+	return style;
+}
+/**
+* Narrow one tokenized line to the runs a `<span style>` renders, folding a
+* whitespace-only run into the token that follows it — shiki's default
+* `mergeWhitespaces` HTML behavior — with each run styled through
+* {@link spanStyle}, so the streaming spans and the settled `codeToHtml`
+* swap render one identical span tree. shiki exempts underlined/struck
+* whitespace from the fold; under the css-variables theme that case cannot
+* occur — its only underline rule styles inline-link scopes, whose spaced
+* text tokenizes as one run, and it injects no strikethrough rule — so the
+* unconditional fold here stays equivalent (the markdown arm-parity test
+* pins it). A line-trailing whitespace-only run has no follower and keeps
+* its own span, as in shiki.
+*/
+function lineSpans(line) {
+	const spans = [];
+	let pendingWhitespace = "";
+	for (const [index, token] of line.entries()) {
+		if (/^\s+$/.test(token.content) && index + 1 < line.length) {
+			pendingWhitespace += token.content;
+			continue;
+		}
+		spans.push({
+			text: pendingWhitespace + token.content,
+			style: spanStyle(token)
+		});
+		pendingWhitespace = "";
+	}
+	return spans;
+}
+/**
+* Incremental highlighter for one growing streaming fence. TextMate
+* tokenization is line-based and forward-only — a line's tokens depend only on
+* its own text and the grammar state entering it — so appended text never
+* changes a completed line's tokens. The session caches the spans of every
+* completed line together with the grammar state after them;
+* {@link updateFrame} reports only newly completed lines plus the still-growing
+* last line, while {@link update} materializes the complete compatibility
+* result. Per-call tokenization cost therefore excludes the completed prefix,
+* and the result equals a from-scratch tokenization of the same code.
+* Non-append input and a change of resolved grammar reset the cache and
+* re-tokenize fully, so any input stays correct.
+*/
+var StreamingHighlightSession = class {
+	/** Grammar id the cache was built with; a different resolution resets it. */
+	resolved;
+	/** Newline-terminated source prefix covered by {@link spans}. */
+	prefix = "";
+	/** Cached spans, one entry per completed line of {@link prefix}. */
+	spans = [];
+	/** Grammar state after {@link prefix}; undefined = the grammar's initial state. */
+	state;
+	lastCode;
+	lastLang;
+	lastResult;
+	generation = 0;
+	lastFrame;
+	reset(resolved) {
+		this.resolved = resolved;
+		this.prefix = "";
+		this.spans = [];
+		this.state = void 0;
+		this.generation += 1;
+		this.lastFrame = void 0;
+	}
+	/** Tokenize `text` with `resolved`, resuming from the cached grammar state when one exists. */
+	tokenize(resolved, text) {
+		return highlighter().codeToTokensBase(text, {
+			lang: resolved,
+			theme: "css-variables",
+			...this.state === void 0 ? {} : { grammarState: this.state }
+		});
+	}
+	/**
+	* Tokenize one update as a delta for a retained renderer.
+	* @param code - the fence text accumulated so far.
+	* @param lang - the language hint.
+	* @returns Newly completed lines plus the current tail, or `undefined` for the plain arm.
+	*/
+	updateFrame(code, lang) {
+		if (code === this.lastCode && lang === this.lastLang && this.lastFrame !== void 0) return this.lastFrame;
+		this.lastCode = code;
+		this.lastLang = lang;
+		this.lastResult = void 0;
+		const resolved = lang === void 0 ? void 0 : LANG_ALIASES.get(lang.toLowerCase());
+		if (resolved === void 0 || !ensureGrammar(resolved)) {
+			this.reset(void 0);
+			return;
+		}
+		if (resolved !== this.resolved || !code.startsWith(this.prefix)) this.reset(resolved);
+		const firstNewLine = this.spans.length;
+		const rest = code.slice(this.prefix.length);
+		const lastNewline = rest.lastIndexOf("\n");
+		if (lastNewline >= 0) {
+			const grownEnd = rest[lastNewline - 1] === "\r" ? lastNewline - 1 : lastNewline;
+			const tokens = this.tokenize(resolved, rest.slice(0, grownEnd));
+			for (const line of tokens) this.spans.push(lineSpans(line));
+			this.state = highlighter().getLastGrammarState(tokens);
+			this.prefix = code.slice(0, this.prefix.length + lastNewline + 1);
+		}
+		this.lastFrame = {
+			generation: this.generation,
+			appended: this.spans.slice(firstNewLine),
+			tail: this.tokenize(resolved, rest.slice(lastNewline + 1)).map(lineSpans)
+		};
+		return this.lastFrame;
+	}
+	/**
+	* Tokenize the fence's current text into per-line highlighted runs;
+	* `undefined` means the caller renders its plain fallback. Idempotent per
+	* (`code`, `lang`) input — repeated calls return the identical result array —
+	* and a retained line keeps its span-array identity across growing calls, so
+	* a React caller can reuse cached line elements. A lazy grammar not yet
+	* loaded returns `undefined` and loads in the background exactly as
+	* {@link highlightToHtml} does; the next call after it registers highlights.
+	* @param code - the fence text accumulated so far (display-trimmed, no synthetic trailing newline).
+	* @param lang - the language hint (a markdown fence info string).
+	* @returns one entry per line of `code` (each an array of runs), or `undefined` for unknown or not-yet-loaded languages.
+	*/
+	update(code, lang) {
+		if (code === this.lastCode && lang === this.lastLang && this.lastResult !== void 0) return this.lastResult;
+		const frame = this.updateFrame(code, lang);
+		if (frame === void 0) return void 0;
+		this.lastResult = [...this.spans, ...frame.tail];
+		return this.lastResult;
+	}
+};
 /**
 * Tokenize `code` into per-line highlighted runs when `lang` maps to a
 * registered grammar; `undefined` means the caller renders its plain fallback.
@@ -4016,8 +4543,9 @@ function highlightToHtml(code, lang) {
 * so this returns shiki's own 2D line/token structure narrowed to what a run
 * renders. Each run's color is a `--shiki-*` custom property, keeping token
 * colors on the theme package's sheets exactly as the HTML path does; the
-* css-variables theme carries no font-style bits, matching that path's
-* color-only output. The trailing newline shiki appends as a final empty line
+* markup font-style bits the theme lets through (bold/italic/underline in
+* markdown scopes) are dropped — the line-numbered file view renders
+* color-only runs. The trailing newline shiki appends as a final empty line
 * is dropped so the run count matches the caller's own line array.
 * @param code - the source text.
 * @param lang - the language hint (a file-extension-derived language id).
@@ -4038,6 +4566,73 @@ function highlightLines(code, lang) {
 	})));
 }
 //#endregion
+//#region lib/types/markdown/useViewportHighlighting.js
+const noop = () => {};
+/** One document-wide observer; activated elements leave it permanently. */
+var HighlightViewport = class {
+	observer;
+	activators = /* @__PURE__ */ new Map();
+	observe(element, activate) {
+		if (typeof IntersectionObserver === "undefined") {
+			activate();
+			return noop;
+		}
+		this.observer ??= new IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				if (!entry.isIntersecting) continue;
+				const current = this.activators.get(entry.target);
+				/* v8 ignore next -- the observer reports only elements still registered with it. */
+				if (current === void 0) continue;
+				this.activators.delete(entry.target);
+				this.observer?.unobserve(entry.target);
+				current();
+			}
+			this.releaseEmptyObserver();
+		});
+		this.activators.set(element, activate);
+		this.observer.observe(element);
+		return () => {
+			this.activators.delete(element);
+			this.observer?.unobserve(element);
+			this.releaseEmptyObserver();
+		};
+	}
+	releaseEmptyObserver() {
+		if (this.activators.size > 0) return;
+		this.observer?.disconnect();
+		this.observer = void 0;
+	}
+};
+const highlightViewport = new HighlightViewport();
+/**
+* Activate one supported code surface when it first intersects the viewport.
+* Activation lasts for the component lifetime; browsers without
+* IntersectionObserver activate immediately.
+* @param target - Code surface whose plain rendering reserves its geometry.
+* @param lang - Optional language hint.
+* @returns Whether this component may build highlighted output.
+*/
+function useViewportHighlighting(target, lang) {
+	const supported = supportsHighlighting(lang);
+	const [activated, setActivated] = useState(false);
+	const activate = useCallback(() => {
+		setActivated(true);
+	}, []);
+	useEffect(() => {
+		if (activated || !supported) return;
+		const element = target.current;
+		/* v8 ignore next -- React attaches the host ref before running effects. */
+		if (element === null) return;
+		return highlightViewport.observe(element, activate);
+	}, [
+		activate,
+		activated,
+		supported,
+		target
+	]);
+	return activated && supported;
+}
+//#endregion
 //#region lib/types/ReadBlock.js
 /**
 * Content lines shown before the height cap collapses the middle. Matches
@@ -4045,13 +4640,6 @@ function highlightLines(code, lang) {
 * same place in the same flow.
 */
 const DEFAULT_READ_MAX_LINES = 16;
-/**
-* Render one line's highlighted runs. The css-variables theme colors every run,
-* so each run is a styled span; a line with no highlighting at all takes the
-* bare-text path in the caller instead (an unknown or absent language).
-* @param spans - the line's styled runs.
-* @returns the line's children.
-*/
 function renderSpans(spans) {
 	return spans.map((span, index) => jsx("span", {
 		style: span.style,
@@ -4064,9 +4652,12 @@ function renderSpans(spans) {
 * @param props - see {@link ReadBlockProps}.
 * @returns the read block element.
 */
-function ReadBlock({ label, lines, totalLines, lang, maxLines = 16, className }) {
+function ReadBlock({ label, labels, lines, totalLines, lang, maxLines = 16, className }) {
+	const rootRef = useRef(null);
+	const highlighting = useViewportHighlighting(rootRef, lang);
 	const raw = useMemo(() => lines.map((line) => line.text).join("\n"), [lines]);
-	const highlighted = useMemo(() => highlightLines(raw, lang), [
+	const highlighted = useMemo(() => highlighting ? highlightLines(raw, lang) : void 0, [
+		highlighting,
 		raw,
 		lang,
 		useSyncExternalStore(subscribeGrammarLoaded, grammarLoadCount, grammarLoadCount)
@@ -4091,61 +4682,56 @@ function ReadBlock({ label, lines, totalLines, lang, maxLines = 16, className })
 	const headLines = Math.ceil(maxLines / 2);
 	const tailLines = maxLines - headLines;
 	const windowed = lines.length < totalLines;
-	/**
-	* Render a slice of the line array as gutter-numbered rows.
-	* @param slice - the lines to draw, each with its aligned run array.
-	* @returns the row elements.
-	*/
 	const rows = (slice) => slice.map(([line, spans]) => jsxs("div", {
-		className: css$15.line,
+		className: css$16.line,
 		children: [jsx("span", {
-			className: css$15.gutter,
+			className: css$16.gutter,
 			"aria-hidden": true,
 			children: line.number
 		}), jsx("span", {
-			className: css$15.content,
+			className: css$16.content,
 			children: spans === void 0 ? line.text : renderSpans(spans)
 		})]
 	}, line.number));
 	const paired = lines.map((line, index) => [line, highlighted?.[index]]);
 	return jsxs("div", {
-		className: clsx(css$15.block, className),
+		ref: rootRef,
+		className: clsx(css$16.block, className),
 		"data-read": "",
 		children: [jsxs("div", {
-			className: css$15.banner,
+			className: css$16.banner,
 			children: [jsx("div", {
-				className: css$15.label,
+				className: css$16.label,
 				children: label ?? ""
 			}), jsxs("div", {
-				className: css$15.action,
+				className: css$16.action,
 				children: [
 					windowed && jsx("span", {
-						className: css$15.count,
-						children: `显示 ${lines.length} / ${totalLines} 行`
+						className: css$16.count,
+						children: labels.window(lines.length, totalLines)
 					}),
 					jsx("span", {
-						className: css$15.lang,
+						className: css$16.lang,
 						children: lang ?? ""
 					}),
 					lines.length > 0 && jsx("button", {
 						type: "button",
-						className: css$15.copyButton,
+						className: css$16.copyButton,
 						onClick: onCopy,
-						children: copied ? "复制成功" : "复制"
+						children: copied ? labels.copied : labels.copy
 					})
 				]
 			})]
 		}), jsxs("div", {
-			className: css$15.body,
+			className: css$16.body,
 			children: [
 				rows(capped ? paired.slice(0, headLines) : paired),
-				hidden > 0 && jsx("button", {
-					type: "button",
-					className: css$15.expand,
-					"aria-expanded": expanded,
-					"aria-label": expanded ? "收起内容" : `展开其余 ${hidden} 行`,
-					onClick: onToggle,
-					children: expanded ? "收起" : `… 其余 ${hidden} 行`
+				hidden > 0 && jsx(FoldToggle, {
+					className: css$16.expand,
+					expanded,
+					hidden,
+					labels,
+					onToggle
 				}),
 				capped && rows(paired.slice(paired.length - tailLines))
 			]
@@ -4154,11 +4740,7 @@ function ReadBlock({ label, lines, totalLines, lang, maxLines = 16, className })
 }
 //#endregion
 //#region lib/types/DiffBlock.js
-/**
-* Output lines shown before the height cap collapses the middle. Matches
-* {@link DEFAULT_TERMINAL_MAX_LINES} so a diff card and a terminal card cut a
-* long body at the same place.
-*/
+/** Output lines shown before the height cap collapses the middle. */
 const DEFAULT_DIFF_MAX_LINES = 16;
 /** Local exhaustiveness helper — this package does not depend on `dsh-llm`. */
 /* v8 ignore next 3 -- closed-union backstop; only reached if a row kind is forged */
@@ -4167,26 +4749,44 @@ function assertNever(value) {
 }
 /** The dim class per row kind (path/gap chrome vs the diff's own +/- colors). */
 const ROW_CLASS = {
-	path: css$16.path,
-	del: css$16.del,
-	add: css$16.add,
-	gap: css$16.gap
+	path: css$17.path,
+	del: css$17.del,
+	add: css$17.add,
+	gap: css$17.gap
 };
 /**
+* Total added/removed line counts across hunks — the same numbers the footer
+* prints, exported so a summary row can show them without rebuilding the body.
+* Every old-side line counts toward `removed` and every new-side line toward
+* `added`, under {@link contentLines}'s terminator rule.
+* @param diffs - the hunks to count.
+* @returns the +/- totals.
+*/
+function diffTotals(diffs) {
+	let added = 0;
+	let removed = 0;
+	for (const diff of diffs) {
+		if (diff.oldText !== null) removed += contentLines(diff.oldText).length;
+		added += contentLines(diff.newText).length;
+	}
+	return {
+		added,
+		removed
+	};
+}
+/**
 * Flatten the hunks into the body's rows plus the footer counts. A path header
 * opens each new file; a same-file second hunk (a scattered edit) opens with a
-* `⋯` gap instead of repeating the path. Every old-side line counts toward
-* `removed` and every new-side line toward `added`. The file count is of
-* DISTINCT paths, matching the TUI diff card's footer, so two hunks in one file
-* read as `1 file` on both front ends.
+* `⋯` gap instead of repeating the path. The +/- totals are
+* {@link diffTotals}'s. The file count is of DISTINCT paths, matching the TUI
+* diff card's footer, so two hunks in one file read as `1 file` on both front
+* ends.
 * @param diffs - the hunks to render.
 * @returns the body rows, the +/- totals, and the distinct-file count.
 */
 function buildRows(diffs) {
 	const rows = [];
 	const paths = /* @__PURE__ */ new Set();
-	let added = 0;
-	let removed = 0;
 	let prevPath;
 	for (const diff of diffs) {
 		paths.add(diff.path);
@@ -4199,25 +4799,18 @@ function buildRows(diffs) {
 			text: "⋯"
 		});
 		prevPath = diff.path;
-		if (diff.oldText !== null) for (const line of contentLines(diff.oldText)) {
-			rows.push({
-				kind: "del",
-				text: line
-			});
-			removed++;
-		}
-		for (const line of contentLines(diff.newText)) {
-			rows.push({
-				kind: "add",
-				text: line
-			});
-			added++;
-		}
+		if (diff.oldText !== null) for (const line of contentLines(diff.oldText)) rows.push({
+			kind: "del",
+			text: line
+		});
+		for (const line of contentLines(diff.newText)) rows.push({
+			kind: "add",
+			text: line
+		});
 	}
 	return {
 		rows,
-		added,
-		removed,
+		...diffTotals(diffs),
 		files: paths.size
 	};
 }
@@ -4258,7 +4851,7 @@ function copyText$1(rows) {
 * @param props - see {@link DiffBlockProps}.
 * @returns the diff block element.
 */
-function DiffBlock({ diffs, maxLines = 16, className }) {
+function DiffBlock({ diffs, labels, maxLines = 16, className }) {
 	const { rows, added, removed, files } = useMemo(() => buildRows(diffs), [diffs]);
 	const [expanded, setExpanded] = useState(false);
 	const [copied, setCopied] = useState(false);
@@ -4283,47 +4876,44 @@ function DiffBlock({ diffs, maxLines = 16, className }) {
 	const head = capped ? rows.slice(0, headLines) : rows;
 	const tail = capped ? rows.slice(rows.length - tailLines) : [];
 	return jsxs("div", {
-		className: clsx(css$16.block, className),
+		className: clsx(css$17.block, className),
 		"data-diff": "",
 		children: [
 			jsx("button", {
 				type: "button",
-				className: css$16.copyButton,
+				className: css$17.copyButton,
 				onClick: onCopy,
-				children: copied ? "复制成功" : "复制"
+				children: copied ? labels.copied : labels.copy
 			}),
 			jsxs("div", {
-				className: css$16.body,
+				className: css$17.body,
 				children: [
 					head.map((row, index) => jsx("div", {
-						className: clsx(css$16.line, ROW_CLASS[row.kind]),
+						className: clsx(css$17.line, ROW_CLASS[row.kind]),
 						children: row.text
 					}, index)),
-					hidden > 0 && jsx("button", {
-						type: "button",
-						className: css$16.expand,
-						"aria-expanded": expanded,
-						"aria-label": expanded ? "收起差异" : `展开其余 ${hidden} 行差异`,
-						onClick: onToggle,
-						children: expanded ? "收起" : `… 其余 ${hidden} 行`
+					hidden > 0 && jsx(FoldToggle, {
+						className: css$17.expand,
+						expanded,
+						hidden,
+						labels,
+						onToggle
 					}),
 					tail.map((row, index) => jsx("div", {
-						className: clsx(css$16.line, ROW_CLASS[row.kind]),
+						className: clsx(css$17.line, ROW_CLASS[row.kind]),
 						children: row.text
 					}, index))
 				]
 			}),
 			jsxs("div", {
-				className: css$16.footer,
+				className: css$17.footer,
 				children: [
 					"└ +",
 					added,
 					" -",
 					removed,
 					" · ",
-					files,
-					" file",
-					files === 1 ? "" : "s"
+					labels.files(files)
 				]
 			})
 		]
@@ -4371,8 +4961,7 @@ function shownCount(props) {
 * @returns the summary text.
 */
 function summaryText(props, shown, truncated, total) {
-	const count = truncated ? `显示 ${shown} / 共 ${total}` : `${shown}`;
-	return props.kind === "paths" ? `${count} 个路径` : `${count} 处匹配 · ${props.files.length} 个文件`;
+	return props.kind === "paths" ? props.labels.pathsSummary(shown, total, truncated) : props.labels.matchesSummary(shown, total, props.files.length, truncated);
 }
 /**
 * Flatten a card's shape into its render rows, dropping a collapsed file
@@ -4453,60 +5042,60 @@ function SearchBlock(props) {
 	const tail = tailHeader === void 0 ? naturalTail : naturalTail.slice(1);
 	const renderRow = (row) => {
 		if (row.type === "path") return jsx("div", {
-			className: css$17.line,
+			className: css$18.line,
 			children: row.path
 		});
 		if (row.type === "match") return jsxs("div", {
-			className: css$17.line,
+			className: css$18.line,
 			children: [jsxs("span", {
-				className: css$17.lineNumber,
+				className: css$18.lineNumber,
 				children: [row.lineNumber, ": "]
 			}), row.line]
 		});
 		return jsxs("button", {
 			type: "button",
-			className: css$17.fileHeader,
+			className: css$18.fileHeader,
 			"aria-expanded": !row.collapsed,
 			onClick: () => {
 				toggleFile(row.index);
 			},
 			children: [jsx("span", {
-				className: css$17.filePath,
+				className: css$18.filePath,
 				children: row.path
 			}), jsx("span", {
-				className: css$17.fileCount,
+				className: css$18.fileCount,
 				children: row.count
 			})]
 		});
 	};
 	return jsxs("div", {
-		className: clsx(css$17.block, className),
+		className: clsx(css$18.block, className),
 		"data-search": props.kind,
 		children: [jsxs("div", {
-			className: css$17.header,
+			className: css$18.header,
 			children: [jsx("span", {
-				className: css$17.summary,
+				className: css$18.summary,
 				children: summaryText(props, shown, truncated, total)
 			}), !empty && jsx("button", {
 				type: "button",
-				className: css$17.copyButton,
+				className: css$18.copyButton,
 				onClick: onCopy,
-				children: copied ? "复制成功" : "复制"
+				children: copied ? props.labels.copied : props.labels.copy
 			})]
 		}), empty ? jsx("div", {
-			className: css$17.empty,
-			children: "无结果"
+			className: css$18.empty,
+			children: props.labels.noResults
 		}) : jsxs("div", {
-			className: css$17.body,
+			className: css$18.body,
 			children: [
 				head.map((row) => jsx("div", { children: renderRow(row) }, rowKey(row))),
 				hidden > 0 && jsx("button", {
 					type: "button",
-					className: css$17.expand,
+					className: css$18.expand,
 					"aria-expanded": expanded,
-					"aria-label": expanded ? "收起结果" : `展开其余 ${hidden} 行结果`,
+					"aria-label": expanded ? props.labels.collapseAria : props.labels.expandAria(hidden),
 					onClick: onToggle,
-					children: expanded ? "收起" : `… 其余 ${hidden} 行`
+					children: expanded ? props.labels.collapse : props.labels.expand(hidden)
 				}),
 				tailHeader !== void 0 && jsx("div", { children: renderRow(tailHeader) }, `tailHeader:${rowKey(tailHeader)}`),
 				tail.map((row) => jsx("div", { children: renderRow(row) }, rowKey(row)))
@@ -4522,19 +5111,23 @@ function SearchBlock(props) {
 * Re-parsing the whole accumulated document on every streaming chunk is
 * quadratic in the final reply length. CommonMark block parsing is line-based
 * and appended text can only reshape the parse frontier — the last top-level
-* block (a paragraph becoming a setext heading or a table, a list continuing
-* after a blank line, an unclosed fence swallowing lines) — so earlier blocks
-* are final. This parser therefore freezes all but the trailing
-* {@link UNSTABLE_TAIL_BLOCKS} blocks and re-parses only the source tail
-* behind them: each source region is parsed O(1) times over the stream
-* instead of once per chunk.
+* block (a paragraph becoming a setext heading or a table, or a list
+* continuing after a blank line) — so earlier blocks are final. This parser
+* therefore freezes all but the trailing {@link UNSTABLE_TAIL_BLOCKS} blocks
+* and re-parses only the source tail behind them. A final unclosed top-level
+* fence cannot freeze as a block, so its completed content lines use a second
+* frontier: only the last completed line and current partial line return
+* through the caller's grammar. Each source region is therefore parsed a
+* bounded number of times over the stream instead of once per chunk.
 *
-* The freeze boundary comes from the parser's own `position` offsets, never
-* from custom source scanning. The cut sits at the *end offset* of the last
-* frozen block (not the next block's start): a following block's start offset
-* excludes up to three spaces of insignificant leading indentation, which is
-* harmless to drop, but cutting at the previous end also keeps the
-* inter-block blank lines in the tail so the sliced source stays verbatim.
+* The block freeze boundary comes from the parser's own `position` offsets.
+* The cut sits at the *end offset* of the last frozen block (not the next
+* block's start): a following block's start offset excludes up to three spaces
+* of insignificant leading indentation, which is harmless to drop, but
+* cutting at the previous end also keeps the inter-block blank lines in the
+* tail so the sliced source stays verbatim. Fence scanning only recognizes a
+* parser-confirmed code node and closing delimiter; ambiguous input returns to
+* the normal tail parse.
 *
 * Known deviation, shared with any prefix-freeze scheme: micromark resolves
 * reference-style links and footnotes document-wide at parse time, so a
@@ -4559,6 +5152,84 @@ function blockKey(node, base, index) {
 	const offset = node.position?.start.offset;
 	return offset === void 0 ? -(index + 1) : base + offset;
 }
+/** Return the first line terminator at or after `start`, including a CRLF pair. */
+function lineTerminatorEnd(text, start) {
+	for (let index = start; index < text.length; index += 1) {
+		const char = text[index];
+		if (char === "\n") return index + 1;
+		if (char === "\r") return text[index + 1] === "\n" ? index + 2 : index + 1;
+	}
+}
+/**
+* Source prefix before the last completed line. Keeping that line beside the
+* current partial line lets the grammar retain its trailing-newline semantics.
+*/
+function committableLinePrefixLength(text) {
+	let previousEnd = 0;
+	let end = 0;
+	for (let index = 0; index < text.length; index += 1) {
+		const char = text[index];
+		if (char === "\n") {
+			previousEnd = end;
+			end = index + 1;
+			continue;
+		}
+		if (char !== "\r" || index + 1 >= text.length) continue;
+		if (text[index + 1] === "\n") index += 1;
+		previousEnd = end;
+		end = index + 1;
+	}
+	return previousEnd;
+}
+/** Exact source terminator ending a non-empty committable prefix. */
+function trailingLineTerminator(text) {
+	return text.endsWith("\r\n") ? "\r\n" : text.endsWith("\r") ? "\r" : "\n";
+}
+/** Whether `text` contains a CommonMark closing fence on one of its logical lines. */
+function containsClosingFence(text, marker, markerLength) {
+	let start = 0;
+	while (start <= text.length) {
+		let end = start;
+		while (end < text.length && text[end] !== "\n" && text[end] !== "\r") end += 1;
+		const line = text.slice(start, end);
+		let indent = 0;
+		while (indent < 3 && line[indent] === " ") indent += 1;
+		let run = indent;
+		while (line[run] === marker) run += 1;
+		if (run - indent >= markerLength && /^[ \t]*$/.test(line.slice(run))) return true;
+		if (end === text.length) return false;
+		start = text[end] === "\r" && text[end + 1] === "\n" ? end + 2 : end + 1;
+	}
+	/* v8 ignore next -- each loop iteration returns at EOF or advances past a line terminator. */
+	return false;
+}
+/** Advance an mdast point across one append while treating a split CRLF as one line ending. */
+function advancePoint(point, appended, precededByCarriageReturn) {
+	let line = point.line;
+	let column = point.column;
+	let afterCarriageReturn = precededByCarriageReturn;
+	for (const char of appended) {
+		if (char === "\n") {
+			if (!afterCarriageReturn) line += 1;
+			column = 1;
+			afterCarriageReturn = false;
+			continue;
+		}
+		if (char === "\r") {
+			line += 1;
+			column = 1;
+			afterCarriageReturn = true;
+			continue;
+		}
+		column += 1;
+		afterCarriageReturn = false;
+	}
+	return {
+		line,
+		column,
+		offset: point.offset + appended.length
+	};
+}
 /**
 * Append-only incremental parser over a caller-supplied grammar. One instance
 * accumulates one streaming document; non-append input resets it.
@@ -4570,10 +5241,112 @@ var IncrementalMarkdownParser = class {
 	frozen = [];
 	generation = 0;
 	cached = null;
+	openFence = null;
 	/** @param parse - Grammar shared with whatever renders the blocks, so boundaries agree. */
 	constructor(parse) {
 		this.parse = parse;
 	}
+	/** Parse one unclosed-fence content slice through the caller's grammar. */
+	fenceValue(state, text) {
+		const root = this.parse(`${state.syntheticPrefix}${text}`);
+		if (root.children.length !== 1) return void 0;
+		const node = root.children[0];
+		return node.type === "code" ? node.value : void 0;
+	}
+	/** Recognize the parsed tail's final unclosed fence and prepare its incremental content frontier. */
+	openFenceState(text, base, tail, frozen) {
+		const codeIndex = tail.length - 1;
+		const block = tail[codeIndex];
+		if (block?.node.type !== "code") return null;
+		const node = block.node;
+		const startOffset = node.position?.start.offset;
+		const end = node.position?.end;
+		if (startOffset === void 0 || end?.offset === void 0) return null;
+		/* v8 ignore next -- the caller's parse slice ends at text.length, so its final node ends there. */
+		if (base + end.offset !== text.length) return null;
+		const source = text.slice(base);
+		const previousLf = source.lastIndexOf("\n", startOffset - 1);
+		const previousCr = source.lastIndexOf("\r", startOffset - 1);
+		const lineStart = Math.max(previousLf, previousCr) + 1;
+		const terminatorEnd = lineTerminatorEnd(source, startOffset);
+		/* v8 ignore next -- a parser-confirmed fenced code node requires its opening line terminator. */
+		if (terminatorEnd === void 0) return null;
+		if (terminatorEnd === source.length && source.endsWith("\r")) return null;
+		const openingLine = source.slice(lineStart, terminatorEnd).replace(/[\r\n]+$/, "");
+		const opening = /^( {0,3})(`{3,}|~{3,})/.exec(openingLine);
+		if (opening === null) return null;
+		const indent = opening[1];
+		const run = opening[2];
+		/* v8 ignore next -- mdast positions a fenced code node at the matched delimiter after indentation. */
+		if (lineStart + indent.length !== startOffset) return null;
+		const marker = run[0];
+		const contentStart = base + terminatorEnd;
+		const content = text.slice(contentStart);
+		if (containsClosingFence(content, marker, run.length)) return null;
+		const syntheticPrefix = `${indent}${run}\n`;
+		const stableLength = committableLinePrefixLength(content);
+		const stableValue = stableLength === 0 ? "" : this.fenceValue({ syntheticPrefix }, content.slice(0, stableLength));
+		if (stableValue === void 0) return null;
+		const pendingStart = contentStart + stableLength;
+		const stableSource = content.slice(0, stableLength);
+		const valuePrefix = stableLength === 0 ? "" : `${stableValue}${trailingLineTerminator(stableSource)}`;
+		const pendingValue = this.fenceValue({ syntheticPrefix }, text.slice(pendingStart));
+		if (pendingValue === void 0 || `${valuePrefix}${pendingValue}` !== node.value) return null;
+		return {
+			marker,
+			markerLength: run.length,
+			syntheticPrefix,
+			codeIndex,
+			frozen,
+			tail,
+			pendingStart,
+			valuePrefix,
+			end: {
+				line: end.line,
+				column: end.column,
+				offset: end.offset
+			},
+			endedWithCarriageReturn: text.endsWith("\r")
+		};
+	}
+	/** Extend a recognized unclosed fence without parsing its completed content prefix again. */
+	updateOpenFence(state, text, previousText) {
+		const pending = text.slice(state.pendingStart);
+		if (containsClosingFence(pending, state.marker, state.markerLength)) return void 0;
+		const pendingValue = this.fenceValue(state, pending);
+		if (pendingValue === void 0) return void 0;
+		const stableLength = committableLinePrefixLength(pending);
+		const stableValue = stableLength === 0 ? "" : this.fenceValue(state, pending.slice(0, stableLength));
+		if (stableValue === void 0) return void 0;
+		const previousNode = state.tail[state.codeIndex].node;
+		const end = advancePoint(state.end, text.slice(previousText.length), state.endedWithCarriageReturn);
+		const node = {
+			...previousNode,
+			value: `${state.valuePrefix}${pendingValue}`,
+			position: {
+				start: previousNode.position.start,
+				end
+			}
+		};
+		const tail = state.tail.map((entry, index) => index === state.codeIndex ? {
+			...entry,
+			node
+		} : entry);
+		const cached = {
+			frozen: state.frozen,
+			tail,
+			generation: this.generation
+		};
+		this.openFence = {
+			...state,
+			tail,
+			pendingStart: state.pendingStart + stableLength,
+			valuePrefix: stableLength === 0 ? state.valuePrefix : `${state.valuePrefix}${stableValue}${trailingLineTerminator(pending.slice(0, stableLength))}`,
+			end,
+			endedWithCarriageReturn: text.endsWith("\r")
+		};
+		return cached;
+	}
 	/**
 	* Fold the current accumulated text and return the frozen/tail split.
 	* Idempotent for identical input (the previous result is returned as-is),
@@ -4587,8 +5360,19 @@ var IncrementalMarkdownParser = class {
 			this.prevText = "";
 			this.tailStart = 0;
 			this.frozen = [];
+			this.openFence = null;
 			this.generation += 1;
 		}
+		const previousText = this.prevText;
+		if (previousText !== "" && this.openFence !== null) {
+			const incremental = this.updateOpenFence(this.openFence, text, previousText);
+			if (incremental !== void 0) {
+				this.prevText = text;
+				this.cached = incremental;
+				return incremental;
+			}
+			this.openFence = null;
+		}
 		this.prevText = text;
 		const base = this.tailStart;
 		const blocks = this.parse(text.slice(base)).children;
@@ -4613,6 +5397,7 @@ var IncrementalMarkdownParser = class {
 			tail,
 			generation: this.generation
 		};
+		this.openFence = this.openFenceState(text, base, tail, this.cached.frozen);
 		return this.cached;
 	}
 };
@@ -4987,14 +5772,114 @@ function parseGfmWithMath(text) {
 }
 //#endregion
 //#region lib/types/markdown/CodeBlock.js
-function CodeBlock({ code, lang, className, copyLabel = "复制", copiedLabel = "复制成功" }) {
+/**
+* The `pre` attributes shiki's HTML arm emits for the css-variables theme,
+* mirrored so the streaming arm's tree is interchangeable with the settled
+* swap (`tests/streaming-code-block.client.spec.tsx` pins the two arms'
+* parity).
+*/
+const SHIKI_PRE_PROPS = {
+	className: "shiki css-variables",
+	style: {
+		backgroundColor: "var(--shiki-background)",
+		color: "var(--shiki-foreground)"
+	},
+	tabIndex: 0
+};
+/** Completed-line group size; React reconciles groups while the DOM remains line-for-line identical. */
+const STREAMING_LINE_GROUP_SIZE = 32;
+function renderLine(line, index) {
+	return jsxs(Fragment$1, { children: [index > 0 && "\n", jsx("span", {
+		className: "line",
+		children: line.map((span, spanIndex) => jsx("span", {
+			style: span.style,
+			children: span.text
+		}, spanIndex))
+	})] }, index);
+}
+function CodeBlock({ code, lang, streaming, className, copyLabel, copiedLabel }) {
 	const trimmed = code.endsWith("\n") ? code.slice(0, -1) : code;
-	const html = useMemo(() => highlightToHtml(trimmed, lang), [
+	const rootRef = useRef(null);
+	const highlighting = useViewportHighlighting(rootRef, lang);
+	const loaded = useSyncExternalStore(subscribeGrammarLoaded, grammarLoadCount, grammarLoadCount);
+	const sessionRef = useRef(null);
+	const lineCacheRef = useRef(null);
+	const settledRef = useRef(false);
+	const streamedBody = useMemo(() => {
+		if (!highlighting) {
+			sessionRef.current = null;
+			lineCacheRef.current = null;
+			settledRef.current = false;
+			return;
+		}
+		if (streaming !== true) {
+			const previous = lineCacheRef.current;
+			if (previous !== null && previous.code === trimmed && previous.lang === lang) {
+				settledRef.current = true;
+				return previous.body;
+			}
+			sessionRef.current = null;
+			lineCacheRef.current = null;
+			settledRef.current = true;
+			return;
+		}
+		if (settledRef.current) {
+			sessionRef.current = null;
+			lineCacheRef.current = null;
+			settledRef.current = false;
+		}
+		sessionRef.current ??= new StreamingHighlightSession();
+		const frame = sessionRef.current.updateFrame(trimmed, lang);
+		if (frame === void 0) {
+			lineCacheRef.current = null;
+			return;
+		}
+		const previous = lineCacheRef.current;
+		if (previous?.frame === frame && previous.code === trimmed && previous.lang === lang) return previous.body;
+		const sameGeneration = previous?.generation === frame.generation;
+		const groups = sameGeneration ? [...previous.groups] : [];
+		let pending = sameGeneration ? [...previous.pending] : [];
+		let nextLine = sameGeneration ? previous.nextLine : 0;
+		for (const line of frame.appended) {
+			pending.push(renderLine(line, nextLine));
+			nextLine += 1;
+			if (pending.length !== STREAMING_LINE_GROUP_SIZE) continue;
+			const start = nextLine - pending.length;
+			groups.push(jsx(Fragment$1, { children: pending }, start));
+			pending = [];
+		}
+		const tail = frame.tail.map((line, index) => renderLine(line, nextLine + index));
+		const tailGroup = jsx(Fragment$1, { children: [...pending, ...tail] }, nextLine - pending.length);
+		const body = jsx("pre", {
+			...SHIKI_PRE_PROPS,
+			children: jsxs("code", { children: [groups, tailGroup] })
+		});
+		lineCacheRef.current = {
+			code: trimmed,
+			lang,
+			generation: frame.generation,
+			frame,
+			groups,
+			pending,
+			nextLine,
+			body
+		};
+		return body;
+	}, [
+		streaming,
+		highlighting,
 		trimmed,
 		lang,
-		useSyncExternalStore(subscribeGrammarLoaded, grammarLoadCount, grammarLoadCount)
+		loaded
+	]);
+	const html = useMemo(() => highlighting && streaming !== true && streamedBody === void 0 ? highlightToHtml(trimmed, lang) : void 0, [
+		streaming,
+		highlighting,
+		streamedBody,
+		trimmed,
+		lang,
+		loaded
 	]);
-	const rootRef = useRef(null);
 	const [copied, setCopied] = useState(false);
 	const onCopy = useCallback(() => {
 		if (copied) return;
@@ -5006,25 +5891,25 @@ function CodeBlock({ code, lang, className, copyLabel = "复制", copiedLabel =
 			}, 1e3);
 		});
 	}, [copied, trimmed]);
-	const body = html === void 0 ? jsx("pre", {
-		className: css$18.plain,
+	const body = streamedBody !== void 0 ? streamedBody : html === void 0 ? jsx("pre", {
+		className: css$19.plain,
 		children: jsx("code", { children: trimmed })
 	}) : jsx("div", { dangerouslySetInnerHTML: { __html: html } });
 	return jsxs("div", {
 		ref: rootRef,
-		className: clsx(css$18.block, "md-code-block", className),
+		className: clsx(css$19.block, "md-code-block", className),
 		children: [jsx("div", {
-			className: css$18.bannerWrap,
+			className: css$19.bannerWrap,
 			children: jsxs("div", {
-				className: css$18.banner,
+				className: css$19.banner,
 				children: [jsx("div", {
-					className: css$18.infostring,
+					className: css$19.infostring,
 					children: lang ?? ""
 				}), jsx("div", {
-					className: css$18.action,
+					className: css$19.action,
 					children: jsx("button", {
 						type: "button",
-						className: css$18.copyButton,
+						className: css$19.copyButton,
 						onClick: onCopy,
 						children: copied ? copiedLabel : copyLabel
 					})
@@ -5244,7 +6129,7 @@ function renderNode(node, key, context) {
 			const mention = context.inLink === true ? void 0 : context.fileMentions?.resolve(value);
 			if (mention !== void 0) return jsx("code", { children: jsx("button", {
 				type: "button",
-				className: css$19.fileMention,
+				className: css$20.fileMention,
 				title: mention.title,
 				"aria-label": mention.label,
 				onClick: mention.open,
@@ -5279,9 +6164,10 @@ function renderCode(node, key, context) {
 	if (!context.streaming && lang === "math") return jsx(Fragment$1, { children: renderTexToReact(`${node.value}\n`, true) }, key);
 	return jsx(CodeBlock, {
 		code: `${node.value}\n`,
-		lang: context.streaming ? void 0 : lang,
-		copyLabel: context.codeLabels?.copyLabel,
-		copiedLabel: context.codeLabels?.copiedLabel
+		lang,
+		streaming: context.streaming,
+		copyLabel: context.labels.code.copyLabel,
+		copiedLabel: context.labels.code.copiedLabel
 	}, key);
 }
 /** A list is loose when it or any of its items is spread; every item then keeps its paragraphs. */
@@ -5338,7 +6224,7 @@ function renderTable(node, key, context) {
 	const [headRow, ...bodyRows] = node.children;
 	const wide = (align === null ? headRow?.children.length ?? 0 : align.length) >= 4 && context.inBlockquote !== true;
 	return jsx("div", {
-		className: clsx(css$19.tableScroll, wide ? "md-table-wide" : css$19.tableFill),
+		className: clsx(css$20.tableScroll, wide ? "md-table-wide" : css$20.tableFill),
 		tabIndex: wide ? 0 : void 0,
 		children: jsxs("table", { children: [headRow !== void 0 && jsx("thead", { children: renderTableRow(headRow, "th", align, 0, context) }), bodyRows.length > 0 && jsx("tbody", { children: bodyRows.map((row, index) => renderTableRow(row, "td", align, index + 1, context)) })] })
 	}, key);
@@ -5389,11 +6275,11 @@ function inlineCodeHttpUrl(value) {
 function renderImage(url, alt, key) {
 	const imageSrc = remoteImageUrl(sanitizeUrl(normalizeUri(url)));
 	if (imageSrc === void 0) return jsx("span", {
-		className: css$19.imageAlt,
+		className: css$20.imageAlt,
 		children: alt
 	}, key);
 	return jsx("img", {
-		className: css$19.image,
+		className: css$20.image,
 		src: imageSrc,
 		alt,
 		loading: "lazy",
@@ -5466,7 +6352,7 @@ function renderFootnoteSection(context) {
 		children: [jsx("h2", {
 			id: "footnote-label",
 			className: "sr-only",
-			children: "Footnotes"
+			children: context.labels.footnotes
 		}), jsx("ol", { children: items })]
 	}, "footnotes");
 }
@@ -5485,13 +6371,13 @@ function renderFootnoteSection(context) {
 * full parse self-heals it.
 */
 /** One settled full render: parse with math, resolve references, append the footnote section. */
-function renderSettled(text, codeLabels, fileMentions) {
+function renderSettled(text, labels, fileMentions) {
 	const root = parseGfmWithMath(text);
 	const targets = createReferenceTargets();
 	collectReferenceTargets(root.children, targets);
 	const context = {
 		streaming: false,
-		codeLabels,
+		labels,
 		fileMentions,
 		targets,
 		footnoteOrder: [],
@@ -5499,7 +6385,8 @@ function renderSettled(text, codeLabels, fileMentions) {
 	};
 	const blocks = wrapBlockChildren(renderBlocks(root.children.map((node, index) => ({
 		node,
-		key: index
+		/* v8 ignore next -- parseFull uses parseGfm, which stamps every top-level node. */
+		key: node.position?.start.offset ?? -(index + 1)
 	})), context), false);
 	const section = renderFootnoteSection(context);
 	return section === null ? blocks : [
@@ -5515,7 +6402,7 @@ function renderSettled(text, codeLabels, fileMentions) {
 * final, so the tail continues from a copy of it each frame).
 */
 var StreamingRenderer = class {
-	codeLabels;
+	labels;
 	parser = new IncrementalMarkdownParser(parseGfm);
 	generation = -1;
 	frozenCount = 0;
@@ -5525,9 +6412,9 @@ var StreamingRenderer = class {
 	frozenFootnoteCounts = /* @__PURE__ */ new Map();
 	lastText = null;
 	lastRendered = [];
-	/** @param codeLabels - Fence copy labels baked into cached elements; the owner replaces the renderer when they change. */
-	constructor(codeLabels) {
-		this.codeLabels = codeLabels;
+	/** @param labels - Localized Markdown chrome baked into cached elements; the owner replaces the renderer when it changes. */
+	constructor(labels) {
+		this.labels = labels;
 	}
 	/**
 	* Render the current accumulated text. Idempotent per text value, so React
@@ -5556,7 +6443,7 @@ var StreamingRenderer = class {
 		if (newlyFrozen.length > 0) {
 			const frozenContext = {
 				streaming: true,
-				codeLabels: this.codeLabels,
+				labels: this.labels,
 				fileMentions: void 0,
 				targets: frameTargets,
 				footnoteOrder: this.frozenFootnoteOrder,
@@ -5572,7 +6459,7 @@ var StreamingRenderer = class {
 		}
 		const tailContext = {
 			streaming: true,
-			codeLabels: this.codeLabels,
+			labels: this.labels,
 			fileMentions: void 0,
 			targets: frameTargets,
 			footnoteOrder: [...this.frozenFootnoteOrder],
@@ -5593,9 +6480,10 @@ var StreamingRenderer = class {
 /**
 * Render untrusted assistant-authored Markdown as semantic React elements.
 * @param props - Markdown source text preserved by the session projection;
-* `streaming` renders fences and TeX plain (highlighting and KaTeX land on
-* the finalize swap) and parses incrementally across chunks; `codeLabels`
-* forwards localized copy-button labels to fence CodeBlocks — pass a
+* `streaming` parses incrementally across chunks and highlights fences as
+* they grow (each fence re-tokenizes only appended text; TeX stays literal
+* until the finalize swap so incomplete formulae never flash errors);
+* `labels` forwards localized fence and footnote chrome — pass a
 * reference-stable object (memoized per locale revision), because a new
 * identity discards the streaming render cache mid-message. `fileMentions`
 * links inline-code tokens its resolver recognizes as real files; this is
@@ -5606,27 +6494,27 @@ var StreamingRenderer = class {
 * relative links, and unsafe protocols are disabled, while absolute HTTP(S)
 * images render directly.
 */
-const MarkdownText = memo(function MarkdownText({ text, streaming = false, codeLabels, fileMentions }) {
+const MarkdownText = memo(function MarkdownText({ text, streaming = false, labels, fileMentions }) {
 	const streamRef = useRef(null);
-	const streamLabelsRef = useRef(codeLabels);
+	const streamLabelsRef = useRef(labels);
 	const children = useMemo(() => {
 		if (!streaming) {
 			streamRef.current = null;
-			return renderSettled(text, codeLabels, fileMentions);
+			return renderSettled(text, labels, fileMentions);
 		}
-		if (streamRef.current === null || streamLabelsRef.current !== codeLabels) {
-			streamRef.current = new StreamingRenderer(codeLabels);
-			streamLabelsRef.current = codeLabels;
+		if (streamRef.current === null || streamLabelsRef.current !== labels) {
+			streamRef.current = new StreamingRenderer(labels);
+			streamLabelsRef.current = labels;
 		}
 		return streamRef.current.render(text);
 	}, [
 		text,
 		streaming,
-		codeLabels,
+		labels,
 		fileMentions
 	]);
 	return jsx("div", {
-		className: css$19.markdown,
+		className: css$20.markdown,
 		children
 	});
 });
@@ -5701,20 +6589,20 @@ function SafeLink({ url, label, className }) {
 */
 function SourceItem({ source, ordinal }) {
 	return jsxs("li", {
-		className: css$20.source,
+		className: css$21.source,
 		value: ordinal,
 		children: [
 			jsx(SafeLink, {
 				url: source.url,
 				label: linkLabel(source.url, source.title),
-				className: css$20.sourceLink
+				className: css$21.sourceLink
 			}),
 			source.snippet !== void 0 && source.snippet !== "" && jsx("div", {
-				className: css$20.snippet,
+				className: css$21.snippet,
 				children: source.snippet
 			}),
 			source.publishedAt !== void 0 && source.publishedAt !== "" && jsx("div", {
-				className: css$20.published,
+				className: css$21.published,
 				children: source.publishedAt
 			})
 		]
@@ -5726,29 +6614,32 @@ function SourceItem({ source, ordinal }) {
 * @param props - see {@link WebSearchBlockProps}.
 * @returns the search card element.
 */
-function WebSearchBlock({ answer, sources, truncated, className }) {
+function WebSearchBlock({ answer, sources, truncated, labels, className }) {
 	const empty = (answer === void 0 || answer === "") && sources.length === 0;
 	return jsxs("div", {
-		className: clsx(css$20.block, className),
+		className: clsx(css$21.block, className),
 		"data-web": "search",
 		children: [
 			answer !== void 0 && answer !== "" && jsx("div", {
-				className: css$20.answer,
-				children: jsx(MarkdownText, { text: answer })
+				className: css$21.answer,
+				children: jsx(MarkdownText, {
+					text: answer,
+					labels: labels.markdown
+				})
 			}),
 			empty ? jsx("div", {
-				className: css$20.empty,
-				children: "未找到结果"
+				className: css$21.empty,
+				children: labels.noResults
 			}) : jsx("ol", {
-				className: css$20.sources,
+				className: css$21.sources,
 				children: sources.map((source, index) => jsx(SourceItem, {
 					source,
 					ordinal: index + 1
 				}, index))
 			}),
 			truncated && jsx("div", {
-				className: css$20.truncated,
-				children: "来源列表已截断"
+				className: css$21.truncated,
+				children: labels.sourcesTruncated
 			})
 		]
 	});
@@ -5758,22 +6649,26 @@ function WebSearchBlock({ answer, sources, truncated, className }) {
 * @param props - see {@link WebFetchBlockProps}.
 * @returns the fetch card element.
 */
-function WebFetchBlock({ url, statusCode, truncated, className }) {
+function WebFetchBlock({ url, statusCode, truncated, labels, className }) {
 	return jsxs("div", {
-		className: clsx(css$20.block, css$20.fetch, className),
+		className: clsx(css$21.block, css$21.fetch, className),
 		"data-web": "fetch",
 		children: [jsx(SafeLink, {
 			url,
 			label: url,
-			className: css$20.fetchUrl
+			className: css$21.fetchUrl
 		}), jsxs("div", {
-			className: css$20.fetchMeta,
+			className: css$21.fetchMeta,
 			children: [jsxs("span", {
-				className: css$20.status,
-				children: ["HTTP ", statusCode]
+				className: css$21.status,
+				children: [
+					labels.http,
+					" ",
+					statusCode
+				]
 			}), truncated && jsx("span", {
-				className: css$20.truncated,
-				children: "内容已截断"
+				className: css$21.truncated,
+				children: labels.contentTruncated
 			})]
 		})]
 	});
@@ -5789,11 +6684,7 @@ function WebBlock(props) {
 //#endregion
 //#region lib/types/markdown/JsonBlock.js
 const MAX_CHARS = 2e4;
-/** Default truncation footer; the owner passes a localized formatter. */
-function defaultTruncatedLabel(total) {
-	return `… 已截断，共 ${total} 字符`;
-}
-function JsonBlock({ label, payload, defaultOpen = false, truncatedLabel = defaultTruncatedLabel }) {
+function JsonBlock({ label, payload, defaultOpen = false, truncatedLabel }) {
 	const [open, setOpen] = useState(defaultOpen);
 	const body = useMemo(() => {
 		if (!open) return "";
@@ -5810,10 +6701,10 @@ function JsonBlock({ label, payload, defaultOpen = false, truncatedLabel = defau
 		truncatedLabel
 	]);
 	return jsxs("div", {
-		className: css$21.root,
+		className: css$22.root,
 		children: [jsxs("button", {
 			type: "button",
-			className: css$21.toggle,
+			className: css$22.toggle,
 			onClick: () => {
 				setOpen((v) => !v);
 			},
@@ -5823,7 +6714,7 @@ function JsonBlock({ label, payload, defaultOpen = false, truncatedLabel = defau
 				label
 			]
 		}), open && jsx("pre", {
-			className: css$21.body,
+			className: css$22.body,
 			children: body
 		})]
 	});
@@ -5832,7 +6723,7 @@ function JsonBlock({ label, payload, defaultOpen = false, truncatedLabel = defau
 //#region lib/types/markdown/MessageText.js
 function MessageText({ text }) {
 	return jsx("div", {
-		className: css$22.text,
+		className: css$23.text,
 		children: text
 	});
 }
@@ -5908,6 +6799,6 @@ function extractMarkdownPlainText(markdown, options = {}) {
 	}
 }
 //#endregion
-export { BrandWordmark, Button, CodeBlock, ConnectionBanner, DEFAULT_DIFF_MAX_LINES, DEFAULT_READ_MAX_LINES, DEFAULT_SEARCH_MAX_LINES, DEFAULT_TERMINAL_MAX_LINES, DiffBlock, DisclosureRow, FishLogo, HoverCard, IconAgentPresetOutline16, IconApiOutline14, IconArchiveOutline20, IconBranchOutline16, IconBrowseOutline16, IconCheckOutline14, IconCheckOutline16, IconChecklistOutline14, IconChevronDownOutline14, IconChevronLeftOutline14, IconChevronRightOutline14, IconChevronUpOutline14, IconCloseFill14, IconCloseOutline16, IconCodeOutline16, IconCopyOutline16, IconCordisPluginOutline14, IconDarkOutline16, IconDataOutline16, IconDislikeFill16, IconDislikeOutline16, IconDownloadOutline16, IconEditOutline16, IconEllipsisOutline16, IconEnhanceOutline16, IconFolderClose16, IconFolderOpen16, IconFolderOpenOutline16, IconFollowsystemOutline16, IconFullscreenOutline16, IconGlobeOutline14, IconGoalOutline16, IconInspectOutline12, IconLightOutline16, IconLikeFill16, IconLikeOutline16, IconLinkOutline14, IconLinkOutline16, IconListPenOutline16, IconLoadingOutline16, IconNewChatOutline16, IconPanelLeftOutline16, IconPaperclipOutline16, IconPauseOutline16, IconPersonalizationOutline16, IconPlayOutline16, IconPlusOutline16, IconProjectAddOutline16, IconQuestionOutline14, IconQueueOutline14, IconRefreshOutline14, IconRefreshOutline16, IconRightUpOutline14, IconRightUpOutline16, IconSearchOutline16, IconSendOutline14, IconSendOutline16, IconSettingsOutline14, IconSettingsOutline16, IconShareOutline16, IconSkillOutline16, IconSparkle16, IconStopFill16, IconThinkOutline14, IconThinkOutline16, IconTrashOutline16, IconTreeCorner8x10, IconTriangleRightFill14, IconUserOutline16, IconWarningOutline16, Input, JsonBlock, JsonTree, MarkdownText, Menu, MessageText, Modal, OnboardingSurface, Pill, ReadBlock, RiskConfirmation, SearchBlock, StateDot, TerminalBlock, Toast, Tooltip, WebBlock, extractMarkdownPlainText, useAnchoredMaxHeight, useAnchoredPosition, useDismissOnOutsidePointer, writeClipboard };
+export { BrandWordmark, Button, CodeBlock, ConnectionIndicator, DEFAULT_DIFF_MAX_LINES, DEFAULT_READ_MAX_LINES, DEFAULT_SEARCH_MAX_LINES, DEFAULT_TERMINAL_MAX_LINES, DiffBlock, DisclosureRow, FISH_LOGO_PATH, FISH_LOGO_VIEWBOX, FishLogo, HoverCard, IconAgentPresetOutline16, IconAlarmClockOutline16, IconApiOutline14, IconArchiveOutline20, IconBranchOutline16, IconBrowseOutline16, IconCheckOutline14, IconCheckOutline16, IconChecklistOutline14, IconChevronDownOutline14, IconChevronLeftOutline14, IconChevronRightOutline14, IconChevronUpOutline14, IconClockOutline16, IconCloseFill14, IconCloseOutline16, IconCodeOutline16, IconContextInjectionOutline16, IconCopyOutline16, IconCordisPluginOutline14, IconDarkOutline16, IconDataOutline16, IconDatabaseOutline16, IconDislikeFill16, IconDislikeOutline16, IconDownloadOutline16, IconEditOutline16, IconEllipsisOutline16, IconEnhanceOutline16, IconFolderClose16, IconFolderOpen16, IconFolderOpenOutline16, IconFollowsystemOutline16, IconFullscreenOutline16, IconGlobeOutline14, IconGoalOutline16, IconInspectOutline12, IconLightOutline16, IconLikeFill16, IconLikeOutline16, IconLinkOutline14, IconLinkOutline16, IconListPenOutline16, IconLoadingOutline16, IconNewChatOutline16, IconPanelLeftOutline16, IconPaperclipOutline16, IconPauseOutline16, IconPersonalizationOutline16, IconPlayOutline16, IconPlusOutline16, IconProjectAddOutline16, IconQuestionOutline14, IconQueueOutline14, IconRefreshOutline14, IconRefreshOutline16, IconRightUpOutline14, IconRightUpOutline16, IconSearchOutline16, IconSendOutline14, IconSendOutline16, IconSettingsOutline14, IconSettingsOutline16, IconShareOutline16, IconSkillOutline16, IconSparkle16, IconStopFill16, IconThinkOutline14, IconThinkOutline16, IconTrashOutline16, IconTreeCorner8x10, IconTriangleRightFill14, IconUserOutline16, IconWarningOutline16, Input, JsonBlock, JsonTree, MarkdownText, Menu, MessageText, Modal, OnboardingSurface, Pill, ReadBlock, ReferenceIcon, RiskConfirmation, SearchBlock, StateDot, TerminalBlock, Toast, Tooltip, WebBlock, diffTotals, extractMarkdownPlainText, projectUserText, relativeTime, useAnchoredMaxHeight, useAnchoredPosition, useDismissOnOutsidePointer, writeClipboard };
 
 //# sourceMappingURL=index.js.map