@fonlan/dsh-model-parameters 0.1.0 → 0.1.3

package/src/client/settings-section.tsx

@@ -1,310 +0,0 @@
-/**
- * The Model Parameters settings page: master + per-field toggles, catalog TTL,
- * provider→models.dev mapping overrides, a manual refresh/fill action, the
- * catalog freshness card, and the last fill report (filled / touched /
- * unmatched). All reads/mutations go through the plugin's fenced API; config
- * persists into the `model-parameters` settings namespace (settings.yaml).
- */
-import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
-import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
-import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'
-import { LOCALE_NS } from './locales'
-import { api, type PluginState } from './api'
-import type { ModelParametersConfig } from '../shared/config.js'
-import './settings-section.css'
-
-function useLocaleRevision(ctx: ClientContext): number {
-  const subscribe = useCallback(
-    (onChange: () => void) => {
-      try {
-        return ctx.locale.subscribe(onChange)
-      } catch {
-        return () => {}
-      }
-    },
-    [ctx],
-  )
-  const getSnapshot = useCallback(() => {
-    try {
-      return ctx.locale.getLocale().revision
-    } catch {
-      return 0
-    }
-  }, [ctx])
-  return useSyncExternalStore(subscribe, getSnapshot)
-}
-
-function formatTime(epochMs: number): string {
-  try {
-    return new Date(epochMs).toLocaleString()
-  } catch {
-    return String(epochMs)
-  }
-}
-
-export function makeSettingsSection(ctx: ClientContext): () => JSX.Element {
-  const t: Translate = (() => {
-    try {
-      return ctx.locale.bind(LOCALE_NS) as unknown as Translate
-    } catch {
-      return (key: string) => key
-    }
-  })()
-
-  return function ModelParametersSettingsSection(): JSX.Element {
-    useLocaleRevision(ctx)
-    const [state, setState] = useState<PluginState | null>(null)
-    const [error, setError] = useState<string | null>(null)
-    const [loading, setLoading] = useState(true)
-    const [busy, setBusy] = useState(false)
-    const [saving, setSaving] = useState(false)
-    const [mappingRows, setMappingRows] = useState<Array<{ from: string; to: string }>>([])
-    const [newFrom, setNewFrom] = useState('')
-    const [newTo, setNewTo] = useState('')
-
-    const load = useCallback(async () => {
-      setLoading(true)
-      try {
-        const next = await api.state()
-        setState(next)
-        setMappingRows(Object.entries(next.config.providerMap).map(([from, to]) => ({ from, to })))
-        setError(null)
-      } catch (cause) {
-        setError(cause instanceof Error ? cause.message : String(cause))
-      } finally {
-        setLoading(false)
-      }
-    }, [])
-
-    useEffect(() => {
-      void load()
-    }, [load])
-
-    const patchConfig = useCallback(async (patch: Partial<ModelParametersConfig>) => {
-      setSaving(true)
-      try {
-        const next = await api.setConfig(patch)
-        setState(next)
-        setMappingRows(Object.entries(next.config.providerMap).map(([from, to]) => ({ from, to })))
-        setError(null)
-      } catch (cause) {
-        setError(cause instanceof Error ? cause.message : String(cause))
-      } finally {
-        setSaving(false)
-      }
-    }, [])
-
-    const refresh = useCallback(async () => {
-      setBusy(true)
-      try {
-        setState(await api.refresh())
-        setError(null)
-      } catch (cause) {
-        setError(cause instanceof Error ? cause.message : String(cause))
-      } finally {
-        setBusy(false)
-      }
-    }, [])
-
-    const reconcileNow = useCallback(async () => {
-      setBusy(true)
-      try {
-        setState(await api.reconcile())
-        setError(null)
-      } catch (cause) {
-        setError(cause instanceof Error ? cause.message : String(cause))
-      } finally {
-        setBusy(false)
-      }
-    }, [])
-
-    const applyMappings = useCallback(async () => {
-      const providerMap: Record<string, string> = {}
-      for (const row of mappingRows) {
-        const from = row.from.trim()
-        const to = row.to.trim()
-        if (from.length > 0 && to.length > 0) providerMap[from] = to
-      }
-      await patchConfig({ providerMap })
-    }, [mappingRows, patchConfig])
-
-    if (error !== null && state === null) {
-      return (
-        <p className="mp-error">{t('error')}: {error}</p>
-      )
-    }
-    if (loading || state === null) {
-      return <p className="mp-muted">{t('saving')}</p>
-    }
-
-    const config = state.config
-    const catalog = state.catalog
-    const report = state.report
-
-    return (
-      <div className="mp-root">
-        <p className="mp-desc">{t('description')}</p>
-
-        <section className="mp-card">
-          <h4 className="mp-card-title">{t('fields')}</h4>
-          <label className="mp-toggle">
-            <input
-              type="checkbox"
-              checked={config.enabled}
-              disabled={saving}
-              onChange={(event) => void patchConfig({ enabled: event.target.checked })}
-            />
-            <span className="mp-toggle-body">
-              <span className="mp-toggle-label">{t('master')}</span>
-              <span className="mp-toggle-desc">{t('masterDesc')}</span>
-            </span>
-          </label>
-          {([
-            ['fillName', t('fillName'), t('fillNameDesc')],
-            ['fillContext', t('fillContext'), t('fillContextDesc')],
-            ['fillMaxTokens', t('fillMaxTokens'), t('fillMaxTokensDesc')],
-            ['fillReasoning', t('fillReasoning'), t('fillReasoningDesc')],
-            ['fillInput', t('fillInput'), t('fillInputDesc')],
-          ] as const).map(([key, label, desc]) => (
-            <label className="mp-toggle mp-toggle-sub" key={key}>
-              <input
-                type="checkbox"
-                checked={config[key]}
-                disabled={saving || !config.enabled}
-                onChange={(event) => void patchConfig({ [key]: event.target.checked })}
-              />
-              <span className="mp-toggle-body">
-                <span className="mp-toggle-label">{label}</span>
-                <span className="mp-toggle-desc">{desc}</span>
-              </span>
-            </label>
-          ))}
-        </section>
-
-        <section className="mp-card">
-          <h4 className="mp-card-title">{t('catalog')}</h4>
-          <div className="mp-meta">
-            <span>{t('catalogEntries')}: <strong>{catalog.entries.toLocaleString()}</strong></span>
-            <span>{t('catalogProviders')}: <strong>{catalog.providers.toLocaleString()}</strong></span>
-            <span>
-              {t('catalogFetched')}:{' '}
-              <strong>{catalog.fetchedAt > 0 ? formatTime(catalog.fetchedAt) : t('catalogNever')}</strong>{' '}
-              {catalog.fetchedAt > 0 && (
-                <span className={catalog.fresh ? 'mp-badge mp-badge-ok' : 'mp-badge mp-badge-warn'}>
-                  {catalog.fresh ? t('catalogFresh') : t('catalogStale')}
-                </span>
-              )}
-            </span>
-            <label className="mp-ttl">
-              {t('ttl')}
-              <input
-                type="number"
-                min={1}
-                max={90}
-                value={config.ttlDays}
-                disabled={saving}
-                onChange={(event) => {
-                  const days = Number(event.target.value)
-                  if (Number.isFinite(days) && days >= 1 && days <= 90) void patchConfig({ ttlDays: Math.round(days) })
-                }}
-              />
-            </label>
-          </div>
-          <div className="mp-actions">
-            <button className="mp-button" disabled={busy} onClick={() => void refresh()}>
-              {busy ? t('refreshBusy') : t('refresh')}
-            </button>
-            <button className="mp-button mp-button-ghost" disabled={busy} onClick={() => void reconcileNow()}>
-              {t('reconcileNow')}
-            </button>
-          </div>
-        </section>
-
-        <section className="mp-card">
-          <h4 className="mp-card-title">{t('providerMap')}</h4>
-          <p className="mp-toggle-desc">{t('providerMapDesc')}</p>
-          {mappingRows.map((row, index) => (
-            <div className="mp-map-row" key={index}>
-              <input
-                value={row.from}
-                disabled={saving}
-                onChange={(event) => {
-                  const next = [...mappingRows]
-                  next[index] = { ...row, from: event.target.value }
-                  setMappingRows(next)
-                }}
-              />
-              <span className="mp-map-arrow">→</span>
-              <input
-                value={row.to}
-                disabled={saving}
-                onChange={(event) => {
-                  const next = [...mappingRows]
-                  next[index] = { ...row, to: event.target.value }
-                  setMappingRows(next)
-                }}
-              />
-              <button
-                className="mp-button mp-button-ghost"
-                disabled={saving}
-                onClick={() => setMappingRows(mappingRows.filter((_, i) => i !== index))}
-              >
-                {t('removeMapping')}
-              </button>
-            </div>
-          ))}
-          <div className="mp-map-row">
-            <input
-              placeholder="dsh provider"
-              value={newFrom}
-              onChange={(event) => setNewFrom(event.target.value)}
-            />
-            <span className="mp-map-arrow">→</span>
-            <input
-              placeholder="models.dev provider"
-              value={newTo}
-              onChange={(event) => setNewTo(event.target.value)}
-            />
-            <button
-              className="mp-button"
-              disabled={newFrom.trim().length === 0 || newTo.trim().length === 0}
-              onClick={() => {
-                setMappingRows([...mappingRows, { from: newFrom.trim(), to: newTo.trim() }])
-                setNewFrom('')
-                setNewTo('')
-              }}
-            >
-              {t('addMapping')}
-            </button>
-          </div>
-          <div className="mp-actions">
-            <button className="mp-button mp-button-ghost" disabled={saving} onClick={() => void applyMappings()}>
-              {saving ? t('saving') : '✓ ' + t('providerMap')}
-            </button>
-          </div>
-        </section>
-
-        <section className="mp-card">
-          <h4 className="mp-card-title">{t('report')}</h4>
-          {report === null ? (
-            <p className="mp-muted">{t('reportNever')}</p>
-          ) : (
-            <ul className="mp-report">
-              <li>{t('reportAt')}: {formatTime(report.at)}</li>
-              <li>{t('reportFilled')}: <strong>{report.filled}</strong></li>
-              <li>{t('reportTouched')}: <strong>{report.touched}</strong></li>
-              <li>
-                {t('reportUnmatched')}:{' '}
-                {report.unmatched.length === 0
-                  ? t('reportEmpty')
-                  : <code className="mp-code">{report.unmatched.join(', ')}</code>}
-              </li>
-            </ul>
-          )}
-        </section>
-
-        {error !== null && <p className="mp-error">{error}</p>}
-      </div>
-    )
-  }
-}