@ddtcorex/dsh-maestro-config 0.3.0 → 0.4.0

package/src/client/maestro-card.jsx

@@ -1,976 +0,0 @@
-// Verbatim port of the proven Maestro Settings card design: fields and
-// styles preserved (--dsw-alias-* tokens, masked SecretInput, sectioned
-// layout, QR + model selector + project mappings). The RPC channel now
-// resolves to the granular dsh-maestro-review settings-rpc row (see api.ts).
-// Kept byte-faithful by design; typed entry lives in index.tsx.
-/* @ts-nocheck */
-import { createElement as h, useEffect, useRef, useState } from 'react'
-import QRCode from 'qrcode'
-import { MAESTRO_ENDPOINTS } from './api.js'
-import { generateWebhookSecret, gitlabWebhookUrl } from './webhook-secret.js'
-
-// Styling mirrors the host settings cards (ui-settings-plugins fields.module.css
-// / ModelsSection.module.css) through the shared --dsw-alias-* tokens, so the
-// card follows the active light/dark theme instead of hard-coding colors.
-const inputStyle = {
-  height: 34,
-  padding: '0 12px',
-  border: '1px solid var(--dsw-alias-border-l2)',
-  borderRadius: 8,
-  background: 'var(--dsw-alias-bg-layer-3)',
-  font: 'inherit',
-  fontSize: 13,
-  color: 'var(--dsw-alias-label-primary)',
-  width: '100%',
-  boxSizing: 'border-box',
-}
-
-const fieldLabelStyle = {
-  display: 'block',
-  fontSize: 12,
-  lineHeight: 1.5,
-  color: 'var(--dsw-alias-label-secondary)',
-  margin: '10px 0 4px',
-}
-
-const secondaryButtonStyle = {
-  height: 32,
-  padding: '0 14px',
-  borderRadius: 16,
-  border: '1px solid var(--dsw-alias-border-l2)',
-  background: 'transparent',
-  color: 'var(--dsw-alias-label-primary)',
-  font: 'inherit',
-  fontSize: 13,
-  cursor: 'pointer',
-  flex: 'none',
-}
-
-const primaryButtonStyle = {
-  ...secondaryButtonStyle,
-  border: 'none',
-  background: 'var(--dsw-alias-button-primary-fill)',
-  color: 'var(--dsw-alias-label-primary-foreground)',
-}
-
-const captionStyle = {
-  fontSize: 12,
-  lineHeight: 1.5,
-  margin: '4px 0',
-  color: 'var(--dsw-alias-label-secondary)',
-}
-
-const sectionStyle = {
-  marginTop: 20,
-  paddingTop: 16,
-  borderTop: '1px solid var(--dsw-alias-border-l2)',
-}
-
-const headingStyle = {
-  margin: '0 0 6px',
-  fontSize: 13,
-  fontWeight: 600,
-  color: 'var(--dsw-alias-label-primary)',
-}
-
-const errorStyle = {
-  color: 'var(--dsw-alias-state-error-primary)',
-  fontSize: 12,
-  margin: '8px 0 0',
-}
-
-const codeStyle = {
-  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
-  fontSize: 12,
-  color: 'var(--dsw-alias-label-primary)',
-  wordBreak: 'break-all',
-}
-
-const textareaStyle = {
-  ...inputStyle,
-  height: 120,
-  padding: '8px 12px',
-  resize: 'vertical',
-}
-
-const tabBarStyle = {
-  display: 'flex',
-  gap: 8,
-  borderBottom: '1px solid var(--dsw-alias-border-l2)',
-  marginBottom: 16,
-}
-
-const tabButtonStyle = (active) => ({
-  padding: '8px 14px',
-  border: 'none',
-  borderBottom: active ? '2px solid var(--dsw-alias-button-primary-fill)' : '2px solid transparent',
-  background: 'transparent',
-  color: active ? 'var(--dsw-alias-label-primary)' : 'var(--dsw-alias-label-secondary)',
-  font: 'inherit',
-  fontSize: 13,
-  fontWeight: active ? 600 : 400,
-  cursor: 'pointer',
-})
-
-/** QR code centered in a light tile with an even scanner-friendly quiet zone. */
-function QrImage({ url, size = 104 }) {
-  const [dataUrl, setDataUrl] = useState(null)
-  useEffect(() => {
-    let live = true
-    QRCode.toDataURL(url, { margin: 0, width: size * 2 })
-      .then((d) => { if (live) setDataUrl(d) })
-      .catch(() => {})
-    return () => { live = false }
-  }, [url, size])
-  return h('div', {
-    style: {
-      background: '#ffffff',
-      borderRadius: 10,
-      boxSizing: 'border-box',
-      width: size + 20,
-      height: size + 20,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      lineHeight: 0,
-      flex: 'none',
-      alignSelf: 'flex-start',
-    },
-  },
-  dataUrl === null
-    ? h('div', { style: { width: size, height: size, background: 'var(--dsw-alias-bg-skeleton)', borderRadius: 4 } })
-    : h('img', { src: dataUrl, alt: url, width: size, height: size, style: { display: 'block' } }),
-  )
-}
-
-function NamedTunnelSetupNote() {
-  return h('div', { style: captionStyle },
-    h('p', { style: { ...captionStyle, marginBottom: 4 } }, 'Named tunnel needs a one-time manual setup (requires your own Cloudflare account — cannot be automated):'),
-    h('ol', { style: { margin: '4px 0', paddingLeft: 20 } },
-      h('li', null, 'cloudflared tunnel login'),
-      h('li', null, 'cloudflared tunnel create dsh-maestro-webhook'),
-      h('li', null, 'cloudflared tunnel route dns dsh-maestro-webhook <your-hostname>'),
-      h('li', null, 'Paste the printed Tunnel ID, the credentials file path (~/.cloudflared/<id>.json), and the hostname below.'),
-    ),
-  )
-}
-
-function ReviewModelSelector({ value, catalog, fallbackValue, fallbackLabel, onChange, label }) {
-  const groups = catalog?.groups ?? []
-  const providers = groups.map(g => g.provider)
-  const selectedProvider = value?.provider ?? ''
-  const providerGroup = groups.find(g => g.provider === selectedProvider)
-  const models = providerGroup?.models ?? []
-  const selectedEffort = value?.reasoningEffort ?? ''
-  const [open, setOpen] = useState(false)
-  const [pane, setPane] = useState('root')
-  const rootRef = useRef(null)
-  useEffect(() => {
-    if (!open) return
-    const onDown = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) { setOpen(false); setPane('root') } }
-    const onKey = (e) => { if (e.key === 'Escape') { setOpen(false); setPane('root') } }
-    document.addEventListener('mousedown', onDown)
-    document.addEventListener('keydown', onKey)
-    return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey) }
-  }, [open])
-  const getModelId = (m) => typeof m === 'string' ? m : m.id
-  const getModelName = (m) => typeof m === 'string' ? m : (m.name ?? m.id)
-  const selectedModelInfo = (() => {
-    if (!selectedProvider || !value?.model) return null
-    const raw = (providerGroup?.models ?? []).find(mm => getModelId(mm) === value.model)
-    if (raw === undefined) return null
-    if (typeof raw === 'string') return { id: raw, supportsReasoning: false, reasoningEfforts: [] }
-    return raw
-  })()
-  const supportsReasoning = (() => {
-    if (!selectedModelInfo) return false
-    if (typeof selectedModelInfo.supportsReasoning === 'boolean') return selectedModelInfo.supportsReasoning
-    const efforts = selectedModelInfo.reasoningEfforts ?? selectedModelInfo.reasoning?.efforts?.map(e => e.id) ?? []
-    return efforts.filter(e => e !== 'off').length > 0
-  })()
-  const availableEfforts = (() => {
-    if (!supportsReasoning) return []
-    const efforts = selectedModelInfo?.reasoningEfforts ?? selectedModelInfo?.reasoning?.efforts?.map(e => e.id) ?? []
-    const filtered = efforts.filter(e => e !== 'off' && e !== '')
-    if (filtered.length > 0) return filtered
-    return ['low', 'medium', 'high']
-  })()
-  const warning = selectedEffort !== '' && !supportsReasoning && selectedModelInfo !== null
-    ? `⚠️ This model does not support reasoning effort "${selectedEffort}" — reviews will fail. Clear effort or choose a reasoning-capable model.`
-    : null
-  const update = (field, newVal) => {
-    if (newVal === '' && field === 'provider') { onChange(null); setOpen(false); setPane('root'); return }
-    const next = { provider: value?.provider ?? '', model: value?.model ?? '', ...(value?.reasoningEffort ? { reasoningEffort: value.reasoningEffort } : {}) }
-    if (field === 'provider') { const g = groups.find(x => x.provider === newVal); const first = g?.models[0]; next.provider = newVal; next.model = first !== undefined ? getModelId(first) : '' }
-    else if (field === 'model') { next.model = newVal }
-    else if (field === 'reasoningEffort') { if (newVal === '') delete next.reasoningEffort; else next.reasoningEffort = newVal }
-    if (!next.provider || !next.model) { onChange(null) } else { onChange(next) }
-  }
-  const effectiveFallback = fallbackValue !== undefined ? fallbackValue : (catalog?.current ?? null)
-  const effectiveFallbackLabel = fallbackLabel ?? 'Use DSH default'
-  const triggerLabel = value
-    ? `${value.provider} / ${value.model}${value.reasoningEffort ? ` · ${value.reasoningEffort}` : ''}`
-    : effectiveFallback
-      ? `${effectiveFallbackLabel} · ${effectiveFallback.provider}/${effectiveFallback.model}${effectiveFallback.reasoningEffort ? ` · ${effectiveFallback.reasoningEffort}` : ''}`
-      : effectiveFallbackLabel
-  const triggerStyle = {
-    height: 32,
-    padding: '0 12px 0 14px',
-    borderRadius: 20,
-    border: '1px solid var(--dsw-alias-border-l2)',
-    background: 'var(--dsw-alias-bg-layer-2)',
-    color: 'var(--dsw-alias-label-primary)',
-    font: 'inherit',
-    fontSize: 13,
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: 8,
-    cursor: 'pointer',
-    maxWidth: 320,
-    whiteSpace: 'nowrap',
-  }
-  const menuStyle = {
-    position: 'absolute',
-    top: 'calc(100% + 8px)',
-    left: 0,
-    minWidth: 300,
-    maxWidth: 360,
-    background: 'var(--dsw-alias-bg-layer-1)',
-    border: '1px solid var(--dsw-alias-border-l2)',
-    borderRadius: 12,
-    boxShadow: '0 8 24px rgba(0,0,0,.12)',
-    zIndex: 20,
-    padding: 6,
-  }
-  const rowStyle = {
-    width: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: 12,
-    padding: '9px 10px',
-    borderRadius: 8,
-    border: 'none',
-    background: 'transparent',
-    color: 'var(--dsw-alias-label-primary)',
-    font: 'inherit',
-    fontSize: 13,
-    cursor: 'pointer',
-    textAlign: 'left',
-  }
-  const check = (active) => active ? h('svg', { width: 16, height: 16, viewBox: '0 0 16 16', style: { flex: 'none' } }, h('path', { d: 'M3.5 8.2l2.8 2.8L12.5 4.8', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' })) : h('span', { style: { width: 16, flex: 'none' } })
-  const chevronDown = h('svg', { width: 14, height: 14, viewBox: '0 0 14 14', style: { flex: 'none', opacity: 0.7 } }, h('path', { d: 'M3.5 5L7 8.5L10.5 5', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' }))
-  const chevronRight = h('svg', { width: 14, height: 14, viewBox: '0 0 14 14', style: { flex: 'none', opacity: 0.6 } }, h('path', { d: 'M5 3.5L8.5 7L5 10.5', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' }))
-  const effortLabel = selectedEffort === '' ? 'Default effort' : selectedEffort
-  const modelLabel = selectedProvider === '' ? 'Select model' : (value?.model ?? 'Select model')
-  return h('div', { ref: rootRef, style: { position: 'relative', display: 'inline-block', maxWidth: '100%' } },
-    label && h('span', { style: fieldLabelStyle }, label),
-    h('button', { type: 'button', style: triggerStyle, onClick: () => { setOpen(v => !v); setPane('root') }, 'aria-expanded': open, 'aria-haspopup': 'menu', title: triggerLabel },
-      h('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, triggerLabel),
-      chevronDown,
-    ),
-    open && h('div', { style: menuStyle, role: 'menu' },
-      pane === 'root' && h('div', null,
-        h('button', { type: 'button', style: { ...rowStyle, background: !value ? 'var(--dsw-alias-bg-layer-2)' : 'transparent' }, onClick: () => { onChange(null); setOpen(false) } },
-          h('span', null, effectiveFallbackLabel),
-          check(!value),
-        ),
-        h('div', { style: { height: 1, background: 'var(--dsw-alias-border-l2)', margin: '6px 2px' } }),
-        h('button', { type: 'button', style: rowStyle, onClick: () => setPane('model') },
-          h('span', null, 'Model'),
-          h('span', { style: { display: 'flex', alignItems: 'center', gap: 8, color: 'var(--dsw-alias-label-secondary)', maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, h('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis' } }, modelLabel), chevronRight),
-        ),
-        h('button', { type: 'button', style: rowStyle, onClick: () => setPane('effort') },
-          h('span', null, 'Effort'),
-          h('span', { style: { display: 'flex', alignItems: 'center', gap: 8, color: 'var(--dsw-alias-label-secondary)' } }, effortLabel, chevronRight),
-        ),
-        value && h('p', { style: { ...captionStyle, margin: '8px 4px 2px' } }, `Selected: ${value.provider} / ${value.model}${value.reasoningEffort ? ` (${value.reasoningEffort})` : ''}`),
-        !value && effectiveFallback && h('p', { style: { ...captionStyle, margin: '8px 4px 2px' } }, `${effectiveFallbackLabel === 'Use Global' ? 'Using Global' : 'Using DSH default'}: ${effectiveFallback.provider} / ${effectiveFallback.model}${effectiveFallback.reasoningEffort ? ` (${effectiveFallback.reasoningEffort})` : ''}`),
-        warning && h('p', { style: { ...captionStyle, margin: '4px 4px 2px', color: 'var(--dsw-alias-state-error-primary)' } }, warning),
-      ),
-      pane === 'model' && h('div', null,
-        h('button', { type: 'button', style: { ...rowStyle, color: 'var(--dsw-alias-label-secondary)' }, onClick: () => setPane('root') }, h('span', null, '← Back'), h('span', { style: { fontSize: 12 } }, 'Model')),
-        h('div', { style: { maxHeight: 260, overflowY: 'auto', marginTop: 4 } },
-          providers.length === 0 ? h('p', { style: captionStyle }, 'No providers') :
-          providers.map(p => {
-            const g = groups.find(x => x.provider === p)
-            const ms = g?.models ?? []
-            return h('div', { key: p, style: { marginBottom: 8 } },
-              h('div', { style: { fontSize: 11, fontWeight: 600, color: 'var(--dsw-alias-label-secondary)', padding: '6px 10px 2px', textTransform: 'uppercase', letterSpacing: 0.4, display: 'flex', alignItems: 'center', gap: 6 } }, h('span', { style: { width: 6, height: 6, borderRadius: 3, background: 'var(--dsw-alias-border-l2)', flex: 'none' } }), g?.name ?? p),
-              ms.length === 0 ? h('p', { style: { ...captionStyle, padding: '2px 10px 2px 28px' } }, 'No models') :
-              h('div', { style: { marginLeft: 12, borderLeft: '1px solid var(--dsw-alias-border-l2)', paddingLeft: 6, display: 'flex', flexDirection: 'column', gap: 2 } },
-                ms.map(m => {
-                  const mid = getModelId(m)
-                  const mname = getModelName(m)
-                  const active = value?.provider === p && value?.model === mid
-                  return h('button', { key: mid, type: 'button', style: { ...rowStyle, paddingLeft: 10, background: active ? 'var(--dsw-alias-bg-layer-2)' : 'transparent' }, onClick: () => { update('model', mid); if (value?.provider !== p) update('provider', p); else { const next = { provider: p, model: mid, ...(selectedEffort ? { reasoningEffort: selectedEffort } : {}) }; onChange(next); setPane('root') } } }, h('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis' } }, mname), check(active))
-                })),
-            )
-          }),
-        ),
-      ),
-      pane === 'effort' && h('div', null,
-        h('button', { type: 'button', style: { ...rowStyle, color: 'var(--dsw-alias-label-secondary)' }, onClick: () => setPane('root') }, h('span', null, '← Back'), h('span', { style: { fontSize: 12 } }, 'Effort')),
-        selectedModelInfo === null ? h('p', { style: { ...captionStyle, margin: '8px 4px 2px' } }, 'Select a model first to configure effort.') :
-        !supportsReasoning ? h('div', null,
-          h('p', { style: { ...captionStyle, margin: '8px 4px 6px' } }, 'This model does not support reasoning effort — using provider default'),
-          h('div', { style: { marginTop: 4 } },
-            [{ id: '', label: 'Default effort' }].map(e => h('button', { key: e.id || 'default', type: 'button', style: { ...rowStyle, background: selectedEffort === e.id ? 'var(--dsw-alias-bg-layer-2)' : 'transparent' }, onClick: () => { update('reasoningEffort', e.id); setPane('root') } }, h('span', null, e.label), check(selectedEffort === e.id))),
-          ),
-          warning && h('p', { style: { ...captionStyle, margin: '8px 4px 2px', color: 'var(--dsw-alias-state-error-primary)' } }, warning),
-        ) :
-        h('div', null,
-          h('div', { style: { marginTop: 4 } },
-            [{ id: '', label: 'Default effort' }, ...availableEfforts.map(id => ({ id, label: id }))].map(e => h('button', { key: e.id || 'default', type: 'button', style: { ...rowStyle, background: selectedEffort === e.id ? 'var(--dsw-alias-bg-layer-2)' : 'transparent' }, onClick: () => { update('reasoningEffort', e.id); setPane('root') } }, h('span', null, e.label), check(selectedEffort === e.id))),
-          ),
-          warning && h('p', { style: { ...captionStyle, margin: '8px 4px 2px', color: 'var(--dsw-alias-state-error-primary)' } }, warning),
-        ),
-      ),
-    ),
-  )
-}
-
-function ProjectMappingsEditor({ mappings, onChange, catalog, globalReviewModel }) {
-  const rows = mappings.length > 0 ? mappings : [{ projectPath: '', localRepoPath: '', reviewProfile: 'magento2' }]
-  const updateRow = (index, field, value) => {
-    const next = rows.map((row, i) => (i === index ? { ...row, [field]: value } : row))
-    onChange(next.filter(r => r.projectPath !== '' || r.localRepoPath !== ''))
-  }
-  const removeRow = (index) => onChange(rows.filter((_, i) => i !== index))
-  const addRow = () => onChange([...rows, { projectPath: '', localRepoPath: '', reviewProfile: 'magento2' }])
-  return h('div', null,
-    h('span', { style: fieldLabelStyle }, 'Tracked projects (GitLab path → local repo checkout → review profile → review model override)'),
-    rows.map((row, i) => h('div', { key: i, 'data-maestro-mapping-row': '', style: { display: 'flex', gap: 8, marginBottom: 8, alignItems: 'center', flexWrap: 'wrap' } },
-      h('input', { placeholder: 'group/project', style: { ...inputStyle, flex: '1 1 120px' }, value: row.projectPath, onChange: e => updateRow(i, 'projectPath', e.target.value) }),
-      h('input', { placeholder: '/path/to/local/clone', style: { ...inputStyle, flex: '1 1 140px' }, value: row.localRepoPath, onChange: e => updateRow(i, 'localRepoPath', e.target.value) }),
-      h('select', { style: { ...inputStyle, flex: '0 0 130px' }, value: row.reviewProfile ?? 'magento2', onChange: e => updateRow(i, 'reviewProfile', e.target.value) },
-        h('option', { value: 'magento2' }, 'Magento 2'),
-        h('option', { value: 'generic' }, 'Generic'),
-      ),
-      h('div', { style: { flex: '0 0 auto' } },
-        h(ReviewModelSelector, {
-          value: row.reviewModel ?? null,
-          catalog,
-          fallbackValue: globalReviewModel ?? catalog?.current ?? null,
-          fallbackLabel: globalReviewModel ? 'Use Global' : 'Use DSH default',
-          onChange: v => updateRow(i, 'reviewModel', v),
-          label: null,
-        }),
-      ),
-      h('button', { onClick: () => removeRow(i), style: secondaryButtonStyle, title: 'Remove mapping' }, '✕'),
-    )),
-    h('button', { onClick: addRow, style: secondaryButtonStyle }, '+ Add mapping'),
-  )
-}
-
-/**
- * Password field for a stored secret the server never echoes back
- * (`getConfig` masks secrets). Empty by default; a typed value saves on blur,
- * an untouched field keeps the stored secret, and Clear writes '' to erase it.
- */
-function SecretInput({ label, placeholder, hasSaved, onSave }) {
-  const [draft, setDraft] = useState('')
-  const clear = () => { setDraft(''); onSave('') }
-  return h('div', null,
-    h('label', { style: fieldLabelStyle }, label),
-    h('div', { style: { display: 'flex', gap: 8 } },
-      h('input', {
-        placeholder: hasSaved === true ? 'saved — leave blank to keep' : placeholder,
-        type: 'password',
-        autoComplete: 'off',
-        style: inputStyle,
-        value: draft,
-        onChange: e => setDraft(e.target.value),
-        onBlur: () => { if (draft !== '') onSave(draft) },
-      }),
-      hasSaved === true && h('button', { type: 'button', style: secondaryButtonStyle, onClick: clear }, 'Clear'),
-    ),
-  )
-}
-
-/** Simple checked/unchecked toggle bound to a boolean settings key. */
-function ToggleField({ label, caption, checked, onChange }) {
-  return h('label', { style: { display: 'flex', alignItems: 'flex-start', gap: 8, margin: '8px 0', cursor: 'pointer' } },
-    h('input', { type: 'checkbox', checked: checked === true, onChange: e => onChange(e.target.checked), style: { marginTop: 3 } }),
-    h('span', null,
-      h('div', { style: { fontSize: 13 } }, label),
-      caption != null && h('div', { style: captionStyle }, caption),
-    ),
-  )
-}
-
-/** One selectable LAN address chip + the QR of the currently selected URL. */
-function LanAccess({ proxyStatus, lanPin }) {
-  const urls = proxyStatus?.lanUrls ?? []
-  const [selected, setSelected] = useState(0)
-  const index = Math.min(selected, Math.max(urls.length - 1, 0))
-  if (!proxyStatus?.running) {
-    return h('p', { style: errorStyle }, proxyStatus?.errorMessage ?? 'Proxy not running')
-  }
-  return h('div', null,
-    h('p', { style: captionStyle }, lanPin?.enabled === true
-      ? 'Open this full DSH UI from any device on your network — visitors enter the LAN PIN below.'
-      : 'Open this full DSH UI from any device on your network — no PIN needed.'),
-    urls.length > 0 && h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 } },
-      urls.map((url, i) => h('button', {
-        key: url,
-        onClick: () => setSelected(i),
-        style: {
-          ...secondaryButtonStyle,
-          height: 26,
-          padding: '0 10px',
-          fontSize: 12,
-          borderRadius: 13,
-          ...(i === index
-            ? { background: 'var(--dsw-alias-button-primary-fill)', borderColor: 'transparent', color: 'var(--dsw-alias-label-primary-foreground)' }
-            : {}),
-        },
-      }, url.replace(/^http:\/\//, ''))),
-    ),
-    urls.length > 0 && h('div', { style: { display: 'flex', gap: 14, alignItems: 'center' } },
-      h(QrImage, { url: urls[index], size: 116 }),
-      h('div', null,
-        h('div', { style: codeStyle }, urls[index]),
-        h('p', { style: captionStyle }, 'Scan with a phone connected to the same network.'),
-      ),
-    ),
-    lanPin !== null && h(LanPinRow, { lanPin }),
-  )
-}
-
-/** Opt-in LAN PIN: off keeps the LAN open; on shows the PIN with Show/Rotate. */
-function LanPinRow({ lanPin }) {
-  return h('div', { style: { marginTop: 12 } },
-    h('label', { style: { display: 'flex', gap: 8, alignItems: 'center', cursor: 'pointer' } },
-      h('input', {
-        type: 'checkbox',
-        checked: lanPin.enabled,
-        onChange: e => lanPin.onToggle(e.target.checked),
-        style: { width: 15, height: 15, accentColor: 'var(--dsw-alias-button-primary-fill)' },
-      }),
-      h('span', { style: { ...fieldLabelStyle, margin: 0 } }, 'Require a PIN on the LAN'),
-    ),
-    lanPin.enabled && h('div', { style: { display: 'flex', gap: 8, alignItems: 'center', marginTop: 8 } },
-      h('span', { style: { ...fieldLabelStyle, margin: 0 } }, 'LAN PIN'),
-      h('code', { style: { ...codeStyle, fontSize: 15, letterSpacing: 2 } }, lanPin.show ? lanPin.pin ?? '••••••••' : '••••••••'),
-      lanPin.show
-        ? h('button', { onClick: lanPin.onHide, style: secondaryButtonStyle }, 'Hide')
-        : h('button', { onClick: lanPin.onShow, style: secondaryButtonStyle }, 'Show'),
-      h('button', { onClick: lanPin.onRotate, style: secondaryButtonStyle }, 'Rotate'),
-    ),
-  )
-}
-
-function PublicAccess({ status, pin, showPin, onRevealPin, onHidePin, onRotatePin }) {
-  return h('div', null,
-    status?.running && status?.publicUrl
-      ? h('div', null,
-          h('div', { style: { display: 'flex', gap: 14, alignItems: 'center', marginBottom: 12 } },
-            h(QrImage, { url: status.publicUrl, size: 116 }),
-            h('div', null,
-              h('div', { style: codeStyle }, status.publicUrl),
-              h('p', { style: captionStyle }, 'Works from anywhere; visitors enter the PIN below.'),
-            ),
-          ),
-        )
-      : h('p', { style: captionStyle }, 'Start the tunnel to get a public address.'),
-    h('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
-      h('span', { style: { ...fieldLabelStyle, margin: 0 } }, 'Access PIN'),
-      h('code', { style: { ...codeStyle, fontSize: 15, letterSpacing: 2 } }, showPin && pin !== null ? pin : '••••••••'),
-      showPin
-        ? h('button', { onClick: onHidePin, style: secondaryButtonStyle }, 'Hide')
-        : h('button', { onClick: onRevealPin, style: secondaryButtonStyle }, 'Show'),
-      h('button', { onClick: onRotatePin, style: secondaryButtonStyle }, 'Rotate'),
-    ),
-    h('p', { style: captionStyle }, 'Stays the same across tunnel and DSH restarts; use Rotate when you need a new PIN.'),
-  )
-}
-
-export function MaestroSettingsTab({ rpcCall, configRpcCall }) {
-  const [status, setStatus] = useState(null)
-  const [proxyStatus, setProxyStatus] = useState(null)
-  const [config, setConfig] = useState({ tunnelMode: 'quick', projectMappings: [] })
-  const [catalog, setCatalog] = useState(null)
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState(null)
-  const [pin, setPin] = useState(null)
-  const [showPin, setShowPin] = useState(false)
-  const [lanPinEnabled, setLanPinEnabled] = useState(false)
-  const [lanPin, setLanPin] = useState(null)
-  const [showLanPin, setShowLanPin] = useState(false)
-  // Task 3: Guard/Blacklist/Supervisor/Notifier tabs state
-  const [activeTab, setActiveTab] = useState('guard')
-  const [guard, setGuard] = useState({})
-  const [patternsText, setPatternsText] = useState('')
-  const [placeholdersText, setPlaceholdersText] = useState('')
-  const [supervisorCfg, setSupervisorCfg] = useState({})
-  const [notifierCfg, setNotifierCfg] = useState({})
-
-  const call = async (endpoint, payload) => {
-    const res = await rpcCall(endpoint, payload)
-    if (!res?.ok) throw new Error(res?.error?.message ?? 'RPC failed')
-    return res.value
-  }
-
-  // Helpers for guard/supervisor/notifier domains via generic config RPC (Task 3)
-  const unwrap = (res) => {
-    if (res && typeof res === 'object' && 'ok' in res) {
-      if (res.ok) return res.value
-      throw new Error(res.error?.message ?? 'RPC failed')
-    }
-    return res
-  }
-  const cfgGet = async (domain) => {
-    if (!configRpcCall) throw new Error('config RPC not available')
-    const res = await configRpcCall('get', { domain })
-    return unwrap(res)
-  }
-  const cfgSet = async (domain, patch) => {
-    if (!configRpcCall) throw new Error('config RPC not available')
-    const res = await configRpcCall('set', { domain, patch })
-    return unwrap(res)
-  }
-  const saveGuard = async (patch) => {
-    setError(null)
-    const next = { ...guard, ...patch }
-    if (patch.gitProtection && guard.gitProtection) next.gitProtection = { ...guard.gitProtection, ...patch.gitProtection }
-    setGuard(next)
-    try { await cfgSet('guard', patch) } catch (e) { setError(e.message ?? String(e)) }
-  }
-  const commitBlacklistPatterns = async (text) => {
-    const patterns = text.split('\n').map(s => s.trim()).filter(Boolean)
-    setError(null)
-    try { await cfgSet('guardBlacklist', { patterns }) } catch (e) { setError(e.message ?? String(e)) }
-  }
-  const commitPlaceholders = async () => {
-    setError(null)
-    let obj = {}
-    try { obj = placeholdersText.trim() ? JSON.parse(placeholdersText) : {}; if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) throw new Error('placeholders must be JSON object') } catch (e) { setError(`placeholders JSON invalid: ${e.message ?? String(e)}`); return }
-    try { await cfgSet('guardBlacklist', { placeholders: obj }) } catch (e) { setError(e.message ?? String(e)) }
-  }
-  const saveSupervisorCfg = async (patch) => {
-    setError(null)
-    setSupervisorCfg(prev => ({ ...prev, ...patch }))
-    try { await cfgSet('supervisor', patch) } catch (e) { setError(e.message ?? String(e)) }
-  }
-  const saveNotifierCfg = async (patch) => {
-    setError(null)
-    setNotifierCfg(prev => {
-      const next = { ...prev }
-      for (const [k, v] of Object.entries(patch)) {
-        if (k === 'telegram' && typeof v === 'object' && v !== null) next.telegram = { ...(prev.telegram ?? {}), ...v }
-        else next[k] = v
-      }
-      return next
-    })
-    try { await cfgSet('notifier', patch) } catch (e) { setError(e.message ?? String(e)) }
-  }
-
-  const refresh = async () => {
-    try { setStatus(await call(MAESTRO_ENDPOINTS.status, {})) } catch { /* transient failure, ignore */ }
-    try { setProxyStatus(await call(MAESTRO_ENDPOINTS.proxyStatus, {})) } catch { /* proxy row may be starting */ }
-  }
-
-  // Load previously-saved config once on mount — without this, every field
-  // (including project mappings) would render empty on every page load even
-  // after being saved, since RPC state is not persisted in the component.
-  useEffect(() => {
-    call(MAESTRO_ENDPOINTS.getConfig, {})
-      .then(saved => setConfig(prev => ({ ...prev, ...saved })))
-      .catch(() => { /* first run, no config saved yet — keep defaults */ })
-    // Supervisor model may be stored via generic config service when review not installed — try fallback
-    if (configRpcCall) {
-      configRpcCall('get', { domain: 'supervisor' })
-        .then(res => {
-          if (res?.ok && res.value?.model) {
-            setConfig(prev => ({ ...prev, supervisorModel: res.value.model }))
-          }
-        })
-        .catch(() => { /* supervisor domain not yet set or config service unavailable */ })
-      // Task 3: load Guard/Blacklist/Supervisor/Notifier domains
-      Promise.all([
-        cfgGet('guard').catch(() => ({})),
-        cfgGet('guardBlacklist').catch(() => ({ patterns: [], placeholders: {} })),
-        cfgGet('supervisor').catch(() => ({})),
-        cfgGet('notifier').catch(() => ({})),
-      ]).then(([g, bl, sup, not]) => {
-        setGuard(g ?? {})
-        const pats = Array.isArray(bl?.patterns) ? bl.patterns : []
-        const ph = bl?.placeholders && typeof bl.placeholders === 'object' ? bl.placeholders : {}
-        setPatternsText(pats.join('\n'))
-        setPlaceholdersText(JSON.stringify(ph, null, 2))
-        setSupervisorCfg(sup ?? {})
-        setNotifierCfg(not ?? {})
-      }).catch(() => {})
-    }
-    call(MAESTRO_ENDPOINTS.lanPinStatus, {})
-      .then(value => { setLanPinEnabled(value.enabled); if (value.enabled) setLanPin(value.pin ?? null) })
-      .catch(() => { /* host without the LAN PIN endpoints — keep the row hidden */ })
-    call(MAESTRO_ENDPOINTS.modelsList, {})
-      .then(value => setCatalog(value))
-      .catch(() => { /* catalog may be unavailable before provider is configured */ })
-  }, [])
-
-  useEffect(() => {
-    refresh()
-    const t = setInterval(refresh, 3000)
-    return () => clearInterval(t)
-  }, [])
-
-  const revealPin = async () => {
-    if (pin === null) {
-      try { setPin((await call(MAESTRO_ENDPOINTS.getPin, {})).pin) } catch (err) { setError(err.message) }
-    }
-    setShowPin(true)
-  }
-
-  const rotatePin = async () => {
-    setError(null)
-    try {
-      const fresh = (await call(MAESTRO_ENDPOINTS.rotatePin, {})).pin
-      setPin(fresh)
-      setShowPin(true)
-    } catch (err) {
-      setError(err.message)
-    }
-  }
-
-  const toggleLanPin = async (enabled) => {
-    setError(null)
-    const previous = lanPinEnabled
-    setLanPinEnabled(enabled)
-    try {
-      await call(MAESTRO_ENDPOINTS.lanPinSetEnabled, { enabled })
-      if (enabled) {
-        const value = await call(MAESTRO_ENDPOINTS.lanPinStatus, {})
-        setLanPin(value.pin ?? null)
-        setShowLanPin(true)
-      } else {
-        setLanPin(null)
-        setShowLanPin(false)
-      }
-    } catch (err) {
-      setLanPinEnabled(previous)
-      setError(err.message)
-    }
-  }
-
-  const revealLanPin = async () => {
-    if (lanPin === null) {
-      try { setLanPin((await call(MAESTRO_ENDPOINTS.lanPinStatus, {})).pin ?? null) } catch (err) { setError(err.message) }
-    }
-    setShowLanPin(true)
-  }
-
-  const rotateLanPin = async () => {
-    setError(null)
-    try {
-      const fresh = (await call(MAESTRO_ENDPOINTS.lanPinRotate, {})).pin
-      setLanPin(fresh)
-      setShowLanPin(true)
-    } catch (err) {
-      setError(err.message)
-    }
-  }
-
-  const startTunnel = async () => {
-    setBusy(true)
-    setError(null)
-    try { setStatus(await call(MAESTRO_ENDPOINTS.tunnelStart, {})) } catch (err) { setError(err.message) } finally { setBusy(false) }
-  }
-
-  const stopTunnel = async () => {
-    setBusy(true)
-    setError(null)
-    try { setStatus(await call(MAESTRO_ENDPOINTS.tunnelStop, {})) } catch (err) { setError(err.message) } finally { setBusy(false) }
-  }
-
-  const saveField = async (field, value) => {
-    setError(null)
-    setConfig(prev => ({ ...prev, [field]: value }))
-    // Supervisor model can be saved via generic config service when review not installed (independent install)
-    if (field === 'supervisorModel' && configRpcCall) {
-      try {
-        const res = await configRpcCall('set', { domain: 'supervisor', patch: { model: value } })
-        if (res?.ok) return
-        // Fall through to review RPC if generic set fails
-      } catch (e) {
-        // Fall through to review RPC
-      }
-    }
-    try {
-      await call(MAESTRO_ENDPOINTS.saveConfig, { [field]: value })
-    } catch (err) {
-      setError(err.message)
-    }
-  }
-
-  return h('div', { 'data-maestro-settings-card': '', style: { maxWidth: 520 } },
-    h('h3', { style: { ...headingStyle, fontSize: 15, margin: '0 0 12px' } }, 'Maestro'),
-
-    h('label', { style: fieldLabelStyle }, 'Tunnel mode'),
-    h('select', { value: config.tunnelMode, style: inputStyle, onChange: e => saveField('tunnelMode', e.target.value) },
-      h('option', { value: 'quick' }, 'Quick (no setup, URL changes on restart)'),
-      h('option', { value: 'named' }, 'Named (stable URL, one-time setup)'),
-    ),
-    config.tunnelMode === 'named' && h(NamedTunnelSetupNote),
-    config.tunnelMode === 'named' && h('div', null,
-      h('label', { style: fieldLabelStyle }, 'Tunnel ID'),
-      h('input', { placeholder: 'Tunnel ID', style: inputStyle, value: config.tunnelId ?? '', onChange: e => saveField('tunnelId', e.target.value) }),
-      h('label', { style: fieldLabelStyle }, 'Credentials file path'),
-      h('input', { placeholder: '~/.cloudflared/<id>.json', style: inputStyle, value: config.tunnelCredentialsFile ?? '', onChange: e => saveField('tunnelCredentialsFile', e.target.value) }),
-      h('label', { style: fieldLabelStyle }, 'Hostname'),
-      h('input', { placeholder: 'dsh.example.com', style: inputStyle, value: config.tunnelHostname ?? '', onChange: e => saveField('tunnelHostname', e.target.value) }),
-    ),
-    h('div', { style: { marginTop: 12 } },
-      status?.running
-        ? h('button', { disabled: busy, onClick: stopTunnel, style: secondaryButtonStyle }, 'Stop tunnel')
-        : h('button', { disabled: busy, onClick: startTunnel, style: primaryButtonStyle }, 'Start tunnel'),
-    ),
-
-    h('div', { style: sectionStyle },
-      h('h4', { style: headingStyle }, 'Remote access (LAN)'),
-      h(LanAccess, {
-        proxyStatus,
-        lanPin: lanPinEnabled === null ? null : {
-          enabled: lanPinEnabled,
-          pin: lanPin,
-          show: showLanPin,
-          onShow: revealLanPin,
-          onHide: () => setShowLanPin(false),
-          onRotate: rotateLanPin,
-          onToggle: toggleLanPin,
-        },
-      }),
-    ),
-
-    h('div', { style: sectionStyle },
-      h('h4', { style: headingStyle }, 'Public access'),
-      h(PublicAccess, { status, pin, showPin, onRevealPin: revealPin, onHidePin: () => setShowPin(false), onRotatePin: rotatePin }),
-    ),
-
-    h('div', { style: sectionStyle },
-      h('h4', { style: headingStyle }, 'Telegram notifications'),
-      h('p', { style: captionStyle }, 'Send one protected startup update with the current public-access PIN to a single Telegram chat.'),
-      h(SecretInput, {
-        label: 'Bot token',
-        placeholder: '123456:ABC-DEF...',
-        hasSaved: config.hasTelegramBotToken,
-        onSave: value => saveField('telegramBotToken', value),
-      }),
-      h('label', { style: fieldLabelStyle }, 'Chat ID'),
-      h('input', { placeholder: '-1001234567890', autoComplete: 'off', style: inputStyle, value: config.telegramChatId ?? '', onChange: e => saveField('telegramChatId', e.target.value) }),
-      h(ToggleField, {
-        label: 'Also notify about finished reviews',
-        caption: 'One message per review run with its outcome and a short summary.',
-        checked: config.telegramReviewNotifications,
-        onChange: checked => saveField('telegramReviewNotifications', checked),
-      }),
-      h('p', { style: captionStyle }, 'Leave either credential blank to disable notifications. Telegram delivery failures never prevent DSH from starting.'),
-    ),
-
-    h('div', { style: sectionStyle },
-      h('h4', { style: headingStyle }, 'GitLab'),
-      h('label', { style: fieldLabelStyle }, 'GitLab base URL'),
-      h('input', { placeholder: 'https://gitlab.example.com', style: inputStyle, value: config.gitlabBaseUrl ?? '', onChange: e => saveField('gitlabBaseUrl', e.target.value) }),
-      h(SecretInput, {
-        label: 'GitLab token',
-        placeholder: 'GitLab token',
-        hasSaved: config.hasGitlabToken,
-        onSave: value => saveField('gitlabToken', value),
-      }),
-      h('label', { style: fieldLabelStyle }, 'Bot username'),
-      h('input', { placeholder: 'maestro-bot', style: inputStyle, value: config.botUsername ?? '', onChange: e => saveField('botUsername', e.target.value) }),
-      h(SecretInput, {
-        label: 'Webhook secret',
-        placeholder: 'Webhook secret',
-        hasSaved: config.hasWebhookSecret,
-        onSave: value => saveField('webhookSecret', value),
-      }),
-      h('button', { type: 'button', style: { ...secondaryButtonStyle, marginTop: 10 }, onClick: () => saveField('webhookSecret', generateWebhookSecret()) }, 'Generate new secret'),
-      h('p', { style: captionStyle }, 'In GitLab: Settings → Webhooks, set Secret token to this value and enable Merge request events.'),
-      h('p', { style: captionStyle }, 'Webhook URL:'),
-      h('code', { style: codeStyle }, gitlabWebhookUrl(config.tunnelHostname)),
-      h('p', { style: captionStyle }, 'Overrides MAESTRO_GITLAB_WEBHOOK_SECRET immediately, no restart needed.'),
-    ),
-
-    h('div', { style: sectionStyle },
-      h('h4', { style: headingStyle }, 'Review automation'),
-      h(ToggleField, {
-        label: 'Re-review when new commits are pushed',
-        caption: 'After a completed review, further pushes to the same MR trigger an automatic quick re-review.',
-        checked: config.autoRereviewOnPush,
-        onChange: checked => saveField('autoRereviewOnPush', checked),
-      }),
-    ),
-
-    h('div', { style: sectionStyle },
-      h('h4', { style: headingStyle }, 'Review model'),
-      h('p', { style: captionStyle }, 'Model used for automated GitLab reviews (reviewer & auditor). Empty = DSH default. Per-project empty = inherits Global, or DSH default when Global is empty.'),
-      h(ReviewModelSelector, {
-        value: config.reviewModel ?? null,
-        catalog,
-        fallbackValue: catalog?.current ?? null,
-        fallbackLabel: 'Use DSH default',
-        onChange: v => saveField('reviewModel', v),
-        label: 'Global review model',
-      }),
-    ),
-
-    h('div', { style: sectionStyle },
-      h('h4', { style: headingStyle }, 'Supervisor LLM'),
-      h('p', { style: captionStyle }, 'Model used by the supervisor debug-agent to auto-fix DSH Web crashes. Empty = DSH default (or Review model if set). Uses the same provider catalog as Review.'),
-      h(ReviewModelSelector, {
-        value: config.supervisorModel ?? null,
-        catalog,
-        fallbackValue: catalog?.current ?? null,
-        fallbackLabel: 'Use DSH default',
-        onChange: v => saveField('supervisorModel', v),
-        label: 'Supervisor model',
-      }),
-    ),
-
-    h('div', { style: sectionStyle },
-      h('h4', { style: headingStyle }, 'Projects'),
-      h(ProjectMappingsEditor, { mappings: config.projectMappings ?? [], onChange: mappings => saveField('projectMappings', mappings), catalog, globalReviewModel: config.reviewModel ?? null }),
-    ),
-
-    // Task 3: Guard/Blacklist/Supervisor/Notifier tabs — data-driven over guard domains
-    h('div', { style: sectionStyle },
-      h('h4', { style: headingStyle }, 'Guard / Blacklist / Supervisor / Notifier'),
-      h('div', { style: tabBarStyle },
-        h('button', { type: 'button', style: tabButtonStyle(activeTab === 'guard'), onClick: () => setActiveTab('guard') }, 'Guard'),
-        h('button', { type: 'button', style: tabButtonStyle(activeTab === 'blacklist'), onClick: () => setActiveTab('blacklist') }, 'Blacklist'),
-        h('button', { type: 'button', style: tabButtonStyle(activeTab === 'supervisor'), onClick: () => setActiveTab('supervisor') }, 'Supervisor'),
-        h('button', { type: 'button', style: tabButtonStyle(activeTab === 'notifier'), onClick: () => setActiveTab('notifier') }, 'Notifier'),
-      ),
-      activeTab === 'guard' && h('div', { 'data-tab': 'guard' },
-        h('p', { style: captionStyle }, 'Enforce publish block, git protection and cwd containment.'),
-        h(ToggleField, {
-          label: 'publishBlocked',
-          caption: 'Block publish-related commands when enabled.',
-          checked: guard.publishBlocked === true,
-          onChange: v => saveGuard({ publishBlocked: v }),
-        }),
-        h(ToggleField, {
-          label: 'gitProtection.enabled',
-          caption: 'Protect pushes to protected branches.',
-          checked: guard.gitProtection?.enabled === true,
-          onChange: v => saveGuard({ gitProtection: { enabled: v, branches: guard.gitProtection?.branches ?? ['master', 'main'] } }),
-        }),
-        h('label', { style: fieldLabelStyle }, 'gitProtection.branches (comma separated)'),
-        h('input', {
-          style: inputStyle,
-          value: (guard.gitProtection?.branches ?? ['master', 'main']).join(', '),
-          placeholder: 'master, main',
-          onChange: e => {
-            const branches = e.target.value.split(',').map(s => s.trim()).filter(Boolean)
-            saveGuard({ gitProtection: { enabled: guard.gitProtection?.enabled ?? true, branches } })
-          },
-        }),
-        h(ToggleField, {
-          label: 'cwdContainment',
-          caption: 'Contain file operations to the session cwd.',
-          checked: guard.cwdContainment === true,
-          onChange: v => saveGuard({ cwdContainment: v }),
-        }),
-        h('label', { style: fieldLabelStyle }, 'credentialPaths (comma separated)'),
-        h('input', {
-          style: inputStyle,
-          value: (guard.credentialPaths ?? []).join(', '),
-          placeholder: '~/.config/credentials.yaml, ~/.config/cloudflared',
-          onChange: e => {
-            const credentialPaths = e.target.value.split(',').map(s => s.trim()).filter(Boolean)
-            saveGuard({ credentialPaths })
-          },
-        }),
-      ),
-      activeTab === 'blacklist' && h('div', { 'data-tab': 'blacklist' },
-        h('p', { style: captionStyle }, 'One pattern per line. These are blocked from being committed or published.'),
-        h('label', { style: fieldLabelStyle }, 'patterns (one per line)'),
-        h('textarea', {
-          style: textareaStyle,
-          value: patternsText,
-          placeholder: 'example-project\nacme-shop',
-          onChange: e => setPatternsText(e.target.value),
-          onBlur: e => commitBlacklistPatterns(e.target.value),
-        }),
-        h('label', { style: fieldLabelStyle }, 'placeholders JSON'),
-        h('textarea', {
-          style: { ...textareaStyle, height: 90 },
-          value: placeholdersText,
-          placeholder: '{"example-project":"my-project"}',
-          onChange: e => setPlaceholdersText(e.target.value),
-          onBlur: () => commitPlaceholders(),
-        }),
-        h('p', { style: captionStyle }, 'Map blocked patterns to their placeholder suggestions.'),
-        h('button', { type: 'button', style: { ...secondaryButtonStyle, marginTop: 8 }, onClick: () => { commitBlacklistPatterns(patternsText); commitPlaceholders() } }, 'Save Blacklist'),
-      ),
-      activeTab === 'supervisor' && h('div', { 'data-tab': 'supervisor' },
-        h('p', { style: captionStyle }, 'Background daemon that auto-resumes crashed sessions.'),
-        h('label', { style: fieldLabelStyle }, 'intervalMs'),
-        h('input', {
-          type: 'number',
-          style: inputStyle,
-          value: supervisorCfg.intervalMs ?? '',
-          placeholder: '5000',
-          onChange: e => { const v = e.target.value === '' ? undefined : Number(e.target.value); saveSupervisorCfg({ intervalMs: v }) },
-        }),
-        h('label', { style: fieldLabelStyle }, 'downThreshold'),
-        h('input', {
-          type: 'number',
-          style: inputStyle,
-          value: supervisorCfg.downThreshold ?? '',
-          placeholder: '3',
-          onChange: e => { const v = e.target.value === '' ? undefined : Number(e.target.value); saveSupervisorCfg({ downThreshold: v }) },
-        }),
-        h(ToggleField, {
-          label: 'autoResumeEnabled',
-          caption: 'Automatically resume down sessions.',
-          checked: supervisorCfg.autoResumeEnabled === true,
-          onChange: v => saveSupervisorCfg({ autoResumeEnabled: v }),
-        }),
-      ),
-      activeTab === 'notifier' && h('div', { 'data-tab': 'notifier' },
-        h('p', { style: captionStyle }, 'Telegram notifications for Maestro events.'),
-        h('label', { style: fieldLabelStyle }, 'telegram.botToken'),
-        h('input', {
-          type: 'password',
-          autoComplete: 'off',
-          style: inputStyle,
-          value: notifierCfg.telegram?.botToken ?? '',
-          placeholder: '123456:ABC-DEF...',
-          onChange: e => saveNotifierCfg({ telegram: { botToken: e.target.value } }),
-        }),
-        h('label', { style: fieldLabelStyle }, 'telegram.chatId'),
-        h('input', {
-          style: inputStyle,
-          value: notifierCfg.telegram?.chatId ?? '',
-          placeholder: '-1001234567890',
-          onChange: e => saveNotifierCfg({ telegram: { chatId: e.target.value } }),
-        }),
-        h(ToggleField, {
-          label: 'telegram.reviewNotifications',
-          caption: 'Also notify about finished reviews.',
-          checked: notifierCfg.telegram?.reviewNotifications === true || notifierCfg.policy?.reviewNotifications === true,
-          onChange: v => saveNotifierCfg({ telegram: { reviewNotifications: v } }),
-        }),
-      ),
-    ),
-
-    error && h('p', { style: errorStyle }, error),
-  )
-}
-
-// Injected synchronously at apply time (deferred effects can stall behind
-// unavailable slot scopes); the external plugin's stylesheet handles
-// everything outside this card.
-function installMaestroMobileCss() {
-  if (document.querySelector('style[data-plugin-css="maestro/mobile-maestro.css"]') !== null) return
-  const tag = document.createElement('style')
-  tag.dataset.plugin = name
-  tag.dataset.pluginCss = 'maestro/mobile-maestro.css'
-  tag.textContent = MAESTRO_MOBILE_CSS + SETTINGS_NAV_CSS
-  document.head.appendChild(tag)
-}
-