@deepseek-ai/dsh-client-ui-primitives 0.1.2-alpha.5 → 0.1.3-alpha.2

package/lib/index.js

@@ -4,29 +4,31 @@ import css from "./StateDot.module.css";
 import css$1 from "./DisclosureRow.module.css";
 import css$2 from "./Button.module.css";
 import css$3 from "./Pill.module.css";
-import css$4 from "./Input.module.css";
+import css$4 from "./Tag.module.css";
+import css$5 from "./Switch.module.css";
+import css$6 from "./Input.module.css";
 import { Fragment as Fragment$1, cloneElement, createElement, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
-import css$5 from "./Menu.module.css";
-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 "./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 css$7 from "./Menu.module.css";
+import css$8 from "./HoverCard.module.css";
+import css$9 from "./Modal.module.css";
+import css$10 from "./OnboardingSurface.module.css";
+import css$11 from "./RiskConfirmation.module.css";
+import css$12 from "./ConnectionIndicator.module.css";
+import css$13 from "./user-text.module.css";
+import css$14 from "./Tooltip.module.css";
+import css$15 from "./Toast.module.css";
+import css$16 from "./JsonTree.module.css";
 import Anser from "anser";
-import css$15 from "./TerminalBlock.module.css";
+import css$17 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$16 from "./ReadBlock.module.css";
-import css$17 from "./DiffBlock.module.css";
-import css$18 from "./SearchBlock.module.css";
+import css$18 from "./ReadBlock.module.css";
+import css$19 from "./DiffBlock.module.css";
+import css$20 from "./SearchBlock.module.css";
 import { fromMarkdown } from "mdast-util-from-markdown";
 import { gfmFromMarkdown } from "mdast-util-gfm";
 import { mathFromMarkdown } from "mdast-util-math";
@@ -38,13 +40,12 @@ 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$19 from "./markdown/CodeBlock.module.css";
+import css$21 from "./markdown/CodeBlock.module.css";
 import katex from "katex";
-import css$20 from "./markdown/MarkdownText.module.css";
+import css$22 from "./markdown/MarkdownText.module.css";
 import "katex/dist/katex.min.css";
-import css$21 from "./WebBlock.module.css";
-import css$22 from "./markdown/JsonBlock.module.css";
-import css$23 from "./markdown/MessageText.module.css";
+import css$23 from "./WebBlock.module.css";
+import css$24 from "./markdown/JsonBlock.module.css";
 //#region lib/types/StateDot.js
 /** Outer 3x3 matrix cells (2px pixels on a 10px grid), clockwise from top-left. */
 const MATRIX_CELLS = [
@@ -59,7 +60,7 @@ const MATRIX_CELLS = [
 ];
 /**
 * Render a state dot.
-* @param props.state - which of the four states to show.
+* @param props.state - which of `done`, `warning`, `ongoing`, `error`, or `idle` to show.
 * @param props.size - outer diameter in px (default 10, the figma size).
 * @param props.className - extra class for layout placement.
 * @returns the dot element (aria-hidden; pair with text for accessibility).
@@ -1562,6 +1563,50 @@ function Pill({ active = false, className, children, onClick, ...rest }) {
 	});
 }
 //#endregion
+//#region lib/types/Tag.js
+/**
+* Render a read-only tag.
+* @param props.tone - which palette to use (default `outline`).
+* @param props.className - extra class for layout placement.
+* @param props.children - the localized label, owned by the render site.
+* @returns the tag element.
+*/
+function Tag({ tone = "outline", className, children }) {
+	return jsx("span", {
+		className: clsx(css$4.tag, className),
+		"data-tone": tone,
+		children
+	});
+}
+//#endregion
+//#region lib/types/Switch.js
+/**
+* Render a toggle switch.
+* @param props.checked - the current state; the control is fully controlled.
+* @param props.onChange - called with the state the click asks for.
+* @param props.label - localized accessible name, owned by the render site.
+* @param props.disabled - whether the control refuses input; owners also set it
+* while a write is in flight, not only when a deployment locks the toggle.
+* @param props.title - localized hover text, typically why the toggle is locked.
+* @param props.className - extra class for layout placement.
+* @returns the switch element.
+*/
+function Switch({ checked, onChange, label, disabled = false, title, className }) {
+	return jsx("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		"aria-label": label,
+		title,
+		disabled,
+		className: clsx(css$5.switch, className),
+		onClick: () => {
+			onChange(!checked);
+		},
+		children: jsx("span", { className: css$5.thumb })
+	});
+}
+//#endregion
 //#region lib/types/Input.js
 /**
 * Render a text input with an optional leading icon.
@@ -1570,12 +1615,12 @@ function Pill({ active = false, className, children, onClick, ...rest }) {
 */
 function Input({ icon, className, ...rest }) {
 	return jsxs("span", {
-		className: clsx(css$4.wrap, className),
+		className: clsx(css$6.wrap, className),
 		children: [icon != null && jsx("span", {
-			className: css$4.icon,
+			className: css$6.icon,
 			children: icon
 		}), jsx("input", {
-			className: css$4.input,
+			className: css$6.input,
 			...rest
 		})]
 	});
@@ -1652,9 +1697,13 @@ const MEASURE_STYLE = {
 * scroll/resize; return null to skip placement for that frame.
 * @param props.footer - rows pinned below the scrolling items area, separated
 * by a hairline; they stay visible while the items above scroll.
+* @param props.selection - how a selected row is marked: a trailing check
+* (`'check'`, default — figma .Menu_cell) or the hover fill held on the row
+* with no check (`'fill'`, for icon-labelled rows where a trailing glyph
+* crowds the cell).
 * @returns anchor wrapper with the conditional list.
 */
-function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose, align = "start", side = "bottom", portal = false, closeOnPointerLeave = false, dense = false, compact = false, getAnchorRect, footer, className }) {
+function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose, align = "start", side = "bottom", portal = false, closeOnPointerLeave = false, dense = false, compact = false, selection = "check", getAnchorRect, footer, className }) {
 	const rootRef = useRef(null);
 	const listRef = useRef(null);
 	const [openSubmenuId, setOpenSubmenuId] = useState(null);
@@ -1738,11 +1787,11 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 	const scrollable = !items.some((entry) => !isSeparator(entry) && !isLabel(entry) && entry.submenu !== void 0 && entry.submenu.length > 0);
 	const renderEntry = (entry) => {
 		if (isSeparator(entry)) return jsx("div", {
-			className: css$5.separator,
+			className: css$7.separator,
 			role: "separator"
 		}, entry.id);
 		if (isLabel(entry)) return jsx("div", {
-			className: css$5.label,
+			className: css$7.label,
 			role: "presentation",
 			children: entry.text
 		}, entry.id);
@@ -1750,7 +1799,7 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 		const subOpen = hasSub && openSubmenuId === entry.id;
 		const selected = entry.id === selectedId || selectedIds?.includes(entry.id) === true;
 		return jsxs("div", {
-			className: css$5.itemWrap,
+			className: css$7.itemWrap,
 			onMouseEnter: () => {
 				setOpenSubmenuId(hasSub ? entry.id : null);
 			},
@@ -1760,7 +1809,7 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 			children: [jsxs("button", {
 				type: "button",
 				role: "menuitem",
-				className: clsx(css$5.item, selected && css$5.selected, entry.danger === true && css$5.danger),
+				className: clsx(css$7.item, selected && (selection === "fill" ? css$7.selectedFill : css$7.selected), entry.danger === true && css$7.danger),
 				disabled: entry.disabled,
 				"aria-haspopup": hasSub ? "menu" : void 0,
 				"aria-expanded": hasSub ? subOpen : void 0,
@@ -1776,31 +1825,31 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 				},
 				children: [
 					entry.icon !== void 0 && jsx("span", {
-						className: css$5.itemIcon,
+						className: css$7.itemIcon,
 						children: entry.icon
 					}),
 					jsx("span", {
-						className: css$5.itemLabel,
+						className: css$7.itemLabel,
 						children: entry.label
 					}),
-					selected && jsx(IconCheckOutline16, { className: css$5.check })
+					selected && selection === "check" && jsx(IconCheckOutline16, { className: css$7.check })
 				]
 			}), subOpen && entry.submenu !== void 0 && jsx("div", {
-				className: clsx(css$5.submenu, compact && css$5.compactList),
+				className: clsx(css$7.submenu, compact && css$7.compactList),
 				role: "menu",
 				children: entry.submenu.map((sub) => jsxs("button", {
 					type: "button",
 					role: "menuitem",
-					className: css$5.item,
+					className: css$7.item,
 					disabled: sub.disabled,
 					onClick: () => {
 						onSelect(sub.id);
 					},
 					children: [sub.icon !== void 0 && jsx("span", {
-						className: css$5.itemIcon,
+						className: css$7.itemIcon,
 						children: sub.icon
 					}), jsx("span", {
-						className: css$5.itemLabel,
+						className: css$7.itemLabel,
 						children: sub.label
 					})]
 				}, sub.id))
@@ -1809,25 +1858,25 @@ function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose,
 	};
 	const list = open && jsxs("div", {
 		ref: listRef,
-		className: clsx(css$5.list, dense && css$5.denseList, compact && css$5.compactList, scrollable && css$5.scrollable, portal && css$5.portal, side === "top" && !portal && css$5.sideTop, align === "end" && !portal && css$5.alignEnd),
+		className: clsx(css$7.list, dense && css$7.denseList, compact && css$7.compactList, scrollable && css$7.scrollable, portal && css$7.portal, side === "top" && !portal && css$7.sideTop, align === "end" && !portal && css$7.alignEnd),
 		style: portal ? fixedPos ?? MEASURE_STYLE : void 0,
 		role: "menu",
 		onClick: (e) => {
 			e.stopPropagation();
 		},
 		children: [jsx("div", {
-			className: css$5.viewport,
+			className: css$7.viewport,
 			role: "presentation",
 			children: items.map(renderEntry)
 		}), footer !== void 0 && footer.length > 0 && jsx("div", {
-			className: css$5.footer,
+			className: css$7.footer,
 			role: "presentation",
 			children: footer.map(renderEntry)
 		})]
 	});
 	return jsxs("span", {
 		ref: rootRef,
-		className: clsx(css$5.root, className),
+		className: clsx(css$7.root, className),
 		onPointerEnter: closeOnPointerLeave ? cancelClose : void 0,
 		onPointerLeave: closeOnPointerLeave ? () => {
 			if (open) armClose();
@@ -2127,7 +2176,7 @@ function HoverCard({ anchor, content, openDelayMs = 500, disabled = false, copyT
 	const copyable = copyText !== void 0;
 	const card = open && pos !== null && jsx("div", {
 		ref: cardRef,
-		className: `${css$6.card}${copyable ? ` ${css$6.copyable}` : ""}${copied ? ` ${css$6.feedback}` : ""}`,
+		className: `${css$8.card}${copyable ? ` ${css$8.copyable}` : ""}${copied ? ` ${css$8.feedback}` : ""}`,
 		style: {
 			...pos,
 			minHeight: copied && copyHeightRef.current !== null ? copyHeightRef.current : void 0
@@ -2148,14 +2197,14 @@ function HoverCard({ anchor, content, openDelayMs = 500, disabled = false, copyT
 			copy(copyText);
 		} : void 0,
 		children: copied ? jsx("span", {
-			className: css$6.copied,
+			className: css$8.copied,
 			"aria-hidden": "true",
 			children: copiedLabel
 		}) : content
 	});
 	return jsxs("span", {
 		ref: rootRef,
-		className: css$6.root,
+		className: css$8.root,
 		onPointerEnter: () => {
 			if (disabled) return;
 			cancelClose();
@@ -2178,7 +2227,7 @@ function HoverCard({ anchor, content, openDelayMs = 500, disabled = false, copyT
 		children: [
 			anchor,
 			open && copyable && jsx("span", {
-				className: css$6.status,
+				className: css$8.status,
 				role: "status",
 				children: copied ? copiedLabel : ""
 			}),
@@ -2215,44 +2264,44 @@ function Modal({ open, onClose, title, closeLabel, description, children, footer
 	}, [open, onClose]);
 	if (!open) return null;
 	return createPortal(jsxs("div", {
-		className: css$7.root,
+		className: css$9.root,
 		role: "presentation",
 		children: [jsx("div", {
-			className: css$7.mask,
+			className: css$9.mask,
 			"aria-hidden": "true",
 			onClick: onClose
 		}), jsx("div", {
-			className: clsx(css$7.dialog, className),
+			className: clsx(css$9.dialog, className),
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": title,
 			children: headless ? children : jsxs(Fragment, { children: [jsxs("div", {
-				className: clsx(css$7.content, contentClassName),
+				className: clsx(css$9.content, contentClassName),
 				children: [
 					jsxs("div", {
-						className: css$7.header,
+						className: css$9.header,
 						children: [jsx("h2", {
-							className: css$7.title,
+							className: css$9.title,
 							children: title
 						}), jsx("button", {
 							type: "button",
-							className: css$7.close,
+							className: css$9.close,
 							"aria-label": closeLabel,
 							onClick: onClose,
 							children: jsx(IconCloseOutline16, { size: 14 })
 						})]
 					}),
 					description !== void 0 && description !== "" && jsx("p", {
-						className: css$7.description,
+						className: css$9.description,
 						children: description
 					}),
 					children !== void 0 && jsx("div", {
-						className: css$7.body,
+						className: css$9.body,
 						children
 					})
 				]
 			}), footer !== void 0 && jsx("div", {
-				className: css$7.footer,
+				className: css$9.footer,
 				children: footer
 			})] })
 		})]
@@ -2276,13 +2325,13 @@ function OnboardingSurface({ children }) {
 		};
 	}, []);
 	return createPortal(jsxs("div", {
-		className: css$8.onboardingOverlay,
+		className: css$10.onboardingOverlay,
 		role: "presentation",
 		children: [jsx("div", {
-			className: css$8.onboardingMask,
+			className: css$10.onboardingMask,
 			"aria-hidden": "true"
 		}), jsx("div", {
-			className: css$8.onboardingStage,
+			className: css$10.onboardingStage,
 			children
 		})]
 	}), document.body);
@@ -2303,28 +2352,28 @@ function RiskConfirmation({ open, title, description, acknowledgeLabel, cancelLa
 		onClose: onCancel,
 		title,
 		closeLabel,
-		className: css$9.confirmation ?? "",
-		contentClassName: css$9.confirmationContent ?? "",
+		className: css$11.confirmation ?? "",
+		contentClassName: css$11.confirmationContent ?? "",
 		footer: jsxs(Fragment, { children: [jsx(Button, {
 			variant: "outline",
-			className: css$9.modalAction,
+			className: css$11.modalAction,
 			onClick: onCancel,
 			children: cancelLabel
 		}), jsx(Button, {
 			variant: "primary",
-			className: css$9.confirmAction,
+			className: css$11.confirmAction,
 			disabled: disabled || !acknowledged,
 			onClick: onConfirm,
 			children: confirmLabel
 		})] }),
 		children: [jsxs("div", {
-			className: css$9.warning,
+			className: css$11.warning,
 			children: [jsx(IconWarningOutline16, {
 				size: 18,
-				className: css$9.warningIcon
+				className: css$11.warningIcon
 			}), jsx("p", { children: description })]
 		}), jsxs("label", {
-			className: css$9.acknowledgement,
+			className: css$11.acknowledgement,
 			children: [jsx("input", {
 				type: "checkbox",
 				checked: acknowledged,
@@ -2355,41 +2404,41 @@ function ConnectionIndicator({ state, disconnectedLabel, reconnectLabel, connect
 	if (state === void 0) return null;
 	const sizeLabels = jsxs(Fragment, { children: [
 		jsx("span", {
-			className: css$10.sizeLabel,
+			className: css$12.sizeLabel,
 			"aria-hidden": "true",
 			children: disconnectedLabel
 		}),
 		jsx("span", {
-			className: css$10.sizeLabel,
+			className: css$12.sizeLabel,
 			"aria-hidden": "true",
 			children: reconnectLabel
 		}),
 		jsxs("span", {
-			className: css$10.sizeLabel,
+			className: css$12.sizeLabel,
 			"aria-hidden": "true",
 			children: [connectingLabel, jsx("span", {
-				className: css$10.dots,
+				className: css$12.dots,
 				children: "..."
 			})]
 		}),
 		jsx("span", {
-			className: css$10.sizeLabel,
+			className: css$12.sizeLabel,
 			"aria-hidden": "true",
 			children: recoveredLabel
 		})
 	] });
 	if (state === "recovered") return jsxs("div", {
-		className: `${css$10.indicator} ${css$10.success}`,
+		className: `${css$12.indicator} ${css$12.success}`,
 		role: "status",
 		"aria-label": recoveredLabel,
 		children: [jsx("span", {
-			className: css$10.icon,
+			className: css$12.icon,
 			"aria-hidden": "true",
 			children: jsx(IconCheckOutline16, { size: 14 })
 		}), jsxs("span", {
-			className: css$10.label,
+			className: css$12.label,
 			children: [sizeLabels, jsx("span", {
-				className: css$10.stateLabel,
+				className: css$12.stateLabel,
 				children: recoveredLabel
 			})]
 		})]
@@ -2397,38 +2446,38 @@ function ConnectionIndicator({ state, disconnectedLabel, reconnectLabel, connect
 	const connecting = state === "connecting";
 	return jsxs("button", {
 		type: "button",
-		className: `${css$10.indicator} ${css$10.warning}`,
+		className: `${css$12.indicator} ${css$12.warning}`,
 		"data-phase": state,
 		"aria-label": connecting ? restartActionLabel : reconnectActionLabel,
 		onClick: onReconnect,
 		children: [jsx("span", {
-			className: css$10.icon,
+			className: css$12.icon,
 			"aria-hidden": "true",
 			children: jsx(IconWarningOutline16, { size: 14 })
 		}), jsxs("span", {
-			className: css$10.label,
+			className: css$12.label,
 			children: [
 				sizeLabels,
 				jsx("span", {
-					className: css$10.stateLabel,
+					className: css$12.stateLabel,
 					children: connecting ? jsxs(Fragment, { children: [connectingLabel, jsxs("span", {
-						className: css$10.dots,
+						className: css$12.dots,
 						"aria-hidden": "true",
 						children: [
 							jsx("span", { children: "." }),
 							jsx("span", {
-								className: css$10.secondDot,
+								className: css$12.secondDot,
 								children: "."
 							}),
 							jsx("span", {
-								className: css$10.thirdDot,
+								className: css$12.thirdDot,
 								children: "."
 							})
 						]
 					})] }) : disconnectedLabel
 				}),
 				jsx("span", {
-					className: css$10.hoverLabel,
+					className: css$12.hoverLabel,
 					children: reconnectLabel
 				})
 			]
@@ -2618,16 +2667,285 @@ function ReferenceIcon({ kind, size = 16, className }) {
 	}
 }
 //#endregion
+//#region lib/types/LinkIcon.js
+/** Code, web, and data extensions: all three categories share the code glyph. */
+const CODE_EXTENSIONS = new Set([
+	"ts",
+	"tsx",
+	"js",
+	"jsx",
+	"mjs",
+	"cjs",
+	"cts",
+	"mts",
+	"css",
+	"scss",
+	"sass",
+	"less",
+	"html",
+	"htm",
+	"vue",
+	"svelte",
+	"astro",
+	"json",
+	"jsonc",
+	"json5",
+	"yaml",
+	"yml",
+	"toml",
+	"xml",
+	"ini",
+	"env",
+	"sh",
+	"bash",
+	"zsh",
+	"fish",
+	"ps1",
+	"bat",
+	"cmd",
+	"py",
+	"pyi",
+	"rb",
+	"rs",
+	"go",
+	"java",
+	"kt",
+	"kts",
+	"c",
+	"cc",
+	"cpp",
+	"cxx",
+	"h",
+	"hh",
+	"hpp",
+	"cs",
+	"php",
+	"swift",
+	"sql",
+	"csv",
+	"tsv",
+	"proto",
+	"graphql",
+	"gql",
+	"lua",
+	"r",
+	"pl",
+	"scala",
+	"clj",
+	"cljs",
+	"ex",
+	"exs",
+	"erl",
+	"hs",
+	"dart"
+]);
+const IMAGE_EXTENSIONS = new Set([
+	"png",
+	"jpg",
+	"jpeg",
+	"gif",
+	"svg",
+	"webp",
+	"avif",
+	"bmp",
+	"ico",
+	"tif",
+	"tiff",
+	"heic",
+	"heif"
+]);
+const DOCUMENT_EXTENSIONS = new Set([
+	"pdf",
+	"doc",
+	"docx",
+	"xls",
+	"xlsx",
+	"ppt",
+	"pptx"
+]);
+/**
+* Derive a file path's link-icon category from its extension. Unknown and
+* missing extensions fall to `other` (the plain-paper glyph).
+* @param path - File path as the producing tool spelled it (either separator).
+* @returns The file's glyph category; never `url` or `folder`.
+*/
+function classifyLinkPath(path) {
+	const name = path.slice(Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\")) + 1);
+	const dot = name.lastIndexOf(".");
+	if (dot < 0) return "other";
+	const extension = name.slice(dot + 1).toLowerCase();
+	if (CODE_EXTENSIONS.has(extension)) return "code";
+	if (IMAGE_EXTENSIONS.has(extension)) return "image";
+	return DOCUMENT_EXTENSIONS.has(extension) ? "document" : "other";
+}
+const GlobeGlyph = ({ size, className }) => jsx("svg", {
+	width: size,
+	height: size,
+	className,
+	viewBox: "0 0 20 20",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": true,
+	children: jsx("path", {
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		d: "M9.99951 1.68994C14.5889 1.68994 18.3098 5.41022 18.3101 9.99951C18.3101 14.589 14.589 18.3101 9.99951 18.3101C5.41022 18.3098 1.68994 14.5889 1.68994 9.99951C1.69017 5.41037 5.41037 1.69017 9.99951 1.68994ZM3.23193 10.7495C3.52924 13.463 5.41981 15.6965 7.94873 16.4946C7.74323 16.1395 7.56487 15.736 7.41162 15.3022C6.97892 14.0773 6.70459 12.4906 6.63232 10.7495H3.23193ZM13.3667 10.7495C13.2944 12.4906 13.0211 14.0773 12.5884 15.3022C12.4352 15.7359 12.2557 16.1386 12.0503 16.4937C14.5794 15.6956 16.4707 13.4631 16.7681 10.7495H13.3667ZM8.13428 10.7495C8.20587 12.3512 8.45916 13.7619 8.82666 14.8022C9.046 15.4231 9.29031 15.8714 9.52686 16.1499C9.76321 16.428 9.92505 16.4651 9.99951 16.4653C10.0737 16.4653 10.2362 16.4288 10.4731 16.1499C10.7097 15.8714 10.954 15.4231 11.1733 14.8022C11.5408 13.7619 11.7941 12.3512 11.8657 10.7495H8.13428ZM9.99951 3.18994C9.92505 3.19013 9.76321 3.22823 9.52686 3.50635C9.29035 3.78486 9.04595 4.23325 8.82666 4.854C8.43314 5.96808 8.16996 7.50638 8.12158 9.24951H11.8784C11.83 7.50638 11.5669 5.96808 11.1733 4.854C10.954 4.23324 10.7097 3.78486 10.4731 3.50635C10.2362 3.22748 10.0737 3.18994 9.99951 3.18994ZM12.27 3.57861C12.3862 3.82232 12.4924 4.0822 12.5884 4.354C13.0494 5.65902 13.33 7.37415 13.3784 9.24951H16.7681C16.4792 6.61525 14.6885 4.43369 12.27 3.57861ZM7.729 3.57861C5.3109 4.4338 3.52072 6.61541 3.23193 9.24951H6.62158C6.67001 7.37415 6.95063 5.65902 7.41162 4.354C7.50759 4.08233 7.61287 3.82221 7.729 3.57861Z",
+		fill: "currentColor"
+	})
+});
+const CodeGlyph = ({ size, className }) => jsxs("svg", {
+	width: size,
+	height: size,
+	className,
+	viewBox: "0 0 20 20",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": true,
+	children: [
+		jsx("path", {
+			d: "M5 15.2021L1.67188 11.874C1.42017 11.6223 1.1823 11.3858 1.00781 11.1689C0.823288 10.9396 0.645016 10.6559 0.586914 10.2891C0.556619 10.0975 0.556619 9.90245 0.586914 9.71094C0.645016 9.3441 0.823288 9.06042 1.00781 8.83105C1.1823 8.61419 1.42017 8.37768 1.67188 8.12598L5 4.79785L6.20215 6L2.87402 9.32813C2.59555 9.6066 2.43539 9.76802 2.33203 9.89648C2.29246 9.94567 2.27406 9.97638 2.26563 9.99121C2.26528 9.99711 2.26528 10.0029 2.26563 10.0088C2.27406 10.0236 2.29246 10.0543 2.33203 10.1035C2.43539 10.232 2.59555 10.3934 2.87402 10.6719L6.20215 14L5 15.2021Z",
+			fill: "currentColor"
+		}),
+		jsx("path", {
+			d: "M15 15.2021L18.3281 11.874C18.5798 11.6223 18.8177 11.3858 18.9922 11.1689C19.1767 10.9396 19.355 10.6559 19.4131 10.2891C19.4434 10.0975 19.4434 9.90245 19.4131 9.71094C19.355 9.3441 19.1767 9.06042 18.9922 8.83105C18.8177 8.61419 18.5798 8.37768 18.3281 8.12598L15 4.79785L13.7979 6L17.126 9.32813C17.4045 9.6066 17.5646 9.76802 17.668 9.89648C17.7075 9.94567 17.7259 9.97638 17.7344 9.99121C17.7347 9.99711 17.7347 10.0029 17.7344 10.0088C17.7259 10.0236 17.7075 10.0543 17.668 10.1035C17.5646 10.232 17.4045 10.3934 17.126 10.6719L13.7979 14L15 15.2021Z",
+			fill: "currentColor"
+		}),
+		jsx("path", {
+			d: "M9.41181 15.0993L7.76955 14.6593L10.3577 5.00002L12 5.44006L9.41181 15.0993Z",
+			fill: "currentColor"
+		})
+	]
+});
+const FolderGlyph = ({ size, className }) => jsxs("svg", {
+	width: size,
+	height: size,
+	className,
+	viewBox: "0 0 20 20",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": true,
+	children: [jsx("path", {
+		d: "M1.2002 11.4178V6.7244C1.2002 6.47036 1.19957 6.2962 1.21387 6.12773C1.29746 5.14425 1.76052 4.23195 2.50489 3.58378C2.63247 3.47269 2.77337 3.37059 2.97852 3.2205C3.11259 3.12241 3.20444 3.05471 3.29981 2.99296C3.85318 2.6347 4.49029 2.42604 5.14844 2.38847C5.26177 2.38201 5.37601 2.38261 5.542 2.38261H7.91211C8.63453 2.38261 9.13199 2.37701 9.61329 2.49882C9.7656 2.53739 9.91613 2.58526 10.0625 2.64237C10.525 2.8229 10.9267 3.11712 11.5147 3.5369L12.0859 3.94413C12.1927 4.02032 12.2509 4.06163 12.2959 4.09062C12.3336 4.11488 12.3394 4.11605 12.332 4.11308C12.3403 4.11633 12.3488 4.11875 12.3574 4.12089C12.3627 4.12161 12.3757 4.12265 12.4004 4.12382C12.4538 4.12635 12.5252 4.12675 12.6563 4.12675C13.7369 4.12675 14.6105 4.12608 15.3086 4.19999C16.0209 4.27545 16.643 4.43585 17.1885 4.82011C17.5449 5.07115 17.8554 5.38173 18.1064 5.73808C18.4908 6.28368 18.6521 6.90645 18.7275 7.61894C18.8014 8.31701 18.7998 9.19066 18.7998 10.2713V11.4178C18.7998 12.5248 18.801 13.4195 18.7236 14.1336C18.6446 14.8626 18.4763 15.4982 18.0742 16.0516C17.8399 16.374 17.5559 16.6571 17.2334 16.8914C16.68 17.2935 16.0445 17.4628 15.3154 17.5418C14.6014 17.6191 13.7065 17.618 12.5996 17.618H7.40039C6.29352 17.618 5.39863 17.6191 4.68457 17.5418C3.95547 17.4628 3.32001 17.2935 2.76661 16.8914C2.44414 16.6571 2.16011 16.374 1.92579 16.0516C1.52375 15.4982 1.35537 14.8626 1.27637 14.1336C1.199 13.4195 1.2002 12.5248 1.2002 11.4178ZM2.79981 11.4178C2.79981 12.5602 2.80136 13.3529 2.86719 13.9607C2.93144 14.5537 3.04885 14.8759 3.21973 15.1111C3.35542 15.2979 3.52029 15.4618 3.70704 15.5975C3.94221 15.7683 4.26361 15.8867 4.85645 15.951C5.46439 16.0168 6.25766 16.0174 7.40039 16.0174H12.5996C13.7424 16.0174 14.5356 16.0168 15.1436 15.951C15.7364 15.8867 16.0578 15.7683 16.293 15.5975C16.4797 15.4618 16.6446 15.2979 16.7803 15.1111C16.9512 14.8759 17.0686 14.5537 17.1328 13.9607C17.1986 13.3529 17.2002 12.5602 17.2002 11.4178V10.2713C17.2002 9.15571 17.1987 8.38124 17.1357 7.7869C17.0743 7.20716 16.9618 6.8914 16.7988 6.65995C16.6534 6.45353 16.473 6.2741 16.2666 6.1287C16.0351 5.96565 15.7196 5.85222 15.1397 5.79081C14.5454 5.7279 13.7716 5.72733 12.6563 5.72733C12.4465 5.72733 12.2081 5.73253 11.9736 5.6746C11.8947 5.65509 11.8168 5.63037 11.7412 5.60038C11.517 5.51135 11.3268 5.36863 11.1563 5.24687L10.585 4.83866C9.93302 4.37321 9.71454 4.22394 9.48047 4.13261C9.39579 4.09958 9.30882 4.07191 9.22071 4.0496C8.97721 3.98798 8.71286 3.98222 7.91211 3.98222H5.542C5.35809 3.98222 5.29665 3.98285 5.23926 3.98612C4.85821 4.00788 4.48933 4.12829 4.16895 4.33573C4.12071 4.36697 4.07125 4.40295 3.92286 4.51151C3.69569 4.67771 3.61995 4.73389 3.55567 4.78983C3.1248 5.16501 2.8561 5.69324 2.80762 6.26249C2.80039 6.34752 2.79981 6.44244 2.79981 6.7244V11.4178Z",
+		fill: "currentColor"
+	}), jsx("path", {
+		d: "M15.4913 8.11793V9.71754H4.50892V8.11793H15.4913Z",
+		fill: "currentColor"
+	})]
+});
+const PhotoGlyph = ({ size, className }) => jsxs("svg", {
+	width: size,
+	height: size,
+	className,
+	viewBox: "0 0 20 20",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": true,
+	children: [jsx("path", {
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		d: "M13 5.15039C14.574 5.15039 15.8496 6.42599 15.8496 8C15.8496 9.57401 14.574 10.8496 13 10.8496C11.426 10.8496 10.1504 9.57401 10.1504 8C10.1504 6.42599 11.426 5.1504 13 5.15039ZM13 6.84961C12.3649 6.84961 11.8496 7.36488 11.8496 8C11.8496 8.63513 12.3649 9.15039 13 9.15039C13.6351 9.15039 14.1504 8.63513 14.1504 8C14.1504 7.36488 13.6351 6.84961 13 6.84961Z",
+		fill: "currentColor"
+	}), jsx("path", {
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		d: "M12.5996 2.15039C13.7056 2.15039 14.6038 2.14883 15.3213 2.22656C16.0546 2.30602 16.6994 2.47647 17.2627 2.88574C17.5895 3.1232 17.8768 3.41049 18.1143 3.73731C18.5235 4.30063 18.694 4.9454 18.7734 5.67871C18.8512 6.39616 18.8496 7.29441 18.8496 8.40039V11.5996C18.8496 12.7056 18.8512 13.6038 18.7734 14.3213C18.694 15.0546 18.5235 15.6994 18.1143 16.2627C17.8768 16.5895 17.5895 16.8768 17.2627 17.1143C16.6994 17.5235 16.0546 17.694 15.3213 17.7734C14.6038 17.8512 13.7056 17.8496 12.5996 17.8496H7.40039C6.29441 17.8496 5.39616 17.8512 4.67871 17.7734C3.9454 17.694 3.30063 17.5235 2.73731 17.1143C2.41049 16.8768 2.1232 16.5895 1.88574 16.2627C1.47647 15.6994 1.30602 15.0546 1.22656 14.3213C1.14883 13.6038 1.15039 12.7056 1.15039 11.5996V8.40039C1.15039 7.29441 1.14883 6.39616 1.22656 5.67871C1.30602 4.9454 1.47647 4.30063 1.88574 3.73731C2.1232 3.41049 2.41049 3.1232 2.73731 2.88574C3.30063 2.47647 3.9454 2.30602 4.67871 2.22656C5.39616 2.14883 6.29441 2.15039 7.40039 2.15039H12.5996ZM5.56348 10.8164C5.30962 10.8348 5.02517 10.9291 4.58008 11.1973C4.13813 11.4635 3.60989 11.8565 2.85449 12.4229C2.85831 13.1414 2.86855 13.6903 2.91699 14.1377C2.98078 14.7264 3.09709 15.0384 3.26074 15.2637C3.39335 15.4462 3.55382 15.6067 3.73633 15.7393C3.96158 15.9029 4.2736 16.0192 4.86231 16.083C5.46688 16.1485 6.25677 16.1504 7.40039 16.1504H11.9492L8.71094 12.9131C8.00039 12.2025 7.51129 11.7149 7.09571 11.376C6.69274 11.0474 6.42364 10.9144 6.17481 10.8604C5.97432 10.8168 5.7681 10.8017 5.56348 10.8164ZM7.40039 3.84961C6.25677 3.84961 5.46688 3.85153 4.86231 3.91699C4.2736 3.98078 3.96158 4.09709 3.73633 4.26074C3.55382 4.39335 3.39335 4.55382 3.26074 4.73633C3.09709 4.96158 2.98078 5.2736 2.91699 5.86231C2.85153 6.46688 2.84961 7.25677 2.84961 8.40039V10.3105C3.15698 10.0902 3.43896 9.8988 3.70215 9.74024C4.26649 9.40025 4.81639 9.16621 5.44141 9.1211C5.80775 9.0947 6.17623 9.1213 6.53516 9.19922C7.14769 9.33224 7.65922 9.64212 8.16992 10.0586C8.66793 10.4648 9.22718 11.025 9.91309 11.7109L14.333 16.1318C14.6363 16.122 14.9012 16.1086 15.1377 16.083C15.7264 16.0192 16.0384 15.9029 16.2637 15.7393C16.4462 15.6067 16.6067 15.4462 16.7393 15.2637C16.9029 15.0384 17.0192 14.7264 17.083 14.1377C17.1485 13.5331 17.1504 12.7432 17.1504 11.5996V8.40039C17.1504 7.25677 17.1485 6.46688 17.083 5.86231C17.0192 5.2736 16.9029 4.96158 16.7393 4.73633C16.6067 4.55382 16.4462 4.39335 16.2637 4.26074C16.0384 4.09709 15.7264 3.98078 15.1377 3.91699C14.5331 3.85153 13.7432 3.84961 12.5996 3.84961H7.40039Z",
+		fill: "currentColor"
+	})]
+});
+const PaperGlyph = ({ size, className }) => jsx("svg", {
+	width: size,
+	height: size,
+	className,
+	viewBox: "0 0 20 20",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": true,
+	children: jsx("path", {
+		d: "M11.3467 4.59607C11.3469 5.40284 11.3499 5.9609 11.3965 6.39099C11.444 6.82964 11.5288 7.03981 11.6328 7.18298C11.7253 7.3102 11.8376 7.42158 11.9648 7.51404C12.108 7.61807 12.3181 7.70283 12.7568 7.75037C13.1851 7.79675 13.7399 7.79992 14.541 7.80017L11.3467 4.59607ZM17.2695 12.7455C17.2695 13.5901 17.2706 14.2881 17.21 14.848C17.1477 15.4228 17.0119 15.9463 16.6768 16.4076C16.4856 16.6707 16.2543 16.902 15.9912 17.0931C15.5298 17.4284 15.0065 17.5641 14.4316 17.6263C13.8718 17.687 13.1737 17.6859 12.3291 17.6859H8.23926C7.39498 17.6859 6.69745 17.687 6.1377 17.6263C5.56284 17.5641 5.03855 17.4284 4.57715 17.0931C4.31413 16.902 4.08272 16.6706 3.8916 16.4076C3.55647 15.9463 3.42167 15.4227 3.35938 14.848C3.29872 14.2881 3.29981 13.5901 3.29981 12.7455V6.80017C3.29981 5.95586 3.29876 5.25837 3.35938 4.69861C3.42166 4.12375 3.55638 3.59946 3.8916 3.13806C4.08274 2.87503 4.31412 2.64365 4.57715 2.45252C5.03855 2.11729 5.56284 1.98257 6.1377 1.92029C6.69746 1.85967 7.39495 1.86072 8.23926 1.86072H9.38468C10.039 1.86072 10.3661 1.86072 10.6679 1.95896C10.7677 1.99146 10.8648 2.03176 10.9583 2.0795C11.241 2.22382 11.472 2.45549 11.934 2.91883L16.2188 7.21612C16.679 7.67761 16.909 7.90836 17.0523 8.1902C17.0997 8.28342 17.1397 8.38022 17.172 8.4797C17.2695 8.78045 17.2695 9.10631 17.2695 9.75801V12.7455ZM4.89942 12.7455C4.89942 13.6256 4.90106 14.2215 4.9502 14.6752C4.99773 15.1139 5.08249 15.324 5.18652 15.4672C5.27898 15.5944 5.39037 15.7067 5.51758 15.7992C5.66076 15.9032 5.87093 15.988 6.30957 16.0355C6.76321 16.0847 7.35919 16.0853 8.23926 16.0853H12.3291C13.2091 16.0853 13.8051 16.0846 14.2588 16.0355C14.6973 15.988 14.9076 15.9032 15.0508 15.7992C15.1781 15.7067 15.2903 15.5945 15.3828 15.4672C15.4868 15.324 15.5716 15.1139 15.6191 14.6752C15.6683 14.2215 15.6689 13.6256 15.6689 12.7455V9.40076H14.6865C13.8419 9.40076 13.1439 9.40185 12.584 9.34119C12.0093 9.27889 11.4857 9.14411 11.0244 8.80896C10.7614 8.61784 10.53 8.38645 10.3389 8.12341C10.0036 7.66202 9.86795 7.13773 9.80567 6.56287C9.74505 6.00312 9.74609 5.30558 9.7461 4.4613V3.46033H8.23926C7.35919 3.46033 6.76321 3.46196 6.30957 3.51111C5.87097 3.55865 5.66075 3.64342 5.51758 3.74744C5.39057 3.83979 5.27888 3.95148 5.18652 4.07849C5.0825 4.22166 4.99773 4.43188 4.9502 4.87048C4.90105 5.32412 4.89942 5.92011 4.89942 6.80017V12.7455Z",
+		fill: "currentColor"
+	})
+});
+const PaperDocGlyph = ({ size, className }) => jsxs("svg", {
+	width: size,
+	height: size,
+	className,
+	viewBox: "0 0 20 20",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": true,
+	children: [
+		jsx("path", {
+			d: "M11.3457 4.5957C11.3459 5.40247 11.3489 5.96054 11.3955 6.39063C11.443 6.82927 11.5278 7.03944 11.6318 7.18262C11.7243 7.30983 11.8367 7.42122 11.9639 7.51367C12.1071 7.61771 12.3171 7.70247 12.7559 7.75C13.1841 7.79639 13.739 7.79955 14.54 7.79981L11.3457 4.5957ZM17.2686 12.7451C17.2686 13.5897 17.2696 14.2878 17.209 14.8477C17.1467 15.4224 17.011 15.9459 16.6758 16.4072C16.4846 16.6703 16.2533 16.9016 15.9902 17.0928C15.5289 17.428 15.0055 17.5637 14.4307 17.626C13.8708 17.6866 13.1727 17.6855 12.3281 17.6855H8.23828C7.394 17.6855 6.69647 17.6866 6.13672 17.626C5.56186 17.5637 5.03757 17.428 4.57617 17.0928C4.31315 16.9016 4.08175 16.6703 3.89063 16.4072C3.55549 15.9459 3.42069 15.4224 3.3584 14.8477C3.29774 14.2878 3.29883 13.5897 3.29883 12.7451V6.79981C3.29883 5.95549 3.29778 5.258 3.3584 4.69824C3.42068 4.12338 3.5554 3.5991 3.89063 3.1377C4.08176 2.87466 4.31314 2.64328 4.57617 2.45215C5.03757 2.11692 5.56186 1.98221 6.13672 1.91992C6.69648 1.8593 7.39397 1.86035 8.23828 1.86035H9.3837C10.038 1.86035 10.3652 1.86035 10.6669 1.9586C10.7668 1.99109 10.8639 2.03139 10.9573 2.07913C11.24 2.22346 11.471 2.45512 11.933 2.91846L16.2178 7.21575C16.678 7.67725 16.9081 7.90799 17.0514 8.18983C17.0988 8.28305 17.1388 8.37985 17.171 8.47933C17.2686 8.78009 17.2686 9.10594 17.2686 9.75765V12.7451ZM4.89844 12.7451C4.89844 13.6253 4.90008 14.2211 4.94922 14.6748C4.99675 15.1135 5.08151 15.3236 5.18555 15.4668C5.278 15.594 5.38939 15.7064 5.5166 15.7988C5.65978 15.9029 5.86995 15.9876 6.30859 16.0352C6.76223 16.0843 7.35822 16.085 8.23828 16.085H12.3281C13.2081 16.085 13.8042 16.0843 14.2578 16.0352C14.6963 15.9876 14.9066 15.9028 15.0498 15.7988C15.1771 15.7063 15.2893 15.5941 15.3818 15.4668C15.4859 15.3236 15.5706 15.1135 15.6182 14.6748C15.6673 14.2211 15.668 13.6252 15.668 12.7451V9.40039H14.6855C13.841 9.40039 13.1429 9.40148 12.583 9.34082C12.0083 9.27852 11.4847 9.14374 11.0234 8.8086C10.7604 8.61747 10.5291 8.38608 10.3379 8.12305C10.0027 7.66165 9.86697 7.13736 9.80469 6.5625C9.74408 6.00275 9.74512 5.30522 9.74512 4.46094V3.45996H8.23828C7.35822 3.45996 6.76223 3.46159 6.30859 3.51074C5.86999 3.55828 5.65977 3.64305 5.5166 3.74707C5.38959 3.83942 5.2779 3.95111 5.18555 4.07813C5.08153 4.2213 4.99676 4.43152 4.94922 4.87012C4.90007 5.32376 4.89844 5.91974 4.89844 6.79981V12.7451Z",
+			fill: "currentColor"
+		}),
+		jsx("path", {
+			d: "M11.1523 13.0995V14.4999H6.30273V13.0995H11.1523Z",
+			fill: "currentColor"
+		}),
+		jsx("path", {
+			d: "M10.2148 10V11.4004H6.30273V10H10.2148Z",
+			fill: "currentColor"
+		})
+	]
+});
+/** Local exhaustiveness helper — this package does not depend on `dsh-llm`. */
+/* v8 ignore next 3 -- closed-union backstop; only reached if a kind is forged */
+function assertNever$1(value) {
+	throw new Error(`unreachable link icon kind: ${String(value)}`);
+}
+/**
+* Render the leading glyph for one clickable artifact link.
+* @param props - The link category, optional size (default 14px — the inline
+* link text size these glyphs sit beside), and optional CSS class.
+* @returns The category's SVG glyph, riding currentColor.
+*/
+function LinkIcon({ kind, size = 14, className }) {
+	switch (kind) {
+		case "url": return jsx(GlobeGlyph, {
+			size,
+			className
+		});
+		case "folder": return jsx(FolderGlyph, {
+			size,
+			className
+		});
+		case "code": return jsx(CodeGlyph, {
+			size,
+			className
+		});
+		case "image": return jsx(PhotoGlyph, {
+			size,
+			className
+		});
+		case "document": return jsx(PaperDocGlyph, {
+			size,
+			className
+		});
+		case "other": return jsx(PaperGlyph, {
+			size,
+			className
+		});
+		/* v8 ignore next -- closed-union backstop; only reached if a kind is forged */
+		default: return assertNever$1(kind);
+	}
+}
+//#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;
+/** Sentence punctuation a bare `@name` token may carry without being part of the reference. */
+const TRAILING_PUNCTUATION_RE = /[.,;:!?，。；：！？]+$/u;
 /**
 * 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.
+* @param slashNames - names a `/name` token may decorate as: the skills the
+* host loaded for this message, or the command a command bubble echoes
+* (unsent queue rows pass none).
+* @param slashKind - the chip kind those tokens render as.
 * @returns inline nodes covering the whole text.
 */
-function projectUserText(text, sessionLabels) {
+function projectUserText(text, sessionLabels, slashNames = [], slashKind = "skill") {
 	const ranges = [];
 	SESSION_WIRE_RE.lastIndex = 0;
 	let wire;
@@ -2651,13 +2969,14 @@ function projectUserText(text, sessionLabels) {
 			start = text.indexOf(label, start + label.length);
 		}
 	}
-	const re = /(^|\s)(\/[\w-]+|@"[^"\n]+"|@[^\s]+)/gu;
+	const re = /(^|\s)(\/[\w-]+(?=\s|$)|@"[^"\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, "");
+		const label = rawLabel.startsWith("@\"") ? rawLabel : rawLabel.replace(TRAILING_PUNCTUATION_RE, "");
 		if (label.length <= 1) continue;
+		if (label.startsWith("/") && !slashNames.includes(label.slice(1))) continue;
 		ranges.push({
 			start: tokenStart,
 			end: tokenStart + label.length,
@@ -2671,7 +2990,7 @@ function projectUserText(text, sessionLabels) {
 	let cursor = 0;
 	const pushPlain = (from, to) => {
 		parts.push(jsx("span", {
-			className: css$11.plainRun,
+			className: css$13.plainRun,
 			children: text.slice(from, to)
 		}, `t${from}`));
 	};
@@ -2682,19 +3001,19 @@ function projectUserText(text, sessionLabels) {
 		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",
+			className: clsx(css$13.refChip, referenceKind === void 0 && css$13.slashChip),
+			"data-ref-chip": referenceKind ?? slashKind,
 			title: label,
 			children: [referenceKind !== void 0 && jsx(ReferenceIcon, {
 				kind: referenceKind,
 				size: 16,
-				className: css$11.refIcon
+				className: css$13.refIcon
 			}), displayLabel]
 		}, tokenStart));
 		cursor = end;
 	}
 	if (parts.length === 0) return jsx("span", {
-		className: css$11.plainRun,
+		className: css$13.plainRun,
 		children: text
 	});
 	if (cursor < text.length) pushPlain(cursor, text.length);
@@ -2832,7 +3151,7 @@ function Tooltip({ label, side = "right", delayMs = 0, disabled = false, maxWidt
 		}
 	}), pos !== null && jsx("span", {
 		ref: bubble,
-		className: css$12.bubble,
+		className: css$14.bubble,
 		"data-side": placement,
 		style: {
 			left: pos.x,
@@ -2893,23 +3212,86 @@ function Toast({ text, icon, anchor, holdMs = HOLD_MS, onDone }) {
 		};
 	}, [anchor]);
 	return createPortal(jsxs("div", {
-		className: css$13.toast,
+		className: css$15.toast,
 		role: "alert",
 		style: {
 			...left === null ? {} : { left },
 			"--dsh-toast-hold": `${String(holdMs)}ms`
 		},
 		children: [icon !== void 0 && jsx("span", {
-			className: css$13.icon,
+			className: css$15.icon,
 			"aria-hidden": true,
 			children: icon
 		}), jsx("span", {
-			className: css$13.text,
+			className: css$15.text,
 			children: text
 		})]
 	}), document.body);
 }
 //#endregion
+//#region lib/types/file-size.js
+/** Compact human-readable byte counts shared by attachment presenters. @module @deepseek-ai/dsh-client-ui-primitives/file-size */
+/**
+* Byte count as compact user-facing size text (`312B`, `4.2KB`, `1.5MB`, `2.4GB`).
+* @param bytes - exact byte count.
+* @returns whole-unit text with one decimal below ten of the chosen unit.
+*/
+function fileSizeText(bytes) {
+	if (bytes < 1024) return `${bytes}B`;
+	const kb = bytes / 1024;
+	if (kb < 1024) return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)}KB`;
+	const mb = kb / 1024;
+	if (mb < 1024) return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)}MB`;
+	const gb = mb / 1024;
+	return `${gb < 10 ? gb.toFixed(1) : Math.round(gb)}GB`;
+}
+//#endregion
+//#region lib/types/DocumentFileIcon.js
+/**
+* Render the DeepSeek Web document glyph used by generic-file cards.
+* @param props - optional CSS class for sizing and placement.
+* @returns a decorative document SVG with an instance-safe gradient id.
+*/
+function DocumentFileIcon({ className }) {
+	const gradientId = useId();
+	return jsxs("svg", {
+		className,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "28",
+		viewBox: "0 0 24 28",
+		fill: "none",
+		"aria-hidden": true,
+		children: [
+			jsx("path", {
+				d: "M16.5 0l7 7v15.6c0 2.25 0 3.375-.573 4.164a3 3 0 0 1-.663.663C21.475 28 20.349 28 18.1 28H5.9c-2.25 0-3.375 0-4.164-.573a3 3 0 0 1-.663-.663C.5 25.975.5 24.849.5 22.6V5.4c0-2.25 0-3.375.573-4.164a3 3 0 0 1 .663-.663C2.525 0 3.651 0 5.9 0h10.6z",
+				fill: `url(#${gradientId})`
+			}),
+			jsx("path", {
+				d: "M16.5 0l7 7h-3.8c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C16.5 5.48 16.5 4.92 16.5 3.8V0z",
+				fill: "#fff",
+				fillOpacity: ".55"
+			}),
+			jsx("path", {
+				d: "M6 11.784c0-.433.351-.784.784-.784h10.432a.784.784 0 1 1 0 1.568H6.784A.784.784 0 0 1 6 11.784zM6 15.784c0-.433.351-.784.784-.784h10.432a.784.784 0 1 1 0 1.568H6.784A.784.784 0 0 1 6 15.784zM6.114 19.817c0-.433.35-.784.784-.784h6.318a.784.784 0 1 1 0 1.568H6.898a.784.784 0 0 1-.784-.784z",
+				fill: "#fff"
+			}),
+			jsx("defs", { children: jsxs("linearGradient", {
+				id: gradientId,
+				x1: "1.5",
+				y1: "-1",
+				x2: "23.5",
+				y2: "28",
+				gradientUnits: "userSpaceOnUse",
+				children: [jsx("stop", { stopColor: "#6D93FF" }), jsx("stop", {
+					offset: "1",
+					stopColor: "#5A71F0"
+				})]
+			}) })
+		]
+	});
+}
+//#endregion
 //#region lib/types/relative-time.js
 /**
 * Compact relative-time bucketing shared by every surface that dates a
@@ -2956,6 +3338,76 @@ function relativeTime(at, now) {
 	};
 }
 //#endregion
+//#region lib/types/rank-by-name.js
+/**
+* Shared ranking for `/` menu candidates: the query must be a
+* case-insensitive ordered subsequence of the candidate name. Prefix hits
+* rank first, then the strongest alignment score, then the source order of
+* the input. Decision record:
+* .agents/notes/archived/feature/2026-08-04-web-slash-command-fuzzy-discovery.md
+*/
+/** Extra weight for name starts and separator boundaries. */
+function boundaryBonus(name, index) {
+	return index === 0 || name.charAt(index - 1) === "-" || name.charAt(index - 1) === "_" ? 8 : 0;
+}
+/**
+* Score the strongest ordered-subsequence alignment in O(name × query).
+* Boundary and adjacent matches earn weight; skipped and leading characters
+* cost weight. Undefined when the query is not a subsequence of the name.
+*/
+function alignmentScore(name, query) {
+	if (query.length > name.length) return void 0;
+	const noMatch = Number.NEGATIVE_INFINITY;
+	let previous = Array(name.length).fill(noMatch);
+	for (let index = 0; index < name.length; index++) if (name.charAt(index) === query.charAt(0)) previous[index] = 1 + boundaryBonus(name, index) - index;
+	for (let queryIndex = 1; queryIndex < query.length; queryIndex++) {
+		const current = Array(name.length).fill(noMatch);
+		let left = noMatch;
+		let leftLeft = noMatch;
+		let bestGapped = noMatch;
+		for (const [index, prior] of previous.entries()) {
+			if (leftLeft !== noMatch) bestGapped = Math.max(bestGapped, leftLeft + index - 2);
+			if (name.charAt(index) === query.charAt(queryIndex)) {
+				const bonus = 1 + boundaryBonus(name, index);
+				let score = noMatch;
+				if (left !== noMatch) score = left + bonus + 4;
+				if (bestGapped !== noMatch) score = Math.max(score, bestGapped + bonus + 1 - index);
+				current[index] = score;
+			}
+			leftLeft = left;
+			left = prior;
+		}
+		previous = current;
+	}
+	let best = noMatch;
+	for (const score of previous) best = Math.max(best, score);
+	return best === noMatch ? void 0 : best;
+}
+/**
+* Rank named items by a menu query.
+* @param items - candidates in source order (a host catalog, then client contributions).
+* @param rawQuery - the text typed after the trigger, matched case-insensitively.
+* @returns the matching items: prefix hits first, then by alignment score,
+* then in source order. The input list itself for an empty query.
+*/
+function rankByName(items, rawQuery) {
+	const query = rawQuery.toLowerCase();
+	if (query === "") return items;
+	const ranked = [];
+	items.forEach((item, index) => {
+		const name = item.name.toLowerCase();
+		const score = alignmentScore(name, query);
+		if (score !== void 0) ranked.push({
+			item,
+			index,
+			prefix: name.startsWith(query),
+			score
+		});
+	});
+	ranked.sort((left, right) => Number(right.prefix) - Number(left.prefix) || right.score - left.score || left.index - right.index);
+	return ranked.map((match) => match.item);
+}
+//#endregion
 //#region lib/types/JsonTree.js
 const OBJECT_PREVIEW_LIMIT = 4;
 const ARRAY_PREVIEW_LIMIT = 5;
@@ -3004,35 +3456,35 @@ function bracketOf(value) {
 }
 function previewPrimitive(value) {
 	if (value === null) return jsx("span", {
-		className: css$14.keywordValue,
+		className: css$16.keywordValue,
 		children: "null"
 	});
 	if (typeof value === "string") return jsx("span", {
-		className: css$14.stringValue,
+		className: css$16.stringValue,
 		children: JSON.stringify(value)
 	});
 	if (typeof value === "number") return jsx("span", {
-		className: css$14.numberValue,
+		className: css$16.numberValue,
 		children: String(value)
 	});
 	if (typeof value === "boolean") return jsx("span", {
-		className: css$14.keywordValue,
+		className: css$16.keywordValue,
 		children: String(value)
 	});
 	if (typeof value === "bigint") return jsx("span", {
-		className: css$14.otherValue,
+		className: css$16.otherValue,
 		children: value.toString()
 	});
 	if (typeof value === "undefined") return jsx("span", {
-		className: css$14.otherValue,
+		className: css$16.otherValue,
 		children: "undefined"
 	});
 	if (typeof value === "symbol") return jsx("span", {
-		className: css$14.otherValue,
+		className: css$16.otherValue,
 		children: value.description ?? "Symbol"
 	});
 	if (typeof value === "function") return jsx("span", {
-		className: css$14.otherValue,
+		className: css$16.otherValue,
 		children: value.name || "Function"
 	});
 	return null;
@@ -3046,71 +3498,71 @@ function previewValue(value, depth) {
 	const [open, close] = bracketOf(value);
 	return jsxs(Fragment, { children: [
 		jsx("span", {
-			className: css$14.punctuation,
+			className: css$16.punctuation,
 			children: open
 		}),
 		depth >= PREVIEW_DEPTH_LIMIT ? jsx("span", {
-			className: css$14.previewEllipsis,
+			className: css$16.previewEllipsis,
 			children: "…"
 		}) : visible.map(([key, item], index) => jsxs("span", { children: [
 			index > 0 && jsx("span", {
-				className: css$14.punctuation,
+				className: css$16.punctuation,
 				children: ", "
 			}),
 			!array && jsxs(Fragment, { children: [jsx("span", {
-				className: css$14.previewProperty,
+				className: css$16.previewProperty,
 				children: key
 			}), jsx("span", {
-				className: css$14.punctuation,
+				className: css$16.punctuation,
 				children: ": "
 			})] }),
 			previewValue(item, depth + 1)
 		] }, key)),
 		depth < PREVIEW_DEPTH_LIMIT && entries.length > limit && jsx("span", {
-			className: css$14.previewEllipsis,
+			className: css$16.previewEllipsis,
 			children: ", …"
 		}),
 		jsx("span", {
-			className: css$14.punctuation,
+			className: css$16.punctuation,
 			children: close
 		})
 	] });
 }
 function primitiveValue(value) {
 	if (value === null) return jsx("span", {
-		className: css$14.keywordValue,
+		className: css$16.keywordValue,
 		children: "null"
 	});
 	if (typeof value === "string") return jsx("span", {
-		className: css$14.stringValue,
+		className: css$16.stringValue,
 		children: JSON.stringify(value)
 	});
 	if (typeof value === "boolean") return jsx("span", {
-		className: css$14.keywordValue,
+		className: css$16.keywordValue,
 		children: String(value)
 	});
 	if (typeof value === "number") return jsx("span", {
-		className: css$14.numberValue,
+		className: css$16.numberValue,
 		children: String(value)
 	});
 	if (typeof value === "bigint") return jsx("span", {
-		className: css$14.numberValue,
+		className: css$16.numberValue,
 		children: `${value.toString()}n`
 	});
 	if (value instanceof Date) return jsx("span", {
-		className: css$14.otherValue,
+		className: css$16.otherValue,
 		children: value.toISOString()
 	});
 	if (typeof value === "function") return jsxs("span", {
-		className: css$14.otherValue,
+		className: css$16.otherValue,
 		children: ["function() ", "{ }"]
 	});
 	if (typeof value === "undefined") return jsx("span", {
-		className: css$14.otherValue,
+		className: css$16.otherValue,
 		children: "undefined"
 	});
 	return jsx("span", {
-		className: css$14.otherValue,
+		className: css$16.otherValue,
 		children: value.toString()
 	});
 }
@@ -3138,7 +3590,7 @@ function moveFocus(button, direction) {
 function NodeField({ field, expandable, onToggle }) {
 	if (field === void 0) return null;
 	return jsxs("span", {
-		className: clsx(css$14.label, expandable && css$14.clickableLabel),
+		className: clsx(css$16.label, expandable && css$16.clickableLabel),
 		onClick: expandable ? onToggle : void 0,
 		children: [fieldText(field), ":"]
 	});
@@ -3167,7 +3619,7 @@ function JsonTreeNode({ field, initialExpanded, labels, lastElement, onClaimTabS
 		}
 	};
 	const row = (children, ariaExpanded) => jsx("div", {
-		className: css$14.row,
+		className: css$16.row,
 		role: "treeitem",
 		"aria-expanded": ariaExpanded,
 		onMouseOver: (event) => {
@@ -3187,7 +3639,7 @@ function JsonTreeNode({ field, initialExpanded, labels, lastElement, onClaimTabS
 		}),
 		primitiveValue(value),
 		!lastElement && jsx("span", {
-			className: css$14.punctuation,
+			className: css$16.punctuation,
 			children: ","
 		})
 	] }));
@@ -3199,22 +3651,22 @@ function JsonTreeNode({ field, initialExpanded, labels, lastElement, onClaimTabS
 			onToggle: toggle
 		}),
 		jsx("span", {
-			className: css$14.punctuation,
+			className: css$16.punctuation,
 			children: open
 		}),
 		jsx("span", {
-			className: css$14.punctuation,
+			className: css$16.punctuation,
 			children: close
 		}),
 		!lastElement && jsx("span", {
-			className: css$14.punctuation,
+			className: css$16.punctuation,
 			children: ","
 		})
 	] }));
 	return row(jsxs(Fragment, { children: [
 		jsx("span", {
 			ref: expanderRef,
-			className: clsx(css$14.expander, expanded ? css$14.collapseIcon : css$14.expandIcon),
+			className: clsx(css$16.expander, expanded ? css$16.collapseIcon : css$16.expandIcon),
 			"data-json-expander": true,
 			role: "button",
 			"aria-label": expanded ? labels.collapseNode : labels.expandNode,
@@ -3233,17 +3685,17 @@ function JsonTreeNode({ field, initialExpanded, labels, lastElement, onClaimTabS
 			onToggle: toggle
 		}),
 		jsx("span", {
-			className: css$14.preview,
+			className: css$16.preview,
 			children: previewValue(value, 0)
 		}),
 		!lastElement && jsx("span", {
-			className: css$14.punctuation,
+			className: css$16.punctuation,
 			children: ","
 		}),
 		expanded && jsx("ul", {
 			id: contentsId,
 			role: "group",
-			className: css$14.children,
+			className: css$16.children,
 			children: entries.map(([key, item], index) => jsx(JsonTreeNode, {
 				field: key,
 				value: item,
@@ -3404,17 +3856,17 @@ function JsonTree({ data, label, className, copyable = true, expandTopLevel = tr
 	const copyTitle = copyState === "copied" ? labels.copied : copyState === "failed" ? labels.copyFailed : copyTargetIsObject ? labels.copyPrettyJson : labels.copyValue;
 	return jsxs("div", {
 		ref: rootRef,
-		className: clsx(css$14.root, className),
+		className: clsx(css$16.root, className),
 		onMouseOver: handleRootMouseOver,
 		onMouseLeave: () => {
 			if (!copyMenuOpenRef.current) clearCopyTarget();
 		},
 		onScroll: handleScroll,
 		children: [expandTopLevel ? jsxs("div", {
-			className: css$14.expandedTopLevel,
+			className: css$16.expandedTopLevel,
 			children: [
 				jsx("div", {
-					className: clsx(css$14.row, css$14.topLevelBracket),
+					className: clsx(css$16.row, css$16.topLevelBracket),
 					"data-json-root-row": true,
 					onMouseOver: (event) => {
 						event.stopPropagation();
@@ -3424,13 +3876,13 @@ function JsonTree({ data, label, className, copyable = true, expandTopLevel = tr
 						});
 					},
 					children: jsx("span", {
-						className: css$14.punctuation,
+						className: css$16.punctuation,
 						children: rootOpen
 					})
 				}),
 				jsx("div", {
 					"aria-label": label,
-					className: clsx(css$14.container, css$14.expandedTopLevelContainer),
+					className: clsx(css$16.container, css$16.expandedTopLevelContainer),
 					role: "tree",
 					children: rootEntries.map(([key, value], index) => jsx(JsonTreeNode, {
 						field: key,
@@ -3445,16 +3897,16 @@ function JsonTree({ data, label, className, copyable = true, expandTopLevel = tr
 					}, key))
 				}),
 				jsx("div", {
-					className: clsx(css$14.row, css$14.topLevelBracket),
+					className: clsx(css$16.row, css$16.topLevelBracket),
 					children: jsx("span", {
-						className: css$14.punctuation,
+						className: css$16.punctuation,
 						children: rootClose
 					})
 				})
 			]
 		}) : jsx("div", {
 			"aria-label": label,
-			className: css$14.container,
+			className: css$16.container,
 			role: "tree",
 			children: jsx(JsonTreeNode, {
 				value: data,
@@ -3467,7 +3919,7 @@ function JsonTree({ data, label, className, copyable = true, expandTopLevel = tr
 				onRowHover: handleRowHover
 			})
 		}), copyTarget !== void 0 && jsx("span", {
-			className: css$14.copyAnchor,
+			className: css$16.copyAnchor,
 			style: {
 				left: copyTarget.left,
 				top: copyTarget.top
@@ -3481,7 +3933,7 @@ function JsonTree({ data, label, className, copyable = true, expandTopLevel = tr
 				anchor: jsx("button", {
 					ref: copyButtonRef,
 					type: "button",
-					className: css$14.copyButton,
+					className: css$16.copyButton,
 					"data-json-copy-button": true,
 					"data-state": copyState,
 					"aria-label": copyTitle,
@@ -3982,7 +4434,7 @@ function statusText(exitCode, signal, labels) {
 * Run-state indicator for the command, shown at the head of the prompt line so
 * the card states whether the command is still running without the reader
 * having to infer it from the presence of output. Three of {@link StateDotState}'s
-* four states are reachable: the running chase (the same
+* five states are reachable: the running chase (the same
 * indicator a running tool row's leading icon uses, so the row and its card
 * never disagree), green for a clean settle, red for a signal or a non-zero
 * exit — the same status distinction {@link statusText} draws for the pill. A
@@ -4046,66 +4498,66 @@ 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$15.block, className),
+		className: clsx(css$17.block, className),
 		"data-terminal": "",
 		"data-running": running ? "" : void 0,
 		children: [jsxs("div", {
-			className: css$15.header,
+			className: css$17.header,
 			children: [
 				jsxs("div", {
-					className: css$15.prompt,
+					className: css$17.prompt,
 					children: [jsx("span", {
-						className: css$15.runStateLabel,
+						className: css$17.runStateLabel,
 						children: state.label
 					}), commandLines.map((line, index) => jsxs("div", {
-						className: css$15.promptLine,
+						className: css$17.promptLine,
 						children: [
 							index === 0 && jsx(StateDot, {
 								state: state.state,
-								className: css$15.runState
+								className: css$17.runState
 							}),
 							jsx("span", {
-								className: css$15.cwd,
+								className: css$17.cwd,
 								children: index > 0 || cwd === void 0 ? "$" : promptLabel(cwd, home)
 							}),
 							jsx("span", {
-								className: css$15.command,
+								className: css$17.command,
 								children: line
 							})
 						]
 					}, index))]
 				}),
 				status !== void 0 && jsx(Pill, {
-					className: css$15.status,
+					className: css$17.status,
 					children: status
 				}),
 				!running && !empty && jsx("button", {
 					type: "button",
-					className: css$15.copyButton,
+					className: css$17.copyButton,
 					onClick: onCopy,
 					children: copied ? copy.copied : copy.copy
 				})
 			]
 		}), !running && (empty ? jsx("div", {
-			className: css$15.empty,
+			className: css$17.empty,
 			children: copy.noOutput
 		}) : jsxs("div", {
-			className: css$15.output,
+			className: css$17.output,
 			children: [
 				(capped ? lines.slice(0, headLines) : lines).map((line, index) => jsx("div", {
-					className: css$15.line,
+					className: css$17.line,
 					children: renderLine$1(line)
 				}, index)),
 				hidden > 0 && jsx("button", {
 					type: "button",
-					className: css$15.expand,
+					className: css$17.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$15.line,
+					className: css$17.line,
 					children: renderLine$1(line)
 				}, index))
 			]
@@ -4683,51 +5135,51 @@ function ReadBlock({ label, labels, lines, totalLines, lang, maxLines = 16, clas
 	const tailLines = maxLines - headLines;
 	const windowed = lines.length < totalLines;
 	const rows = (slice) => slice.map(([line, spans]) => jsxs("div", {
-		className: css$16.line,
+		className: css$18.line,
 		children: [jsx("span", {
-			className: css$16.gutter,
+			className: css$18.gutter,
 			"aria-hidden": true,
 			children: line.number
 		}), jsx("span", {
-			className: css$16.content,
+			className: css$18.content,
 			children: spans === void 0 ? line.text : renderSpans(spans)
 		})]
 	}, line.number));
 	const paired = lines.map((line, index) => [line, highlighted?.[index]]);
 	return jsxs("div", {
 		ref: rootRef,
-		className: clsx(css$16.block, className),
+		className: clsx(css$18.block, className),
 		"data-read": "",
 		children: [jsxs("div", {
-			className: css$16.banner,
+			className: css$18.banner,
 			children: [jsx("div", {
-				className: css$16.label,
+				className: css$18.label,
 				children: label ?? ""
 			}), jsxs("div", {
-				className: css$16.action,
+				className: css$18.action,
 				children: [
 					windowed && jsx("span", {
-						className: css$16.count,
+						className: css$18.count,
 						children: labels.window(lines.length, totalLines)
 					}),
 					jsx("span", {
-						className: css$16.lang,
+						className: css$18.lang,
 						children: lang ?? ""
 					}),
 					lines.length > 0 && jsx("button", {
 						type: "button",
-						className: css$16.copyButton,
+						className: css$18.copyButton,
 						onClick: onCopy,
 						children: copied ? labels.copied : labels.copy
 					})
 				]
 			})]
 		}), jsxs("div", {
-			className: css$16.body,
+			className: css$18.body,
 			children: [
 				rows(capped ? paired.slice(0, headLines) : paired),
 				hidden > 0 && jsx(FoldToggle, {
-					className: css$16.expand,
+					className: css$18.expand,
 					expanded,
 					hidden,
 					labels,
@@ -4749,10 +5201,10 @@ function assertNever(value) {
 }
 /** The dim class per row kind (path/gap chrome vs the diff's own +/- colors). */
 const ROW_CLASS = {
-	path: css$17.path,
-	del: css$17.del,
-	add: css$17.add,
-	gap: css$17.gap
+	path: css$19.path,
+	del: css$19.del,
+	add: css$19.add,
+	gap: css$19.gap
 };
 /**
 * Total added/removed line counts across hunks — the same numbers the footer
@@ -4876,37 +5328,37 @@ function DiffBlock({ diffs, labels, 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$17.block, className),
+		className: clsx(css$19.block, className),
 		"data-diff": "",
 		children: [
 			jsx("button", {
 				type: "button",
-				className: css$17.copyButton,
+				className: css$19.copyButton,
 				onClick: onCopy,
 				children: copied ? labels.copied : labels.copy
 			}),
 			jsxs("div", {
-				className: css$17.body,
+				className: css$19.body,
 				children: [
 					head.map((row, index) => jsx("div", {
-						className: clsx(css$17.line, ROW_CLASS[row.kind]),
+						className: clsx(css$19.line, ROW_CLASS[row.kind]),
 						children: row.text
 					}, index)),
 					hidden > 0 && jsx(FoldToggle, {
-						className: css$17.expand,
+						className: css$19.expand,
 						expanded,
 						hidden,
 						labels,
 						onToggle
 					}),
 					tail.map((row, index) => jsx("div", {
-						className: clsx(css$17.line, ROW_CLASS[row.kind]),
+						className: clsx(css$19.line, ROW_CLASS[row.kind]),
 						children: row.text
 					}, index))
 				]
 			}),
 			jsxs("div", {
-				className: css$17.footer,
+				className: css$19.footer,
 				children: [
 					"└ +",
 					added,
@@ -5042,56 +5494,56 @@ function SearchBlock(props) {
 	const tail = tailHeader === void 0 ? naturalTail : naturalTail.slice(1);
 	const renderRow = (row) => {
 		if (row.type === "path") return jsx("div", {
-			className: css$18.line,
+			className: css$20.line,
 			children: row.path
 		});
 		if (row.type === "match") return jsxs("div", {
-			className: css$18.line,
+			className: css$20.line,
 			children: [jsxs("span", {
-				className: css$18.lineNumber,
+				className: css$20.lineNumber,
 				children: [row.lineNumber, ": "]
 			}), row.line]
 		});
 		return jsxs("button", {
 			type: "button",
-			className: css$18.fileHeader,
+			className: css$20.fileHeader,
 			"aria-expanded": !row.collapsed,
 			onClick: () => {
 				toggleFile(row.index);
 			},
 			children: [jsx("span", {
-				className: css$18.filePath,
+				className: css$20.filePath,
 				children: row.path
 			}), jsx("span", {
-				className: css$18.fileCount,
+				className: css$20.fileCount,
 				children: row.count
 			})]
 		});
 	};
 	return jsxs("div", {
-		className: clsx(css$18.block, className),
+		className: clsx(css$20.block, className),
 		"data-search": props.kind,
 		children: [jsxs("div", {
-			className: css$18.header,
+			className: css$20.header,
 			children: [jsx("span", {
-				className: css$18.summary,
+				className: css$20.summary,
 				children: summaryText(props, shown, truncated, total)
 			}), !empty && jsx("button", {
 				type: "button",
-				className: css$18.copyButton,
+				className: css$20.copyButton,
 				onClick: onCopy,
 				children: copied ? props.labels.copied : props.labels.copy
 			})]
 		}), empty ? jsx("div", {
-			className: css$18.empty,
+			className: css$20.empty,
 			children: props.labels.noResults
 		}) : jsxs("div", {
-			className: css$18.body,
+			className: css$20.body,
 			children: [
 				head.map((row) => jsx("div", { children: renderRow(row) }, rowKey(row))),
 				hidden > 0 && jsx("button", {
 					type: "button",
-					className: css$18.expand,
+					className: css$20.expand,
 					"aria-expanded": expanded,
 					"aria-label": expanded ? props.labels.collapseAria : props.labels.expandAria(hidden),
 					onClick: onToggle,
@@ -5892,24 +6344,24 @@ function CodeBlock({ code, lang, streaming, className, copyLabel, copiedLabel })
 		});
 	}, [copied, trimmed]);
 	const body = streamedBody !== void 0 ? streamedBody : html === void 0 ? jsx("pre", {
-		className: css$19.plain,
+		className: css$21.plain,
 		children: jsx("code", { children: trimmed })
 	}) : jsx("div", { dangerouslySetInnerHTML: { __html: html } });
 	return jsxs("div", {
 		ref: rootRef,
-		className: clsx(css$19.block, "md-code-block", className),
+		className: clsx(css$21.block, "md-code-block", className),
 		children: [jsx("div", {
-			className: css$19.bannerWrap,
+			className: css$21.bannerWrap,
 			children: jsxs("div", {
-				className: css$19.banner,
+				className: css$21.banner,
 				children: [jsx("div", {
-					className: css$19.infostring,
+					className: css$21.infostring,
 					children: lang ?? ""
 				}), jsx("div", {
-					className: css$19.action,
+					className: css$21.action,
 					children: jsx("button", {
 						type: "button",
-						className: css$19.copyButton,
+						className: css$21.copyButton,
 						onClick: onCopy,
 						children: copied ? copiedLabel : copyLabel
 					})
@@ -6127,13 +6579,16 @@ function renderNode(node, key, context) {
 			const href = inlineCodeHttpUrl(value);
 			if (href !== void 0) return jsx("code", { children: renderSafeLink(href, [value], "link") }, key);
 			const mention = context.inLink === true ? void 0 : context.fileMentions?.resolve(value);
-			if (mention !== void 0) return jsx("code", { children: jsx("button", {
+			if (mention !== void 0) return jsx("code", { children: jsxs("button", {
 				type: "button",
-				className: css$20.fileMention,
+				className: css$22.fileMention,
 				title: mention.title,
 				"aria-label": mention.label,
 				onClick: mention.open,
-				children: value
+				children: [jsx(LinkIcon, {
+					kind: classifyLinkPath(value),
+					className: css$22.linkIcon
+				}), value]
 			}) }, key);
 			return jsx("code", { children: value }, key);
 		}
@@ -6147,7 +6602,7 @@ function renderNode(node, key, context) {
 		case "link": return renderAnchor(node.url, renderChildren(node.children, {
 			...context,
 			inLink: true
-		}), key);
+		}), key, !anchorWrapsOnlyImages(node.children));
 		case "linkReference": return renderLinkReference(node, key, context);
 		case "image": return renderImage(node.url, node.alt ?? "", key);
 		case "imageReference": return renderImageReference(node, key, context);
@@ -6224,7 +6679,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$20.tableScroll, wide ? "md-table-wide" : css$20.tableFill),
+		className: clsx(css$22.tableScroll, wide ? "md-table-wide" : css$22.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);
@@ -6242,22 +6697,33 @@ function renderTableRow(row, cellTag, align, key, context) {
 	}
 	return jsx("tr", { children: cells }, key);
 }
+/**
+* True when an anchor's markdown children are all images, so the anchor is a
+* clickable picture (badge, thumbnail): the leading URL glyph would dangle
+* beside the image instead of leading link text, so those anchors skip it.
+*/
+function anchorWrapsOnlyImages(children) {
+	return children.length > 0 && children.every((child) => child.type === "image" || child.type === "imageReference");
+}
 /** Anchor over an already-authored href: allowlisted or unwrapped, external links get the safe attributes. */
-function renderSafeLink(href, children, key) {
+function renderSafeLink(href, children, key, glyph = true) {
 	const safeHref = sanitizeUrl(href);
 	if (safeHref === "") return jsx(Fragment$1, { children }, key);
-	return jsx("a", {
+	return jsxs("a", {
 		href: safeHref,
 		...["http:", "https:"].includes(new URL(safeHref).protocol) ? {
 			target: "_blank",
 			rel: "noopener noreferrer"
 		} : {},
-		children
+		children: [glyph && jsx(LinkIcon, {
+			kind: "url",
+			className: css$22.linkIcon
+		}), children]
 	}, key);
 }
 /** Anchor over a parsed markdown destination, which hast normalized before the allowlist saw it. */
-function renderAnchor(url, children, key) {
-	return renderSafeLink(normalizeUri(url), children, key);
+function renderAnchor(url, children, key, glyph = true) {
+	return renderSafeLink(normalizeUri(url), children, key, glyph);
 }
 /**
 * The complete inline-code value when it is exactly an absolute HTTP(S) URL
@@ -6275,11 +6741,11 @@ function inlineCodeHttpUrl(value) {
 function renderImage(url, alt, key) {
 	const imageSrc = remoteImageUrl(sanitizeUrl(normalizeUri(url)));
 	if (imageSrc === void 0) return jsx("span", {
-		className: css$20.imageAlt,
+		className: css$22.imageAlt,
 		children: alt
 	}, key);
 	return jsx("img", {
-		className: css$20.image,
+		className: css$22.image,
 		src: imageSrc,
 		alt,
 		loading: "lazy",
@@ -6300,10 +6766,11 @@ function renderLinkReference(node, key, context) {
 		renderChildren(node.children, context),
 		referenceSuffix(node)
 	] }, key);
-	return renderAnchor(definition.url, renderChildren(node.children, {
+	const rendered = renderChildren(node.children, {
 		...context,
 		inLink: true
-	}), key);
+	});
+	return renderAnchor(definition.url, rendered, key, !anchorWrapsOnlyImages(node.children));
 }
 function renderImageReference(node, key, context) {
 	const definition = context.targets.definitions.get(node.identifier.toUpperCase());
@@ -6514,7 +6981,7 @@ const MarkdownText = memo(function MarkdownText({ text, streaming = false, label
 		fileMentions
 	]);
 	return jsx("div", {
-		className: css$20.markdown,
+		className: css$22.markdown,
 		children
 	});
 });
@@ -6570,12 +7037,15 @@ function SafeLink({ url, label, className }) {
 		className,
 		children: label
 	});
-	return jsx("a", {
+	return jsxs("a", {
 		className,
 		href,
 		target: "_blank",
 		rel: "noopener noreferrer",
-		children: label
+		children: [jsx(LinkIcon, {
+			kind: "url",
+			className: css$23.linkIcon
+		}), label]
 	});
 }
 /**
@@ -6589,20 +7059,20 @@ function SafeLink({ url, label, className }) {
 */
 function SourceItem({ source, ordinal }) {
 	return jsxs("li", {
-		className: css$21.source,
+		className: css$23.source,
 		value: ordinal,
 		children: [
 			jsx(SafeLink, {
 				url: source.url,
 				label: linkLabel(source.url, source.title),
-				className: css$21.sourceLink
+				className: css$23.sourceLink
 			}),
 			source.snippet !== void 0 && source.snippet !== "" && jsx("div", {
-				className: css$21.snippet,
+				className: css$23.snippet,
 				children: source.snippet
 			}),
 			source.publishedAt !== void 0 && source.publishedAt !== "" && jsx("div", {
-				className: css$21.published,
+				className: css$23.published,
 				children: source.publishedAt
 			})
 		]
@@ -6617,28 +7087,28 @@ function SourceItem({ source, ordinal }) {
 function WebSearchBlock({ answer, sources, truncated, labels, className }) {
 	const empty = (answer === void 0 || answer === "") && sources.length === 0;
 	return jsxs("div", {
-		className: clsx(css$21.block, className),
+		className: clsx(css$23.block, className),
 		"data-web": "search",
 		children: [
 			answer !== void 0 && answer !== "" && jsx("div", {
-				className: css$21.answer,
+				className: css$23.answer,
 				children: jsx(MarkdownText, {
 					text: answer,
 					labels: labels.markdown
 				})
 			}),
 			empty ? jsx("div", {
-				className: css$21.empty,
+				className: css$23.empty,
 				children: labels.noResults
 			}) : jsx("ol", {
-				className: css$21.sources,
+				className: css$23.sources,
 				children: sources.map((source, index) => jsx(SourceItem, {
 					source,
 					ordinal: index + 1
 				}, index))
 			}),
 			truncated && jsx("div", {
-				className: css$21.truncated,
+				className: css$23.truncated,
 				children: labels.sourcesTruncated
 			})
 		]
@@ -6651,23 +7121,23 @@ function WebSearchBlock({ answer, sources, truncated, labels, className }) {
 */
 function WebFetchBlock({ url, statusCode, truncated, labels, className }) {
 	return jsxs("div", {
-		className: clsx(css$21.block, css$21.fetch, className),
+		className: clsx(css$23.block, css$23.fetch, className),
 		"data-web": "fetch",
 		children: [jsx(SafeLink, {
 			url,
 			label: url,
-			className: css$21.fetchUrl
+			className: css$23.fetchUrl
 		}), jsxs("div", {
-			className: css$21.fetchMeta,
+			className: css$23.fetchMeta,
 			children: [jsxs("span", {
-				className: css$21.status,
+				className: css$23.status,
 				children: [
 					labels.http,
 					" ",
 					statusCode
 				]
 			}), truncated && jsx("span", {
-				className: css$21.truncated,
+				className: css$23.truncated,
 				children: labels.contentTruncated
 			})]
 		})]
@@ -6701,10 +7171,10 @@ function JsonBlock({ label, payload, defaultOpen = false, truncatedLabel }) {
 		truncatedLabel
 	]);
 	return jsxs("div", {
-		className: css$22.root,
+		className: css$24.root,
 		children: [jsxs("button", {
 			type: "button",
-			className: css$22.toggle,
+			className: css$24.toggle,
 			onClick: () => {
 				setOpen((v) => !v);
 			},
@@ -6714,20 +7184,12 @@ function JsonBlock({ label, payload, defaultOpen = false, truncatedLabel }) {
 				label
 			]
 		}), open && jsx("pre", {
-			className: css$22.body,
+			className: css$24.body,
 			children: body
 		})]
 	});
 }
 //#endregion
-//#region lib/types/markdown/MessageText.js
-function MessageText({ text }) {
-	return jsx("div", {
-		className: css$23.text,
-		children: text
-	});
-}
-//#endregion
 //#region lib/types/markdown/plain-text.js
 /**
 * Markdown-to-plain-text projection for compact summaries and labels.
@@ -6799,6 +7261,6 @@ function extractMarkdownPlainText(markdown, options = {}) {
 	}
 }
 //#endregion
-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 };
+export { BrandWordmark, Button, CodeBlock, ConnectionIndicator, DEFAULT_DIFF_MAX_LINES, DEFAULT_READ_MAX_LINES, DEFAULT_SEARCH_MAX_LINES, DEFAULT_TERMINAL_MAX_LINES, DiffBlock, DisclosureRow, DocumentFileIcon, 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, LinkIcon, MarkdownText, Menu, Modal, OnboardingSurface, Pill, ReadBlock, ReferenceIcon, RiskConfirmation, SearchBlock, StateDot, Switch, Tag, TerminalBlock, Toast, Tooltip, WebBlock, classifyLinkPath, diffTotals, extractMarkdownPlainText, fileSizeText, projectUserText, rankByName, relativeTime, useAnchoredMaxHeight, useAnchoredPosition, useDismissOnOutsidePointer, writeClipboard };
 
 //# sourceMappingURL=index.js.map