@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

package/src/client/navigation/CenterOverlay.tsx

@@ -0,0 +1,40 @@
+import { Modal } from '@deepseek-ai/dsh-client-ui-primitives'
+import { useRef } from 'react'
+import type { ReactElement, ReactNode } from 'react'
+import { surfaceProps } from '../theme/parts.ts'
+import css from './center-overlay.module.css'
+import { useModalIsolation } from './modal-isolation.ts'
+import { useModalSurfaceAnchor } from './modal-surface-anchor.ts'
+
+export interface CenterOverlayProps {
+  open: boolean
+  onClose: () => void
+  title: string
+  closeLabel: string
+  children?: ReactNode
+}
+
+/** Pure Agent Center presentation over the shell's frame-wide overlay seat. */
+export function CenterOverlay(props: CenterOverlayProps): ReactElement {
+  const surfaceRef = useRef<HTMLDivElement>(null)
+  const surface = surfaceProps('overlay', css['dialog'])
+  useModalIsolation(props.open, surfaceRef)
+  useModalSurfaceAnchor(props.open, surfaceRef, surface)
+  return (
+    <Modal
+      open={props.open}
+      onClose={props.onClose}
+      title={props.title}
+      closeLabel={props.closeLabel}
+      className={surface.className}
+      contentClassName={css['content']}
+    >
+      <div
+        ref={surfaceRef}
+        className={css['surface']}
+      >
+        {props.children}
+      </div>
+    </Modal>
+  )
+}

package/src/client/navigation/center-overlay.module.css

@@ -0,0 +1,51 @@
+.dialog {
+  gap: 0;
+  width: min(1180px, calc(100vw - 48px));
+  height: min(860px, calc(100vh - 48px));
+  max-height: calc(100vh - 48px);
+  padding: 0;
+  border-color: var(--agsc-border-strong);
+  border-radius: var(--agsc-radius-card);
+  background: var(--agsc-bg);
+  box-shadow: var(--agsc-shadow-card);
+}
+
+.content {
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.content > :last-child {
+  flex: 1;
+  min-height: 0;
+  margin-top: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.surface {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  color: var(--agsc-fg);
+  background: var(--agsc-bg);
+  overflow: hidden;
+}
+
+.surface > :last-child {
+  flex: 1;
+  min-height: 0;
+  height: auto;
+}
+
+@media (max-width: 720px) {
+  .dialog {
+    width: calc(100vw - 16px);
+    height: calc(100dvh - 16px);
+    max-height: calc(100dvh - 16px);
+    border-radius: var(--agsc-radius-control);
+  }
+}

package/src/client/navigation/center.ts

@@ -0,0 +1,45 @@
+/** Callback port used by UI entry points that open Agent Center. */
+export type CenterNavigation = () => boolean
+
+/** Observable state port bound to the shell overlay at the composition root. */
+export interface CenterNavigationStore {
+  readonly open: CenterNavigation
+  close(): void
+  subscribe(listener: () => void): () => void
+  getSnapshot(): boolean
+}
+
+/**
+ * Create one DOM-free navigation source for every Agent Center entry point.
+ * Opening is always accepted; a shell overlay that mounts later observes the
+ * retained snapshot instead of losing the request.
+ */
+export function createCenterNavigation(): CenterNavigationStore {
+  let isOpen = false
+  const listeners = new Set<() => void>()
+  const notify = (): void => {
+    for (const listener of [...listeners]) listener()
+  }
+
+  const open: CenterNavigation = () => {
+    if (!isOpen) {
+      isOpen = true
+      notify()
+    }
+    return true
+  }
+
+  return {
+    open,
+    close: () => {
+      if (!isOpen) return
+      isOpen = false
+      notify()
+    },
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => { listeners.delete(listener) }
+    },
+    getSnapshot: () => isOpen,
+  }
+}

package/src/client/navigation/modal-isolation.ts

@@ -0,0 +1,152 @@
+import { useEffect } from 'react'
+import type { RefObject } from 'react'
+const DIALOG_SELECTOR = '[role="dialog"][aria-modal="true"]'
+const FOCUSABLE_SELECTOR = [
+  'a[href],area[href],button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"]),select:not([disabled])',
+  'textarea:not([disabled]),iframe,[contenteditable="true"],[tabindex]',
+].join(',')
+function focusableElements(dialog: HTMLElement): HTMLElement[] {
+  return Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+    .filter((element) =>
+      element.tabIndex >= 0 &&
+      !element.hidden &&
+      element.closest('[inert],[aria-hidden="true"]') === null &&
+      element.getClientRects().length > 0)
+}
+function restorableIn(element: HTMLElement | null, dialog: HTMLElement): element is HTMLElement {
+  return element?.isConnected === true &&
+    dialog.contains(element) &&
+    !element.hidden &&
+    element.closest('[inert],[aria-hidden="true"]') === null &&
+    element.getClientRects().length > 0
+}
+type DialogFrame = { dialog: HTMLElement; opener: HTMLElement | null; focus: HTMLElement | null }
+/** Isolate the active official Modal, including sibling-portaled nested dialogs. */
+export function useModalIsolation(
+  open: boolean,
+  surfaceRef: RefObject<HTMLElement>,
+): void {
+  useEffect(() => {
+    if (!open || typeof document === 'undefined' || typeof window === 'undefined') return
+    const body = document.body
+    if (body === null || typeof window.MutationObserver === 'undefined') return
+    const previousFocus =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null
+    const originalInert = new Map<HTMLElement, boolean>()
+    const dialogStack: DialogFrame[] = []
+    let topDialog: HTMLElement | null = null
+    let focusFrame: number | null = null
+    const getTopDialog = (): HTMLElement | null => {
+      const outer = surfaceRef.current?.closest<HTMLElement>(DIALOG_SELECTOR) ?? null
+      if (outer === null) return null
+      const dialogs = Array.from(body.querySelectorAll<HTMLElement>(DIALOG_SELECTOR))
+      const outerIndex = dialogs.indexOf(outer)
+      return outerIndex < 0 ? null : dialogs.at(-1) ?? null
+    }
+    const bodyBranch = (dialog: HTMLElement): HTMLElement | null => {
+      let branch: Node = dialog
+      while (branch.parentNode !== null && branch.parentNode !== body) {
+        branch = branch.parentNode
+      }
+      return branch instanceof HTMLElement ? branch : null
+    }
+    const isolateAround = (dialog: HTMLElement | null): void => {
+      const activeBranch = dialog === null ? null : bodyBranch(dialog)
+      const next = new Set(
+        Array.from(body.children)
+          .filter((element): element is HTMLElement =>
+            element instanceof HTMLElement && element !== activeBranch),
+      )
+      for (const [element, wasInert] of originalInert) {
+        if (next.has(element)) continue
+        element.inert = wasInert
+        originalInert.delete(element)
+      }
+      for (const element of next) {
+        if (!originalInert.has(element)) originalInert.set(element, element.inert)
+        element.inert = true
+      }
+    }
+    const queueFocus = (dialog: HTMLElement, preferred: HTMLElement | null = null): void => {
+      if (focusFrame !== null) window.cancelAnimationFrame(focusFrame)
+      focusFrame = window.requestAnimationFrame(() => {
+        focusFrame = null
+        if (getTopDialog() !== dialog) return
+        const target = restorableIn(preferred, dialog)
+          ? preferred
+          : focusableElements(dialog)[0]
+        target?.focus({ preventScroll: true })
+      })
+    }
+    const sync = (): void => {
+      const next = getTopDialog()
+      const changed = next !== topDialog
+      let closed: DialogFrame[] = []
+      if (changed && next !== null) {
+        const index = dialogStack.findIndex(frame => frame.dialog === next)
+        if (index < 0) {
+          const parent = dialogStack.at(-1)
+          const active =
+            document.activeElement instanceof HTMLElement ? document.activeElement : null
+          const opener = parent !== undefined && restorableIn(active, parent.dialog)
+            ? active
+            : parent?.focus ?? null
+          dialogStack.push({ dialog: next, opener, focus: null })
+        } else {
+          closed = dialogStack.splice(index + 1)
+        }
+      }
+      topDialog = next
+      isolateAround(next)
+      const opener = next === null
+        ? null
+        : closed.reverse().find(frame => restorableIn(frame.opener, next))?.opener ?? null
+      if (
+        next !== null &&
+        (changed || !next.contains(document.activeElement))
+      ) {
+        queueFocus(next, opener)
+      }
+    }
+    const onFocusIn = (event: FocusEvent): void => {
+      if (!(event.target instanceof HTMLElement)) return
+      const dialog = event.target.closest<HTMLElement>(DIALOG_SELECTOR)
+      const frame = dialogStack.find(item => item.dialog === dialog)
+      if (frame !== undefined) frame.focus = event.target
+    }
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key !== 'Tab' || event.defaultPrevented) return
+      const dialog = getTopDialog()
+      if (dialog === null) return
+      if (dialog !== topDialog) sync()
+
+      const focusable = focusableElements(dialog)
+      if (focusable.length === 0) {
+        event.preventDefault()
+        return
+      }
+      const activeIndex = focusable.indexOf(document.activeElement as HTMLElement)
+      const wrapsBackward = event.shiftKey && activeIndex <= 0
+      const wrapsForward = !event.shiftKey && activeIndex === focusable.length - 1
+      if (activeIndex < 0 || wrapsBackward || wrapsForward) {
+        event.preventDefault()
+        const target = event.shiftKey ? focusable.at(-1) : focusable[0]
+        target?.focus({ preventScroll: true })
+      }
+    }
+    const observer = new window.MutationObserver(sync)
+    observer.observe(body, { childList: true, subtree: true })
+    document.addEventListener('focusin', onFocusIn)
+    document.addEventListener('keydown', onKeyDown, true)
+    sync()
+    return () => {
+      observer.disconnect()
+      document.removeEventListener('focusin', onFocusIn)
+      document.removeEventListener('keydown', onKeyDown, true)
+      if (focusFrame !== null) window.cancelAnimationFrame(focusFrame)
+      for (const [element, wasInert] of originalInert) element.inert = wasInert
+      if (previousFocus?.isConnected === true) previousFocus.focus({ preventScroll: true })
+    }
+  }, [open, surfaceRef])
+}

package/src/client/navigation/modal-surface-anchor.ts

@@ -0,0 +1,72 @@
+import { useEffect, useLayoutEffect } from 'react'
+import type { RefObject } from 'react'
+import type { SurfaceProps } from '../theme/parts.ts'
+
+const DIALOG_SELECTOR = '[role="dialog"][aria-modal="true"]'
+const MODAL_SURFACE_OWNER = Symbol.for(
+  '@shendeguize/dsh-agent-sidecar/modal-surface-anchor-owner',
+)
+
+type ModalSurfaceAttributes = Pick<
+  SurfaceProps,
+  'data-dsh-plugin' | 'data-dsh-part'
+>
+
+export interface ModalSurfaceAnchorTarget {
+  setAttribute(name: string, value: string): void
+  removeAttribute(name: string): void
+}
+
+/** Use a pre-paint effect in the browser without warning during SSR. */
+export function selectModalSurfaceAnchorEffect(
+  hasDocument: boolean,
+): typeof useEffect {
+  return hasDocument ? useLayoutEffect : useEffect
+}
+
+const useIsomorphicLayoutEffect = selectModalSurfaceAnchorEffect(
+  typeof document !== 'undefined',
+)
+
+function ownerSlot(target: ModalSurfaceAnchorTarget): Record<PropertyKey, unknown> {
+  return target as unknown as Record<PropertyKey, unknown>
+}
+
+/** Attach the public surface attributes with latest-owner-safe cleanup. */
+export function attachModalSurfaceAnchor(
+  target: ModalSurfaceAnchorTarget | null,
+  attributes: ModalSurfaceAttributes,
+): () => void {
+  if (target === null) return () => {}
+
+  const owner = Symbol('modal-surface-anchor')
+  const slot = ownerSlot(target)
+  slot[MODAL_SURFACE_OWNER] = owner
+  target.setAttribute('data-dsh-plugin', attributes['data-dsh-plugin'])
+  target.setAttribute('data-dsh-part', attributes['data-dsh-part'])
+
+  return () => {
+    if (slot[MODAL_SURFACE_OWNER] !== owner) return
+    target.removeAttribute('data-dsh-plugin')
+    target.removeAttribute('data-dsh-part')
+    delete slot[MODAL_SURFACE_OWNER]
+  }
+}
+
+/** Commit the public anchor onto the official Modal's real dialog element. */
+export function useModalSurfaceAnchor(
+  open: boolean,
+  surfaceRef: RefObject<HTMLElement>,
+  attributes: ModalSurfaceAttributes,
+): void {
+  useIsomorphicLayoutEffect(() => {
+    if (!open || typeof document === 'undefined') return
+    const dialog = surfaceRef.current?.closest<HTMLElement>(DIALOG_SELECTOR) ?? null
+    return attachModalSurfaceAnchor(dialog, attributes)
+  }, [
+    open,
+    surfaceRef,
+    attributes['data-dsh-plugin'],
+    attributes['data-dsh-part'],
+  ])
+}

package/src/client/navigation/sidebar-entry.module.css

@@ -0,0 +1,73 @@
+.entry {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 36px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--agsc-radius-control);
+  background: none;
+  color: var(--agsc-fg-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  white-space: nowrap;
+  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
+}
+
+.entry:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--agsc-fg);
+}
+
+.entry:active {
+  background: var(--dsw-alias-interactive-bg-active);
+  color: var(--agsc-fg);
+  transform: translateY(1px);
+}
+
+.entry:focus-visible {
+  outline: 2px solid var(--agsc-accent);
+  outline-offset: 2px;
+}
+
+.entryIcon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.entryIcon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.entryLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-dsh-frame][data-sidebar-collapsed] .entry {
+  justify-content: center;
+  width: 36px;
+  padding: 0;
+  margin: 0 auto 12px;
+  border-radius: 50%;
+}
+
+[data-dsh-frame][data-sidebar-collapsed] .entryLabel {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .entry {
+    transition: none;
+  }
+}