@shendeguize/dsh-agent-sidecar 0.1.1 → 0.2.0

package/src/client/sidebar-tab.tsx

@@ -1,52 +1,31 @@
 /**
- * Optional better-sidebar mini tab (T6.3, design §5.2 / ADR-5 option C).
- *
- * dsh-better-sidebar (npm, ≥0.4.0) turns the sidebar into a registry
- * service: its client half runs `ctx.provide('betterSidebar', service)` and
- * consumers call `service.registerTab(descriptor)` (source of record:
- * better-sidebar docs/external-plugin-guide.md + src/client/service.ts).
- * This module integrates as a SOFT dependency, dsh-sentinel style:
- *
- * - NO value import and NO type import of `dsh-better-sidebar` — the client
- *   bundle purity gate stays react-only. The minimal service contract is
- *   restated locally ({@link BetterSidebarServiceFace}) and the live service
- *   is duck-typed at runtime ({@link probeBetterSidebar}).
- * - Absent → silent skip: {@link mountSidebarTab} parks the registration in
- *   `ctx.inject(['betterSidebar'], …)` — a cordis fiber that stays PENDING
- *   until some plugin provides the service (zero timers, zero polling, zero
- *   resources), plus one debug-level log line at mount time. If
- *   better-sidebar is installed later (any load order), the fiber activates
- *   and the tab registers; if never, nothing ever runs.
- * - Present → one compact "Sidecar" tab (`agent-sidecar:monitor`): daemon
- *   connection dot, working/waiting counts, and the most recently active
- *   sessions, all read from the SHARED {@link SidecarController} stores —
- *   no second poller, no second SSE.
- * - `visible === false` releases resources: better-sidebar hands tab
- *   components a `visible` prop (false while the panel is collapsed or
- *   another tab is active). The shared controller has no pause/refcount
- *   surface (its stream is plugin-lifetime, `stop()` is terminal), so the
- *   gate lives in this view: {@link VisibleGatedStore} unsubscribes from the
- *   controller while hidden (re-render churn stops; the view triggers no
- *   fetches of its own) and resubscribes + catches up on show.
+ * Soft dsh-better-sidebar integration (design §5.2 / ADR-5 option C).
+ * The dependency stays duck-typed: absence parks a zero-resource inject
+ * fiber, presence registers one compact tab over the shared controller.
+ * `visible=false` drops only this view's subscription; the plugin-lifetime
+ * controller remains untouched.
  */
 
 import { createElement as h, useEffect, useState, useSyncExternalStore } from 'react'
-import type { CSSProperties, ReactElement, ReactNode } from 'react'
+import type { ReactElement, ReactNode } from 'react'
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
 import type { SidecarController, SidecarViewState } from './controller.ts'
 import {
-  agentGlyph,
-  countWorking,
-  deriveWidgetConnection,
-  formatRelativeTime,
-  normalizeStatus,
-  projectDisplayName,
-  widgetTitle,
-  type SessionCardVM,
-  type SessionStatusToken,
-  type WidgetConnection,
-} from './board/logic.ts'
-import { t, type SidecarLocaleKey } from './locales/index.ts'
+  acquireWithHandoff,
+  isRegistrationCollision,
+} from './lifecycle/handoff.ts'
+import { SidebarTab, SidebarTabIcon } from './sidebar/SidebarTab.tsx'
+import { deriveMiniVM } from './sidebar/model.ts'
+import { t } from './locales/index.ts'
+
+// Compatibility exports for consumers of the original integration module.
+export {
+  MAX_RECENT_SESSIONS,
+  countWaiting,
+  deriveMiniVM,
+  recentActiveSessions,
+} from './sidebar/model.ts'
+export type { SidebarMiniVM } from './sidebar/model.ts'
 
 /** Registered tab type id (design §5.2 names it verbatim). */
 export const SIDEBAR_TAB_ID = 'agent-sidecar:monitor'
@@ -54,12 +33,7 @@ export const SIDEBAR_TAB_ID = 'agent-sidecar:monitor'
 /** `+`-menu order: after the built-ins (explorer=10 … browser=50). */
 export const SIDEBAR_TAB_ORDER = 60
 
-/** Compact view caps the session list at this many rows (task spec: 3-5). */
-export const MAX_RECENT_SESSIONS = 5
-
-// ---------------------------------------------------------------------------
 // Duck-typed better-sidebar contract (locally restated, never imported).
-// ---------------------------------------------------------------------------
 
 /** Props better-sidebar hands every tab component; only `visible` is used. */
 export interface SidebarTabComponentProps {
@@ -98,9 +72,7 @@ export function probeBetterSidebar(candidate: unknown): BetterSidebarServiceFace
     : null
 }
 
-// ---------------------------------------------------------------------------
 // Visibility gate over the shared controller.
-// ---------------------------------------------------------------------------
 
 /** The slice of {@link SidecarController} this view consumes (tests fake it). */
 export type SidecarStateSource = Pick<SidecarController, 'subscribe' | 'getState'>
@@ -169,214 +141,10 @@ export class VisibleGatedStore {
   }
 }
 
-// ---------------------------------------------------------------------------
-// Pure view model (exported for tests).
-// ---------------------------------------------------------------------------
-
-/** Count of sessions currently observed as waiting. */
-export function countWaiting(sessions: ReadonlyArray<{ status: string }>): number {
-  let count = 0
-  for (const session of sessions) {
-    if (normalizeStatus(session.status) === 'waiting') count += 1
-  }
-  return count
-}
+// React integration adapter.
 
 /**
- * The compact list: non-dead sessions, most recently updated first, capped
- * at {@link MAX_RECENT_SESSIONS} (ties break by session id for stability).
- */
-export function recentActiveSessions<T extends SessionCardVM>(
-  sessions: readonly T[],
-  limit: number = MAX_RECENT_SESSIONS,
-): T[] {
-  return sessions
-    .filter((session) => normalizeStatus(session.status) !== 'dead')
-    .sort((a, b) =>
-      b.updatedAtMs !== a.updatedAtMs
-        ? b.updatedAtMs - a.updatedAtMs
-        : a.sessionId.localeCompare(b.sessionId))
-    .slice(0, limit)
-}
-
-/** Everything the mini tab renders. */
-export interface SidebarMiniVM {
-  connection: WidgetConnection
-  /** Hover text for the header dot (connection + working count). */
-  connectionTitle: string
-  workingCount: number
-  waitingCount: number
-  recent: SessionCardVM[]
-  hasSnapshot: boolean
-}
-
-/** Fold the shared view state into the mini tab's view model (pure). */
-export function deriveMiniVM(state: SidecarViewState): SidebarMiniVM {
-  const connection = deriveWidgetConnection(state.daemonState, state.streamHealth)
-  const workingCount = countWorking(state.sessions)
-  return {
-    connection,
-    connectionTitle: widgetTitle(connection, workingCount),
-    workingCount,
-    waitingCount: countWaiting(state.sessions),
-    recent: recentActiveSessions(state.sessions),
-    hasSnapshot: state.hasSnapshot,
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Presentation.
-// ---------------------------------------------------------------------------
-
-const STATUS_LABEL_KEY: Record<SessionStatusToken, SidecarLocaleKey> = {
-  working: 'detail.status.working',
-  waiting: 'detail.status.waiting',
-  idle: 'detail.status.idle',
-  dead: 'detail.status.dead',
-  unknown: 'detail.status.unknown',
-}
-
-const DOT_COLORS: Record<WidgetConnection, string> = {
-  ok: 'var(--dsw-alias-state-success-primary, #1a7f37)',
-  degraded: 'var(--dsw-alias-state-warn-primary, #9a6700)',
-  off: 'var(--dsw-alias-label-dimmed, #8c959f)',
-}
-
-const rootStyle: CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 8,
-  padding: '10px 12px',
-  fontSize: 12,
-  color: 'var(--dsw-alias-label-primary, #1f2328)',
-}
-
-const headerStyle: CSSProperties = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: 6,
-}
-
-const dotStyle = (connection: WidgetConnection): CSSProperties => ({
-  width: 8,
-  height: 8,
-  borderRadius: '50%',
-  flex: 'none',
-  background: DOT_COLORS[connection],
-})
-
-const countsStyle: CSSProperties = {
-  fontVariantNumeric: 'tabular-nums',
-  color: 'var(--dsw-alias-label-secondary, #57606a)',
-}
-
-const sectionTitleStyle: CSSProperties = {
-  fontSize: 11,
-  fontWeight: 600,
-  color: 'var(--dsw-alias-label-secondary, #57606a)',
-}
-
-const rowStyle: CSSProperties = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: 6,
-  width: '100%',
-  padding: '4px 6px',
-  border: 'none',
-  borderRadius: 6,
-  background: 'transparent',
-  cursor: 'pointer',
-  font: 'inherit',
-  textAlign: 'left',
-  color: 'inherit',
-}
-
-const rowTitleStyle: CSSProperties = {
-  flex: 1,
-  minWidth: 0,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-}
-
-const rowMetaStyle: CSSProperties = {
-  flex: 'none',
-  fontSize: 11,
-  color: 'var(--dsw-alias-label-dimmed, #8c959f)',
-  whiteSpace: 'nowrap',
-}
-
-const detailStyle: CSSProperties = {
-  margin: '0 6px 4px 20px',
-  fontSize: 11,
-  lineHeight: '16px',
-  color: 'var(--dsw-alias-label-secondary, #57606a)',
-  overflowWrap: 'anywhere',
-}
-
-const mutedStyle: CSSProperties = {
-  color: 'var(--dsw-alias-label-dimmed, #8c959f)',
-}
-
-const hintStyle: CSSProperties = {
-  fontSize: 11,
-  color: 'var(--dsw-alias-label-dimmed, #8c959f)',
-}
-
-/** One session row + its inline expansion (last event, project, id). */
-function SessionRow(props: {
-  session: SessionCardVM
-  nowMs: number
-  expanded: boolean
-  onToggle: () => void
-}): ReactElement {
-  const { session, nowMs, expanded } = props
-  const status = normalizeStatus(session.status)
-  const title = session.title.trim() === '' ? t('sidebar.untitled') : session.title
-  const rowChildren: ReactNode[] = [
-    h('span', { key: 'glyph', 'aria-hidden': true }, agentGlyph(session.agent)),
-    h('span', { key: 'title', style: rowTitleStyle, title: session.sessionId }, title),
-    h(
-      'span',
-      { key: 'meta', style: rowMetaStyle },
-      `${t(STATUS_LABEL_KEY[status])} · ${formatRelativeTime(session.updatedAtMs, nowMs)}`,
-    ),
-  ]
-  const children: ReactNode[] = [
-    h(
-      'button',
-      {
-        key: 'row',
-        type: 'button',
-        style: rowStyle,
-        onClick: props.onToggle,
-        'data-testid': 'agent-sidecar-sidebar-session',
-        'data-session-id': session.sessionId,
-        'data-status': status,
-        'aria-expanded': expanded,
-      },
-      ...rowChildren,
-    ),
-  ]
-  if (expanded) {
-    const lastEvent =
-      session.lastEvent === null
-        ? h('span', { style: mutedStyle }, t('sidebar.noEvent'))
-        : `${session.lastEvent.kind}: ${session.lastEvent.text}`
-    children.push(
-      h(
-        'div',
-        { key: 'detail', style: detailStyle, 'data-testid': 'agent-sidecar-sidebar-detail' },
-        h('div', { key: 'project' }, projectDisplayName(session.project)),
-        h('div', { key: 'event' }, lastEvent),
-      ),
-    )
-  }
-  return h('li', { style: { listStyle: 'none' } }, ...children)
-}
-
-/**
- * Build the tab component bound to the shared controller. One
+ * Bind the presentation-only tab to the shared controller. One
  * {@link VisibleGatedStore} per mounted tab instance: the `visible` prop is
  * synced into it by effect, unmount disposes it.
  */
@@ -392,56 +160,11 @@ export function createSidebarTabComponent(
       gate.setVisible(visible)
     }, [gate, visible])
     const state = useSyncExternalStore(gate.subscribe, gate.getState, gate.getState)
-    const [expandedId, setExpandedId] = useState<string | null>(null)
-
-    const vm = deriveMiniVM(state)
-    const nowMs = Date.now()
-
-    let body: ReactNode
-    if (!vm.hasSnapshot) {
-      body = h('div', { style: mutedStyle }, t('sidebar.connecting'))
-    } else if (vm.recent.length === 0) {
-      body = h('div', { style: mutedStyle }, t('sidebar.noSessions'))
-    } else {
-      body = h(
-        'ul',
-        { style: { margin: 0, padding: 0 } },
-        ...vm.recent.map((session) =>
-          h(SessionRow, {
-            key: session.sessionId,
-            session,
-            nowMs,
-            expanded: expandedId === session.sessionId,
-            onToggle: () => {
-              setExpandedId((prev) => (prev === session.sessionId ? null : session.sessionId))
-            },
-          })),
-      )
-    }
-
-    return h(
-      'div',
-      { style: rootStyle, 'data-testid': 'agent-sidecar-sidebar-tab', 'data-visible': visible },
-      h(
-        'div',
-        { style: headerStyle, title: vm.connectionTitle },
-        h('span', { 'aria-hidden': true, style: dotStyle(vm.connection) }),
-        h(
-          'span',
-          { style: countsStyle, 'data-testid': 'agent-sidecar-sidebar-counts' },
-          t('sidebar.countsRow', { working: vm.workingCount, waiting: vm.waitingCount }),
-        ),
-      ),
-      h('div', { style: sectionTitleStyle }, t('sidebar.recentTitle')),
-      body,
-      h('div', { style: hintStyle }, t('sidebar.boardHint')),
-    )
+    return h(SidebarTab, { vm: deriveMiniVM(state), visible })
   }
 }
 
-// ---------------------------------------------------------------------------
 // Mount.
-// ---------------------------------------------------------------------------
 
 /** Context slice {@link mountSidebarTab} consumes (tests hand in a fake). */
 export interface SidebarMountContext {
@@ -454,9 +177,9 @@ export interface SidebarMountContext {
  * installed → the inject fiber never activates (silent skip, one debug
  * line, zero resources). Installed (before or after this plugin, order
  * does not matter) → duck-type the service and register the mini tab
- * inside `ctx.effect`, so plugin unload / HMR unregisters it. A duplicate
- * registration (double apply) or a service throw degrades to a logged
- * no-op — never past this seat.
+ * inside `ctx.effect`, so plugin unload / HMR unregisters it. During overlap,
+ * the new fiber waits briefly for the old tab to leave, then contributes its
+ * own component closure. Foreign collisions time out without eviction.
  */
 export function mountSidebarTab(ctx: ClientContext, controller: SidecarStateSource): void {
   const mount = ctx as unknown as SidebarMountContext
@@ -474,21 +197,24 @@ export function mountSidebarTab(ctx: ClientContext, controller: SidecarStateSour
       return
     }
     const component = createSidebarTabComponent(controller)
-    bctx.effect(() => {
-      try {
-        return service.registerTab({
-          id: SIDEBAR_TAB_ID,
-          title: () => t('sidebar.tabTitle'),
-          icon: (size: number) =>
-            h('span', { 'aria-hidden': true, style: { fontSize: Math.round(size * 0.75) } }, '◈'),
-          order: SIDEBAR_TAB_ORDER,
-          single: true,
-          component,
-        })
-      } catch (err) {
-        console.error('agent-sidecar: better-sidebar tab registration failed', err)
-        return () => {}
-      }
-    }, 'agent-sidecar: better-sidebar tab')
+    bctx.effect(() => acquireWithHandoff(
+      () => service.registerTab({
+        id: SIDEBAR_TAB_ID,
+        title: () => t('sidebar.tabTitle'),
+        icon: (size: number) => h(SidebarTabIcon, { size }),
+        order: SIDEBAR_TAB_ORDER,
+        single: true,
+        component,
+      }),
+      {
+        isCollision: isRegistrationCollision,
+        onError: (error) => {
+          console.error('agent-sidecar: better-sidebar tab registration failed', error)
+        },
+        onTimeout: () => {
+          console.error('agent-sidecar: better-sidebar tab handoff timed out')
+        },
+      },
+    ), 'agent-sidecar: better-sidebar tab')
   })
 }

package/src/client/theme/agsc.module.css

@@ -0,0 +1,31 @@
+/*
+ * L3 of the theming interface (design agent_center_native_ui.md §4).
+ * `surfaceProps()` applies this root class together with stable L2 anchors.
+ *
+ * Every color and shadow delegates to an official --dsw-* token, so the
+ * plugin follows the host theme and Skin Center without owning a parallel
+ * palette. Users, skins, or other plugins can override one surface:
+ *
+ *   [data-dsh-plugin='agent-sidecar'] { --agsc-accent: var(--skin-accent); }
+ */
+
+.root {
+  --agsc-accent: var(--dsw-alias-brand-primary);
+  --agsc-bg: var(--dsw-alias-bg-layer-1);
+  --agsc-bg-raised: var(--dsw-alias-bg-layer-3);
+  --agsc-fg: var(--dsw-alias-label-primary);
+  --agsc-fg-secondary: var(--dsw-alias-label-secondary);
+  --agsc-fg-dimmed: var(--dsw-alias-label-dimmed);
+  --agsc-border: var(--dsw-alias-border-l1);
+  --agsc-border-strong: var(--dsw-alias-border-l2);
+  --agsc-ok: var(--dsw-alias-state-success-primary);
+  --agsc-warn: var(--dsw-alias-state-warn-primary);
+  --agsc-err: var(--dsw-alias-state-error-primary);
+  --agsc-radius-card: 12px;
+  --agsc-radius-control: 8px;
+  --agsc-shadow-card: var(--dsw-shadow-lv2);
+  --agsc-font-mono: var(--ds-font-family-code);
+
+  color: var(--agsc-fg);
+  font-family: inherit;
+}

package/src/client/theme/parts.ts

@@ -0,0 +1,56 @@
+import theme from './agsc.module.css'
+
+/** Stable owner value for Agent Sidecar skin anchors. */
+export const PLUGIN_DOM_ID = 'agent-sidecar'
+
+/**
+ * Closed public registry of bare `data-dsh-part` values.
+ * Adding an entry changes the theming contract and requires tests + docs.
+ */
+export const SIDECAR_PARTS = Object.freeze([
+  'board',
+  'board-toolbar',
+  'board-card',
+  'project-view',
+  'detail',
+  'timeline',
+  'inject-panel',
+  'analysis-panel',
+  'dsh-tools',
+  'footer-widget',
+  'sidebar-entry',
+  'settings-card',
+  'overlay',
+  'sidebar-tab',
+] as const)
+
+export type SidecarPart = (typeof SIDECAR_PARTS)[number]
+
+export interface SurfaceProps {
+  readonly className: string
+  readonly 'data-dsh-plugin': typeof PLUGIN_DOM_ID
+  readonly 'data-dsh-part': SidecarPart
+}
+
+function requireThemeClass(name: string): string {
+  const className = theme[name]
+  if (className === undefined || className.length === 0) {
+    throw new Error(`Agent Sidecar theme is missing its ${name} class`)
+  }
+  return className
+}
+
+const rootClassName = requireThemeClass('root')
+
+/**
+ * Returns the complete, spreadable contract for one mounted surface.
+ * This keeps hashed CSS classes internal while exposing stable DSH anchors.
+ */
+export function surfaceProps(part: SidecarPart, className?: string): SurfaceProps {
+  const localClassName = className?.trim()
+  return {
+    className: localClassName ? `${rootClassName} ${localClassName}` : rootClassName,
+    'data-dsh-plugin': PLUGIN_DOM_ID,
+    'data-dsh-part': part,
+  }
+}

package/src/client/ui-integration.ts

@@ -0,0 +1,86 @@
+/**
+ * UI composition ports for the board and session-detail surfaces.
+ *
+ * Views depend on these narrow factory seams instead of owning the
+ * application assembly contract. The default factory binds the existing
+ * stores; callers can provide alternate port implementations in tests or
+ * other materializations.
+ *
+ * @module
+ */
+
+import { AnalysisStore } from './analysis-glue.ts'
+import { DetailStore, type DetailHeaderHint } from './detail-glue.ts'
+import type { InjectActions } from './inject-glue.ts'
+import type { InjectMode } from './inject/logic.ts'
+import { ProjectsStore } from './project-glue.ts'
+import { SearchStore } from './search-glue.ts'
+
+/** Detail-store capabilities consumed by the session-detail surface. */
+export type DetailStorePort = Pick<
+  DetailStore,
+  | 'subscribe'
+  | 'getState'
+  | 'open'
+  | 'loadMore'
+  | 'toggleListen'
+  | 'refreshNewest'
+  | 'notifySnapshot'
+  | 'dispose'
+>
+
+/** Search-store capabilities consumed by the detail tools surface. */
+export type SearchStorePort = Pick<
+  SearchStore,
+  'subscribe' | 'getState' | 'setQuery' | 'submit' | 'dispose'
+>
+
+/** Analysis-store capabilities consumed by the analysis panel. */
+export type AnalysisStorePort = Pick<
+  AnalysisStore,
+  'subscribe' | 'getState' | 'start' | 'followup' | 'stop' | 'dispose'
+>
+
+/** Project-store capabilities consumed by the project view. */
+export type ProjectsStorePort = Pick<
+  ProjectsStore,
+  'subscribe' | 'getState' | 'refresh' | 'notifySnapshot' | 'dispose'
+>
+
+/** Optional injection capability consumed by the detail surface. */
+export interface InjectUiPort {
+  actions: InjectActions
+  /** Read when the panel opens so late settings updates are observed. */
+  getDefaultMode: () => InjectMode
+}
+
+/** Dependencies required to assemble one session-detail surface. */
+export interface DetailUiPort {
+  inject?: InjectUiPort
+  /** Live settings-backed analysis gate; defaults remain fail-closed. */
+  getAnalysisEnabled: () => boolean
+  createDetailStore: (sessionId: string, hint: DetailHeaderHint | null) => DetailStorePort
+  createSearchStore: () => SearchStorePort
+  createAnalysisStore: () => AnalysisStorePort
+}
+
+/** Dependencies required by the board and the detail route it opens. */
+export interface BoardUiPort {
+  detail: DetailUiPort
+  createProjectsStore: () => ProjectsStorePort
+}
+
+type DetailIntegrationBase = Pick<DetailUiPort, 'inject' | 'getAnalysisEnabled'>
+
+/** Bind the production store implementations at the client composition root. */
+export function createDefaultIntegration(base: DetailIntegrationBase): BoardUiPort {
+  return {
+    detail: {
+      ...base,
+      createDetailStore: (sessionId, hint) => new DetailStore(sessionId, { hint }),
+      createSearchStore: () => new SearchStore(),
+      createAnalysisStore: () => new AnalysisStore(),
+    },
+    createProjectsStore: () => new ProjectsStore(),
+  }
+}

package/src/client/widget.tsx

@@ -13,6 +13,7 @@
 
 import type { CSSProperties, ReactElement } from 'react'
 import { widgetTitle, type WidgetConnection } from './board/logic.ts'
+import { surfaceProps } from './theme/parts.ts'
 
 export interface SidecarWidgetProps {
   connection: WidgetConnection
@@ -22,9 +23,9 @@ export interface SidecarWidgetProps {
 }
 
 const DOT_COLORS: Record<WidgetConnection, string> = {
-  ok: 'var(--dsw-alias-state-success-primary, #1a7f37)',
-  degraded: 'var(--dsw-alias-state-warn-primary, #9a6700)',
-  off: 'var(--dsw-alias-label-dimmed, #8c959f)',
+  ok: 'var(--agsc-ok)',
+  degraded: 'var(--agsc-warn)',
+  off: 'var(--agsc-fg-dimmed)',
 }
 
 const rootStyle: CSSProperties = {
@@ -36,7 +37,7 @@ const rootStyle: CSSProperties = {
   borderRadius: 6,
   background: 'transparent',
   font: 'inherit',
-  color: 'var(--dsw-alias-label-secondary, #57606a)',
+  color: 'var(--agsc-fg-secondary)',
 }
 
 const countStyle: CSSProperties = {
@@ -49,10 +50,8 @@ const countStyle: CSSProperties = {
 /**
  * Connection dot + working-session counter (e.g. `▸2`) for the footer.
  *
- * Without a wired `onOpen` the widget renders as an inert status `<span>`
- * (UX-06): button semantics + pointer cursor on a control that does
- * nothing would be a lie. The button form returns as soon as the
- * integration layer supplies the callback.
+ * Without `onOpen` the widget remains an inert status `<span>` so button
+ * semantics are only emitted for an actual control.
  */
 export function SidecarWidget(props: SidecarWidgetProps): ReactElement {
   const title = widgetTitle(props.connection, props.workingCount)
@@ -78,6 +77,7 @@ export function SidecarWidget(props: SidecarWidgetProps): ReactElement {
   if (props.onOpen === undefined) {
     return (
       <span
+        {...surfaceProps('footer-widget')}
         style={rootStyle}
         title={title}
         aria-label={title}
@@ -91,6 +91,7 @@ export function SidecarWidget(props: SidecarWidgetProps): ReactElement {
   }
   return (
     <button
+      {...surfaceProps('footer-widget')}
       type="button"
       style={{ ...rootStyle, cursor: 'pointer' }}
       title={title}

package/src/client/inject/overlay.module.css

@@ -1,22 +0,0 @@
-/* Modal host for the inject panel (S5 wiring): a centered dialog over the
- * board, opened by selecting a session card. Backdrop rides the dsh mask
- * token --dsw-alias-bg-mask-1 (the ui-attachment / ui-settings-general
- * modal precedent) — same no-literal-colors discipline as the panel. */
-
-.backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  background: var(--dsw-alias-bg-mask-1, rgba(0, 0, 0, 0.45));
-}
-
-.dialog {
-  width: min(560px, 100%);
-  max-height: min(85vh, 720px);
-  overflow: auto;
-  border-radius: 12px;
-}