@aryacode/dsh-aryacode-polish 0.7.3 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+
+## [0.8.2] - 2026-10-28
+
+### Fixed
+
+- The camera floated over the panel with metrics of its own, so it read as a
+  foreign control. It now mounts into the docking kit's chrome seat beside the
+  Shell's own presentation and collapse buttons, wearing that cluster's 28px box,
+  15px glyph, hover state and tooltip, and it follows the strip through docked,
+  split and fullscreen layouts.
+
+## [0.8.1] - 2026-10-28
+
+### Changed
+
+- The camera moved out of the composer row and next to the right panel's own
+  controls. The composer dock entry stays, invisibly, to publish the session
+  context the button needs.
+
+## [0.8.0] - 2026-10-28
+
+### Added
+
+- **Right-panel screenshot.** A camera button in the composer row photographs the
+  right panel's open tab, copies the PNG to the clipboard, and attaches it to the
+  message being written — one click in place of a snip tool, for the panel rather
+  than the whole screen. The capture is a DOM rasterisation inside the page,
+  because the Shell exposes no capture bridge and no display-media source; the
+  browser tab and the HTML preview live in iframes and are the two surfaces it
+  cannot see. `docs/panel-screenshot.md` records the limits.
+
+### Changed
+
+- `html2canvas` 1.4.1 is vendored at `vendor/html2canvas.min.js` and inlined into
+  `lib/client.js` by `pnpm build:client`: the Shell's module table answers `react`
+  and `react-dom` only, so a rasteriser has to travel inside the bundle.
+
 ## [0.7.3] - 2026-10-28
 
 ### Fixed

package/README.md

@@ -7,7 +7,7 @@ installed into and patches nothing. It is one package, one Plugins row, and one
 switch per feature, so a refinement that turns out to be wrong for a machine can
 be turned off without uninstalling anything.
 
-Status: **five features shipped.** The version is the package's, and the card
+Status: **six features shipped.** The version is the package's, and the card
 header already shows it.
 
 ## What it is
@@ -35,6 +35,7 @@ Configure page automatically.
 | **Open workspace folder** (`openWorkspaceFolder`) | On | An **Open workspace folder** row in a Session's "…" menu that opens the Session's workspace in Explorer/Finder. Renders nothing when the Session has no workspace or the Host cannot open a path. See [Open a workspace folder](docs/workspace-folder.md) for why the request had to land here instead of on the workspace row itself. |
 | **Add a workspace from GitHub** (`githubWorkspace`) | On | Adds the GitHub half of the workspace sources: the dialog lists the repositories your GitHub CLI session can clone, and cloning one creates the workspace. The token never enters the browser — it is read on the Host, used only as git's http auth header, and never stored. The sidebar foot carries the sign-in state (`GitHub · <login>`). See [GitHub workspaces](docs/github-workspaces.md). |
 | **Add a workspace from this PC or GitHub** (`workspaceSources`) | On | The Workspaces **+** button gets a source menu: **On this PC** (the Host's OS chooser, or a folder list when the composition has no native chooser) and **GitHub repository…**. Off, the **+** button goes back to the shipped folder picker. |
+| **Right-panel screenshot** (`panelScreenshot`) | On | A camera button in the right panel's top-right corner photographs the open tab, copies the picture to the clipboard, and attaches it to the message being written. See [Right-panel screenshot](docs/panel-screenshot.md) for what it can and cannot capture. |
 
 ### How the cost is computed
 

package/client/face.js

@@ -1477,6 +1477,364 @@ function WorkspaceSourceFlow(props) {
   document.body)
 }
 
+/**
+ * Right-panel screenshot.
+ *
+ * The Shell offers no way to lift pixels out of itself: there is no capture
+ * bridge on the desktop preload, `getDisplayMedia` has no source to offer, and
+ * the Host has no route to the renderer's pixels. What a client face does have
+ * is the panel's own DOM in the same document, so the picture is rasterised in
+ * the page by the vendored rasteriser. docs/panel-screenshot.md records what
+ * that means for the two iframes and for the window around the app.
+ */
+const PANEL_TARGETS = [
+  '[data-sidebar-right-session][data-sidebar-right-open] [data-dockkit-pane-active]',
+  '[data-sidebar-right-session][data-sidebar-right-open]',
+  '[data-dsh-panel][data-dsh-bottom-panel]',
+]
+
+/**
+ * The element to photograph: the right panel's open tab, else the panel itself.
+ * @returns the element, or undefined when no panel is open.
+ */
+function panelTarget() {
+  for (const selector of PANEL_TARGETS) {
+    const node = document.querySelector(selector)
+    if (node === null) continue
+    const rect = node.getBoundingClientRect()
+    if (rect.width < 48 || rect.height < 48) continue
+    return node
+  }
+  return undefined
+}
+
+/**
+ * The first opaque background behind an element, so a transparent panel still
+ * reads as a surface instead of turning into a black or checkered square.
+ * @param node - element whose backdrop is wanted.
+ * @returns a CSS colour.
+ */
+function backgroundOf(node) {
+  for (let current = node; current !== null && current !== undefined; current = current.parentElement) {
+    const colour = window.getComputedStyle(current).backgroundColor
+    if (colour !== '' && colour !== 'transparent' && colour !== 'rgba(0, 0, 0, 0)') return colour
+  }
+  return '#ffffff'
+}
+
+/**
+ * Rasterise one element to a PNG blob.
+ * @param node - element to draw.
+ * @returns the PNG.
+ */
+async function capturePanel(node) {
+  const rasterise = globalThis.html2canvas
+  if (typeof rasterise !== 'function') throw new Error('the screenshot library did not load')
+  const canvas = await rasterise(node, {
+    backgroundColor: backgroundOf(node),
+    // Capped at 2: text stays legible on a HiDPI screen without quadrupling the
+    // file that gets uploaded with the message.
+    scale: Math.min(2, Math.max(1.5, window.devicePixelRatio || 1)),
+    logging: false,
+    useCORS: true,
+  })
+  return await new Promise((resolve, reject) => {
+    canvas.toBlob((value) => {
+      if (value === null) reject(new Error('the panel could not be rasterised'))
+      else resolve(value)
+    }, 'image/png')
+  })
+}
+
+/**
+ * Put a PNG on the clipboard.
+ * @param blob - the PNG.
+ * @returns whether the Shell allowed the write.
+ */
+async function copyImage(blob) {
+  if (typeof ClipboardItem !== 'function' || navigator.clipboard === undefined) return false
+  try {
+    await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * A file name for the attachment, matching the chat's own timestamped names.
+ * @returns the name.
+ */
+function shotName() {
+  const now = new Date()
+  const pad = (value) => String(value).padStart(2, '0')
+  return 'right-panel-' + now.getFullYear() + pad(now.getMonth() + 1) + pad(now.getDate())
+    + '-' + pad(now.getHours()) + pad(now.getMinutes()) + pad(now.getSeconds()) + '.png'
+}
+
+
+/**
+ * Camera glyph, drawn here so the face depends on no icon package.
+ * @returns the svg element.
+ */
+function CameraGlyph() {
+  return React.createElement('svg', {
+    viewBox: '0 0 16 16',
+    width: 15,
+    height: 15,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': 'true',
+  },
+  React.createElement('path', { d: 'M2.6 5.4h1.9l1-1.5h5l1 1.5h1.9a1 1 0 0 1 1 1v5.7a1 1 0 0 1-1 1H2.6a1 1 0 0 1-1-1V6.4a1 1 0 0 1 1-1Z' }),
+  React.createElement('circle', { cx: 8, cy: 9.3, r: 2.5 }))
+}
+
+/** Confirmation tick, drawn at the strip's own glyph size. */
+function CheckGlyph() {
+  return React.createElement('svg', {
+    viewBox: '0 0 16 16',
+    width: 15,
+    height: 15,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.4,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': 'true',
+  },
+  React.createElement('path', { d: 'M3.4 8.6l3 3 6.2-6.6' }))
+}
+
+/** Refusal mark, drawn at the strip's own glyph size. */
+function BangGlyph() {
+  return React.createElement('svg', {
+    viewBox: '0 0 16 16',
+    width: 15,
+    height: 15,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.4,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': 'true',
+  },
+  React.createElement('path', { d: 'M8 3.6v5.2' }),
+  React.createElement('path', { d: 'M8 12v.4' }))
+}
+
+/**
+ * The Shell has no header slot for the panel, so the camera rides the docking
+ * kit's chrome seat: the element at the end of the top-right pane's tab strip
+ * that already holds the presentation and collapse controls. Portalling into
+ * that element, instead of floating over the panel at fixed coordinates, is what
+ * makes the button share the cluster's gap, its vertical centring and whatever
+ * geometry the strip has docked, fullscreened or split.
+ */
+const SHOT_CHROME_SELECTOR = '[data-dockkit-strip-chrome]'
+
+/**
+ * Mirrors the Shell's own strip control: a 28px box with 6px padding around a
+ * 15px glyph, secondary label colour, transparent until hovered.
+ */
+const SHOT_BUTTON_STYLE = {
+  display: 'inline-flex',
+  flex: 'none',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '28px',
+  height: '28px',
+  padding: '6px',
+  color: 'var(--dsw-alias-label-secondary, #61666b)',
+  lineHeight: 1,
+  background: 'transparent',
+  border: 'none',
+  borderRadius: 'var(--dsw-radius-sm, 6px)',
+  cursor: 'pointer',
+  // Ahead of the Shell's own two controls: the last thing you would reach for,
+  // and never between them and the panel edge.
+  order: -1,
+}
+
+/**
+ * The composer context the chrome button attaches through.
+ *
+ * The camera renders inside the panel strip, which is root chrome, but attaching
+ * an image needs the *session-scoped* composer props (`sessionId` and
+ * `inputActions`), which only a session slot receives. The composer dock is
+ * therefore kept as an invisible publisher and this store carries its context up
+ * to the chrome button; with no open Session the store is empty and the button
+ * does not render.
+ */
+const shotStore = (() => {
+  const listeners = new Set()
+  let value
+  return {
+    get: () => value,
+    set: (next) => {
+      value = next
+      listeners.forEach((listener) => listener())
+    },
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+  }
+})()
+
+/**
+ * Invisible composer-dock entry that publishes the session context the chrome
+ * button needs, and nothing else.
+ * @param props - session slot props (`sessionId`, `inputActions`) plus the
+ * late `conversation` lookup.
+ * @returns null.
+ */
+function PanelShotContext(props) {
+  React.useEffect(() => {
+    shotStore.set({
+      sessionId: props.sessionId,
+      actions: props.inputActions,
+      conversation: props.conversation,
+    })
+    return () => shotStore.set(undefined)
+  }, [props.sessionId])
+  return null
+}
+
+/**
+ * Camera button in the right panel's tab strip: photographs the open tab, copies
+ * it, and attaches it to the message being written.
+ * @param props - overlay slot props plus the late `conversation` lookup.
+ * @returns the portalled button, or null while there is no panel or no Session.
+ */
+function PanelShotButton(props) {
+  const on = useSwitch(props.configForms, 'panelScreenshot', true)
+  const context = React.useSyncExternalStore(shotStore.subscribe, shotStore.get)
+  const [host, setHost] = React.useState(undefined)
+  const [phase, setPhase] = React.useState('idle')
+  const [note, setNote] = React.useState('')
+  React.useEffect(() => {
+    // The strip is created, destroyed and re-created as panes open, split and
+    // close, so follow the document rather than measuring it once. Frames are
+    // coalesced because React commits fire many mutations in a row.
+    let frame = 0
+    const find = () => {
+      frame = 0
+      setHost(document.querySelector(SHOT_CHROME_SELECTOR) ?? undefined)
+    }
+    const schedule = () => {
+      if (frame === 0) frame = window.requestAnimationFrame(find)
+    }
+    find()
+    const observer = new MutationObserver(schedule)
+    observer.observe(document.body, { childList: true, subtree: true })
+    return () => {
+      if (frame !== 0) window.cancelAnimationFrame(frame)
+      observer.disconnect()
+    }
+  }, [])
+  React.useEffect(() => {
+    if (note === '') return undefined
+    const timer = setTimeout(() => {
+      setNote('')
+      setPhase('idle')
+    }, 4000)
+    return () => clearTimeout(timer)
+  }, [note])
+  if (!on || context === undefined || host === undefined) return null
+  const take = async () => {
+    if (phase === 'busy') return
+    const node = panelTarget()
+    if (node === undefined) {
+      setPhase('failed')
+      setNote('open a panel on the right first')
+      return
+    }
+    setPhase('busy')
+    setNote('')
+    try {
+      const blob = await capturePanel(node)
+      const copied = await copyImage(blob)
+      const conversation = context.conversation()
+      if (conversation === undefined) throw new Error('the chat is not available')
+      // Two calls, because the Shell splits the job: `createDrafts` mints a
+      // draft attachment and starts its upload (it is not on the public
+      // `IConversation` type, but it is the only File -> id entry point and the
+      // product reaches it the same way), and the composer's own `inputActions`
+      // puts those ids in the message. Skipping the second call leaves the
+      // image uploaded but attached to nothing.
+      const drafts = conversation.createDrafts(
+        context.sessionId,
+        [new File([blob], shotName(), { type: 'image/png' })],
+        true,
+      )
+      if (drafts === undefined || drafts.length === 0) throw new Error('the chat refused the image')
+      const actions = context.actions
+      if (actions === undefined || typeof actions.addAttachments !== 'function') {
+        throw new Error('this Shell offers no composer to attach to')
+      }
+      if (!actions.addAttachments(drafts.map((draft) => draft.id))) {
+        throw new Error('the composer refused the image')
+      }
+      setPhase('done')
+      setNote(copied ? 'Right panel copied and attached' : 'Right panel attached, clipboard refused')
+    } catch (error) {
+      setPhase('failed')
+      setNote(error instanceof Error ? error.message : String(error))
+      console.warn('[aryacode-polish] panel screenshot failed:', error)
+    }
+  }
+  const tip = note !== ''
+    ? note
+    : phase === 'busy' ? 'Capturing the right panel…' : 'Screenshot this panel into the chat (also copies it)'
+  const glyph = phase === 'done'
+    ? React.createElement(CheckGlyph, null)
+    : phase === 'failed'
+      ? React.createElement(BangGlyph, null)
+      : React.createElement(CameraGlyph, null)
+  const button = React.createElement('button', {
+    type: 'button',
+    'data-polish-shot': phase,
+    'aria-label': 'Screenshot this panel',
+    disabled: phase === 'busy',
+    onClick: () => { void take() },
+    onMouseEnter: (event) => { event.currentTarget.style.background = 'var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,0.06))' },
+    onMouseLeave: (event) => { event.currentTarget.style.background = 'transparent' },
+    style: {
+      ...SHOT_BUTTON_STYLE,
+      color: phase === 'failed'
+        ? 'var(--dsw-alias-label-error, #b42318)'
+        : phase === 'done'
+          ? 'var(--dsw-alias-label-primary, #111418)'
+          : SHOT_BUTTON_STYLE.color,
+      cursor: phase === 'busy' ? 'progress' : 'pointer',
+    },
+  }, glyph)
+  const Tooltip = primitives === undefined ? undefined : primitives.Tooltip
+  return ReactDOM.createPortal(
+    Tooltip === undefined
+      ? button
+      : React.createElement(Tooltip, { label: tip, side: 'bottom', delayMs: 500 }, button),
+    host,
+  )
+}
+
+/**
+ * Everything this bundle draws at the root: the GitHub dialog and the right
+ * panel's camera button. `shell.overlay` is a single slot, so both live in one
+ * registration instead of competing for it.
+ * @param props - overlay slot props (`configForms`, `createWorkspace`).
+ * @returns the fragment.
+ */
+function ShellOverlay(props) {
+  return React.createElement(React.Fragment, null,
+    React.createElement(GitHubPanel, props),
+    React.createElement(PanelShotButton, props))
+}
+
 return {
   inject: ['slots'],
   /**
@@ -1502,6 +1860,25 @@ return {
       order: 2,
       inject: () => ({ configForms }),
     }, CostPill))
+    // The camera button belongs to the panel header, which is a root surface, so
+    // the composer dock only publishes the session context it needs. The chat
+    // service is looked up late through ctx.get: it is a plain service, and a
+    // Shell without it simply reports "the chat is not available".
+    ctx.slots.inject('conversation.composer.dock', () => ctx.slots.register({
+      name: 'conversation.composer.dock',
+      id: 'polish-shot',
+      order: 3,
+      inject: () => ({
+        configForms,
+        conversation: () => {
+          try {
+            return ctx.get('conversation')
+          } catch {
+            return undefined
+          }
+        },
+      }),
+    }, PanelShotContext))
     // The account Remote namespace is optional: a Shell with no account still gets
     // the Configure page and the cost pill, and only loses the balance line.
     ctx.inject(['remote', 'remote.account'], (accountCtx) => {
@@ -1554,7 +1931,7 @@ return {
         name: 'shell.overlay',
         id: 'polish-github',
         inject: () => ({ configForms, createWorkspace }),
-      }, GitHubPanel))
+      }, ShellOverlay))
       // The footer keeps the sign-in state, not an add button: adding a
       // workspace belongs in the "+" menu, where the Shell says it does.
       githubCtx.slots.inject('sidebar.footer.action', () => githubCtx.slots.register({

package/client/switches.json

@@ -30,6 +30,12 @@
       "label": "Add a workspace from this PC or GitHub",
       "description": "Put an On this PC / GitHub repository source menu behind the Workspaces + button.",
       "defaultOn": true
+    },
+    {
+      "key": "panelScreenshot",
+      "label": "Right-panel screenshot",
+      "description": "Copy the open right panel into the chat as an image, and onto the clipboard.",
+      "defaultOn": true
     }
   ]
 }

package/docs/panel-screenshot.md

@@ -0,0 +1,98 @@
+# Right-panel screenshot
+
+The right panel grows a camera button in its own top-right corner, beside the
+Shell's split, expand and close controls. One click photographs the right
+panel's **open tab**, puts the picture on the clipboard, and attaches it to the
+message being written — the same place a pasted screenshot lands, so it can be
+sent with the next prompt without touching another tool.
+
+This page records how that works, and — more importantly — what it cannot do,
+because the honest limits are the part that decides whether it replaces a snip
+tool for a given job.
+
+## What it captures
+
+The right panel is ordinary DOM in the same document as the chat, so the target
+is found with an attribute selector rather than a private class name:
+
+| target | selector |
+|---|---|
+| the open tab's body | `[data-sidebar-right-session][data-sidebar-right-open] [data-dockkit-pane-active]` |
+| the panel itself (fallback) | `[data-sidebar-right-session][data-sidebar-right-open]` |
+| the bottom panel (fallback) | `[data-dsh-panel][data-dsh-bottom-panel]` |
+
+The first selector is what makes this work for both right sides: the Shell's own
+sidebar and `dsh-better-sidebar` both render their tabs through the same dock
+container, so the *active pane* is the current tab in either one. Targets are
+skipped when they are smaller than 48 px in either direction, which keeps a
+collapsed panel from producing a sliver.
+
+## How the picture is made
+
+`html2canvas` (vendored at `vendor/html2canvas.min.js`, inlined into
+`lib/client.js` by `scripts/build-client.mjs`) rasterises the element in the page
+at `min(2, max(1.5, devicePixelRatio))`. The background is the first opaque
+ancestor colour, so a transparent panel still reads as a surface.
+
+This is the only route a plugin has. The Shell exposes:
+
+- **no capture bridge** — the desktop preload exposes `__DSH_DIRECTORY_PICKER__`,
+  `__DSH_HOST_PATHS__`, `dshDesktopBoot`, `dshDesktop`, `dshPlatform`, and no
+  screenshot channel;
+- **no working `getDisplayMedia`** — the API exists, but nothing installs a
+  display-media request handler on the app's session, so the call is refused
+  outright rather than offering a source;
+- **no Host route to pixels** — the Host runs in a separate process and has no
+  access to the renderer.
+
+Capture therefore happens in the renderer, from the DOM, which is also why it
+works identically in the web build and in the app.
+
+## What it cannot capture
+
+1. **The browser tab and the HTML preview.** Both render inside an
+   `<iframe>`/`<webview>` whose document is not readable from the page, so a
+   rasteriser sees an empty rectangle there. Everything else — files, documents,
+   images, diffs, plans, subagent chats, plugin tabs — is plain DOM and captures
+   normally.
+2. **Anything outside the app window.** The button photographs a panel, not the
+   desktop, so a snip tool still wins for a region spanning two applications or a
+   native dialog.
+3. **Live pixels that refuse to be copied.** A cross-origin image without CORS
+   headers taints the canvas and would throw; the capture fails with a notice
+   instead of producing a blank picture. The Shell's own panels are same-origin,
+   so this only shows up with third-party content.
+
+## How the image reaches the message
+
+Two calls, in this order, mirroring the composer's own intake:
+
+```js
+// mints the draft attachment and starts its upload
+const drafts = ctx.get('conversation').createDrafts(sessionId, [file], true)
+// puts the minted ids in the composer, where the user can see and remove them
+props.inputActions.addAttachments(drafts.map((draft) => draft.id))
+```
+
+`createDrafts` is not part of the public `IConversation` interface, but it is the
+only `File` → id entry point in the Shell, and the product itself reaches it the
+same way. `addAttachments` is the public half: it is a standard prop on
+session-scoped slots, which the composer row already is. The button itself is
+root-level (it sits over the panel, not inside its DOM), so the composer dock
+keeps an invisible entry that publishes the session context into a store; the
+button reads that store and disappears when no Session is open. The bytes travel over
+the Shell's own upload route, so a screenshot behaves exactly like a pasted
+image, including for the model that receives it.
+
+## When it refuses
+
+The button reports its own state instead of failing silently:
+
+- no panel open → *open a panel on the right first*
+- clipboard blocked → the image is still attached, with *right panel attached,
+  clipboard refused*
+- anything else → the reason in the row, plus
+  `[aryacode-polish] panel screenshot failed:` in the console
+
+The switch is in the row's Configure page like every other surface, and turning
+it off removes the button without unloading anything else.

package/entries/registry.js

@@ -68,6 +68,12 @@ export const features = [
     defaultOn: true,
     mount: mountFolders,
   },
+  {
+    id: 'panelScreenshot',
+    label: 'Right-panel screenshot',
+    description: 'Copy the open right panel into the chat as an image, and onto the clipboard.',
+    defaultOn: true,
+  },
 ]
 
 /**