@copilotkit/web-inspector 1.75.2 → 1.76.0

package/dist/index.umd.js

@@ -2245,11 +2245,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		};
 	}
 	function clampSize(size, viewport, edgeMargin, minWidth, minHeight) {
-		const maxWidth = Math.max(minWidth, viewport.width - edgeMargin * 2);
-		const maxHeight = Math.max(minHeight, viewport.height - edgeMargin * 2);
+		const maxWidth = Math.max(0, viewport.width - edgeMargin * 2);
+		const maxHeight = Math.max(0, viewport.height - edgeMargin * 2);
 		return {
-			width: clamp(size.width, minWidth, maxWidth),
-			height: clamp(size.height, minHeight, maxHeight)
+			width: clamp(size.width, Math.min(minWidth, maxWidth), maxWidth),
+			height: clamp(size.height, Math.min(minHeight, maxHeight), maxHeight)
 		};
 	}
 	function constrainToViewport(state, position, viewport, edgeMargin) {
@@ -2919,7 +2919,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 //#endregion
 //#region package.json
-	var version = "1.75.2";
+	var version = "1.76.0";
 
 //#endregion
 //#region src/lib/telemetry.ts
@@ -3731,8 +3731,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	const MIN_WINDOW_WIDTH = 880;
 	const MIN_WINDOW_WIDTH_DOCKED_LEFT = 640;
 	const MIN_WINDOW_HEIGHT = 480;
+	/**
+	* A window minimum that gives way on screens smaller than it, so the window
+	* (and its close control) never runs past the viewport edge.
+	*/
+	const viewportCappedMin = (px, unit) => `min(${px}px, calc(100${unit} - ${EDGE_MARGIN * 2}px))`;
+	/**
+	* The floating window zooms down with the screen, never below this, once the
+	* viewport can no longer hold the default window at full size.
+	*/
+	const MIN_WINDOW_SCALE = .8;
 	const INSPECTOR_STORAGE_KEY = "cpk:inspector:state";
-	const LAUNCHER_MIN_SIZE = 51.84;
+	const LAUNCHER_MIN_SIZE = 34;
 	const LAUNCHER_MAX_SIZE = 62.208;
 	const DEFAULT_BUTTON_SIZE = {
 		width: LAUNCHER_MIN_SIZE,
@@ -9056,7 +9066,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				const sidebarBounds = sidebar.getBoundingClientRect();
 				this.sidebarRailTooltip = {
 					label,
-					top: targetBounds.top - sidebarBounds.top + targetBounds.height / 2
+					top: (targetBounds.top - sidebarBounds.top + targetBounds.height / 2) / this.getWindowScale()
 				};
 				this.requestUpdate();
 			};
@@ -12923,6 +12933,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			const isPoppedOut = this.isPoppedOut;
 			const isTransitioning = this.hasAttribute("data-transitioning");
 			const disableDrag = isDocked || isPoppedOut;
+			const scale = this.getWindowScale();
 			const windowStyles = isPoppedOut ? {
 				position: "fixed",
 				inset: "0",
@@ -12936,17 +12947,18 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				...this.getDockedWindowStyles(),
 				overflowX: "hidden"
 			} : {
-				width: `${Math.round(windowState.size.width)}px`,
-				height: `${Math.round(windowState.size.height)}px`,
-				minWidth: `${MIN_WINDOW_WIDTH}px`,
-				minHeight: `${MIN_WINDOW_HEIGHT}px`,
-				overflowX: "hidden"
+				width: `${Math.round(windowState.size.width / scale)}px`,
+				height: `${Math.round(windowState.size.height / scale)}px`,
+				minWidth: viewportCappedMin(MIN_WINDOW_WIDTH, "vw"),
+				minHeight: viewportCappedMin(MIN_WINDOW_HEIGHT, "vh"),
+				overflowX: "hidden",
+				...scale < 1 ? { zoom: String(scale) } : {}
 			};
 			const hasContextDropdown = this.contextOptions.some((option) => option.key !== "all-agents");
 			const viewportWidth = isPoppedOut ? (_this$popOut$win$inne = (_this$popOut2 = this.popOut) === null || _this$popOut2 === void 0 ? void 0 : _this$popOut2.win.innerWidth) !== null && _this$popOut$win$inne !== void 0 ? _this$popOut$win$inne : windowState.size.width : typeof window === "undefined" ? windowState.size.width : window.innerWidth;
 			const automaticallyCollapsed = shouldUseIconRail({
 				dockedLeft: this.dockMode === "docked-left",
-				width: viewportWidth
+				width: viewportWidth / scale
 			});
 			const iconRail = this.sidebarCollapsed || automaticallyCollapsed;
 			const contextDropdown = hasContextDropdown ? this.renderContextDropdown(iconRail) : lit.nothing;
@@ -13280,8 +13292,9 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			var _this$shadowRoot5;
 			const inspectorWindow = (_this$shadowRoot5 = this.shadowRoot) === null || _this$shadowRoot5 === void 0 ? void 0 : _this$shadowRoot5.querySelector(".inspector-window");
 			if (inspectorWindow) {
-				const width = Math.round(Number.parseFloat(inspectorWindow.style.width));
-				const height = Math.round(Number.parseFloat(inspectorWindow.style.height));
+				const scale = this.getWindowScale();
+				const width = Math.round(Number.parseFloat(inspectorWindow.style.width) * scale);
+				const height = Math.round(Number.parseFloat(inspectorWindow.style.height) * scale);
 				if (Number.isFinite(width) && Number.isFinite(height)) return {
 					width,
 					height
@@ -13370,6 +13383,16 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				height: window.innerHeight
 			};
 		}
+		/**
+		* Zoom for the floating window: 1 while the viewport holds the default
+		* window, then proportional to the screen down to MIN_WINDOW_SCALE, so a
+		* small screen gets the same layout smaller rather than a cramped one.
+		*/
+		getWindowScale() {
+			if (typeof window === "undefined" || this.isPoppedOut || this.dockMode !== "floating") return 1;
+			const fit = Math.min(window.innerWidth / (DEFAULT_WINDOW_SIZE.width + EDGE_MARGIN * 2), window.innerHeight / (DEFAULT_WINDOW_SIZE.height + EDGE_MARGIN * 2));
+			return Math.min(1, Math.max(MIN_WINDOW_SCALE, Math.round(fit * 20) / 20));
+		}
 		persistState() {
 			var _this$pendingPersiste, _state$selectedContex;
 			const state = {
@@ -13676,14 +13699,14 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				bottom: "0",
 				width: `${Math.round(this.contextState.window.size.width)}px`,
 				height: "auto",
-				minWidth: `${MIN_WINDOW_WIDTH_DOCKED_LEFT}px`,
+				minWidth: viewportCappedMin(MIN_WINDOW_WIDTH_DOCKED_LEFT, "vw"),
 				borderRadius: "0"
 			};
 			return {
 				width: `${Math.round(this.contextState.window.size.width)}px`,
 				height: `${Math.round(this.contextState.window.size.height)}px`,
-				minWidth: `${MIN_WINDOW_WIDTH}px`,
-				minHeight: `${MIN_WINDOW_HEIGHT}px`
+				minWidth: viewportCappedMin(MIN_WINDOW_WIDTH, "vw"),
+				minHeight: viewportCappedMin(MIN_WINDOW_HEIGHT, "vh")
 			};
 		}
 		handleDockClick(mode) {
@@ -15567,7 +15590,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
         <div style="display:flex;min-height:0;flex:1;overflow:hidden;">
           <!-- Left sidebar: thread list -->
           <div
-            style="display:${this.threadListCollapsed ? "none" : "flex"};width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;flex-direction:column;border-right:1px solid #DBDBE5;"
+            style="display:${this.threadListCollapsed ? "none" : "flex"};width:${this.threadListWidth}px;max-width:calc(100% - 160px);flex-shrink:0;overflow:hidden;flex-direction:column;border-right:1px solid #DBDBE5;"
           >
         ${ephemeral ? lit.html`
           <button type="button" class="cpk-ephemeral-threads-banner"
@@ -17970,7 +17993,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
            is the button's sibling, can clear the mark by the same length. */
         --cpk-launcher-size: clamp(
           ${LAUNCHER_MIN_SIZE}px,
-          7vw,
+          calc(22px + 2.8vw),
           ${LAUNCHER_MAX_SIZE}px
         );
       }