@meridianlabs/log-viewer 0.3.260 → 0.3.262

package/README.md

@@ -0,0 +1,109 @@
+# Inspect Log Viewer
+
+React app for viewing eval logs produced by
+[Inspect AI](https://inspect.aisi.org.uk/). It runs standalone (served by
+`inspect view`), against statically hosted log directories, inside the
+Inspect VS Code extension, and can be embedded in external applications via
+the [`@meridianlabs/log-viewer`](https://www.npmjs.com/package/@meridianlabs/log-viewer)
+npm package.
+
+For repo setup (corepack, pnpm, install), see the
+[root README](../../README.md).
+
+## Development
+
+Run commands from this directory, or from the repo root with
+`pnpm <command> --filter=@meridianlabs/log-viewer` (the root scripts pass the
+filter through to `turbo run`, preserving task dependencies — see
+[scripts.md](../../docs/scripts.md)):
+
+| Command          | Description                               |
+| ---------------- | ----------------------------------------- |
+| `pnpm dev`       | Start the Vite dev server on :5173        |
+| `pnpm build`     | Build the bundled app                     |
+| `pnpm build:lib` | Build the embeddable library into `lib/`  |
+| `pnpm test`      | Run unit/integration tests (vitest)       |
+| `pnpm e2e`       | Run Playwright e2e tests                  |
+| `pnpm check-all` | Type check, lint, format, test, and build |
+
+Built output is not committed; the library is built at publish time
+(`prepublishOnly`).
+
+You may optionally set the `VIEW_SERVER_API_URL` environment variable at
+build time to use an API server running on a different host.
+
+## Embedding (`@meridianlabs/log-viewer`)
+
+> **Versioning disclaimer**: this package does NOT use semantic versioning.
+> The public surface evolves with the host application's needs — expect
+> breaking changes in any release and adapt accordingly.
+
+```bash
+npm install @meridianlabs/log-viewer
+```
+
+The viewer requires its bundled CSS:
+
+```typescript
+import "@meridianlabs/log-viewer/styles/index.css";
+```
+
+### Example Usage
+
+An embedder installs a per-dir API factory with `setApiFactory` **before**
+initializing the store and rendering `<App />`. The viewer resolves the log
+directory (from `initialLogDir` or a `?log_dir=` URL param), calls your
+factory with it, and renders:
+
+```tsx
+import {
+    App,
+    clientApi,
+    createViewServerApi,
+    initializeStore,
+    setApiFactory,
+} from "@meridianlabs/log-viewer";
+import type { Capabilities } from "@meridianlabs/log-viewer";
+
+import "@meridianlabs/log-viewer/styles/index.css";
+
+// Install the API factory first — installing after the backend has
+// resolved throws.
+setApiFactory(
+    (logDir) =>
+        clientApi(
+            createViewServerApi({
+                logDir,
+                // Optional transport options: apiBaseUrl, headerProvider, customFetch
+                apiBaseUrl: "https://mycompany.com/api",
+            })
+        ),
+    "s3://my-bucket/logs" // initialLogDir; omit to require ?log_dir= in the URL
+);
+
+const capabilities: Capabilities = {
+    downloadFiles: true,
+    downloadLogs: false,
+    webWorkers: true,
+    streamSamples: false,
+};
+initializeStore(capabilities);
+
+export function MyApp() {
+    return <App />;
+}
+```
+
+To re-point the viewer at a different log directory after boot, call
+`setLogRoot(dir)` — it rebuilds the API through the same factory.
+
+### Embedder chrome
+
+If your own UI (rendered as a sibling of `<App />`, not a descendant) calls
+the viewer's selection hooks (`useSelectedSampleSummary`,
+`useSelectedScores`, `useLogSelection`), wrap that chrome in
+`<InspectQueryClientProvider>` so the hooks resolve the viewer's
+react-query client, and gate it on `useViewerReady()` — the hooks throw
+before the viewer's app config resolves.
+
+See [src/index.ts](src/index.ts) for the full public surface.

package/lib/{AsciinemaPlayerImpl-D25m6trA.js → AsciinemaPlayerImpl-BG5NPs0z.js}

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef } from "react";
 //#region ../../node_modules/.pnpm/asciinema-player@3.17.0/node_modules/asciinema-player/dist/logging-DeB0koVt.js
 function parseNpt(time) {
 	if (typeof time === "number") return time;
@@ -2961,25 +2962,29 @@ var PARSERS = /* @__PURE__ */ new Map([
 ]);
 function getDriver(src) {
 	if (typeof src === "function") return src;
-	if (typeof src === "string") if (src.substring(0, 5) == "ws://" || src.substring(0, 6) == "wss://") src = {
-		driver: "websocket",
-		url: src
-	};
-	else if (src.substring(0, 6) == "clock:") src = { driver: "clock" };
-	else if (src.substring(0, 7) == "random:") src = { driver: "random" };
-	else if (src.substring(0, 10) == "benchmark:") src = {
-		driver: "benchmark",
-		url: src.substring(10)
-	};
-	else src = {
-		driver: "recording",
-		url: src
-	};
+	if (typeof src === "string") {
+		if (src.substring(0, 5) == "ws://" || src.substring(0, 6) == "wss://") src = {
+			driver: "websocket",
+			url: src
+		};
+		else if (src.substring(0, 6) == "clock:") src = { driver: "clock" };
+		else if (src.substring(0, 7) == "random:") src = { driver: "random" };
+		else if (src.substring(0, 10) == "benchmark:") src = {
+			driver: "benchmark",
+			url: src.substring(10)
+		};
+		else src = {
+			driver: "recording",
+			url: src
+		};
+	}
 	if (src.driver === void 0) src.driver = "recording";
 	if (src.driver == "recording") {
 		if (src.format !== "segmented" && src.parser === void 0) src.parser = "asciicast";
-		if (typeof src.parser === "string") if (PARSERS.has(src.parser)) src.parser = PARSERS.get(src.parser);
-		else throw new Error(`unknown parser: ${src.parser}`);
+		if (typeof src.parser === "string") {
+			if (PARSERS.has(src.parser)) src.parser = PARSERS.get(src.parser);
+			else throw new Error(`unknown parser: ${src.parser}`);
+		}
 	}
 	if (DRIVERS.has(src.driver)) {
 		const driver = DRIVERS.get(src.driver);
@@ -3102,12 +3107,14 @@ function children(fn) {
 	return memo;
 }
 function readSignal() {
-	if (this.sources && this.state) if (this.state === STALE) updateComputation(this);
-	else {
-		const updates = Updates;
-		Updates = null;
-		runUpdates(() => lookUpstream(this), false);
-		Updates = updates;
+	if (this.sources && this.state) {
+		if (this.state === STALE) updateComputation(this);
+		else {
+			const updates = Updates;
+			Updates = null;
+			runUpdates(() => lookUpstream(this), false);
+			Updates = updates;
+		}
 	}
 	if (Listener) {
 		const sSlot = this.observers ? this.observers.length : 0;
@@ -3195,8 +3202,10 @@ function createComputation(fn, init, pure, state = STALE, options) {
 		pure
 	};
 	if (Owner === null);
-	else if (Owner !== UNOWNED) if (!Owner.owned) Owner.owned = [c];
-	else Owner.owned.push(c);
+	else if (Owner !== UNOWNED) {
+		if (!Owner.owned) Owner.owned = [c];
+		else Owner.owned.push(c);
+	}
 	return c;
 }
 function runTop(node) {
@@ -3502,18 +3511,19 @@ function reconcileArrays(parentNode, a, b) {
 				while (i < bEnd) map.set(b[i], i++);
 			}
 			const index = map.get(a[aStart]);
-			if (index != null) if (bStart < index && index < bEnd) {
-				let i = aStart, sequence = 1, t;
-				while (++i < aEnd && i < bEnd) {
-					if ((t = map.get(a[i])) == null || t !== index + sequence) break;
-					sequence++;
-				}
-				if (sequence > index - bStart) {
-					const node = a[aStart];
-					while (bStart < index) parentNode.insertBefore(b[bStart++], node);
-				} else parentNode.replaceChild(b[bStart++], a[aStart++]);
-			} else aStart++;
-			else a[aStart++].remove();
+			if (index != null) {
+				if (bStart < index && index < bEnd) {
+					let i = aStart, sequence = 1, t;
+					while (++i < aEnd && i < bEnd) {
+						if ((t = map.get(a[i])) == null || t !== index + sequence) break;
+						sequence++;
+					}
+					if (sequence > index - bStart) {
+						const node = a[aStart];
+						while (bStart < index) parentNode.insertBefore(b[bStart++], node);
+					} else parentNode.replaceChild(b[bStart++], a[aStart++]);
+				} else aStart++;
+			} else a[aStart++].remove();
 		}
 	}
 }
@@ -3672,9 +3682,10 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
 		if (array.length === 0) {
 			current = cleanChildren(parent, current, marker);
 			if (multi) return current;
-		} else if (currentArray) if (current.length === 0) appendNodes(parent, array, marker);
-		else reconcileArrays(parent, current, array);
-		else {
+		} else if (currentArray) {
+			if (current.length === 0) appendNodes(parent, array, marker);
+			else reconcileArrays(parent, current, array);
+		} else {
 			current && cleanChildren(parent);
 			appendNodes(parent, array);
 		}
@@ -3696,14 +3707,15 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
 		if (item == null || item === true || item === false);
 		else if ((t = typeof item) === "object" && item.nodeType) normalized.push(item);
 		else if (Array.isArray(item)) dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
-		else if (t === "function") if (unwrap) {
-			while (typeof item === "function") item = item();
-			dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
+		else if (t === "function") {
+			if (unwrap) {
+				while (typeof item === "function") item = item();
+				dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
+			} else {
+				normalized.push(item);
+				dynamic = true;
+			}
 		} else {
-			normalized.push(item);
-			dynamic = true;
-		}
-		else {
 			const value = String(item);
 			if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);
 			else normalized.push(document.createTextNode(value));
@@ -4217,16 +4229,20 @@ function __wbg_finalize_init(instance, module) {
 }
 function initSync(module) {
 	if (wasm !== void 0) return wasm;
-	if (typeof module !== "undefined") if (Object.getPrototypeOf(module) === Object.prototype) ({module} = module);
-	else console.warn("using deprecated parameters for `initSync()`; pass a single object instead");
+	if (typeof module !== "undefined") {
+		if (Object.getPrototypeOf(module) === Object.prototype) ({module} = module);
+		else console.warn("using deprecated parameters for `initSync()`; pass a single object instead");
+	}
 	const imports = __wbg_get_imports();
 	if (!(module instanceof WebAssembly.Module)) module = new WebAssembly.Module(module);
 	return __wbg_finalize_init(new WebAssembly.Instance(module, imports), module);
 }
 async function __wbg_init(module_or_path) {
 	if (wasm !== void 0) return wasm;
-	if (typeof module_or_path !== "undefined") if (Object.getPrototypeOf(module_or_path) === Object.prototype) ({module_or_path} = module_or_path);
-	else console.warn("using deprecated parameters for the initialization function; pass a single object instead");
+	if (typeof module_or_path !== "undefined") {
+		if (Object.getPrototypeOf(module_or_path) === Object.prototype) ({module_or_path} = module_or_path);
+		else console.warn("using deprecated parameters for the initialization function; pass a single object instead");
+	}
 	const imports = __wbg_get_imports();
 	if (typeof module_or_path === "string" || typeof Request === "function" && module_or_path instanceof Request || typeof URL === "function" && module_or_path instanceof URL) module_or_path = fetch(module_or_path);
 	const { instance, module } = await __wbg_load(await module_or_path, imports);
@@ -6124,8 +6140,10 @@ var Player = (props) => {
 		const terminalH = charH * terminalRows() + bordersH;
 		let fit = props.fit ?? "width";
 		const currentContainerSize = containerSize();
-		if (fit === "both" || isFullscreen()) if (currentContainerSize.width / (currentContainerSize.height - controlBarHeight()) > terminalW / terminalH) fit = "height";
-		else fit = "width";
+		if (fit === "both" || isFullscreen()) {
+			if (currentContainerSize.width / (currentContainerSize.height - controlBarHeight()) > terminalW / terminalH) fit = "height";
+			else fit = "width";
+		}
 		if (fit === false || fit === "none") return {};
 		else if (fit === "width") {
 			const scale = currentContainerSize.width / terminalW;
@@ -6178,11 +6196,13 @@ var Player = (props) => {
 			core.seek(`${pos * 100}%`);
 		} else if (e.key == "?") toggleHelp();
 		else if (e.key == "k") toggleKeystrokeOverlay();
-		else if (e.key == "ArrowLeft") if (e.shiftKey) core.seek("<<<");
-		else core.seek("<<");
-		else if (e.key == "ArrowRight") if (e.shiftKey) core.seek(">>>");
-		else core.seek(">>");
-		else if (e.key == "Escape") setIsHelpVisible(false);
+		else if (e.key == "ArrowLeft") {
+			if (e.shiftKey) core.seek("<<<");
+			else core.seek("<<");
+		} else if (e.key == "ArrowRight") {
+			if (e.shiftKey) core.seek(">>>");
+			else core.seek(">>");
+		} else if (e.key == "Escape") setIsHelpVisible(false);
 		else return;
 		e.stopPropagation();
 		e.preventDefault();
@@ -6218,10 +6238,12 @@ var Player = (props) => {
 	const embeddedTheme = createMemo(() => preferEmbeddedTheme ? originalTheme() : null);
 	const playerStyle = () => {
 		const style = {};
-		if ((props.fit === false || props.fit === "none") && props.terminalFontSize !== void 0) if (props.terminalFontSize === "small") style["font-size"] = "12px";
-		else if (props.terminalFontSize === "medium") style["font-size"] = "18px";
-		else if (props.terminalFontSize === "big") style["font-size"] = "24px";
-		else style["font-size"] = props.terminalFontSize;
+		if ((props.fit === false || props.fit === "none") && props.terminalFontSize !== void 0) {
+			if (props.terminalFontSize === "small") style["font-size"] = "12px";
+			else if (props.terminalFontSize === "medium") style["font-size"] = "18px";
+			else if (props.terminalFontSize === "big") style["font-size"] = "24px";
+			else style["font-size"] = props.terminalFontSize;
+		}
 		const size = terminalElementSize();
 		if (size.width !== void 0) {
 			style["width"] = `${size.width}px`;
@@ -6594,18 +6616,42 @@ function create(src, elem, opts = {}) {
 }
 //#endregion
 //#region ../../packages/react/src/components/AsciinemaPlayerImpl.tsx
-var AsciinemaPlayerImpl = ({ id, rows, cols, inputUrl, outputUrl, timingUrl, fit, speed, autoPlay, loop, theme, idleTimeLimit = 2, style }) => {
+var AsciinemaPlayerImpl = (t0) => {
+	const $ = c(18);
+	const { id, rows, cols, inputUrl, outputUrl, timingUrl, fit, speed, autoPlay, loop, theme, idleTimeLimit: t1, style } = t0;
+	const idleTimeLimit = t1 === void 0 ? 2 : t1;
 	const playerContainerRef = useRef(null);
-	useEffect(() => {
-		if (!playerContainerRef.current) return;
-		const player = create({
-			url: [
-				timingUrl,
-				outputUrl,
-				inputUrl
-			],
-			parser: "typescript"
-		}, playerContainerRef.current, {
+	let t2;
+	let t3;
+	if ($[0] !== autoPlay || $[1] !== cols || $[2] !== fit || $[3] !== idleTimeLimit || $[4] !== inputUrl || $[5] !== loop || $[6] !== outputUrl || $[7] !== rows || $[8] !== speed || $[9] !== theme || $[10] !== timingUrl) {
+		t2 = () => {
+			if (!playerContainerRef.current) return;
+			const player = create({
+				url: [
+					timingUrl,
+					outputUrl,
+					inputUrl
+				],
+				parser: "typescript"
+			}, playerContainerRef.current, {
+				rows,
+				cols,
+				autoPlay,
+				loop,
+				theme,
+				speed,
+				idleTimeLimit,
+				fit
+			});
+			player.play();
+			return () => {
+				player.dispose();
+			};
+		};
+		t3 = [
+			timingUrl,
+			outputUrl,
+			inputUrl,
 			rows,
 			cols,
 			autoPlay,
@@ -6614,31 +6660,46 @@ var AsciinemaPlayerImpl = ({ id, rows, cols, inputUrl, outputUrl, timingUrl, fit
 			speed,
 			idleTimeLimit,
 			fit
+		];
+		$[0] = autoPlay;
+		$[1] = cols;
+		$[2] = fit;
+		$[3] = idleTimeLimit;
+		$[4] = inputUrl;
+		$[5] = loop;
+		$[6] = outputUrl;
+		$[7] = rows;
+		$[8] = speed;
+		$[9] = theme;
+		$[10] = timingUrl;
+		$[11] = t2;
+		$[12] = t3;
+	} else {
+		t2 = $[11];
+		t3 = $[12];
+	}
+	useEffect(t2, t3);
+	const t4 = `asciinema-player-${id || "default"}`;
+	let t5;
+	if ($[13] !== style) {
+		t5 = { ...style };
+		$[13] = style;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== t4 || $[16] !== t5) {
+		t6 = /*#__PURE__*/ jsx("div", {
+			id: t4,
+			ref: playerContainerRef,
+			style: t5
 		});
-		player.play();
-		return () => {
-			player.dispose();
-		};
-	}, [
-		timingUrl,
-		outputUrl,
-		inputUrl,
-		rows,
-		cols,
-		autoPlay,
-		loop,
-		theme,
-		speed,
-		idleTimeLimit,
-		fit
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		id: `asciinema-player-${id || "default"}`,
-		ref: playerContainerRef,
-		style: { ...style }
-	});
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
 };
 //#endregion
 export { AsciinemaPlayerImpl as default };
 
-//# sourceMappingURL=AsciinemaPlayerImpl-D25m6trA.js.map
+//# sourceMappingURL=AsciinemaPlayerImpl-BG5NPs0z.js.map