When developing agents in DeepSeek Harness (DSH), the default web interface uses a centered, narrow bubble layout with considerable whitespace on both sides of the conversation area and lacks personal identity. The dsh-conversation-flat plugin modifies CSS and injects lightweight DOM to adjust the conversation area into a full-width document flow layout and adds personal profile display.

This plugin is maintained by Idreamxkl and is licensed under the MIT License. It is compatible with dsh 0.1.2-alpha.5, with schemastery as its core dependency. After installation, the conversation column fills the content area, user messages appear as full-width light-colored bars, assistant replies include a “DeepSeek” label, and Markdown tables automatically stretch to fill the column width.

Core Features

  • Document Flow Layout: Conversation content is no longer centered with constrained width; it uses a full-width column layout.
  • User Messages: User messages change from right-aligned bubbles to full-width light-colored rounded bars, with text left-aligned.
  • Assistant Identity: A gray “DeepSeek” label is displayed above assistant replies.
  • Table Display: Markdown tables stretch to fill the column width and align with the left side of the text.
  • Profile: A new “Profile” section is added to the settings panel, where you can configure a name and avatar. The name and avatar are displayed above each user message (circular avatar + name). If no avatar is uploaded, a circular badge showing the first character of the name is displayed.

Installation and Enablement

Use the official installation command to add the plugin:

dsh plugin --profile web add github:Idreamxkl/dsh-conversation-flat

After installation, restart dsh web for the changes to take effect. Settings are saved to the server-side file ~/.dsh/settings.yaml.

Customization

All layout rules are located in bundle/client.js. Common adjustments are as follows:

  • Adjust width: Change the max-width value in the conversation column rule from none to a more moderate value (such as 1400px).
  • Remove avatar/name: Clear the name and avatar in the settings panel. If you want to remove the “DeepSeek” label, delete the ::before rule in the “assistant messages” section of bundle/client.js.
  • Modify colors: Adjust the percentage value in color-mix() to change the lightness or darkness of the user message bar.

Technical Details and Notes

  • Storage mechanism: Settings are saved to the server-side file ~/.dsh/settings.yaml. Other devices on the local area network (tablet/phone) automatically fall back to that device’s localStorage to save profile information, because the settings channel is limited to the local machine.
  • Streaming output: The avatar line above a message is automatically rebuilt as the message is streamed.
  • Side-effect management: All side effects are registered through ctx.effect; disabling the plugin fully removes the page-side side effects.
  • Dependencies and compatibility: This plugin depends on schemastery and is compatible with dsh 0.1.2-alpha.5. Its CSS selectors are based on CSS-module hash matching for @deepseek-ai/dsh-client-ui-chat.