@mcp-b/char 0.1.3 → 0.1.4

package/dist/shell-component.js

@@ -90,8 +90,7 @@ function mergeHostContext(current, patch) {
 		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)
 	};
 }
 
@@ -503,25 +502,6 @@ const DISPLAY_MODES = [
 	"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) {
@@ -660,7 +640,7 @@ function getDeviceCapabilities() {
 */
 var CharAgentElement = class extends HTMLElement {
 	static observedAttributes = [
-		"dev-mode",
+		"publishable-key",
 		"enable-debug-tools",
 		"display-mode",
 		"api-base"
@@ -710,12 +690,12 @@ var CharAgentElement = class extends HTMLElement {
 			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);
@@ -924,15 +904,21 @@ var CharAgentElement = class extends HTMLElement {
 	/**
 	* 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;
 		}
@@ -943,23 +929,17 @@ var CharAgentElement = class extends HTMLElement {
 	* 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);
@@ -978,7 +958,7 @@ var CharAgentElement = class extends HTMLElement {
 	}
 	/**
 	* 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.
 	*/
@@ -1042,11 +1022,6 @@ var CharAgentElement = class extends HTMLElement {
 		};
 		const safeAreaInsets = getSafeAreaInsets();
 		const displayMode = resolveDisplayModeFromAttribute(displayModeAttr) ?? "inline";
-		const hostCapabilities = {
-			supportedDisplayModes: [...DISPLAY_MODES],
-			supportsOpenLink: true,
-			supportsTeardown: true
-		};
 		const context = {
 			theme,
 			styles: { variables: vars },
@@ -1057,9 +1032,7 @@ var CharAgentElement = class extends HTMLElement {
 			timeZone,
 			platform: detectPlatform(),
 			deviceCapabilities: getDeviceCapabilities(),
-			safeAreaInsets,
-			userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-			hostCapabilities
+			safeAreaInsets
 		};
 		this._hostContext = context;
 		if (!this._iframe?.contentWindow) {
@@ -1102,22 +1075,15 @@ var CharAgentElement = class extends HTMLElement {
 	*/
 	_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);
 	}
@@ -1264,36 +1230,6 @@ var CharAgentElement = class extends HTMLElement {
 		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.
@@ -1322,22 +1258,36 @@ registerChar();
 //#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;
@@ -1345,23 +1295,14 @@ const PIP_SWIPE_THRESHOLD = 50;
 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",
@@ -1418,25 +1359,28 @@ function sanitizeShellHostContext(hostContext) {
 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;
@@ -1454,6 +1398,7 @@ var CharAgentShellElement = class extends HTMLElement {
 	_pipAnimationTimeoutId = null;
 	_pendingPipMeasuredHeight = null;
 	_tapOutsideListener = null;
+	_lastAppliedDisplayMode = null;
 	_pipHiddenByScroll = false;
 	_scrollListener = null;
 	_scrollRafId = null;
@@ -1473,75 +1418,36 @@ var CharAgentShellElement = class extends HTMLElement {
 	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();
@@ -1570,48 +1476,6 @@ var CharAgentShellElement = class extends HTMLElement {
 				});
 				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();
@@ -1621,7 +1485,7 @@ var CharAgentShellElement = class extends HTMLElement {
 	/**
 	* 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) {
@@ -1729,15 +1593,10 @@ var CharAgentShellElement = class extends HTMLElement {
 		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() {
@@ -1760,29 +1619,19 @@ var CharAgentShellElement = class extends HTMLElement {
 	}
 	_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;
@@ -1820,38 +1669,558 @@ var CharAgentShellElement = class extends HTMLElement {
 		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();
@@ -1859,20 +2228,32 @@ var CharAgentShellElement = class extends HTMLElement {
 			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;
@@ -1901,15 +2282,14 @@ var CharAgentShellElement = class extends HTMLElement {
 			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;
@@ -1920,13 +2300,14 @@ var CharAgentShellElement = class extends HTMLElement {
 			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`);
@@ -1934,7 +2315,22 @@ var CharAgentShellElement = class extends HTMLElement {
 		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);
@@ -1943,6 +2339,16 @@ var CharAgentShellElement = class extends HTMLElement {
 			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();
 		}
 	}
@@ -1952,7 +2358,7 @@ var CharAgentShellElement = class extends HTMLElement {
 		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}`,
@@ -2338,6 +2744,7 @@ var CharAgentShellElement = class extends HTMLElement {
 		this._pipExpanded = false;
 		this._pipAnimating = false;
 		this._hidePipPill();
+		this._hideEdgeTab();
 		if (this._agent) this._agent.removeAttribute("display-mode");
 		this._resetHostLayoutStyles();
 		this._resetAgentLayoutStyles();
@@ -2383,7 +2790,7 @@ var CharAgentShellElement = class extends HTMLElement {
 			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);
 		});
 	}
@@ -2435,6 +2842,7 @@ var CharAgentShellElement = class extends HTMLElement {
 			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, {