@openpalm/ui 0.11.3 → 0.11.5-rc.1

package/build/server/chunks/{_page.svelte-zSkk6PMh.js → _page.svelte-DD-cF_uw.js}

@@ -1,13 +1,13 @@
 import { a as __exportAll } from './chunk-CLZ62Ad-.js';
-import { E as head, p as ensure_array_like, r as escape_html, o as derived, d as attr, e as attr_class, F as html } from './dev-B6xUe35c.js';
-import { g as goto } from './client-CA8h4-ry.js';
-import { p as page } from './state-DlLwDz60.js';
-import { N as Navbar, c as chat, E as EndpointList, S as SessionList, f as formatTime, I as IconButton } from './Navbar-BAeaqjaN.js';
+import { E as head, p as ensure_array_like, d as attr, r as escape_html, e as attr_class, o as derived, F as html } from './dev-B6xUe35c.js';
+import { g as goto } from './client-CzWS98u-.js';
+import { p as page } from './state-DaLIIQmU.js';
+import { N as Navbar, c as chat, E as EndpointList, S as SessionList, f as formatTime, I as IconButton } from './Navbar-Bx4D1yFQ.js';
 import { S as Spinner } from './Spinner-Bk6e83RX.js';
 import 'node:module';
-import './internal-C60J8YGh.js';
+import './internal-Cv1tDOi8.js';
 import './utils-BSRjJDrZ.js';
-import './theme-state.svelte-CE13yM0n.js';
+import './theme-state.svelte-_CMr5Hu9.js';
 
 //#region ../../node_modules/.bun/mdurl@2.0.0/node_modules/mdurl/lib/decode.mjs
 var decodeCache = {};
@@ -5403,10 +5403,13 @@ function renderMarkdown(text) {
 function ChatMessage($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
 		let { entry } = $$props;
-		const renderedHtml = derived(() => entry.type !== "divider" && entry.role === "assistant" ? renderMarkdown(entry.text) : null);
+		const renderedHtml = derived(() => entry.type !== "divider" && entry.type !== "note" && entry.role === "assistant" ? renderMarkdown(entry.text) : null);
 		if (entry.type === "divider") {
 			$$renderer.push("<!--[0-->");
 			$$renderer.push(`<div class="thread-divider svelte-h4cdis"${attr("aria-label", entry.label)}><span class="divider-line svelte-h4cdis"></span> <span class="divider-label svelte-h4cdis">${escape_html(entry.label)}</span> <span class="divider-line svelte-h4cdis"></span></div>`);
+		} else if (entry.type === "note") {
+			$$renderer.push("<!--[1-->");
+			$$renderer.push(`<div class="thread-note svelte-h4cdis"${attr("aria-label", entry.label)}><span class="thread-note-label svelte-h4cdis">${escape_html(entry.label)}</span> <span class="thread-note-text svelte-h4cdis">${escape_html(entry.text)}</span></div>`);
 		} else {
 			$$renderer.push("<!--[-1-->");
 			$$renderer.push(`<div${attr_class("message svelte-h4cdis", void 0, {
@@ -5458,20 +5461,23 @@ function NewChatButton($$renderer, $$props) {
 //#region src/lib/components/chat/ChatInput.svelte
 function ChatInput($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
-		let { sending} = $$props;
+		let { sending, questionPending = false} = $$props;
 		let inputText = "";
+		const inputDisabled = derived(() => sending && !questionPending);
+		const actionLabel = derived(() => questionPending ? "Answer" : "Send");
 		$$renderer.push(`<div class="chat-input-row svelte-j7h4bp"><div class="input-area svelte-j7h4bp">`);
 		NewChatButton($$renderer);
-		$$renderer.push(`<!----> <textarea id="chat-input" placeholder="Send a message… (Enter to send, Shift+Enter for newline)" rows="1"${attr("disabled", sending, true)} aria-label="Message input" class="svelte-j7h4bp">`);
+		$$renderer.push(`<!----> <textarea id="chat-input"${attr("placeholder", questionPending ? "Answer the assistant… (Enter to send, Shift+Enter for newline)" : "Send a message… (Enter to send, Shift+Enter for newline)")} rows="1"${attr("disabled", inputDisabled(), true)} aria-label="Message input" class="svelte-j7h4bp">`);
 		const $$body = escape_html(inputText);
 		if ($$body) $$renderer.push(`${$$body}`);
-		$$renderer.push(`</textarea> <button class="send-btn svelte-j7h4bp" type="button"${attr("disabled", sending || !inputText.trim(), true)} aria-label="Send message">`);
-		if (sending) {
+		$$renderer.push(`</textarea> <button class="btn btn-primary send-btn svelte-j7h4bp" type="button"${attr("disabled", inputDisabled() || !inputText.trim(), true)}${attr("aria-label", questionPending ? "Send answer" : "Send message")}>`);
+		if (sending && !questionPending) {
 			$$renderer.push("<!--[0-->");
 			Spinner($$renderer, {});
+			$$renderer.push(`<!----> <span>Sending...</span>`);
 		} else {
 			$$renderer.push("<!--[-1-->");
-			$$renderer.push(`<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>`);
+			$$renderer.push(`<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> <span>${escape_html(actionLabel())}</span>`);
 		}
 		$$renderer.push(`<!--]--></button></div></div>`);
 	});
@@ -5482,6 +5488,38 @@ function _page($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
 		const entriesLoading = derived(() => chat.entriesLoading);
 		const sessionsLoading = derived(() => chat.byEndpoint.get(chat.activeEndpointId)?.sessionsLoading ?? false);
+		function liveStatusText() {
+			if (chat.pendingPermission) return "Assistant paused for approval";
+			if (chat.pendingQuestion) return "Assistant is waiting for your answer";
+			if (chat.pendingAssistantText) return "Assistant is responding";
+			return "Assistant is typing";
+		}
+		function clamp(text, max = 160) {
+			return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+		}
+		function toolEmoji(tool, status) {
+			const name = tool.toLowerCase();
+			if (status === "error" || status === "failed") return "⚠️";
+			if (name.includes("bash") || name.includes("shell") || name.includes("command")) return "🛠️";
+			if (name.includes("grep") || name.includes("search")) return "🔎";
+			if (name.includes("read") || name.includes("file")) return "📄";
+			if (name.includes("edit") || name.includes("write") || name.includes("patch")) return "✍️";
+			if (name.includes("web") || name.includes("http") || name.includes("fetch")) return "🌐";
+			if (name.includes("task") || name.includes("agent")) return "🤖";
+			return status === "completed" ? "✅" : "⏳";
+		}
+		function timelineTitle(entry) {
+			return entry.kind === "step" ? entry.title : entry.title || entry.tool;
+		}
+		function toolStatusLabel(status) {
+			switch (status) {
+				case "completed": return "completed";
+				case "error":
+				case "failed": return "failed";
+				case "pending": return "queued";
+				default: return "running";
+			}
+		}
 		head("23dtxz", $$renderer, ($$renderer) => {
 			$$renderer.title(($$renderer) => {
 				$$renderer.push(`<title>Chat — OpenPalm</title>`);
@@ -5493,10 +5531,10 @@ function _page($$renderer, $$props) {
 			$$renderer.push("<!--[0-->");
 			$$renderer.push(`<div class="session-loading svelte-23dtxz" aria-live="polite">`);
 			Spinner($$renderer, {});
-			$$renderer.push(`<!----> <span>Loading messages…</span></div>`);
+			$$renderer.push(`<!----> <span class="svelte-23dtxz">Loading messages…</span></div>`);
 		} else if (chat.entries.length === 0) {
 			$$renderer.push("<!--[1-->");
-			$$renderer.push(`<div class="empty-state svelte-23dtxz"><p>No messages yet. Send something to begin.</p></div>`);
+			$$renderer.push(`<div class="empty-state svelte-23dtxz"><p class="svelte-23dtxz">No messages yet. Send something to begin.</p></div>`);
 		} else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> <!--[-->`);
 		const each_array = ensure_array_like(chat.entries);
@@ -5504,14 +5542,163 @@ function _page($$renderer, $$props) {
 			let entry = each_array[$$index];
 			ChatMessage($$renderer, { entry });
 		}
-		$$renderer.push(`<!--]--> <div aria-hidden="true"></div></section> `);
+		$$renderer.push(`<!--]--> `);
+		if (chat.sending) {
+			$$renderer.push("<!--[0-->");
+			$$renderer.push(`<div class="typing-message svelte-23dtxz" aria-live="polite"${attr("aria-label", liveStatusText())}><div class="typing-bubble svelte-23dtxz">`);
+			if (chat.pendingAssistantText) {
+				$$renderer.push("<!--[0-->");
+				$$renderer.push(`<p class="typing-text typing-text-streaming svelte-23dtxz">${escape_html(chat.pendingAssistantText)}</p>`);
+			} else {
+				$$renderer.push("<!--[-1-->");
+				$$renderer.push(`<div class="typing-state-row svelte-23dtxz"><span class="typing-text svelte-23dtxz">${escape_html(liveStatusText())}</span> `);
+				if (!chat.pendingPermission && !chat.pendingQuestion) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<span class="typing-indicator svelte-23dtxz" aria-hidden="true"><span class="typing-dot svelte-23dtxz"></span> <span class="typing-dot svelte-23dtxz"></span> <span class="typing-dot svelte-23dtxz"></span></span>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--></div>`);
+			}
+			$$renderer.push(`<!--]--> `);
+			if (chat.pendingToolStates.length > 0) {
+				$$renderer.push("<!--[0-->");
+				$$renderer.push(`<div${attr_class("tool-timeline svelte-23dtxz", void 0, { "tool-timeline-muted": !!chat.pendingPermission || !!chat.pendingQuestion })} aria-label="Assistant activity"><!--[-->`);
+				const each_array_1 = ensure_array_like(chat.pendingToolStates);
+				for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+					let tool = each_array_1[$$index_1];
+					$$renderer.push(`<div class="tool-timeline-item svelte-23dtxz"><span class="tool-emoji svelte-23dtxz" aria-hidden="true">${escape_html(toolEmoji(tool.tool, tool.status))}</span> <div class="tool-copy svelte-23dtxz"><span class="tool-label svelte-23dtxz">${escape_html(timelineTitle(tool))} <span class="tool-status svelte-23dtxz">${escape_html(toolStatusLabel(tool.status))}</span></span> `);
+					if (tool.detail && !chat.pendingPermission && !chat.pendingQuestion) {
+						$$renderer.push("<!--[0-->");
+						$$renderer.push(`<span class="tool-detail svelte-23dtxz">${escape_html(clamp(tool.detail))}</span>`);
+					} else $$renderer.push("<!--[-1-->");
+					$$renderer.push(`<!--]--> `);
+					if (tool.output && !chat.pendingPermission && !chat.pendingQuestion) {
+						$$renderer.push("<!--[0-->");
+						$$renderer.push(`<code class="tool-output svelte-23dtxz">${escape_html(clamp(tool.output, 120))}</code>`);
+					} else $$renderer.push("<!--[-1-->");
+					$$renderer.push(`<!--]--> `);
+					if (tool.error) {
+						$$renderer.push("<!--[0-->");
+						$$renderer.push(`<span class="tool-error svelte-23dtxz">${escape_html(clamp(tool.error, 120))}</span>`);
+					} else $$renderer.push("<!--[-1-->");
+					$$renderer.push(`<!--]--></div></div>`);
+				}
+				$$renderer.push(`<!--]--></div>`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> `);
+			if (chat.pendingPermission) {
+				$$renderer.push("<!--[0-->");
+				$$renderer.push(`<div class="live-card permission-card svelte-23dtxz" role="group" aria-label="Permission request"><div class="live-card-header svelte-23dtxz"><span class="live-card-kicker svelte-23dtxz">Permission request</span> <span class="live-card-title svelte-23dtxz">${escape_html(chat.pendingPermission.permission)}</span></div> `);
+				if (chat.pendingPermission.detail) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<p class="live-card-message svelte-23dtxz">${escape_html(clamp(chat.pendingPermission.detail))}</p>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> `);
+				if (chat.pendingPermission.patterns.length > 0) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<div class="svelte-23dtxz"><span class="live-card-label svelte-23dtxz">Requested now</span> <code class="live-card-code svelte-23dtxz">${escape_html(chat.pendingPermission.patterns.join(", "))}</code></div>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> `);
+				if (chat.pendingPermission.always.length > 0) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<div class="svelte-23dtxz"><span class="live-card-label svelte-23dtxz">Saved if always allowed</span> <code class="live-card-code svelte-23dtxz">${escape_html(chat.pendingPermission.always.join(", "))}</code></div>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> `);
+				if (chat.pendingPermission.message) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<p class="live-card-message svelte-23dtxz">${escape_html(chat.pendingPermission.message)}</p>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> <div class="live-card-actions svelte-23dtxz"><button class="btn btn-primary btn-sm svelte-23dtxz" type="button"${attr("disabled", chat.pendingPermission.status === "submitting" || chat.pendingPermission.status === "resolved", true)}>Allow this once</button> <button class="btn btn-secondary btn-sm svelte-23dtxz" type="button"${attr("disabled", chat.pendingPermission.status === "submitting" || chat.pendingPermission.status === "resolved", true)}>Always allow matches</button> <button class="btn btn-danger btn-sm svelte-23dtxz" type="button"${attr("disabled", chat.pendingPermission.status === "submitting" || chat.pendingPermission.status === "resolved", true)}>Deny request</button></div></div>`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> `);
+			if (chat.pendingQuestion) {
+				$$renderer.push("<!--[0-->");
+				$$renderer.push(`<div class="live-card question-card svelte-23dtxz" role="group" aria-label="Assistant question"><div class="live-card-header svelte-23dtxz"><span class="live-card-kicker svelte-23dtxz">Assistant question</span> `);
+				if (chat.pendingQuestion.questions.length === 1 && chat.pendingQuestion.questions[0]?.header) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<span class="live-card-title svelte-23dtxz">${escape_html(chat.pendingQuestion.questions[0].header)}</span>`);
+				} else if (chat.pendingQuestion.questions.length > 1) {
+					$$renderer.push("<!--[1-->");
+					$$renderer.push(`<span class="live-card-title svelte-23dtxz">${escape_html(chat.pendingQuestion.questions.length)} answers required</span>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--></div> `);
+				if (chat.pendingQuestion.questions.length === 1 && chat.pendingQuestion.questions[0]) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<p class="live-card-question svelte-23dtxz">${escape_html(chat.pendingQuestion.questions[0].question)}</p> `);
+					if (chat.pendingQuestion.questions[0].options.length > 0) {
+						$$renderer.push("<!--[0-->");
+						$$renderer.push(`<div class="question-options svelte-23dtxz"><!--[-->`);
+						const each_array_2 = ensure_array_like(chat.pendingQuestion.questions[0].options);
+						for (let index = 0, $$length = each_array_2.length; index < $$length; index++) {
+							let option = each_array_2[index];
+							$$renderer.push(`<button class="btn btn-secondary btn-sm question-option svelte-23dtxz" type="button"${attr("disabled", chat.pendingQuestion.status === "submitting" || chat.pendingQuestion.status === "answered" || chat.pendingQuestion.status === "rejected", true)}><span class="svelte-23dtxz">${escape_html(option.label)}</span> `);
+							if (option.description) {
+								$$renderer.push("<!--[0-->");
+								$$renderer.push(`<span class="question-option-description svelte-23dtxz">${escape_html(option.description)}</span>`);
+							} else $$renderer.push("<!--[-1-->");
+							$$renderer.push(`<!--]--></button>`);
+						}
+						$$renderer.push(`<!--]--></div>`);
+					} else $$renderer.push("<!--[-1-->");
+					$$renderer.push(`<!--]--> <p class="live-card-hint svelte-23dtxz">Use the composer below to send a custom answer.</p>`);
+				} else {
+					$$renderer.push("<!--[-1-->");
+					$$renderer.push(`<div class="multi-question-list svelte-23dtxz"><!--[-->`);
+					const each_array_3 = ensure_array_like(chat.pendingQuestion.questions);
+					for (let index = 0, $$length = each_array_3.length; index < $$length; index++) {
+						let question = each_array_3[index];
+						$$renderer.push(`<div class="multi-question-item svelte-23dtxz">`);
+						if (question.header) {
+							$$renderer.push("<!--[0-->");
+							$$renderer.push(`<span class="live-card-label svelte-23dtxz">${escape_html(question.header)}</span>`);
+						} else $$renderer.push("<!--[-1-->");
+						$$renderer.push(`<!--]--> <p class="live-card-question svelte-23dtxz">${escape_html(question.question)}</p> `);
+						if (question.options.length > 0) {
+							$$renderer.push("<!--[0-->");
+							$$renderer.push(`<div class="question-options svelte-23dtxz"><!--[-->`);
+							const each_array_4 = ensure_array_like(question.options);
+							for (let optionIndex = 0, $$length = each_array_4.length; optionIndex < $$length; optionIndex++) {
+								let option = each_array_4[optionIndex];
+								$$renderer.push(`<button${attr_class("btn btn-secondary btn-sm question-option svelte-23dtxz", void 0, { "selected-option": chat.pendingQuestion.answers[index] === option.label })} type="button"${attr("disabled", chat.pendingQuestion.status === "submitting" || chat.pendingQuestion.status === "answered" || chat.pendingQuestion.status === "rejected", true)}><span class="svelte-23dtxz">${escape_html(option.label)}</span> `);
+								if (option.description) {
+									$$renderer.push("<!--[0-->");
+									$$renderer.push(`<span class="question-option-description svelte-23dtxz">${escape_html(option.description)}</span>`);
+								} else $$renderer.push("<!--[-1-->");
+								$$renderer.push(`<!--]--></button>`);
+							}
+							$$renderer.push(`<!--]--></div>`);
+						} else $$renderer.push("<!--[-1-->");
+						$$renderer.push(`<!--]--> <input class="question-input svelte-23dtxz" type="text"${attr("value", chat.pendingQuestion.answers[index])} placeholder="Type an answer"${attr("disabled", chat.pendingQuestion.status === "submitting" || chat.pendingQuestion.status === "answered" || chat.pendingQuestion.status === "rejected", true)}/></div>`);
+					}
+					$$renderer.push(`<!--]--></div>`);
+				}
+				$$renderer.push(`<!--]--> `);
+				if (chat.pendingQuestion.answers.some((answer) => answer)) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<code class="live-card-code svelte-23dtxz">${escape_html(chat.pendingQuestion.answers.filter(Boolean).join(" | "))}</code>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> `);
+				if (chat.pendingQuestion.message) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<p class="live-card-message svelte-23dtxz">${escape_html(chat.pendingQuestion.message)}</p>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> <div class="live-card-actions svelte-23dtxz">`);
+				if (chat.pendingQuestion.questions.length > 1) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<button class="btn btn-primary btn-sm svelte-23dtxz" type="button"${attr("disabled", chat.pendingQuestion.status === "submitting" || chat.pendingQuestion.status === "answered" || chat.pendingQuestion.status === "rejected", true)}>Submit answers</button>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> <button class="btn btn-secondary btn-sm svelte-23dtxz" type="button"${attr("disabled", chat.pendingQuestion.status === "submitting" || chat.pendingQuestion.status === "answered" || chat.pendingQuestion.status === "rejected", true)}>Can't answer</button></div></div>`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--></div> <span class="typing-meta svelte-23dtxz">Assistant</span></div>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> <div aria-hidden="true" class="svelte-23dtxz"></div></section> `);
 		if (chat.error) {
 			$$renderer.push("<!--[0-->");
 			$$renderer.push(`<div class="chat-error-banner svelte-23dtxz" role="alert"><span class="svelte-23dtxz">${escape_html(chat.error)}</span> <button class="reconnect-btn svelte-23dtxz" type="button">Reconnect</button> <button class="dismiss-btn svelte-23dtxz" type="button" aria-label="Dismiss error">×</button></div>`);
 		} else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
 		ChatInput($$renderer, {
-			sending: chat.sending});
+			sending: chat.sending,
+			questionPending: !!chat.pendingQuestion && chat.pendingQuestion.questions.length === 1});
 		$$renderer.push(`<!----></div> <aside class="chat-side svelte-23dtxz" aria-label="Assistant and sessions"><section class="side-section svelte-23dtxz"><h2 class="side-heading svelte-23dtxz">Assistant</h2> `);
 		EndpointList($$renderer, {});
 		$$renderer.push(`<!----></section> <section class="side-section side-sessions svelte-23dtxz"><h2 class="side-heading svelte-23dtxz">Sessions</h2> `);
@@ -5521,4 +5708,4 @@ function _page($$renderer, $$props) {
 }
 
 export { _page as default };
-//# sourceMappingURL=_page.svelte-zSkk6PMh.js.map
+//# sourceMappingURL=_page.svelte-DD-cF_uw.js.map