quassel 0.2.2 → 0.4.0

package/index.js

@@ -5,7 +5,7 @@ import {
   chatAttachmentMediaType,
   compactToolLine,
   prettyJson
-} from "./chunk-IGCFQJZB.js";
+} from "./chunk-3VEL4HEO.js";
 
 // packages/quassel/src/types.ts
 function stepState(message) {
@@ -21,67 +21,67 @@ 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",
-  thinkingTitle: "Thinking-Trace",
-  toolTitle: "Tool-Call",
-  argumentsLabel: "Argumente",
-  resultLabel: "Ergebnis",
-  close: "Schlie\xDFen",
-  jumpToEnd: "Zum Ende springen",
-  send: "Senden",
-  sendIntoRun: "In den laufenden Turn einspeisen",
-  stop: "Arbeit stoppen",
-  placeholder: "Nachricht schreiben ...",
-  steeringPlaceholder: "Dazwischenfunken ...",
-  steered: "In den laufenden Turn eingespeist",
-  detailModeTitle: "Detailgrad der Schritte",
-  detailModeOff: "nur Antworten",
-  detailModeCurrent: "aktuell",
-  detailModeIcons: "Symbole",
-  detailModeChips: "kompakt",
-  detailModeGrouped: "gruppiert",
-  detailModeCompact: "einzeilig",
-  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",
+  working: "Working ...",
+  toolRunning: "running ...",
+  toolStillRunning: "Tool running ...",
+  toolElapsedSeconds: "{seconds} s",
+  currentTool: "Tool running",
+  thinkingChip: "Thinking",
+  toolChip: "Tool",
+  stepGroupOne: "1 step",
+  stepGroupMany: "{count} steps",
+  stepGroupCollapse: "Collapse",
+  thinkingTitle: "Thinking trace",
+  toolTitle: "Tool call",
+  argumentsLabel: "Arguments",
+  resultLabel: "Result",
+  close: "Close",
+  jumpToEnd: "Jump to end",
+  send: "Send",
+  sendIntoRun: "Feed into the running turn",
+  stop: "Stop work",
+  placeholder: "Write a message ...",
+  steeringPlaceholder: "Interject ...",
+  steered: "Fed into the running turn",
+  detailModeTitle: "Step detail level",
+  detailModeOff: "answers only",
+  detailModeCurrent: "current",
+  detailModeIcons: "icons",
+  detailModeChips: "compact",
+  detailModeGrouped: "grouped",
+  detailModeCompact: "single line",
+  detailModeFull: "everything",
+  showTimestamps: "Show timestamps",
+  hideTimestamps: "Hide timestamps",
+  copyMessage: "Copy message",
+  editMessage: "Edit message",
+  retryMessage: "Request answer again",
+  copyCode: "Copy code",
+  copied: "Copied",
+  pendingAction: "waiting for input",
+  dismissAction: "Dismiss",
+  actionDismissed: "dismissed",
+  actionFailed: "Action failed",
+  clipboardUnavailable: "The clipboard is not available",
+  transcript: "Chat history",
+  attachments: "Attachments",
+  attachFiles: "Attach files",
+  attachFilesHint: "Attach files (up to {count} files, {size} in total)",
+  removeAttachment: "Remove {name}",
+  attachmentPreparing: "Preparing ...",
+  attachmentsPreparing: "Preparing attachments ...",
+  attachmentReadFailed: "The file could not be read. Remove it and add it again.",
+  attachmentsWhileBusy: "Wait until the input is ready again, then add the files again.",
+  tooManyAttachments: "At most {count} attachments per message. Remove an attachment first.",
+  attachmentsTooLarge: "Attachments may be at most {size} in total. Choose smaller files.",
+  attachmentUnsupported: "This chat does not support {name} as {kind}. Remove the attachment.",
+  attachmentUnsupportedByModel: "The model {model} does not support {name} as {kind}. Choose a suitable model or remove the attachment.",
+  attachmentKindImage: "image",
+  attachmentKindVideo: "video",
   attachmentKindPdf: "PDF",
-  notSent: "Nicht gesendet:",
-  notSentAttachments: "({count} Anh\xE4nge)",
-  insertUnsent: "Nicht gesendete Eingabe einf\xFCgen"
+  notSent: "Not sent:",
+  notSentAttachments: "({count} attachments)",
+  insertUnsent: "Insert unsent input"
 };
 
 // packages/quassel/src/ui/cn.ts
@@ -90,6 +90,7 @@ var cn = createCn({ prefix: "qsl", extend: { theme: { text: ["meta", "trace", "l
 
 // packages/quassel/src/ChatMessages.tsx
 import { useCallback as useCallback2, useContext as useContext3, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
 
 // packages/quassel/src/chat-scroll.ts
 var atEnd = (viewport) => viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= 24;
@@ -459,7 +460,7 @@ var components = {
   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.
+  // Without max-content the table shrinks to the container and stacks letters.
   table: ({ children }) => /* @__PURE__ */ jsx8("div", { className: cn(scrollbar, scrollCover, "qsl:my-2 qsl:overflow-x-auto"), 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 }),
@@ -493,7 +494,7 @@ function Markdown({ text, streaming = false }) {
   );
 }
 function markdownPlainText(text) {
-  return text.split("\n").filter((line) => !/^\s*```\w*\s*$/.test(line) && !isTableDivider(line)).map((line) => (line.trim().startsWith("|") ? splitTableRow(line).join(", ") : line).replace(/^(#{1,6})\s+/, "").replace(/^\s*>\s?/, "").replace(/^\s*([-*+]|\d+[.)])\s+/, "").replace(/!?\[([^\]]*)\]\(([^)]+)\)|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*]+)\*|`([^`]+)`/g, (_, link, _href, fett, fettUnterstrich, kursiv, code) => link ?? fett ?? fettUnterstrich ?? 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, bold, boldUnderscore, italic, code) => link ?? bold ?? boldUnderscore ?? italic ?? code).trim()).filter((line) => line !== "").join("\n");
 }
 function splitTableRow(line) {
   let row = line.trim();
@@ -603,159 +604,159 @@ function PendingActionCard({
 // packages/quassel/src/WorkingScenes.tsx
 import { useEffect as useEffect2, useState as useState2 } from "react";
 import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-var SPUR = 13;
-var GRUNDTAKT_MS = 90;
-var SZENENWECHSEL_MS = 2600;
-function bahn(figuren, breite = SPUR) {
-  return Array.from({ length: breite }, (_, x) => figuren[x] ?? " ");
+var TRACK = 13;
+var BASE_TICK_MS = 90;
+var SCENE_CHANGE_MS = 2600;
+function track(figures, width = TRACK) {
+  return Array.from({ length: width }, (_, x) => figures[x] ?? " ");
 }
-var SZENEN = [
+var SCENES = [
   {
-    id: "denken",
-    takt: 2,
-    zeichne: (schritt) => {
-      const takt = schritt % 10;
-      if (takt >= 8) return "\u{1F929}\u{1F4A1}";
-      return "\u{1F914}" + "\u{1F4AD}".repeat(Math.min(takt, 3));
+    id: "thinking",
+    tick: 2,
+    draw: (step) => {
+      const tick = step % 10;
+      if (tick >= 8) return "\u{1F929}\u{1F4A1}";
+      return "\u{1F914}" + "\u{1F4AD}".repeat(Math.min(tick, 3));
     }
   },
   {
-    // Fliegt nach rechts und zieht ihren Schweif hinterher.
-    id: "rakete",
-    takt: 2,
-    laufend: true,
-    zeichne: (schritt) => {
-      const x = schritt % SPUR;
-      return bahn({ [x - 2]: "\xB7", [x - 1]: "\u{1F4A8}", [x]: "\u{1F680}" });
+    // Flies to the right, dragging its tail behind.
+    id: "rocket",
+    tick: 2,
+    moving: true,
+    draw: (step) => {
+      const x = step % TRACK;
+      return track({ [x - 2]: "\xB7", [x - 1]: "\u{1F4A8}", [x]: "\u{1F680}" });
     }
   },
   {
-    // Die Punkte bleiben stehen und werden einzeln gefressen.
+    // The dots stay put and are eaten one by one.
     id: "pacman",
-    takt: 2,
-    laufend: true,
-    zeichne: (schritt) => {
-      const x = schritt % SPUR;
-      const figuren = {};
-      for (let i = x + 1; i < SPUR; i++) {
-        figuren[i] = "\xB7";
+    tick: 2,
+    moving: true,
+    draw: (step) => {
+      const x = step % TRACK;
+      const figures = {};
+      for (let i = x + 1; i < TRACK; i++) {
+        figures[i] = "\xB7";
       }
-      figuren[x] = schritt % 2 === 0 ? "\u{1F7E1}" : "\u{1F315}";
-      return bahn(figuren);
+      figures[x] = step % 2 === 0 ? "\u{1F7E1}" : "\u{1F315}";
+      return track(figures);
     }
   },
   {
-    // Aus einem Samen wird ein Baum, dann von vorn.
-    id: "wachsen",
+    // A seed becomes a tree, then start over.
+    id: "growing",
     compact: true,
-    takt: 2,
-    zeichne: (schritt) => {
-      const stufen = ["\u{1F331}", "\u{1F331}", "\u{1F33F}", "\u{1F33F}", "\u{1F343}", "\u{1F333}", "\u{1F333}", "\u{1F333}"];
-      return stufen[schritt % stufen.length];
+    tick: 2,
+    draw: (step) => {
+      const stages = ["\u{1F331}", "\u{1F331}", "\u{1F33F}", "\u{1F33F}", "\u{1F343}", "\u{1F333}", "\u{1F333}", "\u{1F333}"];
+      return stages[step % stages.length];
     }
   },
   {
-    // Das Ei bekommt Risse, das Kueken schluepft.
-    id: "schluepfen",
+    // The egg cracks, the chick hatches.
+    id: "hatching",
     compact: true,
-    takt: 2,
-    zeichne: (schritt) => {
-      const takt = schritt % 12;
-      if (takt < 4) return "\u{1F95A}";
-      if (takt < 6) return "\u{1F95A}*";
-      if (takt < 9) return "\u{1F423}";
+    tick: 2,
+    draw: (step) => {
+      const tick = step % 12;
+      if (tick < 4) return "\u{1F95A}";
+      if (tick < 6) return "\u{1F95A}*";
+      if (tick < 9) return "\u{1F423}";
       return "\u{1F425}";
     }
   },
   {
-    // Morse-artiges Signal, das sich zu einem OK aufloest.
+    // Morse-like signal that resolves into an OK.
     id: "signal",
-    takt: 2,
-    zeichne: (schritt) => {
-      const takt = schritt % 14;
-      if (takt >= 11) return "\u{1F4E1} OK";
-      const muster = ["\xB7", "\xB7\xB7", "\xB7-", "-\xB7", "\xB7\xB7-", "-\xB7\xB7"];
-      return "\u{1F4E1} " + muster[takt % muster.length];
+    tick: 2,
+    draw: (step) => {
+      const tick = step % 14;
+      if (tick >= 11) return "\u{1F4E1} OK";
+      const pattern = ["\xB7", "\xB7\xB7", "\xB7-", "-\xB7", "\xB7\xB7-", "-\xB7\xB7"];
+      return "\u{1F4E1} " + pattern[tick % pattern.length];
     }
   },
   {
-    // Sanduhr: der Sand laeuft durch, dann wird gedreht.
-    id: "sanduhr",
-    takt: 2,
-    zeichne: (schritt) => {
-      const takt = schritt % 12;
-      const koerner = "\xB7".repeat(Math.max(0, 5 - Math.floor(takt / 2)));
-      return (takt < 10 ? "\u23F3" : "\u231B") + " " + koerner;
+    // Hourglass: the sand runs through, then it is flipped.
+    id: "hourglass",
+    tick: 2,
+    draw: (step) => {
+      const tick = step % 12;
+      const grains = "\xB7".repeat(Math.max(0, 5 - Math.floor(tick / 2)));
+      return (tick < 10 ? "\u23F3" : "\u231B") + " " + grains;
     }
   },
   {
-    // Ei, Kueken, Henne - und die legt das naechste Ei.
-    id: "huhn-kreislauf",
+    // Egg, chick, hen - and she lays the next egg.
+    id: "chicken-cycle",
     compact: true,
-    takt: 3,
-    zeichne: (schritt) => {
-      const takt = schritt % 16;
-      if (takt < 3) return "\u{1F95A}";
-      if (takt < 5) return "\u{1F95A}*";
-      if (takt < 8) return "\u{1F423}";
-      if (takt < 11) return "\u{1F424}";
-      if (takt < 14) return "\u{1F414}";
+    tick: 3,
+    draw: (step) => {
+      const tick = step % 16;
+      if (tick < 3) return "\u{1F95A}";
+      if (tick < 5) return "\u{1F95A}*";
+      if (tick < 8) return "\u{1F423}";
+      if (tick < 11) return "\u{1F424}";
+      if (tick < 14) return "\u{1F414}";
       return "\u{1F414}\u{1F95A}";
     }
   },
   {
-    // Hut, Funken - und das Kaninchen tuermt.
-    id: "zauberhut",
+    // Hat, sparks - and the rabbit bolts.
+    id: "magic-hat",
     compact: true,
-    takt: 3,
-    zeichne: (schritt) => {
-      const takt = schritt % 14;
-      if (takt < 4) return "\u{1F3A9}";
-      if (takt < 7) return "\u{1F3A9}*";
-      if (takt < 11) return "\u{1F3A9}\u{1F407}";
+    tick: 3,
+    draw: (step) => {
+      const tick = step % 14;
+      if (tick < 4) return "\u{1F3A9}";
+      if (tick < 7) return "\u{1F3A9}*";
+      if (tick < 11) return "\u{1F3A9}\u{1F407}";
       return "\u{1F407}\u{1F4A8}";
     }
   },
   {
-    // Rot, Gelb, Gruen - und ab.
-    id: "ampel",
+    // Red, yellow, green - and off.
+    id: "traffic-light",
     compact: true,
-    takt: 3,
-    zeichne: (schritt) => {
-      const takt = schritt % 12;
-      if (takt < 4) return "\u{1F534}";
-      if (takt < 6) return "\u{1F7E1}";
-      if (takt < 8) return "\u{1F7E2}";
+    tick: 3,
+    draw: (step) => {
+      const tick = step % 12;
+      if (tick < 4) return "\u{1F534}";
+      if (tick < 6) return "\u{1F7E1}";
+      if (tick < 8) return "\u{1F7E2}";
       return "\u{1F697}\u{1F4A8}";
     }
   },
   {
-    // Klingeln, verschlafen, losrennen.
-    id: "wecker",
+    // Ringing, oversleeping, running off.
+    id: "alarm-clock",
     compact: true,
-    takt: 2,
-    zeichne: (schritt) => {
-      const takt = schritt % 14;
-      if (takt < 5) return takt % 2 === 0 ? "\u23F0" : "\u{1F514}";
-      if (takt < 8) return "\u{1F634}";
-      if (takt < 10) return "\u{1F633}";
+    tick: 2,
+    draw: (step) => {
+      const tick = step % 14;
+      if (tick < 5) return tick % 2 === 0 ? "\u23F0" : "\u{1F514}";
+      if (tick < 8) return "\u{1F634}";
+      if (tick < 10) return "\u{1F633}";
       return "\u{1F3C3}\u{1F4A8}";
     }
   },
   {
-    // Schnecke kriecht zur Flagge - und feiert.
-    id: "schnecke",
-    takt: 4,
-    zeichne: (schritt) => {
-      const takt = schritt % 8;
-      if (takt < 5) return bahn({ [takt]: "\u{1F40C}", 4: "\u{1F3C1}" }, 5);
-      return bahn({ 4: "\u{1F389}" }, 5);
+    // A snail crawls to the flag - and celebrates.
+    id: "snail",
+    tick: 4,
+    draw: (step) => {
+      const tick = step % 8;
+      if (tick < 5) return track({ [tick]: "\u{1F40C}", 4: "\u{1F3C1}" }, 5);
+      return track({ 4: "\u{1F389}" }, 5);
     }
   }
 ];
-var COMPACT_SCENES = SZENEN.filter((scene) => scene.compact);
-function WorkingScenes({ label = "Arbeitet ...", compact = false }) {
-  const scenes = compact ? COMPACT_SCENES : SZENEN;
+var COMPACT_SCENES = SCENES.filter((scene) => scene.compact);
+function WorkingScenes({ label = "Working ...", compact = false }) {
+  const scenes = compact ? COMPACT_SCENES : SCENES;
   const [sceneIndex, setSceneIndex] = useState2(() => Math.floor(Math.random() * scenes.length));
   const [offset, setOffset] = useState2(() => Math.floor(Math.random() * 20));
   const [frameTick, setFrameTick] = useState2(0);
@@ -774,15 +775,15 @@ function WorkingScenes({ label = "Arbeitet ...", compact = false }) {
       setSceneIndex((previous) => (previous + 1 + Math.floor(Math.random() * (scenes.length - 1))) % scenes.length);
       setOffset(Math.floor(Math.random() * 20));
       setFrameTick(0);
-    }, SZENENWECHSEL_MS);
+    }, SCENE_CHANGE_MS);
     return () => window.clearInterval(timer);
   }, [reducedMotion, scenes]);
   useEffect2(() => {
     if (reducedMotion) return;
-    const timer = window.setInterval(() => setFrameTick((value) => value + 1), GRUNDTAKT_MS);
+    const timer = window.setInterval(() => setFrameTick((value) => value + 1), BASE_TICK_MS);
     return () => window.clearInterval(timer);
   }, [reducedMotion]);
-  const frame = scene.zeichne(Math.floor(frameTick / scene.takt) + (scene.laufend ? offset : 0));
+  const frame = scene.draw(Math.floor(frameTick / scene.tick) + (scene.moving ? offset : 0));
   return /* @__PURE__ */ jsxs4("span", { "aria-label": label, className: cn("qsl:flex qsl:items-center qsl:gap-2.5 qsl:text-[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)
@@ -887,6 +888,53 @@ function timestampDay(date, options = {}) {
   return { key, label };
 }
 
+// packages/quassel/src/elapsed.ts
+import { useSyncExternalStore } from "react";
+var tickMs = 500;
+function formatElapsed(ms, texts) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  if (total < 60) return fillText(texts.toolElapsedSeconds, { seconds: total });
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total / 60) % 60;
+  const seconds = String(total % 60).padStart(2, "0");
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
+}
+function createTicker(intervalMs2 = tickMs) {
+  const listeners = /* @__PURE__ */ new Set();
+  let now = Date.now();
+  let timer;
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      if (timer === void 0) {
+        now = Date.now();
+        timer = setInterval(() => {
+          now = Date.now();
+          listeners.forEach((notify) => notify());
+        }, intervalMs2);
+      }
+      return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0 && timer !== void 0) {
+          clearInterval(timer);
+          timer = void 0;
+        }
+      };
+    },
+    now() {
+      const current = Date.now();
+      if (timer === void 0 && (current - now >= intervalMs2 || current < now)) now = current;
+      return now;
+    },
+    active: () => timer !== void 0
+  };
+}
+var elapsedTicker = createTicker();
+var nothingOnServer = () => void 0;
+function useElapsed(start) {
+  return useSyncExternalStore(elapsedTicker.subscribe, () => Math.floor((elapsedTicker.now() - start) / 1e3) * 1e3, nothingOnServer);
+}
+
 // packages/quassel/src/MessageActions.tsx
 import { CheckIcon as CheckIcon3, CopyIcon as CopyIcon2, PencilIcon, RotateCcwIcon } from "lucide-react";
 import { useState as useState3 } from "react";
@@ -952,13 +1000,17 @@ function createChatSendScope(enabled) {
   };
 }
 
+// packages/quassel/src/ChatActionDock.ts
+import { createContext as createContext4 } from "react";
+var ChatActionDock = createContext4(void 0);
+
 // packages/quassel/src/announce.ts
-var abstandMs = 400;
-var hoechstensWartend = 5;
+var intervalMs = 400;
+var maxQueued = 5;
 var region;
-var wartend = [];
-var laeuft = false;
-function ansageRegion() {
+var queued = [];
+var running = false;
+function liveRegion() {
   if (region?.isConnected) {
     return region;
   }
@@ -981,33 +1033,33 @@ function ansageRegion() {
   region = element;
   return element;
 }
-function naechste() {
-  if (wartend.length === 0) {
-    laeuft = false;
+function next() {
+  if (queued.length === 0) {
+    running = false;
     return;
   }
   if (document.visibilityState === "hidden") {
-    document.addEventListener("visibilitychange", naechste, { once: true });
+    document.addEventListener("visibilitychange", next, { once: true });
     return;
   }
-  const [text, ...rest] = wartend;
-  wartend = rest;
-  const ziel = ansageRegion();
-  ziel.textContent = ziel.textContent === text ? `${text}\xA0` : text;
-  window.setTimeout(naechste, abstandMs);
+  const [text, ...rest] = queued;
+  queued = rest;
+  const target = liveRegion();
+  target.textContent = target.textContent === text ? `${text}\xA0` : text;
+  window.setTimeout(next, intervalMs);
 }
 function announce(text) {
-  const inhalt = text.trim();
-  if (!inhalt || typeof document === "undefined") {
+  const content = text.trim();
+  if (!content || typeof document === "undefined") {
     return;
   }
-  wartend = [...wartend, inhalt].slice(-hoechstensWartend);
-  if (laeuft) {
+  queued = [...queued, content].slice(-maxQueued);
+  if (running) {
     return;
   }
-  laeuft = true;
-  ansageRegion();
-  window.setTimeout(naechste, abstandMs);
+  running = true;
+  liveRegion();
+  window.setTimeout(next, intervalMs);
 }
 
 // packages/quassel/src/ChatMessages.tsx
@@ -1030,11 +1082,14 @@ var chipClasses = cn(
 );
 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 maxAnnouncementsAtOnce = 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) {
+function isStep(message) {
   return !!message && (message.role === "thinking" || message.role === "tool");
 }
+function isOpenAction(message) {
+  return message.role === "action" && message.action !== void 0 && message.action.status === void 0;
+}
 function defaultArgumentsText(tool) {
   return prettyJson(tool.arguments);
 }
@@ -1042,7 +1097,7 @@ function ChatMessages({
   messages,
   owner,
   detailMode = "current",
-  running = false,
+  running: running2 = false,
   working,
   stepsExpandable = true,
   texts,
@@ -1064,17 +1119,19 @@ function ChatMessages({
   timestampOptions,
   codeBlockOptions,
   bubbleOptions,
-  messageActions
+  messageActions,
+  toolElapsedThreshold = 3e3
 }) {
-  const alleTexte = { ...defaultTexts, ...texts };
+  const allTexts = { ...defaultTexts, ...texts };
   const { Button: Button2 } = useQuasselComponents();
-  const scrollBereich = useRef3(null);
+  const scrollArea = useRef3(null);
   const threadRef = useRef3(null);
   const scrollbarDragging = useRef3(false);
   const touchY = useRef3(void 0);
   const [showJumpToEnd, setShowJumpToEnd] = useState4(false);
   const [scroll] = useState4(() => createChatScroll());
   const sendScope = useContext3(ChatSendContext);
+  const dock = useContext3(ChatActionDock);
   const [now, setNow] = useState4(() => Date.now());
   useEffect3(() => {
     if (!showTimestamps || timestampOptions?.format !== "relative") return;
@@ -1082,23 +1139,23 @@ function ChatMessages({
     const timer = window.setInterval(() => setNow(Date.now()), 15e3);
     return () => window.clearInterval(timer);
   }, [showTimestamps, timestampOptions?.format]);
-  const angesagt = useRef3(new Set(messages.map((message) => message.key)));
+  const announced = 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) {
+    const due = messages.filter((message, index) => !announced.current.has(message.key) && (message.role === "action" ? isOpenAction(message) : message.role === "assistant" && message.text.trim() !== "" && (message.closed === true || !running2 && index === messages.length - 1)));
+    if (due.length === 0) {
       return;
     }
-    angesagt.current = /* @__PURE__ */ new Set([...angesagt.current, ...faellig.map((message) => message.key)]);
-    if (announce2 === false || faellig.length > hoechstensAnsagenAufEinmal) {
+    announced.current = /* @__PURE__ */ new Set([...announced.current, ...due.map((message) => message.key)]);
+    if (announce2 === false || due.length > maxAnnouncementsAtOnce) {
       return;
     }
-    faellig.map((message) => announce2 ? announce2({ kind: message.role === "action" ? "action" : "reply", message }) : markdownPlainText(message.text)).forEach((text) => text && announce(text));
-  }, [messages, running, announce2]);
+    due.map((message) => announce2 ? announce2({ kind: message.role === "action" ? "action" : "reply", message }) : markdownPlainText(message.text)).forEach((text) => text && announce(text));
+  }, [messages, running2, 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;
+    const viewport = scrollArea.current;
     if (!viewport) return;
     scroll.jump(viewport);
     updateJumpVisibility(viewport);
@@ -1111,16 +1168,16 @@ function ChatMessages({
     }
     scroll.pause(viewport);
   };
-  const pruefeEnde = useCallback2(() => {
-    const bereich = scrollBereich.current;
-    if (bereich) {
-      scroll.scroll(bereich, scrollbarDragging.current);
-      updateJumpVisibility(bereich);
+  const checkEnd = useCallback2(() => {
+    const area = scrollArea.current;
+    if (area) {
+      scroll.scroll(area, scrollbarDragging.current);
+      updateJumpVisibility(area);
     }
   }, [scroll, updateJumpVisibility]);
   useEffect3(() => {
     const finishDrag = () => {
-      if (scrollbarDragging.current && scrollBereich.current) scroll.scroll(scrollBereich.current, true);
+      if (scrollbarDragging.current && scrollArea.current) scroll.scroll(scrollArea.current, true);
       scrollbarDragging.current = false;
     };
     window.addEventListener("pointerup", finishDrag);
@@ -1131,24 +1188,27 @@ function ChatMessages({
     };
   }, [scroll]);
   useLayoutEffect(() => {
-    const bereich = scrollBereich.current;
-    if (!bereich) return;
+    const area = scrollArea.current;
+    if (!area) return;
     const align = () => {
-      scroll.layout(bereich, scrollbarDragging.current);
-      updateJumpVisibility(bereich);
+      scroll.layout(area, scrollbarDragging.current);
+      updateJumpVisibility(area);
     };
     align();
-    const beobachter = new ResizeObserver(align);
-    beobachter.observe(bereich);
-    if (threadRef.current) beobachter.observe(threadRef.current, { box: "border-box" });
-    return () => beobachter.disconnect();
+    const observer = new ResizeObserver(align);
+    observer.observe(area);
+    if (threadRef.current) observer.observe(threadRef.current, { box: "border-box" });
+    return () => observer.disconnect();
   });
   const visible = useMemo3(
     () => {
-      const letzterFremder = messages.reduce((last, message, index) => message.role === "user" ? last : index, -1);
+      const lastNonUser = 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 (dock !== void 0 && isOpenAction(message)) {
+          return false;
+        }
+        if (detailMode === "current" && isStep(message)) {
+          return running2 && index === lastNonUser && (message.role === "thinking" ? !message.closed : stepState(message) === "running");
         }
         if ((message.role === "thinking" || message.role === "assistant") && message.text.trim() === "" && !message.attachments?.length) {
           return false;
@@ -1159,50 +1219,54 @@ function ChatMessages({
         return true;
       });
     },
-    [messages, detailMode, running]
+    [messages, detailMode, running2, dock]
   );
-  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: [
+  const openActions = dock ? messages.filter(isOpenAction) : [];
+  const withTime = (content, key, at, dense = false) => showTimestamps ? /* @__PURE__ */ jsxs6("div", { className: cn("qsl:flex qsl:items-baseline qsl:gap-2", dense ? denseStepClasses : stepClasses), children: [
     /* @__PURE__ */ jsx13("time", { dateTime: messageDate(at)?.toISOString(), className: cn(
       "qsl:flex-none qsl:text-meta 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 === "current" || detailMode === "chips" || detailMode === "icons";
-  const gruppenModus = detailMode === "grouped";
-  const bloecke = [];
+    /* @__PURE__ */ jsx13("div", { className: "qsl:min-w-0 qsl:flex-1 qsl:[&>*:first-child]:mt-0", children: content })
+  ] }, `time-${key}`) : content;
+  const chipMode = detailMode === "current" || detailMode === "chips" || detailMode === "icons";
+  const elapsedAfter = running2 && toolElapsedThreshold !== false ? toolElapsedThreshold : void 0;
+  const groupMode = detailMode === "grouped";
+  const blocks = [];
   let lastDay;
-  let gruppe = [];
-  const schliesseGruppe = () => {
-    if (gruppe.length > 0) {
-      const letzterZustand = stepState(gruppe[gruppe.length - 1]);
-      bloecke.push(mitZeit(
-        gruppenModus ? /* @__PURE__ */ jsx13(
+  let group = [];
+  const closeGroup = () => {
+    if (group.length > 0) {
+      const runningStep = running2 ? [...group].reverse().find((message) => ["running", "thinking"].includes(stepState(message))) : void 0;
+      blocks.push(withTime(
+        groupMode ? /* @__PURE__ */ jsx13(
           StepGroup,
           {
-            aktiv: running && (letzterZustand === "running" || letzterZustand === "thinking"),
-            expandierbar: stepsExpandable,
-            messages: gruppe,
-            texts: alleTexte,
+            elapsedAfter,
+            expandable: stepsExpandable,
+            runningStep,
+            messages: group,
+            texts: allTexts,
             toolArgumentsText
           },
-          gruppe[0].key
+          group[0].key
         ) : /* @__PURE__ */ jsx13(
           StepRow,
           {
-            expandierbar: stepsExpandable,
-            messages: gruppe,
-            mitText: detailMode !== "icons",
-            texts: alleTexte,
+            elapsedAfter,
+            expandable: stepsExpandable,
+            messages: group,
+            withText: detailMode !== "icons",
+            texts: allTexts,
             toolArgumentsText,
-            toolLabel: detailMode === "current" && !stepsExpandable ? alleTexte.currentTool : void 0
+            toolLabel: detailMode === "current" && !stepsExpandable ? allTexts.currentTool : void 0
           },
-          gruppe[0].key
+          group[0].key
         ),
-        gruppe[0].key,
-        gruppe[0].at
+        group[0].key,
+        group[0].at
       ));
-      gruppe = [];
+      group = [];
     }
   };
   visible.forEach((message, index) => {
@@ -1210,37 +1274,38 @@ function ChatMessages({
     if (date) {
       const day = timestampDay(date, timestampOptions);
       if (day.key !== lastDay) {
-        schliesseGruppe();
-        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}`));
+        closeGroup();
+        blocks.push(/* @__PURE__ */ jsx13("div", { className: cn(stepClasses, "qsl:text-center qsl:text-xs qsl:text-muted-foreground"), "data-chat": "day-separator", "data-day": day.key, children: day.label }, `day-${message.key}`));
         lastDay = day.key;
       }
     }
-    const eigeneDarstellung = message.role === "tool" && message.tool && detailMode !== "current" ? renderTool?.(message.tool) : void 0;
-    if (eigeneDarstellung !== void 0) {
-      schliesseGruppe();
-      bloecke.push(mitZeit(
-        /* @__PURE__ */ jsx13("div", { className: stepClasses, children: eigeneDarstellung }, message.key),
+    const customRendering = message.role === "tool" && message.tool && detailMode !== "current" ? renderTool?.(message.tool) : void 0;
+    if (customRendering !== void 0) {
+      closeGroup();
+      blocks.push(withTime(
+        /* @__PURE__ */ jsx13("div", { className: stepClasses, children: customRendering }, message.key),
         message.key,
         message.at
       ));
       return;
     }
-    if ((chipModus || gruppenModus) && istSchritt(message)) {
-      gruppe = [...gruppe, message];
+    if ((chipMode || groupMode) && isStep(message)) {
+      group = [...group, message];
       return;
     }
-    schliesseGruppe();
-    const dicht = istSchritt(message) && istSchritt(visible[index - 1]);
-    bloecke.push(mitZeit(
+    closeGroup();
+    const dense = isStep(message) && isStep(visible[index - 1]);
+    blocks.push(withTime(
       /* @__PURE__ */ jsx13(
         Bubble,
         {
           detailMode,
-          dicht,
-          expandierbar: stepsExpandable,
+          dense,
+          elapsedAfter,
+          expandable: stepsExpandable,
           message,
           plain: owner != null && message.sender === owner,
-          texts: alleTexte,
+          texts: allTexts,
           toolArgumentsText,
           renderAction,
           onDismissAction,
@@ -1251,11 +1316,11 @@ function ChatMessages({
       ),
       message.key,
       message.at,
-      dicht
+      dense
     ));
   });
-  schliesseGruppe();
-  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: {
+  closeGroup();
+  const transcript = /* @__PURE__ */ jsxs6("div", { className: cn("qsl:@container/chat qsl:relative qsl:flex qsl:min-h-0 qsl:flex-1 qsl:flex-col", className), "data-quassel": "", style: {
     ...appearanceStyle(appearance),
     "--qsl-chat-content-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
     "--qsl-chat-horizontal-padding": typeof horizontalPadding === "number" ? `${horizontalPadding}px` : horizontalPadding
@@ -1263,7 +1328,7 @@ function ChatMessages({
     /* @__PURE__ */ jsx13(
       "div",
       {
-        "aria-label": alleTexte.transcript,
+        "aria-label": allTexts.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))]",
@@ -1273,7 +1338,7 @@ function ChatMessages({
           scrollerClassName
         ),
         "data-quassel-transcript": "",
-        onScroll: pruefeEnde,
+        onScroll: checkEnd,
         onWheel: (event) => {
           if (!event.ctrlKey && event.deltaY < 0) pauseUp(event.currentTarget, event.target);
         },
@@ -1289,20 +1354,20 @@ function ChatMessages({
           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;
+          const next2 = event.touches[0]?.clientY;
+          if (next2 !== void 0 && touchY.current !== void 0 && next2 > touchY.current) pauseUp(event.currentTarget, event.target);
+          touchY.current = next2;
         },
         role: "region",
         tabIndex: 0,
         ref: (element) => {
-          scrollBereich.current = element;
+          scrollArea.current = element;
           scrollerRef?.(element);
         },
-        children: visible.length === 0 && !running ? emptyState ?? null : /* @__PURE__ */ jsxs6(
+        children: visible.length === 0 && !running2 ? emptyState ?? null : /* @__PURE__ */ jsxs6(
           "div",
           {
-            "aria-busy": running || void 0,
+            "aria-busy": running2 || void 0,
             className: cn(
               "qsl:mx-auto qsl:w-[calc(100%_-_2_*_var(--qsl-chat-horizontal-padding,24px))] qsl:max-w-[var(--qsl-chat-content-max-width,none)] qsl:pt-2",
               "qsl:pb-[calc(var(--qsl-composer-height,0px)_+_max(3.25em,40px))]",
@@ -1310,46 +1375,52 @@ function ChatMessages({
             ),
             ref: threadRef,
             children: [
-              bloecke,
-              running && (working ?? /* @__PURE__ */ jsx13(WorkingScenes, { label: alleTexte.working }))
+              blocks,
+              running2 && (working ?? /* @__PURE__ */ jsx13(WorkingScenes, { label: allTexts.working }))
             ]
           }
         )
       }
     ),
-    showJumpToEnd && /* @__PURE__ */ jsx13("div", { className: "qsl:pointer-events-none qsl:absolute qsl:inset-x-0 qsl:bottom-[calc(var(--qsl-composer-height,0px)_+_12px)] qsl:z-10 qsl:flex qsl:justify-center", children: /* @__PURE__ */ jsx13(Button2, { "aria-label": 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);
+    showJumpToEnd && /* @__PURE__ */ jsx13("div", { className: "qsl:pointer-events-none qsl:absolute qsl:inset-x-0 qsl:bottom-[calc(var(--qsl-composer-height,0px)_+_12px)] qsl:z-10 qsl:flex qsl:justify-center", children: /* @__PURE__ */ jsx13(Button2, { "aria-label": allTexts.jumpToEnd, className: "qsl:pointer-events-auto qsl:rounded-full qsl:border qsl:border-primary-foreground/20 qsl:shadow-md", size: "icon", title: allTexts.jumpToEnd, variant: "default", onClick: () => {
+      if (scrollArea.current) {
+        scroll.jump(scrollArea.current);
+        updateJumpVisibility(scrollArea.current);
       }
-    }, children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) }) })
+    }, children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) }) }),
+    dock && openActions.length > 0 && createPortal(
+      /* @__PURE__ */ jsx13("div", { className: "qsl:flex qsl:flex-col qsl:gap-[var(--qsl-chat-dense-message-gap,8px)] qsl:text-[length:var(--qsl-chat-font-size,13px)] qsl:text-foreground", style: appearanceStyle(appearance), children: openActions.map((message) => /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(ActionContent, { action: message.action, onDismissAction, renderAction, text: message.text, texts: allTexts }) }, message.key)) }),
+      dock
+    )
   ] });
-  return /* @__PURE__ */ jsx13(MarkdownLinks, { onLinkClick, children: /* @__PURE__ */ jsx13(MarkdownCodeBlocks, { options: codeBlockOptions, texts: alleTexte, children: verlauf }) });
+  return /* @__PURE__ */ jsx13(MarkdownLinks, { onLinkClick, children: /* @__PURE__ */ jsx13(MarkdownCodeBlocks, { options: codeBlockOptions, texts: allTexts, children: transcript }) });
 }
 function StepRow({
   messages,
-  mitText,
-  expandierbar,
+  withText,
+  expandable,
+  elapsedAfter,
   texts,
   toolArgumentsText,
   toolLabel
 }) {
   const [detail, setDetail] = useState4();
-  const offen = expandierbar && detail && messages.find((message) => message.key === detail.key);
+  const open = expandable && detail && messages.find((message) => message.key === detail.key);
   return /* @__PURE__ */ jsxs6("div", { className: cn(stepClasses, "qsl:flex qsl:flex-wrap qsl:items-center qsl:gap-x-1.5 qsl:gap-y-1 qsl:pl-6"), "data-step": "row", children: [
     messages.map((message) => {
       const thinking = message.role === "thinking";
       const tool = message.tool;
       const state = stepState(message);
-      const running = state === "running" || state === "thinking";
+      const running2 = state === "running" || state === "thinking";
       const label = thinking ? texts.thinkingChip : toolLabel ?? (tool?.name || message.text || texts.toolChip);
       const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
         thinking ? /* @__PURE__ */ jsx13(SparklesIcon2, { size: 11 }) : /* @__PURE__ */ jsx13(WrenchIcon2, { className: tool?.isError ? "qsl:text-destructive" : void 0, size: 11 }),
-        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 }) })
+        withText && /* @__PURE__ */ jsx13("span", { className: "qsl:min-w-0 qsl:self-baseline qsl:overflow-hidden qsl:text-ellipsis qsl:whitespace-nowrap", children: label }),
+        withText && /* @__PURE__ */ jsx13(ToolElapsed, { after: elapsedAfter, className: "qsl:flex-none qsl:self-baseline", message, texts }),
+        withText && /* @__PURE__ */ jsx13("span", { className: "qsl:inline-flex qsl:w-2.5 qsl:flex-none qsl:items-center qsl:justify-center qsl:text-success", children: state === "done" && /* @__PURE__ */ jsx13(CheckIcon4, { size: 10 }) })
       ] });
-      const classes = cn(chipClasses, !mitText && "qsl:p-1", running && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none");
-      if (!expandierbar) {
+      const classes = cn(chipClasses, !withText && "qsl:p-1", running2 && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none");
+      if (!expandable) {
         return /* @__PURE__ */ jsx13("span", { className: classes, "data-kind": thinking ? "thinking" : "tool", "data-state": state, "data-step": "chip", title: label, children: content }, message.key);
       }
       return /* @__PURE__ */ jsx13(
@@ -1368,10 +1439,10 @@ function StepRow({
         message.key
       );
     }),
-    offen && detail && /* @__PURE__ */ jsx13(
+    open && detail && /* @__PURE__ */ jsx13(
       StepPopover,
       {
-        message: offen,
+        message: open,
         position: detail.position,
         texts,
         toolArgumentsText,
@@ -1382,56 +1453,58 @@ function StepRow({
 }
 function StepGroup({
   messages,
-  aktiv,
-  expandierbar,
+  runningStep,
+  elapsedAfter,
+  expandable,
   texts,
   toolArgumentsText
 }) {
-  const [offen, setOffen] = useState4(false);
-  const kopf = useRef3(null);
-  const vonUntenEingeklappt = useRef3(false);
+  const [open, setOpen] = useState4(false);
+  const header = useRef3(null);
+  const collapsedFromBottom = useRef3(false);
   useLayoutEffect(() => {
-    if (!offen && vonUntenEingeklappt.current) {
-      vonUntenEingeklappt.current = false;
-      kopf.current?.scrollIntoView({ block: "nearest" });
+    if (!open && collapsedFromBottom.current) {
+      collapsedFromBottom.current = false;
+      header.current?.scrollIntoView({ block: "nearest" });
     }
-  }, [offen]);
-  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 || texts.toolChip : void 0;
+  }, [open]);
+  const active = runningStep !== void 0;
+  const failed = messages.some((message) => message.tool?.isError);
+  const count = messages.length === 1 ? texts.stepGroupOne : texts.stepGroupMany.replace("{count}", String(messages.length));
+  const runningLabel = runningStep && (runningStep.role === "thinking" ? texts.thinkingChip : runningStep.tool?.name || runningStep.text || texts.toolChip);
   return /* @__PURE__ */ jsxs6("div", { className: stepClasses, "data-step": "group", children: [
     /* @__PURE__ */ jsxs6(
       "button",
       {
-        "aria-expanded": offen,
-        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,
+        "aria-expanded": open,
+        className: cn(traceClasses, traceButtonClasses, "qsl:items-center qsl:pl-1", active && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none"),
+        onClick: () => setOpen((value) => !value),
+        ref: header,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx13(ChevronRightIcon, { className: cn("qsl:flex-none qsl:opacity-60 qsl:transition-transform", offen && "qsl:rotate-90"), size: 12 }),
-          /* @__PURE__ */ jsx13(LayersIcon, { className: fehler ? traceErrorIconClasses : traceIconClasses, size: 12 }),
+          /* @__PURE__ */ jsx13(ChevronRightIcon, { className: cn("qsl:flex-none qsl:opacity-60 qsl:transition-transform", open && "qsl:rotate-90"), size: 12 }),
+          /* @__PURE__ */ jsx13(LayersIcon, { className: failed ? 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: traceRunningClasses, children: [
-              laufend,
+            count,
+            runningLabel && /* @__PURE__ */ jsxs6("span", { className: traceRunningClasses, children: [
+              runningLabel,
               " ",
               texts.toolRunning
-            ] })
+            ] }),
+            runningStep && /* @__PURE__ */ jsx13(ToolElapsed, { after: elapsedAfter, message: runningStep, texts })
           ] })
         ]
       }
     ),
-    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(
+    open && /* @__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", elapsedAfter, expandable, message, texts, toolArgumentsText }, message.key)) }),
+    open && messages.length >= collapseAtBottomFrom && /* @__PURE__ */ jsxs6(
       "button",
       {
         className: cn(traceClasses, traceButtonClasses, "qsl:mt-0.5 qsl:items-center qsl:pl-1"),
         "data-step": "group-collapse",
         onClick: () => {
-          vonUntenEingeklappt.current = true;
-          setOffen(false);
+          collapsedFromBottom.current = true;
+          setOpen(false);
         },
         type: "button",
         children: [
@@ -1445,7 +1518,8 @@ function StepGroup({
 function TraceLine({
   message,
   className,
-  expandierbar,
+  elapsedAfter,
+  expandable,
   texts,
   toolArgumentsText
 }) {
@@ -1453,17 +1527,18 @@ function TraceLine({
   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: [
+  const line = cn(traceLineClasses, thinking && "qsl:font-sans qsl:italic qsl:whitespace-pre-wrap", "qsl:overflow-hidden qsl:text-ellipsis qsl:whitespace-nowrap");
+  const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
     thinking ? /* @__PURE__ */ jsx13(SparklesIcon2, { className: traceIconClasses, size: 12 }) : /* @__PURE__ */ jsx13(WrenchIcon2, { className: tool?.isError ? traceErrorIconClasses : traceIconClasses, size: 12 }),
-    /* @__PURE__ */ jsxs6("span", { className: zeile, children: [
+    /* @__PURE__ */ jsxs6("span", { className: line, children: [
       message.text,
-      tool && tool.result === void 0 && /* @__PURE__ */ jsx13("span", { className: traceRunningClasses, children: texts.toolRunning })
+      tool && tool.result === void 0 && /* @__PURE__ */ jsx13("span", { className: traceRunningClasses, children: texts.toolRunning }),
+      /* @__PURE__ */ jsx13(ToolElapsed, { after: elapsedAfter, message, texts })
     ] })
   ] });
   const marks = { "data-compact": "true", "data-kind": thinking ? "thinking" : "tool", "data-step": "line" };
-  if (!expandierbar) {
-    return /* @__PURE__ */ jsx13("div", { className: classes, ...marks, children: inhalt });
+  if (!expandable) {
+    return /* @__PURE__ */ jsx13("div", { className: classes, ...marks, children: content });
   }
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
     /* @__PURE__ */ jsx13(
@@ -1475,7 +1550,7 @@ function TraceLine({
         ...marks,
         onClick: (event) => setDetailPosition({ x: event.clientX, y: event.clientY }),
         type: "button",
-        children: inhalt
+        children: content
       }
     ),
     detailPosition && /* @__PURE__ */ jsx13(
@@ -1490,12 +1565,22 @@ function TraceLine({
     )
   ] });
 }
+function ToolElapsed({ message, after, texts, className = traceRunningClasses }) {
+  const start = stepState(message) === "running" ? messageDate(message.at)?.getTime() : void 0;
+  return after === void 0 || start === void 0 ? null : /* @__PURE__ */ jsx13(Elapsed, { after, className, start, texts });
+}
+function Elapsed({ start, after, className, texts }) {
+  const elapsed = useElapsed(start);
+  if (elapsed === void 0 || elapsed < after) return null;
+  return /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: cn(className, "qsl:tabular-nums"), "data-step": "elapsed", children: formatElapsed(elapsed, texts) });
+}
 function Bubble({
   message,
   plain,
   detailMode,
-  dicht,
-  expandierbar,
+  dense,
+  elapsedAfter,
+  expandable,
   texts,
   toolArgumentsText,
   renderAction,
@@ -1503,22 +1588,23 @@ function Bubble({
   bubbleOptions,
   messageActions
 }) {
-  const schritt = dicht ? denseStepClasses : stepClasses;
+  const stepSpacing = dense ? denseStepClasses : stepClasses;
   if (message.role === "thinking" || message.role === "tool" && message.tool) {
     if (detailMode === "compact") {
-      return /* @__PURE__ */ jsx13(TraceLine, { className: schritt, expandierbar, message, texts, toolArgumentsText });
+      return /* @__PURE__ */ jsx13(TraceLine, { className: stepSpacing, elapsedAfter, expandable, message, texts, toolArgumentsText });
     }
     const thinking = message.role === "thinking";
     const tool = message.tool;
     const icon = thinking ? /* @__PURE__ */ jsx13(SparklesIcon2, { className: traceIconClasses, size: 12 }) : /* @__PURE__ */ jsx13(WrenchIcon2, { className: tool?.isError ? traceErrorIconClasses : traceIconClasses, size: 12 });
-    const zeile = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    const line = /* @__PURE__ */ jsxs6(Fragment2, { children: [
       message.text,
-      tool && tool.result === void 0 && /* @__PURE__ */ jsx13("span", { className: traceRunningClasses, children: texts.toolRunning })
+      tool && tool.result === void 0 && /* @__PURE__ */ jsx13("span", { className: traceRunningClasses, children: texts.toolRunning }),
+      /* @__PURE__ */ jsx13(ToolElapsed, { after: elapsedAfter, message, texts })
     ] });
-    return /* @__PURE__ */ jsxs6("div", { className: cn(traceClasses, schritt), "data-kind": thinking ? "thinking" : "tool", "data-step": "detail", children: [
+    return /* @__PURE__ */ jsxs6("div", { className: cn(traceClasses, stepSpacing), "data-kind": thinking ? "thinking" : "tool", "data-step": "detail", children: [
       icon,
       /* @__PURE__ */ jsxs6("div", { className: "qsl:min-w-0 qsl:flex-1", children: [
-        /* @__PURE__ */ jsx13("div", { className: cn(traceLineClasses, thinking && "qsl:font-sans qsl:italic qsl:whitespace-pre-wrap"), children: zeile }),
+        /* @__PURE__ */ jsx13("div", { className: cn(traceLineClasses, thinking && "qsl:font-sans qsl:italic qsl:whitespace-pre-wrap"), children: line }),
         tool && /* @__PURE__ */ jsxs6("div", { className: "qsl:mt-0.5 qsl:border-l-2 qsl:border-border-soft qsl:pl-2", children: [
           /* @__PURE__ */ jsx13("pre", { className: "qsl:mb-0.5 qsl:max-h-[208px] qsl:overflow-auto qsl:font-mono qsl:text-meta qsl:leading-[1.375] qsl:break-all qsl:whitespace-pre-wrap qsl:opacity-80", children: toolArgumentsText(tool) }),
           tool.result !== void 0 && /* @__PURE__ */ jsx13("pre", { className: cn(
@@ -1530,21 +1616,10 @@ function Bubble({
     ] });
   }
   if (message.role === "action" && message.action) {
-    const action = message.action;
-    return /* @__PURE__ */ jsx13("div", { className: schritt, children: renderAction?.(action, message.text) ?? /* @__PURE__ */ jsx13(
-      PendingActionCard,
-      {
-        action,
-        dismissedLabel: texts.actionDismissed,
-        dismissLabel: texts.dismissAction,
-        onDismiss: onDismissAction ? () => onDismissAction(action.actionId) : void 0,
-        text: message.text,
-        waitingLabel: texts.pendingAction
-      }
-    ) });
+    return /* @__PURE__ */ jsx13("div", { className: stepSpacing, children: /* @__PURE__ */ jsx13(ActionContent, { action: message.action, onDismissAction, renderAction, text: message.text, texts }) });
   }
   if (message.role === "system") {
-    return /* @__PURE__ */ jsxs6("div", { className: cn(schritt, "qsl:border-l-2 qsl:border-destructive/50 qsl:pl-3 qsl:text-sm qsl:text-muted-foreground"), "data-message": "system", children: [
+    return /* @__PURE__ */ jsxs6("div", { className: cn(stepSpacing, "qsl:border-l-2 qsl:border-destructive/50 qsl:pl-3 qsl:text-sm qsl:text-muted-foreground"), "data-message": "system", children: [
       /* @__PURE__ */ jsx13(Markdown, { text: message.text }),
       /* @__PURE__ */ jsx13(MessageAttachments, { label: texts.attachments, message })
     ] });
@@ -1566,12 +1641,12 @@ function Bubble({
     /* @__PURE__ */ jsx13(MessageActions, { message, options: messageActions, texts })
   ] });
   const cursor = message.role === "assistant" && message.textCursor ? JSON.stringify(message.textCursor) : void 0;
-  if (!useBubble) return /* @__PURE__ */ jsx13("div", { "data-chat-text-cursor": cursor, className: cn(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 });
+  if (!useBubble) return /* @__PURE__ */ jsx13("div", { "data-chat-text-cursor": cursor, className: cn(stepSpacing, "qsl:group qsl:relative qsl:w-full qsl:leading-[var(--qsl-chat-line-height,1.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"),
+      className: cn(stepSpacing, "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(
@@ -1586,6 +1661,25 @@ function Bubble({
     }
   );
 }
+function ActionContent({
+  action,
+  text,
+  texts,
+  renderAction,
+  onDismissAction
+}) {
+  return renderAction?.(action, text) ?? /* @__PURE__ */ jsx13(
+    PendingActionCard,
+    {
+      action,
+      dismissedLabel: texts.actionDismissed,
+      dismissLabel: texts.dismissAction,
+      onDismiss: onDismissAction ? () => onDismissAction(action.actionId) : void 0,
+      text,
+      waitingLabel: texts.pendingAction
+    }
+  );
+}
 function MessageAttachments({ message, label }) {
   if (!message.attachments?.length) return null;
   return /* @__PURE__ */ jsx13("ul", { className: "qsl:mt-2.5 qsl:flex qsl:flex-wrap qsl:gap-2", "aria-label": label, children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsxs6("li", { className: "qsl:relative qsl:flex qsl:w-[190px] qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-sm", children: [
@@ -1611,8 +1705,9 @@ function ChatPanel({
   appearance,
   scrollOnSend = false
 }) {
-  const wurzel = useRef4(null);
-  const eingabe = useRef4(null);
+  const root = useRef4(null);
+  const composerRef = useRef4(null);
+  const [dock, setDock] = useState5(null);
   const hasComposer = composer !== void 0;
   const scrollOnSendRef = useRef4(scrollOnSend);
   const [sendScope] = useState5(() => createChatSendScope(scrollOnSendRef));
@@ -1620,21 +1715,26 @@ function ChatPanel({
     scrollOnSendRef.current = scrollOnSend;
   }, [scrollOnSend]);
   useEffect4(() => {
-    const element = eingabe.current;
-    const rahmen = wurzel.current;
-    if (!element || !rahmen) {
+    const element = composerRef.current;
+    const frame = root.current;
+    if (!element || !frame) {
       return;
     }
-    const messen = () => rahmen.style.setProperty("--qsl-composer-height", `${element.offsetHeight}px`);
-    const beobachter = new ResizeObserver(messen);
-    beobachter.observe(element);
-    messen();
+    const measure = () => {
+      frame.style.setProperty("--qsl-composer-height", `${element.offsetHeight}px`);
+      frame.style.setProperty("--qsl-panel-height", `${frame.offsetHeight}px`);
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    observer.observe(frame);
+    measure();
     return () => {
-      beobachter.disconnect();
-      rahmen.style.removeProperty("--qsl-composer-height");
+      observer.disconnect();
+      frame.style.removeProperty("--qsl-composer-height");
+      frame.style.removeProperty("--qsl-panel-height");
     };
   }, [hasComposer]);
-  return /* @__PURE__ */ jsx14(ChatSendContext.Provider, { value: sendScope, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx14(ChatSendContext.Provider, { value: sendScope, children: /* @__PURE__ */ jsx14(ChatActionDock.Provider, { value: hasComposer ? dock : void 0, children: /* @__PURE__ */ jsxs7(
     "div",
     {
       className: cn("qsl:relative qsl:flex qsl:min-h-0 qsl:min-w-0 qsl:flex-col qsl:overflow-hidden", className),
@@ -1646,7 +1746,7 @@ function ChatPanel({
         "--qsl-chat-horizontal-padding": typeof horizontalPadding === "number" ? `${horizontalPadding}px` : horizontalPadding
       },
       ref: (element) => {
-        wurzel.current = element;
+        root.current = element;
         if (typeof nodeRef === "function") {
           nodeRef(element);
         } else if (nodeRef) {
@@ -1655,10 +1755,20 @@ function ChatPanel({
       },
       children: [
         children,
-        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 })
+        hasComposer && /* @__PURE__ */ jsxs7("div", { className: "qsl:absolute qsl:inset-x-0 qsl:bottom-0 qsl:z-[5] qsl:px-[var(--qsl-chat-horizontal-padding,24px)] qsl:pb-3.5 qsl:*:mx-auto qsl:*:max-w-[var(--qsl-chat-content-max-width,none)]", "data-chat": "composer", ref: composerRef, children: [
+          /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: "qsl:-mx-[16px] qsl:max-h-[calc(var(--qsl-panel-height,100dvh)_/_2)] qsl:overflow-y-auto qsl:px-[16px] qsl:pb-[var(--qsl-chat-message-gap,16px)] qsl:[-webkit-mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--qsl-chat-message-gap,16px)),transparent)] qsl:[mask-image:linear-gradient(to_bottom,#000_calc(100%_-_var(--qsl-chat-message-gap,16px)),transparent)] qsl:empty:hidden",
+              "data-chat": "actions",
+              ref: setDock
+            }
+          ) }),
+          composer
+        ] })
       ]
     }
-  ) });
+  ) }) });
 }
 
 // packages/quassel/src/ChatInputToolbar.tsx
@@ -1714,7 +1824,7 @@ function useFileInput({ disabled, onFiles, onPasteText }) {
 
 // packages/quassel/src/ChatInputToolbar.tsx
 import { useCallback as useCallback3, useContext as useContext4, useEffect as useEffect5, useImperativeHandle, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState7 } from "react";
-import { createPortal } from "react-dom";
+import { createPortal as createPortal2 } from "react-dom";
 import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var COMPACT_WIDTH_PX = 480;
 var errorClasses = "qsl:px-3 qsl:py-2 qsl:text-sm qsl:text-destructive";
@@ -1723,7 +1833,7 @@ var attachmentMediaClasses = "qsl:block qsl:h-[112px] qsl:w-full qsl:bg-secondar
 function ChatInputToolbar({
   onSend,
   onStop,
-  running = false,
+  running: running2 = false,
   disabled = false,
   sendDisabled = false,
   layout = "card",
@@ -1748,7 +1858,7 @@ function ChatInputToolbar({
   onAutoFocusSettled
 }) {
   const sendScope = useContext4(ChatSendContext);
-  const alleTexte = { ...defaultTexts, ...texts };
+  const allTexts = { ...defaultTexts, ...texts };
   const { Button: Button2, StopButton: StopButton2, Toggle: Toggle2 } = useQuasselComponents();
   const [draft, setDraft] = useState7(initialValue);
   const [sending, setSending] = useState7(false);
@@ -1772,11 +1882,11 @@ function ChatInputToolbar({
   const addFiles = (files) => {
     if (!files.length) return;
     if (disabled || pendingSend.current) {
-      setAttachmentError(alleTexte.attachmentsWhileBusy);
+      setAttachmentError(allTexts.attachmentsWhileBusy);
       return;
     }
     try {
-      validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), files, alleTexte);
+      validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), files, allTexts);
     } catch (error) {
       setAttachmentError(error instanceof Error ? error.message : String(error));
       return;
@@ -1790,17 +1900,17 @@ function ChatInputToolbar({
         () => updateAttachments((current) => current.map((item) => item.id === entry.id ? {
           ...entry,
           status: "error",
-          error: alleTexte.attachmentReadFailed
+          error: allTexts.attachmentReadFailed
         } : item))
       );
     }
   };
   const rootRef = useRef6(null);
-  const eingabeRef = useRef6(null);
+  const textareaRef = useRef6(null);
   const autoFocusSettled = useRef6(false);
   useEffect5(() => {
     if (!autoFocus || autoFocusSettled.current) return;
-    const input2 = eingabeRef.current;
+    const input2 = textareaRef.current;
     if (!input2) return;
     let frame = 0;
     const settle = () => {
@@ -1849,7 +1959,7 @@ function ChatInputToolbar({
     disabled: disabled || sending,
     onFiles: addFiles,
     onPasteText: (text) => {
-      const input2 = eingabeRef.current;
+      const input2 = textareaRef.current;
       if (!input2 || disabled || pendingSend.current) return;
       const start = input2.selectionStart;
       const end = input2.selectionEnd;
@@ -1886,11 +1996,11 @@ function ChatInputToolbar({
     insert: (text) => {
       pendingFocus.current = true;
       changeDraft(text);
-      const element = eingabeRef.current;
+      const element = textareaRef.current;
       element?.focus();
       if (element?.value === text) element.setSelectionRange(text.length, text.length);
     },
-    focus: () => eingabeRef.current?.focus(),
+    focus: () => textareaRef.current?.focus(),
     submit: (onSubmit, options) => send(onSubmit, options?.allowEmpty),
     reset: () => {
       generation.current += 1;
@@ -1913,31 +2023,31 @@ function ChatInputToolbar({
       return;
     }
     pendingFocus.current = false;
-    const element = eingabeRef.current;
+    const element = textareaRef.current;
     if (element) {
       element.focus();
       element.setSelectionRange(element.value.length, element.value.length);
     }
   }, [draft, sending]);
   const applyAutoGrow = useCallback3(() => {
-    const element = eingabeRef.current;
+    const element = textareaRef.current;
     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(inputMaxRows, inputRows) + polster;
+    const style = getComputedStyle(element);
+    const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.4;
+    const padding = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+    const maximum = lineHeight * Math.max(inputMaxRows, inputRows) + padding;
     element.style.height = "auto";
-    const inhalt = element.scrollHeight;
-    element.style.height = `${Math.min(inhalt, maximum)}px`;
-    element.style.overflowY = inhalt > maximum ? "auto" : "hidden";
+    const contentHeight = element.scrollHeight;
+    element.style.height = `${Math.min(contentHeight, maximum)}px`;
+    element.style.overflowY = contentHeight > maximum ? "auto" : "hidden";
   }, [inputMaxRows, inputRows]);
   useEffect5(() => {
     applyAutoGrow();
   }, [draft, applyAutoGrow]);
   useEffect5(() => {
-    const element = eingabeRef.current;
+    const element = textareaRef.current;
     if (!element || inputMaxRows === void 0) {
       return;
     }
@@ -1958,9 +2068,9 @@ function ChatInputToolbar({
     }
     const update = () => setCompact(element.clientWidth < COMPACT_WIDTH_PX);
     update();
-    const beobachter = new ResizeObserver(update);
-    beobachter.observe(element);
-    return () => beobachter.disconnect();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
   }, []);
   const hasAttachments = attachments.length > 0;
   useEffect5(() => {
@@ -1969,7 +2079,7 @@ function ChatInputToolbar({
   const capabilityError = hasAttachments && attachmentCapabilitiesError ? attachmentCapabilitiesError : attachmentCapabilities ? attachmentCapabilityError(attachments.map((entry) => ({
     name: entry.file.name,
     mediaType: attachmentMediaType(entry.file)
-  })), attachmentCapabilities, alleTexte) : void 0;
+  })), attachmentCapabilities, allTexts) : void 0;
   const hasContent = draft.trim().length > 0 || attachments.length > 0;
   const preparing = attachments.some((entry) => entry.status === "reading");
   const attachmentBlocked = attachments.some((entry) => entry.status !== "ready");
@@ -1988,7 +2098,7 @@ function ChatInputToolbar({
     const sentRevision = draftRevision.current;
     const sentDraft = draft;
     const focusOrigin = document.activeElement;
-    const startedFocused = focusOrigin === eingabeRef.current || rootRef.current?.contains(focusOrigin);
+    const startedFocused = focusOrigin === textareaRef.current || rootRef.current?.contains(focusOrigin);
     let leftComposer = false;
     const observeFocus = (event) => {
       const target = event.target;
@@ -2019,7 +2129,7 @@ function ChatInputToolbar({
       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);
+        pendingFocus.current = !!startedFocused && !leftComposer && document.hasFocus() && (!toolbar || focusOrigin !== textareaRef.current) && (document.activeElement === focusOrigin || !toolbar && document.activeElement === document.body);
         setSending(false);
       }
     }
@@ -2030,28 +2140,28 @@ function ChatInputToolbar({
       if (!event.repeat) void send();
     }
   };
-  const attachmentPreviews = attachments.length > 0 && /* @__PURE__ */ jsx15("ul", { className: "qsl:flex qsl:max-h-[240px] qsl:flex-wrap qsl:gap-2 qsl:overflow-y-auto qsl: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: [
+  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": allTexts.attachments, children: attachments.map((entry) => /* @__PURE__ */ jsxs8("li", { className: attachmentItemClasses, children: [
     entry.status === "ready" && entry.input.mediaType.startsWith("image/") && /* @__PURE__ */ jsx15("img", { className: attachmentMediaClasses, src: `data:${entry.input.mediaType};base64,${entry.input.data}`, alt: entry.file.name }),
     entry.status === "ready" && entry.input.mediaType.startsWith("video/") && /* @__PURE__ */ jsx15("video", { className: attachmentMediaClasses, controls: true, preload: "metadata", "aria-label": entry.file.name, src: `data:${entry.input.mediaType};base64,${entry.input.data}` }),
     /* @__PURE__ */ jsxs8("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:pr-8 qsl:[overflow-wrap:anywhere]", children: [
       /* @__PURE__ */ jsx15("span", { className: "qsl:font-medium", title: entry.file.name, children: entry.file.name }),
       /* @__PURE__ */ jsx15("small", { children: formatAttachmentSize(entry.file.size) }),
-      entry.status === "reading" && /* @__PURE__ */ jsx15("small", { role: "status", children: alleTexte.attachmentPreparing }),
+      entry.status === "reading" && /* @__PURE__ */ jsx15("small", { role: "status", children: allTexts.attachmentPreparing }),
       entry.status === "error" && /* @__PURE__ */ jsx15("small", { role: "alert", children: entry.error })
     ] }),
     /* @__PURE__ */ jsx15(
       Button2,
       {
-        "aria-label": fillText(alleTexte.removeAttachment, { name: entry.file.name }),
+        "aria-label": fillText(allTexts.removeAttachment, { name: entry.file.name }),
         className: "qsl:absolute qsl:top-1 qsl:right-1",
         disabled: disabled || sending,
         onClick: () => {
           updateAttachments((current) => current.filter((item) => item.id !== entry.id));
           setAttachmentError(void 0);
-          eingabeRef.current?.focus();
+          textareaRef.current?.focus();
         },
         size: "icon-sm",
-        title: fillText(alleTexte.removeAttachment, { name: entry.file.name }),
+        title: fillText(allTexts.removeAttachment, { name: entry.file.name }),
         variant: "outline",
         children: /* @__PURE__ */ jsx15(XIcon3, {})
       }
@@ -2063,16 +2173,16 @@ function ChatInputToolbar({
     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,
+        allTexts.notSent,
         " ",
         failed.draft.slice(0, 100),
         failed.draft.length > 100 ? " ..." : "",
-        failed.attachments.length > 0 ? ` ${fillText(alleTexte.notSentAttachments, { count: failed.attachments.length })}` : "",
+        failed.attachments.length > 0 ? ` ${fillText(allTexts.notSentAttachments, { count: failed.attachments.length })}` : "",
         " "
       ] }),
       /* @__PURE__ */ jsx15(Button2, { disabled: disabled || sending, size: "sm", variant: "outline", onClick: () => {
         try {
-          validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), failed.attachments.map((entry) => entry.file), alleTexte);
+          validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), failed.attachments.map((entry) => entry.file), allTexts);
         } catch (error) {
           setAttachmentError(error instanceof Error ? error.message : String(error));
           return;
@@ -2083,22 +2193,22 @@ function ChatInputToolbar({
         setFailedSubmissions((current) => current.filter((entry) => entry.id !== failed.id));
         setAttachmentError(void 0);
         pendingFocus.current = true;
-      }, children: alleTexte.insertUnsent })
+      }, children: allTexts.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(
+    running2 && onStop && !hasContent && /* @__PURE__ */ jsx15(StopButton2, { className: "qsl:flex-none", label: allTexts.stop, onClick: onStop, size: "icon-sm" }),
+    (!running2 || !onStop || hasContent) && /* @__PURE__ */ jsx15(
       Button2,
       {
-        "aria-label": alleTexte.send,
+        "aria-label": allTexts.send,
         className: "qsl:flex-none",
         disabled: disabled || sendDisabled || sending || attachmentBlocked || !!capabilityError || !hasContent,
         onClick: () => {
           void send();
         },
         size: "icon-sm",
-        title: running ? alleTexte.sendIntoRun : alleTexte.send,
+        title: running2 ? allTexts.sendIntoRun : allTexts.send,
         children: /* @__PURE__ */ jsx15(SendIcon, { size: 14 })
       }
     )
@@ -2108,16 +2218,16 @@ function ChatInputToolbar({
       attachmentsEnabled && /* @__PURE__ */ jsx15(
         Button2,
         {
-          "aria-label": alleTexte.attachFiles,
+          "aria-label": allTexts.attachFiles,
           disabled: disabled || sending,
           onClick: () => fileInput.inputRef.current?.click(),
           size: "icon-sm",
-          title: fillText(alleTexte.attachFilesHint, { count: MAX_CHAT_ATTACHMENTS, size: maxAttachmentSizeLabel }),
+          title: fillText(allTexts.attachFilesHint, { count: MAX_CHAT_ATTACHMENTS, size: maxAttachmentSizeLabel }),
           variant: "ghost",
           children: /* @__PURE__ */ jsx15(PaperclipIcon, {})
         }
       ),
-      preparing && /* @__PURE__ */ jsx15("span", { className: cn("qsl:text-xs qsl:text-muted-foreground", inline && "qsl:sr-only"), role: "status", children: alleTexte.attachmentsPreparing }),
+      preparing && /* @__PURE__ */ jsx15("span", { className: cn("qsl:text-xs qsl:text-muted-foreground", inline && "qsl:sr-only"), role: "status", children: allTexts.attachmentsPreparing }),
       actions?.map((action, index) => action.active === void 0 ? /* @__PURE__ */ jsxs8(Button2, { disabled: action.disabled, onClick: action.onClick, size: "sm", title: action.title ?? action.label, variant: "ghost", children: [
         action.icon,
         action.label && /* @__PURE__ */ jsx15("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
@@ -2142,13 +2252,13 @@ function ChatInputToolbar({
     {
       "aria-controls": inputAriaControls,
       className: textareaClasses,
-      "aria-label": alleTexte.placeholder,
+      "aria-label": allTexts.placeholder,
       disabled: !toolbar && disabled,
       readOnly: toolbar && disabled,
       onChange: (event) => changeDraft(event.target.value),
       onKeyDown,
-      placeholder: running ? alleTexte.steeringPlaceholder : alleTexte.placeholder,
-      ref: eingabeRef,
+      placeholder: running2 ? allTexts.steeringPlaceholder : allTexts.placeholder,
+      ref: textareaRef,
       rows: inputRows,
       value: draft
     }
@@ -2160,14 +2270,14 @@ function ChatInputToolbar({
       "data-compact": compact,
       "data-layout": layout,
       "data-quassel": "",
-      "data-working": running || sending,
+      "data-working": running2 || sending,
       ref: rootRef,
       ...attachmentsEnabled ? fileInput.dropProps : {},
       children: [
         attachmentsEnabled && /* @__PURE__ */ jsx15(
           "input",
           {
-            "aria-label": alleTexte.attachFiles,
+            "aria-label": allTexts.attachFiles,
             hidden: true,
             multiple: true,
             type: "file",
@@ -2184,7 +2294,7 @@ function ChatInputToolbar({
         ] }) : 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)
+          detailsContainer && createPortal2(details, detailsContainer)
         ] }) : !inline && /* @__PURE__ */ jsxs8(Fragment3, { children: [
           errors,
           detailToolbar
@@ -2195,8 +2305,8 @@ function ChatInputToolbar({
 }
 
 // packages/quassel/src/DetailModeSwitch.tsx
-import { SparklesIcon as SparklesIcon3 } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { CircleDotIcon, EyeOffIcon, ListCollapseIcon, ListIcon, ShapesIcon, TagsIcon, TextAlignJustifyIcon } from "lucide-react";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var DETAIL_MODES = ["off", "current", "icons", "chips", "grouped", "compact", "full"];
 var TEXT_KEYS = {
   off: "detailModeOff",
@@ -2207,57 +2317,50 @@ var TEXT_KEYS = {
   compact: "detailModeCompact",
   full: "detailModeFull"
 };
+var ICONS = {
+  off: EyeOffIcon,
+  current: CircleDotIcon,
+  icons: ShapesIcon,
+  chips: TagsIcon,
+  grouped: ListCollapseIcon,
+  compact: ListIcon,
+  full: TextAlignJustifyIcon
+};
 var detailModeLabel = (mode, texts) => ({ ...defaultTexts, ...texts })[TEXT_KEYS[mode]];
 function DetailModeSwitch({
   mode,
   onChange,
   modes = DETAIL_MODES,
-  collapsible = true,
   texts,
   className
 }) {
-  const alleTexte = { ...defaultTexts, ...texts };
+  const allTexts = { ...defaultTexts, ...texts };
   const { Button: Button2 } = useQuasselComponents();
-  const aktuell = modes.indexOf(mode);
-  const naechster = modes[(aktuell < 0 ? 0 : aktuell + 1) % modes.length];
-  return /* @__PURE__ */ jsxs9(
-    Button2,
-    {
-      "aria-label": `${alleTexte.detailModeTitle}: ${detailModeLabel(mode, texts)}`,
-      className,
-      onClick: () => onChange(naechster),
-      size: "sm",
-      title: `${alleTexte.detailModeTitle}: ${detailModeLabel(mode, texts)}`,
-      variant: "ghost",
-      children: [
-        /* @__PURE__ */ jsx16(SparklesIcon3, {}),
-        /* @__PURE__ */ jsx16("span", { className: collapsible ? "qsl:in-data-[compact=true]:hidden" : void 0, children: detailModeLabel(mode, texts) })
-      ]
-    }
-  );
+  const current = modes.indexOf(mode);
+  const next2 = modes[(current < 0 ? 0 : current + 1) % modes.length];
+  const Icon = ICONS[mode];
+  const title = `${allTexts.detailModeTitle}: ${detailModeLabel(mode, texts)}`;
+  return /* @__PURE__ */ jsx16(Button2, { "aria-label": title, className, onClick: () => onChange(next2), size: "icon-sm", title, variant: "ghost", children: /* @__PURE__ */ jsx16(Icon, {}) });
 }
 
 // packages/quassel/src/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 }) {
+import { ClockFadingIcon, ClockIcon } from "lucide-react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function TimestampSwitch({ showTimestamps, onChange, texts, className }) {
   const labels = { ...defaultTexts, ...texts };
   const { Button: Button2 } = useQuasselComponents();
   const title = showTimestamps ? labels.hideTimestamps : labels.showTimestamps;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx17(
     Button2,
     {
       "aria-label": title,
       "aria-pressed": showTimestamps,
       className,
       onClick: () => onChange(!showTimestamps),
-      size: "sm",
+      size: "icon-sm",
       title,
       variant: "ghost",
-      children: [
-        /* @__PURE__ */ jsx17(ClockIcon, {}),
-        /* @__PURE__ */ jsx17("span", { className: collapsible ? "qsl:in-data-[compact=true]:hidden" : void 0, children: labels.timestamps })
-      ]
+      children: showTimestamps ? /* @__PURE__ */ jsx17(ClockIcon, {}) : /* @__PURE__ */ jsx17(ClockFadingIcon, {})
     }
   );
 }
@@ -2295,6 +2398,7 @@ export {
   encodeAttachment,
   fillText,
   formatAttachmentSize,
+  formatElapsed,
   markdownPlainText,
   messageDate,
   prettyJson,
@@ -2302,6 +2406,7 @@ export {
   timestampDay,
   timestampLabel,
   useChatAction,
+  useElapsed,
   useQuasselComponents,
   useQuasselPortalContainer,
   validateAttachmentSelection