@schlenkr/quassel 0.0.0-stage → 0.5.1

package/index.js

@@ -0,0 +1,2586 @@
+import {
+  MAX_CHAT_ATTACHMENTS,
+  MAX_CHAT_ATTACHMENT_BYTES,
+  applyEvent,
+  chatAttachmentMediaType,
+  compactToolLine,
+  prettyJson
+} from "./chunk-3VEL4HEO.js";
+
+// packages/quassel/src/types.ts
+function stepState(message) {
+  if (message.tool?.isError) {
+    return "error";
+  }
+  if (message.role === "thinking") {
+    return message.closed ? "done" : "thinking";
+  }
+  return message.tool !== void 0 && message.tool.result === void 0 ? "running" : "done";
+}
+
+// packages/quassel/src/texts.ts
+var fillText = (text, values) => text.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
+var englishTexts = {
+  working: "Working ...",
+  toolRunning: "running ...",
+  toolStillRunning: "Tool running ...",
+  toolElapsedSeconds: "{seconds} s",
+  currentTool: "Tool running",
+  thinkingChip: "Thinking",
+  toolChip: "Tool",
+  stepGroupOne: "1 step",
+  stepGroupMany: "{count} steps",
+  stepGroupErrorOne: "1 error",
+  stepGroupErrorMany: "{count} errors",
+  stepGroupCollapse: "Collapse",
+  thinkingTitle: "Thinking trace",
+  toolTitle: "Tool call",
+  argumentsLabel: "Arguments",
+  resultLabel: "Result",
+  close: "Close",
+  jumpToEnd: "Jump to end",
+  send: "Send",
+  sendIntoRun: "Feed into the running turn",
+  stop: "Stop work",
+  placeholder: "Write a message ...",
+  steeringPlaceholder: "Interject ...",
+  steered: "Fed into the running turn",
+  detailModeTitle: "Step detail level",
+  detailModeOff: "answers only",
+  detailModeCurrent: "current",
+  detailModeIcons: "icons",
+  detailModeChips: "compact",
+  detailModeGrouped: "grouped",
+  detailModeCompact: "single line",
+  detailModeFull: "everything",
+  showAllMessages: "Show intermediate replies",
+  showLatestExchange: "Show latest reply between inputs",
+  showTimestamps: "Show timestamps",
+  hideTimestamps: "Hide timestamps",
+  copyMessage: "Copy message",
+  editMessage: "Edit message",
+  retryMessage: "Request answer again",
+  copyCode: "Copy code",
+  copied: "Copied",
+  pendingAction: "waiting for input",
+  dismissAction: "Dismiss",
+  actionDismissed: "dismissed",
+  actionFailed: "Action failed",
+  clipboardUnavailable: "The clipboard is not available",
+  transcript: "Chat history",
+  attachments: "Attachments",
+  attachFiles: "Attach files",
+  attachFilesHint: "Attach files (up to {count} files, {size} in total)",
+  removeAttachment: "Remove {name}",
+  attachmentPreparing: "Preparing ...",
+  attachmentsPreparing: "Preparing attachments ...",
+  attachmentReadFailed: "The file could not be read. Remove it and add it again.",
+  attachmentsWhileBusy: "Wait until the input is ready again, then add the files again.",
+  tooManyAttachments: "At most {count} attachments per message. Remove an attachment first.",
+  attachmentsTooLarge: "Attachments may be at most {size} in total. Choose smaller files.",
+  attachmentUnsupported: "This chat does not support {name} as {kind}. Remove the attachment.",
+  attachmentUnsupportedByModel: "The model {model} does not support {name} as {kind}. Choose a suitable model or remove the attachment.",
+  attachmentKindImage: "image",
+  attachmentKindVideo: "video",
+  attachmentKindPdf: "PDF",
+  notSent: "Not sent:",
+  notSentAttachments: "({count} attachments)",
+  insertUnsent: "Insert unsent input"
+};
+var germanTexts = {
+  working: "Arbeitet ...",
+  toolRunning: "l\xE4uft ...",
+  toolStillRunning: "Werkzeug l\xE4uft ...",
+  toolElapsedSeconds: "{seconds} s",
+  currentTool: "Werkzeug l\xE4uft",
+  thinkingChip: "Denken",
+  toolChip: "Werkzeug",
+  stepGroupOne: "1 Schritt",
+  stepGroupMany: "{count} Schritte",
+  stepGroupErrorOne: "1 Fehler",
+  stepGroupErrorMany: "{count} Fehler",
+  stepGroupCollapse: "Einklappen",
+  thinkingTitle: "Gedankengang",
+  toolTitle: "Werkzeugaufruf",
+  argumentsLabel: "Argumente",
+  resultLabel: "Ergebnis",
+  close: "Schlie\xDFen",
+  jumpToEnd: "Zum Ende springen",
+  send: "Senden",
+  sendIntoRun: "In die laufende Antwort einreihen",
+  stop: "Bearbeitung stoppen",
+  placeholder: "Nachricht schreiben ...",
+  steeringPlaceholder: "Nachsteuern ...",
+  steered: "In die laufende Antwort eingereiht",
+  detailModeTitle: "Detailgrad der Schritte",
+  detailModeOff: "nur Antworten",
+  detailModeCurrent: "aktueller Schritt",
+  detailModeIcons: "Symbole",
+  detailModeChips: "kompakt",
+  detailModeGrouped: "gruppiert",
+  detailModeCompact: "einzeilig",
+  detailModeFull: "alles",
+  showAllMessages: "Zwischenantworten anzeigen",
+  showLatestExchange: "Letzte Antwort zwischen den Eingaben anzeigen",
+  showTimestamps: "Zeitstempel anzeigen",
+  hideTimestamps: "Zeitstempel ausblenden",
+  copyMessage: "Nachricht kopieren",
+  editMessage: "Nachricht bearbeiten",
+  retryMessage: "Antwort erneut anfordern",
+  copyCode: "Code kopieren",
+  copied: "Kopiert",
+  pendingAction: "wartet auf Eingabe",
+  dismissAction: "Verwerfen",
+  actionDismissed: "verworfen",
+  actionFailed: "Aktion fehlgeschlagen",
+  clipboardUnavailable: "Die Zwischenablage ist nicht verf\xFCgbar",
+  transcript: "Chatverlauf",
+  attachments: "Anh\xE4nge",
+  attachFiles: "Dateien anh\xE4ngen",
+  attachFilesHint: "Dateien anh\xE4ngen (bis zu {count} Dateien, insgesamt {size})",
+  removeAttachment: "{name} entfernen",
+  attachmentPreparing: "Wird vorbereitet ...",
+  attachmentsPreparing: "Anh\xE4nge werden vorbereitet ...",
+  attachmentReadFailed: "Die Datei konnte nicht gelesen werden. Den Anhang entfernen und erneut hinzuf\xFCgen.",
+  attachmentsWhileBusy: "Warten, bis die Eingabe wieder bereit ist, dann die Dateien erneut hinzuf\xFCgen.",
+  tooManyAttachments: "H\xF6chstens {count} Anh\xE4nge pro Nachricht. Zuerst einen Anhang entfernen.",
+  attachmentsTooLarge: "Anh\xE4nge d\xFCrfen zusammen h\xF6chstens {size} gro\xDF sein. Kleinere Dateien ausw\xE4hlen.",
+  attachmentUnsupported: "Dieser Chat unterst\xFCtzt {name} nicht als {kind}. Den Anhang entfernen.",
+  attachmentUnsupportedByModel: "Das Modell {model} unterst\xFCtzt {name} nicht als {kind}. Ein passendes Modell ausw\xE4hlen oder den Anhang entfernen.",
+  attachmentKindImage: "Bild",
+  attachmentKindVideo: "Video",
+  attachmentKindPdf: "PDF",
+  notSent: "Nicht gesendet:",
+  notSentAttachments: "({count} Anh\xE4nge)",
+  insertUnsent: "Nicht gesendete Eingabe einf\xFCgen"
+};
+var defaultTexts = englishTexts;
+
+// packages/quassel/src/ui/cn.ts
+import { createCn } from "cn/config";
+var cn = createCn({ prefix: "qsl", extend: { theme: { text: ["meta", "trace", "timestamp", "label", "chat"] } } });
+
+// packages/quassel/src/ChatMessages.tsx
+import { useCallback as useCallback2, useContext as useContext3, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+
+// packages/quassel/src/chat-scroll.ts
+var atEnd = (viewport) => viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= 24;
+function createChatScroll(onFollowChange = () => {
+}) {
+  let following = true;
+  let lastTop = 0;
+  let lastHeight = 0;
+  let lastClientHeight = 0;
+  const movedUp = (viewport, dragging) => viewport.scrollTop < lastTop && (dragging || viewport.scrollHeight === lastHeight && viewport.clientHeight === lastClientHeight);
+  const remember = (viewport) => {
+    lastTop = viewport.scrollTop;
+    lastHeight = viewport.scrollHeight;
+    lastClientHeight = viewport.clientHeight;
+  };
+  const follow = (value) => {
+    if (following === value) return;
+    following = value;
+    onFollowChange(value);
+  };
+  const layout = (viewport, dragging = false) => {
+    if (viewport.clientHeight <= 0) return;
+    if (movedUp(viewport, dragging) && !atEnd(viewport)) follow(false);
+    if (following) viewport.scrollTop = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+    else if (viewport.scrollHeight <= viewport.clientHeight) follow(true);
+    remember(viewport);
+  };
+  return {
+    layout,
+    pause(viewport) {
+      if (viewport.scrollHeight > viewport.clientHeight) follow(false);
+    },
+    scroll(viewport, dragging = false) {
+      if (viewport.clientHeight <= 0) return;
+      if (atEnd(viewport) && viewport.scrollTop > lastTop) follow(true);
+      else if (movedUp(viewport, dragging) && !atEnd(viewport)) follow(false);
+      remember(viewport);
+    },
+    jump(viewport) {
+      follow(true);
+      layout(viewport);
+    }
+  };
+}
+
+// packages/quassel/src/Markdown.tsx
+import { createContext as createContext2, useCallback, useContext as useContext2, useRef as useRef2 } from "react";
+import { Streamdown } from "streamdown";
+import { CheckIcon, CopyIcon } from "lucide-react";
+
+// packages/quassel/src/QuasselProvider.tsx
+import { createContext, useContext, useMemo } from "react";
+
+// packages/quassel/src/ui/button.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "qsl:group/button qsl:inline-flex qsl:shrink-0 qsl:items-center qsl:justify-center qsl:rounded-lg qsl:border qsl:border-transparent qsl:bg-clip-padding qsl:text-sm qsl:font-medium qsl:whitespace-nowrap qsl:transition-all qsl:outline-none qsl:select-none qsl:focus-visible:border-ring qsl:focus-visible:ring-3 qsl:focus-visible:ring-ring/50 qsl:active:not-aria-[haspopup]:translate-y-px qsl:disabled:pointer-events-none qsl:disabled:opacity-50 qsl:aria-invalid:border-destructive qsl:aria-invalid:ring-3 qsl:aria-invalid:ring-destructive/20 qsl:dark:aria-invalid:border-destructive/50 qsl:dark:aria-invalid:ring-destructive/40 qsl:[&_svg]:pointer-events-none qsl:[&_svg]:shrink-0 qsl:[&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "qsl:bg-primary qsl:text-primary-foreground qsl:hover:bg-primary/80",
+        outline: "qsl:border-border qsl:bg-background qsl:hover:bg-muted qsl:hover:text-foreground qsl:aria-expanded:bg-muted qsl:aria-expanded:text-foreground qsl:dark:border-input qsl:dark:bg-input/30 qsl:dark:hover:bg-input/50",
+        secondary: "qsl:bg-secondary qsl:text-secondary-foreground qsl:hover:bg-[color-mix(in_oklch,var(--qsl-secondary),var(--qsl-foreground)_5%)] qsl:aria-expanded:bg-secondary qsl:aria-expanded:text-secondary-foreground",
+        ghost: "qsl:hover:bg-muted qsl:hover:text-foreground qsl:aria-expanded:bg-muted qsl:aria-expanded:text-foreground qsl:dark:hover:bg-muted/50",
+        destructive: "qsl:bg-destructive/10 qsl:text-destructive qsl:hover:bg-destructive/20 qsl:focus-visible:border-destructive/40 qsl:focus-visible:ring-destructive/20 qsl:dark:bg-destructive/20 qsl:dark:hover:bg-destructive/30 qsl:dark:focus-visible:ring-destructive/40",
+        link: "qsl:text-primary qsl:underline-offset-4 qsl:hover:underline"
+      },
+      size: {
+        default: "qsl:h-8 qsl:gap-1.5 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2",
+        xs: "qsl:h-6 qsl:gap-1 qsl:rounded-[min(--theme(--radius-md),10px)] qsl:px-2 qsl:text-xs qsl:in-data-[slot=button-group]:rounded-lg qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3",
+        sm: "qsl:h-7 qsl:gap-1 qsl:rounded-[min(--theme(--radius-md),12px)] qsl:px-2.5 qsl:in-data-[slot=button-group]:rounded-lg qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3.5",
+        lg: "qsl:h-9 qsl:gap-1.5 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2",
+        icon: "qsl:size-8",
+        "icon-xs": "qsl:size-6 qsl:rounded-[min(--theme(--radius-md),10px)] qsl:in-data-[slot=button-group]:rounded-lg qsl:[&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "qsl:size-7 qsl:rounded-[min(--theme(--radius-md),12px)] qsl:in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "qsl:size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ButtonPrimitive,
+    {
+      "data-quassel": "",
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// packages/quassel/src/ui/card.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Card({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-quassel": "",
+      "data-slot": "card",
+      "data-size": size,
+      className: cn(
+        "qsl:group/card qsl:flex qsl:flex-col qsl:gap-(--qsl-card-spacing) qsl:overflow-hidden qsl:rounded-panel qsl:border qsl:border-border qsl:bg-card qsl:py-(--qsl-card-spacing) qsl:text-sm qsl:text-card-foreground qsl:shadow-bar qsl:[--qsl-card-spacing:--spacing(4)] qsl:has-data-[slot=card-footer]:pb-0 qsl:has-[>img:first-child]:pt-0 qsl:data-[size=sm]:[--qsl-card-spacing:--spacing(3)] qsl:data-[size=sm]:has-data-[slot=card-footer]:pb-0 qsl:*:[img:first-child]:rounded-t-xl qsl:*:[img:last-child]:rounded-b-xl",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// packages/quassel/src/ui/popover.tsx
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 8,
+  anchor,
+  collisionPadding,
+  keepMounted,
+  portalContainer,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { container: portalContainer, keepMounted, children: /* @__PURE__ */ jsx3(
+    PopoverPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      anchor,
+      collisionPadding,
+      side,
+      sideOffset,
+      className: "qsl:isolate qsl:z-[110]",
+      children: /* @__PURE__ */ jsx3(
+        PopoverPrimitive.Popup,
+        {
+          "data-quassel": "",
+          "data-quassel-popover": "",
+          "data-slot": "popover-content",
+          className: cn(
+            "qsl:z-[110] qsl:flex qsl:w-72 qsl:origin-(--transform-origin) qsl:flex-col qsl:gap-2.5 qsl:rounded-lg qsl:bg-popover qsl:p-2.5 qsl:text-sm qsl:text-popover-foreground qsl:shadow-md qsl:ring-1 qsl:ring-foreground/10 qsl:outline-hidden qsl:duration-100 qsl:data-[side=bottom]:slide-in-from-top-2 qsl:data-[side=inline-end]:slide-in-from-left-2 qsl:data-[side=inline-start]:slide-in-from-right-2 qsl:data-[side=left]:slide-in-from-right-2 qsl:data-[side=right]:slide-in-from-left-2 qsl:data-[side=top]:slide-in-from-bottom-2 qsl:data-open:animate-in qsl:data-open:fade-in-0 qsl:data-open:zoom-in-95 qsl:data-closed:animate-out qsl:data-closed:fade-out-0 qsl:data-closed:zoom-out-95",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+
+// packages/quassel/src/ui/stop-button.tsx
+import { SquareIcon } from "lucide-react";
+
+// packages/quassel/src/ui/spinner.tsx
+import { Loader2Icon } from "lucide-react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(Loader2Icon, { "data-slot": "spinner", role: "status", "aria-label": "Loading", className: cn("qsl:size-4 qsl:animate-spin", className), ...props });
+}
+
+// packages/quassel/src/ui/stop-button.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function StopGlyph({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(SquareIcon, { "aria-hidden": true, className: cn("qsl:text-destructive", className), fill: "currentColor", ...props });
+}
+var stopButtonClass = "qsl:text-destructive qsl:hover:bg-destructive/10 qsl:hover:text-destructive qsl:dark:hover:bg-destructive/20";
+function StopButton({ label, busy = false, className, title, ...props }) {
+  return /* @__PURE__ */ jsx5(Button, { "aria-busy": busy || void 0, "aria-label": label, className: cn(stopButtonClass, className), title: title ?? label, variant: "ghost", ...props, children: busy ? /* @__PURE__ */ jsx5(Spinner, {}) : /* @__PURE__ */ jsx5(StopGlyph, {}) });
+}
+
+// packages/quassel/src/ui/toggle.tsx
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var toggleVariants = cva2(
+  "qsl:group/toggle qsl:inline-flex qsl:items-center qsl:justify-center qsl:gap-1 qsl:rounded-lg qsl:text-sm qsl:font-medium qsl:whitespace-nowrap qsl:transition-all qsl:outline-none qsl:hover:bg-muted qsl:hover:text-foreground qsl:focus-visible:border-ring qsl:focus-visible:ring-[3px] qsl:focus-visible:ring-ring/50 qsl:disabled:pointer-events-none qsl:disabled:opacity-50 qsl:aria-invalid:border-destructive qsl:aria-invalid:ring-destructive/20 qsl:aria-pressed:bg-muted qsl:data-[state=on]:bg-muted qsl:dark:aria-invalid:ring-destructive/40 qsl:[&_svg]:pointer-events-none qsl:[&_svg]:shrink-0 qsl:[&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "qsl:bg-transparent",
+        outline: "qsl:border qsl:border-input qsl:bg-transparent qsl:hover:bg-muted"
+      },
+      size: {
+        default: "qsl:h-8 qsl:min-w-8 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2",
+        sm: "qsl:h-7 qsl:min-w-7 qsl:rounded-[min(--theme(--radius-md),12px)] qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3.5",
+        lg: "qsl:h-9 qsl:min-w-9 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    TogglePrimitive,
+    {
+      "data-quassel": "",
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// packages/quassel/src/QuasselProvider.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var defaultComponents = { Button, Toggle, Card, StopButton, Popover, PopoverContent };
+var QuasselContext = createContext({ components: defaultComponents });
+function QuasselProvider({ components: components2, allowUrl, resolveUrl, portalContainer, children }) {
+  const outer = useContext(QuasselContext);
+  const value = useMemo(() => ({
+    components: { ...outer.components, ...components2 },
+    allowUrl: allowUrl ?? outer.allowUrl,
+    resolveUrl: resolveUrl ?? outer.resolveUrl,
+    portalContainer: portalContainer ?? outer.portalContainer
+  }), [outer, components2, allowUrl, resolveUrl, portalContainer]);
+  return /* @__PURE__ */ jsx7(QuasselContext.Provider, { value, children });
+}
+var useQuasselComponents = () => useContext(QuasselContext).components;
+var useAllowUrl = () => useContext(QuasselContext).allowUrl;
+var useResolveUrl = () => useContext(QuasselContext).resolveUrl;
+function useQuasselPortalContainer() {
+  const container = useContext(QuasselContext).portalContainer;
+  const target = typeof container === "function" ? container() : container && "current" in container ? container.current : container;
+  return target ?? void 0;
+}
+
+// packages/quassel/src/useChatAction.ts
+import { useEffect, useRef, useState } from "react";
+function useChatAction() {
+  const pending = useRef(false);
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState();
+  useEffect(() => {
+    if (status !== "done") return;
+    const timer = window.setTimeout(() => setStatus("idle"), 1800);
+    return () => window.clearTimeout(timer);
+  }, [status]);
+  const invoke = async (action, failureLabel) => {
+    if (pending.current) return;
+    pending.current = true;
+    setError(void 0);
+    setStatus("pending");
+    try {
+      await action();
+      setStatus("done");
+    } catch (failure) {
+      const detail = failure instanceof Error ? failure.message : String(failure);
+      setError(`${failureLabel}: ${detail}`);
+      setStatus("idle");
+    } finally {
+      pending.current = false;
+    }
+  };
+  return { status, error, invoke };
+}
+async function copyChatText(text, unavailable) {
+  if (!navigator.clipboard) throw new Error(unavailable);
+  await navigator.clipboard.writeText(text);
+}
+
+// packages/quassel/src/Markdown.tsx
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var LinkClickContext = createContext2(void 0);
+var CodeBlockContext = createContext2({ texts: defaultTexts });
+function MarkdownCodeBlocks({ children, options, texts }) {
+  return /* @__PURE__ */ jsx8(CodeBlockContext.Provider, { value: { options, texts }, children });
+}
+function CodeBlock({ children }) {
+  const { options, texts } = useContext2(CodeBlockContext);
+  const { Button: Button2 } = useQuasselComponents();
+  const code = useRef2(null);
+  const action = useChatAction();
+  const label = action.status === "done" ? texts.copied : texts.copyCode;
+  const block = /* @__PURE__ */ jsx8(
+    "pre",
+    {
+      ref: code,
+      "data-chat": "code-block",
+      className: cn(scrollbar, "qsl:my-2 qsl:overflow-auto qsl:overscroll-contain qsl:rounded-lg qsl:bg-secondary qsl:px-3 qsl:py-2 qsl:font-mono qsl:text-[length:1em] qsl:leading-relaxed qsl:in-data-[tone=on-color]:bg-black/30 qsl:in-data-[tone=on-color]:text-inherit"),
+      style: { maxHeight: options?.maxHeight, whiteSpace: options?.wrap ? "pre-wrap" : void 0, overflowWrap: options?.wrap ? "anywhere" : void 0 },
+      children
+    }
+  );
+  if (!options?.showCopyButton) return block;
+  return /* @__PURE__ */ jsxs("div", { className: "qsl:relative", children: [
+    block,
+    /* @__PURE__ */ jsx8(
+      Button2,
+      {
+        "aria-label": label,
+        className: "qsl:absolute qsl:top-1 qsl:right-1 qsl:bg-secondary",
+        disabled: action.status === "pending",
+        size: "icon-sm",
+        title: label,
+        variant: "ghost",
+        onClick: () => {
+          void action.invoke(() => copyChatText(code.current?.textContent ?? "", texts.clipboardUnavailable), texts.actionFailed);
+        },
+        children: action.status === "done" ? /* @__PURE__ */ jsx8(CheckIcon, {}) : /* @__PURE__ */ jsx8(CopyIcon, {})
+      }
+    ),
+    action.error && /* @__PURE__ */ jsx8("p", { className: "qsl:text-sm qsl:text-destructive", role: "alert", children: action.error })
+  ] });
+}
+function MarkdownLinks({ children, onLinkClick }) {
+  return /* @__PURE__ */ jsx8(LinkClickContext.Provider, { value: onLinkClick, children });
+}
+function MarkdownLink({ href, children }) {
+  const onLinkClick = useContext2(LinkClickContext);
+  if (!href || href === "streamdown:incomplete-link") {
+    return /* @__PURE__ */ jsx8("span", { children });
+  }
+  return /* @__PURE__ */ jsx8(
+    "a",
+    {
+      className: "qsl:text-primary qsl:[text-underline-offset:2px] qsl:in-data-[tone=on-color]:text-inherit qsl:in-data-[tone=on-color]:underline",
+      href,
+      onClick: (event) => {
+        if (href && onLinkClick?.(href, event.currentTarget.textContent ?? "")) {
+          event.preventDefault();
+        }
+      },
+      rel: "noreferrer",
+      target: "_blank",
+      children
+    }
+  );
+}
+var scrollbar = "qsl:[scrollbar-width:thin] qsl:[&::-webkit-scrollbar]:block qsl:[&::-webkit-scrollbar]:h-2 qsl:[&::-webkit-scrollbar-thumb]:rounded-full qsl:[&::-webkit-scrollbar-thumb]:bg-border";
+var scrollCover = "qsl:bg-[linear-gradient(to_right,var(--qsl-scroll-cover,var(--qsl-background))_50%,transparent)_left/20px_100%_no-repeat_local,linear-gradient(to_left,var(--qsl-scroll-cover,var(--qsl-background))_50%,transparent)_right/20px_100%_no-repeat_local,linear-gradient(to_right,#00000047,transparent)_left/14px_100%_no-repeat_scroll,linear-gradient(to_left,#00000047,transparent)_right/14px_100%_no-repeat_scroll]";
+var headingClasses = "qsl:mt-3 qsl:mb-1 qsl:text-[length:1.1em] qsl:font-medium";
+var cellClasses = "qsl:max-w-[44ch] qsl:border qsl:border-border qsl:px-2 qsl:py-1 qsl:text-left qsl:align-top qsl:in-data-[tone=on-color]:border-white/35";
+var components = {
+  h1: ({ children }) => /* @__PURE__ */ jsx8("h1", { className: "qsl:mt-3 qsl:mb-1 qsl:text-[length:1.2em] qsl:font-semibold", children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx8("h2", { className: headingClasses, children }),
+  h3: ({ children }) => /* @__PURE__ */ jsx8("h3", { className: headingClasses, children }),
+  h4: ({ children }) => /* @__PURE__ */ jsx8("h4", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
+  h5: ({ children }) => /* @__PURE__ */ jsx8("h5", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
+  h6: ({ children }) => /* @__PURE__ */ jsx8("h6", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
+  p: ({ children }) => /* @__PURE__ */ jsx8("p", { className: "qsl:[p+&]:mt-2", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx8("ul", { className: "qsl:my-2 qsl:list-disc qsl:pl-6 qsl:[li>&]:my-0", children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx8("ol", { className: "qsl:my-2 qsl:list-decimal qsl:pl-6 qsl:[li>&]:my-0", children }),
+  li: ({ children }) => /* @__PURE__ */ jsx8("li", { className: "qsl:marker:text-muted-foreground qsl:in-data-[tone=on-color]:marker:text-inherit", children }),
+  hr: () => /* @__PURE__ */ jsx8("hr", { className: "qsl:my-3 qsl:border-t qsl:border-border" }),
+  img: ({ src, alt }) => /* @__PURE__ */ jsx8("img", { alt, className: "qsl:h-auto qsl:max-w-full", src: typeof src === "string" ? src : void 0 }),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx8("blockquote", { className: "qsl:my-1 qsl:border-l-2 qsl:border-border qsl:pl-3 qsl:text-muted-foreground qsl:in-data-[tone=on-color]:border-white/50 qsl:in-data-[tone=on-color]:text-inherit", children }),
+  strong: ({ children }) => /* @__PURE__ */ jsx8("strong", { className: "qsl:font-medium", children }),
+  em: ({ children }) => /* @__PURE__ */ jsx8("em", { children }),
+  a: ({ href, children }) => /* @__PURE__ */ jsx8(MarkdownLink, { href, children }),
+  pre: ({ children }) => /* @__PURE__ */ jsx8(CodeBlock, { children }),
+  code: ({ children, className }) => /* @__PURE__ */ jsx8("code", { className: cn(className, "qsl:rounded-sm qsl:bg-secondary qsl:px-1 qsl:py-0.5 qsl:font-mono qsl:text-[length:1em] qsl:[overflow-wrap:anywhere] qsl:in-data-[tone=on-color]:bg-white/20 qsl:in-data-[tone=on-color]:text-inherit", "qsl:[pre>&]:bg-transparent qsl:[pre>&]:p-0"), children }),
+  // Without max-content the table shrinks to the container and stacks letters.
+  table: ({ children }) => /* @__PURE__ */ jsx8("div", { className: cn(scrollbar, scrollCover, "qsl:my-2 qsl:overflow-x-auto qsl:overscroll-x-contain"), children: /* @__PURE__ */ jsx8("table", { className: "qsl:w-max qsl:min-w-full qsl:border-collapse qsl:text-sm", children }) }),
+  thead: ({ children }) => /* @__PURE__ */ jsx8("thead", { children }),
+  tbody: ({ children }) => /* @__PURE__ */ jsx8("tbody", { children }),
+  tr: ({ children }) => /* @__PURE__ */ jsx8("tr", { children }),
+  th: ({ children }) => /* @__PURE__ */ jsx8("th", { className: cn(cellClasses, "qsl:bg-secondary qsl:font-medium qsl:in-data-[tone=on-color]:bg-white/15 qsl:in-data-[tone=on-color]:text-inherit"), children }),
+  td: ({ children }) => /* @__PURE__ */ jsx8("td", { className: cellClasses, children })
+};
+function transformUrl(url, allowUrl, resolveUrl) {
+  const resolved = resolveUrl ? resolveUrl(url) : url;
+  if (allowUrl?.(resolved)) return resolved;
+  const scheme = /^[^/?#]*:/.exec(resolved);
+  return !scheme || /^(https?|mailto|tel|ftp|irc|ircs|xmpp):$/i.test(scheme[0]) ? resolved : "";
+}
+function Markdown({ text, streaming = false }) {
+  const allowUrl = useAllowUrl();
+  const resolveUrl = useResolveUrl();
+  const urlTransform = useCallback((url) => transformUrl(url, allowUrl, resolveUrl), [allowUrl, resolveUrl]);
+  return /* @__PURE__ */ jsx8(
+    Streamdown,
+    {
+      className: "space-y-0 text-inherit",
+      prefix: "qsl",
+      mode: streaming ? "streaming" : "static",
+      isAnimating: streaming,
+      parseIncompleteMarkdown: streaming,
+      components,
+      controls: false,
+      rehypePlugins: [],
+      urlTransform,
+      skipHtml: true,
+      children: text
+    }
+  );
+}
+function markdownPlainText(text) {
+  return text.split("\n").filter((line) => !/^\s*```\w*\s*$/.test(line) && !isTableDivider(line)).map((line) => (line.trim().startsWith("|") ? splitTableRow(line).join(", ") : line).replace(/^(#{1,6})\s+/, "").replace(/^\s*>\s?/, "").replace(/^\s*([-*+]|\d+[.)])\s+/, "").replace(/!?\[([^\]]*)\]\(([^)]+)\)|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*]+)\*|`([^`]+)`/g, (_, link, _href, bold, boldUnderscore, italic, code) => link ?? bold ?? boldUnderscore ?? italic ?? code).trim()).filter((line) => line !== "").join("\n");
+}
+function splitTableRow(line) {
+  let row = line.trim();
+  if (row.startsWith("|")) {
+    row = row.slice(1);
+  }
+  if (row.endsWith("|")) {
+    row = row.slice(0, -1);
+  }
+  return row.split("|").map((cell) => cell.trim());
+}
+function isTableDivider(line) {
+  return /^\s*\|?\s*:?-{1,}:?\s*(\|\s*:?-{1,}:?\s*)*\|?\s*$/.test(line) && line.includes("-");
+}
+
+// packages/quassel/src/StepPopover.tsx
+import { useMemo as useMemo2 } from "react";
+import { SparklesIcon, WrenchIcon, XIcon } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var stepPopoverOrigin = (event) => ({
+  x: event.clientX,
+  y: event.clientY,
+  base: getComputedStyle(event.currentTarget).getPropertyValue("--qsl-base")
+});
+var preClasses = "qsl:rounded-lg qsl:bg-secondary qsl:p-3 qsl:font-mono qsl:text-trace qsl:leading-[1.625] qsl:break-all qsl:whitespace-pre-wrap";
+function StepPopover({
+  message,
+  position,
+  texts,
+  toolArgumentsText,
+  onClose
+}) {
+  const anchor = useMemo2(() => ({
+    getBoundingClientRect: () => new DOMRect(
+      Math.max(16, Math.min(position.x, window.innerWidth - 16)),
+      Math.max(16, Math.min(position.y, window.innerHeight - 16)),
+      0,
+      0
+    ),
+    contextElement: document.documentElement
+  }), [position]);
+  const { Button: Button2, Popover: Popover2, PopoverContent: PopoverContent2 } = useQuasselComponents();
+  const portalContainer = useQuasselPortalContainer();
+  const tool = message.tool;
+  const thinking = message.role === "thinking";
+  const title = thinking ? texts.thinkingTitle : texts.toolTitle;
+  return /* @__PURE__ */ jsx9(Popover2, { open: true, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxs2(
+    PopoverContent2,
+    {
+      align: "start",
+      anchor,
+      "aria-label": title,
+      className: cn(
+        "qsl:w-[min(680px,calc(100vw-32px))] qsl:gap-0 qsl:overflow-hidden qsl:p-0 qsl:text-base qsl:leading-normal qsl:shadow-pop",
+        "qsl:max-h-[min(70dvh,620px,var(--available-height))]"
+      ),
+      collisionPadding: 16,
+      portalContainer,
+      side: "bottom",
+      sideOffset: 10,
+      style: { "--qsl-base": position.base || void 0 },
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "qsl:flex qsl:flex-none qsl:items-center qsl:gap-2 qsl:border-b qsl:border-border-soft qsl:px-4 qsl:py-2.5", children: [
+          thinking ? /* @__PURE__ */ jsx9(SparklesIcon, { className: "qsl:text-muted-foreground", size: 14 }) : /* @__PURE__ */ jsx9(WrenchIcon, { className: tool?.isError ? "qsl:text-destructive" : "qsl:text-muted-foreground", size: 14 }),
+          /* @__PURE__ */ jsx9("span", { className: "qsl:min-w-0 qsl:flex-1 qsl:overflow-hidden qsl:text-ellipsis qsl:whitespace-nowrap qsl:font-medium", children: title }),
+          /* @__PURE__ */ jsx9(Button2, { "aria-label": texts.close, className: "qsl:flex-none", onClick: onClose, size: "icon-sm", title: texts.close, variant: "ghost", children: /* @__PURE__ */ jsx9(XIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "qsl:min-h-0 qsl:flex-1 qsl:overflow-auto qsl:overscroll-contain qsl:p-4", children: thinking ? /* @__PURE__ */ jsx9("div", { className: "qsl:text-sm qsl:leading-[1.625] qsl:whitespace-pre-wrap", children: message.text }) : tool ? /* @__PURE__ */ jsxs2("div", { className: "qsl:flex qsl:flex-col qsl:gap-4", children: [
+          /* @__PURE__ */ jsx9("div", { className: "qsl:font-mono qsl:text-sm", children: message.text }),
+          /* @__PURE__ */ jsx9(PopoverSection, { label: texts.argumentsLabel, value: toolArgumentsText(tool) }),
+          tool.result === void 0 ? /* @__PURE__ */ jsx9("div", { className: "qsl:text-sm qsl:text-muted-foreground", children: texts.toolStillRunning }) : /* @__PURE__ */ jsx9(PopoverSection, { error: tool.isError, label: texts.resultLabel, value: prettyJson(tool.result) })
+        ] }) : null })
+      ]
+    }
+  ) });
+}
+function PopoverSection({ label, value, error = false }) {
+  return /* @__PURE__ */ jsxs2("section", { children: [
+    /* @__PURE__ */ jsx9("h3", { className: "qsl:mb-1.5 qsl:text-trace qsl:font-semibold qsl:tracking-[0.04em] qsl:text-muted-foreground qsl:uppercase", children: label }),
+    /* @__PURE__ */ jsx9("pre", { className: cn(preClasses, error && "qsl:text-destructive"), children: value })
+  ] });
+}
+
+// packages/quassel/src/PendingActionCard.tsx
+import { CheckIcon as CheckIcon2, XIcon as XIcon2 } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var cardClasses = "qsl:gap-2.5 qsl:bg-background qsl:px-3.5 qsl:text-sm";
+var resultText = (result) => typeof result === "string" ? result : result === null || result === void 0 ? "" : JSON.stringify(result);
+function PendingActionCard({
+  text,
+  action,
+  waitingLabel,
+  dismissLabel,
+  dismissedLabel,
+  onDismiss
+}) {
+  const { Button: Button2, Card: Card2 } = useQuasselComponents();
+  if (action.status !== void 0) {
+    return /* @__PURE__ */ jsxs3(Card2, { className: cardClasses, size: "sm", children: [
+      /* @__PURE__ */ jsx10("div", { className: "qsl:leading-normal", children: text }),
+      /* @__PURE__ */ jsxs3("div", { className: "qsl:flex qsl:items-center qsl:gap-1.5 qsl:text-sm qsl:text-muted-foreground", "data-action": "resolved", children: [
+        action.status === "approved" ? /* @__PURE__ */ jsx10(CheckIcon2, { className: "qsl:text-success", size: 12 }) : /* @__PURE__ */ jsx10(XIcon2, { size: 12 }),
+        action.status === "approved" ? resultText(action.result) : dismissedLabel
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(Card2, { className: cardClasses, size: "sm", children: [
+    /* @__PURE__ */ jsx10("div", { className: "qsl:leading-normal", children: text }),
+    /* @__PURE__ */ jsxs3("div", { className: "qsl:flex qsl:items-center qsl:justify-between qsl:gap-2", children: [
+      /* @__PURE__ */ jsx10("span", { className: "qsl:text-sm qsl:text-muted-foreground", "data-action": "waiting", children: waitingLabel }),
+      onDismiss && /* @__PURE__ */ jsx10(Button2, { onClick: onDismiss, size: "sm", variant: "outline", children: dismissLabel })
+    ] })
+  ] });
+}
+
+// packages/quassel/src/WorkingScenes.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var TRACK = 13;
+var BASE_TICK_MS = 90;
+var SCENE_CHANGE_MS = 2600;
+function track(figures, width = TRACK) {
+  return Array.from({ length: width }, (_, x) => figures[x] ?? " ");
+}
+var SCENES = [
+  {
+    id: "thinking",
+    tick: 2,
+    draw: (step) => {
+      const tick = step % 10;
+      if (tick >= 8) return "\u{1F929}\u{1F4A1}";
+      return "\u{1F914}" + "\u{1F4AD}".repeat(Math.min(tick, 3));
+    }
+  },
+  {
+    // Flies to the right, dragging its tail behind.
+    id: "rocket",
+    tick: 2,
+    moving: true,
+    draw: (step) => {
+      const x = step % TRACK;
+      return track({ [x - 2]: "\xB7", [x - 1]: "\u{1F4A8}", [x]: "\u{1F680}" });
+    }
+  },
+  {
+    // The dots stay put and are eaten one by one.
+    id: "pacman",
+    tick: 2,
+    moving: true,
+    draw: (step) => {
+      const x = step % TRACK;
+      const figures = {};
+      for (let i = x + 1; i < TRACK; i++) {
+        figures[i] = "\xB7";
+      }
+      figures[x] = step % 2 === 0 ? "\u{1F7E1}" : "\u{1F315}";
+      return track(figures);
+    }
+  },
+  {
+    // A seed becomes a tree, then start over.
+    id: "growing",
+    compact: true,
+    tick: 2,
+    draw: (step) => {
+      const stages = ["\u{1F331}", "\u{1F331}", "\u{1F33F}", "\u{1F33F}", "\u{1F343}", "\u{1F333}", "\u{1F333}", "\u{1F333}"];
+      return stages[step % stages.length];
+    }
+  },
+  {
+    // The egg cracks, the chick hatches.
+    id: "hatching",
+    compact: true,
+    tick: 2,
+    draw: (step) => {
+      const tick = step % 12;
+      if (tick < 4) return "\u{1F95A}";
+      if (tick < 6) return "\u{1F95A}*";
+      if (tick < 9) return "\u{1F423}";
+      return "\u{1F425}";
+    }
+  },
+  {
+    // Morse-like signal that resolves into an OK.
+    id: "signal",
+    tick: 2,
+    draw: (step) => {
+      const tick = step % 14;
+      if (tick >= 11) return "\u{1F4E1} OK";
+      const pattern = ["\xB7", "\xB7\xB7", "\xB7-", "-\xB7", "\xB7\xB7-", "-\xB7\xB7"];
+      return "\u{1F4E1} " + pattern[tick % pattern.length];
+    }
+  },
+  {
+    // Hourglass: the sand runs through, then it is flipped.
+    id: "hourglass",
+    tick: 2,
+    draw: (step) => {
+      const tick = step % 12;
+      const grains = "\xB7".repeat(Math.max(0, 5 - Math.floor(tick / 2)));
+      return (tick < 10 ? "\u23F3" : "\u231B") + " " + grains;
+    }
+  },
+  {
+    // Egg, chick, hen - and she lays the next egg.
+    id: "chicken-cycle",
+    compact: true,
+    tick: 3,
+    draw: (step) => {
+      const tick = step % 16;
+      if (tick < 3) return "\u{1F95A}";
+      if (tick < 5) return "\u{1F95A}*";
+      if (tick < 8) return "\u{1F423}";
+      if (tick < 11) return "\u{1F424}";
+      if (tick < 14) return "\u{1F414}";
+      return "\u{1F414}\u{1F95A}";
+    }
+  },
+  {
+    // Hat, sparks - and the rabbit bolts.
+    id: "magic-hat",
+    compact: true,
+    tick: 3,
+    draw: (step) => {
+      const tick = step % 14;
+      if (tick < 4) return "\u{1F3A9}";
+      if (tick < 7) return "\u{1F3A9}*";
+      if (tick < 11) return "\u{1F3A9}\u{1F407}";
+      return "\u{1F407}\u{1F4A8}";
+    }
+  },
+  {
+    // Red, yellow, green - and off.
+    id: "traffic-light",
+    compact: true,
+    tick: 3,
+    draw: (step) => {
+      const tick = step % 12;
+      if (tick < 4) return "\u{1F534}";
+      if (tick < 6) return "\u{1F7E1}";
+      if (tick < 8) return "\u{1F7E2}";
+      return "\u{1F697}\u{1F4A8}";
+    }
+  },
+  {
+    // Ringing, oversleeping, running off.
+    id: "alarm-clock",
+    compact: true,
+    tick: 2,
+    draw: (step) => {
+      const tick = step % 14;
+      if (tick < 5) return tick % 2 === 0 ? "\u23F0" : "\u{1F514}";
+      if (tick < 8) return "\u{1F634}";
+      if (tick < 10) return "\u{1F633}";
+      return "\u{1F3C3}\u{1F4A8}";
+    }
+  },
+  {
+    // A snail crawls to the flag - and celebrates.
+    id: "snail",
+    tick: 4,
+    draw: (step) => {
+      const tick = step % 8;
+      if (tick < 5) return track({ [tick]: "\u{1F40C}", 4: "\u{1F3C1}" }, 5);
+      return track({ 4: "\u{1F389}" }, 5);
+    }
+  }
+];
+var COMPACT_SCENES = SCENES.filter((scene) => scene.compact);
+function WorkingScenes({ label = "Working ...", compact = false }) {
+  const scenes = compact ? COMPACT_SCENES : SCENES;
+  const [sceneIndex, setSceneIndex] = useState2(() => Math.floor(Math.random() * scenes.length));
+  const [offset, setOffset] = useState2(() => Math.floor(Math.random() * 20));
+  const [frameTick, setFrameTick] = useState2(0);
+  const [reducedMotion, setReducedMotion] = useState2(() => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  const scene = scenes[sceneIndex % scenes.length];
+  useEffect2(() => {
+    const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReducedMotion(preference.matches);
+    preference.addEventListener("change", update);
+    update();
+    return () => preference.removeEventListener("change", update);
+  }, []);
+  useEffect2(() => {
+    if (reducedMotion) return;
+    const timer = window.setInterval(() => {
+      setSceneIndex((previous) => (previous + 1 + Math.floor(Math.random() * (scenes.length - 1))) % scenes.length);
+      setOffset(Math.floor(Math.random() * 20));
+      setFrameTick(0);
+    }, SCENE_CHANGE_MS);
+    return () => window.clearInterval(timer);
+  }, [reducedMotion, scenes]);
+  useEffect2(() => {
+    if (reducedMotion) return;
+    const timer = window.setInterval(() => setFrameTick((value) => value + 1), BASE_TICK_MS);
+    return () => window.clearInterval(timer);
+  }, [reducedMotion]);
+  const frame = scene.draw(Math.floor(frameTick / scene.tick) + (scene.moving ? offset : 0));
+  return /* @__PURE__ */ jsxs4("span", { "aria-label": label, className: cn("qsl:flex qsl:items-center qsl:gap-2.5 qsl:text-chat", compact ? "qsl:text-inherit" : "qsl:mt-4 qsl:text-foreground"), "data-chat": "working", role: "status", children: [
+    !compact && /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: "qsl:text-muted-foreground qsl:opacity-70", children: ">" }),
+    /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: cn("qsl:inline-block qsl:flex-none qsl:font-mono qsl:[font-variant-ligatures:none]", compact ? "qsl:w-[2.4em] qsl:text-center" : "qsl:w-[15rem]"), children: /* @__PURE__ */ jsx11("span", { className: "qsl:tracking-[0.02em] qsl:whitespace-pre qsl:motion-reduce:opacity-60", children: typeof frame === "string" ? frame : frame.map((cell, index) => /* @__PURE__ */ jsx11("span", { className: "qsl:inline-block qsl:w-[1.35em] qsl:text-center", children: cell }, index)) }) }, scene.id)
+  ] });
+}
+
+// packages/quassel/src/attachments.ts
+var maxAttachmentSizeLabel = `${MAX_CHAT_ATTACHMENT_BYTES / (1024 * 1024)} MiB`;
+function attachmentMediaType(file) {
+  return chatAttachmentMediaType(file.name, file.type);
+}
+function attachmentCapabilityError(files, capabilities, texts = defaultTexts) {
+  for (const file of files) {
+    const required = file.mediaType.startsWith("image/") ? "image" : file.mediaType.startsWith("video/") ? "video" : file.mediaType === "application/pdf" ? "file" : void 0;
+    if (required && !capabilities.input.includes(required)) {
+      const kind = required === "image" ? texts.attachmentKindImage : required === "video" ? texts.attachmentKindVideo : texts.attachmentKindPdf;
+      if (!capabilities.model) return fillText(texts.attachmentUnsupported, { name: file.name, kind });
+      return fillText(texts.attachmentUnsupportedByModel, { model: capabilities.model, name: file.name, kind });
+    }
+  }
+}
+function validateAttachmentSelection(existing, incoming, texts = defaultTexts) {
+  if (existing.length + incoming.length > MAX_CHAT_ATTACHMENTS) {
+    throw new Error(fillText(texts.tooManyAttachments, { count: MAX_CHAT_ATTACHMENTS }));
+  }
+  if ([...existing, ...incoming].reduce((total, file) => total + file.size, 0) > MAX_CHAT_ATTACHMENT_BYTES) {
+    throw new Error(fillText(texts.attachmentsTooLarge, { size: maxAttachmentSizeLabel }));
+  }
+}
+async function encodeAttachment(file) {
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  const chunks = [];
+  for (let offset = 0; offset < bytes.length; offset += 8192) {
+    chunks.push(String.fromCharCode(...bytes.subarray(offset, offset + 8192)));
+  }
+  return { name: file.name, mediaType: attachmentMediaType(file), data: btoa(chunks.join("")) };
+}
+function formatAttachmentSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MiB`;
+}
+function attachmentDownloadUrl(url) {
+  if (/^(data|blob):/i.test(url)) return url;
+  const [resource, fragment] = url.split(/#(.*)/s);
+  return `${resource}${resource.includes("?") ? "&" : "?"}download=1${fragment === void 0 ? "" : `#${fragment}`}`;
+}
+
+// packages/quassel/src/ChatMessages.tsx
+import { CheckIcon as CheckIcon4, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, LayersIcon, SparklesIcon as SparklesIcon2, WrenchIcon as WrenchIcon2 } from "lucide-react";
+
+// packages/quassel/src/options.ts
+var cssLength = (value) => typeof value === "number" ? `${value}px` : value;
+var appearanceStyle = (appearance) => ({
+  "--qsl-font-size": cssLength(appearance?.fontSize),
+  "--qsl-chat-font-size": cssLength(appearance?.fontSize),
+  "--qsl-chat-line-height": appearance?.lineHeight,
+  "--qsl-chat-message-gap": cssLength(appearance?.messageGap),
+  "--qsl-chat-dense-message-gap": cssLength(appearance?.denseMessageGap),
+  "--qsl-tool-font-scale": appearance?.toolFontScale,
+  "--qsl-tool-group-gap": cssLength(appearance?.toolGroupGap),
+  "--qsl-tool-row-padding": cssLength(appearance?.toolRowPadding)
+});
+
+// packages/quassel/src/timestamps.ts
+function messageDate(at) {
+  if (!at) return void 0;
+  const date = new Date(at);
+  return Number.isNaN(date.getTime()) ? void 0 : date;
+}
+function timestampLabel(date, options = {}, now = Date.now()) {
+  if ((!options.format || options.format === "time") && !options.locale && !options.timeZone) {
+    return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+  }
+  if (options.format === "relative") {
+    const seconds = (date.getTime() - now) / 1e3;
+    const units = [
+      ["year", 365 * 86400],
+      ["month", 30 * 86400],
+      ["day", 86400],
+      ["hour", 3600],
+      ["minute", 60]
+    ];
+    const [unit, divisor] = units.find(([, value]) => Math.abs(seconds) >= value) ?? ["second", 1];
+    return new Intl.RelativeTimeFormat(options.locale, { numeric: "auto" }).format(Math.round(seconds / divisor), unit);
+  }
+  return new Intl.DateTimeFormat(options.locale, {
+    timeZone: options.timeZone,
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23",
+    ...options.format === "date-time" ? { year: "numeric", month: "2-digit", day: "2-digit" } : {}
+  }).format(date);
+}
+function timestampDay(date, options = {}) {
+  const key = new Intl.DateTimeFormat("en-CA", {
+    timeZone: options.timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(date);
+  const label = new Intl.DateTimeFormat(options.locale, {
+    timeZone: options.timeZone,
+    dateStyle: "long"
+  }).format(date);
+  return { key, label };
+}
+
+// packages/quassel/src/elapsed.ts
+import { useSyncExternalStore } from "react";
+var tickMs = 500;
+function formatElapsed(ms, texts) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  if (total < 60) return fillText(texts.toolElapsedSeconds, { seconds: total });
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total / 60) % 60;
+  const seconds = String(total % 60).padStart(2, "0");
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
+}
+function createTicker(intervalMs2 = tickMs) {
+  const listeners = /* @__PURE__ */ new Set();
+  let now = Date.now();
+  let timer;
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      if (timer === void 0) {
+        now = Date.now();
+        timer = setInterval(() => {
+          now = Date.now();
+          listeners.forEach((notify) => notify());
+        }, intervalMs2);
+      }
+      return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0 && timer !== void 0) {
+          clearInterval(timer);
+          timer = void 0;
+        }
+      };
+    },
+    now() {
+      const current = Date.now();
+      if (timer === void 0 && (current - now >= intervalMs2 || current < now)) now = current;
+      return now;
+    },
+    active: () => timer !== void 0
+  };
+}
+var elapsedTicker = createTicker();
+var nothingOnServer = () => void 0;
+function useElapsed(start) {
+  return useSyncExternalStore(elapsedTicker.subscribe, () => Math.floor((elapsedTicker.now() - start) / 1e3) * 1e3, nothingOnServer);
+}
+
+// packages/quassel/src/MessageActions.tsx
+import { CheckIcon as CheckIcon3, CopyIcon as CopyIcon2, PencilIcon, RotateCcwIcon } from "lucide-react";
+import { useState as useState3 } from "react";
+import { Fragment, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var actionClasses = cn(
+  "qsl:absolute qsl:top-1 qsl:right-1 qsl:z-[1] qsl:flex qsl:flex-wrap qsl:rounded-sm qsl:bg-secondary qsl:opacity-0",
+  "qsl:shadow-[0_2px_6px_color-mix(in_srgb,var(--qsl-foreground)_15%,transparent)]",
+  "qsl:pointer-events-none qsl:group-hover:pointer-events-auto qsl:group-hover:opacity-100 qsl:focus-within:pointer-events-auto qsl:focus-within:opacity-100",
+  "qsl:[@media(hover:none)]:pointer-events-auto qsl:[@media(hover:none)]:opacity-100"
+);
+function MessageActions({ message, options, texts }) {
+  const action = useChatAction();
+  const { Button: Button2 } = useQuasselComponents();
+  const [lastAction, setLastAction] = useState3();
+  const copy = typeof options?.copy === "function" ? options.copy(message) : options?.copy ?? message.role === "user";
+  const actions = [
+    ...copy && message.text.trim() ? [{ id: "copy", label: texts.copyMessage, icon: /* @__PURE__ */ jsx12(CopyIcon2, {}), onClick: () => copyChatText(message.text, texts.clipboardUnavailable) }] : [],
+    ...options?.edit && message.role === "user" ? [{ id: "edit", label: texts.editMessage, icon: /* @__PURE__ */ jsx12(PencilIcon, {}), onClick: options.edit }] : [],
+    ...options?.retry && message.role === "assistant" ? [{ id: "retry", label: texts.retryMessage, icon: /* @__PURE__ */ jsx12(RotateCcwIcon, {}), onClick: options.retry }] : [],
+    ...options?.custom?.(message) ?? []
+  ];
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    actions.length > 0 && /* @__PURE__ */ jsx12("div", { className: actionClasses, children: actions.map((item) => {
+      const copied = item.id === "copy" && lastAction === item.id && action.status === "done";
+      const label = copied ? texts.copied : item.label;
+      return /* @__PURE__ */ jsx12(
+        Button2,
+        {
+          "aria-label": label,
+          className: "qsl:text-inherit",
+          disabled: item.disabled || action.status === "pending",
+          size: item.icon ? "icon-sm" : "sm",
+          title: label,
+          variant: "ghost",
+          onClick: () => {
+            setLastAction(item.id);
+            void action.invoke(() => item.onClick(message), texts.actionFailed);
+          },
+          children: copied ? /* @__PURE__ */ jsx12(CheckIcon3, {}) : item.icon ?? item.label
+        },
+        item.id
+      );
+    }) }),
+    action.error && /* @__PURE__ */ jsx12("p", { className: "qsl:mt-2 qsl:text-sm qsl:text-destructive", role: "alert", children: action.error })
+  ] });
+}
+
+// packages/quassel/src/ChatSendContext.ts
+import { createContext as createContext3 } from "react";
+var ChatSendContext = createContext3(void 0);
+function createChatSendScope(enabled) {
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    notify: () => {
+      if (enabled.current) listeners.forEach((listener) => listener());
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+
+// packages/quassel/src/ChatActionDock.ts
+import { createContext as createContext4 } from "react";
+var ChatActionDock = createContext4(void 0);
+
+// packages/quassel/src/announce.ts
+var intervalMs = 400;
+var maxQueued = 5;
+var region;
+var queued = [];
+var running = false;
+function liveRegion() {
+  if (region?.isConnected) {
+    return region;
+  }
+  const element = document.createElement("div");
+  element.setAttribute("role", "status");
+  element.setAttribute("aria-live", "polite");
+  element.setAttribute("aria-atomic", "true");
+  Object.assign(element.style, {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    margin: "-1px",
+    padding: "0",
+    border: "0",
+    overflow: "hidden",
+    clipPath: "inset(50%)",
+    whiteSpace: "nowrap"
+  });
+  document.body.append(element);
+  region = element;
+  return element;
+}
+function next() {
+  if (queued.length === 0) {
+    running = false;
+    return;
+  }
+  if (document.visibilityState === "hidden") {
+    document.addEventListener("visibilitychange", next, { once: true });
+    return;
+  }
+  const [text, ...rest] = queued;
+  queued = rest;
+  const target = liveRegion();
+  target.textContent = target.textContent === text ? `${text}\xA0` : text;
+  window.setTimeout(next, intervalMs);
+}
+function announce(text) {
+  const content = text.trim();
+  if (!content || typeof document === "undefined") {
+    return;
+  }
+  queued = [...queued, content].slice(-maxQueued);
+  if (running) {
+    return;
+  }
+  running = true;
+  liveRegion();
+  window.setTimeout(next, intervalMs);
+}
+
+// packages/quassel/src/ChatMessages.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var stepClasses = "qsl:mt-[var(--qsl-chat-message-gap,10px)]";
+var denseStepClasses = "qsl:mt-[var(--qsl-chat-dense-message-gap,3px)]";
+var traceClasses = "qsl:flex qsl:w-full qsl:gap-2 qsl:py-[var(--qsl-tool-row-padding,1px)] qsl:pl-6 qsl:text-left qsl:text-trace qsl:leading-[1.375] qsl:text-muted-foreground";
+var traceButtonClasses = "qsl:cursor-pointer qsl:rounded-md qsl:pr-2 qsl:transition-colors qsl:hover:bg-secondary qsl:hover:text-foreground qsl:focus-visible:bg-secondary qsl:focus-visible:text-foreground qsl:focus-visible:outline-none";
+var traceIconClasses = "qsl:mt-0.5 qsl:flex-none qsl:opacity-60";
+var traceErrorIconClasses = "qsl:mt-0.5 qsl:flex-none qsl:text-destructive qsl:opacity-100";
+var traceLineClasses = "qsl:min-w-0 qsl:self-baseline qsl:[overflow-wrap:anywhere]";
+var traceRunningClasses = "qsl:ml-1.5 qsl:opacity-60";
+var rowIconClasses = cn(traceIconClasses, "qsl:mt-0");
+var rowErrorIconClasses = cn(traceErrorIconClasses, "qsl:mt-0");
+var rowLineClasses = cn(traceLineClasses, "qsl:self-auto");
+var chipClasses = cn(
+  "qsl:inline-flex qsl:max-w-[220px] qsl:items-center qsl:gap-[5px] qsl:rounded-full qsl:border qsl:border-border-soft qsl:px-2.5 qsl:py-0.5",
+  "qsl:text-meta qsl:leading-[1.6] qsl:text-muted-foreground qsl:transition-colors",
+  "qsl:data-[state=running]:border-[color-mix(in_srgb,var(--qsl-primary)_40%,var(--qsl-border-soft))]",
+  "qsl:data-[state=thinking]:border-[color-mix(in_srgb,var(--qsl-primary)_40%,var(--qsl-border-soft))]",
+  "qsl:data-[state=error]:border-[color-mix(in_srgb,var(--qsl-destructive)_45%,var(--qsl-border-soft))]",
+  "qsl:data-[state=done]:opacity-85"
+);
+var chipInteractiveClasses = "qsl:cursor-pointer qsl:hover:border-border qsl:hover:bg-secondary qsl:hover:text-foreground qsl:focus-visible:border-border qsl:focus-visible:bg-secondary qsl:focus-visible:text-foreground qsl:focus-visible:outline-none qsl:data-[state=done]:hover:opacity-100 qsl:data-[state=done]:focus-visible:opacity-100";
+var collapseAtBottomFrom = 11;
+var maxAnnouncementsAtOnce = 2;
+var bubbleBodyClasses = "qsl:relative qsl:max-w-[86%] qsl:px-3 qsl:py-2 qsl:leading-[var(--qsl-chat-line-height,1.5)] qsl:[overflow-wrap:anywhere] qsl:@max-[620px]/chat:max-w-full";
+function isStep(message) {
+  return !!message && (message.role === "thinking" || message.role === "tool");
+}
+function isOpenAction(message) {
+  return message.role === "action" && message.action !== void 0 && message.action.status === void 0;
+}
+function defaultArgumentsText(tool) {
+  return prettyJson(tool.arguments);
+}
+function ChatMessages({
+  messages,
+  owner,
+  detailMode = "current",
+  transcriptMode = "all",
+  running: running2 = false,
+  working,
+  stepsExpandable = true,
+  groupsExpandable = true,
+  texts,
+  toolArgumentsText = defaultArgumentsText,
+  renderTool,
+  renderAction,
+  onDismissAction,
+  onLinkClick,
+  emptyState,
+  className,
+  scrollerClassName,
+  showTimestamps = false,
+  announce: announce2,
+  scrollerRef,
+  maxWidth,
+  horizontalPadding,
+  jumpToEndThreshold = 120,
+  appearance,
+  timestampOptions,
+  codeBlockOptions,
+  bubbleOptions,
+  messageActions,
+  toolElapsedThreshold = 3e3
+}) {
+  const selected = useMemo3(() => {
+    if (transcriptMode === "all") return messages;
+    const answers = /* @__PURE__ */ new Set();
+    let hasAnswer = false;
+    for (let index = messages.length - 1; index >= 0; index--) {
+      const message = messages[index];
+      if (message.role === "user") {
+        hasAnswer = false;
+      } else if (message.role === "assistant" && !hasAnswer && (message.text.trim() !== "" || message.attachments?.length)) {
+        answers.add(message);
+        hasAnswer = true;
+      }
+    }
+    return messages.filter((message) => message.role !== "assistant" || answers.has(message));
+  }, [messages, transcriptMode]);
+  const allTexts = { ...defaultTexts, ...texts };
+  const { Button: Button2 } = useQuasselComponents();
+  const scrollArea = useRef3(null);
+  const threadRef = useRef3(null);
+  const scrollbarDragging = useRef3(false);
+  const touchY = useRef3(void 0);
+  const [showJumpToEnd, setShowJumpToEnd] = useState4(false);
+  const [scroll] = useState4(() => createChatScroll());
+  const sendScope = useContext3(ChatSendContext);
+  const dock = useContext3(ChatActionDock);
+  const [now, setNow] = useState4(() => Date.now());
+  useEffect3(() => {
+    if (!showTimestamps || timestampOptions?.format !== "relative") return;
+    setNow(Date.now());
+    const timer = window.setInterval(() => setNow(Date.now()), 15e3);
+    return () => window.clearInterval(timer);
+  }, [showTimestamps, timestampOptions?.format]);
+  const announced = useRef3(new Set(messages.map((message) => message.key)));
+  useEffect3(() => {
+    const due = messages.filter((message, index) => !announced.current.has(message.key) && (message.role === "action" ? isOpenAction(message) : message.role === "assistant" && message.text.trim() !== "" && (message.closed === true || !running2 && index === messages.length - 1)));
+    if (due.length === 0) {
+      return;
+    }
+    announced.current = /* @__PURE__ */ new Set([...announced.current, ...due.map((message) => message.key)]);
+    if (announce2 === false || due.length > maxAnnouncementsAtOnce) {
+      return;
+    }
+    due.filter((message) => selected.includes(message)).map((message) => announce2 ? announce2({ kind: message.role === "action" ? "action" : "reply", message }) : markdownPlainText(message.text)).forEach((text) => text && announce(text));
+  }, [messages, selected, running2, announce2]);
+  const updateJumpVisibility = useCallback2((viewport) => {
+    if (viewport.clientHeight > 0) setShowJumpToEnd(viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop > jumpToEndThreshold);
+  }, [jumpToEndThreshold]);
+  useLayoutEffect(() => sendScope?.subscribe(() => {
+    const viewport = scrollArea.current;
+    if (!viewport) return;
+    scroll.jump(viewport);
+    updateJumpVisibility(viewport);
+  }), [sendScope, scroll, updateJumpVisibility]);
+  const pauseUp = (viewport, target) => {
+    let element = target instanceof Element ? target : null;
+    while (element && element !== viewport) {
+      if (element.scrollTop > 0 && /auto|scroll/.test(getComputedStyle(element).overflowY)) return;
+      element = element.parentElement;
+    }
+    scroll.pause(viewport);
+  };
+  const checkEnd = useCallback2(() => {
+    const area = scrollArea.current;
+    if (area) {
+      scroll.scroll(area, scrollbarDragging.current);
+      updateJumpVisibility(area);
+    }
+  }, [scroll, updateJumpVisibility]);
+  useEffect3(() => {
+    const finishDrag = () => {
+      if (scrollbarDragging.current && scrollArea.current) scroll.scroll(scrollArea.current, true);
+      scrollbarDragging.current = false;
+    };
+    window.addEventListener("pointerup", finishDrag);
+    window.addEventListener("pointercancel", finishDrag);
+    return () => {
+      window.removeEventListener("pointerup", finishDrag);
+      window.removeEventListener("pointercancel", finishDrag);
+    };
+  }, [scroll]);
+  useLayoutEffect(() => {
+    const area = scrollArea.current;
+    if (!area) return;
+    const align = () => {
+      scroll.layout(area, scrollbarDragging.current);
+      updateJumpVisibility(area);
+    };
+    align();
+    const observer = new ResizeObserver(align);
+    observer.observe(area);
+    if (threadRef.current) observer.observe(threadRef.current, { box: "border-box" });
+    return () => observer.disconnect();
+  });
+  const visible = useMemo3(
+    () => {
+      const lastNonUser = selected.reduce((last, message, index) => message.role === "user" ? last : index, -1);
+      return selected.filter((message, index) => {
+        if (dock !== void 0 && isOpenAction(message)) {
+          return false;
+        }
+        if (detailMode === "current" && isStep(message)) {
+          return running2 && index === lastNonUser && (message.role === "thinking" ? !message.closed : stepState(message) === "running");
+        }
+        if ((message.role === "thinking" || message.role === "assistant") && message.text.trim() === "" && !message.attachments?.length) {
+          return false;
+        }
+        if (message.role === "thinking" || message.role === "tool") {
+          return detailMode !== "off";
+        }
+        return true;
+      });
+    },
+    [selected, detailMode, running2, dock]
+  );
+  const openActions = dock ? messages.filter(isOpenAction) : [];
+  const withTime = (content, key, at, dense = false) => showTimestamps ? /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn("qsl:flex", timestampOptions?.position === "above" ? "qsl:flex-col qsl:items-stretch qsl:gap-1" : "qsl:items-baseline qsl:gap-2", dense ? denseStepClasses : stepClasses),
+      "data-chat": "timestamped",
+      "data-timestamp-position": timestampOptions?.position ?? "aside",
+      children: [
+        /* @__PURE__ */ jsx13("time", { dateTime: messageDate(at)?.toISOString(), className: cn(
+          "qsl:flex-none qsl:text-timestamp qsl:leading-[1.375] qsl:tabular-nums qsl:text-muted-foreground qsl:opacity-85",
+          timestampOptions?.position === "above" ? "qsl:self-start" : timestampOptions?.format && timestampOptions.format !== "time" ? "qsl:w-[clamp(60px,20%,120px)]" : "qsl:min-w-[5ch] qsl:whitespace-nowrap"
+        ), children: messageDate(at) ? timestampLabel(messageDate(at), timestampOptions, now) : "" }),
+        /* @__PURE__ */ jsx13("div", { className: "qsl:min-w-0 qsl:flex-1 qsl:[&>*:first-child]:mt-0", children: content })
+      ]
+    },
+    `time-${key}`
+  ) : content;
+  const chipMode = detailMode === "current" || detailMode === "chips" || detailMode === "icons";
+  const elapsedAfter = running2 && toolElapsedThreshold !== false ? toolElapsedThreshold : void 0;
+  const groupMode = detailMode === "grouped";
+  const blocks = [];
+  let lastDay;
+  let group = [];
+  const closeGroup = () => {
+    if (group.length > 0) {
+      const runningStep = running2 ? [...group].reverse().find((message) => ["running", "thinking"].includes(stepState(message))) : void 0;
+      blocks.push(withTime(
+        groupMode ? /* @__PURE__ */ jsx13(
+          StepGroup,
+          {
+            elapsedAfter,
+            expandable: stepsExpandable,
+            groupExpandable: groupsExpandable,
+            runningStep,
+            messages: group,
+            texts: allTexts,
+            toolArgumentsText
+          },
+          group[0].key
+        ) : /* @__PURE__ */ jsx13(
+          StepRow,
+          {
+            elapsedAfter,
+            expandable: stepsExpandable,
+            messages: group,
+            withText: detailMode !== "icons",
+            texts: allTexts,
+            toolArgumentsText,
+            toolLabel: detailMode === "current" && !stepsExpandable ? allTexts.currentTool : void 0
+          },
+          group[0].key
+        ),
+        group[0].key,
+        group[0].at
+      ));
+      group = [];
+    }
+  };
+  visible.forEach((message, index) => {
+    const date = timestampOptions?.showDaySeparators ? messageDate(message.at) : void 0;
+    if (date) {
+      const day = timestampDay(date, timestampOptions);
+      if (day.key !== lastDay) {
+        closeGroup();
+        blocks.push(/* @__PURE__ */ jsx13("div", { className: cn(stepClasses, "qsl:text-center qsl:text-xs qsl:text-muted-foreground"), "data-chat": "day-separator", "data-day": day.key, children: day.label }, `day-${message.key}`));
+        lastDay = day.key;
+      }
+    }
+    const customRendering = message.role === "tool" && message.tool && detailMode !== "current" ? renderTool?.(message.tool) : void 0;
+    if (customRendering !== void 0) {
+      closeGroup();
+      blocks.push(withTime(
+        /* @__PURE__ */ jsx13("div", { className: stepClasses, children: customRendering }, message.key),
+        message.key,
+        message.at
+      ));
+      return;
+    }
+    if ((chipMode || groupMode) && isStep(message)) {
+      group.push(message);
+      return;
+    }
+    closeGroup();
+    const dense = isStep(message) && isStep(visible[index - 1]);
+    blocks.push(withTime(
+      /* @__PURE__ */ jsx13(
+        Bubble,
+        {
+          detailMode,
+          dense,
+          elapsedAfter,
+          expandable: stepsExpandable,
+          message,
+          plain: owner != null && message.sender === owner,
+          texts: allTexts,
+          toolArgumentsText,
+          renderAction,
+          onDismissAction,
+          bubbleOptions,
+          messageActions
+        },
+        message.key
+      ),
+      message.key,
+      message.at,
+      dense
+    ));
+  });
+  closeGroup();
+  const transcript = /* @__PURE__ */ jsxs6("div", { className: cn("qsl:@container/chat qsl:relative qsl:flex qsl:min-h-0 qsl:flex-1 qsl:flex-col", className), "data-quassel": "", style: {
+    ...appearanceStyle(appearance),
+    "--qsl-chat-content-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+    "--qsl-chat-horizontal-padding": typeof horizontalPadding === "number" ? `${horizontalPadding}px` : horizontalPadding,
+    "--qsl-timestamp-font-size": timestampOptions?.fontScale === void 0 ? void 0 : `calc(var(--qsl-base) * ${timestampOptions.fontScale})`
+  }, children: [
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        "aria-label": allTexts.transcript,
+        className: cn(
+          "qsl:min-h-0 qsl:flex-1 qsl:cursor-default qsl:overflow-y-auto qsl:overscroll-contain qsl:text-chat qsl:text-foreground",
+          "qsl:[--qsl-fade-edge:calc(100%_-_var(--qsl-composer-height,0px))]",
+          "qsl:[-webkit-mask-image:linear-gradient(to_bottom,#000_calc(var(--qsl-fade-edge)_-_40px),transparent_calc(var(--qsl-fade-edge)_+_16px))]",
+          "qsl:[mask-image:linear-gradient(to_bottom,#000_calc(var(--qsl-fade-edge)_-_40px),transparent_calc(var(--qsl-fade-edge)_+_16px))]",
+          "qsl:in-data-[tone=material]:p-0",
+          scrollerClassName
+        ),
+        "data-quassel-transcript": "",
+        onScroll: checkEnd,
+        onWheel: (event) => {
+          if (!event.ctrlKey && event.deltaY < 0) pauseUp(event.currentTarget, event.target);
+        },
+        onKeyDown: (event) => {
+          const editable = event.target instanceof Element && event.target.closest("input, textarea, select, [contenteditable=true]");
+          if (!editable && (["ArrowUp", "PageUp", "Home"].includes(event.key) || event.target === event.currentTarget && event.key === " " && event.shiftKey)) pauseUp(event.currentTarget, event.target);
+        },
+        onPointerDown: (event) => {
+          const viewport = event.currentTarget;
+          scrollbarDragging.current = event.clientX >= viewport.getBoundingClientRect().right - Math.max(16, viewport.offsetWidth - viewport.clientWidth);
+        },
+        onTouchStart: (event) => {
+          touchY.current = event.touches[0]?.clientY;
+        },
+        onTouchMove: (event) => {
+          const next2 = event.touches[0]?.clientY;
+          if (next2 !== void 0 && touchY.current !== void 0 && next2 > touchY.current) pauseUp(event.currentTarget, event.target);
+          touchY.current = next2;
+        },
+        role: "region",
+        tabIndex: 0,
+        ref: (element) => {
+          scrollArea.current = element;
+          scrollerRef?.(element);
+        },
+        children: visible.length === 0 && !running2 ? emptyState ?? null : /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            "aria-busy": running2 || void 0,
+            className: cn(
+              "qsl:mx-auto qsl:w-[calc(100%_-_2_*_var(--qsl-chat-horizontal-padding,24px))] qsl:max-w-[var(--qsl-chat-content-max-width,none)] qsl:pt-2",
+              "qsl:pb-[calc(var(--qsl-composer-height,0px)_+_max(3.25em,40px))]",
+              "qsl:in-data-[tone=material]:[&>*:first-child]:mt-0"
+            ),
+            ref: threadRef,
+            children: [
+              blocks,
+              running2 && (working ?? /* @__PURE__ */ jsx13(WorkingScenes, { label: allTexts.working }))
+            ]
+          }
+        )
+      }
+    ),
+    showJumpToEnd && /* @__PURE__ */ jsx13("div", { className: "qsl:pointer-events-none qsl:absolute qsl:inset-x-0 qsl:bottom-[calc(var(--qsl-composer-height,0px)_+_12px)] qsl:z-10 qsl:flex qsl:justify-center", children: /* @__PURE__ */ jsx13(Button2, { "aria-label": allTexts.jumpToEnd, className: "qsl:pointer-events-auto qsl:rounded-full qsl:border qsl:border-primary-foreground/20 qsl:shadow-md", size: "icon", title: allTexts.jumpToEnd, variant: "default", onClick: () => {
+      if (scrollArea.current) {
+        scroll.jump(scrollArea.current);
+        updateJumpVisibility(scrollArea.current);
+      }
+    }, children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) }) }),
+    dock && openActions.length > 0 && createPortal(
+      /* @__PURE__ */ jsx13("div", { className: "qsl:flex qsl:flex-col qsl:gap-[var(--qsl-chat-dense-message-gap,3px)] qsl:text-chat qsl:text-foreground", style: appearanceStyle(appearance), children: openActions.map((message) => /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(ActionContent, { action: message.action, onDismissAction, renderAction, text: message.text, texts: allTexts }) }, message.key)) }),
+      dock
+    )
+  ] });
+  return /* @__PURE__ */ jsx13(MarkdownLinks, { onLinkClick, children: /* @__PURE__ */ jsx13(MarkdownCodeBlocks, { options: codeBlockOptions, texts: allTexts, children: transcript }) });
+}
+function StepRow({
+  messages,
+  withText,
+  expandable,
+  elapsedAfter,
+  texts,
+  toolArgumentsText,
+  toolLabel
+}) {
+  const [detail, setDetail] = useState4();
+  const open = expandable && detail && messages.find((message) => message.key === detail.key);
+  return /* @__PURE__ */ jsxs6("div", { className: cn(stepClasses, "qsl:flex qsl:flex-wrap qsl:items-center qsl:gap-x-1.5 qsl:gap-y-1 qsl:pl-6"), "data-step": "row", children: [
+    messages.map((message) => {
+      const thinking = message.role === "thinking";
+      const tool = message.tool;
+      const state = stepState(message);
+      const running2 = state === "running" || state === "thinking";
+      const label = thinking ? texts.thinkingChip : toolLabel ?? (tool?.name || message.text || texts.toolChip);
+      const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        thinking ? /* @__PURE__ */ jsx13(SparklesIcon2, { size: 11 }) : /* @__PURE__ */ jsx13(WrenchIcon2, { className: tool?.isError ? "qsl:text-destructive" : void 0, size: 11 }),
+        withText && /* @__PURE__ */ jsx13("span", { className: "qsl:min-w-0 qsl:self-baseline qsl:overflow-hidden qsl:text-ellipsis qsl:whitespace-nowrap", children: label }),
+        withText && /* @__PURE__ */ jsx13(ToolElapsed, { after: elapsedAfter, className: "qsl:flex-none qsl:self-baseline", message, texts }),
+        withText && /* @__PURE__ */ jsx13("span", { className: "qsl:inline-flex qsl:w-2.5 qsl:flex-none qsl:items-center qsl:justify-center qsl:text-success", children: state === "done" && /* @__PURE__ */ jsx13(CheckIcon4, { size: 10 }) })
+      ] });
+      const classes = cn(chipClasses, !withText && "qsl:p-1", running2 && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none");
+      if (!expandable) {
+        return /* @__PURE__ */ jsx13("span", { className: classes, "data-kind": thinking ? "thinking" : "tool", "data-state": state, "data-step": "chip", title: label, children: content }, message.key);
+      }
+      return /* @__PURE__ */ jsx13(
+        "button",
+        {
+          "aria-haspopup": "dialog",
+          className: cn(classes, chipInteractiveClasses),
+          "data-kind": thinking ? "thinking" : "tool",
+          "data-state": state,
+          "data-step": "chip",
+          onClick: (event) => setDetail({ key: message.key, position: stepPopoverOrigin(event) }),
+          title: label,
+          type: "button",
+          children: content
+        },
+        message.key
+      );
+    }),
+    open && detail && /* @__PURE__ */ jsx13(
+      StepPopover,
+      {
+        message: open,
+        position: detail.position,
+        texts,
+        toolArgumentsText,
+        onClose: () => setDetail(void 0)
+      }
+    )
+  ] });
+}
+function StepGroup({
+  messages,
+  runningStep,
+  elapsedAfter,
+  expandable,
+  groupExpandable,
+  texts,
+  toolArgumentsText
+}) {
+  const [open, setOpen] = useState4(false);
+  const header = useRef3(null);
+  const collapsedFromBottom = useRef3(false);
+  useLayoutEffect(() => {
+    if (!open && collapsedFromBottom.current) {
+      collapsedFromBottom.current = false;
+      header.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [open]);
+  const active = runningStep !== void 0;
+  const errorCount = messages.filter((message) => message.tool?.isError).length;
+  const errorLabel = errorCount === 1 ? texts.stepGroupErrorOne ?? defaultTexts.stepGroupErrorOne : (texts.stepGroupErrorMany ?? defaultTexts.stepGroupErrorMany).replace("{count}", String(errorCount));
+  const count = messages.length === 1 ? texts.stepGroupOne : texts.stepGroupMany.replace("{count}", String(messages.length));
+  const runningLabel = runningStep && (runningStep.role === "thinking" ? texts.thinkingChip : runningStep.tool?.name || runningStep.text || texts.toolChip);
+  const summary = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx13(LayersIcon, { className: errorCount > 0 ? rowErrorIconClasses : rowIconClasses, size: 12 }),
+    /* @__PURE__ */ jsxs6("span", { className: cn(rowLineClasses, "qsl:overflow-hidden qsl:text-ellipsis qsl:whitespace-nowrap"), children: [
+      count,
+      errorCount > 0 && /* @__PURE__ */ jsx13("span", { className: "qsl:text-destructive", "data-step": "errors", children: `, ${errorLabel}` }),
+      runningLabel && /* @__PURE__ */ jsxs6("span", { className: traceRunningClasses, children: [
+        runningLabel,
+        " ",
+        texts.toolRunning
+      ] }),
+      runningStep && /* @__PURE__ */ jsx13(ToolElapsed, { after: elapsedAfter, message: runningStep, texts })
+    ] })
+  ] });
+  if (!groupExpandable) {
+    return /* @__PURE__ */ jsx13("div", { className: stepClasses, "data-step": "group", children: /* @__PURE__ */ jsx13("div", { className: cn(traceClasses, "qsl:items-center qsl:pr-2 qsl:pl-1", active && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none"), children: summary }) });
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: stepClasses, "data-step": "group", children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        "aria-expanded": open,
+        className: cn(traceClasses, traceButtonClasses, "qsl:items-center qsl:pl-1", active && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none"),
+        onClick: () => setOpen((value) => !value),
+        ref: header,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx13(ChevronRightIcon, { className: cn("qsl:flex-none qsl:opacity-60 qsl:transition-transform", open && "qsl:rotate-90"), size: 12 }),
+          summary
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx13("div", { className: "qsl:mt-0.5 qsl:flex qsl:flex-col qsl:gap-[var(--qsl-tool-group-gap,1px)] qsl:pl-3", children: messages.map((message) => /* @__PURE__ */ jsx13(TraceLine, { className: "qsl:pl-3", elapsedAfter, expandable, message, texts, toolArgumentsText }, message.key)) }),
+    open && messages.length >= collapseAtBottomFrom && /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        className: cn(traceClasses, traceButtonClasses, "qsl:mt-0.5 qsl:items-center qsl:pl-1"),
+        "data-step": "group-collapse",
+        onClick: () => {
+          collapsedFromBottom.current = true;
+          setOpen(false);
+        },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx13(ChevronUpIcon, { className: "qsl:flex-none qsl:opacity-60", size: 12 }),
+          /* @__PURE__ */ jsx13("span", { className: rowLineClasses, children: texts.stepGroupCollapse })
+        ]
+      }
+    )
+  ] });
+}
+function TraceLine({
+  message,
+  className,
+  elapsedAfter,
+  expandable,
+  texts,
+  toolArgumentsText
+}) {
+  const [detailPosition, setDetailPosition] = useState4();
+  const thinking = message.role === "thinking";
+  const tool = message.tool;
+  const classes = cn(traceClasses, "qsl:items-center", className);
+  const line = cn(rowLineClasses, thinking && "qsl:italic qsl:whitespace-pre-wrap", "qsl:overflow-hidden qsl:text-ellipsis qsl:whitespace-nowrap");
+  const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    thinking ? /* @__PURE__ */ jsx13(SparklesIcon2, { className: rowIconClasses, size: 12 }) : /* @__PURE__ */ jsx13(WrenchIcon2, { className: tool?.isError ? rowErrorIconClasses : rowIconClasses, size: 12 }),
+    /* @__PURE__ */ jsxs6("span", { className: line, children: [
+      message.text,
+      tool && tool.result === void 0 && /* @__PURE__ */ jsx13("span", { className: traceRunningClasses, children: texts.toolRunning }),
+      /* @__PURE__ */ jsx13(ToolElapsed, { after: elapsedAfter, message, texts })
+    ] })
+  ] });
+  const marks = { "data-compact": "true", "data-kind": thinking ? "thinking" : "tool", "data-step": "line" };
+  if (!expandable) {
+    return /* @__PURE__ */ jsx13("div", { className: classes, ...marks, children: content });
+  }
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx13(
+      "button",
+      {
+        "aria-expanded": detailPosition !== void 0,
+        "aria-haspopup": "dialog",
+        className: cn(classes, traceButtonClasses),
+        ...marks,
+        onClick: (event) => setDetailPosition(stepPopoverOrigin(event)),
+        type: "button",
+        children: content
+      }
+    ),
+    detailPosition && /* @__PURE__ */ jsx13(
+      StepPopover,
+      {
+        message,
+        position: detailPosition,
+        texts,
+        toolArgumentsText,
+        onClose: () => setDetailPosition(void 0)
+      }
+    )
+  ] });
+}
+function ToolElapsed({ message, after, texts, className = traceRunningClasses }) {
+  const start = stepState(message) === "running" ? messageDate(message.at)?.getTime() : void 0;
+  return after === void 0 || start === void 0 ? null : /* @__PURE__ */ jsx13(Elapsed, { after, className, start, texts });
+}
+function Elapsed({ start, after, className, texts }) {
+  const elapsed = useElapsed(start);
+  if (elapsed === void 0 || elapsed < after) return null;
+  return /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: cn(className, "qsl:tabular-nums"), "data-step": "elapsed", children: formatElapsed(elapsed, texts) });
+}
+function Bubble({
+  message,
+  plain,
+  detailMode,
+  dense,
+  elapsedAfter,
+  expandable,
+  texts,
+  toolArgumentsText,
+  renderAction,
+  onDismissAction,
+  bubbleOptions,
+  messageActions
+}) {
+  const stepSpacing = dense ? denseStepClasses : stepClasses;
+  if (message.role === "thinking" || message.role === "tool" && message.tool) {
+    if (detailMode === "compact") {
+      return /* @__PURE__ */ jsx13(TraceLine, { className: stepSpacing, elapsedAfter, expandable, message, texts, toolArgumentsText });
+    }
+    const thinking = message.role === "thinking";
+    const tool = message.tool;
+    const icon = thinking ? /* @__PURE__ */ jsx13(SparklesIcon2, { className: traceIconClasses, size: 12 }) : /* @__PURE__ */ jsx13(WrenchIcon2, { className: tool?.isError ? traceErrorIconClasses : traceIconClasses, size: 12 });
+    const line = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      message.text,
+      tool && tool.result === void 0 && /* @__PURE__ */ jsx13("span", { className: traceRunningClasses, children: texts.toolRunning }),
+      /* @__PURE__ */ jsx13(ToolElapsed, { after: elapsedAfter, message, texts })
+    ] });
+    return /* @__PURE__ */ jsxs6("div", { className: cn(traceClasses, stepSpacing), "data-kind": thinking ? "thinking" : "tool", "data-step": "detail", children: [
+      icon,
+      /* @__PURE__ */ jsxs6("div", { className: "qsl:min-w-0 qsl:flex-1", children: [
+        /* @__PURE__ */ jsx13("div", { className: cn(traceLineClasses, thinking && "qsl:italic qsl:whitespace-pre-wrap"), children: line }),
+        tool && /* @__PURE__ */ jsxs6("div", { className: "qsl:mt-0.5 qsl:border-l-2 qsl:border-border-soft qsl:pl-2", children: [
+          /* @__PURE__ */ jsx13("pre", { className: "qsl:mb-0.5 qsl:max-h-[208px] qsl:overflow-auto qsl:overscroll-contain qsl:font-mono qsl:text-meta qsl:leading-[1.375] qsl:break-all qsl:whitespace-pre-wrap qsl:opacity-80", children: toolArgumentsText(tool) }),
+          tool.result !== void 0 && /* @__PURE__ */ jsx13("pre", { className: cn(
+            "qsl:mb-0.5 qsl:max-h-[208px] qsl:overflow-auto qsl:overscroll-contain qsl:font-mono qsl:text-meta qsl:leading-[1.375] qsl:break-all qsl:whitespace-pre-wrap qsl:opacity-80",
+            tool.isError && "qsl:text-destructive qsl:opacity-100"
+          ), children: prettyJson(tool.result) })
+        ] })
+      ] })
+    ] });
+  }
+  if (message.role === "action" && message.action) {
+    return /* @__PURE__ */ jsx13("div", { className: stepSpacing, children: /* @__PURE__ */ jsx13(ActionContent, { action: message.action, onDismissAction, renderAction, text: message.text, texts }) });
+  }
+  if (message.role === "system") {
+    return /* @__PURE__ */ jsxs6("div", { className: cn(stepSpacing, "qsl:border-l-2 qsl:border-destructive/50 qsl:pl-3 qsl:text-sm qsl:text-muted-foreground"), "data-message": "system", children: [
+      /* @__PURE__ */ jsx13(Markdown, { text: message.text }),
+      /* @__PURE__ */ jsx13(MessageAttachments, { label: texts.attachments, message })
+    ] });
+  }
+  if (!message.text.trim() && !message.attachments?.length) return null;
+  const variant = bubbleOptions?.variant ?? "default";
+  const useBubble = !plain && variant !== "plain" && (variant === "bubbles" || message.role === "user" || !!message.bubble);
+  const side = (message.role === "user" ? bubbleOptions?.userSide : bubbleOptions?.assistantSide) ?? message.bubble?.side ?? (message.role === "user" ? "end" : "start");
+  const sender = bubbleOptions?.senderLabel?.(message) ?? message.bubble?.label ?? message.sender;
+  const showSender = bubbleOptions?.showSender ?? (!!message.bubble?.label && !plain);
+  const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    showSender && sender && /* @__PURE__ */ jsx13("span", { className: cn(
+      "qsl:mb-[5px] qsl:table qsl:text-label qsl:leading-[1.45] qsl:font-semibold",
+      useBubble && message.bubble && "qsl:rounded-full qsl:border qsl:border-white/30 qsl:bg-black/15 qsl:px-[7px] qsl:py-px qsl:tracking-[0.02em]"
+    ), "data-chat": "sender", children: sender }),
+    /* @__PURE__ */ jsx13(Markdown, { text: message.text, streaming: message.role === "assistant" && !message.closed }),
+    /* @__PURE__ */ jsx13(MessageAttachments, { label: texts.attachments, message }),
+    message.steered && /* @__PURE__ */ jsx13("small", { className: "qsl:mt-1 qsl:block qsl:text-label qsl:leading-[1.45] qsl:opacity-70", "data-chat": "steered", children: texts.steered }),
+    /* @__PURE__ */ jsx13(MessageActions, { message, options: messageActions, texts })
+  ] });
+  const cursor = message.role === "assistant" && message.textCursor ? JSON.stringify(message.textCursor) : void 0;
+  if (!useBubble) return /* @__PURE__ */ jsx13("div", { "data-chat-text-cursor": cursor, className: cn(stepSpacing, "qsl:group qsl:relative qsl:w-full qsl:leading-[var(--qsl-chat-line-height,1.5)] qsl:text-foreground"), "data-message": "answer", children: content });
+  const fullBackground = message.role === "user" && bubbleOptions?.userBackgroundFullWidth !== false;
+  const surfaceClasses = message.bubble ? "qsl:rounded-lg" : "qsl:rounded-[var(--qsl-bubble-radius,10px_10px_4px_10px)] qsl:border qsl:border-border qsl:bg-secondary qsl:in-data-[tone=material]:rounded-[var(--qsl-bubble-radius,9px)] qsl:in-data-[tone=material]:border-glass-edge/20 qsl:in-data-[tone=material]:bg-primary/15";
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      "data-chat-text-cursor": cursor,
+      className: cn(stepSpacing, "qsl:relative qsl:flex", side === "end" ? "qsl:justify-end" : "qsl:justify-start"),
+      "data-message": message.role === "user" && !message.bubble && variant === "default" ? "user" : "bubble",
+      "data-side": side,
+      "data-background-width": fullBackground ? "full" : "content",
+      children: [
+        fullBackground && /* @__PURE__ */ jsx13("div", { "aria-hidden": "true", className: cn("qsl:pointer-events-none qsl:absolute qsl:inset-0", surfaceClasses), "data-chat": "bubble-background", style: { background: message.bubble?.color } }),
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: cn(bubbleBodyClasses, "qsl:group", !fullBackground && surfaceClasses, fullBackground && !message.bubble && "qsl:border qsl:border-transparent", message.bubble ? "qsl:text-white qsl:[--qsl-scroll-cover:var(--qsl-primary)]" : "qsl:text-foreground qsl:[--qsl-scroll-cover:var(--qsl-secondary)]"),
+            "data-chat": "bubble-content",
+            "data-tone": message.bubble ? "on-color" : void 0,
+            style: { background: fullBackground ? void 0 : message.bubble?.color, maxWidth: bubbleOptions?.maxWidth },
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+function ActionContent({
+  action,
+  text,
+  texts,
+  renderAction,
+  onDismissAction
+}) {
+  return renderAction?.(action, text) ?? /* @__PURE__ */ jsx13(
+    PendingActionCard,
+    {
+      action,
+      dismissedLabel: texts.actionDismissed,
+      dismissLabel: texts.dismissAction,
+      onDismiss: onDismissAction ? () => onDismissAction(action.actionId) : void 0,
+      text,
+      waitingLabel: texts.pendingAction
+    }
+  );
+}
+function MessageAttachments({ message, label }) {
+  if (!message.attachments?.length) return null;
+  return /* @__PURE__ */ jsx13("ul", { className: "qsl:mt-2.5 qsl:flex qsl:flex-wrap qsl:gap-2", "aria-label": label, children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsxs6("li", { className: "qsl:relative qsl:flex qsl:w-[190px] qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-sm", children: [
+    attachment.mediaType.startsWith("image/") && /* @__PURE__ */ jsx13("a", { href: attachmentDownloadUrl(attachment.url), download: attachment.name, children: /* @__PURE__ */ jsx13("img", { className: "qsl:block qsl:h-[112px] qsl:w-full qsl:bg-secondary qsl:object-contain", src: attachment.url, alt: attachment.name, loading: "lazy" }) }),
+    attachment.mediaType.startsWith("video/") && /* @__PURE__ */ jsx13("video", { className: "qsl:block qsl:h-[112px] qsl:w-full qsl:bg-secondary qsl:object-contain", src: attachment.url, controls: true, preload: "metadata", "aria-label": attachment.name }),
+    /* @__PURE__ */ jsxs6("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:[overflow-wrap:anywhere]", children: [
+      /* @__PURE__ */ jsx13("a", { className: "qsl:font-medium", href: attachmentDownloadUrl(attachment.url), download: attachment.name, children: attachment.name }),
+      /* @__PURE__ */ jsx13("small", { children: formatAttachmentSize(attachment.size) })
+    ] })
+  ] }, `${attachment.url}-${index}`)) });
+}
+
+// packages/quassel/src/ChatPanel.tsx
+import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState5 } from "react";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+function ChatPanel({
+  children,
+  composer,
+  className,
+  nodeRef,
+  maxWidth,
+  horizontalPadding,
+  appearance,
+  scrollOnSend = false
+}) {
+  const root = useRef4(null);
+  const composerRef = useRef4(null);
+  const [dock, setDock] = useState5(null);
+  const hasComposer = composer !== void 0;
+  const scrollOnSendRef = useRef4(scrollOnSend);
+  const [sendScope] = useState5(() => createChatSendScope(scrollOnSendRef));
+  useLayoutEffect2(() => {
+    scrollOnSendRef.current = scrollOnSend;
+  }, [scrollOnSend]);
+  useEffect4(() => {
+    const element = composerRef.current;
+    const frame = root.current;
+    if (!element || !frame) {
+      return;
+    }
+    const measure = () => {
+      frame.style.setProperty("--qsl-composer-height", `${element.offsetHeight}px`);
+      frame.style.setProperty("--qsl-panel-height", `${frame.offsetHeight}px`);
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    observer.observe(frame);
+    measure();
+    return () => {
+      observer.disconnect();
+      frame.style.removeProperty("--qsl-composer-height");
+      frame.style.removeProperty("--qsl-panel-height");
+    };
+  }, [hasComposer]);
+  return /* @__PURE__ */ jsx14(ChatSendContext.Provider, { value: sendScope, children: /* @__PURE__ */ jsx14(ChatActionDock.Provider, { value: hasComposer ? dock : void 0, children: /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn("qsl:relative qsl:flex qsl:min-h-0 qsl:min-w-0 qsl:flex-col qsl:overflow-hidden", className),
+      "data-chat": "panel",
+      "data-quassel": "",
+      style: {
+        ...appearanceStyle(appearance),
+        "--qsl-chat-content-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+        "--qsl-chat-horizontal-padding": typeof horizontalPadding === "number" ? `${horizontalPadding}px` : horizontalPadding
+      },
+      ref: (element) => {
+        root.current = element;
+        if (typeof nodeRef === "function") {
+          nodeRef(element);
+        } else if (nodeRef) {
+          nodeRef.current = element;
+        }
+      },
+      children: [
+        children,
+        hasComposer && /* @__PURE__ */ jsxs7("div", { className: "qsl:absolute qsl:inset-x-0 qsl:bottom-0 qsl:z-[5] qsl:px-[var(--qsl-chat-horizontal-padding,24px)] qsl:pb-3.5 qsl:*:mx-auto qsl:*:max-w-[var(--qsl-chat-content-max-width,none)]", "data-chat": "composer", ref: composerRef, children: [
+          /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: "qsl:-mx-[16px] qsl:max-h-[calc(var(--qsl-panel-height,100dvh)_/_2)] qsl:overflow-y-auto qsl:overscroll-contain qsl:px-[16px] qsl:pb-[var(--qsl-chat-message-gap,10px)] qsl:[-webkit-mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--qsl-chat-message-gap,10px)),transparent)] qsl:[mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--qsl-chat-message-gap,10px)),transparent)] qsl:empty:hidden",
+              "data-chat": "actions",
+              ref: setDock
+            }
+          ) }),
+          composer
+        ] })
+      ]
+    }
+  ) }) });
+}
+
+// packages/quassel/src/ChatInputToolbar.tsx
+import { PaperclipIcon, SendIcon, XIcon as XIcon3 } from "lucide-react";
+
+// packages/quassel/src/ui/useFileInput.ts
+import { useRef as useRef5, useState as useState6 } from "react";
+function useFileInput({ disabled, onFiles, onPasteText }) {
+  const inputRef = useRef5(null);
+  const [dragging, setDragging] = useState6(false);
+  const receive = (files) => {
+    if (files.length) void onFiles(files);
+  };
+  return {
+    inputRef,
+    dragging,
+    clearDragging: () => setDragging(false),
+    inputProps: {
+      ref: inputRef,
+      onChange: (event) => {
+        const files = Array.from(event.currentTarget.files ?? []);
+        event.currentTarget.value = "";
+        receive(files);
+      }
+    },
+    dropProps: {
+      onDragOver: (event) => {
+        if (!event.dataTransfer.types.includes("Files")) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+        setDragging(!disabled);
+      },
+      onDragLeave: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+      },
+      onDrop: (event) => {
+        if (!event.dataTransfer.types.includes("Files")) return;
+        event.preventDefault();
+        setDragging(false);
+        receive(Array.from(event.dataTransfer.files));
+      },
+      onPaste: (event) => {
+        const files = Array.from(event.clipboardData.files);
+        if (!files.length) return;
+        event.preventDefault();
+        receive(files);
+        const text = event.clipboardData.getData("text/plain");
+        if (text) onPasteText?.(text);
+      }
+    }
+  };
+}
+
+// packages/quassel/src/ChatInputToolbar.tsx
+import { useCallback as useCallback3, useContext as useContext4, useEffect as useEffect5, useImperativeHandle, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState7 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var COMPACT_WIDTH_PX = 480;
+var errorClasses = "qsl:px-3 qsl:py-2 qsl:text-sm qsl:text-destructive";
+var attachmentItemClasses = "qsl:relative qsl:flex qsl:w-[190px] qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-sm";
+var attachmentMediaClasses = "qsl:block qsl:h-[112px] qsl:w-full qsl:bg-secondary qsl:object-contain";
+function ChatInputToolbar({
+  onSend,
+  onStop,
+  running: running2 = false,
+  disabled = false,
+  sendDisabled = false,
+  layout = "card",
+  detailsContainer,
+  onErrorChange,
+  inputAriaControls,
+  rows = 3,
+  maxRows,
+  actions,
+  toolbarLeft,
+  toolbarRight,
+  texts,
+  handleRef,
+  attachments: attachmentsEnabled = true,
+  attachmentCapabilities,
+  attachmentCapabilitiesError,
+  onAttachmentsChange,
+  initialValue = "",
+  onDraftChange,
+  sendShortcut = "enter",
+  autoFocus = false,
+  onAutoFocusSettled
+}) {
+  const sendScope = useContext4(ChatSendContext);
+  const allTexts = { ...defaultTexts, ...texts };
+  const { Button: Button2, StopButton: StopButton2, Toggle: Toggle2 } = useQuasselComponents();
+  const [draft, setDraft] = useState7(initialValue);
+  const [sending, setSending] = useState7(false);
+  const [sendError, setSendError] = useState7();
+  const [failedSubmissions, setFailedSubmissions] = useState7([]);
+  const nextFailedId = useRef6(0);
+  const pendingSend = useRef6(false);
+  const generation = useRef6(0);
+  useLayoutEffect3(() => () => {
+    generation.current += 1;
+  }, []);
+  const draftRevision = useRef6(0);
+  const [attachments, setAttachments] = useState7([]);
+  const attachmentsRef = useRef6([]);
+  const nextAttachmentId = useRef6(0);
+  const [attachmentError, setAttachmentError] = useState7();
+  const updateAttachments = (update) => {
+    attachmentsRef.current = update(attachmentsRef.current);
+    setAttachments(attachmentsRef.current);
+  };
+  const addFiles = (files) => {
+    if (!files.length) return;
+    if (disabled || pendingSend.current) {
+      setAttachmentError(allTexts.attachmentsWhileBusy);
+      return;
+    }
+    try {
+      validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), files, allTexts);
+    } catch (error) {
+      setAttachmentError(error instanceof Error ? error.message : String(error));
+      return;
+    }
+    setAttachmentError(void 0);
+    const entries = files.map((file) => ({ id: ++nextAttachmentId.current, file, status: "reading" }));
+    updateAttachments((current) => [...current, ...entries]);
+    for (const entry of entries) {
+      void encodeAttachment(entry.file).then(
+        (input2) => updateAttachments((current) => current.map((item) => item.id === entry.id ? { ...entry, status: "ready", input: input2 } : item)),
+        () => updateAttachments((current) => current.map((item) => item.id === entry.id ? {
+          ...entry,
+          status: "error",
+          error: allTexts.attachmentReadFailed
+        } : item))
+      );
+    }
+  };
+  const rootRef = useRef6(null);
+  const textareaRef = useRef6(null);
+  const autoFocusSettled = useRef6(false);
+  useEffect5(() => {
+    if (!autoFocus || autoFocusSettled.current) return;
+    const input2 = textareaRef.current;
+    if (!input2) return;
+    let frame = 0;
+    const settle = () => {
+      if (autoFocusSettled.current) return;
+      autoFocusSettled.current = true;
+      window.cancelAnimationFrame(frame);
+      onAutoFocusSettled?.();
+    };
+    const onFocus = (event) => {
+      if (event.target !== input2) settle();
+    };
+    const focusWhenVisible = () => {
+      if (autoFocusSettled.current) return;
+      const dialog = [...document.querySelectorAll('[role="dialog"], dialog[open]')].find((element) => element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true }) && !element.contains(input2));
+      if (dialog) {
+        settle();
+        return;
+      }
+      const rect = input2.getBoundingClientRect();
+      const visible = input2.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true }) && rect.width > 0 && rect.height > 0 && !input2.closest('[inert], [hidden], [aria-hidden="true"]') && document.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2) === input2;
+      if (visible && !input2.disabled && !input2.readOnly && document.visibilityState === "visible") {
+        input2.focus({ preventScroll: true });
+        if (document.activeElement === input2) {
+          settle();
+          return;
+        }
+      }
+      frame = window.requestAnimationFrame(focusWhenVisible);
+    };
+    window.addEventListener("pointerdown", settle, true);
+    window.addEventListener("keydown", settle, true);
+    window.addEventListener("focusin", onFocus);
+    window.addEventListener("blur", settle);
+    if (!disabled) frame = window.requestAnimationFrame(focusWhenVisible);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      window.removeEventListener("pointerdown", settle, true);
+      window.removeEventListener("keydown", settle, true);
+      window.removeEventListener("focusin", onFocus);
+      window.removeEventListener("blur", settle);
+    };
+  }, [autoFocus, disabled, onAutoFocusSettled]);
+  const [compact, setCompact] = useState7(false);
+  const pendingFocus = useRef6(false);
+  const fileInput = useFileInput({
+    disabled: disabled || sending,
+    onFiles: addFiles,
+    onPasteText: (text) => {
+      const input2 = textareaRef.current;
+      if (!input2 || disabled || pendingSend.current) return;
+      const start = input2.selectionStart;
+      const end = input2.selectionEnd;
+      draftRevision.current += 1;
+      setDraft((current) => current.slice(0, start) + text + current.slice(end));
+      pendingFocus.current = true;
+    }
+  });
+  const toolbar = layout === "toolbar";
+  const inline = layout === "inline";
+  const inputRows = inline || toolbar ? 1 : rows;
+  const inputMaxRows = toolbar ? 1 : inline ? maxRows ?? 1 : maxRows;
+  const rootClasses = cn(
+    "qsl:flex qsl:shrink-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-[var(--qsl-input-card-radius,--theme(--radius-xl))] qsl:border qsl:border-border-strong qsl:bg-background qsl:shadow-bar qsl:transition-colors qsl:focus-within:border-primary",
+    "qsl:in-data-[tone=material]:rounded-xl qsl:in-data-[tone=material]:border-glass-edge/50 qsl:in-data-[tone=material]:bg-background",
+    toolbar && "qsl:h-full qsl:min-w-0 qsl:flex-row qsl:items-center qsl:rounded-lg qsl:data-[working=true]:animate-working-pulse qsl:data-[working=true]:border-primary qsl:motion-reduce:data-[working=true]:animate-none",
+    fileInput.dragging && "qsl:outline-2 qsl:outline-offset-[3px] qsl:outline-dashed qsl:outline-primary"
+  );
+  const textareaClasses = cn(
+    "qsl:resize-none qsl:overscroll-contain qsl:border-0 qsl:bg-transparent qsl:text-chat qsl:leading-[var(--qsl-chat-line-height,1.5)] qsl:text-foreground qsl:placeholder:text-muted-foreground qsl:focus:outline-none",
+    inline ? "qsl:min-w-0 qsl:flex-1 qsl:px-2.5 qsl:py-2" : toolbar ? "qsl:w-full qsl:min-w-0 qsl:flex-auto qsl:px-2 qsl:py-[3px] qsl:leading-[1.3]" : "qsl:px-3 qsl:pt-3 qsl:pb-2"
+  );
+  const toolbarRowClasses = cn(
+    "qsl:flex qsl:items-center qsl:gap-2 qsl:border-t qsl:border-border-soft qsl:px-2 qsl:py-1.5 qsl:in-data-[tone=overseer-details]:flex-nowrap",
+    inline && "qsl:flex-none qsl:gap-1 qsl:border-t-0 qsl:p-1",
+    toolbar && "qsl:flex-wrap qsl:border-t-0"
+  );
+  const toolbarSideClasses = "qsl:flex qsl:min-w-0 qsl:items-center qsl:gap-2 qsl:in-data-[tone=overseer-details]:flex-nowrap";
+  const changeDraft = useCallback3((text) => {
+    draftRevision.current += 1;
+    setDraft(text);
+  }, []);
+  useImperativeHandle(handleRef, () => ({
+    insert: (text) => {
+      pendingFocus.current = true;
+      changeDraft(text);
+      const element = textareaRef.current;
+      element?.focus();
+      if (element?.value === text) element.setSelectionRange(text.length, text.length);
+    },
+    focus: () => textareaRef.current?.focus(),
+    submit: (onSubmit, options) => send(onSubmit, options?.allowEmpty),
+    reset: () => {
+      generation.current += 1;
+      pendingSend.current = false;
+      pendingFocus.current = false;
+      changeDraft("");
+      updateAttachments(() => []);
+      setSendError(void 0);
+      setFailedSubmissions([]);
+      setAttachmentError(void 0);
+      setSending(false);
+      fileInput.clearDragging();
+    }
+  }));
+  useEffect5(() => {
+    onDraftChange?.(draft);
+  }, [draft, onDraftChange]);
+  useEffect5(() => {
+    if (!pendingFocus.current) {
+      return;
+    }
+    pendingFocus.current = false;
+    const element = textareaRef.current;
+    if (element) {
+      element.focus();
+      element.setSelectionRange(element.value.length, element.value.length);
+    }
+  }, [draft, sending]);
+  const applyAutoGrow = useCallback3(() => {
+    const element = textareaRef.current;
+    if (!element || inputMaxRows === void 0) {
+      return;
+    }
+    const style = getComputedStyle(element);
+    const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.4;
+    const padding = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+    const maximum = lineHeight * Math.max(inputMaxRows, inputRows) + padding;
+    element.style.height = "auto";
+    const contentHeight = element.scrollHeight;
+    element.style.height = `${Math.min(contentHeight, maximum)}px`;
+    element.style.overflowY = contentHeight > maximum ? "auto" : "hidden";
+  }, [inputMaxRows, inputRows]);
+  useEffect5(() => {
+    applyAutoGrow();
+  }, [draft, applyAutoGrow]);
+  useEffect5(() => {
+    const element = textareaRef.current;
+    if (!element || inputMaxRows === void 0) {
+      return;
+    }
+    let lastWidth = element.clientWidth;
+    const observer = new ResizeObserver(() => {
+      if (element.clientWidth !== lastWidth) {
+        lastWidth = element.clientWidth;
+        applyAutoGrow();
+      }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [inputMaxRows, applyAutoGrow]);
+  useEffect5(() => {
+    const element = rootRef.current;
+    if (!element) {
+      return;
+    }
+    const update = () => setCompact(element.clientWidth < COMPACT_WIDTH_PX);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  const hasAttachments = attachments.length > 0;
+  useEffect5(() => {
+    onAttachmentsChange?.(hasAttachments);
+  }, [hasAttachments, onAttachmentsChange]);
+  const capabilityError = hasAttachments && attachmentCapabilitiesError ? attachmentCapabilitiesError : attachmentCapabilities ? attachmentCapabilityError(attachments.map((entry) => ({
+    name: entry.file.name,
+    mediaType: attachmentMediaType(entry.file)
+  })), attachmentCapabilities, allTexts) : void 0;
+  const hasContent = draft.trim().length > 0 || attachments.length > 0;
+  const preparing = attachments.some((entry) => entry.status === "reading");
+  const attachmentBlocked = attachments.some((entry) => entry.status !== "ready");
+  const currentError = sendError ?? attachmentError ?? capabilityError ?? attachments.find((entry) => entry.status === "error")?.error;
+  useEffect5(() => {
+    onErrorChange?.(currentError);
+  }, [currentError, onErrorChange]);
+  const send = async (onSubmit = onSend, allowEmpty = false) => {
+    const text = draft.trim();
+    const snapshot = attachmentsRef.current;
+    if (!allowEmpty && !text && !snapshot.length || disabled || sendDisabled || pendingSend.current || capabilityError || snapshot.some((entry) => entry.status !== "ready")) {
+      return;
+    }
+    pendingSend.current = true;
+    const sentGeneration = generation.current;
+    const sentRevision = draftRevision.current;
+    const sentDraft = draft;
+    const focusOrigin = document.activeElement;
+    const startedFocused = focusOrigin === textareaRef.current || rootRef.current?.contains(focusOrigin);
+    let leftComposer = false;
+    const observeFocus = (event) => {
+      const target = event.target;
+      if (target instanceof Node && !rootRef.current?.contains(target) && !detailsContainer?.contains(target)) leftComposer = true;
+    };
+    document.addEventListener("focusin", observeFocus);
+    document.addEventListener("pointerdown", observeFocus);
+    setSending(true);
+    setSendError(void 0);
+    setDraft("");
+    updateAttachments(() => []);
+    try {
+      const inputs = snapshot.flatMap((entry) => entry.status === "ready" ? [entry.input] : []);
+      await onSubmit(text, inputs.length ? inputs : void 0);
+      if (generation.current === sentGeneration && (text || inputs.length)) sendScope?.notify();
+    } catch (error) {
+      if (generation.current !== sentGeneration) return;
+      if (draftRevision.current === sentRevision) {
+        setDraft(sentDraft);
+        updateAttachments((current) => [...snapshot, ...current]);
+      } else if (sentDraft || snapshot.length) {
+        const failed = { id: ++nextFailedId.current, draft: sentDraft, attachments: snapshot };
+        setFailedSubmissions((current) => [...current, failed]);
+      }
+      setSendError(error instanceof Error ? error.message : String(error));
+    } finally {
+      document.removeEventListener("focusin", observeFocus);
+      document.removeEventListener("pointerdown", observeFocus);
+      if (generation.current === sentGeneration) {
+        pendingSend.current = false;
+        pendingFocus.current = !!startedFocused && !leftComposer && document.hasFocus() && (!toolbar || focusOrigin !== textareaRef.current) && (document.activeElement === focusOrigin || !toolbar && document.activeElement === document.body);
+        setSending(false);
+      }
+    }
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229 && (sendShortcut === "enter" || event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      if (!event.repeat) void send();
+    }
+  };
+  const attachmentPreviews = attachments.length > 0 && /* @__PURE__ */ jsx15("ul", { className: "qsl:flex qsl:max-h-[240px] qsl:flex-wrap qsl:gap-2 qsl:overflow-y-auto qsl:overscroll-contain qsl:px-3 qsl:pt-2.5 qsl:in-data-[tone=overseer-details]:max-h-40 qsl:in-data-[tone=overseer-details]:overflow-y-auto", "aria-label": allTexts.attachments, children: attachments.map((entry) => /* @__PURE__ */ jsxs8("li", { className: attachmentItemClasses, children: [
+    entry.status === "ready" && entry.input.mediaType.startsWith("image/") && /* @__PURE__ */ jsx15("img", { className: attachmentMediaClasses, src: `data:${entry.input.mediaType};base64,${entry.input.data}`, alt: entry.file.name }),
+    entry.status === "ready" && entry.input.mediaType.startsWith("video/") && /* @__PURE__ */ jsx15("video", { className: attachmentMediaClasses, controls: true, preload: "metadata", "aria-label": entry.file.name, src: `data:${entry.input.mediaType};base64,${entry.input.data}` }),
+    /* @__PURE__ */ jsxs8("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:pr-8 qsl:[overflow-wrap:anywhere]", children: [
+      /* @__PURE__ */ jsx15("span", { className: "qsl:font-medium", title: entry.file.name, children: entry.file.name }),
+      /* @__PURE__ */ jsx15("small", { children: formatAttachmentSize(entry.file.size) }),
+      entry.status === "reading" && /* @__PURE__ */ jsx15("small", { role: "status", children: allTexts.attachmentPreparing }),
+      entry.status === "error" && /* @__PURE__ */ jsx15("small", { role: "alert", children: entry.error })
+    ] }),
+    /* @__PURE__ */ jsx15(
+      Button2,
+      {
+        "aria-label": fillText(allTexts.removeAttachment, { name: entry.file.name }),
+        className: "qsl:absolute qsl:top-1 qsl:right-1",
+        disabled: disabled || sending,
+        onClick: () => {
+          updateAttachments((current) => current.filter((item) => item.id !== entry.id));
+          setAttachmentError(void 0);
+          textareaRef.current?.focus();
+        },
+        size: "icon-sm",
+        title: fillText(allTexts.removeAttachment, { name: entry.file.name }),
+        variant: "outline",
+        children: /* @__PURE__ */ jsx15(XIcon3, {})
+      }
+    )
+  ] }, entry.id)) });
+  const errors = /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    capabilityError && /* @__PURE__ */ jsx15("p", { className: errorClasses, role: "alert", children: capabilityError }),
+    attachmentError && /* @__PURE__ */ jsx15("p", { className: errorClasses, role: "alert", children: attachmentError }),
+    sendError && /* @__PURE__ */ jsx15("p", { className: errorClasses, role: "alert", children: sendError }),
+    failedSubmissions.map((failed) => /* @__PURE__ */ jsxs8("div", { className: cn(errorClasses, "qsl:flex qsl:flex-wrap qsl:items-center qsl:gap-2"), role: "status", children: [
+      /* @__PURE__ */ jsxs8("span", { children: [
+        allTexts.notSent,
+        " ",
+        failed.draft.slice(0, 100),
+        failed.draft.length > 100 ? " ..." : "",
+        failed.attachments.length > 0 ? ` ${fillText(allTexts.notSentAttachments, { count: failed.attachments.length })}` : "",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx15(Button2, { disabled: disabled || sending, size: "sm", variant: "outline", onClick: () => {
+        try {
+          validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), failed.attachments.map((entry) => entry.file), allTexts);
+        } catch (error) {
+          setAttachmentError(error instanceof Error ? error.message : String(error));
+          return;
+        }
+        draftRevision.current += 1;
+        setDraft((current) => [current, failed.draft].filter(Boolean).join("\n\n"));
+        updateAttachments((current) => [...current, ...failed.attachments]);
+        setFailedSubmissions((current) => current.filter((entry) => entry.id !== failed.id));
+        setAttachmentError(void 0);
+        pendingFocus.current = true;
+      }, children: allTexts.insertUnsent })
+    ] }, failed.id))
+  ] });
+  const sendButtons = /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    running2 && onStop && !hasContent && /* @__PURE__ */ jsx15(StopButton2, { className: "qsl:flex-none", label: allTexts.stop, onClick: onStop, size: "icon-sm" }),
+    (!running2 || !onStop || hasContent) && /* @__PURE__ */ jsx15(
+      Button2,
+      {
+        "aria-label": allTexts.send,
+        className: "qsl:flex-none",
+        disabled: disabled || sendDisabled || sending || attachmentBlocked || !!capabilityError || !hasContent,
+        onClick: () => {
+          void send();
+        },
+        size: "icon-sm",
+        title: running2 ? allTexts.sendIntoRun : allTexts.send,
+        children: /* @__PURE__ */ jsx15(SendIcon, { size: 14 })
+      }
+    )
+  ] });
+  const detailToolbar = /* @__PURE__ */ jsxs8("div", { className: toolbarRowClasses, "data-input": "controls", children: [
+    /* @__PURE__ */ jsxs8("div", { className: cn(toolbarSideClasses, "qsl:in-data-[tone=overseer-details]:flex-none", inline || toolbar ? "qsl:flex-none" : "qsl:flex-auto"), children: [
+      attachmentsEnabled && /* @__PURE__ */ jsx15(
+        Button2,
+        {
+          "aria-label": allTexts.attachFiles,
+          disabled: disabled || sending,
+          onClick: () => fileInput.inputRef.current?.click(),
+          size: "icon-sm",
+          title: fillText(allTexts.attachFilesHint, { count: MAX_CHAT_ATTACHMENTS, size: maxAttachmentSizeLabel }),
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx15(PaperclipIcon, {})
+        }
+      ),
+      preparing && /* @__PURE__ */ jsx15("span", { className: cn("qsl:text-xs qsl:text-muted-foreground", inline && "qsl:sr-only"), role: "status", children: allTexts.attachmentsPreparing }),
+      actions?.map((action, index) => action.active === void 0 ? /* @__PURE__ */ jsxs8(Button2, { disabled: action.disabled, onClick: action.onClick, size: "sm", title: action.title ?? action.label, variant: "ghost", children: [
+        action.icon,
+        action.label && /* @__PURE__ */ jsx15("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
+      ] }, index) : /* @__PURE__ */ jsxs8(Toggle2, { disabled: action.disabled, onPressedChange: () => action.onClick(), pressed: action.active, size: "sm", title: action.title ?? action.label, children: [
+        action.icon,
+        action.label && /* @__PURE__ */ jsx15("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
+      ] }, index)),
+      toolbarLeft
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: cn(toolbarSideClasses, "qsl:in-data-[tone=overseer-details]:flex-1", inline || toolbar ? "qsl:flex-none" : "qsl:flex-[0_1_auto]"), children: [
+      toolbarRight,
+      !toolbar && sendButtons
+    ] })
+  ] });
+  const details = /* @__PURE__ */ jsxs8("div", { className: "qsl:min-w-0", "data-compact": compact, "data-quassel": "", children: [
+    attachmentPreviews,
+    errors,
+    detailToolbar
+  ] });
+  const input = /* @__PURE__ */ jsx15(
+    "textarea",
+    {
+      "aria-controls": inputAriaControls,
+      className: textareaClasses,
+      "aria-label": allTexts.placeholder,
+      disabled: !toolbar && disabled,
+      readOnly: toolbar && disabled,
+      onChange: (event) => changeDraft(event.target.value),
+      onKeyDown,
+      placeholder: running2 ? allTexts.steeringPlaceholder : allTexts.placeholder,
+      ref: textareaRef,
+      rows: inputRows,
+      value: draft
+    }
+  );
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: rootClasses,
+      "data-compact": compact,
+      "data-layout": layout,
+      "data-quassel": "",
+      "data-working": running2 || sending,
+      ref: rootRef,
+      ...attachmentsEnabled ? fileInput.dropProps : {},
+      children: [
+        attachmentsEnabled && /* @__PURE__ */ jsx15(
+          "input",
+          {
+            "aria-label": allTexts.attachFiles,
+            hidden: true,
+            multiple: true,
+            type: "file",
+            ...fileInput.inputProps
+          }
+        ),
+        !toolbar && attachmentPreviews,
+        inline ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          errors,
+          /* @__PURE__ */ jsxs8("div", { className: "qsl:flex qsl:min-w-0 qsl:items-end", children: [
+            input,
+            detailToolbar
+          ] })
+        ] }) : input,
+        toolbar ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx15("div", { className: "qsl:flex qsl:flex-none qsl:items-center qsl:gap-1 qsl:p-1", children: sendButtons }),
+          detailsContainer && createPortal2(details, detailsContainer)
+        ] }) : !inline && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          errors,
+          detailToolbar
+        ] })
+      ]
+    }
+  );
+}
+
+// packages/quassel/src/DetailModeSwitch.tsx
+import { CircleDotIcon, EyeOffIcon, ListCollapseIcon, ListIcon, ShapesIcon, TagsIcon, TextAlignJustifyIcon } from "lucide-react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var DETAIL_MODES = ["off", "current", "icons", "chips", "grouped", "compact", "full"];
+var TEXT_KEYS = {
+  off: "detailModeOff",
+  current: "detailModeCurrent",
+  icons: "detailModeIcons",
+  chips: "detailModeChips",
+  grouped: "detailModeGrouped",
+  compact: "detailModeCompact",
+  full: "detailModeFull"
+};
+var ICONS = {
+  off: EyeOffIcon,
+  current: CircleDotIcon,
+  icons: ShapesIcon,
+  chips: TagsIcon,
+  grouped: ListCollapseIcon,
+  compact: ListIcon,
+  full: TextAlignJustifyIcon
+};
+var detailModeLabel = (mode, texts) => ({ ...defaultTexts, ...texts })[TEXT_KEYS[mode]];
+function DetailModeSwitch({
+  mode,
+  onChange,
+  modes = DETAIL_MODES,
+  texts,
+  className
+}) {
+  const allTexts = { ...defaultTexts, ...texts };
+  const { Button: Button2 } = useQuasselComponents();
+  const current = modes.indexOf(mode);
+  const next2 = modes[(current < 0 ? 0 : current + 1) % modes.length];
+  const Icon = ICONS[mode];
+  const title = `${allTexts.detailModeTitle}: ${detailModeLabel(mode, texts)}`;
+  return /* @__PURE__ */ jsx16(Button2, { "aria-label": title, className, onClick: () => onChange(next2), size: "icon-sm", title, variant: "ghost", children: /* @__PURE__ */ jsx16(Icon, {}) });
+}
+
+// packages/quassel/src/TranscriptModeSwitch.tsx
+import { MessagesSquareIcon, MessageSquareIcon } from "lucide-react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function TranscriptModeSwitch({ mode, onChange, texts, className }) {
+  const labels = { ...defaultTexts, ...texts };
+  const { Button: Button2 } = useQuasselComponents();
+  const latest = mode === "latest";
+  const title = latest ? labels.showAllMessages : labels.showLatestExchange;
+  return /* @__PURE__ */ jsx17(
+    Button2,
+    {
+      "aria-label": title,
+      "aria-pressed": latest,
+      className,
+      onClick: () => onChange(latest ? "all" : "latest"),
+      size: "icon-sm",
+      title,
+      variant: "ghost",
+      children: latest ? /* @__PURE__ */ jsx17(MessageSquareIcon, {}) : /* @__PURE__ */ jsx17(MessagesSquareIcon, {})
+    }
+  );
+}
+
+// packages/quassel/src/TimestampSwitch.tsx
+import { ClockFadingIcon, ClockIcon } from "lucide-react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function TimestampSwitch({ showTimestamps, onChange, texts, className }) {
+  const labels = { ...defaultTexts, ...texts };
+  const { Button: Button2 } = useQuasselComponents();
+  const title = showTimestamps ? labels.hideTimestamps : labels.showTimestamps;
+  return /* @__PURE__ */ jsx18(
+    Button2,
+    {
+      "aria-label": title,
+      "aria-pressed": showTimestamps,
+      className,
+      onClick: () => onChange(!showTimestamps),
+      size: "icon-sm",
+      title,
+      variant: "ghost",
+      children: showTimestamps ? /* @__PURE__ */ jsx18(ClockIcon, {}) : /* @__PURE__ */ jsx18(ClockFadingIcon, {})
+    }
+  );
+}
+export {
+  ChatInputToolbar,
+  ChatMessages,
+  ChatPanel,
+  ChatSendContext,
+  DETAIL_MODES,
+  DetailModeSwitch,
+  MAX_CHAT_ATTACHMENTS,
+  MAX_CHAT_ATTACHMENT_BYTES,
+  Markdown,
+  MarkdownCodeBlocks,
+  MarkdownLinks,
+  MessageActions,
+  PendingActionCard,
+  QuasselProvider,
+  StepPopover,
+  TimestampSwitch,
+  TranscriptModeSwitch,
+  WorkingScenes,
+  announce,
+  appearanceStyle,
+  applyEvent,
+  attachmentCapabilityError,
+  attachmentDownloadUrl,
+  attachmentMediaType,
+  compactToolLine,
+  copyChatText,
+  createChatScroll,
+  createChatSendScope,
+  defaultComponents,
+  defaultTexts,
+  detailModeLabel,
+  encodeAttachment,
+  englishTexts,
+  fillText,
+  formatAttachmentSize,
+  formatElapsed,
+  germanTexts,
+  markdownPlainText,
+  messageDate,
+  prettyJson,
+  stepState,
+  timestampDay,
+  timestampLabel,
+  useChatAction,
+  useElapsed,
+  useQuasselComponents,
+  useQuasselPortalContainer,
+  validateAttachmentSelection
+};
+//# sourceMappingURL=index.js.map