@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

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 = {
@@ -35,9 +36,8 @@ const rootStyle: CSSProperties = {
   border: 'none',
   borderRadius: 6,
   background: 'transparent',
-  cursor: 'pointer',
   font: 'inherit',
-  color: 'var(--dsw-alias-label-secondary, #57606a)',
+  color: 'var(--agsc-fg-secondary)',
 }
 
 const countStyle: CSSProperties = {
@@ -47,19 +47,16 @@ const countStyle: CSSProperties = {
   whiteSpace: 'nowrap',
 }
 
-/** Connection dot + working-session counter (e.g. `▸2`) for the footer. */
+/**
+ * Connection dot + working-session counter (e.g. `▸2`) for the footer.
+ *
+ * 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)
-  return (
-    <button
-      type="button"
-      style={rootStyle}
-      title={title}
-      aria-label={title}
-      onClick={props.onOpen}
-      data-testid="agent-sidecar-widget"
-      data-connection={props.connection}
-    >
+  const body = (
+    <>
       <span
         aria-hidden
         style={{
@@ -75,6 +72,35 @@ export function SidecarWidget(props: SidecarWidgetProps): ReactElement {
           {`▸${props.workingCount}`}
         </span>
       )}
+    </>
+  )
+  if (props.onOpen === undefined) {
+    return (
+      <span
+        {...surfaceProps('footer-widget')}
+        style={rootStyle}
+        title={title}
+        aria-label={title}
+        role="status"
+        data-testid="agent-sidecar-widget"
+        data-connection={props.connection}
+      >
+        {body}
+      </span>
+    )
+  }
+  return (
+    <button
+      {...surfaceProps('footer-widget')}
+      type="button"
+      style={{ ...rootStyle, cursor: 'pointer' }}
+      title={title}
+      aria-label={title}
+      onClick={props.onOpen}
+      data-testid="agent-sidecar-widget"
+      data-connection={props.connection}
+    >
+      {body}
     </button>
   )
 }

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);
-}
-
-.dialog {
-  width: min(560px, 100%);
-  max-height: min(85vh, 720px);
-  overflow: auto;
-  border-radius: 12px;
-}