diff --git a/.dsh-version.json b/.dsh-version.json
index 18e0e67..a732737 100644
--- a/.dsh-version.json
+++ b/.dsh-version.json
@@ -87,7 +87,7 @@
       ]
     },
     "dsh-audio": {
-      "version": "0.1.0-alpha.7",
+      "version": "0.1.0-alpha.8",
       "rows": [
         "audio"
       ],
@@ -95,7 +95,7 @@
       "role": "Audio + Media: the `audio` tab draws WAV/AIFF/FLAC as a waveform (one row per channel, an adaptive ruler, a min/max envelope with the RMS core, zoom down to samples, selection, playback on the audio clock), and the left column's **Media** panel (alpha.5, one row above Plugins) scans the conversation workspace for every audio, image, video and GIF file it can reach - bounded, grouped by kind, previewed inline through the harness's own `/api/file` route, and handed to the tab that owns the type on one click. It is about files only: no microphone, no device enumeration and no output routing. Client-only, read in 2 MiB windows. See packages/dsh-audio/README.md.",
       "uses": [
         "dsh-rightbar",
-        "dsh-modal (the pack's shared dialog surface: the panel's seat opens it lazily through ctx.get and never injects it, so a profile without it draws the panel inline as a page instead)",
+        "dsh-modal (the pack's shared dialog surface: the panel's seat opens it lazily through ctx.get and never injects it, so a profile without it draws the panel inline as a page instead; the package also publishes the `media` service the left bar's Media button opens, which keeps the conversation in the main column)",
         "@deepseek-ai/dsh-api-workspace-files (the workspaceFiles remote: readBytes windows, list, stat)"
       ]
     },
@@ -296,7 +296,7 @@
       ]
     },
     "dsh-modal": {
-      "version": "0.1.0-alpha.3",
+      "version": "0.1.0-alpha.4",
       "rows": [
         "modal"
       ],
@@ -304,10 +304,10 @@
         "modals"
       ],
       "rowOverrides": [],
-      "role": "Modal: the pack's shared dialog surface, published as the `modals` service - `open` / `alert` / `confirm` / `prompt` with async submit work that keeps the dialog open, plus a rich `content` dialog whose mask click deliberately does not close it. See packages/dsh-modal/README.md."
+      "role": "Modal: the pack's shared dialog surface, published as the `modals` service - `open` / `alert` / `confirm` / `prompt` with async submit work that keeps the dialog open, plus a rich `content` dialog whose mask click deliberately does not close it unless the caller opts in with `dismissOnMask`. See packages/dsh-modal/README.md."
     },
     "dsh-skills": {
-      "version": "0.1.0-alpha.3",
+      "version": "0.1.0-alpha.4",
       "rows": [
         "skills"
       ],
@@ -316,7 +316,7 @@
         "@deepseek-ai/dsh-skill (ctx.skills, the host skill registry - NOT injected, resolved lazily per request)",
         "dsh-modal (the shared dialog surface, opened in its rich `content` form; resolved lazily so a profile without it still loads)"
       ],
-      "role": "Skills browser: one header seat opens a modal listing every skill the harness loads for this conversation, with three routes to read and save the markdown behind it. The client names a skill, never a path. See packages/dsh-skills/README.md."
+      "role": "Skills browser: the left bar's Skills button (and, in a profile without dsh-themes, one header seat) opens a modal listing every skill the harness loads for this conversation, closable by clicking outside it, with three routes to read and save the markdown behind it. The client names a skill, never a path. See packages/dsh-skills/README.md."
     },
     "dsh-ui-state": {
       "version": "0.1.0-alpha.2",
@@ -381,7 +381,7 @@
       ]
     },
     "dsh-themes": {
-      "version": "0.1.0-alpha.30",
+      "version": "0.1.0-alpha.31",
       "rows": [
         "themes"
       ],
@@ -391,7 +391,7 @@
         "@deepseek-ai/dsh-session-log-export",
         "dsh-ui-state (the uiState service, resolved lazily through ctx.get, for the durable page zoom and extension theme)"
       ],
-      "role": "Themes and header dress: the conversation header's own controls (page zoom, Screenshot, Themes, session-log download), the Nord/Monokai/Hacker/Cyber palettes, and the pack's appearance overrides - Markdown paper, the branding band, the band lines and the top row's centre, the account menu's Feedback row removed, and the right bar's resize seam. See packages/dsh-themes/README.md.",
+      "role": "Themes and header dress: the conversation header's own controls (page zoom, Screenshot, Themes, session-log download), the Nord/Monokai/Hacker/Cyber palettes, and the pack's appearance overrides - Markdown paper, the branding band, the band lines and the top row's centre, the account menu's Feedback row removed, the right bar's resize seam, and the band's four action buttons (Settings, Plugins, Media, Skills), where Media opens dsh-audio's `media` dialog instead of swapping the main column and the header's duplicate Skills seat is hidden. See packages/dsh-themes/README.md.",
       "overrides": [
         "markdown paper: re-declares ui-theme's light declarations on the rendered Markdown root, so the page stays white in the dark theme",
         "markdown chrome: hides the preview header's viewer menu on Markdown tabs (the page has exactly one renderer; the editor's Edit button is the way back to editing)",
diff --git a/assets/vncode-banner3.png b/assets/vncode-banner3.png
index aea9a87..da0977d 100644
Binary files a/assets/vncode-banner3.png and b/assets/vncode-banner3.png differ
diff --git a/packages/dsh-audio/README.md b/packages/dsh-audio/README.md
index fcca964..c93f4b4 100644
--- a/packages/dsh-audio/README.md
+++ b/packages/dsh-audio/README.md
@@ -1,4 +1,4 @@
-# dsh-audio (alpha.7)
+# dsh-audio (alpha.8)
 
 **Audio opens as a waveform — and the left column's Media panel lists every media file the conversation can reach.** The right bar's `audio` tab covers **WAV/RIFF, AIFF/AIFC and FLAC**, instead of the preview's bare `<audio>` element. The **Media** panel is a **Media** row in the left column's global-panel list (`sidebar.panellist`) at `order: -1`, above Plugins: it scans the workspace for audio, image, video and GIF files and previews them in place. Client-only: bytes come from the harness's `workspaceFiles` remote, so it ships no route and no host state; `lib/index.js` is one no-op row.
 
@@ -13,6 +13,8 @@
 
 The left column's row is **Media**, not Audio, and it opens one dialog: the library. The panel is a **root-scoped** seat — the harness renders `main` with no props — so the conversation it browses is found the way the harness itself finds it: the session the main view **retains** (`retainedBy.mainView`), which survives a global panel being shown. Without that lookup the dialog had no session and could only say "open a conversation"; it listed nothing.
 
+The package also **publishes the `media` service** (`{ open() }`, through `ctx.reflect.provide`). It exists because the shell's way to reach the seat is `layout.selectPanel('media')`, which swaps the main column from the conversation to the seat underneath — a modal button that changes the background on its way in. The left bar's Media button calls `media.open()` instead, so the dialog opens over the chat; and the seat **hands the column straight back** once its dialog is up, so even the sidebar row's path leaves nothing swapped behind. A profile with no dialog service still draws the panel inline (the seat's fallback), and a profile with no `media` service keeps the old selectPanel path.
+
 - **One view, and it is the files.** The dialog lists the media in this conversation's workspace: **images, GIFs, audio and video**, grouped in that order with a count per group. The walk is **bounded and says so** — depth 5, 120 directories, 120 files, `node_modules`/`.git`/`.vncode`/`dist`/`vendor`/`__pycache__` and their kin skipped — and a cut list is labelled `(list cut)` in the header rather than passed off as complete. Every listing comes from the harness's own `workspaceFiles.list` under the session id, so the host decides what is readable; the panel never names a path it was not given. A refused listing is shown as **the reason it was refused**, never as an empty workspace, and a genuinely empty one says **"No audio, image, video or GIF files were found in this conversation's workspace"** — the sentence names what Rescan scans, because "no media" and "could not read" are different answers. The panel carries a **Close** in its own bar, beside Rescan, as well as the frame's own ×.
 - **The pick previews in place.** An image draws as an `<img>`, a GIF too, a video as a `<video controls>`, audio as an `<audio controls>`, all through the harness's authenticated `/api/file?path=` route against the file's **absolute path** (one `stat` per pick, never per row). **Open in a tab** then hands the `dsh-resource://file/session/<id>/<path>` address to the right bar's registry, so a WAV lands on this package's own waveform, a PNG on dsh-image's zoom, an MP4 on dsh-video's player, and a format this pack claims nowhere still reaches the shipped preview.
 
diff --git a/packages/dsh-audio/lib/client.js b/packages/dsh-audio/lib/client.js
index 7d4ff20..509936d 100644
--- a/packages/dsh-audio/lib/client.js
+++ b/packages/dsh-audio/lib/client.js
@@ -68,8 +68,10 @@
  *    It is about FILES, not about the machine. This package enumerates no
  *    audio devices, opens no microphone, plays no test tone and routes no
  *    output: the console that did all four (alpha.3 to alpha.6) was removed,
- *    and nothing here is left behind for it - no service, no storage key, no
- *    child surface. The player still creates the one AudioContext it needs.
+ *    and nothing is left behind for it - no storage key, no child surface. The
+ *    player still creates the one AudioContext it needs. What the Media panel
+ *    DOES publish is the `media` service, so the left bar can open its dialog
+ *    without swapping the conversation out for the seat underneath.
  *
  * Module-table format of every client bundle here; no build step.
  */
@@ -93,7 +95,7 @@ window.__ModuleLoader__.load({
     /** The tab kind this package owns. */
     const KIND = 'audio'
     /** Version marker shown in the toolbar, so a loaded bundle is easy to verify. */
-    const PLUGIN_VERSION = '0.1.0-alpha.7'
+    const PLUGIN_VERSION = '0.1.0-alpha.8'
     /** Address grammar owned by @deepseek-ai/dsh-util-workspace-path. */
     const FILE_PREFIX = 'dsh-resource://file/'
     const SESSION_SEGMENT = 'session/'
@@ -3148,6 +3150,12 @@ window.__ModuleLoader__.load({
     const SIDEBAR_SERVICE = 'sidebarRight'
     /** The pack's shared dialog surface (dsh-modal), resolved lazily at click time. */
     const MODAL_SERVICE = 'modals'
+    /**
+     * The client service this package PUBLISHES: `media.open()` opens the Media
+     * dialog without selecting the panel behind it, which is how the left bar's
+     * Media button stays a modal button instead of a page switch.
+     */
+    const MEDIA_SERVICE = 'media'
 
     // ---------------------------------------------------------------------
     // The services this file resolves lazily, and the sentence one error becomes
@@ -3395,14 +3403,67 @@ window.__ModuleLoader__.load({
       }
     }
 
+    /**
+     * Open the Media dialog through the pack's shared surface.
+     *
+     * `sessionOf` is a FUNCTION, not a string: the service re-renders a rich
+     * dialog's content, so it has to read the CURRENT session each time instead
+     * of the one captured when the button was pressed - a session switch must
+     * not reopen the dialog on the conversation it was opened from.
+     *
+     * @param sessionOf - `() => string`, the session the panel browses.
+     * @param onOpenFailure - told when a file could not be handed to its tab.
+     * @returns the dialog's pending promise, or null when this profile has no
+     *   dialog service (or it refused to open).
+     */
+    function openMediaDialog(sessionOf, onOpenFailure) {
+      const modals = serviceNow(MODAL_SERVICE)
+      if (modals === null || modals === undefined || typeof modals.open !== 'function') return null
+      try {
+        return modals.open({
+          title: 'Media',
+          size: 'lg',
+          content: (helpers) => {
+            const sessionId = sessionOf()
+            return h(MediaPanel, {
+              sessionId,
+              close: helpers.close,
+              onOpen: (item) => {
+                const failure = openMediaInBar(sessionId, item)
+                if (failure === '') helpers.close(null)
+                else if (typeof onOpenFailure === 'function') onOpenFailure(failure)
+              },
+            })
+          },
+        })
+      } catch (err) {
+        return null
+      }
+    }
+
+    /**
+     * The client service the left bar's Media button drives: the dialog, and
+     * nothing else. `layout.selectPanel('media')` is deliberately NOT used - it
+     * would swap the main column from the conversation to the seat below, which
+     * is exactly what a modal button must not do.
+     *
+     * @returns `{ open() }`, where open() answers whether a dialog was opened.
+     */
+    function mediaService() {
+      return {
+        open: () => openMediaDialog(() => sessionIdFor({}), () => {}) !== null,
+      }
+    }
+
     /**
      * The main column's seat: the panel the sidebar row selects, and the only
      * door to the Media panel.
      *
-     * The dialog is opened ON MOUNT, which is what makes the left-bar row behave
-     * like a modal button. The seat underneath is not a dead end either: it
-     * carries its own "Open the Media panel" control, so a dialog dismissed
-     * without the column being handed back can always be reopened.
+     * The dialog is opened ON MOUNT and the column is handed straight back, so
+     * the row behaves like a modal button even though the shell opened a panel
+     * to reach it. The seat underneath is not a dead end either: it carries its
+     * own "Open the Media panel" control, so a dialog dismissed without the
+     * column being handed back can always be reopened.
      */
     function MediaSeat(props) {
       const inline = props !== null && props !== undefined && props.inline === true
@@ -3423,28 +3484,13 @@ window.__ModuleLoader__.load({
       const modalsRef = useRef(modals)
       modalsRef.current = modals
       useEffect(() => {
-        const service = modalsRef.current
-        if (!hasModal || service === null) return undefined
+        if (!hasModal) return undefined
         let live = true
-        let pending = null
-        try {
-          pending = service.open({
-            title: 'Media',
-            size: 'lg',
-            content: (helpers) =>
-              h(MediaPanel, {
-                sessionId: sessionRef.current,
-                close: helpers.close,
-                onOpen: (item) => {
-                  const failure = openMediaInBar(sessionRef.current, item)
-                  if (failure === '') helpers.close(null)
-                },
-              }),
-          })
-        } catch (err) {
-          restorePanel()
-          return undefined
-        }
+        const pending = openMediaDialog(() => sessionRef.current, () => {})
+        // Hand the column back ONCE THE DIALOG IS OPEN, not when it closes: the
+        // dialog is the surface, and leaving the chat swapped out for the seat
+        // is the behaviour this button was reported for.
+        restorePanel()
         if (pending !== null && pending !== undefined && typeof pending.then === 'function') {
           pending.then(
             () => {
@@ -4058,6 +4104,12 @@ window.__ModuleLoader__.load({
           () => ctx.slots.inject(MAIN_SLOT, () => ctx.slots.register({ name: MAIN_SLOT, key: PANEL_ID, inject: () => ({}) }, MediaSeat)),
           'dsh-audio: the Media panel seat',
         )
+        // The `media` service: the left bar opens the dialog with it instead of
+        // selecting the seat's panel. Optional on the context (a profile or a
+        // harness build without `reflect.provide` keeps the row's own path).
+        if (ctx.reflect !== undefined && ctx.reflect !== null && typeof ctx.reflect.provide === 'function') {
+          ctx.effect(() => ctx.reflect.provide(MEDIA_SERVICE, mediaService()), 'dsh-audio: the media dialog service')
+        }
         ctx.logger?.debug?.('[dsh-audio] client half active (' + PLUGIN_VERSION + ')')
       } catch (err) {
         // eslint-disable-next-line no-console
diff --git a/packages/dsh-audio/package.json b/packages/dsh-audio/package.json
index c4ad525..8a5f95c 100644
--- a/packages/dsh-audio/package.json
+++ b/packages/dsh-audio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dsh-audio",
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.0-alpha.8",
   "description": "Audio: WAV/AIFF/FLAC as a waveform (one row per channel, adaptive ruler, RMS core, sample-level zoom, selection, audio-clock playback) plus the MEDIA panel in the left column - a bounded scan of every audio, image, video and GIF file the conversation can reach, with an inline preview and a one-click hand-off to the tab that owns the type. Client-only, read in 2 MiB windows, about files only: no microphone, no device enumeration, no output routing.",
   "type": "module",
   "main": "lib/index.js",
diff --git a/packages/dsh-docker/lib/tools.js b/packages/dsh-docker/lib/tools.js
index 173c8af..51cb7ea 100644
--- a/packages/dsh-docker/lib/tools.js
+++ b/packages/dsh-docker/lib/tools.js
@@ -65,11 +65,6 @@ function table(headers, rows) {
   return [line(headers), ...rows.map(line)].join('\n')
 }
 
-/** One container row, as a line of the state answer. */
-function containerLine(row) {
-  return row.name + (row.running ? '' : ' (' + row.state + ')') + '  ' + row.image + (row.ports === '' ? '' : '  ' + row.ports)
-}
-
 /** The engine's one-line identity. */
 function engineLine(info) {
   const version = info.serverVersion !== '' ? info.serverVersion : info.cliVersion
diff --git a/packages/dsh-modal/README.md b/packages/dsh-modal/README.md
index 50459f0..8a3f6bd 100644
--- a/packages/dsh-modal/README.md
+++ b/packages/dsh-modal/README.md
@@ -1,4 +1,4 @@
-# dsh-modal (alpha.3)
+# dsh-modal (alpha.4)
 
 **The pack's shared dialog surface** for the web GUI: a client-service plugin whose browser half mounts one body-level overlay and provides the **`modals`** service, so any client plugin — in this pack or in a deployment — opens a dialog with `ctx.get('modals')` instead of shipping its own prompt markup.
 
@@ -20,9 +20,9 @@ const values = await modals.open({ title: 'Save new file', fields: [...], submit
 | `close(result?)` | closes whatever is open, resolving it with `result` (default `null`) |
 | `isOpen()` | whether a dialog is currently up |
 
-`spec` (all fields optional): `title`, `message`; `fields` — `[{ name, label?, value?, placeholder?, hint?, mono?, required?, maxLength? }]`, text inputs, the first one focused and selected; `validate(values)`, returning an error **string** to show inline and block the submit; `submit(values, …)`, async work that runs **while the dialog stays open**; `confirmLabel` / `cancelLabel` / `busyLabel` (`cancelLabel: null` renders no cancel button, i.e. an alert); `danger`, which paints the confirm button as the error colour; and the rich pair `content` + `size`.
+`spec` (all fields optional): `title`, `message`; `fields` — `[{ name, label?, value?, placeholder?, hint?, mono?, required?, maxLength? }]`, text inputs, the first one focused and selected; `validate(values)`, returning an error **string** to show inline and block the submit; `submit(values, …)`, async work that runs **while the dialog stays open**; `confirmLabel` / `cancelLabel` / `busyLabel` (`cancelLabel: null` renders no cancel button, i.e. an alert); `danger`, which paints the confirm button as the error colour; and the rich pair `content` + `size`, plus `dismissOnMask` for a rich dialog that has nothing to lose.
 
-**Rich dialogs** pass `content` — a render function handed `{ close }` that owns the whole body — instead of `fields`, for a dialog that is a browser rather than a question (a list beside a document, a picker, a form of its own). Fields, `validate` and `submit` do not apply to one: the content owns its own work and closes the dialog itself through the `close` it is handed, which settles the `open()` Promise with whatever it passed. `size: 'lg'` gives it the roomy frame (min(1120px, 94vw) × min(800px, 90vh)), whose header carries the title and the frame's own **×** close control — a rich dialog has no mask click, so the frame is what guarantees a visible way out. The overlay, the Escape handling, the focus restore and the one-dialog-at-a-time queue are still this package's, so a rich surface never ships its own overlay.
+**Rich dialogs** pass `content` — a render function handed `{ close }` that owns the whole body — instead of `fields`, for a dialog that is a browser rather than a question (a list beside a document, a picker, a form of its own). Fields, `validate` and `submit` do not apply to one: the content owns its own work and closes the dialog itself through the `close` it is handed, which settles the `open()` Promise with whatever it passed. `size: 'lg'` gives it the roomy frame (min(1120px, 94vw) × min(800px, 90vh)), whose header carries the title and the frame's own **×** close control — a rich dialog has no mask click **unless the caller sets `dismissOnMask: true`**, so the frame is what guarantees a visible way out either way. The overlay, the Escape handling, the focus restore and the one-dialog-at-a-time queue are still this package's, so a rich surface never ships its own overlay.
 
 `submit` is the point of the whole surface: a save, a rename or a request that can fail runs with the dialog still on screen, so the failure is reported **inside** it and the user keeps everything they typed. Throwing (or rejecting) shows the message and leaves the dialog open; resolving closes it and settles the `open()` Promise with the returned value, or the values when it returns `undefined`.
 
@@ -34,7 +34,7 @@ Consumers: [`dsh-editor`](../dsh-editor) uses `open` for the save-as dialog (nam
 
 ## Limits
 
-- **A mask click does not close a rich dialog.** It can hold unfinished work, and a stray click outside it must not throw that away; the header's **×**, Escape and the content's own Close control are the ways out. For a field dialog the cancel paths are the Cancel button, **Escape** (captured on the document, so the pane underneath never sees the key) and a click on the mask — none of which fires while `submit` is still running.
+- **A mask click does not close a rich dialog by default.** It can hold unfinished work, and a stray click outside it must not throw that away; the header's **×**, Escape and the content's own Close control are the ways out. A caller whose content holds no draft opts back in with `dismissOnMask: true`, and the mask then closes it like any other dialog (the Skills browser does). For a field dialog the cancel paths are the Cancel button, **Escape** (captured on the document, so the pane underneath never sees the key) and a click on the mask — none of which fires while `submit` is still running.
 - Two calls that overlap **queue**: the second dialog opens when the first settles, so two racing saves can never replace each other's UI.
 - Focus moves to the first field and returns to whatever had it when the dialog closes.
 
diff --git a/packages/dsh-modal/lib/client.js b/packages/dsh-modal/lib/client.js
index ed3e901..8b5c1fa 100644
--- a/packages/dsh-modal/lib/client.js
+++ b/packages/dsh-modal/lib/client.js
@@ -31,7 +31,9 @@
  * `validate` and `submit` do not apply to one (the content drives its own work),
  * the panel grows to `size: 'lg'`, and a MASK CLICK NO LONGER CLOSES IT: a rich
  * dialog can hold half-finished work, and a stray click outside it must not
- * throw that away - Escape and the content's own Close button remain.
+ * throw that away - Escape and the content's own Close button remain. A caller
+ * that KNOWS its content holds nothing to lose opts back in with
+ * `dismissOnMask: true`, and the mask closes it like any other dialog.
  *
  * The host owns no slot: it creates its own detached container on
  * `document.body` and renders it with `react-dom/client`'s `createRoot`, both
@@ -54,7 +56,7 @@ window.__ModuleLoader__.load({
     const h = React.createElement
 
     /** Version marker, mirrored by the package manifest. */
-    const PLUGIN_VERSION = '0.1.0-alpha.3'
+    const PLUGIN_VERSION = '0.1.0-alpha.4'
     /** The client service name other plugins resolve. */
     const SERVICE = 'modals'
 
@@ -193,6 +195,12 @@ window.__ModuleLoader__.load({
         content: typeof source.content === 'function' ? source.content : undefined,
         /** `size: 'lg'` is the roomy frame a two-column rich dialog is laid out in. */
         size: source.size === 'lg' ? 'lg' : 'md',
+        /**
+         * A rich dialog's mask click. OFF by default (the body may hold work a
+         * stray click must not discard); a caller with nothing to lose turns it
+         * back on. A form dialog ignores this: its mask always cancels.
+         */
+        dismissOnMask: source.dismissOnMask === true,
         confirmLabel: typeof source.confirmLabel === 'string' && source.confirmLabel !== '' ? source.confirmLabel : 'OK',
         /** `cancelLabel: null` renders no cancel button (a plain acknowledgement). */
         cancelLabel: source.cancelLabel === null ? null : typeof source.cancelLabel === 'string' && source.cancelLabel !== '' ? source.cancelLabel : 'Cancel',
@@ -406,9 +414,10 @@ window.__ModuleLoader__.load({
         return h(
           'div',
           { className: 'dsm-overlay', role: 'presentation' },
-          // No mask click: a rich dialog can hold unsaved work, and Escape (and
-          // the header's own close control) is what closes it.
-          h('div', { className: 'dsm-mask', 'aria-hidden': true }),
+          // No mask click unless the caller opted in: a rich dialog can hold
+          // unsaved work, and Escape (and the header's own close control) is
+          // what closes it. `dismissOnMask: true` is the opt-in.
+          h('div', { className: 'dsm-mask', 'aria-hidden': true, ...(request.dismissOnMask === true ? { onClick: () => finish(request, null) } : {}) }),
           h(
             'div',
             {
diff --git a/packages/dsh-modal/package.json b/packages/dsh-modal/package.json
index a9d83ba..a77beda 100644
--- a/packages/dsh-modal/package.json
+++ b/packages/dsh-modal/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dsh-modal",
-  "version": "0.1.0-alpha.3",
-  "description": "Modal: the pack's shared dialog surface, published as the `modals` service - `open` / `alert` / `confirm` / `prompt` with async submit work that keeps the dialog open, plus a rich `content` dialog whose mask click deliberately does not close it.",
+  "version": "0.1.0-alpha.4",
+  "description": "Modal: the pack's shared dialog surface, published as the `modals` service - `open` / `alert` / `confirm` / `prompt` with async submit work that keeps the dialog open, plus a rich `content` dialog whose mask click deliberately does not close it unless the caller opts in with `dismissOnMask`.",
   "type": "module",
   "main": "lib/index.js",
   "exports": {
diff --git a/packages/dsh-skills/README.md b/packages/dsh-skills/README.md
index 534af93..5e58b13 100644
--- a/packages/dsh-skills/README.md
+++ b/packages/dsh-skills/README.md
@@ -1,12 +1,14 @@
-# dsh-skills (alpha.3)
+# dsh-skills (alpha.4)
 
-**The Skills browser**: one button in the conversation header — immediately left of the page-zoom control — opens a centered modal listing every skill the harness loads for this chat. Pick one to **read its rendered document**, press **Edit** to see and change the source, press **Save** to write it back.
+**The Skills browser**: the left bar's **Skills** button (`dsh-themes`' band strip) opens a centered modal listing every skill the harness loads for this chat. Pick one to **read its rendered document**, press **Edit** to see and change the source, press **Save** to write it back. A click outside the modal closes it.
+
+This package's own entry point is a **header seat** at `order: -50` in `conversation.session.header.utilities`. When the band is mounted it is that button the band clicks — the band queries `[data-dsh-skills="button"]` — and the header seat is hidden by CSS, because the app should not have two doors to one dialog. A profile without `dsh-themes` keeps the header seat as its only way in.
 
 The catalog is the HOST's own `ctx.skills.snapshot({ cwd, scope })` for this conversation, with the session's own project folder and agent scope — the same registry the system prompt and the composer's `/` menu read — so the modal cannot disagree with what the model was given. Every other surface is model-facing or name-only; this is the one that says where a skill lives, which copy won when two are installed under one name, and what its document says.
 
 ## What it adds
 
-- **One header button** at `order: -50` in `conversation.session.header.utilities`, one step left of the page-zoom control at `-40`, which `dsh-themes` owns.
+- **One header button** at `order: -50` in `conversation.session.header.utilities`, one step left of the page-zoom control at `-40`, which `dsh-themes` owns. The band's Skills button clicks it; with the band mounted, the header seat is hidden so there is exactly one visible entry point.
 - **One row per winning skill**, grouped by origin, each carrying its provider, whether the model and the user may invoke it, the absolute file behind it and its size:
 
 | Group | Root |
@@ -33,7 +35,7 @@ The catalog is the HOST's own `ctx.skills.snapshot({ cwd, scope })` for this con
 | `GET /api/dsh-skills/body?session=&name=` | one skill's document, raw and frontmatter included |
 | `POST /api/dsh-skills/save` | write a document back to the registry's own path |
 
-The browser half opens the pack's shared dialog in its **rich** form — `modals.open({ size: 'lg', content })` — resolved lazily through `ctx.get`, so a profile without [`dsh-modal`](../dsh-modal) still loads and says so.
+The browser half opens the pack's shared dialog in its **rich** form — `modals.open({ size: 'lg', dismissOnMask: true, content })` — resolved lazily through `ctx.get`, so a profile without [`dsh-modal`](../dsh-modal) still loads and says so. `dismissOnMask` is the one opt-in rich dialogs have (see that package's README): the browser holds no draft of its own, so a click outside it closes it, while Escape and its Close button keep working.
 
 ## Limits
 
diff --git a/packages/dsh-skills/lib/client.js b/packages/dsh-skills/lib/client.js
index 910fefc..f4f8170 100644
--- a/packages/dsh-skills/lib/client.js
+++ b/packages/dsh-skills/lib/client.js
@@ -85,7 +85,7 @@ window.__ModuleLoader__.load({
     // Constants
     // ---------------------------------------------------------------------
     /** Version marker, logged at activation; must equal package.json's version. */
-    const PLUGIN_VERSION = '0.1.0-alpha.3'
+    const PLUGIN_VERSION = '0.1.0-alpha.4'
     /** Keep in sync with lib/index.js. */
     const API_ROOT = '/api/dsh-skills'
     const LIST_ROUTE = API_ROOT + '/list'
@@ -793,6 +793,9 @@ window.__ModuleLoader__.load({
               modals.open({
                 title: '',
                 size: 'lg',
+                // The browser holds no draft of its own - the editor commits
+                // through the save route - so a click on the mask may close it.
+                dismissOnMask: true,
                 content: (helpers) => h(SkillsBrowser, { sessionId, close: helpers.close }),
               })
             },
diff --git a/packages/dsh-skills/lib/index.js b/packages/dsh-skills/lib/index.js
index 8fa590a..9f3253c 100644
--- a/packages/dsh-skills/lib/index.js
+++ b/packages/dsh-skills/lib/index.js
@@ -52,7 +52,7 @@ import path from 'node:path'
 export const name = 'dsh-skills'
 
 /** Version marker, logged at activation; the client's constant must match it. */
-export const PLUGIN_VERSION = '0.1.0-alpha.3'
+export const PLUGIN_VERSION = '0.1.0-alpha.4'
 
 export const inject = ['connection']
 
diff --git a/packages/dsh-skills/package.json b/packages/dsh-skills/package.json
index 2bc9a1f..9f27e5e 100644
--- a/packages/dsh-skills/package.json
+++ b/packages/dsh-skills/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dsh-skills",
-  "version": "0.1.0-alpha.3",
-  "description": "Skills browser: one header seat opens a modal listing every skill the harness loads for this conversation, with three routes to read and save the markdown behind it. The client names a skill, never a path.",
+  "version": "0.1.0-alpha.4",
+  "description": "Skills browser: the left bar's Skills button (and, in a profile without dsh-themes, one header seat) opens a modal listing every skill the harness loads for this conversation, closable by clicking outside it, with three routes to read and save the markdown behind it. The client names a skill, never a path.",
   "type": "module",
   "main": "lib/index.js",
   "exports": {
diff --git a/packages/dsh-themes/README.md b/packages/dsh-themes/README.md
index b732aec..65722fe 100644
--- a/packages/dsh-themes/README.md
+++ b/packages/dsh-themes/README.md
@@ -1,4 +1,4 @@
-# dsh-themes (alpha.30)
+# dsh-themes (alpha.31)
 
 **The vncode Web GUI's conversation-header package: four controls on that header, plus the pack's appearance overrides.**
 
@@ -45,7 +45,7 @@ Open In… (`dsh-open-in-app`) is `-10` and dsh-cmdbar's button `30`; no shipped
   paper-plane `path` artwork; the **right bar's resize seam**, placed from the open panel's own
   left edge as a CSS anchor under `html[data-dsh-page-zoomed]` (the panel, not the column: at a zoom the
   solve reads a scaled rect, so at 90% the panel is drawn 616px wide in a 648px track and the column's
-  edge is 32px off the seam); the **band's action strip** — **Settings, Plugins, Media, Skills** mounted as four of the app's own 28px `.dst-button` controls in the 36px row under the `vncode` band, each naming itself in a tooltip, with the bottom rows they mirror hidden once the strip is there (the one override here that mounts DOM rather than CSS: the sidebar declares no slot for that row, so the theme adds a sibling of the branded identity and drives each destination the way its own row does); the left
+  edge is 32px off the seam); the **band's action strip** — **Settings, Plugins, Media, Skills** mounted as four of the app's own 28px `.dst-button` controls in the 36px row under the `vncode` band, each naming itself in a tooltip, with the bottom rows they mirror hidden once the strip is there (the one override here that mounts DOM rather than CSS: the sidebar declares no slot for that row, so the theme adds a sibling of the branded identity and drives each destination the way its own row does). Two of the four are deliberate departures from the rows they mirror: **Media** opens `dsh-audio`'s `media` dialog (`ctx.get('media').open()`) instead of selecting the panel behind it, so the conversation stays in the main column; and **Skills** is the pack's ONE visible entry to that dialog — the header seat `dsh-skills` still registers is hidden by a `:has([data-dsh-themes-band])` rule, because it is what the band's button CLICKS (its click handler carries the session id) and a `display:none` control still takes a programmatic click. The left
   column's **panel order** (`regionArea` 1, `panelList` 2, `footArea` 3); the **band lines** — the same `.5px`
   hairline the band already ends in, drawn a second time on the frame's **y=40** in ALL THREE columns: between the
   middle column's button row and its session tabs, under the left column's branding row, and in the right bar 2px
diff --git a/packages/dsh-themes/lib/client.js b/packages/dsh-themes/lib/client.js
index 864c3fd..882c545 100644
--- a/packages/dsh-themes/lib/client.js
+++ b/packages/dsh-themes/lib/client.js
@@ -255,7 +255,7 @@ window.__ModuleLoader__.load({
     /** The slot id of the Themes occupant in the header utilities list. */
     const THEMES_ID = 'dsh-themes'
     /** Version marker, logged at activation so a fresh bundle is easy to verify. */
-    const PLUGIN_VERSION = '0.1.0-alpha.30'
+    const PLUGIN_VERSION = '0.1.0-alpha.31'
     /** The client service (@deepseek-ai/dsh-client-ui-theme) that owns the preference. */
     const THEME_SERVICE = 'theme'
     /**
@@ -422,6 +422,14 @@ window.__ModuleLoader__.load({
 html .hHd-Xa_root.hHd-Xa_collapsed .dst-band{display:none}
 html:has([data-dsh-themes-band]) .hHd-Xa_panelList{display:none}
 html:has([data-dsh-themes-band]) .hHd-Xa_footArea [aria-haspopup="dialog"]{display:none}
+/* The band's Skills button is the pack's ONE Skills entry point. dsh-skills also
+   registers a book icon in the conversation header; with the band mounted that
+   is a second door to the same dialog, so the header one is hidden - not
+   removed, because it is what the band's button CLICKS (its click handler
+   carries the session id the browser resolves its folder from), and a
+   display:none control still takes a programmatic click. A profile without this
+   row keeps the header control as its only way in. */
+html:has([data-dsh-themes-band]) [data-dsh-skills="button"]{display:none}
 html[data-dsh-screenshot] [role=tooltip]{visibility:hidden}
 `
     const CSS_TAG = 'dsh-themes/themes.css'
@@ -1890,7 +1898,7 @@ html[data-dsh-screenshot] [role=tooltip]{visibility:hidden}
 
     /**
      * The strip itself, in the order asked for: Settings, Plugins, Media, Skills.
-     * @param props - `{ panels, selectPanel, openSettings, openSkills }`.
+     * @param props - `{ panels, selectPanel, openSettings, openSkills, openMedia }`.
      * @returns the group element.
      */
     function BandActions(props) {
@@ -1904,12 +1912,14 @@ html[data-dsh-screenshot] [role=tooltip]{visibility:hidden}
         },
       ]
       // Only a profile that actually declares the Media panel gets its button.
+      // Its own service opens the dialog, so the conversation is not swapped out
+      // for the seat underneath (`openMedia` explains the fallback).
       if (props.panels.indexOf('media') !== -1) {
         items.push({
           id: 'media',
           label: 'Media',
           icon: MediaGlyph,
-          onSelect: () => props.selectPanel('media'),
+          onSelect: props.openMedia,
         })
       }
       // The fourth element: the Skills browser the header carries, driven through
@@ -1977,9 +1987,33 @@ html[data-dsh-screenshot] [role=tooltip]{visibility:hidden}
         }
       }
 
+      /**
+       * The Media dialog, WITHOUT the panel underneath it.
+       *
+       * `layout.selectPanel('media')` swaps the main column from the
+       * conversation to dsh-audio's seat, and the seat then opens its dialog -
+       * a modal button that changes the background on its way in, and can leave
+       * it changed. dsh-audio publishes the `media` service for exactly this
+       * click, so the band opens the dialog and the chat stays where it is. The
+       * fallback is the old path, for a profile running this row against an
+       * older audio row.
+       */
+      const openMedia = () => {
+        const media = clientService(ctx, 'media')
+        if (media !== null && typeof media.open === 'function') {
+          try {
+            media.open()
+            return
+          } catch (err) {
+            /* an audio row that refuses its own service falls back below */
+          }
+        }
+        selectPanel('media')
+      }
+
       const paint = () => {
         if (reactRoot === null) return
-        reactRoot.render(h(BandActions, { panels: declaredPanels(ctx), selectPanel, openSettings, openSkills }))
+        reactRoot.render(h(BandActions, { panels: declaredPanels(ctx), selectPanel, openSettings, openSkills, openMedia }))
       }
 
       const ensure = () => {
diff --git a/packages/dsh-themes/package.json b/packages/dsh-themes/package.json
index eead629..ab62c20 100644
--- a/packages/dsh-themes/package.json
+++ b/packages/dsh-themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dsh-themes",
-  "version": "0.1.0-alpha.30",
+  "version": "0.1.0-alpha.31",
   "description": "Themes and header dress: the conversation header's own controls (page zoom, Screenshot, Themes, session-log download), the Nord/Monokai/Hacker/Cyber palettes, and the pack's appearance overrides - Markdown paper, the branding band, the account menu's Feedback row removed, and the right bar's resize seam.",
   "type": "module",
   "main": "lib/index.js",
diff --git a/scripts/checks/check-client-bundles.mjs b/scripts/checks/check-client-bundles.mjs
index 53bc855..f60a8c5 100644
--- a/scripts/checks/check-client-bundles.mjs
+++ b/scripts/checks/check-client-bundles.mjs
@@ -483,6 +483,10 @@ check(
 )
 const modalSource = readFileSync(path.join(repo, 'packages/dsh-modal/lib/client.js'), 'utf8')
 check('...and that control settles the queue the way Cancel does', modalSource.includes('onClick: () => finish(request, null)'))
+// A rich dialog's mask stays inert unless the caller opts in: the body may hold
+// half-finished work, and the opt-in is the caller's statement that it does not.
+check('a rich dialog keeps its mask inert by default', modalSource.includes('...(request.dismissOnMask === true ? { onClick: () => finish(request, null) } : {})'))
+check('...and only a spec that asks for it turns the mask on', modalSource.includes('dismissOnMask: source.dismissOnMask === true'))
 check('rich dialog content can close it', typeof richHelpers.close === 'function')
 richHelpers.close('done')
 richClosedWith = await richPromise
@@ -531,6 +535,9 @@ check(
     skillsSource.includes('content: (helpers) => h(SkillsBrowser'),
 )
 check('a missing modal service is handled', skillsSource.includes('is not mounted in this profile'))
+// The browser holds no draft (the editor commits through the save route), so a
+// click outside it is allowed to close it - the one rich dialog that opts in.
+check('the browser closes on a click outside it', skillsSource.includes('dismissOnMask: true'))
 
 // The browser mounts and draws its first frame (a static render runs no effect,
 // so this is the loading state - the whole tree still has to survive building).
@@ -2002,8 +2009,22 @@ check(
   themesSource.includes('sidebar.querySelector(\'[aria-haspopup="dialog"]\')'),
 )
 check(
-  'Plugins and Media use the shell\'s own panel ids',
-  themesSource.includes("props.selectPanel('plugins')") && themesSource.includes("props.selectPanel('media')"),
+  'Plugins still selects the shell\'s own panel id',
+  themesSource.includes("props.selectPanel('plugins')"),
+)
+// Media is a MODAL button: it asks dsh-audio's `media` service for the dialog,
+// and only falls back to the panel id in a profile running an older audio row.
+// `selectPanel('media')` on its own is the page swap this button must not do.
+check(
+  'Media opens the dialog service instead of swapping the main column',
+  themesSource.includes('onSelect: props.openMedia') &&
+    themesSource.includes("clientService(ctx, 'media')") &&
+    themesSource.includes("typeof media.open === 'function'") &&
+    themesSource.includes("selectPanel('media')"),
+)
+check(
+  'the band hides the duplicate header Skills control',
+  themesSource.includes('html:has([data-dsh-themes-band]) [data-dsh-skills="button"]{display:none}'),
 )
 check('Media is drawn only when its panel is declared', themesSource.includes("props.panels.indexOf('media') !== -1"))
 check(
@@ -5976,6 +5997,32 @@ check(
 )
 check('...and can still be forced inline', renderToStaticMarkup(h(A.MediaSeat, { inline: true })).includes('data-media-seat="inline"'))
 
+// The `media` service the band's button drives, and the reason it exists: a
+// click must open the DIALOG, never select the seat's panel and hand the main
+// column over to a page. Driven through a stub `reflect`, which is the seam the
+// real harness provides the service on.
+const providedMedia = {}
+audio.exports.apply({
+  slots: { inject: (name, fn) => fn(), register: () => () => {} },
+  sidebarRightTabs: { register: () => () => {}, entries: () => [] },
+  get: (name) => (name === 'modals' ? { open: () => Promise.resolve(null) } : undefined),
+  reflect: {
+    provide: (name, service) => {
+      providedMedia[name] = service
+      return () => {}
+    },
+  },
+  effect: (fn) => fn(),
+  logger: { debug() {}, warn() {} },
+})
+check('audio publishes the media service the left bar opens', typeof providedMedia.media?.open, 'function')
+check('...and open() answers whether a dialog was opened', providedMedia.media.open(), true)
+const seatHandBack = audioSource.slice(audioSource.indexOf('const pending = openMediaDialog'), audioSource.indexOf('const pending = openMediaDialog') + 600)
+check(
+  '...while the seat hands the column back as soon as the dialog is open',
+  seatHandBack.includes('restorePanel()') && seatHandBack.indexOf('restorePanel()') < seatHandBack.indexOf('pending.then'),
+)
+
 // The wiring that a render cannot see, pinned as source because it is the
 // decision that would quietly stop working if it were dropped.
 check('the dialog surface is resolved lazily, never injected', audioSource.includes("const MODAL_SERVICE = 'modals'") && audioSource.includes('serviceNow(MODAL_SERVICE)'))
diff --git a/scripts/tools/logo/banner.mjs b/scripts/tools/logo/banner.mjs
index ba95678..8720564 100644
--- a/scripts/tools/logo/banner.mjs
+++ b/scripts/tools/logo/banner.mjs
@@ -32,13 +32,24 @@ const out = path.join(repo, 'assets', 'vncode-banner3.png')
 const INK = '#05060A'
 const SIZE = { width: 1280, height: 320 }
 
-// The plugin count is the number of bundles in the pack, not a number to remember.
+// The two counts are read from the tree, not remembered: the number of bundles in
+// the pack, and the number of skill folders those bundles carry (`skills/<name>/`,
+// which is exactly what the installers copy into $DSH_HOME/skills).
 const plugins = fs.readdirSync(path.join(repo, 'packages'), { withFileTypes: true }).filter((entry) => entry.isDirectory()).length
+const skills = fs
+  .readdirSync(path.join(repo, 'packages'), { withFileTypes: true })
+  .filter((entry) => entry.isDirectory())
+  .flatMap((entry) => {
+    const root = path.join(repo, 'packages', entry.name, 'skills')
+    return fs.existsSync(root) ? fs.readdirSync(root, { withFileTypes: true }).filter((skill) => skill.isDirectory()) : []
+  }).length
 
 const COPY = {
-  eyebrow: 'VNCODE \u00b7 IDE',
+  eyebrow: 'VNCODE \u00b7 ADE',
   count: String(plugins),
-  countTail: 'plugins.',
+  countTail: 'plugins, ',
+  skills: String(skills),
+  skillsTail: 'skills.',
   subhead: 'Node application.',
   // Two rows of about one row's width, so the list reads as a list rather than a
   // paragraph. The first row is the one the hand-made banner already carried.
@@ -84,7 +95,7 @@ export function bannerHtml(copy = COPY) {
   <div class="rings"></div>
   <div class="text">
     <div class="eyebrow">${copy.eyebrow}</div>
-    <div class="headline"><span class="n">${copy.count}</span> ${copy.countTail}</div>
+    <div class="headline"><span class="n">${copy.count}</span> ${copy.countTail}<span class="n">${copy.skills}</span> ${copy.skillsTail}</div>
     <div class="subhead">${copy.subhead}</div>
     ${copy.rows.map((row, index) => `<div class="row row${index + 1}">${row}</div>`).join('\n    ')}
   </div>
@@ -104,13 +115,13 @@ try {
     if (header.width !== SIZE.width || header.height !== SIZE.height) {
       throw new Error(`the banner is ${header.width}x${header.height}, not ${SIZE.width}x${SIZE.height}`)
     }
-    console.log(`ok: the banner is ${header.width}x${header.height}, ${plugins} plugins`)
+    console.log(`ok: the banner is ${header.width}x${header.height}, ${plugins} plugins, ${skills} skills`)
     process.exit(0)
   }
   const browser = findBrowser(explicit)
   console.log(`browser   ${browser}`)
   shoot({ browser, html: bannerHtml(), width: SIZE.width, height: SIZE.height, out })
-  console.log(`banner    ${path.relative(repo, out)} - ${plugins} plugins, ${COPY.rows.length} list rows`)
+  console.log(`banner    ${path.relative(repo, out)} - ${plugins} plugins, ${skills} skills, ${COPY.rows.length} list rows`)
 } catch (error) {
   console.error('banner.mjs: ' + error.message)
   process.exit(1)