@khorsheed/dsh-mobile 0.1.3 → 0.1.4

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

@@ -1,9 +1,11 @@
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
 import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client';
 import type { MobileRooms } from './rooms.ts';
+import type { MobilePanels } from './panels.ts';
 import type { MobileNavigation } from './navigation.ts';
 import type { MobilePresentation } from './presentation.ts';
 export interface MobileChromeInjected {
+    panels?: MobilePanels;
     rooms?: MobileRooms;
     navigation: MobileNavigation;
     presentation: MobilePresentation;
@@ -11,5 +13,5 @@ export interface MobileChromeInjected {
     connection: ConnectionHandle;
 }
 /** One visible navigation bar, with native connection sheets when supported. */
-export declare function MobileChrome({ presentation, toggleSidebar, connection, navigation, rooms, t }: MobileChromeInjected & PropsLocale<'mobile'>): import("react").JSX.Element | null;
+export declare function MobileChrome({ presentation, toggleSidebar, connection, navigation, rooms, panels, t }: MobileChromeInjected & PropsLocale<'mobile'>): import("react").JSX.Element | null;
 //# sourceMappingURL=MobileChrome.d.ts.map

package/lib/types/client/MobileChrome.js

@@ -4,6 +4,7 @@ import { installNavigationGestures } from './gestures.js';
 import { MobileRoomNavigation } from './MobileRooms.js';
 import { SessionRename } from './SessionRename.js';
 import { MobileIcon } from './MobileIcon.js';
+import { MobilePanelEntry, MobilePanelNavigation } from './MobilePanelNavigation.js';
 import { MobileLibrary } from './MobileLibrary.js';
 import { mainSessionId } from './navigation.js';
 import { hasNativeAction, reportChrome, requestNativeAction } from './native.js';
@@ -22,7 +23,7 @@ function ConversationTitle({ navigation, fallback, prepareNavigation, surface, t
     return _jsxs(_Fragment, { children: [_jsxs("span", { "data-mobile-title-line": true, children: [_jsx("strong", { "data-mobile-session-title": row && !row.blank ? '' : undefined, children: row && !row.blank ? row.title || row.displayTitle : fallback }), row && !row.blank && _jsx("button", { "data-mobile-rename": true, "aria-label": t('renameSession'), onClick: () => { prepareNavigation(); setRenaming(true); }, children: _jsx(MobileIcon, { name: "edit", size: 16 }) })] }), row && !row.blank && (cwd || preset) && _jsxs("span", { "data-mobile-subtitle": true, children: [_jsx("span", { title: row.cwd, children: cwd }), cwd && preset && _jsx("span", { "aria-hidden": true, children: "\u00B7" }), preset && _jsx("span", { children: preset })] }), renaming && row && !row.blank && _jsx(SessionRename, { navigation: navigation, sessionId: row.id, title: row.title || row.displayTitle, close: () => { prepareNavigation(); setRenaming(false); }, t: t }, row.id)] });
 }
 /** One visible navigation bar, with native connection sheets when supported. */
-export function MobileChrome({ presentation, toggleSidebar, connection, navigation, rooms, t }) {
+export function MobileChrome({ presentation, toggleSidebar, connection, navigation, rooms, panels, t }) {
     const state = useSyncExternalStore(presentation.subscribe, presentation.getSnapshot);
     const wire = useSyncExternalStore(connection.state.subscribe, connection.state.getSnapshot);
     const available = useSyncExternalStore(navigation.subscribe, navigation.getSnapshot);
@@ -51,9 +52,21 @@ export function MobileChrome({ presentation, toggleSidebar, connection, navigati
         if (available && !activated.current) {
             activated.current = true;
             setLibrary(true);
-            if (state.drawer)
-                toggleSidebar();
         }
+    }, [state.active, available]);
+    // With the mobile library available, the official sidebar drawer opens only
+    // on request (settings → workspaces). Anything else that expands it — the
+    // host restoring its desktop layout after a reconnect, a fallback drawer
+    // left open while navigation was missing — is closed again, so the desktop
+    // sidebar and its shade never reappear over the mobile chrome or a panel.
+    const drawerWanted = useRef(false);
+    useEffect(() => {
+        if (!state.drawer) {
+            drawerWanted.current = false;
+            return;
+        }
+        if (state.active && available && !drawerWanted.current)
+            toggleSidebar();
     }, [state.active, state.drawer, available, toggleSidebar]);
     useEffect(() => { reportChrome(state.active); return () => reportChrome(false); }, [state.active]);
     useEffect(() => {
@@ -79,6 +92,7 @@ export function MobileChrome({ presentation, toggleSidebar, connection, navigati
             toggleSidebar(); }, toggleSidebar);
     }, [state.active, available, settings, state.drawer, toggleSidebar]);
     const openLibrary = () => {
+        panels?.hide();
         if (!available) {
             toggleSidebar();
             return;
@@ -88,6 +102,7 @@ export function MobileChrome({ presentation, toggleSidebar, connection, navigati
         setLibrary(true);
     };
     const startSession = () => {
+        panels?.hide();
         presentation.prepareNavigation();
         available?.workspace.startSession();
         if (state.drawer)
@@ -119,6 +134,9 @@ 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, 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') })] })] });
+    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') })] }), _jsxs("div", { "data-mobile-header-actions": true, children: [panels && _jsx(MobilePanelEntry, { panels: panels, t: t, beforeOpen: () => { presentation.prepareNavigation(); setLibrary(false); if (state.drawer)
+                                            toggleSidebar(); } }), _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 })] }), panels && _jsx(MobilePanelNavigation, { panels: panels, active: state.active, 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) {
+                            drawerWanted.current = true;
+                            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/MobileIcon.d.ts

@@ -1,4 +1,4 @@
-export type MobileIconName = 'edit' | 'members' | 'back' | 'settings' | 'compose' | 'folder' | 'search' | 'scan' | 'close' | 'down' | 'right' | 'plus' | 'attachment' | 'commands' | 'shield';
+export type MobileIconName = 'panel' | 'edit' | 'members' | 'back' | 'settings' | 'compose' | 'folder' | 'search' | 'scan' | 'close' | 'down' | 'right' | 'plus' | 'attachment' | 'commands' | 'shield';
 export declare function MobileIcon({ name, size }: {
     name: MobileIconName;
     size?: number;

package/lib/types/client/MobileIcon.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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', commands: 'm16 4-8 16', shield: 'm12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6l8-3Zm-4 9 3 3 5-6',

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

@@ -0,0 +1,12 @@
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { MobilePanels } from './panels.ts';
+export declare function MobilePanelNavigation({ panels, active, prepareNavigation, t }: {
+    panels: MobilePanels;
+    active: boolean;
+    prepareNavigation: () => void;
+} & PropsLocale<'mobile'>): import("react").JSX.Element | null;
+export declare function MobilePanelEntry({ panels, beforeOpen, t }: {
+    panels: MobilePanels;
+    beforeOpen: () => void;
+} & PropsLocale<'mobile'>): import("react").JSX.Element | null;
+//# sourceMappingURL=MobilePanelNavigation.d.ts.map

package/lib/types/client/MobilePanelNavigation.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useSyncExternalStore } from 'react';
+import { MobileIcon } from './MobileIcon.js';
+export function MobilePanelNavigation({ panels, active, prepareNavigation, t }) {
+    const state = useSyncExternalStore(panels.subscribe, panels.getSnapshot);
+    const managed = active && state.managed;
+    const navigation = useRef(null);
+    const prepare = useRef(prepareNavigation);
+    prepare.current = prepareNavigation;
+    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]);
+    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]);
+    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 _jsxs("nav", { ref: navigation, "data-mobile-panel-navigation": true, "aria-label": t('panels'), children: [_jsx("button", { type: "button", "aria-label": t('backToChat'), onClick: () => { prepareNavigation(); panels.hide(); }, children: _jsx(MobileIcon, { name: "back" }) }), _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 => _jsxs("div", { role: "presentation", "data-mobile-panel-tab": true, "data-active": tab.id === state.activeId, children: [_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: _jsx("span", { children: tab.title || tab.kind }) }), tab.id === state.activeId && _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: _jsx(MobileIcon, { name: "close", size: 14 }) })] }, tab.id)) }), _jsx("button", { type: "button", "aria-label": t('addPanel'), onClick: panels.add, children: _jsx(MobileIcon, { name: "plus", size: 20 }) }), state.failed && _jsx("span", { role: "alert", "data-mobile-panel-error": true, children: t('panelError') })] });
+}
+export function MobilePanelEntry({ panels, beforeOpen, t }) {
+    const state = useSyncExternalStore(panels.subscribe, panels.getSnapshot);
+    if (!state.available)
+        return null;
+    return _jsx("button", { type: "button", "data-mobile-panel-entry": true, "aria-label": t('panels'), "aria-expanded": state.expanded, onClick: () => { beforeOpen(); panels.toggle(); }, children: _jsx(MobileIcon, { name: "panel" }) });
+}

package/lib/types/client/gestures.js

@@ -11,7 +11,7 @@ export function installNavigationGestures(doc, change, closeSidebar) {
         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 = undefined;
@@ -34,6 +34,9 @@ export function installNavigationGestures(doc, change, closeSidebar) {
         if (viewport >= 960)
             return; // A pinned two-column layout is not a drawer.
         const right = target.closest('[data-sidebar-right-panel][data-sidebar-right-open]') ?? undefined;
+        // Panel bodies own horizontal canvas/terminal/file gestures. Return is explicit.
+        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 : undefined;

package/lib/types/client/index.js

@@ -9,6 +9,7 @@ import { MobileSubmissionFocus } from './SubmissionFocus.js';
 import { openMobileCommands } from './commands.js';
 import { MobileTools } from './MobileTools.js';
 import { MobileChrome } from './MobileChrome.js';
+import { MobilePanels } from './panels.js';
 import { MobileQueue } from './MobileQueue.js';
 import { MobileRooms } from './rooms.js';
 import { MessageMenu } from './messageMenu.js';
@@ -28,6 +29,12 @@ export function apply(ctx) {
     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(undefined), 'mobile: sidebar capability');
+    });
     const directory = new MobileDirectory();
     const presentation = new MobilePresentation(window, window.__DSH_MOBILE_SHELL__?.bridgeVersion === BRIDGE_VERSION);
     ctx.inject(['sessions', 'workspaces', 'uiWorkspace'], scoped => {
@@ -56,23 +63,28 @@ export function apply(ctx) {
     }, 'mobile: foreground reconnect');
     ctx.slots.inject('shell.overlay', () => ctx.slots.register({
         name: 'shell.overlay', id: 'mobile-navigation', locale: NS,
-        inject: () => ({ presentation, connection, navigation, rooms, toggleSidebar: () => { ctx.layout.toggleSidebar(); } }),
+        inject: () => ({ presentation, connection, navigation, rooms, panels, toggleSidebar: () => { ctx.layout.toggleSidebar(); } }),
     }, MobileChrome));
     for (const name of ['conversation.input.dock', 'conversation.session.header.actions']) {
         ctx.slots.inject(name, () => ctx.slots.register({ name, id: 'mobile-send-focus' }, MobileSubmissionFocus));
     }
-    // Room's first asynchronous cache fill does not bump its composer slot in
-    // this revision. A declining mobile entry refreshes the public election;
+    // Older Room versions need a first-fill election bump. Refresh only when
+    // discovering a room, not on every roster/run change;
     // the original Room/approval/local-agent entries still decide the winner.
     ctx.slots.inject('conversation.composer', () => {
         let remove;
         let timer;
+        let lastRoom;
         const refresh = () => {
             const list = navigation.getSnapshot()?.sessions.list.getSnapshot();
             const current = list === undefined ? undefined : mainSessionId(list);
-            if (!presentation.getSnapshot().active || !current || !rooms.get(current))
+            const room = current && rooms.get(current) ? current : undefined;
+            if (!presentation.getSnapshot().active || room === lastRoom)
                 return;
+            lastRoom = room;
             clearTimeout(timer);
+            if (!room)
+                return;
             timer = setTimeout(() => {
                 remove?.();
                 remove = ctx.slots.register({ name: 'conversation.composer', priority: 10000, select: () => null }, () => null);

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

@@ -1,6 +1,12 @@
 /** Copy for controls owned by mobile; all conversation copy stays with its owner. */
 export declare const NS = "mobile";
 export declare const en: {
+    readonly panels: 'Panels';
+    readonly backToChat: 'Back to conversation';
+    readonly switchPanel: 'Switch panel';
+    readonly addPanel: 'Add panel';
+    readonly closePanel: 'Close current panel';
+    readonly panelError: 'Could not change this panel. Try again.';
     readonly connectPhone: "Connect phone";
     readonly connectIntro: "Continue your conversations in DSH Mobile.";
     readonly connectQR: "Scan with DSH Mobile to sign in";

package/lib/types/client/locales.js

@@ -1,6 +1,7 @@
 /** Copy for controls owned by mobile; all conversation copy stays with its owner. */
 export const NS = 'mobile';
 export 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",
@@ -41,6 +42,7 @@ export const en = {
     workspace: 'Open workspace', hostPath: 'Computer directory', hostPathHelp: 'Enter an existing absolute directory on your computer. This does not select a folder on your phone.', openWorkspace: 'Open', cancel: 'Cancel',
 };
 export const zh = {
+    panels: '面板', backToChat: '返回聊天', switchPanel: '切换面板', addPanel: '添加面板', closePanel: '关闭当前面板', panelError: '暂时无法操作面板，请重试。',
     connectPhone: "连接手机",
     connectIntro: "在 DSH Mobile 中继续你的会话。",
     connectQR: "使用 DSH Mobile 扫码登录",

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

@@ -1,16 +1,15 @@
-/** 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. */
 export declare class MessageMenu {
     private doc;
-    private timer;
-    private point;
+    private touch;
     private menu;
     constructor(doc: Document);
     private row;
     private actions;
     private down;
-    private move;
-    private cancel;
+    private hasSelection;
+    private selectionChanged;
     private context;
     private close;
     private open;

package/lib/types/client/messageMenu.js

@@ -1,17 +1,14 @@
-/** 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. */
 export class MessageMenu {
     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) {
@@ -31,19 +28,15 @@ export class MessageMenu {
         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(); };
-    cancel = () => { clearTimeout(this.timer); this.timer = undefined; this.point = undefined; };
+    // Touch long-press belongs to native text selection. Message actions remain
+    // on their original action row; an emulated contextmenu must not compete.
+    down = (event) => { this.touch = event.pointerType === 'touch' || event.pointerType === 'pen'; };
+    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();
@@ -52,7 +45,6 @@ export class MessageMenu {
     };
     close = () => { this.menu?.close(); this.menu?.remove(); this.menu = undefined; };
     open(row, x, y) {
-        this.cancel();
         this.close();
         const actions = this.actions(row);
         if (!actions.length)
@@ -87,13 +79,10 @@ export class MessageMenu {
         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);
     }
 }

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

@@ -0,0 +1,56 @@
+/** Optional public sidebar operations. Bodies and saved layouts stay with their owners. */
+interface Feed<T> {
+    getSnapshot(): T;
+    subscribe(listener: () => void): () => void;
+}
+export interface MobilePanelTab {
+    readonly id: string;
+    readonly title: string;
+    readonly kind: string;
+}
+export interface MobilePanelService {
+    mounted: Feed<string | undefined>;
+    openTabs?: Feed<readonly unknown[]>;
+    toggleExpanded(): void;
+    isExpanded(): boolean;
+    active(): MobilePanelTab | undefined;
+    tabsIn?(sessionId: string): readonly MobilePanelTab[];
+    focus?(tabId: string): void;
+    close?(tabId: string): void;
+    openTab?(kind: string): void;
+}
+export interface MobilePanelSnapshot {
+    readonly available: boolean;
+    readonly managed: boolean;
+    readonly expanded: boolean;
+    readonly sessionId: string | undefined;
+    readonly activeId: string;
+    readonly tabs: readonly MobilePanelTab[];
+    readonly failed: boolean;
+}
+/** Public services do actions; checked DOM anchors supply presentation-only change notifications. */
+export declare class MobilePanels {
+    private readonly doc;
+    private service;
+    private releases;
+    private listeners;
+    private snapshot;
+    private observer;
+    private disposed;
+    private scheduled;
+    private failed;
+    constructor(doc: Document);
+    readonly getSnapshot: () => MobilePanelSnapshot;
+    readonly subscribe: (listener: () => void) => () => void;
+    set(value: unknown): void;
+    private readonly sync;
+    private run;
+    readonly toggle: () => void;
+    readonly hide: () => void;
+    readonly select: (id: string) => void;
+    readonly close: () => void;
+    readonly add: () => void;
+    dispose(): void;
+}
+export {};
+//# sourceMappingURL=panels.d.ts.map

package/lib/types/client/panels.js

@@ -0,0 +1,97 @@
+const EMPTY = { available: false, managed: false, expanded: false, sessionId: undefined, activeId: '', tabs: [], failed: false };
+/** Public services do actions; checked DOM anchors supply presentation-only change notifications. */
+export class MobilePanels {
+    doc;
+    service;
+    releases = [];
+    listeners = 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 => {
+                const target = record.target instanceof Element ? record.target : record.target.parentElement;
+                return !target?.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 : undefined;
+        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();
+                const 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);
+                next = { available: true, managed, sessionId, expanded: service.isExpanded(), activeId: active?.id ?? '',
+                    tabs: tabs.map(({ id, title, kind }) => ({ id, title, kind })), failed: this.failed };
+            }
+        }
+        catch { /* A newer host can withdraw this optional face during scope teardown. */ }
+        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(undefined);
+        this.listeners.clear();
+    }
+}

package/lib/types/client/presentation.js

@@ -41,7 +41,13 @@ export class MobilePresentation {
         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 => {
+                const target = record.target instanceof Element ? record.target : record.target.parentElement;
+                return !target?.closest('[data-conversation-scroll] [data-slot="conversation.session"]');
+            }))
+                this.schedule();
+        });
         this.observer.observe(win.document.body, { subtree: true, childList: true, attributes: true, attributeFilter: ['data-sidebar-collapsed', 'data-phase', 'aria-selected', 'aria-expanded', 'data-ds-dark-theme', 'src'], characterData: true });
         this.media.addEventListener('change', this.schedule);
         win.addEventListener('resize', this.schedule);

package/lib/types/client/rooms.js

@@ -51,8 +51,19 @@ export class MobileRooms {
     publish(id, state) {
         if (!this.alive)
             return;
+        // Compare only the presentation we consume; server timestamps and journal
+        // metadata must not re-render the roster or re-elect the composer.
+        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() });
+        this.cache.set(id, { state, at: Date.now(), signature });
         if (this.cache.size > 200)
             this.cache.delete(this.cache.keys().next().value);
         this.version++;