@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

package/src/client/navigation/sidebar-entry.ts

@@ -0,0 +1,309 @@
+/** First-class Agent Center row inserted after the shell's New Session row. */
+import type { CenterNavigation } from './center.ts'
+import css from './sidebar-entry.module.css'
+import { PLUGIN_DOM_ID, surfaceProps } from '../theme/parts.ts'
+
+export const SIDEBAR_ENTRY_SELECTOR = '[data-agent-sidecar-sidebar-entry]'
+const ENTRY_ATTRIBUTE = 'data-agent-sidecar-sidebar-entry'
+const LABEL_ATTRIBUTE = 'data-agent-sidecar-sidebar-entry-label'
+const SVG_NS = 'http://www.w3.org/2000/svg'
+const ENTRY_BINDING = Symbol.for('@shendeguize/dsh-agent-sidecar/sidebar-entry-binding')
+const ENTRY_BRAND = Symbol.for('@shendeguize/dsh-agent-sidecar/sidebar-entry-brand')
+const ENTRY_DISPATCHER = Symbol.for('@shendeguize/dsh-agent-sidecar/sidebar-entry-dispatcher')
+const warnedForeignEntries = new WeakSet<object>()
+
+interface QueryScope { querySelector(selector: string): unknown | null }
+export interface SidebarEntryCopyPort {
+  readonly label: string
+  readonly accessibilityLabel: string
+  subscribe(listener: () => void): () => void
+}
+export interface SidebarEntryCopyTarget {
+  readonly button: {
+    title: string
+    setAttribute(name: string, value: string): void
+  }
+  readonly label: { textContent: string | null }
+}
+interface SidebarEntryElements extends SidebarEntryCopyTarget { readonly button: HTMLButtonElement }
+interface SidebarEntryObserver { disconnect(): void }
+interface SidebarEntryBinding {
+  readonly owner: object
+  readonly openCenter: CenterNavigation
+  stopCopy: () => void
+  observer: SidebarEntryObserver | null
+}
+export interface SidebarEntryOwnerTarget extends SidebarEntryCopyTarget {
+  readonly button: SidebarEntryCopyTarget['button'] & { remove(): void }
+}
+/** Narrow, DOM-independent idempotency check used by mount and unit tests. */
+export function hasSidebarEntry(scope: QueryScope): boolean {
+  return scope.querySelector(SIDEBAR_ENTRY_SELECTOR) !== null
+}
+export function applyCopy(target: SidebarEntryCopyTarget, copy: SidebarEntryCopyPort): void {
+  target.label.textContent = copy.label
+  target.button.setAttribute('aria-label', copy.accessibilityLabel)
+  target.button.title = copy.accessibilityLabel
+}
+
+export function bindSidebarEntryCopy(
+  target: SidebarEntryCopyTarget,
+  copy: SidebarEntryCopyPort,
+): () => void {
+  const update = (): void => { applyCopy(target, copy) }
+  update()
+  return copy.subscribe(update)
+}
+
+function bindingOf(button: object): SidebarEntryBinding | undefined {
+  return (button as Record<PropertyKey, unknown>)[ENTRY_BINDING] as SidebarEntryBinding | undefined
+}
+function hasCurrentDispatcher(button: object): boolean {
+  const record = button as Record<PropertyKey, unknown>
+  return (record[ENTRY_BRAND] === true || record[ENTRY_BINDING] !== undefined)
+    && record[ENTRY_DISPATCHER] === true
+}
+/** A pure, DOM-independent ownership check; the idempotency attribute alone is foreign. */
+export function isOwnedSidebarEntry(candidate: unknown): boolean {
+  if (candidate === null
+    || (typeof candidate !== 'object' && typeof candidate !== 'function')) return false
+  const record = candidate as Record<PropertyKey, unknown>
+  if (record[ENTRY_BRAND] === true || record[ENTRY_BINDING] !== undefined) return true
+  const element = candidate as {
+    tagName?: unknown
+    getAttribute?: (name: string) => string | null
+    querySelector?: (selector: string) => unknown | null
+  }
+  return element.tagName === 'BUTTON'
+    && element.getAttribute?.('data-dsh-plugin') === PLUGIN_DOM_ID
+    && element.getAttribute?.('data-dsh-part') === 'sidebar-entry'
+    && element.querySelector?.(`[${LABEL_ATTRIBUTE}]`) != null
+}
+
+function brandSidebarEntry(button: object): void {
+  (button as Record<PropertyKey, unknown>)[ENTRY_BRAND] = true
+}
+function installClickDispatcher(button: HTMLButtonElement): void {
+  const record = button as unknown as Record<PropertyKey, unknown>
+  if (record[ENTRY_DISPATCHER] === true) return
+  button.addEventListener('click', () => { openBoundSidebarEntry(button) })
+  record[ENTRY_DISPATCHER] = true
+}
+function once(dispose: () => void): () => void {
+  let active = true
+  return () => {
+    if (!active) return
+    active = false
+    dispose()
+  }
+}
+/** Invoke the latest cross-bundle binding, never a captured HMR closure. */
+export function openBoundSidebarEntry(button: object): void {
+  try {
+    bindingOf(button)?.openCenter()
+  } catch {
+    // Navigation is a best-effort bridge to host-owned tab DOM.
+  }
+}
+/** Latest-owner-wins binding over one shared DOM button. */
+export function bindSidebarEntryOwner(
+  target: SidebarEntryOwnerTarget,
+  owner: object,
+  openCenter: CenterNavigation,
+  copy: SidebarEntryCopyPort,
+  startObserver: () => SidebarEntryObserver | null,
+): () => void {
+  const previous = bindingOf(target.button)
+  previous?.observer?.disconnect()
+  previous?.stopCopy()
+
+  const binding: SidebarEntryBinding = {
+    owner,
+    openCenter,
+    stopCopy: () => {},
+    observer: null,
+  }
+  const sharedButton = target.button as unknown as Record<PropertyKey, unknown>
+  sharedButton[ENTRY_BINDING] = binding
+  binding.stopCopy = once(bindSidebarEntryCopy(target, copy))
+  binding.observer = startObserver()
+
+  return () => {
+    binding.observer?.disconnect()
+    if (bindingOf(target.button)?.owner !== owner) return
+    binding.stopCopy()
+    delete sharedButton[ENTRY_BINDING]
+    target.button.remove()
+  }
+}
+
+function createIcon(): SVGSVGElement {
+  const icon = document.createElementNS(SVG_NS, 'svg')
+  for (const [name, value] of Object.entries({
+    viewBox: '0 0 16 16',
+    width: '16',
+    height: '16',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '1.4',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'aria-hidden': 'true',
+    focusable: 'false',
+  })) {
+    icon.setAttribute(name, value)
+  }
+  const orbit = document.createElementNS(SVG_NS, 'circle')
+  orbit.setAttribute('cx', '8')
+  orbit.setAttribute('cy', '8')
+  orbit.setAttribute('r', '5.5')
+  const center = document.createElementNS(SVG_NS, 'circle')
+  center.setAttribute('cx', '8')
+  center.setAttribute('cy', '8')
+  center.setAttribute('r', '1.75')
+  const path = document.createElementNS(SVG_NS, 'path')
+  path.setAttribute('d', 'M8 2.5v3.75M8 9.75v3.75M2.5 8h3.75M9.75 8h3.75')
+  icon.append(orbit, center, path)
+  return icon
+}
+
+function createEntry(): SidebarEntryElements {
+  const entry = document.createElement('button')
+  brandSidebarEntry(entry)
+  const surface = surfaceProps('sidebar-entry', css.entry)
+  entry.type = 'button'
+  entry.className = surface.className
+  entry.setAttribute(ENTRY_ATTRIBUTE, '')
+  entry.setAttribute('data-dsh-plugin', surface['data-dsh-plugin'])
+  entry.setAttribute('data-dsh-part', surface['data-dsh-part'])
+
+  const icon = document.createElement('span')
+  icon.className = css.entryIcon ?? ''
+  icon.setAttribute('aria-hidden', 'true')
+  icon.appendChild(createIcon())
+  const label = document.createElement('span')
+  label.className = css.entryLabel ?? ''
+  label.setAttribute(LABEL_ATTRIBUTE, '')
+  entry.append(icon, label)
+  installClickDispatcher(entry)
+  return { button: entry, label }
+}
+
+function existingEntry(button: HTMLButtonElement): SidebarEntryElements | null {
+  const label = button.querySelector<HTMLElement>(`[${LABEL_ATTRIBUTE}]`)
+    ?? (button.lastElementChild as HTMLElement | null)
+  return label === null ? null : { button, label }
+}
+
+function rejectLegacyEntry(): null {
+  console.warn('[agent-sidecar] Sidebar legacy entry cannot be safely replaced; leaving it untouched.')
+  return null
+}
+
+function replaceLegacyEntry(button: HTMLButtonElement): SidebarEntryElements | null {
+  if (typeof button.cloneNode !== 'function' || typeof button.replaceWith !== 'function') {
+    return rejectLegacyEntry()
+  }
+  let clone: HTMLButtonElement
+  try {
+    clone = button.cloneNode(true) as HTMLButtonElement
+  } catch {
+    return rejectLegacyEntry()
+  }
+  const elements = clone.tagName === 'BUTTON' && typeof clone.addEventListener === 'function'
+    ? existingEntry(clone)
+    : null
+  if (elements === null) return rejectLegacyEntry()
+  try {
+    button.replaceWith(clone)
+  } catch {
+    return rejectLegacyEntry()
+  }
+  brandSidebarEntry(clone)
+  installClickDispatcher(clone)
+  return elements
+}
+
+function sidebarRoot(): HTMLElement | null {
+  const column = document.querySelector<HTMLElement>(
+    '[data-pane="sidebar"], [class*="sidebarCol"]',
+  )
+  if (column === null) return null
+  const logoOwner = column.querySelector<HTMLElement>('[class*="logoRow"]')?.parentElement
+  return logoOwner ?? (column.firstElementChild as HTMLElement | null)
+}
+
+function newSessionRow(root: HTMLElement): Element | null {
+  const nested = root.querySelector<HTMLButtonElement>('button[class*="newSession"]')
+  const button = nested ?? Array.from(root.children).find((child) => child.tagName === 'BUTTON')
+  if (button === undefined) return null
+  const row = button.closest('[class*="logoRow"]')
+  if (row !== null && row.parentElement === root) return row
+  return button.parentElement === root ? button : null
+}
+
+function placeEntry(entry: HTMLButtonElement): boolean {
+  const root = sidebarRoot()
+  if (root === null) return false
+  const anchor = newSessionRow(root)
+  if (anchor === null) return false
+  if (entry.parentElement !== root || anchor.nextElementSibling !== entry) {
+    root.insertBefore(entry, anchor.nextElementSibling)
+  }
+  return true
+}
+
+/**
+ * Wait for the sidebar, restore the row after React rebuilds, and return full
+ * cleanup. Overlapping applies synchronously adopt the existing row.
+ */
+export function mountSidebarEntry(
+  openCenter: CenterNavigation,
+  copy: SidebarEntryCopyPort,
+): () => void {
+  if (typeof document === 'undefined') return () => {}
+  const candidate = document.querySelector<HTMLButtonElement>(SIDEBAR_ENTRY_SELECTOR)
+  if (candidate !== null && !isOwnedSidebarEntry(candidate)) {
+    if (!warnedForeignEntries.has(candidate)) {
+      warnedForeignEntries.add(candidate)
+      console.warn('[agent-sidecar] Sidebar entry collision: refusing to modify a foreign '
+        + SIDEBAR_ENTRY_SELECTOR + ' node.')
+    }
+    return () => {}
+  }
+  const elements = candidate === null
+    ? createEntry()
+    : hasCurrentDispatcher(candidate)
+      ? existingEntry(candidate)
+      : replaceLegacyEntry(candidate)
+  if (elements === null) return () => {}
+  brandSidebarEntry(elements.button)
+  const entry = elements.button
+  const owner = {}
+  let disposed = false
+  const ensurePlaced = (): void => {
+    if (disposed) return
+    if (entry.isConnected) return
+    const existing = document.querySelector(SIDEBAR_ENTRY_SELECTOR)
+    if (existing !== null && existing !== entry) return
+    placeEntry(entry)
+  }
+  ensurePlaced()
+  const disposeBinding = bindSidebarEntryOwner(
+    elements,
+    owner,
+    openCenter,
+    copy,
+    () => {
+      if (typeof MutationObserver === 'undefined') return null
+      const observer = new MutationObserver(ensurePlaced)
+      observer.observe(document.body, { childList: true, subtree: true })
+      return observer
+    },
+  )
+  return () => {
+    if (disposed) return
+    disposed = true
+    disposeBinding()
+  }
+}

package/src/client/primitives/StaticPill.tsx

@@ -0,0 +1,21 @@
+import { Pill } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { HTMLAttributes, ReactElement } from 'react'
+
+export type StaticPillProps = HTMLAttributes<HTMLSpanElement>
+
+/**
+ * Preserve native span attributes around the rc.2 Pill static branch, which
+ * currently omits its rest props. The inner primitive remains the sole owner
+ * of the DSH pill visuals.
+ */
+export function StaticPill({
+  className,
+  children,
+  ...rest
+}: StaticPillProps): ReactElement {
+  return (
+    <span className={className} {...rest}>
+      <Pill>{children}</Pill>
+    </span>
+  )
+}

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

@@ -1,12 +1,13 @@
-/* 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. */
+/* Layout specific to the Agent Sidecar settings composition. Control chrome
+ * comes from dsh primitives; native select/checkbox styles stay token-backed. */
 
 .card {
+  width: 100%;
+  max-width: 760px;
+  box-sizing: border-box;
   list-style: none;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 12px;
+  border-radius: var(--agsc-radius-card);
   background: var(--dsw-alias-bg-layer-3);
   transition: border-color .16s, background .16s;
 }
@@ -20,8 +21,6 @@
   border-color: var(--dsw-alias-label-dimmed);
 }
 
-/* ── disclosure header ─────────────────────────────────────────────────── */
-
 .header {
   width: 100%;
   appearance: none;
@@ -35,7 +34,7 @@
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
-  border-radius: 12px;
+  border-radius: var(--agsc-radius-card);
 }
 
 .header:focus-visible {
@@ -64,37 +63,21 @@
   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);
+  color: var(--dsw-alias-label-tertiary);
   transition: transform .16s;
 }
 
 .chevronOpen {
-  transform: rotate(225deg) translateY(-2px);
+  transform: rotate(180deg);
 }
 
-/* ── body ──────────────────────────────────────────────────────────────── */
-
 .body {
   border-top: 1px solid var(--dsw-alias-border-l2);
   margin: 0 16px;
@@ -124,8 +107,6 @@
   color: var(--dsw-alias-label-primary);
 }
 
-/* ── fields ────────────────────────────────────────────────────────────── */
-
 .field {
   padding: 8px 0;
   display: flex;
@@ -150,46 +131,47 @@
   margin: 0;
   font-size: 12px;
   line-height: 1.5;
-  color: var(--dsw-alias-label-error);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.input {
+  width: 100%;
+  max-width: 420px;
+  box-sizing: border-box;
+}
+
+.inputInvalid {
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+.input:has(input:disabled) {
+  opacity: .5;
 }
 
-.input,
 .select {
-  appearance: none;
+  width: 100%;
   max-width: 420px;
+  height: 32px;
+  box-sizing: border-box;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-3);
-  padding: 6px 10px;
+  border-radius: var(--agsc-radius-control);
+  background: var(--dsw-alias-bg-layer-1);
+  padding: 0 8px;
   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;
@@ -209,8 +191,6 @@
   cursor: default;
 }
 
-/* ── notes (safety / daemon guidance) ──────────────────────────────────── */
-
 .note {
   margin: 6px 0 2px;
   border-radius: 8px;
@@ -221,8 +201,6 @@
   color: var(--dsw-alias-label-secondary);
 }
 
-/* ── daemon status row ─────────────────────────────────────────────────── */
-
 .statusRow {
   display: flex;
   align-items: center;
@@ -235,16 +213,15 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--dsw-alias-label-tertiary);
+  background: var(--agsc-fg-dimmed);
 }
 
-/* Modifiers applied alongside .statusDot (same no-`composes` rationale). */
 .statusOk {
-  background: var(--dsw-alias-brand-primary);
+  background: var(--agsc-ok);
 }
 
 .statusError {
-  background: var(--dsw-alias-label-error);
+  background: var(--agsc-err);
 }
 
 .statusText {
@@ -260,30 +237,9 @@
 }
 
 .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;
+  margin-left: auto;
 }
 
-/* ── footer ────────────────────────────────────────────────────────────── */
-
 .footer {
   display: flex;
   align-items: center;
@@ -311,49 +267,9 @@
   text-align: right;
   font-size: 12px;
   line-height: 1.5;
-  color: var(--dsw-alias-label-error);
+  color: var(--dsw-alias-state-error-primary);
 }
 
 .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;
-}