dsh-plugin-showcase 0.0.0-stage → 0.2.0

package/lib/client.js

@@ -0,0 +1,570 @@
+// dsh-plugin-showcase · client half (lazy-CJS factory, no build step).
+// Loading this file only registers a factory; the body runs when the module is materialized.
+window.__ModuleLoader__.load({
+  id: 'dsh-plugin-showcase',
+  factory: (require) => {
+    const React = require('react')
+    const h = React.createElement
+
+    const VERSION = '0.2.0'
+    const TAB_ID = 'showcase-panel'
+    const TAB_KIND = 'showcase'
+
+    const dict = {
+      en: {
+        title: 'Showcase',
+        subtitle: 'A DeepSeek Harness reference plugin: one tool, one hook, one command, a settings card and a right-sidebar panel.',
+        panelTitle: 'Showcase panel',
+        panelEmpty: 'No snapshot available — the Showcase host service is not reachable right now.',
+        gateOn: 'Guard gate: on',
+        gateOff: 'Guard gate: off',
+        openPanel: 'Open showcase panel',
+        refresh: 'Refresh',
+        welcome: 'Welcome to Showcase',
+        stepDoctorTitle: '1 · Run a health check',
+        stepDoctorBody: 'Send this command in the conversation box; the host answers with a full DSH health report.',
+        stepSettingsTitle: '2 · Open the settings card',
+        stepSettingsBody: 'Settings → Showcase shows the same snapshot, the guard-gate state and this plugin version.',
+        stepGateTitle: '3 · Understand the guard gate',
+        stepGateBody: 'The gate refuses destructive shell commands before they run. This command turns it on or off.',
+        copyHint: 'Copy',
+        copied: 'Copied',
+        doctorHint: 'The client half cannot call the host directly, so the command is handed to you as selectable text.',
+        aboutBody: 'Tools, hooks, commands, settings and a sidebar panel in one small package — a reference implementation you can copy.',
+      },
+      zh: {
+        title: '功能展示',
+        subtitle: 'DeepSeek Harness 参考插件：一个工具、一个钩子、一条命令、一张设置卡片与一个右侧栏面板。',
+        panelTitle: '巡检面板',
+        panelEmpty: '暂时取不到巡检数据：Showcase 宿主服务当前不可达。',
+        gateOn: '拦截门：已开启',
+        gateOff: '拦截门：已关闭',
+        openPanel: '打开巡检面板',
+        refresh: '刷新',
+        welcome: '欢迎使用功能展示',
+        stepDoctorTitle: '1 · 跑一次体检',
+        stepDoctorBody: '把这条命令发到对话输入框，宿主会回一份完整的 DSH 体检报告。',
+        stepSettingsTitle: '2 · 打开设置卡',
+        stepSettingsBody: '在「设置 → 功能展示」里能看到同一份巡检快照、拦截门状态与本插件版本。',
+        stepGateTitle: '3 · 了解拦截门',
+        stepGateBody: '拦截门会在破坏性 shell 命令执行前拦下它，用这条命令开启或关闭。',
+        copyHint: '复制',
+        copied: '已复制',
+        doctorHint: '客户端无法直接调用宿主，所以这里把命令作为可选中文本交给你。',
+        aboutBody: '工具、钩子、命令、设置卡与侧栏面板都装在这一个小包里——可直接抄走的参考实现。',
+      },
+    }
+
+    // The three seats are mounted by different owners; the Client Context of this
+    // plugin is the one dependency they share, so it is kept here once apply ran.
+    let currentCtx = null
+
+    function pickLang(value) {
+      const tag = typeof value === 'string' ? value.toLowerCase().split(/[-_]/)[0] : ''
+      return tag === 'zh' || tag === 'en' ? tag : null
+    }
+
+    function browserLang() {
+      const nav = typeof navigator === 'undefined' ? '' : navigator.language
+      return typeof nav === 'string' && nav.toLowerCase().startsWith('zh') ? 'zh' : 'en'
+    }
+
+    function lang(ctx) {
+      const target = ctx === undefined || ctx === null ? currentCtx : ctx
+      try {
+        const state = target === null || target === undefined ? null : target.get?.('locale')?.getSnapshot?.()
+        return pickLang(state?.active) || pickLang(state?.locale) || browserLang()
+      } catch (error) {
+        return browserLang()
+      }
+    }
+
+    function text(ctx) {
+      return dict[lang(ctx)]
+    }
+
+    function getOf(ctx, key) {
+      if (ctx === null || ctx === undefined) return undefined
+      try {
+        const value = ctx[key]
+        if (value !== undefined && value !== null) return value
+        return typeof ctx.get === 'function' ? ctx.get(key) : undefined
+      } catch (error) {
+        return undefined
+      }
+    }
+
+    // ---- data ----------------------------------------------------------------
+
+    // B owns the wire name (§7); every shape it may legitimately take is tried in
+    // one place, and any failure degrades to null instead of throwing.
+    function remoteCandidate(ctx) {
+      const target = ctx === undefined || ctx === null ? currentCtx : ctx
+      const reads = [
+        () => getOf(target, 'remote.showcase'),
+        () => getOf(getOf(target, 'remote'), 'showcase'),
+        () => getOf(target, 'showcase'),
+      ]
+      for (const read of reads) {
+        try {
+          const service = read()
+          if (service !== undefined && service !== null && typeof service.snapshot === 'function') return service
+        } catch (error) {
+          // try the next shape
+        }
+      }
+      return null
+    }
+
+    function asSnapshot(value) {
+      if (value === null || typeof value !== 'object') return null
+      if (Array.isArray(value.sections) || typeof value.generatedAt === 'string') return value
+      return null
+    }
+
+    // A RemoteResult carries { ok, value } | { ok:false, error }; a plain service
+    // answers the Snapshot itself.
+    function unwrap(result) {
+      if (result === null || typeof result !== 'object') return null
+      if (typeof result.ok === 'boolean') return result.ok ? asSnapshot(result.value) : null
+      return asSnapshot(result)
+    }
+
+    async function fetchSnapshot(ctx) {
+      try {
+        const service = remoteCandidate(ctx)
+        if (service === null) return null
+        return unwrap(await service.snapshot())
+      } catch (error) {
+        return null
+      }
+    }
+
+    // ---- shared UI -----------------------------------------------------------
+
+    const MONO = 'ui-monospace, SFMono-Regular, Consolas, monospace'
+
+    // Every box is min-width:0 + overflowX:hidden so a squeezed container can only
+    // shorten lines, never force the host into a horizontal scrollbar.
+    const S = {
+      card: { display: 'flex', flexDirection: 'column', gap: 10, padding: '16px 18px', minWidth: 0, maxWidth: '100%', boxSizing: 'border-box', overflowX: 'hidden', fontSize: 13, color: 'inherit' },
+      cardNarrow: { gap: 8, padding: '10px 8px' },
+      pane: { display: 'flex', flexDirection: 'column', gap: 10, padding: '12px 14px', minWidth: 0, maxWidth: '100%', boxSizing: 'border-box', overflowX: 'hidden', fontSize: 13, color: 'inherit' },
+      paneNarrow: { gap: 8, padding: '8px' },
+      head: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 },
+      title: { margin: 0, fontSize: 14, fontWeight: 600 },
+      subtitle: { margin: 0, fontSize: 12, lineHeight: 1.55, opacity: 0.72 },
+      welcome: { margin: 0, fontSize: 13, fontWeight: 600 },
+      about: { margin: 0, fontSize: 12, lineHeight: 1.55, opacity: 0.72 },
+      toolbar: { display: 'flex', flexWrap: 'wrap', gap: 8 },
+      button: { font: 'inherit', fontSize: 12, padding: '3px 10px', borderRadius: 6, border: '1px solid rgba(128,128,128,.45)', background: 'transparent', color: 'inherit', cursor: 'pointer' },
+      footerAction: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 26, height: 26, borderRadius: 6, border: 0, background: 'transparent', color: 'inherit', cursor: 'pointer', fontSize: 14 },
+      note: { margin: 0, fontSize: 12, lineHeight: 1.55, opacity: 0.7 },
+      steps: { display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 },
+      step: { display: 'flex', flexDirection: 'column', gap: 4, padding: '8px 10px', borderRadius: 8, border: '1px solid rgba(128,128,128,.25)', minWidth: 0 },
+      stepTitle: { margin: 0, fontSize: 13, fontWeight: 600 },
+      stepBody: { margin: 0, fontSize: 12, lineHeight: 1.5, opacity: 0.72, overflowWrap: 'anywhere' },
+      copyRow: { display: 'flex', gap: 6, alignItems: 'center', minWidth: 0 },
+      copyRowNarrow: { display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'stretch', minWidth: 0 },
+      code: { flex: '1 1 auto', minWidth: 0, padding: '3px 8px', borderRadius: 6, background: 'rgba(128,128,128,.14)', fontFamily: MONO, fontSize: 12, whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', wordBreak: 'break-word' },
+      foot: { display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'baseline', fontSize: 11, opacity: 0.62, minWidth: 0 },
+      group: { display: 'flex', flexDirection: 'column', gap: 3 },
+      groupTitle: { margin: '4px 0 0', fontSize: 12, fontWeight: 600, opacity: 0.85 },
+      row: { display: 'flex', gap: 8, alignItems: 'baseline', minWidth: 0 },
+      rowNarrow: { display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0 },
+      rowLabel: { flex: '0 0 auto', minWidth: 82, fontSize: 12, opacity: 0.6 },
+      rowLabelNarrow: { fontSize: 11, opacity: 0.6 },
+      rowValue: { flex: '1 1 auto', minWidth: 0, fontSize: 12, fontFamily: MONO, overflowWrap: 'anywhere', wordBreak: 'break-word' },
+      rowValueNarrow: { fontSize: 12, fontFamily: MONO, overflowWrap: 'anywhere', wordBreak: 'break-word' },
+    }
+
+    // Below this the label column alone eats the line, so pairs stack instead of
+    // squeezing one character per line.
+    const NARROW_MAX = 320
+    const COPIED_MS = 1600
+
+    function row(key, label, value, narrow) {
+      const shown = value === null || value === undefined || value === '' ? '—' : String(value)
+      return h('div', { key, style: narrow === true ? S.rowNarrow : S.row },
+        h('span', { style: narrow === true ? S.rowLabelNarrow : S.rowLabel }, label),
+        h('span', { style: narrow === true ? S.rowValueNarrow : S.rowValue }, shown))
+    }
+
+    function factRows(snapshot, t) {
+      const workspace = snapshot.workspace || {}
+      const session = snapshot.session || {}
+      const plugin = snapshot.plugin || {}
+      return [
+        ['generatedAt', snapshot.generatedAt],
+        ['cwd', workspace.cwd],
+        ['gitBranch', workspace.gitBranch],
+        ['model', session.model],
+        ['version', plugin.version],
+        ['gate', plugin.gateEnabled === true ? t.gateOn : t.gateOff],
+      ]
+    }
+
+    function snapshotBody(snapshot, t, narrow) {
+      const sections = Array.isArray(snapshot.sections) ? snapshot.sections : []
+      const facts = factRows(snapshot, t)
+      return h('div', { style: S.group },
+        h('h4', { style: S.groupTitle }, 'snapshot'),
+        facts.map(([label, value], index) => row('fact-' + index, label, value, narrow)),
+        sections.map((section, index) => h('div', { key: 'section-' + index, style: S.group },
+          h('h4', { style: S.groupTitle }, String((section && section.title) || '')),
+          (Array.isArray(section && section.items) ? section.items : []).map((item, itemIndex) =>
+            row('item-' + index + '-' + itemIndex, String((item && item.label) || ''), item && item.value, narrow)))))
+    }
+
+    // Contract v1 §7 fallback, kept: with no client-reachable remote the seats still
+    // say what this plugin offers instead of rendering nothing.
+    const CAPABILITIES = [
+      ['tool', 'showcase_inspect'],
+      ['command', '/showcase'],
+      ['plugin', 'dsh-plugin-showcase'],
+    ]
+
+    function capabilityBlock(t, narrow) {
+      return h('div', { style: S.group },
+        CAPABILITIES.map(([label, value], index) => row('cap-' + index, label, value, narrow)))
+    }
+
+    function copyText(value) {
+      try {
+        const clipboard = typeof navigator === 'undefined' ? null : navigator.clipboard
+        if (clipboard === null || clipboard === undefined || typeof clipboard.writeText !== 'function') return false
+        const pending = clipboard.writeText(value)
+        if (pending !== null && typeof pending === 'object' && typeof pending.catch === 'function') pending.catch(() => {})
+        return true
+      } catch (error) {
+        return false
+      }
+    }
+
+    // The command stays on screen as selectable text, so a blocked clipboard still
+    // leaves the reader something to copy by hand.
+    function copyRow(id, value, t, narrow, copiedId, onCopy) {
+      const copied = copiedId === id
+      return h('div', { key: 'copy-' + id, style: narrow === true ? S.copyRowNarrow : S.copyRow },
+        h('code', { style: S.code }, value),
+        h('button', {
+          type: 'button',
+          style: S.button,
+          onClick: () => onCopy(id, value),
+          'aria-label': t.copyHint,
+          title: t.copyHint,
+        }, copied ? t.copied : t.copyHint))
+    }
+
+    function guideSteps(t, narrow, copiedId, onCopy) {
+      const steps = [
+        { id: 'doctor', title: t.stepDoctorTitle, body: t.stepDoctorBody, value: '/showcase doctor' },
+        { id: 'settings', title: t.stepSettingsTitle, body: t.stepSettingsBody, value: t.title },
+        { id: 'gate', title: t.stepGateTitle, body: t.stepGateBody, value: '/showcase on|off' },
+      ]
+      return steps.map(step => h('div', { key: 'step-' + step.id, style: S.step },
+        h('h4', { style: S.stepTitle }, step.title),
+        h('p', { style: S.stepBody }, step.body),
+        copyRow(step.id, step.value, t, narrow, copiedId, onCopy)))
+    }
+
+    function gateLabel(t, snapshot) {
+      if (snapshot === null || snapshot === undefined) return '—'
+      const plugin = snapshot.plugin || {}
+      return plugin.gateEnabled === true ? t.gateOn : t.gateOff
+    }
+
+    // ---- hooks ---------------------------------------------------------------
+
+    // Re-renders on a language switch so the visible copy follows the label thunks.
+    function useLangTick(ctx) {
+      if (typeof React.useState !== 'function' || typeof React.useEffect !== 'function') return
+      const [, setGen] = React.useState(0)
+      React.useEffect(() => {
+        const locale = getOf(ctx, 'locale')
+        let dispose = null
+        try {
+          dispose = typeof locale?.subscribe === 'function' ? locale.subscribe(() => setGen((value) => value + 1)) : null
+        } catch (error) {
+          dispose = null
+        }
+        return () => {
+          try {
+            if (typeof dispose === 'function') dispose()
+          } catch (error) {
+            // a locale subscription that cannot be released must not break unmount
+          }
+        }
+      }, [])
+    }
+
+    function useSnapshot(ctx) {
+      const [state, setState] = React.useState({ loading: true, data: null })
+      const refresh = () => {
+        setState((previous) => ({ loading: true, data: previous.data }))
+        fetchSnapshot(ctx).then(
+          (data) => setState({ loading: false, data }),
+          () => setState({ loading: false, data: null }))
+      }
+      React.useEffect(() => { refresh() }, [])
+      return [state, refresh]
+    }
+
+    function useCopyState() {
+      const [copiedId, setCopiedId] = React.useState(null)
+      const timer = useRefOf()
+      const copy = (id, value) => {
+        copyText(value)
+        setCopiedId(id)
+        try {
+          if (typeof setTimeout !== 'function') return
+          if (timer.current !== null && timer.current !== undefined) clearTimeout(timer.current)
+          timer.current = setTimeout(() => setCopiedId(null), COPIED_MS)
+        } catch (error) {
+          // the badge stays until the next render
+        }
+      }
+      return [copiedId, copy]
+    }
+
+    // The host forces a very narrow content column on small screens; stacking is
+    // driven by the measured box, not the viewport, because only the box knows.
+    function useNarrow(ref) {
+      const [narrow, setNarrow] = React.useState(false)
+      React.useEffect(() => {
+        const element = ref === null || ref === undefined ? null : ref.current
+        const box = element !== null && element !== undefined && typeof element.getBoundingClientRect === 'function'
+          ? element
+          : null
+        const viewport = () => (typeof window !== 'undefined' && typeof window.innerWidth === 'number' ? window.innerWidth : NARROW_MAX + 1)
+        const measure = () => {
+          const width = box === null ? viewport() : box.getBoundingClientRect().width
+          setNarrow(width > 0 && width < NARROW_MAX)
+        }
+        measure()
+        if (box !== null && typeof ResizeObserver === 'function') {
+          const observer = new ResizeObserver(measure)
+          observer.observe(box)
+          return () => observer.disconnect()
+        }
+        if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+          window.addEventListener('resize', measure)
+          return () => window.removeEventListener('resize', measure)
+        }
+        return undefined
+      }, [])
+      return narrow === true
+    }
+
+    function useRefOf() {
+      return typeof React.useRef === 'function' ? React.useRef(null) : { current: null }
+    }
+
+    // Cached by the service watch below: the controller may arrive after apply.
+    let rightController = null
+
+    function resolveSidebarRight(ctx) {
+      const target = ctx === undefined || ctx === null ? currentCtx : ctx
+      const reads = [
+        () => (target === null || target === undefined ? undefined : target.get?.('sidebarRight')),
+        () => (target === null || target === undefined ? undefined : target.sidebarRight),
+        () => rightController,
+      ]
+      for (const read of reads) {
+        try {
+          const candidate = read()
+          if (candidate !== undefined && candidate !== null && typeof candidate.openTab === 'function') return candidate
+        } catch (error) {
+          // keep looking
+        }
+      }
+      return null
+    }
+
+    function openPanel(ctx) {
+      const right = resolveSidebarRight(ctx)
+      if (right === null) {
+        console.warn('[dsh-plugin-showcase] sidebarRight is not available; the showcase panel cannot be opened')
+        return false
+      }
+      try {
+        right.openTab(TAB_KIND)
+        return true
+      } catch (error) {
+        console.warn('[dsh-plugin-showcase] sidebarRight.openTab("' + TAB_KIND + '") failed:', error)
+        return false
+      }
+    }
+
+    // ---- seats ---------------------------------------------------------------
+
+    function SettingsCard() {
+      const ctx = currentCtx
+      const t = text(ctx)
+      useLangTick(ctx)
+      const [state, refresh] = useSnapshot(ctx)
+      const [copiedId, copy] = useCopyState()
+      const ref = useRefOf()
+      const narrow = useNarrow(ref)
+      const degraded = state.data === null
+      return h('section', { ref, style: narrow ? { ...S.card, ...S.cardNarrow } : S.card },
+        h('h3', { style: S.title }, t.title),
+        h('p', { style: S.subtitle }, t.subtitle),
+        h('p', { style: S.note }, t.doctorHint),
+        copyRow('card-doctor', '/showcase doctor', t, narrow, copiedId, copy),
+        h('div', { style: S.toolbar },
+          h('button', { type: 'button', style: S.button, onClick: refresh }, t.refresh),
+          h('button', { type: 'button', style: S.button, onClick: () => openPanel(ctx) }, t.openPanel)),
+        h('div', { style: S.foot },
+          h('span', null, 'v' + VERSION),
+          h('span', null, gateLabel(t, state.data))),
+        capabilityBlock(t, narrow),
+        degraded ? h('p', { style: S.note }, t.panelEmpty) : snapshotBody(state.data, t, narrow))
+    }
+
+    function ShowcasePanel() {
+      const ctx = currentCtx
+      const t = text(ctx)
+      useLangTick(ctx)
+      const [state, refresh] = useSnapshot(ctx)
+      const [copiedId, copy] = useCopyState()
+      const ref = useRefOf()
+      const narrow = useNarrow(ref)
+      const degraded = state.data === null
+      return h('div', { ref, style: narrow ? { ...S.pane, ...S.paneNarrow } : S.pane },
+        h('div', { style: S.head },
+          h('h3', { style: S.title }, t.panelTitle),
+          h('button', { type: 'button', style: S.button, onClick: refresh }, t.refresh)),
+        h('h4', { style: S.welcome }, t.welcome),
+        h('p', { style: S.about }, t.aboutBody),
+        h('div', { style: S.steps }, guideSteps(t, narrow, copiedId, copy)),
+        h('p', { style: S.note }, t.doctorHint),
+        degraded ? capabilityBlock(t, narrow) : snapshotBody(state.data, t, narrow),
+        h('div', { style: S.foot },
+          h('span', null, 'v' + VERSION),
+          degraded ? h('span', null, t.panelEmpty) : null))
+    }
+
+    function FooterAction(props) {
+      const ctx = currentCtx
+      const t = text(ctx)
+      useLangTick(ctx)
+      const open = props !== null && props !== undefined && typeof props.open === 'function'
+        ? props.open
+        : () => openPanel(ctx)
+      return h('button', {
+        type: 'button',
+        title: t.openPanel,
+        'aria-label': t.openPanel,
+        onClick: open,
+        style: S.footerAction,
+      }, '◎')
+    }
+
+    // ---- apply ---------------------------------------------------------------
+
+    function effectOf(ctx) {
+      if (typeof ctx.effect === 'function') return (fn, label) => ctx.effect(fn, label)
+      return (fn) => {
+        const dispose = fn()
+        return () => {
+          if (typeof dispose === 'function') dispose()
+        }
+      }
+    }
+
+    // ui-sidebar-right provides these services in its own apply, which may run
+    // after ours: an immediate ctx.get() read loses the race and the tab type is
+    // never registered, so the service is awaited instead of sampled.
+    function watchService(ctx, name, receive) {
+      const settle = (service, scope) => {
+        if (service === undefined || service === null) return
+        try {
+          receive(service, scope)
+        } catch (error) {
+          console.warn('[dsh-plugin-showcase] handler for ' + name + ' failed:', error)
+        }
+      }
+      if (typeof ctx.inject === 'function') {
+        try {
+          ctx.inject([name], (scope) => settle(scope === null || scope === undefined ? undefined : scope[name], scope))
+          return
+        } catch (error) {
+          console.warn('[dsh-plugin-showcase] ctx.inject(' + name + ') is unusable, falling back to a service watch:', error)
+        }
+      }
+      const present = getOf(ctx, name)
+      if (present !== undefined && present !== null) {
+        settle(present, ctx)
+        return
+      }
+      if (typeof setTimeout !== 'function') return
+      effectOf(ctx)(() => {
+        let done = false
+        let tries = 0
+        let timer = null
+        const tick = () => {
+          if (done) return
+          const service = getOf(ctx, name)
+          if (service !== undefined && service !== null) {
+            done = true
+            settle(service, ctx)
+            return
+          }
+          tries += 1
+          if (tries < 20) timer = setTimeout(tick, 150)
+        }
+        timer = setTimeout(tick, 0)
+        return () => {
+          done = true
+          if (timer !== null) clearTimeout(timer)
+        }
+      }, 'showcase: await ' + name)
+    }
+
+    function apply(ctx) {
+      currentCtx = ctx
+      const slots = getOf(ctx, 'slots')
+      if (slots === undefined || slots === null) return
+      const effect = effectOf(ctx)
+
+      effect(() => slots.inject('settings.section', () => slots.register({
+        name: 'settings.section',
+        id: 'showcase',
+        order: 90,
+        label: () => dict[lang(ctx)].title,
+      }, SettingsCard)), 'showcase: settings section')
+
+      // The tab type owns the id; that same id is the key its body seats under.
+      watchService(ctx, 'sidebarRightTabs', (tabs) => {
+        if (typeof tabs.register !== 'function') return
+        effect(() => tabs.register({
+          id: TAB_ID,
+          kind: TAB_KIND,
+          canOpen: () => true,
+          title: () => dict[lang(ctx)].panelTitle,
+        }), 'showcase: right pane tab type')
+      })
+
+      watchService(ctx, 'sidebarRight', (controller) => { rightController = controller })
+
+      effect(() => slots.inject('sidebar.right.pane.tab', () => slots.register({
+        name: 'sidebar.right.pane.tab',
+        key: TAB_ID,
+      }, ShowcasePanel)), 'showcase: right pane body')
+
+      // 'label' is legal list metadata (string | (() => string), resolved by
+      // resolveSlotLabel), but this seat is projected with only { wide }, so the
+      // button's own glyph and aria-label carry the visible text.
+      effect(() => slots.inject('sidebar.footer.action', () => slots.register({
+        name: 'sidebar.footer.action',
+        id: 'showcase-open',
+        order: 90,
+        label: () => dict[lang(ctx)].openPanel,
+        inject: () => ({ open: () => openPanel(ctx) }),
+      }, FooterAction)), 'showcase: sidebar footer action')
+    }
+
+    return { apply, inject: ['slots'], fetchSnapshot, lang, dict, VERSION, TAB_ID, TAB_KIND }
+  },
+})