@coffer-org/plugin-webchat 7.1.0 → 7.2.0

package/dist/{ChatWidget-BhGpxS9f.js → ChatWidget-BIPLpTMp.js}

@@ -1,6 +1,6 @@
 import * as __fedReact from "react";
-import { Dialog, DialogContent, Icon, MarkdownView, toneVar, uploadFile, useMinWidth } from "@coffer-org/web-ui";
-import { createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Dialog, DialogContent, Icon, MarkdownView, fileSizeLabel, uploadFile, useMinWidth } from "@coffer-org/web-ui";
+import { createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region \0rolldown/runtime.js
@@ -496,14 +496,9 @@ var ChevronDown = createLucideIcon("chevron-down", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-var Clock = createLucideIcon("clock", [["circle", {
-	cx: "12",
-	cy: "12",
-	r: "10",
-	key: "1mglay"
-}], ["path", {
-	d: "M12 6v6l4 2",
-	key: "mmk7yg"
+var ChevronRight = createLucideIcon("chevron-right", [["path", {
+	d: "m9 18 6-6-6-6",
+	key: "mthhwq"
 }]]);
 /**
 * @license lucide-react v1.24.0 - ISC
@@ -511,6 +506,162 @@ var Clock = createLucideIcon("clock", [["circle", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var FileArchive = createLucideIcon("file-archive", [
+	["path", {
+		d: "M13.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v11.5",
+		key: "4pqfef"
+	}],
+	["path", {
+		d: "M14 2v5a1 1 0 0 0 1 1h5",
+		key: "wfsgrz"
+	}],
+	["path", {
+		d: "M8 12v-1",
+		key: "1ej8lb"
+	}],
+	["path", {
+		d: "M8 18v-2",
+		key: "qcmpov"
+	}],
+	["path", {
+		d: "M8 7V6",
+		key: "1nbb54"
+	}],
+	["circle", {
+		cx: "8",
+		cy: "20",
+		r: "2",
+		key: "ckkr5m"
+	}]
+]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var FileCode = createLucideIcon("file-code", [
+	["path", {
+		d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+		key: "1oefj6"
+	}],
+	["path", {
+		d: "M14 2v5a1 1 0 0 0 1 1h5",
+		key: "wfsgrz"
+	}],
+	["path", {
+		d: "M10 12.5 8 15l2 2.5",
+		key: "1tg20x"
+	}],
+	["path", {
+		d: "m14 12.5 2 2.5-2 2.5",
+		key: "yinavb"
+	}]
+]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var FileHeadphone = createLucideIcon("file-headphone", [
+	["path", {
+		d: "M4 6.835V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-.343",
+		key: "1vfytu"
+	}],
+	["path", {
+		d: "M14 2v5a1 1 0 0 0 1 1h5",
+		key: "wfsgrz"
+	}],
+	["path", {
+		d: "M2 19a2 2 0 0 1 4 0v1a2 2 0 0 1-4 0v-4a6 6 0 0 1 12 0v4a2 2 0 0 1-4 0v-1a2 2 0 0 1 4 0",
+		key: "1etmh7"
+	}]
+]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var FileImage = createLucideIcon("file-image", [
+	["path", {
+		d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+		key: "1oefj6"
+	}],
+	["path", {
+		d: "M14 2v5a1 1 0 0 0 1 1h5",
+		key: "wfsgrz"
+	}],
+	["circle", {
+		cx: "10",
+		cy: "12",
+		r: "2",
+		key: "737tya"
+	}],
+	["path", {
+		d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22",
+		key: "wt3hpn"
+	}]
+]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var FilePlay = createLucideIcon("file-play", [
+	["path", {
+		d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+		key: "1oefj6"
+	}],
+	["path", {
+		d: "M14 2v5a1 1 0 0 0 1 1h5",
+		key: "wfsgrz"
+	}],
+	["path", {
+		d: "M15.033 13.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56v-4.704a.645.645 0 0 1 .967-.56z",
+		key: "1tzo1f"
+	}]
+]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var FileSpreadsheet = createLucideIcon("file-spreadsheet", [
+	["path", {
+		d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+		key: "1oefj6"
+	}],
+	["path", {
+		d: "M14 2v5a1 1 0 0 0 1 1h5",
+		key: "wfsgrz"
+	}],
+	["path", {
+		d: "M8 13h2",
+		key: "yr2amv"
+	}],
+	["path", {
+		d: "M14 13h2",
+		key: "un5t4a"
+	}],
+	["path", {
+		d: "M8 17h2",
+		key: "2yhykz"
+	}],
+	["path", {
+		d: "M14 17h2",
+		key: "10kma7"
+	}]
+]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var FileText = createLucideIcon("file-text", [
 	["path", {
 		d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
@@ -615,6 +766,19 @@ var MessageCircle = createLucideIcon("message-circle", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var MessagesSquare = createLucideIcon("messages-square", [["path", {
+	d: "M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z",
+	key: "1n2ejm"
+}], ["path", {
+	d: "M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1",
+	key: "1qfcsi"
+}]]);
+/**
+* @license lucide-react v1.24.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Minimize2 = createLucideIcon("minimize-2", [
 	["path", {
 		d: "m14 10 7-7",
@@ -702,16 +866,6 @@ var Square = createLucideIcon("square", [["rect", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-var Star = createLucideIcon("star", [["path", {
-	d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z",
-	key: "r04s7s"
-}]]);
-/**
-* @license lucide-react v1.24.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
 var Upload = createLucideIcon("upload", [
 	["path", {
 		d: "M12 3v12",
@@ -1376,6 +1530,149 @@ function ChatMarkdown({ text, className }) {
 	});
 }
 //#endregion
+//#region src/ui/ChatAttachments.tsx
+/**
+* The ONE presentation of a chat attachment — the files staged in the composer and the files a
+* sent turn carries are drawn by this component, so the two cannot drift apart.
+*
+* Three decisions are worth stating, because each replaces something that was there before:
+*
+*  - **A file is a ROW, not a word.** The bubble used to print `a.label ?? a.name` as bare text
+*    in a wrapping flex, which for eight uploads meant eight lines of 40-character storage names
+*    running to the bubble's edge and clipping mid-name. A row states the three facts a file has
+*    — what kind it is, what it is called, how big it is — and states them in the same places
+*    every time, which is what makes a stack of them scannable.
+*  - **The name breaks in the MIDDLE, not at the end.** The extension is the most informative
+*    part of a long filename and the part a tail-truncation always eats. The stem takes the
+*    truncation (`truncate`), the extension is pinned beside it (`shrink-0`), so `…_2026.pdf`
+*    keeps saying `.pdf` at any width. CSS does this, not a character budget — the same row
+*    works in a 380px panel and in the 1040px modal without measuring anything.
+*  - **Past two files the group COLLAPSES.** A turn carrying eight PDFs is a turn whose text a
+*    reader still has to reach; the attachments are its luggage, not its content. Two rows say
+*    what was sent, `+N` says how much more there is, and one click shows the rest.
+*
+* The rows are inert on purpose: an attachment names itself and does nothing else. Opening one
+* would be a second file-viewing surface beside the record page's, and the chat is not where a
+* file is read (decided 2026-09-15).
+*/
+/** How many rows stand before the rest fold away. Two is what a bubble can carry without the
+*  luggage outweighing the message — see the component's note. */
+var COLLAPSE_AFTER = 2;
+/** Extension families, in the order a name is tested against them. */
+var BY_EXT = [
+	[/\.(png|jpe?g|gif|webp|avif|svg|bmp|heic|heif)$/i, FileImage],
+	[/\.(mp3|wav|ogg|oga|flac|m4a|aac|opus)$/i, FileHeadphone],
+	[/\.(mp4|mov|mkv|webm|avi|m4v)$/i, FilePlay],
+	[/\.(zip|rar|7z|tar|gz|tgz|bz2|xz)$/i, FileArchive],
+	[/\.(csv|tsv|xlsx?|ods|numbers)$/i, FileSpreadsheet],
+	[/\.(json|xml|ya?ml|toml|ini|js|jsx|ts|tsx|css|html?|sh|py|sql)$/i, FileCode]
+];
+/**
+* What KIND of file this is, at a glance. The mime type is the server's answer and is trusted
+* first; an upload that arrives with none (or with the `application/octet-stream` a browser
+* falls back to) is read from its extension instead, which is the only fact left.
+*/
+function attachmentIcon(a) {
+	const mime = a.mime?.toLowerCase().split(";", 1)[0] ?? "";
+	if (mime.startsWith("image/")) return FileImage;
+	if (mime.startsWith("audio/")) return FileHeadphone;
+	if (mime.startsWith("video/")) return FilePlay;
+	if (mime === "text/csv" || mime.includes("spreadsheet") || mime.includes("excel")) return FileSpreadsheet;
+	if (mime === "application/json" || mime === "application/xml" || mime.startsWith("text/x")) return FileCode;
+	if (mime === "application/zip" || mime.includes("compressed") || mime.includes("tar")) return FileArchive;
+	const name = a.label ?? a.name;
+	for (const [re, icon] of BY_EXT) if (re.test(name)) return icon;
+	return FileText;
+}
+/**
+* Split a filename into the part that may be truncated and the part that may not. A leading dot
+* (`.gitignore`) is not an extension, and neither is a "dot" eleven characters from the end of a
+* sentence-like name — an extension is short, so anything longer is left in the stem where the
+* truncation can reach it.
+*/
+function splitFileName(name) {
+	const dot = name.lastIndexOf(".");
+	if (dot <= 0 || name.length - dot > 11) return {
+		stem: name,
+		ext: ""
+	};
+	return {
+		stem: name.slice(0, dot),
+		ext: name.slice(dot)
+	};
+}
+function AttachmentRow({ a, onRemove }) {
+	const { t } = useTranslation();
+	const name = a.label ?? a.name;
+	const { stem, ext } = splitFileName(name);
+	const size = fileSizeLabel(a.size);
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex min-w-0 items-center gap-2 rounded-[calc(var(--radius-md)+1px)] border border-border bg-background py-1 pr-1.5 pl-2",
+		children: [
+			/* @__PURE__ */ jsx(attachmentIcon(a), {
+				size: 14,
+				"aria-hidden": true,
+				className: "shrink-0 text-muted-foreground"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-1 text-xs",
+				title: name,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: stem
+				}), ext && /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-muted-foreground",
+					children: ext
+				})]
+			}),
+			size && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-[0.6875rem] tabular-nums text-muted-foreground",
+				children: size
+			}),
+			onRemove && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t("webchat.removeAttachment", { name }),
+				title: t("webchat.removeAttachment", { name }),
+				className: "shrink-0 rounded p-0.5 text-muted-foreground hover:text-destructive focus-visible:outline-2 focus-visible:outline-ring",
+				onClick: onRemove,
+				children: /* @__PURE__ */ jsx(X, { size: 13 })
+			})
+		]
+	});
+}
+function ChatAttachments({ items, onRemove, className = "" }) {
+	const { t } = useTranslation();
+	const [expanded, setExpanded] = useState(false);
+	const listId = useId();
+	if (!items.length) return null;
+	const hidden = expanded ? 0 : Math.max(0, items.length - COLLAPSE_AFTER);
+	const shown = hidden ? items.slice(0, COLLAPSE_AFTER) : items;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col gap-1 ${className}`,
+		"data-chat-attachments": true,
+		children: [/* @__PURE__ */ jsx("ul", {
+			id: listId,
+			"aria-label": t("webchat.attachments"),
+			className: "flex flex-col gap-1",
+			children: shown.map((a, i) => /* @__PURE__ */ jsx(AttachmentRow, {
+				a,
+				...onRemove ? { onRemove: () => onRemove(i) } : {}
+			}, `${a.name}-${i}`))
+		}), items.length > COLLAPSE_AFTER && /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": expanded,
+			"aria-controls": listId,
+			className: "inline-flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring",
+			onClick: () => setExpanded((v) => !v),
+			children: [/* @__PURE__ */ jsx(ChevronDown, {
+				size: 12,
+				"aria-hidden": true,
+				className: expanded ? "rotate-180 transition-transform" : "transition-transform"
+			}), expanded ? t("webchat.fewerFiles") : t("webchat.moreFiles", { count: hidden })]
+		})]
+	});
+}
+//#endregion
 //#region src/ui/ChatMessages.tsx
 function ChatMessages({ messages, pending, pendingReasoning, trailing }) {
 	const { t } = useTranslation();
@@ -1389,8 +1686,15 @@ function ChatMessages({ messages, pending, pendingReasoning, trailing }) {
 		"data-chat-list": true,
 		className: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-2",
 		children: [!messages.length && pending === null && pendingReasoning === null ? /* @__PURE__ */ jsx("div", {
-			className: "flex-1 grid place-items-center text-muted-foreground text-sm",
-			children: t("webchat.empty")
+			className: "grid flex-1 place-items-center px-6 text-center text-sm text-muted-foreground",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "flex flex-col items-center gap-2",
+				children: [/* @__PURE__ */ jsx(MessagesSquare, {
+					size: 28,
+					"aria-hidden": true,
+					className: "text-faint"
+				}), t("webchat.empty")]
+			})
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [messages.map((m) => /* @__PURE__ */ jsx(Bubble, {
 			role: m.role,
 			text: m.text,
@@ -1412,23 +1716,23 @@ function ChatMessages({ messages, pending, pendingReasoning, trailing }) {
 var Bubble = memo(function Bubble({ role, text, reasoning, attachments }) {
 	const { t } = useTranslation();
 	if (role === "user") return /* @__PURE__ */ jsxs("div", {
-		className: "self-end max-w-[85%] rounded-2xl border border-ring bg-muted px-3 py-2 text-[0.8125rem] whitespace-pre-wrap break-words",
-		children: [attachments?.length ? /* @__PURE__ */ jsx("div", {
-			className: "mb-1.5 flex flex-wrap gap-1",
-			children: attachments.map((a) => /* @__PURE__ */ jsx("span", {
-				className: "inline-flex max-w-full items-center rounded-md bg-background px-1.5 py-0.5 text-xs",
-				title: a.name,
-				children: a.label ?? a.name
-			}, a.name))
+		className: "max-w-[85%] min-w-0 self-end rounded-2xl rounded-br-sm border border-border bg-accent px-3 py-2 text-[0.8125rem] break-words whitespace-pre-wrap",
+		children: [attachments?.length ? /* @__PURE__ */ jsx(ChatAttachments, {
+			items: attachments,
+			className: `-mx-1 ${text ? "mb-2" : ""}`
 		}) : null, text]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "self-start max-w-[95%] min-w-0 rounded-2xl bg-muted px-3 py-2 text-sm break-words",
+		className: "max-w-[95%] min-w-0 self-start rounded-2xl rounded-bl-sm bg-muted px-3 py-2 text-sm break-words",
 		children: [reasoning ? /* @__PURE__ */ jsxs("details", {
-			className: "mb-2 rounded-lg border border-border px-2 py-1",
-			children: [/* @__PURE__ */ jsx("summary", {
-				className: "cursor-pointer select-none text-xs text-muted-foreground",
-				children: t("webchat.reasoning")
+			className: "group/reason -mx-1 mb-2 rounded-[calc(var(--radius-md)+1px)] border border-border bg-background px-2 py-1",
+			children: [/* @__PURE__ */ jsxs("summary", {
+				className: "flex cursor-pointer list-none items-center gap-1 select-none text-xs text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden",
+				children: [/* @__PURE__ */ jsx(ChevronRight, {
+					size: 12,
+					"aria-hidden": true,
+					className: "shrink-0 transition-transform group-open/reason:rotate-90"
+				}), t("webchat.reasoning")]
 			}), /* @__PURE__ */ jsx(ChatMarkdown, {
 				text: reasoning,
 				className: "md-static md-chat md-chat-sub mt-1 text-muted-foreground"
@@ -1441,81 +1745,23 @@ var Bubble = memo(function Bubble({ role, text, reasoning, attachments }) {
 });
 //#endregion
 //#region src/ui/AgentPicker.tsx
-var MAX_STARS = 5;
-/** Rating pair: "3 star, 3 clock". Two digits read at a glance and stay the same
-*  width on every row, which a free-text hint ("fastest and cheapest" next to
-*  "quick") does not. Both are read the same way — the star is what you get, the
-*  clock is what it costs you in waiting — so a heavier model raises both numbers.
-*  Falls back to the hint when the agent publishes no ratings. */
-function PresetRating({ quality, time, hint }) {
-	const { t } = useTranslation();
-	if (quality === void 0 || time === void 0) return hint ? /* @__PURE__ */ jsx("span", {
-		className: "shrink-0 text-muted-foreground",
-		children: hint
-	}) : null;
-	const both = quality !== time;
-	return /* @__PURE__ */ jsxs("span", {
-		className: "flex shrink-0 items-center gap-1.5 text-muted-foreground tabular-nums",
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: "flex items-center gap-0.5",
-			title: t("webchat.quality", { value: quality }),
-			children: [
-				quality,
-				/* @__PURE__ */ jsx(Star, {
-					size: 11,
-					"aria-hidden": true,
-					className: "shrink-0"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sr-only",
-					children: t("webchat.quality", { value: quality })
-				})
-			]
-		}), both ? /* @__PURE__ */ jsxs("span", {
-			className: "flex items-center gap-0.5",
-			title: t("webchat.time", { value: time }),
-			children: [
-				time,
-				/* @__PURE__ */ jsx(Clock, {
-					size: 11,
-					"aria-hidden": true,
-					className: "shrink-0"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sr-only",
-					children: t("webchat.time", { value: time })
-				})
-			]
-		}) : /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: t("webchat.time", { value: time })
-		})]
-	});
-}
 /**
-* The presets of ONE agent, ordered by their level, when they form a complete ladder:
-* a unique `quality` per preset, contiguous from 1, at most five rungs. Only then does a
-* star count address a preset without ambiguity, and only then may the picker stop
-* printing model names. Anything else — two agents, a gap in the ladder, a preset with
-* no rating — returns null and the picker keeps its list of names.
+* Flatten the catalog to one list: with a single registered agent the agent level is
+* noise, and with several the agent name simply prefixes its presets.
+*
+* ONE mode, a list of names. Until 2026-09-16 there was a second — a row of stars in the
+* composer, where a preset's `quality` rating addressed it by rung and the model name was
+* never printed. It is gone, with the ratings it read. A star count can only address a
+* preset when the presets form a single totally ordered line, and `claude-agent`'s do
+* not: nothing published ranks `sonnet-high` against `opus-low`, and the cheaper of the
+* two is not the weaker one. The list that used to be the FALLBACK — for several agents,
+* a gap in the ladder, a preset with no rating — was always the honest control, and is
+* now the only one. See
+* `docs/superpowers/specs/2026-09-16-agent-preset-is-a-model-choice-design.md`.
 */
-function starLadder(rows, multi) {
-	if (multi || rows.length < 2 || rows.length > MAX_STARS) return null;
-	const byLevel = Array.from({ length: rows.length });
-	for (const r of rows) {
-		const q = r.quality;
-		if (q === void 0 || !Number.isInteger(q) || q < 1 || q > rows.length) return null;
-		if (byLevel[q - 1]) return null;
-		byLevel[q - 1] = r;
-	}
-	return byLevel.every((r) => r !== void 0) ? byLevel : null;
-}
-/** Flatten the catalog to one list: with a single registered agent the agent
-*  level is noise, and with several the agent name simply prefixes its presets. */
 function AgentPicker({ agents, defaultAgentId, selection, onChange }) {
 	const { t } = useTranslation();
 	const [open, setOpen] = useState(false);
-	const [preview, setPreview] = useState(null);
 	const rootRef = useRef(null);
 	const triggerRef = useRef(null);
 	useEffect(() => {
@@ -1542,48 +1788,10 @@ function AgentPicker({ agents, defaultAgentId, selection, onChange }) {
 		presetId: p.id,
 		label: multi ? `${a.title} · ${p.title}` : p.title,
 		hint: p.hint,
-		quality: p.quality,
-		time: p.time,
 		isDefault: p.default === true
 	})));
 	if (rows.length === 0) return null;
 	const current = rows.find((r) => r.agentId === selection.agentId && r.presetId === selection.presetId) ?? rows.find((r) => r.agentId === defaultAgentId && r.isDefault) ?? rows.find((r) => r.isDefault) ?? rows[0];
-	const ladder = starLadder(rows, multi);
-	if (ladder) {
-		const level = ladder.indexOf(current) + 1;
-		const shown = preview ?? level;
-		const levelName = (row, n) => `${row.label} · ${t("webchat.level", {
-			value: n,
-			max: ladder.length
-		})}`;
-		return /* @__PURE__ */ jsx("ul", {
-			"aria-label": t("webchat.agentPicker"),
-			className: "flex shrink-0 items-center",
-			onPointerLeave: () => setPreview(null),
-			children: ladder.map((r, i) => {
-				const n = i + 1;
-				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					...r === current ? { "aria-current": true } : {},
-					"aria-label": levelName(r, n),
-					className: "flex rounded p-1 focus-visible:outline-2 focus-visible:outline-ring",
-					onPointerEnter: () => setPreview(n),
-					onFocus: () => setPreview(n),
-					onBlur: () => setPreview(null),
-					onClick: () => onChange({
-						agentId: r.agentId,
-						presetId: r.presetId
-					}),
-					children: /* @__PURE__ */ jsx(Star, {
-						size: 16,
-						"aria-hidden": true,
-						className: n <= shown ? "fill-current" : "text-border",
-						style: n <= shown ? { color: toneVar("yellow") } : void 0
-					})
-				}) }, `${r.agentId}/${r.presetId}`);
-			})
-		});
-	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
 		ref: rootRef,
@@ -1596,7 +1804,7 @@ function AgentPicker({ agents, defaultAgentId, selection, onChange }) {
 			onClick: () => setOpen((v) => !v),
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "max-w-40 truncate",
-				children: current.label
+				children: current.hint ? `${current.label} · ${current.hint}` : current.label
 			}), /* @__PURE__ */ jsx(ChevronDown, {
 				size: 12,
 				className: "shrink-0"
@@ -1626,11 +1834,10 @@ function AgentPicker({ agents, defaultAgentId, selection, onChange }) {
 							className: "min-w-0 flex-1 truncate",
 							children: r.label
 						}),
-						/* @__PURE__ */ jsx(PresetRating, {
-							quality: r.quality,
-							time: r.time,
-							hint: r.hint
-						})
+						r.hint ? /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-muted-foreground",
+							children: r.hint
+						}) : null
 					]
 				}) }, `${r.agentId}/${r.presetId}`);
 			})
@@ -1649,29 +1856,12 @@ function ChatComposer({ streaming, onSend, onStop, attachments, uploading, uploa
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex shrink-0 flex-col gap-2 border-t border-border p-2",
 		children: [(attachments.length > 0 || uploading || uploadError) && /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-1.5 px-1",
-			"data-chat-attachments": true,
+			className: "flex flex-col gap-1.5 px-1",
 			children: [
-				attachments.map((a, i) => /* @__PURE__ */ jsxs("span", {
-					className: "inline-flex min-w-0 max-w-full items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs",
-					children: [
-						/* @__PURE__ */ jsx(FileText, {
-							size: 13,
-							className: "shrink-0 text-muted-foreground"
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "max-w-48 truncate",
-							children: a.label ?? a.name
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-label": t("webchat.removeAttachment", { name: a.label ?? a.name }),
-							className: "shrink-0 rounded p-0.5 text-muted-foreground hover:text-destructive",
-							onClick: () => onRemoveAttachment(i),
-							children: /* @__PURE__ */ jsx(X, { size: 13 })
-						})
-					]
-				}, `${a.name}-${i}`)),
+				/* @__PURE__ */ jsx(ChatAttachments, {
+					items: attachments,
+					onRemove: onRemoveAttachment
+				}),
 				uploading && /* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-32 flex-1 items-center gap-2",
 					"aria-label": t("webchat.uploading"),
@@ -1705,7 +1895,7 @@ function ChatComposer({ streaming, onSend, onStop, attachments, uploading, uploa
 						children: t(uploadError)
 					}), canRetryUpload && /* @__PURE__ */ jsxs("button", {
 						type: "button",
-						className: "inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 font-medium text-primary hover:bg-muted",
+						className: "inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 font-medium text-primary hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring",
 						onClick: onRetryUpload,
 						children: [
 							/* @__PURE__ */ jsx(RotateCcw, { size: 12 }),
@@ -1718,7 +1908,7 @@ function ChatComposer({ streaming, onSend, onStop, attachments, uploading, uploa
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-1",
 			children: [/* @__PURE__ */ jsx("textarea", {
-				className: "w-full resize-none rounded-lg border border-border bg-background px-3 py-2 text-sm max-h-32",
+				className: "max-h-32 w-full resize-none rounded-lg border border-border bg-background px-3 py-2 text-sm transition-colors outline-none placeholder:text-faint focus:border-ring focus:ring-2 focus:ring-ring",
 				rows: 1,
 				value: text,
 				placeholder: t("webchat.placeholder"),
@@ -1733,12 +1923,16 @@ function ChatComposer({ streaming, onSend, onStop, attachments, uploading, uploa
 				className: "flex items-center gap-1",
 				children: [
 					attachmentsAllowed && /* @__PURE__ */ jsxs("label", {
-						"aria-label": t("webchat.attach"),
-						className: `shrink-0 cursor-pointer rounded-lg p-1.5 text-muted-foreground hover:bg-muted hover:text-primary ${uploading ? "pointer-events-none opacity-60" : ""}`,
-						children: [/* @__PURE__ */ jsx(Paperclip, { size: 18 }), /* @__PURE__ */ jsx("input", {
+						title: t("webchat.attach"),
+						className: `flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-within:ring-2 focus-within:ring-ring ${uploading ? "pointer-events-none opacity-60" : ""}`,
+						children: [/* @__PURE__ */ jsx(Paperclip, {
+							size: 18,
+							"aria-hidden": true
+						}), /* @__PURE__ */ jsx("input", {
 							type: "file",
 							multiple: true,
-							className: "hidden",
+							"aria-label": t("webchat.attach"),
+							className: "sr-only",
 							disabled: uploading,
 							onChange: (e) => {
 								if (e.target.files?.length) onPickFiles(e.target.files);
@@ -1753,14 +1947,23 @@ function ChatComposer({ streaming, onSend, onStop, attachments, uploading, uploa
 						onChange: onChooseAgent
 					}),
 					/* @__PURE__ */ jsx("div", { className: "flex-1" }),
-					streaming ? /* @__PURE__ */ jsx("button", {
+					streaming ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "iconSm",
 						"aria-label": t("webchat.stop"),
-						className: "shrink-0 rounded-lg p-1.5 hover:bg-muted",
+						title: t("webchat.stop"),
+						className: "shrink-0",
 						onClick: onStop,
 						children: /* @__PURE__ */ jsx(Square, { size: 18 })
-					}) : /* @__PURE__ */ jsx("button", {
+					}) : /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "iconSm",
 						"aria-label": t("webchat.send"),
-						className: "shrink-0 rounded-lg p-1.5 hover:bg-muted",
+						title: t("webchat.send"),
+						disabled: !text.trim(),
+						className: "shrink-0 hover:text-primary",
 						onClick: submit,
 						children: /* @__PURE__ */ jsx(Send, { size: 18 })
 					})
@@ -1775,12 +1978,15 @@ function ChatThreadList({ threads, activeId, onOpen, onNew, onTogglePrivate, cla
 	const { t } = useTranslation();
 	return /* @__PURE__ */ jsxs("aside", {
 		"aria-label": t("webchat.threads"),
-		className: `${className} border-r border-border flex flex-col`,
+		className: `${className} flex flex-col border-r border-border`,
 		children: [/* @__PURE__ */ jsxs("button", {
-			className: "flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted",
+			className: "flex items-center gap-2 border-b border-border px-3 py-2 text-sm font-medium text-primary hover:bg-muted focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
 			onClick: onNew,
 			children: [
-				/* @__PURE__ */ jsx(Plus, { size: 16 }),
+				/* @__PURE__ */ jsx(Plus, {
+					size: 16,
+					"aria-hidden": true
+				}),
 				" ",
 				t("webchat.newConversation")
 			]
@@ -1789,10 +1995,10 @@ function ChatThreadList({ threads, activeId, onOpen, onNew, onTogglePrivate, cla
 			children: threads.map((th) => {
 				const active = th.convId === activeId;
 				return /* @__PURE__ */ jsxs("div", {
-					className: `flex items-center gap-1 pl-1 pr-2 ${active ? "bg-muted" : "hover:bg-muted"}`,
+					className: `flex items-center gap-1 border-l-2 pr-2 pl-1 ${active ? "border-ring bg-accent" : "border-transparent hover:bg-muted"}`,
 					children: [/* @__PURE__ */ jsxs("button", {
 						onClick: () => onOpen(th.convId),
-						className: `min-w-0 flex-1 py-2 pl-2 text-left text-sm ${active ? "font-medium" : ""}`,
+						className: `min-w-0 flex-1 rounded-sm py-2 pl-2 text-left text-sm focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring ${active ? "font-medium" : ""}`,
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "block truncate",
 							children: th.title || t("webchat.newConversation")
@@ -2047,36 +2253,49 @@ function ChatWidget() {
 	const hasConversation = chat.messages.length > 0 || chat.pending !== null;
 	const activeTitle = chat.threads.find((th) => th.convId === chat.convId)?.title;
 	const header = /* @__PURE__ */ jsxs("div", {
-		className: "flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-2",
+		className: "flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-1.5",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "min-w-0 truncate text-sm font-medium",
 			children: activeTitle || t("webchat.title")
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex shrink-0 items-center gap-1",
+			className: "-mr-1 flex shrink-0 items-center gap-0.5",
 			children: [
-				!hasSidebar && /* @__PURE__ */ jsx("button", {
+				hasConversation && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "iconSm",
+					"aria-label": t("webchat.newConversation"),
+					title: t("webchat.newConversation"),
+					onClick: startNew,
+					children: /* @__PURE__ */ jsx(Plus, { size: 16 })
+				}),
+				!hasSidebar && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "iconSm",
 					"aria-label": t("webchat.threads"),
+					title: t("webchat.threads"),
 					"aria-expanded": threadsOpen,
-					className: "rounded p-1 hover:bg-muted",
+					className: threadsOpen ? "bg-muted text-foreground" : "",
 					onClick: () => setThreadsOpen((v) => !v),
 					children: /* @__PURE__ */ jsx(List, { size: 16 })
 				}),
-				hasConversation && /* @__PURE__ */ jsx("button", {
-					"aria-label": t("webchat.newConversation"),
-					className: "rounded p-1 hover:bg-muted",
-					onClick: startNew,
-					children: /* @__PURE__ */ jsx(Plus, { size: 16 })
-				}),
-				chatModes(wide).includes("panel") && /* @__PURE__ */ jsx("button", {
+				chatModes(wide).includes("panel") && /* @__PURE__ */ jsx(Button, {
 					ref: expandBtnRef,
+					type: "button",
+					variant: "ghost",
+					size: "iconSm",
 					"aria-label": mode === "modal" ? t("webchat.collapse") : t("webchat.expand"),
-					className: "rounded p-1 hover:bg-muted",
+					title: mode === "modal" ? t("webchat.collapse") : t("webchat.expand"),
 					onClick: () => setMode(stepMode(mode, wide, mode === "modal" ? -1 : 1)),
 					children: mode === "modal" ? /* @__PURE__ */ jsx(Minimize2, { size: 16 }) : /* @__PURE__ */ jsx(Maximize2, { size: 16 })
 				}),
-				/* @__PURE__ */ jsx("button", {
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "iconSm",
 					"aria-label": t("webchat.close"),
-					className: "rounded p-1 hover:bg-muted",
+					title: t("webchat.close"),
 					onClick: () => setMode("bubble"),
 					children: /* @__PURE__ */ jsx(X, { size: 16 })
 				})

package/dist/web.js

@@ -11,7 +11,7 @@ import { definePluginUI } from "@coffer-org/web-ui";
 var ui_default = definePluginUI({ slots: [{
 	slot: "overlay",
 	id: "webchat",
-	load: () => import("./ChatWidget-BhGpxS9f.js")
+	load: () => import("./ChatWidget-BIPLpTMp.js")
 }] });
 //#endregion
 export { ui_default as default };

package/locales/en.json

@@ -21,6 +21,10 @@
     "stop": "Stop",
     "attach": "Attach file",
     "removeAttachment": "Remove {{name}}",
+    "attachments": "Attached files",
+    "moreFiles_one": "{{count}} more file",
+    "moreFiles_other": "{{count}} more files",
+    "fewerFiles": "Show fewer",
     "uploading": "Uploading…",
     "uploadProgress": "Upload progress",
     "uploadTooLarge": "File is too large (maximum 25 MB).",
@@ -32,9 +36,6 @@
     "error": "Error: {{message}}",
     "reasoning": "Reasoning",
     "agentPicker": "Agent and preset",
-    "level": "Level {{value}} of {{max}}",
-    "quality": "Quality {{value}} of 5",
-    "time": "Time {{value}} of 5",
     "settings": {
       "label": "Web chat",
       "reasoning_display": "Reasoning display",

package/locales/ru.json

@@ -21,6 +21,11 @@
     "stop": "Стоп",
     "attach": "Прикрепить файл",
     "removeAttachment": "Удалить {{name}}",
+    "attachments": "Прикреплённые файлы",
+    "moreFiles_one": "ещё {{count}} файл",
+    "moreFiles_few": "ещё {{count}} файла",
+    "moreFiles_many": "ещё {{count}} файлов",
+    "fewerFiles": "Свернуть",
     "uploading": "Загрузка…",
     "uploadProgress": "Прогресс загрузки",
     "uploadTooLarge": "Файл слишком большой (максимум 25 МБ).",
@@ -32,9 +37,6 @@
     "error": "Ошибка: {{message}}",
     "reasoning": "Рассуждения",
     "agentPicker": "Агент и пресет",
-    "level": "Уровень {{value}} из {{max}}",
-    "quality": "Качество {{value}} из 5",
-    "time": "Время {{value}} из 5",
     "settings": {
       "label": "Чат на сайте",
       "reasoning_display": "Показ рассуждений",

package/locales/uk.json

@@ -21,6 +21,11 @@
     "stop": "Стоп",
     "attach": "Додати файл",
     "removeAttachment": "Видалити {{name}}",
+    "attachments": "Прикріплені файли",
+    "moreFiles_one": "ще {{count}} файл",
+    "moreFiles_few": "ще {{count}} файли",
+    "moreFiles_many": "ще {{count}} файлів",
+    "fewerFiles": "Згорнути",
     "uploading": "Завантаження…",
     "uploadProgress": "Прогрес завантаження",
     "uploadTooLarge": "Файл завеликий (максимум 25 МБ).",
@@ -32,9 +37,6 @@
     "error": "Помилка: {{message}}",
     "reasoning": "Міркування",
     "agentPicker": "Агент і пресет",
-    "level": "Рівень {{value}} з {{max}}",
-    "quality": "Якість {{value}} з 5",
-    "time": "Час {{value}} з 5",
     "settings": {
       "label": "Чат на сайті",
       "reasoning_display": "Показ міркувань",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffer-org/plugin-webchat",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "type": "module",
   "engines": {
     "node": ">=24"
@@ -28,8 +28,8 @@
   },
   "dependencies": {
     "@coffer-org/markdown": "^7.4.0",
-    "@coffer-org/sdk": "^7.4.0",
-    "@coffer-org/server": "^7.4.0",
+    "@coffer-org/sdk": "^7.4.1",
+    "@coffer-org/server": "^7.5.0",
     "lucide-react": "^1.17.0"
   },
   "coffer": {