quassel 0.1.1 → 0.2.1

package/index.js

@@ -1,8 +1,11 @@
 import {
+  MAX_CHAT_ATTACHMENTS,
+  MAX_CHAT_ATTACHMENT_BYTES,
   applyEvent,
+  chatAttachmentMediaType,
   compactToolLine,
   prettyJson
-} from "./chunk-DOLTANTM.js";
+} from "./chunk-IGCFQJZB.js";
 
 // packages/quassel/src/types.ts
 function stepState(message) {
@@ -16,11 +19,14 @@ function stepState(message) {
 }
 
 // packages/quassel/src/texts.ts
+var fillText = (text, values) => text.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
 var defaultTexts = {
   working: "Arbeitet ...",
   toolRunning: "l\xE4uft ...",
   toolStillRunning: "Werkzeug l\xE4uft ...",
+  currentTool: "Werkzeug l\xE4uft",
   thinkingChip: "Denken",
+  toolChip: "Werkzeug",
   stepGroupOne: "1 Schritt",
   stepGroupMany: "{count} Schritte",
   stepGroupCollapse: "Einklappen",
@@ -31,421 +37,456 @@ var defaultTexts = {
   close: "Schlie\xDFen",
   jumpToEnd: "Zum Ende springen",
   send: "Senden",
-  sendIntoRun: "In den laufenden Lauf schicken",
-  stop: "Lauf abbrechen",
+  sendIntoRun: "In den laufenden Turn einspeisen",
+  stop: "Arbeit stoppen",
   placeholder: "Nachricht schreiben ...",
   steeringPlaceholder: "Dazwischenfunken ...",
-  timestamps: "Zeitstempel",
-  messageActions: "Nachrichtenaktionen",
-  questionSubmit: "Auswahl \xFCbernehmen",
-  questionPlaceholder: "... oder frei antworten",
-  questionAnswer: "Antworten",
-  copyMessage: "Nachricht kopieren",
-  copyCode: "Code kopieren",
-  copied: "Kopiert",
-  copyFailed: "Kopieren ist nicht verf\xFCgbar.",
-  editMessage: "Nachricht bearbeiten",
-  retryMessage: "Erneut senden",
+  steered: "In den laufenden Turn eingespeist",
+  inputHint: "Enter zum Senden - Shift + Enter f\xFCr eine neue Zeile",
   detailModeTitle: "Detailgrad der Schritte",
   detailModeOff: "nur Antworten",
+  detailModeCurrent: "aktuell",
   detailModeIcons: "Symbole",
   detailModeChips: "kompakt",
   detailModeGrouped: "gruppiert",
   detailModeCompact: "einzeilig",
-  detailModeFull: "alles"
+  detailModeFull: "alles",
+  timestamps: "Zeitstempel",
+  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: "Datei konnte nicht gelesen werden. Entferne sie und f\xFCge sie erneut hinzu.",
+  attachmentsWhileBusy: "Warte, bis die Eingabe wieder bereit ist, und f\xFCge die Dateien dann erneut hinzu.",
+  tooManyAttachments: "H\xF6chstens {count} Anh\xE4nge pro Nachricht. Entferne zuerst einen Anhang.",
+  attachmentsTooLarge: "Anh\xE4nge d\xFCrfen zusammen h\xF6chstens {size} gro\xDF sein. W\xE4hle kleinere Dateien.",
+  attachmentUnsupported: "Dieser Chat unterst\xFCtzt {name} nicht als {kind}. Entferne den Anhang.",
+  attachmentUnsupportedByModel: "Das Modell {model} unterst\xFCtzt {name} nicht als {kind}. W\xE4hle ein passendes Modell oder entferne den Anhang.",
+  attachmentKindImage: "Bild",
+  attachmentKindVideo: "Video",
+  attachmentKindPdf: "PDF",
+  notSent: "Nicht gesendet:",
+  notSentAttachments: "({count} Anh\xE4nge)",
+  insertUnsent: "Nicht gesendete Eingabe einf\xFCgen"
 };
 
-// packages/quassel/src/useChat.ts
-import { useCallback, useEffect, useReducer, useRef, useState } from "react";
-function useChat(baseUrl, headers = {}, onEvent) {
-  const [messages, dispatch] = useReducer(applyEvent, []);
-  const [running, setRunning] = useState(false);
-  const [connected, setConnected] = useState(false);
-  const url = useRef(baseUrl);
-  url.current = baseUrl;
-  const zusatz = useRef(headers);
-  zusatz.current = headers;
-  const observer = useRef(onEvent);
-  observer.current = onEvent;
-  useEffect(() => {
-    const controller = new AbortController();
-    let active = true;
-    async function verbinden() {
-      while (active) {
-        try {
-          const response = await fetch(`${url.current}/stream`, {
-            headers: { Accept: "text/event-stream", ...zusatz.current },
-            signal: controller.signal
-          });
-          if (!response.ok || !response.body) {
-            throw new Error(`Stream fehlgeschlagen: ${response.status}`);
-          }
-          setConnected(true);
-          const reader = response.body.getReader();
-          const decoder = new TextDecoder();
-          let puffer = "";
-          for (; ; ) {
-            const { done, value } = await reader.read();
-            if (done) {
-              break;
-            }
-            puffer += decoder.decode(value, { stream: true });
-            const teile = puffer.split("\n\n");
-            puffer = teile.pop() ?? "";
-            for (const teil of teile) {
-              const daten = teil.split("\n").filter((zeile) => zeile.startsWith("data:")).map((zeile) => zeile.slice(5).trim()).join("");
-              if (!daten) {
-                continue;
-              }
-              const event = JSON.parse(daten);
-              if (event.kind === "status") {
-                setRunning(event.running);
-              }
-              observer.current?.(event);
-              dispatch(event);
-            }
-          }
-        } catch {
-          if (!active) {
-            return;
-          }
-        }
-        setConnected(false);
-        await new Promise((resolve) => setTimeout(resolve, 3e3));
-      }
-    }
-    void verbinden();
-    return () => {
-      active = false;
-      controller.abort();
-    };
-  }, []);
-  const send = useCallback(async (text) => {
-    await fetch(`${url.current}/send`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json", ...zusatz.current },
-      body: JSON.stringify({ text })
-    });
-  }, []);
-  const stop = useCallback(async () => {
-    await fetch(`${url.current}/stop`, { method: "POST", headers: { ...zusatz.current } });
-  }, []);
-  return { messages, running, connected, send, stop };
-}
+// packages/quassel/src/ui/cn.ts
+import { createCn } from "cn/config";
+var cn = createCn({ prefix: "qsl" });
 
 // packages/quassel/src/ChatMessages.tsx
-import { useCallback as useCallback2, useContext as useContext3, useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useMemo, useRef as useRef5, useState as useState7 } from "react";
+import { useCallback as useCallback2, useContext as useContext3, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
 
-// packages/quassel/src/options.ts
-var length = (value) => typeof value === "number" ? `${value}px` : value;
-function appearanceStyle(appearance) {
+// 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;
+  const follow = (value) => {
+    if (following === value) return;
+    following = value;
+    onFollowChange(value);
+  };
+  const layout = (viewport, dragging = false) => {
+    if (viewport.clientHeight <= 0) return;
+    if (dragging && viewport.scrollTop < lastTop && !atEnd(viewport)) follow(false);
+    if (following) viewport.scrollTop = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+    else if (viewport.scrollHeight <= viewport.clientHeight) follow(true);
+    lastTop = viewport.scrollTop;
+  };
   return {
-    "--qsl-chat-font-size": length(appearance?.fontSize),
-    "--qsl-chat-line-height": appearance?.lineHeight,
-    "--qsl-message-gap": length(appearance?.messageGap),
-    "--qsl-dense-message-gap": length(appearance?.denseMessageGap)
+    layout,
+    pause(viewport) {
+      if (viewport.scrollTop > 0) follow(false);
+    },
+    scroll(viewport, dragging = false) {
+      if (viewport.clientHeight <= 0) return;
+      if (atEnd(viewport)) follow(true);
+      else if (dragging && viewport.scrollTop < lastTop) follow(false);
+      lastTop = viewport.scrollTop;
+    },
+    jump(viewport) {
+      follow(true);
+      layout(viewport);
+    }
   };
 }
 
-// packages/quassel/src/timestamps.ts
-function timestampDate(at) {
-  if (!at) return void 0;
-  const date = new Date(at);
-  return Number.isNaN(date.getTime()) ? void 0 : date;
-}
-function formatTimestamp(date, options = {}, now = Date.now()) {
-  if (options.format === "relative") {
-    const seconds = (date.getTime() - now) / 1e3;
-    const [unit, divisor] = Math.abs(seconds) < 60 ? ["second", 1] : Math.abs(seconds) < 3600 ? ["minute", 60] : Math.abs(seconds) < 86400 ? ["hour", 3600] : ["day", 86400];
-    return new Intl.RelativeTimeFormat(options.locale ?? "de", { numeric: "auto" }).format(Math.round(seconds / divisor), unit);
-  }
-  if (options.format === "date-time") {
-    return new Intl.DateTimeFormat(options.locale ?? "de", {
-      dateStyle: "short",
-      timeStyle: "short",
-      timeZone: options.timeZone
-    }).format(date);
-  }
-  if (!options.locale && !options.timeZone) {
-    return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+// 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(var(--qsl-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(var(--qsl-radius-md),12px)] qsl:px-2.5 qsl:text-[0.8rem] 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(var(--qsl-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(var(--qsl-radius-md),12px)] qsl:in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "qsl:size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
   }
-  return new Intl.DateTimeFormat(options.locale ?? "de", {
-    hour: "2-digit",
-    minute: "2-digit",
-    hourCycle: "h23",
-    timeZone: options.timeZone
-  }).format(date);
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ButtonPrimitive,
+    {
+      "data-quassel": "",
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
 }
-function timestampDay(date, timeZone) {
-  return new Intl.DateTimeFormat("en-CA", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    calendar: "gregory",
-    numberingSystem: "latn",
-    timeZone
-  }).format(date);
+
+// 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
+    }
+  );
 }
-function formatDay(date, options) {
-  return new Intl.DateTimeFormat(options?.locale ?? "de", {
-    dateStyle: "long",
-    timeZone: options?.timeZone
-  }).format(date);
+
+// 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,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { 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-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/MessageActions.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function ActionButton({ label, icon, disabled, onClick, successLabel }) {
-  const pending = useRef2(false);
-  const [status, setStatus] = useState2("idle");
-  const [error, setError] = useState2();
-  useEffect2(() => {
+// 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(var(--qsl-radius-md),12px)] qsl:px-2.5 qsl:text-[0.8rem] 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, children }) {
+  const outer = useContext(QuasselContext);
+  const value = useMemo(() => ({
+    components: { ...outer.components, ...components2 },
+    allowUrl: allowUrl ?? outer.allowUrl
+  }), [outer, components2, allowUrl]);
+  return /* @__PURE__ */ jsx7(QuasselContext.Provider, { value, children });
+}
+var useQuasselComponents = () => useContext(QuasselContext).components;
+var useAllowUrl = () => useContext(QuasselContext).allowUrl;
+
+// 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 run = async () => {
+  const invoke = async (action, failureLabel) => {
     if (pending.current) return;
     pending.current = true;
-    setStatus("pending");
     setError(void 0);
+    setStatus("pending");
     try {
-      await onClick();
+      await action();
       setStatus("done");
     } catch (failure) {
+      const detail = failure instanceof Error ? failure.message : String(failure);
+      setError(`${failureLabel}: ${detail}`);
       setStatus("idle");
-      setError(failure instanceof Error ? failure.message : String(failure));
     } finally {
       pending.current = false;
     }
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("button", { className: "qsl-icon-button", type: "button", disabled: disabled || status === "pending", onClick: () => void run(), children: [
-      icon,
-      status === "done" && successLabel ? successLabel : label
-    ] }),
-    error && /* @__PURE__ */ jsx("span", { className: "qsl-action-error", role: "alert", children: error })
-  ] });
+  return { status, error, invoke };
 }
-async function copyText(text, error) {
-  if (!navigator.clipboard) throw new Error(error);
+async function copyChatText(text, unavailable) {
+  if (!navigator.clipboard) throw new Error(unavailable);
   await navigator.clipboard.writeText(text);
 }
-function MessageActions({ message, options, texts }) {
-  if (!options) return null;
-  const copy = typeof options.copy === "function" ? options.copy(message) : options.copy;
-  const edit = message.role === "user" ? options.edit : void 0;
-  const retry = message.role === "assistant" ? options.retry : void 0;
-  const custom = options.custom?.(message) ?? [];
-  if (!copy && !edit && !retry && custom.length === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "qsl-message-actions", role: "group", "aria-label": texts.messageActions, children: [
-    copy && /* @__PURE__ */ jsx(ActionButton, { label: texts.copyMessage, successLabel: texts.copied, onClick: () => copyText(message.text, texts.copyFailed) }),
-    edit && /* @__PURE__ */ jsx(ActionButton, { label: texts.editMessage, onClick: () => edit(message) }),
-    retry && /* @__PURE__ */ jsx(ActionButton, { label: texts.retryMessage, onClick: () => retry(message) }),
-    custom.map((action) => /* @__PURE__ */ jsx(ActionButton, { label: action.label, icon: action.icon, disabled: action.disabled, onClick: () => action.onClick(message) }, action.id))
-  ] });
-}
-
-// packages/quassel/src/ChatSendContext.ts
-import { createContext, useContext, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
-var ChatSendContext = createContext(void 0);
-function isSendKey(event, shortcut) {
-  return event.key === "Enter" && !event.shiftKey && !event.altKey && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229 && (shortcut === "enter" || event.ctrlKey || event.metaKey);
-}
-function useChatSubmit(onSend) {
-  const panel = useContext(ChatSendContext);
-  const pending = useRef3(false);
-  const mounted = useRef3(true);
-  useLayoutEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-  const [sending, setSending] = useState3(false);
-  const [error, setError] = useState3();
-  const submit = async (text) => {
-    if (pending.current) return false;
-    pending.current = true;
-    setSending(true);
-    setError(void 0);
-    try {
-      await onSend(text);
-      if (!mounted.current) return false;
-      panel?.onSent();
-      return true;
-    } catch (failure) {
-      if (mounted.current) setError(failure instanceof Error ? failure.message : String(failure));
-      return false;
-    } finally {
-      pending.current = false;
-      if (mounted.current) setSending(false);
-    }
-  };
-  return { submit, sending, error };
-}
 
 // packages/quassel/src/Markdown.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var CodeBlockContext = createContext2({});
+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__ */ jsx2(CodeBlockContext.Provider, { value: { options, texts }, children });
+  return /* @__PURE__ */ jsx8(CodeBlockContext.Provider, { value: { options, texts }, children });
 }
-function CodeBlock({ text }) {
+function CodeBlock({ children }) {
   const { options, texts } = useContext2(CodeBlockContext);
-  const labels = { ...defaultTexts, ...texts };
-  const content = /* @__PURE__ */ jsx2("pre", { style: {
-    whiteSpace: options?.wrap ? "pre-wrap" : void 0,
-    overflowWrap: options?.wrap ? "anywhere" : void 0,
-    maxHeight: options?.maxHeight,
-    overflowY: options?.maxHeight === void 0 ? void 0 : "auto"
-  }, children: /* @__PURE__ */ jsx2("code", { children: text }) });
-  return options?.showCopyButton ? /* @__PURE__ */ jsxs2("div", { className: "qsl-code-block", children: [
-    /* @__PURE__ */ jsx2(ActionButton, { label: labels.copyCode, successLabel: labels.copied, onClick: () => copyText(text, labels.copyFailed) }),
-    content
-  ] }) : content;
+  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:rounded-lg qsl:bg-secondary qsl:px-3 qsl:py-2 qsl:font-mono qsl:text-sm 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 })
+  ] });
 }
-var LinkClickContext = createContext2(void 0);
 function MarkdownLinks({ children, onLinkClick }) {
-  return /* @__PURE__ */ jsx2(LinkClickContext.Provider, { value: onLinkClick, children });
+  return /* @__PURE__ */ jsx8(LinkClickContext.Provider, { value: onLinkClick, children });
 }
-function MarkdownLink({ href, label }) {
+function MarkdownLink({ href, children }) {
   const onLinkClick = useContext2(LinkClickContext);
-  return /* @__PURE__ */ jsx2(
+  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 (onLinkClick?.(href, label)) {
+        if (href && onLinkClick?.(href, event.currentTarget.textContent ?? "")) {
           event.preventDefault();
         }
       },
       rel: "noreferrer",
       target: "_blank",
-      children: label
+      children
     }
   );
 }
-function Markdown({ text }) {
-  const lines = text.split("\n");
-  const blocks = [];
-  let i = 0;
-  let key = 0;
-  while (i < lines.length) {
-    const line = lines[i];
-    const fence = line.match(/^\s*```(\w*)\s*$/);
-    if (fence) {
-      const body = [];
-      i++;
-      while (i < lines.length && !/^\s*```\s*$/.test(lines[i])) {
-        body.push(lines[i]);
-        i++;
-      }
-      if (i < lines.length) {
-        i++;
-      }
-      blocks.push(
-        /* @__PURE__ */ jsx2(CodeBlock, { text: body.join("\n") }, key++)
-      );
-      continue;
-    }
-    if (line.includes("|") && i + 1 < lines.length && isTableDivider(lines[i + 1])) {
-      const header = splitTableRow(line);
-      i += 2;
-      const rows = [];
-      while (i < lines.length && lines[i].includes("|") && lines[i].trim() !== "") {
-        rows.push(splitTableRow(lines[i]));
-        i++;
-      }
-      blocks.push(
-        /* @__PURE__ */ jsx2("div", { className: "qsl-md-scroll", children: /* @__PURE__ */ jsxs2("table", { children: [
-          /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: header.map((cell, ci) => /* @__PURE__ */ jsx2("th", { children: renderInline(cell, `th${key}_${ci}`) }, ci)) }) }),
-          /* @__PURE__ */ jsx2("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsx2("tr", { children: header.map((_, ci) => /* @__PURE__ */ jsx2("td", { children: renderInline(row[ci] ?? "", `td${key}_${ri}_${ci}`) }, ci)) }, ri)) })
-        ] }) }, key++)
-      );
-      continue;
-    }
-    const heading = line.match(/^(#{1,4})\s+(.*)$/);
-    if (heading) {
-      const level = heading[1].length;
-      blocks.push(
-        level === 1 ? /* @__PURE__ */ jsx2("h3", { children: renderInline(heading[2], `h${key}`) }, key++) : /* @__PURE__ */ jsx2("h4", { children: renderInline(heading[2], `h${key}`) }, key++)
-      );
-      i++;
-      continue;
-    }
-    const quote = line.match(/^\s*>\s?(.*)$/);
-    if (quote) {
-      blocks.push(/* @__PURE__ */ jsx2("blockquote", { children: renderInline(quote[1], `q${key}`) }, key++));
-      i++;
-      continue;
-    }
-    const bullet = line.match(/^\s*[-*]\s+(.*)$/);
-    if (bullet) {
-      blocks.push(
-        /* @__PURE__ */ jsxs2("div", { className: "qsl-md-bullet", children: [
-          /* @__PURE__ */ jsx2("span", { children: "\u2022" }),
-          /* @__PURE__ */ jsx2("span", { children: renderInline(bullet[1], `l${key}`) })
-        ] }, key++)
-      );
-      i++;
-      continue;
-    }
-    const numbered = line.match(/^\s*(\d+)\.\s+(.*)$/);
-    if (numbered) {
-      blocks.push(
-        /* @__PURE__ */ jsxs2("div", { className: "qsl-md-bullet", children: [
-          /* @__PURE__ */ jsxs2("span", { children: [
-            numbered[1],
-            "."
-          ] }),
-          /* @__PURE__ */ jsx2("span", { children: renderInline(numbered[2], `l${key}`) })
-        ] }, key++)
-      );
-      i++;
-      continue;
-    }
-    if (line.trim() === "") {
-      blocks.push(/* @__PURE__ */ jsx2("div", { className: "qsl-md-gap" }, key++));
-      i++;
-      continue;
-    }
-    blocks.push(/* @__PURE__ */ jsx2("p", { children: renderInline(line, `l${key}`) }, key++));
-    i++;
-  }
-  return /* @__PURE__ */ jsx2("div", { className: "qsl-md", children: blocks });
+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-[15px] 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-lg 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:text-base qsl:font-medium", children }),
+  h5: ({ children }) => /* @__PURE__ */ jsx8("h5", { className: "qsl:mt-2 qsl:mb-1 qsl:text-base qsl:font-medium", children }),
+  h6: ({ children }) => /* @__PURE__ */ jsx8("h6", { className: "qsl:mt-2 qsl:mb-1 qsl:text-base 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-sm 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 }),
+  // Ohne max-content schrumpft die Tabelle auf den Container und stapelt Buchstaben.
+  table: ({ children }) => /* @__PURE__ */ jsx8("div", { className: cn(scrollbar, scrollCover, "qsl:my-2 qsl:overflow-x-auto"), 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) {
+  if (allowUrl?.(url)) return url;
+  const scheme = /^[^/?#]*:/.exec(url);
+  return !scheme || /^(https?|mailto|tel|ftp|irc|ircs|xmpp):$/i.test(scheme[0]) ? url : "";
 }
-function renderInline(text, keyPrefix) {
-  const out = [];
-  const pattern = /\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`/g;
-  let last = 0;
-  let match;
-  let i = 0;
-  while ((match = pattern.exec(text)) !== null) {
-    if (match.index > last) {
-      out.push(text.slice(last, match.index));
-    }
-    if (match[1] !== void 0) {
-      out.push(/* @__PURE__ */ jsx2(MarkdownLink, { href: match[2], label: match[1] }, `${keyPrefix}a${i}`));
-    } else if (match[3] !== void 0) {
-      out.push(/* @__PURE__ */ jsx2("strong", { children: match[3] }, `${keyPrefix}b${i}`));
-    } else if (match[4] !== void 0) {
-      out.push(/* @__PURE__ */ jsx2("em", { children: match[4] }, `${keyPrefix}i${i}`));
-    } else if (match[5] !== void 0) {
-      out.push(/* @__PURE__ */ jsx2("code", { children: match[5] }, `${keyPrefix}c${i}`));
+function Markdown({ text, streaming = false }) {
+  const allowUrl = useAllowUrl();
+  const urlTransform = useCallback((url) => transformUrl(url, allowUrl), [allowUrl]);
+  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
     }
-    last = match.index + match[0].length;
-    i++;
-  }
-  if (last < text.length) {
-    out.push(text.slice(last));
-  }
-  return out;
+  );
 }
 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,4})\s+/, "").replace(/^\s*>\s?/, "").replace(/^\s*[-*]\s+/, "").replace(/\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`/g, (_, link, _href, fett, kursiv, code) => link ?? fett ?? kursiv ?? code).trim()).filter((line) => line !== "").join("\n");
+  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, fett, fettUnterstrich, kursiv, code) => link ?? fett ?? fettUnterstrich ?? kursiv ?? code).trim()).filter((line) => line !== "").join("\n");
 }
 function splitTableRow(line) {
   let row = line.trim();
@@ -461,134 +502,11 @@ function isTableDivider(line) {
   return /^\s*\|?\s*:?-{1,}:?\s*(\|\s*:?-{1,}:?\s*)*\|?\s*$/.test(line) && line.includes("-");
 }
 
-// packages/quassel/src/announce.ts
-var abstandMs = 400;
-var hoechstensWartend = 5;
-var region;
-var wartend = [];
-var laeuft = false;
-function ansageRegion() {
-  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 naechste() {
-  if (wartend.length === 0) {
-    laeuft = false;
-    return;
-  }
-  if (document.visibilityState === "hidden") {
-    document.addEventListener("visibilitychange", naechste, { once: true });
-    return;
-  }
-  const [text, ...rest] = wartend;
-  wartend = rest;
-  const ziel = ansageRegion();
-  ziel.textContent = ziel.textContent === text ? `${text}\xA0` : text;
-  window.setTimeout(naechste, abstandMs);
-}
-function announce(text) {
-  const inhalt = text.trim();
-  if (!inhalt || typeof document === "undefined") {
-    return;
-  }
-  wartend = [...wartend, inhalt].slice(-hoechstensWartend);
-  if (laeuft) {
-    return;
-  }
-  laeuft = true;
-  ansageRegion();
-  window.setTimeout(naechste, abstandMs);
-}
-
-// packages/quassel/src/StepPopover.tsx
-import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState4 } from "react";
-import { createPortal } from "react-dom";
-
-// packages/quassel/src/icons.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function Svg({ size = 14, className, children }) {
-  return /* @__PURE__ */ jsx3(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className,
-      fill: "none",
-      height: size,
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      viewBox: "0 0 24 24",
-      width: size,
-      children
-    }
-  );
-}
-function IconSend(props) {
-  return /* @__PURE__ */ jsxs3(Svg, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M22 2 11 13" }),
-    /* @__PURE__ */ jsx3("path", { d: "M22 2 15 22 11 13 2 9Z" })
-  ] });
-}
-function IconStop(props) {
-  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("rect", { fill: "currentColor", height: 12, rx: 2, stroke: "none", width: 12, x: 6, y: 6 }) });
-}
-function IconX(props) {
-  return /* @__PURE__ */ jsxs3(Svg, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ jsx3("path", { d: "m6 6 12 12" })
-  ] });
-}
-function IconChevronDown(props) {
-  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" }) });
-}
-function IconChevronRight(props) {
-  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6" }) });
-}
-function IconLayers(props) {
-  return /* @__PURE__ */ jsxs3(Svg, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "m12 2 10 5-10 5L2 7Z" }),
-    /* @__PURE__ */ jsx3("path", { d: "m2 17 10 5 10-5" }),
-    /* @__PURE__ */ jsx3("path", { d: "m2 12 10 5 10-5" })
-  ] });
-}
-function IconCheck(props) {
-  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M20 6 9 17l-5-5" }) });
-}
-function IconSpark(props) {
-  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M12 3l1.9 6.1L20 11l-6.1 1.9L12 19l-1.9-6.1L4 11l6.1-1.9Z" }) });
-}
-function IconClock(props) {
-  return /* @__PURE__ */ jsxs3(Svg, { ...props, children: [
-    /* @__PURE__ */ jsx3("circle", { cx: 12, cy: 12, r: 9 }),
-    /* @__PURE__ */ jsx3("path", { d: "M12 7v5l3 2" })
-  ] });
-}
-function IconTool(props) {
-  return /* @__PURE__ */ jsx3(Svg, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" }) });
-}
-
 // packages/quassel/src/StepPopover.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+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 preClasses = "qsl:rounded-lg qsl:bg-secondary qsl:p-3 qsl:font-mono qsl:text-[11px] qsl:leading-[1.625] qsl:break-all qsl:whitespace-pre-wrap";
 function StepPopover({
   message,
   position,
@@ -596,168 +514,86 @@ function StepPopover({
   toolArgumentsText,
   onClose
 }) {
-  const popover = useRef4(null);
-  const [placement, setPlacement] = useState4();
-  useLayoutEffect2(() => {
-    const element = popover.current;
-    if (!element) {
-      return;
-    }
-    const margin = 16;
-    const gap = 10;
-    const bounds = element.getBoundingClientRect();
-    const preferredLeft = position.x + gap;
-    const preferredTop = position.y + gap;
-    const left = preferredLeft + bounds.width <= window.innerWidth - margin ? preferredLeft : position.x - bounds.width - gap;
-    const top = preferredTop + bounds.height <= window.innerHeight - margin ? preferredTop : position.y - bounds.height - gap;
-    setPlacement({
-      left: Math.max(margin, Math.min(left, window.innerWidth - bounds.width - margin)),
-      top: Math.max(margin, Math.min(top, window.innerHeight - bounds.height - margin))
-    });
-  }, [message.text, message.tool?.result, position]);
-  useEffect3(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
-  useEffect3(() => {
-    const handlePointerDown = (event) => {
-      if (!popover.current?.contains(event.target)) {
-        onClose();
-      }
-    };
-    document.addEventListener("pointerdown", handlePointerDown, true);
-    return () => document.removeEventListener("pointerdown", handlePointerDown, true);
-  }, [onClose]);
+  const anchor = useMemo2(() => ({
+    getBoundingClientRect: () => new DOMRect(position.x, position.y, 0, 0),
+    contextElement: document.documentElement
+  }), [position]);
+  const { Button: Button2, Popover: Popover2, PopoverContent: PopoverContent2 } = useQuasselComponents();
   const tool = message.tool;
-  const title = message.role === "thinking" ? texts.thinkingTitle : texts.toolTitle;
-  return createPortal(
-    /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx4("div", { className: "qsl-popover-backdrop", onClick: onClose }),
-      /* @__PURE__ */ jsxs4(
-        "div",
-        {
-          "aria-label": title,
-          className: "qsl-popover",
-          ref: popover,
-          role: "dialog",
-          style: {
-            left: placement?.left ?? position.x,
-            top: placement?.top ?? position.y,
-            visibility: placement ? "visible" : "hidden"
-          },
-          children: [
-            /* @__PURE__ */ jsxs4("div", { className: "qsl-popover__head", children: [
-              message.role === "thinking" ? /* @__PURE__ */ jsx4(IconSpark, { className: "qsl-popover__icon" }) : /* @__PURE__ */ jsx4(IconTool, { className: tool?.isError ? "qsl-popover__icon qsl-popover__icon--error" : "qsl-popover__icon" }),
-              /* @__PURE__ */ jsx4("span", { className: "qsl-popover__title", children: title }),
-              /* @__PURE__ */ jsx4("button", { "aria-label": texts.close, className: "qsl-popover__close", onClick: onClose, title: texts.close, type: "button", children: /* @__PURE__ */ jsx4(IconX, {}) })
-            ] }),
-            /* @__PURE__ */ jsx4("div", { className: "qsl-popover__body", children: message.role === "thinking" ? /* @__PURE__ */ jsx4("div", { className: "qsl-popover__thinking", children: message.text }) : tool ? /* @__PURE__ */ jsxs4("div", { className: "qsl-popover__sections", children: [
-              /* @__PURE__ */ jsx4("div", { className: "qsl-popover__toolname", children: message.text }),
-              /* @__PURE__ */ jsx4(PopoverSection, { label: texts.argumentsLabel, value: toolArgumentsText(tool) }),
-              tool.result === void 0 ? /* @__PURE__ */ jsx4("div", { className: "qsl-popover__running", children: texts.toolStillRunning }) : /* @__PURE__ */ jsx4(PopoverSection, { error: tool.isError, label: texts.resultLabel, value: prettyJson(tool.result) })
-            ] }) : null })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
+  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-[13px] qsl:leading-normal qsl:shadow-pop",
+        thinking ? "qsl:max-h-none" : "qsl:max-h-[min(70vh,620px)]"
+      ),
+      collisionPadding: 16,
+      side: "bottom",
+      sideOffset: 10,
+      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: cn("qsl:min-h-0 qsl:p-4", thinking ? "qsl:overflow-visible" : "qsl:overflow-auto"), 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__ */ jsxs4("section", { children: [
-    /* @__PURE__ */ jsx4("h3", { children: label }),
-    /* @__PURE__ */ jsx4("pre", { className: error ? "qsl-popover__pre qsl-popover__pre--error" : "qsl-popover__pre", children: value })
+  return /* @__PURE__ */ jsxs2("section", { children: [
+    /* @__PURE__ */ jsx9("h3", { className: "qsl:mb-1.5 qsl:text-[11px] 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/QuestionCard.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function QuestionCard({
+// packages/quassel/src/PendingActionCard.tsx
+import { CheckIcon as CheckIcon2 } 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,
-  question,
-  texts,
-  onAnswer
+  action,
+  waitingLabel,
+  dismissLabel,
+  dismissedLabel,
+  onDismiss
 }) {
-  const [gewaehlt, setGewaehlt] = useState5([]);
-  const [frei, setFrei] = useState5("");
-  if (question.answer !== void 0) {
-    return /* @__PURE__ */ jsxs5("div", { className: "qsl-question", children: [
-      /* @__PURE__ */ jsx5("div", { className: "qsl-question__text", children: text }),
-      /* @__PURE__ */ jsxs5("div", { className: "qsl-question__answered", children: [
-        /* @__PURE__ */ jsx5(IconCheck, { className: "qsl-question__check", size: 12 }),
-        question.answer
+  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: [
+        /* @__PURE__ */ jsx10(CheckIcon2, { className: "qsl:text-success", size: 12 }),
+        action.status === "approved" ? resultText(action.result) : dismissedLabel
       ] })
     ] });
   }
-  const umschalten = (option) => setGewaehlt((bisher) => bisher.includes(option) ? bisher.filter((o) => o !== option) : [...bisher, option]);
-  const freiSenden = () => {
-    const wert = frei.trim();
-    if (wert) onAnswer(wert);
-  };
-  return /* @__PURE__ */ jsxs5("div", { className: "qsl-question", children: [
-    /* @__PURE__ */ jsx5("div", { className: "qsl-question__text", children: text }),
-    /* @__PURE__ */ jsx5("div", { className: "qsl-question__options", children: question.options.map(
-      (option) => question.multi ? /* @__PURE__ */ jsxs5(
-        "button",
-        {
-          "aria-pressed": gewaehlt.includes(option),
-          className: gewaehlt.includes(option) ? "qsl-question__option qsl-question__option--gewaehlt" : "qsl-question__option",
-          onClick: () => umschalten(option),
-          type: "button",
-          children: [
-            /* @__PURE__ */ jsx5("span", { className: "qsl-question__kasten", children: gewaehlt.includes(option) && /* @__PURE__ */ jsx5(IconCheck, { size: 10 }) }),
-            option
-          ]
-        },
-        option
-      ) : /* @__PURE__ */ jsx5("button", { className: "qsl-question__option", onClick: () => onAnswer(option), type: "button", children: option }, option)
-    ) }),
-    question.multi && /* @__PURE__ */ jsx5(
-      "button",
-      {
-        className: "qsl-question__uebernehmen",
-        disabled: gewaehlt.length === 0,
-        onClick: () => onAnswer(gewaehlt.join("; ")),
-        type: "button",
-        children: texts.questionSubmit
-      }
-    ),
-    /* @__PURE__ */ jsxs5("div", { className: "qsl-question__frei", children: [
-      /* @__PURE__ */ jsx5(
-        "input",
-        {
-          className: "qsl-field qsl-question__frei-feld",
-          onChange: (event) => setFrei(event.target.value),
-          onKeyDown: (event) => {
-            if (event.key === "Enter" && !event.nativeEvent.isComposing) freiSenden();
-          },
-          placeholder: texts.questionPlaceholder,
-          value: frei
-        }
-      ),
-      /* @__PURE__ */ jsx5(
-        "button",
-        {
-          className: "qsl-question__frei-senden",
-          disabled: frei.trim() === "",
-          onClick: freiSenden,
-          type: "button",
-          children: texts.questionAnswer
-        }
-      )
+  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 useEffect4, useState as useState6 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var SPUR = 13;
 var GRUNDTAKT_MS = 90;
 var SZENENWECHSEL_MS = 2600;
@@ -802,6 +638,7 @@ var SZENEN = [
   {
     // Aus einem Samen wird ein Baum, dann von vorn.
     id: "wachsen",
+    compact: true,
     takt: 2,
     zeichne: (schritt) => {
       const stufen = ["\u{1F331}", "\u{1F331}", "\u{1F33F}", "\u{1F33F}", "\u{1F343}", "\u{1F333}", "\u{1F333}", "\u{1F333}"];
@@ -811,11 +648,12 @@ var SZENEN = [
   {
     // Das Ei bekommt Risse, das Kueken schluepft.
     id: "schluepfen",
+    compact: true,
     takt: 2,
     zeichne: (schritt) => {
       const takt = schritt % 12;
       if (takt < 4) return "\u{1F95A}";
-      if (takt < 6) return "\u{1F95A}\u2728";
+      if (takt < 6) return "\u{1F95A}*";
       if (takt < 9) return "\u{1F423}";
       return "\u{1F425}";
     }
@@ -844,11 +682,12 @@ var SZENEN = [
   {
     // Ei, Kueken, Henne - und die legt das naechste Ei.
     id: "huhn-kreislauf",
+    compact: true,
     takt: 3,
     zeichne: (schritt) => {
       const takt = schritt % 16;
       if (takt < 3) return "\u{1F95A}";
-      if (takt < 5) return "\u{1F95A}\u2728";
+      if (takt < 5) return "\u{1F95A}*";
       if (takt < 8) return "\u{1F423}";
       if (takt < 11) return "\u{1F424}";
       if (takt < 14) return "\u{1F414}";
@@ -858,11 +697,12 @@ var SZENEN = [
   {
     // Hut, Funken - und das Kaninchen tuermt.
     id: "zauberhut",
+    compact: true,
     takt: 3,
     zeichne: (schritt) => {
       const takt = schritt % 14;
       if (takt < 4) return "\u{1F3A9}";
-      if (takt < 7) return "\u{1F3A9}\u2728";
+      if (takt < 7) return "\u{1F3A9}*";
       if (takt < 11) return "\u{1F3A9}\u{1F407}";
       return "\u{1F407}\u{1F4A8}";
     }
@@ -870,6 +710,7 @@ var SZENEN = [
   {
     // Rot, Gelb, Gruen - und ab.
     id: "ampel",
+    compact: true,
     takt: 3,
     zeichne: (schritt) => {
       const takt = schritt % 12;
@@ -882,6 +723,7 @@ var SZENEN = [
   {
     // Klingeln, verschlafen, losrennen.
     id: "wecker",
+    compact: true,
     takt: 2,
     zeichne: (schritt) => {
       const takt = schritt % 14;
@@ -901,34 +743,286 @@ var SZENEN = [
       return bahn({ 4: "\u{1F389}" }, 5);
     }
   }
-];
-function WorkingScenes({ label = "Arbeitet ..." }) {
-  const [szene, setSzene] = useState6(() => SZENEN[Math.floor(Math.random() * SZENEN.length)]);
-  const [versatz, setVersatz] = useState6(() => Math.floor(Math.random() * 20));
-  const [frameTick, setFrameTick] = useState6(0);
-  useEffect4(() => {
-    const timer = window.setInterval(() => {
-      setSzene((bisher) => {
-        const andere = SZENEN.filter((s) => s.id !== bisher.id);
-        return andere[Math.floor(Math.random() * andere.length)];
-      });
-      setVersatz(Math.floor(Math.random() * 20));
-      setFrameTick(0);
-    }, SZENENWECHSEL_MS);
-    return () => window.clearInterval(timer);
-  }, []);
-  useEffect4(() => {
-    const timer = window.setInterval(() => setFrameTick((value) => value + 1), GRUNDTAKT_MS);
-    return () => window.clearInterval(timer);
-  }, []);
-  const bild = szene.zeichne(Math.floor(frameTick / szene.takt) + (szene.laufend ? versatz : 0));
-  return /* @__PURE__ */ jsx6("div", { "aria-label": label, className: "qsl-working", role: "img", children: /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "qsl-working__stage", children: /* @__PURE__ */ jsx6("span", { className: "qsl-working__character", children: typeof bild === "string" ? bild : bild.map((zelle, i) => /* @__PURE__ */ jsx6("span", { className: "qsl-working__cell", children: zelle }, i)) }) }, szene.id) });
+];
+var COMPACT_SCENES = SZENEN.filter((scene) => scene.compact);
+function WorkingScenes({ label = "Arbeitet ...", compact = false }) {
+  const scenes = compact ? COMPACT_SCENES : SZENEN;
+  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);
+    }, SZENENWECHSEL_MS);
+    return () => window.clearInterval(timer);
+  }, [reducedMotion, scenes]);
+  useEffect2(() => {
+    if (reducedMotion) return;
+    const timer = window.setInterval(() => setFrameTick((value) => value + 1), GRUNDTAKT_MS);
+    return () => window.clearInterval(timer);
+  }, [reducedMotion]);
+  const frame = scene.zeichne(Math.floor(frameTick / scene.takt) + (scene.laufend ? offset : 0));
+  return /* @__PURE__ */ jsxs4("span", { "aria-label": label, className: cn("qsl:flex qsl:items-center qsl:gap-2.5 qsl:text-[13px]", 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-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)
+});
+
+// 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/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/announce.ts
+var abstandMs = 400;
+var hoechstensWartend = 5;
+var region;
+var wartend = [];
+var laeuft = false;
+function ansageRegion() {
+  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 naechste() {
+  if (wartend.length === 0) {
+    laeuft = false;
+    return;
+  }
+  if (document.visibilityState === "hidden") {
+    document.addEventListener("visibilitychange", naechste, { once: true });
+    return;
+  }
+  const [text, ...rest] = wartend;
+  wartend = rest;
+  const ziel = ansageRegion();
+  ziel.textContent = ziel.textContent === text ? `${text}\xA0` : text;
+  window.setTimeout(naechste, abstandMs);
+}
+function announce(text) {
+  const inhalt = text.trim();
+  if (!inhalt || typeof document === "undefined") {
+    return;
+  }
+  wartend = [...wartend, inhalt].slice(-hoechstensWartend);
+  if (laeuft) {
+    return;
+  }
+  laeuft = true;
+  ansageRegion();
+  window.setTimeout(naechste, abstandMs);
 }
 
 // packages/quassel/src/ChatMessages.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var stepClasses = "qsl:mt-[var(--qsl-chat-message-gap,16px)]";
+var denseStepClasses = "qsl:mt-[var(--qsl-chat-dense-message-gap,8px)]";
+var traceClasses = "qsl:flex qsl:w-full qsl:gap-2 qsl:pl-6 qsl:text-left qsl:text-[11px] qsl:leading-[1.375] qsl:text-muted-foreground";
+var traceButtonClasses = "qsl:cursor-pointer qsl:rounded-md qsl:py-1 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:font-mono qsl:[overflow-wrap:anywhere]";
+var traceRunningClasses = "qsl:ml-1.5 qsl:opacity-60";
+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:font-mono qsl:text-[10.5px] 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 hoechstensAnsagenAufEinmal = 2;
+var bubbleBodyClasses = "qsl:relative qsl:max-w-[86%] qsl:px-3 qsl:py-2 qsl:leading-[var(--qsl-chat-line-height,1.625)] qsl:[overflow-wrap:anywhere] qsl:@max-[620px]/chat:max-w-full";
 function istSchritt(message) {
   return !!message && (message.role === "thinking" || message.role === "tool");
 }
@@ -937,22 +1031,25 @@ function defaultArgumentsText(tool) {
 }
 function ChatMessages({
   messages,
-  detailMode = "compact",
+  owner,
+  detailMode = "current",
   running = false,
   working,
-  workingTimeoutMs = 2e4,
   stepsExpandable = true,
   texts,
   toolArgumentsText = defaultArgumentsText,
   renderTool,
-  onAnswerQuestion,
+  renderAction,
+  onDismissAction,
   onLinkClick,
-  announce: announce2,
   emptyState,
   className,
   showTimestamps = false,
-  bottomThreshold = 120,
+  announce: announce2,
   scrollerRef,
+  maxWidth,
+  horizontalPadding,
+  jumpToEndThreshold = 120,
   appearance,
   timestampOptions,
   codeBlockOptions,
@@ -960,33 +1057,24 @@ function ChatMessages({
   messageActions
 }) {
   const alleTexte = { ...defaultTexts, ...texts };
-  const scrollBereich = useRef5(null);
-  const [amEnde, setAmEnde] = useState7(true);
-  const folgt = useRef5(amEnde);
-  folgt.current = amEnde;
-  const panel = useContext3(ChatSendContext);
-  useLayoutEffect3(() => panel?.registerJump(() => {
-    setAmEnde(true);
-    const viewport = scrollBereich.current;
-    if (viewport) viewport.scrollTop = viewport.scrollHeight;
-  }), [panel]);
-  const [now, setNow] = useState7(Date.now);
-  const relative = showTimestamps && timestampOptions?.format === "relative";
-  useEffect5(() => {
-    if (!relative) return;
+  const { Button: Button2 } = useQuasselComponents();
+  const scrollBereich = 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 [now, setNow] = useState4(() => Date.now());
+  useEffect3(() => {
+    if (!showTimestamps || timestampOptions?.format !== "relative") return;
     setNow(Date.now());
-    const timer = window.setInterval(() => setNow(Date.now()), 1e3);
+    const timer = window.setInterval(() => setNow(Date.now()), 15e3);
     return () => window.clearInterval(timer);
-  }, [relative]);
-  const [stromAktiv, setStromAktiv] = useState7(true);
-  useEffect5(() => {
-    setStromAktiv(true);
-    const timer = window.setTimeout(() => setStromAktiv(false), workingTimeoutMs);
-    return () => window.clearTimeout(timer);
-  }, [messages, workingTimeoutMs]);
-  const angesagt = useRef5(new Set(messages.map((message) => message.key)));
-  useEffect5(() => {
-    const faellig = messages.filter((message, index) => !angesagt.current.has(message.key) && (message.role === "question" ? message.question !== void 0 && message.question.answer === void 0 : message.role === "assistant" && message.text.trim() !== "" && (message.closed === true || !running && index === messages.length - 1)));
+  }, [showTimestamps, timestampOptions?.format]);
+  const angesagt = useRef3(new Set(messages.map((message) => message.key)));
+  useEffect3(() => {
+    const faellig = messages.filter((message, index) => !angesagt.current.has(message.key) && (message.role === "action" ? message.action !== void 0 && message.action.status === void 0 : message.role === "assistant" && message.text.trim() !== "" && (message.closed === true || !running && index === messages.length - 1)));
     if (faellig.length === 0) {
       return;
     }
@@ -994,68 +1082,92 @@ function ChatMessages({
     if (announce2 === false || faellig.length > hoechstensAnsagenAufEinmal) {
       return;
     }
-    faellig.map((message) => announce2 ? announce2({ kind: message.role === "question" ? "question" : "reply", message }) : markdownPlainText(message.text)).forEach((text) => text && announce(text));
+    faellig.map((message) => announce2 ? announce2({ kind: message.role === "action" ? "action" : "reply", message }) : markdownPlainText(message.text)).forEach((text) => text && announce(text));
   }, [messages, running, announce2]);
+  const updateJumpVisibility = useCallback2((viewport) => {
+    if (viewport.clientHeight > 0) setShowJumpToEnd(viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop > jumpToEndThreshold);
+  }, [jumpToEndThreshold]);
+  useLayoutEffect(() => sendScope?.subscribe(() => {
+    const viewport = scrollBereich.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 pruefeEnde = useCallback2(() => {
     const bereich = scrollBereich.current;
     if (bereich) {
-      const abstandZumEnde = bereich.scrollHeight - bereich.scrollTop - bereich.clientHeight;
-      setAmEnde(abstandZumEnde <= bottomThreshold);
+      scroll.scroll(bereich, scrollbarDragging.current);
+      updateJumpVisibility(bereich);
     }
-  }, [bottomThreshold]);
-  useEffect5(() => {
+  }, [scroll, updateJumpVisibility]);
+  useEffect3(() => {
+    const finishDrag = () => {
+      if (scrollbarDragging.current && scrollBereich.current) scroll.scroll(scrollBereich.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 bereich = scrollBereich.current;
-    if (!bereich) {
-      return;
-    }
-    const beobachter = new ResizeObserver(() => {
-      if (folgt.current) {
-        bereich.scrollTop = bereich.scrollHeight;
-      } else {
-        pruefeEnde();
-      }
-    });
+    if (!bereich) return;
+    const align = () => {
+      scroll.layout(bereich, scrollbarDragging.current);
+      updateJumpVisibility(bereich);
+    };
+    align();
+    const beobachter = new ResizeObserver(align);
     beobachter.observe(bereich);
-    for (const kind of bereich.children) {
-      beobachter.observe(kind);
-    }
+    if (threadRef.current) beobachter.observe(threadRef.current, { box: "border-box" });
     return () => beobachter.disconnect();
-  }, [pruefeEnde, messages.length]);
-  useEffect5(() => {
-    if (!amEnde) {
-      return;
-    }
-    scrollBereich.current?.scrollTo({ top: scrollBereich.current.scrollHeight, behavior: running ? "auto" : "smooth" });
-  }, [messages, running, amEnde]);
-  const visible = useMemo(
-    () => messages.filter((message) => {
-      if ((message.role === "thinking" || message.role === "assistant") && message.text.trim() === "") {
-        return false;
-      }
-      if (message.role === "thinking" || message.role === "tool") {
-        return detailMode !== "off";
-      }
-      return true;
-    }),
-    [messages, detailMode]
+  });
+  const visible = useMemo3(
+    () => {
+      const letzterFremder = messages.reduce((last, message, index) => message.role === "user" ? last : index, -1);
+      return messages.filter((message, index) => {
+        if (detailMode === "current" && istSchritt(message)) {
+          return running && index === letzterFremder && (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;
+      });
+    },
+    [messages, detailMode, running]
   );
-  const zeitVon = (at) => {
-    const date = timestampDate(at);
-    return date ? formatTimestamp(date, timestampOptions, now) : "";
-  };
-  const mitZeit = (inhalt, key, at) => showTimestamps ? /* @__PURE__ */ jsxs6("div", { className: "qsl-line", children: [
-    /* @__PURE__ */ jsx7("time", { className: "qsl-time", dateTime: timestampDate(at) ? at : void 0, style: timestampOptions?.format && timestampOptions.format !== "time" ? { width: "auto", maxWidth: "35%" } : void 0, children: zeitVon(at) }),
-    /* @__PURE__ */ jsx7("div", { className: "qsl-line-body", children: inhalt })
+  const mitZeit = (inhalt, key, at, dicht = false) => showTimestamps ? /* @__PURE__ */ jsxs6("div", { className: cn("qsl:flex qsl:items-baseline qsl:gap-2", dicht ? denseStepClasses : stepClasses), children: [
+    /* @__PURE__ */ jsx13("time", { dateTime: messageDate(at)?.toISOString(), className: cn(
+      "qsl:flex-none qsl:text-[10.5px] qsl:tabular-nums qsl:text-muted-foreground qsl:opacity-85",
+      timestampOptions?.format && timestampOptions.format !== "time" ? "qsl:w-[clamp(60px,20%,120px)]" : "qsl:w-[34px]"
+    ), 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: inhalt })
   ] }, `zeit-${key}`) : inhalt;
-  const chipModus = detailMode === "chips" || detailMode === "icons";
+  const chipModus = detailMode === "current" || detailMode === "chips" || detailMode === "icons";
   const gruppenModus = detailMode === "grouped";
   const bloecke = [];
+  let lastDay;
   let gruppe = [];
   const schliesseGruppe = () => {
     if (gruppe.length > 0) {
       const letzterZustand = stepState(gruppe[gruppe.length - 1]);
       bloecke.push(mitZeit(
-        gruppenModus ? /* @__PURE__ */ jsx7(
+        gruppenModus ? /* @__PURE__ */ jsx13(
           StepGroup,
           {
             aktiv: running && (letzterZustand === "running" || letzterZustand === "thinking"),
@@ -1065,14 +1177,15 @@ function ChatMessages({
             toolArgumentsText
           },
           gruppe[0].key
-        ) : /* @__PURE__ */ jsx7(
+        ) : /* @__PURE__ */ jsx13(
           StepRow,
           {
             expandierbar: stepsExpandable,
             messages: gruppe,
-            mitText: detailMode === "chips",
+            mitText: detailMode !== "icons",
             texts: alleTexte,
-            toolArgumentsText
+            toolArgumentsText,
+            toolLabel: detailMode === "current" && !stepsExpandable ? alleTexte.currentTool : void 0
           },
           gruppe[0].key
         ),
@@ -1082,22 +1195,21 @@ function ChatMessages({
       gruppe = [];
     }
   };
-  let currentDay;
   visible.forEach((message, index) => {
-    const date = timestampOptions?.showDaySeparators ? timestampDate(message.at) : void 0;
+    const date = timestampOptions?.showDaySeparators ? messageDate(message.at) : void 0;
     if (date) {
-      const day = timestampDay(date, timestampOptions?.timeZone);
-      if (day !== currentDay) {
+      const day = timestampDay(date, timestampOptions);
+      if (day.key !== lastDay) {
         schliesseGruppe();
-        bloecke.push(/* @__PURE__ */ jsx7("div", { className: "qsl-day-separator", role: "separator", "aria-label": formatDay(date, timestampOptions), children: formatDay(date, timestampOptions) }, `day-${message.key}`));
-        currentDay = day;
+        bloecke.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 eigeneDarstellung = message.role === "tool" && message.tool ? renderTool?.(message.tool) : void 0;
+    const eigeneDarstellung = message.role === "tool" && message.tool && detailMode !== "current" ? renderTool?.(message.tool) : void 0;
     if (eigeneDarstellung !== void 0) {
       schliesseGruppe();
       bloecke.push(mitZeit(
-        /* @__PURE__ */ jsx7("div", { className: "qsl-step", children: eigeneDarstellung }, message.key),
+        /* @__PURE__ */ jsx13("div", { className: stepClasses, children: eigeneDarstellung }, message.key),
         message.key,
         message.at
       ));
@@ -1108,77 +1220,134 @@ function ChatMessages({
       return;
     }
     schliesseGruppe();
+    const dicht = istSchritt(message) && istSchritt(visible[index - 1]);
     bloecke.push(mitZeit(
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx13(
         Bubble,
         {
           detailMode,
-          dicht: istSchritt(message) && istSchritt(visible[index - 1]),
+          dicht,
           expandierbar: stepsExpandable,
           message,
-          bubbleOptions,
-          messageActions,
+          plain: owner != null && message.sender === owner,
           texts: alleTexte,
           toolArgumentsText,
-          onAnswerQuestion
+          renderAction,
+          onDismissAction,
+          bubbleOptions,
+          messageActions
         },
         message.key
       ),
       message.key,
-      message.at
+      message.at,
+      dicht
     ));
   });
   schliesseGruppe();
-  const verlauf = /* @__PURE__ */ jsxs6("div", { className: className ? `qsl-chat-wrap ${className}` : "qsl-chat-wrap", style: appearanceStyle(appearance), children: [
-    /* @__PURE__ */ jsx7(
+  const verlauf = /* @__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
+  }, children: [
+    /* @__PURE__ */ jsx13(
       "div",
       {
-        className: "qsl-chat",
+        "aria-label": alleTexte.transcript,
+        className: cn(
+          "qsl:min-h-0 qsl:flex-1 qsl:cursor-default qsl:overflow-y-auto qsl:text-[length:var(--qsl-chat-font-size,13px)] 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"
+        ),
         onScroll: pruefeEnde,
+        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 next = event.touches[0]?.clientY;
+          if (next !== void 0 && touchY.current !== void 0 && next > touchY.current) pauseUp(event.currentTarget, event.target);
+          touchY.current = next;
+        },
+        role: "region",
+        tabIndex: 0,
         ref: (element) => {
           scrollBereich.current = element;
           scrollerRef?.(element);
         },
-        children: visible.length === 0 && !running ? emptyState ?? null : /* @__PURE__ */ jsxs6("div", { "aria-busy": running || void 0, className: "qsl-thread", children: [
-          bloecke,
-          running && stromAktiv && (working ?? /* @__PURE__ */ jsx7(WorkingScenes, { label: alleTexte.working }))
-        ] })
+        children: visible.length === 0 && !running ? emptyState ?? null : /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            "aria-busy": running || 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: [
+              bloecke,
+              running && (working ?? /* @__PURE__ */ jsx13(WorkingScenes, { label: alleTexte.working }))
+            ]
+          }
+        )
       }
     ),
-    !amEnde && /* @__PURE__ */ jsx7("div", { className: "qsl-jump", children: /* @__PURE__ */ jsx7("button", { "aria-label": alleTexte.jumpToEnd, onClick: () => scrollBereich.current?.scrollTo({ top: scrollBereich.current.scrollHeight, behavior: "smooth" }), type: "button", children: /* @__PURE__ */ jsx7(IconChevronDown, {}) }) })
+    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": alleTexte.jumpToEnd, className: "qsl:pointer-events-auto qsl:rounded-full qsl:border qsl:border-primary-foreground/20 qsl:shadow-md", size: "icon", title: alleTexte.jumpToEnd, variant: "default", onClick: () => {
+      if (scrollBereich.current) {
+        scroll.jump(scrollBereich.current);
+        updateJumpVisibility(scrollBereich.current);
+      }
+    }, children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) }) })
   ] });
-  return /* @__PURE__ */ jsx7(MarkdownLinks, { onLinkClick, children: /* @__PURE__ */ jsx7(MarkdownCodeBlocks, { options: codeBlockOptions, texts, children: verlauf }) });
+  return /* @__PURE__ */ jsx13(MarkdownLinks, { onLinkClick, children: /* @__PURE__ */ jsx13(MarkdownCodeBlocks, { options: codeBlockOptions, texts: alleTexte, children: verlauf }) });
 }
 function StepRow({
   messages,
   mitText,
   expandierbar,
   texts,
-  toolArgumentsText
+  toolArgumentsText,
+  toolLabel
 }) {
-  const [detail, setDetail] = useState7();
+  const [detail, setDetail] = useState4();
   const offen = expandierbar && detail && messages.find((message) => message.key === detail.key);
-  return /* @__PURE__ */ jsxs6("div", { className: "qsl-step qsl-steprow", children: [
+  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 running = state === "running" || state === "thinking";
-      const label = thinking ? texts.thinkingChip : tool?.name ?? message.text;
-      const content = /* @__PURE__ */ jsxs6(Fragment3, { children: [
-        thinking ? /* @__PURE__ */ jsx7(IconSpark, { size: 11 }) : /* @__PURE__ */ jsx7(IconTool, { className: tool?.isError ? "qsl-chip__icon--error" : void 0, size: 11 }),
-        mitText && /* @__PURE__ */ jsx7("span", { className: "qsl-chip__label", children: label }),
-        mitText && /* @__PURE__ */ jsx7("span", { className: "qsl-chip__state", children: state === "done" && /* @__PURE__ */ jsx7(IconCheck, { size: 10 }) })
+      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 }),
+        mitText && /* @__PURE__ */ jsx13("span", { className: "qsl:min-w-0 qsl:self-baseline qsl:overflow-hidden qsl:text-ellipsis qsl:whitespace-nowrap", children: label }),
+        mitText && /* @__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 = `${mitText ? "" : " qsl-chip--icon"} qsl-chip--${state}${running ? " qsl-pulse" : ""}`;
+      const classes = cn(chipClasses, !mitText && "qsl:p-1", running && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none");
       if (!expandierbar) {
-        return /* @__PURE__ */ jsx7("span", { className: `qsl-chip qsl-chip--still${classes}`, title: label, children: content }, message.key);
+        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__ */ jsx7(
+      return /* @__PURE__ */ jsx13(
         "button",
         {
           "aria-haspopup": "dialog",
-          className: `qsl-chip${classes}`,
+          className: cn(classes, chipInteractiveClasses),
+          "data-kind": thinking ? "thinking" : "tool",
+          "data-state": state,
+          "data-step": "chip",
           onClick: (event) => setDetail({ key: message.key, position: { x: event.clientX, y: event.clientY } }),
           title: label,
           type: "button",
@@ -1187,7 +1356,7 @@ function StepRow({
         message.key
       );
     }),
-    offen && detail && /* @__PURE__ */ jsx7(
+    offen && detail && /* @__PURE__ */ jsx13(
       StepPopover,
       {
         message: offen,
@@ -1206,10 +1375,10 @@ function StepGroup({
   texts,
   toolArgumentsText
 }) {
-  const [offen, setOffen] = useState7(false);
-  const kopf = useRef5(null);
-  const vonUntenEingeklappt = useRef5(false);
-  useLayoutEffect3(() => {
+  const [offen, setOffen] = useState4(false);
+  const kopf = useRef3(null);
+  const vonUntenEingeklappt = useRef3(false);
+  useLayoutEffect(() => {
     if (!offen && vonUntenEingeklappt.current) {
       vonUntenEingeklappt.current = false;
       kopf.current?.scrollIntoView({ block: "nearest" });
@@ -1218,22 +1387,22 @@ function StepGroup({
   const letzte = messages[messages.length - 1];
   const fehler = messages.some((message) => message.tool?.isError);
   const anzahl = messages.length === 1 ? texts.stepGroupOne : texts.stepGroupMany.replace("{count}", String(messages.length));
-  const laufend = aktiv ? letzte.role === "thinking" ? texts.thinkingChip : letzte.tool?.name ?? letzte.text : void 0;
-  return /* @__PURE__ */ jsxs6("div", { className: "qsl-step qsl-stepgroup", children: [
+  const laufend = aktiv ? letzte.role === "thinking" ? texts.thinkingChip : letzte.tool?.name || letzte.text || texts.toolChip : void 0;
+  return /* @__PURE__ */ jsxs6("div", { className: stepClasses, "data-step": "group", children: [
     /* @__PURE__ */ jsxs6(
       "button",
       {
         "aria-expanded": offen,
-        className: `qsl-trace qsl-trace--compact qsl-stepgroup__toggle${aktiv ? " qsl-pulse" : ""}`,
+        className: cn(traceClasses, traceButtonClasses, "qsl:items-center qsl:pl-1", aktiv && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none"),
         onClick: () => setOffen((wert) => !wert),
         ref: kopf,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx7(IconChevronRight, { className: "qsl-stepgroup__chevron", size: 12 }),
-          /* @__PURE__ */ jsx7(IconLayers, { className: fehler ? "qsl-trace__icon qsl-trace__icon--error" : "qsl-trace__icon", size: 12 }),
-          /* @__PURE__ */ jsxs6("span", { className: "qsl-trace__line", children: [
+          /* @__PURE__ */ jsx13(ChevronRightIcon, { className: cn("qsl:flex-none qsl:opacity-60 qsl:transition-transform", offen && "qsl:rotate-90"), size: 12 }),
+          /* @__PURE__ */ jsx13(LayersIcon, { className: fehler ? traceErrorIconClasses : traceIconClasses, size: 12 }),
+          /* @__PURE__ */ jsxs6("span", { className: cn(traceLineClasses, "qsl:overflow-hidden qsl:text-ellipsis qsl:whitespace-nowrap"), children: [
             anzahl,
-            laufend && /* @__PURE__ */ jsxs6("span", { className: "qsl-trace__running", children: [
+            laufend && /* @__PURE__ */ jsxs6("span", { className: traceRunningClasses, children: [
               laufend,
               " ",
               texts.toolRunning
@@ -1242,24 +1411,23 @@ function StepGroup({
         ]
       }
     ),
-    offen && /* @__PURE__ */ jsxs6("div", { className: "qsl-stepgroup__lines", children: [
-      messages.map((message) => /* @__PURE__ */ jsx7(TraceLine, { expandierbar, message, texts, toolArgumentsText }, message.key)),
-      messages.length >= collapseAtBottomFrom && /* @__PURE__ */ jsxs6(
-        "button",
-        {
-          className: "qsl-trace qsl-trace--compact qsl-stepgroup__toggle qsl-stepgroup__collapse",
-          onClick: () => {
-            vonUntenEingeklappt.current = true;
-            setOffen(false);
-          },
-          type: "button",
-          children: [
-            /* @__PURE__ */ jsx7(IconChevronRight, { className: "qsl-stepgroup__chevron", size: 12 }),
-            /* @__PURE__ */ jsx7("span", { className: "qsl-trace__line", children: texts.stepGroupCollapse })
-          ]
-        }
-      )
-    ] })
+    offen && /* @__PURE__ */ jsx13("div", { className: "qsl:mt-0.5 qsl:flex qsl:flex-col qsl:gap-0.5 qsl:pl-3", children: messages.map((message) => /* @__PURE__ */ jsx13(TraceLine, { className: "qsl:pl-3", expandierbar, message, texts, toolArgumentsText }, message.key)) }),
+    offen && 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: () => {
+          vonUntenEingeklappt.current = true;
+          setOffen(false);
+        },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx13(ChevronUpIcon, { className: "qsl:flex-none qsl:opacity-60", size: 12 }),
+          /* @__PURE__ */ jsx13("span", { className: traceLineClasses, children: texts.stepGroupCollapse })
+        ]
+      }
+    )
   ] });
 }
 function TraceLine({
@@ -1269,28 +1437,36 @@ function TraceLine({
   texts,
   toolArgumentsText
 }) {
-  const [detailPosition, setDetailPosition] = useState7();
-  const classes = `${className ? `${className} ` : ""}qsl-trace qsl-trace--compact${message.role === "thinking" ? " qsl-trace--thinking" : ""}`;
-  const inhalt = /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(TraceIcon, { message }),
-    /* @__PURE__ */ jsx7("span", { className: "qsl-trace__line", children: /* @__PURE__ */ jsx7(TraceText, { message, texts }) })
+  const [detailPosition, setDetailPosition] = useState4();
+  const thinking = message.role === "thinking";
+  const tool = message.tool;
+  const classes = cn(traceClasses, className);
+  const zeile = cn(traceLineClasses, thinking && "qsl:font-sans qsl:italic qsl:whitespace-pre-wrap", "qsl:overflow-hidden qsl:text-ellipsis qsl:whitespace-nowrap");
+  const inhalt = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    thinking ? /* @__PURE__ */ jsx13(SparklesIcon2, { className: traceIconClasses, size: 12 }) : /* @__PURE__ */ jsx13(WrenchIcon2, { className: tool?.isError ? traceErrorIconClasses : traceIconClasses, size: 12 }),
+    /* @__PURE__ */ jsxs6("span", { className: zeile, children: [
+      message.text,
+      tool && tool.result === void 0 && /* @__PURE__ */ jsx13("span", { className: traceRunningClasses, children: texts.toolRunning })
+    ] })
   ] });
+  const marks = { "data-compact": "true", "data-kind": thinking ? "thinking" : "tool", "data-step": "line" };
   if (!expandierbar) {
-    return /* @__PURE__ */ jsx7("div", { className: classes, children: inhalt });
+    return /* @__PURE__ */ jsx13("div", { className: classes, ...marks, children: inhalt });
   }
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx13(
       "button",
       {
         "aria-expanded": detailPosition !== void 0,
         "aria-haspopup": "dialog",
-        className: classes,
+        className: cn(classes, traceButtonClasses),
+        ...marks,
         onClick: (event) => setDetailPosition({ x: event.clientX, y: event.clientY }),
         type: "button",
         children: inhalt
       }
     ),
-    detailPosition && /* @__PURE__ */ jsx7(
+    detailPosition && /* @__PURE__ */ jsx13(
       StepPopover,
       {
         message,
@@ -1302,126 +1478,161 @@ function TraceLine({
     )
   ] });
 }
-function TraceIcon({ message }) {
-  return message.role === "thinking" ? /* @__PURE__ */ jsx7(IconSpark, { className: "qsl-trace__icon", size: 12 }) : /* @__PURE__ */ jsx7(IconTool, { className: message.tool?.isError ? "qsl-trace__icon qsl-trace__icon--error" : "qsl-trace__icon", size: 12 });
-}
-function TraceText({ message, texts }) {
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    message.text,
-    message.tool && message.tool.result === void 0 && /* @__PURE__ */ jsx7("span", { className: "qsl-trace__running", children: texts.toolRunning })
-  ] });
-}
 function Bubble({
   message,
-  bubbleOptions,
-  messageActions,
+  plain,
   detailMode,
   dicht,
   expandierbar,
   texts,
   toolArgumentsText,
-  onAnswerQuestion
+  renderAction,
+  onDismissAction,
+  bubbleOptions,
+  messageActions
 }) {
-  const schritt = dicht ? "qsl-step qsl-step--dense" : "qsl-step";
+  const schritt = dicht ? denseStepClasses : stepClasses;
   if (message.role === "thinking" || message.role === "tool" && message.tool) {
     if (detailMode === "compact") {
-      return /* @__PURE__ */ jsx7(TraceLine, { className: schritt, expandierbar, message, texts, toolArgumentsText });
+      return /* @__PURE__ */ jsx13(TraceLine, { className: schritt, expandierbar, message, texts, toolArgumentsText });
     }
+    const thinking = message.role === "thinking";
     const tool = message.tool;
-    return /* @__PURE__ */ jsxs6("div", { className: `${schritt} qsl-trace${message.role === "thinking" ? " qsl-trace--thinking" : ""}`, children: [
-      /* @__PURE__ */ jsx7(TraceIcon, { message }),
-      /* @__PURE__ */ jsxs6("div", { className: "qsl-trace__body", children: [
-        /* @__PURE__ */ jsx7("div", { className: "qsl-trace__line", children: /* @__PURE__ */ jsx7(TraceText, { message, texts }) }),
-        tool && /* @__PURE__ */ jsxs6("div", { className: "qsl-details", children: [
-          /* @__PURE__ */ jsx7("pre", { children: toolArgumentsText(tool) }),
-          tool.result !== void 0 && /* @__PURE__ */ jsx7("pre", { className: tool.isError ? "qsl-details__pre--error" : void 0, children: prettyJson(tool.result) })
+    const icon = thinking ? /* @__PURE__ */ jsx13(SparklesIcon2, { className: traceIconClasses, size: 12 }) : /* @__PURE__ */ jsx13(WrenchIcon2, { className: tool?.isError ? traceErrorIconClasses : traceIconClasses, size: 12 });
+    const zeile = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      message.text,
+      tool && tool.result === void 0 && /* @__PURE__ */ jsx13("span", { className: traceRunningClasses, children: texts.toolRunning })
+    ] });
+    return /* @__PURE__ */ jsxs6("div", { className: cn(traceClasses, schritt), "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:font-sans qsl:italic qsl:whitespace-pre-wrap"), children: zeile }),
+        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:font-mono qsl:text-[10.5px] 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:font-mono qsl:text-[10.5px] 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 === "question" && message.question) {
-    return /* @__PURE__ */ jsx7("div", { className: schritt, children: /* @__PURE__ */ jsx7(
-      QuestionCard,
+  if (message.role === "action" && message.action) {
+    const action = message.action;
+    return /* @__PURE__ */ jsx13("div", { className: schritt, children: renderAction?.(action, message.text) ?? /* @__PURE__ */ jsx13(
+      PendingActionCard,
       {
-        question: message.question,
+        action,
+        dismissedLabel: texts.actionDismissed,
+        dismissLabel: texts.dismissAction,
+        onDismiss: onDismissAction ? () => onDismissAction(action.actionId) : void 0,
         text: message.text,
-        texts,
-        onAnswer: (text) => onAnswerQuestion?.(message.question.callId, text)
+        waitingLabel: texts.pendingAction
       }
     ) });
   }
   if (message.role === "system") {
-    return /* @__PURE__ */ jsx7("div", { className: `${schritt} qsl-system`, children: /* @__PURE__ */ jsx7(Markdown, { text: message.text }) });
+    return /* @__PURE__ */ jsxs6("div", { className: cn(schritt, "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 })
+    ] });
   }
-  const content = message.text.trim();
-  if (!content && message.role !== "user") return null;
-  const plain = bubbleOptions?.variant === "plain";
-  const isBubble = !plain && (message.role === "user" || message.bubble || bubbleOptions?.variant === "bubbles");
+  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 label = bubbleOptions?.showSender === false ? void 0 : bubbleOptions?.senderLabel?.(message) ?? message.bubble?.label ?? (bubbleOptions?.showSender ? message.role : void 0);
-  const body = /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    label && /* @__PURE__ */ jsx7("span", { className: "qsl-bubble__label", children: label }),
-    /* @__PURE__ */ jsx7(Markdown, { text: message.role === "user" ? message.text : content }),
-    /* @__PURE__ */ jsx7(MessageActions, { message, options: messageActions, texts })
+  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-[0.72rem] 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-[0.72rem] qsl:leading-[1.45] qsl:opacity-70", "data-chat": "steered", children: texts.steered }),
+    /* @__PURE__ */ jsx13(MessageActions, { message, options: messageActions, texts })
   ] });
-  if (isBubble) {
-    const user = message.role === "user" && !message.bubble;
-    return /* @__PURE__ */ jsx7("div", { className: `${schritt} ${user ? "qsl-user" : "qsl-bubble"}`, style: { justifyContent: side === "end" ? "flex-end" : "flex-start" }, children: /* @__PURE__ */ jsx7("div", { style: { background: message.bubble?.color ?? (user ? void 0 : "var(--qsl-accent)"), maxWidth: bubbleOptions?.maxWidth }, children: body }) });
-  }
-  return /* @__PURE__ */ jsx7("div", { className: `${schritt} qsl-answer`, children: body });
+  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(schritt, "qsl:group qsl:relative qsl:w-full qsl:leading-[var(--qsl-chat-line-height,1.625)] qsl:text-foreground"), "data-message": "answer", children: content });
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      "data-chat-text-cursor": cursor,
+      className: cn(schritt, "qsl:flex", side === "end" ? "qsl:justify-end" : "qsl:justify-start"),
+      "data-message": message.role === "user" && !message.bubble && variant === "default" ? "user" : "bubble",
+      "data-side": side,
+      children: /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: cn(bubbleBodyClasses, "qsl:group", message.bubble ? "qsl:rounded-lg qsl:text-white qsl:[--qsl-scroll-cover:var(--qsl-primary)]" : "qsl:rounded-[10px_10px_4px_10px] qsl:border qsl:border-border qsl:bg-secondary qsl:text-foreground qsl:[--qsl-scroll-cover:var(--qsl-secondary)] qsl:in-data-[tone=material]:rounded-[9px] qsl:in-data-[tone=material]:border-glass-edge/20 qsl:in-data-[tone=material]:bg-primary/15 qsl:in-data-[tone=material]:text-foreground"),
+          "data-tone": message.bubble ? "on-color" : void 0,
+          style: { background: message.bubble?.color, maxWidth: bubbleOptions?.maxWidth },
+          children: content
+        }
+      )
+    }
+  );
+}
+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 { useLayoutEffect as useLayoutEffect4, useMemo as useMemo2, useRef as useRef6 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+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 jump = useRef6(void 0);
-  const scrollOnSendRef = useRef6(scrollOnSend);
-  useLayoutEffect4(() => {
+  const wurzel = useRef4(null);
+  const eingabe = useRef4(null);
+  const hasComposer = composer !== void 0;
+  const scrollOnSendRef = useRef4(scrollOnSend);
+  const [sendScope] = useState5(() => createChatSendScope(scrollOnSendRef));
+  useLayoutEffect2(() => {
     scrollOnSendRef.current = scrollOnSend;
   }, [scrollOnSend]);
-  const sendContext = useMemo2(() => ({
-    onSent: () => {
-      if (scrollOnSendRef.current) jump.current?.();
-    },
-    registerJump: (callback) => {
-      jump.current = callback;
-      return () => {
-        if (jump.current === callback) jump.current = void 0;
-      };
-    }
-  }), []);
-  const wurzel = useRef6(null);
-  const eingabe = useRef6(null);
-  const mitEingabe = composer !== void 0;
-  useLayoutEffect4(() => {
+  useEffect4(() => {
     const element = eingabe.current;
     const rahmen = wurzel.current;
-    if (!rahmen) {
-      return;
-    }
-    if (!element) {
-      rahmen.style.removeProperty("--qsl-composer-height");
+    if (!element || !rahmen) {
       return;
     }
     const messen = () => rahmen.style.setProperty("--qsl-composer-height", `${element.offsetHeight}px`);
     const beobachter = new ResizeObserver(messen);
     beobachter.observe(element);
     messen();
-    return () => beobachter.disconnect();
-  }, [mitEingabe]);
-  return /* @__PURE__ */ jsx8(ChatSendContext.Provider, { value: sendContext, children: /* @__PURE__ */ jsxs7(
+    return () => {
+      beobachter.disconnect();
+      rahmen.style.removeProperty("--qsl-composer-height");
+    };
+  }, [hasComposer]);
+  return /* @__PURE__ */ jsx14(ChatSendContext.Provider, { value: sendScope, children: /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: className ? `qsl-chat-panel ${className}` : "qsl-chat-panel",
-      style: appearanceStyle(appearance),
+      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) => {
         wurzel.current = element;
         if (typeof nodeRef === "function") {
@@ -1432,83 +1643,290 @@ function ChatPanel({
       },
       children: [
         children,
-        composer !== void 0 && /* @__PURE__ */ jsx8("div", { className: "qsl-chat-panel__composer", ref: eingabe, children: composer })
+        hasComposer && /* @__PURE__ */ jsx14("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: eingabe, children: composer })
       ]
     }
   ) });
 }
 
-// packages/quassel/src/TimestampSwitch.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-function TimestampSwitch({
-  showTimestamps,
-  onChange,
-  collapsible = true,
-  texts,
-  className
-}) {
-  const label = texts?.timestamps ?? defaultTexts.timestamps;
-  const classes = showTimestamps ? "qsl-icon-button qsl-icon-button--active" : "qsl-icon-button";
-  return /* @__PURE__ */ jsxs8(
-    "button",
-    {
-      "aria-label": label,
-      "aria-pressed": showTimestamps,
-      className: className ? `${classes} ${className}` : classes,
-      onClick: () => onChange(!showTimestamps),
-      title: label,
-      type: "button",
-      children: [
-        /* @__PURE__ */ jsx9(IconClock, {}),
-        /* @__PURE__ */ jsx9("span", { className: collapsible ? "qsl-collapsible" : void 0, children: label })
-      ]
+// packages/quassel/src/ChatInputToolbar.tsx
+import { PaperclipIcon, SendIcon, XIcon as XIcon2 } 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, useEffect as useEffect6, useRef as useRef7, useState as useState8 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useContext as useContext4, useEffect as useEffect5, useImperativeHandle, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState7 } from "react";
+import { createPortal } 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 = false,
   disabled = false,
+  sendDisabled = false,
+  layout = "card",
+  detailsContainer,
+  onErrorChange,
+  inputAriaControls,
   rows = 3,
   maxRows,
   actions,
   toolbarLeft,
   toolbarRight,
   texts,
-  sendShortcut = "enter"
+  handleRef,
+  attachments: attachmentsEnabled = true,
+  attachmentCapabilities,
+  attachmentCapabilitiesError,
+  onAttachmentsChange,
+  initialValue = "",
+  onDraftChange,
+  sendShortcut = "enter",
+  autoFocus = false,
+  onAutoFocusSettled
 }) {
+  const sendScope = useContext4(ChatSendContext);
   const alleTexte = { ...defaultTexts, ...texts };
-  const [draft, setDraft] = useState8("");
-  const { submit, sending, error } = useChatSubmit(onSend);
-  const rootRef = useRef7(null);
-  const eingabeRef = useRef7(null);
-  const [compact, setCompact] = useState8(false);
+  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(alleTexte.attachmentsWhileBusy);
+      return;
+    }
+    try {
+      validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), files, alleTexte);
+    } 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: alleTexte.attachmentReadFailed
+        } : item))
+      );
+    }
+  };
+  const rootRef = useRef6(null);
+  const eingabeRef = useRef6(null);
+  const autoFocusSettled = useRef6(false);
+  useEffect5(() => {
+    if (!autoFocus || autoFocusSettled.current) return;
+    const input2 = eingabeRef.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 = eingabeRef.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 = inline || toolbar ? 1 : maxRows;
+  const rootClasses = cn(
+    "qsl:flex qsl:shrink-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-[var(--qsl-input-card-radius,var(--qsl-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:border-0 qsl:bg-transparent qsl:text-[length:var(--qsl-chat-font-size,13px)] 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 = eingabeRef.current;
+      element?.focus();
+      if (element?.value === text) element.setSelectionRange(text.length, text.length);
+    },
+    focus: () => eingabeRef.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 = eingabeRef.current;
+    if (element) {
+      element.focus();
+      element.setSelectionRange(element.value.length, element.value.length);
+    }
+  }, [draft, sending]);
   const applyAutoGrow = useCallback3(() => {
     const element = eingabeRef.current;
-    if (!element || maxRows === void 0) {
+    if (!element || inputMaxRows === void 0) {
       return;
     }
     const stil = getComputedStyle(element);
     const zeilenhoehe = Number.parseFloat(stil.lineHeight) || Number.parseFloat(stil.fontSize) * 1.4;
     const polster = Number.parseFloat(stil.paddingTop) + Number.parseFloat(stil.paddingBottom);
-    const maximum = zeilenhoehe * Math.max(maxRows, rows) + polster;
+    const maximum = zeilenhoehe * Math.max(inputMaxRows, inputRows) + polster;
     element.style.height = "auto";
     const inhalt = element.scrollHeight;
     element.style.height = `${Math.min(inhalt, maximum)}px`;
     element.style.overflowY = inhalt > maximum ? "auto" : "hidden";
-  }, [maxRows, rows]);
-  useEffect6(() => {
+  }, [inputMaxRows, inputRows]);
+  useEffect5(() => {
     applyAutoGrow();
   }, [draft, applyAutoGrow]);
-  useEffect6(() => {
+  useEffect5(() => {
     const element = eingabeRef.current;
-    if (!element || maxRows === void 0) {
+    if (!element || inputMaxRows === void 0) {
       return;
     }
     let lastWidth = element.clientWidth;
@@ -1520,8 +1938,8 @@ function ChatInputToolbar({
     });
     observer.observe(element);
     return () => observer.disconnect();
-  }, [maxRows, applyAutoGrow]);
-  useEffect6(() => {
+  }, [inputMaxRows, applyAutoGrow]);
+  useEffect5(() => {
     const element = rootRef.current;
     if (!element) {
       return;
@@ -1532,79 +1950,245 @@ function ChatInputToolbar({
     beobachter.observe(element);
     return () => beobachter.disconnect();
   }, []);
-  const hatText = draft.trim().length > 0;
-  const send = async () => {
+  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, alleTexte) : 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();
-    if (!text || disabled || sending) {
+    const snapshot = attachmentsRef.current;
+    if (!allowEmpty && !text && !snapshot.length || disabled || sendDisabled || pendingSend.current || capabilityError || snapshot.some((entry) => entry.status !== "ready")) {
       return;
     }
-    if (await submit(text)) setDraft((current) => current === draft ? "" : current);
+    pendingSend.current = true;
+    const sentGeneration = generation.current;
+    const sentRevision = draftRevision.current;
+    const sentDraft = draft;
+    const focusOrigin = document.activeElement;
+    const startedFocused = focusOrigin === eingabeRef.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 !== eingabeRef.current) && (document.activeElement === focusOrigin || !toolbar && document.activeElement === document.body);
+        setSending(false);
+      }
+    }
   };
   const onKeyDown = (event) => {
-    if (isSendKey(event, sendShortcut)) {
+    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();
     }
   };
-  return /* @__PURE__ */ jsxs9("div", { className: compact ? "qsl-input-card qsl-input-card--compact" : "qsl-input-card", ref: rootRef, children: [
-    error && /* @__PURE__ */ jsx10("p", { className: "qsl-action-error", role: "alert", children: error }),
-    /* @__PURE__ */ jsx10(
-      "textarea",
+  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: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": alleTexte.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: alleTexte.attachmentPreparing }),
+      entry.status === "error" && /* @__PURE__ */ jsx15("small", { role: "alert", children: entry.error })
+    ] }),
+    /* @__PURE__ */ jsx15(
+      Button2,
       {
-        "aria-label": alleTexte.placeholder,
-        disabled,
-        onChange: (event) => setDraft(event.target.value),
-        onKeyDown,
-        placeholder: running ? alleTexte.steeringPlaceholder : alleTexte.placeholder,
-        ref: eingabeRef,
-        rows,
-        value: draft
+        "aria-label": fillText(alleTexte.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);
+          eingabeRef.current?.focus();
+        },
+        size: "icon-sm",
+        title: fillText(alleTexte.removeAttachment, { name: entry.file.name }),
+        variant: "outline",
+        children: /* @__PURE__ */ jsx15(XIcon2, {})
       }
-    ),
-    /* @__PURE__ */ jsxs9("div", { className: "qsl-input-card__toolbar", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "qsl-input-card__left", children: [
-        actions?.map((action, index) => /* @__PURE__ */ jsxs9(
-          "button",
-          {
-            className: action.active ? "qsl-icon-button qsl-icon-button--active" : "qsl-icon-button",
-            disabled: action.disabled,
-            onClick: action.onClick,
-            title: action.title ?? action.label,
-            type: "button",
-            children: [
-              action.icon,
-              action.label && /* @__PURE__ */ jsx10("span", { className: action.icon ? "qsl-collapsible" : void 0, children: action.label })
-            ]
-          },
-          index
-        )),
-        toolbarLeft
+    )
+  ] }, 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: [
+        alleTexte.notSent,
+        " ",
+        failed.draft.slice(0, 100),
+        failed.draft.length > 100 ? " ..." : "",
+        failed.attachments.length > 0 ? ` ${fillText(alleTexte.notSentAttachments, { count: failed.attachments.length })}` : "",
+        " "
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "qsl-input-card__right", children: [
-        toolbarRight,
-        running && onStop && /* @__PURE__ */ jsx10("button", { "aria-label": alleTexte.stop, className: "qsl-send qsl-send--stop", onClick: onStop, title: alleTexte.stop, type: "button", children: /* @__PURE__ */ jsx10(IconStop, {}) }),
-        (!running || !onStop || hatText) && /* @__PURE__ */ jsx10(
-          "button",
-          {
-            "aria-label": alleTexte.send,
-            className: "qsl-send",
-            disabled: disabled || sending || !hatText,
-            onClick: () => void send(),
-            title: running ? alleTexte.sendIntoRun : alleTexte.send,
-            type: "button",
-            children: /* @__PURE__ */ jsx10(IconSend, {})
-          }
-        )
-      ] })
+      /* @__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), alleTexte);
+        } 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: alleTexte.insertUnsent })
+    ] }, failed.id))
+  ] });
+  const sendButtons = /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    running && onStop && !hasContent && /* @__PURE__ */ jsx15(StopButton2, { className: "qsl:flex-none", label: alleTexte.stop, onClick: onStop, size: "icon-sm" }),
+    (!running || !onStop || hasContent) && /* @__PURE__ */ jsx15(
+      Button2,
+      {
+        "aria-label": alleTexte.send,
+        className: "qsl:flex-none",
+        disabled: disabled || sendDisabled || sending || attachmentBlocked || !!capabilityError || !hasContent,
+        onClick: () => {
+          void send();
+        },
+        size: "icon-sm",
+        title: running ? alleTexte.sendIntoRun : alleTexte.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": alleTexte.attachFiles,
+          disabled: disabled || sending,
+          onClick: () => fileInput.inputRef.current?.click(),
+          size: "icon-sm",
+          title: fillText(alleTexte.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: alleTexte.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": alleTexte.placeholder,
+      disabled: !toolbar && disabled,
+      readOnly: toolbar && disabled,
+      onChange: (event) => changeDraft(event.target.value),
+      onKeyDown,
+      placeholder: running ? alleTexte.steeringPlaceholder : alleTexte.placeholder,
+      ref: eingabeRef,
+      rows: inputRows,
+      value: draft
+    }
+  );
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: rootClasses,
+      "data-compact": compact,
+      "data-layout": layout,
+      "data-quassel": "",
+      "data-working": running || sending,
+      ref: rootRef,
+      ...attachmentsEnabled ? fileInput.dropProps : {},
+      children: [
+        attachmentsEnabled && /* @__PURE__ */ jsx15(
+          "input",
+          {
+            "aria-label": alleTexte.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-center", 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 && createPortal(details, detailsContainer)
+        ] }) : !inline && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          errors,
+          detailToolbar
+        ] })
+      ]
+    }
+  );
 }
 
 // packages/quassel/src/DetailModeSwitch.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-var DETAIL_MODES = ["off", "icons", "chips", "grouped", "compact", "full"];
+import { SparklesIcon as SparklesIcon3 } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs9 } 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",
@@ -1621,19 +2205,46 @@ function DetailModeSwitch({
   className
 }) {
   const alleTexte = { ...defaultTexts, ...texts };
+  const { Button: Button2 } = useQuasselComponents();
   const aktuell = modes.indexOf(mode);
   const naechster = modes[(aktuell < 0 ? 0 : aktuell + 1) % modes.length];
-  return /* @__PURE__ */ jsxs10(
-    "button",
+  return /* @__PURE__ */ jsxs9(
+    Button2,
     {
       "aria-label": `${alleTexte.detailModeTitle}: ${detailModeLabel(mode, texts)}`,
-      className: className ? `qsl-icon-button ${className}` : "qsl-icon-button",
+      className,
       onClick: () => onChange(naechster),
+      size: "sm",
       title: `${alleTexte.detailModeTitle}: ${detailModeLabel(mode, texts)}`,
-      type: "button",
+      variant: "ghost",
+      children: [
+        /* @__PURE__ */ jsx16(SparklesIcon3, {}),
+        /* @__PURE__ */ jsx16("span", { className: collapsible ? "qsl:in-data-[compact=true]:hidden" : void 0, children: detailModeLabel(mode, texts) })
+      ]
+    }
+  );
+}
+
+// packages/quassel/src/TimestampSwitch.tsx
+import { ClockIcon } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function TimestampSwitch({ showTimestamps, onChange, collapsible = true, texts, className }) {
+  const labels = { ...defaultTexts, ...texts };
+  const { Button: Button2 } = useQuasselComponents();
+  const title = showTimestamps ? labels.hideTimestamps : labels.showTimestamps;
+  return /* @__PURE__ */ jsxs10(
+    Button2,
+    {
+      "aria-label": title,
+      "aria-pressed": showTimestamps,
+      className,
+      onClick: () => onChange(!showTimestamps),
+      size: "sm",
+      title,
+      variant: "ghost",
       children: [
-        /* @__PURE__ */ jsx11(IconSpark, { size: 14 }),
-        /* @__PURE__ */ jsx11("span", { className: collapsible ? "qsl-collapsible" : void 0, children: detailModeLabel(mode, texts) })
+        /* @__PURE__ */ jsx17(ClockIcon, {}),
+        /* @__PURE__ */ jsx17("span", { className: collapsible ? "qsl:in-data-[compact=true]:hidden" : void 0, children: labels.timestamps })
       ]
     }
   );
@@ -1642,28 +2253,44 @@ export {
   ChatInputToolbar,
   ChatMessages,
   ChatPanel,
+  ChatSendContext,
   DETAIL_MODES,
   DetailModeSwitch,
-  IconCheck,
-  IconChevronDown,
-  IconChevronRight,
-  IconClock,
-  IconLayers,
-  IconSend,
-  IconSpark,
-  IconStop,
-  IconTool,
-  IconX,
+  MAX_CHAT_ATTACHMENTS,
+  MAX_CHAT_ATTACHMENT_BYTES,
   Markdown,
+  MarkdownCodeBlocks,
+  MarkdownLinks,
+  MessageActions,
+  PendingActionCard,
+  QuasselProvider,
+  StepPopover,
   TimestampSwitch,
+  WorkingScenes,
   announce,
+  appearanceStyle,
   applyEvent,
+  attachmentCapabilityError,
+  attachmentDownloadUrl,
+  attachmentMediaType,
   compactToolLine,
+  copyChatText,
+  createChatScroll,
+  createChatSendScope,
+  defaultComponents,
   defaultTexts,
   detailModeLabel,
+  encodeAttachment,
+  fillText,
+  formatAttachmentSize,
   markdownPlainText,
+  messageDate,
   prettyJson,
   stepState,
-  useChat
+  timestampDay,
+  timestampLabel,
+  useChatAction,
+  useQuasselComponents,
+  validateAttachmentSelection
 };
 //# sourceMappingURL=index.js.map