@aryacode/dsh-aryacode-polish 0.6.2 → 0.8.1

package/client/face.js

@@ -678,6 +678,29 @@ const githubStore = (() => {
   }
 })()
 
+/**
+ * The last GitHub status anyone read, shared by the dialog and the footer line.
+ *
+ * The footer used to re-read only on window focus, so signing out in the dialog
+ * left `GitHub · KonnectSuite` on screen while the CLI was already signed out (or
+ * signed in as another account). One store, written by every read, keeps them equal.
+ */
+const githubStatusStore = (() => {
+  let value
+  const listeners = new Set()
+  return {
+    get: () => value,
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => { listeners.delete(listener) }
+    },
+    set(next) {
+      value = next
+      for (const listener of listeners) listener()
+    },
+  }
+})()
+
 /**
  * Post one action to the GitHub route.
  * @param action - `status`, `repos` or `clone`.
@@ -747,6 +770,20 @@ const GITHUB_LIST_STYLE = {
   borderTop: '0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.12))',
 }
 
+/** A secondary button in the sign-in block, sized like the harness's own. */
+const GITHUB_BUTTON_STYLE = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '4px 10px',
+  border: '0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.16))',
+  borderRadius: 'var(--dsw-radius-sm, 6px)',
+  background: 'transparent',
+  color: 'inherit',
+  font: 'inherit',
+  cursor: 'pointer',
+}
+
 const GITHUB_ROW_STYLE = {
   display: 'flex',
   alignItems: 'center',
@@ -762,8 +799,7 @@ const GITHUB_ROW_STYLE = {
   borderBottom: '0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.08))',
 }
 
-const GITHUB_INPUT_STYLE = {
-  width: '100%',
+const GITHUB_INPUT_STYLE = {  width: '100%',
   boxSizing: 'border-box',
   padding: '6px 8px',
   font: 'inherit',
@@ -793,6 +829,33 @@ function GitHubPanel(props) {
   const [query, setQuery] = React.useState('')
   const [error, setError] = React.useState('')
   const [busy, setBusy] = React.useState('')
+  const [signIn, setSignIn] = React.useState({ state: 'idle', code: '', url: '', reason: '' })
+  const [confirmOut, setConfirmOut] = React.useState(false)
+  const [confirmAll, setConfirmAll] = React.useState(false)
+  const [notice, setNotice] = React.useState('')
+  const [copied, setCopied] = React.useState(false)
+
+  /** Put the one-time code on the clipboard, so it can be pasted in the browser. */
+  const copyCode = () => {
+    const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard
+    if (clipboard === undefined || typeof clipboard.writeText !== 'function') return
+    Promise.resolve(clipboard.writeText(signIn.code))
+      .then(() => {
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      })
+      .catch(() => setCopied(false))
+  }
+
+  /** Re-read the session, and the repository list when it is signed in. */
+  const refresh = () => Promise.resolve()
+    .then(() => githubCall('status'))
+    .then(status => {
+      setAccount(status)
+      githubStatusStore.set(status)
+      if (status.signedIn !== true) return undefined
+      return githubCall('repos').then(list => setRepos(Array.isArray(list.repos) ? list.repos : []))
+    })
 
   React.useEffect(() => {
     if (!open || !enabled) return undefined
@@ -801,17 +864,9 @@ function GitHubPanel(props) {
     setError('')
     setBusy('')
     setQuery('')
-    Promise.resolve()
-      .then(() => githubCall('status'))
-      .then(status => {
-        if (!live) return undefined
-        setAccount(status)
-        if (status.signedIn !== true) return undefined
-        return githubCall('repos').then(list => {
-          if (!live) return
-          setRepos(Array.isArray(list.repos) ? list.repos : [])
-        })
-      })
+    setConfirmOut(false)
+    setSignIn({ state: 'idle', code: '', url: '', reason: '' })
+    refresh()
       .then(() => { if (live) setPhase('ready') })
       .catch(reason => {
         if (!live) return
@@ -821,6 +876,29 @@ function GitHubPanel(props) {
     return () => { live = false }
   }, [open, enabled])
 
+  // The device flow is a long poll: ask the Host what the CLI child reports.
+  // `starting` has to be polled too — the Host answers `starting` the moment the
+  // child is spawned and only reports the code a tick later, so polling on
+  // `pending` alone left the dialog asking for a code that had already arrived.
+  React.useEffect(() => {
+    if (!open || (signIn.state !== 'pending' && signIn.state !== 'starting')) return undefined
+    const timer = setInterval(() => {
+      Promise.resolve()
+        .then(() => githubCall('loginStatus'))
+        .then(answer => {
+          setSignIn({ state: answer.state, code: answer.code ?? '', url: answer.url ?? '', reason: answer.reason ?? '' })
+          if (answer.state === 'succeeded') {
+            setPhase('loading')
+            return refresh().then(() => setPhase('ready'))
+          }
+          if (answer.state === 'failed' || answer.state === 'cancelled') setError(answer.reason ?? 'Sign-in did not finish.')
+          return undefined
+        })
+        .catch(reason => setError(reason instanceof Error ? reason.message : String(reason)))
+    }, 2000)
+    return () => clearInterval(timer)
+  }, [open, signIn.state])
+
   React.useEffect(() => {
     if (!open) return undefined
     const onKey = event => { if (event.key === 'Escape') githubStore.set(false) }
@@ -865,6 +943,78 @@ function GitHubPanel(props) {
       })
   }
 
+  /**
+   * Start the CLI's device flow. The Host runs it, so this dialog only renders
+   * the code the CLI printed and the page it wants opened.
+   */
+  const beginSignIn = () => {
+    setError('')
+    setSignIn({ state: 'starting', code: '', url: '', reason: '' })
+    Promise.resolve()
+      .then(() => githubCall('login'))
+      .then(answer => setSignIn({
+        state: answer.state ?? 'failed',
+        code: answer.code ?? '',
+        url: answer.url ?? '',
+        reason: answer.reason ?? '',
+      }))
+      .catch(reason => {
+        setSignIn({ state: 'failed', code: '', url: '', reason: '' })
+        setError(reason instanceof Error ? reason.message : String(reason))
+      })
+  }
+
+  const cancelSignIn = () => {
+    Promise.resolve()
+      .then(() => githubCall('loginCancel'))
+      .then(() => setSignIn({ state: 'idle', code: '', url: '', reason: '' }))
+      .catch(() => setSignIn({ state: 'idle', code: '', url: '', reason: '' }))
+  }
+
+  /** Sign the CLI out, which is what every read in this feature depends on. */
+  const signOutNow = () => {
+    setConfirmOut(false)
+    setBusy('sign-out')
+    setError('')
+    setNotice('')
+    Promise.resolve()
+      .then(() => githubCall('logout'))
+      .then(answer => {
+        const remaining = typeof answer.remaining === 'string' ? answer.remaining : ''
+        setAccount(undefined)
+        setRepos([])
+        setSignIn({ state: 'idle', code: '', url: '', reason: '' })
+        setNotice(remaining === ''
+          ? `Signed out of ${String(answer.login)}.`
+          : `Signed out of ${String(answer.login)}. The GitHub CLI is now signed in as ${remaining}.`)
+        return refresh()
+      })
+      .catch(reason => setError(reason instanceof Error ? reason.message : String(reason)))
+      .then(() => setBusy(''))
+  }
+
+  /** Sign every account in the CLI's keyring out, so no silent fallback is left. */
+  const signOutAllNow = () => {
+    setConfirmAll(false)
+    setBusy('sign-out-all')
+    setError('')
+    setNotice('')
+    Promise.resolve()
+      .then(() => githubCall('logoutAll'))
+      .then(answer => {
+        const logins = Array.isArray(answer.logins) ? answer.logins.map(String) : []
+        setAccount(undefined)
+        setRepos([])
+        setSignIn({ state: 'idle', code: '', url: '', reason: '' })
+        setNotice(logins.length === 0
+          ? 'No GitHub account was signed in.'
+          : `Signed out of ${logins.join(', ')}.`)
+        return refresh()
+      })
+      .catch(reason => setError(reason instanceof Error ? reason.message : String(reason)))
+      .then(() => setBusy(''))
+  }
+
   const rows = visible.slice(0, 200).map(repo => React.createElement('button', {
     key: repo.fullName,
     type: 'button',
@@ -892,18 +1042,45 @@ function GitHubPanel(props) {
     React.createElement('div', { style: GITHUB_CARD_STYLE, role: 'dialog', 'aria-label': 'Add a workspace from GitHub' },
       React.createElement('div', { style: { ...PANEL_TITLE_STYLE, marginBottom: '4px' } },
         React.createElement('span', null, 'Add a workspace from GitHub'),
-        React.createElement('button', {
-          type: 'button',
-          onClick: () => githubStore.set(false),
-          style: { border: 'none', background: 'transparent', color: 'inherit', font: 'inherit', cursor: 'pointer', opacity: 0.7 },
-          'aria-label': 'Close',
-        }, '×')),
+        React.createElement('span', { style: { display: 'flex', alignItems: 'center', gap: '10px' } },
+          signedIn && (Array.isArray(account?.accounts) ? account.accounts.length : 0) > 1
+            ? React.createElement('button', {
+              type: 'button',
+              'data-polish-github': 'signoutall',
+              disabled: busy === 'sign-out-all',
+              onClick: () => { if (confirmAll) signOutAllNow(); else setConfirmAll(true) },
+              title: 'Sign every GitHub account in the CLI out of this machine',
+              style: { border: 'none', background: 'transparent', color: 'inherit', font: 'inherit', cursor: 'pointer', opacity: 0.7, padding: 0 },
+            }, busy === 'sign-out-all' ? 'Signing out…' : confirmAll ? 'Sign out all now?' : 'Sign out all')
+            : null,
+          signedIn
+            ? React.createElement('button', {
+              type: 'button',
+              'data-polish-github': 'signout',
+              disabled: busy === 'sign-out',
+              onClick: () => { if (confirmOut) signOutNow(); else setConfirmOut(true) },
+              title: 'Sign the GitHub CLI out of this machine',
+              style: { border: 'none', background: 'transparent', color: 'inherit', font: 'inherit', cursor: 'pointer', opacity: 0.7, padding: 0 },
+            }, busy === 'sign-out' ? 'Signing out…' : confirmOut ? 'Sign out now?' : 'Sign out')
+            : null,
+          React.createElement('button', {
+            type: 'button',
+            onClick: () => githubStore.set(false),
+            style: { border: 'none', background: 'transparent', color: 'inherit', font: 'inherit', cursor: 'pointer', opacity: 0.7 },
+            'aria-label': 'Close',
+          }, '×'))),
       React.createElement('div', { style: { opacity: 0.75, minHeight: '18px' } },
         phase === 'loading' && !signedIn ? 'Checking the GitHub CLI session…' : null,
         signedIn ? `Signed in as ${String(account.login)} · cloning into ${root}` : null,
         !signedIn && phase !== 'loading'
-          ? 'The GitHub CLI is not signed in. Run `gh auth login` in a terminal, then reopen this dialog.'
+          ? 'GitHub is not signed in on this machine. The sign-in below is the GitHub CLI device flow, so no token is ever typed here or stored by this plugin.'
           : null),
+      notice === ''
+        ? null
+        : React.createElement('div', {
+          'data-polish-github': 'notice',
+          style: { marginTop: '6px', opacity: 0.85 },
+        }, notice),
       signedIn
         ? React.createElement('input', {
           style: { ...GITHUB_INPUT_STYLE, marginTop: '10px' },
@@ -917,6 +1094,48 @@ function GitHubPanel(props) {
       error !== ''
         ? React.createElement('div', { style: { marginTop: '10px', color: 'var(--dsw-alias-label-error, #b42318)' } }, error)
         : null,
+      !signedIn && phase !== 'loading'
+        ? React.createElement('div', { style: { marginTop: '12px' } },
+          signIn.state === 'pending' || signIn.state === 'starting'
+            ? React.createElement('div', null,
+              React.createElement('div', { style: { marginBottom: '8px' } },
+                signIn.state === 'starting' ? 'Asking the GitHub CLI for a code…' : 'Approve this one-time code in your browser:'),
+              signIn.code === ''
+                ? null
+                : React.createElement('div', {
+                  'data-polish-github': 'code',
+                  style: {
+                    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+                    fontSize: '18px',
+                    letterSpacing: '2px',
+                    padding: '8px 10px',
+                    borderRadius: 'var(--dsw-radius-sm, 6px)',
+                    border: '0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.12))',
+                  },
+                }, signIn.code),
+              React.createElement('div', { style: { display: 'flex', gap: '8px', marginTop: '10px', flexWrap: 'wrap' } },
+                React.createElement('button', { type: 'button', onClick: copyCode, style: GITHUB_BUTTON_STYLE, 'data-polish-github': 'copy' },
+                  copied ? 'Copied' : 'Copy code'),
+                React.createElement('a', {
+                  href: signIn.url === '' ? 'https://github.com/login/device' : signIn.url,
+                  target: '_blank',
+                  rel: 'noreferrer',
+                  style: { ...GITHUB_BUTTON_STYLE, textDecoration: 'none', display: 'inline-flex', alignItems: 'center' },
+                }, 'Open the device page'),
+                React.createElement('button', { type: 'button', onClick: cancelSignIn, style: GITHUB_BUTTON_STYLE, 'data-polish-github': 'cancel' }, 'Cancel')))
+            : React.createElement('div', null,
+              React.createElement('button', {
+                type: 'button',
+                onClick: beginSignIn,
+                // The attribute belongs on the element: inside `style` it is ignored,
+                // which is exactly why the first verification could not find this button.
+                'data-polish-github': 'signin',
+                style: GITHUB_BUTTON_STYLE,
+              }, 'Sign in with GitHub'),
+              signIn.state === 'failed' && signIn.reason !== ''
+                ? React.createElement('div', { style: { marginTop: '8px', color: 'var(--dsw-alias-label-error, #b42318)' } }, signIn.reason)
+                : null))
+        : null,
       signedIn
         ? React.createElement('div', { style: GITHUB_LIST_STYLE, 'data-polish-github-list': String(visible.length) },
           phase === 'loading' && visible.length === 0 ? React.createElement('div', { style: { padding: '10px 4px', opacity: 0.7 } }, 'Loading repositories…') : null,
@@ -961,6 +1180,9 @@ const FOOT_ROW_STYLE = {
  */
 function GithubStatus(props) {
   const enabled = useSwitch(props.configForms, 'githubWorkspace', true)
+  // The dialog publishes every status it reads, so a sign-out in the dialog lands
+  // in this line immediately instead of waiting for the next window focus.
+  const shared = React.useSyncExternalStore(githubStatusStore.subscribe, githubStatusStore.get)
   const [status, setStatus] = React.useState(undefined)
   React.useEffect(() => {
     if (!enabled) return undefined
@@ -968,7 +1190,11 @@ function GithubStatus(props) {
     const read = () => {
       Promise.resolve()
         .then(() => githubCall('status'))
-        .then(next => { if (live) setStatus(next) })
+        .then(next => {
+          if (!live) return
+          setStatus(next)
+          githubStatusStore.set(next)
+        })
         .catch(() => { if (live) setStatus({ signedIn: false }) })
     }
     read()
@@ -980,15 +1206,16 @@ function GithubStatus(props) {
     }
   }, [enabled])
   if (!enabled) return null
-  const signedIn = status !== undefined && status.signedIn === true
-  const label = status === undefined
+  const current = shared === undefined ? status : shared
+  const signedIn = current !== undefined && current.signedIn === true
+  const label = current === undefined
     ? 'GitHub · checking…'
-    : signedIn ? `GitHub · ${String(status.login)}` : 'GitHub · signed out'
+    : signedIn ? `GitHub · ${String(current.login)}` : 'GitHub · signed out'
   return React.createElement('div', { style: { padding: '2px 8px 0', minWidth: 0 } },
     React.createElement('button', {
       type: 'button',
       'data-polish-github': 'status',
-      'data-polish-github-state': signedIn ? 'in' : status === undefined ? 'checking' : 'out',
+      'data-polish-github-state': signedIn ? 'in' : current === undefined ? 'checking' : 'out',
       title: signedIn
         ? 'Add a workspace from GitHub'
         : 'Sign in with the GitHub CLI (gh auth login), then add a repository as a workspace',
@@ -1250,6 +1477,349 @@ 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'
+}
+
+const SHOT_GLYPH_STYLE = { width: '14px', height: '14px', flex: 'none', display: 'block' }
+
+/**
+ * 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: 14,
+    height: 14,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': 'true',
+    style: SHOT_GLYPH_STYLE,
+  },
+  React.createElement('path', { d: 'M2 5.5h2.2l1-1.5h5.6l1 1.5H14v7H2z' }),
+  React.createElement('circle', { cx: 8, cy: 9, r: 2.2 }))
+}
+
+/**
+ * Where the camera button is drawn: the panel's own top-right corner, just
+ * inside the frame and left of the Shell's expand/close controls.
+ */
+const SHOT_ANCHOR_EDGE = 8
+const SHOT_ANCHOR_BUTTON = 28
+const SHOT_ANCHOR_CONTROLS = 96
+
+/**
+ * Where the open right panel's header ends, in viewport coordinates.
+ * @returns the corner, or undefined when no panel is open.
+ */
+function shotAnchor() {
+  const panel = document.querySelector('[data-sidebar-right-session][data-sidebar-right-open]')
+  if (panel === null) return undefined
+  const rect = panel.getBoundingClientRect()
+  if (rect.width < 120 || rect.height < 120) return undefined
+  return {
+    top: rect.top + SHOT_ANCHOR_EDGE,
+    left: Math.max(rect.left + SHOT_ANCHOR_EDGE, rect.right - SHOT_ANCHOR_CONTROLS - SHOT_ANCHOR_BUTTON),
+  }
+}
+
+/**
+ * The composer context the overlay button attaches through.
+ *
+ * The camera button lives in a root overlay so it can sit in the panel header,
+ * 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 overlay; with no open Session the store is empty and the button hides.
+ */
+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)
+    },
+  }
+})()
+
+const SHOT_BUTTON_STYLE = {
+  position: 'fixed',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: SHOT_ANCHOR_BUTTON + 'px',
+  height: SHOT_ANCHOR_BUTTON + 'px',
+  padding: '0',
+  border: 'none',
+  borderRadius: 'var(--dsw-radius-sm, 6px)',
+  background: 'transparent',
+  color: 'var(--dsw-alias-label-tertiary, #61666b)',
+  cursor: 'pointer',
+  zIndex: 40,
+}
+
+/**
+ * Invisible composer-dock entry that publishes the session context the overlay
+ * 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 pinned to the right panel's top-right corner: photographs the
+ * open tab, copies it, and attaches it to the message being written.
+ * @param props - slot props plus the late `conversation` lookup.
+ * @returns the button, or null while there is nothing to shoot or nowhere to
+ * attach.
+ */
+function PanelShotButton(props) {
+  const on = useSwitch(props.configForms, 'panelScreenshot', true)
+  const context = React.useSyncExternalStore(shotStore.subscribe, shotStore.get)
+  const [anchor, setAnchor] = React.useState(() => shotAnchor())
+  const [phase, setPhase] = React.useState('idle')
+  const [note, setNote] = React.useState('')
+  React.useEffect(() => {
+    const measure = () => setAnchor(shotAnchor())
+    measure()
+    // The panel opens, closes, splits and resizes without any event this
+    // component would otherwise hear, so watch the attribute and the geometry.
+    const observer = new MutationObserver(measure)
+    observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['data-sidebar-right-open', 'data-dockkit-pane-active'] })
+    window.addEventListener('resize', measure)
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', measure)
+    }
+  }, [])
+  React.useEffect(() => {
+    if (note === '') return undefined
+    const timer = setTimeout(() => {
+      setNote('')
+      setPhase('idle')
+    }, 4000)
+    return () => clearTimeout(timer)
+  }, [note])
+  if (!on || context === undefined || anchor === 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 label = phase === 'done' ? '✓' : phase === 'failed' ? '!' : '●'
+  return React.createElement(React.Fragment, null,
+    React.createElement('span', {
+      'data-polish-shot-anchor': 'panel',
+      style: { position: 'fixed', top: anchor.top + 'px', left: anchor.left + 'px', width: '0', height: '0' },
+    }),
+    React.createElement('button', {
+      type: 'button',
+      'data-polish-shot': phase,
+      title: note === '' ? 'Screenshot this panel into the chat (also copies it)' : note,
+      '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,
+        top: anchor.top + 'px',
+        left: anchor.left + 'px',
+        color: phase === 'failed'
+          ? 'var(--dsw-alias-label-error, #b42318)'
+          : 'var(--dsw-alias-label-tertiary, #61666b)',
+        opacity: phase === 'busy' ? 0.5 : 1,
+        cursor: phase === 'busy' ? 'progress' : 'pointer',
+        fontSize: '11px',
+      },
+    },
+    phase === 'done' || phase === 'failed'
+      ? React.createElement('span', { 'aria-hidden': 'true' }, label)
+      : React.createElement(CameraGlyph, null)),
+    note === ''
+      ? null
+      : React.createElement('span', {
+        'data-polish-shot-note': phase,
+        style: {
+          position: 'fixed',
+          top: anchor.top + SHOT_ANCHOR_BUTTON + 6 + 'px',
+          left: Math.max(12, anchor.left - 140) + 'px',
+          maxWidth: '260px',
+          padding: '3px 8px',
+          borderRadius: 'var(--dsw-radius-sm, 6px)',
+          background: 'Canvas',
+          boxShadow: 'var(--dsw-elevation-prominent, 0 3px 8px rgba(0,0,0,0.12))',
+          color: phase === 'failed' ? 'var(--dsw-alias-label-error, #b42318)' : 'var(--dsw-alias-label-secondary, #61666b)',
+          fontSize: '12px',
+          lineHeight: '18px',
+          whiteSpace: 'nowrap',
+          zIndex: 41,
+        },
+      }, note))
+}
+
+/**
+ * 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'],
   /**
@@ -1275,6 +1845,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) => {
@@ -1327,7 +1916,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({