@openpalm/ui 0.11.0-rc.16 → 0.11.0-rc.18

package/build/server/chunks/{AuthGate-CUCB24XJ.js → Navbar-lB4kFS7g.js}

@@ -1,31 +1,219 @@
-import { d as attr, r as escape_html, o as derived, e as attr_class, p as ensure_array_like } from './dev-B6xUe35c.js';
-import { o as onDestroy, p as page } from './state-C2hkWBTS.js';
-import { g as fetchEndpoints, p as setActiveEndpoint, n as listSessions, m as getSessionMessages, c as createSession, s as sendChatMessage, w as voiceState, r as speakText, t as stopSpeaking, d as destroyVoice, u as themeService } from './theme-state.svelte-CWo8vi7P.js';
+import { o as derived, r as escape_html, p as ensure_array_like, e as attr_class, d as attr, a8 as stringify, f as attr_style } from './dev-B6xUe35c.js';
+import { o as onDestroy, g as goto } from './client-BoEGJzYk.js';
+import { g as fetchEndpoints, m as setActiveEndpoint, l as listSessions, k as getSessionMessages, c as createSession, s as sendChatMessage, v as voiceState, p as speakText, q as stopSpeaking, d as destroyVoice, t as themeService } from './theme-state.svelte-CE13yM0n.js';
+import { p as page } from './state-C0rbnIhQ.js';
 import { S as Spinner } from './Spinner-Bk6e83RX.js';
 
-//#region src/lib/components/common/ThemeToggle.svelte
-function ThemeToggle($$renderer, $$props) {
-	$$renderer.component(($$renderer) => {
-		const isDark = derived(() => themeService.resolved === "dark");
-		const label = derived(() => isDark() ? "Switch to light mode" : "Switch to dark mode");
-		$$renderer.push(`<button type="button" class="theme-toggle svelte-1y2534t"${attr("aria-label", label())}${attr("aria-pressed", isDark())}${attr("title", label())}>`);
-		if (isDark()) {
+//#region src/lib/format-date.ts
+var TIME_FMT = new Intl.DateTimeFormat(void 0, {
+	hour: "numeric",
+	minute: "2-digit"
+});
+var DATE_TIME_FMT = new Intl.DateTimeFormat(void 0, {
+	year: "numeric",
+	month: "short",
+	day: "numeric",
+	hour: "numeric",
+	minute: "2-digit"
+});
+/** Time of day, e.g. "3:42 PM" (locale-aware). Empty string for a falsy input. */
+function formatTime(ts) {
+	if (!ts) return "";
+	return TIME_FMT.format(ts);
+}
+/**
+* Absolute date + time, e.g. "Jun 7, 2026, 3:42 PM". Use for tooltips / full
+* context where a relative label alone is ambiguous. Empty for a falsy input.
+*/
+function formatDateTime(ts) {
+	if (!ts) return "";
+	return DATE_TIME_FMT.format(ts);
+}
+/**
+* Compact relative time, e.g. "just now", "5m ago", "yesterday", "3w ago".
+* Empty string for a falsy input. No date-fns dependency — that would be ~30 KB
+* for these few cases.
+*/
+function formatRelativeTime(ts) {
+	if (!ts) return "";
+	const diffSec = Math.max(0, (Date.now() - ts) / 1e3);
+	if (diffSec < 60) return "just now";
+	const min = Math.floor(diffSec / 60);
+	if (min < 60) return `${min}m ago`;
+	const hr = Math.floor(min / 60);
+	if (hr < 24) return `${hr}h ago`;
+	const day = Math.floor(hr / 24);
+	if (day === 1) return "yesterday";
+	if (day < 7) return `${day}d ago`;
+	const wk = Math.floor(day / 7);
+	if (wk < 5) return `${wk}w ago`;
+	const mo = Math.floor(day / 30);
+	if (mo < 12) return `${mo}mo ago`;
+	return `${Math.floor(day / 365)}y ago`;
+}
+//#endregion
+//#region src/lib/components/common/IconButton.svelte
+function IconButton($$renderer, $$props) {
+	/** Icon contents (an inline <svg> or spinner). */
+	/** Optional visible label; when present the button grows from a square to a pill. */
+	/** Render as an anchor instead of a button when a destination is given. */
+	/** "On"/active look (used by ToggleButton and active states). */
+	/** Colour of the selected state. */
+	/** Mirrors the toggle state for assistive tech (set by ToggleButton). */
+	let { icon, label, title, ariaLabel, disabled = false, href, onclick, type = "button", selected = false, tone = "primary", ariaPressed } = $$props;
+	if (href) {
+		$$renderer.push("<!--[0-->");
+		$$renderer.push(`<a${attr_class("icon-btn svelte-vx1yib", void 0, {
+			"has-label": label,
+			"selected": selected,
+			"tone-danger": tone === "danger"
+		})}${attr("href", href)}${attr("title", title ?? ariaLabel ?? label)}${attr("aria-label", ariaLabel ?? label)}${attr("aria-disabled", disabled || void 0)}>`);
+		icon($$renderer);
+		$$renderer.push(`<!----> `);
+		if (label) {
 			$$renderer.push("<!--[0-->");
-			$$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"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>`);
-		} 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"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z"></path></svg>`);
-		}
+			$$renderer.push(`<span class="icon-btn-label svelte-vx1yib">${escape_html(label)}</span>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></a>`);
+	} else {
+		$$renderer.push("<!--[-1-->");
+		$$renderer.push(`<button${attr_class("icon-btn svelte-vx1yib", void 0, {
+			"has-label": label,
+			"selected": selected,
+			"tone-danger": tone === "danger"
+		})}${attr("type", type)}${attr("disabled", disabled, true)}${attr("title", title ?? ariaLabel ?? label)}${attr("aria-label", ariaLabel ?? label)}${attr("aria-pressed", ariaPressed)}>`);
+		icon($$renderer);
+		$$renderer.push(`<!----> `);
+		if (label) {
+			$$renderer.push("<!--[0-->");
+			$$renderer.push(`<span class="icon-btn-label svelte-vx1yib">${escape_html(label)}</span>`);
+		} else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--></button>`);
+	}
+	$$renderer.push(`<!--]-->`);
+}
+//#endregion
+//#region src/lib/components/common/ToggleButton.svelte
+function ToggleButton($$renderer, $$props) {
+	/** Icon shown when off (and when on, if no selectedIcon is given). */
+	/** Optional distinct icon shown when on. */
+	/** Colour of the on state. */
+	let { pressed, onToggle, icon, selectedIcon, label, title, ariaLabel, disabled = false, tone = "primary" } = $$props;
+	IconButton($$renderer, {
+		icon: pressed && selectedIcon ? selectedIcon : icon,
+		label,
+		title,
+		ariaLabel,
+		disabled,
+		tone,
+		selected: pressed,
+		ariaPressed: pressed,
+		onclick: onToggle
 	});
 }
 //#endregion
 //#region src/lib/components/chrome/ModeSwitch.svelte
+function advancedIcon($$renderer) {
+	$$renderer.push(`<svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><path d="m7 9 3 3-3 3"></path><line x1="13" y1="15" x2="17" y2="15"></line></svg>`);
+}
 function ModeSwitch($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
 		const pathname = derived(() => page.url?.pathname ?? "");
 		const onAdvanced = derived(() => pathname() === "/advanced" || pathname().startsWith("/advanced/"));
-		$$renderer.push(`<button type="button"${attr_class("advanced-toggle svelte-dn9fn0", void 0, { "active": onAdvanced() })}${attr("aria-pressed", onAdvanced())} title="Advanced mode (embedded OpenCode)" aria-label="Advanced mode"><svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svelte-dn9fn0"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><path d="m7 9 3 3-3 3"></path><line x1="13" y1="15" x2="17" y2="15"></line></svg> <span class="svelte-dn9fn0">Advanced</span></button>`);
+		function toggle() {
+			goto(onAdvanced() ? "/chat" : "/advanced");
+		}
+		ToggleButton($$renderer, {
+			pressed: onAdvanced(),
+			onToggle: toggle,
+			ariaLabel: "Advanced mode",
+			title: "Advanced mode (embedded OpenCode)",
+			icon: advancedIcon
+		});
+	});
+}
+//#endregion
+//#region src/lib/components/common/Drawer.svelte
+function Drawer($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		/** Optional content rendered at the start of the header (e.g. a back button). */
+		/** Drawer width (CSS length). */
+		let { open, title, onClose, children, footer, headerStart, width = "32rem" } = $$props;
+		if (open) {
+			$$renderer.push("<!--[0-->");
+			$$renderer.push(`<div class="drawer-scrim svelte-1u2o1qj"></div> <div class="drawer svelte-1u2o1qj"${attr_style(`--drawer-width: ${stringify(width)}`)} role="dialog" aria-modal="true"${attr("aria-label", title)} tabindex="-1"><header class="drawer-header svelte-1u2o1qj">`);
+			if (headerStart) {
+				$$renderer.push("<!--[0-->");
+				headerStart($$renderer);
+				$$renderer.push(`<!---->`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> <h3 class="drawer-title svelte-1u2o1qj">${escape_html(title)}</h3> <button class="drawer-close svelte-1u2o1qj" aria-label="Close"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></header> <div class="drawer-body svelte-1u2o1qj">`);
+			children($$renderer);
+			$$renderer.push(`<!----></div> `);
+			if (footer) {
+				$$renderer.push("<!--[0-->");
+				$$renderer.push(`<footer class="drawer-footer svelte-1u2o1qj">`);
+				footer($$renderer);
+				$$renderer.push(`<!----></footer>`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--></div>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]-->`);
+	});
+}
+//#endregion
+//#region src/lib/components/chrome/SettingsDrawer.svelte
+function gearIcon($$renderer) {
+	$$renderer.push(`<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`);
+}
+function SettingsDrawer($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let { showManageAssistant = true } = $$props;
+		let open = false;
+		function setTheme(event) {
+			const next = event.currentTarget.value;
+			if (next === "light" || next === "dark" || next === "system") themeService.setPreference(next);
+		}
+		IconButton($$renderer, {
+			icon: gearIcon,
+			ariaLabel: "Settings",
+			title: "Settings",
+			selected: open,
+			ariaPressed: open,
+			onclick: () => open = true
+		});
+		$$renderer.push(`<!----> `);
+		Drawer($$renderer, {
+			open,
+			title: "Settings",
+			onClose: () => open = false,
+			width: "24rem",
+			children: ($$renderer) => {
+				$$renderer.push(`<div class="settings-drawer svelte-4kbm5j"><label class="field svelte-4kbm5j" for="theme-preference"><span class="field-label svelte-4kbm5j">Theme</span> `);
+				$$renderer.select({
+					id: "theme-preference",
+					class: "field-select",
+					value: themeService.preference,
+					onchange: setTheme
+				}, ($$renderer) => {
+					$$renderer.option({ value: "system" }, ($$renderer) => {
+						$$renderer.push(`System`);
+					});
+					$$renderer.option({ value: "light" }, ($$renderer) => {
+						$$renderer.push(`Light`);
+					});
+					$$renderer.option({ value: "dark" }, ($$renderer) => {
+						$$renderer.push(`Dark`);
+					});
+				}, "svelte-4kbm5j");
+				$$renderer.push(`</label> <nav class="settings-links svelte-4kbm5j" aria-label="Settings links">`);
+				if (showManageAssistant) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<a class="settings-link svelte-4kbm5j" href="/admin">Manage this assistant...</a>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> <a class="settings-link svelte-4kbm5j" href="/admin/endpoints">Manage assistant connections...</a></nav></div>`);
+			}});
+		$$renderer.push(`<!---->`);
 	});
 }
 //#endregion
@@ -533,30 +721,97 @@ var EndpointsService = class {
 };
 var endpointsService = new EndpointsService();
 //#endregion
-//#region src/lib/components/chat/EndpointSwitcher.svelte
-function EndpointSwitcher($$renderer, $$props) {
+//#region src/lib/assistant-endpoint.ts
+function isLocalAssistantUrl(url) {
+	if (!url) return true;
+	try {
+		const host = new URL(url).hostname;
+		return host === "localhost" || host === "127.0.0.1" || host === "::1" || host === "host.docker.internal";
+	} catch {
+		return true;
+	}
+}
+//#endregion
+//#region src/lib/components/chat/EndpointList.svelte
+function EndpointList($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
-		const menuId = "endpoint-menu";
-		let switching = false;
-		let isOpen = false;
+		/** Called after the active endpoint changes (e.g. to close the drawer). */
+		let { onChosen } = $$props;
 		const active = derived(() => endpointsService.active);
 		const endpoints = derived(() => endpointsService.endpoints);
-		const hasChoices = derived(() => endpoints().length > 1);
-		$$renderer.push(`<div class="switcher svelte-48xr05"><button type="button" class="trigger svelte-48xr05" id="endpoint-trigger"${attr("popovertarget", hasChoices() ? menuId : void 0)} aria-haspopup="menu"${attr("aria-expanded", isOpen)}${attr("aria-controls", menuId)}${attr("aria-label", active() ? `Assistant endpoint: ${active().label}` : "Assistant endpoints")}${attr("title", active() ? `Connected to: ${active().label} (${active().url})` : "Assistant endpoints")}${attr("disabled", endpointsService.loading, true)}><svg class="trigger-icon svelte-48xr05" aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg> <span class="dot svelte-48xr05" aria-hidden="true"></span> <span class="label svelte-48xr05">${escape_html(active()?.label ?? "Endpoint…")}</span> <span class="caret svelte-48xr05" aria-hidden="true">▾</span></button> <div${attr("id", menuId)} class="menu svelte-48xr05" popover="auto" role="menu" tabindex="-1"><div class="menu-header svelte-48xr05">Assistant endpoint</div> <!--[-->`);
+		const showManageAssistant = derived(() => isLocalAssistantUrl(active()?.url));
+		let switching = false;
+		$$renderer.push(`<div class="endpoint-list svelte-dlw00e">`);
+		if (endpointsService.error) {
+			$$renderer.push("<!--[0-->");
+			$$renderer.push(`<p class="list-error svelte-dlw00e" role="alert">${escape_html(endpointsService.error)}</p>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> <div class="group" role="group" aria-label="Assistant endpoints"><!--[-->`);
 		const each_array = ensure_array_like(endpoints());
 		for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
 			let ep = each_array[$$index];
-			$$renderer.push(`<button type="button"${attr_class("menu-item svelte-48xr05", void 0, { "active": ep.id === active()?.id })} role="menuitemradio"${attr("aria-checked", ep.id === active()?.id)}${attr("popovertarget", menuId)} popovertargetaction="hide"${attr("disabled", switching, true)}><span class="check svelte-48xr05" aria-hidden="true">${escape_html(ep.id === active()?.id ? "●" : "○")}</span> <span class="menu-item-text svelte-48xr05"><span class="menu-item-label svelte-48xr05">${escape_html(ep.label)}</span> <span class="menu-item-url svelte-48xr05">${escape_html(ep.url)}</span></span></button>`);
+			$$renderer.push(`<button type="button"${attr_class("list-item svelte-dlw00e", void 0, { "active": ep.id === active()?.id })}${attr("aria-current", ep.id === active()?.id ? "true" : void 0)}${attr("disabled", switching, true)}><span class="item-text svelte-dlw00e"><span class="item-label svelte-dlw00e">${escape_html(ep.label)}`);
+			if (ep.id === active()?.id) {
+				$$renderer.push("<!--[0-->");
+				$$renderer.push(`<span class="sr-only svelte-dlw00e">(current)</span>`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--></span> <span class="item-url svelte-dlw00e">${escape_html(ep.url)}</span></span></button>`);
 		}
-		$$renderer.push(`<!--]--> <div class="menu-divider svelte-48xr05"></div> <a class="menu-item link svelte-48xr05" href="/admin/endpoints" role="menuitem">Manage endpoints…</a></div></div>`);
+		$$renderer.push(`<!--]--></div> <div class="divider svelte-dlw00e"></div> `);
+		if (showManageAssistant()) {
+			$$renderer.push("<!--[0-->");
+			$$renderer.push(`<a class="list-item link svelte-dlw00e" href="/admin">Manage this assistant…</a>`);
+		} else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> <a class="list-item link svelte-dlw00e" href="/admin/endpoints">Manage assistant connections…</a></div>`);
 	});
 }
 //#endregion
-//#region src/lib/components/chat/SessionPicker.svelte
-function SessionPicker($$renderer, $$props) {
+//#region src/lib/components/chat/EndpointSwitcher.svelte
+function EndpointSwitcher($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let open = false;
+		const active = derived(() => endpointsService.active);
+		$$renderer.push(`<button type="button" class="trigger svelte-48xr05" aria-haspopup="dialog"${attr("aria-expanded", open)}${attr("aria-label", active() ? `Assistant endpoint: ${active().label}` : "Assistant endpoints")}${attr("title", active() ? `Connected to: ${active().label} (${active().url})` : "Assistant endpoints")}${attr("disabled", endpointsService.loading, true)}><svg class="trigger-icon svelte-48xr05" aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg> <span class="dot svelte-48xr05" aria-hidden="true"></span> <span class="label svelte-48xr05">${escape_html(active()?.label ?? "Endpoint…")}</span> <span class="caret svelte-48xr05" aria-hidden="true">▾</span></button> `);
+		Drawer($$renderer, {
+			open,
+			title: "Assistant endpoint",
+			onClose: () => open = false,
+			width: "26rem",
+			children: ($$renderer) => {
+				EndpointList($$renderer, { onChosen: () => open = false });
+			}});
+		$$renderer.push(`<!---->`);
+	});
+}
+//#endregion
+//#region src/lib/session-title.ts
+var DEFAULT_TITLE_RE = /^New session - (\d{4}-\d{2}-\d{2}T[0-9:.]+Z?)$/;
+/** Resolve a session's display title. */
+function resolveSessionTitle(title) {
+	const trimmed = (title ?? "").trim();
+	if (!trimmed) return "Untitled session";
+	const match = DEFAULT_TITLE_RE.exec(trimmed);
+	if (match) {
+		const ts = Date.parse(match[1]);
+		if (!Number.isNaN(ts)) return formatDateTime(ts);
+	}
+	return trimmed;
+}
+//#endregion
+//#region src/lib/components/chat/SessionTitle.svelte
+function SessionTitle($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let { title } = $$props;
+		const display = derived(() => resolveSessionTitle(title));
+		$$renderer.push(`<!---->${escape_html(display())}`);
+	});
+}
+//#endregion
+//#region src/lib/components/chat/SessionList.svelte
+function SessionList($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
-		const menuId = "session-menu";
-		let isOpen = false;
+		/** Called after a session is opened or started (e.g. to close the drawer). */
+		let { onChosen } = $$props;
 		const SESSION_LIST_CAP = 50;
 		const active = derived(() => endpointsService.active);
 		const endpointState = derived(() => active() ? chat.byEndpoint.get(active().id) ?? null : null);
@@ -564,72 +819,72 @@ function SessionPicker($$renderer, $$props) {
 		const loading = derived(() => endpointState()?.sessionsLoading ?? false);
 		const error = derived(() => endpointState()?.sessionsError ?? "");
 		const activeSessionId = derived(() => chat.activeSessionId);
-		const activeSummary = derived(() => sessions().find((s) => s.id === activeSessionId()) ?? null);
-		const triggerLabel = derived(() => activeSummary() ? activeSummary().title || `Untitled · ${formatRelative(activeSummary().updatedAt)}` : "New session");
-		/**
-		* Live-updates indicator. True when the chat service's SSE stream to
-		* `/proxy/assistant/event` is connected — out-of-band session changes
-		* (CLI, other clients) will flow through. Shown as a tiny dot so the
-		* operator can tell at a glance whether the picker is reactive or
-		* snapshot.
-		*/
-		const liveConnected = derived(() => chat.liveConnected);
 		const visibleSessions = derived(() => sessions().slice(0, SESSION_LIST_CAP));
 		const overflowCount = derived(() => Math.max(0, sessions().length - SESSION_LIST_CAP));
-		/**
-		* Tiny relative-time helper. No date-fns dep — that would be ~30 KB for
-		* 4 cases.
-		*/
-		function formatRelative(ts) {
-			if (!ts) return "";
-			const diffSec = Math.max(0, (Date.now() - ts) / 1e3);
-			if (diffSec < 60) return "just now";
-			const min = Math.floor(diffSec / 60);
-			if (min < 60) return `${min}m ago`;
-			const hr = Math.floor(min / 60);
-			if (hr < 24) return `${hr}h ago`;
-			const day = Math.floor(hr / 24);
-			if (day === 1) return "yesterday";
-			if (day < 7) return `${day}d ago`;
-			const wk = Math.floor(day / 7);
-			if (wk < 5) return `${wk}w ago`;
-			const mo = Math.floor(day / 30);
-			if (mo < 12) return `${mo}mo ago`;
-			return `${Math.floor(day / 365)}y ago`;
-		}
-		$$renderer.push(`<div class="picker svelte-cihcnl"><button type="button" class="trigger svelte-cihcnl" id="session-trigger"${attr("popovertarget", menuId)} aria-haspopup="menu"${attr("aria-expanded", isOpen)}${attr("aria-controls", menuId)} aria-label="Sessions"${attr("title", triggerLabel())}><svg class="trigger-icon svelte-cihcnl" aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"></path><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path></svg> <span${attr_class("dot svelte-cihcnl", void 0, { "connected": liveConnected() })} aria-hidden="true"${attr("title", liveConnected() ? "Live updates connected" : "Live updates disconnected")}></span> <span class="label svelte-cihcnl">${escape_html(triggerLabel())}</span> <span class="caret svelte-cihcnl" aria-hidden="true">▾</span></button> <div${attr("id", menuId)} class="menu svelte-cihcnl" popover="auto" role="menu" tabindex="-1"><div class="menu-header svelte-cihcnl">Sessions on ${escape_html(active()?.label ?? "this endpoint")}</div> `);
+		$$renderer.push(`<div class="session-body svelte-1o6rxhb">`);
 		if (chat.sending) {
 			$$renderer.push("<!--[0-->");
-			$$renderer.push(`<div class="notice svelte-cihcnl">Wait for the current reply to finish before switching.</div>`);
+			$$renderer.push(`<div class="notice svelte-1o6rxhb">Wait for the current reply to finish before switching.</div>`);
 		} else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> <button type="button" class="menu-item new-btn svelte-cihcnl" role="menuitem"${attr("popovertarget", menuId)} popovertargetaction="hide"${attr("disabled", chat.sending, true)}><span class="check svelte-cihcnl" aria-hidden="true">+</span> <span class="menu-item-text svelte-cihcnl"><span class="menu-item-label svelte-cihcnl">New session</span></span></button> <div class="menu-divider svelte-cihcnl"></div> `);
+		$$renderer.push(`<!--]--> `);
 		if (loading()) {
 			$$renderer.push("<!--[0-->");
-			$$renderer.push(`<div class="empty svelte-cihcnl">`);
+			$$renderer.push(`<div class="empty svelte-1o6rxhb">`);
 			Spinner($$renderer, { size: 12 });
-			$$renderer.push(`<!----> <span>Loading sessions…</span></div>`);
+			$$renderer.push(`<!----><span>Loading sessions…</span></div>`);
 		} else if (error()) {
 			$$renderer.push("<!--[1-->");
-			$$renderer.push(`<div class="error svelte-cihcnl"><span class="svelte-cihcnl">${escape_html(error())}</span> <button type="button" class="retry-btn svelte-cihcnl">Retry</button></div>`);
+			$$renderer.push(`<div class="list-error svelte-1o6rxhb"><span class="svelte-1o6rxhb">${escape_html(error())}</span> <button type="button" class="retry-btn svelte-1o6rxhb">Retry</button></div>`);
 		} else if (sessions().length === 0) {
 			$$renderer.push("<!--[2-->");
-			$$renderer.push(`<div class="empty svelte-cihcnl">No sessions yet. Start the first one.</div>`);
+			$$renderer.push(`<div class="empty svelte-1o6rxhb">No sessions yet. Start the first one.</div>`);
 		} else {
 			$$renderer.push("<!--[-1-->");
-			$$renderer.push(`<div class="session-list svelte-cihcnl" role="none"><!--[-->`);
+			$$renderer.push(`<div class="session-list svelte-1o6rxhb" role="group" aria-label="Sessions"><!--[-->`);
 			const each_array = ensure_array_like(visibleSessions());
 			for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
 				let s = each_array[$$index];
-				$$renderer.push(`<button type="button"${attr_class("menu-item session-item svelte-cihcnl", void 0, { "active": s.id === activeSessionId() })} role="menuitemradio"${attr("aria-checked", s.id === activeSessionId())}${attr("popovertarget", menuId)} popovertargetaction="hide"${attr("disabled", chat.sending, true)}><span class="check svelte-cihcnl" aria-hidden="true">${escape_html(s.id === activeSessionId() ? "●" : "○")}</span> <span class="menu-item-text svelte-cihcnl"><span class="menu-item-label svelte-cihcnl">${escape_html(s.title || "Untitled")}</span> <span class="menu-item-meta svelte-cihcnl">${escape_html(formatRelative(s.updatedAt))}</span></span></button>`);
+				$$renderer.push(`<button type="button"${attr_class("list-item session-item svelte-1o6rxhb", void 0, { "active": s.id === activeSessionId() })}${attr("aria-current", s.id === activeSessionId() ? "true" : void 0)}${attr("disabled", chat.sending, true)}${attr("title", formatDateTime(s.updatedAt))}><span class="item-text svelte-1o6rxhb"><span class="item-label svelte-1o6rxhb">`);
+				SessionTitle($$renderer, { title: s.title });
+				$$renderer.push(`<!---->`);
+				if (s.id === activeSessionId()) {
+					$$renderer.push("<!--[0-->");
+					$$renderer.push(`<span class="sr-only svelte-1o6rxhb">(current)</span>`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--></span> <span class="item-meta svelte-1o6rxhb">${escape_html(formatRelativeTime(s.updatedAt))}</span></span></button>`);
 			}
 			$$renderer.push(`<!--]--></div> `);
 			if (overflowCount() > 0) {
 				$$renderer.push("<!--[0-->");
-				$$renderer.push(`<button type="button" class="show-all svelte-cihcnl">Show all (${escape_html(overflowCount())} more)</button>`);
+				$$renderer.push(`<button type="button" class="show-all svelte-1o6rxhb">Show all (${escape_html(overflowCount())} more)</button>`);
 			} else $$renderer.push("<!--[-1-->");
 			$$renderer.push(`<!--]-->`);
 		}
-		$$renderer.push(`<!--]--></div></div>`);
+		$$renderer.push(`<!--]--> <div class="divider svelte-1o6rxhb"></div> <button type="button" class="list-item new-btn svelte-1o6rxhb"${attr("disabled", chat.sending, true)}><span class="check svelte-1o6rxhb" aria-hidden="true">+</span> <span class="item-text svelte-1o6rxhb"><span class="item-label svelte-1o6rxhb">New session</span></span></button></div>`);
+	});
+}
+//#endregion
+//#region src/lib/components/chat/SessionPicker.svelte
+function SessionPicker($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let open = false;
+		const active = derived(() => endpointsService.active);
+		const endpointState = derived(() => active() ? chat.byEndpoint.get(active().id) ?? null : null);
+		const sessions = derived(() => endpointState()?.sessions ?? []);
+		const activeSessionId = derived(() => chat.activeSessionId);
+		const liveConnected = derived(() => chat.liveConnected);
+		const activeSummary = derived(() => sessions().find((s) => s.id === activeSessionId()) ?? null);
+		const triggerLabel = derived(() => activeSummary() ? resolveSessionTitle(activeSummary().title) : "New session");
+		$$renderer.push(`<button type="button" class="trigger svelte-cihcnl" aria-haspopup="dialog"${attr("aria-expanded", open)} aria-label="Sessions"${attr("title", triggerLabel())}><svg class="trigger-icon svelte-cihcnl" aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"></path><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path></svg> <span${attr_class("dot svelte-cihcnl", void 0, { "connected": liveConnected() })} aria-hidden="true"${attr("title", liveConnected() ? "Live updates connected" : "Live updates disconnected")}></span> <span class="label svelte-cihcnl">${escape_html(triggerLabel())}</span> <span class="caret svelte-cihcnl" aria-hidden="true">▾</span></button> `);
+		Drawer($$renderer, {
+			open,
+			title: `Sessions on ${stringify(active()?.label ?? "this endpoint")}`,
+			onClose: () => open = false,
+			width: "26rem",
+			children: ($$renderer) => {
+				SessionList($$renderer, { onChosen: () => open = false });
+			}});
+		$$renderer.push(`<!---->`);
 	});
 }
 //#endregion
@@ -638,7 +893,11 @@ function VoiceControl($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
 		const MAX_INTERIM_CHARS = 48;
 		let mounted = false;
+		let removeGlobalMicToggle = null;
 		onDestroy(() => {
+			window.openpalm?.setTrayMicRecording?.(false);
+			removeGlobalMicToggle?.();
+			removeGlobalMicToggle = null;
 			destroyVoice();
 		});
 		let supported = derived(() => mounted);
@@ -696,68 +955,49 @@ function VoiceControl($$renderer, $$props) {
 }
 //#endregion
 //#region src/lib/components/chrome/Navbar.svelte
+function chatIcon($$renderer) {
+	$$renderer.push(`<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`);
+}
 function Navbar($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
 		const pathname = derived(() => page.url?.pathname ?? "");
 		const onAdmin = derived(() => pathname() === "/admin" || pathname().startsWith("/admin/"));
-		const onChatSurface = derived(() => pathname() === "/chat" || pathname().startsWith("/chat/") || pathname() === "/advanced" || pathname().startsWith("/advanced/"));
-		let startingNew = false;
+		const onChatSurface = derived(() => pathname() === "/chat" || pathname().startsWith("/chat/"));
+		const onAdvancedSurface = derived(() => pathname() === "/advanced" || pathname().startsWith("/advanced/"));
 		const isLocalAssistant = derived(() => {
-			const url = endpointsService.active?.url ?? "";
-			if (!url) return true;
-			try {
-				const host = new URL(url).hostname;
-				return host === "localhost" || host === "127.0.0.1" || host === "::1" || host === "host.docker.internal";
-			} catch {
-				return true;
-			}
+			return isLocalAssistantUrl(endpointsService.active?.url);
 		});
-		$$renderer.push(`<header class="navbar svelte-66bgq1"><div class="navbar-inner svelte-66bgq1"><a class="navbar-brand svelte-66bgq1" href="/chat" aria-label="OpenPalm — go to chat"><span class="brand-icon svelte-66bgq1" aria-hidden="true"><img src="/logo-128.png" alt="" class="svelte-66bgq1"/></span> <span class="brand-text svelte-66bgq1">OpenPalm</span></a> `);
-		if (onChatSurface()) {
-			$$renderer.push("<!--[0-->");
-			ModeSwitch($$renderer);
-		} else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> <div class="navbar-actions svelte-66bgq1">`);
+		$$renderer.push(`<header class="navbar svelte-66bgq1"><div class="navbar-inner svelte-66bgq1"><a class="navbar-brand svelte-66bgq1" href="/chat" aria-label="OpenPalm — go to chat"><span class="brand-icon svelte-66bgq1" aria-hidden="true"><img src="/logo-128.png" alt="" class="svelte-66bgq1"/></span> <span class="brand-text svelte-66bgq1">OpenPalm</span></a> <div class="navbar-actions svelte-66bgq1">`);
 		if (onAdmin()) {
 			$$renderer.push("<!--[0-->");
-			$$renderer.push(`<a href="/chat" class="gear-btn svelte-66bgq1" aria-label="Back to chat" title="Chat"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svelte-66bgq1"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></a>`);
-		} else if (isLocalAssistant()) {
-			$$renderer.push("<!--[1-->");
-			$$renderer.push(`<a href="/admin" class="gear-btn svelte-66bgq1" aria-label="Settings &amp; administration" title="Manage this machine"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svelte-66bgq1"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></a>`);
+			IconButton($$renderer, {
+				href: "/chat",
+				ariaLabel: "Back to chat",
+				title: "Chat",
+				icon: chatIcon
+			});
 		} else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
-		EndpointSwitcher($$renderer);
-		$$renderer.push(`<!----> `);
-		SessionPicker($$renderer);
-		$$renderer.push(`<!----> <button type="button" class="newchat-btn svelte-66bgq1"${attr("disabled", startingNew, true)} aria-label="Start a new chat" title="New chat"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svelte-66bgq1"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg></button> `);
-		ThemeToggle($$renderer);
+		SettingsDrawer($$renderer, { showManageAssistant: isLocalAssistant() });
 		$$renderer.push(`<!----> `);
-		VoiceControl($$renderer);
-		$$renderer.push(`<!----></div></div></header>`);
-	});
-}
-//#endregion
-//#region src/lib/components/common/AuthGate.svelte
-function AuthGate($$renderer, $$props) {
-	$$renderer.component(($$renderer) => {
-		let { onSuccess, loading, error } = $$props;
-		let tokenInput = "";
-		$$renderer.push(`<main class="auth-gate svelte-zhbyfn" aria-label="Admin login gate"><section class="auth-card svelte-zhbyfn"><div class="auth-brand svelte-zhbyfn"><span class="brand-icon svelte-zhbyfn"><img src="/logo-128.png" alt="OpenPalm Logo" class="svelte-zhbyfn"/></span> <div><h1 class="svelte-zhbyfn">OpenPalm Console</h1> <p class="svelte-zhbyfn">Enter your admin password to unlock the control plane.</p></div></div> <form class="auth-form svelte-zhbyfn"><label for="admin-token" class="svelte-zhbyfn">Admin Password</label> <input type="text" name="username" autocomplete="username" value="admin" class="sr-only svelte-zhbyfn" tabindex="-1" aria-hidden="true"/> <div class="token-input-wrapper svelte-zhbyfn"><input id="admin-token" name="admin-token"${attr("type", "password")}${attr("value", tokenInput)} placeholder="Enter admin password" autocomplete="current-password" class="svelte-zhbyfn"/> <button type="button" class="btn-toggle svelte-zhbyfn"${attr("aria-label", "Show token")}>`);
-		$$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"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>`);
-		$$renderer.push(`<!--]--></button></div> `);
-		if (error) {
+		if (onChatSurface()) {
 			$$renderer.push("<!--[0-->");
-			$$renderer.push(`<p class="auth-error svelte-zhbyfn" role="alert">${escape_html(error)}</p>`);
+			$$renderer.push(`<span class="chat-selectors svelte-66bgq1">`);
+			EndpointSwitcher($$renderer);
+			$$renderer.push(`<!----> `);
+			SessionPicker($$renderer);
+			$$renderer.push(`<!----></span>`);
 		} else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> <button class="btn btn-primary" type="submit"${attr("disabled", loading || !tokenInput.trim(), true)}>`);
-		if (loading) {
+		$$renderer.push(`<!--]--> `);
+		if (onChatSurface() || onAdvancedSurface()) {
 			$$renderer.push("<!--[0-->");
-			Spinner($$renderer, {});
+			ModeSwitch($$renderer);
 		} else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--> Unlock Console</button></form></section></main>`);
+		$$renderer.push(`<!--]--> `);
+		VoiceControl($$renderer);
+		$$renderer.push(`<!----></div></div></header>`);
 	});
 }
 
-export { AuthGate as A, Navbar as N, chat as c, endpointsService as e };
-//# sourceMappingURL=AuthGate-CUCB24XJ.js.map
+export { EndpointList as E, IconButton as I, Navbar as N, SessionList as S, chat as c, endpointsService as e, formatTime as f };
+//# sourceMappingURL=Navbar-lB4kFS7g.js.map