@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

package/src/client/settings-card.tsx

@@ -30,10 +30,22 @@
  * the sidecar card reads native next to first-party ones.
  */
 
-import { useEffect, useId, useState } from 'react'
+import {
+  Button,
+  IconChevronDownOutline14,
+  Pill,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import { useState } from 'react'
 import type { ReactNode } from 'react'
 import { t as defaultT } from './locales/index.ts'
 import type { SidecarLocaleKey } from './locales/index.ts'
+import {
+  NumberField,
+  SelectField,
+  TextField,
+  ToggleField,
+} from './settings-fields.tsx'
+import { surfaceProps } from './theme/parts.ts'
 import css from './settings-card.module.css'
 
 /**
@@ -176,147 +188,6 @@ function Section(props: SectionProps): ReactNode {
   )
 }
 
-interface SelectFieldProps {
-  label: string
-  hint: string
-  value: string
-  options: readonly { value: string, label: string }[]
-  disabled: boolean
-  onCommit: (value: string) => void
-}
-
-function SelectField(props: SelectFieldProps): ReactNode {
-  const id = useId()
-  return (
-    <div className={css['field']}>
-      <label className={css['label']} htmlFor={id}>{props.label}</label>
-      <select
-        id={id}
-        className={css['select']}
-        value={props.value}
-        disabled={props.disabled}
-        onChange={(event) => { props.onCommit(event.target.value) }}
-      >
-        {props.options.map(option => (
-          <option key={option.value} value={option.value}>{option.label}</option>
-        ))}
-      </select>
-      <p className={css['hint']}>{props.hint}</p>
-    </div>
-  )
-}
-
-interface ToggleFieldProps {
-  label: string
-  hint: string
-  checked: boolean
-  disabled: boolean
-  onCommit: (checked: boolean) => void
-}
-
-function ToggleField(props: ToggleFieldProps): ReactNode {
-  return (
-    <div className={css['field']}>
-      <label className={css['toggleRow']}>
-        <input
-          type="checkbox"
-          checked={props.checked}
-          disabled={props.disabled}
-          onChange={(event) => { props.onCommit(event.target.checked) }}
-        />
-        <span className={css['label']}>{props.label}</span>
-      </label>
-      <p className={css['hint']}>{props.hint}</p>
-    </div>
-  )
-}
-
-interface TextFieldProps {
-  label: string
-  hint: string
-  value: string
-  placeholder?: string
-  disabled: boolean
-  onCommit: (value: string) => void
-}
-
-/** Text field with a local draft so typing survives a non-echoing beat. */
-function TextField(props: TextFieldProps): ReactNode {
-  const id = useId()
-  const [draft, setDraft] = useState(props.value)
-  useEffect(() => { setDraft(props.value) }, [props.value])
-  return (
-    <div className={css['field']}>
-      <label className={css['label']} htmlFor={id}>{props.label}</label>
-      <input
-        id={id}
-        className={css['input']}
-        type="text"
-        value={draft}
-        placeholder={props.placeholder ?? ''}
-        disabled={props.disabled}
-        onChange={(event) => {
-          setDraft(event.target.value)
-          props.onCommit(event.target.value)
-        }}
-      />
-      <p className={css['hint']}>{props.hint}</p>
-    </div>
-  )
-}
-
-interface NumberFieldProps {
-  label: string
-  hint: string
-  /** Copy shown while the draft is not an acceptable integer. */
-  invalidHint: string
-  /** Schema lower bound (host Config schemastery `.min()`). */
-  min: number
-  value: number
-  disabled: boolean
-  onCommit: (value: number) => void
-}
-
-/**
- * Integer field with a local draft: invalid intermediate text (empty,
- * non-numeric, below the schema minimum) shows the invalid hint and commits
- * nothing, so the staged value can never leave the schema's domain.
- */
-function NumberField(props: NumberFieldProps): ReactNode {
-  const id = useId()
-  const [draft, setDraft] = useState(String(props.value))
-  const [invalid, setInvalid] = useState(false)
-  useEffect(() => {
-    setDraft(String(props.value))
-    setInvalid(false)
-  }, [props.value])
-  return (
-    <div className={css['field']}>
-      <label className={css['label']} htmlFor={id}>{props.label}</label>
-      <input
-        id={id}
-        className={invalid ? `${css['input']} ${css['inputInvalid']}` : css['input']}
-        type="text"
-        inputMode="numeric"
-        value={draft}
-        disabled={props.disabled}
-        {...invalid ? { 'aria-invalid': true } : {}}
-        onChange={(event) => {
-          const text = event.target.value
-          setDraft(text)
-          const parsed = Number(text)
-          const acceptable = text.trim() !== '' && Number.isInteger(parsed) && parsed >= props.min
-          setInvalid(!acceptable)
-          if (acceptable && parsed !== props.value) props.onCommit(parsed)
-        }}
-      />
-      {invalid
-        ? <p className={css['invalidHint']} role="alert">{props.invalidHint}</p>
-        : <p className={css['hint']}>{props.hint}</p>}
-    </div>
-  )
-}
-
 /**
  * Render the Agent Sidecar settings card.
  * @param props - staged values, form state, and the wiring callbacks.
@@ -334,9 +205,10 @@ export function SettingsCard(props: SettingsCardProps): ReactNode {
     : props.daemon?.state === 'failed'
       ? t('settings.daemonFailedNote')
       : undefined
+  const cardClassName = `${css['card']} ${open ? css['cardOpen'] : ''}`
 
   return (
-    <li className={`${css['card']} ${open ? css['cardOpen'] : ''}`}>
+    <li {...surfaceProps('settings-card', cardClassName)}>
       <button
         type="button"
         className={css['header']}
@@ -348,8 +220,10 @@ export function SettingsCard(props: SettingsCardProps): ReactNode {
           <span className={css['name']}>{title}</span>
           <span className={css['description']}>{t('settings.cardDescription')}</span>
         </span>
-        {props.dirty ? <span className={css['pending']}>{t('settings.unsaved')}</span> : null}
-        <span className={`${css['chevron']} ${open ? css['chevronOpen'] : ''}`} aria-hidden />
+        {props.dirty ? <Pill className={css['pending']}>{t('settings.unsaved')}</Pill> : null}
+        <IconChevronDownOutline14
+          className={`${css['chevron']} ${open ? css['chevronOpen'] : ''}`}
+        />
       </button>
       {open
         ? (
@@ -380,13 +254,15 @@ export function SettingsCard(props: SettingsCardProps): ReactNode {
                         : null}
                       {props.daemon.state === 'failed' && props.onDaemonRetry !== undefined
                         ? (
-                          <button
+                          <Button
                             type="button"
+                            size="sm"
+                            variant="outline"
                             className={css['retry']}
                             onClick={props.onDaemonRetry}
                           >
                             {t('settings.daemonRetry')}
-                          </button>
+                          </Button>
                         )
                         : null}
                     </div>
@@ -540,22 +416,24 @@ export function SettingsCard(props: SettingsCardProps): ReactNode {
               {props.saveFailed === true
                 ? <p className={css['failed']} role="status">{t('settings.saveFailed')}</p>
                 : <span className={css['spacer']} />}
-              <button
+              <Button
                 type="button"
-                className={css['discard']}
+                size="sm"
+                variant="outline"
                 disabled={!props.dirty || props.saving}
                 onClick={props.onDiscard}
               >
                 {t('settings.discard')}
-              </button>
-              <button
+              </Button>
+              <Button
                 type="button"
-                className={css['save']}
+                size="sm"
+                variant="primary"
                 disabled={!props.dirty || props.saving || !props.writable}
                 onClick={props.onSave}
               >
                 {t(props.saving ? 'settings.saving' : 'settings.save')}
-              </button>
+              </Button>
             </div>
           </div>
         )

package/src/client/settings-fields.tsx

@@ -0,0 +1,131 @@
+import { Input } from '@deepseek-ai/dsh-client-ui-primitives'
+import { useEffect, useId, useState } from 'react'
+import type { ReactElement } from 'react'
+import css from './settings-card.module.css'
+
+interface FieldCopy {
+  label: string
+  hint: string
+  disabled: boolean
+}
+
+interface SelectFieldProps extends FieldCopy {
+  value: string
+  options: readonly { value: string, label: string }[]
+  onCommit: (value: string) => void
+}
+
+export function SelectField(props: SelectFieldProps): ReactElement {
+  const id = useId()
+  return (
+    <div className={css['field']}>
+      <label className={css['label']} htmlFor={id}>{props.label}</label>
+      <select
+        id={id}
+        className={css['select']}
+        value={props.value}
+        disabled={props.disabled}
+        onChange={(event) => { props.onCommit(event.target.value) }}
+      >
+        {props.options.map(option => (
+          <option key={option.value} value={option.value}>{option.label}</option>
+        ))}
+      </select>
+      <p className={css['hint']}>{props.hint}</p>
+    </div>
+  )
+}
+
+interface ToggleFieldProps extends FieldCopy {
+  checked: boolean
+  onCommit: (checked: boolean) => void
+}
+
+export function ToggleField(props: ToggleFieldProps): ReactElement {
+  return (
+    <div className={css['field']}>
+      <label className={css['toggleRow']}>
+        <input
+          type="checkbox"
+          checked={props.checked}
+          disabled={props.disabled}
+          onChange={(event) => { props.onCommit(event.target.checked) }}
+        />
+        <span className={css['label']}>{props.label}</span>
+      </label>
+      <p className={css['hint']}>{props.hint}</p>
+    </div>
+  )
+}
+
+interface TextFieldProps extends FieldCopy {
+  value: string
+  placeholder?: string
+  onCommit: (value: string) => void
+}
+
+export function TextField(props: TextFieldProps): ReactElement {
+  const id = useId()
+  const [draft, setDraft] = useState(props.value)
+  useEffect(() => { setDraft(props.value) }, [props.value])
+  return (
+    <div className={css['field']}>
+      <label className={css['label']} htmlFor={id}>{props.label}</label>
+      <Input
+        id={id}
+        className={css['input']}
+        type="text"
+        value={draft}
+        placeholder={props.placeholder ?? ''}
+        disabled={props.disabled}
+        onChange={(event) => {
+          setDraft(event.target.value)
+          props.onCommit(event.target.value)
+        }}
+      />
+      <p className={css['hint']}>{props.hint}</p>
+    </div>
+  )
+}
+
+interface NumberFieldProps extends FieldCopy {
+  invalidHint: string
+  min: number
+  value: number
+  onCommit: (value: number) => void
+}
+
+export function NumberField(props: NumberFieldProps): ReactElement {
+  const id = useId()
+  const [draft, setDraft] = useState(String(props.value))
+  const [invalid, setInvalid] = useState(false)
+  useEffect(() => {
+    setDraft(String(props.value))
+    setInvalid(false)
+  }, [props.value])
+  return (
+    <div className={css['field']}>
+      <label className={css['label']} htmlFor={id}>{props.label}</label>
+      <Input
+        id={id}
+        className={`${css['input']} ${invalid ? css['inputInvalid'] : ''}`}
+        type="text"
+        inputMode="numeric"
+        value={draft}
+        disabled={props.disabled}
+        {...invalid ? { 'aria-invalid': true } : {}}
+        onChange={(event) => {
+          const text = event.target.value
+          const parsed = Number(text)
+          const acceptable = text.trim() !== '' && Number.isInteger(parsed) && parsed >= props.min
+          setDraft(text)
+          setInvalid(!acceptable)
+          if (acceptable && parsed !== props.value) props.onCommit(parsed)
+        }}
+      />
+      <p className={invalid ? css['invalidHint'] : css['hint']} {...invalid ? { role: 'alert' } : {}}>
+        {invalid ? props.invalidHint : props.hint}
+      </p>
+    </div>
+  )
+}

package/src/client/sidebar/SidebarTab.tsx

@@ -0,0 +1,156 @@
+/** Presentation-only compact view for the optional better-sidebar surface.
+ * Integration owns discovery and view-model derivation; this root subscribes
+ * once to locale changes for its complete presentation subtree. */
+
+import { Button, StateDot, type StateDotState } from '@deepseek-ai/dsh-client-ui-primitives'
+import { useState } from 'react'
+import type { ReactElement } from 'react'
+import {
+  agentGlyph,
+  formatRelativeTime,
+  normalizeStatus,
+  projectDisplayName,
+  type SessionCardVM,
+  type SessionStatusToken,
+} from '../board/logic.ts'
+import { t, type SidecarLocaleKey } from '../locales/index.ts'
+import { useActiveLocale } from '../locales/react.ts'
+import { StaticPill } from '../primitives/StaticPill.tsx'
+import { surfaceProps } from '../theme/parts.ts'
+import type { SidebarMiniVM } from './model.ts'
+import css from './sidebar-tab.module.css'
+
+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 CONNECTION_DOT_STATE: Record<SidebarMiniVM['connection'], StateDotState> = {
+  ok: 'done',
+  degraded: 'warning',
+  off: 'error',
+}
+
+export interface SidebarTabProps {
+  vm: SidebarMiniVM
+  visible: boolean
+  /** Clock injection keeps SSR and focused view tests deterministic. */
+  nowMs?: number
+}
+
+/** Icon renderer kept beside the view while preserving the descriptor callback API. */
+export function SidebarTabIcon({ size }: { size: number }): ReactElement {
+  return (
+    <svg className={css['icon']} width={size} height={size} viewBox="0 0 24 24" aria-hidden>
+      <path d="M12 2 22 12 12 22 2 12 12 2Zm0 3.4L5.4 12l6.6 6.6 6.6-6.6L12 5.4Z" />
+      <circle cx="12" cy="12" r="2.2" />
+    </svg>
+  )
+}
+
+function SessionRow(props: {
+  session: SessionCardVM
+  nowMs: number
+  expanded: boolean
+  detailId: string
+  onToggle: () => void
+}): ReactElement {
+  const { session, nowMs, expanded, detailId } = props
+  const status = normalizeStatus(session.status)
+  const title = session.title.trim() === '' ? t('sidebar.untitled') : session.title
+  const lastEvent =
+    session.lastEvent === null
+      ? <span className={css['muted']}>{t('sidebar.noEvent')}</span>
+      : `${session.lastEvent.kind}: ${session.lastEvent.text}`
+
+  return (
+    <li className={css['sessionItem']}>
+      <Button
+        type="button"
+        size="sm"
+        variant="ghost"
+        className={css['sessionButton']}
+        onClick={props.onToggle}
+        data-testid="agent-sidecar-sidebar-session"
+        data-session-id={session.sessionId}
+        data-status={status}
+        aria-expanded={expanded}
+        aria-controls={detailId}
+      >
+        <span className={css['glyph']} aria-hidden>{agentGlyph(session.agent)}</span>
+        <span className={css['sessionTitle']} title={session.sessionId}>
+          {title}
+        </span>
+        <span className={css['sessionMeta']}>
+          {t(STATUS_LABEL_KEY[status])} · {formatRelativeTime(session.updatedAtMs, nowMs)}
+        </span>
+      </Button>
+      {expanded && (
+        <div
+          id={detailId}
+          className={css['detail']}
+          role="region"
+          aria-label={title}
+          data-testid="agent-sidecar-sidebar-detail"
+        >
+          <div>{projectDisplayName(session.project)}</div>
+          <div>{lastEvent}</div>
+        </div>
+      )}
+    </li>
+  )
+}
+
+/** Compact better-sidebar body. No controller, service, or transport imports. */
+export function SidebarTab({ vm, visible, nowMs = Date.now() }: SidebarTabProps): ReactElement {
+  useActiveLocale()
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const recentTitleId = 'agent-sidecar-sidebar-recent-title'
+
+  let body: ReactElement
+  if (!vm.hasSnapshot) {
+    body = <p className={css['muted']}>{t('sidebar.connecting')}</p>
+  } else if (vm.recent.length === 0) {
+    body = <p className={css['muted']}>{t('sidebar.noSessions')}</p>
+  } else {
+    body = (
+      <ul className={css['sessionList']} aria-labelledby={recentTitleId}>
+        {vm.recent.map((session, index) => (
+          <SessionRow
+            key={session.sessionId}
+            session={session}
+            nowMs={nowMs}
+            expanded={expandedId === session.sessionId}
+            detailId={`agent-sidecar-sidebar-detail-${index}`}
+            onToggle={() => {
+              setExpandedId((previous) => previous === session.sessionId ? null : session.sessionId)
+            }}
+          />
+        ))}
+      </ul>
+    )
+  }
+
+  return (
+    <section
+      {...surfaceProps('sidebar-tab', css['root'])}
+      data-testid="agent-sidecar-sidebar-tab"
+      data-visible={visible}
+      aria-label={t('sidebar.tabTitle')}
+      aria-hidden={!visible}
+    >
+      <header className={css['header']} title={vm.connectionTitle}>
+        <StaticPill className={css['counts']} data-testid="agent-sidecar-sidebar-counts">
+          <StateDot state={CONNECTION_DOT_STATE[vm.connection]} size={8} />
+          {t('sidebar.countsRow', { working: vm.workingCount, waiting: vm.waitingCount })}
+        </StaticPill>
+      </header>
+      <h2 id={recentTitleId} className={css['sectionTitle']}>{t('sidebar.recentTitle')}</h2>
+      {body}
+      <p className={css['hint']}>{t('sidebar.boardHint')}</p>
+    </section>
+  )
+}

package/src/client/sidebar/model.ts

@@ -0,0 +1,65 @@
+/** Pure view-model derivation for the optional compact sidebar. */
+
+import type { SidecarViewState } from '../controller.ts'
+import {
+  countWorking,
+  deriveWidgetConnection,
+  normalizeStatus,
+  type SessionCardVM,
+  type WidgetConnection,
+  widgetTitle,
+} from '../board/logic.ts'
+
+/** Compact view caps the session list at this many rows. */
+export const MAX_RECENT_SESSIONS = 5
+
+/** 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
+}
+
+/**
+ * Return non-dead sessions by descending update time, capped for the compact
+ * view. 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. */
+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,
+  }
+}