Introduction

The Web interface layout of DeepSeek Harness (hereinafter referred to as DSH) is fixed: the top bar, status bar, task bar, and input bar each occupy a distinct area. To make the conversation area cleaner during screen recording, screen sharing, or focused reading, you typically have no choice but to modify the source code, which requires keeping up with upstream updates and maintenance. dsh-layout-control offers an alternative: injecting a draggable “Layout” floating layer into the page as a plugin. This hides conversation decorations, docks the input bar to the four corners, and filters conversation content by type, all without modifying the DSH source code. Below is an introduction to its features, installation methods, and usage details.

What is it

dsh-layout-control is an independent layout plugin for the DSH Web interface, authored by LzqSuShi, and released under the MIT License. It utilizes only DSH’s public services (ctx.layout, ctx.slots) and stable DOM attributes ([data-slot], [data-composer-seat], [data-chat-flow-kind], etc.), avoiding CSS Module hashed class names. Consequently, it does not rely on guessing DSH’s internal implementation.

It addresses three main issues:

  1. Hiding interface decorations (top bar, status bar, task bar, other overlays);
  2. Docking the input bar to the four corners of the screen to free up the central conversation area;
  3. Filtering conversation content by type (e.g., viewing only reply bodies or hiding the thinking process).

Core Features

  • Entry: A circular button in the bottom-right corner opens the “Layout” panel and is draggable. When dragged to the edge of the screen, it sticks to the edge and hides half its size; hovering the mouse over it expands it.
  • Layout Snapshots: Three presets: Default / Focus / Immersive.
  • Sidebar: Expand / Icon Only / Hide, controlled via ctx.layout.
  • Input Bar: Three modes: Full / Compact / Hide. Docking positions are the four corners: Top-Left / Top-Right / Bottom-Left / Bottom-Right.
  • Details Bar: Toggle; “Clear Content” dispatches the dsh-details-clear event.
  • Session Decorations: Can individually hide the top bar, status bar, task bar, and other overlays.
  • Conversation Content Filtering: All AI outputs, user messages, thinking, tool calls, task lists, and reply bodies can be hidden as needed.
  • Width Adjustment: After docking, an 8px drag handle is visible on the inner side, allowing width adjustment between 280–560px.

After docking to the four corners, the conversation still scrolls vertically in the center, while the input card, along with the to-do list, sticks to the selected corner. Empty space on the same side holds a collapsible session summary card; clicking the card title collapses or expands it.

The position of the circular entry is stored in sessionStorage for the current tab and will not return to the bottom-right corner until the tab is refreshed.

Installation and Enablement

Install the plugin first, then restart dsh web, and finally hard-refresh the page in the browser by pressing Ctrl+F5.

GitHub installation (recommended):

dsh plugin --profile web add github:LzqSuShi/dsh-layout-control

Local development installation:

dsh plugin --profile web add "link:C:\liZhiQi\dsh-layout-control"

After the npm release, you can also install directly by package name:

dsh plugin --profile web add dsh-layout-control

This package has pre-built lib/ submitted, so git installation does not require the prepare build step. The package.json inside the package declares dsh.bundle.patch (installable via dsh plugin add) and dsh.client (injecting layout on the Web side), so the command above completes the installation.

To uninstall, run:

dsh plugin --profile web remove dsh-layout-control

Restart dsh web to apply changes.

Typical Usage

After the steps above, a circular button will appear in the bottom-right corner of the page. Daily operations are as follows:

  1. Open Panel: Click the circular entry; click again or press ESC to close.
  2. Switch Snapshots: In the “Layout” panel, select Default / Focus / Immersive to switch to different layout presets with one click.
  3. Dock Input Bar: Select Top-Left / Top-Right / Bottom-Left / Bottom-Right for the “Input Bar” to dock the input unit to the corresponding corner; drag the inner 8px handle to change the width (280–560px).
  4. Clean Up the View: Check to hide the top bar, status bar, and task bar; in “Conversation Content”, hide nodes like thinking, tool calls, and task lists as needed, leaving only the reply bodies.
  5. Collapse Summary: The session summary card on the same side after docking can be collapsed by clicking the title.

Implementation

The plugin client module is registered via window.__ModuleLoader__.load() and exports { isPlugin, inject: ["layout", "slots"], apply }. apply(ctx) registers a React floating layer in shell.overlay (id: dsh-layout-control). The root node has the data-layout-control attribute, so hiding the “decoration layer” will not hide this button as well.

Hiding, docking, and filtering are all achieved by adding attributes to document.documentElement and a style sheet, using selectors that target only public anchors. When docked to the left or right, [data-conversation-scroll] remains the vertical scrolling container. The conversation column has height: max-content, and the input seat has position: sticky with a height equal to the visible height of the scroll viewport. The drag handle is drawn using CSS ::before, and width adjustment is handled via window pointer events, without inserting nodes into the React tree.

Use Cases and Notes

Suitable for DSH users who need screen recording, screen sharing demos, screenshot archiving, or want to filter content by type in massive conversations. Easy to install and use, does not pollute DSH source code, and uninstalls cleanly.

There are a few things to know before using:

  1. Hiding only uses display: none, the corresponding React tree remains mounted on the page, so it does not save runtime overhead.
  2. “Clear Details Content” has prerequisites: It relies on existing clear controls in the page or a version of DSH that listens for dsh-details-clear; the original version may not be able to clear Inspect selections.
  3. Model selection remains unchanged after docking: Model / Effort is still in the input card toolbar; since the plugin does not modify DSH, it cannot be moved above the card.
  4. States are mostly not persisted: Except for the circular entry position stored in sessionStorage, other view states return to the default snapshot after refresh; other overlays may still overlap with the docked input bar.

One more reminder: The plugin runs with the permissions of the current DSH process. Before installing any third-party plugins, it is recommended to check the source code and license before deciding. This plugin code is under the MIT License and has no official affiliation with DeepSeek.

Conclusion

dsh-layout-control turns “adjusting the layout” from modifying source code to clicking through a panel a few times: hiding decorations, docking the input bar, filtering conversation nodes. It’s ready to use upon installation and leaves no trace upon uninstallation. Project address and community directory page are as follows:

  • GitHub: https://github.com/LzqSuShi/dsh-layout-control
  • Community Directory: https://www.skillhub.cn/plugins/LzqSuShi/dsh-layout-control