@khorsheed/dsh-mobile 0.1.0 → 0.1.1

package/lib/client.js

@@ -2929,8 +2929,12 @@ html[data-dsh-mobile] [data-slot="conversation.input.right"] { max-width: 100%;
 [data-mobile-dialog] button[aria-pressed="true"] { color: #4d6bfe; background: #4d6bfe12; }
 [data-mobile-dialog] [data-mobile-done] { display: block; width: 100%; margin-top: 24px; background: #4d6bfe; color: white; border-radius: 100px; }
 
+/* The host trigger menu is translucent; mobile overlays need an opaque face. */
+html[data-dsh-mobile] [data-trigger-menu] { background:var(--mobile-face,var(--dsw-alias-bg-base))!important; --dsw-specific-menu:var(--mobile-face,var(--dsw-alias-bg-base)); opacity:1; backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid var(--mobile-edge); padding:8px; border-radius:22px; box-shadow:var(--mobile-shadow); }
+html[data-dsh-mobile] [data-trigger-menu] [role=option] { min-height:48px; padding:12px; font-size:16px; line-height:1.45; }
+html[data-dsh-mobile] [data-trigger-menu] [role=listbox] { overscroll-behavior:contain; }
 /* Hide an empty ordinary breadcrumb; populated catalogs keep their Host trigger. */
-html[data-dsh-mobile]:has([data-mobile-session-title]) [data-slot="main.conversation"] header:has([data-conversation-header-corner]) nav:has(> span:only-child > button:disabled + [data-slot="conversation.session.header.lineage"]:empty) { display:none; }
+html[data-dsh-mobile]:has([data-mobile-session-title]) [data-slot="main.conversation"] header:has([data-conversation-header-corner]) nav:has(> span:only-child > :is(button:disabled,span:not([data-slot])) + [data-slot="conversation.session.header.lineage"]:empty) { display:none; }
 html[data-dsh-mobile] [data-mobile-lineage-count] { flex-shrink:0; white-space:nowrap; }
 [data-mobile-restore] { position:fixed; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); z-index:1200; pointer-events:auto; min-height:44px; padding:10px 18px; border:1px solid #4d6bfe40; border-radius:24px; background:var(--dsw-alias-bg-base,white); color:#4d6bfe; font:inherit; box-shadow:0 3px 18px #15244318; }
 
@@ -3067,17 +3071,17 @@ html[data-dsh-mobile]:has([data-mobile-session-title]) [data-mobile-header-hidde
 [data-mobile-folded-action] { display:none!important; }
 [data-mobile-tools-seat] { display:contents; }
 html[data-dsh-mobile] [data-mobile-tools-open] { display:grid; place-items:center; width:44px; height:44px; min-width:44px; padding:0; border:0; border-radius:50%; corner-shape:round; color:var(--dsw-alias-label-primary); background:var(--mobile-soft); }
-[data-mobile-tools-dialog] { box-sizing:border-box; margin:auto auto 0; width:min(100%,520px); max-width:100%; max-height:75dvh; overflow-y:auto; padding:16px 20px max(20px,env(safe-area-inset-bottom)); border:1px solid var(--mobile-line); border-bottom:0; border-radius:26px 26px 0 0; background:var(--mobile-face); color:var(--dsw-alias-label-primary); box-shadow:0 -8px 40px #0002; }
+[data-mobile-tools-dialog] { box-sizing:border-box; margin:auto auto 0; width:min(100%,520px); max-width:100%; max-height:75dvh; overscroll-behavior:contain; overflow-y:auto; padding:16px 20px max(20px,env(safe-area-inset-bottom)); border:1px solid var(--mobile-line); border-bottom:0; border-radius:26px 26px 0 0; background:var(--mobile-face); color:var(--dsw-alias-label-primary); box-shadow:0 -8px 40px #0002; }
 [data-mobile-tools-dialog]::backdrop { background:#0005; }
-[data-mobile-tools-dialog] [data-mobile-tools-handle] { width:34px; height:4px; margin:0 auto 12px; border-radius:4px; background:var(--dsw-alias-label-tertiary); opacity:.5; }
-[data-mobile-tools-dialog] header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
-[data-mobile-tools-dialog] strong { font-size:16px; font-weight:500; }
+[data-mobile-tools-dialog] [data-mobile-tools-handle] { width:34px; height:4px; margin:0 auto 12px; touch-action:pan-x; border-radius:4px; background:var(--dsw-alias-label-tertiary); opacity:.5; }
+[data-mobile-tools-dialog] header { touch-action:pan-x; display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
+[data-mobile-tools-dialog] strong { font-size:20px; font-weight:600; }
 [data-mobile-tools-dialog] button { font:inherit; color:inherit; cursor:pointer; border:0; background:transparent; -webkit-tap-highlight-color:transparent; }
 [data-mobile-tools-dialog] button:disabled { opacity:.45; cursor:default; }
 [data-mobile-tools-dialog] header button { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; padding:0; }
 [data-mobile-tools-grid] { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
-[data-mobile-tools-grid] button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:92px; padding:12px; border-radius:20px; background:var(--mobile-soft); font-size:14px; }
-[data-mobile-tools-permission] { display:flex; align-items:center; width:100%; gap:10px; margin-top:12px; min-height:64px; padding:12px 0; text-align:left; font-size:14px!important; }
+[data-mobile-tools-grid] button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:96px; padding:16px; border-radius:18px; background:var(--mobile-soft); font-size:14px; }
+[data-mobile-tools-permission] { display:flex; align-items:center; width:100%; gap:10px; margin-top:12px; border-top:1px solid var(--mobile-line)!important; min-height:64px; padding:12px 0; text-align:left; font-size:14px!important; }
 [data-mobile-tools-permission] > span { flex-shrink:0; }
 [data-mobile-tools-permission] > small { margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--dsw-alias-label-secondary); }
 [data-mobile-tools-dialog] svg { flex:none; }
@@ -3186,6 +3190,12 @@ html[data-dsh-mobile] [data-mobile-room-form] :is(input,textarea,select) { box-s
 html[data-dsh-mobile] [data-mobile-room-form] textarea { min-height:94px; resize:vertical; }
 html[data-dsh-mobile] [data-mobile-room-form] button { min-height:44px; min-width:44px; font-size:16px; border-radius:14px; }
 html[data-dsh-mobile] [data-mobile-room-form] summary { min-height:44px; padding:10px 0; font-size:16px; color:var(--dsw-alias-label-primary); }
+/* Harness model controls are expandable summaries, not native selects. Keep the
+   advanced-settings disclosure plain while aligning picker faces with form fields. */
+html[data-dsh-mobile] [data-mobile-room-form] details > summary[aria-expanded] { display:flex; align-items:center; box-sizing:border-box; width:100%; max-width:none; min-width:0; min-height:48px; gap:12px; padding:11px 12px; border:1px solid var(--mobile-edge); border-radius:14px; background:var(--mobile-soft); font-size:17px; line-height:1.5; color:var(--dsw-alias-label-primary); }
+html[data-dsh-mobile] [data-mobile-room-form] details > summary[aria-expanded] > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+html[data-dsh-mobile] [data-mobile-room-form] details > summary[aria-expanded]::after { flex-shrink:0; margin-inline-start:auto; margin-inline-end:2px; }
+
 html[data-dsh-mobile] [data-mobile-room-form] > div:last-child { position:sticky; bottom:-16px; background:var(--mobile-face); padding:12px 0 0; margin-top:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
 html[data-dsh-mobile] [data-mobile-room-form] [role=alert] { font-size:15px; line-height:1.5; }
 html[data-dsh-mobile] [data-member] { font-size:16px; }
@@ -3246,6 +3256,15 @@ html[data-dsh-mobile] [data-mobile-picker] { position:fixed!important; inset:aut
 html[data-dsh-mobile] [data-mobile-picker] > [role=presentation] { max-height:none; overflow:visible; }
 html[data-dsh-mobile] [data-mobile-picker] [role=menuitem] { min-height:52px; padding:12px; border-radius:14px; font-size:17px; }
 html[data-dsh-mobile] [data-mobile-picker] [role=menuitem][hidden] { display:none; }
+/* Keep the workspace list inside its flex viewport: visible overflow used to
+ * paint the last folder over the pinned add-action divider on short screens. */
+html[data-dsh-mobile] [data-mobile-picker=workspace] { overflow:hidden; }
+html[data-dsh-mobile] [data-mobile-picker=workspace] > [data-mobile-picker-chrome] { flex:none; }
+html[data-dsh-mobile] [data-mobile-picker=workspace] > [role=presentation]:nth-child(2) { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
+html[data-dsh-mobile] [data-mobile-picker=workspace] > [role=presentation] > * { flex:none; }
+html[data-dsh-mobile] [data-mobile-picker=workspace] > [role=presentation]:nth-child(3):last-child { flex:none; margin-top:8px; padding-top:8px; border-top:1px solid var(--mobile-edge); }
+html[data-dsh-mobile] [data-mobile-picker=workspace] [role=menuitem] { box-sizing:border-box; min-height:52px; padding:12px; line-height:28px; }
+
 html[data-dsh-mobile] [data-mobile-picker=preset] [role=menuitem] span > span:last-child { font-size:14px; line-height:1.55; color:var(--dsw-alias-label-secondary); }
 
 html[data-mobile-gesture] [data-mobile-library-pane][hidden] { display:block; }
@@ -3327,13 +3346,13 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				this.clearMarks();
 				const root = frame?.querySelector("[data-slot=\"main.conversation\"] > [data-phase]");
 				const row = root?.querySelector("header [data-conversation-header-corner]")?.parentElement;
-				const ordinary = row?.querySelector("nav > span:only-child > button:disabled + [data-slot=\"conversation.session.header.lineage\"]:empty");
+				const ordinary = row?.querySelector("nav > span:only-child > :is(button:disabled,span:not([data-slot])) + [data-slot=\"conversation.session.header.lineage\"]:empty");
 				let preset = "";
 				if (row) {
 					for (const button of row.querySelectorAll("[data-slot=\"conversation.session.header.actions\"] button[aria-label]")) if (/^(重命名会话|Rename session)$/.test(button.getAttribute("aria-label") ?? "")) this.mark(button, "data-mobile-original-rename");
 				}
 				if (root?.dataset.phase === "active" && row) {
-					for (const title of row.querySelectorAll("nav > span > button:disabled")) {
+					for (const title of row.querySelectorAll("nav > span > :is(button:disabled,span:not([data-slot]))")) {
 						const slot = title.nextElementSibling;
 						if (slot?.getAttribute("data-slot") !== "conversation.session.header.lineage") continue;
 						const count = slot.querySelector(":scope > div:only-child > button[aria-haspopup=\"tree\"]");
@@ -3343,17 +3362,18 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 						this.mark(separator, "data-mobile-header-hidden");
 						this.mark(count, "data-mobile-lineage-count");
 					}
-					const label = row.querySelector("[data-slot=\"conversation.session.header.actions\"] > span[title]:has(svg mask[id^=\"mask0_agent_preset\"])");
+					const label = row.querySelector("[data-slot=\"conversation.session.header.actions\"] > span[title]:has(svg :is(mask[id^=\"mask0_agent_preset\"],path[d^=\"M6.51867 12.3282\"]))");
 					if (label) {
 						preset = label.textContent?.trim() ?? "";
 						this.mark(label, "data-mobile-header-hidden");
 					}
+					for (const target of row.querySelectorAll("[data-slot=\"conversation.session.header.utilities\"] [data-open-target=\"directory\"]")) this.mark(target, "data-mobile-header-hidden");
 					for (const img of row.querySelectorAll("img[src^=\"/open-in-app/icon/\"]")) {
 						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");
-					if (this.doc.querySelector("[data-mobile-members-open], [data-mobile-tools-open]")) {
+					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");
 					}
 					const content = row.cloneNode(true);
@@ -4092,6 +4112,19 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			return null;
 		}
 		//#endregion
+		//#region src/client/commands.ts
+		function openMobileCommands(controller, draft, span) {
+			if (!controller || typeof controller.toggleSource !== "function") return false;
+			controller.toggleSource("command", {
+				trigger: "/",
+				query: "",
+				quoted: false,
+				position: draft.slice(0, span.start).trim() === "" ? "leading" : "inline",
+				span
+			});
+			return true;
+		}
+		//#endregion
 		//#region src/client/composerActions.ts
 		var ComposerActions = class {
 			seat;
@@ -4108,7 +4141,11 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 					subtree: true,
 					characterData: true,
 					attributes: true,
-					attributeFilter: ["disabled", "aria-label"]
+					attributeFilter: [
+						"disabled",
+						"aria-label",
+						"contenteditable"
+					]
 				});
 				this.sync();
 			}
@@ -4120,21 +4157,25 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				};
 			};
 			sync() {
-				const file = this.seat.closest("[data-composer-card]")?.querySelector(":scope > div:last-child > div:first-child > input[type=file][hidden]");
-				const attachments = file?.previousElementSibling;
-				const commands = attachments?.previousElementSibling;
+				const card = this.seat.closest("[data-composer-card]");
+				const file = card?.querySelector(":scope > div:last-child > div:first-child > input[type=file][hidden]");
+				const previous = file?.previousElementSibling;
+				const unified = previous instanceof HTMLButtonElement && previous.getAttribute("aria-haspopup") === "listbox";
+				const attachments = unified ? file : previous;
+				const commands = unified ? previous : previous?.previousElementSibling;
 				const next = {};
-				if (commands instanceof HTMLButtonElement && commands.getAttribute("aria-haspopup") === "listbox" && attachments instanceof HTMLButtonElement) {
+				if (commands instanceof HTMLButtonElement && commands.getAttribute("aria-haspopup") === "listbox" && (attachments instanceof HTMLButtonElement || attachments instanceof HTMLInputElement)) {
 					next.commands = this.target(commands);
 					next.attachments = this.target(attachments);
-					const permission = (file?.nextElementSibling)?.querySelector(":scope > span > button[aria-label]");
+					if (unified) next.attachments.disabled ||= commands.disabled || !card?.querySelector("[contenteditable=\"true\"]");
+					const permission = (file?.nextElementSibling)?.querySelector("[data-slot=\"conversation.input.permission\"] button[aria-label], :scope > span > button[aria-label]");
 					if (permission?.querySelector(":scope > span:not([aria-hidden])") && permission.querySelector(":scope > span[aria-hidden] svg")) next.permissions = this.target(permission);
 				}
 				for (const button of this.marked) if (!Object.values(next).some((value) => value.button === button)) {
 					button.removeAttribute("data-mobile-folded-action");
 					this.marked.delete(button);
 				}
-				for (const value of Object.values(next)) if (!this.marked.has(value.button)) {
+				for (const value of Object.values(next)) if (value.button instanceof HTMLButtonElement && !this.marked.has(value.button)) {
 					value.button.setAttribute("data-mobile-folded-action", "");
 					this.marked.add(value.button);
 				}
@@ -4154,10 +4195,11 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 					disabled: button.disabled
 				};
 			}
-			invoke(action) {
+			invoke(action, openCommands) {
 				this.sync();
 				const target = this.snapshot[action];
 				if (!target || target.disabled || !target.button.isConnected) return false;
+				if (action === "commands" && openCommands?.()) return true;
 				if (action === "commands") this.seat.closest("[data-composer-card]")?.querySelector("[contenteditable=\"true\"]")?.focus({ preventScroll: true });
 				target.button.click();
 				return true;
@@ -4447,8 +4489,9 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 		//#endregion
 		//#region src/client/MobileTools.tsx
 		/** Own only the launcher and grouped navigation; action targets stay host-owned. */
-		function MobileTools({ t, useSession, rooms }) {
+		function MobileTools({ t, useSession, useInput, inputActions, rooms, openCommands }) {
 			const sessionId = useSession((s) => s.sessionId);
+			const draft = useInput((s) => s.draft);
 			const seat = (0, react.useRef)(null);
 			const [actions, setActions] = (0, react.useState)();
 			(0, react.useLayoutEffect)(() => {
@@ -4463,11 +4506,12 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				children: actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tools, {
 					actions,
 					t,
+					openCommands: openCommands ? () => openCommands(sessionId, draft, inputActions.captureInsertion()) : void 0,
 					invite: rooms.available() ? () => openMobileMembers(sessionId, true) : void 0
 				})
 			});
 		}
-		function Tools({ actions, t, invite }) {
+		function Tools({ actions, t, invite, openCommands }) {
 			const targets = (0, react.useSyncExternalStore)(actions.subscribe, actions.getSnapshot);
 			const dialog = (0, react.useRef)(null), launcher = (0, react.useRef)(null);
 			const close = () => {
@@ -4480,7 +4524,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			if (!targets.commands || !targets.attachments) return null;
 			const invoke = (action) => {
 				close();
-				actions.invoke(action);
+				actions.invoke(action, openCommands);
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				ref: launcher,
@@ -4489,6 +4533,8 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 				"aria-haspopup": "dialog",
 				"aria-expanded": "false",
 				onClick: () => {
+					if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+					launcher.current?.focus({ preventScroll: true });
 					dialog.current?.showModal();
 					launcher.current?.setAttribute("aria-expanded", "true");
 				},
@@ -4772,6 +4818,42 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			}), document.body);
 		}
 		//#endregion
+		//#region src/client/catalogReads.ts
+		/** Bound optional catalog enrichment so cold log reads cannot fan out across the library. */
+		var CatalogReads = class {
+			limit;
+			pending = [];
+			running = 0;
+			constructor(limit = 2) {
+				this.limit = limit;
+			}
+			add(work, priority = 1) {
+				const item = {
+					cancelled: false,
+					priority,
+					work
+				};
+				this.pending.push(item);
+				this.pending.sort((a, b) => a.priority - b.priority);
+				this.pump();
+				return () => {
+					item.cancelled = true;
+					this.pending = this.pending.filter((entry) => entry !== item);
+				};
+			}
+			pump() {
+				while (this.running < this.limit && this.pending.length) {
+					const item = this.pending.shift();
+					if (item.cancelled) continue;
+					this.running++;
+					Promise.resolve().then(() => item.cancelled ? void 0 : item.work(() => !item.cancelled)).catch(() => {}).finally(() => {
+						this.running--;
+						this.pump();
+					});
+				}
+			}
+		};
+		//#endregion
 		//#region src/client/native.ts
 		/** Additive bridge features: older shells and ordinary browsers retain Web controls. */
 		function hasNativeAction(action) {
@@ -4793,7 +4875,8 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 		//#endregion
 		//#region src/client/MobileLibrary.tsx
 		/** Browse official metadata; the official workspace service remains the only navigation writer. */
-		function MobileLibrary({ rooms, navigation, onOpen, onBeforeOpen, t }) {
+		function MobileLibrary({ rooms, navigation, onOpen, onBeforeOpen, visible = true, t }) {
+			const reads = (0, react.useMemo)(() => new CatalogReads(), [navigation.sessions]);
 			const sessionFeed = navigation.sessions.list, workspaceFeed = navigation.workspaces.list;
 			const sessions = (0, react.useSyncExternalStore)((0, react.useCallback)((listener) => sessionFeed.subscribe(listener), [sessionFeed]), (0, react.useCallback)(() => sessionFeed.getSnapshot(), [sessionFeed]));
 			const workspaces = (0, react.useSyncExternalStore)((0, react.useCallback)((listener) => workspaceFeed.subscribe(listener), [workspaceFeed]), (0, react.useCallback)(() => workspaceFeed.getSnapshot(), [workspaceFeed]));
@@ -4891,8 +4974,10 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 										"data-mobile-session-copy": true,
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: row.title || (row.blank ? t("newSession") : row.displayTitle) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SessionMetadata, {
-											id: row.id,
-											cwd: row.cwd ?? "",
+											row,
+											sessions: navigation.sessions,
+											reads,
+											visible,
 											...rooms ? { rooms } : {},
 											t
 										})]
@@ -4950,29 +5035,56 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 		}
 		const emptyRoomSubscribe = () => () => {};
 		const emptyRoomSnapshot = () => 0;
-		function SessionMetadata({ id, cwd, rooms, t }) {
+		function SessionMetadata({ row, sessions, reads, visible, rooms, t }) {
 			const ref = (0, react.useRef)(null);
 			(0, react.useSyncExternalStore)(rooms?.subscribe ?? emptyRoomSubscribe, rooms?.getSnapshot ?? emptyRoomSnapshot);
 			(0, react.useEffect)(() => {
-				if (!rooms?.available() || !ref.current) return;
+				if (!visible || !ref.current) return;
+				let cancel;
+				const enter = () => {
+					if (cancel) return;
+					const cancelTitle = !row.title && !row.blank && typeof sessions.refreshProjections === "function" ? reads.add(async () => {
+						await sessions.refreshProjections(row.id);
+					}, 0) : void 0;
+					const cancelRoom = rooms?.available() ? reads.add(async () => {
+						await rooms.refresh(row.id);
+					}) : void 0;
+					cancel = () => {
+						cancelTitle?.();
+						cancelRoom?.();
+					};
+				};
+				const leave = () => {
+					cancel?.();
+					cancel = void 0;
+				};
 				if (typeof IntersectionObserver === "undefined") {
-					rooms.refresh(id);
-					return;
+					enter();
+					return leave;
 				}
 				const observer = new IntersectionObserver((entries) => {
-					if (entries.some((e) => e.isIntersecting)) {
-						rooms.refresh(id);
-						observer.disconnect();
-					}
-				});
+					if (entries.some((entry) => entry.isIntersecting)) enter();
+					else leave();
+				}, { root: ref.current.closest("[data-mobile-recents]") });
 				observer.observe(ref.current);
-				return () => observer.disconnect();
-			}, [rooms, id]);
-			const state = rooms?.get(id), count = state ? state.members.length : state === null || !rooms?.available() ? 1 : "…";
+				return () => {
+					observer.disconnect();
+					leave();
+				};
+			}, [
+				rooms,
+				row.id,
+				row.title,
+				row.blank,
+				sessions,
+				reads,
+				visible
+			]);
+			const state = rooms?.get(row.id), count = state ? state.members.length : state === null || !rooms?.available() ? 1 : "…";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("small", {
 				ref,
 				children: [
-					cwd.split(/[\\/]/).filter(Boolean).at(-1) || t("unassignedWorkspace"),
+					(row.cwd ?? "").split(/[\\/]/).filter(Boolean).at(-1) || t("unassignedWorkspace"),
 					" · ",
 					count,
 					" ",
@@ -5186,6 +5298,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileLibrary, {
 							...rooms ? { rooms } : {},
 							navigation: available,
+							visible: library || wide,
 							t,
 							onBeforeOpen: presentation.prepareNavigation,
 							onOpen: () => setLibrary(false)
@@ -5581,6 +5694,90 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 			}
 		};
 		//#endregion
+		//#region src/client/sheetGestures.ts
+		/** Mobile dismissal delegates to native dialog.close or the Room owner's close handler. */
+		function installSheetGestures(doc) {
+			let drag;
+			const reset = () => {
+				if (drag) drag.sheet.style.transform = drag.transform;
+				drag = void 0;
+			};
+			const close = (overlay) => {
+				if (overlay.isConnected && doc.documentElement.hasAttribute("data-dsh-mobile")) {
+					if (overlay instanceof HTMLDialogElement) {
+						overlay.close();
+						return;
+					}
+					overlay.dispatchEvent(new MouseEvent("mousedown", {
+						bubbles: true,
+						cancelable: true
+					}));
+				}
+			};
+			const down = (event) => {
+				reset();
+				if (!doc.documentElement.hasAttribute("data-dsh-mobile") || event.touches.length !== 1) return;
+				const target = event.target;
+				const native = target.closest("dialog[data-mobile-tools-dialog][open]");
+				const overlay = native ?? target.closest("[data-mobile-room-overlay]");
+				const sheet = native ?? overlay?.querySelector("[data-mobile-room-form]");
+				if (!sheet || !overlay || !native && doc.querySelector("dialog[open]") || doc.getSelection()?.toString()) return;
+				const point = event.touches[0], bounds = sheet.getBoundingClientRect();
+				const outside = native ? target === native && (point.clientY < bounds.top || point.clientY > bounds.bottom || point.clientX < bounds.left || point.clientX > bounds.right) : target === overlay;
+				if (!outside && (sheet.scrollTop > 0 || point.clientY > sheet.getBoundingClientRect().top + 96 || target.closest("button,input,textarea,select,details,a,[contenteditable],[role=menu]"))) return;
+				drag = {
+					sheet,
+					overlay,
+					x: point.clientX,
+					y: point.clientY,
+					outside,
+					dragging: false,
+					transform: sheet.style.transform
+				};
+			};
+			const move = (event) => {
+				if (!drag) return;
+				if (event.touches.length !== 1 || !drag.sheet.isConnected || !doc.documentElement.hasAttribute("data-dsh-mobile")) {
+					reset();
+					return;
+				}
+				const dx = event.touches[0].clientX - drag.x, dy = event.touches[0].clientY - drag.y;
+				if (drag.outside) {
+					if (Math.hypot(dx, dy) > 10) reset();
+					return;
+				}
+				if (!drag.dragging && (dy < -10 || Math.abs(dx) > 12 && Math.abs(dx) > Math.abs(dy))) {
+					reset();
+					return;
+				}
+				if (!drag.dragging && (dy < 12 || dy < Math.abs(dx) * 1.5)) return;
+				drag.dragging = true;
+				drag.sheet.style.transform = `translate3d(0,${Math.max(0, dy)}px,0)`;
+				if (event.cancelable) event.preventDefault();
+			};
+			const up = (event) => {
+				const from = drag, point = event.changedTouches[0];
+				reset();
+				if (!from || !point) return;
+				const dx = point.clientX - from.x, dy = point.clientY - from.y;
+				if (from.outside && Math.hypot(dx, dy) <= 10 || from.dragging && dy >= 72 && dy > Math.abs(dx) * 1.5) {
+					if (event.cancelable) event.preventDefault();
+					close(from.overlay);
+				}
+			};
+			doc.addEventListener("touchstart", down, { passive: true });
+			doc.addEventListener("touchmove", move, { passive: false });
+			doc.addEventListener("touchend", up, { passive: false });
+			doc.addEventListener("touchcancel", reset);
+			return () => {
+				reset();
+				doc.removeEventListener("touchstart", down);
+				doc.removeEventListener("touchmove", move);
+				doc.removeEventListener("touchend", up);
+				doc.removeEventListener("touchcancel", reset);
+			};
+		}
+		//#endregion
 		//#region src/client/foreground.ts
 		/** Resume a stale official follow generation, preserving live reply baselines.
 		* Brief interruptions and duplicate native/browser signals leave healthy streams alone. */
@@ -5969,6 +6166,7 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 					navigation
 				})
 			}, MobileDirectoryOverlay));
+			ctx.effect(() => installSheetGestures(document), "mobile: sheet dismissal");
 			ctx.effect(() => () => {
 				presentation.dispose();
 			}, "mobile: presentation");
@@ -6067,7 +6265,14 @@ html[data-dsh-mobile] [data-mobile-picker=preset] [data-mobile-picker-divider] {
 						id: "mobile-input-tools",
 						order: -100,
 						locale: NS,
-						inject: () => ({ rooms })
+						inject: () => ({
+							rooms,
+							openCommands: (id, draft, span) => {
+								const actx = ctx.get("sessions")?.scope(id);
+								const service = ctx.get("inputTriggers");
+								return actx !== void 0 && typeof service?.sessionOf === "function" && openMobileCommands(service.sessionOf(actx), draft, span);
+							}
+						})
 					}, MobileTools);
 					else {
 						remove?.();

package/lib/types/client/MobileChrome.js

@@ -119,6 +119,6 @@ export function MobileChrome({ presentation, toggleSidebar, connection, navigati
     }, [state.drawer, settings, library, toggleSidebar]);
     if (!state.active && !settings && state.mode !== 'desktop')
         return null;
-    return _jsxs(_Fragment, { children: [!state.active && state.mode === 'desktop' && _jsx("button", { "data-mobile-restore": true, onClick: () => presentation.setMode('mobile'), children: t('restoreMobile') }), state.active && _jsxs(_Fragment, { children: [available && _jsxs("aside", { "data-mobile-library-pane": true, hidden: !library && !wide, children: [_jsxs("nav", { "data-mobile-library-toolbar": true, "aria-label": t('menu'), children: [_jsx("button", { "aria-label": t('settings'), onClick: openSettings, children: _jsx(MobileIcon, { name: "settings" }) }), _jsx("button", { "aria-label": t('newSession'), onClick: startSession, children: _jsx(MobileIcon, { name: "compose" }) })] }), _jsx(MobileLibrary, { ...(rooms ? { rooms } : {}), navigation: available, t: t, onBeforeOpen: presentation.prepareNavigation, onOpen: () => setLibrary(false) })] }), library && available && !wide && _jsx("button", { type: "button", "data-mobile-peek-close": true, "aria-label": t('returnToConversation'), onClick: () => { presentation.prepareNavigation(); setLibrary(false); } }), state.drawer && _jsx("button", { "data-mobile-shade": true, "aria-label": t('close'), onClick: toggleSidebar }), _jsxs("nav", { "data-mobile-toolbar": true, "data-library": false, "aria-label": t('menu'), children: [_jsx("button", { "aria-label": t('menu'), onClick: openLibrary, children: _jsx(MobileIcon, { name: "back" }) }), _jsxs("div", { "data-mobile-nav-title": true, children: [(available ? _jsx(ConversationTitle, { navigation: available, prepareNavigation: presentation.prepareNavigation, surface: presentation.surface, fallback: t('newSession'), t: t }) : _jsx("strong", { children: t('brand') })), wire !== 'connected' && !connectionExpanded && _jsx("small", { role: "status", children: t(wire ?? 'connecting') })] }), _jsx("button", { "data-mobile-new": !!available, "aria-label": available ? t('newSession') : t('settings'), onClick: available ? startSession : openSettings, children: _jsx(MobileIcon, { name: available ? "compose" : "settings" }) }), available && rooms && _jsx(MobileRoomNavigation, { rooms: rooms, navigation: available, prepareNavigation: presentation.prepareNavigation, t: t })] }), wire !== 'connected' && connectionExpanded && _jsxs("div", { "data-mobile-connection-status": true, role: "status", children: [_jsx("span", { children: t(wire ?? 'connecting') }), _jsx("button", { onClick: () => connection.reconnect(), children: t('reconnect') })] })] }), _jsxs("dialog", { ref: dialog, "data-mobile-dialog": true, onClose: () => setSettings(false), "aria-label": t('settings'), children: [_jsx("h2", { children: t('settings') }), available && _jsx("button", { "data-mobile-option": true, onClick: startSession, children: t('newSession') }), _jsx("button", { "data-mobile-option": true, onClick: () => { setSettings(false); setLibrary(false); if (!state.drawer)
+    return _jsxs(_Fragment, { children: [!state.active && state.mode === 'desktop' && _jsx("button", { "data-mobile-restore": true, onClick: () => presentation.setMode('mobile'), children: t('restoreMobile') }), state.active && _jsxs(_Fragment, { children: [available && _jsxs("aside", { "data-mobile-library-pane": true, hidden: !library && !wide, children: [_jsxs("nav", { "data-mobile-library-toolbar": true, "aria-label": t('menu'), children: [_jsx("button", { "aria-label": t('settings'), onClick: openSettings, children: _jsx(MobileIcon, { name: "settings" }) }), _jsx("button", { "aria-label": t('newSession'), onClick: startSession, children: _jsx(MobileIcon, { name: "compose" }) })] }), _jsx(MobileLibrary, { ...(rooms ? { rooms } : {}), navigation: available, visible: library || wide, t: t, onBeforeOpen: presentation.prepareNavigation, onOpen: () => setLibrary(false) })] }), library && available && !wide && _jsx("button", { type: "button", "data-mobile-peek-close": true, "aria-label": t('returnToConversation'), onClick: () => { presentation.prepareNavigation(); setLibrary(false); } }), state.drawer && _jsx("button", { "data-mobile-shade": true, "aria-label": t('close'), onClick: toggleSidebar }), _jsxs("nav", { "data-mobile-toolbar": true, "data-library": false, "aria-label": t('menu'), children: [_jsx("button", { "aria-label": t('menu'), onClick: openLibrary, children: _jsx(MobileIcon, { name: "back" }) }), _jsxs("div", { "data-mobile-nav-title": true, children: [(available ? _jsx(ConversationTitle, { navigation: available, prepareNavigation: presentation.prepareNavigation, surface: presentation.surface, fallback: t('newSession'), t: t }) : _jsx("strong", { children: t('brand') })), wire !== 'connected' && !connectionExpanded && _jsx("small", { role: "status", children: t(wire ?? 'connecting') })] }), _jsx("button", { "data-mobile-new": !!available, "aria-label": available ? t('newSession') : t('settings'), onClick: available ? startSession : openSettings, children: _jsx(MobileIcon, { name: available ? "compose" : "settings" }) }), available && rooms && _jsx(MobileRoomNavigation, { rooms: rooms, navigation: available, prepareNavigation: presentation.prepareNavigation, t: t })] }), wire !== 'connected' && connectionExpanded && _jsxs("div", { "data-mobile-connection-status": true, role: "status", children: [_jsx("span", { children: t(wire ?? 'connecting') }), _jsx("button", { onClick: () => connection.reconnect(), children: t('reconnect') })] })] }), _jsxs("dialog", { ref: dialog, "data-mobile-dialog": true, onClose: () => setSettings(false), "aria-label": t('settings'), children: [_jsx("h2", { children: t('settings') }), available && _jsx("button", { "data-mobile-option": true, onClick: startSession, children: t('newSession') }), _jsx("button", { "data-mobile-option": true, onClick: () => { setSettings(false); setLibrary(false); if (!state.drawer)
                             toggleSidebar(); }, children: t('workspaces') }), hasNativeAction('settings') ? _jsx("button", { "data-mobile-option": true, onClick: () => { setSettings(false); requestNativeAction('settings'); }, children: t('connectionSettings') }) : _jsxs(_Fragment, { children: [_jsx("h3", { children: t('connection') }), _jsx("p", { children: window.location.host }), _jsx("p", { children: t(wire ?? 'connecting') }), _jsx("button", { onClick: () => connection.reconnect(), children: t('reconnect') })] }), _jsx("h3", { children: t('display') }), _jsx("div", { role: "group", "aria-label": t('display'), children: ['auto', 'mobile', 'desktop'].map((mode) => _jsx("button", { "aria-pressed": state.mode === mode, onClick: () => presentation.setMode(mode), children: t(mode === 'auto' ? 'automatic' : mode) }, mode)) }), _jsx("p", { children: t('appearance') }), _jsx("button", { "data-mobile-done": true, onClick: () => setSettings(false), children: t('done') })] })] });
 }

package/lib/types/client/MobileLibrary.d.ts

@@ -6,8 +6,9 @@ type Props = PropsLocale<'mobile'> & {
     navigation: NavigationCapabilities;
     onOpen: () => void;
     onBeforeOpen?: () => void;
+    visible?: boolean;
 };
 /** Browse official metadata; the official workspace service remains the only navigation writer. */
-export declare function MobileLibrary({ rooms, navigation, onOpen, onBeforeOpen, t }: Props): import("react").JSX.Element;
+export declare function MobileLibrary({ rooms, navigation, onOpen, onBeforeOpen, visible, t }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=MobileLibrary.d.ts.map

package/lib/types/client/MobileLibrary.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { GROUPING_KEY, groupSessions, mainSessionId, recentSessions } from './navigation.js';
+import { CatalogReads } from './catalogReads.js';
 import { MobileIcon } from './MobileIcon.js';
 import { hasNativeAction, requestNativeAction } from './native.js';
 /** Browse official metadata; the official workspace service remains the only navigation writer. */
-export function MobileLibrary({ rooms, navigation, onOpen, onBeforeOpen, t }) {
+export function MobileLibrary({ rooms, navigation, onOpen, onBeforeOpen, visible = true, t }) {
+    const reads = useMemo(() => new CatalogReads(), [navigation.sessions]);
     const sessionFeed = navigation.sessions.list, workspaceFeed = navigation.workspaces.list;
     // Official feeds may expose prototype methods. Keep their receiver and stable subscriptions.
     const sessions = useSyncExternalStore(useCallback(listener => sessionFeed.subscribe(listener), [sessionFeed]), useCallback(() => sessionFeed.getSnapshot(), [sessionFeed]));
@@ -46,28 +48,45 @@ export function MobileLibrary({ rooms, navigation, onOpen, onBeforeOpen, t }) {
                                                 catch {
                                                     setError(true);
                                                 }
-                                            }, children: [_jsxs("span", { "data-mobile-session-copy": true, children: [_jsx("strong", { children: row.title || (row.blank ? t('newSession') : row.displayTitle) }), _jsx(SessionMetadata, { id: row.id, cwd: row.cwd ?? '', ...(rooms ? { rooms } : {}), t: t })] }), row.running ? _jsx("span", { "data-mobile-activity": true, role: "status", children: t('running') }) : _jsx("time", { dateTime: new Date(row.updatedAt).toISOString(), children: new Date(row.updatedAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) })] }) }, row.id)) })] }, group.key);
+                                            }, children: [_jsxs("span", { "data-mobile-session-copy": true, children: [_jsx("strong", { children: row.title || (row.blank ? t('newSession') : row.displayTitle) }), _jsx(SessionMetadata, { row: row, sessions: navigation.sessions, reads: reads, visible: visible, ...(rooms ? { rooms } : {}), t: t })] }), row.running ? _jsx("span", { "data-mobile-activity": true, role: "status", children: t('running') }) : _jsx("time", { dateTime: new Date(row.updatedAt).toISOString(), children: new Date(row.updatedAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) })] }) }, row.id)) })] }, group.key);
                     })] }), _jsxs("footer", { "data-mobile-search-dock": true, children: [_jsxs("label", { "data-mobile-search": true, children: [_jsx(MobileIcon, { name: "search", size: 20 }), _jsx("input", { ref: input, type: "search", enterKeyHint: "search", autoComplete: "off", value: query, onFocus: () => setSearching(true), onChange: e => setQuery(e.target.value), placeholder: t('searchTitles'), "aria-label": t('searchTitles') })] }), searching ? _jsx("button", { "data-mobile-search-cancel": true, "aria-label": t('cancel'), onClick: () => { setQuery(''); setSearching(false); input.current?.blur(); }, children: _jsx(MobileIcon, { name: "close" }) }) : hasNativeAction('scan') && _jsx("button", { "data-mobile-scan": true, "aria-label": t('scan'), onClick: () => requestNativeAction('scan'), children: _jsx(MobileIcon, { name: "scan" }) })] })] });
 }
 const emptyRoomSubscribe = () => () => { };
 const emptyRoomSnapshot = () => 0;
-function SessionMetadata({ id, cwd, rooms, t }) {
+function SessionMetadata({ row, sessions, reads, visible, rooms, t }) {
     const ref = useRef(null);
     useSyncExternalStore(rooms?.subscribe ?? emptyRoomSubscribe, rooms?.getSnapshot ?? emptyRoomSnapshot);
     useEffect(() => {
-        if (!rooms?.available() || !ref.current)
+        if (!visible || !ref.current)
             return;
+        let cancel;
+        const enter = () => {
+            if (cancel)
+                return;
+            // Cold list hints may omit titles. Read the official projection store without
+            // retaining/opening a Session; queued title reads take priority over Room scans.
+            const cancelTitle = !row.title && !row.blank && typeof sessions.refreshProjections === 'function'
+                ? reads.add(async () => { await sessions.refreshProjections(row.id); }, 0)
+                : undefined;
+            const cancelRoom = rooms?.available()
+                ? reads.add(async () => { await rooms.refresh(row.id); })
+                : undefined;
+            cancel = () => { cancelTitle?.(); cancelRoom?.(); };
+        };
+        const leave = () => { cancel?.(); cancel = undefined; };
         if (typeof IntersectionObserver === 'undefined') {
-            void rooms.refresh(id);
-            return;
+            enter();
+            return leave;
         }
-        const observer = new IntersectionObserver(entries => { if (entries.some(e => e.isIntersecting)) {
-            void rooms.refresh(id);
-            observer.disconnect();
-        } });
+        const observer = new IntersectionObserver(entries => {
+            if (entries.some(entry => entry.isIntersecting))
+                enter();
+            else
+                leave();
+        }, { root: ref.current.closest('[data-mobile-recents]') });
         observer.observe(ref.current);
-        return () => observer.disconnect();
-    }, [rooms, id]);
-    const state = rooms?.get(id), count = state ? state.members.length : state === null || !rooms?.available() ? 1 : '…';
-    return _jsxs("small", { ref: ref, children: [cwd.split(/[\\/]/).filter(Boolean).at(-1) || t('unassignedWorkspace'), " \u00B7 ", count, " ", t('memberUnit')] });
+        return () => { observer.disconnect(); leave(); };
+    }, [rooms, row.id, row.title, row.blank, sessions, reads, visible]);
+    const state = rooms?.get(row.id), count = state ? state.members.length : state === null || !rooms?.available() ? 1 : '…';
+    return _jsxs("small", { ref: ref, children: [(row.cwd ?? '').split(/[\\/]/).filter(Boolean).at(-1) || t('unassignedWorkspace'), " \u00B7 ", count, " ", t('memberUnit')] });
 }

package/lib/types/client/MobileTools.d.ts

@@ -1,7 +1,17 @@
 import type { PropsRuntime, PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import { ComposerActions } from './composerActions.ts';
 import type { MobileRooms } from './rooms.ts';
-/** Own only the launcher and grouped navigation; action targets stay host-owned. */
-export declare function MobileTools({ t, useSession, rooms }: PropsLocale<'mobile'> & PropsRuntime<'conversation.input.left'> & {
+import type { SessionSummary } from '@deepseek-ai/dsh-api-session-controller/client';
+import type { TokenSpan } from '@deepseek-ai/dsh-client-ui-conversation/client';
+export interface MobileToolsInjected {
     rooms: MobileRooms;
-}): import("react").JSX.Element;
+    openCommands: (id: SessionSummary['id'], draft: string, span: TokenSpan) => boolean;
+}
+/** Own only the launcher and grouped navigation; action targets stay host-owned. */
+export declare function MobileTools({ t, useSession, useInput, inputActions, rooms, openCommands }: PropsLocale<'mobile'> & PropsRuntime<'conversation.input.left'> & MobileToolsInjected): import("react").JSX.Element;
+export declare function Tools({ actions, t, invite, openCommands }: {
+    actions: ComposerActions;
+    openCommands?: (() => boolean) | undefined;
+    invite: (() => void) | undefined;
+} & PropsLocale<'mobile'>): import("react").JSX.Element | null;
 //# sourceMappingURL=MobileTools.d.ts.map