@lloyal-labs/dev-tools 0.5.0-alpha.5 → 0.5.0-alpha.8

package/dist/react.js

@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useStore } from 'zustand';
-import { pressureStrip, pressurePercent, readConfigPath, lanePpl, isLive, KEY_TIERS, } from './index.js';
+import { pressureStrip, pressurePercent, readConfigPath, lanePpl, isLive, configRows, configCommand, liveConfigKeys, changing, } from './index.js';
 import { devStoreFor, EDGE_STEP } from './store.js';
 // ── palette: monochrome chrome, color reserved for data ──
 const C = {
@@ -246,7 +246,7 @@ function runEndS(m) {
     return m.runStartAt === null ? 0 : Math.max(0, (end - m.runStartAt) / 1000);
 }
 // ═══════════════════════════════════════════════════════════════
-export function DevPane({ bridge, controls = [], title, runCommands = {}, framing, children }) {
+export function DevPane({ bridge, config, title, runCommands = {}, framing, children }) {
     // The store is a per-bridge SINGLETON: a remount reattaches to the running
     // fold (full history intact) instead of restarting it and desyncing. It is
     // deliberately NOT destroyed on unmount — it lives with the page, like the
@@ -328,13 +328,13 @@ export function DevPane({ bridge, controls = [], title, runCommands = {}, framin
                                     } }), m.clarifying ? '?' : liveCount > 0 ? liveCount : '!'] })), _jsx("span", { children: summary })] }), toast && _jsx(Notice, { at: toastAt, text: toast }), _jsx("span", { style: { flex: 1 } }), _jsxs("span", { "aria-hidden": "true", style: { display: 'inline-flex', alignItems: 'center', gap: 14 }, children: [_jsx(MiniSpark, { heading: "context", color: C.agent, values: barStrip.map((p) => p.pct), value: barPct === null ? '—' : `${barPct}%` }), _jsx(MiniSpark, { heading: "cpu", color: HOST_CPU, values: barHost.map((h) => h.cpu), value: barLast ? `${barLast.cpu}%` : '—' }), _jsx(MiniSpark, { heading: "mem", color: "#9aa0a6", values: barHost.filter((h) => h.memUsedMb !== null).map((h) => h.memUsedMb), value: barLast && barLast.memUsedMb !== null && barLast.memTotalMb > 0
                                 ? `${(barLast.memUsedMb / 1024).toFixed(1)} / ${Math.round(barLast.memTotalMb / 1024)}G` : '—' }), _jsx(MiniSpark, { heading: "harness", color: "#5f6368", values: barHost.map((h) => h.rssMb), value: barLast ? `${(barLast.rssMb / 1024).toFixed(1)}G` : '—' })] }), _jsx("span", { style: { flex: 1 } }), _jsx("span", { style: { color: C.faint }, "aria-hidden": "true", children: "click to expand" })] }));
     }
-    return shell(_jsx(Pane, { store: store, m: m, rev: rev, controls: controls, title: title, runCommands: runCommands, onClose: () => setOpen(false), 
+    return shell(_jsx(Pane, { store: store, m: m, rev: rev, config: config, title: title, runCommands: runCommands, onClose: () => setOpen(false), 
         // Thumbnails resolve through the bridge when the harness exposes a
         // content route; the pane never learns the transport, only the URL.
         mediaUrl: bridge.representationUrl ? (d, i) => bridge.representationUrl(d, i) : undefined }));
 }
 // ═══ the docked pane ═══
-function Pane({ store, m, rev, controls, title, runCommands, onClose, mediaUrl }) {
+function Pane({ store, m, rev, config, title, runCommands, onClose, mediaUrl }) {
     const [tab, setTab] = useState('timeline');
     const [selAgent, setSelAgent] = useState(null);
     const [feedW, setFeedW] = useState(feedWidthPref);
@@ -404,7 +404,7 @@ function Pane({ store, m, rev, controls, title, runCommands, onClose, mediaUrl }
                                                 : 'finish up — agents wrap up and report; the trajectory is kept', style: m.pausedAt !== null || m.windingDownAt !== null
                                             ? { ...runBtn, opacity: 0.4, cursor: 'default' } : runBtn, children: m.windingDownAt !== null ? 'finishing…' : 'finish up' })), runCommands.stop && (_jsx("button", { onClick: () => store.send({ type: 'stop' }), title: "halt the run", style: { ...runBtn, color: C.fail, borderColor: '#f0c4c1' }, children: "stop" }))] })), _jsxs("span", { style: { fontFamily: mono, display: 'inline-flex', alignItems: 'center', gap: 7 }, children: [_jsx("span", { style: { width: 7, height: 7, borderRadius: '50%', background: live ? (m.pausedAt !== null ? C.warn : C.ok) : C.faint } }), live
                                         ? (m.pausedAt !== null ? 'paused' : m.windingDownAt !== null ? 'finishing' : 'live')
-                                        : m.runStartAt === null ? 'idle' : 'run complete'] }), _jsx("span", { style: { cursor: 'pointer', color: C.dim }, onClick: onClose, title: "collapse to the cog", children: "\u2715" })] })] }), tab === 'timeline' && (_jsxs("div", { style: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Timeline, { m: m, rev: rev, store: store, selAgent: selAgent, onSelect: setSelAgent, toolColor: toolColor }), selAgent === 'spine' && m.spine && (_jsxs(_Fragment, { children: [_jsx(FeedResizer, { width: feedW, onWidth: (w) => { feedWidthPref = w; setFeedW(w); } }), _jsx(SpineFeed, { m: m, onClose: () => setSelAgent(null), width: feedW, mediaUrl: mediaUrl, toolColor: toolColor })] })), selAgent === 'trunk' && m.trunk.length > 0 && (_jsxs(_Fragment, { children: [_jsx(FeedResizer, { width: feedW, onWidth: (w) => { feedWidthPref = w; setFeedW(w); } }), _jsx(TrunkFeed, { m: m, onClose: () => setSelAgent(null), width: feedW, mediaUrl: mediaUrl })] })), typeof selAgent === 'number' && m.lanes.has(selAgent) && (_jsxs(_Fragment, { children: [_jsx(FeedResizer, { width: feedW, onWidth: (w) => { feedWidthPref = w; setFeedW(w); } }), _jsx(AgentFeed, { m: m, lane: m.lanes.get(selAgent), toolColor: toolColor, onClose: () => setSelAgent(null), onJump: setSelAgent, nowMs: store.getState().paintedAt, width: feedW, send: (c) => store.send(c), canCancel: !!runCommands.cancelAgent })] }))] })), tab === 'sources' && _jsx(Sources, { m: m, toolColor: toolColor }), tab === 'settings' && _jsx(Settings, { m: m, controls: controls, send: (c) => store.send(c) }), _jsxs("div", { style: {
+                                        : m.runStartAt === null ? 'idle' : 'run complete'] }), _jsx("span", { style: { cursor: 'pointer', color: C.dim }, onClick: onClose, title: "collapse to the cog", children: "\u2715" })] })] }), tab === 'timeline' && (_jsxs("div", { style: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Timeline, { m: m, rev: rev, store: store, selAgent: selAgent, onSelect: setSelAgent, toolColor: toolColor }), selAgent === 'spine' && m.spine && (_jsxs(_Fragment, { children: [_jsx(FeedResizer, { width: feedW, onWidth: (w) => { feedWidthPref = w; setFeedW(w); } }), _jsx(SpineFeed, { m: m, onClose: () => setSelAgent(null), width: feedW, mediaUrl: mediaUrl, toolColor: toolColor })] })), selAgent === 'trunk' && m.trunk.length > 0 && (_jsxs(_Fragment, { children: [_jsx(FeedResizer, { width: feedW, onWidth: (w) => { feedWidthPref = w; setFeedW(w); } }), _jsx(TrunkFeed, { m: m, onClose: () => setSelAgent(null), width: feedW, mediaUrl: mediaUrl })] })), typeof selAgent === 'number' && m.lanes.has(selAgent) && (_jsxs(_Fragment, { children: [_jsx(FeedResizer, { width: feedW, onWidth: (w) => { feedWidthPref = w; setFeedW(w); } }), _jsx(AgentFeed, { m: m, lane: m.lanes.get(selAgent), toolColor: toolColor, onClose: () => setSelAgent(null), onJump: setSelAgent, nowMs: store.getState().paintedAt, width: feedW, send: (c) => store.send(c), canCancel: !!runCommands.cancelAgent })] }))] })), tab === 'sources' && _jsx(Sources, { m: m, toolColor: toolColor }), tab === 'settings' && _jsx(Settings, { m: m, config: config, send: (c) => store.send(c) }), _jsxs("div", { style: {
                     height: 24, display: 'flex', alignItems: 'center', gap: 14, padding: '0 12px',
                     borderTop: `1px solid ${C.border}`, background: '#f8f9fa', fontSize: 10.5, color: C.dim, flex: 'none',
                 }, children: [_jsxs("span", { style: { fontFamily: mono }, children: [m.runStartAt === null
@@ -1132,77 +1132,19 @@ const cutline = {
     borderTop: '1px dashed #dadce0', marginTop: 6,
 };
 // ═══ Settings: category nav → harness (master list + detail) · ability pages ═══
-/** What the detail panel knows about each well-known harness key: what it is,
- *  and how to change it. Prose is product copy — one clause per sentence. */
-/** Config path → the ConfigOrigin field carrying its rung, so the
- *  exception note (env/cli overrode the manifest) fires for read-only rows
- *  too — full-rung provenance display stays demoted by design. */
-const ORIGIN_KEYS = {
-    'model.path': 'modelPath',
-    'model.reranker': 'reranker',
-    'model.nCtx': 'nCtx',
-    'model.gpu': 'gpu',
-    'sources.outputDir': 'outputDir',
-    'defaults.reasoningMode': 'reasoningMode',
-};
-const SETTING_META = {
-    'defaults.effort': {
-        desc: 'Run effort preset — agent budget, planner breadth, recovery cap.',
-        how: 'Change it here; it applies to your next run and is remembered locally. The committed default lives in harness.yml → defaults.effort.',
-    },
-    'defaults.reasoningMode': {
-        desc: 'flat runs one research wave over the plan; deep lets agents recurse into sub-plans.',
-        how: 'Change it here; it applies to your next run.',
-    },
-    'model.imageMaxTokens': {
-        desc: 'Ceiling on what ONE image costs in KV. Measured on Qwen3.5 with a 176 KB photo: 564 cells uncapped, 251 at 256. Lower it to fit more images into a context; auto lets the model metadata decide.',
-        how: 'Change it here and the runtime reloads on the new value. It does NOT shrink the projector\u2019s warmup allocation, so it will not rescue a boot that runs out of GPU memory before any image arrives.',
-    },
-    'model.imageMinTokens': {
-        desc: 'Floor on per-image detail. Grounding tasks need it high \u2014 llama.cpp warns Qwen-VL wants at least 1024 to read positions reliably.',
-        how: 'Change it here and the runtime reloads on the new value. Raise it if the model reads an image but places things wrongly in it.',
-    },
-    'sources.outputDir': {
-        desc: 'Where per-query run-dirs and the session trace are written. Empty means where the harness started.',
-        how: 'Edit harness.yml → sources.outputDir; the next run picks it up.',
-    },
-    'defaults.maxTurns': {
-        desc: 'Turn cap per agent run.',
-        how: 'Edit harness.yml → defaults.maxTurns; the next run picks it up.',
-    },
-    'model.path': {
-        desc: 'Filesystem path or catalog id of the reasoning model.',
-        how: 'Saved changes load at the next start; this run keeps the model it booted with.',
-    },
-    'model.reranker': {
-        desc: 'The admission judge — a pointwise yes/no reranker that gates what enters the context.',
-        how: 'Saved changes load at the next start.',
-    },
-    'model.nCtx': {
-        desc: 'Context window of the one shared llama_context — every branch leases cells out of this budget.',
-        how: 'Edit harness.yml → model.llm.context, then restart.',
-    },
-    'model.branches': {
-        desc: 'Concurrent sequences — createContext takes it as nSeqMax. Each sequence holds its own KV lease.',
-        how: 'Edit harness.yml → model.llm.branches, then restart.',
-    },
-    'model.kvCache': {
-        desc: 'KV cache type for the attention layers — raise for precision, lower for memory.',
-        how: 'Edit harness.yml → model.llm.kvCache, then restart.',
-    },
-    'model.gpu': {
-        desc: 'Which native backend the process loaded — picked once at start. A configured backend fails loud if unavailable, never silently CPU.',
-        how: 'A deploy choice: set harness.yml → model.llm.gpu (or LLOYAL_GPU), then restart.',
-    },
-};
 const TIER_NOTE = {
     session: 'applies to the next run',
     reload: 'saved now — a restart loads it',
     boot: 'fixed for this run',
 };
-function Settings({ m, controls, send }) {
+function Settings({ m, config, send }) {
     const [cat, setCat] = useState('harness');
-    const [selKey, setSelKey] = useState(controls[0]?.key ?? 'model.path');
+    // With a table the rows are the application's own keys; without one, whatever config the harness announced.
+    const rows = config
+        ? configRows(config)
+        : liveConfigKeys(m.config).map((key) => ({ key, applies: 'session', values: null }));
+    // Open on the first thing that can be changed now, else the first that can be changed at all.
+    const [selKey, setSelKey] = useState((rows.find((r) => r.values && r.applies === 'session') ?? rows.find((r) => r.values) ?? rows[0])?.key ?? '');
     // The nav lists INSTALLED abilities (`abilities:state` descriptors) — not
     // merely configured ones, or the page you'd use to configure an ability
     // could never appear. Harnesses that don't emit descriptors degrade to the
@@ -1222,60 +1164,41 @@ function Settings({ m, controls, send }) {
             borderLeft: on ? `3px solid ${C.text}` : '3px solid transparent',
         }, children: name }, name));
     return (_jsxs("div", { style: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsxs("div", { style: { width: 148, flex: 'none', borderRight: '1px solid #d9dce1', paddingTop: 10, background: C.panelBg, overflowY: 'auto' }, children: [navItem('harness', cat === 'harness'), abilities.length > 0 && _jsx("div", { style: { ...label, padding: '12px 16px 3px' }, children: "abilities" }), abilities.map((a) => navItem(a, cat === a))] }), cat === 'harness'
-                ? _jsx(HarnessSettings, { m: m, controls: controls, send: send, selKey: selKey, onSelect: setSelKey })
+                ? _jsx(HarnessSettings, { m: m, rows: rows, tiered: config !== undefined, send: send, selKey: selKey, onSelect: setSelKey })
                 : _jsx(AbilityPage, { m: m, name: cat, send: send })] }));
 }
-/** A DevControl drawn as a stepped slider: the steps ARE `ctl.values`, in the
- *  order the template declared them, so there is no numeric range to keep in
- *  sync with the option list and no value can be selected that the command
- *  would not accept. Commits on release, not on drag \u2014 each change reloads
- *  the runtime, and every intermediate step would be a reload nobody asked
- *  for. */
-function SteppedSlider({ ctl, value, onSelect, send }) {
-    const at = Math.max(0, ctl.values.indexOf(value ?? ''));
-    const [dragging, setDragging] = useState(null);
-    const shown = dragging ?? at;
-    const commit = (i) => {
-        setDragging(null);
-        if (ctl.values[i] !== value) {
-            onSelect();
-            send({ type: ctl.command, [ctl.field]: ctl.values[i] });
-        }
-    };
-    return (_jsxs("span", { onClick: (e) => e.stopPropagation(), style: { display: 'flex', alignItems: 'center', gap: 10, width: 276, flex: 'none' }, children: [_jsx("input", { type: "range", min: 0, max: ctl.values.length - 1, step: 1, value: shown, "aria-label": ctl.key, "aria-valuetext": String(ctl.values[shown]), onChange: (e) => setDragging(Number(e.target.value)), onPointerUp: (e) => commit(Number(e.target.value)), onKeyUp: (e) => commit(Number(e.target.value)), onBlur: () => setDragging(null), style: { flex: 1, accentColor: C.text, cursor: 'pointer', minWidth: 0 } }), _jsx("span", { style: {
-                    fontFamily: mono, fontSize: 11, color: C.text, width: 46, flex: 'none',
-                    textAlign: 'right', fontVariantNumeric: 'tabular-nums',
-                }, children: ctl.values[shown] })] }));
-}
-function HarnessSettings({ m, controls, send, selKey, onSelect }) {
+function HarnessSettings({ m, rows, tiered, send, selKey, onSelect }) {
     const config = m.config;
-    const byTier = (tier) => Object.entries(KEY_TIERS).filter(([, t]) => t === tier).map(([k]) => k);
-    const controlFor = (key) => controls.find((c) => c.key === key);
-    const row = (key) => {
-        const ctl = controlFor(key);
-        const value = ctl ? ctl.read(config) : readConfigPath(config, key);
-        if (value === undefined && !ctl)
-            return null; // skip-if-absent: basic has no defaults block
+    const byTier = (tier) => rows.filter((r) => r.applies === tier);
+    const row = (r) => {
+        const { key } = r;
+        const raw = readConfigPath(config, key); // a declared key the harness never set is still a row: its value is —
+        // A value that is itself a table (an app's own structured key) is shown as it is written.
+        const value = raw === undefined || raw === null ? undefined : typeof raw === 'object' ? JSON.stringify(raw) : String(raw);
         const selected = selKey === key;
+        // Choosing the value already in force is a selection, never a command: on a reload row the command would
+        // end the session to apply nothing.
+        const choose = (v) => { onSelect(key); if (v === value)
+            return; const command = configCommand(r, v); if (command)
+            send(command); };
         return (_jsxs("div", { onClick: () => onSelect(key), role: "button", tabIndex: 0, onKeyDown: keyActivate(() => onSelect(key)), style: {
                 display: 'flex', alignItems: 'center', gap: 8, padding: '5px 14px 5px 11px', minHeight: 36,
                 borderLeft: selected ? `3px solid ${C.text}` : '3px solid transparent', cursor: 'pointer',
                 background: selected ? C.chromeBg : undefined,
-            }, children: [_jsx("span", { style: { fontFamily: mono, fontSize: 11.5, fontWeight: 500 }, children: key }), _jsx("span", { style: { flex: 1 } }), ctl?.note && _jsx("span", { style: { color: C.faint, fontSize: 10.5, marginRight: 10, flex: 'none' }, children: ctl.note }), ctl?.render === 'slider' ? (_jsx(SteppedSlider, { ctl: ctl, value: value === undefined || value === null ? undefined : String(value), onSelect: () => onSelect(key), send: send })) : ctl ? (_jsx("span", { style: { display: 'flex', border: '1px solid #dadce0', borderRadius: 4, overflow: 'hidden', width: 276, flex: 'none' }, children: ctl.values.map((v) => (_jsx("span", { onClick: (e) => { e.stopPropagation(); onSelect(key); send({ type: ctl.command, [ctl.field]: v }); }, role: "button", tabIndex: 0, "aria-pressed": v === value, onKeyDown: keyActivate(() => { onSelect(key); send({ type: ctl.command, [ctl.field]: v }); }), style: {
+            }, children: [_jsx("span", { style: { fontFamily: mono, fontSize: 11.5, fontWeight: 500 }, children: key }), _jsx("span", { style: { flex: 1 } }), r.values ? (_jsx("span", { style: { display: 'flex', border: '1px solid #dadce0', borderRadius: 4, overflow: 'hidden', width: 276, flex: 'none' }, children: r.values.map((v) => (_jsx("span", { onClick: (e) => { e.stopPropagation(); choose(v); }, role: "button", tabIndex: 0, "aria-pressed": v === value, onKeyDown: keyActivate(() => choose(v)), style: {
                             flex: 1, fontSize: 11, padding: '5px 0', textAlign: 'center', cursor: 'pointer',
                             background: v === value ? C.text : '#fff', color: v === value ? '#fff' : C.dim,
                             fontWeight: v === value ? 500 : 400, borderLeft: '1px solid #e8eaed',
-                        }, children: v }, v))) })) : (_jsxs("span", { style: { fontFamily: mono, fontSize: 11, color: C.dim, maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: [value === undefined || value === null || value === '' ? '—' : String(value), key === 'model.branches' && _jsx("span", { style: { color: C.faint }, children: " \u2192 nSeqMax" })] }))] }, key));
+                        }, children: v }, v))) })) : (_jsxs("span", { style: { fontFamily: mono, fontSize: 11, color: C.dim, maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: [value === undefined || value === '' ? '—' : value, key === 'model.branches' && _jsx("span", { style: { color: C.faint }, children: " \u2192 nSeqMax" })] }))] }, key));
     };
     const head = (t) => (_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 8, padding: '13px 14px 3px' }, children: [_jsx("span", { style: label, children: t }), _jsx("span", { style: { color: C.faint, fontSize: 10.5 }, children: TIER_NOTE[t] })] }));
-    const meta = SETTING_META[selKey];
-    const tier = KEY_TIERS[selKey];
+    const selected = rows.find((r) => r.key === selKey);
+    const tier = tiered ? selected?.applies : undefined;
     // The exception case, surfaced exactly when true: something outside the
-    // manifest set this value. No badges anywhere else.
-    const originKey = controlFor(selKey)?.originKey ?? ORIGIN_KEYS[selKey];
-    const origin = originKey && m.origin ? m.origin[originKey] : undefined;
+    // manifest set this value. No badges anywhere else. Provenance is keyed by the config path itself.
+    const origin = m.origin ? m.origin[selKey] : undefined;
     const overridden = origin === 'env' || origin === 'cli';
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { flex: 1, minWidth: 0, overflowY: 'auto', paddingBottom: 10 }, children: [byTier('session').length > 0 && head('session'), byTier('session').map(row), byTier('reload').length > 0 && head('reload'), byTier('reload').map(row), byTier('boot').length > 0 && head('boot'), byTier('boot').map(row)] }), _jsxs("div", { style: { width: 400, flex: 'none', borderLeft: '1px solid #d9dce1', overflowY: 'auto', padding: '16px 20px', background: C.panelBg }, children: [meta ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontFamily: mono, fontSize: 13, fontWeight: 500 }, children: selKey }), tier && _jsx("span", { style: chip, children: TIER_NOTE[tier] })] }), _jsx("p", { style: { maxWidth: 340, margin: '8px 0 0', fontSize: 12, lineHeight: 1.55, color: '#3c4043' }, children: meta.desc }), _jsx("div", { style: { ...label, marginTop: 16 }, children: "changing it" }), _jsx("p", { style: { maxWidth: 340, margin: '6px 0 0', fontSize: 12, lineHeight: 1.55, color: '#3c4043' }, children: meta.how }), overridden && (_jsxs("div", { style: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { flex: 1, minWidth: 0, overflowY: 'auto', paddingBottom: 10 }, children: tiered ? ['session', 'reload', 'boot'].map((t) => byTier(t).length > 0 && (_jsxs("div", { children: [head(t), byTier(t).map(row)] }, t))) : rows.map(row) }), _jsxs("div", { style: { width: 400, flex: 'none', borderLeft: '1px solid #d9dce1', overflowY: 'auto', padding: '16px 20px', background: C.panelBg }, children: [selected ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontFamily: mono, fontSize: 13, fontWeight: 500 }, children: selKey }), tier && _jsx("span", { style: chip, children: TIER_NOTE[tier] })] }), selected.describe && (_jsx("p", { style: { maxWidth: 340, margin: '8px 0 0', fontSize: 12, lineHeight: 1.55, color: '#3c4043' }, children: selected.describe })), tiered && (_jsxs(_Fragment, { children: [_jsx("div", { style: { ...label, marginTop: 16 }, children: "changing it" }), _jsx("p", { style: { maxWidth: 340, margin: '6px 0 0', fontSize: 12, lineHeight: 1.55, color: '#3c4043' }, children: changing(selected) })] })), overridden && (_jsxs("div", { style: {
                                     display: 'flex', alignItems: 'baseline', gap: 8, padding: '8px 11px', marginTop: 14,
                                     background: C.warnBg, border: `1px solid ${C.warnBorder}`, borderRadius: 4, fontSize: 11, maxWidth: 360,
                                 }, children: [_jsx("b", { children: "currently overridden" }), _jsxs("span", { style: { color: C.dim }, children: [origin === 'env' ? 'an environment variable' : 'a command-line flag', " is overriding the manifest \u2014 the value shown is the one in effect."] })] }))] })) : (_jsx("span", { style: { color: C.faint }, children: "select a setting" })), m.lastSavedTo !== undefined && (_jsx("div", { style: { marginTop: 18, fontFamily: mono, fontSize: 10.5, color: C.dim }, children: m.lastSavedTo === null