@wonderwhy-er/desktop-commander 0.2.37 → 0.2.39

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

@@ -0,0 +1,18 @@
+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/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Shared type contracts for Config Editor data models and host/tool interaction payloads. These definitions prevent runtime shape drift between parser, UI state, and RPC calls.
+ */
+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/types.js

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

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

@@ -0,0 +1,9 @@
+/**
+ * Normalization utilities for config values shown/edited in the UI. It handles stringify/parse edge cases so edits round-trip safely through tool calls.
+ */
+import type { ToolCallRequest } from '../types.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/utils/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/utils/directory-browser.d.ts

@@ -0,0 +1,31 @@
+import type { ConfigStructuredContent } from '../types.js';
+import type { HostCallTool } from '../types.js';
+type StatusTone = 'info' | 'success' | 'error';
+export interface DirectoryBrowserElements {
+    browseControls: HTMLElement | null;
+    browseButton: HTMLButtonElement | null;
+    browserPanel: HTMLElement | null;
+    browserPath: HTMLElement | null;
+    browserStatus: HTMLElement | null;
+    browserList: HTMLElement | null;
+}
+interface DirectoryBrowserControllerOptions {
+    callTool: HostCallTool | null;
+    payload: ConfigStructuredContent;
+    elements: DirectoryBrowserElements;
+    onRender?: () => void;
+    setStatus: (message: string, tone?: StatusTone) => void;
+    getEditorValue: () => string;
+    setEditorValue: (nextValue: string) => void;
+    syncApplyVisibility: () => void;
+}
+export interface DirectoryBrowserController {
+    syncControls: (activeKey: string) => void;
+    toggle: () => Promise<void>;
+    close: () => void;
+    refresh: () => Promise<void>;
+    navigateUp: () => Promise<void>;
+    selectCurrent: () => void;
+}
+export declare function createDirectoryBrowserController(options: DirectoryBrowserControllerOptions): DirectoryBrowserController;
+export {};

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

@@ -0,0 +1,201 @@
+/**
+ * Directory browsing helpers used when config values reference filesystem paths. It encapsulates browse call orchestration and response validation for consistent UX.
+ */
+import { escapeHtml } from '../../../shared/escape-html.js';
+import { isObject } from '../types.js';
+import { extractToolText, unwrapToolResult } from './parsing.js';
+import { serializeConfigValue } from './config-values.js';
+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();
+}
+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;
+}
+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}`;
+}
+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);
+}
+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);
+}
+function renderDirectoryRows(directories) {
+    if (directories.length === 0) {
+        return '<p class="browser-empty">No subdirectories found.</p>';
+    }
+    return directories.map((name) => `
+    <div class="browser-item">
+      <span class="browser-name"><span class="folder-icon" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M10 4l2 2h8v12H4V4z"></path></svg></span>${escapeHtml(name)}</span>
+      <div class="browser-row-actions">
+        <button type="button" class="ghost browser-open icon-only" data-name="${escapeHtml(name)}" title="Open ${escapeHtml(name)}" aria-label="Open ${escapeHtml(name)}">
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 17l5-5-5-5v10z"></path></svg>
+        </button>
+        <button type="button" class="browser-select icon-only" data-name="${escapeHtml(name)}" title="Add ${escapeHtml(name)}" aria-label="Add ${escapeHtml(name)} to allowed directories">
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"></path></svg>
+        </button>
+      </div>
+    </div>
+  `).join('');
+}
+export function createDirectoryBrowserController(options) {
+    const { callTool, payload, elements, onRender, setStatus, getEditorValue, setEditorValue, syncApplyVisibility } = options;
+    const { browseControls, browseButton, browserPanel, browserPath, browserStatus, browserList } = elements;
+    let browserCurrentPath = getDefaultBrowsePath(payload);
+    let browserOpen = false;
+    const selectCurrent = () => {
+        const nextValue = addDirectoryToEditorValue(getEditorValue(), browserCurrentPath);
+        setEditorValue(nextValue);
+        setStatus(`Added ${browserCurrentPath} to allowedDirectories. Click Apply to save.`, 'info');
+        syncApplyVisibility();
+    };
+    const bindDirectoryRowActions = () => {
+        if (!browserList) {
+            return;
+        }
+        const openButtons = Array.from(browserList.querySelectorAll('.browser-open'));
+        const selectButtons = Array.from(browserList.querySelectorAll('.browser-select'));
+        openButtons.forEach((button) => {
+            button.addEventListener('click', async () => {
+                const name = button.dataset.name;
+                if (!name) {
+                    return;
+                }
+                browserCurrentPath = joinPath(browserCurrentPath, name);
+                await refresh();
+            });
+        });
+        selectButtons.forEach((button) => {
+            button.addEventListener('click', () => {
+                const name = button.dataset.name;
+                if (!name) {
+                    return;
+                }
+                browserCurrentPath = joinPath(browserCurrentPath, name);
+                selectCurrent();
+            });
+        });
+    };
+    const refresh = async () => {
+        if (!callTool || !browserPath || !browserStatus || !browserList) {
+            return;
+        }
+        browserPath.textContent = browserCurrentPath;
+        browserStatus.textContent = `Loading ${browserCurrentPath}...`;
+        browserList.innerHTML = '';
+        try {
+            const result = unwrapToolResult(await callTool({
+                name: 'list_directory',
+                arguments: { path: browserCurrentPath, depth: 1 },
+            }));
+            const directories = parseDirectoryEntries(extractToolText(result));
+            browserStatus.textContent = '';
+            browserList.innerHTML = renderDirectoryRows(directories);
+            bindDirectoryRowActions();
+            onRender?.();
+        }
+        catch (error) {
+            browserStatus.textContent = `Failed to list ${browserCurrentPath}: ${error instanceof Error ? error.message : String(error)}`;
+            onRender?.();
+        }
+    };
+    const close = () => {
+        browserOpen = false;
+        browserPanel?.classList.add('hidden');
+        browseButton?.classList.remove('active');
+        onRender?.();
+    };
+    const syncControls = (activeKey) => {
+        const enabled = activeKey === 'allowedDirectories';
+        browseControls?.classList.toggle('hidden', !enabled);
+        browseButton?.classList.toggle('active', enabled && browserOpen);
+        if (!enabled) {
+            close();
+        }
+    };
+    const toggle = async () => {
+        if (!callTool || !browserPanel) {
+            setStatus('MCP RPC unavailable. Cannot browse directories from widget.', 'error');
+            return;
+        }
+        browserOpen = !browserOpen;
+        browserPanel.classList.toggle('hidden', !browserOpen);
+        browseButton?.classList.toggle('active', browserOpen);
+        if (browserOpen) {
+            browserCurrentPath = getDefaultBrowsePath(payload);
+            await refresh();
+            return;
+        }
+        onRender?.();
+    };
+    const navigateUp = async () => {
+        const parent = getParentPath(browserCurrentPath);
+        if (parent === browserCurrentPath) {
+            return;
+        }
+        browserCurrentPath = parent;
+        await refresh();
+    };
+    return {
+        syncControls,
+        toggle,
+        close,
+        refresh,
+        navigateUp,
+        selectCurrent,
+    };
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Input parsing and guard functions for Config Editor payloads. It defensively converts unknown host data into validated internal structures with clear failure handling.
+ */
+import type { ConfigStructuredContent } from '../types.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/utils/parsing.js

@@ -0,0 +1,50 @@
+import { isObject } from '../types.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;
+}