lemma-sdk 0.2.10 → 0.2.11

package/dist/react/components/AssistantExperience.js

@@ -0,0 +1,1032 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { AvailableModels } from "../../types.js";
+function cx(...values) {
+    return values.filter(Boolean).join(" ");
+}
+function asArray(value) {
+    return Array.isArray(value) ? value : [];
+}
+function asRecord(value) {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : {};
+}
+function asString(value) {
+    return typeof value === "string" && value.trim().length > 0 ? value.trim() : undefined;
+}
+function truncateLabel(value, max = 72) {
+    const trimmed = value.trim();
+    if (trimmed.length <= max)
+        return trimmed;
+    return `${trimmed.slice(0, max - 1)}…`;
+}
+function fileNameFromPath(path) {
+    const normalized = path.replace(/\\/g, "/");
+    const parts = normalized.split("/").filter(Boolean);
+    return parts[parts.length - 1] || normalized;
+}
+function toolInvocationKey(tool) {
+    return `${tool.toolCallId}:${tool.state}`;
+}
+export function dedupToolInvocations(message) {
+    const invocations = [];
+    const seen = new Set();
+    (message.parts || []).forEach((part) => {
+        if (part.type !== "tool")
+            return;
+        const key = toolInvocationKey(part.toolInvocation);
+        if (seen.has(key))
+            return;
+        seen.add(key);
+        invocations.push(part.toolInvocation);
+    });
+    (message.toolInvocations || []).forEach((invocation) => {
+        const key = toolInvocationKey(invocation);
+        if (seen.has(key))
+            return;
+        seen.add(key);
+        invocations.push(invocation);
+    });
+    return invocations;
+}
+function normalizePlanStatus(rawStatus) {
+    const status = typeof rawStatus === "string" ? rawStatus.trim().toLowerCase() : "";
+    if (status === "completed" || status === "complete" || status === "done")
+        return "completed";
+    if (status === "in_progress" || status === "in-progress" || status === "running" || status === "active")
+        return "in_progress";
+    return "pending";
+}
+function parsePlanSteps(value) {
+    const entries = asArray(value);
+    return entries
+        .map((entry, index) => {
+        const obj = asRecord(entry);
+        const step = asString(obj.step) || asString(obj.title) || `Step ${index + 1}`;
+        if (!step)
+            return null;
+        return {
+            step,
+            status: normalizePlanStatus(obj.status),
+        };
+    })
+        .filter((entry) => entry !== null);
+}
+export function latestPlanSummary(messages) {
+    for (let messageIndex = messages.length - 1; messageIndex >= 0; messageIndex -= 1) {
+        const invocations = dedupToolInvocations(messages[messageIndex]);
+        for (let invocationIndex = invocations.length - 1; invocationIndex >= 0; invocationIndex -= 1) {
+            const invocation = invocations[invocationIndex];
+            if (invocation.toolName.toLowerCase() !== "update_plan")
+                continue;
+            const argsObj = asRecord(invocation.args);
+            let steps = parsePlanSteps(argsObj.plan);
+            if (steps.length === 0) {
+                const resultObj = asRecord(invocation.result);
+                const outputObj = asRecord(resultObj.output);
+                steps = parsePlanSteps(outputObj.plan ?? resultObj.plan);
+            }
+            if (steps.length === 0)
+                continue;
+            const completedCount = steps.filter((step) => step.status === "completed").length;
+            const inProgressCount = steps.filter((step) => step.status === "in_progress").length;
+            const activeStep = steps.find((step) => step.status === "in_progress")?.step;
+            const running = invocation.state !== "result" || inProgressCount > 0;
+            return {
+                steps,
+                completedCount,
+                inProgressCount,
+                running,
+                activeStep,
+            };
+        }
+    }
+    return null;
+}
+function normalizeQuestionType(value) {
+    const normalized = typeof value === "string" ? value.trim().toLowerCase() : "";
+    if (normalized === "multi_select")
+        return "multi_select";
+    if (normalized === "rank_priorities")
+        return "rank_priorities";
+    return "single_select";
+}
+function parseAskUserInputQuestions(value) {
+    return asArray(value)
+        .map((entry) => {
+        const obj = asRecord(entry);
+        const question = asString(obj.question);
+        const options = asArray(obj.options)
+            .map((option) => (typeof option === "string" ? option.trim() : ""))
+            .filter((option) => option.length > 0)
+            .slice(0, 4);
+        if (!question || options.length < 2) {
+            return null;
+        }
+        return {
+            question,
+            options,
+            type: normalizeQuestionType(obj.type),
+        };
+    })
+        .filter((entry) => entry !== null)
+        .slice(0, 3);
+}
+function extractAskUserInputQuestionsFromInvocation(invocation) {
+    if (invocation.toolName.toLowerCase() !== "ask_user_input")
+        return [];
+    const args = asRecord(invocation.args);
+    const result = asRecord(invocation.result);
+    const output = asRecord(result.output);
+    const fromArgs = parseAskUserInputQuestions(args.questions);
+    if (fromArgs.length > 0)
+        return fromArgs;
+    const fromResult = parseAskUserInputQuestions(result.questions);
+    if (fromResult.length > 0)
+        return fromResult;
+    return parseAskUserInputQuestions(output.questions);
+}
+export function findPendingAskUserInput(messages) {
+    let latestUserMessageIndex = -1;
+    messages.forEach((message, index) => {
+        if (message.role === "user") {
+            latestUserMessageIndex = index;
+        }
+    });
+    let pending;
+    messages.forEach((message, messageIndex) => {
+        if (message.role !== "assistant")
+            return;
+        const invocations = dedupToolInvocations(message);
+        invocations.forEach((invocation) => {
+            const questions = extractAskUserInputQuestionsFromInvocation(invocation);
+            if (questions.length === 0)
+                return;
+            pending = {
+                toolCallId: invocation.toolCallId || `${message.id}-ask-user-input`,
+                messageIndex,
+                questions,
+            };
+        });
+    });
+    if (!pending || latestUserMessageIndex > pending.messageIndex) {
+        return null;
+    }
+    return pending;
+}
+export function formatAskUserInputAnswers(questions, answers) {
+    const rows = [];
+    questions.forEach((question, index) => {
+        const answer = answers[index] || [];
+        if (answer.length === 0)
+            return;
+        const answerText = question.type === "rank_priorities"
+            ? answer.join(" > ")
+            : answer.join(", ");
+        rows.push(`Q: ${question.question}`);
+        rows.push(`A: ${answerText}`);
+        rows.push("");
+    });
+    return rows.join("\n").trim();
+}
+function normalizeFilepaths(value) {
+    return asArray(value)
+        .map((item) => (typeof item === "string" ? item.trim() : ""))
+        .filter((path) => path.length > 0);
+}
+export function extractPresentFilePathsFromInvocation(invocation) {
+    if (invocation.toolName.toLowerCase() !== "present_files")
+        return [];
+    const args = asRecord(invocation.args);
+    const result = asRecord(invocation.result);
+    const output = asRecord(result.output);
+    const fromArgs = [
+        normalizeFilepaths(args.filepaths),
+        normalizeFilepaths(args.file_paths),
+        normalizeFilepaths(args.paths),
+    ].find((entries) => entries.length > 0) || [];
+    if (fromArgs.length > 0)
+        return fromArgs;
+    return [
+        normalizeFilepaths(result.filepaths),
+        normalizeFilepaths(result.file_paths),
+        normalizeFilepaths(output.filepaths),
+        normalizeFilepaths(output.file_paths),
+    ].find((entries) => entries.length > 0) || [];
+}
+function formatCommandPreview(cmd) {
+    const compact = cmd.replace(/\s+/g, " ").trim();
+    return truncateLabel(compact, 64);
+}
+function primaryToolArgs(args) {
+    const request = asRecord(args.request);
+    if (Object.keys(request).length > 0)
+        return request;
+    const waitConfig = asRecord(args.wait_config);
+    if (Object.keys(waitConfig).length > 0)
+        return waitConfig;
+    return args;
+}
+function toolArg(args, key) {
+    const direct = args[key];
+    if (typeof direct !== "undefined")
+        return direct;
+    return primaryToolArgs(args)[key];
+}
+function formatToolDisplayName(toolName) {
+    return toolName
+        .replace(/_/g, " ")
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function commentLabelFromArgs(args) {
+    const comment = asString(toolArg(args, "comment"));
+    return comment ? truncateLabel(comment, 72) : null;
+}
+function formatActiveToolSummary(toolName, args) {
+    const lowerName = toolName.toLowerCase();
+    if (lowerName === "exec_command") {
+        const comment = commentLabelFromArgs(args);
+        if (comment)
+            return `Running ${comment}`;
+        const cmd = asString(toolArg(args, "cmd"));
+        return cmd ? `Running ${formatCommandPreview(cmd)}` : "Running command";
+    }
+    if (lowerName === "ask_user_input") {
+        const questions = parseAskUserInputQuestions(toolArg(args, "questions"));
+        return questions.length > 0
+            ? `Waiting for user input (${questions.length} question${questions.length === 1 ? "" : "s"})`
+            : "Waiting for user input";
+    }
+    if (lowerName === "present_files") {
+        const filepaths = extractPresentFilePathsFromInvocation({
+            toolCallId: "",
+            toolName,
+            args,
+            state: "call",
+        });
+        return filepaths.length > 0
+            ? `Presenting ${filepaths.length} file${filepaths.length === 1 ? "" : "s"}`
+            : "Presenting files";
+    }
+    if (lowerName === "update_plan") {
+        const plan = asArray(toolArg(args, "plan"));
+        return `Updating plan (${plan.length} step${plan.length === 1 ? "" : "s"})`;
+    }
+    return `Running ${formatToolDisplayName(toolName)}`;
+}
+function formatToolResultSummary(toolName, args, result) {
+    const lowerName = toolName.toLowerCase();
+    if (lowerName === "present_files") {
+        const filepaths = extractPresentFilePathsFromInvocation({
+            toolCallId: "",
+            toolName,
+            args,
+            state: "result",
+            result,
+        });
+        if (filepaths.length > 0) {
+            return `Presented ${filepaths.length} file${filepaths.length === 1 ? "" : "s"}`;
+        }
+    }
+    if (lowerName === "update_plan") {
+        const plan = asArray(toolArg(args, "plan"));
+        const completed = plan.filter((step) => asRecord(step).status === "completed").length;
+        if (plan.length > 0) {
+            return `${completed}/${plan.length} complete`;
+        }
+    }
+    const rawMessage = asString(result.message);
+    if (rawMessage)
+        return truncateLabel(rawMessage, 90);
+    if (typeof result.error === "string" && result.error.trim()) {
+        return truncateLabel(result.error.trim(), 90);
+    }
+    if (typeof result.resourceType === "string" && typeof result.resourceId === "string") {
+        return `Created ${result.resourceType}`;
+    }
+    return null;
+}
+function hasMeaningfulTextPart(message) {
+    return (message.parts || []).some((part) => part.type === "text" && part.text.trim().length > 0);
+}
+function isShowWidgetToolName(toolName) {
+    const normalized = toolName.trim().toLowerCase();
+    return normalized === "visualize:show_widget"
+        || normalized === "visualize.show_widget"
+        || normalized === "show_widget"
+        || normalized === "render_widget";
+}
+function isCollapsibleAssistantMessage(message) {
+    if (message.role !== "assistant")
+        return false;
+    const hasTools = (message.toolInvocations?.length || 0) > 0 || (message.parts || []).some((part) => part.type === "tool");
+    const hasReasoning = (message.parts || []).some((part) => part.type === "reasoning" && part.text.trim().length > 0);
+    if (!hasTools && !hasReasoning)
+        return false;
+    return !hasMeaningfulTextPart(message) && (!message.content || message.content.trim().length === 0);
+}
+export function buildDisplayMessageRows(messages) {
+    const rows = [];
+    for (let i = 0; i < messages.length; i += 1) {
+        const message = messages[i];
+        if (!isCollapsibleAssistantMessage(message)) {
+            rows.push({
+                id: message.id,
+                message,
+                sourceIndexes: [i],
+            });
+            continue;
+        }
+        const cluster = [message];
+        const sourceIndexes = [i];
+        let j = i + 1;
+        while (j < messages.length && isCollapsibleAssistantMessage(messages[j])) {
+            cluster.push(messages[j]);
+            sourceIndexes.push(j);
+            j += 1;
+        }
+        if (cluster.length === 1) {
+            rows.push({
+                id: message.id,
+                message,
+                sourceIndexes,
+            });
+            i = j - 1;
+            continue;
+        }
+        const mergedParts = [];
+        const mergedToolInvocations = [];
+        cluster.forEach((entry) => {
+            if (entry.parts?.length) {
+                mergedParts.push(...entry.parts);
+            }
+            if (entry.toolInvocations?.length) {
+                mergedToolInvocations.push(...entry.toolInvocations);
+            }
+        });
+        rows.push({
+            id: `tool-cluster-${cluster[0].id}`,
+            message: {
+                id: `tool-cluster-${cluster[0].id}`,
+                role: "assistant",
+                content: "",
+                parts: mergedParts,
+                toolInvocations: mergedToolInvocations,
+                createdAt: cluster[cluster.length - 1]?.createdAt ?? cluster[0]?.createdAt,
+            },
+            sourceIndexes,
+        });
+        i = j - 1;
+    }
+    return rows;
+}
+export function getActiveToolBanner(messages) {
+    for (let i = messages.length - 1; i >= 0; i -= 1) {
+        const message = messages[i];
+        if (message.role !== "assistant")
+            continue;
+        const activeInvocations = dedupToolInvocations(message).filter((invocation) => invocation.state !== "result");
+        if (activeInvocations.length === 0)
+            continue;
+        const currentInvocation = activeInvocations[activeInvocations.length - 1];
+        return {
+            summary: formatActiveToolSummary(currentInvocation.toolName, currentInvocation.args),
+            activeCount: activeInvocations.length,
+        };
+    }
+    return null;
+}
+function extractShowWidgetPayloadFromRecord(value) {
+    const record = asRecord(value);
+    const widgetCode = asString(record.widget_code);
+    if (!widgetCode) {
+        return null;
+    }
+    const loadingMessages = asArray(record.loading_messages)
+        .map((entry) => (typeof entry === "string" ? entry.trim() : ""))
+        .filter((entry) => entry.length > 0)
+        .slice(0, 4);
+    return {
+        title: asString(record.title),
+        widgetCode,
+        loadingMessages,
+    };
+}
+function extractShowWidgetPayload(args, result) {
+    const fromArgs = extractShowWidgetPayloadFromRecord(args);
+    if (fromArgs)
+        return fromArgs;
+    const resultObject = asRecord(result);
+    const outputObject = asRecord(resultObject.output);
+    const dataObject = asRecord(resultObject.data);
+    return extractShowWidgetPayloadFromRecord(outputObject)
+        || extractShowWidgetPayloadFromRecord(dataObject)
+        || extractShowWidgetPayloadFromRecord(resultObject);
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+function buildWidgetIframeDocument(toolCallId, payload) {
+    const widgetCode = payload.widgetCode.trim();
+    const isSvg = /^<svg[\s>]/i.test(widgetCode);
+    const safeToolCallId = JSON.stringify(toolCallId);
+    const safeTitle = escapeHtml(payload.title || "Widget");
+    return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    html, body { margin: 0; padding: 0; width: 100%; background: transparent; color: #0f172a; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    .widget-svg-root { width: 100%; display: flex; justify-content: center; align-items: flex-start; overflow: visible; }
+    .widget-svg-root > svg { width: 100%; max-width: 100%; height: auto; }
+  </style>
+  <script>
+    (function () {
+      var toolCallId = ${safeToolCallId};
+      function computeHeight() {
+        var doc = document.documentElement;
+        var body = document.body;
+        return Math.max(
+          doc ? doc.scrollHeight : 0,
+          body ? body.scrollHeight : 0,
+          120
+        );
+      }
+      function reportHeight() {
+        parent.postMessage({ type: 'lemma-widget-height', height: Math.max(120, Math.ceil(computeHeight())), toolCallId: toolCallId }, '*');
+      }
+      window.sendPrompt = function (text) {
+        var message = typeof text === 'string' ? text.trim() : '';
+        if (!message) return;
+        parent.postMessage({ type: 'lemma-widget-send-prompt', text: message, toolCallId: toolCallId }, '*');
+      };
+      window.addEventListener('load', function () {
+        reportHeight();
+        setTimeout(reportHeight, 50);
+      });
+      window.addEventListener('resize', reportHeight);
+      if (typeof MutationObserver !== 'undefined' && document.documentElement) {
+        var observer = new MutationObserver(reportHeight);
+        observer.observe(document.documentElement, { subtree: true, childList: true, attributes: true, characterData: true });
+      }
+    })();
+  </script>
+</head>
+<body aria-label="${safeTitle}">
+${isSvg ? `<div class="widget-svg-root">${widgetCode}</div>` : widgetCode}
+</body>
+</html>`;
+}
+function useControllableDraft(controlledValue, onChange) {
+    const [uncontrolledValue, setUncontrolledValue] = useState("");
+    const isControlled = typeof controlledValue === "string";
+    const setValue = useCallback((nextValue) => {
+        if (!isControlled) {
+            setUncontrolledValue(nextValue);
+        }
+        onChange?.(nextValue);
+    }, [isControlled, onChange]);
+    return [isControlled ? controlledValue : uncontrolledValue, setValue];
+}
+function defaultConversationLabel({ conversation }) {
+    return conversation.title || "Untitled conversation";
+}
+function defaultMessageContent({ message }) {
+    return _jsx("div", { className: "whitespace-pre-wrap", children: message.content });
+}
+function defaultPresentedFile({ filepath }) {
+    return (_jsxs("div", { className: "rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_78%,_transparent)] bg-[linear-gradient(180deg,color-mix(in_srgb,var(--bg-surface)_96%,transparent),color-mix(in_srgb,var(--bg-canvas)_76%,transparent))] px-3 py-2.5", children: [_jsx("div", { className: "text-[14px] font-medium text-[var(--text-primary)]", children: fileNameFromPath(filepath) }), _jsx("div", { className: "mt-1 text-[12px] text-[var(--text-tertiary)]", children: filepath })] }));
+}
+function defaultPendingFile({ file, remove }) {
+    return (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full bg-[var(--bg-subtle)] px-2 py-1 text-[11px] text-[var(--text-secondary)]", children: [_jsx("span", { className: "truncate max-w-[180px]", children: file.name }), _jsx("button", { type: "button", onClick: remove, className: "inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-[var(--bg-canvas)]", title: "Remove file", children: "\u00D7" })] }));
+}
+export function PlanSummaryStrip({ plan, onHide }) {
+    const [showAll, setShowAll] = useState(false);
+    const visibleSteps = showAll ? plan.steps : plan.steps.slice(0, 5);
+    const hiddenCount = Math.max(0, plan.steps.length - visibleSteps.length);
+    return (_jsxs("div", { className: "rounded-xl border border-[color:color-mix(in_srgb,_var(--brand-primary)_24%,_var(--border-subtle))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_18%,_var(--bg-surface))] px-3 py-2.5 shadow-[var(--shadow-sm)]", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: "text-[12px] font-semibold text-[var(--text-primary)]", children: "Task plan" }), _jsxs("span", { className: "text-[11px] text-[var(--text-tertiary)]", children: [plan.completedCount, "/", plan.steps.length, " complete"] }), plan.inProgressCount > 0 ? (_jsxs("span", { className: "rounded-full bg-[color:color-mix(in_srgb,_var(--brand-primary)_16%,_transparent)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--brand-primary)]", children: [plan.inProgressCount, " active"] })) : null] }), _jsx("button", { type: "button", onClick: onHide, className: "text-[11px] font-medium text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors", children: "Hide" })] }), plan.activeStep ? (_jsxs("div", { className: "mt-1.5 truncate text-[11px] text-[var(--text-secondary)]", title: plan.activeStep, children: [plan.running ? "Running:" : "Current:", " ", plan.activeStep] })) : null, _jsxs("div", { className: "mt-2 space-y-1", children: [visibleSteps.map((step, index) => (_jsxs("div", { className: "flex items-start gap-2 text-[11px]", children: [_jsx("span", { className: cx("mt-1 inline-block h-2 w-2 shrink-0 rounded-full", step.status === "completed" && "bg-[var(--state-success)]", step.status === "in_progress" && "bg-[var(--brand-primary)]", step.status === "pending" && "bg-[var(--border-default)]") }), _jsx("span", { className: cx("leading-5", step.status === "completed" && "text-[var(--text-tertiary)] line-through", step.status === "in_progress" && "text-[var(--brand-primary)] font-medium", step.status === "pending" && "text-[var(--text-secondary)]"), children: step.step })] }, `${step.step}-${index}`))), plan.steps.length > 5 ? (_jsxs("div", { className: "flex items-center gap-2 pt-0.5", children: [_jsx("button", { type: "button", onClick: () => setShowAll((prev) => !prev), className: "text-[10px] font-medium text-[var(--brand-primary)] hover:text-[var(--text-primary)] transition-colors", children: showAll ? "Show less" : `See all ${plan.steps.length} steps` }), !showAll && hiddenCount > 0 ? (_jsxs("span", { className: "text-[10px] text-[var(--text-tertiary)]", children: ["+", hiddenCount, " more"] })) : null] })) : null] })] }));
+}
+export function ThinkingIndicator() {
+    const [show, setShow] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => setShow(true), 350);
+        return () => clearTimeout(timer);
+    }, []);
+    if (!show)
+        return null;
+    return (_jsx("div", { className: "px-1 animate-in fade-in duration-300", children: _jsxs("div", { className: "inline-flex items-center gap-2.5 text-[12px] leading-5 text-[var(--text-tertiary)]", children: [_jsx("span", { className: "inline-flex h-2 w-2 rounded-full bg-[var(--brand-accent)]" }), _jsx("span", { className: "font-semibold text-transparent bg-clip-text bg-[linear-gradient(110deg,var(--text-secondary),35%,var(--brand-accent),50%,var(--text-secondary),65%)] bg-[length:250%_100%] animate-pulse", children: "Thinking..." })] }) }));
+}
+export function EmptyState({ onSendMessage }) {
+    const suggestions = [
+        { text: "Create an agent that summarizes documents", icon: "🤖" },
+        { text: "Add a table for tracking leads", icon: "📊" },
+        { text: "Create a full React desk page for an executive dashboard", icon: "🧩" },
+        { text: "Create a flow to process emails", icon: "⚡" },
+    ];
+    return (_jsxs("div", { className: "text-center py-5 px-2", children: [_jsxs("div", { className: "flex flex-col items-center justify-center mb-6", children: [_jsx("div", { className: "mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] shadow-[var(--shadow-xs)]", children: _jsx("span", { className: "text-[var(--text-on-brand)] text-lg", children: "\u2728" }) }), _jsx("h4", { className: "font-semibold text-[var(--text-primary)] text-[15px]", children: "What can I help you build?" }), _jsx("p", { className: "text-[13px] text-[var(--text-tertiary)] mt-1.5 max-w-sm leading-relaxed", children: "I can create agents, set up data stores, build pages, and automate workflows for your pod." })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2.5 max-w-[500px] mx-auto", children: suggestions.map((suggestion, index) => (_jsxs("button", { onClick: () => onSendMessage(suggestion.text), className: "text-left px-3 py-2.5 rounded-lg border border-[var(--border-default)] bg-[var(--bg-surface)] text-xs text-[var(--text-secondary)] hover:border-[color:color-mix(in_srgb,_var(--brand-accent)_52%,_var(--border-subtle))] hover:bg-[color:color-mix(in_srgb,_var(--brand-glow)_72%,_var(--bg-surface))] hover:text-[var(--text-primary)] transition-all duration-200 flex items-center gap-2.5 group", children: [_jsx("span", { className: "text-base opacity-70 group-hover:opacity-100 transition-opacity", children: suggestion.icon }), _jsx("span", { className: "flex-1 leading-snug", children: suggestion.text }), _jsx("span", { className: "text-[var(--text-tertiary)] group-hover:text-[var(--state-warning)] group-hover:translate-x-0.5 transition-all opacity-0 group-hover:opacity-100", children: "\u203A" })] }, `${suggestion.text}-${index}`))) })] }));
+}
+function ReasoningPartCard({ text, isStreaming, durationMs, }) {
+    return (_jsxs("details", { className: "group", open: isStreaming, children: [_jsxs("summary", { className: "list-none cursor-pointer inline-flex items-center gap-1.5 text-[12px] leading-5 text-[var(--text-tertiary)]", children: [_jsx("span", { className: "transition-transform group-open:rotate-90", children: "\u203A" }), _jsx("span", { className: cx("font-semibold", isStreaming && "text-transparent bg-clip-text bg-[linear-gradient(110deg,var(--text-secondary),35%,var(--brand-accent),50%,var(--text-secondary),65%)] bg-[length:250%_100%] animate-pulse"), children: isStreaming ? "Thinking" : `Thought${durationMs ? ` · ${Math.max(1, Math.round(durationMs / 1000))}s` : ""}` })] }), _jsx("div", { className: "mt-1 pl-4 border-l border-[var(--border-default)]", children: _jsx("pre", { className: "text-[11px] leading-5 text-[var(--text-tertiary)] whitespace-pre-wrap font-mono", children: text }) })] }));
+}
+function PresentFilesCard({ filepaths, conversationId, renderPresentedFile, }) {
+    const fakeMessage = {
+        id: "present-files",
+        role: "assistant",
+        content: "",
+    };
+    const fakeInvocation = {
+        toolCallId: "present-files",
+        toolName: "present_files",
+        args: { filepaths },
+        state: "result",
+    };
+    return (_jsx("div", { className: "pt-1 space-y-2", children: filepaths.map((filepath) => (_jsx("div", { children: (renderPresentedFile || defaultPresentedFile)({
+                filepath,
+                activeConversationId: conversationId ?? null,
+                invocation: fakeInvocation,
+                message: fakeMessage,
+            }) }, `present-file-${filepath}`))) }));
+}
+function ToolDetailsPanel({ toolName, args, state, result, onNavigateResource, renderToolInvocation, message, activeConversationId, }) {
+    const resultData = result || {};
+    const canNavigate = state === "result"
+        && resultData.success !== false
+        && typeof resultData.resourceType === "string"
+        && typeof resultData.resourceId === "string";
+    if (renderToolInvocation) {
+        return (_jsx("div", { className: "pl-4 border-l border-[var(--border-default)]", children: renderToolInvocation({
+                invocation: {
+                    toolCallId: "detail-tool",
+                    toolName,
+                    args,
+                    state: state === "result" ? "result" : "call",
+                    ...(result ? { result } : {}),
+                },
+                message,
+                activeConversationId,
+            }) }));
+    }
+    return (_jsxs("div", { className: "pl-4 border-l border-[var(--border-default)] space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: formatToolDisplayName(toolName) }), canNavigate && onNavigateResource ? (_jsx("button", { type: "button", onClick: () => onNavigateResource(resultData.resourceType, resultData.resourceId, resultData), className: "inline-flex items-center gap-1 text-[10px] font-medium text-[var(--state-success)] hover:text-[var(--state-success)] transition-colors", children: "Open \u203A" })) : null] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)] mb-1", children: "Input" }), _jsx("div", { className: "p-2 rounded bg-[color:color-mix(in_srgb,_var(--bg-canvas)_70%,_transparent)] font-mono text-[11px] max-h-24 overflow-auto", children: _jsx("pre", { className: "text-[var(--text-secondary)] whitespace-pre-wrap", children: JSON.stringify(args, null, 2) }) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)] mb-1", children: "Output" }), _jsx("div", { className: "p-2 rounded bg-[color:color-mix(in_srgb,_var(--bg-canvas)_70%,_transparent)] font-mono text-[11px] max-h-24 overflow-auto", children: _jsx("pre", { className: "text-[var(--text-secondary)] whitespace-pre-wrap", children: Object.keys(resultData).length > 0 ? JSON.stringify(resultData, null, 2) : "No output yet" }) })] })] })] }));
+}
+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 summary = isExecuting
+        ? formatActiveToolSummary(invocation.toolName, invocation.args)
+        : isFailed
+            ? (typeof resultData.error === "string" ? resultData.error : "Tool failed")
+            : (formatToolResultSummary(invocation.toolName, invocation.args, resultData) || "Completed");
+    return (_jsxs("button", { type: "button", onClick: onClick, className: cx("w-full text-left inline-flex items-center gap-1.5 text-[12px] leading-5 transition-colors hover:text-[var(--text-primary)]", isExecuting && "text-[var(--state-info)]", isComplete && "text-[var(--state-success)]", isFailed && "text-[var(--state-error)]", !isExecuting && !isComplete && !isFailed && "text-[var(--text-secondary)]"), children: [_jsx("span", { className: "font-medium whitespace-nowrap", children: formatToolDisplayName(invocation.toolName) }), _jsx("span", { className: "text-current/80 truncate", children: summary }), _jsx("span", { className: "ml-auto transition-transform", children: isSelected ? "⌄" : "›" })] }));
+}
+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 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 summary = activeInvocation
+        ? formatActiveToolSummary(activeInvocation.toolName, activeInvocation.args)
+        : `Worked across ${toolParts.length} tool${toolParts.length === 1 ? "" : "s"}${failedCount > 0 ? ` · ${failedCount} failed` : ""}`;
+    return (_jsxs("div", { className: "space-y-1", children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded((prev) => !prev), className: "inline-flex items-center gap-1.5 text-[12px] leading-5 text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] transition-colors", children: [_jsx("span", { className: cx("transition-transform", isExpanded && "rotate-90"), children: "\u203A" }), isWorking ? _jsx("span", { className: "inline-flex h-2 w-2 rounded-full bg-[var(--brand-accent)]" }) : null, _jsx("span", { className: cx("text-[var(--text-secondary)]", isWorking && "font-medium"), children: summary })] }), isExpanded ? (_jsx("div", { className: "pl-4 border-l border-[var(--border-default)] space-y-1.5", children: detailParts.map((part) => {
+                    if (part.type === "reasoning") {
+                        return (_jsxs("div", { className: "rounded-md bg-[var(--bg-canvas)] px-2.5 py-2", children: [_jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)]", children: part.state === "streaming" ? "Thinking" : "Thought" }), _jsx("pre", { className: "text-[11px] leading-5 text-[var(--text-secondary)] whitespace-pre-wrap font-mono max-h-40 overflow-auto", children: part.text })] }, `thinking-${part.id}`));
+                    }
+                    const invocation = part.toolInvocation;
+                    const isSelected = activeToolCallId === invocation.toolCallId;
+                    return (_jsxs("div", { className: "space-y-1", children: [_jsx(InlineToolCall, { invocation: invocation, isSelected: isSelected, onClick: () => setActiveToolCallId((prev) => (prev === invocation.toolCallId ? null : invocation.toolCallId)) }), isSelected ? (_jsx(ToolDetailsPanel, { toolName: invocation.toolName, args: invocation.args, state: invocation.state, result: invocation.result, onNavigateResource: onNavigateResource, renderToolInvocation: renderToolInvocation, message: message, activeConversationId: activeConversationId })) : null] }, part.id));
+                }) })) : null] }));
+}
+function ShowWidgetToolCard({ invocation, onSendPrompt, }) {
+    const resultData = (invocation.result || {});
+    const payload = extractShowWidgetPayload(invocation.args, resultData);
+    const displayName = payload?.title || formatToolDisplayName(invocation.toolName);
+    const hasResultData = Object.keys(resultData).length > 0;
+    const isExecuting = invocation.state !== "result" && !hasResultData;
+    const isFailed = resultData.success === false || (!isExecuting && typeof resultData.error === "string" && resultData.error.length > 0);
+    const iframeRef = useRef(null);
+    const [height, setHeight] = useState(220);
+    const iframeDocument = useMemo(() => (payload ? buildWidgetIframeDocument(invocation.toolCallId, payload) : ""), [invocation.toolCallId, payload]);
+    useEffect(() => {
+        const handleMessage = (event) => {
+            if (!iframeRef.current || event.source !== iframeRef.current.contentWindow)
+                return;
+            const data = asRecord(event.data);
+            const messageType = asString(data.type);
+            if (!messageType)
+                return;
+            if (messageType === "lemma-widget-send-prompt") {
+                const text = asString(data.text);
+                if (!text)
+                    return;
+                void onSendPrompt(text);
+                return;
+            }
+            if (messageType === "lemma-widget-height") {
+                const rawHeight = typeof data.height === "number" ? data.height : Number(data.height);
+                if (!Number.isFinite(rawHeight))
+                    return;
+                setHeight(Math.max(120, Math.min(2400, Math.round(rawHeight))));
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, [onSendPrompt]);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-[11px] font-semibold text-[var(--state-info)]", children: displayName }), _jsx("span", { className: cx("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium", isExecuting && "bg-[color:color-mix(in_srgb,_var(--state-info)_16%,_transparent)] text-[var(--state-info)]", isFailed && "bg-[color:color-mix(in_srgb,_var(--state-error)_12%,_transparent)] text-[var(--state-error)]", !isExecuting && !isFailed && "bg-[color:color-mix(in_srgb,_var(--state-success)_12%,_transparent)] text-[var(--state-success)]"), children: isExecuting ? "Rendering" : isFailed ? "Failed" : "Ready" })] }), isFailed ? (_jsx("p", { className: "text-[11px] text-[var(--state-error)]", children: typeof resultData.error === "string" && resultData.error.length > 0
+                    ? resultData.error
+                    : "Failed to render widget." })) : null, !isFailed && payload ? (_jsx("iframe", { ref: iframeRef, title: displayName, srcDoc: iframeDocument, sandbox: "allow-scripts allow-forms allow-popups allow-downloads", height: height, className: "w-full border-0 bg-transparent rounded-xl" })) : null, !isFailed && !payload ? (_jsx("p", { className: "text-[11px] text-[var(--text-secondary)]", children: "Widget output is missing `widget_code`." })) : null] }));
+}
+export function MessageGroup({ message, conversationId, onNavigateResource, onWidgetSendPrompt, isStreaming, showAssistantHeader, renderMessageContent, renderPresentedFile, renderToolInvocation, }) {
+    const orderedParts = message.parts && message.parts.length > 0
+        ? message.parts
+        : [
+            ...(message.content?.trim()
+                ? [{ id: `${message.id}-fallback-text`, type: "text", text: message.content }]
+                : []),
+            ...((message.toolInvocations || []).map((tool, index) => ({
+                id: `${tool.toolCallId || message.id}-fallback-tool-${index}`,
+                type: "tool",
+                toolInvocation: tool,
+            }))),
+        ];
+    const toolParts = orderedParts.filter((part) => part.type === "tool");
+    const groupedToolParts = toolParts.filter((part) => !isShowWidgetToolName(part.toolInvocation.toolName));
+    const reasoningParts = orderedParts.filter((part) => part.type === "reasoning");
+    const presentableFilepaths = Array.from(new Set(groupedToolParts.flatMap((part) => extractPresentFilePathsFromInvocation(part.toolInvocation))));
+    const rollupOrderedParts = orderedParts.filter((part) => (part.type === "reasoning" || (part.type === "tool" && !isShowWidgetToolName(part.toolInvocation.toolName))));
+    const blocks = [];
+    orderedParts.forEach((part) => {
+        if (part.type === "tool") {
+            if (isShowWidgetToolName(part.toolInvocation.toolName)) {
+                blocks.push({
+                    id: `${part.id}-widget`,
+                    kind: "widget",
+                    toolPart: part,
+                });
+                return;
+            }
+            const lastBlock = blocks[blocks.length - 1];
+            if (lastBlock?.kind === "tools") {
+                lastBlock.toolParts.push(part);
+            }
+            else {
+                blocks.push({
+                    id: `${part.id}-tools`,
+                    kind: "tools",
+                    toolParts: [part],
+                });
+            }
+            return;
+        }
+        blocks.push({
+            id: part.id,
+            kind: "content",
+            part,
+        });
+    });
+    const nonToolParts = orderedParts.filter((part) => part.type !== "tool");
+    const firstToolsBlockId = blocks.find((block) => block.kind === "tools")?.id;
+    const hasTextParts = orderedParts.some((part) => part.type === "text" && part.text.trim().length > 0);
+    const foldReasoningIntoToolRollup = groupedToolParts.length > 0 && reasoningParts.length > 0 && !hasTextParts;
+    const lastTextPartId = [...nonToolParts]
+        .reverse()
+        .find((part) => part.type === "text" && part.text.trim().length > 0)
+        ?.id;
+    if (message.role === "user") {
+        return (_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "max-w-[72ch] rounded-xl bg-[var(--brand-primary)] text-[var(--text-on-brand)] px-3.5 py-2.5", children: renderMessageContent({
+                    message: {
+                        ...message,
+                        content: message.content,
+                        parts: undefined,
+                        toolInvocations: undefined,
+                    },
+                }) }) }));
+    }
+    return (_jsxs("div", { className: "px-1 py-0.5 space-y-1.5 max-w-[78ch]", children: [showAssistantHeader ? (_jsxs("div", { className: "inline-flex items-center gap-1.5 text-[11px] text-[var(--text-tertiary)]", children: [_jsx("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-[color:color-mix(in_srgb,_var(--brand-primary)_40%,_transparent)]" }), "Lemma"] })) : null, _jsxs("div", { className: "space-y-2", children: [blocks.map((block) => {
+                        if (block.kind === "tools") {
+                            if (foldReasoningIntoToolRollup && block.id !== firstToolsBlockId) {
+                                return null;
+                            }
+                            return (_jsx(ToolActivityRollup, { detailParts: foldReasoningIntoToolRollup && block.id === firstToolsBlockId
+                                    ? rollupOrderedParts
+                                    : block.toolParts, onNavigateResource: onNavigateResource, renderToolInvocation: renderToolInvocation, message: message, activeConversationId: conversationId ?? null }, block.id));
+                        }
+                        if (block.kind === "widget") {
+                            return (_jsx(ShowWidgetToolCard, { invocation: block.toolPart.toolInvocation, onSendPrompt: onWidgetSendPrompt }, block.id));
+                        }
+                        const part = block.part;
+                        if (part.type === "text") {
+                            const trimmedText = part.text.trim();
+                            if (trimmedText.length === 0) {
+                                return null;
+                            }
+                            return (_jsx("div", { className: "text-[13px] text-[var(--text-secondary)] leading-6", children: renderMessageContent({
+                                    message: {
+                                        ...message,
+                                        content: trimmedText + (isStreaming && part.id === lastTextPartId ? " ▍" : ""),
+                                        parts: undefined,
+                                        toolInvocations: undefined,
+                                    },
+                                }) }, part.id));
+                        }
+                        if (part.type === "reasoning") {
+                            if (foldReasoningIntoToolRollup) {
+                                return null;
+                            }
+                            return (_jsx(ReasoningPartCard, { text: part.text, isStreaming: part.state === "streaming", durationMs: part.durationMs }, part.id));
+                        }
+                        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, draft: controlledDraft, onDraftChange, showConversationList = false, 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 messagesContainerRef = useRef(null);
+    const inputRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const isPinnedToBottomRef = useRef(true);
+    const loadingOlderFromScrollRef = useRef(false);
+    const isConversationBusy = controller.isLoading || controller.isActiveConversationRunning;
+    const availableModels = useMemo(() => Object.values(AvailableModels), []);
+    const resizeComposer = useCallback(() => {
+        const textarea = inputRef.current;
+        if (!textarea)
+            return;
+        const minHeight = 48;
+        const maxHeight = 220;
+        textarea.style.height = "0px";
+        const nextHeight = Math.min(maxHeight, Math.max(minHeight, textarea.scrollHeight));
+        textarea.style.height = `${nextHeight}px`;
+        textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+    }, []);
+    const scrollToLatest = useCallback((behavior = "auto") => {
+        const el = messagesContainerRef.current;
+        if (!el)
+            return;
+        el.scrollTo({
+            top: el.scrollHeight,
+            behavior,
+        });
+        isPinnedToBottomRef.current = true;
+    }, []);
+    const updatePinnedState = useCallback(() => {
+        const el = messagesContainerRef.current;
+        if (!el)
+            return;
+        const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+        isPinnedToBottomRef.current = distanceFromBottom <= 112;
+        if (el.scrollTop > 48)
+            return;
+        if (!controller.hasOlderMessages || controller.isLoadingMessages || controller.isLoadingOlderMessages || loadingOlderFromScrollRef.current)
+            return;
+        const previousScrollTop = el.scrollTop;
+        const previousScrollHeight = el.scrollHeight;
+        loadingOlderFromScrollRef.current = true;
+        void controller.loadOlderMessages()
+            .then((didLoad) => {
+            if (!didLoad)
+                return;
+            requestAnimationFrame(() => {
+                const nextEl = messagesContainerRef.current;
+                if (!nextEl)
+                    return;
+                nextEl.scrollTop = previousScrollTop + (nextEl.scrollHeight - previousScrollHeight);
+            });
+        })
+            .finally(() => {
+            loadingOlderFromScrollRef.current = false;
+        });
+    }, [
+        controller,
+    ]);
+    useEffect(() => {
+        const el = messagesContainerRef.current;
+        if (!el)
+            return;
+        if (isPinnedToBottomRef.current) {
+            requestAnimationFrame(() => {
+                scrollToLatest(isConversationBusy ? "auto" : "smooth");
+            });
+        }
+    }, [controller.messages, isConversationBusy, scrollToLatest]);
+    useEffect(() => {
+        resizeComposer();
+    }, [draft, resizeComposer]);
+    const displayMessageRows = useMemo(() => buildDisplayMessageRows(controller.messages), [controller.messages]);
+    const activeToolBanner = useMemo(() => getActiveToolBanner(controller.messages), [controller.messages]);
+    const planSummary = useMemo(() => latestPlanSummary(controller.messages), [controller.messages]);
+    const pendingAskUserInput = useMemo(() => {
+        const pending = findPendingAskUserInput(controller.messages);
+        if (!pending)
+            return null;
+        if (dismissedAskToolCallIds.includes(pending.toolCallId))
+            return null;
+        return pending;
+    }, [controller.messages, dismissedAskToolCallIds]);
+    const effectiveAskOverlayState = useMemo(() => {
+        if (!pendingAskUserInput)
+            return null;
+        if (askOverlayState && askOverlayState.toolCallId === pendingAskUserInput.toolCallId) {
+            return askOverlayState;
+        }
+        return {
+            toolCallId: pendingAskUserInput.toolCallId,
+            currentQuestionIndex: 0,
+            answers: pendingAskUserInput.questions.map(() => []),
+        };
+    }, [askOverlayState, pendingAskUserInput]);
+    const lastMessageHasContent = useMemo(() => {
+        if (controller.messages.length === 0)
+            return false;
+        const lastMsg = controller.messages[controller.messages.length - 1];
+        if (lastMsg.role !== "assistant")
+            return false;
+        const hasText = (lastMsg.parts || []).some((part) => part.type === "text" && part.text.trim().length > 0);
+        const hasTools = (lastMsg.toolInvocations?.length || 0) > 0 || (lastMsg.parts || []).some((part) => part.type === "tool");
+        return hasText || hasTools;
+    }, [controller.messages]);
+    const dismissAskOverlay = useCallback((toolCallId) => {
+        setDismissedAskToolCallIds((prev) => (prev.includes(toolCallId) ? prev : [...prev, toolCallId]));
+        setAskOverlayState(null);
+    }, []);
+    const commitAskAnswersToComposer = useCallback((toolCallId, answers) => {
+        if (!pendingAskUserInput || pendingAskUserInput.toolCallId !== toolCallId)
+            return;
+        const formatted = formatAskUserInputAnswers(pendingAskUserInput.questions, answers);
+        if (formatted.length > 0) {
+            const nextDraft = draft.trim().length > 0 ? `${draft.trim()}\n\n${formatted}` : formatted;
+            setDraft(nextDraft);
+        }
+        dismissAskOverlay(toolCallId);
+        requestAnimationFrame(() => {
+            inputRef.current?.focus();
+        });
+    }, [dismissAskOverlay, draft, pendingAskUserInput, setDraft]);
+    const updateAskAnswer = useCallback((option) => {
+        if (!pendingAskUserInput || !effectiveAskOverlayState)
+            return;
+        if (effectiveAskOverlayState.toolCallId !== pendingAskUserInput.toolCallId)
+            return;
+        const questionIndex = effectiveAskOverlayState.currentQuestionIndex;
+        const question = pendingAskUserInput.questions[questionIndex];
+        if (!question)
+            return;
+        const nextAnswers = effectiveAskOverlayState.answers.map((answers) => [...answers]);
+        const currentAnswers = nextAnswers[questionIndex] || [];
+        if (question.type === "single_select") {
+            nextAnswers[questionIndex] = [option];
+            if (questionIndex >= pendingAskUserInput.questions.length - 1) {
+                commitAskAnswersToComposer(effectiveAskOverlayState.toolCallId, nextAnswers);
+                return;
+            }
+            setAskOverlayState({
+                ...effectiveAskOverlayState,
+                answers: nextAnswers,
+                currentQuestionIndex: questionIndex + 1,
+            });
+            return;
+        }
+        nextAnswers[questionIndex] = currentAnswers.includes(option)
+            ? currentAnswers.filter((entry) => entry !== option)
+            : [...currentAnswers, option];
+        setAskOverlayState({
+            ...effectiveAskOverlayState,
+            answers: nextAnswers,
+        });
+    }, [commitAskAnswersToComposer, effectiveAskOverlayState, pendingAskUserInput]);
+    const continueAskQuestions = useCallback(() => {
+        if (!pendingAskUserInput || !effectiveAskOverlayState)
+            return;
+        if (effectiveAskOverlayState.toolCallId !== pendingAskUserInput.toolCallId)
+            return;
+        const questionIndex = effectiveAskOverlayState.currentQuestionIndex;
+        const answers = effectiveAskOverlayState.answers[questionIndex] || [];
+        if (answers.length === 0)
+            return;
+        if (questionIndex >= pendingAskUserInput.questions.length - 1) {
+            commitAskAnswersToComposer(effectiveAskOverlayState.toolCallId, effectiveAskOverlayState.answers);
+            return;
+        }
+        setAskOverlayState({
+            ...effectiveAskOverlayState,
+            currentQuestionIndex: questionIndex + 1,
+        });
+    }, [commitAskAnswersToComposer, effectiveAskOverlayState, pendingAskUserInput]);
+    const handleSubmit = useCallback(async () => {
+        if (!draft.trim() || isConversationBusy)
+            return;
+        const message = draft.trim();
+        setDraft("");
+        scrollToLatest("smooth");
+        await controller.sendMessage(message);
+    }, [controller, draft, isConversationBusy, scrollToLatest, setDraft]);
+    const handleWidgetSendPrompt = useCallback(async (prompt) => {
+        const message = prompt.trim();
+        if (!message)
+            return;
+        if (isConversationBusy) {
+            setDraft(message);
+            requestAnimationFrame(() => {
+                inputRef.current?.focus();
+            });
+            return;
+        }
+        scrollToLatest("smooth");
+        await controller.sendMessage(message);
+    }, [controller, isConversationBusy, scrollToLatest, setDraft]);
+    const handleUploadSelection = useCallback(async (files) => {
+        const selectedFiles = files ? Array.from(files) : [];
+        if (selectedFiles.length === 0)
+            return;
+        try {
+            await controller.uploadFiles(selectedFiles);
+        }
+        finally {
+            if (fileInputRef.current) {
+                fileInputRef.current.value = "";
+            }
+        }
+    }, [controller]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            void handleSubmit();
+        }
+    }, [handleSubmit]);
+    const handleModelChange = useCallback(async (nextModel) => {
+        if (isUpdatingModel)
+            return;
+        setIsUpdatingModel(true);
+        try {
+            await controller.setConversationModel(nextModel);
+        }
+        finally {
+            setIsUpdatingModel(false);
+        }
+    }, [controller, isUpdatingModel]);
+    const activeAskQuestion = pendingAskUserInput
+        && effectiveAskOverlayState
+        && effectiveAskOverlayState.toolCallId === pendingAskUserInput.toolCallId
+        ? pendingAskUserInput.questions[effectiveAskOverlayState.currentQuestionIndex]
+        : null;
+    const activeAskAnswers = activeAskQuestion && effectiveAskOverlayState
+        ? effectiveAskOverlayState.answers[effectiveAskOverlayState.currentQuestionIndex] || []
+        : [];
+    const canContinueAsk = activeAskAnswers.length > 0;
+    return (_jsxs("div", { className: cx("flex h-full min-h-0 flex-col gap-3 font-sans antialiased", showConversationList && "lg:grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-3"), children: [showConversationList ? (_jsxs("aside", { className: "hidden min-h-0 overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)] lg:flex lg:flex-col", children: [_jsx("div", { className: "border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[13px] font-semibold text-[var(--text-primary)]", children: "Conversations" }), _jsxs("div", { className: "mt-1 text-[11px] text-[var(--text-tertiary)]", children: [controller.conversations.length, " total"] })] }), _jsx("button", { type: "button", onClick: controller.clearMessages, className: "rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]", children: "New" })] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-3 space-y-2", children: controller.conversations.map((conversation) => {
+                            const isActive = conversation.id === controller.activeConversationId;
+                            return (_jsxs("button", { type: "button", onClick: () => controller.selectConversation(conversation.id), className: cx("w-full rounded-xl border px-3 py-2.5 text-left transition-colors", isActive
+                                    ? "border-[color:color-mix(in_srgb,_var(--brand-primary)_44%,_var(--border-default))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_42%,_var(--bg-surface))]"
+                                    : "border-[var(--border-default)] bg-[var(--bg-surface)] hover:bg-[var(--bg-subtle)]"), children: [_jsx("div", { className: "text-[12px] font-medium text-[var(--text-primary)]", children: renderConversationLabel({ conversation, isActive }) }), _jsx("div", { className: "mt-1 text-[10px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]", children: (conversation.status || "waiting").toLowerCase() })] }, conversation.id));
+                        }) })] })) : null, _jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3", children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)]", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("div", { className: "h-7 w-7 rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] flex items-center justify-center shadow-[var(--shadow-xs)]", children: _jsx("span", { className: "text-[var(--text-on-brand)] text-xs", children: "\u2728" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-[var(--text-primary)] text-[13px] leading-tight", children: title }), _jsx("p", { className: "text-[11px] text-[var(--text-tertiary)]", children: subtitle })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("select", { value: controller.conversationModel || "", onChange: (event) => { void handleModelChange(event.target.value || null); }, disabled: isConversationBusy || isUpdatingModel, className: "h-8 rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] px-3 text-[11px] text-[var(--text-secondary)]", children: [_jsx("option", { value: "", children: "Auto" }), availableModels.map((availableModel) => (_jsx("option", { value: availableModel, children: availableModel }, availableModel)))] }), _jsx("button", { type: "button", onClick: controller.clearMessages, title: "New conversation", className: "inline-flex h-8 w-8 items-center justify-center rounded-full text-[var(--text-tertiary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-secondary)]", children: "\u21BA" })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-3 min-h-[180px] bg-[var(--bg-surface)]", ref: messagesContainerRef, onScroll: updatePinnedState, children: [controller.messages.length === 0 && !isConversationBusy ? (emptyState || _jsx(EmptyState, { onSendMessage: (message) => { void controller.sendMessage(message); } })) : null, (controller.isLoadingMessages && controller.messages.length === 0) ? (_jsx("div", { className: "flex justify-center py-6", children: _jsx("span", { className: "text-[var(--text-tertiary)] text-sm", children: "Loading\u2026" }) })) : null, (controller.isLoadingOlderMessages && controller.messages.length > 0) ? (_jsx("div", { className: "flex justify-center py-1", children: _jsx("span", { className: "text-[var(--text-tertiary)] text-xs", 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));
+                                    }), isConversationBusy && controller.messages.length > 0 && !activeToolBanner && !lastMessageHasContent ? (_jsx(ThinkingIndicator, {})) : null, controller.error ? (_jsx("div", { className: "bg-[color:color-mix(in_srgb,_var(--state-error)_12%,_transparent)] border border-[color:color-mix(in_srgb,_var(--state-error)_48%,_var(--border-subtle))] rounded-lg p-3 text-xs text-[var(--state-error)] flex items-start gap-2.5", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Something went wrong" }), _jsx("p", { className: "text-[var(--state-error)] mt-1", children: controller.error })] }) })) : null, (controller.messages.length > 0 || isConversationBusy || !!controller.error) ? (_jsx("div", { "aria-hidden": "true", className: "h-14 shrink-0" })) : null] })] }), _jsxs("div", { className: "relative rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] p-2 shadow-[var(--shadow-md)]", children: [planSummary ? (_jsx("div", { className: "absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: isPlanHidden ? (_jsxs("button", { type: "button", onClick: () => setIsPlanHidden(false), className: "inline-flex items-center gap-2 rounded-lg border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-subtle)] transition-colors", children: ["Show plan (", planSummary.completedCount, "/", planSummary.steps.length, ")"] })) : (_jsx(PlanSummaryStrip, { plan: planSummary, onHide: () => setIsPlanHidden(true) })) })) : null, isConversationBusy && activeToolBanner ? (_jsx("div", { className: "px-2 pb-1", children: _jsx("div", { className: "inline-flex max-w-full items-center gap-1.5 text-[11px] text-[var(--text-tertiary)] animate-in fade-in duration-200", children: _jsx("span", { className: "truncate", children: activeToolBanner.summary }) }) })) : null, activeAskQuestion && effectiveAskOverlayState && pendingAskUserInput ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "text-[11px] uppercase tracking-[0.12em] text-[var(--text-tertiary)]", children: ["Question ", effectiveAskOverlayState.currentQuestionIndex + 1, " of ", pendingAskUserInput.questions.length] }), _jsx("p", { className: "mt-1 text-[14px] font-medium text-[var(--text-primary)] leading-6", children: activeAskQuestion.question })] }), _jsx("button", { type: "button", onClick: () => dismissAskOverlay(effectiveAskOverlayState.toolCallId), className: "rounded-md px-2 py-1 text-[12px] text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-subtle)] transition-colors", children: "Skip" })] }), _jsx("div", { className: "max-h-[260px] overflow-y-auto space-y-1.5 pr-1", children: activeAskQuestion.options.map((option, optionIndex) => {
+                                            const isSelected = activeAskAnswers.includes(option);
+                                            const rankLabel = activeAskQuestion.type === "rank_priorities" && isSelected
+                                                ? activeAskAnswers.indexOf(option) + 1
+                                                : null;
+                                            return (_jsx("button", { type: "button", onClick: () => updateAskAnswer(option), className: cx("w-full rounded-lg border px-2.5 py-2 text-left text-[13px] transition-colors", isSelected
+                                                    ? "border-[color:color-mix(in_srgb,_var(--brand-primary)_64%,_var(--border-subtle))] bg-[color:color-mix(in_srgb,_var(--brand-primary)_14%,_transparent)] text-[var(--text-primary)]"
+                                                    : "border-[var(--border-default)] bg-[var(--bg-canvas)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-subtle)]"), children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [rankLabel ? (_jsx("span", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--brand-primary)] px-1 text-[10px] font-semibold text-[var(--text-on-brand)]", children: rankLabel })) : (_jsx("span", { className: cx("inline-block h-2.5 w-2.5 rounded-full border", isSelected
+                                                                ? "border-[var(--brand-primary)] bg-[var(--brand-primary)]"
+                                                                : "border-[var(--border-default)] bg-transparent") })), option] }) }, `${option}-${optionIndex}`));
+                                        }) }), (activeAskQuestion.type !== "single_select" || pendingAskUserInput.questions.length > 1) ? (_jsx("div", { className: "flex justify-end", children: _jsx("button", { type: "button", onClick: continueAskQuestions, disabled: !canContinueAsk, className: cx("rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors", canContinueAsk
+                                                ? "bg-[var(--brand-primary)] text-[var(--text-on-brand)] hover:bg-[color:color-mix(in_srgb,_var(--brand-primary)_88%,_var(--text-primary))]"
+                                                : "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"), children: effectiveAskOverlayState.currentQuestionIndex >= pendingAskUserInput.questions.length - 1 ? "Use answers" : "Continue" }) })) : null] })) : (_jsxs("div", { className: "space-y-1.5", children: [controller.pendingFiles.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-1", children: controller.pendingFiles.map((file) => {
+                                            const fileKey = `${file.name}:${file.size}:${file.lastModified}`;
+                                            return (_jsx("div", { children: renderPendingFile({
+                                                    file,
+                                                    remove: () => controller.removePendingFile(fileKey),
+                                                }) }, fileKey));
+                                        }) })) : null, _jsxs("div", { className: "relative flex items-end gap-2", children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: (event) => { void handleUploadSelection(event.target.files); } }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isConversationBusy || controller.isUploadingFiles, className: cx("mb-1.5 ml-1 h-9 w-9 rounded-full flex items-center justify-center transition-colors", isConversationBusy || controller.isUploadingFiles
+                                                    ? "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"
+                                                    : "bg-[var(--bg-subtle)] text-[var(--text-secondary)] hover:bg-[var(--bg-canvas)] hover:text-[var(--text-primary)]"), title: "Upload files", children: controller.isUploadingFiles ? "…" : "＋" }), _jsx("textarea", { ref: inputRef, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, className: "flex-1 resize-none border-0 bg-transparent px-3 py-2.5 text-[14px] text-[var(--text-primary)] leading-6 focus:ring-0 focus:outline-none placeholder:text-[var(--text-tertiary)] min-h-[48px] max-h-[220px]", rows: 1, disabled: isConversationBusy }), _jsx("div", { className: "pb-1.5 pr-1.5", children: _jsx("button", { onClick: isConversationBusy ? controller.stop : () => { void handleSubmit(); }, disabled: !isConversationBusy && !draft.trim(), className: cx("h-9 w-9 rounded-full flex items-center justify-center transition-all duration-200", isConversationBusy
+                                                        ? "bg-[var(--text-primary)] text-[var(--text-inverse)] hover:bg-[color:color-mix(in_srgb,_var(--text-primary)_80%,_transparent)] hover:scale-105"
+                                                        : draft.trim()
+                                                            ? "bg-[var(--brand-primary)] text-[var(--text-on-brand)] shadow-[var(--shadow-xs)] hover:bg-[color:color-mix(in_srgb,_var(--brand-primary)_88%,_var(--text-primary))]"
+                                                            : "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"), title: isConversationBusy ? "Stop generating" : "Send message", children: isConversationBusy ? "■" : "→" }) })] })] }))] })] })] }));
+}