@wonderwhy-er/desktop-commander 0.2.37 → 0.2.39

package/dist/ui/config-editor/src/array-modal.d.ts

@@ -0,0 +1,19 @@
+export interface ArrayModalEntry {
+    key: string;
+    label?: string;
+    description?: string;
+    value: unknown;
+}
+interface CreateArrayModalControllerOptions {
+    container: HTMLElement;
+    parseEntryItems: (entry: ArrayModalEntry) => string[];
+    formatEntryTitle: (entry: ArrayModalEntry) => string;
+    onSave: (entryKey: string, items: string[]) => void | Promise<void>;
+}
+export interface ArrayModalController {
+    open: (entry: ArrayModalEntry) => void;
+    close: () => void;
+}
+export declare function renderArrayModalMarkup(initialTitle: string): string;
+export declare function createArrayModalController(options: CreateArrayModalControllerOptions): ArrayModalController;
+export {};

package/dist/ui/config-editor/src/array-modal.js

@@ -0,0 +1,185 @@
+import { escapeHtml } from '../../shared/escape-html.js';
+export function renderArrayModalMarkup(initialTitle) {
+    return `
+        <div class="array-modal" id="array-modal" hidden>
+          <div class="array-modal-card">
+            <header>
+              <h3 id="array-modal-title">${escapeHtml(initialTitle)}</h3>
+              <div class="array-modal-actions">
+                <button type="button" id="array-modal-save" aria-label="Save list changes">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 13l4 4L19 7"></path></svg>
+                </button>
+                <button type="button" id="array-modal-close" aria-label="Close list editor">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 7l10 10M17 7L7 17"></path></svg>
+                </button>
+              </div>
+            </header>
+            <p class="array-modal-description" id="array-modal-description"></p>
+            <p class="array-modal-hint">Type an item, then press Enter (or click away) to add it. A new empty row appears automatically.</p>
+            <p class="array-modal-error hidden" id="array-modal-error" role="status" aria-live="polite"></p>
+            <div class="array-modal-list" id="array-modal-list"></div>
+          </div>
+        </div>
+    `;
+}
+export function createArrayModalController(options) {
+    const { container, parseEntryItems, formatEntryTitle, onSave } = options;
+    const modal = container.querySelector('#array-modal');
+    const modalList = container.querySelector('#array-modal-list');
+    const modalTitleElement = container.querySelector('#array-modal-title');
+    const modalDescriptionElement = container.querySelector('#array-modal-description');
+    const modalErrorElement = container.querySelector('#array-modal-error');
+    const modalClose = container.querySelector('#array-modal-close');
+    const modalSave = container.querySelector('#array-modal-save');
+    let modalEntryKey = null;
+    let modalItems = [];
+    const clearError = () => {
+        if (!modalErrorElement) {
+            return;
+        }
+        modalErrorElement.textContent = '';
+        modalErrorElement.classList.add('hidden');
+    };
+    const showError = (message) => {
+        if (!modalErrorElement) {
+            return;
+        }
+        modalErrorElement.textContent = message;
+        modalErrorElement.classList.remove('hidden');
+    };
+    const collectModalItemsFromDom = () => {
+        if (!modalList) {
+            return [...modalItems];
+        }
+        const existing = Array.from(modalList.querySelectorAll('.array-modal-item-input'))
+            .map((input) => input.value.trim())
+            .filter((value) => value.length > 0);
+        const newInput = modalList.querySelector('#array-modal-new-item');
+        const newValue = newInput?.value.trim() ?? '';
+        if (newValue.length > 0) {
+            return [newValue, ...existing];
+        }
+        return existing;
+    };
+    const renderModalList = () => {
+        if (!modalList) {
+            return;
+        }
+        modalList.innerHTML = `
+          <div class="array-modal-row array-modal-row--new">
+            <input id="array-modal-new-item" type="text" placeholder="Add item" aria-label="Add new item" />
+          </div>
+          ${modalItems.map((item, index) => `
+            <div class="array-modal-row" data-modal-index="${index}">
+              <input class="array-modal-item-input" type="text" value="${escapeHtml(item)}" aria-label="Item ${index + 1}" />
+              <button type="button" class="array-modal-item-remove" aria-label="Remove item ${index + 1}">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 10v7M14 10v7"></path></svg>
+              </button>
+            </div>
+          `).join('')}
+        `;
+        const addModalItem = (value) => {
+            const normalized = value.trim();
+            if (!normalized) {
+                return;
+            }
+            const exists = modalItems.some((item) => item.trim() === normalized);
+            if (!exists) {
+                modalItems.unshift(normalized);
+            }
+            renderModalList();
+        };
+        const newInput = modalList.querySelector('#array-modal-new-item');
+        newInput?.addEventListener('blur', () => {
+            const value = newInput.value.trim();
+            if (!value) {
+                return;
+            }
+            addModalItem(value);
+            const refreshedNewInput = modalList.querySelector('#array-modal-new-item');
+            refreshedNewInput?.focus();
+        });
+        newInput?.addEventListener('keydown', (event) => {
+            if (event.key !== 'Enter') {
+                return;
+            }
+            event.preventDefault();
+            const value = newInput.value.trim();
+            if (!value) {
+                return;
+            }
+            addModalItem(value);
+            const refreshedNewInput = modalList.querySelector('#array-modal-new-item');
+            refreshedNewInput?.focus();
+        });
+        modalList.querySelectorAll('.array-modal-row[data-modal-index]').forEach((rowElement) => {
+            const row = rowElement;
+            const index = Number(row.dataset.modalIndex);
+            const input = row.querySelector('.array-modal-item-input');
+            const removeButton = row.querySelector('.array-modal-item-remove');
+            input?.addEventListener('blur', () => {
+                modalItems[index] = input.value.trim();
+                modalItems = modalItems.filter((item) => item.length > 0);
+                renderModalList();
+            });
+            removeButton?.addEventListener('click', () => {
+                modalItems = modalItems.filter((_, itemIndex) => itemIndex !== index);
+                renderModalList();
+            });
+        });
+    };
+    const close = () => {
+        if (modal) {
+            modal.hidden = true;
+        }
+        modalEntryKey = null;
+        clearError();
+    };
+    const open = (entry) => {
+        modalEntryKey = entry.key;
+        modalItems = parseEntryItems(entry);
+        clearError();
+        if (modalTitleElement) {
+            modalTitleElement.textContent = formatEntryTitle(entry);
+        }
+        if (modalDescriptionElement) {
+            modalDescriptionElement.textContent = entry.description ?? '';
+            modalDescriptionElement.classList.toggle('hidden', !modalDescriptionElement.textContent.trim());
+        }
+        renderModalList();
+        if (modal) {
+            modal.hidden = false;
+        }
+    };
+    modalClose?.addEventListener('click', close);
+    modal?.addEventListener('click', (event) => {
+        if (event.target === modal) {
+            close();
+        }
+    });
+    modalSave?.addEventListener('click', async () => {
+        if (!modalEntryKey) {
+            return;
+        }
+        const changedKey = modalEntryKey;
+        modalItems = collectModalItemsFromDom();
+        clearError();
+        if (modalSave) {
+            modalSave.disabled = true;
+        }
+        try {
+            await onSave(changedKey, modalItems);
+            close();
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            showError(message.trim().length > 0 ? message : 'Failed to save list changes.');
+        }
+        finally {
+            if (modalSave) {
+                modalSave.disabled = false;
+            }
+        }
+    });
+    return { open, close };
+}

package/dist/ui/config-editor/src/components/layout.d.ts

@@ -0,0 +1,4 @@
+import type { ConfigStructuredContent } from '../types.js';
+export declare function getAllowedDirectoriesWarning(key: string): string;
+export declare function renderConfigEditorLayout(payload: ConfigStructuredContent, selectedKey: string, isExpanded: boolean, callToolAvailable: boolean): string;
+export declare function renderEmptyState(): string;

package/dist/ui/config-editor/src/components/layout.js

@@ -0,0 +1,83 @@
+/**
+ * Pure rendering helpers for Config Editor body/layout sections. It converts structured config data into editable view fragments and keeps DOM generation isolated from app logic.
+ */
+import { escapeHtml } from '../../../shared/escape-html.js';
+import { formatValueForEditor } from '../utils/config-values.js';
+import { renderConfigEditorToolbar } from './toolbar.js';
+function renderKeyPreview(value) {
+    const rendered = formatValueForEditor(value).replace(/\s+/g, ' ').trim();
+    if (rendered.length <= 56) {
+        return rendered || '(empty)';
+    }
+    return `${rendered.slice(0, 56)}...`;
+}
+export function getAllowedDirectoriesWarning(key) {
+    if (key !== 'allowedDirectories') {
+        return '';
+    }
+    return 'Set allowedDirectories to [], to grant access to full filesystem.';
+}
+export function renderConfigEditorLayout(payload, selectedKey, isExpanded, callToolAvailable) {
+    const editableKeys = payload.editableKeys;
+    const selectedValue = formatValueForEditor(payload.config[selectedKey]);
+    return `
+    <main id="tool-shell" class="shell tool-shell ${isExpanded ? 'expanded' : 'collapsed'}">
+      ${renderConfigEditorToolbar(isExpanded, callToolAvailable)}
+      <section id="tool-panel" class="panel">
+        <div id="status" class="status hidden" role="status" aria-live="polite"></div>
+        <div class="editor-grid">
+          <aside class="key-pane">
+            <p class="pane-title">KEYS</p>
+            <div id="key-accordion" class="key-accordion">
+              ${editableKeys.map((key) => `
+                <button type="button" class="key-accordion-item ${key === selectedKey ? 'active' : ''}" data-key="${escapeHtml(key)}" aria-expanded="${key === selectedKey ? 'true' : 'false'}">
+                  <span class="key-accordion-title">${escapeHtml(key)}</span>
+                  <span class="key-accordion-preview">${escapeHtml(renderKeyPreview(payload.config[key]))}</span>
+                </button>
+              `).join('')}
+            </div>
+          </aside>
+          <section class="value-pane">
+            <p class="pane-title">VALUE</p>
+            <textarea id="config-value" rows="7">${escapeHtml(selectedValue)}</textarea>
+            <div id="allowed-directories-controls" class="warning-row hidden">
+              <button id="browse-directory" type="button" class="ghost icon-only" title="Browse directories" aria-label="Browse directories">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 4l2 2h8v12H4V4z"></path></svg>
+              </button>
+              <div id="context-warning" class="warnings hidden"></div>
+            </div>
+            <section id="directory-browser" class="browser hidden">
+              <div class="browser-actions browser-actions--compact">
+                <button id="browser-up" type="button" class="ghost icon-only" title="Up" aria-label="Up one directory">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 14l5-5 5 5z"></path></svg>
+                </button>
+                <button id="browser-refresh" type="button" class="ghost icon-only" title="Refresh" aria-label="Refresh directory list">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.65 6.35A7.95 7.95 0 0 0 12 4V1L7 6l5 5V7a5 5 0 1 1-5 5H5a7 7 0 1 0 12.65-5.65z"></path></svg>
+                </button>
+                <button id="browser-select-current" type="button" class="icon-only" title="Add current directory" aria-label="Add current directory">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"></path></svg>
+                </button>
+                <button id="close-browser" type="button" class="ghost icon-only" title="Close picker" aria-label="Close picker">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4l-6.3 6.3-1.42-1.42 6.3-6.29-6.3-6.29L4.29 4.3l6.3 6.3 6.3-6.3z"></path></svg>
+                </button>
+              </div>
+              <p id="browser-path" class="browser-path browser-path--compact"></p>
+              <div id="browser-status" class="browser-status"></div>
+              <div id="browser-list" class="browser-list"></div>
+            </section>
+          </section>
+        </div>
+      </section>
+    </main>
+  `;
+}
+export function renderEmptyState() {
+    return `
+    <main class="shell">
+      <section class="panel">
+        <h1>Config Editor</h1>
+        <p>No structured configuration payload is available.</p>
+      </section>
+    </main>
+  `;
+}

package/dist/ui/config-editor/src/components/toolbar.d.ts

@@ -0,0 +1 @@
+export declare function renderConfigEditorToolbar(isExpanded: boolean, callToolAvailable: boolean): string;

package/dist/ui/config-editor/src/components/toolbar.js

@@ -0,0 +1,21 @@
+/**
+ * Toolbar renderer and event wiring for Config Editor actions. It exposes top-level controls (refresh/save/open path flows) and keeps header interaction logic localized.
+ */
+import { renderToolHeader } from '../../../shared/tool-header.js';
+export function renderConfigEditorToolbar(isExpanded, callToolAvailable) {
+    return renderToolHeader({
+        pillLabel: 'CFG',
+        pillClassName: 'file-pill--json',
+        title: 'Config Editor',
+        subtitle: 'Inspect and update runtime config safely.',
+        badges: [],
+        actionsHtml: `
+      <button class="icon-button icon-button--primary hidden" id="apply-config" type="button" title="Apply changes" aria-label="Apply changes" ${callToolAvailable ? '' : 'disabled'}>
+        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"></path></svg>
+      </button>
+      <button class="icon-button" id="toggle-expand" type="button" title="${isExpanded ? 'Collapse' : 'Expand'}" aria-label="${isExpanded ? 'Collapse' : 'Expand'}">${isExpanded
+            ? '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 14l5-5 5 5z"></path></svg>'
+            : '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 10l5 5 5-5z"></path></svg>'}</button>
+    `
+    });
+}

package/dist/ui/config-editor/src/config-values.d.ts

@@ -0,0 +1,6 @@
+import type { ToolCallRequest } from './contracts.js';
+export declare function serializeConfigValue(raw: string): unknown;
+export declare function buildSetConfigRequest(key: string, value: unknown): ToolCallRequest;
+export declare function shouldAppendArrayValue(key: string, value: unknown): boolean;
+export declare function formatValueForEditor(value: unknown): string;
+export declare function valueToComparableJson(raw: string): string;

package/dist/ui/config-editor/src/config-values.js

@@ -0,0 +1,61 @@
+export function serializeConfigValue(raw) {
+    const trimmed = raw.trim();
+    if (trimmed.length === 0) {
+        return '';
+    }
+    if (trimmed === 'true') {
+        return true;
+    }
+    if (trimmed === 'false') {
+        return false;
+    }
+    if (trimmed === 'null') {
+        return null;
+    }
+    if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+        return Number(trimmed);
+    }
+    if ((trimmed.startsWith('[') && trimmed.endsWith(']')) || (trimmed.startsWith('{') && trimmed.endsWith('}'))) {
+        try {
+            return JSON.parse(trimmed);
+        }
+        catch {
+            return raw;
+        }
+    }
+    return raw;
+}
+export function buildSetConfigRequest(key, value) {
+    return {
+        name: 'set_config_value',
+        arguments: {
+            key,
+            value
+        }
+    };
+}
+export function shouldAppendArrayValue(key, value) {
+    return (key === 'blockedCommands' || key === 'allowedDirectories') && typeof value === 'string' && value.trim().length > 0;
+}
+export function formatValueForEditor(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (value === undefined) {
+        return '';
+    }
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+export function valueToComparableJson(raw) {
+    try {
+        return JSON.stringify(serializeConfigValue(raw));
+    }
+    catch {
+        return raw;
+    }
+}

package/dist/ui/config-editor/src/contracts.d.ts

@@ -0,0 +1,14 @@
+export interface ConfigStructuredContent {
+    config: Record<string, unknown>;
+    editableKeys: string[];
+    warnings?: string[];
+}
+export interface ToolResultShape {
+    structuredContent?: ConfigStructuredContent;
+}
+export interface ToolCallRequest {
+    name: string;
+    arguments: Record<string, unknown>;
+}
+export type HostCallTool = (request: ToolCallRequest) => Promise<any>;
+export declare function isObject(value: unknown): value is Record<string, unknown>;

package/dist/ui/config-editor/src/contracts.js

@@ -0,0 +1,3 @@
+export function isObject(value) {
+    return typeof value === 'object' && value !== null;
+}

package/dist/ui/config-editor/src/directory-browser.d.ts

@@ -0,0 +1,6 @@
+import type { ConfigStructuredContent } from './contracts.js';
+export declare function getDefaultBrowsePath(payload: ConfigStructuredContent): string;
+export declare function parseDirectoryEntries(listText: string): string[];
+export declare function joinPath(basePath: string, name: string): string;
+export declare function getParentPath(currentPath: string): string;
+export declare function addDirectoryToEditorValue(currentRaw: string, selectedPath: string): string;

package/dist/ui/config-editor/src/directory-browser.js

@@ -0,0 +1,71 @@
+import { isObject } from './contracts.js';
+import { serializeConfigValue } from './config-values.js';
+export function getDefaultBrowsePath(payload) {
+    const configured = payload.config.allowedDirectories;
+    if (Array.isArray(configured) && configured.length > 0 && typeof configured[0] === 'string' && configured[0].trim().length > 0) {
+        return configured[0];
+    }
+    const systemInfo = payload.config.systemInfo;
+    if (isObject(systemInfo) && isObject(systemInfo.examplePaths) && typeof systemInfo.examplePaths.home === 'string') {
+        return systemInfo.examplePaths.home;
+    }
+    return '/';
+}
+function splitDirectoryLine(line) {
+    const marker = '[DIR] ';
+    if (!line.startsWith(marker)) {
+        return null;
+    }
+    return line.slice(marker.length).trim();
+}
+export function parseDirectoryEntries(listText) {
+    const lines = listText.split('\n');
+    const entries = [];
+    for (const line of lines) {
+        const entry = splitDirectoryLine(line.trim());
+        if (entry && !entry.includes('/') && !entry.includes('\\')) {
+            entries.push(entry);
+        }
+    }
+    return entries;
+}
+export function joinPath(basePath, name) {
+    if (/^[A-Za-z]:\\?$/.test(basePath)) {
+        return `${basePath.replace(/[\\/]+$/, '')}\\${name}`;
+    }
+    if (basePath.endsWith('/')) {
+        return `${basePath}${name}`;
+    }
+    if (basePath.endsWith('\\')) {
+        return `${basePath}${name}`;
+    }
+    return `${basePath}/${name}`;
+}
+export function getParentPath(currentPath) {
+    if (!currentPath) {
+        return '/';
+    }
+    if (/^[A-Za-z]:\\?$/.test(currentPath)) {
+        return currentPath;
+    }
+    const normalized = currentPath.replace(/[\\/]+$/, '');
+    if (normalized === '') {
+        return '/';
+    }
+    const slashIndex = Math.max(normalized.lastIndexOf('/'), normalized.lastIndexOf('\\'));
+    if (slashIndex <= 0) {
+        if (normalized.includes('\\')) {
+            return normalized.slice(0, slashIndex + 1) || normalized;
+        }
+        return '/';
+    }
+    return normalized.slice(0, slashIndex);
+}
+export function addDirectoryToEditorValue(currentRaw, selectedPath) {
+    const parsed = serializeConfigValue(currentRaw);
+    const values = Array.isArray(parsed) ? [...parsed] : [];
+    if (!values.includes(selectedPath)) {
+        values.push(selectedPath);
+    }
+    return JSON.stringify(values, null, 2);
+}

package/dist/ui/config-editor/src/layout.d.ts

@@ -0,0 +1,5 @@
+import type { ConfigStructuredContent } from './contracts.js';
+export declare function getAllowedDirectoriesWarning(key: string): string;
+export declare function renderConfigEditorLayout(payload: ConfigStructuredContent, selectedKey: string, isExpanded: boolean, callToolAvailable: boolean): string;
+export declare function renderEmptyState(): string;
+export declare function escapeHtmlText(value: string): string;

package/dist/ui/config-editor/src/layout.js

@@ -0,0 +1,90 @@
+import { formatValueForEditor } from './config-values.js';
+import { renderConfigEditorToolbar } from './toolbar.js';
+function escapeHtml(value) {
+    return value
+        .split('&').join('&')
+        .split('<').join('&lt;')
+        .split('>').join('&gt;')
+        .split('"').join('&quot;')
+        .split("'").join('&#39;');
+}
+function renderKeyPreview(value) {
+    const rendered = formatValueForEditor(value).replace(/\s+/g, ' ').trim();
+    if (rendered.length <= 56) {
+        return rendered || '(empty)';
+    }
+    return `${rendered.slice(0, 56)}...`;
+}
+export function getAllowedDirectoriesWarning(key) {
+    if (key !== 'allowedDirectories') {
+        return '';
+    }
+    return 'Set allowedDirectories to [], to grant access to full filesystem.';
+}
+export function renderConfigEditorLayout(payload, selectedKey, isExpanded, callToolAvailable) {
+    const editableKeys = payload.editableKeys;
+    const selectedValue = formatValueForEditor(payload.config[selectedKey]);
+    return `
+    <main id="tool-shell" class="shell tool-shell ${isExpanded ? 'expanded' : 'collapsed'}">
+      ${renderConfigEditorToolbar(isExpanded, callToolAvailable)}
+      <section id="tool-panel" class="panel">
+        <div id="status" class="status hidden" role="status" aria-live="polite"></div>
+        <div class="editor-grid">
+          <aside class="key-pane">
+            <p class="pane-title">KEYS</p>
+            <div id="key-accordion" class="key-accordion">
+              ${editableKeys.map((key) => `
+                <button type="button" class="key-accordion-item ${key === selectedKey ? 'active' : ''}" data-key="${escapeHtml(key)}" aria-expanded="${key === selectedKey ? 'true' : 'false'}">
+                  <span class="key-accordion-title">${escapeHtml(key)}</span>
+                  <span class="key-accordion-preview">${escapeHtml(renderKeyPreview(payload.config[key]))}</span>
+                </button>
+              `).join('')}
+            </div>
+          </aside>
+          <section class="value-pane">
+            <p class="pane-title">VALUE</p>
+            <textarea id="config-value" rows="7">${escapeHtml(selectedValue)}</textarea>
+            <div id="allowed-directories-controls" class="warning-row hidden">
+              <button id="browse-directory" type="button" class="ghost icon-only" title="Browse directories" aria-label="Browse directories">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 4l2 2h8v12H4V4z"></path></svg>
+              </button>
+              <div id="context-warning" class="warnings hidden"></div>
+            </div>
+            <section id="directory-browser" class="browser hidden">
+              <div class="browser-actions browser-actions--compact">
+                <button id="browser-up" type="button" class="ghost icon-only" title="Up" aria-label="Up one directory">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 14l5-5 5 5z"></path></svg>
+                </button>
+                <button id="browser-refresh" type="button" class="ghost icon-only" title="Refresh" aria-label="Refresh directory list">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.65 6.35A7.95 7.95 0 0 0 12 4V1L7 6l5 5V7a5 5 0 1 1-5 5H5a7 7 0 1 0 12.65-5.65z"></path></svg>
+                </button>
+                <button id="browser-select-current" type="button" class="icon-only" title="Add current directory" aria-label="Add current directory">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"></path></svg>
+                </button>
+                <button id="close-browser" type="button" class="ghost icon-only" title="Close picker" aria-label="Close picker">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4l-6.3 6.3-1.42-1.42 6.3-6.29-6.3-6.29L4.29 4.3l6.3 6.3 6.3-6.3z"></path></svg>
+                </button>
+              </div>
+              <p id="browser-path" class="browser-path browser-path--compact"></p>
+              <div id="browser-status" class="browser-status"></div>
+              <div id="browser-list" class="browser-list"></div>
+            </section>
+          </section>
+        </div>
+      </section>
+    </main>
+  `;
+}
+export function renderEmptyState() {
+    return `
+    <main class="shell">
+      <section class="panel">
+        <h1>Config Editor</h1>
+        <p>No structured configuration payload is available.</p>
+      </section>
+    </main>
+  `;
+}
+export function escapeHtmlText(value) {
+    return escapeHtml(value);
+}

package/dist/ui/config-editor/src/main.js

@@ -0,0 +1,2 @@
+import { bootstrapConfigEditorApp } from './app.js';
+bootstrapConfigEditorApp();

package/dist/ui/config-editor/src/parsing.d.ts

@@ -0,0 +1,5 @@
+import type { ConfigStructuredContent } from './contracts.js';
+export declare function parseConfigStructuredContent(value: unknown): ConfigStructuredContent | undefined;
+export declare function extractStructuredContent(value: unknown): ConfigStructuredContent | undefined;
+export declare function unwrapToolResult(value: unknown): unknown;
+export declare function extractToolText(value: unknown): string;

package/dist/ui/config-editor/src/parsing.js

@@ -0,0 +1,50 @@
+import { isObject } from './contracts.js';
+function isConfigStructuredContent(value) {
+    if (!isObject(value)) {
+        return false;
+    }
+    return isObject(value.config) && Array.isArray(value.editableKeys);
+}
+export function parseConfigStructuredContent(value) {
+    if (!isObject(value)) {
+        return undefined;
+    }
+    const candidate = value;
+    if (isConfigStructuredContent(candidate.structuredContent)) {
+        return candidate.structuredContent;
+    }
+    if (isConfigStructuredContent(value)) {
+        return value;
+    }
+    return undefined;
+}
+export function extractStructuredContent(value) {
+    if (!isObject(value)) {
+        return undefined;
+    }
+    if (value.method === 'ui/notifications/tool-result') {
+        const params = value.params;
+        const candidate = isObject(params) && isObject(params.result) ? params.result : params;
+        return parseConfigStructuredContent(candidate);
+    }
+    return parseConfigStructuredContent(value);
+}
+export function unwrapToolResult(value) {
+    if (!isObject(value)) {
+        return value;
+    }
+    if (isObject(value.result)) {
+        return value.result;
+    }
+    return value;
+}
+export function extractToolText(value) {
+    if (!isObject(value) || !Array.isArray(value.content)) {
+        return '';
+    }
+    const first = value.content[0];
+    if (!isObject(first) || typeof first.text !== 'string') {
+        return '';
+    }
+    return first.text;
+}

package/dist/ui/config-editor/src/toolbar.d.ts

@@ -0,0 +1 @@
+export declare function renderConfigEditorToolbar(isExpanded: boolean, callToolAvailable: boolean): string;