@aryacode/dsh-aryacode-polish 0.4.4 → 0.6.0

package/lib/client.js

@@ -25,11 +25,23 @@ window.__ModuleLoader__.load({
         "label": "Open workspace folder",
         "description": "Add an “Open workspace folder” row to a Session’s menu that opens its workspace in the file browser.",
         "defaultOn": true
+      },
+      {
+        "key": "githubWorkspace",
+        "label": "Add a workspace from GitHub",
+        "description": "Sign in with the GitHub CLI, browse your repositories, and clone one as a workspace.",
+        "defaultOn": true
+      },
+      {
+        "key": "workspaceSources",
+        "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
       }
     ]
     const ROW_ID = "polish"
     const ROW_KEY = "@aryacode/dsh-aryacode-polish" + '#' + ROW_ID
-    const CLIENT_VERSION = "0.4.4"
+    const CLIENT_VERSION = "0.6.0"
 
     /**
      * The two pure decisions behind the balance line: which wallet to show, and how
@@ -621,6 +633,7 @@ window.__ModuleLoader__.load({
      */
     const BALANCE_RETRY_DELAYS = [1500, 5000, 15000, 30000]
 
+
     /**
      * The remaining-balance line in the sidebar foot.
      *
@@ -685,22 +698,24 @@ window.__ModuleLoader__.load({
         return React.createElement('div', { 'data-polish-balance': 'empty', style: { display: 'none' } })
       }
       const money = formatBalance(wallet)
+      // The foot is a single row shared with the GitHub entry, so the amount stays
+      // bare: a tooltip names it, and nothing here competes for width.
       return React.createElement('div', {
         title: 'Remaining account balance',
+        'data-polish-balance': 'ready',
         style: {
           display: 'flex',
           alignItems: 'center',
           gap: '6px',
-          padding: '2px 8px 4px',
+          padding: '2px 4px 4px 8px',
           fontSize: '12px',
           lineHeight: '16px',
-          minWidth: 0,
-          overflow: 'hidden',
+          flex: '0 0 auto',
           whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
           opacity: 0.75,
+          fontVariantNumeric: 'tabular-nums',
         },
-      }, props.wide === false ? money : 'Balance ' + money)
+      }, money)
     }
 
     /**
@@ -771,6 +786,604 @@ window.__ModuleLoader__.load({
       return React.createElement('button', { type: 'button', role: 'menuitem', onClick: onSelect }, label)
     }
 
+    /** The Host route the GitHub halves talk over. Document-relative, like every app route. */
+    const GITHUB_ROUTE = 'api/polish.github'
+
+    /**
+     * Whether the GitHub panel is open. One store for the whole bundle: the footer
+     * row opens it, and the overlay panel is the only reader.
+     */
+    const githubStore = (() => {
+      let open = false
+      // Set when the dialog was opened from the add-workspace flow: the flow owns
+      // workspace creation through `onPicked`, so a clone hands it the path rather
+      // than calling the Workspace service itself.
+      let picker
+      const listeners = new Set()
+      const publish = () => { for (const listener of listeners) listener() }
+      return {
+        isOpen: () => open,
+        subscribe(listener) {
+          listeners.add(listener)
+          return () => { listeners.delete(listener) }
+        },
+        set(next) {
+          if (open === next) return
+          open = next
+          if (!next) picker = undefined
+          publish()
+        },
+        /** Open the dialog, optionally on behalf of the add-workspace flow. */
+        open(onPicked) {
+          picker = onPicked
+          if (open) return
+          open = true
+          publish()
+        },
+        /** Take the flow's `onPicked` once, so a second clone cannot reuse it. */
+        takePicker() {
+          const current = picker
+          picker = undefined
+          return current
+        },
+      }
+    })()
+
+    /**
+     * Post one action to the GitHub route.
+     * @param action - `status`, `repos` or `clone`.
+     * @param extra - fields the action needs.
+     * @returns the route's `value`, or throws with its own message.
+     */
+    async function githubCall(action, extra) {
+      const response = await fetch(GITHUB_ROUTE, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ action, ...(extra ?? {}) }),
+      })
+      const payload = await response.json().catch(() => undefined)
+      if (payload === undefined || typeof payload !== 'object') {
+        throw new Error(`the Host answered ${String(response.status)}`)
+      }
+      if (payload.ok !== true) throw new Error(payload.error || 'GitHub request failed')
+      return payload.value
+    }
+
+    /** The Host route the folder browser talks over. Document-relative, like every app route. */
+    const FOLDERS_ROUTE = 'api/polish.folders'
+
+    /**
+     * Post one action to the folder route.
+     * @param body - `{ action: 'roots' }` or `{ action: 'ls', path }`.
+     * @returns the route's listing, or throws with its own message.
+     */
+    async function foldersCall(body) {
+      const response = await fetch(FOLDERS_ROUTE, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      const payload = await response.json().catch(() => undefined)
+      if (payload === undefined || typeof payload !== 'object') {
+        throw new Error(`the Host answered ${String(response.status)}`)
+      }
+      if (payload.error !== undefined) throw new Error(String(payload.error))
+      return payload
+    }
+
+    /** Modal backdrop and panel skin, matching the Shell's own dialogs. */
+    const GITHUB_BACKDROP_STYLE = {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 1200,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'rgba(16, 18, 22, 0.32)',
+    }
+
+    const GITHUB_CARD_STYLE = {
+      ...PANEL_STYLE,
+      position: 'static',
+      width: 'min(560px, calc(100vw - 32px))',
+      maxHeight: 'min(560px, calc(100vh - 64px))',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+    }
+
+    const GITHUB_LIST_STYLE = {
+      marginTop: '10px',
+      overflowY: 'auto',
+      borderTop: '0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.12))',
+    }
+
+    const GITHUB_ROW_STYLE = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      width: '100%',
+      padding: '8px 4px',
+      border: 'none',
+      background: 'transparent',
+      color: 'inherit',
+      font: 'inherit',
+      textAlign: 'left',
+      cursor: 'pointer',
+      borderBottom: '0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.08))',
+    }
+
+    const GITHUB_INPUT_STYLE = {
+      width: '100%',
+      boxSizing: 'border-box',
+      padding: '6px 8px',
+      font: 'inherit',
+      color: 'inherit',
+      background: 'transparent',
+      border: '0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.2))',
+      borderRadius: 'var(--dsw-radius-sm, 6px)',
+    }
+
+    /**
+     * The add-a-workspace-from-GitHub dialog.
+     *
+     * Sign-in is the GitHub CLI's own session: the Host asks `gh` for the token it
+     * already holds, so this dialog never collects a credential. A clone becomes a
+     * workspace through the Workspace Remote, which is the same call the "+" menu
+     * makes after its folder picker returns a path.
+     *
+     * @param props - our lazy `configForms` and the `createWorkspace` opener.
+     * @returns the dialog, or null while it is closed or switched off.
+     */
+    function GitHubPanel(props) {
+      const open = React.useSyncExternalStore(githubStore.subscribe, githubStore.isOpen)
+      const enabled = useSwitch(props.configForms, 'githubWorkspace', true)
+      const [phase, setPhase] = React.useState('idle')
+      const [account, setAccount] = React.useState(undefined)
+      const [repos, setRepos] = React.useState([])
+      const [query, setQuery] = React.useState('')
+      const [error, setError] = React.useState('')
+      const [busy, setBusy] = React.useState('')
+
+      React.useEffect(() => {
+        if (!open || !enabled) return undefined
+        let live = true
+        setPhase('loading')
+        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 : [])
+            })
+          })
+          .then(() => { if (live) setPhase('ready') })
+          .catch(reason => {
+            if (!live) return
+            setError(reason instanceof Error ? reason.message : String(reason))
+            setPhase('ready')
+          })
+        return () => { live = false }
+      }, [open, enabled])
+
+      React.useEffect(() => {
+        if (!open) return undefined
+        const onKey = event => { if (event.key === 'Escape') githubStore.set(false) }
+        document.addEventListener('keydown', onKey)
+        return () => document.removeEventListener('keydown', onKey)
+      }, [open])
+
+      if (!open || !enabled) return null
+
+      const signedIn = account !== undefined && account.signedIn === true
+      const needle = query.trim().toLowerCase()
+      const visible = needle === ''
+        ? repos
+        : repos.filter(repo => `${repo.fullName} ${repo.description}`.toLowerCase().includes(needle))
+      const root = account !== undefined && typeof account.root === 'string' ? account.root : ''
+
+      const clone = repo => {
+        if (busy !== '') return
+        setBusy(repo.fullName)
+        setError('')
+        Promise.resolve()
+          .then(() => githubCall('clone', { owner: repo.owner, name: repo.name }))
+          // The add-workspace flow owns creation when it opened this dialog; a
+          // dialog opened from the footer creates the workspace itself.
+          .then(result => {
+            const onPicked = githubStore.takePicker()
+            const land = onPicked === undefined
+              ? Promise.resolve(props.createWorkspace(result.path))
+              : Promise.resolve(onPicked(result.path))
+            return land.then(() => result)
+          })
+          .then(result => {
+            setBusy('')
+            githubStore.set(false)
+            if (typeof console !== 'undefined' && typeof console.info === 'function') {
+              console.info('[aryacode-polish] workspace ready:', result.path)
+            }
+          })
+          .catch(reason => {
+            setBusy('')
+            setError(reason instanceof Error ? reason.message : String(reason))
+          })
+      }
+
+      const rows = visible.slice(0, 200).map(repo => React.createElement('button', {
+        key: repo.fullName,
+        type: 'button',
+        style: GITHUB_ROW_STYLE,
+        disabled: busy !== '',
+        onClick: () => clone(repo),
+        title: repo.description === '' ? repo.fullName : `${repo.fullName} — ${repo.description}`,
+        'data-polish-github-row': repo.fullName,
+      },
+      React.createElement('span', { style: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } },
+        repo.fullName,
+        repo.isPrivate ? React.createElement('span', { style: { marginLeft: '6px', opacity: 0.6 } }, 'private') : null,
+        repo.isFork ? React.createElement('span', { style: { marginLeft: '6px', opacity: 0.6 } }, 'fork') : null),
+      repo.cloned === true
+        ? React.createElement('span', { style: { opacity: 0.6 } }, 'cloned')
+        : null,
+      busy === repo.fullName ? React.createElement('span', { style: { opacity: 0.7 } }, 'cloning…') : null))
+
+      return ReactDOM.createPortal(
+        React.createElement('div', {
+          style: GITHUB_BACKDROP_STYLE,
+          'data-polish-github': 'dialog',
+          onPointerDown: event => { if (event.target === event.currentTarget) githubStore.set(false) },
+        },
+        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('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.'
+              : null),
+          signedIn
+            ? React.createElement('input', {
+              style: { ...GITHUB_INPUT_STYLE, marginTop: '10px' },
+              value: query,
+              placeholder: 'Search your repositories',
+              'aria-label': 'Search your repositories',
+              autoFocus: true,
+              onChange: event => setQuery(event.target.value),
+            })
+            : null,
+          error !== ''
+            ? React.createElement('div', { style: { marginTop: '10px', color: 'var(--dsw-alias-label-error, #b42318)' } }, error)
+            : 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,
+              phase === 'ready' && visible.length === 0 ? React.createElement('div', { style: { padding: '10px 4px', opacity: 0.7 } }, 'No repository matches that search.') : null,
+              ...rows)
+            : null,
+          React.createElement('p', { style: { margin: '10px 0 0', color: 'var(--dsw-alias-label-tertiary, inherit)' } },
+            'The clone is added as a workspace. Sign-in comes from the GitHub CLI, so this plugin stores no token.')))
+        , document.body)
+    }
+
+    /** The compact footer-row skin shared by the status line. */
+    const FOOT_ROW_STYLE = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
+      maxWidth: '100%',
+      minWidth: 0,
+      padding: '2px 6px',
+      border: 'none',
+      borderRadius: 'var(--dsw-radius-sm, 6px)',
+      background: 'transparent',
+      color: 'var(--dsw-alias-label-tertiary, inherit)',
+      font: 'inherit',
+      fontSize: '12px',
+      lineHeight: '18px',
+      fontVariantNumeric: 'tabular-nums',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      cursor: 'pointer',
+    }
+
+    /**
+     * The footer status line: which GitHub session the "+" menu will clone with.
+     *
+     * It reads the same `status` action the dialog does, so it costs one request
+     * when the Shell loads and one whenever the window regains focus.
+     *
+     * @param props - our lazy `configForms`.
+     * @returns the row, or null when the feature is switched off.
+     */
+    function GithubStatus(props) {
+      const enabled = useSwitch(props.configForms, 'githubWorkspace', true)
+      const [status, setStatus] = React.useState(undefined)
+      React.useEffect(() => {
+        if (!enabled) return undefined
+        let live = true
+        const read = () => {
+          Promise.resolve()
+            .then(() => githubCall('status'))
+            .then(next => { if (live) setStatus(next) })
+            .catch(() => { if (live) setStatus({ signedIn: false }) })
+        }
+        read()
+        const onFocus = () => { read() }
+        window.addEventListener('focus', onFocus)
+        return () => {
+          live = false
+          window.removeEventListener('focus', onFocus)
+        }
+      }, [enabled])
+      if (!enabled) return null
+      const signedIn = status !== undefined && status.signedIn === true
+      const label = status === undefined
+        ? 'GitHub · checking…'
+        : signedIn ? `GitHub · ${String(status.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',
+          title: signedIn
+            ? 'Add a workspace from GitHub'
+            : 'Sign in with the GitHub CLI (gh auth login), then add a repository as a workspace',
+          'aria-label': label,
+          onClick: () => githubStore.open(),
+          style: FOOT_ROW_STYLE,
+          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' },
+        }, label))
+    }
+
+    /** One row of the add-workspace source menu. */
+    const SOURCE_ROW_STYLE = {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: '2px',
+      width: '100%',
+      padding: '8px 10px',
+      border: 'none',
+      borderRadius: 'var(--dsw-radius-sm, 6px)',
+      background: 'transparent',
+      color: 'inherit',
+      font: 'inherit',
+      textAlign: 'left',
+      cursor: 'pointer',
+    }
+
+    /**
+     * The "+" add-workspace flow: choose where the workspace comes from.
+     *
+     * The Harness shows its own `Add workspace…` row only while this slot is
+     * occupied, and a single-owner slot means this dialog stands in for the folder
+     * picker. It therefore offers both sources: the machine (the Host's own OS
+     * chooser when the composition serves the `native` capability, otherwise a
+     * folder list driven by the browse primitives) and GitHub.
+     *
+     * @param props - the slot owner's `open`/`busy`/`onPicked`/`onCancel`/`onError`,
+     *   our lazy `configForms`, and the directory-picker calls.
+     * @returns the flow, or null while it is closed or switched off.
+     */
+    function WorkspaceSourceFlow(props) {
+      const enabled = useSwitch(props.configForms, 'workspaceSources', true)
+      const [step, setStep] = React.useState('menu')
+      const [listing, setListing] = React.useState(undefined)
+      const [error, setError] = React.useState('')
+      const [busy, setBusy] = React.useState(false)
+
+      const cancel = () => {
+        if (typeof props.onCancel === 'function') props.onCancel()
+      }
+
+      // Escape closes the flow. Declared with the other hooks, before the early
+      // return, so the hook order stays fixed while the flow opens and closes.
+      React.useEffect(() => {
+        if (!enabled || props.open !== true) return undefined
+        const onKey = event => { if (event.key === 'Escape') cancel() }
+        document.addEventListener('keydown', onKey)
+        return () => document.removeEventListener('keydown', onKey)
+      }, [enabled, props.open])
+
+      if (!enabled || props.open !== true) return null
+
+      const fail = message => {
+        setBusy(false)
+        setError(message)
+      }
+      const messageOf = reason => (reason instanceof Error ? reason.message : String(reason))
+
+      const land = path => {
+        setBusy(true)
+        setError('')
+        Promise.resolve()
+          .then(() => props.onPicked(path))
+          .catch(reason => fail(messageOf(reason)))
+      }
+
+      const browse = path => {
+        setBusy(true)
+        setError('')
+        Promise.resolve()
+          .then(() => foldersCall({ action: 'ls', path }))
+          .then(level => {
+            setListing(level)
+            setBusy(false)
+            setStep('browse')
+          })
+          .catch(reason => fail(messageOf(reason)))
+      }
+
+      /**
+       * Start the folder browser at the machine's roots.
+       *
+       * This deliberately does not call the Host's directory picker: a composed
+       * picker serves either `browse` or `native`, never both, and the browser build
+       * composes the one whose chooser cannot open there — a `pick` call would wait
+       * for a dialog that never appears. Our own listing behaves the same in the app
+       * and in the browser, and hands the chosen path back through `onPicked`.
+       */
+      const chooseOnPc = () => {
+        if (busy) return
+        setBusy(true)
+        setError('')
+        Promise.resolve()
+          .then(() => foldersCall({ action: 'roots' }))
+          .then(payload => {
+            const roots = Array.isArray(payload.roots) ? payload.roots : []
+            setListing({
+              path: '',
+              parent: null,
+              entries: roots.map(root => ({ name: root.label, path: root.path })),
+            })
+            setBusy(false)
+            setStep('browse')
+          })
+          .catch(reason => fail(messageOf(reason)))
+      }
+
+      const openGithub = () => {
+        githubStore.open(path => props.onPicked(path))
+        cancel()
+      }
+
+      const rows = step === 'menu'
+        ? [
+          React.createElement('button', {
+            key: 'pc',
+            type: 'button',
+            'data-polish-source': 'machine',
+            disabled: busy,
+            onClick: chooseOnPc,
+            style: SOURCE_ROW_STYLE,
+            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' },
+          },
+          React.createElement('span', { style: { fontWeight: 500 } }, 'On this PC'),
+          React.createElement('span', { style: { opacity: 0.7 } }, 'Choose a folder on this machine')),
+          React.createElement('button', {
+            key: 'github',
+            type: 'button',
+            'data-polish-source': 'github',
+            disabled: busy,
+            onClick: openGithub,
+            style: SOURCE_ROW_STYLE,
+            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' },
+          },
+          React.createElement('span', { style: { fontWeight: 500 } }, 'GitHub repository…'),
+          React.createElement('span', { style: { opacity: 0.7 } }, 'Clone one of your repositories as a workspace')),
+        ]
+        : [
+          React.createElement('div', {
+            key: 'head',
+            style: { display: 'flex', alignItems: 'center', gap: '8px', padding: '2px 4px 6px', minWidth: 0 },
+          },
+          React.createElement('span', {
+            style: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+            title: listing !== undefined ? listing.path : '',
+          }, listing === undefined || listing.path === '' ? 'This PC' : listing.path),
+          listing === undefined || listing.path === ''
+            ? null
+            : React.createElement('button', {
+              type: 'button',
+              'data-polish-pick': 'here',
+              disabled: busy,
+              onClick: () => { if (listing !== undefined) land(listing.path) },
+              style: { ...FOOT_ROW_STYLE, color: 'var(--dsw-alias-label-primary, inherit)', background: 'var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,0.06))' },
+            }, 'Use this folder')),
+          ...(listing === undefined || listing.parent === null || listing.parent === undefined
+            ? []
+            : [React.createElement('button', {
+              key: 'up',
+              type: 'button',
+              'data-polish-folder': '..',
+              disabled: busy,
+              onClick: () => browse(listing.parent),
+              style: SOURCE_ROW_STYLE,
+              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' },
+            }, React.createElement('span', { title: listing.parent }, '..'))]),
+          ...(listing === undefined
+            ? []
+            : listing.entries.map(entry => React.createElement('button', {
+              key: entry.path,
+              type: 'button',
+              'data-polish-folder': entry.name,
+              disabled: busy,
+              onClick: () => browse(entry.path),
+              style: SOURCE_ROW_STYLE,
+              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' },
+            }, React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, title: entry.path }, entry.name)))),
+        ]
+
+      // The flow is rendered inside the Shell's add-workspace popover, which is
+      // narrow and sits under the sidebar's own stacking order. A portal to the body
+      // puts it above everything and keeps the rows readable at their own width.
+      return ReactDOM.createPortal(
+        React.createElement('div', {
+          style: GITHUB_BACKDROP_STYLE,
+          'data-polish-flow-backdrop': step,
+          onPointerDown: event => { if (event.target === event.currentTarget) cancel() },
+        },
+        React.createElement('div', {
+          'data-polish-flow': step,
+          role: 'dialog',
+          'aria-label': 'Add a workspace',
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2px',
+            width: 'min(360px, calc(100vw - 32px))',
+            maxHeight: 'min(420px, calc(100vh - 96px))',
+            padding: '6px',
+            overflowY: 'auto',
+            borderRadius: 'var(--dsw-radius-lg, 12px)',
+            background: 'var(--dsw-specific-menu, Canvas)',
+            boxShadow: 'var(--dsw-elevation-prominent, 0 8px 24px rgba(0,0,0,0.18))',
+            fontSize: '12px',
+            lineHeight: '18px',
+            color: 'var(--dsw-alias-label-secondary, inherit)',
+          },
+        },
+        error !== ''
+          ? React.createElement('div', { style: { padding: '4px 6px', color: 'var(--dsw-alias-label-error, #b42318)' } }, error)
+          : null,
+        ...rows,
+        step === 'menu'
+          ? null
+          : React.createElement('button', {
+            type: 'button',
+            'data-polish-pick': 'back',
+            onClick: () => { setStep('menu'); setListing(undefined); setError('') },
+            style: { ...FOOT_ROW_STYLE, justifyContent: 'flex-start' },
+          }, 'Back'),
+        React.createElement('button', {
+          type: 'button',
+          'data-polish-pick': 'cancel',
+          onClick: cancel,
+          style: { ...FOOT_ROW_STYLE, justifyContent: 'flex-start' },
+        }, 'Cancel'))),
+      document.body)
+    }
+
     return {
       inject: ['slots'],
       /**
@@ -833,6 +1446,46 @@ window.__ModuleLoader__.load({
             inject: () => ({ configForms, openFolder, workspaces: workspaceCtx.get('workspaces') }),
           }, OpenFolderMenuItem))
         })
+        // Adding a workspace from GitHub goes through the Workspace service's own
+        // create call — the same one the "+" menu makes once its folder picker
+        // returns a path — so a clone lands in the sidebar exactly like a picked
+        // folder does, with no Harness change anywhere. The service takes the plain
+        // path and throws on refusal; the Remote namespace underneath it is
+        // `ctx.remote.workspace` (singular), which is why this injects the service.
+        ctx.inject(['workspaces'], (githubCtx) => {
+          const createWorkspace = async (path) => {
+            const workspace = await githubCtx.workspaces.create({ path })
+            return workspace
+          }
+          githubCtx.slots.inject('shell.overlay', () => githubCtx.slots.register({
+            name: 'shell.overlay',
+            id: 'polish-github',
+            inject: () => ({ configForms, createWorkspace }),
+          }, GitHubPanel))
+          // 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({
+            name: 'sidebar.footer.action',
+            id: 'polish-github-status',
+            order: 4,
+            inject: () => ({ configForms }),
+          }, GithubStatus))
+        })
+        // The "+" menu's `Add workspace…` row exists only while a plugin occupies
+        // this single-owner hole, so occupying it means standing in for the folder
+        // picker: the flow offers the machine and GitHub as sources. It needs no
+        // Remote injection: the folder list and the clone both come from this
+        // bundle's own Host routes, which is what makes the flow behave the same in
+        // the browser and in the app.
+        ctx.slots.inject('sidebar.workspaces.directoryFlow', () => ctx.slots.register({
+          name: 'sidebar.workspaces.directoryFlow',
+          // A single slot clashes only at the exact priority; another priority
+          // shadows it and the LOWEST priority renders. The shipped pickers
+          // register at 0, so -1 is what puts this flow in front of them without
+          // making their own activation throw.
+          priority: -1,
+          inject: () => ({ configForms }),
+        }, WorkspaceSourceFlow))
       },
     }
   },