@camstack/ui-library 1.2.378 → 1.2.379

package/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.379] - 2026-11-03
+
+### Changed
+
+- LogStream can offer an Origin filter (all / viewer app)
+- Select keeps its themed background and text colour whatever a caller passes, and native option lists follow the theme, so dropdown options are readable in dark mode
+
 ## [1.2.378] - 2026-11-03
 
 ### Changed

package/dist/composites/log-stream.d.ts

@@ -42,6 +42,12 @@ export interface LogStreamProps {
 	* live socket / handshake lines streaming during the test.
 	*/
 	readonly requestId?: string;
+	/**
+	* Offer an "Origin" filter in the filter bar: all lines, or only the lines
+	* the viewer app shipped (`tags.source = 'viewer'`, set by the hub's client
+	* log ingest). Off by default; the system Logs page turns it on.
+	*/
+	readonly showOriginFilter?: boolean;
 	/** Initial log level filter. */
 	readonly level?: "debug" | "info" | "warn" | "error";
 	/** Max height CSS class (default: 'max-h-96'). */
@@ -75,7 +81,7 @@ export interface LogStreamProps {
 	readonly onClose?: () => void;
 	readonly className?: string;
 }
-export declare function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, level: initialLevel, maxHeight, showScope, showDeviceChip, showFilters, showSourceSelect, limit, liveBuffer: externalBuffer, onClose, className }: LogStreamProps): JSX.Element;
+export declare function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, showOriginFilter, level: initialLevel, maxHeight, showScope, showDeviceChip, showFilters, showSourceSelect, limit, liveBuffer: externalBuffer, onClose, className }: LogStreamProps): JSX.Element;
 export interface FloatingLogStreamProps extends LogStreamProps {
 	/** Position: 'bottom' anchors to parent bottom, 'overlay' is absolute positioned. */
 	readonly position?: "bottom" | "overlay";

package/dist/index.cjs

@@ -10634,7 +10634,7 @@ var Select = (0, react$1.forwardRef)(({ className, options, wrapperClassName, di
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
 			ref,
 			disabled,
-			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
+			className: cn("h-7 w-full px-2.5 text-xs border border-border rounded-md appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className, "bg-surface text-foreground"),
 			...props,
 			children: [options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 				value: option.value,
@@ -45265,13 +45265,14 @@ var TEXT_DEBOUNCE_MS = 300;
 /** Distance from the top (px) that asks for the next older page. */
 var TOP_LOAD_THRESHOLD_PX = 24;
 var BYTES_PER_MB = 1024 * 1024;
-function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, level: initialLevel, maxHeight = "max-h-96", showScope = false, showDeviceChip = false, showFilters = true, showSourceSelect, limit = 100, liveBuffer: externalBuffer, onClose, className }) {
+function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, showOriginFilter = false, level: initialLevel, maxHeight = "max-h-96", showScope = false, showDeviceChip = false, showFilters = true, showSourceSelect, limit = 100, liveBuffer: externalBuffer, onClose, className }) {
 	const searchFieldRef = (0, react$1.useRef)(null);
 	useSearchFieldHotkey(searchFieldRef);
 	const t = useUiText();
 	const sourceSelectOn = showSourceSelect ?? showFilters;
 	const [localAddonId, setLocalAddonId] = (0, react$1.useState)("");
 	const [localDeviceId, setLocalDeviceId] = (0, react$1.useState)("");
+	const [viewerOnly, setViewerOnly] = (0, react$1.useState)(false);
 	const [levelFilter, setLevelFilter] = (0, react$1.useState)(initialLevel ?? "info");
 	const [sourceChoice, setSourceChoice] = (0, react$1.useState)(void 0);
 	const agentId = propsAgentId;
@@ -45287,6 +45288,7 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 		else if (deviceId !== void 0 && Number.isFinite(deviceId)) tags.deviceId = deviceId;
 		if (integrationId) tags.integrationId = integrationId;
 		if (requestId) tags.requestId = requestId;
+		if (showOriginFilter && viewerOnly) tags.source = "viewer";
 		return Object.keys(tags).length > 0 ? tags : void 0;
 	}, [
 		agentId,
@@ -45294,7 +45296,9 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 		deviceId,
 		propsContainerDeviceId,
 		integrationId,
-		requestId
+		requestId,
+		showOriginFilter,
+		viewerOnly
 	]);
 	const fallbackBuffer = useLiveBuffer(MAX_LIVE_ENTRIES$1);
 	const buffer = externalBuffer ?? fallbackBuffer;
@@ -45574,32 +45578,51 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 			}),
 			showFilters && (!propsAddonId || !propsDeviceId) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2 px-3 py-1 border-b border-border/50 bg-surface/50 text-[10px]",
-				children: [!propsAddonId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-foreground-subtle",
-						children: t("uiLibrary.logStream.addon", "Addon:")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						type: "text",
-						value: localAddonId,
-						onChange: (e) => setLocalAddonId(e.target.value),
-						placeholder: t("uiLibrary.logStream.all", "all"),
-						className: "w-28 px-1.5 py-0.5 rounded border border-border bg-background text-foreground text-[10px] focus:outline-none focus:border-primary/50"
-					})]
-				}), !propsDeviceId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-foreground-subtle",
-						children: t("uiLibrary.logStream.device", "Device:")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						type: "text",
-						inputMode: "numeric",
-						value: localDeviceId,
-						onChange: (e) => setLocalDeviceId(e.target.value),
-						placeholder: t("uiLibrary.logStream.all", "all"),
-						className: "w-16 px-1.5 py-0.5 rounded border border-border bg-background text-foreground text-[10px] focus:outline-none focus:border-primary/50"
-					})]
-				})]
+				children: [
+					!propsAddonId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-foreground-subtle",
+							children: t("uiLibrary.logStream.addon", "Addon:")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "text",
+							value: localAddonId,
+							onChange: (e) => setLocalAddonId(e.target.value),
+							placeholder: t("uiLibrary.logStream.all", "all"),
+							className: "w-28 px-1.5 py-0.5 rounded border border-border bg-background text-foreground text-[10px] focus:outline-none focus:border-primary/50"
+						})]
+					}),
+					showOriginFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "w-32",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, {
+							"aria-label": t("uiLibrary.logStream.origin", "Origin"),
+							className: "h-5 text-[10px]",
+							value: viewerOnly ? "viewer" : "all",
+							onChange: (e) => setViewerOnly(e.target.value === "viewer"),
+							options: [{
+								value: "all",
+								label: t("uiLibrary.logStream.originAll", "All origins")
+							}, {
+								value: "viewer",
+								label: t("uiLibrary.logStream.originViewer", "Viewer app")
+							}]
+						})
+					}),
+					!propsDeviceId && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-foreground-subtle",
+							children: t("uiLibrary.logStream.device", "Device:")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "text",
+							inputMode: "numeric",
+							value: localDeviceId,
+							onChange: (e) => setLocalDeviceId(e.target.value),
+							placeholder: t("uiLibrary.logStream.all", "all"),
+							className: "w-16 px-1.5 py-0.5 rounded border border-border bg-background text-foreground text-[10px] focus:outline-none focus:border-primary/50"
+						})]
+					})
+				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative flex-1 min-h-0 flex flex-col",
@@ -73675,7 +73698,7 @@ function TimelineSlider({ markers, bands = [], selectedId = null, step = 5, aria
 }
 //#endregion
 //#region src/ui-library-version.ts
-var uiLibraryVersion = "1.2.378";
+var uiLibraryVersion = "1.2.379";
 //#endregion
 //#region src/hooks/use-account-unit-preferences.ts
 /**

package/dist/index.js

@@ -10610,7 +10610,7 @@ var Select = forwardRef(({ className, options, wrapperClassName, disabled, child
 		children: [/* @__PURE__ */ jsxs("select", {
 			ref,
 			disabled,
-			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
+			className: cn("h-7 w-full px-2.5 text-xs border border-border rounded-md appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className, "bg-surface text-foreground"),
 			...props,
 			children: [options?.map((option) => /* @__PURE__ */ jsx("option", {
 				value: option.value,
@@ -45241,13 +45241,14 @@ var TEXT_DEBOUNCE_MS = 300;
 /** Distance from the top (px) that asks for the next older page. */
 var TOP_LOAD_THRESHOLD_PX = 24;
 var BYTES_PER_MB = 1024 * 1024;
-function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, level: initialLevel, maxHeight = "max-h-96", showScope = false, showDeviceChip = false, showFilters = true, showSourceSelect, limit = 100, liveBuffer: externalBuffer, onClose, className }) {
+function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, showOriginFilter = false, level: initialLevel, maxHeight = "max-h-96", showScope = false, showDeviceChip = false, showFilters = true, showSourceSelect, limit = 100, liveBuffer: externalBuffer, onClose, className }) {
 	const searchFieldRef = useRef(null);
 	useSearchFieldHotkey(searchFieldRef);
 	const t = useUiText();
 	const sourceSelectOn = showSourceSelect ?? showFilters;
 	const [localAddonId, setLocalAddonId] = useState("");
 	const [localDeviceId, setLocalDeviceId] = useState("");
+	const [viewerOnly, setViewerOnly] = useState(false);
 	const [levelFilter, setLevelFilter] = useState(initialLevel ?? "info");
 	const [sourceChoice, setSourceChoice] = useState(void 0);
 	const agentId = propsAgentId;
@@ -45263,6 +45264,7 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 		else if (deviceId !== void 0 && Number.isFinite(deviceId)) tags.deviceId = deviceId;
 		if (integrationId) tags.integrationId = integrationId;
 		if (requestId) tags.requestId = requestId;
+		if (showOriginFilter && viewerOnly) tags.source = "viewer";
 		return Object.keys(tags).length > 0 ? tags : void 0;
 	}, [
 		agentId,
@@ -45270,7 +45272,9 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 		deviceId,
 		propsContainerDeviceId,
 		integrationId,
-		requestId
+		requestId,
+		showOriginFilter,
+		viewerOnly
 	]);
 	const fallbackBuffer = useLiveBuffer(MAX_LIVE_ENTRIES$1);
 	const buffer = externalBuffer ?? fallbackBuffer;
@@ -45550,32 +45554,51 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 			}),
 			showFilters && (!propsAddonId || !propsDeviceId) && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 px-3 py-1 border-b border-border/50 bg-surface/50 text-[10px]",
-				children: [!propsAddonId && /* @__PURE__ */ jsxs("label", {
-					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-foreground-subtle",
-						children: t("uiLibrary.logStream.addon", "Addon:")
-					}), /* @__PURE__ */ jsx("input", {
-						type: "text",
-						value: localAddonId,
-						onChange: (e) => setLocalAddonId(e.target.value),
-						placeholder: t("uiLibrary.logStream.all", "all"),
-						className: "w-28 px-1.5 py-0.5 rounded border border-border bg-background text-foreground text-[10px] focus:outline-none focus:border-primary/50"
-					})]
-				}), !propsDeviceId && /* @__PURE__ */ jsxs("label", {
-					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-foreground-subtle",
-						children: t("uiLibrary.logStream.device", "Device:")
-					}), /* @__PURE__ */ jsx("input", {
-						type: "text",
-						inputMode: "numeric",
-						value: localDeviceId,
-						onChange: (e) => setLocalDeviceId(e.target.value),
-						placeholder: t("uiLibrary.logStream.all", "all"),
-						className: "w-16 px-1.5 py-0.5 rounded border border-border bg-background text-foreground text-[10px] focus:outline-none focus:border-primary/50"
-					})]
-				})]
+				children: [
+					!propsAddonId && /* @__PURE__ */ jsxs("label", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-foreground-subtle",
+							children: t("uiLibrary.logStream.addon", "Addon:")
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							value: localAddonId,
+							onChange: (e) => setLocalAddonId(e.target.value),
+							placeholder: t("uiLibrary.logStream.all", "all"),
+							className: "w-28 px-1.5 py-0.5 rounded border border-border bg-background text-foreground text-[10px] focus:outline-none focus:border-primary/50"
+						})]
+					}),
+					showOriginFilter && /* @__PURE__ */ jsx("div", {
+						className: "w-32",
+						children: /* @__PURE__ */ jsx(Select, {
+							"aria-label": t("uiLibrary.logStream.origin", "Origin"),
+							className: "h-5 text-[10px]",
+							value: viewerOnly ? "viewer" : "all",
+							onChange: (e) => setViewerOnly(e.target.value === "viewer"),
+							options: [{
+								value: "all",
+								label: t("uiLibrary.logStream.originAll", "All origins")
+							}, {
+								value: "viewer",
+								label: t("uiLibrary.logStream.originViewer", "Viewer app")
+							}]
+						})
+					}),
+					!propsDeviceId && /* @__PURE__ */ jsxs("label", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-foreground-subtle",
+							children: t("uiLibrary.logStream.device", "Device:")
+						}), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							inputMode: "numeric",
+							value: localDeviceId,
+							onChange: (e) => setLocalDeviceId(e.target.value),
+							placeholder: t("uiLibrary.logStream.all", "all"),
+							className: "w-16 px-1.5 py-0.5 rounded border border-border bg-background text-foreground text-[10px] focus:outline-none focus:border-primary/50"
+						})]
+					})
+				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "relative flex-1 min-h-0 flex flex-col",
@@ -73651,7 +73674,7 @@ function TimelineSlider({ markers, bands = [], selectedId = null, step = 5, aria
 }
 //#endregion
 //#region src/ui-library-version.ts
-var uiLibraryVersion = "1.2.378";
+var uiLibraryVersion = "1.2.379";
 //#endregion
 //#region src/hooks/use-account-unit-preferences.ts
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.378",
+  "version": "1.2.379",
   "repository": {
     "type": "git",
     "url": "https://github.com/camstack/server.git",

package/src/tailwind/camstack-theme.css

@@ -84,6 +84,20 @@
   color-scheme: dark;
 }
 
+/* Native form popups (select, option, optgroup) are painted by the UA from the element's own
+   colours; without these a transparent select shows white options with near-white text. */
+select,
+option,
+optgroup {
+  background-color: var(--color-surface);
+  color: var(--color-foreground);
+}
+
+option:checked {
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+}
+
 /* Dark theme (default) */
 .dark {
   color-scheme: dark;