@solidxai/core-ui 0.1.5-beta.9 → 0.1.7-beta.0

package/dist/components/core/solid-ai/SolidAiChat.js

@@ -0,0 +1,1043 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { loadSession } from "../../../adapters/auth/storage";
+import styles from "./SolidAiChat.module.css";
+// ── Constants ─────────────────────────────────────────────────────────────────
+var WS_URL = "ws://localhost:8765/ws/agent";
+var API_BASE = "http://localhost:8765";
+var RECONNECT_DELAY = 3000;
+var PAGE_SIZE = 50;
+// ── Session persistence ───────────────────────────────────────────────────────
+// Module-level vars survive sidebar collapse; localStorage survives hard reload.
+var LS_SESSION_ID = "solidx.ai.session_id";
+var LS_HISTORY_ID = "solidx.ai.history_session_id";
+function readLS(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function writeLS(key, val) {
+    try {
+        val ? localStorage.setItem(key, val) : localStorage.removeItem(key);
+    }
+    catch ( /* ignore */_a) { /* ignore */ }
+}
+var _persistedSessionId = readLS(LS_SESSION_ID);
+var _historySessionId = readLS(LS_HISTORY_ID);
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function formatSessionDate(iso) {
+    if (!iso)
+        return "Unknown date";
+    var d = new Date(iso);
+    var diffDays = Math.floor((Date.now() - d.getTime()) / 86400000);
+    if (diffDays === 0)
+        return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    if (diffDays === 1)
+        return "Yesterday";
+    if (diffDays < 7)
+        return d.toLocaleDateString([], { weekday: "short" });
+    return d.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+// ── Sub-components ────────────────────────────────────────────────────────────
+function CopyButton(_a) {
+    var _this = this;
+    var text = _a.text;
+    var _b = useState(false), copied = _b[0], setCopied = _b[1];
+    var handleCopy = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.stopPropagation();
+                    return [4 /*yield*/, navigator.clipboard.writeText(text)];
+                case 1:
+                    _a.sent();
+                    setCopied(true);
+                    setTimeout(function () { return setCopied(false); }, 2000);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsx("button", { className: styles.CopyBtn, onClick: handleCopy, title: "Copy", "aria-label": "Copy message", children: _jsx("i", { className: "pi ".concat(copied ? "pi-check" : "pi-copy"), style: { fontSize: "11px" } }) }));
+}
+function CodeBlock(_a) {
+    var _this = this;
+    var _b;
+    var children = _a.children, className = _a.className;
+    var _c = useState(false), copied = _c[0], setCopied = _c[1];
+    var code = String(children !== null && children !== void 0 ? children : "").replace(/\n$/, "");
+    var lang = (_b = className === null || className === void 0 ? void 0 : className.replace("language-", "")) !== null && _b !== void 0 ? _b : "";
+    var handleCopy = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, navigator.clipboard.writeText(code)];
+                case 1:
+                    _a.sent();
+                    setCopied(true);
+                    setTimeout(function () { return setCopied(false); }, 2000);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsxs("div", { className: styles.CodeBlockWrapper, children: [_jsxs("div", { className: styles.CodeBlockHeader, children: [_jsx("span", { className: styles.CodeLang, children: lang || "code" }), _jsxs("button", { className: styles.CodeCopyBtn, onClick: handleCopy, children: [_jsx("i", { className: "pi ".concat(copied ? "pi-check" : "pi-copy"), style: { fontSize: "11px" } }), copied ? "Copied" : "Copy"] })] }), _jsx("pre", { className: styles.CodePre, children: _jsx("code", { children: code }) })] }));
+}
+var markdownComponents = {
+    code: function (_a) {
+        var node = _a.node, inline = _a.inline, className = _a.className, children = _a.children, props = __rest(_a, ["node", "inline", "className", "children"]);
+        // Detect by className — only named fenced blocks (```lang) become CodeBlock.
+        // Inline backticks and unnamed fenced blocks render as inline code.
+        var isBlock = /language-/.test(className || "");
+        if (!isBlock)
+            return _jsx("code", __assign({ className: styles.InlineCode }, props, { children: children }));
+        return _jsx(CodeBlock, { className: className, children: children });
+    },
+    pre: function (_a) {
+        var children = _a.children;
+        return _jsx(_Fragment, { children: children });
+    },
+    table: function (_a) {
+        var children = _a.children;
+        return _jsx("div", { className: styles.MarkdownTableWrapper, children: _jsx("table", { children: children }) });
+    },
+    a: function (_a) {
+        var href = _a.href, children = _a.children;
+        return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: styles.MarkdownLink, children: children }));
+    },
+};
+// ── Tool helpers ──────────────────────────────────────────────────────────────
+var TOOL_CATEGORIES = {
+    "Read": ["solid_get_module_metadata", "solid_get_model_metadata", "solid_get_field_metadata", "solid_get_layout_context", "select_relevant_code_context"],
+    "Create": ["solid_create_module", "solid_create_model_with_fields", "solid_add_fields_to_model", "solid_modify_fields_in_model", "solid_update_layout", "solid_patch_layout", "solid_add_or_update_menu", "edit_solid_code"],
+    "Chat": ["solid_chat_with_ozzy"],
+    "Shell": ["bash"],
+};
+function getToolCategory(name) {
+    for (var _i = 0, _a = Object.entries(TOOL_CATEGORIES); _i < _a.length; _i++) {
+        var _b = _a[_i], cat = _b[0], tools = _b[1];
+        if (tools.includes(name))
+            return cat;
+    }
+    return "Tool";
+}
+function getToolIconClass(name) {
+    if (name === "bash")
+        return "pi-terminal";
+    var cat = getToolCategory(name);
+    if (cat === "Read")
+        return "pi-search";
+    if (cat === "Create")
+        return "pi-file-edit";
+    if (cat === "Chat")
+        return "pi-comments";
+    return "pi-cog";
+}
+function describeToolArgs(args) {
+    var priority = ["cmd", "command", "query", "path", "file", "module_name", "model_name", "name", "id", "content"];
+    for (var _i = 0, priority_1 = priority; _i < priority_1.length; _i++) {
+        var key = priority_1[_i];
+        if (args[key] != null) {
+            var val = String(args[key]).trim().replace(/\n/g, " ");
+            return val.length > 72 ? val.slice(0, 72) + "…" : val;
+        }
+    }
+    var first = Object.values(args)[0];
+    if (first != null) {
+        var val = String(first).trim().replace(/\n/g, " ");
+        return val.length > 72 ? val.slice(0, 72) + "…" : val;
+    }
+    return "";
+}
+function formatDuration(ms) {
+    if (ms == null)
+        return "";
+    if (ms < 1000)
+        return "".concat(Math.round(ms), "ms");
+    return "".concat((ms / 1000).toFixed(1), "s");
+}
+/**
+ * Parses tool output to extract semantic status and clean display text.
+ * Handles nested JSON structures like the Solid agent uses.
+ */
+function parseToolResult(output) {
+    var _a;
+    if (!output)
+        return { status: "success", text: "" };
+    try {
+        var outer = JSON.parse(output);
+        var status_1 = "success";
+        var text = "";
+        // The Solid agent often wraps the real result in a 'data' string or object
+        var innerData = outer.data;
+        if (typeof innerData === "string") {
+            try {
+                var inner = JSON.parse(innerData);
+                if (inner.generation_status === "error" || inner.status === "error") {
+                    status_1 = "warning";
+                    text = inner.instructions || (inner.errors && inner.errors.join(", ")) || innerData;
+                }
+                else {
+                    text = inner.message || inner.content || innerData;
+                }
+            }
+            catch (_b) {
+                text = innerData;
+            }
+        }
+        else if (innerData && typeof innerData === "object") {
+            if (innerData.generation_status === "error" || innerData.status === "error") {
+                status_1 = "warning";
+                text = innerData.instructions || (innerData.errors && innerData.errors.join(", ")) || JSON.stringify(innerData);
+            }
+            else {
+                text = innerData.message || innerData.content || JSON.stringify(innerData);
+            }
+        }
+        else {
+            text = outer.content || outer.message || output;
+        }
+        // Check if the outer status is error
+        if (outer.status === "error" || ((_a = outer.errors) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            status_1 = "error";
+            text = outer.message || (outer.errors && outer.errors.join(", ")) || text;
+        }
+        return { status: status_1, text: text.length > 500 ? text.slice(0, 500) + "…" : text };
+    }
+    catch (_c) {
+        return { status: "success", text: output.length > 120 ? output.slice(0, 120) + "…" : output };
+    }
+}
+/**
+ * Detects LLM metadata strings that should not be rendered as chat messages.
+ * These include token counts, model info, finish_reason, and message-list summaries.
+ */
+function isLlmMetadata(content) {
+    if (!content)
+        return true;
+    return /\d+\s*(input|output)\s*tokens/i.test(content)
+        || /finish_reason:/i.test(content)
+        || /^\d+\s+messages\s*\(/i.test(content)
+        || /\|\s*model:\s*\S+/i.test(content);
+}
+function groupMessages(messages) {
+    var result = [];
+    var aiBuffer = [];
+    for (var _i = 0, messages_1 = messages; _i < messages_1.length; _i++) {
+        var msg = messages_1[_i];
+        if (msg.role === "user") {
+            if (aiBuffer.length > 0) {
+                result.push({ kind: "ai", msgs: aiBuffer, groupKey: aiBuffer[0].id });
+                aiBuffer = [];
+            }
+            result.push({ kind: "user", msg: msg });
+        }
+        else {
+            aiBuffer.push(msg);
+        }
+    }
+    if (aiBuffer.length > 0) {
+        result.push({ kind: "ai", msgs: aiBuffer, groupKey: aiBuffer[0].id });
+    }
+    return result;
+}
+/**
+ * Maps the new backend "event-based" JSON history into a flattened Message list for UI.
+ * Handles merging ToolResult into ToolCalling, and processing StepStarted etc.
+ */
+function processHistoryEvents(backendMsgs) {
+    var result = [];
+    // Tracks the "active" message so we can update its duration/progress inline.
+    var currentEventIdx = null;
+    var _loop_1 = function (m) {
+        var type = m.event_type;
+        var data = m.event_data || {};
+        var id = "hist-".concat(m.id);
+        // The backend ISO timestamp or the current time as fallback.
+        var ts = m.timestamp ? new Date(m.timestamp) : new Date();
+        switch (type) {
+            case "UserMessage":
+                result.push({
+                    id: id,
+                    role: "user",
+                    content: m.content || data.content || "",
+                    timestamp: ts,
+                });
+                currentEventIdx = null;
+                break;
+            case "AgentStarted":
+            case "StepStarted":
+                // Create a "Thinking…" event row.
+                currentEventIdx = result.length;
+                result.push({
+                    id: id,
+                    role: "event",
+                    content: "Thinking…",
+                    timestamp: ts,
+                    eventState: "done",
+                });
+                break;
+            case "ToolCalling": {
+                var toolName = data.tool_name || m.tool_name || "tool";
+                var toolArgs = data.arguments || {};
+                currentEventIdx = result.length;
+                result.push({
+                    id: id,
+                    role: "event",
+                    content: toolName,
+                    timestamp: ts,
+                    eventState: "done",
+                    toolName: toolName,
+                    toolDesc: describeToolArgs(toolArgs),
+                    toolArgs: toolArgs,
+                });
+                break;
+            }
+            case "ToolProgress": {
+                if (currentEventIdx != null) {
+                    var label_1 = data.label || "";
+                    var progressStatus = data.status || "running";
+                    var stepStatus = progressStatus === "success" || progressStatus === "done" ? "done" : "running";
+                    var durationMs = data.duration_ms;
+                    var prev = result[currentEventIdx];
+                    if (prev && prev.role === "event") {
+                        var existing = prev.toolProgress || [];
+                        var existingIdx = existing.findIndex(function (p) { return p.label === label_1; });
+                        if (existingIdx >= 0) {
+                            var updated = __spreadArray([], existing, true);
+                            updated[existingIdx] = {
+                                label: label_1,
+                                status: stepStatus,
+                                durationMs: durationMs !== null && durationMs !== void 0 ? durationMs : updated[existingIdx].durationMs,
+                            };
+                            prev.toolProgress = updated;
+                        }
+                        else {
+                            prev.toolProgress = __spreadArray(__spreadArray([], existing, true), [{ label: label_1, status: stepStatus, durationMs: durationMs }], false);
+                        }
+                    }
+                }
+                break;
+            }
+            case "ToolResult": {
+                if (currentEventIdx != null) {
+                    var prev = result[currentEventIdx];
+                    if (prev && prev.role === "event") {
+                        prev.durationMs = data.duration_ms || m.duration_ms;
+                        var outputStr = data.output || m.content || "";
+                        if (outputStr) {
+                            var _a = parseToolResult(outputStr), status_2 = _a.status, text = _a.text;
+                            prev.toolStatus = status_2;
+                            prev.toolOutput = text;
+                            prev.toolOutputRaw = outputStr;
+                        }
+                    }
+                }
+                break;
+            }
+            case "LlmComplete": {
+                var llmContent = m.content || data.content || "";
+                if (!llmContent || isLlmMetadata(llmContent))
+                    break;
+                var prevAssistantLlm = __spreadArray([], result, true).reverse().find(function (r) { return r.role === "assistant"; });
+                if ((prevAssistantLlm === null || prevAssistantLlm === void 0 ? void 0 : prevAssistantLlm.content) === llmContent)
+                    break;
+                result.push({ id: id, role: "assistant", content: llmContent, timestamp: ts });
+                currentEventIdx = null;
+                break;
+            }
+            case "TurnCompleteEvent": {
+                var tcContent = m.content || data.content || "";
+                if (!tcContent) {
+                    currentEventIdx = null;
+                    break;
+                }
+                var prevAssistantTc = __spreadArray([], result, true).reverse().find(function (r) { return r.role === "assistant"; });
+                if ((prevAssistantTc === null || prevAssistantTc === void 0 ? void 0 : prevAssistantTc.content) === tcContent) {
+                    currentEventIdx = null;
+                    break;
+                }
+                result.push({ id: id, role: "assistant", content: tcContent, timestamp: ts });
+                currentEventIdx = null;
+                break;
+            }
+            case "StepComplete":
+            case "AgentComplete":
+                currentEventIdx = null;
+                break;
+            case "AgentError":
+            case "error":
+                result.push({
+                    id: id,
+                    role: "assistant",
+                    content: "Error: ".concat(data.error || m.content || "Unknown error"),
+                    timestamp: ts,
+                });
+                currentEventIdx = null;
+                break;
+            default:
+                if (m.role === "user") {
+                    result.push({ id: id, role: "user", content: m.content || "", timestamp: ts });
+                    currentEventIdx = null;
+                }
+                else if (m.role === "assistant") {
+                    var fallbackContent = m.content || "";
+                    if (fallbackContent && !isLlmMetadata(fallbackContent)) {
+                        var prevAst = __spreadArray([], result, true).reverse().find(function (r) { return r.role === "assistant"; });
+                        if ((prevAst === null || prevAst === void 0 ? void 0 : prevAst.content) !== fallbackContent) {
+                            result.push({ id: id, role: "assistant", content: fallbackContent, timestamp: ts });
+                        }
+                    }
+                    currentEventIdx = null;
+                }
+                break;
+        }
+    };
+    for (var _i = 0, backendMsgs_1 = backendMsgs; _i < backendMsgs_1.length; _i++) {
+        var m = backendMsgs_1[_i];
+        _loop_1(m);
+    }
+    return result;
+}
+// ── Main component ────────────────────────────────────────────────────────────
+export var SolidAiChat = function () {
+    var _a = useState([]), messages = _a[0], setMessages = _a[1];
+    var _b = useState(""), input = _b[0], setInput = _b[1];
+    var _c = useState(false), isConnected = _c[0], setIsConnected = _c[1];
+    var _d = useState(null), sessionId = _d[0], setSessionId = _d[1];
+    var _e = useState(false), isLoadingHistory = _e[0], setIsLoadingHistory = _e[1];
+    var _f = useState(false), hasMoreHistory = _f[0], setHasMoreHistory = _f[1];
+    var _g = useState(1), historyPage = _g[0], setHistoryPage = _g[1];
+    var _h = useState(false), showSessionMenu = _h[0], setShowSessionMenu = _h[1];
+    var _j = useState([]), sessions = _j[0], setSessions = _j[1];
+    var _k = useState(false), isLoadingSessions = _k[0], setIsLoadingSessions = _k[1];
+    var _l = useState(false), isProcessing = _l[0], setIsProcessing = _l[1];
+    var _m = useState(null), activeHistoryId = _m[0], setActiveHistoryId = _m[1];
+    var _o = useState(null), isDeletingSessionId = _o[0], setIsDeletingSessionId = _o[1];
+    var _p = useState(new Set()), expandedToolIds = _p[0], setExpandedToolIds = _p[1];
+    var sessionMenuRef = useRef(null);
+    var scrollRef = useRef(null);
+    var wsRef = useRef(null);
+    var reconnectTimerRef = useRef(null);
+    var textareaRef = useRef(null);
+    var hasStreamedRef = useRef(false);
+    var intentionalCloseRef = useRef(false);
+    var isPrependingRef = useRef(false);
+    var prevScrollHeightRef = useRef(0);
+    // Tracks the id of the current "live" event message so we can update it in-place.
+    var liveEventIdRef = useRef(null);
+    var currentStepRef = useRef(null);
+    var activeSessionIdRef = useRef(_persistedSessionId);
+    // ── Close session menu on outside click ──────────────────────────────────
+    useEffect(function () {
+        if (!showSessionMenu)
+            return;
+        var handler = function (e) {
+            if (sessionMenuRef.current && !sessionMenuRef.current.contains(e.target)) {
+                setShowSessionMenu(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return function () { return document.removeEventListener("mousedown", handler); };
+    }, [showSessionMenu]);
+    // ── Scroll management ─────────────────────────────────────────────────────
+    var scrollToBottom = useCallback(function () {
+        if (scrollRef.current)
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }, []);
+    useEffect(function () {
+        if (isPrependingRef.current && scrollRef.current) {
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight - prevScrollHeightRef.current;
+            isPrependingRef.current = false;
+        }
+        else {
+            scrollToBottom();
+        }
+    }, [messages, scrollToBottom]);
+    // ── History fetch ─────────────────────────────────────────────────────────
+    var fetchHistory = useCallback(function (sid, page, prepend) { return __awaiter(void 0, void 0, void 0, function () {
+        var res, data, fetched_1, _a;
+        var _b, _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    setIsLoadingHistory(true);
+                    _f.label = 1;
+                case 1:
+                    _f.trys.push([1, 4, 5, 6]);
+                    return [4 /*yield*/, fetch("".concat(API_BASE, "/api/agent/sessions/").concat(sid, "/messages?page=").concat(page, "&page_size=").concat(PAGE_SIZE))];
+                case 2:
+                    res = _f.sent();
+                    if (!res.ok)
+                        return [2 /*return*/];
+                    return [4 /*yield*/, res.json()];
+                case 3:
+                    data = _f.sent();
+                    fetched_1 = processHistoryEvents((_b = data.messages) !== null && _b !== void 0 ? _b : []);
+                    if (prepend) {
+                        prevScrollHeightRef.current = (_d = (_c = scrollRef.current) === null || _c === void 0 ? void 0 : _c.scrollHeight) !== null && _d !== void 0 ? _d : 0;
+                        isPrependingRef.current = true;
+                        setMessages(function (prev) { return __spreadArray(__spreadArray([], fetched_1, true), prev, true); });
+                    }
+                    else {
+                        setMessages(fetched_1);
+                    }
+                    setHasMoreHistory((_e = data.has_more) !== null && _e !== void 0 ? _e : false);
+                    setHistoryPage(page);
+                    return [3 /*break*/, 6];
+                case 4:
+                    _a = _f.sent();
+                    return [3 /*break*/, 6];
+                case 5:
+                    setIsLoadingHistory(false);
+                    return [7 /*endfinally*/];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    // ── Sessions list fetch ───────────────────────────────────────────────────
+    var fetchSessions = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var userId, url, res, _a, _b;
+        var _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    setIsLoadingSessions(true);
+                    _f.label = 1;
+                case 1:
+                    _f.trys.push([1, 4, 5, 6]);
+                    userId = (_e = (_d = (_c = loadSession()) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : null;
+                    url = userId
+                        ? "".concat(API_BASE, "/api/agent/sessions/history?user_id=").concat(userId)
+                        : "".concat(API_BASE, "/api/agent/sessions/history");
+                    return [4 /*yield*/, fetch(url)];
+                case 2:
+                    res = _f.sent();
+                    if (!res.ok)
+                        return [2 /*return*/];
+                    _a = setSessions;
+                    return [4 /*yield*/, res.json()];
+                case 3:
+                    _a.apply(void 0, [_f.sent()]);
+                    return [3 /*break*/, 6];
+                case 4:
+                    _b = _f.sent();
+                    return [3 /*break*/, 6];
+                case 5:
+                    setIsLoadingSessions(false);
+                    return [7 /*endfinally*/];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    // ── WebSocket ─────────────────────────────────────────────────────────────
+    var connectWebSocket = useCallback(function () {
+        var _a;
+        var state = (_a = wsRef.current) === null || _a === void 0 ? void 0 : _a.readyState;
+        if (state === WebSocket.OPEN || state === WebSocket.CONNECTING)
+            return;
+        intentionalCloseRef.current = false;
+        var ws = new WebSocket(WS_URL);
+        ws.onopen = function () {
+            var _a, _b, _c;
+            setIsConnected(true);
+            if (reconnectTimerRef.current)
+                clearTimeout(reconnectTimerRef.current);
+            var userId = (_c = (_b = (_a = loadSession()) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null;
+            if (_persistedSessionId) {
+                ws.send(JSON.stringify({ action: "resume_session", session_id: _persistedSessionId, user_id: userId }));
+            }
+            else {
+                ws.send(JSON.stringify({ action: "start_session", user_id: userId }));
+            }
+        };
+        ws.onmessage = function (event) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+            try {
+                var data = JSON.parse(event.data);
+                // Filtering: Only process messages for the active session.
+                // data.session_id is the primary field; sometimes it's nested in data.data
+                var msgSessionId = data.session_id || ((_a = data.data) === null || _a === void 0 ? void 0 : _a.session_id);
+                // If we have an active session and the message is for a different one, ignore it.
+                // Exception: session_started events are always allowed as they establish the new active ID.
+                if (data.type !== "session_started" && msgSessionId && activeSessionIdRef.current && msgSessionId !== activeSessionIdRef.current) {
+                    return;
+                }
+                // Add a new persistent event row, auto-freezing any previous live one.
+                // Pass extra fields (toolName, toolDesc, …) for tool card events.
+                var addEvent = function (content, extra) {
+                    var prevId = liveEventIdRef.current;
+                    var id = "evt-".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2, 6));
+                    liveEventIdRef.current = id;
+                    setMessages(function (prev) {
+                        var base = prevId
+                            ? prev.map(function (m) { return m.id === prevId ? __assign(__assign({}, m), { eventState: "done" }) : m; })
+                            : prev;
+                        return __spreadArray(__spreadArray([], base, true), [__assign({ id: id, role: "event", content: content, timestamp: new Date(), eventState: "active" }, extra)], false);
+                    });
+                };
+                // Freeze the current live event as done.
+                var freezeEvent = function () {
+                    var id = liveEventIdRef.current;
+                    if (!id)
+                        return;
+                    liveEventIdRef.current = null;
+                    setMessages(function (prev) { return prev.map(function (m) { return m.id === id ? __assign(__assign({}, m), { eventState: "done" }) : m; }); });
+                };
+                switch (data.type) {
+                    // ── Session lifecycle ──────────────────────────────────
+                    case "session_started": {
+                        var sid = data.session_id;
+                        // Prefer the backend's history_session_id if provided.
+                        // This fixes the "ID chaining" issue where resuming a restored session
+                        // would create a new ID. We want to stick to the "original" ID for history.
+                        var historySid_1 = data.history_session_id || sid;
+                        _persistedSessionId = sid;
+                        _historySessionId = historySid_1;
+                        writeLS(LS_SESSION_ID, sid);
+                        writeLS(LS_HISTORY_ID, historySid_1);
+                        setSessionId(sid);
+                        activeSessionIdRef.current = sid;
+                        setActiveHistoryId(historySid_1);
+                        // Only fetch history if we don't have any messages yet (initial load or session switch)
+                        setMessages(function (prev) {
+                            if (prev.length === 0)
+                                fetchHistory(historySid_1, 1, false);
+                            return prev;
+                        });
+                        break;
+                    }
+                    case "session_ended":
+                        setSessionId(null);
+                        break;
+                    // ── Agent lifecycle ────────────────────────────────────
+                    case "AgentStarted":
+                        setIsProcessing(true);
+                        currentStepRef.current = null;
+                        addEvent("Thinking…");
+                        break;
+                    case "StepStarted": {
+                        var step = (_c = (_b = data.data) === null || _b === void 0 ? void 0 : _b.step) !== null && _c !== void 0 ? _c : 1;
+                        currentStepRef.current = step;
+                        // Only create a "Thinking…" row when there's no active live event
+                        // (e.g. step 2+ after tool results already froze the previous card).
+                        if (!liveEventIdRef.current)
+                            addEvent("Thinking…", { step: step });
+                        break;
+                    }
+                    case "StepComplete":
+                        freezeEvent();
+                        break;
+                    case "ToolResult": {
+                        var durationMs_1 = (_d = data.data) === null || _d === void 0 ? void 0 : _d.duration_ms;
+                        var outputStr_1 = ((_e = data.data) === null || _e === void 0 ? void 0 : _e.output) || "";
+                        var id_1 = liveEventIdRef.current;
+                        if (id_1) {
+                            setMessages(function (prev) { return prev.map(function (m) {
+                                if (m.id === id_1) {
+                                    var update = { durationMs: durationMs_1 };
+                                    if (outputStr_1) {
+                                        var _a = parseToolResult(outputStr_1), status_3 = _a.status, text = _a.text;
+                                        update.toolStatus = status_3;
+                                        update.toolOutput = text;
+                                        update.toolOutputRaw = outputStr_1;
+                                    }
+                                    return __assign(__assign({}, m), update);
+                                }
+                                return m;
+                            }); });
+                        }
+                        freezeEvent();
+                        break;
+                    }
+                    case "AgentComplete":
+                        freezeEvent();
+                        break;
+                    // ── LLM streaming ──────────────────────────────────────
+                    case "LlmToken": {
+                        var delta_1 = (_g = (_f = data.data) === null || _f === void 0 ? void 0 : _f.delta) !== null && _g !== void 0 ? _g : "";
+                        if (!delta_1)
+                            break;
+                        hasStreamedRef.current = true;
+                        // Freeze the live event row on the first token, then stream.
+                        var evtId_1 = liveEventIdRef.current;
+                        liveEventIdRef.current = null;
+                        setMessages(function (prev) {
+                            var msgs = evtId_1
+                                ? prev.map(function (m) { return m.id === evtId_1 ? __assign(__assign({}, m), { eventState: "done" }) : m; })
+                                : prev;
+                            var last = msgs[msgs.length - 1];
+                            if ((last === null || last === void 0 ? void 0 : last.role) === "assistant" && last.id.startsWith("stream-")) {
+                                return __spreadArray(__spreadArray([], msgs.slice(0, -1), true), [__assign(__assign({}, last), { content: last.content + delta_1 })], false);
+                            }
+                            return __spreadArray(__spreadArray([], msgs, true), [{ id: "stream-".concat(Date.now()), role: "assistant", content: delta_1, timestamp: new Date() }], false);
+                        });
+                        break;
+                    }
+                    // ── LLM complete (intermediate text before tool calls) ─
+                    case "LlmComplete": {
+                        var llmContent_1 = (_j = (_h = data.data) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : "";
+                        if (llmContent_1 && !isLlmMetadata(llmContent_1)) {
+                            var evtId_2 = liveEventIdRef.current;
+                            liveEventIdRef.current = null;
+                            setMessages(function (prev) {
+                                var msgs = evtId_2
+                                    ? prev.map(function (m) { return m.id === evtId_2 ? __assign(__assign({}, m), { eventState: "done" }) : m; })
+                                    : prev;
+                                var lastAssistant = __spreadArray([], msgs, true).reverse().find(function (m) { return m.role === "assistant"; });
+                                if (!lastAssistant || lastAssistant.content !== llmContent_1) {
+                                    msgs = __spreadArray(__spreadArray([], msgs, true), [{ id: "llm-".concat(Date.now()), role: "assistant", content: llmContent_1, timestamp: new Date() }], false);
+                                }
+                                return msgs;
+                            });
+                        }
+                        break;
+                    }
+                    // ── Tool activity ──────────────────────────────────────
+                    case "ToolCalling": {
+                        var toolName = (_l = (_k = data.data) === null || _k === void 0 ? void 0 : _k.tool_name) !== null && _l !== void 0 ? _l : "tool";
+                        var toolArgs = (_o = (_m = data.data) === null || _m === void 0 ? void 0 : _m.arguments) !== null && _o !== void 0 ? _o : {};
+                        addEvent(toolName, { toolName: toolName, toolDesc: describeToolArgs(toolArgs), toolArgs: toolArgs });
+                        break;
+                    }
+                    case "ToolProgress": {
+                        var label_2 = (_q = (_p = data.data) === null || _p === void 0 ? void 0 : _p.label) !== null && _q !== void 0 ? _q : "";
+                        var progressStatus = (_s = (_r = data.data) === null || _r === void 0 ? void 0 : _r.status) !== null && _s !== void 0 ? _s : "running";
+                        var durationMs_2 = (_t = data.data) === null || _t === void 0 ? void 0 : _t.duration_ms;
+                        var stepStatus_1 = progressStatus === "success" || progressStatus === "done" ? "done" : "running";
+                        var id_2 = liveEventIdRef.current;
+                        if (!id_2)
+                            break;
+                        setMessages(function (prev) { return prev.map(function (m) {
+                            var _a;
+                            if (m.id !== id_2)
+                                return m;
+                            var existing = (_a = m.toolProgress) !== null && _a !== void 0 ? _a : [];
+                            var idx = existing.findIndex(function (p) { return p.label === label_2; });
+                            if (idx >= 0) {
+                                var updated = __spreadArray([], existing, true);
+                                updated[idx] = { label: label_2, status: stepStatus_1, durationMs: durationMs_2 !== null && durationMs_2 !== void 0 ? durationMs_2 : updated[idx].durationMs };
+                                return __assign(__assign({}, m), { toolProgress: updated });
+                            }
+                            return __assign(__assign({}, m), { toolProgress: __spreadArray(__spreadArray([], existing, true), [{ label: label_2, status: stepStatus_1, durationMs: durationMs_2 }], false) });
+                        }); });
+                        break;
+                    }
+                    // ── Turn complete ──────────────────────────────────────
+                    case "TurnCompleteEvent":
+                    case "turn_complete": {
+                        setIsProcessing(false);
+                        var content_1 = (_w = (_v = (_u = data.data) === null || _u === void 0 ? void 0 : _u.content) !== null && _v !== void 0 ? _v : data.content) !== null && _w !== void 0 ? _w : "";
+                        var evtId_3 = liveEventIdRef.current;
+                        liveEventIdRef.current = null;
+                        setMessages(function (prev) {
+                            var msgs = evtId_3
+                                ? prev.map(function (m) { return m.id === evtId_3 ? __assign(__assign({}, m), { eventState: "done" }) : m; })
+                                : prev;
+                            if (content_1) {
+                                var lastAssistant = __spreadArray([], msgs, true).reverse().find(function (m) { return m.role === "assistant"; });
+                                var alreadyRendered = lastAssistant && lastAssistant.content === content_1;
+                                if (!hasStreamedRef.current && !alreadyRendered) {
+                                    msgs = __spreadArray(__spreadArray([], msgs, true), [{ id: "tc-".concat(Date.now()), role: "assistant", content: content_1, timestamp: new Date() }], false);
+                                }
+                            }
+                            return msgs;
+                        });
+                        break;
+                    }
+                    // ── Errors ─────────────────────────────────────────────
+                    case "AgentError":
+                    case "error": {
+                        setIsProcessing(false);
+                        var errMsg_1 = (_y = (_x = data.data) === null || _x === void 0 ? void 0 : _x.error) !== null && _y !== void 0 ? _y : "Unknown error";
+                        var evtId_4 = liveEventIdRef.current;
+                        liveEventIdRef.current = null;
+                        setMessages(function (prev) {
+                            var msgs = evtId_4
+                                ? prev.map(function (m) { return m.id === evtId_4 ? __assign(__assign({}, m), { eventState: "done" }) : m; })
+                                : prev;
+                            return __spreadArray(__spreadArray([], msgs, true), [{ id: "err-".concat(Date.now()), role: "assistant", content: errMsg_1, timestamp: new Date(), isError: true }], false);
+                        });
+                        break;
+                    }
+                    default:
+                        break;
+                }
+            }
+            catch (_z) {
+                // ignore JSON parse errors
+            }
+        };
+        ws.onclose = function () {
+            setIsConnected(false);
+            setSessionId(null);
+            setIsProcessing(false);
+            liveEventIdRef.current = null;
+            if (!intentionalCloseRef.current) {
+                // Unexpected disconnect — banner is shown via !isConnected state; schedule reconnect.
+                reconnectTimerRef.current = setTimeout(connectWebSocket, RECONNECT_DELAY);
+            }
+        };
+        ws.onerror = function () {
+            setIsConnected(false);
+        };
+        wsRef.current = ws;
+    }, [fetchHistory]);
+    useEffect(function () {
+        connectWebSocket();
+        return function () {
+            var _a;
+            reconnectTimerRef.current && clearTimeout(reconnectTimerRef.current);
+            intentionalCloseRef.current = true;
+            (_a = wsRef.current) === null || _a === void 0 ? void 0 : _a.close();
+        };
+    }, [connectWebSocket]);
+    // ── Send message ──────────────────────────────────────────────────────────
+    var handleSend = useCallback(function () {
+        var _a;
+        var trimmed = input.trim();
+        if (!trimmed || !isConnected || !sessionId || isProcessing)
+            return;
+        setIsProcessing(true);
+        hasStreamedRef.current = false;
+        currentStepRef.current = null;
+        liveEventIdRef.current = null;
+        setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [{ id: "u-".concat(Date.now()), role: "user", content: trimmed, timestamp: new Date() }], false); });
+        (_a = wsRef.current) === null || _a === void 0 ? void 0 : _a.send(JSON.stringify({ action: "message", session_id: sessionId, content: trimmed }));
+        setInput("");
+        if (textareaRef.current) {
+            textareaRef.current.style.height = "auto";
+            textareaRef.current.focus();
+        }
+    }, [input, isConnected, sessionId, isProcessing]);
+    var handleKeyDown = function (e) {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    var autoResize = function (e) {
+        setInput(e.target.value);
+        var el = e.target;
+        el.style.height = "auto";
+        el.style.height = "".concat(Math.min(el.scrollHeight, 480), "px");
+    };
+    // ── Session actions ───────────────────────────────────────────────────────
+    var handleNewChat = useCallback(function () {
+        var _a, _b, _c, _d;
+        _persistedSessionId = null;
+        _historySessionId = null;
+        writeLS(LS_SESSION_ID, null);
+        writeLS(LS_HISTORY_ID, null);
+        liveEventIdRef.current = null;
+        activeSessionIdRef.current = "__switching__";
+        setMessages([]);
+        setIsProcessing(false);
+        setExpandedToolIds(new Set());
+        setSessionId(null);
+        setActiveHistoryId(null);
+        setHasMoreHistory(false);
+        setHistoryPage(1);
+        setShowSessionMenu(false);
+        var userId = (_c = (_b = (_a = loadSession()) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null;
+        (_d = wsRef.current) === null || _d === void 0 ? void 0 : _d.send(JSON.stringify({ action: "start_session", user_id: userId }));
+    }, []);
+    var handleSelectSession = useCallback(function (targetSessionId) {
+        var _a, _b, _c, _d;
+        if (targetSessionId === activeHistoryId) {
+            setShowSessionMenu(false);
+            return;
+        }
+        _persistedSessionId = targetSessionId;
+        _historySessionId = targetSessionId;
+        writeLS(LS_SESSION_ID, targetSessionId);
+        writeLS(LS_HISTORY_ID, targetSessionId);
+        liveEventIdRef.current = null;
+        activeSessionIdRef.current = targetSessionId;
+        setMessages([]);
+        setSessionId(null);
+        setActiveHistoryId(targetSessionId);
+        setExpandedToolIds(new Set());
+        setHasMoreHistory(false);
+        setHistoryPage(1);
+        setShowSessionMenu(false);
+        var userId = (_c = (_b = (_a = loadSession()) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null;
+        (_d = wsRef.current) === null || _d === void 0 ? void 0 : _d.send(JSON.stringify({ action: "resume_session", session_id: targetSessionId, user_id: userId }));
+    }, [activeHistoryId]);
+    var handleDeleteSession = useCallback(function (e, targetId) { return __awaiter(void 0, void 0, void 0, function () {
+        var res, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    e.stopPropagation();
+                    if (!window.confirm("Are you sure you want to delete this conversation?"))
+                        return [2 /*return*/];
+                    setIsDeletingSessionId(targetId);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, fetch("".concat(API_BASE, "/api/agent/sessions/").concat(targetId), { method: "DELETE" })];
+                case 2:
+                    res = _b.sent();
+                    if (res.ok) {
+                        setSessions(function (prev) { return prev.filter(function (s) { return s.session_id !== targetId; }); });
+                        if (targetId === activeHistoryId) {
+                            handleNewChat();
+                        }
+                    }
+                    return [3 /*break*/, 5];
+                case 3:
+                    _a = _b.sent();
+                    return [3 /*break*/, 5];
+                case 4:
+                    setIsDeletingSessionId(null);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [activeHistoryId, handleNewChat]);
+    var handleToggleSessionMenu = useCallback(function () {
+        setShowSessionMenu(function (prev) { if (!prev)
+            fetchSessions(); return !prev; });
+    }, [fetchSessions]);
+    var handleLoadOlder = useCallback(function () {
+        var sid = _historySessionId !== null && _historySessionId !== void 0 ? _historySessionId : sessionId;
+        if (!sid || isLoadingHistory)
+            return;
+        fetchHistory(sid, historyPage + 1, true);
+    }, [sessionId, isLoadingHistory, historyPage, fetchHistory]);
+    // ── Derived ───────────────────────────────────────────────────────────────
+    var canSend = isConnected && !!sessionId && !!input.trim() && !isProcessing;
+    var inputPlaceholder = !isConnected ? "Connecting to server…" : !sessionId ? "Establishing session…" : isProcessing ? "SolidX AI is thinking…" : "Message SolidX AI…";
+    // ── Render ────────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: styles.Container, children: [_jsxs("header", { className: styles.Header, children: [_jsx("span", { className: "".concat(styles.StatusDot, " ").concat(isProcessing ? styles.StatusRunning : isConnected ? styles.StatusOnline : styles.StatusOffline) }), _jsxs("span", { className: styles.StatusLabel, children: [_jsx("i", { className: "pi ".concat(isConnected ? "pi-wifi" : "pi-times-circle"), style: { fontSize: "11px" } }), isConnected ? (isProcessing ? "Running…" : sessionId ? "Connected" : "Starting…") : "Offline"] }), _jsx("div", { className: styles.HeaderSpacer }), _jsxs("button", { className: styles.NewChatHeaderBtn, onClick: handleNewChat, title: "New conversation", children: [_jsx("i", { className: "pi pi-plus", style: { fontSize: "10px" } }), "New Chat"] }), _jsxs("div", { className: styles.SessionMenuAnchor, ref: sessionMenuRef, children: [_jsx("button", { className: styles.HamburgerBtn, onClick: handleToggleSessionMenu, title: "Session history", "aria-label": "Open session history", children: _jsx("i", { className: "pi pi-bars", style: { fontSize: "13px" } }) }), showSessionMenu && (_jsxs("div", { className: styles.SessionMenu, children: [_jsxs("button", { className: styles.SessionMenuNewChat, onClick: handleNewChat, children: [_jsx("i", { className: "pi pi-plus", style: { fontSize: "12px" } }), "New Chat"] }), _jsx("div", { className: styles.SessionMenuSectionLabel, children: "Recent Sessions" }), _jsx("div", { className: styles.SessionList, children: isLoadingSessions ? (_jsxs("div", { className: styles.SessionMenuLoading, children: [_jsx("i", { className: "pi pi-spin pi-spinner", style: { fontSize: "11px" } }), "Loading\u2026"] })) : sessions.length === 0 ? (_jsx("div", { className: styles.SessionMenuEmpty, children: "No past sessions found" })) : (sessions.map(function (s) { return (_jsxs("div", { className: "".concat(styles.SessionItem, " ").concat(s.session_id === activeHistoryId ? styles.SessionItemActive : ""), onClick: function () { return handleSelectSession(s.session_id); }, children: [_jsxs("div", { className: styles.SessionItemMain, children: [_jsx("span", { className: styles.SessionItemPreview, children: s.preview || "New conversation" }), _jsxs("span", { className: styles.SessionItemMeta, children: [formatSessionDate(s.created_at), s.total_steps > 0 && " \u00B7 ".concat(s.total_steps, " turn").concat(s.total_steps !== 1 ? "s" : "")] })] }), _jsx("button", { className: styles.SessionDeleteBtn, onClick: function (e) { return handleDeleteSession(e, s.session_id); }, disabled: isDeletingSessionId === s.session_id, title: "Delete conversation", children: _jsx("i", { className: "pi ".concat(isDeletingSessionId === s.session_id ? "pi-spin pi-spinner" : "pi-trash"), style: { fontSize: "11px" } }) })] }, s.session_id)); })) })] }))] })] }), !isConnected && (_jsxs("div", { className: styles.ReconnectBanner, children: [_jsx("i", { className: "pi pi-spin pi-spinner", style: { fontSize: "11px" } }), "Reconnecting\u2026"] })), _jsxs("div", { className: styles.MessageList, ref: scrollRef, children: [hasMoreHistory && (_jsx("div", { className: styles.LoadOlderWrap, children: _jsx("button", { className: styles.LoadOlderBtn, onClick: handleLoadOlder, disabled: isLoadingHistory, children: isLoadingHistory
+                                ? _jsxs(_Fragment, { children: [_jsx("i", { className: "pi pi-spin pi-spinner", style: { fontSize: "11px" } }), " Loading\u2026"] })
+                                : _jsxs(_Fragment, { children: [_jsx("i", { className: "pi pi-history", style: { fontSize: "11px" } }), " Load older messages"] }) }) })), isLoadingHistory && messages.length === 0 && (_jsxs("div", { className: styles.HistoryLoading, children: [_jsx("i", { className: "pi pi-spin pi-spinner", style: { fontSize: "16px" } }), _jsx("span", { children: "Loading conversation\u2026" })] })), messages.length === 0 && !isLoadingHistory && (_jsxs("div", { className: styles.EmptyState, children: [_jsx("div", { className: styles.EmptyIcon, children: _jsx("i", { className: "pi pi-comments", style: { fontSize: "28px" } }) }), _jsx("p", { className: styles.EmptyTitle, children: "How can I help you today?" }), _jsx("p", { className: styles.EmptySubtitle, children: "Ask me anything about your SolidX project." })] })), groupMessages(messages).map(function (group) {
+                        // ── User message ────────────────────────────────────────
+                        if (group.kind === "user") {
+                            var msg = group.msg;
+                            return (_jsxs("div", { className: "".concat(styles.Row, " ").concat(styles.RowUser), children: [_jsx("div", { className: "".concat(styles.Avatar, " ").concat(styles.AvatarUser), children: _jsx("i", { className: "pi pi-user", style: { fontSize: "12px" } }) }), _jsxs("div", { className: styles.BubbleGroup, children: [_jsx("div", { className: "".concat(styles.Bubble, " ").concat(styles.BubbleUser), children: _jsx("p", { className: styles.UserText, children: msg.content }) }), _jsxs("div", { className: "".concat(styles.BubbleMeta, " ").concat(styles.BubbleMetaUser), children: [_jsx("span", { className: styles.Timestamp, children: msg.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) }), _jsx(CopyButton, { text: msg.content })] })] })] }, msg.id));
+                        }
+                        // ── AI turn: avatar once, events + response stacked ─────
+                        return (_jsxs("div", { className: styles.AiTurnGroup, children: [_jsx("div", { className: styles.Avatar, children: _jsx("i", { className: "pi pi-android", style: { fontSize: "12px" } }) }), _jsx("div", { className: styles.AiTurnContent, children: group.msgs.flatMap(function (msg) {
+                                        var items = [];
+                                        if (msg.role === "event") {
+                                            var active = msg.eventState === "active";
+                                            // ── Tool call card ──────────────────────────────
+                                            if (msg.toolName) {
+                                                var status_4 = msg.toolStatus || (active ? "running" : "success");
+                                                var cardClass = status_4 === "running" ? styles.ToolCardRunning :
+                                                    status_4 === "warning" ? styles.ToolCardWarning :
+                                                        status_4 === "error" ? styles.ToolCardError :
+                                                            styles.ToolCardDone;
+                                                var statusIcon = status_4 === "running" ? "pi-spin pi-spinner" :
+                                                    status_4 === "warning" ? "pi-exclamation-triangle" :
+                                                        status_4 === "error" ? "pi-times-circle" :
+                                                            "pi-check-circle";
+                                                var statusIconClass = status_4 === "warning" ? styles.ToolCardStatusWarning :
+                                                    status_4 === "error" ? styles.ToolCardStatusError :
+                                                        status_4 === "success" ? styles.ToolCardStatusDone :
+                                                            styles.ToolCardStatusIcon;
+                                                var hasExpandable = !!msg.toolOutput || !!msg.toolArgs;
+                                                var isExpanded = expandedToolIds.has(msg.id);
+                                                var toggleExpand = hasExpandable && status_4 !== "running"
+                                                    ? function () { return setExpandedToolIds(function (prev) {
+                                                        var next = new Set(prev);
+                                                        if (next.has(msg.id))
+                                                            next.delete(msg.id);
+                                                        else
+                                                            next.add(msg.id);
+                                                        return next;
+                                                    }); }
+                                                    : undefined;
+                                                items.push(_jsxs("div", { className: "".concat(styles.ToolCard, " ").concat(cardClass), children: [_jsxs("button", { className: styles.ToolCardHeaderBtn, onClick: toggleExpand, "data-expandable": hasExpandable && status_4 !== "running" ? "true" : undefined, children: [_jsx("i", { className: "pi ".concat(statusIcon, " ").concat(statusIconClass) }), _jsx("i", { className: "pi ".concat(getToolIconClass(msg.toolName), " ").concat(styles.ToolCardToolIcon) }), _jsx("span", { className: styles.ToolCardName, children: msg.toolName }), msg.toolDesc && _jsx("span", { className: styles.ToolCardDesc, title: msg.toolDesc, children: msg.toolDesc }), _jsx("span", { className: styles.ToolCardBadge, children: getToolCategory(msg.toolName) }), msg.durationMs != null && (_jsx("span", { className: styles.ToolCardDuration, children: formatDuration(msg.durationMs) })), hasExpandable && status_4 !== "running" && (_jsx("i", { className: "pi pi-chevron-right ".concat(styles.ToolCardChevron, " ").concat(isExpanded ? styles.ToolCardChevronOpen : "") }))] }), msg.toolProgress && msg.toolProgress.length > 0 && (_jsx("div", { className: styles.ToolCardProgress, children: msg.toolProgress.map(function (p, i) { return (_jsxs("div", { className: "".concat(styles.ToolProgressItem, " ").concat(p.status === "running" ? styles.ToolProgressRunning : styles.ToolProgressDone), children: [_jsx("i", { className: "pi ".concat(p.status === "running" ? "pi-spin pi-spinner" : "pi-check-circle"), style: { fontSize: "10px" } }), _jsx("span", { className: styles.ToolProgressLabel, children: p.label }), p.durationMs != null && p.status === "done" && (_jsx("span", { className: styles.ToolProgressDuration, children: formatDuration(p.durationMs) }))] }, i)); }) })), isExpanded && (msg.toolArgs || msg.toolOutput) && (_jsxs("div", { className: styles.ToolCardExpandable, children: [msg.toolArgs && Object.keys(msg.toolArgs).length > 0 && (_jsxs("div", { className: styles.ToolCardOutput, children: [_jsx("div", { className: styles.ToolOutputHeader, children: _jsx("span", { children: "Arguments" }) }), _jsx("pre", { className: styles.ToolOutputText, children: JSON.stringify(msg.toolArgs, null, 2) })] })), msg.toolOutput && (_jsxs("div", { className: styles.ToolCardOutput, children: [_jsx("div", { className: styles.ToolOutputHeader, children: _jsx("span", { children: "Result" }) }), _jsx("pre", { className: "".concat(styles.ToolOutputText, " ").concat(status_4 === "warning" ? styles.ToolOutputWarning : status_4 === "error" ? styles.ToolOutputError : ""), children: msg.toolOutputRaw || msg.toolOutput })] }))] }))] }, msg.id));
+                                                return items;
+                                            }
+                                            // ── Thinking bubble: only show while active ──────
+                                            if (active) {
+                                                items.push(_jsxs("div", { className: styles.ThinkingBubble, children: [_jsxs("div", { className: styles.ThinkingDots, children: [_jsx("span", { className: styles.ThinkingDot }), _jsx("span", { className: styles.ThinkingDot }), _jsx("span", { className: styles.ThinkingDot })] }), _jsx("span", { className: styles.ThinkingLabel, children: "Thinking\u2026" })] }, msg.id));
+                                            }
+                                            return items;
+                                        }
+                                        // ── Error bubble ────────────────────────────────────
+                                        if (msg.isError) {
+                                            items.push(_jsxs("div", { className: styles.ErrorBubble, children: [_jsx("div", { className: styles.ErrorIcon, children: _jsx("i", { className: "pi pi-exclamation-circle", style: { fontSize: "13px" } }) }), _jsxs("div", { className: styles.ErrorContent, children: [_jsx("p", { className: styles.ErrorTitle, children: "Error" }), _jsx("p", { className: styles.ErrorText, children: msg.content })] })] }, msg.id));
+                                            return items;
+                                        }
+                                        // ── Assistant message ───────────────────────────────
+                                        var isStreaming = msg.id.startsWith("stream-") && isProcessing;
+                                        items.push(_jsxs("div", { className: styles.BubbleGroup, children: [_jsxs("div", { className: "".concat(styles.Bubble, " ").concat(styles.BubbleAssistant), children: [_jsx("div", { className: styles.MarkdownRoot, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents, children: msg.content }) }), isStreaming && _jsx("span", { className: styles.StreamingCursor })] }), _jsxs("div", { className: "".concat(styles.BubbleMeta, " ").concat(styles.BubbleMetaAssistant), children: [_jsx("span", { className: styles.Timestamp, children: msg.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) }), _jsx(CopyButton, { text: msg.content })] })] }, msg.id));
+                                        return items;
+                                    }) })] }, group.groupKey));
+                    })] }), _jsx("div", { className: styles.InputArea, children: _jsxs("div", { className: "".concat(styles.InputBox, " ").concat(!isConnected || !sessionId ? styles.InputBoxDisabled : ""), children: [_jsx("textarea", { ref: textareaRef, className: styles.Textarea, placeholder: inputPlaceholder, value: input, onChange: autoResize, onKeyDown: handleKeyDown, disabled: !isConnected || !sessionId || isProcessing, rows: 1 }), _jsx("button", { className: "".concat(styles.SendBtn, " ").concat(canSend ? styles.SendBtnActive : ""), disabled: !canSend, onClick: handleSend, "aria-label": "Send message", children: _jsx("i", { className: "pi pi-send", style: { fontSize: "12px" } }) })] }) })] }));
+};
+//# sourceMappingURL=SolidAiChat.js.map