@mhfire/dsh-im-bridge 0.1.7 → 0.2.0

package/src/client/PluginCard.module.css

@@ -0,0 +1,153 @@
+/* Plugin card chrome: matches the Host Plugins section cards. */
+
+.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);
+}
+
+.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);
+}
+
+.chevron {
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+  transition: transform .16s;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.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);
+}
+
+.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);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 0 4px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.failed {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-error);
+}
+
+.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/PluginCard.tsx

@@ -0,0 +1,83 @@
+/** Expandable plugin card chrome matching the Host Plugins section. */
+
+import { useState, type ReactElement, type ReactNode } from 'react'
+import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ImBridgeLocaleKey } from './locales.ts'
+import type { CardShell } from './card-form.ts'
+import css from './PluginCard.module.css'
+
+/** Card chrome shared by this plugin's settings card. */
+export interface PluginCardProps {
+  /** Locale reader for this card's copy. */
+  t: (key: ImBridgeLocaleKey) => string
+  /** Locale key of the plugin's name. */
+  titleKey: ImBridgeLocaleKey
+  /** Locale key of the line describing what these settings govern. */
+  descriptionKey: ImBridgeLocaleKey
+  /** The card's form state. */
+  state: CardShell
+  /** Write every staged edit. */
+  onSave: () => void
+  /** Drop every staged edit. */
+  onDiscard: () => void
+  /** The plugin's controls. */
+  children: ReactNode
+}
+
+/**
+ * Render one plugin card.
+ * @param props - locale copy, form state, and controls.
+ * @returns the card, or nothing when the namespace is unavailable.
+ */
+export function PluginCard(props: PluginCardProps): ReactElement | null {
+  const [open, setOpen] = useState(false)
+  const { state } = props
+  if (!state.available) return null
+  const title = props.t(props.titleKey)
+  const blocked = !state.dirty || state.invalid || state.saving
+  return (
+    <li className={open ? `${css.card} ${css.cardOpen}` : css.card}>
+      <button
+        type="button"
+        className={css.header}
+        aria-expanded={open}
+        aria-label={`${props.t(open ? 'collapse' : 'expand')}: ${title}`}
+        onClick={() => { setOpen(current => !current) }}
+      >
+        <span className={css.headText}>
+          <span className={css.name}>{title}</span>
+          <span className={css.description}>{props.t(props.descriptionKey)}</span>
+        </span>
+        {state.dirty ? <span className={css.pending}>{props.t('unsaved')}</span> : null}
+        <IconChevronDownOutline14 className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron} />
+      </button>
+      {open
+        ? (
+          <div className={css.body}>
+            {!state.writable ? <p className={css.readOnly} role="status">{props.t('readOnly')}</p> : null}
+            {props.children}
+            <div className={css.footer}>
+              {state.failed ? <p className={css.failed} role="status">{props.t('saveFailed')}</p> : null}
+              <button
+                type="button"
+                className={css.discard}
+                disabled={!state.dirty || state.saving}
+                onClick={props.onDiscard}
+              >
+                {props.t('discard')}
+              </button>
+              <button
+                type="button"
+                className={css.save}
+                disabled={blocked}
+                onClick={props.onSave}
+              >
+                {props.t(state.saving ? 'saving' : 'save')}
+              </button>
+            </div>
+          </div>
+        )
+        : null}
+    </li>
+  )
+}

package/src/client/WecomCard.tsx

@@ -0,0 +1,135 @@
+/** WeCom settings card: owned chrome, staged fields, save/discard. */
+
+import type { ReactElement } from 'react'
+import type { ImBridgeLocaleKey } from './locales.ts'
+import type { WecomCardFace, WecomCardState } from './card-controller.ts'
+import { PluginCard } from './PluginCard.tsx'
+import { SecretField, ValueField } from './fields.tsx'
+
+/** Props the slot renderer binds for this card. */
+export interface WecomCardProps {
+  /** Translate a dictionary key of the `im-bridge` namespace. */
+  t: (key: ImBridgeLocaleKey) => string
+  /** Card snapshot bound from inject.hooks.wecomCard. */
+  useWecomCard: <S>(select: (state: WecomCardState) => S) => S
+  /** Stage draft text for one field. */
+  edit: WecomCardFace['edit']
+  /** Stage a clear back to the composition layer. */
+  resetField: WecomCardFace['resetField']
+  /** Write every staged edit. */
+  save: WecomCardFace['save']
+  /** Drop every staged edit. */
+  discard: WecomCardFace['discard']
+}
+
+/**
+ * Render the WeCom settings card.
+ * @param props - locale copy, snapshot hook, and form actions.
+ * @returns the card, or nothing when the namespace is unavailable.
+ */
+export function WecomCard(props: WecomCardProps): ReactElement | null {
+  const { t } = props
+  const state = props.useWecomCard(snapshot => snapshot)
+  const disabled = !state.writable
+  const field = {
+    overriddenLabel: t('overridden'),
+    resetLabel: t('reset'),
+    invalidLabel: t('invalidNumber'),
+    disabled,
+  }
+  return (
+    <PluginCard
+      t={t}
+      titleKey="title"
+      descriptionKey="description"
+      state={state}
+      onSave={props.save}
+      onDiscard={props.discard}
+    >
+      <SecretField
+        id="im-bridge-botId"
+        label={t('botId')}
+        hint={t('secretHint')}
+        disabled={disabled}
+        text={state.botId.text}
+        configured={state.botIdConfigured}
+        stateLabel={state.botIdConfigured ? t('secretConfigured') : t('secretUnset')}
+        onEdit={text => { props.edit('botId', text) }}
+      />
+      <SecretField
+        id="im-bridge-secret"
+        label={t('secret')}
+        hint={t('secretHint')}
+        disabled={disabled}
+        text={state.secret.text}
+        configured={state.secretConfigured}
+        stateLabel={state.secretConfigured ? t('secretConfigured') : t('secretUnset')}
+        onEdit={text => { props.edit('secret', text) }}
+      />
+      <ValueField
+        id="im-bridge-allowFrom"
+        label={t('allowFrom')}
+        hint={t('allowFromHint')}
+        {...field}
+        {...state.allowFrom}
+        onEdit={text => { props.edit('allowFrom', text) }}
+        onReset={() => { props.resetField('allowFrom') }}
+      />
+      <ValueField
+        id="im-bridge-agentTimeoutSec"
+        label={t('agentTimeoutSec')}
+        hint={t('agentTimeoutSecHint')}
+        numeric
+        {...field}
+        {...state.agentTimeoutSec}
+        onEdit={text => { props.edit('agentTimeoutSec', text) }}
+        onReset={() => { props.resetField('agentTimeoutSec') }}
+      />
+      <ValueField
+        id="im-bridge-startHint"
+        label={t('startHint')}
+        hint={t('startHintHint')}
+        {...field}
+        {...state.startHint}
+        onEdit={text => { props.edit('startHint', text) }}
+        onReset={() => { props.resetField('startHint') }}
+      />
+      <ValueField
+        id="im-bridge-deniedMessage"
+        label={t('deniedMessage')}
+        hint={t('deniedMessageHint')}
+        {...field}
+        {...state.deniedMessage}
+        onEdit={text => { props.edit('deniedMessage', text) }}
+        onReset={() => { props.resetField('deniedMessage') }}
+      />
+      <ValueField
+        id="im-bridge-welcomeMessage"
+        label={t('welcomeMessage')}
+        hint={t('welcomeMessageHint')}
+        {...field}
+        {...state.welcomeMessage}
+        onEdit={text => { props.edit('welcomeMessage', text) }}
+        onReset={() => { props.resetField('welcomeMessage') }}
+      />
+      <ValueField
+        id="im-bridge-provider"
+        label={t('provider')}
+        hint={t('providerHint')}
+        {...field}
+        {...state.provider}
+        onEdit={text => { props.edit('provider', text) }}
+        onReset={() => { props.resetField('provider') }}
+      />
+      <ValueField
+        id="im-bridge-model"
+        label={t('model')}
+        hint={t('modelHint')}
+        {...field}
+        {...state.model}
+        onEdit={text => { props.edit('model', text) }}
+        onReset={() => { props.resetField('model') }}
+      />
+    </PluginCard>
+  )
+}

package/src/client/card-controller.ts

@@ -0,0 +1,146 @@
+/** Staged form over the `im-bridge` settings namespace. */
+
+import type { SettingsScope, SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import {
+  CardForm,
+  csvField,
+  numberField,
+  textField,
+  type CardActions,
+  type CardFieldState,
+  type CardShell,
+} from './card-form.ts'
+
+/** One redacted secret slot from `settings.describe`. */
+interface SecretSlotView {
+  path: readonly string[]
+  set: boolean
+}
+
+/**
+ * Cross-namespace describe face. Typed locally so this out-of-tree package
+ * does not value- or type-import `@deepseek-ai/dsh-client-ui-settings`.
+ */
+interface SettingsDescribeFace {
+  getSnapshot(): {
+    view?: {
+      namespaces: ReadonlyArray<{
+        ns: string
+        secrets: readonly SecretSlotView[]
+      }>
+    }
+  }
+}
+
+/** Settings namespace paired with this card. */
+const NS = 'im-bridge'
+
+/** User-editable slice of the im-bridge settings namespace. */
+export interface WecomCardSettings {
+  allowFrom?: string[]
+  agentTimeoutSec?: number
+  startHint?: string
+  deniedMessage?: string
+  welcomeMessage?: string
+  provider?: string
+  model?: string
+}
+
+/** Snapshot the WeCom card renders. */
+export interface WecomCardState extends CardShell {
+  botId: CardFieldState
+  secret: CardFieldState
+  botIdConfigured: boolean
+  secretConfigured: boolean
+  allowFrom: CardFieldState
+  agentTimeoutSec: CardFieldState
+  startHint: CardFieldState
+  deniedMessage: CardFieldState
+  welcomeMessage: CardFieldState
+  provider: CardFieldState
+  model: CardFieldState
+}
+
+/** Face the card's slot registration injects. */
+export interface WecomCardFace extends CardActions {
+  hooks: {
+    /** Card snapshot bound by the renderer as useWecomCard. */
+    wecomCard: SnapshotStore<WecomCardState>
+  }
+}
+
+/** Bridges the `im-bridge` scope onto the staged card form. */
+export class WecomCardController {
+  private readonly form: CardForm<WecomCardSettings>
+  private readonly store: SnapshotStore<WecomCardState>
+
+  /**
+   * @param scope - bound settings scope for the `im-bridge` namespace.
+   * @param describe - Host describe face; secret literals never ride it.
+   */
+  constructor(
+    private readonly scope: SettingsScope<WecomCardSettings>,
+    private readonly describe: SettingsDescribeFace,
+  ) {
+    this.form = new CardForm(
+      scope,
+      [
+        csvField('allowFrom'),
+        numberField('agentTimeoutSec'),
+        textField('startHint'),
+        textField('deniedMessage'),
+        textField('welcomeMessage'),
+        textField('provider'),
+        textField('model'),
+      ],
+      [
+        { field: 'botId', write: text => this.writeSecret('botId', text) },
+        { field: 'secret', write: text => this.writeSecret('secret', text) },
+      ],
+    )
+    this.store = this.form.bind(() => this.projection())
+  }
+
+  private projection(): WecomCardState {
+    return {
+      ...this.form.shell(),
+      botId: this.form.field('botId'),
+      secret: this.form.field('secret'),
+      botIdConfigured: this.secretConfigured('botId'),
+      secretConfigured: this.secretConfigured('secret'),
+      allowFrom: this.form.field('allowFrom'),
+      agentTimeoutSec: this.form.field('agentTimeoutSec'),
+      startHint: this.form.field('startHint'),
+      deniedMessage: this.form.field('deniedMessage'),
+      welcomeMessage: this.form.field('welcomeMessage'),
+      provider: this.form.field('provider'),
+      model: this.form.field('model'),
+    }
+  }
+
+  /**
+   * Whether the Host reports a configured value for one secret slot.
+   * @param field - `botId` or `secret`.
+   * @returns true when describe lists that slot as set.
+   */
+  private secretConfigured(field: string): boolean {
+    const row = this.describe.getSnapshot().view?.namespaces.find(candidate => candidate.ns === NS)
+    return row?.secrets.some(slot => slot.path[0] === field && slot.set) === true
+  }
+
+  /**
+   * Write one credential into the user layer, then read configured state back.
+   * @param field - `botId` or `secret`.
+   * @param text - the staged literal.
+   * @returns whether describe reports the slot set afterwards.
+   */
+  private async writeSecret(field: string, text: string): Promise<boolean> {
+    await this.scope.set(field, text)
+    return this.secretConfigured(field)
+  }
+
+  /** Face the slot registration injects. */
+  inject(): WecomCardFace {
+    return { hooks: { wecomCard: this.store }, ...this.form.actions() }
+  }
+}