@aryacode/dsh-aryacode-polish 0.10.0 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## [0.12.1] - 2026-10-28
+
+### Fixed
+
+- The Hero list now only appears when the workspace chip is open, and it paints a
+  card of its own instead of an unstyled list floating over the Hero copy.
+
+## [0.12.0] - 2026-10-28
+
+### Added
+
+- **Colour and weight per workspace.** Right-click a workspace → "Colour and
+  weight…" paints it one of six tones (slate, blue, green, amber, rose, violet) or
+  none, and can make its label bold. The choice is stored under
+  `aryacode-polish:workspace-appearance` in the app's own storage, so it survives a
+  restart, and a broken or missing store degrades to the plain tree instead of
+  throwing.
+- **The same workspaces in the Hero picker.** The blank-session Hero now offers this
+  bundle's workspace list (tone dots, bold labels, session counts) instead of the
+  stock picker, through `conversation.hero.workspace` at priority -1 — same data,
+  same colours, one switch.
+
+## [0.11.2] - 2026-10-28
+
+### Verified
+
+- Drag reorder now has live proof, not just unit tests: with two workspaces in the
+  Dev AryaCode desktop, dropping the second workspace on the first reordered them
+  (`workspaces.insertBefore`), and the new order survived a full app restart.
+
+### Fixed
+
+- A session is never promised a move the Host cannot make. The remote workspace
+  namespace exposes `create`, `rename`, `delete`, `insertBefore`,
+  `insertSessionBefore`, `archiveSession`, `unarchiveSession`, `pinSession` and
+  `unpinSession` — and no `attachSession` or `detachSession` — while a workspace's own
+  `insertSessionBefore` only reorders the sessions already inside it (it rejects a
+  session it does not hold). So dropping a session on another workspace is refused
+  with a plain explanation instead of firing a call that fails, and the session menu
+  no longer offers "Move to <workspace>".
+
 ## [0.10.0] - 2026-10-28
 
 ### Added

package/client/workspace.js

@@ -382,6 +382,82 @@ export function moveBefore(list, movingId, beforeId) {
   return next
 }
 
+const LOOK_KEY = 'aryacode-polish:workspace-appearance.v1'
+
+export const TONE_ORDER = ['slate', 'blue', 'green', 'amber', 'rose', 'violet']
+
+export const TONE_COLOR = {
+  slate: '#8a8f98',
+  blue: '#4a72d0',
+  green: '#2f9e6b',
+  amber: '#c8892f',
+  rose: '#c2496a',
+  violet: '#7a5cc4',
+}
+
+export function appearanceOf(map, workspaceId) {
+  const entry = (map && map[workspaceId]) || {}
+  return {
+    tone: TONE_COLOR[entry.tone] ? entry.tone : undefined,
+    strong: entry.strong === true,
+  }
+}
+
+export function withAppearance(map, workspaceId, patch) {
+  const next = Object.assign({}, map || {})
+  const merged = Object.assign({}, appearanceOf(next, workspaceId), patch || {})
+  if (!merged.tone && merged.strong !== true) delete next[workspaceId]
+  else next[workspaceId] = { tone: merged.tone, strong: merged.strong === true }
+  return next
+}
+
+export function readAppearance(storage) {
+  try {
+    const store = storage || (typeof localStorage === 'undefined' ? undefined : localStorage)
+    if (!store) return {}
+    const raw = store.getItem(LOOK_KEY)
+    if (!raw) return {}
+    const parsed = JSON.parse(raw)
+    return parsed && typeof parsed === 'object' ? parsed : {}
+  } catch {
+    return {}
+  }
+}
+
+export function writeAppearance(map, storage) {
+  try {
+    const store = storage || (typeof localStorage === 'undefined' ? undefined : localStorage)
+    if (!store) return
+    store.setItem(LOOK_KEY, JSON.stringify(map || {}))
+  } catch {
+    /* a locked-down webview must not break the tree */
+  }
+}
+
+const WS_TONE = {
+  flex: 'none',
+  width: '6px',
+  height: '6px',
+  borderRadius: '50%',
+  boxShadow: '0 0 0 2px var(--dsw-alias-bg-base, transparent)',
+}
+
+const WS_SWATCH = {
+  width: '18px',
+  height: '18px',
+  borderRadius: '50%',
+  border: '0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.12))',
+  cursor: 'pointer',
+  padding: 0,
+}
+
+const WS_PAINT_ROW = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '6px',
+  padding: '6px 8px',
+}
+
 const WS_FILTER = {
   margin: '2px 2px 6px',
   padding: '4px 8px',
@@ -447,6 +523,14 @@ export function BetterWorkspace(props) {
   const [hover, setHover] = React.useState(null)
   const [drag, setDrag] = React.useState(null)
   const [dropping, setDropping] = React.useState(null)
+  const [look, setLook] = React.useState(() => readAppearance())
+  const paintLook = (workspaceId, patch) => {
+    setLook((prev) => {
+      const next = withAppearance(prev, workspaceId, patch)
+      writeAppearance(next)
+      return next
+    })
+  }
   const filterRef = React.useRef(null)
 
   const workspaceState = useLive(services.workspacesLive)
@@ -533,7 +617,14 @@ export function BetterWorkspace(props) {
     setDrag(null)
     setDropping(null)
     if (!moving || moving.kind !== 'session' || moving.id === targetId) return
-    if (moving.workspaceId !== workspaceId) { setNotice('A session stays in the workspace it belongs to.'); return }
+    if (moving.workspaceId !== workspaceId) {
+      // A session cannot change workspace from a plugin: the Host's remote
+      // namespace exposes create/rename/delete/insertBefore/insertSessionBefore
+      // and no attachSession or detachSession, and a workspace's own
+      // insertSessionBefore only reorders the sessions already in it.
+      setNotice('A session stays in its workspace; drag it within that workspace to reorder.')
+      return
+    }
     void reorderSession(workspaceId, moving.id, targetId)
   }
 
@@ -581,6 +672,15 @@ export function BetterWorkspace(props) {
           try { await navigator.clipboard.writeText(menu.workspace.path) } catch {}
         },
       }, 'Copy path'),
+      React.createElement('button', {
+        type: 'button',
+        'data-polish-ws-appearance': 'open',
+        style: WS_MENU_ITEM,
+        onClick: () => {
+          const workspace = menu.workspace
+          setMenu({ kind: 'paint', workspace, anchor: menu.anchor })
+        },
+      }, 'Colour and weight…'),
       React.createElement('button', {
         type: 'button',
         style: Object.assign({}, WS_MENU_ITEM, { color: 'var(--dsw-alias-label-error, #d92d20)' }),
@@ -597,6 +697,44 @@ export function BetterWorkspace(props) {
       }, armed && armed === menu.workspace.workspaceId ? 'Remove workspace?' : 'Remove workspace'))
     : null
 
+  const paintMenu = menu && menu.kind === 'paint'
+    ? (() => {
+      const workspace = menu.workspace
+      const current = appearanceOf(look, workspace.workspaceId)
+      return React.createElement(RowMenu, { anchor: menu.anchor, onClose: closeMenu },
+        React.createElement('div', { style: WS_PAINT_ROW },
+          TONE_ORDER.map((tone) => React.createElement('button', {
+            key: tone,
+            type: 'button',
+            'data-polish-tone': tone,
+            'aria-label': 'Colour ' + tone,
+            title: tone,
+            style: Object.assign({}, WS_SWATCH, {
+              background: TONE_COLOR[tone],
+              boxShadow: current.tone === tone
+                ? '0 0 0 1.5px var(--dsw-alias-label-secondary, #61666b)'
+                : undefined,
+            }),
+            onClick: () => paintLook(workspace.workspaceId, { tone }),
+          })),
+          React.createElement('button', {
+            key: 'none',
+            type: 'button',
+            'data-polish-tone': 'none',
+            'aria-label': 'No colour',
+            title: 'No colour',
+            style: Object.assign({}, WS_SWATCH, { background: 'transparent' }),
+            onClick: () => paintLook(workspace.workspaceId, { tone: undefined }),
+          })),
+        React.createElement('button', {
+          type: 'button',
+          'data-polish-ws-strong': current.strong ? 'on' : 'off',
+          style: WS_MENU_ITEM,
+          onClick: () => paintLook(workspace.workspaceId, { strong: !current.strong }),
+        }, current.strong ? 'Weight: bold ✓' : 'Weight: normal'))
+    })()
+    : null
+
   const sessionMenu = menu && menu.kind === 'session'
     ? React.createElement(RowMenu, { anchor: menu.anchor, onClose: closeMenu },
       entries.map((entry, index) => React.createElement(RowBoundary, { key: (entry.options && entry.options.id) || index },
@@ -605,7 +743,8 @@ export function BetterWorkspace(props) {
           runtime,
           workspacesSnapshot: workspaceState,
           session: { sessionId: menu.row.id, displayTitle: menu.row.displayTitle, session: menu.row },
-        }))))
+        }))),
+      null)
     : null
 
   const children = []
@@ -716,7 +855,16 @@ export function BetterWorkspace(props) {
     },
     React.createElement(CaretGlyph, { open }),
     React.createElement(FolderGlyph),
-    React.createElement('span', { style: WS_TITLE }, workspaceLabel(workspace)),
+    look[workspace.workspaceId] && appearanceOf(look, workspace.workspaceId).tone
+      ? React.createElement('span', {
+        style: Object.assign({}, WS_TONE, { background: TONE_COLOR[appearanceOf(look, workspace.workspaceId).tone] }),
+      })
+      : null,
+    React.createElement('span', {
+      style: Object.assign({}, WS_TITLE, {
+        fontWeight: appearanceOf(look, workspace.workspaceId).strong ? 600 : undefined,
+      }),
+    }, workspaceLabel(workspace)),
     React.createElement('span', { style: WS_COUNT }, String(sessions.length)),
     hovered || focused
       ? React.createElement('button', {
@@ -798,9 +946,81 @@ export function BetterWorkspace(props) {
     ? React.createElement('div', { key: 'count', style: WS_COUNT_NOTE }, String(shownCount) + ' of ' + String(totalCount) + ' sessions')
     : null,
   sessionMenu,
+  paintMenu,
   workspaceMenu)
 }
 
+const WS_HERO = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1px',
+  minWidth: '220px',
+  maxHeight: '320px',
+  overflowY: 'auto',
+  padding: '4px',
+}
+
+const WS_HERO_TITLE = {
+  fontSize: 'calc(' + "var(--dsh-content-font-size-secondary, 13px)" + ' - 2px)',
+  letterSpacing: '0.02em',
+  textTransform: 'uppercase',
+  color: 'var(--dsw-alias-label-quaternary, #8a8a8a)',
+  padding: '4px 6px 2px',
+}
+
+/**
+ * The Hero's workspace picker. Same data and same colours as the sidebar tree,
+ * reachable before a session exists — the Hero slot wants a list that calls
+ * `onPick(workspaceId)`, so this is a flat list rather than the tree.
+ */
+export function HeroWorkspacePicker(props) {
+  const services = (props && props.services) || {}
+  const workspaceState = useLive(services.workspacesLive)
+  const look = React.useMemo(() => readAppearance(), [])
+  const list = (workspaceState && (workspaceState.items || workspaceState.workspaces)) || []
+  // The slot hands over `open`: the chip is closed most of the time, and rendering
+  // the list unconditionally left it floating over the Hero copy.
+  if (!props || props.open !== true || list.length === 0) return null
+  const anchor = props.anchorRef && props.anchorRef.current
+  const spot = anchor && anchor.getBoundingClientRect
+    ? (() => {
+      const box = anchor.getBoundingClientRect()
+      return {
+        position: 'fixed',
+        top: Math.round(box.bottom + 6) + 'px',
+        left: Math.max(8, Math.round(box.left)) + 'px',
+        zIndex: 1200,
+      }
+    })()
+    : {}
+  return ReactDOM.createPortal(React.createElement('div', { 'data-polish-hero': 'true', style: Object.assign({}, WS_MENU, WS_HERO, spot, { maxHeight: '320px' }) },
+    React.createElement('div', { style: WS_HERO_TITLE }, 'Workspaces'),
+    list.map((workspace) => {
+      const looks = appearanceOf(look, workspace.workspaceId)
+      return React.createElement('button', {
+        key: workspace.workspaceId,
+        type: 'button',
+        'data-polish-hero-row': workspace.workspaceId,
+        style: Object.assign({}, WS_ROW, {
+          fontWeight: looks.strong ? 600 : 500,
+          background: 'transparent',
+          border: 'none',
+          textAlign: 'left',
+        }),
+        onClick: () => {
+          if (props.onPick) props.onPick(workspace.workspaceId)
+          if (props.onClose) props.onClose()
+        },
+      },
+      React.createElement(FolderGlyph),
+      looks.tone
+        ? React.createElement('span', { style: Object.assign({}, WS_TONE, { background: TONE_COLOR[looks.tone] }) })
+        : null,
+      React.createElement('span', { style: WS_TITLE }, workspaceLabel(workspace)),
+      React.createElement('span', { style: WS_COUNT }, String((workspace.sessionIds || []).length)))
+    })), document.body)
+}
+
 /**
  * Add and dispose the seat with the switch. A `single` slot renders its LOWEST
  * priority occupant, so presence is the only way to stand aside: without this the
@@ -808,6 +1028,7 @@ export function BetterWorkspace(props) {
  */
 export function installWorkspaceSeat(ctx, configForms, extras = {}) {
   let dispose
+  let disposeHero
   let unlisten
   const scope = () => {
     try {
@@ -860,6 +1081,13 @@ export function installWorkspaceSeat(ctx, configForms, extras = {}) {
             priority: -1,
             inject: () => ({ services }),
           }, BetterWorkspace))
+          // The Hero picker is its own single slot, so it needs its own -1 seat;
+          // both live and die with the one switch.
+          disposeHero = seated.slots.inject('conversation.hero.workspace', () => seated.slots.register({
+            name: 'conversation.hero.workspace',
+            priority: -1,
+            inject: () => ({ services }),
+          }, HeroWorkspacePicker))
         },
       )
     } catch (error) {
@@ -872,6 +1100,12 @@ export function installWorkspaceSeat(ctx, configForms, extras = {}) {
       install()
       return
     }
+    if (typeof disposeHero === 'function') {
+      try {
+        disposeHero()
+      } catch {}
+    }
+    disposeHero = undefined
     if (typeof dispose === 'function') {
       try {
         dispose()
@@ -889,6 +1123,7 @@ export function installWorkspaceSeat(ctx, configForms, extras = {}) {
   }
   return () => {
     if (typeof unlisten === 'function') unlisten()
+    if (typeof disposeHero === 'function') disposeHero()
     if (typeof dispose === 'function') dispose()
   }
 }

package/docs/better-workspace.md

@@ -70,3 +70,47 @@ are M2/M3; the seat is already the right place for them.
 
 Still owed: "/"-in-title grouping, per-row appearance, workspace presets, and the same
 tree in the Hero picker.
+
+## Why a session cannot change workspace
+
+Drag reorder works inside a workspace and between workspaces, but a *session* cannot
+be dragged into a different workspace, and that is the Host's shape rather than an
+omission here:
+
+- `packages/api/workspace-controller/src/index.ts` exposes these remotes:
+  `create`, `initializeDefault`, `rename`, `delete`, `insertBefore`,
+  `insertSessionBefore`, `archiveSession`, `unarchiveSession`, `pinSession`,
+  `unpinSession` — and nothing that attaches or detaches a session.
+- `packages/api/workspace-controller/src/commands.ts:132` resolves the target workspace
+  and calls its own `insertSessionBefore(sessionId, beforeSessionId)`
+  (`packages/workspace/workspace/src/entity.ts:152`), which reorders that workspace's
+  `sessionIds`; `packages/workspace/workspace/tests/workspace.spec.ts:715` pins that a
+  session the workspace does not hold is rejected.
+- The entity does have `attachSession`/`detachSession`
+  (`packages/workspace/workspace/src/types.ts:134` region), but no remote surfaces them.
+
+So the tree refuses with "A session stays in its workspace; drag it within that
+workspace to reorder." rather than attempting a call that throws. If the Host ever
+exposes attach/detach, the gesture becomes a one-line change here — the drag payload
+already carries `{ kind: 'session', id, workspaceId }`.
+
+## Colour and weight
+
+Right-click a workspace → **Colour and weight…** opens a six-tone palette (slate, blue,
+green, amber, rose, violet) plus "none", and toggles a bold label. The choice is kept in
+the app's own storage under `aryacode-polish:workspace-appearance.v1` as
+`{ [workspaceId]: { tone, strong } }`, so it survives a restart without asking the Host
+to remember anything. `readAppearance`/`writeAppearance` swallow every failure
+(missing storage, quota, a locked-down webview), so a broken store costs the colours
+and nothing else. `appearanceOf` ignores a tone it does not know, which keeps an old
+entry from breaking the row if the palette ever changes.
+
+## The Hero picker
+
+The blank-session Hero's workspace chip is the same list, not a second implementation:
+`conversation.hero.workspace` is a `single` slot at the root, so this bundle shadows it
+at `priority: -1` beside `sidebar.workspaces` and both seats come and go with the one
+switch. The slot hands over `{ open, anchorRef, selectedId, onPick, onClose }`: the card
+is portalled to the anchor's bottom-left only while `open` is true (an unconditional
+list floated over the Hero copy), it shows the same tone dots and bold labels as the
+sidebar, and picking a row calls `onPick(workspaceId)` then `onClose()`.

package/lib/client.js

@@ -53,7 +53,7 @@ window.__ModuleLoader__.load({
     ]
     const ROW_ID = "polish"
     const ROW_KEY = "@aryacode/dsh-aryacode-polish" + '#' + ROW_ID
-    const CLIENT_VERSION = "0.10.0"
+    const CLIENT_VERSION = "0.12.1"
 
 /* html2canvas 1.4.1 — MIT, vendored from vendor/html2canvas.min.js.
  * A UMD build, so it assigns itself to globalThis; face.js reads it lazily. */
@@ -583,6 +583,82 @@ window.__ModuleLoader__.load({
       return next
     }
 
+    const LOOK_KEY = 'aryacode-polish:workspace-appearance.v1'
+
+    const TONE_ORDER = ['slate', 'blue', 'green', 'amber', 'rose', 'violet']
+
+    const TONE_COLOR = {
+      slate: '#8a8f98',
+      blue: '#4a72d0',
+      green: '#2f9e6b',
+      amber: '#c8892f',
+      rose: '#c2496a',
+      violet: '#7a5cc4',
+    }
+
+    function appearanceOf(map, workspaceId) {
+      const entry = (map && map[workspaceId]) || {}
+      return {
+        tone: TONE_COLOR[entry.tone] ? entry.tone : undefined,
+        strong: entry.strong === true,
+      }
+    }
+
+    function withAppearance(map, workspaceId, patch) {
+      const next = Object.assign({}, map || {})
+      const merged = Object.assign({}, appearanceOf(next, workspaceId), patch || {})
+      if (!merged.tone && merged.strong !== true) delete next[workspaceId]
+      else next[workspaceId] = { tone: merged.tone, strong: merged.strong === true }
+      return next
+    }
+
+    function readAppearance(storage) {
+      try {
+        const store = storage || (typeof localStorage === 'undefined' ? undefined : localStorage)
+        if (!store) return {}
+        const raw = store.getItem(LOOK_KEY)
+        if (!raw) return {}
+        const parsed = JSON.parse(raw)
+        return parsed && typeof parsed === 'object' ? parsed : {}
+      } catch {
+        return {}
+      }
+    }
+
+    function writeAppearance(map, storage) {
+      try {
+        const store = storage || (typeof localStorage === 'undefined' ? undefined : localStorage)
+        if (!store) return
+        store.setItem(LOOK_KEY, JSON.stringify(map || {}))
+      } catch {
+        /* a locked-down webview must not break the tree */
+      }
+    }
+
+    const WS_TONE = {
+      flex: 'none',
+      width: '6px',
+      height: '6px',
+      borderRadius: '50%',
+      boxShadow: '0 0 0 2px var(--dsw-alias-bg-base, transparent)',
+    }
+
+    const WS_SWATCH = {
+      width: '18px',
+      height: '18px',
+      borderRadius: '50%',
+      border: '0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.12))',
+      cursor: 'pointer',
+      padding: 0,
+    }
+
+    const WS_PAINT_ROW = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
+      padding: '6px 8px',
+    }
+
     const WS_FILTER = {
       margin: '2px 2px 6px',
       padding: '4px 8px',
@@ -648,6 +724,14 @@ window.__ModuleLoader__.load({
       const [hover, setHover] = React.useState(null)
       const [drag, setDrag] = React.useState(null)
       const [dropping, setDropping] = React.useState(null)
+      const [look, setLook] = React.useState(() => readAppearance())
+      const paintLook = (workspaceId, patch) => {
+        setLook((prev) => {
+          const next = withAppearance(prev, workspaceId, patch)
+          writeAppearance(next)
+          return next
+        })
+      }
       const filterRef = React.useRef(null)
 
       const workspaceState = useLive(services.workspacesLive)
@@ -734,7 +818,14 @@ window.__ModuleLoader__.load({
         setDrag(null)
         setDropping(null)
         if (!moving || moving.kind !== 'session' || moving.id === targetId) return
-        if (moving.workspaceId !== workspaceId) { setNotice('A session stays in the workspace it belongs to.'); return }
+        if (moving.workspaceId !== workspaceId) {
+          // A session cannot change workspace from a plugin: the Host's remote
+          // namespace exposes create/rename/delete/insertBefore/insertSessionBefore
+          // and no attachSession or detachSession, and a workspace's own
+          // insertSessionBefore only reorders the sessions already in it.
+          setNotice('A session stays in its workspace; drag it within that workspace to reorder.')
+          return
+        }
         void reorderSession(workspaceId, moving.id, targetId)
       }
 
@@ -782,6 +873,15 @@ window.__ModuleLoader__.load({
               try { await navigator.clipboard.writeText(menu.workspace.path) } catch {}
             },
           }, 'Copy path'),
+          React.createElement('button', {
+            type: 'button',
+            'data-polish-ws-appearance': 'open',
+            style: WS_MENU_ITEM,
+            onClick: () => {
+              const workspace = menu.workspace
+              setMenu({ kind: 'paint', workspace, anchor: menu.anchor })
+            },
+          }, 'Colour and weight…'),
           React.createElement('button', {
             type: 'button',
             style: Object.assign({}, WS_MENU_ITEM, { color: 'var(--dsw-alias-label-error, #d92d20)' }),
@@ -798,6 +898,44 @@ window.__ModuleLoader__.load({
           }, armed && armed === menu.workspace.workspaceId ? 'Remove workspace?' : 'Remove workspace'))
         : null
 
+      const paintMenu = menu && menu.kind === 'paint'
+        ? (() => {
+          const workspace = menu.workspace
+          const current = appearanceOf(look, workspace.workspaceId)
+          return React.createElement(RowMenu, { anchor: menu.anchor, onClose: closeMenu },
+            React.createElement('div', { style: WS_PAINT_ROW },
+              TONE_ORDER.map((tone) => React.createElement('button', {
+                key: tone,
+                type: 'button',
+                'data-polish-tone': tone,
+                'aria-label': 'Colour ' + tone,
+                title: tone,
+                style: Object.assign({}, WS_SWATCH, {
+                  background: TONE_COLOR[tone],
+                  boxShadow: current.tone === tone
+                    ? '0 0 0 1.5px var(--dsw-alias-label-secondary, #61666b)'
+                    : undefined,
+                }),
+                onClick: () => paintLook(workspace.workspaceId, { tone }),
+              })),
+              React.createElement('button', {
+                key: 'none',
+                type: 'button',
+                'data-polish-tone': 'none',
+                'aria-label': 'No colour',
+                title: 'No colour',
+                style: Object.assign({}, WS_SWATCH, { background: 'transparent' }),
+                onClick: () => paintLook(workspace.workspaceId, { tone: undefined }),
+              })),
+            React.createElement('button', {
+              type: 'button',
+              'data-polish-ws-strong': current.strong ? 'on' : 'off',
+              style: WS_MENU_ITEM,
+              onClick: () => paintLook(workspace.workspaceId, { strong: !current.strong }),
+            }, current.strong ? 'Weight: bold ✓' : 'Weight: normal'))
+        })()
+        : null
+
       const sessionMenu = menu && menu.kind === 'session'
         ? React.createElement(RowMenu, { anchor: menu.anchor, onClose: closeMenu },
           entries.map((entry, index) => React.createElement(RowBoundary, { key: (entry.options && entry.options.id) || index },
@@ -806,7 +944,8 @@ window.__ModuleLoader__.load({
               runtime,
               workspacesSnapshot: workspaceState,
               session: { sessionId: menu.row.id, displayTitle: menu.row.displayTitle, session: menu.row },
-            }))))
+            }))),
+          null)
         : null
 
       const children = []
@@ -917,7 +1056,16 @@ window.__ModuleLoader__.load({
         },
         React.createElement(CaretGlyph, { open }),
         React.createElement(FolderGlyph),
-        React.createElement('span', { style: WS_TITLE }, workspaceLabel(workspace)),
+        look[workspace.workspaceId] && appearanceOf(look, workspace.workspaceId).tone
+          ? React.createElement('span', {
+            style: Object.assign({}, WS_TONE, { background: TONE_COLOR[appearanceOf(look, workspace.workspaceId).tone] }),
+          })
+          : null,
+        React.createElement('span', {
+          style: Object.assign({}, WS_TITLE, {
+            fontWeight: appearanceOf(look, workspace.workspaceId).strong ? 600 : undefined,
+          }),
+        }, workspaceLabel(workspace)),
         React.createElement('span', { style: WS_COUNT }, String(sessions.length)),
         hovered || focused
           ? React.createElement('button', {
@@ -999,9 +1147,81 @@ window.__ModuleLoader__.load({
         ? React.createElement('div', { key: 'count', style: WS_COUNT_NOTE }, String(shownCount) + ' of ' + String(totalCount) + ' sessions')
         : null,
       sessionMenu,
+      paintMenu,
       workspaceMenu)
     }
 
+    const WS_HERO = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1px',
+      minWidth: '220px',
+      maxHeight: '320px',
+      overflowY: 'auto',
+      padding: '4px',
+    }
+
+    const WS_HERO_TITLE = {
+      fontSize: 'calc(' + "var(--dsh-content-font-size-secondary, 13px)" + ' - 2px)',
+      letterSpacing: '0.02em',
+      textTransform: 'uppercase',
+      color: 'var(--dsw-alias-label-quaternary, #8a8a8a)',
+      padding: '4px 6px 2px',
+    }
+
+    /**
+     * The Hero's workspace picker. Same data and same colours as the sidebar tree,
+     * reachable before a session exists — the Hero slot wants a list that calls
+     * `onPick(workspaceId)`, so this is a flat list rather than the tree.
+     */
+    function HeroWorkspacePicker(props) {
+      const services = (props && props.services) || {}
+      const workspaceState = useLive(services.workspacesLive)
+      const look = React.useMemo(() => readAppearance(), [])
+      const list = (workspaceState && (workspaceState.items || workspaceState.workspaces)) || []
+      // The slot hands over `open`: the chip is closed most of the time, and rendering
+      // the list unconditionally left it floating over the Hero copy.
+      if (!props || props.open !== true || list.length === 0) return null
+      const anchor = props.anchorRef && props.anchorRef.current
+      const spot = anchor && anchor.getBoundingClientRect
+        ? (() => {
+          const box = anchor.getBoundingClientRect()
+          return {
+            position: 'fixed',
+            top: Math.round(box.bottom + 6) + 'px',
+            left: Math.max(8, Math.round(box.left)) + 'px',
+            zIndex: 1200,
+          }
+        })()
+        : {}
+      return ReactDOM.createPortal(React.createElement('div', { 'data-polish-hero': 'true', style: Object.assign({}, WS_MENU, WS_HERO, spot, { maxHeight: '320px' }) },
+        React.createElement('div', { style: WS_HERO_TITLE }, 'Workspaces'),
+        list.map((workspace) => {
+          const looks = appearanceOf(look, workspace.workspaceId)
+          return React.createElement('button', {
+            key: workspace.workspaceId,
+            type: 'button',
+            'data-polish-hero-row': workspace.workspaceId,
+            style: Object.assign({}, WS_ROW, {
+              fontWeight: looks.strong ? 600 : 500,
+              background: 'transparent',
+              border: 'none',
+              textAlign: 'left',
+            }),
+            onClick: () => {
+              if (props.onPick) props.onPick(workspace.workspaceId)
+              if (props.onClose) props.onClose()
+            },
+          },
+          React.createElement(FolderGlyph),
+          looks.tone
+            ? React.createElement('span', { style: Object.assign({}, WS_TONE, { background: TONE_COLOR[looks.tone] }) })
+            : null,
+          React.createElement('span', { style: WS_TITLE }, workspaceLabel(workspace)),
+          React.createElement('span', { style: WS_COUNT }, String((workspace.sessionIds || []).length)))
+        })), document.body)
+    }
+
     /**
      * Add and dispose the seat with the switch. A `single` slot renders its LOWEST
      * priority occupant, so presence is the only way to stand aside: without this the
@@ -1009,6 +1229,7 @@ window.__ModuleLoader__.load({
      */
     function installWorkspaceSeat(ctx, configForms, extras = {}) {
       let dispose
+      let disposeHero
       let unlisten
       const scope = () => {
         try {
@@ -1061,6 +1282,13 @@ window.__ModuleLoader__.load({
                 priority: -1,
                 inject: () => ({ services }),
               }, BetterWorkspace))
+              // The Hero picker is its own single slot, so it needs its own -1 seat;
+              // both live and die with the one switch.
+              disposeHero = seated.slots.inject('conversation.hero.workspace', () => seated.slots.register({
+                name: 'conversation.hero.workspace',
+                priority: -1,
+                inject: () => ({ services }),
+              }, HeroWorkspacePicker))
             },
           )
         } catch (error) {
@@ -1073,6 +1301,12 @@ window.__ModuleLoader__.load({
           install()
           return
         }
+        if (typeof disposeHero === 'function') {
+          try {
+            disposeHero()
+          } catch {}
+        }
+        disposeHero = undefined
         if (typeof dispose === 'function') {
           try {
             dispose()
@@ -1090,6 +1324,7 @@ window.__ModuleLoader__.load({
       }
       return () => {
         if (typeof unlisten === 'function') unlisten()
+        if (typeof disposeHero === 'function') disposeHero()
         if (typeof dispose === 'function') dispose()
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aryacode/dsh-aryacode-polish",
-  "version": "0.10.0",
+  "version": "0.12.1",
   "description": "AryaCode Polish: one install for the small things that make AryaCode feel finished. One Plugins row, one switch per quality-of-life feature.",
   "keywords": [
     "dsh",