lemma-sdk 0.2.25 → 0.2.27

package/dist/react/components/AssistantExperience.js

@@ -29,6 +29,35 @@ function fileNameFromPath(path) {
     const parts = normalized.split("/").filter(Boolean);
     return parts[parts.length - 1] || normalized;
 }
+function formatMessageTimestamp(createdAt) {
+    if (!(createdAt instanceof Date) || Number.isNaN(createdAt.getTime()))
+        return null;
+    return {
+        text: new Intl.DateTimeFormat(undefined, {
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "2-digit",
+        }).format(createdAt),
+        dateTime: createdAt.toISOString(),
+    };
+}
+function thinkingLabelsFromSummary(summary) {
+    const normalized = summary?.toLowerCase() || "";
+    if (normalized.includes("search") || normalized.includes("find") || normalized.includes("query")) {
+        return ["Searching…", "Working on it…", "Checking results…"];
+    }
+    if (normalized.includes("plan") || normalized.includes("step")) {
+        return ["Planning next steps…", "Working on it…", "Organizing tasks…"];
+    }
+    if (normalized.includes("run") || normalized.includes("command") || normalized.includes("exec")) {
+        return ["Running checks…", "Working on it…", "Inspecting output…"];
+    }
+    if (normalized.includes("file") || normalized.includes("present")) {
+        return ["Preparing files…", "Working on it…", "Finalizing output…"];
+    }
+    return ["Working on it…", "Thinking…", "Preparing response…"];
+}
 function toolInvocationKey(tool) {
     return `${tool.toolCallId}:${tool.state}`;
 }
@@ -222,6 +251,16 @@ function formatCommandPreview(cmd) {
     const compact = cmd.replace(/\s+/g, " ").trim();
     return truncateLabel(compact, 64);
 }
+function formatDurationCompact(durationMs) {
+    const totalSeconds = Math.max(1, Math.round(durationMs / 1000));
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    if (minutes <= 0)
+        return `${totalSeconds}s`;
+    if (seconds <= 0)
+        return `${minutes}m`;
+    return `${minutes}m ${seconds}s`;
+}
 function primaryToolArgs(args) {
     const request = asRecord(args.request);
     if (Object.keys(request).length > 0)
@@ -246,10 +285,13 @@ function commentLabelFromArgs(args) {
     const comment = asString(toolArg(args, "comment"));
     return comment ? truncateLabel(comment, 72) : null;
 }
+function toolCallPrimaryLabel(toolName, args) {
+    return commentLabelFromArgs(args) || formatToolDisplayName(toolName);
+}
 function formatActiveToolSummary(toolName, args) {
     const lowerName = toolName.toLowerCase();
+    const comment = commentLabelFromArgs(args);
     if (lowerName === "exec_command") {
-        const comment = commentLabelFromArgs(args);
         if (comment)
             return `Running ${comment}`;
         const cmd = asString(toolArg(args, "cmd"));
@@ -276,6 +318,8 @@ function formatActiveToolSummary(toolName, args) {
         const plan = asArray(toolArg(args, "plan"));
         return `Updating plan (${plan.length} step${plan.length === 1 ? "" : "s"})`;
     }
+    if (comment)
+        return `Running ${comment}`;
     return `Running ${formatToolDisplayName(toolName)}`;
 }
 function formatToolResultSummary(toolName, args, result) {
@@ -520,15 +564,33 @@ export function PlanSummaryStrip({ plan, onHide }) {
     const hiddenCount = Math.max(0, plan.steps.length - visibleSteps.length);
     return (_jsxs("div", { className: "lemma-assistant-plan-strip", children: [_jsxs("div", { className: "lemma-assistant-plan-strip-header", children: [_jsxs("div", { className: "lemma-assistant-plan-strip-summary", children: [_jsx("span", { className: "lemma-assistant-plan-strip-title", children: "Task plan" }), _jsxs("span", { className: "lemma-assistant-plan-strip-count", children: [plan.completedCount, "/", plan.steps.length, " complete"] }), plan.inProgressCount > 0 ? (_jsxs("span", { className: "lemma-assistant-plan-strip-active", children: [plan.inProgressCount, " active"] })) : null] }), _jsx("button", { type: "button", onClick: onHide, className: "lemma-assistant-plan-strip-hide", children: "Hide" })] }), plan.activeStep ? (_jsxs("div", { className: "lemma-assistant-plan-strip-current", title: plan.activeStep, children: [plan.running ? "Running:" : "Current:", " ", plan.activeStep] })) : null, _jsxs("div", { className: "lemma-assistant-plan-strip-steps", children: [visibleSteps.map((step, index) => (_jsxs("div", { className: "lemma-assistant-plan-strip-step", "data-status": step.status, children: [_jsx("span", { className: cx("lemma-assistant-plan-strip-step-dot", step.status === "completed" && "lemma-assistant-plan-strip-step-dot-completed", step.status === "in_progress" && "lemma-assistant-plan-strip-step-dot-in-progress", step.status === "pending" && "lemma-assistant-plan-strip-step-dot-pending") }), _jsx("span", { className: cx("lemma-assistant-plan-strip-step-label", step.status === "completed" && "lemma-assistant-plan-strip-step-label-completed", step.status === "in_progress" && "lemma-assistant-plan-strip-step-label-in-progress", step.status === "pending" && "lemma-assistant-plan-strip-step-label-pending"), children: step.step })] }, `${step.step}-${index}`))), plan.steps.length > 5 ? (_jsxs("div", { className: "lemma-assistant-plan-strip-footer", children: [_jsx("button", { type: "button", onClick: () => setShowAll((prev) => !prev), className: "lemma-assistant-plan-strip-toggle", children: showAll ? "Show less" : `See all ${plan.steps.length} steps` }), !showAll && hiddenCount > 0 ? (_jsxs("span", { className: "lemma-assistant-plan-strip-hidden-count", children: ["+", hiddenCount, " more"] })) : null] })) : null] })] }));
 }
-export function ThinkingIndicator() {
+function resolvedThinkingLabels(labels, activeToolSummary) {
+    if (labels && labels.length > 0)
+        return labels;
+    return thinkingLabelsFromSummary(activeToolSummary);
+}
+export function ThinkingIndicator({ activeToolSummary, labels, } = {}) {
     const [show, setShow] = useState(false);
+    const labelOptions = useMemo(() => resolvedThinkingLabels(labels, activeToolSummary), [labels, activeToolSummary]);
+    const [labelIndex, setLabelIndex] = useState(0);
     useEffect(() => {
         const timer = setTimeout(() => setShow(true), 350);
         return () => clearTimeout(timer);
     }, []);
+    useEffect(() => {
+        setLabelIndex(0);
+    }, [labelOptions]);
+    useEffect(() => {
+        if (!show || labelOptions.length < 2)
+            return;
+        const interval = window.setInterval(() => {
+            setLabelIndex((prev) => (prev + 1) % labelOptions.length);
+        }, 1600);
+        return () => clearInterval(interval);
+    }, [show, labelOptions]);
     if (!show)
         return null;
-    return (_jsx("div", { className: "lemma-assistant-thinking", children: _jsxs("div", { className: "lemma-assistant-thinking-label", children: [_jsx("span", { className: "lemma-assistant-thinking-dot" }), _jsx("span", { className: "lemma-assistant-thinking-text", children: "Thinking..." })] }) }));
+    return (_jsx("div", { className: "lemma-assistant-thinking", role: "status", "aria-live": "polite", "aria-label": "Generating response", children: _jsxs("div", { className: "lemma-assistant-thinking-label", children: [_jsx("span", { className: "lemma-assistant-thinking-dot" }), _jsx("span", { className: "lemma-assistant-thinking-text", children: labelOptions[labelIndex] || "Working on it…" })] }) }));
 }
 export const DEFAULT_EMPTY_STATE_SUGGESTIONS = [
     { text: "Help me get started", icon: "→" },
@@ -536,11 +598,14 @@ export const DEFAULT_EMPTY_STATE_SUGGESTIONS = [
     { text: "Help me draft a reply", icon: "✎" },
     { text: "Brainstorm next steps", icon: "⋯" },
 ];
+function LemmaMarkIcon({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", className: className, "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M10 2.5 16.25 5v4.85c0 4.25-2.55 7.05-6.25 8.15-3.7-1.1-6.25-3.9-6.25-8.15V5L10 2.5Z", fill: "currentColor", fillOpacity: "0.18", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "m7.1 10.1 1.8 1.8 4-4.1", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
 export function EmptyState({ onSendMessage, suggestions = DEFAULT_EMPTY_STATE_SUGGESTIONS, }) {
-    return (_jsxs("div", { className: "lemma-assistant-empty-state", children: [_jsxs("div", { className: "lemma-assistant-empty-state-hero", children: [_jsx("div", { className: "lemma-assistant-empty-state-badge", children: _jsx("span", { className: "lemma-assistant-empty-state-badge-icon", children: "\u2728" }) }), _jsx("h4", { className: "lemma-assistant-empty-state-title", children: "How can I help?" }), _jsx("p", { className: "lemma-assistant-empty-state-copy", children: "Ask a question, share context, or start with one of these prompts." })] }), _jsx("div", { className: "lemma-assistant-empty-state-suggestions", children: suggestions.map((suggestion, index) => (_jsxs("button", { onClick: () => onSendMessage(suggestion.text), className: "lemma-assistant-empty-state-suggestion", children: [suggestion.icon ? (_jsx("span", { className: "lemma-assistant-empty-state-suggestion-icon", children: suggestion.icon })) : null, _jsx("span", { className: "lemma-assistant-empty-state-suggestion-text", children: suggestion.text }), _jsx("span", { className: "lemma-assistant-empty-state-suggestion-arrow", children: "\u203A" })] }, `${suggestion.text}-${index}`))) })] }));
+    return (_jsxs("div", { className: "lemma-assistant-empty-state", children: [_jsxs("div", { className: "lemma-assistant-empty-state-hero", children: [_jsx("div", { className: "lemma-assistant-empty-state-badge", children: _jsx(LemmaMarkIcon, { className: "lemma-assistant-empty-state-badge-icon" }) }), _jsx("h4", { className: "lemma-assistant-empty-state-title", children: "How can I help?" }), _jsx("p", { className: "lemma-assistant-empty-state-copy", children: "Ask a question, share context, or start with one of these prompts." })] }), _jsx("div", { className: "lemma-assistant-empty-state-suggestions", children: suggestions.map((suggestion, index) => (_jsxs("button", { onClick: () => onSendMessage(suggestion.text), className: "lemma-assistant-empty-state-suggestion", children: [suggestion.icon ? (_jsx("span", { className: "lemma-assistant-empty-state-suggestion-icon", children: suggestion.icon })) : null, _jsx("span", { className: "lemma-assistant-empty-state-suggestion-text", children: suggestion.text }), _jsx("span", { className: "lemma-assistant-empty-state-suggestion-arrow", children: "\u203A" })] }, `${suggestion.text}-${index}`))) })] }));
 }
 function ReasoningPartCard({ text, isStreaming, durationMs, }) {
-    return (_jsxs("details", { className: "lemma-assistant-reasoning", open: isStreaming, children: [_jsxs("summary", { className: "lemma-assistant-reasoning-summary", children: [_jsx("span", { className: "lemma-assistant-reasoning-caret", children: "\u203A" }), _jsx("span", { className: cx("lemma-assistant-reasoning-label", isStreaming && "lemma-assistant-reasoning-label-streaming"), children: isStreaming ? "Thinking" : `Thought${durationMs ? ` · ${Math.max(1, Math.round(durationMs / 1000))}s` : ""}` })] }), _jsx("div", { className: "lemma-assistant-reasoning-body", children: _jsx("pre", { className: "lemma-assistant-reasoning-text", children: text }) })] }));
+    return (_jsxs("details", { className: "lemma-assistant-reasoning", open: isStreaming, children: [_jsx("summary", { className: "lemma-assistant-reasoning-summary", children: _jsx("span", { className: cx("lemma-assistant-reasoning-label", isStreaming && "lemma-assistant-reasoning-label-streaming"), children: isStreaming ? "Thinking" : `Thought${durationMs ? ` · ${Math.max(1, Math.round(durationMs / 1000))}s` : ""}` }) }), _jsx("div", { className: "lemma-assistant-reasoning-body", children: _jsx("pre", { className: "lemma-assistant-reasoning-text", children: text }) })] }));
 }
 function PresentFilesCard({ filepaths, conversationId, renderPresentedFile, }) {
     const fakeMessage = {
@@ -561,12 +626,137 @@ function PresentFilesCard({ filepaths, conversationId, renderPresentedFile, }) {
                 message: fakeMessage,
             }) }, `present-file-${filepath}`))) }));
 }
+function formatToolDetailValue(value) {
+    if (value === null)
+        return "null";
+    if (typeof value === "undefined")
+        return "undefined";
+    if (typeof value === "string") {
+        const trimmed = value.trim();
+        return trimmed.length <= 160 ? trimmed : `${trimmed.slice(0, 157)}...`;
+    }
+    if (typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0)
+            return "[]";
+        const primitives = value.filter((entry) => (typeof entry === "string"
+            || typeof entry === "number"
+            || typeof entry === "boolean"
+            || entry === null));
+        if (primitives.length === value.length) {
+            const preview = primitives
+                .slice(0, 4)
+                .map((entry) => (typeof entry === "string" ? `"${entry}"` : String(entry)))
+                .join(", ");
+            return `[${preview}${value.length > 4 ? ", ..." : ""}]`;
+        }
+        return `${value.length} item${value.length === 1 ? "" : "s"}`;
+    }
+    const record = asRecord(value);
+    const keys = Object.keys(record);
+    if (keys.length === 0)
+        return "{}";
+    const preview = keys.slice(0, 4).join(", ");
+    return `{ ${preview}${keys.length > 4 ? ", ..." : ""} }`;
+}
+function humanizeKey(value) {
+    return value
+        .replace(/[_-]+/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim()
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+function isToolPayloadValueMeaningful(value) {
+    if (value === null || typeof value === "undefined")
+        return false;
+    if (typeof value === "string")
+        return value.trim().length > 0;
+    if (Array.isArray(value))
+        return value.length > 0;
+    if (typeof value === "object")
+        return Object.keys(asRecord(value)).length > 0;
+    return true;
+}
+function summarizeToolPayload(payload, options) {
+    const excluded = new Set((options?.excludeKeys || []).map((key) => key.toLowerCase()));
+    return Object.entries(payload)
+        .filter(([key, value]) => !excluded.has(key.toLowerCase()) && isToolPayloadValueMeaningful(value))
+        .slice(0, 8)
+        .map(([key, value]) => ({
+        key,
+        value: formatToolDetailValue(value),
+    }));
+}
+function countSummarizablePayloadEntries(payload, options) {
+    const excluded = new Set((options?.excludeKeys || []).map((key) => key.toLowerCase()));
+    return Object.entries(payload)
+        .filter(([key, value]) => !excluded.has(key.toLowerCase()) && isToolPayloadValueMeaningful(value))
+        .length;
+}
+function pickPreferredEntries(entries, preferredKeys, max) {
+    const preferredSet = new Set(preferredKeys.map((key) => key.toLowerCase()));
+    const preferred = entries.filter((entry) => preferredSet.has(entry.key.toLowerCase()));
+    const rest = entries.filter((entry) => !preferredSet.has(entry.key.toLowerCase()));
+    return [...preferred, ...rest].slice(0, max);
+}
 function ToolDetailsPanel({ toolName, args, state, result, onNavigateResource, renderToolInvocation, message, activeConversationId, }) {
     const resultData = result || {};
+    const primaryLabel = toolCallPrimaryLabel(toolName, args);
+    const hasCommentLabel = !!commentLabelFromArgs(args);
+    const toolDisplayName = formatToolDisplayName(toolName);
     const canNavigate = state === "result"
         && resultData.success !== false
         && typeof resultData.resourceType === "string"
         && typeof resultData.resourceId === "string";
+    const summaryOptions = {
+        input: { excludeKeys: ["comment", "request", "wait_config"] },
+        output: { excludeKeys: ["success", "completed"] },
+    };
+    const inputEntries = summarizeToolPayload(args, summaryOptions.input);
+    const outputEntries = summarizeToolPayload(resultData, summaryOptions.output);
+    const inputHighlights = pickPreferredEntries(inputEntries, [
+        "cmd",
+        "query",
+        "path",
+        "filepath",
+        "filepaths",
+        "table",
+        "resource_type",
+        "resourceType",
+        "resource_id",
+        "resourceId",
+    ], 3);
+    const outputHighlights = pickPreferredEntries(outputEntries, [
+        "message",
+        "stdout",
+        "stderr",
+        "error",
+        "resource_type",
+        "resourceType",
+        "resource_id",
+        "resourceId",
+        "exit_code",
+        "session_id",
+    ], 3);
+    const detailRows = [
+        {
+            label: "Tool",
+            value: hasCommentLabel ? `${toolDisplayName} (${toolName})` : toolDisplayName,
+        },
+        ...inputHighlights.map((entry) => ({
+            label: humanizeKey(entry.key),
+            value: entry.value,
+        })),
+        ...outputHighlights.map((entry) => ({
+            label: humanizeKey(entry.key),
+            value: entry.value,
+        })),
+    ].slice(0, 8);
+    const hiddenInputCount = Math.max(0, countSummarizablePayloadEntries(args, summaryOptions.input) - inputEntries.length);
+    const hiddenOutputCount = Math.max(0, countSummarizablePayloadEntries(resultData, summaryOptions.output) - outputEntries.length);
     if (renderToolInvocation) {
         return (_jsx("div", { className: "lemma-assistant-tool-details-panel lemma-assistant-tool-details-panel-custom", children: renderToolInvocation({
                 invocation: {
@@ -580,37 +770,56 @@ function ToolDetailsPanel({ toolName, args, state, result, onNavigateResource, r
                 activeConversationId,
             }) }));
     }
-    return (_jsxs("div", { className: "lemma-assistant-tool-details-panel", children: [_jsxs("div", { className: "lemma-assistant-tool-details-header", children: [_jsx("div", { className: "lemma-assistant-tool-details-title", children: formatToolDisplayName(toolName) }), canNavigate && onNavigateResource ? (_jsx("button", { type: "button", onClick: () => onNavigateResource(resultData.resourceType, resultData.resourceId, resultData), className: "lemma-assistant-tool-details-link", children: "Open \u203A" })) : null] }), _jsxs("div", { className: "lemma-assistant-tool-details-grid", children: [_jsxs("div", { className: "lemma-assistant-tool-details-section", children: [_jsx("div", { className: "lemma-assistant-tool-details-label", children: "Input" }), _jsx("div", { className: "lemma-assistant-tool-details-code", children: _jsx("pre", { className: "lemma-assistant-tool-details-code-text", children: JSON.stringify(args, null, 2) }) })] }), _jsxs("div", { className: "lemma-assistant-tool-details-section", children: [_jsx("div", { className: "lemma-assistant-tool-details-label", children: "Output" }), _jsx("div", { className: "lemma-assistant-tool-details-code", children: _jsx("pre", { className: "lemma-assistant-tool-details-code-text", children: Object.keys(resultData).length > 0 ? JSON.stringify(resultData, null, 2) : "No output yet" }) })] })] })] }));
+    return (_jsxs("div", { className: "lemma-assistant-tool-details-panel", children: [_jsxs("div", { className: "lemma-assistant-tool-details-header", children: [_jsxs("div", { className: "lemma-assistant-tool-details-heading", children: [_jsx("div", { className: "lemma-assistant-tool-details-title", children: primaryLabel }), hasCommentLabel ? (_jsx("div", { className: "lemma-assistant-tool-details-meta", children: toolDisplayName })) : null] }), canNavigate && onNavigateResource ? (_jsx("button", { type: "button", onClick: () => onNavigateResource(resultData.resourceType, resultData.resourceId, resultData), className: "lemma-assistant-tool-details-link", children: "Open" })) : null] }), _jsx("div", { className: "lemma-assistant-tool-details-stack", children: _jsxs("div", { className: "lemma-assistant-tool-details-section", children: [_jsx("dl", { className: "lemma-assistant-tool-details-list", children: detailRows.map((row, index) => (_jsxs("div", { className: "lemma-assistant-tool-details-list-item", children: [_jsx("dt", { className: "lemma-assistant-tool-details-key", children: row.label }), _jsx("dd", { className: "lemma-assistant-tool-details-value", children: row.value })] }, `${row.label}-${index}`))) }), hiddenInputCount > 0 ? (_jsxs("div", { className: "lemma-assistant-tool-details-more", children: ["+", hiddenInputCount, " more input field", hiddenInputCount === 1 ? "" : "s"] })) : null, hiddenOutputCount > 0 ? (_jsxs("div", { className: "lemma-assistant-tool-details-more", children: ["+", hiddenOutputCount, " more output field", hiddenOutputCount === 1 ? "" : "s"] })) : null, _jsxs("div", { className: "lemma-assistant-tool-details-raw-row", children: [_jsxs("details", { className: "lemma-assistant-tool-details-raw", children: [_jsx("summary", { className: "lemma-assistant-tool-details-raw-summary", children: "Raw input JSON" }), _jsx("div", { className: "lemma-assistant-tool-details-code", children: _jsx("pre", { className: "lemma-assistant-tool-details-code-text", children: JSON.stringify(args, null, 2) }) })] }), Object.keys(resultData).length > 0 ? (_jsxs("details", { className: "lemma-assistant-tool-details-raw", children: [_jsx("summary", { className: "lemma-assistant-tool-details-raw-summary", children: "Raw output JSON" }), _jsx("div", { className: "lemma-assistant-tool-details-code", children: _jsx("pre", { className: "lemma-assistant-tool-details-code-text", children: JSON.stringify(resultData, null, 2) }) })] })) : null] })] }) })] }));
 }
 function InlineToolCall({ invocation, isSelected, onClick, }) {
     const resultData = (invocation.result || {});
     const isExecuting = invocation.state !== "result";
     const isComplete = invocation.state === "result" && resultData.success !== false;
     const isFailed = invocation.state === "result" && resultData.success === false;
+    const primaryLabel = toolCallPrimaryLabel(invocation.toolName, invocation.args);
+    const statusLabel = isExecuting ? "Working" : isFailed ? "Failed" : "Done";
+    const toolMeta = isExecuting ? `${invocation.toolName} · running` : invocation.toolName;
     const summary = isExecuting
-        ? formatActiveToolSummary(invocation.toolName, invocation.args)
+        ? "Running"
         : isFailed
             ? (typeof resultData.error === "string" ? resultData.error : "Tool failed")
             : (formatToolResultSummary(invocation.toolName, invocation.args, resultData) || "Completed");
-    return (_jsxs("button", { type: "button", onClick: onClick, className: "lemma-assistant-inline-tool-call", "data-state": isExecuting ? "executing" : isComplete ? "complete" : isFailed ? "failed" : "idle", "data-selected": isSelected ? "true" : "false", children: [_jsx("span", { className: "lemma-assistant-inline-tool-call-name", children: formatToolDisplayName(invocation.toolName) }), _jsx("span", { className: "lemma-assistant-inline-tool-call-summary", children: summary }), _jsx("span", { className: "lemma-assistant-inline-tool-call-caret", children: isSelected ? "⌄" : "›" })] }));
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "lemma-assistant-inline-tool-call", "data-state": isExecuting ? "executing" : isComplete ? "complete" : isFailed ? "failed" : "idle", "data-selected": isSelected ? "true" : "false", children: [_jsxs("span", { className: "lemma-assistant-inline-tool-call-rail", "aria-hidden": "true", children: [_jsx("span", { className: "lemma-assistant-inline-tool-call-node" }), _jsx("span", { className: "lemma-assistant-inline-tool-call-stem" })] }), _jsxs("span", { className: "lemma-assistant-inline-tool-call-main", children: [_jsxs("span", { className: "lemma-assistant-inline-tool-call-head", children: [_jsx("span", { className: "lemma-assistant-inline-tool-call-name", children: primaryLabel }), _jsx("span", { className: "lemma-assistant-inline-tool-call-status", children: statusLabel }), _jsx("span", { className: "lemma-assistant-inline-tool-call-caret", children: isSelected ? "⌄" : "›" })] }), _jsx("span", { className: "lemma-assistant-inline-tool-call-meta", children: toolMeta }), _jsx("span", { className: "lemma-assistant-inline-tool-call-summary", children: summary })] })] }));
 }
 function ToolActivityRollup({ detailParts, onNavigateResource, renderToolInvocation, message, activeConversationId, }) {
     const [activeToolCallId, setActiveToolCallId] = useState(null);
     const [isExpanded, setIsExpanded] = useState(false);
     const toolParts = detailParts.filter((part) => part.type === "tool");
     const reasoningParts = detailParts.filter((part) => part.type === "reasoning");
+    const totalThoughtDurationMs = reasoningParts.reduce((total, part) => total + (part.durationMs ?? 0), 0);
+    const shouldCollapse = detailParts.length > 1;
     const activeInvocation = [...toolParts]
         .reverse()
         .find((part) => part.toolInvocation.state !== "result")
         ?.toolInvocation;
     const failedCount = toolParts.filter((part) => (part.toolInvocation.state === "result" && part.toolInvocation.result?.success === false)).length;
     const isWorking = !!activeInvocation || reasoningParts.some((part) => part.state === "streaming");
+    const completionSummary = toolParts.length > 0
+        ? `Completed ${toolParts.length} tool${toolParts.length === 1 ? "" : "s"}`
+        : totalThoughtDurationMs > 0
+            ? `Thought for ${formatDurationCompact(totalThoughtDurationMs)}`
+            : "Completed";
     const summary = activeInvocation
         ? formatActiveToolSummary(activeInvocation.toolName, activeInvocation.args)
-        : `Worked across ${toolParts.length} tool${toolParts.length === 1 ? "" : "s"}${failedCount > 0 ? ` · ${failedCount} failed` : ""}`;
-    return (_jsxs("div", { className: "lemma-assistant-tool-rollup", children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded((prev) => !prev), className: "lemma-assistant-tool-rollup-toggle", "data-expanded": isExpanded ? "true" : "false", children: [_jsx("span", { className: "lemma-assistant-tool-rollup-caret", children: "\u203A" }), isWorking ? _jsx("span", { className: "lemma-assistant-tool-rollup-dot" }) : null, _jsx("span", { className: cx("lemma-assistant-tool-rollup-summary", isWorking && "lemma-assistant-tool-rollup-summary-working"), children: summary })] }), isExpanded ? (_jsx("div", { className: "lemma-assistant-tool-rollup-details", children: detailParts.map((part) => {
+        : isWorking
+            ? "Working on it…"
+            : `${completionSummary}${failedCount > 0 ? ` · ${failedCount} failed` : ""}`;
+    const collapsedSummary = isWorking
+        ? summary
+        : `${totalThoughtDurationMs > 0
+            ? `Worked for ${formatDurationCompact(totalThoughtDurationMs)}`
+            : `Worked through ${detailParts.length} step${detailParts.length === 1 ? "" : "s"}`}${failedCount > 0 ? ` · ${failedCount} failed` : ""}`;
+    return (_jsxs("div", { className: "lemma-assistant-tool-rollup", children: [shouldCollapse ? (_jsxs("button", { type: "button", className: "lemma-assistant-tool-rollup-banner", onClick: () => setIsExpanded((prev) => !prev), "aria-expanded": isExpanded, "aria-label": isExpanded ? "Hide tool activity details" : "Show tool activity details", children: [_jsx("span", { className: "lemma-assistant-tool-rollup-banner-line", "aria-hidden": "true" }), _jsxs("span", { className: "lemma-assistant-tool-rollup-banner-copy", children: [isWorking ? _jsx("span", { className: "lemma-assistant-tool-rollup-dot", "aria-hidden": "true" }) : null, _jsx("span", { className: cx("lemma-assistant-tool-rollup-banner-label", isWorking && "lemma-assistant-tool-rollup-banner-label-working"), children: collapsedSummary }), _jsx("span", { className: "lemma-assistant-tool-rollup-banner-caret", "data-expanded": isExpanded ? "true" : "false", "aria-hidden": "true", children: "\u203A" })] }), _jsx("span", { className: "lemma-assistant-tool-rollup-banner-line", "aria-hidden": "true" })] })) : (_jsxs("div", { className: "lemma-assistant-tool-rollup-header", children: [isWorking ? _jsx("span", { className: "lemma-assistant-tool-rollup-dot" }) : null, _jsx("span", { className: cx("lemma-assistant-tool-rollup-summary", isWorking && "lemma-assistant-tool-rollup-summary-working"), children: summary })] })), !shouldCollapse || isExpanded ? (_jsx("div", { className: "lemma-assistant-tool-rollup-details", children: detailParts.map((part) => {
                     if (part.type === "reasoning") {
-                        return (_jsxs("div", { className: "lemma-assistant-tool-rollup-thinking", children: [_jsx("div", { className: "lemma-assistant-tool-rollup-thinking-title", children: part.state === "streaming" ? "Thinking" : "Thought" }), _jsx("pre", { className: "lemma-assistant-tool-rollup-thinking-text", children: part.text })] }, `thinking-${part.id}`));
+                        return (_jsxs("div", { className: "lemma-assistant-tool-rollup-thinking", children: [_jsx("div", { className: "lemma-assistant-tool-rollup-thinking-title", children: part.state === "streaming"
+                                        ? "Internal note"
+                                        : `Internal note${part.durationMs ? ` · ${formatDurationCompact(part.durationMs)}` : ""}` }), _jsx("pre", { className: "lemma-assistant-tool-rollup-thinking-text", children: part.text })] }, `thinking-${part.id}`));
                     }
                     const invocation = part.toolInvocation;
                     const isSelected = activeToolCallId === invocation.toolCallId;
@@ -714,15 +923,16 @@ export function MessageGroup({ message, conversationId, onNavigateResource, onWi
         .reverse()
         .find((part) => part.type === "text" && part.text.trim().length > 0)
         ?.id;
+    const messageTimestamp = formatMessageTimestamp(message.createdAt);
     if (message.role === "user") {
-        return (_jsx("div", { className: "lemma-assistant-message lemma-assistant-message-user", children: _jsx("div", { className: "lemma-assistant-message-user-bubble", children: renderMessageContent({
-                    message: {
-                        ...message,
-                        content: message.content,
-                        parts: undefined,
-                        toolInvocations: undefined,
-                    },
-                }) }) }));
+        return (_jsxs("div", { className: "lemma-assistant-message lemma-assistant-message-user", children: [_jsx("div", { className: "lemma-assistant-message-user-bubble", children: renderMessageContent({
+                        message: {
+                            ...message,
+                            content: message.content,
+                            parts: undefined,
+                            toolInvocations: undefined,
+                        },
+                    }) }), messageTimestamp ? (_jsx("time", { className: "lemma-assistant-message-timestamp lemma-assistant-message-timestamp-user", dateTime: messageTimestamp.dateTime, children: messageTimestamp.text })) : null] }));
     }
     return (_jsxs("div", { className: "lemma-assistant-message lemma-assistant-message-assistant", children: [showAssistantHeader ? (_jsxs("div", { className: "lemma-assistant-message-header", children: [_jsx("span", { className: "lemma-assistant-message-header-dot" }), "Lemma"] })) : null, _jsxs("div", { className: "lemma-assistant-message-body", children: [blocks.map((block) => {
                         if (block.kind === "tools") {
@@ -760,12 +970,14 @@ export function MessageGroup({ message, conversationId, onNavigateResource, onWi
                         return null;
                     }), presentableFilepaths.length > 0 ? (_jsx(PresentFilesCard, { filepaths: presentableFilepaths, conversationId: conversationId, renderPresentedFile: renderPresentedFile })) : null] })] }));
 }
-export function AssistantExperienceView({ controller, title = "Lemma Assistant", subtitle = "Ask across your workspace and organization.", placeholder = "Message Lemma Assistant", emptyState, emptyStateSuggestions, draft: controlledDraft, onDraftChange, showConversationList = false, chromeStyle = "subtle", statusPlacement = "inline", radius = "md", showModelPicker = true, showNewConversationButton = true, onNavigateResource, renderConversationLabel = defaultConversationLabel, renderMessageContent = defaultMessageContent, renderPresentedFile, renderPendingFile = defaultPendingFile, renderToolInvocation, }) {
+export function AssistantExperienceView({ controller, title = "Lemma Assistant", subtitle = "Ask across your workspace and organization.", badge, placeholder = "Message Lemma Assistant", emptyState, emptyStateSuggestions, draft: controlledDraft, onDraftChange, showConversationList = false, chromeStyle = "subtle", statusPlacement = "inline", radius = "sm", showModelPicker = false, showNewConversationButton = true, onNavigateResource, renderConversationLabel = defaultConversationLabel, renderMessageContent = defaultMessageContent, renderPresentedFile, renderPendingFile = defaultPendingFile, renderToolInvocation, }) {
     const [draft, setDraft] = useControllableDraft(controlledDraft, onDraftChange);
     const [isPlanHidden, setIsPlanHidden] = useState(false);
     const [dismissedAskToolCallIds, setDismissedAskToolCallIds] = useState([]);
     const [askOverlayState, setAskOverlayState] = useState(null);
     const [isUpdatingModel, setIsUpdatingModel] = useState(false);
+    const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+    const [thinkingLabelIndex, setThinkingLabelIndex] = useState(0);
     const messagesContainerRef = useRef(null);
     const inputRef = useRef(null);
     const fileInputRef = useRef(null);
@@ -788,7 +1000,7 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
             return;
         const minHeight = 48;
         const maxHeight = 220;
-        textarea.style.height = "0px";
+        textarea.style.height = "auto";
         const nextHeight = Math.min(maxHeight, Math.max(minHeight, textarea.scrollHeight));
         textarea.style.height = `${nextHeight}px`;
         textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
@@ -801,6 +1013,7 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
                 behavior,
             });
             isPinnedToBottomRef.current = true;
+            setShowScrollToBottom(false);
             return;
         }
         const el = messagesContainerRef.current;
@@ -811,13 +1024,16 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
             behavior,
         });
         isPinnedToBottomRef.current = true;
+        setShowScrollToBottom(false);
     }, []);
     const updatePinnedState = useCallback(() => {
         const el = messagesContainerRef.current;
         if (!el)
             return;
         const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-        isPinnedToBottomRef.current = distanceFromBottom <= 112;
+        const isPinned = distanceFromBottom <= 112;
+        isPinnedToBottomRef.current = isPinned;
+        setShowScrollToBottom((prev) => (prev === !isPinned ? prev : !isPinned));
         if (el.scrollTop > 48)
             return;
         if (!controller.hasOlderMessages || controller.isLoadingMessages || controller.isLoadingOlderMessages || loadingOlderFromScrollRef.current)
@@ -856,8 +1072,10 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
     }, [controller.messages, isConversationBusy, scrollToLatest]);
     useEffect(() => {
         isPinnedToBottomRef.current = true;
+        setShowScrollToBottom(false);
         requestAnimationFrame(() => {
             scrollToLatest("auto");
+            inputRef.current?.focus();
         });
     }, [controller.activeConversationId, scrollToLatest]);
     useEffect(() => {
@@ -865,6 +1083,7 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
     }, [draft, resizeComposer]);
     const displayMessageRows = useMemo(() => buildDisplayMessageRows(controller.messages), [controller.messages]);
     const activeToolBanner = useMemo(() => getActiveToolBanner(controller.messages), [controller.messages]);
+    const thinkingLabels = useMemo(() => thinkingLabelsFromSummary(activeToolBanner?.summary), [activeToolBanner?.summary]);
     const planSummary = useMemo(() => latestPlanSummary(controller.messages), [controller.messages]);
     const pendingAskUserInput = useMemo(() => {
         const pending = findPendingAskUserInput(controller.messages);
@@ -896,6 +1115,17 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
         const hasTools = (lastMsg.toolInvocations?.length || 0) > 0 || (lastMsg.parts || []).some((part) => part.type === "tool");
         return hasText || hasTools;
     }, [controller.messages]);
+    useEffect(() => {
+        setThinkingLabelIndex(0);
+    }, [activeToolBanner?.summary, isConversationBusy]);
+    useEffect(() => {
+        if (!isConversationBusy || thinkingLabels.length < 2)
+            return;
+        const interval = window.setInterval(() => {
+            setThinkingLabelIndex((prev) => (prev + 1) % thinkingLabels.length);
+        }, 1700);
+        return () => clearInterval(interval);
+    }, [isConversationBusy, thinkingLabels]);
     const dismissAskOverlay = useCallback((toolCallId) => {
         setDismissedAskToolCallIds((prev) => (prev.includes(toolCallId) ? prev : [...prev, toolCallId]));
         setAskOverlayState(null);
@@ -985,6 +1215,13 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
         scrollToLatest("smooth");
         await controller.sendMessage(message);
     }, [controller, isConversationBusy, scrollToLatest, setDraft]);
+    const handleSuggestionSend = useCallback(async (suggestion) => {
+        const message = suggestion.trim();
+        if (!message || isConversationBusy)
+            return;
+        scrollToLatest("smooth");
+        await controller.sendMessage(message);
+    }, [controller, isConversationBusy, scrollToLatest]);
     const handleUploadSelection = useCallback(async (files) => {
         const selectedFiles = files ? Array.from(files) : [];
         if (selectedFiles.length === 0)
@@ -1027,26 +1264,29 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
         ? effectiveAskOverlayState.answers[effectiveAskOverlayState.currentQuestionIndex] || []
         : [];
     const canContinueAsk = activeAskAnswers.length > 0;
-    const liveStatusLabel = activeToolBanner?.summary || "Thinking through this...";
+    const liveStatusLabel = thinkingLabels[thinkingLabelIndex] || "Working on it…";
     const headerTone = chromeStyle === "elevated" ? "default" : chromeStyle === "flat" ? "flat" : "subtle";
     const composerTone = chromeStyle === "flat" ? "flat" : chromeStyle === "subtle" ? "subtle" : "default";
     const showInlineStatus = statusPlacement === "inline" && isConversationBusy;
     const showComposerStatus = statusPlacement === "composer" && isConversationBusy;
+    const resolvedHeaderBadge = badge === undefined
+        ? _jsx(LemmaMarkIcon, { className: "lemma-assistant-experience-header-badge-icon" })
+        : badge;
     return (_jsxs("div", { className: "lemma-assistant-experience", "data-chrome-style": chromeStyle, "data-status-placement": statusPlacement, "data-radius": radius, "data-show-model-picker": showModelPicker ? "true" : "false", "data-busy": isConversationBusy ? "true" : "false", "data-has-plan": planSummary ? "true" : "false", "data-has-pending-files": controller.pendingFiles.length > 0 ? "true" : "false", "data-show-conversation-list": showConversationList ? "true" : "false", children: [showConversationList ? (_jsxs("aside", { className: "lemma-assistant-experience-sidebar", children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-header", children: _jsxs("div", { className: "lemma-assistant-experience-sidebar-header-row", children: [_jsxs("div", { className: "lemma-assistant-experience-sidebar-copy", children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-title", children: "Conversations" }), _jsxs("div", { className: "lemma-assistant-experience-sidebar-meta", children: [controller.conversations.length, " total"] })] }), showNewConversationButton ? (_jsx("button", { type: "button", onClick: controller.clearMessages, className: "lemma-assistant-experience-sidebar-new", children: "New" })) : null] }) }), _jsx("div", { className: "lemma-assistant-experience-sidebar-items", children: controller.conversations.map((conversation) => {
                             const isActive = conversation.id === controller.activeConversationId;
                             return (_jsxs("button", { type: "button", onClick: () => controller.selectConversation(conversation.id), className: cx("lemma-assistant-experience-sidebar-item", isActive && "lemma-assistant-experience-sidebar-item-active"), children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-item-title", children: renderConversationLabel({ conversation, isActive }) }), _jsx("div", { className: "lemma-assistant-experience-sidebar-item-status", children: (conversation.status || "waiting").toLowerCase() })] }, conversation.id));
-                        }) })] })) : null, _jsxs("div", { className: "lemma-assistant-experience-main", children: [_jsxs("div", { className: "lemma-assistant-experience-card", children: [_jsx(AssistantHeader, { className: "lemma-assistant-experience-header", tone: headerTone, title: title, subtitle: subtitle, badge: _jsx("span", { className: "lemma-assistant-experience-header-badge-icon", children: "\u2728" }), controls: showModelPicker || showNewConversationButton ? (_jsxs(_Fragment, { children: [showModelPicker ? (_jsx(AssistantModelPicker, { value: controller.conversationModel, options: availableModels, getOptionLabel: (model) => availableModelLabels.get(model) ?? model, onChange: (nextModel) => { void handleModelChange(nextModel); }, disabled: isConversationBusy || isUpdatingModel, autoLabel: "Auto", className: "lemma-assistant-experience-model-picker" })) : null, showNewConversationButton ? (_jsx("button", { type: "button", onClick: controller.clearMessages, title: "New conversation", className: "lemma-assistant-experience-new", children: "\u21BA" })) : null] })) : undefined }), _jsxs(AssistantMessageViewport, { className: "lemma-assistant-experience-viewport", ref: messagesContainerRef, onScroll: updatePinnedState, children: [controller.messages.length === 0 && !isConversationBusy ? (emptyState || (_jsx(EmptyState, { onSendMessage: (message) => { void controller.sendMessage(message); }, suggestions: emptyStateSuggestions }))) : null, (controller.isLoadingMessages && controller.messages.length === 0) ? (_jsx("div", { className: "lemma-assistant-experience-loading", children: _jsx("span", { className: "lemma-assistant-experience-loading-text", children: "Loading\u2026" }) })) : null, (controller.isLoadingOlderMessages && controller.messages.length > 0) ? (_jsx("div", { className: "lemma-assistant-experience-loading-older", children: _jsx("span", { className: "lemma-assistant-experience-loading-older-text", children: "Loading older\u2026" }) })) : null, displayMessageRows.map((row, index) => {
-                                        const previousRow = index > 0 ? displayMessageRows[index - 1] : null;
-                                        const showAssistantHeader = row.message.role !== "assistant"
-                                            ? false
-                                            : previousRow?.message.role !== "assistant";
-                                        const includesLastRawMessage = row.sourceIndexes.includes(controller.messages.length - 1);
-                                        return (_jsx(MessageGroup, { message: row.message, onNavigateResource: onNavigateResource, onWidgetSendPrompt: handleWidgetSendPrompt, conversationId: controller.activeConversationId, isStreaming: isConversationBusy && includesLastRawMessage && row.message.role === "assistant", showAssistantHeader: showAssistantHeader, renderMessageContent: renderMessageContent, renderPresentedFile: renderPresentedFile, renderToolInvocation: renderToolInvocation }, row.id || index));
-                                    }), showInlineStatus ? (_jsx("div", { className: "lemma-assistant-experience-inline-status", children: _jsx("div", { className: "lemma-assistant-experience-inline-status-pill", "data-has-content": lastMessageHasContent ? "true" : "false", children: _jsx(AssistantStatusPill, { label: liveStatusLabel, subtle: lastMessageHasContent }) }) })) : null, controller.error ? (_jsx("div", { className: "lemma-assistant-experience-error", children: _jsxs("div", { children: [_jsx("p", { className: "lemma-assistant-experience-error-title", children: "Something went wrong" }), _jsx("p", { className: "lemma-assistant-experience-error-copy", children: controller.error })] }) })) : null, (controller.messages.length > 0 || isConversationBusy || !!controller.error) ? (_jsx("div", { "aria-hidden": "true", className: "lemma-assistant-experience-bottom-spacer" })) : null, _jsx("div", { ref: bottomAnchorRef, "aria-hidden": "true", className: "lemma-assistant-experience-bottom-anchor" })] })] }), _jsx(AssistantComposer, { className: "lemma-assistant-experience-composer", tone: composerTone, floating: planSummary ? (isPlanHidden ? (_jsxs("button", { type: "button", onClick: () => setIsPlanHidden(false), className: "lemma-assistant-experience-plan-button", children: ["Show plan (", planSummary.completedCount, "/", planSummary.steps.length, ")"] })) : (_jsx(PlanSummaryStrip, { plan: planSummary, onHide: () => setIsPlanHidden(true) }))) : undefined, status: showComposerStatus ? (_jsx(AssistantStatusPill, { label: liveStatusLabel, subtle: true })) : undefined, pendingFiles: controller.pendingFiles.length > 0 ? (_jsx(_Fragment, { children: controller.pendingFiles.map((file) => {
+                        }) })] })) : null, _jsxs("div", { className: "lemma-assistant-experience-main", children: [_jsxs("div", { className: "lemma-assistant-experience-card", children: [_jsx(AssistantHeader, { className: "lemma-assistant-experience-header", tone: headerTone, title: title, subtitle: subtitle, badge: resolvedHeaderBadge, controls: showModelPicker || showNewConversationButton ? (_jsxs(_Fragment, { children: [showModelPicker ? (_jsx(AssistantModelPicker, { value: controller.conversationModel, options: availableModels, getOptionLabel: (model) => availableModelLabels.get(model) ?? model, onChange: (nextModel) => { void handleModelChange(nextModel); }, disabled: isConversationBusy || isUpdatingModel, autoLabel: "Auto", className: "lemma-assistant-experience-model-picker" })) : null, showNewConversationButton ? (_jsx("button", { type: "button", onClick: controller.clearMessages, title: "New conversation", className: "lemma-assistant-experience-new", children: "\u21BA" })) : null] })) : undefined }), _jsx(AssistantMessageViewport, { className: "lemma-assistant-experience-viewport", ref: messagesContainerRef, onScroll: updatePinnedState, children: _jsxs("div", { className: "lemma-assistant-experience-live-region", "aria-live": "polite", "aria-atomic": "false", children: [controller.messages.length === 0 && !isConversationBusy ? (emptyState || (_jsx(EmptyState, { onSendMessage: (message) => { void handleSuggestionSend(message); }, suggestions: emptyStateSuggestions }))) : null, (controller.isLoadingMessages && controller.messages.length === 0) ? (_jsx("div", { className: "lemma-assistant-experience-loading", children: _jsx("span", { className: "lemma-assistant-experience-loading-text", children: "Loading\u2026" }) })) : null, (controller.isLoadingOlderMessages && controller.messages.length > 0) ? (_jsx("div", { className: "lemma-assistant-experience-loading-older", children: _jsx("span", { className: "lemma-assistant-experience-loading-older-text", children: "Loading older\u2026" }) })) : null, displayMessageRows.map((row, index) => {
+                                            const previousRow = index > 0 ? displayMessageRows[index - 1] : null;
+                                            const showAssistantHeader = row.message.role !== "assistant"
+                                                ? false
+                                                : previousRow?.message.role !== "assistant";
+                                            const includesLastRawMessage = row.sourceIndexes.includes(controller.messages.length - 1);
+                                            return (_jsx(MessageGroup, { message: row.message, onNavigateResource: onNavigateResource, onWidgetSendPrompt: handleWidgetSendPrompt, conversationId: controller.activeConversationId, isStreaming: isConversationBusy && includesLastRawMessage && row.message.role === "assistant", showAssistantHeader: showAssistantHeader, renderMessageContent: renderMessageContent, renderPresentedFile: renderPresentedFile, renderToolInvocation: renderToolInvocation }, row.id || index));
+                                        }), showInlineStatus ? (_jsx("div", { className: "lemma-assistant-experience-inline-status", children: _jsx("div", { className: "lemma-assistant-experience-inline-status-pill", "data-has-content": lastMessageHasContent ? "true" : "false", children: _jsx(AssistantStatusPill, { label: liveStatusLabel, subtle: lastMessageHasContent }) }) })) : null, controller.error ? (_jsx("div", { className: "lemma-assistant-experience-error", children: _jsxs("div", { children: [_jsx("p", { className: "lemma-assistant-experience-error-title", children: "Something went wrong" }), _jsx("p", { className: "lemma-assistant-experience-error-copy", children: controller.error })] }) })) : null, showScrollToBottom ? (_jsx("button", { type: "button", onClick: () => scrollToLatest("smooth"), className: "lemma-assistant-scroll-to-bottom", "aria-label": "Scroll to latest messages", title: "Scroll to latest messages", children: "\u2193" })) : null, (controller.messages.length > 0 || isConversationBusy || !!controller.error) ? (_jsx("div", { "aria-hidden": "true", className: "lemma-assistant-experience-bottom-spacer" })) : null, _jsx("div", { ref: bottomAnchorRef, "aria-hidden": "true", className: "lemma-assistant-experience-bottom-anchor" })] }) })] }), _jsx(AssistantComposer, { className: "lemma-assistant-experience-composer", tone: composerTone, floating: planSummary ? (isPlanHidden ? (_jsxs("button", { type: "button", onClick: () => setIsPlanHidden(false), className: "lemma-assistant-experience-plan-button", children: ["Show plan (", planSummary.completedCount, "/", planSummary.steps.length, ")"] })) : (_jsx(PlanSummaryStrip, { plan: planSummary, onHide: () => setIsPlanHidden(true) }))) : undefined, status: showComposerStatus ? (_jsx(AssistantStatusPill, { label: liveStatusLabel, subtle: true })) : undefined, pendingFiles: controller.pendingFiles.length > 0 ? (_jsx(_Fragment, { children: controller.pendingFiles.map((file) => {
                                 const fileKey = `${file.name}:${file.size}:${file.lastModified}`;
                                 return (_jsx("div", { children: renderPendingFile({
                                         file,
                                         remove: () => controller.removePendingFile(fileKey),
                                     }) }, fileKey));
-                            }) })) : undefined, children: activeAskQuestion && effectiveAskOverlayState && pendingAskUserInput ? (_jsx(AssistantAskOverlay, { questionNumber: effectiveAskOverlayState.currentQuestionIndex + 1, totalQuestions: pendingAskUserInput.questions.length, question: activeAskQuestion.question, options: activeAskQuestion.options, selectedOptions: activeAskAnswers, canContinue: canContinueAsk, continueLabel: effectiveAskOverlayState.currentQuestionIndex >= pendingAskUserInput.questions.length - 1 ? "Use answers" : "Continue", onSelectOption: updateAskAnswer, onContinue: activeAskQuestion.type !== "single_select" || pendingAskUserInput.questions.length > 1 ? continueAskQuestions : undefined, onSkip: () => dismissAskOverlay(effectiveAskOverlayState.toolCallId), mode: activeAskQuestion.type })) : (_jsx("div", { className: "lemma-assistant-experience-composer-body", children: _jsxs("div", { className: "lemma-assistant-experience-input-row", children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "lemma-assistant-experience-file-input", onChange: (event) => { void handleUploadSelection(event.target.files); } }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isConversationBusy || controller.isUploadingFiles, className: "lemma-assistant-experience-upload", "data-disabled": isConversationBusy || controller.isUploadingFiles ? "true" : "false", title: "Upload files", children: controller.isUploadingFiles ? "…" : "＋" }), _jsx("textarea", { ref: inputRef, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, className: "lemma-assistant-experience-textarea", rows: 1, disabled: isConversationBusy }), _jsx("div", { className: "lemma-assistant-experience-send-wrap", children: _jsx("button", { onClick: isConversationBusy ? controller.stop : () => { void handleSubmit(); }, disabled: !isConversationBusy && !draft.trim(), className: "lemma-assistant-experience-send", "data-state": isConversationBusy ? "busy" : draft.trim() ? "ready" : "idle", title: isConversationBusy ? "Stop generating" : "Send message", children: isConversationBusy ? "■" : "→" }) })] }) })) })] })] }));
+                            }) })) : undefined, children: activeAskQuestion && effectiveAskOverlayState && pendingAskUserInput ? (_jsx(AssistantAskOverlay, { questionNumber: effectiveAskOverlayState.currentQuestionIndex + 1, totalQuestions: pendingAskUserInput.questions.length, question: activeAskQuestion.question, options: activeAskQuestion.options, selectedOptions: activeAskAnswers, canContinue: canContinueAsk, continueLabel: effectiveAskOverlayState.currentQuestionIndex >= pendingAskUserInput.questions.length - 1 ? "Use answers" : "Continue", onSelectOption: updateAskAnswer, onContinue: activeAskQuestion.type !== "single_select" || pendingAskUserInput.questions.length > 1 ? continueAskQuestions : undefined, onSkip: () => dismissAskOverlay(effectiveAskOverlayState.toolCallId), mode: activeAskQuestion.type })) : (_jsx("div", { className: "lemma-assistant-experience-composer-body", children: _jsxs("div", { className: "lemma-assistant-experience-input-row", children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "lemma-assistant-experience-file-input", onChange: (event) => { void handleUploadSelection(event.target.files); } }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isConversationBusy || controller.isUploadingFiles, className: "lemma-assistant-experience-upload", "data-disabled": isConversationBusy || controller.isUploadingFiles ? "true" : "false", title: "Upload files", children: controller.isUploadingFiles ? "…" : "＋" }), _jsx("textarea", { ref: inputRef, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, className: "lemma-assistant-experience-textarea", rows: 1, disabled: isConversationBusy }), _jsx("div", { className: "lemma-assistant-experience-send-wrap", children: _jsx("button", { onClick: isConversationBusy ? controller.stop : () => { void handleSubmit(); }, disabled: !isConversationBusy && !draft.trim(), className: "lemma-assistant-experience-send", "data-state": isConversationBusy ? "busy" : draft.trim() ? "ready" : "idle", "aria-label": isConversationBusy ? "Stop generating" : "Send message", title: isConversationBusy ? "Stop generating" : "Send message", children: isConversationBusy ? "■" : "→" }) })] }) })) })] })] }));
 }

package/dist/react/components/assistant-types.d.ts

@@ -65,6 +65,7 @@ export interface EmptyStateSuggestion {
 export interface AssistantExperienceCustomizationProps {
     title?: ReactNode;
     subtitle?: ReactNode;
+    badge?: ReactNode | null;
     placeholder?: string;
     emptyState?: ReactNode;
     emptyStateSuggestions?: EmptyStateSuggestion[];