@vibe-forge/tsconfigs 0.7.1 → 0.8.0

package/dist/apps/client/src/components/config/record-editors/ChannelRecordEditor.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ChannelRecordEditor.scss';
+import { Button, Input, InputNumber, Select, Switch, Tooltip } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { z } from 'zod';
+import { channelBaseSchema } from '@vibe-forge/core/channel';
+import { ComplexTextEditor, StringArrayEditor } from '../ConfigEditors';
+import { FieldRow } from '../ConfigFieldRow';
+import { channelDefinitions } from '../channelDefinitions';
+import { getTypeIcon, isSensitiveKey } from '../configUtils';
+const getObjectShape = (schema) => {
+    if (schema instanceof z.ZodObject)
+        return schema.shape;
+    if (schema instanceof z.ZodEffects)
+        return getObjectShape(schema.innerType());
+    if (schema instanceof z.ZodOptional)
+        return getObjectShape(schema.unwrap());
+    if (schema instanceof z.ZodDefault)
+        return getObjectShape(schema.removeDefault());
+    if (schema instanceof z.ZodNullable)
+        return getObjectShape(schema.unwrap());
+    return {};
+};
+const unwrapSchema = (schema) => {
+    if (schema instanceof z.ZodEffects)
+        return unwrapSchema(schema.innerType());
+    if (schema instanceof z.ZodOptional)
+        return unwrapSchema(schema.unwrap());
+    if (schema instanceof z.ZodDefault)
+        return unwrapSchema(schema.removeDefault());
+    if (schema instanceof z.ZodNullable)
+        return unwrapSchema(schema.unwrap());
+    return schema;
+};
+const getDefaultValue = (schema) => {
+    if (schema instanceof z.ZodDefault)
+        return schema._def.defaultValue();
+    if (schema instanceof z.ZodOptional)
+        return undefined;
+    if (schema instanceof z.ZodNullable)
+        return null;
+    if (schema instanceof z.ZodLiteral)
+        return schema.value;
+    if (schema instanceof z.ZodEnum)
+        return schema.options[0];
+    if (schema instanceof z.ZodNativeEnum) {
+        const values = Object.values(schema.enum);
+        return values.length > 0 ? values[0] : undefined;
+    }
+    if (schema instanceof z.ZodString)
+        return '';
+    if (schema instanceof z.ZodNumber)
+        return 0;
+    if (schema instanceof z.ZodBoolean)
+        return false;
+    if (schema instanceof z.ZodArray)
+        return [];
+    if (schema instanceof z.ZodObject) {
+        const shape = getObjectShape(schema);
+        return Object.fromEntries(Object.entries(shape).map(([key, value]) => [key, getDefaultValue(value)]));
+    }
+    if (schema instanceof z.ZodRecord)
+        return {};
+    if (schema instanceof z.ZodEffects)
+        return getDefaultValue(schema.innerType());
+    return undefined;
+};
+const toLabel = (key) => key
+    .replace(/_/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/\b\w/g, char => char.toUpperCase());
+const buildRecordDefaults = (definition) => {
+    const shape = getObjectShape(definition.configSchema);
+    const entries = Object.entries(shape);
+    return entries.reduce((acc, [key, schema]) => {
+        acc[key] = getDefaultValue(schema);
+        return acc;
+    }, {});
+};
+const getChannelDefinition = (type) => channelDefinitions.find(definition => definition.type === type);
+export const ChannelRecordEditor = ({ value, onChange, t, keyPlaceholder }) => {
+    const [newKey, setNewKey] = useState('');
+    const [newType, setNewType] = useState(channelDefinitions[0]?.type ?? '');
+    const entries = useMemo(() => Object.entries(value), [value]);
+    const [collapsedKeys, setCollapsedKeys] = useState(() => (Object.fromEntries(entries.map(([key]) => [key, true]))));
+    const baseKeys = useMemo(() => new Set(Object.keys(getObjectShape(channelBaseSchema))), []);
+    const typeOptions = useMemo(() => channelDefinitions.map(definition => ({
+        value: definition.type,
+        label: definition.label
+    })), []);
+    useEffect(() => {
+        setCollapsedKeys(prev => {
+            const next = {};
+            for (const [key] of entries) {
+                next[key] = prev[key] ?? true;
+            }
+            return next;
+        });
+    }, [entries]);
+    const updateChannel = (key, nextValue) => {
+        onChange({ ...value, [key]: nextValue });
+    };
+    const renderField = (channelKey, recordValue, fieldKey, fieldSchema) => {
+        const rawSchema = unwrapSchema(fieldSchema);
+        const description = rawSchema.description ?? '';
+        const label = toLabel(fieldKey);
+        const currentValue = recordValue[fieldKey];
+        const valueToUse = currentValue !== undefined ? currentValue : getDefaultValue(fieldSchema);
+        if (rawSchema instanceof z.ZodString) {
+            const isSensitive = isSensitiveKey(fieldKey);
+            return (_jsx(FieldRow, { title: label, description: description, icon: getTypeIcon('string'), children: isSensitive
+                    ? (_jsx(Input.Password, { value: typeof valueToUse === 'string' ? valueToUse : '', onChange: (event) => {
+                            updateChannel(channelKey, { ...recordValue, [fieldKey]: event.target.value });
+                        }, placeholder: t('config.editor.secretPlaceholder') }))
+                    : (_jsx(Input, { value: typeof valueToUse === 'string' ? valueToUse : '', onChange: (event) => {
+                            updateChannel(channelKey, { ...recordValue, [fieldKey]: event.target.value });
+                        } })) }, fieldKey));
+        }
+        if (rawSchema instanceof z.ZodNumber) {
+            return (_jsx(FieldRow, { title: label, description: description, icon: getTypeIcon('number'), children: _jsx(InputNumber, { value: typeof valueToUse === 'number' ? valueToUse : 0, onChange: (nextValue) => {
+                        updateChannel(channelKey, { ...recordValue, [fieldKey]: nextValue ?? 0 });
+                    } }) }, fieldKey));
+        }
+        if (rawSchema instanceof z.ZodBoolean) {
+            return (_jsx(FieldRow, { title: label, description: description, icon: getTypeIcon('boolean'), children: _jsx(Switch, { checked: Boolean(valueToUse), onChange: (checked) => {
+                        updateChannel(channelKey, { ...recordValue, [fieldKey]: checked });
+                    } }) }, fieldKey));
+        }
+        if (rawSchema instanceof z.ZodEnum || rawSchema instanceof z.ZodNativeEnum) {
+            const optionValues = (rawSchema instanceof z.ZodEnum
+                ? rawSchema.options
+                : Object.values(rawSchema.enum)).map((option) => String(option));
+            return (_jsx(FieldRow, { title: label, description: description, icon: getTypeIcon('string'), children: _jsx(Select, { value: typeof valueToUse === 'string' ? valueToUse : undefined, options: optionValues.map((option) => ({ value: option, label: option })), onChange: (nextValue) => {
+                        updateChannel(channelKey, { ...recordValue, [fieldKey]: nextValue });
+                    } }) }, fieldKey));
+        }
+        if (rawSchema instanceof z.ZodArray) {
+            const inner = unwrapSchema(rawSchema.element);
+            if (inner instanceof z.ZodString) {
+                const items = Array.isArray(valueToUse)
+                    ? valueToUse.filter(item => typeof item === 'string')
+                    : [];
+                return (_jsx(FieldRow, { title: label, description: description, icon: getTypeIcon('array'), layout: 'stacked', children: _jsx(StringArrayEditor, { value: items, onChange: (nextValue) => {
+                            updateChannel(channelKey, { ...recordValue, [fieldKey]: nextValue });
+                        }, t: t }) }, fieldKey));
+            }
+            return (_jsx(FieldRow, { title: label, description: description, icon: getTypeIcon('array'), layout: 'stacked', children: _jsx(ComplexTextEditor, { value: Array.isArray(valueToUse) ? valueToUse : [], onChange: (nextValue) => {
+                        updateChannel(channelKey, { ...recordValue, [fieldKey]: nextValue });
+                    } }) }, fieldKey));
+        }
+        return (_jsx(FieldRow, { title: label, description: description, icon: getTypeIcon('object'), layout: 'stacked', children: _jsx(ComplexTextEditor, { value: valueToUse ?? {}, onChange: (nextValue) => {
+                    updateChannel(channelKey, { ...recordValue, [fieldKey]: nextValue });
+                } }) }, fieldKey));
+    };
+    return (_jsxs("div", { className: 'config-view__record-list', children: [_jsx("div", { className: 'config-view__record-add', children: _jsxs("div", { className: 'config-view__record-add-inputs', children: [_jsx(Input, { value: newKey, placeholder: keyPlaceholder, onChange: (event) => setNewKey(event.target.value) }), _jsx(Select, { value: newType, options: typeOptions, onChange: (nextValue) => setNewType(nextValue) }), _jsx(Tooltip, { title: t('common.confirm'), children: _jsx(Button, { size: 'small', type: 'primary', className: 'config-view__icon-button', "aria-label": t('common.confirm'), icon: _jsx("span", { className: 'material-symbols-rounded', children: "check" }), disabled: newKey.trim() === '' || Object.hasOwn(value, newKey) || newType === '', onClick: () => {
+                                    const definition = getChannelDefinition(newType);
+                                    if (!definition)
+                                        return;
+                                    onChange({
+                                        ...value,
+                                        [newKey]: buildRecordDefaults(definition)
+                                    });
+                                    setNewKey('');
+                                } }) })] }) }), entries.map(([key, itemValue]) => {
+                const recordValue = (itemValue != null && typeof itemValue === 'object')
+                    ? itemValue
+                    : {};
+                const type = typeof recordValue.type === 'string' ? recordValue.type : undefined;
+                const definition = getChannelDefinition(type);
+                const titleValue = typeof recordValue.title === 'string' ? recordValue.title : '';
+                const descriptionValue = typeof recordValue.description === 'string' ? recordValue.description : '';
+                const displayName = titleValue.trim() !== '' ? titleValue : key;
+                const typeLabel = definition?.label ?? type ?? t('config.editor.unknownChannelType');
+                const isCollapsed = collapsedKeys[key] === true;
+                const shape = definition ? getObjectShape(definition.configSchema) : {};
+                const fieldEntries = Object.entries(shape)
+                    .filter(([fieldKey]) => fieldKey !== 'type')
+                    .sort(([a], [b]) => {
+                    const order = ['title', 'description', 'enabled', 'admins'];
+                    const aIndex = order.indexOf(a);
+                    const bIndex = order.indexOf(b);
+                    if (aIndex === -1 && bIndex === -1)
+                        return a.localeCompare(b);
+                    if (aIndex === -1)
+                        return 1;
+                    if (bIndex === -1)
+                        return -1;
+                    return aIndex - bIndex;
+                });
+                return (_jsxs("div", { className: `config-view__record-card${isCollapsed ? ' config-view__record-card--collapsed' : ''}`, children: [_jsxs("div", { className: 'config-view__record-title', children: [_jsxs("div", { className: 'config-view__record-title-left', children: [_jsx(Tooltip, { title: isCollapsed ? t('config.editor.expand') : t('config.editor.collapse'), children: _jsx(Button, { size: 'small', type: 'text', className: 'config-view__icon-button config-view__icon-button--compact', "aria-label": isCollapsed ? t('config.editor.expand') : t('config.editor.collapse'), icon: _jsx("span", { className: 'material-symbols-rounded', children: isCollapsed ? 'chevron_right' : 'expand_more' }), onClick: () => {
+                                                    setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }));
+                                                } }) }), _jsxs("div", { className: 'config-view__record-heading', children: [_jsx("div", { children: displayName }), _jsxs("div", { className: 'config-view__record-subtitle', children: [key, " \u00B7 ", typeLabel] }), descriptionValue !== '' && (_jsx("div", { className: 'config-view__record-desc', children: descriptionValue }))] })] }), _jsx("div", { className: 'config-view__record-actions', children: _jsx(Tooltip, { title: t('config.editor.remove'), children: _jsx(Button, { size: 'small', type: 'text', danger: true, className: 'config-view__icon-button config-view__icon-button--compact', "aria-label": t('config.editor.remove'), icon: _jsx("span", { className: 'material-symbols-rounded', children: "delete" }), onClick: () => {
+                                                const updated = { ...value };
+                                                delete updated[key];
+                                                onChange(updated);
+                                            } }) }) })] }), _jsx("div", { className: 'config-view__record-body', children: _jsxs("div", { className: 'config-view__record-fields', children: [_jsx(FieldRow, { title: t('config.editor.channelType'), description: definition?.description ?? '', icon: getTypeIcon('string'), children: _jsx(Select, { value: type, options: typeOptions, onChange: (nextType) => {
+                                                const nextDefinition = getChannelDefinition(nextType);
+                                                if (!nextDefinition)
+                                                    return;
+                                                const defaults = buildRecordDefaults(nextDefinition);
+                                                const preserved = Object.fromEntries(Object.entries(recordValue).filter(([fieldKey]) => baseKeys.has(fieldKey)));
+                                                updateChannel(key, { ...defaults, ...preserved, type: nextType });
+                                            } }) }), fieldEntries.map(([fieldKey, fieldSchema]) => (renderField(key, recordValue, fieldKey, fieldSchema)))] }) })] }, key));
+            })] }));
+};

package/dist/apps/client/src/components/config/record-editors/KeyValueEditor.d.ts

@@ -0,0 +1,8 @@
+import './KeyValueEditor.scss';
+import type { TranslationFn } from '../configUtils';
+export declare const KeyValueEditor: ({ value, onChange, t, keyPlaceholder }: {
+    value: Record<string, string>;
+    onChange: (nextValue: Record<string, string>) => void;
+    t: TranslationFn;
+    keyPlaceholder: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/config/record-editors/KeyValueEditor.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './KeyValueEditor.scss';
+import { Button, Input, Tooltip } from 'antd';
+import { useState } from 'react';
+import { isSensitiveKey } from '../configUtils';
+export const KeyValueEditor = ({ value, onChange, t, keyPlaceholder }) => {
+    const [newKey, setNewKey] = useState('');
+    const [newValue, setNewValue] = useState('');
+    const entries = Object.entries(value);
+    return (_jsxs("div", { className: 'config-view__array-list', children: [entries.map(([key, val]) => (_jsxs("div", { className: 'config-view__array-item', children: [_jsx("div", { className: 'config-view__record-key', children: key }), isSensitiveKey(key)
+                        ? (_jsx(Input.Password, { value: val, onChange: (event) => {
+                                onChange({ ...value, [key]: event.target.value });
+                            }, placeholder: t('config.editor.fieldValue') }))
+                        : (_jsx(Input, { value: val, onChange: (event) => {
+                                onChange({ ...value, [key]: event.target.value });
+                            }, placeholder: t('config.editor.fieldValue') })), _jsx(Tooltip, { title: t('config.editor.remove'), children: _jsx(Button, { size: 'small', type: 'text', danger: true, className: 'config-view__icon-button config-view__icon-button--compact', "aria-label": t('config.editor.remove'), icon: _jsx("span", { className: 'material-symbols-rounded', children: "delete" }), onClick: () => {
+                                const updated = { ...value };
+                                delete updated[key];
+                                onChange(updated);
+                            } }) })] }, key))), _jsx("div", { className: 'config-view__array-add', children: _jsxs("div", { className: 'config-view__array-add-inputs', children: [_jsx(Input, { value: newKey, placeholder: keyPlaceholder, onChange: (event) => setNewKey(event.target.value) }), _jsx(Input, { value: newValue, placeholder: t('config.editor.fieldValue'), onChange: (event) => setNewValue(event.target.value) }), _jsx(Tooltip, { title: t('common.confirm'), children: _jsx(Button, { size: 'small', type: 'primary', className: 'config-view__icon-button', "aria-label": t('common.confirm'), icon: _jsx("span", { className: 'material-symbols-rounded', children: "check" }), disabled: newKey.trim() === '' || Object.hasOwn(value, newKey), onClick: () => {
+                                    const nextValue = { ...value, [newKey]: newValue };
+                                    onChange(nextValue);
+                                    setNewKey('');
+                                    setNewValue('');
+                                } }) })] }) })] }));
+};

package/dist/apps/client/src/components/config/record-editors/McpServersRecordEditor.d.ts

@@ -0,0 +1,8 @@
+import './McpServersRecordEditor.scss';
+import type { TranslationFn } from '../configUtils';
+export declare const McpServersRecordEditor: ({ value, onChange, t, keyPlaceholder }: {
+    value: Record<string, unknown>;
+    onChange: (nextValue: Record<string, unknown>) => void;
+    t: TranslationFn;
+    keyPlaceholder: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/config/record-editors/McpServersRecordEditor.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './McpServersRecordEditor.scss';
+import { Button, Input, Select, Switch, Tooltip } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { StringArrayEditor } from '../ConfigEditors';
+import { FieldRow } from '../ConfigFieldRow';
+import { getTypeIcon } from '../configUtils';
+import { KeyValueEditor } from './KeyValueEditor';
+export const McpServersRecordEditor = ({ value, onChange, t, keyPlaceholder }) => {
+    const [newKey, setNewKey] = useState('');
+    const entries = useMemo(() => Object.entries(value), [value]);
+    const [collapsedKeys, setCollapsedKeys] = useState(() => (Object.fromEntries(entries.map(([key]) => [key, true]))));
+    useEffect(() => {
+        setCollapsedKeys(prev => {
+            const next = {};
+            for (const [key] of entries) {
+                next[key] = prev[key] ?? true;
+            }
+            return next;
+        });
+    }, [entries]);
+    return (_jsxs("div", { className: 'config-view__record-list', children: [entries.map(([key, itemValue]) => {
+                const recordValue = (itemValue != null && typeof itemValue === 'object')
+                    ? itemValue
+                    : {};
+                const typeValue = typeof recordValue.type === 'string' ? recordValue.type : 'command';
+                const envValue = (recordValue.env != null && typeof recordValue.env === 'object')
+                    ? recordValue.env
+                    : {};
+                const headersValue = (recordValue.headers != null && typeof recordValue.headers === 'object')
+                    ? recordValue.headers
+                    : {};
+                const argsValue = Array.isArray(recordValue.args)
+                    ? recordValue.args.filter(item => typeof item === 'string')
+                    : [];
+                const updateRecord = (nextValue) => {
+                    onChange({ ...value, [key]: nextValue });
+                };
+                const isCollapsed = collapsedKeys[key] === true;
+                return (_jsxs("div", { className: `config-view__record-card${isCollapsed ? ' config-view__record-card--collapsed' : ''}`, children: [_jsxs("div", { className: 'config-view__record-title', children: [_jsxs("div", { className: 'config-view__record-title-left', children: [_jsx(Tooltip, { title: isCollapsed ? t('config.editor.expand') : t('config.editor.collapse'), children: _jsx(Button, { size: 'small', type: 'text', className: 'config-view__icon-button config-view__icon-button--compact', "aria-label": isCollapsed ? t('config.editor.expand') : t('config.editor.collapse'), icon: _jsx("span", { className: 'material-symbols-rounded', children: isCollapsed ? 'chevron_right' : 'expand_more' }), onClick: () => {
+                                                    setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }));
+                                                } }) }), _jsx("span", { children: key })] }), _jsx(Tooltip, { title: t('config.editor.remove'), children: _jsx(Button, { size: 'small', type: 'text', danger: true, className: 'config-view__icon-button config-view__icon-button--compact', "aria-label": t('config.editor.remove'), icon: _jsx("span", { className: 'material-symbols-rounded', children: "delete" }), onClick: () => {
+                                            const updated = { ...value };
+                                            delete updated[key];
+                                            onChange(updated);
+                                        } }) })] }), _jsx("div", { className: 'config-view__record-body', children: _jsxs("div", { className: 'config-view__record-fields', children: [_jsx(FieldRow, { title: t('config.fields.mcpServer.enabled.label'), description: t('config.fields.mcpServer.enabled.desc'), icon: getTypeIcon('boolean'), children: _jsx(Switch, { checked: Boolean(recordValue.enabled), onChange: (next) => {
+                                                updateRecord({ ...recordValue, enabled: next });
+                                            } }) }), _jsx(FieldRow, { title: t('config.fields.mcpServer.type.label'), description: t('config.fields.mcpServer.type.desc'), icon: getTypeIcon('string'), children: _jsx(Select, { value: typeValue, options: [
+                                                { value: 'command', label: t('config.options.mcp.command') },
+                                                { value: 'sse', label: t('config.options.mcp.sse') },
+                                                { value: 'http', label: t('config.options.mcp.http') }
+                                            ], onChange: (next) => {
+                                                const nextRecord = { ...recordValue };
+                                                if (next === 'command') {
+                                                    delete nextRecord.type;
+                                                    if (nextRecord.command == null)
+                                                        nextRecord.command = '';
+                                                    if (nextRecord.args == null)
+                                                        nextRecord.args = [];
+                                                    delete nextRecord.url;
+                                                    delete nextRecord.headers;
+                                                }
+                                                else {
+                                                    nextRecord.type = next;
+                                                    if (nextRecord.url == null)
+                                                        nextRecord.url = '';
+                                                    if (nextRecord.headers == null)
+                                                        nextRecord.headers = {};
+                                                    delete nextRecord.command;
+                                                    delete nextRecord.args;
+                                                }
+                                                updateRecord(nextRecord);
+                                            } }) }), typeValue === 'command' && (_jsxs(_Fragment, { children: [_jsx(FieldRow, { title: t('config.fields.mcpServer.command.label'), description: t('config.fields.mcpServer.command.desc'), icon: getTypeIcon('string'), children: _jsx(Input, { value: typeof recordValue.command === 'string' ? recordValue.command : '', onChange: (event) => {
+                                                        updateRecord({ ...recordValue, command: event.target.value });
+                                                    }, placeholder: t('config.editor.commandPlaceholder') }) }), _jsx(FieldRow, { title: t('config.fields.mcpServer.args.label'), description: t('config.fields.mcpServer.args.desc'), icon: getTypeIcon('array'), layout: 'stacked', children: _jsx(StringArrayEditor, { value: argsValue, onChange: (next) => {
+                                                        updateRecord({ ...recordValue, args: next });
+                                                    }, t: t }) })] })), typeValue !== 'command' && (_jsxs(_Fragment, { children: [_jsx(FieldRow, { title: t('config.fields.mcpServer.url.label'), description: t('config.fields.mcpServer.url.desc'), icon: getTypeIcon('string'), children: _jsx(Input, { value: typeof recordValue.url === 'string' ? recordValue.url : '', onChange: (event) => {
+                                                        updateRecord({ ...recordValue, url: event.target.value });
+                                                    }, placeholder: t('config.editor.urlPlaceholder') }) }), _jsx(FieldRow, { title: t('config.fields.mcpServer.headers.label'), description: t('config.fields.mcpServer.headers.desc'), icon: getTypeIcon('object'), layout: 'stacked', children: _jsx(KeyValueEditor, { value: headersValue, onChange: (next) => {
+                                                        updateRecord({ ...recordValue, headers: next });
+                                                    }, t: t, keyPlaceholder: t('config.editor.newHeaderName') }) })] })), _jsx(FieldRow, { title: t('config.fields.mcpServer.env.label'), description: t('config.fields.mcpServer.env.desc'), icon: getTypeIcon('object'), layout: 'stacked', children: _jsx(KeyValueEditor, { value: envValue, onChange: (next) => {
+                                                updateRecord({ ...recordValue, env: next });
+                                            }, t: t, keyPlaceholder: t('config.editor.newEnvVarName') }) })] }) })] }, key));
+            }), _jsx("div", { className: 'config-view__record-add', children: _jsxs("div", { className: 'config-view__record-add-inputs', children: [_jsx(Input, { value: newKey, placeholder: keyPlaceholder, onChange: (event) => setNewKey(event.target.value) }), _jsx(Tooltip, { title: t('common.confirm'), children: _jsx(Button, { size: 'small', type: 'primary', className: 'config-view__icon-button', "aria-label": t('common.confirm'), icon: _jsx("span", { className: 'material-symbols-rounded', children: "check" }), disabled: newKey.trim() === '' || Object.hasOwn(value, newKey), onClick: () => {
+                                    onChange({
+                                        ...value,
+                                        [newKey]: {
+                                            enabled: true,
+                                            command: '',
+                                            args: []
+                                        }
+                                    });
+                                    setNewKey('');
+                                } }) })] }) })] }));
+};

package/dist/apps/client/src/components/config/record-editors/ModelServicesRecordEditor.d.ts

@@ -0,0 +1,8 @@
+import './ModelServicesRecordEditor.scss';
+import type { TranslationFn } from '../configUtils';
+export declare const ModelServicesRecordEditor: ({ value, onChange, t, keyPlaceholder }: {
+    value: Record<string, unknown>;
+    onChange: (nextValue: Record<string, unknown>) => void;
+    t: TranslationFn;
+    keyPlaceholder: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/config/record-editors/ModelServicesRecordEditor.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ModelServicesRecordEditor.scss';
+import { Button, Input, InputNumber, Tooltip } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { ComplexTextEditor, StringArrayEditor } from '../ConfigEditors';
+import { FieldRow } from '../ConfigFieldRow';
+import { getTypeIcon } from '../configUtils';
+export const ModelServicesRecordEditor = ({ value, onChange, t, keyPlaceholder }) => {
+    const [newKey, setNewKey] = useState('');
+    const entries = useMemo(() => Object.entries(value), [value]);
+    const [collapsedKeys, setCollapsedKeys] = useState(() => (Object.fromEntries(entries.map(([key]) => [key, true]))));
+    useEffect(() => {
+        setCollapsedKeys(prev => {
+            const next = {};
+            for (const [key] of entries) {
+                next[key] = prev[key] ?? true;
+            }
+            return next;
+        });
+    }, [entries]);
+    return (_jsxs("div", { className: 'config-view__record-list', children: [entries.map(([key, itemValue]) => {
+                const recordValue = (itemValue != null && typeof itemValue === 'object')
+                    ? itemValue
+                    : {};
+                const titleValue = typeof recordValue.title === 'string' ? recordValue.title : '';
+                const descriptionValue = typeof recordValue.description === 'string' ? recordValue.description : '';
+                const displayName = titleValue.trim() !== '' ? titleValue : key;
+                const models = Array.isArray(recordValue.models)
+                    ? recordValue.models.filter(item => typeof item === 'string')
+                    : [];
+                const isCollapsed = collapsedKeys[key] === true;
+                return (_jsxs("div", { className: `config-view__record-card${isCollapsed ? ' config-view__record-card--collapsed' : ''}`, children: [_jsxs("div", { className: 'config-view__record-title', children: [_jsxs("div", { className: 'config-view__record-title-left', children: [_jsx(Tooltip, { title: isCollapsed ? t('config.editor.expand') : t('config.editor.collapse'), children: _jsx(Button, { size: 'small', type: 'text', className: 'config-view__icon-button config-view__icon-button--compact', "aria-label": isCollapsed ? t('config.editor.expand') : t('config.editor.collapse'), icon: _jsx("span", { className: 'material-symbols-rounded', children: isCollapsed ? 'chevron_right' : 'expand_more' }), onClick: () => {
+                                                    setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }));
+                                                } }) }), _jsxs("div", { className: 'config-view__record-heading', children: [_jsx("div", { children: displayName }), displayName !== key && (_jsx("div", { className: 'config-view__record-subtitle', children: key })), descriptionValue !== '' && (_jsx("div", { className: 'config-view__record-desc', children: descriptionValue }))] })] }), _jsx(Tooltip, { title: t('config.editor.remove'), children: _jsx(Button, { size: 'small', type: 'text', danger: true, className: 'config-view__icon-button config-view__icon-button--compact', "aria-label": t('config.editor.remove'), icon: _jsx("span", { className: 'material-symbols-rounded', children: "delete" }), onClick: () => {
+                                            const updated = { ...value };
+                                            delete updated[key];
+                                            onChange(updated);
+                                        } }) })] }), _jsx("div", { className: 'config-view__record-body', children: _jsxs("div", { className: 'config-view__record-fields', children: [_jsx(FieldRow, { title: t('config.fields.modelServices.item.title.label'), description: t('config.fields.modelServices.item.title.desc'), icon: getTypeIcon('string'), children: _jsx(Input, { value: titleValue, onChange: (event) => {
+                                                onChange({ ...value, [key]: { ...recordValue, title: event.target.value } });
+                                            }, placeholder: t('config.editor.titlePlaceholder') }) }), _jsx(FieldRow, { title: t('config.fields.modelServices.item.description.label'), description: t('config.fields.modelServices.item.description.desc'), icon: getTypeIcon('string'), layout: 'stacked', children: _jsx(Input.TextArea, { value: descriptionValue, onChange: (event) => {
+                                                onChange({ ...value, [key]: { ...recordValue, description: event.target.value } });
+                                            }, autoSize: { minRows: 2 }, placeholder: t('config.editor.descriptionPlaceholder') }) }), _jsx(FieldRow, { title: t('config.fields.modelServices.item.apiBaseUrl.label'), description: t('config.fields.modelServices.item.apiBaseUrl.desc'), icon: getTypeIcon('string'), children: _jsx(Input, { value: typeof recordValue.apiBaseUrl === 'string' ? recordValue.apiBaseUrl : '', onChange: (event) => {
+                                                onChange({ ...value, [key]: { ...recordValue, apiBaseUrl: event.target.value } });
+                                            } }) }), _jsx(FieldRow, { title: t('config.fields.modelServices.item.apiKey.label'), description: t('config.fields.modelServices.item.apiKey.desc'), icon: getTypeIcon('string'), children: _jsx(Input.Password, { value: typeof recordValue.apiKey === 'string' ? recordValue.apiKey : '', onChange: (event) => {
+                                                onChange({ ...value, [key]: { ...recordValue, apiKey: event.target.value } });
+                                            }, placeholder: t('config.editor.secretPlaceholder') }) }), _jsx(FieldRow, { title: t('config.fields.modelServices.item.models.label'), description: t('config.fields.modelServices.item.models.desc'), icon: getTypeIcon('array'), layout: 'stacked', children: _jsx(StringArrayEditor, { value: models, onChange: (next) => {
+                                                onChange({ ...value, [key]: { ...recordValue, models: next } });
+                                            }, t: t }) }), _jsx(FieldRow, { title: t('config.fields.modelServices.item.modelsAlias.label'), description: t('config.fields.modelServices.item.modelsAlias.desc'), icon: getTypeIcon('object'), layout: 'stacked', children: _jsx(ComplexTextEditor, { value: recordValue.modelsAlias ?? {}, onChange: (next) => {
+                                                onChange({ ...value, [key]: { ...recordValue, modelsAlias: next } });
+                                            } }) }), _jsx(FieldRow, { title: t('config.fields.modelServices.item.timeoutMs.label'), description: t('config.fields.modelServices.item.timeoutMs.desc'), icon: getTypeIcon('number'), children: _jsx(InputNumber, { min: 1, step: 1000, value: typeof recordValue.timeoutMs === 'number' ? recordValue.timeoutMs : undefined, onChange: (nextValue) => {
+                                                onChange({
+                                                    ...value,
+                                                    [key]: {
+                                                        ...recordValue,
+                                                        ...(typeof nextValue === 'number' ? { timeoutMs: nextValue } : { timeoutMs: undefined })
+                                                    }
+                                                });
+                                            } }) }), _jsx(FieldRow, { title: t('config.fields.modelServices.item.maxOutputTokens.label'), description: t('config.fields.modelServices.item.maxOutputTokens.desc'), icon: getTypeIcon('number'), children: _jsx(InputNumber, { min: 1, step: 256, value: typeof recordValue.maxOutputTokens === 'number' ? recordValue.maxOutputTokens : undefined, onChange: (nextValue) => {
+                                                onChange({
+                                                    ...value,
+                                                    [key]: {
+                                                        ...recordValue,
+                                                        ...(typeof nextValue === 'number'
+                                                            ? { maxOutputTokens: nextValue }
+                                                            : { maxOutputTokens: undefined })
+                                                    }
+                                                });
+                                            } }) }), _jsx(FieldRow, { title: t('config.fields.modelServices.item.extra.label'), description: t('config.fields.modelServices.item.extra.desc'), icon: getTypeIcon('object'), layout: 'stacked', children: _jsx(ComplexTextEditor, { value: recordValue.extra ?? {}, onChange: (next) => {
+                                                onChange({ ...value, [key]: { ...recordValue, extra: next } });
+                                            } }) })] }) })] }, key));
+            }), _jsx("div", { className: 'config-view__record-add', children: _jsxs("div", { className: 'config-view__record-add-inputs', children: [_jsx(Input, { value: newKey, placeholder: keyPlaceholder, onChange: (event) => setNewKey(event.target.value) }), _jsx(Tooltip, { title: t('common.confirm'), children: _jsx(Button, { size: 'small', type: 'primary', className: 'config-view__icon-button', "aria-label": t('common.confirm'), icon: _jsx("span", { className: 'material-symbols-rounded', children: "check" }), disabled: newKey.trim() === '' || Object.hasOwn(value, newKey), onClick: () => {
+                                    onChange({
+                                        ...value,
+                                        [newKey]: {
+                                            title: '',
+                                            description: '',
+                                            apiBaseUrl: '',
+                                            apiKey: '',
+                                            models: [],
+                                            modelsAlias: {},
+                                            timeoutMs: undefined,
+                                            maxOutputTokens: undefined,
+                                            extra: {}
+                                        }
+                                    });
+                                    setNewKey('');
+                                } }) })] }) })] }));
+};

package/dist/apps/client/src/components/config/record-editors/RecordJsonEditor.d.ts

@@ -0,0 +1,8 @@
+import './RecordJsonEditor.scss';
+import type { TranslationFn } from '../configUtils';
+export declare const RecordJsonEditor: ({ value, onChange, t, keyPlaceholder }: {
+    value: Record<string, unknown>;
+    onChange: (nextValue: Record<string, unknown>) => void;
+    t: TranslationFn;
+    keyPlaceholder: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/config/record-editors/RecordJsonEditor.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './RecordJsonEditor.scss';
+import { Button, Input, Tooltip } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { ComplexTextEditor } from '../ConfigEditors';
+export const RecordJsonEditor = ({ value, onChange, t, keyPlaceholder }) => {
+    const [newKey, setNewKey] = useState('');
+    const entries = useMemo(() => Object.entries(value), [value]);
+    const [collapsedKeys, setCollapsedKeys] = useState(() => (Object.fromEntries(entries.map(([key]) => [key, true]))));
+    useEffect(() => {
+        setCollapsedKeys(prev => {
+            const next = {};
+            for (const [key] of entries) {
+                next[key] = prev[key] ?? true;
+            }
+            return next;
+        });
+    }, [entries]);
+    return (_jsxs("div", { className: 'config-view__record-list', children: [entries.map(([key, itemValue]) => {
+                const isCollapsed = collapsedKeys[key] === true;
+                return (_jsxs("div", { className: `config-view__record-card${isCollapsed ? ' config-view__record-card--collapsed' : ''}`, children: [_jsxs("div", { className: 'config-view__record-title', children: [_jsxs("div", { className: 'config-view__record-title-left', children: [_jsx(Tooltip, { title: isCollapsed ? t('config.editor.expand') : t('config.editor.collapse'), children: _jsx(Button, { size: 'small', type: 'text', className: 'config-view__icon-button config-view__icon-button--compact', "aria-label": isCollapsed ? t('config.editor.expand') : t('config.editor.collapse'), icon: _jsx("span", { className: 'material-symbols-rounded', children: isCollapsed ? 'chevron_right' : 'expand_more' }), onClick: () => {
+                                                    setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }));
+                                                } }) }), _jsx("span", { children: key })] }), _jsx(Tooltip, { title: t('config.editor.remove'), children: _jsx(Button, { size: 'small', type: 'text', danger: true, className: 'config-view__icon-button config-view__icon-button--compact', "aria-label": t('config.editor.remove'), icon: _jsx("span", { className: 'material-symbols-rounded', children: "delete" }), onClick: () => {
+                                            const updated = { ...value };
+                                            delete updated[key];
+                                            onChange(updated);
+                                        } }) })] }), _jsx("div", { className: 'config-view__record-body', children: _jsx(ComplexTextEditor, { value: itemValue, onChange: (next) => {
+                                    onChange({ ...value, [key]: next });
+                                } }) })] }, key));
+            }), _jsx("div", { className: 'config-view__record-add', children: _jsxs("div", { className: 'config-view__record-add-inputs', children: [_jsx(Input, { value: newKey, placeholder: keyPlaceholder, onChange: (event) => setNewKey(event.target.value) }), _jsx(Tooltip, { title: t('common.confirm'), children: _jsx(Button, { size: 'small', type: 'primary', className: 'config-view__icon-button', "aria-label": t('common.confirm'), icon: _jsx("span", { className: 'material-symbols-rounded', children: "check" }), disabled: newKey.trim() === '' || Object.hasOwn(value, newKey), onClick: () => {
+                                    onChange({ ...value, [newKey]: {} });
+                                    setNewKey('');
+                                } }) })] }) })] }));
+};

package/dist/apps/client/src/components/config/record-editors/index.d.ts

@@ -0,0 +1,6 @@
+export { BooleanRecordEditor } from './BooleanRecordEditor';
+export { ChannelRecordEditor } from './ChannelRecordEditor';
+export { KeyValueEditor } from './KeyValueEditor';
+export { McpServersRecordEditor } from './McpServersRecordEditor';
+export { ModelServicesRecordEditor } from './ModelServicesRecordEditor';
+export { RecordJsonEditor } from './RecordJsonEditor';

package/dist/apps/client/src/components/config/record-editors/index.js

@@ -0,0 +1,6 @@
+export { BooleanRecordEditor } from './BooleanRecordEditor';
+export { ChannelRecordEditor } from './ChannelRecordEditor';
+export { KeyValueEditor } from './KeyValueEditor';
+export { McpServersRecordEditor } from './McpServersRecordEditor';
+export { ModelServicesRecordEditor } from './ModelServicesRecordEditor';
+export { RecordJsonEditor } from './RecordJsonEditor';

package/dist/apps/client/src/components/knowledge-base/KnowledgeBaseView.d.ts

@@ -0,0 +1,2 @@
+import './KnowledgeBaseView.scss';
+export declare function KnowledgeBaseView(): import("react/jsx-runtime").JSX.Element;