Introduction¶

The DSH Web GUI is designed for desktop use. When accessing DSH on a mobile device through remote tools, the landscape interface is compressed into a portrait view, resulting in text that is too small and difficult to interact with. The dsh-mobile-remote-view plugin rotates the entire interface 90° counterclockwise and splits the sidebar, chat page, and right panel into independent pages, each occupying a full screen, to support mobile portrait interaction.

Plugin Overview¶

• Name: dsh-mobile-remote-view
• Author: RonnyJung2021
• License: MIT
• Category: Client plugin

Core Features¶

This plugin mainly solves layout adaptation issues when viewing DSH remotely on a mobile device. Its capabilities include:

• Full-page 90° rotation: Converts the DSH desktop interface to a portrait layout.
• One page per screen: The chat page, sidebar page, and right-panel page each occupy a full screen and can be switched using page keys.
• Thumb-friendly sizing: Body text and input fields use a 12–27px font size (default 19px), while buttons and session rows are 48px tall, ensuring easy tapping.
• Control bar and scrollbars: Edge-aligned design with floating-window controls for page scaling and font-size adjustment.
• Coordinate layer: Ensures floating elements such as menus and tooltips continue to follow their triggers after rotation, without drifting out of place.
• Plugin card configuration: Provides 7 knobs to configure rotation direction, control bar position and thickness, zoom level, font size, auto-enter mode, and the coordinate layer toggle.
• Auto-enter mode: Once enabled in the plugin card, the Web GUI automatically enters mobile remote mode when opened.
• Language synchronization: Interface text follows DSH’s language setting.
• Exit and restore: Clicking exit restores the desktop layout and cleans up injected styles and attributes.

Installation and Enablement¶

The plugin must be installed into the DSH Web profile using a script.

node scripts/install-profile.mjs

After installation, a “Mobile Remote Mode” entry appears in the sidebar, or you can enable auto-enter mode from the plugin card. After installing, you need to restart the DSH engine itself for the changes to take effect.

Usage¶

1. Enter mode: Find and click “Mobile Remote Mode” at the top of the sidebar.
2. View and switch: The page rotates 90°, and the control bar and scrollbars appear on the left side. Click page keys to switch between the chat page and sidebar page; when the right panel is opened, it automatically becomes an independent page.
3. Exit: Click the “Exit” button on the control bar to return to the desktop layout.

Configuration¶

The plugin card provides 7 configuration options. Once saved to the profile, the settings persist:

• rotate: Rotation direction (−90° or 90°).
• barEdge: Control bar position (top, bottom, left, right).
• barSize: Control bar thickness (40–120px).
• scale: Overall page scaling (0.6–2.5).
• contentFontSize: Body text font size (12–27px).
• autoEnter: Whether to automatically enter the mode.
• virtualizeCoordinates: Whether to enable the coordinate layer (prevents menu offset).

Notes and Limitations¶

• iOS Safari limitations: Due to browser restrictions, iOS Safari does not support element-level fullscreen, so the fullscreen button may not be displayed.
• Soft keyboard: Issues caused by the soft keyboard covering content are outside the scope of this plugin; input behavior follows the browser’s native handling.
• Popup offset: Floating elements generated from Selection or Range objects may be offset by 90° after rotation.
• Session detection: The plugin recognizes both data-session-id and data-row-key="session:…" session row markers.
• Menu offset: If the “Convert Coordinates” toggle is disabled, menus may be offset by 90°.
• Read-only card: If no knobs are detected in the plugin injection, the plugin card will be displayed as read-only.

Summary¶

By using rotation and page-splitting, this plugin adapts the DSH desktop interface for mobile portrait interaction. It does not change DSH’s core logic; it only adjusts the visual presentation. It is suitable for users who need to view or manage DSH workflows remotely on a phone.

Plugin Directory
GitHub Repository