@mcp-b/char 0.1.3 → 0.1.4

package/dist/shell-standalone.iife.js

@@ -94,8 +94,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			styles: mergeStyles(previous.styles, patch.styles),
 			containerDimensions: shallowMerge(previous.containerDimensions, patch.containerDimensions),
 			deviceCapabilities: shallowMerge(previous.deviceCapabilities, patch.deviceCapabilities),
-			safeAreaInsets: shallowMerge(previous.safeAreaInsets, patch.safeAreaInsets),
-			hostCapabilities: shallowMerge(previous.hostCapabilities, patch.hostCapabilities)
+			safeAreaInsets: shallowMerge(previous.safeAreaInsets, patch.safeAreaInsets)
 		};
 	}
 
@@ -507,25 +506,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		"pip"
 	];
 	/**
-	* Normalizes an API key by trimming whitespace and collapsing empty strings.
-	*/
-	function normalizeApiKey(value) {
-		const trimmed = value?.trim();
-		return trimmed ? trimmed : void 0;
-	}
-	/**
-	* Produces a sanitized dev-mode configuration and drops empty payloads.
-	*/
-	function resolveDevMode(devMode) {
-		if (!devMode) return void 0;
-		const normalized = {
-			anthropicApiKey: normalizeApiKey(devMode.anthropicApiKey),
-			openaiApiKey: normalizeApiKey(devMode.openaiApiKey),
-			useLocalApi: devMode.useLocalApi === true ? true : void 0
-		};
-		return !!normalized.anthropicApiKey || !!normalized.openaiApiKey || !!normalized.useLocalApi ? normalized : void 0;
-	}
-	/**
 	* Runtime guard for the message envelope emitted by the iframe.
 	*/
 	function isCharIframeMessageData(value) {
@@ -664,7 +644,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	*/
 	var CharAgentElement = class extends HTMLElement {
 		static observedAttributes = [
-			"dev-mode",
+			"publishable-key",
 			"enable-debug-tools",
 			"display-mode",
 			"api-base"
@@ -714,12 +694,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				return;
 			}
 			if (!this.style.display) this.style.display = "block";
-			const resolvedDevMode = resolveDevMode(this._resolveDevMode());
-			const apiBase = this._resolveApiBaseOverride() ?? (resolvedDevMode?.useLocalApi ? window.location.origin : WEBMCP_PRODUCTION_API_BASE);
+			const apiBase = this._resolveApiBaseOverride() ?? WEBMCP_PRODUCTION_API_BASE;
 			const iframeOrigin = this._resolveIframeOrigin(apiBase);
 			const iframe = this._createIframe(apiBase);
 			this._iframe = iframe;
-			if (resolvedDevMode?.anthropicApiKey) this._pendingAuth = { anthropicApiKey: resolvedDevMode.anthropicApiKey };
+			const publishableKey = this.publishableKey ?? this.getAttribute("publishable-key") ?? void 0;
+			if (publishableKey) this._pendingAuth = { publishableKey };
 			this._proxy = new CharIframeProxy(iframe, iframeOrigin);
 			this._proxy.start();
 			this._messageListener = this._createMessageListener(iframe, iframeOrigin);
@@ -928,15 +908,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		/**
 		* Reacts to observed attribute updates after iframe readiness.
 		* Attributes that affect iframe boot configuration are intentionally ignored
-		* after mount (`dev-mode`, `enable-debug-tools`, `api-base`).
+		* after mount (`enable-debug-tools`, `api-base`).
 		*/
 		attributeChangedCallback(name, _oldValue, newValue) {
 			if (!this._iframe || !this._iframeReady) return;
 			switch (name) {
+				case "publishable-key":
+					if (newValue) {
+						this._pendingAuth = { publishableKey: newValue };
+						const iframeOrigin = this._getIframeOrigin();
+						if (iframeOrigin) this._postAuth(iframeOrigin);
+					}
+					break;
 				case "display-mode":
 					this.setHostContext({ displayMode: resolveDisplayModeFromAttribute(newValue) });
 					break;
-				case "dev-mode":
 				case "enable-debug-tools":
 				case "api-base": break;
 			}
@@ -947,23 +933,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		* The token is stored as a JavaScript property (not as a DOM attribute),
 		* preventing exposure to DOM inspection and session replay tools.
 		*
-		* @param options - Authentication payload for either ID token or ticket auth.
+		* @param options - Authentication payload.
 		* @returns `true` when the payload is accepted; `false` when validation fails.
 		*/
 		connect(options) {
-			if (!options?.idToken && !options?.ticketAuth) {
-				this._emitCharError("MISSING_TOKEN", "connect() requires either idToken or ticketAuth parameter");
-				return false;
-			}
-			if (options?.idToken && !options?.ticketAuth && !options?.clientId) {
-				this._emitCharError("MISSING_CLIENT_ID", "connect() requires clientId when using idToken authentication");
+			if (!options?.publishableKey) {
+				this._emitCharError("MISSING_PUBLISHABLE_KEY", "connect() requires publishableKey");
 				return false;
 			}
 			this._pendingAuth = {
-				idToken: options.ticketAuth ? void 0 : options.idToken,
-				clientId: options.ticketAuth ? void 0 : options.clientId,
-				organizationId: options.ticketAuth ? void 0 : options.organizationId,
-				ticketAuth: options.ticketAuth
+				publishableKey: options.publishableKey,
+				idToken: options.idToken
 			};
 			const iframeOrigin = this._getIframeOrigin();
 			if (this._iframeReady && iframeOrigin) this._postAuth(iframeOrigin);
@@ -982,7 +962,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		/**
 		* Disconnect from the Char agent.
-		* Clears the authentication token.
+		* Clears pending auth state and posts a disconnect message to the iframe.
 		*
 		* @returns `true` when the disconnect message was sent; `false` when the iframe was not ready.
 		*/
@@ -1046,11 +1026,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			};
 			const safeAreaInsets = getSafeAreaInsets();
 			const displayMode = resolveDisplayModeFromAttribute(displayModeAttr) ?? "inline";
-			const hostCapabilities = {
-				supportedDisplayModes: [...DISPLAY_MODES],
-				supportsOpenLink: true,
-				supportsTeardown: true
-			};
 			const context = {
 				theme,
 				styles: { variables: vars },
@@ -1061,9 +1036,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				timeZone,
 				platform: detectPlatform(),
 				deviceCapabilities: getDeviceCapabilities(),
-				safeAreaInsets,
-				userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-				hostCapabilities
+				safeAreaInsets
 			};
 			this._hostContext = context;
 			if (!this._iframe?.contentWindow) {
@@ -1106,22 +1079,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		*/
 		_postAuth(iframeOrigin) {
 			if (!this._pendingAuth || !this._iframe?.contentWindow) return;
-			if (!this._pendingAuth.ticketAuth && !this._pendingAuth.anthropicApiKey && !this._pendingAuth.idToken) {
-				console.error("[Char] _postAuth called but _pendingAuth has no auth credentials");
+			if (!this._pendingAuth.publishableKey) {
+				console.error("[Char] _postAuth called but _pendingAuth has no publishableKey");
 				this._pendingAuth = null;
 				return;
 			}
-			const message = this._pendingAuth.ticketAuth ? {
-				type: "char-auth",
-				ticketAuth: this._pendingAuth.ticketAuth
-			} : this._pendingAuth.anthropicApiKey ? {
+			const message = {
 				type: "char-auth",
-				anthropicApiKey: this._pendingAuth.anthropicApiKey
-			} : {
-				type: "char-auth",
-				idToken: this._pendingAuth.idToken,
-				clientId: this._pendingAuth.clientId,
-				organizationId: this._pendingAuth.organizationId
+				publishableKey: this._pendingAuth.publishableKey,
+				idToken: this._pendingAuth.idToken
 			};
 			this._iframe.contentWindow.postMessage(message, iframeOrigin);
 		}
@@ -1268,36 +1234,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._containerResizeObserver.observe(this);
 		}
 		/**
-		* Resolve devMode from property (React 19) or attribute.
-		*
-		* @returns Parsed dev-mode configuration when valid.
-		*/
-		_resolveDevMode() {
-			if (this.devMode && typeof this.devMode === "object") return this.devMode;
-			const devModeAttr = this.getAttribute("dev-mode");
-			if (!devModeAttr) return void 0;
-			try {
-				const parsed = JSON.parse(devModeAttr);
-				if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-					const msg = `dev-mode attribute must be a JSON object, got: ${Array.isArray(parsed) ? "array" : typeof parsed}`;
-					console.warn(`[Char] ${msg}`);
-					this._emitCharError("INVALID_DEV_MODE", msg);
-					return;
-				}
-				const obj = parsed;
-				return {
-					anthropicApiKey: typeof obj.anthropicApiKey === "string" ? obj.anthropicApiKey : void 0,
-					openaiApiKey: typeof obj.openaiApiKey === "string" ? obj.openaiApiKey : void 0,
-					useLocalApi: typeof obj.useLocalApi === "boolean" ? obj.useLocalApi : void 0
-				};
-			} catch (e) {
-				const msg = `Failed to parse dev-mode attribute as JSON: ${e instanceof Error ? e.message : String(e)}`;
-				console.warn(`[Char] ${msg}`);
-				this._emitCharError("INVALID_DEV_MODE", msg);
-				return;
-			}
-		}
-		/**
 		* Resolve apiBase override from property (React 19) or attribute.
 		*
 		* @returns Sanitized API base URL without trailing slash.
@@ -1326,22 +1262,36 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#region src/shell-component.ts
 	const SHELL_OPEN_CHANGE_EVENT = "char-shell-open-change";
 	const SHELL_Z_INDEX = 2147483e3;
-	const DEFAULT_FULLSCREEN_BREAKPOINT = 1024;
-	const DEFAULT_PANEL_WIDTH = 420;
-	const DEFAULT_PIP_WIDTH = 300;
-	const DEFAULT_PIP_HEIGHT = 96;
-	const DEFAULT_PIP_POSITION = "bottom-center";
+	const FULLSCREEN_BREAKPOINT = 1024;
+	const PANEL_WIDTH = 420;
+	const PIP_WIDTH = 400;
+	const PIP_HEIGHT = 60;
+	const PIP_POSITION = "bottom-center";
 	const SHELL_HEALTH_TIMEOUT_MS = 1e4;
-	const PANEL_BORDER = "1px solid rgba(15, 23, 42, 0.12)";
 	const SAFE_BOTTOM = "calc(16px + env(safe-area-inset-bottom, 0px))";
-	const SHELL_LAYOUT_TRANSITION = "opacity 280ms ease, width 220ms ease, min-width 220ms ease, flex-basis 220ms ease";
+	const THEME_LIGHT = {
+		background: "oklch(1 0 0)",
+		foreground: "oklch(0.141 0.005 285.823)",
+		border: "oklch(0.92 0.004 286.32)",
+		mutedForeground: "oklch(0.552 0.016 285.938)",
+		primary: "oklch(0.21 0.006 285.885)"
+	};
+	const THEME_DARK = {
+		background: "oklch(0.141 0.005 285.823)",
+		foreground: "oklch(0.985 0 0)",
+		border: "oklch(1 0 0 / 10%)",
+		mutedForeground: "oklch(0.705 0.015 286.067)",
+		primary: "oklch(0.92 0.004 286.32)"
+	};
+	const BODY_MARGIN_TRANSITION = "margin-right 220ms ease";
+	const SHELL_LAYOUT_TRANSITION = "opacity 220ms ease, width 220ms ease, min-width 220ms ease, flex-basis 220ms ease";
 	const SHELL_REVEAL_FADE_MS = 280;
 	const PIP_MIN_COLLAPSED_WIDTH = 70;
 	const PIP_MIN_COLLAPSED_HEIGHT = 30;
 	const PIP_MAX_MEASURED_HEIGHT = 320;
 	const PIP_COLLAPSE_DELAY_MS = 400;
 	const PIP_PILL_HEIGHT = 40;
-	const PIP_MORPH_TRANSITION = "width 280ms ease, height 280ms ease, bottom 280ms ease, border-radius 280ms ease, opacity 200ms ease, transform 280ms ease";
+	const PIP_MORPH_TRANSITION = "width 280ms ease, height 280ms ease, bottom 280ms ease, border-radius 280ms ease, opacity 280ms ease, transform 280ms ease";
 	const PIP_MORPH_DURATION_MS = 280;
 	const PIP_SCROLL_HIDE_OFFSET = 100;
 	const PIP_COLLAPSED_WIDTH_RATIO = .75;
@@ -1349,23 +1299,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	const PIP_SCROLL_DIRECTION_THRESHOLD = 40;
 	const WHEEL_DELTA_LINE_MULTIPLIER = 15;
 	const WHEEL_DELTA_PAGE_MULTIPLIER = 300;
-	function normalizePositiveInteger(value, fallback) {
-		if (!Number.isFinite(value) || value <= 0) {
-			console.warn(`[Char] Invalid value ${value}, using fallback ${fallback}`);
-			return fallback;
-		}
-		return Math.round(value);
-	}
-	function parsePositiveIntegerAttribute(value, fallback) {
-		if (value === null || value.trim() === "") return fallback;
-		const parsed = Number.parseInt(value, 10);
-		if (!Number.isFinite(parsed)) return fallback;
-		return normalizePositiveInteger(parsed, fallback);
-	}
-	function normalizePipPosition(value) {
-		if (value === "bottom-right" || value === "bottom-left") return value;
-		return DEFAULT_PIP_POSITION;
-	}
+	const PANEL_MIN_WIDTH = 320;
+	const PANEL_MAX_WIDTH = 700;
+	const RESIZE_NUB_WIDTH = 6;
+	const EDGE_TAB_WIDTH = 44;
+	const EDGE_TAB_HEIGHT = 48;
+	const EDGE_TAB_DRAG_THRESHOLD_PX = 4;
+	const ICON_MESSAGE = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>`;
+	const ICON_CHEVRON_RIGHT = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>`;
 	function getPipPositionStyles(position) {
 		if (position === "bottom-right") return {
 			left: "auto",
@@ -1422,25 +1363,28 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	var CharAgentShellElement = class extends HTMLElement {
 		static observedAttributes = [
 			"open",
-			"fullscreen-breakpoint",
-			"panel-width",
-			"pip-position",
-			"pip-width",
-			"pip-height",
-			"dev-mode",
 			"enable-debug-tools",
 			"api-base"
 		];
 		_agent = null;
 		_open = false;
-		_fullscreenBreakpoint = DEFAULT_FULLSCREEN_BREAKPOINT;
-		_panelWidth = DEFAULT_PANEL_WIDTH;
-		_pipWidth = DEFAULT_PIP_WIDTH;
-		_pipHeight = DEFAULT_PIP_HEIGHT;
-		_pipPosition = DEFAULT_PIP_POSITION;
+		_savedBodyTransition = null;
+		_bodyMarginTimeoutId = null;
+		_currentPanelWidth = PANEL_WIDTH;
+		_resizeNubElement = null;
+		_edgeTabElement = null;
+		_resizeDragging = false;
+		_resizeDragOverlay = null;
+		_resizeStartX = 0;
+		_resizeStartWidth = 0;
+		_edgeTabDragStartX = 0;
+		_edgeTabDragging = false;
 		_isNarrowViewport = false;
 		_mediaQuery = null;
 		_mediaQueryHandler = null;
+		_themeObserver = null;
+		_themeMediaQuery = null;
+		_themeMediaHandler = null;
 		_pendingConnectOptions = null;
 		_pendingHostContext = {};
 		_isApplyingOpenAttribute = false;
@@ -1458,6 +1402,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		_pipAnimationTimeoutId = null;
 		_pendingPipMeasuredHeight = null;
 		_tapOutsideListener = null;
+		_lastAppliedDisplayMode = null;
 		_pipHiddenByScroll = false;
 		_scrollListener = null;
 		_scrollRafId = null;
@@ -1477,75 +1422,36 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		set open(value) {
 			this.setOpen(value);
 		}
-		get fullscreenBreakpoint() {
-			return this._fullscreenBreakpoint;
-		}
-		set fullscreenBreakpoint(value) {
-			const normalized = normalizePositiveInteger(value, DEFAULT_FULLSCREEN_BREAKPOINT);
-			if (normalized === this._fullscreenBreakpoint) return;
-			this._fullscreenBreakpoint = normalized;
-			this.setAttribute("fullscreen-breakpoint", String(normalized));
-			this._setupViewportObserver();
-			this._applyDisplayModeAndLayout();
-		}
-		get panelWidth() {
-			return this._panelWidth;
-		}
-		set panelWidth(value) {
-			const normalized = normalizePositiveInteger(value, DEFAULT_PANEL_WIDTH);
-			if (normalized === this._panelWidth) return;
-			this._panelWidth = normalized;
-			this.setAttribute("panel-width", String(normalized));
-			this._applyDisplayModeAndLayout();
-		}
-		get pipWidth() {
-			return this._pipWidth;
-		}
-		set pipWidth(value) {
-			const normalized = normalizePositiveInteger(value, DEFAULT_PIP_WIDTH);
-			if (normalized === this._pipWidth) return;
-			this._pipWidth = normalized;
-			this.setAttribute("pip-width", String(normalized));
-			this._applyDisplayModeAndLayout();
-		}
-		get pipHeight() {
-			return this._pipHeight;
-		}
-		set pipHeight(value) {
-			const normalized = normalizePositiveInteger(value, DEFAULT_PIP_HEIGHT);
-			if (normalized === this._pipHeight) return;
-			this._pipHeight = normalized;
-			this.setAttribute("pip-height", String(normalized));
-			this._applyDisplayModeAndLayout();
-		}
-		get pipPosition() {
-			return this._pipPosition;
-		}
-		set pipPosition(value) {
-			const normalized = normalizePipPosition(value);
-			if (normalized === this._pipPosition) return;
-			this._pipPosition = normalized;
-			this.setAttribute("pip-position", normalized);
-			this._applyDisplayModeAndLayout();
-		}
 		connectedCallback() {
 			this._upgradeProperty("open");
-			this._upgradeProperty("fullscreenBreakpoint");
-			this._upgradeProperty("panelWidth");
-			this._upgradeProperty("pipPosition");
-			this._upgradeProperty("pipWidth");
-			this._upgradeProperty("pipHeight");
-			this._upgradeProperty("devMode");
 			this._upgradeProperty("apiBase");
 			registerChar();
 			this._ensureAgent();
 			this._readConfigFromAttributes();
 			this._syncForwardedAttributes();
 			this._setupViewportObserver();
+			this._setupThemeObserver();
 			this._applyDisplayModeAndLayout();
 			this._flushPendingConnectAndContext();
 		}
 		disconnectedCallback() {
+			this._removeBodyMargin();
+			if (this._bodyMarginTimeoutId !== null) {
+				window.clearTimeout(this._bodyMarginTimeoutId);
+				this._bodyMarginTimeoutId = null;
+			}
+			this._removeResizeDragOverlay();
+			this._teardownThemeObserver();
+			document.removeEventListener("mousemove", this._onEdgeTabMouseMove);
+			document.removeEventListener("mouseup", this._onEdgeTabMouseUp);
+			document.removeEventListener("touchmove", this._onEdgeTabTouchMove);
+			document.removeEventListener("touchend", this._onEdgeTabTouchEnd);
+			this._removeEdgeTab();
+			this._hideResizeNub();
+			if (this._resizeNubElement) {
+				this._resizeNubElement.remove();
+				this._resizeNubElement = null;
+			}
 			this._stopHealthWait();
 			this._cancelRevealFade();
 			this._teardownViewportObserver();
@@ -1574,48 +1480,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 					});
 					return;
 				}
-				case "fullscreen-breakpoint": {
-					const next = parsePositiveIntegerAttribute(newValue, DEFAULT_FULLSCREEN_BREAKPOINT);
-					if (next !== this._fullscreenBreakpoint) {
-						this._fullscreenBreakpoint = next;
-						this._setupViewportObserver();
-						this._applyDisplayModeAndLayout();
-					}
-					return;
-				}
-				case "panel-width": {
-					const next = parsePositiveIntegerAttribute(newValue, DEFAULT_PANEL_WIDTH);
-					if (next !== this._panelWidth) {
-						this._panelWidth = next;
-						this._applyDisplayModeAndLayout();
-					}
-					return;
-				}
-				case "pip-width": {
-					const next = parsePositiveIntegerAttribute(newValue, DEFAULT_PIP_WIDTH);
-					if (next !== this._pipWidth) {
-						this._pipWidth = next;
-						this._applyDisplayModeAndLayout();
-					}
-					return;
-				}
-				case "pip-height": {
-					const next = parsePositiveIntegerAttribute(newValue, DEFAULT_PIP_HEIGHT);
-					if (next !== this._pipHeight) {
-						this._pipHeight = next;
-						this._applyDisplayModeAndLayout();
-					}
-					return;
-				}
-				case "pip-position": {
-					const next = normalizePipPosition(newValue);
-					if (next !== this._pipPosition) {
-						this._pipPosition = next;
-						this._applyDisplayModeAndLayout();
-					}
-					return;
-				}
-				case "dev-mode":
 				case "enable-debug-tools":
 				case "api-base":
 					this._syncForwardedAttributes();
@@ -1625,7 +1489,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		/**
 		* Connects shell authentication and starts availability health checks.
 		*
-		* @param options - Authentication payload for either ID token or ticket auth.
+		* @param options - Authentication payload (`publishableKey` + optional `idToken`).
 		* @returns `true` when connect is accepted by the inner element.
 		*/
 		connect(options) {
@@ -1733,15 +1597,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._attachForwardedListeners();
 		}
 		_primeAgentBootConfig(agent) {
-			for (const name of [
-				"dev-mode",
-				"enable-debug-tools",
-				"api-base"
-			]) {
+			for (const name of ["enable-debug-tools", "api-base"]) {
 				const value = this.getAttribute(name);
 				if (value !== null) agent.setAttribute(name, value);
 			}
-			agent.devMode = this.devMode && typeof this.devMode === "object" ? this.devMode : void 0;
 			agent.apiBase = typeof this.apiBase === "string" ? this.apiBase : void 0;
 		}
 		_attachForwardedListeners() {
@@ -1764,29 +1623,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		_readConfigFromAttributes() {
 			this._open = parseBooleanAttribute(this.getAttribute("open"));
-			this._fullscreenBreakpoint = parsePositiveIntegerAttribute(this.getAttribute("fullscreen-breakpoint"), DEFAULT_FULLSCREEN_BREAKPOINT);
-			this._panelWidth = parsePositiveIntegerAttribute(this.getAttribute("panel-width"), DEFAULT_PANEL_WIDTH);
-			this._pipWidth = parsePositiveIntegerAttribute(this.getAttribute("pip-width"), DEFAULT_PIP_WIDTH);
-			this._pipHeight = parsePositiveIntegerAttribute(this.getAttribute("pip-height"), DEFAULT_PIP_HEIGHT);
-			this._pipPosition = normalizePipPosition(this.getAttribute("pip-position"));
 		}
 		_syncForwardedAttributes() {
 			if (!this._agent) return;
-			for (const name of [
-				"dev-mode",
-				"enable-debug-tools",
-				"api-base"
-			]) {
+			for (const name of ["enable-debug-tools", "api-base"]) {
 				const value = this.getAttribute(name);
 				if (value === null) this._agent.removeAttribute(name);
 				else this._agent.setAttribute(name, value);
 			}
-			this._agent.devMode = this.devMode && typeof this.devMode === "object" ? this.devMode : void 0;
 			this._agent.apiBase = typeof this.apiBase === "string" ? this.apiBase : void 0;
 		}
 		_setupViewportObserver() {
 			if (typeof window === "undefined") return;
-			const query = `(max-width: ${this._fullscreenBreakpoint - 1}px)`;
+			const query = `(max-width: ${FULLSCREEN_BREAKPOINT - 1}px)`;
 			if (this._mediaQuery?.media === query) {
 				this._isNarrowViewport = this._mediaQuery.matches;
 				return;
@@ -1824,38 +1673,558 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			if (displayMode !== "pip") {
 				if (this._pipMeasuredHeight !== null) this._pipMeasuredHeight = null;
 			}
+			const prevMode = this._lastAppliedDisplayMode;
+			this._lastAppliedDisplayMode = displayMode;
 			this._agent.setAttribute("display-mode", displayMode);
 			this._applyHostLayout(displayMode);
-			this._applyAgentLayout(displayMode);
+			this._applyAgentLayout(displayMode, prevMode);
+		}
+		_isParentFlex() {
+			const parent = this.parentElement;
+			if (!parent) return false;
+			const display = getComputedStyle(parent).display;
+			return display === "flex" || display === "inline-flex";
+		}
+		_isDarkMode() {
+			const themeAttr = document.documentElement.getAttribute("data-theme");
+			if (themeAttr === "dark") return true;
+			if (themeAttr === "light") return false;
+			return document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
+		}
+		/**
+		* Read a `--char-color-*` variable from the shell element. If the host
+		* page has set it (directly or via inheritance) use that value; otherwise
+		* fall back to the char design-system default for the current light/dark mode.
+		*/
+		_resolveColor(token) {
+			const host = getComputedStyle(this).getPropertyValue({
+				background: "--char-color-background",
+				foreground: "--char-color-foreground",
+				border: "--char-color-border",
+				mutedForeground: "--char-color-muted-foreground",
+				primary: "--char-color-primary"
+			}[token]).trim();
+			if (host) return host;
+			return (this._isDarkMode() ? THEME_DARK : THEME_LIGHT)[token];
+		}
+		_panelBorder() {
+			return `1px solid ${this._resolveColor("border")}`;
+		}
+		_setupThemeObserver() {
+			const onThemeChange = () => {
+				this._applyEdgeTabVisual();
+				this._refreshResizeNubColors();
+				if (this._open && !this._isNarrowViewport) {
+					if (this._isParentFlex()) setStyleValue(this, "border-left", this._panelBorder());
+					else if (this._agent) setStyleValue(this._agent, "border-left", this._panelBorder());
+				}
+			};
+			this._themeObserver = new MutationObserver(onThemeChange);
+			this._themeObserver.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: [
+					"class",
+					"style",
+					"data-theme"
+				]
+			});
+			this._themeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+			this._themeMediaHandler = onThemeChange;
+			this._themeMediaQuery.addEventListener("change", this._themeMediaHandler);
+		}
+		_teardownThemeObserver() {
+			if (this._themeObserver) {
+				this._themeObserver.disconnect();
+				this._themeObserver = null;
+			}
+			if (this._themeMediaQuery && this._themeMediaHandler) {
+				this._themeMediaQuery.removeEventListener("change", this._themeMediaHandler);
+				this._themeMediaQuery = null;
+				this._themeMediaHandler = null;
+			}
 		}
 		_applyHostLayout(displayMode) {
+			const useFlexLayout = this._isParentFlex();
 			if (displayMode === "inline" && !this._isNarrowViewport) {
-				setStyleValue(this, "position", "relative");
-				setStyleValue(this, "flex", `0 0 ${this._panelWidth}px`);
-				setStyleValue(this, "width", `${this._panelWidth}px`);
-				setStyleValue(this, "min-width", `${this._panelWidth}px`);
-				setStyleValue(this, "height", "100%");
-				setStyleValue(this, "z-index", String(SHELL_Z_INDEX));
-				setStyleValue(this, "border-left", PANEL_BORDER);
-				setStyleValue(this, "transition", SHELL_LAYOUT_TRANSITION);
+				if (useFlexLayout) {
+					setStyleValue(this, "position", "relative");
+					setStyleValue(this, "flex", `0 0 ${this._currentPanelWidth}px`);
+					setStyleValue(this, "width", `${this._currentPanelWidth}px`);
+					setStyleValue(this, "min-width", `${this._currentPanelWidth}px`);
+					setStyleValue(this, "height", "100%");
+					setStyleValue(this, "z-index", String(SHELL_Z_INDEX));
+					setStyleValue(this, "border-left", this._panelBorder());
+					setStyleValue(this, "transition", this._resizeDragging ? "none" : SHELL_LAYOUT_TRANSITION);
+					resetStyleValue(this, "overflow");
+					resetStyleValue(this, "pointer-events");
+					this._removeBodyMargin();
+				} else {
+					setStyleValue(this, "position", "fixed");
+					setStyleValue(this, "width", "0px");
+					setStyleValue(this, "height", "0px");
+					setStyleValue(this, "z-index", String(SHELL_Z_INDEX));
+					resetStyleValue(this, "flex");
+					resetStyleValue(this, "min-width");
+					resetStyleValue(this, "border-left");
+					resetStyleValue(this, "overflow");
+					resetStyleValue(this, "pointer-events");
+					this._applyBodyMargin(this._currentPanelWidth);
+				}
+				this._showResizeNub();
+				this._showEdgeTab();
+				if (useFlexLayout) this._syncEdgeTabWithPanelTransition();
+			} else if (displayMode === "fullscreen") {
+				if (useFlexLayout) {
+					setStyleValue(this, "position", "relative");
+					setStyleValue(this, "flex", "0 0 0px");
+					setStyleValue(this, "width", "0px");
+					setStyleValue(this, "min-width", "0px");
+					setStyleValue(this, "height", "0px");
+					setStyleValue(this, "z-index", String(SHELL_Z_INDEX));
+					resetStyleValue(this, "border-left");
+					setStyleValue(this, "transition", SHELL_LAYOUT_TRANSITION);
+					resetStyleValue(this, "overflow");
+					resetStyleValue(this, "pointer-events");
+				} else {
+					setStyleValue(this, "position", "relative");
+					resetStyleValue(this, "flex");
+					resetStyleValue(this, "min-width");
+					resetStyleValue(this, "border-left");
+					resetStyleValue(this, "overflow");
+					resetStyleValue(this, "pointer-events");
+				}
+				this._removeBodyMargin();
+				this._hideResizeNub();
+				this._hideEdgeTab();
+			} else {
+				if (useFlexLayout) {
+					setStyleValue(this, "position", "relative");
+					setStyleValue(this, "flex", "0 0 0px");
+					setStyleValue(this, "width", "0px");
+					setStyleValue(this, "min-width", "0px");
+					setStyleValue(this, "height", "0px");
+					setStyleValue(this, "z-index", String(SHELL_Z_INDEX));
+					resetStyleValue(this, "border-left");
+					setStyleValue(this, "transition", SHELL_LAYOUT_TRANSITION);
+					resetStyleValue(this, "overflow");
+					resetStyleValue(this, "pointer-events");
+				} else {
+					setStyleValue(this, "position", "relative");
+					resetStyleValue(this, "flex");
+					resetStyleValue(this, "min-width");
+					resetStyleValue(this, "border-left");
+					resetStyleValue(this, "overflow");
+					resetStyleValue(this, "pointer-events");
+				}
+				this._removeBodyMargin();
+				this._hideResizeNub();
+				this._showEdgeTab();
+			}
+		}
+		_applyBodyMargin(width) {
+			const body = document.body;
+			if (this._savedBodyTransition === null) this._savedBodyTransition = body.style.transition || "";
+			if (!this._resizeDragging) body.style.transition = BODY_MARGIN_TRANSITION;
+			body.style.marginRight = `${width}px`;
+		}
+		_removeBodyMargin() {
+			const body = document.body;
+			body.style.marginRight = "";
+			if (this._bodyMarginTimeoutId !== null) {
+				window.clearTimeout(this._bodyMarginTimeoutId);
+				this._bodyMarginTimeoutId = null;
+			}
+			if (this._savedBodyTransition !== null) {
+				const saved = this._savedBodyTransition;
+				this._bodyMarginTimeoutId = window.setTimeout(() => {
+					this._bodyMarginTimeoutId = null;
+					if (body.style.transition === BODY_MARGIN_TRANSITION) body.style.transition = saved || "";
+				}, 220);
+				this._savedBodyTransition = null;
+			}
+		}
+		_ensureResizeNub() {
+			if (this._resizeNubElement) return this._resizeNubElement;
+			const nub = document.createElement("div");
+			nub.setAttribute("role", "separator");
+			nub.setAttribute("aria-orientation", "vertical");
+			nub.setAttribute("aria-label", "Resize panel");
+			nub.style.cssText = [
+				"position:fixed",
+				"top:0",
+				`width:${RESIZE_NUB_WIDTH}px`,
+				"height:100dvh",
+				"cursor:col-resize",
+				`z-index:${SHELL_Z_INDEX + 1}`,
+				"background:transparent",
+				"user-select:none",
+				"-webkit-user-select:none",
+				"touch-action:none"
+			].join(";");
+			const indicator = document.createElement("div");
+			indicator.style.cssText = [
+				"position:absolute",
+				"top:0",
+				"left:50%",
+				"transform:translateX(-50%)",
+				"width:2px",
+				"height:100%",
+				"border-radius:1px",
+				"transition:background 150ms ease, width 150ms ease",
+				"pointer-events:none"
+			].join(";");
+			nub.appendChild(indicator);
+			this._applyResizeNubColors(indicator);
+			nub.addEventListener("mouseenter", () => {
+				const dark = this._isDarkMode();
+				indicator.style.background = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.15)";
+				indicator.style.width = "3px";
+			});
+			nub.addEventListener("mouseleave", () => {
+				if (!this._resizeDragging) {
+					this._applyResizeNubColors(indicator);
+					indicator.style.width = "2px";
+				}
+			});
+			nub.addEventListener("mousedown", this._onResizeStart);
+			nub.addEventListener("touchstart", this._onResizeTouchStart, { passive: false });
+			this._resizeNubElement = nub;
+			return nub;
+		}
+		_applyResizeNubColors(indicator) {
+			const el = indicator ?? this._resizeNubElement?.querySelector("div");
+			if (!el) return;
+			const dark = this._isDarkMode();
+			el.style.background = dark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)";
+		}
+		_refreshResizeNubColors() {
+			this._applyResizeNubColors();
+		}
+		_showResizeNub() {
+			const nub = this._ensureResizeNub();
+			if (!nub.parentNode) document.body.appendChild(nub);
+			setStyleValue(nub, "right", `${this._currentPanelWidth - Math.floor(RESIZE_NUB_WIDTH / 2)}px`);
+			setStyleValue(nub, "display", "block");
+		}
+		_hideResizeNub() {
+			if (this._resizeNubElement) setStyleValue(this._resizeNubElement, "display", "none");
+		}
+		_ensureEdgeTab() {
+			if (this._edgeTabElement) return this._edgeTabElement;
+			const tab = document.createElement("button");
+			tab.setAttribute("type", "button");
+			tab.setAttribute("aria-label", "Open assistant");
+			tab.style.cssText = [
+				"position:fixed",
+				"top:50%",
+				"right:0px",
+				"transform:translateY(-50%)",
+				`z-index:${SHELL_Z_INDEX + 2}`,
+				`width:${EDGE_TAB_WIDTH}px`,
+				`height:${EDGE_TAB_HEIGHT}px`,
+				"display:flex",
+				"align-items:center",
+				"justify-content:center",
+				"border-right:none",
+				"border-radius:12px 0 0 12px",
+				"padding:0",
+				"outline:none",
+				"transition:transform 200ms ease,background 150ms ease,color 150ms ease,box-shadow 200ms ease,border-color 150ms ease",
+				"user-select:none",
+				"-webkit-user-select:none"
+			].join(";");
+			const dot = document.createElement("span");
+			dot.style.cssText = [
+				"position:absolute",
+				"top:8px",
+				"right:10px",
+				"width:7px",
+				"height:7px",
+				"border-radius:50%",
+				"transition:opacity 200ms ease"
+			].join(";");
+			tab.appendChild(dot);
+			const icon = document.createElement("span");
+			icon.style.cssText = "display:flex;align-items:center;justify-content:center;pointer-events:none;";
+			icon.innerHTML = ICON_MESSAGE;
+			tab.appendChild(icon);
+			tab.addEventListener("mouseenter", () => {
+				const dark = this._isDarkMode();
+				if (this._open && !this._isNarrowViewport) {
+					tab.style.background = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)";
+					tab.style.boxShadow = "none";
+					tab.style.color = this._resolveColor("foreground");
+					tab.style.cursor = "col-resize";
+				} else {
+					tab.style.transform = "translateY(-50%) translateX(-3px)";
+					tab.style.boxShadow = dark ? "-4px 0 16px rgba(0,0,0,0.3)" : "-4px 0 16px rgba(0,0,0,0.12)";
+					tab.style.color = this._resolveColor("foreground");
+					tab.style.cursor = "pointer";
+				}
+			});
+			tab.addEventListener("mouseleave", () => {
+				this._applyEdgeTabVisual();
+			});
+			tab.addEventListener("mousedown", this._onEdgeTabMouseDown);
+			tab.addEventListener("touchstart", this._onEdgeTabTouchStart, { passive: false });
+			this._edgeTabElement = tab;
+			return tab;
+		}
+		/** Apply visual style (colors, shadow) based on open state — no position change. */
+		_applyEdgeTabVisual() {
+			if (!this._edgeTabElement) return;
+			const tab = this._edgeTabElement;
+			const icon = tab.querySelector("span:last-child");
+			const dot = tab.querySelector("span:first-child");
+			const dark = this._isDarkMode();
+			const bg = this._resolveColor("background");
+			const borderColor = this._resolveColor("border");
+			const mutedFg = this._resolveColor("mutedForeground");
+			const primary = this._resolveColor("primary");
+			tab.style.border = `1px solid ${borderColor}`;
+			tab.style.borderRight = "none";
+			if (this._open && !this._isNarrowViewport) {
+				tab.setAttribute("aria-label", "Close assistant");
+				tab.setAttribute("aria-expanded", "true");
+				if (icon) icon.innerHTML = ICON_CHEVRON_RIGHT;
+				if (dot) dot.style.opacity = "0";
+				tab.style.background = bg;
+				tab.style.boxShadow = "none";
+				tab.style.backdropFilter = "none";
+				tab.style.setProperty("-webkit-backdrop-filter", "none");
+				tab.style.color = mutedFg;
+				tab.style.cursor = "col-resize";
+				tab.style.transform = "translateY(-50%)";
+			} else {
+				tab.setAttribute("aria-label", "Open assistant");
+				tab.setAttribute("aria-expanded", "false");
+				if (icon) icon.innerHTML = ICON_MESSAGE;
+				if (dot) {
+					dot.style.opacity = "1";
+					dot.style.background = primary;
+				}
+				tab.style.background = dark ? "color-mix(in oklch, " + bg + ", white 4%)" : "color-mix(in oklch, " + bg + ", transparent 5%)";
+				tab.style.boxShadow = dark ? "-2px 0 12px rgba(0,0,0,0.25)" : "-2px 0 12px rgba(0,0,0,0.08)";
+				tab.style.backdropFilter = "blur(8px)";
+				tab.style.setProperty("-webkit-backdrop-filter", "blur(8px)");
+				tab.style.color = mutedFg;
+				tab.style.cursor = "pointer";
+				tab.style.transform = "translateY(-50%)";
+			}
+		}
+		/** Set the tab's `right` position immediately (no transition). */
+		_positionEdgeTab(rightPx) {
+			if (this._edgeTabElement) this._edgeTabElement.style.right = `${rightPx}px`;
+		}
+		_showEdgeTab() {
+			const tab = this._ensureEdgeTab();
+			if (!tab.parentNode) document.body.appendChild(tab);
+			setStyleValue(tab, "display", "flex");
+			if (this._open && !this._isNarrowViewport) this._positionEdgeTab(this._currentPanelWidth - 1);
+			else this._positionEdgeTab(0);
+			this._applyEdgeTabVisual();
+		}
+		_hideEdgeTab() {
+			if (this._edgeTabElement) setStyleValue(this._edgeTabElement, "display", "none");
+		}
+		_removeEdgeTab() {
+			if (this._edgeTabElement) {
+				this._edgeTabElement.remove();
+				this._edgeTabElement = null;
+			}
+		}
+		_onEdgeTabMouseDown = (e) => {
+			e.preventDefault();
+			this._edgeTabDragStartX = e.clientX;
+			this._edgeTabDragging = false;
+			document.addEventListener("mousemove", this._onEdgeTabMouseMove);
+			document.addEventListener("mouseup", this._onEdgeTabMouseUp);
+		};
+		_onEdgeTabTouchStart = (e) => {
+			if (e.touches.length !== 1) return;
+			e.preventDefault();
+			this._edgeTabDragStartX = e.touches[0].clientX;
+			this._edgeTabDragging = false;
+			document.addEventListener("touchmove", this._onEdgeTabTouchMove, { passive: false });
+			document.addEventListener("touchend", this._onEdgeTabTouchEnd);
+		};
+		_onEdgeTabMouseMove = (e) => {
+			const dx = Math.abs(e.clientX - this._edgeTabDragStartX);
+			if (!this._edgeTabDragging && dx >= EDGE_TAB_DRAG_THRESHOLD_PX) {
+				this._edgeTabDragging = true;
+				this._promoteEdgeTabDragToResize(this._edgeTabDragStartX);
+			}
+		};
+		_onEdgeTabTouchMove = (e) => {
+			if (e.touches.length !== 1) return;
+			e.preventDefault();
+			const dx = Math.abs(e.touches[0].clientX - this._edgeTabDragStartX);
+			if (!this._edgeTabDragging && dx >= EDGE_TAB_DRAG_THRESHOLD_PX) {
+				this._edgeTabDragging = true;
+				this._promoteEdgeTabDragToResize(this._edgeTabDragStartX);
+			}
+		};
+		_onEdgeTabMouseUp = (_e) => {
+			document.removeEventListener("mousemove", this._onEdgeTabMouseMove);
+			document.removeEventListener("mouseup", this._onEdgeTabMouseUp);
+			if (!this._edgeTabDragging) this.toggleOpen();
+		};
+		_onEdgeTabTouchEnd = (_e) => {
+			document.removeEventListener("touchmove", this._onEdgeTabTouchMove);
+			document.removeEventListener("touchend", this._onEdgeTabTouchEnd);
+			if (!this._edgeTabDragging) this.toggleOpen();
+		};
+		/**
+		* Once the edge tab drag crosses the threshold, hand off to the existing
+		* resize machinery so the panel tracks the pointer smoothly.
+		*/
+		_promoteEdgeTabDragToResize(startX) {
+			if (!this._open || this._isNarrowViewport) {
+				this._edgeTabDragging = false;
 				return;
 			}
-			setStyleValue(this, "position", "relative");
-			setStyleValue(this, "flex", "0 0 0px");
-			setStyleValue(this, "width", "0px");
-			setStyleValue(this, "min-width", "0px");
-			setStyleValue(this, "height", "0px");
-			setStyleValue(this, "z-index", String(SHELL_Z_INDEX));
-			resetStyleValue(this, "border-left");
-			setStyleValue(this, "transition", SHELL_LAYOUT_TRANSITION);
+			this._resizeDragging = true;
+			this._resizeStartX = startX;
+			this._resizeStartWidth = this._currentPanelWidth;
+			this._showResizeDragOverlay();
+			if (this._agent) setStyleValue(this._agent, "transition", "none");
+			setStyleValue(this, "transition", "none");
+			document.body.style.transition = "none";
+			document.body.style.cursor = "col-resize";
+			document.body.style.userSelect = "none";
+			document.addEventListener("mousemove", this._onResizeMove);
+			document.addEventListener("mouseup", this._onResizeEnd);
+			document.addEventListener("touchmove", this._onResizeTouchMove, { passive: false });
+			document.addEventListener("touchend", this._onResizeTouchEnd);
+		}
+		/**
+		* Run a rAF loop that reads the shell element's actual rendered width
+		* and pins the edge tab to it. Used during flex layout transitions so
+		* the tab tracks the animated flex-basis exactly, frame by frame.
+		*/
+		_syncEdgeTabWithPanelTransition() {
+			if (!this._edgeTabElement) return;
+			const start = performance.now();
+			const maxDuration = 300;
+			const tick = () => {
+				if (!this._edgeTabElement || !this._open) return;
+				if (this._isParentFlex()) {
+					const width = this.getBoundingClientRect().width;
+					this._positionEdgeTab(width - 1);
+				}
+				if (performance.now() - start < maxDuration) requestAnimationFrame(tick);
+			};
+			requestAnimationFrame(tick);
+		}
+		_showResizeDragOverlay() {
+			if (this._resizeDragOverlay) return;
+			const overlay = document.createElement("div");
+			overlay.style.cssText = [
+				"position:fixed",
+				"top:0",
+				"left:0",
+				"width:100vw",
+				"height:100vh",
+				"cursor:col-resize",
+				`z-index:${SHELL_Z_INDEX + 1}`,
+				"background:transparent",
+				"user-select:none",
+				"-webkit-user-select:none"
+			].join(";");
+			document.body.appendChild(overlay);
+			this._resizeDragOverlay = overlay;
+		}
+		_removeResizeDragOverlay() {
+			if (this._resizeDragOverlay) {
+				this._resizeDragOverlay.remove();
+				this._resizeDragOverlay = null;
+			}
+		}
+		_onResizeStart = (e) => {
+			e.preventDefault();
+			this._resizeDragging = true;
+			this._resizeStartX = e.clientX;
+			this._resizeStartWidth = this._currentPanelWidth;
+			this._showResizeDragOverlay();
+			if (this._agent) setStyleValue(this._agent, "transition", "none");
+			setStyleValue(this, "transition", "none");
+			document.body.style.transition = "none";
+			document.body.style.cursor = "col-resize";
+			document.body.style.userSelect = "none";
+			document.addEventListener("mousemove", this._onResizeMove);
+			document.addEventListener("mouseup", this._onResizeEnd);
+		};
+		_onResizeTouchStart = (e) => {
+			if (e.touches.length !== 1) return;
+			e.preventDefault();
+			const touch = e.touches[0];
+			this._resizeDragging = true;
+			this._resizeStartX = touch.clientX;
+			this._resizeStartWidth = this._currentPanelWidth;
+			this._showResizeDragOverlay();
+			if (this._agent) setStyleValue(this._agent, "transition", "none");
+			setStyleValue(this, "transition", "none");
+			document.body.style.transition = "none";
+			document.addEventListener("touchmove", this._onResizeTouchMove, { passive: false });
+			document.addEventListener("touchend", this._onResizeTouchEnd);
+		};
+		_onResizeMove = (e) => {
+			if (!this._resizeDragging) return;
+			const delta = this._resizeStartX - e.clientX;
+			this._applyResizeWidth(this._resizeStartWidth + delta);
+		};
+		_onResizeTouchMove = (e) => {
+			if (!this._resizeDragging || e.touches.length !== 1) return;
+			e.preventDefault();
+			const delta = this._resizeStartX - e.touches[0].clientX;
+			this._applyResizeWidth(this._resizeStartWidth + delta);
+		};
+		_applyResizeWidth(rawWidth) {
+			const width = Math.max(PANEL_MIN_WIDTH, Math.min(rawWidth, PANEL_MAX_WIDTH));
+			this._currentPanelWidth = width;
+			if (this._isParentFlex()) {
+				setStyleValue(this, "flex", `0 0 ${width}px`);
+				setStyleValue(this, "width", `${width}px`);
+				setStyleValue(this, "min-width", `${width}px`);
+			} else {
+				if (this._agent) setStyleValue(this._agent, "width", `${width}px`);
+				document.body.style.marginRight = `${width}px`;
+			}
+			if (this._resizeNubElement) {
+				const rightPos = width - Math.floor(RESIZE_NUB_WIDTH / 2);
+				setStyleValue(this._resizeNubElement, "right", `${rightPos}px`);
+			}
+			if (this._edgeTabElement) this._edgeTabElement.style.right = `${width - 1}px`;
+		}
+		_onResizeEnd = (e) => {
+			this._finishResize(e.clientX);
+			document.removeEventListener("mousemove", this._onResizeMove);
+			document.removeEventListener("mouseup", this._onResizeEnd);
+		};
+		_onResizeTouchEnd = (e) => {
+			const x = e.changedTouches[0]?.clientX ?? this._resizeStartX;
+			this._finishResize(x);
+			document.removeEventListener("touchmove", this._onResizeTouchMove);
+			document.removeEventListener("touchend", this._onResizeTouchEnd);
+		};
+		_finishResize(endX) {
+			this._resizeDragging = false;
+			this._removeResizeDragOverlay();
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+			document.body.style.transition = "";
+			const delta = this._resizeStartX - endX;
+			const finalWidth = this._resizeStartWidth + delta;
+			this._currentPanelWidth = Math.max(PANEL_MIN_WIDTH, Math.min(finalWidth, PANEL_MAX_WIDTH));
+			this._applyDisplayModeAndLayout();
 		}
 		_composePipTransform(opts) {
 			const parts = [];
-			if (this._pipPosition === "bottom-center") parts.push("translateX(-50%)");
+			if (PIP_POSITION === "bottom-center") parts.push("translateX(-50%)");
 			if (opts.scrollHide) parts.push(`translateY(${PIP_SCROLL_HIDE_OFFSET}px)`);
 			return parts.length > 0 ? parts.join(" ") : "none";
 		}
-		_applyAgentLayout(displayMode) {
+		_applyAgentLayout(displayMode, prevMode) {
 			if (!this._agent) return;
 			if (displayMode === "inline" && !this._isNarrowViewport) {
 				this._detachPipInteractionListeners();
@@ -1863,20 +2232,32 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				this._pipExpanded = false;
 				this._pipAnimating = false;
 				this._hidePipPill();
-				setStyleValue(this._agent, "position", "relative");
-				resetStyleValue(this._agent, "top");
-				resetStyleValue(this._agent, "right");
-				resetStyleValue(this._agent, "bottom");
-				resetStyleValue(this._agent, "left");
+				if (this._isParentFlex()) {
+					setStyleValue(this._agent, "position", "relative");
+					resetStyleValue(this._agent, "top");
+					resetStyleValue(this._agent, "right");
+					resetStyleValue(this._agent, "bottom");
+					resetStyleValue(this._agent, "left");
+					setStyleValue(this._agent, "z-index", "auto");
+					setStyleValue(this._agent, "width", "100%");
+					setStyleValue(this._agent, "height", "100%");
+				} else {
+					setStyleValue(this._agent, "position", "fixed");
+					setStyleValue(this._agent, "top", "0");
+					setStyleValue(this._agent, "right", "0");
+					resetStyleValue(this._agent, "bottom");
+					resetStyleValue(this._agent, "left");
+					setStyleValue(this._agent, "z-index", String(SHELL_Z_INDEX));
+					setStyleValue(this._agent, "width", `${this._currentPanelWidth}px`);
+					setStyleValue(this._agent, "height", "100dvh");
+					setStyleValue(this._agent, "border-left", this._panelBorder());
+				}
 				resetStyleValue(this._agent, "transform");
 				resetStyleValue(this._agent, "max-width");
 				resetStyleValue(this._agent, "max-height");
-				setStyleValue(this._agent, "z-index", "auto");
-				setStyleValue(this._agent, "width", "100%");
-				setStyleValue(this._agent, "height", "100%");
 				setStyleValue(this._agent, "border-radius", "0");
 				setStyleValue(this._agent, "overflow", "hidden");
-				resetStyleValue(this._agent, "transition");
+				setStyleValue(this._agent, "transition", this._resizeDragging ? "none" : "width 220ms ease");
 				resetStyleValue(this._agent, "opacity");
 				resetStyleValue(this._agent, "pointer-events");
 				return;
@@ -1905,15 +2286,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				resetStyleValue(this._agent, "pointer-events");
 				return;
 			}
-			const pipPositionStyles = getPipPositionStyles(this._pipPosition);
-			const expandedWidth = Math.max(PIP_MIN_COLLAPSED_WIDTH, this._pipWidth);
-			const collapsedWidth = Math.max(PIP_MIN_COLLAPSED_WIDTH, Math.round(this._pipWidth * PIP_COLLAPSED_WIDTH_RATIO));
+			const pipPositionStyles = getPipPositionStyles(PIP_POSITION);
+			const expandedWidth = Math.max(PIP_MIN_COLLAPSED_WIDTH, PIP_WIDTH);
+			const collapsedWidth = Math.max(PIP_MIN_COLLAPSED_WIDTH, Math.round(PIP_WIDTH * PIP_COLLAPSED_WIDTH_RATIO));
 			const targetWidth = this._pipExpanded ? expandedWidth : collapsedWidth;
-			const collapsedHeight = Math.max(PIP_MIN_COLLAPSED_HEIGHT, this._pipHeight);
-			const hasExplicitPipHeight = this.hasAttribute("pip-height");
+			const collapsedHeight = Math.max(PIP_MIN_COLLAPSED_HEIGHT, PIP_HEIGHT);
 			const measuredHeightFloor = typeof this._pipMeasuredHeight === "number" ? this._pipMeasuredHeight : 0;
 			const expandedHeight = Math.max(collapsedHeight, measuredHeightFloor);
-			const collapsedPipHeight = hasExplicitPipHeight ? collapsedHeight : PIP_PILL_HEIGHT;
+			const collapsedPipHeight = PIP_PILL_HEIGHT;
 			const heightDelta = expandedHeight - collapsedPipHeight;
 			let targetHeight;
 			let targetBottom;
@@ -1924,13 +2304,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				targetHeight = collapsedPipHeight;
 				targetBottom = heightDelta > 0 ? `calc(${heightDelta}px + 16px + env(safe-area-inset-bottom, 0px))` : SAFE_BOTTOM;
 			}
+			const enteringFromPanel = prevMode != null && prevMode !== "pip" && this._healthState === "healthy";
 			const composedTransform = this._composePipTransform({ scrollHide: this._pipHiddenByScroll });
+			if (enteringFromPanel) setStyleValue(this._agent, "transition", "none");
 			setStyleValue(this._agent, "position", "fixed");
 			resetStyleValue(this._agent, "top");
 			setStyleValue(this._agent, "right", pipPositionStyles.right);
 			setStyleValue(this._agent, "left", pipPositionStyles.left);
 			setStyleValue(this._agent, "bottom", targetBottom);
-			setStyleValue(this._agent, "transform", composedTransform);
 			setStyleValue(this._agent, "z-index", String(SHELL_Z_INDEX));
 			setStyleValue(this._agent, "width", `min(${targetWidth}px, calc(100vw - 24px))`);
 			setStyleValue(this._agent, "height", `${targetHeight}px`);
@@ -1938,7 +2319,22 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			setStyleValue(this._agent, "max-width", "100vw");
 			setStyleValue(this._agent, "border-radius", "16px");
 			setStyleValue(this._agent, "overflow", "hidden");
-			setStyleValue(this._agent, "transition", this._healthState === "healthy" ? PIP_MORPH_TRANSITION : "none");
+			resetStyleValue(this._agent, "border-left");
+			if (enteringFromPanel) {
+				setStyleValue(this._agent, "transform", this._composePipTransform({ scrollHide: true }));
+				setStyleValue(this._agent, "opacity", "0");
+				this._agent.offsetHeight;
+				requestAnimationFrame(() => {
+					if (!this._agent) return;
+					setStyleValue(this._agent, "transition", PIP_MORPH_TRANSITION);
+					setStyleValue(this._agent, "transform", composedTransform);
+					setStyleValue(this._agent, "opacity", "1");
+				});
+			} else {
+				setStyleValue(this._agent, "transform", composedTransform);
+				setStyleValue(this._agent, "transition", this._healthState === "healthy" ? PIP_MORPH_TRANSITION : "none");
+				resetStyleValue(this._agent, "opacity");
+			}
 			if (this._healthState === "healthy") {
 				const pill = this._ensurePipPill();
 				if (!pill.parentNode) this.appendChild(pill);
@@ -1947,6 +2343,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				this._attachScrollHideListener();
 				this._attachSwipeGestureListeners();
 				this._attachWheelFallbackListener();
+				if (enteringFromPanel) {
+					pill.style.opacity = "0";
+					pill.style.pointerEvents = "none";
+					pill.style.transition = "none";
+					requestAnimationFrame(() => {
+						pill.style.transition = PIP_MORPH_TRANSITION;
+						pill.style.opacity = "1";
+						pill.style.pointerEvents = "";
+					});
+				}
 				this._applyPipVisualState();
 			}
 		}
@@ -1956,7 +2362,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			pill.setAttribute("role", "button");
 			pill.setAttribute("aria-label", "Open assistant");
 			pill.setAttribute("tabindex", "0");
-			const pipPositionStyles = getPipPositionStyles(this._pipPosition);
+			const pipPositionStyles = getPipPositionStyles(PIP_POSITION);
 			pill.style.cssText = [
 				"position:fixed",
 				`left:${pipPositionStyles.left}`,
@@ -2342,6 +2748,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._pipExpanded = false;
 			this._pipAnimating = false;
 			this._hidePipPill();
+			this._hideEdgeTab();
 			if (this._agent) this._agent.removeAttribute("display-mode");
 			this._resetHostLayoutStyles();
 			this._resetAgentLayoutStyles();
@@ -2387,7 +2794,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				this._revealFrameId = null;
 				setStyleValue(this, "opacity", "1");
 				window.setTimeout(() => {
-					if (this._healthState === "healthy") resetStyleValue(this, "will-change");
+					resetStyleValue(this, "will-change");
 				}, SHELL_REVEAL_FADE_MS);
 			});
 		}
@@ -2439,6 +2846,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				return;
 			}
 			this._open = nextOpen;
+			if (!nextOpen) this._currentPanelWidth = PANEL_WIDTH;
 			if (options.reflect) this._reflectOpenAttribute(nextOpen);
 			this._applyDisplayModeAndLayout();
 			if (options.emit) this.dispatchEvent(new CustomEvent(SHELL_OPEN_CHANGE_EVENT, {