quassel 0.2.1 → 0.3.0

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",
@@ -42,7 +43,6 @@ var defaultTexts = {
   placeholder: "Nachricht schreiben ...",
   steeringPlaceholder: "Dazwischenfunken ...",
   steered: "In den laufenden Turn eingespeist",
-  inputHint: "Enter zum Senden - Shift + Enter f\xFCr eine neue Zeile",
   detailModeTitle: "Detailgrad der Schritte",
   detailModeOff: "nur Antworten",
   detailModeCurrent: "aktuell",
@@ -87,10 +87,11 @@ var defaultTexts = {
 
 // packages/quassel/src/ui/cn.ts
 import { createCn } from "cn/config";
-var cn = createCn({ prefix: "qsl" });
+var cn = createCn({ prefix: "qsl", extend: { theme: { text: ["meta", "trace", "label"] } } });
 
 // 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;
@@ -154,12 +155,12 @@ var buttonVariants = cva(
       },
       size: {
         default: "qsl:h-8 qsl:gap-1.5 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2",
-        xs: "qsl:h-6 qsl:gap-1 qsl:rounded-[min(var(--qsl-radius-md),10px)] qsl:px-2 qsl:text-xs qsl:in-data-[slot=button-group]:rounded-lg qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3",
-        sm: "qsl:h-7 qsl:gap-1 qsl:rounded-[min(var(--qsl-radius-md),12px)] qsl:px-2.5 qsl:text-[0.8rem] qsl:in-data-[slot=button-group]:rounded-lg qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3.5",
+        xs: "qsl:h-6 qsl:gap-1 qsl:rounded-[min(--theme(--radius-md),10px)] qsl:px-2 qsl:text-xs qsl:in-data-[slot=button-group]:rounded-lg qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3",
+        sm: "qsl:h-7 qsl:gap-1 qsl:rounded-[min(--theme(--radius-md),12px)] qsl:px-2.5 qsl:text-[0.8rem] qsl:in-data-[slot=button-group]:rounded-lg qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3.5",
         lg: "qsl:h-9 qsl:gap-1.5 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2",
         icon: "qsl:size-8",
-        "icon-xs": "qsl:size-6 qsl:rounded-[min(var(--qsl-radius-md),10px)] qsl:in-data-[slot=button-group]:rounded-lg qsl:[&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "qsl:size-7 qsl:rounded-[min(var(--qsl-radius-md),12px)] qsl:in-data-[slot=button-group]:rounded-lg",
+        "icon-xs": "qsl:size-6 qsl:rounded-[min(--theme(--radius-md),10px)] qsl:in-data-[slot=button-group]:rounded-lg qsl:[&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "qsl:size-7 qsl:rounded-[min(--theme(--radius-md),12px)] qsl:in-data-[slot=button-group]:rounded-lg",
         "icon-lg": "qsl:size-9"
       }
     },
@@ -223,9 +224,10 @@ function PopoverContent({
   anchor,
   collisionPadding,
   keepMounted,
+  portalContainer,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { keepMounted, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { container: portalContainer, keepMounted, children: /* @__PURE__ */ jsx3(
     PopoverPrimitive.Positioner,
     {
       align,
@@ -239,6 +241,7 @@ function PopoverContent({
         PopoverPrimitive.Popup,
         {
           "data-quassel": "",
+          "data-quassel-popover": "",
           "data-slot": "popover-content",
           className: cn(
             "qsl:z-[110] qsl:flex qsl:w-72 qsl:origin-(--transform-origin) qsl:flex-col qsl:gap-2.5 qsl:rounded-lg qsl:bg-popover qsl:p-2.5 qsl:text-sm qsl:text-popover-foreground qsl:shadow-md qsl:ring-1 qsl:ring-foreground/10 qsl:outline-hidden qsl:duration-100 qsl:data-[side=bottom]:slide-in-from-top-2 qsl:data-[side=inline-end]:slide-in-from-left-2 qsl:data-[side=inline-start]:slide-in-from-right-2 qsl:data-[side=left]:slide-in-from-right-2 qsl:data-[side=right]:slide-in-from-left-2 qsl:data-[side=top]:slide-in-from-bottom-2 qsl:data-open:animate-in qsl:data-open:fade-in-0 qsl:data-open:zoom-in-95 qsl:data-closed:animate-out qsl:data-closed:fade-out-0 qsl:data-closed:zoom-out-95",
@@ -285,7 +288,7 @@ var toggleVariants = cva2(
       },
       size: {
         default: "qsl:h-8 qsl:min-w-8 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2",
-        sm: "qsl:h-7 qsl:min-w-7 qsl:rounded-[min(var(--qsl-radius-md),12px)] qsl:px-2.5 qsl:text-[0.8rem] qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3.5",
+        sm: "qsl:h-7 qsl:min-w-7 qsl:rounded-[min(--theme(--radius-md),12px)] qsl:px-2.5 qsl:text-[0.8rem] qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3.5",
         lg: "qsl:h-9 qsl:min-w-9 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2"
       }
     },
@@ -316,16 +319,22 @@ function Toggle({
 import { jsx as jsx7 } from "react/jsx-runtime";
 var defaultComponents = { Button, Toggle, Card, StopButton, Popover, PopoverContent };
 var QuasselContext = createContext({ components: defaultComponents });
-function QuasselProvider({ components: components2, allowUrl, children }) {
+function QuasselProvider({ components: components2, allowUrl, portalContainer, children }) {
   const outer = useContext(QuasselContext);
   const value = useMemo(() => ({
     components: { ...outer.components, ...components2 },
-    allowUrl: allowUrl ?? outer.allowUrl
-  }), [outer, components2, allowUrl]);
+    allowUrl: allowUrl ?? outer.allowUrl,
+    portalContainer: portalContainer ?? outer.portalContainer
+  }), [outer, components2, allowUrl, portalContainer]);
   return /* @__PURE__ */ jsx7(QuasselContext.Provider, { value, children });
 }
 var useQuasselComponents = () => useContext(QuasselContext).components;
 var useAllowUrl = () => useContext(QuasselContext).allowUrl;
+function useQuasselPortalContainer() {
+  const container = useContext(QuasselContext).portalContainer;
+  const target = typeof container === "function" ? container() : container && "current" in container ? container.current : container;
+  return target ?? void 0;
+}
 
 // packages/quassel/src/useChatAction.ts
 import { useEffect, useRef, useState } from "react";
@@ -506,7 +515,7 @@ function isTableDivider(line) {
 import { useMemo as useMemo2 } from "react";
 import { SparklesIcon, WrenchIcon, XIcon } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
-var preClasses = "qsl:rounded-lg qsl:bg-secondary qsl:p-3 qsl:font-mono qsl:text-[11px] qsl:leading-[1.625] qsl:break-all qsl:whitespace-pre-wrap";
+var preClasses = "qsl:rounded-lg qsl:bg-secondary qsl:p-3 qsl:font-mono qsl:text-trace qsl:leading-[1.625] qsl:break-all qsl:whitespace-pre-wrap";
 function StepPopover({
   message,
   position,
@@ -519,6 +528,7 @@ function StepPopover({
     contextElement: document.documentElement
   }), [position]);
   const { Button: Button2, Popover: Popover2, PopoverContent: PopoverContent2 } = useQuasselComponents();
+  const portalContainer = useQuasselPortalContainer();
   const tool = message.tool;
   const thinking = message.role === "thinking";
   const title = thinking ? texts.thinkingTitle : texts.toolTitle;
@@ -535,6 +545,7 @@ function StepPopover({
         thinking ? "qsl:max-h-none" : "qsl:max-h-[min(70vh,620px)]"
       ),
       collisionPadding: 16,
+      portalContainer,
       side: "bottom",
       sideOffset: 10,
       children: [
@@ -554,13 +565,13 @@ function StepPopover({
 }
 function PopoverSection({ label, value, error = false }) {
   return /* @__PURE__ */ jsxs2("section", { children: [
-    /* @__PURE__ */ jsx9("h3", { className: "qsl:mb-1.5 qsl:text-[11px] qsl:font-semibold qsl:tracking-[0.04em] qsl:text-muted-foreground qsl:uppercase", children: label }),
+    /* @__PURE__ */ jsx9("h3", { className: "qsl:mb-1.5 qsl:text-trace qsl:font-semibold qsl:tracking-[0.04em] qsl:text-muted-foreground qsl:uppercase", children: label }),
     /* @__PURE__ */ jsx9("pre", { className: cn(preClasses, error && "qsl:text-destructive"), children: value })
   ] });
 }
 
 // packages/quassel/src/PendingActionCard.tsx
-import { CheckIcon as CheckIcon2 } from "lucide-react";
+import { CheckIcon as CheckIcon2, XIcon as XIcon2 } from "lucide-react";
 import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var cardClasses = "qsl:gap-2.5 qsl:bg-background qsl:px-3.5 qsl:text-sm";
 var resultText = (result) => typeof result === "string" ? result : result === null || result === void 0 ? "" : JSON.stringify(result);
@@ -577,7 +588,7 @@ function PendingActionCard({
     return /* @__PURE__ */ jsxs3(Card2, { className: cardClasses, size: "sm", children: [
       /* @__PURE__ */ jsx10("div", { className: "qsl:leading-normal", children: text }),
       /* @__PURE__ */ jsxs3("div", { className: "qsl:flex qsl:items-center qsl:gap-1.5 qsl:text-sm qsl:text-muted-foreground", "data-action": "resolved", children: [
-        /* @__PURE__ */ jsx10(CheckIcon2, { className: "qsl:text-success", size: 12 }),
+        action.status === "approved" ? /* @__PURE__ */ jsx10(CheckIcon2, { className: "qsl:text-success", size: 12 }) : /* @__PURE__ */ jsx10(XIcon2, { size: 12 }),
         action.status === "approved" ? resultText(action.result) : dismissedLabel
       ] })
     ] });
@@ -878,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";
@@ -943,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;
@@ -1005,7 +1067,7 @@ function announce(text) {
 import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var stepClasses = "qsl:mt-[var(--qsl-chat-message-gap,16px)]";
 var denseStepClasses = "qsl:mt-[var(--qsl-chat-dense-message-gap,8px)]";
-var traceClasses = "qsl:flex qsl:w-full qsl:gap-2 qsl:pl-6 qsl:text-left qsl:text-[11px] qsl:leading-[1.375] qsl:text-muted-foreground";
+var traceClasses = "qsl:flex qsl:w-full qsl:gap-2 qsl:pl-6 qsl:text-left qsl:text-trace qsl:leading-[1.375] qsl:text-muted-foreground";
 var traceButtonClasses = "qsl:cursor-pointer qsl:rounded-md qsl:py-1 qsl:pr-2 qsl:transition-colors qsl:hover:bg-secondary qsl:hover:text-foreground qsl:focus-visible:bg-secondary qsl:focus-visible:text-foreground qsl:focus-visible:outline-none";
 var traceIconClasses = "qsl:mt-0.5 qsl:flex-none qsl:opacity-60";
 var traceErrorIconClasses = "qsl:mt-0.5 qsl:flex-none qsl:text-destructive qsl:opacity-100";
@@ -1013,7 +1075,7 @@ var traceLineClasses = "qsl:min-w-0 qsl:self-baseline qsl:font-mono qsl:[overflo
 var traceRunningClasses = "qsl:ml-1.5 qsl:opacity-60";
 var chipClasses = cn(
   "qsl:inline-flex qsl:max-w-[220px] qsl:items-center qsl:gap-[5px] qsl:rounded-full qsl:border qsl:border-border-soft qsl:px-2.5 qsl:py-0.5",
-  "qsl:font-mono qsl:text-[10.5px] qsl:leading-[1.6] qsl:text-muted-foreground qsl:transition-colors",
+  "qsl:font-mono qsl:text-meta qsl:leading-[1.6] qsl:text-muted-foreground qsl:transition-colors",
   "qsl:data-[state=running]:border-[color-mix(in_srgb,var(--qsl-primary)_40%,var(--qsl-border-soft))]",
   "qsl:data-[state=thinking]:border-[color-mix(in_srgb,var(--qsl-primary)_40%,var(--qsl-border-soft))]",
   "qsl:data-[state=error]:border-[color-mix(in_srgb,var(--qsl-destructive)_45%,var(--qsl-border-soft))]",
@@ -1026,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);
 }
@@ -1044,6 +1109,7 @@ function ChatMessages({
   onLinkClick,
   emptyState,
   className,
+  scrollerClassName,
   showTimestamps = false,
   announce: announce2,
   scrollerRef,
@@ -1054,7 +1120,8 @@ function ChatMessages({
   timestampOptions,
   codeBlockOptions,
   bubbleOptions,
-  messageActions
+  messageActions,
+  toolElapsedThreshold = 3e3
 }) {
   const alleTexte = { ...defaultTexts, ...texts };
   const { Button: Button2 } = useQuasselComponents();
@@ -1065,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;
@@ -1074,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;
     }
@@ -1137,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");
         }
@@ -1149,29 +1220,32 @@ 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-[10.5px] qsl:tabular-nums qsl:text-muted-foreground qsl:opacity-85",
+      "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 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
@@ -1180,6 +1254,7 @@ function ChatMessages({
         ) : /* @__PURE__ */ jsx13(
           StepRow,
           {
+            elapsedAfter,
             expandierbar: stepsExpandable,
             messages: gruppe,
             mitText: detailMode !== "icons",
@@ -1227,6 +1302,7 @@ function ChatMessages({
         {
           detailMode,
           dicht,
+          elapsedAfter,
           expandierbar: stepsExpandable,
           message,
           plain: owner != null && message.sender === owner,
@@ -1259,8 +1335,10 @@ function ChatMessages({
           "qsl:[--qsl-fade-edge:calc(100%_-_var(--qsl-composer-height,0px))]",
           "qsl:[-webkit-mask-image:linear-gradient(to_bottom,#000_calc(var(--qsl-fade-edge)_-_40px),transparent_calc(var(--qsl-fade-edge)_+_16px))]",
           "qsl:[mask-image:linear-gradient(to_bottom,#000_calc(var(--qsl-fade-edge)_-_40px),transparent_calc(var(--qsl-fade-edge)_+_16px))]",
-          "qsl:in-data-[tone=material]:p-0"
+          "qsl:in-data-[tone=material]:p-0",
+          scrollerClassName
         ),
+        "data-quassel-transcript": "",
         onScroll: pruefeEnde,
         onWheel: (event) => {
           if (!event.ctrlKey && event.deltaY < 0) pauseUp(event.currentTarget, event.target);
@@ -1310,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 }) });
 }
@@ -1318,6 +1400,7 @@ function StepRow({
   messages,
   mitText,
   expandierbar,
+  elapsedAfter,
   texts,
   toolArgumentsText,
   toolLabel
@@ -1334,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");
@@ -1370,7 +1454,8 @@ function StepRow({
 }
 function StepGroup({
   messages,
-  aktiv,
+  laufenderSchritt,
+  elapsedAfter,
   expandierbar,
   texts,
   toolArgumentsText
@@ -1384,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",
@@ -1406,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",
       {
@@ -1433,6 +1519,7 @@ function StepGroup({
 function TraceLine({
   message,
   className,
+  elapsedAfter,
   expandierbar,
   texts,
   toolArgumentsText
@@ -1446,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" };
@@ -1478,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,
@@ -1494,23 +1592,24 @@ 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,
       /* @__PURE__ */ jsxs6("div", { className: "qsl:min-w-0 qsl:flex-1", children: [
         /* @__PURE__ */ jsx13("div", { className: cn(traceLineClasses, thinking && "qsl:font-sans qsl:italic qsl:whitespace-pre-wrap"), children: zeile }),
         tool && /* @__PURE__ */ jsxs6("div", { className: "qsl:mt-0.5 qsl:border-l-2 qsl:border-border-soft qsl:pl-2", children: [
-          /* @__PURE__ */ jsx13("pre", { className: "qsl:mb-0.5 qsl:max-h-[208px] qsl:overflow-auto qsl:font-mono qsl:text-[10.5px] qsl:leading-[1.375] qsl:break-all qsl:whitespace-pre-wrap qsl:opacity-80", children: toolArgumentsText(tool) }),
+          /* @__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(
-            "qsl:mb-0.5 qsl:max-h-[208px] qsl:overflow-auto qsl:font-mono qsl:text-[10.5px] qsl:leading-[1.375] qsl:break-all qsl:whitespace-pre-wrap qsl:opacity-80",
+            "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",
             tool.isError && "qsl:text-destructive qsl:opacity-100"
           ), children: prettyJson(tool.result) })
         ] })
@@ -1518,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: [
@@ -1545,12 +1633,12 @@ function Bubble({
   const showSender = bubbleOptions?.showSender ?? (!!message.bubble?.label && !plain);
   const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
     showSender && sender && /* @__PURE__ */ jsx13("span", { className: cn(
-      "qsl:mb-[5px] qsl:table qsl:text-[0.72rem] qsl:leading-[1.45] qsl:font-semibold",
+      "qsl:mb-[5px] qsl:table qsl:text-label qsl:leading-[1.45] qsl:font-semibold",
       useBubble && message.bubble && "qsl:rounded-full qsl:border qsl:border-white/30 qsl:bg-black/15 qsl:px-[7px] qsl:py-px qsl:tracking-[0.02em]"
     ), "data-chat": "sender", children: sender }),
     /* @__PURE__ */ jsx13(Markdown, { text: message.text, streaming: message.role === "assistant" && !message.closed }),
     /* @__PURE__ */ jsx13(MessageAttachments, { label: texts.attachments, message }),
-    message.steered && /* @__PURE__ */ jsx13("small", { className: "qsl:mt-1 qsl:block qsl:text-[0.72rem] qsl:leading-[1.45] qsl:opacity-70", "data-chat": "steered", children: texts.steered }),
+    message.steered && /* @__PURE__ */ jsx13("small", { className: "qsl:mt-1 qsl:block qsl:text-label qsl:leading-[1.45] qsl:opacity-70", "data-chat": "steered", children: texts.steered }),
     /* @__PURE__ */ jsx13(MessageActions, { message, options: messageActions, texts })
   ] });
   const cursor = message.role === "assistant" && message.textCursor ? JSON.stringify(message.textCursor) : void 0;
@@ -1565,7 +1653,7 @@ function Bubble({
       children: /* @__PURE__ */ jsx13(
         "div",
         {
-          className: cn(bubbleBodyClasses, "qsl:group", message.bubble ? "qsl:rounded-lg qsl:text-white qsl:[--qsl-scroll-cover:var(--qsl-primary)]" : "qsl:rounded-[10px_10px_4px_10px] qsl:border qsl:border-border qsl:bg-secondary qsl:text-foreground qsl:[--qsl-scroll-cover:var(--qsl-secondary)] qsl:in-data-[tone=material]:rounded-[9px] qsl:in-data-[tone=material]:border-glass-edge/20 qsl:in-data-[tone=material]:bg-primary/15 qsl:in-data-[tone=material]:text-foreground"),
+          className: cn(bubbleBodyClasses, "qsl:group", message.bubble ? "qsl:rounded-lg qsl:text-white qsl:[--qsl-scroll-cover:var(--qsl-primary)]" : "qsl:rounded-[var(--qsl-bubble-radius,10px_10px_4px_10px)] qsl:border qsl:border-border qsl:bg-secondary qsl:text-foreground qsl:[--qsl-scroll-cover:var(--qsl-secondary)] qsl:in-data-[tone=material]:rounded-[var(--qsl-bubble-radius,9px)] qsl:in-data-[tone=material]:border-glass-edge/20 qsl:in-data-[tone=material]:bg-primary/15 qsl:in-data-[tone=material]:text-foreground"),
           "data-tone": message.bubble ? "on-color" : void 0,
           style: { background: message.bubble?.color, maxWidth: bubbleOptions?.maxWidth },
           children: content
@@ -1574,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: [
@@ -1601,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));
@@ -1613,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),
@@ -1643,14 +1756,24 @@ 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
-import { PaperclipIcon, SendIcon, XIcon as XIcon2 } from "lucide-react";
+import { PaperclipIcon, SendIcon, XIcon as XIcon3 } from "lucide-react";
 
 // packages/quassel/src/ui/useFileInput.ts
 import { useRef as useRef5, useState as useState6 } from "react";
@@ -1702,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";
@@ -1851,7 +1974,7 @@ function ChatInputToolbar({
   const inputRows = inline || toolbar ? 1 : rows;
   const inputMaxRows = inline || toolbar ? 1 : maxRows;
   const rootClasses = cn(
-    "qsl:flex qsl:shrink-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-[var(--qsl-input-card-radius,var(--qsl-radius-xl))] qsl:border qsl:border-border-strong qsl:bg-background qsl:shadow-bar qsl:transition-colors qsl:focus-within:border-primary",
+    "qsl:flex qsl:shrink-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-[var(--qsl-input-card-radius,--theme(--radius-xl))] qsl:border qsl:border-border-strong qsl:bg-background qsl:shadow-bar qsl:transition-colors qsl:focus-within:border-primary",
     "qsl:in-data-[tone=material]:rounded-xl qsl:in-data-[tone=material]:border-glass-edge/50 qsl:in-data-[tone=material]:bg-background",
     toolbar && "qsl:h-full qsl:min-w-0 qsl:flex-row qsl:items-center qsl:rounded-lg qsl:data-[working=true]:animate-working-pulse qsl:data-[working=true]:border-primary qsl:motion-reduce:data-[working=true]:animate-none",
     fileInput.dragging && "qsl:outline-2 qsl:outline-offset-[3px] qsl:outline-dashed qsl:outline-primary"
@@ -2041,7 +2164,7 @@ function ChatInputToolbar({
         size: "icon-sm",
         title: fillText(alleTexte.removeAttachment, { name: entry.file.name }),
         variant: "outline",
-        children: /* @__PURE__ */ jsx15(XIcon2, {})
+        children: /* @__PURE__ */ jsx15(XIcon3, {})
       }
     )
   ] }, entry.id)) });
@@ -2172,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
@@ -2283,6 +2406,7 @@ export {
   encodeAttachment,
   fillText,
   formatAttachmentSize,
+  formatElapsed,
   markdownPlainText,
   messageDate,
   prettyJson,
@@ -2290,7 +2414,9 @@ export {
   timestampDay,
   timestampLabel,
   useChatAction,
+  useElapsed,
   useQuasselComponents,
+  useQuasselPortalContainer,
   validateAttachmentSelection
 };
 //# sourceMappingURL=index.js.map