@shendeguize/dsh-agent-sidecar 0.1.1 → 0.2.0

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;
-}

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>
+  )
+}