@shendeguize/dsh-agent-sidecar 0.1.0

package/src/client/search-glue.ts

@@ -0,0 +1,143 @@
+/**
+ * Cross-agent search data glue (T5.10b): a framework-free store feeding
+ * the controlled SearchPanel. Normalization (matchedBy vocabulary, snippet
+ * highlighting) stays in dsh-tools/logic.ts — this store owns the query
+ * box state and transport orchestration only.
+ *
+ * Submit model: explicit user submit (no as-you-type dialing). A blank
+ * query with no project filter clears the results locally — the host
+ * answers 400 `invalid_request` for it, so the store never dials that.
+ * Stale results are replaced per settle; a failed submit keeps the last
+ * results visible with an error banner (SearchPanel renders error-first).
+ *
+ * Same store discipline as controller.ts: subscribe/getState for
+ * `useSyncExternalStore`, immutable snapshots, dispose() = late no-ops.
+ * Out-of-order settles are ignored via a submit ticket.
+ *
+ * @module
+ */
+
+import { isApiError, type RequestOptions } from './api.ts'
+import { fetchSearch } from './m3-transport.ts'
+import {
+  normalizeSearchItems,
+  type SearchItemVM,
+  type SearchMode,
+  type SearchResponseVM,
+} from './dsh-tools/logic.ts'
+
+export interface SearchGlueState {
+  /** Controlled query box value. */
+  query: string
+  /** Query echoed by the last settled response ('' before the first). */
+  submittedQuery: string
+  /** Mode of the last settled response; 'full-text' until told otherwise. */
+  mode: SearchMode
+  items: SearchItemVM[]
+  loading: boolean
+  /** Machine reason code of the last failure, or null. */
+  error: string | null
+  /** Active project filter sent with submits and echoed back, if any. */
+  project: string | null
+}
+
+export interface SearchStoreOptions {
+  fetchSearchFn?: (
+    opts?: RequestOptions & { q?: string; project?: string | null; limit?: number },
+  ) => Promise<SearchResponseVM>
+  /** Result cap passed to the endpoint (server default if unset). */
+  limit?: number
+  /** Fixed project filter (e.g. a search scoped from the project view). */
+  project?: string | null
+}
+
+const INITIAL_STATE: SearchGlueState = {
+  query: '',
+  submittedQuery: '',
+  mode: 'full-text',
+  items: [],
+  loading: false,
+  error: null,
+  project: null,
+}
+
+export class SearchStore {
+  private state: SearchGlueState
+  private readonly listeners = new Set<() => void>()
+  private readonly fetchSearchFn: NonNullable<SearchStoreOptions['fetchSearchFn']>
+  private readonly limit: number | undefined
+  private disposed = false
+  private ticket = 0
+
+  constructor(options: SearchStoreOptions = {}) {
+    this.fetchSearchFn = options.fetchSearchFn ?? fetchSearch
+    this.limit = options.limit
+    this.state = { ...INITIAL_STATE, project: options.project ?? null }
+  }
+
+  subscribe = (fn: () => void): (() => void) => {
+    this.listeners.add(fn)
+    return () => { this.listeners.delete(fn) }
+  }
+
+  getState = (): SearchGlueState => this.state
+
+  private setState(patch: Partial<SearchGlueState>): void {
+    if (this.disposed) return
+    this.state = { ...this.state, ...patch }
+    for (const fn of [...this.listeners]) fn()
+  }
+
+  /** Controlled input change (no dialing). */
+  setQuery(query: string): void {
+    this.setState({ query })
+  }
+
+  /** Submit the current query; blank + no project filter clears locally. */
+  async submit(): Promise<void> {
+    if (this.disposed) return
+    const q = this.state.query.trim()
+    const project = this.state.project
+    if (q === '' && (project === null || project.trim() === '')) {
+      this.ticket += 1 // outrun any in-flight settle
+      this.setState({
+        items: [], submittedQuery: '', loading: false, error: null,
+      })
+      return
+    }
+    const ticket = (this.ticket += 1)
+    this.setState({ loading: true, error: null })
+    try {
+      const response = await this.fetchSearchFn({
+        q,
+        project,
+        ...(this.limit !== undefined ? { limit: this.limit } : {}),
+      })
+      if (this.disposed || ticket !== this.ticket) return
+      this.adoptResponse(response)
+    } catch (err) {
+      if (this.disposed || ticket !== this.ticket) return
+      this.setState({
+        loading: false,
+        error: isApiError(err) ? err.reason : 'network_error',
+      })
+    }
+  }
+
+  /** Apply one settled wire response (public seam for tests/materialize). */
+  adoptResponse(response: SearchResponseVM): void {
+    this.setState({
+      items: normalizeSearchItems(response),
+      mode: response.mode,
+      submittedQuery: response.query,
+      project: response.project,
+      loading: false,
+      error: null,
+    })
+  }
+
+  dispose(): void {
+    this.disposed = true
+    this.listeners.clear()
+  }
+}

package/src/client/settings-card.module.css

@@ -0,0 +1,359 @@
+/* Agent Sidecar settings card. Design language follows the shipped
+ * ui-settings-plugins PluginCard/fields chrome (disclosure header over a
+ * sectioned form body); every color rides a dsh --dsw-alias-* design token,
+ * no literal colors. */
+
+.card {
+  list-style: none;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-layer-3);
+  transition: border-color .16s, background .16s;
+}
+
+.card:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.cardOpen {
+  background: var(--dsw-alias-bg-layer-2);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+/* ── disclosure header ─────────────────────────────────────────────────── */
+
+.header {
+  width: 100%;
+  appearance: none;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 12px;
+}
+
+.header:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
+}
+
+.headText {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--dsw-alias-label-primary);
+}
+
+.description {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* Carried on the header so a collapsed card still says it holds edits. */
+.pending {
+  flex: none;
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 11px;
+  line-height: 17px;
+  font-weight: 500;
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* CSS-drawn caret (ui-primitives icons are not on this package's dependency
+ * surface, so the chevron is a rotated border square). */
+.chevron {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-right: 1.5px solid var(--dsw-alias-label-tertiary);
+  border-bottom: 1.5px solid var(--dsw-alias-label-tertiary);
+  transform: rotate(45deg) translateY(-2px);
+  transition: transform .16s;
+}
+
+.chevronOpen {
+  transform: rotate(225deg) translateY(-2px);
+}
+
+/* ── body ──────────────────────────────────────────────────────────────── */
+
+.body {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  margin: 0 16px;
+  padding-bottom: 8px;
+}
+
+.readOnly {
+  margin: 12px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.section {
+  padding: 12px 0 4px;
+}
+
+.section + .section {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.sectionTitle {
+  margin: 0 0 4px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+/* ── fields ────────────────────────────────────────────────────────────── */
+
+.field {
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.label {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+.hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.invalidHint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-error);
+}
+
+.input,
+.select {
+  appearance: none;
+  max-width: 420px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  padding: 6px 10px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+.input:focus-visible,
+.select:focus-visible {
+  outline: none;
+  border-color: var(--dsw-alias-brand-primary);
+}
+
+.input::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.input:disabled,
+.select:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* Modifier applied ALONGSIDE .input (no `composes`: the tsdown class-map
+ * emitter keeps only the local hashed name and would drop composed bases). */
+.inputInvalid {
+  border-color: var(--dsw-alias-label-error);
+}
+
+/* Toggle row: label text left, native checkbox right-aligned with it. */
+.toggleRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.toggleRow input {
+  accent-color: var(--dsw-alias-brand-primary);
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.toggleRow input:disabled {
+  cursor: default;
+}
+
+/* ── notes (safety / daemon guidance) ──────────────────────────────────── */
+
+.note {
+  margin: 6px 0 2px;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 12px;
+  line-height: 1.6;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* ── daemon status row ─────────────────────────────────────────────────── */
+
+.statusRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.statusDot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--dsw-alias-label-tertiary);
+}
+
+/* Modifiers applied alongside .statusDot (same no-`composes` rationale). */
+.statusOk {
+  background: var(--dsw-alias-brand-primary);
+}
+
+.statusError {
+  background: var(--dsw-alias-label-error);
+}
+
+.statusText {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+.statusMeta {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.retry {
+  appearance: none;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: none;
+  padding: 3px 12px;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.retry:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.retry:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
+/* ── footer ────────────────────────────────────────────────────────────── */
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0 4px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.docs {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+  text-decoration: none;
+}
+
+.docs:hover {
+  color: var(--dsw-alias-label-primary);
+  text-decoration: underline;
+}
+
+.failed {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  text-align: right;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-error);
+}
+
+.spacer {
+  flex: 1;
+}
+
+.discard,
+.save {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.discard {
+  border-color: var(--dsw-alias-border-l2);
+  background: none;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.discard:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.save {
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
+}
+
+.discard:disabled,
+.save:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.discard:focus-visible,
+.save:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}