NotExpectedYet
5d06829118
Release / release (push) Successful in 6s
Both scope controls were free-text boxes, and the vocabulary they asked the user for is paths relative to the session folder. "Which folder is `../shared`" is the one question a text box cannot answer, so the panel now shows the Host's own directory: the `uiWorkspace.listDirectory` primitive the workspace picker's browser drives, one level of child folders, a breadcrumb trail, and a hidden-entries toggle. The path field stays editable inside the picker, because the Host lists folders and an extra may legitimately name a file. Picks are stored in the form that keeps their meaning. A folder at `/work/root/src/shared` is declared `src/shared` when the session started in `/work/root`, and `../shared` going up; only a path with nothing shared — another drive, another tree — stays absolute. The Focus row shows that declared form, with the resolved path in its title, which is what the agent will see. `Set` is gone with the box it committed: the panel writes on pick, as every other control here already did. `Clear` stays, because empty means the session folder — the schema's own default rather than an override naming the same place. The card was 380px wide and grew without bound, a single column of prose taller than the viewport. It is 760px now, with a two-column grid that `auto-fit` collapses to one on a narrow card, the reference prose folded into `<details>`, and a scroll-bounded body. `Modal` sizes its own card from a hashed class in the primitives' stylesheet, so this bundle installs one small stylesheet of its own and outranks that rule with a doubled class selector — no `!important`, and nothing reaching into a class name it does not own. Two fixes came with it. The footer's "Deployment mode:" line read a slot prop that never carried the mode, so it said "ask" in every deployment; it reads the settings document now. And `uiWorkspace` is resolved with `ctx.get` at the call rather than injected, because the panel is still the only way to declare scope in a deployment with no directory browser: it keeps the panel and says what it cannot do, instead of losing the button.
1265 lines
51 KiB
JavaScript
1265 lines
51 KiB
JavaScript
/**
|
|
* dsh-facet — the browser half.
|
|
*
|
|
* **Why this file exists when the host half already declares the schema.** The
|
|
* Plugins page does not generate a card from a `Config` schema. It draws whatever
|
|
* browser halves register into the slots it declares, and `plugins.bundle.config`
|
|
* is the seat for one package's own configuration. Marking a field `volatile()`
|
|
* makes the Host *serve* that namespace — `settings.describe()` drops an entry
|
|
* with no volatile field, and `configForms.whileServed()` below refuses to
|
|
* register a page the Host does not serve — but serving it is not drawing it. No
|
|
* browser half means no card, however the schema is marked.
|
|
*
|
|
* **The two keys below are not the same string, and that is the trap.** Every
|
|
* other plugin in this installation happens to name them identically, so the
|
|
* distinction never shows up until it does:
|
|
*
|
|
* * the settings DOCUMENT is filed under the plugin's profile entry id —
|
|
* `facet-policy`, the `id` of this bundle's row in `cordis.patch.yml`.
|
|
* Exporting `Config` from `index.js` is the registration; this is the key
|
|
* `configForms.get()` addresses.
|
|
* * the CARD is filed under the bundle's PACKAGE NAME — `dsh-facet`. That is
|
|
* what the Plugins page dispatches `plugins.bundle.config` by, and it goes on
|
|
* the bundle's own page between its description and its rows.
|
|
*
|
|
* Bind the form to the wrong one and the card renders, saves, and writes nowhere.
|
|
*
|
|
* **Loadable without a bundler.** `react` and the primitives package are both in
|
|
* the boot seed table; the settings document and the slot ledgers arrive as
|
|
* Cordis services or slot props. Nothing here reaches into another plugin's
|
|
* bundle.
|
|
*/
|
|
|
|
window.__ModuleLoader__.load({
|
|
id: 'dsh-facet',
|
|
factory: (require) => {
|
|
var module = { exports: {} }
|
|
var exports = module.exports
|
|
|
|
const react = require('react')
|
|
const primitives = require('@deepseek-ai/dsh-client-ui-primitives')
|
|
|
|
const {
|
|
Modal,
|
|
SegmentedControl,
|
|
SettingsForm,
|
|
SettingsFormModel,
|
|
SettingsValueField,
|
|
IconFolderCloseRegular,
|
|
} = primitives
|
|
|
|
const h = react.createElement
|
|
|
|
/** The settings document's key: this bundle's row id, not its package name. */
|
|
const SETTINGS_ENTRY = 'facet-policy'
|
|
|
|
/** The card's key: the bundle's package name, not its row id. */
|
|
const BUNDLE_CONFIG_KEY = 'dsh-facet'
|
|
|
|
/** The modes the host schema accepts, in the order the control offers them. */
|
|
const MODES = ['ask', 'deny', 'off']
|
|
|
|
const TITLE = 'Facet'
|
|
const DESCRIPTION = 'How a call outside the session\u2019s own folder is handled, and which paths are always in scope.'
|
|
|
|
const OVERRIDDEN_LABEL = 'Overridden'
|
|
const RESET_LABEL = 'Reset to default'
|
|
|
|
const MODE_LABELS = { ask: 'Ask', deny: 'Deny', off: 'Off' }
|
|
const MODE_OPTIONS = MODES.map((value) => ({ value, label: MODE_LABELS[value] }))
|
|
|
|
const labelStyle = {
|
|
display: 'block',
|
|
marginBottom: '6px',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: 'var(--dsw-alias-label-primary)',
|
|
}
|
|
const hintStyle = {
|
|
margin: '6px 0 0',
|
|
fontSize: '12px',
|
|
lineHeight: '18px',
|
|
color: 'var(--dsw-alias-label-tertiary)',
|
|
}
|
|
const badgeStyle = {
|
|
marginLeft: '8px',
|
|
fontSize: '11px',
|
|
fontWeight: 400,
|
|
color: 'var(--dsw-alias-label-tertiary)',
|
|
}
|
|
|
|
/**
|
|
* A finite-choice field, staged as the chosen value.
|
|
*
|
|
* The primitives ship `settingsNumberField` and `settingsTextField` and
|
|
* deliberately stop there: only the owning plugin knows what its own
|
|
* vocabulary is. An unrecognised draft returns `undefined`, which marks the
|
|
* field invalid and blocks the save rather than quietly coercing a typo into
|
|
* a mode the schema would reject at the Host anyway.
|
|
*
|
|
* @param {string} field - field name inside the namespace section.
|
|
* @param {readonly string[]} choices - the values the host schema accepts.
|
|
*/
|
|
function settingsChoiceField(field, choices) {
|
|
return {
|
|
field,
|
|
format: (value) => (typeof value === 'string' && choices.includes(value) ? value : ''),
|
|
parse: (text) => {
|
|
const normalised = String(text).trim().toLowerCase()
|
|
if (normalised === '') return { kind: 'clear' }
|
|
if (choices.includes(normalised)) return { kind: 'set', value: normalised }
|
|
return undefined
|
|
},
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A whole-list field: comma or newline separated in the control, an array of
|
|
* non-empty strings in the document.
|
|
*
|
|
* Empty stages a clear rather than an empty array. The schema's own default
|
|
* is `[]`, so writing one would shadow a deployment's composed default with
|
|
* nothing and leave the field marked overridden when the user meant to
|
|
* remove their override.
|
|
*
|
|
* @param {string} field - field name inside the namespace section.
|
|
*/
|
|
function settingsListField(field) {
|
|
return {
|
|
field,
|
|
format: (value) => (Array.isArray(value) ? value.join(', ') : ''),
|
|
parse: (text) => {
|
|
const parts = String(text)
|
|
.split(/[,\n]/)
|
|
.map((part) => part.trim())
|
|
.filter((part) => part !== '')
|
|
return parts.length === 0 ? { kind: 'clear' } : { kind: 'set', value: parts }
|
|
},
|
|
}
|
|
}
|
|
|
|
/** The facet page's staged form over the composed `facet-policy` entry. */
|
|
var FacetCardController = class {
|
|
/**
|
|
* @param {object} scope - the shared configuration form for `facet-policy`.
|
|
*/
|
|
constructor(scope) {
|
|
this.form = new SettingsFormModel(scope, [
|
|
settingsChoiceField('mode', MODES),
|
|
settingsListField('extraRoots'),
|
|
])
|
|
this.store = this.form.bind(() => this.projection())
|
|
}
|
|
|
|
/** @returns {object} the shell's shared state plus this card's two controls. */
|
|
projection() {
|
|
return {
|
|
...this.form.shell(),
|
|
mode: this.form.field('mode'),
|
|
extraRoots: this.form.field('extraRoots'),
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build the face the slot registration injects.
|
|
*
|
|
* The `hooks` key becomes the component's `useFacetCard` prop — the slot
|
|
* runtime turns each entry into a bound hook — and the actions supply
|
|
* `edit`, `resetField`, `save` and `discard` beside it.
|
|
*
|
|
* @returns {object} the snapshot hook and the form actions.
|
|
*/
|
|
inject() {
|
|
return { hooks: { facetCard: this.store }, ...this.form.actions() }
|
|
}
|
|
|
|
/** Release the form subscription. */
|
|
dispose() {
|
|
this.form.dispose()
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Render the facet card's one-liner or its settings form, as the page asks.
|
|
*
|
|
* @param {object} props - the view asked for, the bound snapshot, and the form actions.
|
|
*/
|
|
function FacetCard(props) {
|
|
if (props.view === 'summary') return DESCRIPTION
|
|
|
|
const state = props.useFacetCard((snapshot) => snapshot)
|
|
const disabled = !state.writable || state.saving
|
|
|
|
// The mode is editable as a segmented control rather than through
|
|
// `SettingsValueField`, because a three-value vocabulary in a free-text box
|
|
// invites a typo the field can only answer with "invalid". It is still the
|
|
// same staged draft underneath — the control calls the form's own `edit`,
|
|
// so nothing is written until Save.
|
|
const mode = h(
|
|
'div',
|
|
{ key: 'mode' },
|
|
h(
|
|
'label',
|
|
{ style: labelStyle, htmlFor: 'facet-mode' },
|
|
'Enforcement mode',
|
|
state.mode.overridden ? h('span', { style: badgeStyle }, OVERRIDDEN_LABEL) : null,
|
|
),
|
|
h(SegmentedControl, {
|
|
id: 'facet-mode',
|
|
value: state.mode.text === '' ? 'ask' : state.mode.text,
|
|
options: MODE_OPTIONS,
|
|
onChange: (next) => props.edit('mode', next),
|
|
label: 'Enforcement mode',
|
|
disabled,
|
|
}),
|
|
h(
|
|
'p',
|
|
{ style: hintStyle },
|
|
'Ask puts each call outside the facet to you as a question. Deny refuses it. Off disables enforcement while leaving the preset in place — useful for telling a scoping problem from an unrelated one.',
|
|
),
|
|
)
|
|
|
|
const extraRoots = h(SettingsValueField, {
|
|
key: 'extraRoots',
|
|
id: 'facet-extra-roots',
|
|
label: 'Standing grants',
|
|
hint: 'Paths always in scope, in every session — shared types, a common test harness. Separate them with commas. Relative paths resolve against each session\u2019s own directory, so the same list is meaningful in every workspace.',
|
|
text: state.extraRoots.text,
|
|
overridden: state.extraRoots.overridden,
|
|
invalid: state.extraRoots.invalid,
|
|
overriddenLabel: OVERRIDDEN_LABEL,
|
|
resetLabel: RESET_LABEL,
|
|
invalidLabel: 'Enter one or more paths, separated by commas.',
|
|
disabled,
|
|
onEdit: (text) => props.edit('extraRoots', text),
|
|
onReset: () => props.resetField('extraRoots'),
|
|
})
|
|
|
|
return h(
|
|
SettingsForm,
|
|
{
|
|
labels: {
|
|
unavailable: 'This plugin is not loaded, so it cannot be configured right now.',
|
|
readOnly: 'This deployment stores settings read-only.',
|
|
saveFailed: 'The deployment did not accept these values; they were left for you to correct.',
|
|
save: 'Save',
|
|
saving: 'Saving\u2026',
|
|
},
|
|
state,
|
|
onSave: props.save,
|
|
onDiscard: props.discard,
|
|
// Column rather than a bare array, so the two controls keep the form's
|
|
// own spacing instead of sitting flush against each other.
|
|
children: h('div', { style: { display: 'flex', flexDirection: 'column', gap: '18px' } }, mode, extraRoots),
|
|
},
|
|
)
|
|
}
|
|
|
|
/**
|
|
* The preset id whose sessions get a context button.
|
|
*
|
|
* A session records its preset as a projection value, so the button can
|
|
* appear exactly where the facet is in force and stay out of the way
|
|
* everywhere else. Rendering it unconditionally would put a control for a
|
|
* plugin that is not running on every conversation in the deployment.
|
|
*/
|
|
const FACET_PRESET = 'facet'
|
|
|
|
/** The composer tool row's entry id, and the button's accessible name. */
|
|
const CONTEXT_ENTRY_ID = 'facet-context'
|
|
const CONTEXT_LABEL = 'Facet context'
|
|
|
|
/** The scope one session has declared, normalised, or an empty declaration. */
|
|
function declaredFor(snapshot, sessionId) {
|
|
const all = snapshot?.value?.scopes
|
|
const mine = all !== null && typeof all === 'object' ? all[sessionId] : undefined
|
|
const entry = mine !== null && typeof mine === 'object' ? mine : {}
|
|
return {
|
|
focus: typeof entry.focus === 'string' ? entry.focus : '',
|
|
extras: Array.isArray(entry.extras) ? entry.extras.filter((path) => typeof path === 'string') : [],
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Write one session's whole declaration.
|
|
*
|
|
* One path, one write: the panel always supplies the complete declaration it
|
|
* wants, so a queued edit can never half-apply and leave a session scoped to
|
|
* something nobody chose. An empty declaration is removed rather than stored,
|
|
* so a session the user has finished with leaves no residue in the profile
|
|
* patch — and so clearing both fields means "the session directory", which is
|
|
* the schema's own default rather than a stored empty override.
|
|
*
|
|
* @returns {Promise<boolean>} whether the Host accepted the write.
|
|
*/
|
|
function writeDeclaration(form, sessionId, next) {
|
|
const focus = typeof next.focus === 'string' ? next.focus.trim() : ''
|
|
const extras = (next.extras ?? []).map((path) => String(path).trim()).filter((path) => path !== '')
|
|
const value = {
|
|
...(focus === '' ? {} : { focus }),
|
|
...(extras.length === 0 ? {} : { extras }),
|
|
}
|
|
const op =
|
|
Object.keys(value).length === 0
|
|
? { op: 'unset', path: ['scopes', sessionId] }
|
|
: { op: 'set', path: ['scopes', sessionId], value }
|
|
return Promise.resolve(form.mutate([op]))
|
|
}
|
|
|
|
/** Shared control styling, so the panel reads as part of the product. */
|
|
const controlStyle = {
|
|
boxSizing: 'border-box',
|
|
height: '32px',
|
|
padding: '0 10px',
|
|
fontSize: '13px',
|
|
fontFamily: 'inherit',
|
|
color: 'var(--dsw-alias-label-primary)',
|
|
background: 'var(--dsw-alias-bg-layer-3)',
|
|
border: '0.5px solid var(--dsw-alias-border-l4)',
|
|
borderRadius: 'var(--dsw-radius-md)',
|
|
}
|
|
const quietButtonStyle = {
|
|
...controlStyle,
|
|
cursor: 'pointer',
|
|
color: 'var(--dsw-alias-label-secondary)',
|
|
background: 'transparent',
|
|
}
|
|
const sectionTitleStyle = {
|
|
margin: '0 0 6px',
|
|
fontSize: '13px',
|
|
fontWeight: 600,
|
|
color: 'var(--dsw-alias-label-primary)',
|
|
}
|
|
const bodyStyle = { margin: '0 0 14px', fontSize: '12.5px', lineHeight: '19px', color: 'var(--dsw-alias-label-secondary)' }
|
|
const listedStyle = { ...bodyStyle, margin: '4px 0 0', fontFamily: 'var(--dsw-font-mono, ui-monospace, monospace)' }
|
|
|
|
// ── the directory listing ────────────────────────────────────────────────
|
|
|
|
/** The classes that widen the two dialogs past the primitive's 380px card. */
|
|
const PANEL_CLASS = 'dsh-facet-panel'
|
|
const PICKER_CLASS = 'dsh-facet-picker'
|
|
const ROW_CLASS = 'dsh-facet-row'
|
|
|
|
/**
|
|
* The stylesheet this bundle installs, for the two things an inline style
|
|
* cannot reach.
|
|
*
|
|
* `Modal` sizes its own card and takes only a class name, and a `:hover`
|
|
* state has no inline spelling, so both live here. Every selector names a
|
|
* class of ours and doubles it: the primitive's card rule is a single hashed
|
|
* class, and a doubled unhashed one outranks it whatever order the two
|
|
* stylesheets land in. That is the whole reason for the doubling — no
|
|
* `!important`, and nothing reaching into a class name this bundle does not
|
|
* own.
|
|
*
|
|
* The widths are the fix for the card the panel used to be: 380px is
|
|
* comfortable for a sentence and cramped for a path listing.
|
|
*/
|
|
const STYLE_ID = 'dsh-facet'
|
|
const STYLE_CSS =
|
|
'.dsh-facet-panel.dsh-facet-panel{width:min(760px,100%)}' +
|
|
'.dsh-facet-picker.dsh-facet-picker{width:min(560px,100%)}' +
|
|
'.dsh-facet-row:enabled:hover{background:var(--dsw-alias-interactive-bg-hover)}' +
|
|
'.dsh-facet-row:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:-2px}'
|
|
|
|
/**
|
|
* Install {@link STYLE_CSS} once per document.
|
|
*
|
|
* Guarded on `document` because the Node test harness loads this module with
|
|
* only `window` and `require` faked, and there is no DOM there to style.
|
|
*/
|
|
function installStyles() {
|
|
if (typeof document === 'undefined') return
|
|
if (document.querySelector(`style[data-plugin-css="${STYLE_ID}"]`) !== null) return
|
|
const tag = document.createElement('style')
|
|
tag.dataset.plugin = 'dsh-facet'
|
|
tag.dataset.pluginCss = STYLE_ID
|
|
tag.textContent = STYLE_CSS
|
|
document.head.appendChild(tag)
|
|
}
|
|
|
|
installStyles()
|
|
|
|
/**
|
|
* Whether a declared path stands on its own instead of resolving against
|
|
* the session folder.
|
|
*
|
|
* Both separators, because a profile patch is written on one platform and
|
|
* read on whichever machine runs it.
|
|
*/
|
|
function isAbsolutePath(path) {
|
|
return typeof path === 'string' && (/^[\\/]/.test(path) || /^[A-Za-z]:[\\/]/.test(path))
|
|
}
|
|
|
|
/** One host path's segments, on either separator. */
|
|
function pathSegments(path) {
|
|
return String(path)
|
|
.split(/[\\/]+/)
|
|
.filter((segment) => segment !== '')
|
|
}
|
|
|
|
/**
|
|
* Say an absolute host path the way this panel declares paths: relative to
|
|
* the session folder where that still names it, absolute where it does not.
|
|
*
|
|
* Relative is not cosmetic. A declaration is resolved against the session
|
|
* directory at the point of use, so `../shared` keeps its meaning when the
|
|
* workspace moves and `/srv/old-workspace/shared` does not.
|
|
*
|
|
* @param {string} root - the session folder, absolute, or '' when unknown.
|
|
* @param {string} target - the path to express.
|
|
* @returns {string} the declared form; '' is the session folder itself.
|
|
*/
|
|
function relativeTo(root, target) {
|
|
const path = String(target ?? '')
|
|
if (typeof root !== 'string' || root === '' || path === '') return path
|
|
const base = pathSegments(root)
|
|
const full = pathSegments(path)
|
|
let common = 0
|
|
while (common < base.length && common < full.length && base[common] === full[common]) common += 1
|
|
// Nothing shared — another drive, or a path that is relative already.
|
|
// Absolute is the only honest spelling left.
|
|
if (common === 0) return path
|
|
const up = base.slice(common).map(() => '..')
|
|
return [...up, ...full.slice(common)].join('/')
|
|
}
|
|
|
|
/**
|
|
* Resolve a declared path against the session folder, for a listing call.
|
|
*
|
|
* The host's browse primitive lists absolute paths only, so a stored
|
|
* `focus` has to be joined before it can be opened. Joining is a string
|
|
* operation rather than a `path.resolve` because there is no `node:path` on
|
|
* this side of the wire and the host accepts either separator.
|
|
*
|
|
* @param {string} root - the session folder, absolute, or '' when unknown.
|
|
* @param {string} declared - a stored focus or extra.
|
|
* @returns {string} an absolute path where one can be built, else the input.
|
|
*/
|
|
function absoluteFrom(root, declared) {
|
|
const path = String(declared ?? '').trim()
|
|
if (path === '' || isAbsolutePath(path)) return path
|
|
if (typeof root !== 'string' || root === '') return path
|
|
return `${root.replace(/[\\/]+$/, '')}/${path.replace(/^[\\/]+/, '')}`
|
|
}
|
|
|
|
/**
|
|
* The operator-facing text for a failed browse call.
|
|
*
|
|
* The Host's own business message is preferred to the transport error,
|
|
* because a browse refusal is an answer — the folder is unreadable, the path
|
|
* is not absolute — and that sentence is the one worth reading.
|
|
*/
|
|
function browseFailure(error) {
|
|
const rpc = error !== null && typeof error === 'object' ? error.rpcError : undefined
|
|
if (rpc !== null && typeof rpc === 'object' && typeof rpc.message === 'string') return rpc.message
|
|
return error instanceof Error ? error.message : String(error)
|
|
}
|
|
|
|
/**
|
|
* The state behind the picker: the level on screen, the path being edited,
|
|
* and the last failure.
|
|
*
|
|
* A model rather than component state because a browse is asynchronous and
|
|
* supersedable: clicking down three folders fires three listings, and the
|
|
* first one landing last must not overwrite the third. Each request carries
|
|
* a sequence number and only the newest may commit. It also keeps the whole
|
|
* interaction testable without a DOM, which is the same reason the settings
|
|
* card has a controller.
|
|
*/
|
|
var DirectoryPickerModel = class {
|
|
/**
|
|
* @param {object} options
|
|
* @param {(path?: string, signal?: AbortSignal) => Promise<object>} options.list - the host listing call.
|
|
* @param {string} options.root - the session folder, absolute, or ''.
|
|
* @param {string} [options.start] - the directory to open first; the root by default.
|
|
*/
|
|
constructor(options) {
|
|
const root = typeof options.root === 'string' ? options.root : ''
|
|
this.list = options.list
|
|
this.listeners = new Set()
|
|
this.request = 0
|
|
this.state = {
|
|
listing: null,
|
|
loading: false,
|
|
error: '',
|
|
showHidden: false,
|
|
draft: typeof options.start === 'string' && options.start !== '' ? options.start : root,
|
|
}
|
|
this.open(this.state.draft)
|
|
}
|
|
|
|
/**
|
|
* @param {() => void} listener - woken on every commit.
|
|
* @returns {() => void} the unsubscribe.
|
|
*/
|
|
subscribe(listener) {
|
|
this.listeners.add(listener)
|
|
return () => this.listeners.delete(listener)
|
|
}
|
|
|
|
/** @returns {object} the current state, for `useSyncExternalStore`. */
|
|
getSnapshot() {
|
|
return this.state
|
|
}
|
|
|
|
/** @param {object} patch @returns {void} */
|
|
update(patch) {
|
|
this.state = { ...this.state, ...patch }
|
|
for (const listener of [...this.listeners]) listener()
|
|
}
|
|
|
|
/**
|
|
* List one directory, discarding any listing already in flight.
|
|
*
|
|
* An empty path asks the Host for its home directory, which is the right
|
|
* answer when the session folder is not known yet. A failure keeps the
|
|
* level that was on screen and the path as typed, because a listing can
|
|
* fail on a path this panel may still legitimately declare — a file rather
|
|
* than a folder is the ordinary case, not an error.
|
|
*
|
|
* @param {string} [path] - the absolute directory to list.
|
|
*/
|
|
open(path) {
|
|
const target = String(path ?? '').trim()
|
|
const request = (this.request += 1)
|
|
this.update({ loading: true, error: '', draft: target })
|
|
Promise.resolve()
|
|
.then(() => this.list(target === '' ? undefined : target))
|
|
.then(
|
|
(listing) => {
|
|
if (request !== this.request) return
|
|
this.update({ listing, loading: false, error: '', draft: String(listing?.path ?? target) })
|
|
},
|
|
(reason) => {
|
|
if (request !== this.request) return
|
|
this.update({ loading: false, error: browseFailure(reason) })
|
|
},
|
|
)
|
|
}
|
|
|
|
/** @param {string} text - the path field's own value. */
|
|
setDraft(text) {
|
|
this.update({ draft: String(text) })
|
|
}
|
|
|
|
/** @param {boolean} showHidden - whether host-flagged hidden folders are listed. */
|
|
setShowHidden(showHidden) {
|
|
this.update({ showHidden: showHidden === true })
|
|
}
|
|
}
|
|
|
|
/** Picker styling: the primitive's own control shapes, one size down. */
|
|
const pickerBodyStyle = { maxHeight: 'min(52vh, 360px)', overflowY: 'auto', paddingRight: '4px' }
|
|
const pickerLevelStyle = { display: 'flex', flexDirection: 'column', gap: '2px', marginTop: '4px' }
|
|
const pickerRowStyle = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
boxSizing: 'border-box',
|
|
width: '100%',
|
|
height: '30px',
|
|
padding: '0 8px',
|
|
border: 0,
|
|
borderRadius: 'var(--dsw-radius-sm)',
|
|
background: 'transparent',
|
|
color: 'var(--dsw-alias-label-primary)',
|
|
fontFamily: 'inherit',
|
|
fontSize: '13px',
|
|
textAlign: 'left',
|
|
cursor: 'pointer',
|
|
}
|
|
const pickerNameStyle = { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }
|
|
const pickerGlyphStyle = { display: 'inline-flex', flex: 'none', color: 'var(--dsw-alias-label-secondary)' }
|
|
const crumbStyle = {
|
|
flex: 'none',
|
|
border: 0,
|
|
padding: '0 2px',
|
|
background: 'transparent',
|
|
color: 'var(--dsw-alias-label-tertiary)',
|
|
fontFamily: 'inherit',
|
|
fontSize: '12.5px',
|
|
cursor: 'pointer',
|
|
}
|
|
const pickerStatusStyle = {
|
|
margin: '6px 0 0',
|
|
fontSize: '12px',
|
|
lineHeight: '18px',
|
|
color: 'var(--dsw-alias-label-tertiary)',
|
|
}
|
|
const pickerErrorStyle = { ...pickerStatusStyle, color: 'var(--dsw-alias-state-error-primary)' }
|
|
const toggleStyle = {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '6px',
|
|
fontSize: '12.5px',
|
|
color: 'var(--dsw-alias-label-secondary)',
|
|
cursor: 'pointer',
|
|
}
|
|
|
|
/**
|
|
* The directory picker: one editable path, the ancestry above it, and one
|
|
* level of child folders.
|
|
*
|
|
* It drives no host call of its own — {@link DirectoryPickerModel} holds the
|
|
* listing and the path, and the panel builds one per opening so each visit
|
|
* starts from what the Host holds rather than from the last one's draft.
|
|
*
|
|
* @param {object} props - the model, the session folder, what is being picked, and the outcome calls.
|
|
*/
|
|
function DirectoryPicker(props) {
|
|
const { model, root, target, disabled, onClose, onPick } = props
|
|
const state = react.useSyncExternalStore(
|
|
(listener) => model.subscribe(listener),
|
|
() => model.getSnapshot(),
|
|
)
|
|
|
|
const listing = state.listing
|
|
const blocked = disabled === true
|
|
const typed = state.draft
|
|
const entries = listing === null ? [] : listing.entries.filter((entry) => state.showHidden || entry.hidden !== true)
|
|
// What the field currently means as a declaration. '' is the session
|
|
// folder: the focus's own default, and for an extra — already the root —
|
|
// nothing worth adding.
|
|
const declared = relativeTo(root, typed)
|
|
|
|
const rows = entries.map((entry) =>
|
|
h(
|
|
'button',
|
|
{
|
|
key: entry.path,
|
|
type: 'button',
|
|
className: ROW_CLASS,
|
|
style: pickerRowStyle,
|
|
title: entry.path,
|
|
disabled: blocked || state.loading,
|
|
// A click walks down rather than picking: the primary action is the
|
|
// path field's own value, so a folder is chosen by standing in it.
|
|
onClick: () => model.open(entry.path),
|
|
},
|
|
h('span', { style: pickerGlyphStyle }, h(IconFolderCloseRegular, { size: 14 })),
|
|
h('span', { style: pickerNameStyle }, entry.name),
|
|
),
|
|
)
|
|
|
|
const trail = []
|
|
for (const [index, crumb] of (listing === null ? [] : listing.crumbs).entries()) {
|
|
if (index > 0) trail.push(h('span', { key: `sep-${index}`, style: { color: 'var(--dsw-alias-label-caption)' } }, '/'))
|
|
trail.push(
|
|
h(
|
|
'button',
|
|
{
|
|
key: crumb.path,
|
|
type: 'button',
|
|
style: crumbStyle,
|
|
title: crumb.path,
|
|
disabled: blocked || state.loading,
|
|
onClick: () => model.open(crumb.path),
|
|
},
|
|
// A root crumb carries its whole path as its name; "Home" is the
|
|
// shorter label the host's own browser gives it, and the title
|
|
// attribute still names where it is.
|
|
crumb.path === listing.home ? 'Home' : crumb.name,
|
|
),
|
|
)
|
|
}
|
|
|
|
const status =
|
|
state.error !== ''
|
|
? h('p', { key: 'status', style: pickerErrorStyle }, state.error)
|
|
: state.loading
|
|
? h('p', { key: 'status', style: pickerStatusStyle }, 'Listing\u2026')
|
|
: listing === null
|
|
? h('p', { key: 'status', style: pickerStatusStyle }, 'Type a folder to start from.')
|
|
: entries.length === 0
|
|
? h('p', { key: 'status', style: pickerStatusStyle }, 'No folders in here.')
|
|
: listing.truncated === true
|
|
? h('p', { key: 'status', style: pickerStatusStyle }, 'Too many folders to list; only the beginning is shown.')
|
|
: null
|
|
|
|
return h(Modal, {
|
|
open: true,
|
|
onClose,
|
|
title: target === 'focus' ? 'Choose the focus folder' : 'Add a folder or a path',
|
|
closeLabel: 'Close',
|
|
className: PICKER_CLASS,
|
|
// One scroll region around everything but the footer, so the card is
|
|
// bounded on a short viewport and the action stays reachable. The
|
|
// primitive's card is content-sized with `overflow: hidden`, so a fixed
|
|
// footer is the only way to keep it in view without reaching into the
|
|
// primitive's own class names.
|
|
children: h(
|
|
'div',
|
|
{ style: pickerBodyStyle },
|
|
h(
|
|
'div',
|
|
{ key: 'path' },
|
|
h('label', { style: labelStyle, htmlFor: 'facet-picker-path' }, target === 'focus' ? 'Folder' : 'Path'),
|
|
h('input', {
|
|
id: 'facet-picker-path',
|
|
type: 'text',
|
|
style: { ...controlStyle, width: '100%' },
|
|
value: typed,
|
|
disabled: blocked,
|
|
spellCheck: false,
|
|
// The Host lists folders, so this box is also how a file — or a
|
|
// folder the session will create — is named at all.
|
|
'data-modal-autofocus': true,
|
|
placeholder: root === '' ? absoluteFrom(root, 'src/shared') : 'relative/to/the/session/folder',
|
|
onChange: (event) => model.setDraft(event.target.value),
|
|
onKeyDown: (event) => {
|
|
if (event.key !== 'Enter') return
|
|
event.preventDefault()
|
|
model.open(typed)
|
|
},
|
|
}),
|
|
h('p', { style: hintStyle }, 'Relative to the session folder, or absolute. Enter lists whatever is there.'),
|
|
),
|
|
h(
|
|
'div',
|
|
{
|
|
key: 'trail',
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '2px',
|
|
minHeight: '22px',
|
|
marginTop: '12px',
|
|
overflowX: 'auto',
|
|
},
|
|
},
|
|
trail.length === 0 ? null : trail,
|
|
),
|
|
h('div', { key: 'level', style: pickerLevelStyle }, rows),
|
|
status,
|
|
),
|
|
footer: [
|
|
// Kept beside the action rather than under the list, the way the
|
|
// host's own browser does it: one control, always in view.
|
|
h(
|
|
'label',
|
|
{ key: 'hidden', style: toggleStyle },
|
|
h('input', {
|
|
type: 'checkbox',
|
|
checked: state.showHidden,
|
|
disabled: blocked,
|
|
onChange: (event) => model.setShowHidden(event.target.checked),
|
|
}),
|
|
'Show hidden folders',
|
|
),
|
|
h('span', { key: 'gap', style: { flex: 1 } }),
|
|
h('button', { key: 'cancel', type: 'button', style: quietButtonStyle, onClick: onClose }, 'Cancel'),
|
|
h(
|
|
'button',
|
|
{
|
|
key: 'pick',
|
|
type: 'button',
|
|
style: { ...quietButtonStyle, color: 'var(--dsw-alias-label-primary)', borderColor: 'var(--dsw-alias-border-l2)' },
|
|
// An extra that resolves to the session folder would add the root
|
|
// to a list of things beyond it; the focus may say exactly that,
|
|
// which is how it spells "the session folder itself".
|
|
disabled: blocked || typed.trim() === '' || (target === 'extra' && declared === ''),
|
|
// The declared form, not the absolute one: the session folder is
|
|
// where this conversation lives, and a path that says so keeps its
|
|
// meaning if the workspace moves.
|
|
onClick: () => onPick(declared),
|
|
},
|
|
target === 'focus' ? 'Set focus' : 'Add',
|
|
),
|
|
],
|
|
})
|
|
}
|
|
|
|
/** The crosshair that marks the button: a scope, not a setting. */
|
|
const CONTEXT_GLYPH = h(
|
|
'svg',
|
|
{ width: 15, height: 15, viewBox: '0 0 16 16', fill: 'none', 'aria-hidden': 'true' },
|
|
h('circle', { cx: 8, cy: 8, r: 3.2, stroke: 'currentColor', strokeWidth: 1.3 }),
|
|
h('path', {
|
|
d: 'M8 1.2v2.6M8 12.2v2.6M1.2 8h2.6M12.2 8h2.6',
|
|
stroke: 'currentColor',
|
|
strokeWidth: 1.3,
|
|
strokeLinecap: 'round',
|
|
}),
|
|
)
|
|
|
|
/** The panel's own scroll region: the card is wide, not tall. */
|
|
const panelBodyStyle = { maxHeight: 'min(62vh, 540px)', overflowY: 'auto', paddingRight: '4px' }
|
|
/**
|
|
* Two columns on a wide card, one on a narrow one. `auto-fit` is the whole
|
|
* responsive story: at 380px — the width this card used to be — the second
|
|
* track does not fit and every cell takes the full row.
|
|
*/
|
|
const panelGridStyle = {
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
gap: '28px',
|
|
alignItems: 'start',
|
|
}
|
|
|
|
/** The focus, shown as the declared path rather than as an editable box. */
|
|
const focusPathStyle = {
|
|
flex: 1,
|
|
minWidth: 0,
|
|
boxSizing: 'border-box',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
height: '32px',
|
|
padding: '0 10px',
|
|
border: '0.5px solid var(--dsw-alias-border-l4)',
|
|
borderRadius: 'var(--dsw-radius-md)',
|
|
background: 'var(--dsw-alias-bg-layer-3)',
|
|
fontFamily: 'var(--dsw-font-mono, ui-monospace, monospace)',
|
|
fontSize: '12.5px',
|
|
color: 'var(--dsw-alias-label-primary)',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
}
|
|
const focusEmptyPathStyle = { ...focusPathStyle, fontFamily: 'inherit', color: 'var(--dsw-alias-label-tertiary)' }
|
|
|
|
/**
|
|
* One folded-away reference section.
|
|
*
|
|
* The guidance used to sit under the controls at full length, which made a
|
|
* panel that is mostly prose and filled the viewport. Folded, it is still
|
|
* there for the session that needs it and costs two lines otherwise.
|
|
*/
|
|
function disclosure(summary, content) {
|
|
return h(
|
|
'details',
|
|
{ style: { marginTop: '18px' } },
|
|
h('summary', { style: { ...sectionTitleStyle, cursor: 'pointer', margin: 0 } }, summary),
|
|
h('div', { style: { marginTop: '8px' } }, content),
|
|
)
|
|
}
|
|
|
|
/**
|
|
* The facet context panel: what this conversation may see, and who decides.
|
|
*
|
|
* This is the only surface that writes per-session scope. The agent has no
|
|
* write path to it — not a narrow one, none — which is what makes "the user
|
|
* decides what is in scope" a property of the system rather than of the
|
|
* agent's instructions.
|
|
*
|
|
* Both scope controls are the same directory listing rather than two text
|
|
* boxes. The panel's vocabulary is paths relative to the session folder, and
|
|
* "which folder is `../shared`" is exactly the question a free-text box
|
|
* cannot answer; the listing answers it from the Host's own directory rather
|
|
* than from a guess about what the path was meant to name. The path field is
|
|
* still editable inside the picker, because the Host lists folders and the
|
|
* extras may name a file.
|
|
*
|
|
* @param {object} props - the bound form, the session, its folder, the browse face, and the close command.
|
|
*/
|
|
function FacetContextPanel(props) {
|
|
const { form, sessionId, mode, onClose, browse } = props
|
|
|
|
// `form` is the settings document for `facet-policy`, already a store: the
|
|
// panel renders whatever the Host last accepted, including a write from
|
|
// another tab.
|
|
const snapshot = react.useSyncExternalStore(
|
|
(listener) => form.subscribe(listener),
|
|
() => form.getSnapshot(),
|
|
)
|
|
const declared = declaredFor(snapshot, sessionId)
|
|
const [picker, setPicker] = react.useState(null)
|
|
const [failure, setFailure] = react.useState('')
|
|
const disabled = snapshot.writable !== true
|
|
|
|
// The session's own folder: what every relative path in this panel is
|
|
// relative to, and where a listing starts. Absent on a session whose
|
|
// summary has not arrived, in which case the Host's home directory stands
|
|
// in and every path is declared absolute.
|
|
const root = typeof props.cwd === 'string' ? props.cwd : ''
|
|
// Asked during render rather than once at registration: the service may
|
|
// activate after this bundle does, and a frozen `false` would hide the
|
|
// listing for the rest of the session.
|
|
const canBrowse = browse?.available?.() === true && !disabled
|
|
|
|
// The mode is a fact about the settings document, so it is read from the
|
|
// document rather than looked for among the slot's own props — which
|
|
// never carried it, leaving this line saying "ask" in every deployment.
|
|
const documentMode = snapshot.value?.mode
|
|
const shownMode = typeof mode === 'string' ? mode : typeof documentMode === 'string' ? documentMode : 'ask'
|
|
|
|
const write = (next) => {
|
|
writeDeclaration(form, sessionId, next).then(
|
|
(ok) => setFailure(ok ? '' : 'The deployment did not accept that change.'),
|
|
() => setFailure('The deployment did not accept that change.'),
|
|
)
|
|
}
|
|
|
|
// One model per opening, built at the click rather than at render, so
|
|
// closing and reopening the picker starts from what the Host holds.
|
|
const openPicker = (target) => {
|
|
if (!canBrowse) return
|
|
// The listing opens on the stored focus for the focus control and on the
|
|
// session folder otherwise. A path with nothing to resolve against — a
|
|
// relative declaration and an unknown session folder — is not a starting
|
|
// point at all, so an empty one asks the Host for its home instead.
|
|
const stored = target === 'focus' ? absoluteFrom(root, declared.focus) : root
|
|
setPicker({
|
|
target,
|
|
model: new DirectoryPickerModel({
|
|
list: browse.list,
|
|
root,
|
|
start: isAbsolutePath(stored) ? stored : '',
|
|
}),
|
|
})
|
|
}
|
|
|
|
const rows = declared.extras.map((path) =>
|
|
h(
|
|
'li',
|
|
{ key: path, style: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '6px' } },
|
|
h(
|
|
'code',
|
|
// The declared form is what is stored; the title spells out the
|
|
// absolute path it resolves to, which is what the agent will see.
|
|
{ style: { ...listedStyle, margin: 0, flex: 1, wordBreak: 'break-all' }, title: absoluteFrom(root, path) },
|
|
path,
|
|
),
|
|
h(
|
|
'button',
|
|
{
|
|
type: 'button',
|
|
style: { ...quietButtonStyle, height: '26px' },
|
|
disabled,
|
|
onClick: () => write({ ...declared, extras: declared.extras.filter((other) => other !== path) }),
|
|
},
|
|
'Remove',
|
|
),
|
|
),
|
|
)
|
|
|
|
const overlay =
|
|
picker === null
|
|
? null
|
|
: h(DirectoryPicker, {
|
|
model: picker.model,
|
|
root,
|
|
target: picker.target,
|
|
disabled,
|
|
onClose: () => setPicker(null),
|
|
onPick: (path) => {
|
|
setPicker(null)
|
|
// The picker already answers in declared form: an empty string
|
|
// is the session folder itself, which is `focus`'s own default
|
|
// rather than a stored override naming the same place.
|
|
if (picker.target === 'focus') write({ ...declared, focus: path })
|
|
else write({ ...declared, extras: [...declared.extras, path] })
|
|
},
|
|
})
|
|
|
|
return h(
|
|
Modal,
|
|
{
|
|
open: true,
|
|
onClose,
|
|
title: CONTEXT_LABEL,
|
|
closeLabel: 'Close',
|
|
description: `Session ${sessionId}`,
|
|
className: PANEL_CLASS,
|
|
},
|
|
h(
|
|
'div',
|
|
{ style: panelBodyStyle },
|
|
// Two columns, because the panel is now wide: the controls on the
|
|
// left where the eye starts, the reference prose on the right where it
|
|
// reads at a sane line length. `auto-fit` collapses it back to one
|
|
// column on a narrow viewport, so nothing has to know the width.
|
|
h(
|
|
'div',
|
|
{ style: panelGridStyle },
|
|
h(
|
|
'div',
|
|
null,
|
|
h('h3', { style: sectionTitleStyle }, 'Focus'),
|
|
h(
|
|
'div',
|
|
{ style: { display: 'flex', gap: '8px', alignItems: 'center' } },
|
|
h(
|
|
'span',
|
|
{ style: declared.focus === '' ? focusEmptyPathStyle : focusPathStyle, title: absoluteFrom(root, declared.focus) },
|
|
declared.focus === '' ? 'the session folder' : declared.focus,
|
|
),
|
|
h(
|
|
'button',
|
|
{ type: 'button', style: quietButtonStyle, disabled: !canBrowse, onClick: () => openPicker('focus') },
|
|
'Browse\u2026',
|
|
),
|
|
declared.focus === ''
|
|
? null
|
|
: h(
|
|
'button',
|
|
{ type: 'button', style: quietButtonStyle, disabled, onClick: () => write({ ...declared, focus: '' }) },
|
|
'Clear',
|
|
),
|
|
),
|
|
h(
|
|
'p',
|
|
{ style: hintStyle },
|
|
root === ''
|
|
? 'Relative to the session folder, or absolute. Empty means the session folder itself.'
|
|
: `Relative to the session folder (${root}), or absolute. Empty means the session folder itself.`,
|
|
),
|
|
|
|
h('h3', { style: { ...sectionTitleStyle, marginTop: '18px' } }, 'Also allowed'),
|
|
declared.extras.length === 0
|
|
? h('p', { style: bodyStyle }, 'Nothing yet. Shared types, project docs, or a sibling folder go here.')
|
|
: h('ul', { style: { listStyle: 'none', margin: 0, padding: 0 } }, rows),
|
|
h(
|
|
'div',
|
|
{ style: { marginTop: '10px' } },
|
|
h(
|
|
'button',
|
|
{ type: 'button', style: quietButtonStyle, disabled: !canBrowse, onClick: () => openPicker('extra') },
|
|
'+ Add folder or path\u2026',
|
|
),
|
|
),
|
|
h(
|
|
'p',
|
|
{ style: bodyStyle },
|
|
'Relative to the session folder, or absolute — anything the session needs beyond the focus.',
|
|
),
|
|
|
|
canBrowse
|
|
? null
|
|
: h(
|
|
'p',
|
|
{ style: bodyStyle },
|
|
'This deployment has no directory browser, so paths cannot be picked here. Standing grants can still be set on the plugin card; a per-session declaration needs a browser.',
|
|
),
|
|
failure === ''
|
|
? null
|
|
: h('p', { style: { ...bodyStyle, color: 'var(--dsw-alias-state-error-primary)' } }, failure),
|
|
h(
|
|
'p',
|
|
{ style: { ...bodyStyle, marginTop: '18px' } },
|
|
`Changes take effect on the next tool call. Deployment mode: ${shownMode}.`,
|
|
),
|
|
),
|
|
|
|
h(
|
|
'div',
|
|
null,
|
|
h('h3', { style: sectionTitleStyle }, 'What this conversation may see'),
|
|
h(
|
|
'p',
|
|
{ style: bodyStyle },
|
|
'The agent works inside the focus folder. Anything it needs beyond that is listed here, and the agent can narrow the focus on its own but can never widen it — only you can, here.',
|
|
),
|
|
disclosure(
|
|
'Mode details',
|
|
h(
|
|
'p',
|
|
{ style: bodyStyle },
|
|
'The mode is set on the plugin card under Plugins, and applies to every session: ' +
|
|
'"ask" puts a call outside the facet to you as a question; "deny" refuses it outright; ' +
|
|
'"off" disables enforcement while leaving the preset mounted. Where the deployment has no approval ' +
|
|
'channel — as here, under the danger-full-access permission preset — "ask" cannot actually reach you, ' +
|
|
'so an out-of-facet call is refused and this panel is the way to widen the scope.',
|
|
),
|
|
),
|
|
disclosure(
|
|
'How to use',
|
|
h(
|
|
'ol',
|
|
{ style: { ...bodyStyle, margin: 0, paddingLeft: '18px' } },
|
|
h('li', { style: { marginBottom: '6px' } }, 'Start the chat in the repository you want to work in.'),
|
|
h('li', { style: { marginBottom: '6px' } }, 'Set Focus to the one folder this conversation is about.'),
|
|
h(
|
|
'li',
|
|
{ style: { marginBottom: '6px' } },
|
|
'Add what it needs beyond that — shared types, project docs, a folder it will create a sibling in.',
|
|
),
|
|
h('li', null, 'Let the agent narrow as the work settles; it will ask you before it needs anything more.'),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// Portalled by `Modal` itself, so a nested dialog is an ordinary child
|
|
// here: the last dialog in the document owns Escape, which makes the
|
|
// picker close before the panel does.
|
|
overlay,
|
|
)
|
|
}
|
|
|
|
/**
|
|
* The composer tool row's button, and the panel it opens.
|
|
*
|
|
* Present only for a session running the facet preset, which is what "shows
|
|
* up when in facet mode" means mechanically: the session's own projection
|
|
* says which preset it runs, so nothing has to be inferred from the URL or
|
|
* from the plugin being installed.
|
|
*
|
|
* @param {object} props - slot props: the session, `useSessions`, and the form.
|
|
*/
|
|
function FacetContextButton(props) {
|
|
const { sessionId, useSessions, form } = props
|
|
|
|
// Called before the early return, so the hook order is stable across the
|
|
// sessions that do and do not run the facet.
|
|
const preset = useSessions((state) => state.byId[sessionId]?.projectionValues?.agentPreset)
|
|
// The session's own folder, which is what "relative" means in the panel
|
|
// and where its listing starts. Read from the session list rather than
|
|
// looked up from the host, because the list already carries it and a
|
|
// second read could disagree with the row the user picked.
|
|
const cwd = useSessions((state) => state.byId[sessionId]?.cwd)
|
|
const [open, setOpen] = react.useState(false)
|
|
|
|
if (preset !== FACET_PRESET) return null
|
|
|
|
return h(
|
|
react.Fragment,
|
|
null,
|
|
h(
|
|
'button',
|
|
{
|
|
type: 'button',
|
|
'aria-label': CONTEXT_LABEL,
|
|
'aria-expanded': open,
|
|
title: `${CONTEXT_LABEL} — what this conversation may see`,
|
|
onClick: () => setOpen((value) => !value),
|
|
style: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '28px',
|
|
height: '28px',
|
|
padding: 0,
|
|
cursor: 'pointer',
|
|
color: open ? 'var(--dsw-alias-label-primary)' : 'var(--dsw-alias-label-secondary)',
|
|
background: open ? 'var(--dsw-alias-interactive-bg-hover)' : 'transparent',
|
|
border: 0,
|
|
borderRadius: 'var(--dsw-radius-sm)',
|
|
},
|
|
},
|
|
CONTEXT_GLYPH,
|
|
),
|
|
// Mounted only while open, so each visit starts from what the Host holds
|
|
// rather than from a draft left over from the last one.
|
|
open ? h(FacetContextPanel, { ...props, form, sessionId, cwd, onClose: () => setOpen(false) }) : null,
|
|
)
|
|
}
|
|
|
|
/**
|
|
* The directory-browsing face the picker drives.
|
|
*
|
|
* `uiWorkspace` is read lazily rather than injected. Injecting it would make
|
|
* the whole context button conditional on it, and the panel is still the
|
|
* only way to declare scope in a deployment with no browser — it would just
|
|
* have no listing to offer. `ctx.get` answers `undefined` instead of
|
|
* throwing, which is what makes that a decision rather than a crash.
|
|
*
|
|
* The availability probe is a function rather than a value because the
|
|
* renderer memoizes the registration's inject result: a boolean read there
|
|
* would freeze at whatever the first render saw, and the service may well
|
|
* activate after this bundle does.
|
|
*
|
|
* @param {object} ctx - the client context to resolve the service from.
|
|
* @returns {object} `available()` and `list()`, the two calls the panel makes.
|
|
*/
|
|
function directoryBrowse(ctx) {
|
|
const workspace = () => ctx.get('uiWorkspace')
|
|
const usable = () => typeof workspace()?.listDirectory === 'function'
|
|
return {
|
|
available: usable,
|
|
list: (path, signal) => {
|
|
const service = workspace()
|
|
if (service === undefined || typeof service.listDirectory !== 'function') {
|
|
return Promise.reject(new Error('This deployment has no directory browser to list with.'))
|
|
}
|
|
return service.listDirectory(path, signal)
|
|
},
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Mount the facet settings card while the Host serves its namespace.
|
|
*
|
|
* `whileServed` is the gate that makes the `volatile()` markers load-bearing:
|
|
* the card is registered only while `facet-policy` appears in the Host's
|
|
* served namespaces. An unserved namespace would be a control that silently
|
|
* writes nowhere, so it registers nothing at all.
|
|
*
|
|
* @param {object} ctx - the browser plugin context.
|
|
*/
|
|
function apply(ctx) {
|
|
// `inject` rather than a required dependency, so a deployment that composed
|
|
// no settings provider loses the card and keeps everything else this bundle
|
|
// contributes.
|
|
ctx.inject(['configForms'], (scoped) => {
|
|
const form = scoped.configForms.get(SETTINGS_ENTRY)
|
|
const card = new FacetCardController(form)
|
|
scoped.effect(() => () => card.dispose(), 'dsh-facet: settings form')
|
|
|
|
scoped.effect(
|
|
() =>
|
|
scoped.configForms.whileServed([SETTINGS_ENTRY], () =>
|
|
scoped.slots.inject('plugins.bundle.config', () =>
|
|
scoped.slots.register(
|
|
{
|
|
name: 'plugins.bundle.config',
|
|
key: BUNDLE_CONFIG_KEY,
|
|
inject: () => card.inject(),
|
|
},
|
|
FacetCard,
|
|
),
|
|
),
|
|
),
|
|
'dsh-facet: settings page',
|
|
)
|
|
|
|
// The context button rides the same form, so the panel and the plugin
|
|
// card can never disagree about what the document holds.
|
|
scoped.effect(
|
|
() =>
|
|
scoped.configForms.whileServed([SETTINGS_ENTRY], () =>
|
|
scoped.slots.inject('conversation.input.left', () =>
|
|
scoped.slots.register(
|
|
{
|
|
name: 'conversation.input.left',
|
|
id: CONTEXT_ENTRY_ID,
|
|
order: 20,
|
|
inject: () => ({ form, browse: directoryBrowse(ctx) }),
|
|
},
|
|
FacetContextButton,
|
|
),
|
|
),
|
|
),
|
|
'dsh-facet: context button',
|
|
)
|
|
})
|
|
}
|
|
|
|
module.exports = {
|
|
name: 'dsh-facet',
|
|
inject: ['slots'],
|
|
apply,
|
|
SETTINGS_ENTRY,
|
|
BUNDLE_CONFIG_KEY,
|
|
FACET_PRESET,
|
|
CONTEXT_ENTRY_ID,
|
|
PANEL_CLASS,
|
|
PICKER_CLASS,
|
|
ROW_CLASS,
|
|
FacetCard,
|
|
FacetCardController,
|
|
FacetContextButton,
|
|
FacetContextPanel,
|
|
DirectoryPicker,
|
|
DirectoryPickerModel,
|
|
declaredFor,
|
|
writeDeclaration,
|
|
absoluteFrom,
|
|
relativeTo,
|
|
isAbsolutePath,
|
|
directoryBrowse,
|
|
}
|
|
return module.exports
|
|
},
|
|
})
|