quassel 0.2.2 → 0.3.0

package/ChatActionDock.d.ts

@@ -0,0 +1,2 @@
+/** Ziel offener Aktionen: undefined = im Verlauf, null = das Dock über der Eingabe ist noch nicht eingehängt. */
+export declare const ChatActionDock: import("react").Context<HTMLElement | null | undefined>;

package/ChatMessages.d.ts

@@ -7,7 +7,7 @@ import { type ChatAppearance, type TimestampOptions, type CodeBlockOptions, type
  * Der Verlauf: eigener Scroll-Container mit Autoscroll, solange man unten ist,
  * und einem Zum-Ende-Knopf, sobald man liest. Ohne Eingabe read-only nutzbar.
  */
-export declare function ChatMessages({ messages, owner, detailMode, running, working, stepsExpandable, texts, toolArgumentsText, renderTool, renderAction, onDismissAction, onLinkClick, emptyState, className, scrollerClassName, showTimestamps, announce, scrollerRef, maxWidth, horizontalPadding, jumpToEndThreshold, appearance, timestampOptions, codeBlockOptions, bubbleOptions, messageActions, }: {
+export declare function ChatMessages({ messages, owner, detailMode, running, working, stepsExpandable, texts, toolArgumentsText, renderTool, renderAction, onDismissAction, onLinkClick, emptyState, className, scrollerClassName, showTimestamps, announce, scrollerRef, maxWidth, horizontalPadding, jumpToEndThreshold, appearance, timestampOptions, codeBlockOptions, bubbleOptions, messageActions, toolElapsedThreshold, }: {
     messages: Message[];
     /** Beiträge mit diesem Message.sender erscheinen ohne Sprechblase; null behält die Nachrichtenvorgaben. */
     owner?: string | null;
@@ -43,4 +43,6 @@ export declare function ChatMessages({ messages, owner, detailMode, running, wor
     codeBlockOptions?: CodeBlockOptions;
     bubbleOptions?: BubbleOptions;
     messageActions?: MessageActionsOptions;
+    /** Milliseconds before a running tool call shows its elapsed time (from Message.at) while running; false = never. */
+    toolElapsedThreshold?: number | false;
 }): import("react").JSX.Element;

package/README.md

@@ -12,12 +12,15 @@ color, radius, font and font size is a `--qsl-*` variable.
 
 **Agent chats that show their work.** Thinking and tool calls appear as steps. Pick how much
 of them the user sees - only the current step, icons, chips, a collapsible group, single lines
-or everything - and let them switch at runtime.
+or everything - and let them switch at runtime. A tool call that runs longer than a few seconds
+shows how long it has been running, on its row and on the collapsed group header, so a slow step
+does not look like a hung one.
 
 ![The same steps as icons, chips and single lines](https://raw.githubusercontent.com/SchlenkR/quassel/main/docs/images/details.png)
 
 **Pending actions.** The agent waits for input: a generic card with dismiss, or the host's own
-rendering per action owner. Resolved actions stay in the transcript as a record.
+rendering per action owner. Open actions sit right above the input, like a question in a terminal
+agent; resolved actions stay in the transcript as a record.
 
 **Multi-party conversations.** Colored bubbles with labels for agents that talk to each other.
 
@@ -89,6 +92,7 @@ Any backend that emits the `quassel/events` stream works with the same component
 pnpm install
 pnpm dev              # stylesheet in watch mode plus the gallery on http://localhost:3210
 pnpm check            # type check package and gallery
+pnpm test             # package tests (node:test with happy-dom)
 pnpm build            # stylesheet and gallery build
 pnpm release --dry-run
 ```

package/chat.css

@@ -87,6 +87,9 @@
   .qsl\:z-\[110\] {
     z-index: 110;
   }
+  .qsl\:-mx-\[16px\] {
+    margin-inline: calc(16px * -1);
+  }
   .qsl\:mx-auto {
     margin-inline: auto;
   }
@@ -200,6 +203,9 @@
   .qsl\:max-h-\[240px\] {
     max-height: 240px;
   }
+  .qsl\:max-h-\[calc\(var\(--qsl-panel-height\,100dvh\)_\/_2\)\] {
+    max-height: calc(var(--qsl-panel-height,100dvh) / 2);
+  }
   .qsl\:max-h-\[min\(70vh\,620px\)\] {
     max-height: min(70vh, 620px);
   }
@@ -377,6 +383,9 @@
   .qsl\:gap-\[5px\] {
     gap: 5px;
   }
+  .qsl\:gap-\[var\(--qsl-chat-dense-message-gap\,8px\)\] {
+    gap: var(--qsl-chat-dense-message-gap,8px);
+  }
   :where(.qsl\:space-y-0 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: 0;
@@ -523,6 +532,9 @@
   .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\] {
     background-image: 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;
   }
+  .qsl\:\[mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_var\(--qsl-chat-message-gap\,16px\)\)\,transparent\)\] {
+    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\(var\(--qsl-fade-edge\)_-_40px\)\,transparent_calc\(var\(--qsl-fade-edge\)_\+_16px\)\)\] {
     mask-image: linear-gradient(to bottom,#000 calc(var(--qsl-fade-edge) - 40px),transparent calc(var(--qsl-fade-edge) + 16px));
   }
@@ -571,6 +583,9 @@
   .qsl\:px-\[7px\] {
     padding-inline: 7px;
   }
+  .qsl\:px-\[16px\] {
+    padding-inline: 16px;
+  }
   .qsl\:px-\[var\(--qsl-chat-horizontal-padding\,24px\)\] {
     padding-inline: var(--qsl-chat-horizontal-padding,24px);
   }
@@ -622,6 +637,9 @@
   .qsl\:pb-\[calc\(var\(--qsl-composer-height\,0px\)_\+_max\(3\.25em\,40px\)\)\] {
     padding-bottom: calc(var(--qsl-composer-height,0px) + max(3.25em, 40px));
   }
+  .qsl\:pb-\[var\(--qsl-chat-message-gap\,16px\)\] {
+    padding-bottom: var(--qsl-chat-message-gap,16px);
+  }
   .qsl\:pl-1 {
     padding-left: var(--qsl-spacing);
   }
@@ -916,6 +934,9 @@
   .qsl\:\[--qsl-scroll-cover\:var\(--qsl-secondary\)\] {
     --qsl-scroll-cover: var(--qsl-secondary);
   }
+  .qsl\:\[-webkit-mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%_-_var\(--qsl-chat-message-gap\,16px\)\)\,transparent\)\] {
+    -webkit-mask-image: linear-gradient(to bottom,#000 calc(100% - var(--qsl-chat-message-gap,16px)),transparent);
+  }
   .qsl\:\[-webkit-mask-image\:linear-gradient\(to_bottom\,\#000_calc\(var\(--qsl-fade-edge\)_-_40px\)\,transparent_calc\(var\(--qsl-fade-edge\)_\+_16px\)\)\] {
     -webkit-mask-image: linear-gradient(to bottom,#000 calc(var(--qsl-fade-edge) - 40px),transparent calc(var(--qsl-fade-edge) + 16px));
   }
@@ -951,6 +972,9 @@
   .qsl\:placeholder\:text-muted-foreground::placeholder {
     color: var(--qsl-muted-foreground);
   }
+  .qsl\:empty\:hidden:empty {
+    display: none;
+  }
   .qsl\:focus-within\:pointer-events-auto:focus-within {
     pointer-events: auto;
   }

package/elapsed.d.ts

@@ -0,0 +1,16 @@
+import { type ChatTexts } from "./texts";
+/** Under a minute "{seconds} s" from texts, then m:ss, from an hour on h:mm:ss. */
+export declare function formatElapsed(ms: number, texts: Pick<ChatTexts, "toolElapsedSeconds">): string;
+/** One interval for every subscriber; it runs only while someone listens. */
+export declare function createTicker(intervalMs?: number): {
+    subscribe(listener: () => void): () => void;
+    now(): number;
+    active: () => boolean;
+};
+export declare const elapsedTicker: {
+    subscribe(listener: () => void): () => void;
+    now(): number;
+    active: () => boolean;
+};
+/** Milliseconds since start in whole seconds, so a row renders only when its display changes; undefined on the server. */
+export declare function useElapsed(start: number): number | undefined;

package/index.d.ts

@@ -17,6 +17,7 @@ export { useChatAction, copyChatText } from "./useChatAction";
 export { createChatScroll } from "./chat-scroll";
 export { ChatSendContext, createChatSendScope, type ChatSendScope } from "./ChatSendContext";
 export { messageDate, timestampDay, timestampLabel } from "./timestamps";
+export { formatElapsed, useElapsed } from "./elapsed";
 export { attachmentCapabilityError, attachmentDownloadUrl, attachmentMediaType, encodeAttachment, formatAttachmentSize, validateAttachmentSelection, MAX_CHAT_ATTACHMENTS, MAX_CHAT_ATTACHMENT_BYTES, } from "./attachments";
 export type { ChatAppearance, TimestampOptions, CodeBlockOptions, BubbleOptions, MessageAction, MessageActionsOptions, SendShortcut, } from "./options";
 export { appearanceStyle } from "./options";

package/index.js

@@ -24,6 +24,7 @@ var defaultTexts = {
   working: "Arbeitet ...",
   toolRunning: "l\xE4uft ...",
   toolStillRunning: "Werkzeug l\xE4uft ...",
+  toolElapsedSeconds: "{seconds} s",
   currentTool: "Werkzeug l\xE4uft",
   thinkingChip: "Denken",
   toolChip: "Werkzeug",
@@ -90,6 +91,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;
@@ -887,6 +889,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(intervalMs = 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());
+        }, intervalMs);
+      }
+      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 >= intervalMs || 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,6 +1001,10 @@ 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;
@@ -1035,6 +1088,9 @@ var bubbleBodyClasses = "qsl:relative qsl:max-w-[86%] qsl:px-3 qsl:py-2 qsl:lead
 function istSchritt(message) {
   return !!message && (message.role === "thinking" || message.role === "tool");
 }
+function istOffeneAktion(message) {
+  return message.role === "action" && message.action !== void 0 && message.action.status === void 0;
+}
 function defaultArgumentsText(tool) {
   return prettyJson(tool.arguments);
 }
@@ -1064,7 +1120,8 @@ function ChatMessages({
   timestampOptions,
   codeBlockOptions,
   bubbleOptions,
-  messageActions
+  messageActions,
+  toolElapsedThreshold = 3e3
 }) {
   const alleTexte = { ...defaultTexts, ...texts };
   const { Button: Button2 } = useQuasselComponents();
@@ -1075,6 +1132,7 @@ function ChatMessages({
   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;
@@ -1084,7 +1142,7 @@ function ChatMessages({
   }, [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)));
+    const faellig = messages.filter((message, index) => !angesagt.current.has(message.key) && (message.role === "action" ? istOffeneAktion(message) : message.role === "assistant" && message.text.trim() !== "" && (message.closed === true || !running && index === messages.length - 1)));
     if (faellig.length === 0) {
       return;
     }
@@ -1147,6 +1205,9 @@ function ChatMessages({
     () => {
       const letzterFremder = messages.reduce((last, message, index) => message.role === "user" ? last : index, -1);
       return messages.filter((message, index) => {
+        if (dock !== void 0 && istOffeneAktion(message)) {
+          return false;
+        }
         if (detailMode === "current" && istSchritt(message)) {
           return running && index === letzterFremder && (message.role === "thinking" ? !message.closed : stepState(message) === "running");
         }
@@ -1159,8 +1220,9 @@ function ChatMessages({
         return true;
       });
     },
-    [messages, detailMode, running]
+    [messages, detailMode, running, dock]
   );
+  const offeneAktionen = dock ? messages.filter(istOffeneAktion) : [];
   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-meta qsl:tabular-nums qsl:text-muted-foreground qsl:opacity-85",
@@ -1169,19 +1231,21 @@ function ChatMessages({
     /* @__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 elapsedAfter = running && toolElapsedThreshold !== false ? toolElapsedThreshold : void 0;
   const gruppenModus = detailMode === "grouped";
   const bloecke = [];
   let lastDay;
   let gruppe = [];
   const schliesseGruppe = () => {
     if (gruppe.length > 0) {
-      const letzterZustand = stepState(gruppe[gruppe.length - 1]);
+      const laufenderSchritt = running ? [...gruppe].reverse().find((message) => ["running", "thinking"].includes(stepState(message))) : void 0;
       bloecke.push(mitZeit(
         gruppenModus ? /* @__PURE__ */ jsx13(
           StepGroup,
           {
-            aktiv: running && (letzterZustand === "running" || letzterZustand === "thinking"),
+            elapsedAfter,
             expandierbar: stepsExpandable,
+            laufenderSchritt,
             messages: gruppe,
             texts: alleTexte,
             toolArgumentsText
@@ -1190,6 +1254,7 @@ function ChatMessages({
         ) : /* @__PURE__ */ jsx13(
           StepRow,
           {
+            elapsedAfter,
             expandierbar: stepsExpandable,
             messages: gruppe,
             mitText: detailMode !== "icons",
@@ -1237,6 +1302,7 @@ function ChatMessages({
         {
           detailMode,
           dicht,
+          elapsedAfter,
           expandierbar: stepsExpandable,
           message,
           plain: owner != null && message.sender === owner,
@@ -1322,7 +1388,11 @@ function ChatMessages({
         scroll.jump(scrollBereich.current);
         updateJumpVisibility(scrollBereich.current);
       }
-    }, children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) }) })
+    }, children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) }) }),
+    dock && offeneAktionen.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: offeneAktionen.map((message) => /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(ActionContent, { action: message.action, onDismissAction, renderAction, text: message.text, texts: alleTexte }) }, message.key)) }),
+      dock
+    )
   ] });
   return /* @__PURE__ */ jsx13(MarkdownLinks, { onLinkClick, children: /* @__PURE__ */ jsx13(MarkdownCodeBlocks, { options: codeBlockOptions, texts: alleTexte, children: verlauf }) });
 }
@@ -1330,6 +1400,7 @@ function StepRow({
   messages,
   mitText,
   expandierbar,
+  elapsedAfter,
   texts,
   toolArgumentsText,
   toolLabel
@@ -1346,6 +1417,7 @@ function StepRow({
       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(ToolElapsed, { after: elapsedAfter, className: "qsl:flex-none qsl:self-baseline", message, texts }),
         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 = cn(chipClasses, !mitText && "qsl:p-1", running && "qsl:animate-fade-pulse qsl:motion-reduce:animate-none");
@@ -1382,7 +1454,8 @@ function StepRow({
 }
 function StepGroup({
   messages,
-  aktiv,
+  laufenderSchritt,
+  elapsedAfter,
   expandierbar,
   texts,
   toolArgumentsText
@@ -1396,10 +1469,10 @@ function StepGroup({
       kopf.current?.scrollIntoView({ block: "nearest" });
     }
   }, [offen]);
-  const letzte = messages[messages.length - 1];
+  const aktiv = laufenderSchritt !== void 0;
   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;
+  const laufend = laufenderSchritt && (laufenderSchritt.role === "thinking" ? texts.thinkingChip : laufenderSchritt.tool?.name || laufenderSchritt.text || texts.toolChip);
   return /* @__PURE__ */ jsxs6("div", { className: stepClasses, "data-step": "group", children: [
     /* @__PURE__ */ jsxs6(
       "button",
@@ -1418,12 +1491,13 @@ function StepGroup({
               laufend,
               " ",
               texts.toolRunning
-            ] })
+            ] }),
+            laufenderSchritt && /* @__PURE__ */ jsx13(ToolElapsed, { after: elapsedAfter, message: laufenderSchritt, 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 && /* @__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, expandierbar, message, texts, toolArgumentsText }, message.key)) }),
     offen && messages.length >= collapseAtBottomFrom && /* @__PURE__ */ jsxs6(
       "button",
       {
@@ -1445,6 +1519,7 @@ function StepGroup({
 function TraceLine({
   message,
   className,
+  elapsedAfter,
   expandierbar,
   texts,
   toolArgumentsText
@@ -1458,7 +1533,8 @@ function TraceLine({
     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 })
+      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" };
@@ -1490,11 +1566,21 @@ 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,
+  elapsedAfter,
   expandierbar,
   texts,
   toolArgumentsText,
@@ -1506,14 +1592,15 @@ function Bubble({
   const schritt = dicht ? 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: schritt, elapsedAfter, expandierbar, 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: [
       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: [
       icon,
@@ -1530,18 +1617,7 @@ 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: schritt, 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: [
@@ -1586,6 +1662,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: [
@@ -1613,6 +1708,7 @@ function ChatPanel({
 }) {
   const wurzel = useRef4(null);
   const eingabe = useRef4(null);
+  const [dock, setDock] = useState5(null);
   const hasComposer = composer !== void 0;
   const scrollOnSendRef = useRef4(scrollOnSend);
   const [sendScope] = useState5(() => createChatSendScope(scrollOnSendRef));
@@ -1625,16 +1721,21 @@ function ChatPanel({
     if (!element || !rahmen) {
       return;
     }
-    const messen = () => rahmen.style.setProperty("--qsl-composer-height", `${element.offsetHeight}px`);
+    const messen = () => {
+      rahmen.style.setProperty("--qsl-composer-height", `${element.offsetHeight}px`);
+      rahmen.style.setProperty("--qsl-panel-height", `${rahmen.offsetHeight}px`);
+    };
     const beobachter = new ResizeObserver(messen);
     beobachter.observe(element);
+    beobachter.observe(rahmen);
     messen();
     return () => {
       beobachter.disconnect();
       rahmen.style.removeProperty("--qsl-composer-height");
+      rahmen.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),
@@ -1655,10 +1756,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: eingabe, 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 +1825,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";
@@ -2184,7 +2295,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
@@ -2295,6 +2406,7 @@ export {
   encodeAttachment,
   fillText,
   formatAttachmentSize,
+  formatElapsed,
   markdownPlainText,
   messageDate,
   prettyJson,
@@ -2302,6 +2414,7 @@ export {
   timestampDay,
   timestampLabel,
   useChatAction,
+  useElapsed,
   useQuasselComponents,
   useQuasselPortalContainer,
   validateAttachmentSelection