@oxy-hq/sdk 2.4.0 → 2.5.0

package/dist/shell.cjs

@@ -1,6 +1,6 @@
 // @oxy/sdk - TypeScript SDK for Oxy data platform
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_react = require('./react-B7Blpmt7.cjs');
+const require_react = require('./react-BeweGSYF.cjs');
 let react = require("react");
 react = require_react.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -1189,6 +1189,38 @@ function HistoryIcon() {
 		]
 	});
 }
+function SearchIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "11",
+			cy: "11",
+			r: "8"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" })]
+	});
+}
+function ThreadIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: "15",
+		height: "15",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" })]
+	});
+}
 function ExternalIcon() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		width: "14",
@@ -1240,6 +1272,26 @@ function StopIcon() {
 function chartsFrom(events) {
 	return events.filter((ev) => ev.type === "chart_rendered").map((ev) => ev.data).filter((b) => b?.config && Array.isArray(b.columns) && Array.isArray(b.rows));
 }
+/** History label: a relative "N minutes/hours/days ago" for when the
+*  conversation was started. */
+function formatHistoryTime(iso) {
+	const d = new Date(iso);
+	if (Number.isNaN(d.getTime())) return "";
+	const s = Math.max(0, Math.round((Date.now() - d.getTime()) / 1e3));
+	if (s < 45) return "just now";
+	const min = Math.round(s / 60);
+	if (min < 60) return `${min} minute${min === 1 ? "" : "s"} ago`;
+	const hr = Math.round(s / 3600);
+	if (hr < 24) return `${hr} hour${hr === 1 ? "" : "s"} ago`;
+	const day = Math.round(s / 86400);
+	if (day < 30) return `${day} day${day === 1 ? "" : "s"} ago`;
+	const mo = Math.round(day / 30);
+	if (mo < 12) return `${mo} month${mo === 1 ? "" : "s"} ago`;
+	const yr = Math.round(day / 365);
+	return `${yr} year${yr === 1 ? "" : "s"} ago`;
+}
+/** How many history rows to show before the "Show more" button. */
+const HISTORY_PAGE_SIZE = 12;
 /** Rebuild a completed turn from a transcript turn's processed events —
 *  identical to what the live dock accumulates during a run. */
 function turnFromEvents(question, events) {
@@ -1265,9 +1317,12 @@ function AskDock({ agentId, workspaceName, suggestions = [], threadsHref, open,
 	const [threadId, setThreadId] = react.useState(null);
 	const [history, setHistory] = react.useState([]);
 	const [historyOpen, setHistoryOpen] = react.useState(false);
+	const [historyQuery, setHistoryQuery] = react.useState("");
+	const [historyShown, setHistoryShown] = react.useState(HISTORY_PAGE_SIZE);
 	const [restoring, setRestoring] = react.useState(false);
 	const scrollRef = react.useRef(null);
 	const restoreGenRef = react.useRef(0);
+	const startedAtRef = react.useRef(null);
 	const busy = run.state === "running";
 	const liveSteps = react.useMemo(() => buildTraceSteps(run.events), [run.events]);
 	const liveLlm = react.useMemo(() => aggregateLlmStats(run.events), [run.events]);
@@ -1291,7 +1346,8 @@ function AskDock({ agentId, workspaceName, suggestions = [], threadsHref, open,
 			id: threadId ?? all[0].question,
 			title: all[0].question,
 			turns: all,
-			threadId
+			threadId,
+			createdAt: startedAtRef.current ?? (/* @__PURE__ */ new Date()).toISOString()
 		};
 	};
 	const resetToEmpty = () => {
@@ -1301,6 +1357,7 @@ function AskDock({ agentId, workspaceName, suggestions = [], threadsHref, open,
 		setPending(null);
 		setDraft("");
 		setThreadId(null);
+		startedAtRef.current = null;
 	};
 	const newChat = () => {
 		const snap = snapshotCurrent();
@@ -1334,6 +1391,7 @@ function AskDock({ agentId, workspaceName, suggestions = [], threadsHref, open,
 		setPending(null);
 		setDraft("");
 		setThreadId(id);
+		startedAtRef.current = serverThreads.find((t) => t.id === id)?.created_at ?? (/* @__PURE__ */ new Date()).toISOString();
 		setHistoryOpen(false);
 		setRestoring(true);
 		try {
@@ -1348,6 +1406,7 @@ function AskDock({ agentId, workspaceName, suggestions = [], threadsHref, open,
 		const question = raw.trim();
 		if (!question || busy) return;
 		restoreGenRef.current += 1;
+		if (startedAtRef.current === null) startedAtRef.current = (/* @__PURE__ */ new Date()).toISOString();
 		if (pending !== null) {
 			const finalized = finalizedPendingTurn();
 			if (finalized) setTurns((t) => [...t, finalized]);
@@ -1363,16 +1422,31 @@ function AskDock({ agentId, workspaceName, suggestions = [], threadsHref, open,
 	});
 	const empty = pending === null && turns.length === 0;
 	const canNewChat = !empty;
-	const historyEntries = [...history.filter((c) => c.id !== threadId).map((c) => ({
+	const currentId = threadId ?? turns[0]?.question ?? pending ?? null;
+	const historyEntries = [...history.map((c) => ({
 		id: c.id,
 		title: c.title,
-		meta: `${c.turns.length} message${c.turns.length === 1 ? "" : "s"}`,
-		onOpen: () => openConversation(c)
-	})), ...serverThreads.filter((t) => t.id !== threadId && !history.some((c) => c.id === t.id)).map((t) => ({
+		createdAt: c.createdAt,
+		active: c.id === currentId,
+		onOpen: c.id === currentId ? () => setHistoryOpen(false) : () => openConversation(c)
+	})), ...serverThreads.filter((t) => !history.some((c) => c.id === t.id)).map((t) => ({
 		id: t.id,
 		title: t.title,
-		onOpen: () => void openServerThread(t.id)
+		createdAt: t.created_at,
+		active: t.id === currentId,
+		onOpen: t.id === currentId ? () => setHistoryOpen(false) : () => void openServerThread(t.id)
 	}))];
+	if (!empty && currentId != null && !historyEntries.some((e) => e.id === currentId)) historyEntries.push({
+		id: currentId,
+		title: turns[0]?.question ?? pending ?? currentId,
+		createdAt: startedAtRef.current ?? (/* @__PURE__ */ new Date()).toISOString(),
+		active: true,
+		onOpen: () => setHistoryOpen(false)
+	});
+	historyEntries.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+	const q = historyQuery.trim().toLowerCase();
+	const filteredEntries = q ? historyEntries.filter((e) => e.title.toLowerCase().includes(q)) : historyEntries;
+	const visibleEntries = filteredEntries.slice(0, historyShown);
 	const placeholder = run.state === "needs_clarification" ? "Reply…" : pending !== null ? "Ask a follow-up…" : `Ask Oxygen anything about ${workspaceName ?? "your workspace"}…`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
 		className: cx("oxy-shell-scope oxy-askdock", !open && "oxy-askdock--closed", className),
@@ -1405,7 +1479,11 @@ function AskDock({ agentId, workspaceName, suggestions = [], threadsHref, open,
 							onClick: () => {
 								const next = !historyOpen;
 								setHistoryOpen(next);
-								if (next) refetchHistory();
+								if (next) {
+									refetchHistory();
+									setHistoryQuery("");
+									setHistoryShown(HISTORY_PAGE_SIZE);
+								}
 							},
 							"data-testid": "askdock-history",
 							"aria-label": "Chat history",
@@ -1430,24 +1508,51 @@ function AskDock({ agentId, workspaceName, suggestions = [], threadsHref, open,
 					]
 				})
 			]
-		}), historyOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}), historyOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "oxy-askdock__history",
 			"data-testid": "askdock-history-panel",
-			children: historyEntries.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "oxy-askdock__history-search",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "text",
+					className: "oxy-askdock__history-searchinput",
+					placeholder: "Search threads…",
+					value: historyQuery,
+					onChange: (e) => {
+						setHistoryQuery(e.target.value);
+						setHistoryShown(HISTORY_PAGE_SIZE);
+					},
+					"aria-label": "Search threads"
+				})]
+			}), visibleEntries.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "oxy-askdock__history-empty",
-				children: "No previous chats yet."
-			}) : historyEntries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				children: historyQuery ? "No matching chats." : "No previous chats yet."
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [visibleEntries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
-				className: "oxy-askdock__history-item",
+				className: cx("oxy-askdock__history-item", entry.active && "oxy-askdock__history-item--active"),
 				onClick: entry.onOpen,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "oxy-askdock__history-title",
-					children: entry.title
-				}), entry.meta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "oxy-askdock__history-meta",
-					children: entry.meta
-				})]
-			}, entry.id))
+				title: entry.title,
+				"aria-current": entry.active ? "true" : void 0,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "oxy-askdock__history-icon",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadIcon, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "oxy-askdock__history-title",
+						children: entry.title
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "oxy-askdock__history-time",
+						children: formatHistoryTime(entry.createdAt)
+					})
+				]
+			}, entry.id)), filteredEntries.length > visibleEntries.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "oxy-askdock__history-more",
+				onClick: () => setHistoryShown((n) => n + HISTORY_PAGE_SIZE),
+				children: "Show more"
+			})] })]
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "oxy-askdock__scroll",
 			ref: scrollRef,
@@ -1907,25 +2012,6 @@ function MessagesIcon() {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M16 10a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 9a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" })]
 	});
 }
-/** Settings glyph (lucide "settings" outline, inlined). */
-function GearIcon() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		width: "16",
-		height: "16",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-			cx: "12",
-			cy: "12",
-			r: "3"
-		})]
-	});
-}
 /** Rewrite a shell-context relative product path to an absolute URL against
 *  the oxy origin, when one is configured. `/api/*` paths are left relative
 *  — they ride the host's same-origin fetch / dev proxy (which attaches
@@ -1968,8 +2054,15 @@ function buildRailGroups(data, currentAppSlug, abs) {
 * The workspace chrome around a customer app: icon rail + universal top bar
 * + content column — visually identical to the main web-app shell.
 */
-function OxyShell({ children, pageLabel, topBarLeft, topBarExtra, railBottom, hideTopBar, askHotkey = true, productBaseUrl, className }) {
+function OxyShell({ children, pageLabel, topBarLeft, topBarExtra, railBottom, hideTopBar, askHotkey = true, productBaseUrl, className, chromeBackground, chromeForeground }) {
 	const abs = makeAbs(productBaseUrl);
+	const chromeStyle = {
+		...chromeBackground ? { "--sidebar-background": chromeBackground } : {},
+		...chromeForeground ? {
+			"--foreground": chromeForeground,
+			"--muted-foreground": `color-mix(in srgb, ${chromeForeground} 65%, transparent)`
+		} : {}
+	};
 	const { appSlug } = require_react.useOxyApp();
 	const { manifest } = require_react.useResolvedManifest();
 	const { data, loading } = useShellContext();
@@ -1992,22 +2085,13 @@ function OxyShell({ children, pageLabel, topBarLeft, topBarExtra, railBottom, hi
 		window.addEventListener("keydown", onKey);
 		return () => window.removeEventListener("keydown", onKey);
 	}, [askAgent, askHotkey]);
-	const settingsEntry = data?.links.settings ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShellTooltip, {
-		content: "Settings",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-			href: abs(data.links.settings),
-			"aria-label": "Settings",
-			"data-testid": "rail-settings",
-			className: "oxy-rail__item",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GearIcon, {})
-		})
-	}) : null;
-	const bottom = railBottom || settingsEntry ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [railBottom, settingsEntry] }) : void 0;
+	const bottom = railBottom;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShellPortalContext.Provider, {
 		value: container,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: setContainer,
 			className: cx("oxy-shell-scope oxy-shell", degraded && "oxy-shell--degraded", className),
+			style: chromeStyle,
 			children: [
 				!degraded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShellRail, {
 					top: data ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceTile, {