@khorsheed/dsh-mobile 0.1.3 → 0.1.4

package/lib/client.js

@@ -2952,6 +2952,8 @@ html[data-dsh-mobile] [data-slot="conversation.input.right"] { max-width: 100%;
 [data-mobile-toolbar] small { color: var(--dsw-alias-label-tertiary, #778195); font-size: 11px; display: block; text-align: center; }
 [data-mobile-toolbar] svg { display: block; }
 [data-mobile-shade] { position: absolute; inset: var(--mobile-bar) 0 0 min(88vw, 360px); border: 0; background: #15244330; pointer-events: auto; }
+/* The overlay layer rises above an open panel; the drawer's shade must not. */
+html[data-mobile-panel-open] [data-mobile-shade] { display: none; }
 [data-mobile-dialog] {
   color: var(--dsw-alias-label-primary, #152443); background: var(--dsw-alias-bg-base, white);
   border: 1px solid var(--dsw-alias-border-l3, #e6eaf2); border-radius: 28px;
@@ -3098,7 +3100,7 @@ html[data-dsh-mobile] [data-phase=hero] span:has(> [data-slot="conversation.hero
 [data-mobile-welcome] small { color:var(--mobile-accent); letter-spacing:3px; font-size:13px; }
 [data-mobile-welcome] h2 { font-size:25px; font-weight:500; line-height:1.4; margin:16px 0 9px; letter-spacing:-.6px; }
 [data-mobile-welcome] p { font-size:13px; line-height:1.6; margin:0; color:var(--dsw-alias-label-tertiary,#74767c); }
-html[data-dsh-mobile]:has([data-phase=hero]) [data-mobile-toolbar][data-library=false] [data-mobile-new=true] { visibility:hidden; }
+html[data-dsh-mobile]:has([data-phase=hero]) [data-mobile-toolbar][data-library=false] [data-mobile-new=true] { display:none; }
 html[data-dsh-mobile] [data-phase=hero] div:has(> [data-slot="conversation.hero.workspace"]) { gap:6px; padding:6px 18px; flex-wrap:wrap; }
 html[data-dsh-mobile] [data-phase=hero] div:has(> [data-slot="conversation.hero.workspace"]) > button, html[data-dsh-mobile] [data-slot="conversation.hero.agentPreset"] button[aria-haspopup] { border-radius:18px; min-height:40px; font-size:13px; background:var(--mobile-soft); }
 /* Quiet, read-only metadata below the mobile title. */
@@ -3167,7 +3169,7 @@ html[data-dsh-mobile] [data-composer-seat]:has([data-mobile-room-queue]) [data-t
 [data-mobile-message-menu] button:active { background:var(--mobile-soft); }
 [data-mobile-message-menu] svg { width:20px; height:20px; flex:none; }
 [data-mobile-message-menu] button:disabled { opacity:.45; }
-[data-mobile-toolbar]:has([data-mobile-members-open]) > [data-mobile-new] { display:none; }
+[data-mobile-toolbar]:has([data-mobile-members-open]) [data-mobile-new] { display:none; }
 [data-mobile-members-open] { position:relative; }
 [data-mobile-members-open] small { position:absolute; bottom:-3px; right:-2px; min-width:16px; border-radius:10px; font-size:10px; background:var(--mobile-soft); color:var(--dsw-alias-label-primary); }
 [data-mobile-room-dialog] { text-align:left; line-height:1.5; }
@@ -3196,6 +3198,10 @@ html[data-dsh-mobile] [data-slot="conversation.input.dock"] section > ul[aria-la
 
 /* One mobile reading scale; derived from host text size without writing its preference. */
 html[data-dsh-mobile] body { --mobile-text:max(17px,var(--dsh-content-font-size,14px)); --mobile-caption:max(14px,var(--dsh-content-font-size-secondary,13px)); }
+/* Touch values of the shared panel type tokens (ui-panel-kit reads them with
+   desktop fallbacks; this package never imports it). Title and reading follow
+   the mobile reading scale, so a larger host text size still wins. */
+html[data-dsh-mobile] body { --dsh-panel-text-title:var(--mobile-text); --dsh-panel-text-body:15px; --dsh-panel-text-meta:13px; --dsh-panel-text-reading:var(--mobile-text); --dsh-panel-reading-line-height:1.7; }
 html[data-dsh-mobile] :is([data-mobile-library],[data-mobile-dialog],[data-mobile-tools-dialog],[data-mobile-message-menu]) { font-size:var(--mobile-text); line-height:1.55; }
 html[data-dsh-mobile] :is([data-mobile-nav-title] strong,[data-mobile-session-copy] strong,[data-mobile-search] input,[data-composer-card] [contenteditable],[data-composer-seat] textarea,[data-mobile-member-chat] strong) { font-size:var(--mobile-text); line-height:1.55; }
 html[data-dsh-mobile] :is([data-mobile-workspace-group] strong,[data-mobile-tools-grid] button,[data-mobile-tools-permission],[data-mobile-dialog] h3,[data-mobile-grouping] button) { font-size:16px!important; }
@@ -3349,6 +3355,56 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 [data-directory-location] input { width:18px; }
 [data-mobile-directory] footer { flex:none; padding-top:10px; }
 [data-mobile-directory] [data-mobile-done] { margin-top:0; background:var(--mobile-accent); color:white; min-height:48px; }
+
+[data-mobile-message-menu] { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
+
+/* Optional sidebar navigation: content stays in its official dock hosts. */
+[data-mobile-header-actions] { display:flex; flex:none; gap:4px; }
+html[data-dsh-mobile] [data-mobile-toolbar] [data-mobile-header-actions] button { box-shadow:none; background:transparent; }
+/* Panel chrome has its own compact metric; a chat connection banner must not
+   stretch the tabs. Tabs are flat labels; the active one carries an accent
+   underline spanning its label and its close button. */
+html[data-dsh-mobile] { --mobile-panel-bar:52px; --mobile-panel-offset:52px; }
+html[data-dsh-mobile]:has([data-mobile-connection-status]) { --mobile-panel-offset:92px; }
+html[data-dsh-mobile][data-mobile-panel-open] [data-mobile-connection-status] { top:var(--mobile-panel-bar); }
+[data-mobile-panel-navigation] { position:absolute; inset:0 0 auto; height:var(--mobile-panel-bar,52px); display:flex; align-items:center; gap:4px; padding:0 6px; box-sizing:border-box; background:var(--dsw-alias-bg-layer-1,var(--mobile-soft)); color:var(--dsw-alias-label-primary); box-shadow:inset 0 -1px var(--dsw-alias-border-l2); pointer-events:auto; }
+[data-mobile-panel-navigation] button { display:grid; place-items:center; flex:none; width:40px; height:44px; padding:0; border:0; border-radius:10px; background:transparent; color:inherit; cursor:pointer; }
+[data-mobile-panel-navigation] > button { color:var(--dsw-alias-label-secondary); }
+[data-mobile-panel-navigation] button:disabled { opacity:.35; }
+[data-mobile-panel-navigation] button:focus-visible { outline:2px solid var(--mobile-accent); outline-offset:-3px; }
+[data-mobile-panel-tabs] { display:flex; align-self:stretch; align-items:stretch; flex:1; min-width:0; gap:2px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; touch-action:pan-x; }
+[data-mobile-panel-tabs]::-webkit-scrollbar { display:none; }
+[data-mobile-panel-tab] { position:relative; display:flex; flex:none; align-items:center; max-width:220px; color:var(--dsw-alias-label-secondary); }
+[data-mobile-panel-tab][data-active=true] { color:var(--dsw-alias-label-primary); }
+[data-mobile-panel-tab][data-active=true]::after { content:""; position:absolute; left:12px; right:5px; bottom:0; height:2.5px; border-radius:2px; background:var(--mobile-accent); pointer-events:none; }
+[data-mobile-panel-navigation] [role=tab] { flex:0 1 auto; min-width:0; width:auto; height:100%; padding:0 12px; font:inherit; font-size:15px; line-height:20px; border-radius:8px; }
+[data-mobile-panel-navigation] [role=tab] span { display:block; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+[data-mobile-panel-navigation] [role=tab][aria-selected=true] { font-weight:600; padding-right:0; }
+[data-mobile-panel-navigation] [data-mobile-panel-tab-close] { width:24px; height:100%; border-radius:8px; color:var(--dsw-alias-label-tertiary); }
+@media (hover:hover) { [data-mobile-panel-navigation] button:hover:not(:disabled) { background:var(--dsw-alias-interactive-bg-hover); } }
+[data-mobile-panel-error] { position:absolute; inset:100% 8px auto; padding:6px 10px; font-size:13px; background:var(--mobile-face); border:1px solid var(--mobile-edge); border-radius:8px; }
+html[data-mobile-panel-open] [data-mobile-toolbar] { visibility:hidden; }
+html[data-dsh-mobile][data-mobile-panel-open] [data-mobile-frame] > [data-shell-overlay] { z-index:65; }
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] { top:var(--mobile-panel-offset,52px); width:100%!important; max-width:none!important; bottom:0; }
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] [data-dockkit-strip],
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] [data-dockkit-divider],
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] [data-dockkit-float-grip],
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] [data-dockkit-float-resize] { display:none!important; }
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] [data-dockkit-split] { grid-template-columns:minmax(0,1fr)!important; }
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] [data-dockkit-host] { grid-column:1!important; grid-row:1!important; min-width:0; }
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] [data-dockkit-host=float] { width:100%; height:100%; }
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] [data-dockkit-host]:not(:has([data-dockkit-pane-active],[data-dockkit-float-active])) { display:none!important; }
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] [data-dockkit-float] { position:relative!important; inset:0!important; width:100%!important; height:100%!important; min-width:0; border-radius:0; }
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel]:not([data-sidebar-right-open]) [data-dockkit-host=float] { visibility:hidden; pointer-events:none; }
+html[data-dsh-mobile][data-mobile-panel-managed] [data-sidebar-right-panel] [data-dockkit-content] { border-radius:0; min-width:0; }
+/* Fullscreen may be drawn from a collapsed, zero-width frame track. Anchor to
+   the whole frame rather than its third grid area; saved desktop tracks stay intact. */
+html[data-dsh-mobile][data-mobile-panel-open] [data-mobile-frame] > [data-rightbar-col] {
+  position:absolute; inset:0; grid-area:auto; z-index:24; width:100%; min-width:0;
+  background:var(--dsw-alias-bg-base,white);
+}
+/* Keep the host affordance as fallback whenever the mobile entry is unavailable. */
+html[data-dsh-mobile]:has([data-mobile-toolbar] [data-mobile-panel-entry]) [data-sidebar-right-expand] { display:none; }
 `;
 		//#endregion
 		//#region src/client/surface.ts
@@ -3411,7 +3467,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 						const split = img.closest("button")?.parentElement;
 						if (split && split.querySelectorAll("button").length === 2) this.mark(split, "data-mobile-header-hidden");
 					}
-					for (const button of row.querySelectorAll("[data-sidebar-right-expand], [data-slot=\"conversation.session.header.utilities\"] > span > button[aria-haspopup=\"menu\"][aria-busy]")) if (button.hasAttribute("data-sidebar-right-expand") || /^(更多操作|More actions)$/i.test(button.getAttribute("aria-label") ?? "")) this.mark(button, "data-mobile-header-hidden");
+					for (const button of row.querySelectorAll("[data-sidebar-right-expand], [data-slot=\"conversation.session.header.utilities\"] > span > button[aria-haspopup=\"menu\"][aria-busy]")) if (button.hasAttribute("data-sidebar-right-expand") ? this.doc.querySelector("[data-mobile-panel-entry]") !== null : /^(更多操作|More actions)$/i.test(button.getAttribute("aria-label") ?? "")) this.mark(button, "data-mobile-header-hidden");
 					if (this.doc.querySelector("[data-mobile-members-open]:not([disabled])")) {
 						for (const button of row.querySelectorAll("[data-slot=\"conversation.session.header.actions\"] button")) if (/^(＋|\+)?\s*(邀请 agent|Invite agent)$/i.test(button.textContent?.trim() ?? "")) this.mark(button, "data-mobile-header-hidden");
 					}
@@ -3531,7 +3587,11 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				this.style.dataset.mobileOwned = "styles";
 				this.style.textContent = MOBILE_CSS;
 				win.document.head.append(this.style);
-				this.observer = new MutationObserver(this.schedule);
+				this.observer = new MutationObserver((records) => {
+					if (records.some((record) => {
+						return !(record.target instanceof Element ? record.target : record.target.parentElement)?.closest("[data-conversation-scroll] [data-slot=\"conversation.session\"]");
+					})) this.schedule();
+				});
 				this.observer.observe(win.document.body, {
 					subtree: true,
 					childList: true,
@@ -3652,6 +3712,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 		//#endregion
 		//#region src/client/MobileIcon.tsx
 		const paths = {
+			panel: "M4 4h16v16H4zM14 4v16",
 			edit: "m15 5 4 4M5 19l4-1L20 7a2 2 0 0 0-4-4L5 14l-1 6Z",
 			members: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M22 21v-2a4 4 0 0 0-3-3.87M9 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8m8 .13a4 4 0 0 1 0 7.75",
 			plus: "M12 5v14M5 12h14",
@@ -4308,10 +4369,27 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			}
 			publish(id, state) {
 				if (!this.alive) return;
+				const signature = JSON.stringify(state === null ? null : {
+					members: state.members.map(({ name, kind, provider, instructions, cwd, childSessionId }) => [
+						name,
+						kind,
+						provider,
+						instructions,
+						cwd,
+						childSessionId
+					]),
+					runs: state.runs.map(({ member, state }) => [member, state])
+				});
+				const previous = this.cache.get(id);
+				if (previous?.signature === signature) {
+					previous.at = Date.now();
+					return;
+				}
 				this.cache.delete(id);
 				this.cache.set(id, {
 					state,
-					at: Date.now()
+					at: Date.now(),
+					signature
 				});
 				if (this.cache.size > 200) this.cache.delete(this.cache.keys().next().value);
 				this.version++;
@@ -4655,7 +4733,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				doc.documentElement.removeAttribute("data-mobile-gesture");
 				doc.documentElement.style.removeProperty("--mobile-drag-offset");
 			};
-			const blocked = "input,textarea,[contenteditable],select,pre,code,[role=dialog],[role=menu],[role=slider],[role=switch],[role=checkbox],[data-mobile-tools-dialog],[data-mobile-dialog]";
+			const blocked = "input,textarea,[contenteditable],select,pre,code,[role=dialog],[role=menu],[role=slider],[role=switch],[role=checkbox],[data-mobile-tools-dialog],[data-mobile-dialog],[data-mobile-gesture-owner],.xterm";
 			const down = (event) => {
 				resetDrag();
 				start = void 0;
@@ -4669,6 +4747,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				const viewport = doc.documentElement.clientWidth || doc.defaultView.innerWidth;
 				if (viewport >= 960) return;
 				const right = target.closest("[data-sidebar-right-panel][data-sidebar-right-open]") ?? void 0;
+				if (right && doc.documentElement.hasAttribute("data-mobile-panel-managed")) return;
 				if (right && !right.querySelector("[data-sidebar-right-toggle]")) return;
 				const sidebar = closeSidebar ? target.closest("[data-slot=sidebar]")?.parentElement : void 0;
 				const panel = right ? {
@@ -4857,6 +4936,141 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			}), document.body);
 		}
 		//#endregion
+		//#region src/client/MobilePanelNavigation.tsx
+		function MobilePanelNavigation({ panels, active, prepareNavigation, t }) {
+			const state = (0, react.useSyncExternalStore)(panels.subscribe, panels.getSnapshot);
+			const managed = active && state.managed;
+			const navigation = (0, react.useRef)(null);
+			const prepare = (0, react.useRef)(prepareNavigation);
+			prepare.current = prepareNavigation;
+			(0, react.useEffect)(() => {
+				document.documentElement.toggleAttribute("data-mobile-panel-managed", managed);
+				document.documentElement.toggleAttribute("data-mobile-panel-open", managed && state.expanded);
+				return () => {
+					document.documentElement.removeAttribute("data-mobile-panel-managed");
+					document.documentElement.removeAttribute("data-mobile-panel-open");
+				};
+			}, [managed, state.expanded]);
+			(0, react.useEffect)(() => {
+				if (!managed || !state.expanded) return;
+				const main = document.querySelector("[data-mobile-frame] > div:has(> [data-slot=\"main\"])");
+				const previous = main?.inert;
+				if (main) main.inert = true;
+				const nav = navigation.current;
+				nav?.querySelector("button")?.focus({ preventScroll: true });
+				const escape = (event) => {
+					if (event.key !== "Escape" || event.defaultPrevented || document.querySelector("dialog[open],[role=dialog],[role=menu]") || document.activeElement?.tagName === "SELECT") return;
+					prepare.current();
+					panels.hide();
+				};
+				window.addEventListener("keydown", escape);
+				return () => {
+					if (main) main.inert = previous ?? false;
+					window.removeEventListener("keydown", escape);
+					if (document.activeElement === document.body || document.activeElement && nav?.contains(document.activeElement)) document.querySelector("[data-mobile-panel-entry]")?.focus({ preventScroll: true });
+				};
+			}, [
+				managed,
+				state.expanded,
+				panels
+			]);
+			(0, react.useEffect)(() => {
+				if (!managed || !state.expanded) return;
+				navigation.current?.querySelector("[data-mobile-panel-tab][data-active=true]")?.scrollIntoView?.({
+					block: "nearest",
+					inline: "nearest"
+				});
+			}, [
+				managed,
+				state.expanded,
+				state.activeId
+			]);
+			if (!managed || !state.expanded) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+				ref: navigation,
+				"data-mobile-panel-navigation": true,
+				"aria-label": t("panels"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": t("backToChat"),
+						onClick: () => {
+							prepareNavigation();
+							panels.hide();
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileIcon, { name: "back" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						role: "tablist",
+						"aria-label": t("switchPanel"),
+						"data-mobile-panel-tabs": true,
+						onKeyDown: (event) => {
+							const index = state.tabs.findIndex((tab) => tab.id === state.activeId);
+							const next = event.key === "ArrowRight" ? (index + 1) % state.tabs.length : event.key === "ArrowLeft" ? (index + state.tabs.length - 1) % state.tabs.length : event.key === "Home" ? 0 : event.key === "End" ? state.tabs.length - 1 : -1;
+							const target = state.tabs[next];
+							if (!target) return;
+							event.preventDefault();
+							panels.select(target.id);
+							event.currentTarget.querySelectorAll("[role=tab]")[next]?.focus({ preventScroll: true });
+						},
+						children: state.tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							role: "presentation",
+							"data-mobile-panel-tab": true,
+							"data-active": tab.id === state.activeId,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								role: "tab",
+								title: tab.title || tab.kind,
+								"aria-selected": tab.id === state.activeId,
+								tabIndex: tab.id === state.activeId ? 0 : -1,
+								onClick: () => panels.select(tab.id),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tab.title || tab.kind })
+							}), tab.id === state.activeId && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-mobile-panel-tab-close": true,
+								"aria-label": t("closePanel"),
+								disabled: state.tabs.length === 1 && tab.kind === "guide",
+								onClick: panels.close,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileIcon, {
+									name: "close",
+									size: 14
+								})
+							})]
+						}, tab.id))
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": t("addPanel"),
+						onClick: panels.add,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileIcon, {
+							name: "plus",
+							size: 20
+						})
+					}),
+					state.failed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						role: "alert",
+						"data-mobile-panel-error": true,
+						children: t("panelError")
+					})
+				]
+			});
+		}
+		function MobilePanelEntry({ panels, beforeOpen, t }) {
+			const state = (0, react.useSyncExternalStore)(panels.subscribe, panels.getSnapshot);
+			if (!state.available) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"data-mobile-panel-entry": true,
+				"aria-label": t("panels"),
+				"aria-expanded": state.expanded,
+				onClick: () => {
+					beforeOpen();
+					panels.toggle();
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileIcon, { name: "panel" })
+			});
+		}
+		//#endregion
 		//#region src/client/catalogReads.ts
 		/** Bound optional catalog enrichment so cold log reads cannot fan out across the library. */
 		var CatalogReads = class {
@@ -5191,7 +5405,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			] });
 		}
 		/** One visible navigation bar, with native connection sheets when supported. */
-		function MobileChrome({ presentation, toggleSidebar, connection, navigation, rooms, t }) {
+		function MobileChrome({ presentation, toggleSidebar, connection, navigation, rooms, panels, t }) {
 			const state = (0, react.useSyncExternalStore)(presentation.subscribe, presentation.getSnapshot);
 			const wire = (0, react.useSyncExternalStore)(connection.state.subscribe, connection.state.getSnapshot);
 			const available = (0, react.useSyncExternalStore)(navigation.subscribe, navigation.getSnapshot);
@@ -5226,8 +5440,15 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				if (available && !activated.current) {
 					activated.current = true;
 					setLibrary(true);
-					if (state.drawer) toggleSidebar();
 				}
+			}, [state.active, available]);
+			const drawerWanted = (0, react.useRef)(false);
+			(0, react.useEffect)(() => {
+				if (!state.drawer) {
+					drawerWanted.current = false;
+					return;
+				}
+				if (state.active && available && !drawerWanted.current) toggleSidebar();
 			}, [
 				state.active,
 				state.drawer,
@@ -5275,6 +5496,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				toggleSidebar
 			]);
 			const openLibrary = () => {
+				panels?.hide();
 				if (!available) {
 					toggleSidebar();
 					return;
@@ -5283,6 +5505,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				setLibrary(true);
 			};
 			const startSession = () => {
+				panels?.hide();
 				presentation.prepareNavigation();
 				available?.workspace.startSession();
 				if (state.drawer) toggleSidebar();
@@ -5380,11 +5603,22 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 									children: t(wire ?? "connecting")
 								})]
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								"data-mobile-new": !!available,
-								"aria-label": available ? t("newSession") : t("settings"),
-								onClick: available ? startSession : openSettings,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileIcon, { name: available ? "compose" : "settings" })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								"data-mobile-header-actions": true,
+								children: [panels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobilePanelEntry, {
+									panels,
+									t,
+									beforeOpen: () => {
+										presentation.prepareNavigation();
+										setLibrary(false);
+										if (state.drawer) toggleSidebar();
+									}
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									"data-mobile-new": !!available,
+									"aria-label": available ? t("newSession") : t("settings"),
+									onClick: available ? startSession : openSettings,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileIcon, { name: available ? "compose" : "settings" })
+								})]
 							}),
 							available && rooms && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileRoomNavigation, {
 								rooms,
@@ -5394,6 +5628,12 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 							})
 						]
 					}),
+					panels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobilePanelNavigation, {
+						panels,
+						active: state.active,
+						prepareNavigation: presentation.prepareNavigation,
+						t
+					}),
 					wire !== "connected" && connectionExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						"data-mobile-connection-status": true,
 						role: "status",
@@ -5420,7 +5660,10 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 							onClick: () => {
 								setSettings(false);
 								setLibrary(false);
-								if (!state.drawer) toggleSidebar();
+								if (!state.drawer) {
+									drawerWanted.current = true;
+									toggleSidebar();
+								}
 							},
 							children: t("workspaces")
 						}),
@@ -5465,6 +5708,128 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			] });
 		}
 		//#endregion
+		//#region src/client/panels.ts
+		const EMPTY = {
+			available: false,
+			managed: false,
+			expanded: false,
+			sessionId: void 0,
+			activeId: "",
+			tabs: [],
+			failed: false
+		};
+		/** Public services do actions; checked DOM anchors supply presentation-only change notifications. */
+		var MobilePanels = class {
+			doc;
+			service;
+			releases = [];
+			listeners = /* @__PURE__ */ new Set();
+			snapshot = EMPTY;
+			observer;
+			disposed = false;
+			scheduled = false;
+			failed = false;
+			constructor(doc) {
+				this.doc = doc;
+				this.observer = new MutationObserver((records) => {
+					if (this.scheduled || !records.some((record) => {
+						return !(record.target instanceof Element ? record.target : record.target.parentElement)?.closest("[data-conversation-scroll] [data-slot=\"conversation.session\"]");
+					})) return;
+					this.scheduled = true;
+					queueMicrotask(() => {
+						this.scheduled = false;
+						if (!this.disposed) this.sync();
+					});
+				});
+				this.observer.observe(doc.body, {
+					subtree: true,
+					childList: true,
+					attributes: true,
+					attributeFilter: [
+						"data-sidebar-right-open",
+						"data-dockkit-pane-active",
+						"data-dockkit-float-active",
+						"aria-selected",
+						"hidden"
+					]
+				});
+			}
+			getSnapshot = () => this.snapshot;
+			subscribe = (listener) => {
+				this.listeners.add(listener);
+				return () => {
+					this.listeners.delete(listener);
+				};
+			};
+			set(value) {
+				for (const release of this.releases) release();
+				this.releases = [];
+				const service = value;
+				this.service = service && typeof service.toggleExpanded === "function" && typeof service.isExpanded === "function" && typeof service.active === "function" && typeof service.mounted?.subscribe === "function" && typeof service.mounted.getSnapshot === "function" ? service : void 0;
+				this.failed = false;
+				if (this.service) {
+					this.releases.push(this.service.mounted.subscribe(this.sync));
+					if (typeof this.service.openTabs?.subscribe === "function") this.releases.push(this.service.openTabs.subscribe(this.sync));
+				}
+				this.sync();
+			}
+			sync = () => {
+				let next = EMPTY;
+				try {
+					const service = this.service, sessionId = service?.mounted.getSnapshot();
+					if (service && sessionId) {
+						const panel = Array.from(this.doc.querySelectorAll("[data-sidebar-right-panel][data-sidebar-right-session]")).find((element) => element.dataset.sidebarRightSession === sessionId);
+						const tabs = service.tabsIn?.(sessionId) ?? [];
+						const active = service.active();
+						next = {
+							available: true,
+							managed: !!panel && !!panel.querySelector("[data-dockkit-host]") && tabs.length > 0 && typeof service.focus === "function" && typeof service.close === "function" && typeof service.openTab === "function" && !!active && tabs.some((tab) => tab.id === active.id),
+							sessionId,
+							expanded: service.isExpanded(),
+							activeId: active?.id ?? "",
+							tabs: tabs.map(({ id, title, kind }) => ({
+								id,
+								title,
+								kind
+							})),
+							failed: this.failed
+						};
+					}
+				} catch {}
+				if (JSON.stringify(next) !== JSON.stringify(this.snapshot)) {
+					this.snapshot = next;
+					for (const listener of this.listeners) listener();
+				}
+			};
+			run(action) {
+				if (!this.service || !this.snapshot.available) return;
+				try {
+					action(this.service);
+					this.failed = false;
+				} catch {
+					this.failed = true;
+				}
+				this.sync();
+			}
+			toggle = () => this.run((service) => service.toggleExpanded());
+			hide = () => this.run((service) => {
+				if (service.isExpanded()) service.toggleExpanded();
+			});
+			select = (id) => this.run((service) => {
+				if (this.snapshot.tabs.some((tab) => tab.id === id)) service.focus?.(id);
+			});
+			close = () => this.run((service) => {
+				if (this.snapshot.activeId) service.close?.(this.snapshot.activeId);
+			});
+			add = () => this.run((service) => service.openTab?.("guide"));
+			dispose() {
+				this.disposed = true;
+				this.observer.disconnect();
+				this.set(void 0);
+				this.listeners.clear();
+			}
+		};
+		//#endregion
 		//#region src/client/MobileQueue.tsx
 		/** Room's takeover hides the official QueueDock. Restore its mutation verbs
 		* through the same scoped Conversation API, without touching the Room composer. */
@@ -5626,20 +5991,17 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 		}
 		//#endregion
 		//#region src/client/messageMenu.ts
-		/** A touch presentation of the rendered message's own actions. The source
+		/** A pointer context-menu presentation of the rendered message's own actions. The source
 		* button stays mounted; its plugin still owns edits, confirmations and errors. */
 		var MessageMenu = class {
 			doc;
-			timer;
-			point;
+			touch = false;
 			menu;
 			constructor(doc) {
 				this.doc = doc;
 				doc.addEventListener("pointerdown", this.down, true);
-				doc.addEventListener("pointermove", this.move, true);
-				doc.addEventListener("pointerup", this.cancel, true);
-				doc.addEventListener("pointercancel", this.cancel, true);
-				doc.addEventListener("scroll", this.cancel, true);
+				doc.addEventListener("selectionchange", this.selectionChanged);
+				doc.addEventListener("scroll", this.close, true);
 				doc.addEventListener("contextmenu", this.context, true);
 			}
 			row(target) {
@@ -5652,28 +6014,15 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			actions(row) {
 				return [...row.querySelectorAll(row.hasAttribute("data-turn-tail") ? "button[aria-label]" : ":scope > div > button[aria-label], :scope > div > span > button[aria-label]")].filter((b) => /^(复制|已复制|编辑|撤回|点赞|点踩|不喜欢|分支|好的回答|有问题的回答|在新对话中分支|Copy|Copied|Edit|Withdraw|Like|Dislike|Branch)/i.test(b.getAttribute("aria-label") ?? ""));
 			}
-			down = (e) => {
-				this.cancel();
-				const row = this.row(e.target);
-				if (!row || e.pointerType === "mouse" || !this.actions(row).length) return;
-				this.point = {
-					x: e.clientX,
-					y: e.clientY,
-					row
-				};
-				this.timer = setTimeout(() => {
-					if (this.point) this.open(row, e.clientX, e.clientY);
-				}, 500);
-			};
-			move = (e) => {
-				if (this.point && Math.hypot(e.clientX - this.point.x, e.clientY - this.point.y) > 10) this.cancel();
+			down = (event) => {
+				this.touch = event.pointerType === "touch" || event.pointerType === "pen";
 			};
-			cancel = () => {
-				clearTimeout(this.timer);
-				this.timer = void 0;
-				this.point = void 0;
+			hasSelection = () => !!this.doc.getSelection()?.toString().trim();
+			selectionChanged = () => {
+				if (this.hasSelection()) this.close();
 			};
 			context = (e) => {
+				if (this.touch || this.hasSelection()) return;
 				const row = this.row(e.target);
 				if (row && this.actions(row).length) {
 					e.preventDefault();
@@ -5686,7 +6035,6 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				this.menu = void 0;
 			};
 			open(row, x, y) {
-				this.cancel();
 				this.close();
 				const actions = this.actions(row);
 				if (!actions.length) return;
@@ -5722,13 +6070,10 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				menu.style.top = `${Math.max(12, Math.min(y + 12, height - bounds.height - 12))}px`;
 			}
 			dispose() {
-				this.cancel();
 				this.close();
 				this.doc.removeEventListener("pointerdown", this.down, true);
-				this.doc.removeEventListener("pointermove", this.move, true);
-				this.doc.removeEventListener("pointerup", this.cancel, true);
-				this.doc.removeEventListener("pointercancel", this.cancel, true);
-				this.doc.removeEventListener("scroll", this.cancel, true);
+				this.doc.removeEventListener("selectionchange", this.selectionChanged);
+				this.doc.removeEventListener("scroll", this.close, true);
 				this.doc.removeEventListener("contextmenu", this.context, true);
 			}
 		};
@@ -5872,6 +6217,12 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 		/** Copy for controls owned by mobile; all conversation copy stays with its owner. */
 		const NS = "mobile";
 		const en = {
+			panels: "Panels",
+			backToChat: "Back to conversation",
+			switchPanel: "Switch panel",
+			addPanel: "Add panel",
+			closePanel: "Close current panel",
+			panelError: "Could not change this panel. Try again.",
 			connectPhone: "Connect phone",
 			connectIntro: "Continue your conversations in DSH Mobile.",
 			connectQR: "Scan with DSH Mobile to sign in",
@@ -6009,6 +6360,12 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			cancel: "Cancel"
 		};
 		const zh = {
+			panels: "面板",
+			backToChat: "返回聊天",
+			switchPanel: "切换面板",
+			addPanel: "添加面板",
+			closePanel: "关闭当前面板",
+			panelError: "暂时无法操作面板，请重试。",
 			connectPhone: "连接手机",
 			connectIntro: "在 DSH Mobile 中继续你的会话。",
 			connectQR: "使用 DSH Mobile 扫码登录",
@@ -6172,6 +6529,12 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			const messages = new MessageMenu(document);
 			ctx.effect(() => () => messages.dispose(), "mobile: message actions");
 			const navigation = new MobileNavigation();
+			const panels = new MobilePanels(document);
+			ctx.effect(() => () => panels.dispose(), "mobile: optional panels");
+			ctx.inject(["sidebarRight"], (scoped) => {
+				panels.set(scoped.get("sidebarRight"));
+				scoped.effect(() => () => panels.set(void 0), "mobile: sidebar capability");
+			});
 			const directory = new MobileDirectory();
 			const presentation = new MobilePresentation(window, window.__DSH_MOBILE_SHELL__?.bridgeVersion === 1);
 			ctx.inject([
@@ -6236,6 +6599,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 					connection,
 					navigation,
 					rooms,
+					panels,
 					toggleSidebar: () => {
 						ctx.layout.toggleSidebar();
 					}
@@ -6248,11 +6612,15 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			ctx.slots.inject("conversation.composer", () => {
 				let remove;
 				let timer;
+				let lastRoom;
 				const refresh = () => {
 					const list = navigation.getSnapshot()?.sessions.list.getSnapshot();
 					const current = list === void 0 ? void 0 : mainSessionId(list);
-					if (!presentation.getSnapshot().active || !current || !rooms.get(current)) return;
+					const room = current && rooms.get(current) ? current : void 0;
+					if (!presentation.getSnapshot().active || room === lastRoom) return;
+					lastRoom = room;
 					clearTimeout(timer);
+					if (!room) return;
 					timer = setTimeout(() => {
 						remove?.();
 						remove = ctx.slots.register({