dsh-hide-ui 0.0.0-stage → 0.4.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dsh-hide-ui contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,134 @@
-# Temporary Holding Version
+# dsh-hide-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A DeepSeek Harness UI plugin that hides the interface regions you choose on
+right-click, so the wallpaper behind them is visible.
+
+## Choose what to hide
+
+`Ctrl` + right-click anywhere opens the surface picker. Toggle any combination:
+
+- **Sidebar** - sessions, search, and navigation.
+- **Cards & panels** - menus, popovers, and option panels.
+- **Input & controls** - composer, input bar, and takeover controls.
+- **Conversation text frame** - the message list and scrollable text flow.
+- **Trajectory view** - the trajectory main view, when active.
+- **Produced / highlights** - code blocks, tool cards, diffs, and changed files.
+- **Header popovers** - dropdown menus opened from the header.
+- **Header bar** - the conversation title row and its controls.
+- **Window menu** - the Application and Edit buttons in the desktop title bar.
+- **Right sidebar** - trajectory panel and side panels, when open.
+- **Entire window content** - the whole app shell plus the desktop window menu; overrides every surface above.
+
+A surface that is not currently mounted (a closed right sidebar, an inactive
+trajectory view, a closed menu) simply has nothing to hide until it appears.
+
+Each target is a card with a toggle switch. The choice is stored in
+`localStorage` under `dsh-hide-ui:targets` and reused on the next start. Turn
+every target off to disable the gesture. The same toggle list is registered as a
+**Hide UI** section in the host Settings dialog, and both surfaces write the same
+selection.
+
+## Gestures
+
+| Gesture | Result |
+| --- | --- |
+| `Ctrl` + right-click (anywhere) | Open or close the target picker |
+| Right-click the conversation column or any selected surface | Hide the selected surfaces |
+| **Hide now** in the picker | Apply the current selection immediately and close the picker |
+| **Restore** in the picker (while hidden) | Restore every surface |
+| Right-click while hidden | Restore; the right-click is swallowed |
+| Left-click while hidden | Restore; the click is swallowed |
+| `Esc` while hidden | Restore |
+| `Esc` with the picker open | Close the picker |
+| Right-click outside the selected regions (while visible) | Left alone, so host context menus keep working |
+| `Shift` + right-click | Left alone, for native menu and text-selection paths |
+
+Hiding blurs a focused composer that sits inside a hidden region, so keystrokes
+cannot land in an invisible input; restoring returns focus. Regions are hidden
+with `visibility` and `opacity` and are not unmounted, so their state, scroll
+position, and layout survive.
+
+## How it works
+
+`client.js` is a plain-JS browser module registered through
+`window.__ModuleLoader__`; there is no build step and no runtime dependency.
+
+- The layout columns are discovered structurally, the way `dsh-any-background`
+  does it: the frame is the parent of `[data-shell-overlay]`, and its children
+  are `[sidebar, center, rightbar?, overlay]`. `data-rightbar-col` marks the
+  right column, so the left and centre columns are read by position around it.
+  CSS-module suffixes (`_centerCol`, `_sidebarCol`, `_frame`) remain only as a
+  fallback when that structure is missing.
+- The nine surface groups reuse `dsh-any-background`'s stable host markers:
+  `[data-conversation-composer-overlay]` for the trajectory view,
+  `[data-composer-card]`/`[data-cordis-panel]` for input, the produced set
+  (`[data-code-block-content]`, `[data-diff]`, `[data-changed-files]`, ...),
+  and the header-popover set (`[role="menu"]`, `[data-menu-material]`, ...).
+  The header bar resolves from `[data-slot^="conversation.session.header"]`.
+- The conversation target is `[data-chat-flow]`, not the centre column, so the
+  header bar and composer keep their own independent toggles. The shell target
+  is the frame itself.
+- The selected elements get `.dsh-hide-ui-target`; the shell frame gets
+  `.dsh-hide-ui-frame`. One injected stylesheet hides marked targets while
+  `data-dsh-hide-ui="on"` is set on `<html>`.
+- The shell frame normally paints a shell-wide fill. The plugin clears it for
+  region mode only, so the body-level wallpaper shows through the vacated
+  tracks. In whole-shell mode the window itself is hidden, so the fill is left
+  alone.
+- Listeners are capture-phase, before the host's React handlers, and are
+  removed through `ctx.effect` on unload.
+- The settings section registers through
+  `ctx.slots.inject('settings.section', ...)` with id `dsh-hide-ui`, order 70,
+  and locale namespace `settings.hideUi`.
+
+## Install
+
+Copy or clone this directory anywhere, then link it into the `desktop` profile
+(the plugin is referenced in place, not copied). `dsh plugin add` records it in
+`dsh.profile.bundles`.
+
+A running DSH window mounts its client bundles once at startup. After editing
+`client.js`, reinstall if needed, then **restart the app** to load the new
+bundle. Reloading only the renderer can leave the plugin unmounted.
+
+Preferred: install the directory through Plugin Manager's *install bundle*
+action with the absolute package directory as the target.
+
+Manual fallback:
+
+```powershell
+dsh plugin --profile desktop add "link:<path-to-dsh-hide-ui>"
+```
+
+## Uninstall
+
+Remove `"dsh-hide-ui"` from `dsh.profile.bundles`, then run:
+
+```powershell
+dsh plugin --profile desktop remove dsh-hide-ui
+```
+
+## Limits
+
+- Region resolution depends on the shell structure (`[data-shell-overlay]`,
+  `data-rightbar-col`) and falls back to the `_centerCol`/`_sidebarCol` class
+  suffixes. A host that changes both breaks the affected target only.
+- The Settings section expects the host's store spec shape (`create()`); if a
+  host build rejects it, the Ctrl+right-click picker still works.
+- The right sidebar exists only while open. Selecting it while closed hides the
+  other selected regions; the right sidebar joins the next hide once it is
+  open.
+- Whole-window mode hides every shell region, including both sidebars, and
+  overrides the region checkboxes while checked.
+- The wallpaper must be a body-level layer behind the shell frame, as painted
+  by appearance plugins such as `dsh-any-background`.
+- Hiding uses `visibility`, so a hidden region still occupies its grid track;
+  the cleared frame fill is what reveals the wallpaper.
+- If the host cannot resolve `react`, the Settings section is disabled; the
+  picker and the gesture keep working.
+
+## Compatibility
+
+DSH Web Client on the `0.2.x` line. The client half uses only the module loader
+contract (`window.__ModuleLoader__.load`), Cordis `ctx.effect`, `ctx.slots`,
+`ctx.locale`, and DOM APIs; it imports no Harness client package.

package/client.js

@@ -0,0 +1,912 @@
+window.__ModuleLoader__.load({
+  id: 'dsh-hide-ui',
+  factory(require) {
+    /** Attribute mirrored onto <html> while the selected regions are hidden. */
+    const ACTIVE_ATTR = 'data-dsh-hide-ui';
+    /** Marker placed on every element that is hidden while active. */
+    const TARGET_CLASS = 'dsh-hide-ui-target';
+    /** Marker placed on the shell frame so its fill does not cover the wallpaper. */
+    const FRAME_CLASS = 'dsh-hide-ui-frame';
+    const STYLE_ID = 'dsh-hide-ui-style';
+    const STORAGE_KEY = 'dsh-hide-ui:targets';
+    const NS = 'settings.hideUi';
+    const REGION_IDS = [
+      'sidebar',
+      'cards',
+      'input',
+      'chat',
+      'trajectory',
+      'produced',
+      'header',
+      'headerBar',
+      'windowMenu',
+      'rightbar',
+    ];
+    const DEFAULT_SELECTION = { shell: false, regions: ['chat'] };
+
+    /**
+     * Selector sets borrowed from dsh-any-background's surface model. The
+     * structural targets (sidebar, chat column, right sidebar, shell) and the
+     * header bar are resolved separately; everything else matches stable host
+     * data-* markers rather than CSS-module class names.
+     */
+    const TARGET_SELECTORS = {
+      cards: [
+        '[role="menu"]:not([data-dockkit-tab-menu]):not(.dsh-hide-ui-config)',
+        '[data-menu-material]:not([data-dockkit-tab-menu])',
+        '[role="listbox"]',
+        'body > [role="tree"]',
+        'body > [role="dialog"]:not([aria-modal="true"]):not(.dsh-hide-ui-config)',
+      ],
+      input: [
+        '[data-composer-card]',
+        '[data-composer-seat]',
+        '[data-cordis-panel]',
+        '[data-approval-key] > div',
+        '[data-plan-review-key] > section',
+        '[data-question-key] > section',
+      ],
+      trajectory: ['[data-conversation-composer-overlay]'],
+      produced: [
+        '[data-code-block-content]',
+        '[data-code-block-banner]',
+        '[data-composer-chip]',
+        '[data-changed-files]',
+        '[data-terminal]',
+        '[data-read]',
+        '[data-diff]',
+        '[data-context-injection-body]',
+        '[data-search]',
+        '[data-web]',
+        '[class*="_ioCard"]',
+        '[data-inspect]',
+        '[data-turn-trigger]',
+      ],
+      windowMenu: ['[data-windows-menu]'],
+      header: [
+        '[data-dsh-any-header-popover]',
+        'ul[class*="_menu"]',
+        'div[role="dialog"][class*="_panel"]:not([aria-modal="true"])',
+        '[role="menu"][class*="_denseList"]:not([class*="_portal"])',
+        '[role="tree"][class*="_menu"]',
+      ],
+    };
+
+    let React = null;
+    try {
+      React = require('react');
+    } catch (error) {
+      console.warn('dsh-hide-ui: react is unavailable; the settings section will be disabled', error);
+    }
+
+    const en = {
+      nav: 'Hide UI',
+      desc: 'Choose which surfaces the right-click gesture hides. Right-click a selected surface to hide it; right-click again, click, or press Esc to restore.',
+      sidebar: 'Sidebar',
+      sidebarHint: 'Sessions, search, and navigation.',
+      cards: 'Cards & panels',
+      cardsHint: 'Menus, popovers, and option panels.',
+      input: 'Input & controls',
+      inputHint: 'Composer, input bar, and takeover controls.',
+      chat: 'Conversation text frame',
+      chatHint: 'Messages and the scrollable text flow.',
+      trajectory: 'Trajectory view',
+      trajectoryHint: 'The trajectory main view, when active.',
+      produced: 'Produced / highlights',
+      producedHint: 'Code blocks, tool cards, diffs, and changed files.',
+      header: 'Header popovers',
+      headerHint: 'Dropdown menus opened from the header.',
+      headerBar: 'Header bar',
+      headerBarHint: 'The conversation title row and its controls.',
+      windowMenu: 'Window menu',
+      windowMenuHint: 'Application and Edit buttons in the desktop title bar.',
+      rightbar: 'Right sidebar',
+      rightbarHint: 'Trajectory panel and side panels, when open.',
+      shell: 'Entire window content',
+      shellHint: 'Hides the whole app shell. Overrides every surface above.',
+      empty: 'Select at least one surface, or the gesture stays disabled.',
+      hideNow: 'Hide now',
+      restore: 'Restore',
+      reset: 'Reset to defaults',
+      close: 'Close',
+    };
+
+    const zh = {
+      nav: '隐藏界面',
+      desc: '选择右键手势要隐藏的界面区域。在选中的区域内右键即可隐藏；再次右键、点击或按 Esc 恢复。',
+      sidebar: '左侧边栏',
+      sidebarHint: '会话列表、搜索和导航。',
+      cards: '卡片与面板',
+      cardsHint: '菜单、浮层和选项面板。',
+      input: '输入框与控件',
+      inputHint: '输入框、输入栏和接管控件。',
+      chat: '对话文本框',
+      chatHint: '消息列表和可滚动的文本区域。',
+      trajectory: '轨迹页',
+      trajectoryHint: '轨迹主视图（打开时）。',
+      produced: '产出物 / 高亮内容',
+      producedHint: '代码块、工具卡片、差异和变更文件。',
+      header: '顶栏选项',
+      headerHint: '从顶栏打开的菜单。',
+      headerBar: '标题栏',
+      headerBarHint: '会话标题行及其控件。',
+      windowMenu: '窗口菜单',
+      windowMenuHint: '桌面标题栏中的“应用”和“编辑”按钮。',
+      rightbar: '右侧边栏',
+      rightbarHint: '轨迹面板和侧面板（打开时）。',
+      shell: '整个窗口内容',
+      shellHint: '隐藏整个应用外壳，并覆盖上面的所有区域。',
+      empty: '至少选择一个区域，否则手势不会生效。',
+      hideNow: '立即隐藏',
+      restore: '恢复',
+      reset: '恢复默认',
+      close: '关闭',
+    };
+
+    /**
+     * Selected targets are hidden with visibility/opacity; the shell frame fill
+     * is cleared so the body-level wallpaper shows through vacated grid tracks.
+     */
+    const CSS = `
+.dsh-hide-ui-config {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2147483000;
+  box-sizing: border-box;
+  min-width: 300px;
+  max-width: 340px;
+  max-height: calc(100vh - 64px);
+  overflow-y: auto;
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(127, 127, 127, .35));
+  background: var(--dsw-alias-bg-layer-2, #fff);
+  color: var(--dsw-alias-label-primary, #111);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
+  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+.dsh-hide-ui-config-title {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.dsh-hide-ui-config-row {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 4px 0;
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(127, 127, 127, .28));
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-1, rgba(127, 127, 127, .04));
+  cursor: pointer;
+}
+.dsh-hide-ui-config-row:has(input:checked) {
+  border-color: var(--dsw-alias-brand-primary, #4d6bfe);
+}
+.dsh-hide-ui-config-row input {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  flex: none;
+  width: 38px;
+  height: 22px;
+  margin: 0;
+  border-radius: 99px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(127, 127, 127, .45));
+  background: var(--dsw-alias-bg-layer-2, #e5e5e5);
+  cursor: pointer;
+  transition: background .2s ease, border-color .2s ease;
+}
+.dsh-hide-ui-config-row input::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--dsw-alias-label-secondary, #888);
+  transition: transform .2s ease, background .2s ease;
+}
+.dsh-hide-ui-config-row input:checked {
+  background: var(--dsw-alias-brand-primary, #4d6bfe);
+  border-color: var(--dsw-alias-brand-primary, #4d6bfe);
+}
+.dsh-hide-ui-config-row input:checked::before {
+  transform: translateX(16px);
+  background: #fff;
+}
+.dsh-hide-ui-config-row input:disabled {
+  opacity: .45;
+  cursor: default;
+}
+.dsh-hide-ui-config-row > span {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+}
+.dsh-hide-ui-config-hint {
+  display: block;
+  font-size: 11px;
+  line-height: 1.4;
+  opacity: .65;
+}
+.dsh-hide-ui-config-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 10px;
+}
+.dsh-hide-ui-config-apply {
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--dsw-alias-brand-primary, #4d6bfe);
+  background: var(--dsw-alias-brand-primary, #4d6bfe);
+  color: #fff;
+  cursor: pointer;
+}
+.dsh-hide-ui-config-close {
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(127, 127, 127, .35));
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+html[${ACTIVE_ATTR}="on"] .${TARGET_CLASS} {
+  visibility: hidden !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+html[${ACTIVE_ATTR}="on"] .${FRAME_CLASS} {
+  background: transparent !important;
+}
+`;
+
+    function normalize(raw) {
+      const source = raw !== null && typeof raw === 'object' ? raw : {};
+      const regions = Array.isArray(source.regions)
+        ? [...new Set(source.regions.filter((id) => REGION_IDS.includes(id)))]
+        : [...DEFAULT_SELECTION.regions];
+      return { shell: source.shell === true, regions };
+    }
+
+    function loadSelection() {
+      try {
+        const raw = window.localStorage.getItem(STORAGE_KEY);
+        if (raw === null) return normalize(DEFAULT_SELECTION);
+        return normalize(JSON.parse(raw));
+      } catch {
+        return normalize(DEFAULT_SELECTION);
+      }
+    }
+
+    function storeSelection(selection) {
+      try {
+        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(selection));
+      } catch {
+        // localStorage may be unavailable in private contexts.
+      }
+    }
+
+    function apply(ctx) {
+      // A reloaded factory must not leave a previous copy of the stylesheet behind.
+      document.getElementById(STYLE_ID)?.remove();
+
+      const style = document.createElement('style');
+      style.id = STYLE_ID;
+      style.dataset.plugin = 'dsh-hide-ui';
+      style.textContent = CSS;
+      (document.head ?? document.documentElement).appendChild(style);
+
+      let selection = loadSelection();
+      let active = false;
+      let focusBefore = null;
+      /** Swallow the rest of the click that restored the selected regions. */
+      let swallowLeft = false;
+      let swallowLeftTimer = 0;
+      /** Lightweight configuration popover opened with Ctrl+right-click. */
+      let configPanel = null;
+
+      function fallbackT(key) {
+        return en[key] ?? key;
+      }
+
+      function t(key) {
+        try {
+          if (ctx.locale !== undefined && typeof ctx.locale.bind === 'function') {
+            return ctx.locale.bind(NS)(key);
+          }
+        } catch {
+          // Fall through to the bundled English copy.
+        }
+        return fallbackT(key);
+      }
+
+      function clearSwallowLeft() {
+        swallowLeft = false;
+        if (swallowLeftTimer !== 0) {
+          window.clearTimeout(swallowLeftTimer);
+          swallowLeftTimer = 0;
+        }
+      }
+
+      function beginSwallowLeft() {
+        swallowLeft = true;
+        if (swallowLeftTimer !== 0) window.clearTimeout(swallowLeftTimer);
+        swallowLeftTimer = window.setTimeout(clearSwallowLeft, 700);
+      }
+
+      /**
+       * Resolve the layout columns from the shell structure, the way
+       * dsh-any-background does: the frame's children are [sidebar, center,
+       * rightbar?, overlay], so the columns are read by position around the
+       * stable `[data-shell-overlay]` and `data-rightbar-col` anchors instead of
+       * CSS-module suffixes that a host build can rename.
+       */
+      function discoverParts() {
+        const overlay = document.querySelector('[data-shell-overlay]');
+        const frame =
+          overlay?.parentElement ??
+          document.querySelector('[class*="_frame"]') ??
+          document.getElementById('root');
+        if (frame === null) return { frame: null, center: null, sidebar: null, rightbar: null };
+
+        const children = frame.children;
+        let overlayIndex = -1;
+        let rightbar = null;
+        let rightIndex = -1;
+        for (let index = 0; index < children.length; index += 1) {
+          const child = children[index];
+          if (child === overlay) overlayIndex = index;
+          else if (child instanceof HTMLElement && child.dataset.rightbarCol !== undefined) {
+            rightbar = child;
+            rightIndex = index;
+          }
+        }
+
+        let sidebar = null;
+        let center = null;
+        if (rightIndex >= 0) {
+          sidebar = children[rightIndex - 2] ?? null;
+          center = children[rightIndex - 1] ?? null;
+        } else if (overlayIndex >= 0) {
+          sidebar = children[overlayIndex - 3] ?? null;
+          center = children[overlayIndex - 2] ?? null;
+        }
+        return { frame, center, sidebar, rightbar };
+      }
+
+      function findFrame() {
+        return discoverParts().frame ?? document.getElementById('root');
+      }
+
+      function resolveTargetElements(id) {
+        const parts = discoverParts();
+
+        if (id === 'sidebar') {
+          const element = document.querySelector('[class*="_sidebarCol"]') ?? parts.sidebar;
+          return element === null ? [] : [element];
+        }
+        if (id === 'rightbar') {
+          const element =
+            document.querySelector('[data-rightbar-col]') ??
+            document.querySelector('[data-sidebar-right-panel]') ??
+            parts.rightbar;
+          return element === null ? [] : [element];
+        }
+        if (id === 'shell') {
+          const element = parts.frame ?? document.getElementById('root');
+          return element === null ? [] : [element];
+        }
+        if (id === 'chat') {
+          // Only the text flow, never the centre column: the column also owns
+          // the header bar and composer, which have their own toggles.
+          const flow = document.querySelector('[data-chat-flow]');
+          if (flow !== null) return [flow];
+          const content = document.querySelector('[data-conversation-content]');
+          if (content !== null) return [content];
+          return [];
+        }
+        if (id === 'headerBar') {
+          const anchor = document.querySelector('[data-slot^="conversation.session.header"]');
+          const bar =
+            anchor?.closest('header') ??
+            anchor?.querySelector('header') ??
+            anchor ??
+            document.querySelector('[class*="_headerBar"]');
+          return bar === null ? [] : [bar];
+        }
+
+        const seen = new Set();
+        const elements = [];
+        for (const selector of TARGET_SELECTORS[id] ?? []) {
+          for (const element of document.querySelectorAll(selector)) {
+            if (!seen.has(element)) {
+              seen.add(element);
+              elements.push(element);
+            }
+          }
+        }
+        return elements;
+      }
+
+      function selectedElements() {
+        if (selection.shell) {
+          const elements = resolveTargetElements('shell');
+          // The desktop window menu lives outside the shell frame, so "entire
+          // window content" has to claim it explicitly.
+          const menu = document.querySelector('[data-windows-menu]');
+          if (menu !== null && !elements.includes(menu)) elements.push(menu);
+          return elements;
+        }
+
+        const seen = new Set();
+        const elements = [];
+        for (const id of selection.regions) {
+          for (const element of resolveTargetElements(id)) {
+            if (!seen.has(element)) {
+              seen.add(element);
+              elements.push(element);
+            }
+          }
+        }
+        return elements;
+      }
+
+      function markTargets() {
+        for (const element of selectedElements()) element.classList.add(TARGET_CLASS);
+        if (!selection.shell) {
+          const frame = findFrame();
+          if (frame !== null) frame.classList.add(FRAME_CLASS);
+        }
+      }
+
+      function unmarkTargets() {
+        for (const element of document.querySelectorAll(`.${TARGET_CLASS}`)) {
+          element.classList.remove(TARGET_CLASS);
+        }
+        for (const element of document.querySelectorAll(`.${FRAME_CLASS}`)) {
+          element.classList.remove(FRAME_CLASS);
+        }
+      }
+
+      function setActive(next) {
+        if (next === active) return;
+
+        if (next) {
+          const elements = selectedElements();
+          if (elements.length === 0) return;
+          active = true;
+          markTargets();
+
+          // A hidden composer must not keep receiving keystrokes.
+          const focused = document.activeElement;
+          if (focused !== null && elements.some((element) => element.contains(focused))) {
+            if (typeof focused.blur === 'function') {
+              focusBefore = focused;
+              focused.blur();
+            }
+          }
+          document.documentElement.setAttribute(ACTIVE_ATTR, 'on');
+        } else {
+          active = false;
+          document.documentElement.removeAttribute(ACTIVE_ATTR);
+          unmarkTargets();
+
+          const focused = focusBefore;
+          focusBefore = null;
+          if (focused !== null && focused.isConnected && typeof focused.focus === 'function') {
+            try {
+              focused.focus({ preventScroll: true });
+            } catch {
+              // The element may have unmounted between activation and restore.
+            }
+          }
+        }
+      }
+
+      function updateSelection(next) {
+        selection = normalize(next);
+        storeSelection(selection);
+        syncConfigInputs();
+
+        if (!active) return;
+        unmarkTargets();
+        if (selectedElements().length === 0) {
+          setActive(false);
+          return;
+        }
+        // Keep the active attribute and re-mark the new target set.
+        markTargets();
+      }
+
+      function syncConfigInputs() {
+        if (configPanel === null) return;
+        const shellInput = configPanel.querySelector('[data-region="shell"]');
+        const shell = shellInput !== null && shellInput.checked;
+        for (const input of configPanel.querySelectorAll('[data-region]')) {
+          if (input.dataset.region === 'shell') {
+            input.checked = selection.shell;
+          } else {
+            input.checked = selection.regions.includes(input.dataset.region);
+            input.disabled = shell;
+          }
+        }
+      }
+
+      function closeConfig() {
+        if (configPanel === null) return;
+        configPanel.remove();
+        configPanel = null;
+      }
+
+      function openConfig() {
+        closeConfig();
+
+        const panel = document.createElement('div');
+        panel.className = 'dsh-hide-ui-config';
+        panel.setAttribute('role', 'dialog');
+        panel.setAttribute('aria-label', t('nav'));
+
+        const title = document.createElement('div');
+        title.className = 'dsh-hide-ui-config-title';
+        title.textContent = t('nav');
+        panel.appendChild(title);
+
+        const inputs = new Map();
+        const addRow = (id, labelText, hintText) => {
+          const row = document.createElement('label');
+          row.className = 'dsh-hide-ui-config-row';
+
+          const input = document.createElement('input');
+          input.type = 'checkbox';
+          input.dataset.region = id;
+          input.addEventListener('change', () => {
+            const regions = REGION_IDS.filter((regionId) => inputs.get(regionId).checked);
+            updateSelection({ shell: inputs.get('shell').checked, regions });
+          });
+          inputs.set(id, input);
+
+          const text = document.createElement('span');
+          const label = document.createElement('span');
+          label.textContent = labelText;
+          const hint = document.createElement('span');
+          hint.className = 'dsh-hide-ui-config-hint';
+          hint.textContent = hintText;
+          text.appendChild(label);
+          text.appendChild(hint);
+
+          row.appendChild(input);
+          row.appendChild(text);
+          panel.appendChild(row);
+        };
+
+        for (const id of REGION_IDS) addRow(id, t(id), t(`${id}Hint`));
+        addRow('shell', t('shell'), t('shellHint'));
+
+        const actions = document.createElement('div');
+        actions.className = 'dsh-hide-ui-config-actions';
+
+        const apply = document.createElement('button');
+        apply.type = 'button';
+        apply.className = 'dsh-hide-ui-config-apply';
+        apply.textContent = t('hideNow');
+        apply.addEventListener('click', () => {
+          if (selectedElements().length === 0) return;
+          setActive(true);
+          closeConfig();
+        });
+        actions.appendChild(apply);
+
+        if (active) {
+          const restore = document.createElement('button');
+          restore.type = 'button';
+          restore.className = 'dsh-hide-ui-config-close';
+          restore.textContent = t('restore');
+          restore.addEventListener('click', () => {
+            setActive(false);
+            closeConfig();
+          });
+          actions.appendChild(restore);
+        }
+
+        const close = document.createElement('button');
+        close.type = 'button';
+        close.className = 'dsh-hide-ui-config-close';
+        close.textContent = t('close');
+        close.addEventListener('click', closeConfig);
+        actions.appendChild(close);
+        panel.appendChild(actions);
+
+        document.body.appendChild(panel);
+        configPanel = panel;
+        syncConfigInputs();
+
+      }
+
+      function consume(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+
+      /** Whether a right-click belongs to the hide gesture. */
+      function ownsRightClick(target) {
+        if (active) return true;
+        // The conversation column is the gesture home: a sidebar-only or
+        // header-bar-only selection still hides when the user right-clicks the
+        // main area, instead of requiring a click on the exact target.
+        const parts = discoverParts();
+        if (parts.center !== null && parts.center.contains(target)) return true;
+        return selectedElements().some((element) => element.contains(target));
+      }
+
+      /**
+       * Right-click inside a selected region toggles the hidden state; once
+       * hidden, a right-click anywhere restores. Left-clicking or Escape while
+       * hidden also restores, and the restoring click is swallowed. Alt+right-
+       * click opens the target picker without hiding anything.
+       */
+      function onPointerDown(event) {
+        if (configPanel !== null) {
+          if (configPanel.contains(event.target)) return;
+          closeConfig();
+          if (event.button === 0 || event.button === 2) consume(event);
+          return;
+        }
+
+        if (event.button === 2) {
+          if (event.ctrlKey && !event.shiftKey) {
+            consume(event);
+            openConfig();
+            return;
+          }
+          if (event.shiftKey || !ownsRightClick(event.target)) return;
+          consume(event);
+          setActive(!active);
+          return;
+        }
+
+        if (active && event.button === 0) {
+          // If a host re-render removed the markers, do not swallow the click.
+          if (document.querySelector(`.${TARGET_CLASS}`) === null) {
+            setActive(false);
+            return;
+          }
+          consume(event);
+          setActive(false);
+          beginSwallowLeft();
+        }
+      }
+
+      function onContextMenu(event) {
+        if (configPanel !== null || event.ctrlKey) {
+          consume(event);
+          return;
+        }
+        if (event.shiftKey || !ownsRightClick(event.target)) return;
+        consume(event);
+      }
+
+      /**
+       * Own the rest of the gesture as well: compatibility mouse events fire
+       * after pointerdown, and the restore click must not reach a control that
+       * just became visible again.
+       */
+      function onMouseEvent(event) {
+        if (configPanel !== null) {
+          if (configPanel.contains(event.target)) return;
+          if (event.button === 0 || event.button === 2) consume(event);
+          return;
+        }
+
+        if (event.button === 2) {
+          if (event.ctrlKey) {
+            consume(event);
+            return;
+          }
+          if (event.shiftKey || !ownsRightClick(event.target)) return;
+          consume(event);
+          return;
+        }
+
+        if (swallowLeft && event.button === 0) {
+          consume(event);
+          if (event.type === 'click') clearSwallowLeft();
+        }
+      }
+
+      function onKeyDown(event) {
+        if (configPanel !== null) {
+          if (event.key === 'Escape' || event.key === 'Esc') {
+            consume(event);
+            closeConfig();
+          }
+          return;
+        }
+        if (!active) return;
+        if (event.key === 'Escape' || event.key === 'Esc') {
+          consume(event);
+          setActive(false);
+        }
+      }
+
+      function SettingsSection(props) {
+        const [value, setValue] = React.useState(loadSelection);
+        const translate = typeof props.t === 'function' ? props.t : t;
+
+        const update = (next) => {
+          const normalized = normalize(next);
+          setValue(normalized);
+          updateSelection(normalized);
+        };
+
+        const toggleRegion = (id) => {
+          const regions = value.regions.includes(id)
+            ? value.regions.filter((region) => region !== id)
+            : [...value.regions, id];
+          update({ ...value, regions });
+        };
+
+        const row = (id, label, hint, disabled) => React.createElement(
+          'label',
+          {
+            key: id,
+            className: 'dsh-hide-ui-config-row',
+            style: {
+              opacity: disabled ? 0.5 : 1,
+              cursor: disabled ? 'default' : 'pointer',
+            },
+          },
+          [
+            React.createElement('input', {
+              key: 'input',
+              type: 'checkbox',
+              checked: value.regions.includes(id),
+              disabled,
+              onChange: () => toggleRegion(id),
+              style: { marginTop: 3, accentColor: 'var(--dsw-alias-brand-primary, #4d6bfe)' },
+            }),
+            React.createElement(
+              'span',
+              { key: 'text', style: { display: 'flex', flexDirection: 'column', gap: 2 } },
+              [
+                React.createElement('span', { key: 'label', style: { fontWeight: 500 } }, label),
+                React.createElement(
+                  'span',
+                  { key: 'hint', style: { fontSize: 12, lineHeight: 1.45, opacity: 0.65 } },
+                  hint,
+                ),
+              ],
+            ),
+          ],
+        );
+
+        return React.createElement(
+          'div',
+          { style: { display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 640, padding: '4px 0' } },
+          [
+            React.createElement(
+              'p',
+              { key: 'description', style: { margin: 0, fontSize: 13, lineHeight: 1.55, opacity: 0.8 } },
+              translate('desc'),
+            ),
+            React.createElement('div', { key: 'regions', style: { display: 'flex', flexDirection: 'column', gap: 10 } }, [
+              ...REGION_IDS.map((id) => row(id, translate(id), translate(`${id}Hint`), value.shell)),
+            ]),
+            row('shell', translate('shell'), translate('shellHint'), false),
+            !value.shell && value.regions.length === 0
+              ? React.createElement(
+                'p',
+                {
+                  key: 'empty',
+                  style: { margin: 0, fontSize: 12, color: 'var(--dsw-alias-state-error-primary, #d33)' },
+                },
+                translate('empty'),
+              )
+              : null,
+            React.createElement('div', { key: 'actions', style: { display: 'flex', gap: 8 } }, [
+              React.createElement(
+                'button',
+                {
+                  key: 'reset',
+                  type: 'button',
+                  onClick: () => update({ shell: false, regions: ['chat'] }),
+                  style: {
+                    font: 'inherit',
+                    fontSize: 12,
+                    padding: '5px 10px',
+                    borderRadius: 6,
+                    border: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.35))',
+                    background: 'transparent',
+                    color: 'inherit',
+                    cursor: 'pointer',
+                  },
+                },
+                translate('reset'),
+              ),
+            ]),
+          ],
+        );
+      }
+
+      function registerSettings() {
+        if (React === null) {
+          console.warn('dsh-hide-ui: settings section disabled because React could not be resolved');
+          return;
+        }
+        if (ctx.slots === undefined || ctx.locale === undefined) {
+          console.warn('dsh-hide-ui: settings section disabled because slots/locale are unavailable');
+          return;
+        }
+
+        try {
+          ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-hide-ui: i18n');
+        } catch (error) {
+          console.warn('dsh-hide-ui: locale registration failed', error);
+        }
+
+        try {
+          // The settings slot expects a store spec with create(), not a bare
+          // snapshot: the host calls create() once and binds useStore/actions.
+          const emptyStore = {
+            create: () => ({
+              getSnapshot: () => ({ selection: loadSelection() }),
+              subscribe: () => () => {},
+              actions: {},
+            }),
+          };
+          ctx.slots.inject('settings.section', () => ctx.slots.register({
+            name: 'settings.section',
+            id: 'dsh-hide-ui',
+            order: 70,
+            label: () => ctx.locale.bind(NS)('nav'),
+            locale: NS,
+            store: emptyStore,
+            inject: () => ({}),
+          }, SettingsSection));
+        } catch (error) {
+          console.warn('dsh-hide-ui: settings section registration failed', error);
+        }
+      }
+
+      window.addEventListener('pointerdown', onPointerDown, true);
+      window.addEventListener('mousedown', onMouseEvent, true);
+      window.addEventListener('mouseup', onMouseEvent, true);
+      window.addEventListener('pointerup', onMouseEvent, true);
+      window.addEventListener('click', onMouseEvent, true);
+      window.addEventListener('auxclick', onMouseEvent, true);
+      window.addEventListener('contextmenu', onContextMenu, true);
+      window.addEventListener('keydown', onKeyDown, true);
+
+      registerSettings();
+
+      ctx.effect(() => () => {
+        window.removeEventListener('pointerdown', onPointerDown, true);
+        window.removeEventListener('mousedown', onMouseEvent, true);
+        window.removeEventListener('mouseup', onMouseEvent, true);
+        window.removeEventListener('pointerup', onMouseEvent, true);
+        window.removeEventListener('click', onMouseEvent, true);
+        window.removeEventListener('auxclick', onMouseEvent, true);
+        window.removeEventListener('contextmenu', onContextMenu, true);
+        window.removeEventListener('keydown', onKeyDown, true);
+        closeConfig();
+        clearSwallowLeft();
+        setActive(false);
+        style.remove();
+      }, 'dsh-hide-ui: hide UI regions');
+    }
+
+    return { name: 'dsh-hide-ui', inject: ['slots', 'locale'], apply };
+  },
+});

package/cordis.patch.yml

@@ -0,0 +1,5 @@
+# Bundle patch for dsh-hide-ui. The Node half is intentionally inert; the
+# browser half (client.js) owns the right-click peek gesture and its styles.
+- insert:
+    - id: dsh-hide-ui
+      name: dsh-hide-ui

package/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Hide UI peek">
+  <rect width="64" height="64" rx="14" fill="#1f2430"/>
+  <path d="M10 32c6-9 13-13 22-13s16 4 22 13c-6 9-13 13-22 13S16 41 10 32z" fill="#e8ecf7"/>
+  <circle cx="32" cy="32" r="7" fill="#1f2430"/>
+  <path d="M14 50 50 14" stroke="#4d6bfe" stroke-width="6" stroke-linecap="round"/>
+</svg>

package/index.js

@@ -0,0 +1,7 @@
+/**
+ * Node half of the dsh-hide-ui bundle.
+ *
+ * The bundle exists to load the browser module declared by `dsh.client`; there
+ * is no server-side work, so this plugin row deliberately does nothing.
+ */
+export function apply() {}

package/locale/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Hide UI Surfaces",
+    "description": "Right-click to hide selected DSH surfaces: sidebar, cards, input, conversation, trajectory, produced content, header, right sidebar, or the whole shell."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "隐藏界面区域",
+    "description": "右键隐藏选中的界面区域：侧边栏、卡片、输入框、对话、轨迹、产出内容、顶栏、右侧边栏或整个窗口。"
+  }
+}

package/package.json

@@ -1,6 +1,39 @@
 {
   "name": "dsh-hide-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.4",
+  "description": "Right-click to hide selected DeepSeek Harness surfaces (sidebar, cards, input, conversation, trajectory, produced content, header, right sidebar) and reveal the background wallpaper.",
+  "keywords": [
+    "deepseek-harness",
+    "dsh",
+    "dsh-plugin",
+    "wallpaper",
+    "peek"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./locale/*.json": "./locale/*.json",
+    "./icon": "./icon.svg"
+  },
+  "files": [
+    "index.js",
+    "client.js",
+    "cordis.patch.yml",
+    "locale/*.json",
+    "icon.svg",
+    "README.md",
+    "LICENSE"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "immediately": true,
+      "inject": []
+    }
+  }
+}