initial config manager

web/src/ConfigManager.tsx

@@ -0,0 +1,816 @@
+import { h, Fragment } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import SignalPicker, { SignalOption } from './SignalPicker';
+
+// ── Types (mirror internal/confmgr) ──────────────────────────────────────────
+
+type ParamType = 'float64' | 'int64' | 'bool' | 'string' | 'enum';
+
+interface Parameter {
+  key: string;
+  label?: string;
+  group?: string;
+  subgroup?: string;
+  ds: string;
+  signal: string;
+  type: ParamType;
+  default?: any;
+  mandatory?: boolean;
+  min?: number;
+  max?: number;
+  enumValues?: string[];
+  unit?: string;
+  description?: string;
+}
+
+interface ConfigSet {
+  id: string;
+  name: string;
+  description?: string;
+  version: number;
+  tag?: string;
+  owner?: string;
+  parameters: Parameter[];
+}
+
+interface ConfigInstance {
+  id: string;
+  name: string;
+  setId: string;
+  setVersion?: number;
+  version: number;
+  tag?: string;
+  owner?: string;
+  values: Record<string, any>;
+}
+
+interface Meta { id: string; name: string; version: number; }
+interface VersionMeta { version: number; name: string; tag?: string; current: boolean; savedAt: string; }
+
+interface ApplyEntry { key: string; ds: string; signal: string; value?: any; ok: boolean; skipped?: boolean; error?: string; }
+interface ApplyResult { instanceId: string; setId: string; entries: ApplyEntry[]; applied: number; failed: number; skipped: number; }
+
+type DiffStatus = 'added' | 'removed' | 'changed' | 'unchanged';
+interface SetDiffEntry { key: string; status: DiffStatus; left?: Parameter; right?: Parameter; }
+interface InstanceDiffEntry { key: string; status: DiffStatus; left?: any; right?: any; }
+
+const PARAM_TYPES: ParamType[] = ['float64', 'int64', 'bool', 'string', 'enum'];
+
+// ── API helper ───────────────────────────────────────────────────────────────
+
+async function apiJSON<T = any>(url: string, opts?: RequestInit): Promise<T | null> {
+  const res = await fetch(url, opts);
+  if (!res.ok && res.status !== 204) {
+    let msg = `HTTP ${res.status}`;
+    try { const e = await res.json(); if (e && e.error) msg = e.error; } catch { /* ignore */ }
+    throw new Error(msg);
+  }
+  if (res.status === 204) return null;
+  return res.json();
+}
+
+// Lazily-loaded data-source + signal options powering the SignalPicker.
+function useSignals() {
+  const [dataSources, setDataSources] = useState<string[]>([]);
+  const [dsSignals, setDsSignals] = useState<Record<string, string[]>>({});
+
+  useEffect(() => {
+    fetch('/api/v1/datasources')
+      .then(r => (r.ok ? r.json() : []))
+      .then((ds: { name: string }[]) => setDataSources(ds.map(d => d.name)))
+      .catch(() => {});
+  }, []);
+
+  const loadSignals = useCallback((ds: string) => {
+    if (!ds) return;
+    setDsSignals(prev => {
+      if (prev[ds]) return prev;
+      fetch(`/api/v1/signals?ds=${encodeURIComponent(ds)}`)
+        .then(r => (r.ok ? r.json() : []))
+        .then((sigs: { name: string }[]) => setDsSignals(p => ({ ...p, [ds]: sigs.map(s => s.name) })))
+        .catch(() => {});
+      return prev;
+    });
+  }, []);
+
+  function allOptions(): SignalOption[] {
+    const out: SignalOption[] = [];
+    for (const ds of dataSources) for (const name of dsSignals[ds] ?? []) out.push({ ds, name });
+    return out;
+  }
+  function openAll() { dataSources.forEach(loadSignals); }
+
+  return { allOptions, openAll };
+}
+
+function splitRef(ref: string): { ds: string; signal: string } {
+  const i = ref.indexOf(':');
+  if (i < 0) return { ds: '', signal: ref };
+  return { ds: ref.slice(0, i), signal: ref.slice(i + 1) };
+}
+
+function fmtTime(iso: string): string {
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return iso;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+// ── Top-level modal ───────────────────────────────────────────────────────────
+
+interface Props { onClose: () => void; }
+
+export default function ConfigManager({ onClose }: Props) {
+  const [tab, setTab] = useState<'sets' | 'instances'>('sets');
+
+  return (
+    <div class="cl-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div class="cl-modal">
+        <header class="cl-header">
+          <span class="cl-title">Configuration manager</span>
+          <span class="hint cl-subtitle">Versioned configuration sets (schemas) and instances (values) that apply to signals.</span>
+          <div class="cl-header-actions">
+            <button class="panel-btn" onClick={onClose}>Close</button>
+          </div>
+        </header>
+
+        <div class="cfg-tabs">
+          <button class={`cfg-tab${tab === 'sets' ? ' cfg-tab-active' : ''}`} onClick={() => setTab('sets')}>Sets</button>
+          <button class={`cfg-tab${tab === 'instances' ? ' cfg-tab-active' : ''}`} onClick={() => setTab('instances')}>Instances</button>
+        </div>
+
+        {tab === 'sets' ? <SetsManager /> : <InstancesManager />}
+      </div>
+    </div>
+  );
+}
+
+// ── Sets manager ──────────────────────────────────────────────────────────────
+
+function SetsManager() {
+  const [sets, setSets] = useState<Meta[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [working, setWorking] = useState<ConfigSet | null>(null);
+  const [dirty, setDirty] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [diff, setDiff] = useState<{ title: string; entries: SetDiffEntry[] } | null>(null);
+  const { allOptions, openAll } = useSignals();
+
+  const reload = useCallback(async () => {
+    try { setSets((await apiJSON<Meta[]>('/api/v1/config/sets')) ?? []); }
+    catch (err) { setError(`Failed to load sets: ${msg(err)}`); }
+  }, []);
+  useEffect(() => { reload(); }, [reload]);
+
+  async function select(id: string) {
+    if (dirty && !confirm('Discard unsaved changes?')) return;
+    setError(null);
+    try {
+      const s = await apiJSON<ConfigSet>(`/api/v1/config/sets/${encodeURIComponent(id)}`);
+      setSelectedId(id);
+      setWorking(s);
+      setDirty(false);
+    } catch (err) { setError(msg(err)); }
+  }
+
+  async function createSet() {
+    setBusy(true); setError(null);
+    try {
+      const body = { name: 'New config set', description: '', parameters: [] };
+      const created = await apiJSON<ConfigSet>('/api/v1/config/sets', jsonPost(body));
+      await reload();
+      setSelectedId(created!.id);
+      setWorking(created);
+      setDirty(false);
+    } catch (err) { setError(`Create failed: ${msg(err)}`); }
+    finally { setBusy(false); }
+  }
+
+  async function save() {
+    if (!working) return;
+    setBusy(true); setError(null);
+    try {
+      const saved = await apiJSON<ConfigSet>(`/api/v1/config/sets/${encodeURIComponent(working.id)}`, jsonPut(working));
+      setWorking(saved);
+      setDirty(false);
+      await reload();
+    } catch (err) { setError(`Save failed: ${msg(err)}`); }
+    finally { setBusy(false); }
+  }
+
+  async function remove(id: string) {
+    if (!confirm('Delete this config set? A server-side copy is kept in trash.')) return;
+    setBusy(true); setError(null);
+    try {
+      await apiJSON(`/api/v1/config/sets/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      if (selectedId === id) { setSelectedId(null); setWorking(null); setDirty(false); }
+      await reload();
+    } catch (err) { setError(`Delete failed: ${msg(err)}`); }
+    finally { setBusy(false); }
+  }
+
+  function patch(p: Partial<ConfigSet>) {
+    if (!working) return;
+    setWorking({ ...working, ...p });
+    setDirty(true);
+  }
+  function patchParam(i: number, p: Partial<Parameter>) {
+    if (!working) return;
+    const params = working.parameters.map((x, idx) => (idx === i ? { ...x, ...p } : x));
+    patch({ parameters: params });
+  }
+  function addParam() {
+    if (!working) return;
+    const n = working.parameters.length + 1;
+    patch({ parameters: [...working.parameters, { key: `param${n}`, ds: '', signal: '', type: 'float64' }] });
+  }
+  function removeParam(i: number) {
+    if (!working) return;
+    patch({ parameters: working.parameters.filter((_, idx) => idx !== i) });
+  }
+
+  async function showDiff(av: number, bv: number) {
+    if (!working) return;
+    setError(null);
+    try {
+      const q = new URLSearchParams({ a: working.id, av: String(av), b: working.id, bv: String(bv) });
+      const entries = (await apiJSON<SetDiffEntry[]>(`/api/v1/config/sets/diff?${q}`)) ?? [];
+      setDiff({ title: `${working.name}: v${av} → v${bv}`, entries });
+    } catch (err) { setError(`Diff failed: ${msg(err)}`); }
+  }
+
+  return (
+    <div class="cl-body">
+      <div class="cl-list">
+        <div class="cl-list-head">
+          <span>Config sets</span>
+          <button class="panel-btn" disabled={busy} onClick={createSet}>+ New</button>
+        </div>
+        {sets.length === 0 && <div class="hint cl-list-empty">No config sets yet.</div>}
+        {sets.map(s => (
+          <div key={s.id} class={`cl-list-item${selectedId === s.id ? ' cl-list-item-active' : ''}`} onClick={() => select(s.id)}>
+            <span class="cl-list-name" title={s.name}>{s.name || '(unnamed)'}</span>
+            <span class="cfg-badge" title="Current version">v{s.version}</span>
+            <button class="cl-mini-btn" title="Delete" onClick={(e) => { e.stopPropagation(); remove(s.id); }}>✕</button>
+          </div>
+        ))}
+      </div>
+
+      <div class="cl-editor-wrap">
+        {error && <div class="cl-error">{error}</div>}
+        {!working && <div class="cl-empty hint">Select a config set on the left, or create a new one.</div>}
+        {working && (
+          <div class="cfg-editor">
+            <div class="cfg-edit-bar">
+              <input class="prop-input cl-name-input" value={working.name} placeholder="Set name"
+                onInput={(e) => patch({ name: (e.target as HTMLInputElement).value })} />
+              <span class="cfg-badge">v{working.version}</span>
+              {dirty && <span class="cl-dirty">unsaved</span>}
+              <button class="panel-btn panel-btn-primary" disabled={busy || !dirty} onClick={save}>Save</button>
+            </div>
+            <input class="prop-input" value={working.description ?? ''} placeholder="Description (optional)"
+              onInput={(e) => patch({ description: (e.target as HTMLInputElement).value })} />
+
+            <div class="cfg-section-head">
+              <span>Parameters</span>
+              <button class="panel-btn" onClick={addParam}>+ Add parameter</button>
+            </div>
+            {working.parameters.length === 0 && <div class="hint">No parameters. Each parameter binds a target signal with a default and constraints.</div>}
+            <div class="cfg-params">
+              {working.parameters.map((p, i) => (
+                <ParamEditor key={i} param={p} allOptions={allOptions()} onOpenSignals={openAll}
+                  onChange={(patch2) => patchParam(i, patch2)} onRemove={() => removeParam(i)} />
+              ))}
+            </div>
+
+            <VersionPanel kind="sets" id={working.id} onReload={reload}
+              onForked={(id) => { reload(); select(id); }}
+              onPromoted={() => select(working.id)}
+              onCompare={showDiff} onError={setError} />
+          </div>
+        )}
+      </div>
+
+      {diff && <DiffModal title={diff.title} onClose={() => setDiff(null)}>
+        <SetDiffTable entries={diff.entries} />
+      </DiffModal>}
+    </div>
+  );
+}
+
+function ParamEditor({ param, allOptions, onOpenSignals, onChange, onRemove }: {
+  param: Parameter;
+  allOptions: SignalOption[];
+  onOpenSignals: () => void;
+  onChange: (p: Partial<Parameter>) => void;
+  onRemove: () => void;
+}) {
+  const ref = param.ds || param.signal ? `${param.ds}:${param.signal}` : '';
+  const isNum = param.type === 'float64' || param.type === 'int64';
+  return (
+    <div class="cfg-param">
+      <div class="cfg-param-row">
+        <div class="cfg-field cfg-field-key">
+          <label>Key</label>
+          <input class="prop-input" value={param.key} onInput={(e) => onChange({ key: (e.target as HTMLInputElement).value })} />
+        </div>
+        <div class="cfg-field cfg-field-label">
+          <label>Label</label>
+          <input class="prop-input" value={param.label ?? ''} placeholder="(optional)"
+            onInput={(e) => onChange({ label: (e.target as HTMLInputElement).value })} />
+        </div>
+        <div class="cfg-field cfg-field-type">
+          <label>Type</label>
+          <select class="prop-select" value={param.type} onChange={(e) => onChange({ type: (e.target as HTMLSelectElement).value as ParamType })}>
+            {PARAM_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+          </select>
+        </div>
+        <button class="cl-mini-btn cfg-param-del" title="Remove parameter" onClick={onRemove}>✕</button>
+      </div>
+
+      <div class="cfg-param-row">
+        <div class="cfg-field cfg-field-target">
+          <label>Target signal</label>
+          <SignalPicker value={ref} options={allOptions} onOpen={onOpenSignals} allowFreeform
+            onChange={(r) => { const s = splitRef(r); onChange({ ds: s.ds, signal: s.signal }); }} />
+        </div>
+        <div class="cfg-field cfg-field-default">
+          <label>Default</label>
+          {param.type === 'bool' ? (
+            <select class="prop-select" value={String(param.default ?? '')}
+              onChange={(e) => { const v = (e.target as HTMLSelectElement).value; onChange({ default: v === '' ? undefined : v === 'true' }); }}>
+              <option value="">(none)</option>
+              <option value="true">true</option>
+              <option value="false">false</option>
+            </select>
+          ) : (
+            <input class="prop-input" type={isNum ? 'number' : 'text'} value={param.default ?? ''}
+              onInput={(e) => onChange({ default: coerceVal((e.target as HTMLInputElement).value, param.type) })} />
+          )}
+        </div>
+        <label class="cfg-mandatory">
+          <input type="checkbox" checked={!!param.mandatory} onChange={(e) => onChange({ mandatory: (e.target as HTMLInputElement).checked })} />
+          Mandatory
+        </label>
+      </div>
+
+      <div class="cfg-param-row">
+        <div class="cfg-field">
+          <label>Group</label>
+          <input class="prop-input" value={param.group ?? ''} placeholder="(optional)"
+            onInput={(e) => onChange({ group: (e.target as HTMLInputElement).value })} />
+        </div>
+        <div class="cfg-field">
+          <label>Unit</label>
+          <input class="prop-input" value={param.unit ?? ''} placeholder="(optional)"
+            onInput={(e) => onChange({ unit: (e.target as HTMLInputElement).value })} />
+        </div>
+        {isNum && (
+          <Fragment>
+            <div class="cfg-field cfg-field-num">
+              <label>Min</label>
+              <input class="prop-input" type="number" value={param.min ?? ''}
+                onInput={(e) => onChange({ min: numOrUndef((e.target as HTMLInputElement).value) })} />
+            </div>
+            <div class="cfg-field cfg-field-num">
+              <label>Max</label>
+              <input class="prop-input" type="number" value={param.max ?? ''}
+                onInput={(e) => onChange({ max: numOrUndef((e.target as HTMLInputElement).value) })} />
+            </div>
+          </Fragment>
+        )}
+        {param.type === 'enum' && (
+          <div class="cfg-field cfg-field-enum">
+            <label>Enum values (comma-separated)</label>
+            <input class="prop-input" value={(param.enumValues ?? []).join(', ')} placeholder="a, b, c"
+              onInput={(e) => onChange({ enumValues: (e.target as HTMLInputElement).value.split(',').map(s => s.trim()).filter(Boolean) })} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Instances manager ─────────────────────────────────────────────────────────
+
+function InstancesManager() {
+  const [instances, setInstances] = useState<Meta[]>([]);
+  const [sets, setSets] = useState<Meta[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [working, setWorking] = useState<ConfigInstance | null>(null);
+  const [boundSet, setBoundSet] = useState<ConfigSet | null>(null);
+  const [dirty, setDirty] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [applyResult, setApplyResult] = useState<ApplyResult | null>(null);
+  const [diff, setDiff] = useState<{ title: string; entries: InstanceDiffEntry[] } | null>(null);
+  const [showNew, setShowNew] = useState(false);
+
+  const reload = useCallback(async () => {
+    try {
+      setInstances((await apiJSON<Meta[]>('/api/v1/config/instances')) ?? []);
+      setSets((await apiJSON<Meta[]>('/api/v1/config/sets')) ?? []);
+    } catch (err) { setError(`Failed to load: ${msg(err)}`); }
+  }, []);
+  useEffect(() => { reload(); }, [reload]);
+
+  async function loadSet(setId: string, setVersion?: number): Promise<ConfigSet | null> {
+    const path = setVersion && setVersion > 0
+      ? `/api/v1/config/sets/${encodeURIComponent(setId)}/versions/${setVersion}`
+      : `/api/v1/config/sets/${encodeURIComponent(setId)}`;
+    return apiJSON<ConfigSet>(path);
+  }
+
+  async function select(id: string) {
+    if (dirty && !confirm('Discard unsaved changes?')) return;
+    setError(null); setApplyResult(null);
+    try {
+      const inst = await apiJSON<ConfigInstance>(`/api/v1/config/instances/${encodeURIComponent(id)}`);
+      const set = await loadSet(inst!.setId, inst!.setVersion);
+      setSelectedId(id);
+      setWorking(inst);
+      setBoundSet(set);
+      setDirty(false);
+    } catch (err) { setError(msg(err)); }
+  }
+
+  async function createInstance(name: string, setId: string) {
+    setBusy(true); setError(null);
+    try {
+      const body = { name, setId, values: {} };
+      const created = await apiJSON<ConfigInstance>('/api/v1/config/instances', jsonPost(body));
+      const set = await loadSet(created!.setId, created!.setVersion);
+      await reload();
+      setSelectedId(created!.id);
+      setWorking(created);
+      setBoundSet(set);
+      setDirty(false);
+      setShowNew(false);
+    } catch (err) { setError(`Create failed: ${msg(err)}`); }
+    finally { setBusy(false); }
+  }
+
+  async function save() {
+    if (!working) return;
+    setBusy(true); setError(null);
+    try {
+      const saved = await apiJSON<ConfigInstance>(`/api/v1/config/instances/${encodeURIComponent(working.id)}`, jsonPut(working));
+      setWorking(saved);
+      setDirty(false);
+      await reload();
+    } catch (err) { setError(`Save failed: ${msg(err)}`); }
+    finally { setBusy(false); }
+  }
+
+  async function remove(id: string) {
+    if (!confirm('Delete this config instance? A server-side copy is kept in trash.')) return;
+    setBusy(true); setError(null);
+    try {
+      await apiJSON(`/api/v1/config/instances/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      if (selectedId === id) { setSelectedId(null); setWorking(null); setBoundSet(null); setDirty(false); }
+      await reload();
+    } catch (err) { setError(`Delete failed: ${msg(err)}`); }
+    finally { setBusy(false); }
+  }
+
+  async function apply() {
+    if (!working) return;
+    if (!confirm('Apply this configuration? Each value is written to its target signal.')) return;
+    setBusy(true); setError(null); setApplyResult(null);
+    try {
+      const res = await apiJSON<ApplyResult>(`/api/v1/config/instances/${encodeURIComponent(working.id)}/apply`, { method: 'POST' });
+      setApplyResult(res);
+    } catch (err) { setError(`Apply failed: ${msg(err)}`); }
+    finally { setBusy(false); }
+  }
+
+  function setValue(key: string, value: any) {
+    if (!working) return;
+    const values = { ...working.values };
+    if (value === undefined) delete values[key];
+    else values[key] = value;
+    setWorking({ ...working, values });
+    setDirty(true);
+  }
+
+  async function showDiff(av: number, bv: number) {
+    if (!working) return;
+    setError(null);
+    try {
+      const q = new URLSearchParams({ a: working.id, av: String(av), b: working.id, bv: String(bv) });
+      const entries = (await apiJSON<InstanceDiffEntry[]>(`/api/v1/config/instances/diff?${q}`)) ?? [];
+      setDiff({ title: `${working.name}: v${av} → v${bv}`, entries });
+    } catch (err) { setError(`Diff failed: ${msg(err)}`); }
+  }
+
+  const setName = (id: string) => sets.find(s => s.id === id)?.name ?? id;
+
+  return (
+    <div class="cl-body">
+      <div class="cl-list">
+        <div class="cl-list-head">
+          <span>Instances</span>
+          <button class="panel-btn" disabled={busy || sets.length === 0} onClick={() => setShowNew(true)}>+ New</button>
+        </div>
+        {sets.length === 0 && <div class="hint cl-list-empty">Create a config set first.</div>}
+        {sets.length > 0 && instances.length === 0 && <div class="hint cl-list-empty">No instances yet.</div>}
+        {instances.map(s => (
+          <div key={s.id} class={`cl-list-item${selectedId === s.id ? ' cl-list-item-active' : ''}`} onClick={() => select(s.id)}>
+            <span class="cl-list-name" title={s.name}>{s.name || '(unnamed)'}</span>
+            <span class="cfg-badge">v{s.version}</span>
+            <button class="cl-mini-btn" title="Delete" onClick={(e) => { e.stopPropagation(); remove(s.id); }}>✕</button>
+          </div>
+        ))}
+      </div>
+
+      <div class="cl-editor-wrap">
+        {error && <div class="cl-error">{error}</div>}
+        {!working && <div class="cl-empty hint">Select an instance on the left, or create a new one.</div>}
+        {working && (
+          <div class="cfg-editor">
+            <div class="cfg-edit-bar">
+              <input class="prop-input cl-name-input" value={working.name} placeholder="Instance name"
+                onInput={(e) => { setWorking({ ...working, name: (e.target as HTMLInputElement).value }); setDirty(true); }} />
+              <span class="cfg-badge">v{working.version}</span>
+              {dirty && <span class="cl-dirty">unsaved</span>}
+              <button class="panel-btn panel-btn-primary" disabled={busy || !dirty} onClick={save}>Save</button>
+              <button class="panel-btn" disabled={busy || dirty} title={dirty ? 'Save before applying' : 'Write values to signals'} onClick={apply}>Apply</button>
+            </div>
+            <div class="hint">Based on set <b>{setName(working.setId)}</b>{working.setVersion ? ` (v${working.setVersion})` : ''}.</div>
+
+            {!boundSet && <div class="cl-error">Bound set could not be loaded.</div>}
+            {boundSet && (
+              <div class="cfg-values">
+                {boundSet.parameters.length === 0 && <div class="hint">The bound set has no parameters.</div>}
+                {boundSet.parameters.map(p => (
+                  <ValueRow key={p.key} param={p} value={working.values[p.key]} onChange={(v) => setValue(p.key, v)} />
+                ))}
+              </div>
+            )}
+
+            {applyResult && <ApplyResultView result={applyResult} />}
+
+            <VersionPanel kind="instances" id={working.id} onReload={reload}
+              onForked={(id) => { reload(); select(id); }}
+              onPromoted={() => select(working.id)}
+              onCompare={showDiff} onError={setError} />
+          </div>
+        )}
+      </div>
+
+      {showNew && <NewInstanceDialog sets={sets} busy={busy} onCancel={() => setShowNew(false)} onCreate={createInstance} />}
+
+      {diff && <DiffModal title={diff.title} onClose={() => setDiff(null)}>
+        <InstanceDiffTable entries={diff.entries} />
+      </DiffModal>}
+    </div>
+  );
+}
+
+function ValueRow({ param, value, onChange }: { param: Parameter; value: any; onChange: (v: any) => void }) {
+  const label = param.label || param.key;
+  const isNum = param.type === 'float64' || param.type === 'int64';
+  const defText = param.default !== undefined && param.default !== null ? String(param.default) : '';
+  return (
+    <div class="cfg-value-row">
+      <div class="cfg-value-label">
+        {param.mandatory && <span class="cfg-req" title="Mandatory">*</span>}
+        <span title={`${param.ds}:${param.signal}`}>{label}</span>
+        {param.unit && <span class="hint cfg-unit">{param.unit}</span>}
+      </div>
+      <div class="cfg-value-input">
+        {param.type === 'bool' ? (
+          <select class="prop-select" value={value === undefined ? '' : String(value)}
+            onChange={(e) => { const v = (e.target as HTMLSelectElement).value; onChange(v === '' ? undefined : v === 'true'); }}>
+            <option value="">{defText ? `default (${defText})` : '(unset)'}</option>
+            <option value="true">true</option>
+            <option value="false">false</option>
+          </select>
+        ) : param.type === 'enum' ? (
+          <select class="prop-select" value={value === undefined ? '' : String(value)}
+            onChange={(e) => { const v = (e.target as HTMLSelectElement).value; onChange(v === '' ? undefined : v); }}>
+            <option value="">{defText ? `default (${defText})` : '(unset)'}</option>
+            {(param.enumValues ?? []).map(ev => <option key={ev} value={ev}>{ev}</option>)}
+          </select>
+        ) : (
+          <input class="prop-input" type={isNum ? 'number' : 'text'}
+            value={value === undefined ? '' : value}
+            placeholder={defText ? `default: ${defText}` : '(unset)'}
+            onInput={(e) => { const raw = (e.target as HTMLInputElement).value; onChange(raw === '' ? undefined : coerceVal(raw, param.type)); }} />
+        )}
+      </div>
+      <span class="cfg-value-target hint" title="Target signal">{param.ds}:{param.signal}</span>
+    </div>
+  );
+}
+
+function NewInstanceDialog({ sets, busy, onCancel, onCreate }: {
+  sets: Meta[]; busy: boolean; onCancel: () => void; onCreate: (name: string, setId: string) => void;
+}) {
+  const [name, setName] = useState('New instance');
+  const [setId, setSetId] = useState(sets[0]?.id ?? '');
+  return (
+    <div class="cl-confirm-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onCancel(); }}>
+      <div class="cl-confirm">
+        <div class="cl-confirm-title">New config instance</div>
+        <div class="cfg-field">
+          <label>Name</label>
+          <input class="prop-input" value={name} autoFocus onInput={(e) => setName((e.target as HTMLInputElement).value)} />
+        </div>
+        <div class="cfg-field">
+          <label>Config set</label>
+          <select class="prop-select" value={setId} onChange={(e) => setSetId((e.target as HTMLSelectElement).value)}>
+            {sets.map(s => <option key={s.id} value={s.id}>{s.name} (v{s.version})</option>)}
+          </select>
+        </div>
+        <div class="cl-confirm-actions">
+          <button class="panel-btn" onClick={onCancel}>Cancel</button>
+          <button class="panel-btn panel-btn-primary" disabled={busy || !setId || !name.trim()}
+            onClick={() => onCreate(name.trim(), setId)}>Create</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ApplyResultView({ result }: { result: ApplyResult }) {
+  return (
+    <div class="cfg-apply-result">
+      <div class="cfg-apply-head">
+        Applied <b>{result.applied}</b>, failed <b class={result.failed ? 'cfg-fail' : ''}>{result.failed}</b>, skipped <b>{result.skipped}</b>
+      </div>
+      <table class="cfg-apply-table">
+        <thead><tr><th>Parameter</th><th>Target</th><th>Value</th><th>Result</th></tr></thead>
+        <tbody>
+          {result.entries.map(e => (
+            <tr key={e.key}>
+              <td>{e.key}</td>
+              <td class="hint">{e.ds}:{e.signal}</td>
+              <td>{e.value !== undefined ? String(e.value) : '—'}</td>
+              <td>
+                {e.skipped ? <span class="hint">skipped</span>
+                  : e.ok ? <span class="cfg-ok">ok</span>
+                  : <span class="cfg-fail" title={e.error}>failed</span>}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ── Versions panel (shared) ───────────────────────────────────────────────────
+
+function VersionPanel({ kind, id, onForked, onPromoted, onCompare, onError }: {
+  kind: 'sets' | 'instances';
+  id: string;
+  onReload: () => void;
+  onForked: (newId: string) => void;
+  onPromoted: () => void;
+  onCompare: (av: number, bv: number) => void;
+  onError: (m: string) => void;
+}) {
+  const [versions, setVersions] = useState<VersionMeta[]>([]);
+  const [open, setOpen] = useState(false);
+  const [a, setA] = useState<number | null>(null);
+  const [b, setB] = useState<number | null>(null);
+
+  const base = `/api/v1/config/${kind}`;
+
+  const load = useCallback(async () => {
+    try {
+      const v = (await apiJSON<VersionMeta[]>(`${base}/${encodeURIComponent(id)}/versions`)) ?? [];
+      setVersions(v);
+      if (v.length >= 2) { setA(v[1].version); setB(v[0].version); }
+      else if (v.length === 1) { setA(v[0].version); setB(v[0].version); }
+    } catch (err) { onError(`Versions failed: ${msg(err)}`); }
+  }, [base, id, onError]);
+
+  useEffect(() => { if (open) load(); }, [open, load]);
+  // Reset when switching object.
+  useEffect(() => { setOpen(false); setVersions([]); }, [id]);
+
+  async function fork(version: number) {
+    try {
+      const obj = await apiJSON<{ id: string }>(`${base}/${encodeURIComponent(id)}/versions/${version}/fork`, { method: 'POST' });
+      onForked(obj!.id);
+    } catch (err) { onError(`Fork failed: ${msg(err)}`); }
+  }
+  async function promote(version: number) {
+    if (!confirm(`Promote v${version} to a new current version?`)) return;
+    try {
+      await apiJSON(`${base}/${encodeURIComponent(id)}/versions/${version}/promote`, { method: 'POST' });
+      onPromoted();
+    } catch (err) { onError(`Promote failed: ${msg(err)}`); }
+  }
+
+  return (
+    <div class="cfg-versions">
+      <button class="cfg-versions-toggle" onClick={() => setOpen(o => !o)}>
+        {open ? '▾' : '▸'} Version history
+      </button>
+      {open && (
+        <div class="cfg-versions-body">
+          {versions.length === 0 && <div class="hint">No versions.</div>}
+          {versions.map(v => (
+            <div key={v.version} class={`cfg-version-row${v.current ? ' cfg-version-current' : ''}`}>
+              <span class="cfg-version-num">v{v.version}{v.current && <span class="cfg-badge">current</span>}</span>
+              <span class="cfg-version-tag hint" title={v.tag}>{v.tag || ''}</span>
+              <span class="cfg-version-time hint">{fmtTime(v.savedAt)}</span>
+              <button class="cl-mini-btn" title="Fork into a new object" onClick={() => fork(v.version)}>fork</button>
+              {!v.current && <button class="cl-mini-btn" title="Promote to current" onClick={() => promote(v.version)}>promote</button>}
+            </div>
+          ))}
+          {versions.length >= 2 && (
+            <div class="cfg-compare">
+              <span class="hint">Compare</span>
+              <select class="prop-select" value={String(a ?? '')} onChange={(e) => setA(Number((e.target as HTMLSelectElement).value))}>
+                {versions.map(v => <option key={v.version} value={v.version}>v{v.version}</option>)}
+              </select>
+              <span>→</span>
+              <select class="prop-select" value={String(b ?? '')} onChange={(e) => setB(Number((e.target as HTMLSelectElement).value))}>
+                {versions.map(v => <option key={v.version} value={v.version}>v{v.version}</option>)}
+              </select>
+              <button class="panel-btn" disabled={a === null || b === null} onClick={() => onCompare(a!, b!)}>Diff</button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Diff views ────────────────────────────────────────────────────────────────
+
+function DiffModal({ title, onClose, children }: { title: string; onClose: () => void; children: any }) {
+  return (
+    <div class="cl-confirm-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div class="cl-confirm cfg-diff-modal">
+        <div class="cfg-diff-head">
+          <span class="cl-confirm-title">Diff — {title}</span>
+          <button class="panel-btn" onClick={onClose}>Close</button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function paramSummary(p?: Parameter): string {
+  if (!p) return '—';
+  const parts = [`${p.ds}:${p.signal}`, p.type];
+  if (p.default !== undefined) parts.push(`default=${p.default}`);
+  if (p.mandatory) parts.push('mandatory');
+  if (p.min !== undefined) parts.push(`min=${p.min}`);
+  if (p.max !== undefined) parts.push(`max=${p.max}`);
+  return parts.join(', ');
+}
+
+function SetDiffTable({ entries }: { entries: SetDiffEntry[] }) {
+  if (entries.length === 0) return <div class="hint">No parameters.</div>;
+  return (
+    <table class="cfg-diff-table">
+      <thead><tr><th>Parameter</th><th>Left</th><th>Right</th></tr></thead>
+      <tbody>
+        {entries.map(e => (
+          <tr key={e.key} class={`cfg-diff-${e.status}`}>
+            <td>{e.key} <span class="cfg-diff-status">{e.status}</span></td>
+            <td>{paramSummary(e.left)}</td>
+            <td>{paramSummary(e.right)}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function InstanceDiffTable({ entries }: { entries: InstanceDiffEntry[] }) {
+  if (entries.length === 0) return <div class="hint">No values.</div>;
+  return (
+    <table class="cfg-diff-table">
+      <thead><tr><th>Parameter</th><th>Left</th><th>Right</th></tr></thead>
+      <tbody>
+        {entries.map(e => (
+          <tr key={e.key} class={`cfg-diff-${e.status}`}>
+            <td>{e.key} <span class="cfg-diff-status">{e.status}</span></td>
+            <td>{e.left !== undefined ? String(e.left) : '—'}</td>
+            <td>{e.right !== undefined ? String(e.right) : '—'}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+// ── small helpers ─────────────────────────────────────────────────────────────
+
+function msg(err: unknown): string { return err instanceof Error ? err.message : String(err); }
+function jsonPost(body: any): RequestInit { return { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }; }
+function jsonPut(body: any): RequestInit { return { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }; }
+function numOrUndef(v: string): number | undefined { if (v.trim() === '') return undefined; const n = Number(v); return isNaN(n) ? undefined : n; }
+function coerceVal(v: string, type: ParamType): any {
+  if (type === 'float64' || type === 'int64') { const n = Number(v); return isNaN(n) ? v : n; }
+  return v;
+}

web/src/ViewMode.tsx

@@ -11,6 +11,7 @@ import HelpModal from './HelpModal';
 import ZoomControl from './ZoomControl';
 import ControlLogicEditor from './ControlLogicEditor';
 import AuditViewer from './AuditViewer';
+import ConfigManager from './ConfigManager';
 
 interface Props {
   onEdit?: (iface?: Interface) => void;
@@ -34,6 +35,7 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
   const [showTimeNav, setShowTimeNav] = useState(false);
   const [showControlLogic, setShowControlLogic] = useState(false);
   const [showAudit, setShowAudit] = useState(false);
+  const [showConfig, setShowConfig] = useState(false);
   const [leftW, setLeftW] = useState(220);
   const [listCollapsed, setListCollapsed] = useState(false);
   const me = useAuth();
@@ -179,6 +181,15 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
               🛡 Audit
             </button>
           )}
+          {writable && (
+            <button
+              class="toolbar-btn"
+              onClick={() => setShowConfig(true)}
+              title="Open configuration manager"
+            >
+              🗂 Config
+            </button>
+          )}
           {writable && (
             <button
               class="btn-edit"
@@ -269,6 +280,9 @@ export default function ViewMode({ onEdit, initialInterface, onView }: Props) {
       {showAudit && (
         <AuditViewer onClose={() => setShowAudit(false)} />
       )}
+      {showConfig && (
+        <ConfigManager onClose={() => setShowConfig(false)} />
+      )}
     </div>
   );
 }

web/src/styles.css

@@ -3858,3 +3858,285 @@ kbd {
   background: #2563eb;
 }
 .panel-btn-primary:hover { background: #3b82f6; }
+
+/* ── Configuration manager ─────────────────────────────────────────────── */
+.cfg-tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-left: 0.5rem;
+}
+.cfg-tab {
+  background: transparent;
+  border: 1px solid transparent;
+  color: #94a3b8;
+  font-size: 0.82rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.cfg-tab:hover { color: #e2e8f0; background: #232a3a; }
+.cfg-tab-active {
+  color: #e2e8f0;
+  background: #2d3748;
+  border-color: #3d4a63;
+}
+.cfg-badge {
+  display: inline-block;
+  min-width: 1.1rem;
+  text-align: center;
+  font-size: 0.7rem;
+  color: #94a3b8;
+  background: #232a3a;
+  border-radius: 8px;
+  padding: 0 0.35rem;
+  margin-left: 0.4rem;
+}
+
+.cfg-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 0.75rem 1rem;
+  overflow-y: auto;
+  height: 100%;
+}
+.cfg-edit-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.cfg-edit-bar .panel-btn { flex: 0 0 auto; }
+
+.cfg-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  padding-bottom: 0.25rem;
+  border-bottom: 1px solid #2d3748;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #cbd5e1;
+}
+.cfg-section-head .panel-btn { flex: 0 0 auto; }
+
+.cfg-params {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cfg-param {
+  background: #151a26;
+  border: 1px solid #232a3a;
+  border-radius: 6px;
+  padding: 0.5rem;
+  position: relative;
+}
+.cfg-param-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: flex-end;
+}
+.cfg-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+.cfg-field > label {
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: #64748b;
+}
+.cfg-field-key { width: 8rem; }
+.cfg-field-label { flex: 1; min-width: 8rem; }
+.cfg-field-type { width: 7rem; }
+.cfg-field-target { flex: 2; min-width: 12rem; }
+.cfg-field-default { width: 8rem; }
+.cfg-field-enum { flex: 1; min-width: 10rem; }
+.cfg-field-num { width: 6rem; }
+
+.cfg-mandatory {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.75rem;
+  color: #94a3b8;
+  white-space: nowrap;
+  padding-bottom: 0.25rem;
+}
+.cfg-param-del {
+  background: transparent;
+  border: none;
+  color: #64748b;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0 0.25rem;
+}
+.cfg-param-del:hover { color: #f87171; }
+
+.cfg-unit {
+  font-size: 0.72rem;
+  color: #64748b;
+  margin-left: 0.25rem;
+}
+
+/* ── Instance values ───────────────────────────────────────────────────── */
+.cfg-values {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.cfg-value-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.3rem 0.4rem;
+  border-radius: 5px;
+}
+.cfg-value-row:hover { background: #151a26; }
+.cfg-value-label {
+  width: 14rem;
+  flex: 0 0 auto;
+  font-size: 0.82rem;
+  color: #cbd5e1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cfg-req { color: #f87171; margin-left: 0.15rem; }
+.cfg-value-input { width: 10rem; flex: 0 0 auto; }
+.cfg-value-target {
+  font-size: 0.72rem;
+  color: #64748b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Apply result ──────────────────────────────────────────────────────── */
+.cfg-apply-result {
+  border: 1px solid #232a3a;
+  border-radius: 6px;
+  margin-top: 0.5rem;
+  overflow: hidden;
+}
+.cfg-apply-head {
+  display: flex;
+  gap: 1rem;
+  padding: 0.4rem 0.6rem;
+  background: #151a26;
+  font-size: 0.8rem;
+  color: #cbd5e1;
+}
+.cfg-apply-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.78rem;
+}
+.cfg-apply-table th,
+.cfg-apply-table td {
+  text-align: left;
+  padding: 0.25rem 0.6rem;
+  border-top: 1px solid #1e2433;
+}
+.cfg-apply-table th { color: #64748b; font-weight: 500; }
+.cfg-ok { color: #4ade80; }
+.cfg-fail { color: #f87171; }
+
+/* ── Version panel ─────────────────────────────────────────────────────── */
+.cfg-versions {
+  border-top: 1px solid #2d3748;
+  margin-top: 0.5rem;
+  padding-top: 0.4rem;
+}
+.cfg-versions-toggle {
+  background: transparent;
+  border: none;
+  color: #94a3b8;
+  font-size: 0.8rem;
+  cursor: pointer;
+  padding: 0.2rem 0;
+}
+.cfg-versions-toggle:hover { color: #e2e8f0; }
+.cfg-versions-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.4rem;
+}
+.cfg-version-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.25rem 0.4rem;
+  border: 1px solid #232a3a;
+  border-radius: 5px;
+  font-size: 0.78rem;
+}
+.cfg-version-current {
+  border-color: #2563eb;
+  background: #15203a;
+}
+.cfg-version-num { font-weight: 600; color: #cbd5e1; min-width: 3rem; }
+.cfg-version-tag { color: #94a3b8; flex: 1; }
+.cfg-version-time { color: #64748b; font-size: 0.72rem; }
+.cfg-compare {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.4rem;
+  font-size: 0.78rem;
+  color: #94a3b8;
+}
+
+/* ── Diff modal ────────────────────────────────────────────────────────── */
+.cfg-diff-modal {
+  background: #1a1f2e;
+  border: 1px solid #2d3748;
+  border-radius: 10px;
+  width: min(760px, 92vw);
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
+}
+.cfg-diff-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 1rem;
+  border-bottom: 1px solid #2d3748;
+  font-size: 0.85rem;
+  color: #e2e8f0;
+}
+.cfg-diff-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.78rem;
+  overflow-y: auto;
+}
+.cfg-diff-table th,
+.cfg-diff-table td {
+  text-align: left;
+  padding: 0.3rem 0.7rem;
+  border-top: 1px solid #1e2433;
+  vertical-align: top;
+}
+.cfg-diff-table th { color: #64748b; font-weight: 500; }
+.cfg-diff-status {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.cfg-diff-added { background: rgba(34, 197, 94, 0.08); }
+.cfg-diff-added .cfg-diff-status { color: #4ade80; }
+.cfg-diff-removed { background: rgba(239, 68, 68, 0.08); }
+.cfg-diff-removed .cfg-diff-status { color: #f87171; }
+.cfg-diff-changed { background: rgba(234, 179, 8, 0.08); }
+.cfg-diff-changed .cfg-diff-status { color: #facc15; }
+.cfg-diff-unchanged .cfg-diff-status { color: #64748b; }