dsh-slopo agent
2d7a7d1e73
It rendered as a flat, always-open block with no header. The framework's card
chrome is a disclosure: the tab renders every card into a <ul>, each card's root
is an <li>, its header is its own <button> that discloses the controls in place,
it starts collapsed, the header marks it when it holds unsaved edits, and a save
that lands folds it back up.
Three things were wrong and only one of them was cosmetic:
* the root was a <div> inside the tab's <ul>, so the list and card styling
never reached it
* there was no header button, so no disclosure and no aria-expanded
* nothing marked unsaved edits, and nothing collapsed after a save
`PluginCard` is not importable — it lives in that package's client bundle, and
the client purity gate forbids cross-plugin value imports — so the behaviour is
reproduced rather than borrowed, with inline styles for the same reason.
The collapse-on-save originally lived in an effect watching a `saving` flag, which
is how the shipped card does it because its form state comes from a controller.
This card awaits its own writes, so it already knows the save landed; collapsing
directly in the success path is simpler and is what the tests can actually reach.
A failed save still keeps the card open with its drafts.
Tests cover the disclosure itself: the root element, collapsed-by-default, the
header's aria-expanded and label, that staged edits survive collapsing, and that
a landed save folds the card up.
370 lines
14 KiB
JavaScript
370 lines
14 KiB
JavaScript
/**
|
|
* dsh-slopo — browser half: the card in Settings → Plugins → Plugin configuration.
|
|
*
|
|
* The Host half registers a `dsh-slopo` settings namespace. This file registers
|
|
* a card under that exact namespace key. Both are required: the tab renders the
|
|
* INTERSECTION of the namespaces the Host serves and the cards the browser
|
|
* claims, so a served namespace with no card draws nothing at all, and a card
|
|
* whose namespace is not served is never dispatched.
|
|
*
|
|
* The chrome follows the framework's `PluginCard`: the root is an `<li>` (the
|
|
* tab renders every card into a `<ul>`), the header is its own `<button>` that
|
|
* discloses the controls in place, the card starts collapsed, it marks itself
|
|
* when it holds unsaved edits, and it collapses again after a successful save.
|
|
* Nothing about that is imported — `PluginCard` lives in that package's client
|
|
* bundle and the client purity gate forbids cross-plugin value imports — so the
|
|
* behaviour is reproduced here rather than borrowed.
|
|
*
|
|
* Hand-written plain JavaScript inside the module-loader wrapper, with no build
|
|
* step and no bundler. `dsh plugin add git+…` fetches sources rather than build
|
|
* output, so a `prepare` script would make every user allowlist a build before
|
|
* the first install succeeds. The only import is `react`, which is in the
|
|
* platform seed table; anything outside that table would have to be bundled
|
|
* into this file or declared in `dsh.client.external`.
|
|
*
|
|
* Styling is inline on purpose, for the same reason: there is no stylesheet this
|
|
* file may reach.
|
|
*/
|
|
window.__ModuleLoader__.load({
|
|
id: 'dsh-slopo',
|
|
factory: (require) => {
|
|
var module = { exports: {} }
|
|
var exports = module.exports
|
|
|
|
const react = require('react')
|
|
|
|
const NS = 'dsh-slopo'
|
|
const h = react.createElement
|
|
|
|
const TITLE = 'Slopo'
|
|
const DESCRIPTION = 'Embedding backend, index scope and the budget that stops a large embed.'
|
|
|
|
/**
|
|
* The settings this card edits.
|
|
*
|
|
* This list mirrors the Host schema in index.js. It is duplicated rather
|
|
* than fetched because the card renders its own controls — there is no
|
|
* generic schema-to-form renderer in the framework — and a field the Host
|
|
* does not know is rejected there anyway, so a drift shows up as a clear
|
|
* error rather than silent data loss.
|
|
*/
|
|
const FIELDS = [
|
|
{
|
|
key: 'embeddingModel',
|
|
label: 'Embedding model',
|
|
hint: 'LiteLLM string, provider prefix included — e.g. ollama/unclemusclez/jina-embeddings-v2-base-code:latest',
|
|
},
|
|
{ key: 'embeddingDimensions', label: 'Embedding dimensions', kind: 'number', hint: 'Must match what the model returns. Frozen into the index at first use.' },
|
|
{ key: 'embeddingApiBase', label: 'Embedding API base', hint: 'e.g. http://127.0.0.1:11434' },
|
|
{
|
|
key: 'embeddingApiKey',
|
|
label: 'Embedding API key',
|
|
kind: 'password',
|
|
hint: 'Passed to slopo in its environment and never written into the slopo config file.',
|
|
},
|
|
{ key: 'embeddingParamsJson', label: 'Extra embedding parameters', hint: 'A JSON object, merged into embedding_params.' },
|
|
{ key: 'binary', label: 'slopo executable', hint: 'Empty discovers it: managed install, then PATH, then ~/.local/bin.' },
|
|
{ key: 'autoInstall', label: 'Install slopo with uv when missing', kind: 'boolean' },
|
|
{ key: 'sourceDir', label: 'Source directory', hint: 'Empty uses the session working directory.' },
|
|
{
|
|
key: 'sourceDirExclude',
|
|
label: 'Extra exclude patterns',
|
|
kind: 'list',
|
|
hint: 'Comma separated, gitignore style. Added to the defaults rather than replacing them.',
|
|
},
|
|
{
|
|
key: 'useDefaultExcludes',
|
|
label: 'Exclude node_modules and build output',
|
|
kind: 'boolean',
|
|
hint: 'Off means slopo parses your dependencies too — on a repo with node_modules, the difference between ~1,500 and ~114,000 code units.',
|
|
},
|
|
{
|
|
key: 'maxIndexUnits',
|
|
label: 'Refuse to embed more than this many units',
|
|
kind: 'number',
|
|
hint: 'Makes a large scope a question rather than an hours-long embed. 0 removes the limit.',
|
|
},
|
|
{ key: 'stateDir', label: 'State directory', hint: 'Empty uses $DSH_HOME/dsh-slopo/workspaces/<workspace>.' },
|
|
{ key: 'ignoreFile', label: 'Ignore file', hint: 'Point this at the repository to version the dismissed clusters.' },
|
|
{ key: 'embeddingRequestDelay', label: 'Delay between embedding requests (ms)', kind: 'number' },
|
|
{ key: 'timeoutMs', label: 'Foreground timeout (ms)', kind: 'number' },
|
|
]
|
|
|
|
const BORDER = '1px solid var(--dsh-border, #3a3a3a)'
|
|
|
|
const S = {
|
|
// The tab renders into a <ul>, so the root must be an <li> or the list
|
|
// styling never reaches it.
|
|
card: { listStyle: 'none', border: BORDER, borderRadius: '8px', margin: '8px 0', overflow: 'hidden' },
|
|
cardOpen: { background: 'var(--dsh-surface, rgba(255,255,255,0.02))' },
|
|
header: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '12px',
|
|
width: '100%',
|
|
padding: '12px 16px',
|
|
border: 'none',
|
|
background: 'transparent',
|
|
color: 'inherit',
|
|
textAlign: 'left',
|
|
cursor: 'pointer',
|
|
font: 'inherit',
|
|
},
|
|
headText: { display: 'flex', flexDirection: 'column', gap: '2px', flex: '1 1 auto', minWidth: 0 },
|
|
name: { fontSize: '14px', fontWeight: 600 },
|
|
description: { fontSize: '11px', opacity: 0.65, lineHeight: 1.45 },
|
|
pending: {
|
|
flex: '0 0 auto',
|
|
fontSize: '10px',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.04em',
|
|
padding: '2px 6px',
|
|
borderRadius: '4px',
|
|
border: BORDER,
|
|
opacity: 0.8,
|
|
},
|
|
chevron: { flex: '0 0 auto', fontSize: '10px', opacity: 0.7, transition: 'transform 120ms ease' },
|
|
chevronOpen: { transform: 'rotate(180deg)' },
|
|
body: { padding: '0 16px 16px 16px' },
|
|
readOnly: { fontSize: '11px', opacity: 0.75, marginTop: 0, marginBottom: '12px' },
|
|
hint: { fontSize: '11px', opacity: 0.65, marginTop: '2px', lineHeight: 1.45 },
|
|
row: { marginTop: '12px' },
|
|
label: { display: 'block', fontSize: '12px', fontWeight: 500, marginBottom: '4px' },
|
|
input: {
|
|
width: '100%',
|
|
boxSizing: 'border-box',
|
|
padding: '6px 8px',
|
|
fontSize: '12px',
|
|
borderRadius: '6px',
|
|
border: BORDER,
|
|
background: 'transparent',
|
|
color: 'inherit',
|
|
},
|
|
actions: { display: 'flex', gap: '8px', alignItems: 'center', marginTop: '16px', flexWrap: 'wrap' },
|
|
button: {
|
|
padding: '6px 12px',
|
|
fontSize: '12px',
|
|
borderRadius: '6px',
|
|
border: BORDER,
|
|
background: 'transparent',
|
|
color: 'inherit',
|
|
cursor: 'pointer',
|
|
},
|
|
primary: { fontWeight: 600 },
|
|
note: { fontSize: '11px', opacity: 0.75, marginLeft: 'auto' },
|
|
}
|
|
|
|
/** The editable string form of one field's value. */
|
|
function toText(field, value) {
|
|
if (field.kind === 'list') return Array.isArray(value) ? value.join(', ') : ''
|
|
if (field.kind === 'boolean') return value === true ? 'true' : 'false'
|
|
if (value === undefined || value === null) return ''
|
|
return String(value)
|
|
}
|
|
|
|
/** The value to write for one field, from its string form. */
|
|
function fromText(field, text) {
|
|
const trimmed = typeof text === 'string' ? text.trim() : ''
|
|
if (field.kind === 'number') return Number(trimmed)
|
|
if (field.kind === 'boolean') return trimmed === 'true'
|
|
if (field.kind === 'list') {
|
|
return trimmed === ''
|
|
? []
|
|
: trimmed
|
|
.split(/[,\n]/)
|
|
.map((part) => part.trim())
|
|
.filter((part) => part !== '')
|
|
}
|
|
return text
|
|
}
|
|
|
|
/** Build a draft of every field from a resolved section. */
|
|
function toDraft(value) {
|
|
const draft = {}
|
|
for (const field of FIELDS) draft[field.key] = toText(field, value?.[field.key])
|
|
return draft
|
|
}
|
|
|
|
function Field(props) {
|
|
const { field, value, overridden, disabled, onChange } = props
|
|
const common = {
|
|
style: S.input,
|
|
value,
|
|
disabled,
|
|
'aria-label': field.label,
|
|
onChange: (event) => onChange(event.target.value),
|
|
}
|
|
return h(
|
|
'div',
|
|
{ style: S.row },
|
|
h(
|
|
'label',
|
|
{ style: S.label },
|
|
field.label,
|
|
overridden ? h('span', { style: { opacity: 0.6, fontWeight: 400 } }, ' · overridden') : null,
|
|
),
|
|
field.kind === 'boolean'
|
|
? h('input', {
|
|
type: 'checkbox',
|
|
checked: value === 'true',
|
|
disabled,
|
|
'aria-label': field.label,
|
|
onChange: (event) => onChange(event.target.checked ? 'true' : 'false'),
|
|
})
|
|
: h('input', { ...common, type: field.kind === 'password' ? 'password' : 'text' }),
|
|
field.hint === undefined ? null : h('div', { style: S.hint }, field.hint),
|
|
)
|
|
}
|
|
|
|
function Card(props) {
|
|
const scope = props.scope
|
|
const [snapshot, setSnapshot] = react.useState(() => scope.getSnapshot())
|
|
const [draft, setDraft] = react.useState(null)
|
|
const [busy, setBusy] = react.useState(false)
|
|
const [note, setNote] = react.useState('')
|
|
// Collapsed on mount, like every other card in the tab.
|
|
const [open, setOpen] = react.useState(false)
|
|
|
|
react.useEffect(() => scope.subscribe(() => setSnapshot(scope.getSnapshot())), [scope])
|
|
|
|
const status = snapshot.status
|
|
const value = snapshot.value
|
|
const baseline = react.useMemo(() => toDraft(value), [value])
|
|
const current = draft ?? baseline
|
|
const user = snapshot.user
|
|
|
|
if (status === 'unavailable') {
|
|
// A deployment without the Host half, or a remote browser: show no trace.
|
|
return null
|
|
}
|
|
|
|
const dirtyKeys = FIELDS.filter((field) => current[field.key] !== baseline[field.key]).map((field) => field.key)
|
|
const overriddenKeys = user !== null && typeof user === 'object' ? Object.keys(user) : []
|
|
const writable = snapshot.writable === true
|
|
|
|
const save = async () => {
|
|
setBusy(true)
|
|
setNote('')
|
|
try {
|
|
for (const field of FIELDS) {
|
|
const next = current[field.key]
|
|
if (next === baseline[field.key]) continue
|
|
// Clearing a field is an unset, not a write of "", so the value
|
|
// re-inherits the composition layer instead of becoming empty.
|
|
if (String(next).trim() === '') await scope.unset(field.key)
|
|
else await scope.set(field.key, fromText(field, next))
|
|
}
|
|
setDraft(null)
|
|
setNote('Saved.')
|
|
// A landed save folds the card back up. A failed or blocked one stays
|
|
// open with the drafts, which is the whole point of staging them.
|
|
setOpen(false)
|
|
} catch (error) {
|
|
setNote(`Save failed: ${error?.message ?? error}`)
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
const reset = async () => {
|
|
setBusy(true)
|
|
setNote('')
|
|
try {
|
|
for (const key of overriddenKeys) await scope.unset(key)
|
|
setDraft(null)
|
|
setNote('Reset to the deployment defaults.')
|
|
} catch (error) {
|
|
setNote(`Reset failed: ${error?.message ?? error}`)
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return h(
|
|
'li',
|
|
{ style: open ? { ...S.card, ...S.cardOpen } : S.card },
|
|
h(
|
|
'button',
|
|
{
|
|
type: 'button',
|
|
style: S.header,
|
|
'aria-expanded': open,
|
|
'aria-label': `${open ? 'Collapse' : 'Expand'}: ${TITLE}`,
|
|
onClick: () => setOpen(!open),
|
|
},
|
|
h(
|
|
'span',
|
|
{ style: S.headText },
|
|
h('span', { style: S.name }, TITLE),
|
|
h('span', { style: S.description }, DESCRIPTION),
|
|
),
|
|
// Marked on the header, so unsaved edits are visible while collapsed.
|
|
dirtyKeys.length > 0 ? h('span', { style: S.pending }, 'unsaved') : null,
|
|
h('span', { style: open ? { ...S.chevron, ...S.chevronOpen } : S.chevron }, '▾'),
|
|
),
|
|
open
|
|
? h(
|
|
'div',
|
|
{ style: S.body },
|
|
writable ? null : h('p', { style: S.readOnly, role: 'status' }, 'This namespace is read-only here.'),
|
|
...FIELDS.map((field) =>
|
|
h(Field, {
|
|
key: field.key,
|
|
field,
|
|
value: current[field.key],
|
|
overridden: overriddenKeys.includes(field.key),
|
|
disabled: busy || !writable,
|
|
onChange: (next) => setDraft({ ...current, [field.key]: next }),
|
|
}),
|
|
),
|
|
h(
|
|
'div',
|
|
{ style: S.actions },
|
|
h(
|
|
'button',
|
|
{ type: 'button', style: { ...S.button, ...S.primary }, disabled: busy || dirtyKeys.length === 0, onClick: save },
|
|
dirtyKeys.length === 0 ? 'Save' : `Save ${dirtyKeys.length} change${dirtyKeys.length === 1 ? '' : 's'}`,
|
|
),
|
|
h(
|
|
'button',
|
|
{ type: 'button', style: S.button, disabled: busy || overriddenKeys.length === 0, onClick: reset },
|
|
`Reset ${overriddenKeys.length} override${overriddenKeys.length === 1 ? '' : 's'}`,
|
|
),
|
|
note === '' ? null : h('span', { style: S.note }, note),
|
|
),
|
|
)
|
|
: null,
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Register the card, but only once a settings transport exists.
|
|
*
|
|
* `ctx.inject(['settingsScope'], …)` rather than a top-level `inject`,
|
|
* because a required dependency that is unsatisfied means this plugin never
|
|
* applies at all — the card would vanish along with everything else instead
|
|
* of simply not appearing.
|
|
*/
|
|
function apply(ctx) {
|
|
ctx.inject(['settingsScope'], (scoped) => {
|
|
const binder = scoped.settingsScope
|
|
if (binder === undefined) return
|
|
const scope = binder.bind({ namespace: NS })
|
|
scoped.slots.inject('settings.plugin.item', () =>
|
|
scoped.slots.register(
|
|
{
|
|
name: 'settings.plugin.item',
|
|
key: NS,
|
|
inject: () => ({ scope }),
|
|
},
|
|
(props) => h(Card, props),
|
|
),
|
|
)
|
|
})
|
|
}
|
|
|
|
module.exports = { name: NS, inject: ['slots'], apply }
|
|
return module.exports
|
|
},
|
|
})
|