dsh-mobile-topbar
A DeepSeek Harness Web UI plugin that turns the sidebar into a compact top bar on mobile screens, to save some precious space on small devices.
DSH mobile top bar: hamburger menu, brand mark, and new-session button replacing the sidebar
Why
DSH's left sidebar (session list, workspaces, settings) reserves a real grid column even in its collapsed "rail" state. On a phone that's a meaningful chunk of a small screen given up permanently. This plugin removes that reserved space on narrow viewports and replaces it with a small, familiar top bar instead.
What it does
On screens 768px wide or narrower:
- The sidebar stops reserving grid space and becomes an off-canvas drawer (hidden until opened).
- A top bar appears in its place, with:
- Left: a hamburger button that opens the sidebar drawer
- Middle: the DeepSeek Harness brand mark and wordmark (the same SVGs the sidebar itself renders)
- Right: a new-session button (the sidebar's own new-chat icon)
- Opening the drawer shows a backdrop; tapping it (or the hamburger again) closes the drawer.
- The right sidebar (file/document preview) and the Settings modal are both repositioned so neither renders underneath the top bar.
- Opening the sidebar while the right panel is open closes the right panel first, so the drawer is what actually becomes visible.
Screens wider than 768px are completely unaffected — this plugin only changes anything below that breakpoint.
Install
From your DSH profile directory (or via dsh plugin --profile <name> add, which forwards to pnpm inside the profile):
dsh plugin --profile web add github:<you>/dsh-mobile-topbar
# or, from a local checkout:
dsh plugin --profile web add /path/to/dsh-mobile-topbar
Then list it in that profile's package.json under dsh.profile.bundles:
{
"dsh": {
"profile": {
"bundles": [
"@deepseek-ai/dsh-base",
"@deepseek-ai/dsh-web-app",
"dsh-mobile-topbar"
]
}
}
}
Restart the profile (e.g. dsh web) to pick it up.
How it works
This is a small dual-face DSH plugin:
index.js — the host-side loader row (a no-op; this plugin only touches the browser).client.js — the browser half. It injects scoped CSS to reposition the sidebar/right-panel/settings-modal chrome on mobile, and mounts a small React-rendered top bar that calls the existing layout and uiWorkspace services (toggleSidebar, closeRightbar, startSession) rather than reimplementing any of that logic.cordis.patch.yml — inserts this package as a single loader row when a profile lists it as a bundle.
No sidebar/frame internals are duplicated or forked; the plugin only adds CSS overrides (targeting the app's existing, versioned class names) and reuses the app's own icon/brand components and layout services.
Caveats
The CSS overrides target specific class names generated by the current DSH build (e.g. .hHd-Xa_root, .pI_x6G_frame, .P3OORG_panel, .VOzbGW_overlay). These are internal, unversioned implementation details of DSH's client bundles — a future DSH release could rename them and quietly break this plugin's mobile layout. If the top bar or drawer stop behaving correctly after upgrading DSH, that's the first thing to check.
License
MIT
