@qikdev/mcp 6.8.0 → 6.8.3

package/build/src/tools/interface-builder.js

@@ -1,425 +1,1384 @@
-/**
- * Interface Builder - Main Orchestration Tool
- * Builds complete interfaces from natural language prompts
- */
 import { ConfigManager } from "../config.js";
-import { parseInterfacePrompt } from "./nlp-parser.js";
-import { getMarketplaceComponents } from "./component-marketplace.js";
-import { generateRoutes, generateMenus, addLegalPages } from "./route-generator.js";
-import { handleCreateContent } from "./create.js";
-/**
- * Build Interface from Prompt Tool
- */
-export const buildInterfaceFromPromptTool = {
-    name: "build_interface_from_prompt",
-    description: "🎨 Build a complete, beautiful interface from a natural language description. Examples: 'Create a portfolio website with about, work, and contact pages' or 'Build a restaurant app with menu, locations, and reservations'",
+import { parseNestedJsonStrings, createErrorResponse } from "./utils.js";
+import { getUserSessionData, getAvailableScopes, getScopeTitle, } from "./user.js";
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+const WELL_KNOWN_COMPONENTS = {
+    CUSTOM_CODE: '62b5a2bc6343c2335f85946b',
+    WEBSITE_SECTION: '647d02f56348660726cc552d',
+    BASIC_DIV: '64d86d3563ed2a77be372c9a',
+};
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+function generateUUID() {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < 10; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+async function fetchInterface(config, id) {
+    const response = await fetch(`${config.apiUrl || 'https://api.qik.dev'}/content/${id}`, {
+        headers: {
+            'Authorization': `Bearer ${config.accessToken}`,
+            'Content-Type': 'application/json',
+        }
+    });
+    if (!response.ok) {
+        if (response.status === 403)
+            throw new Error('Permission denied. Ensure token has interface view permission.');
+        if (response.status === 404)
+            throw new Error(`Interface ${id} not found.`);
+        throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+    }
+    return response.json();
+}
+async function saveInterface(config, id, data) {
+    const response = await fetch(`${config.apiUrl || 'https://api.qik.dev'}/content/${id}`, {
+        method: 'PUT',
+        headers: {
+            'Authorization': `Bearer ${config.accessToken}`,
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data)
+    });
+    if (!response.ok) {
+        if (response.status === 403)
+            throw new Error('Permission denied. Ensure token has interface edit permission.');
+        throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+    }
+    return response.json();
+}
+function findRouteByName(routes, name) {
+    for (const route of routes) {
+        if (route.name === name)
+            return route;
+        if (route.routes && route.routes.length > 0) {
+            const found = findRouteByName(route.routes, name);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+function getAllRouteNames(routes) {
+    const names = [];
+    for (const route of routes) {
+        if (route.name)
+            names.push(route.name);
+        if (route.routes && route.routes.length > 0) {
+            names.push(...getAllRouteNames(route.routes));
+        }
+    }
+    return names;
+}
+function findSectionByUUID(data, uuid) {
+    // Search header sections
+    if (data.header?.sections) {
+        const found = searchSectionsForUUID(data.header.sections, uuid);
+        if (found)
+            return found;
+    }
+    // Search footer sections
+    if (data.footer?.sections) {
+        const found = searchSectionsForUUID(data.footer.sections, uuid);
+        if (found)
+            return found;
+    }
+    // Search all routes recursively
+    if (data.routes) {
+        const found = searchRouteSectionsForUUID(data.routes, uuid);
+        if (found)
+            return found;
+    }
+    // Search interface-level slots
+    if (data.slots) {
+        for (const slot of data.slots) {
+            if (slot.sections) {
+                const found = searchSectionsForUUID(slot.sections, uuid);
+                if (found)
+                    return found;
+            }
+        }
+    }
+    return null;
+}
+function searchSectionsForUUID(sections, uuid) {
+    for (const section of sections) {
+        if (section.uuid === uuid)
+            return section;
+        if (section.slots) {
+            for (const slot of section.slots) {
+                if (slot.sections) {
+                    const found = searchSectionsForUUID(slot.sections, uuid);
+                    if (found)
+                        return found;
+                }
+            }
+        }
+    }
+    return null;
+}
+function searchRouteSectionsForUUID(routes, uuid) {
+    for (const route of routes) {
+        if (route.sections) {
+            const found = searchSectionsForUUID(route.sections, uuid);
+            if (found)
+                return found;
+        }
+        if (route.routes) {
+            const found = searchRouteSectionsForUUID(route.routes, uuid);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+function removeSectionByUUID(data, uuid) {
+    // Search header
+    if (data.header?.sections) {
+        if (removeSectionFromArray(data.header.sections, uuid))
+            return true;
+    }
+    // Search footer
+    if (data.footer?.sections) {
+        if (removeSectionFromArray(data.footer.sections, uuid))
+            return true;
+    }
+    // Search routes
+    if (data.routes) {
+        if (removeFromRoutes(data.routes, uuid))
+            return true;
+    }
+    // Search interface-level slots
+    if (data.slots) {
+        for (const slot of data.slots) {
+            if (slot.sections && removeSectionFromArray(slot.sections, uuid))
+                return true;
+        }
+    }
+    return false;
+}
+function removeSectionFromArray(sections, uuid) {
+    const index = sections.findIndex((s) => s.uuid === uuid);
+    if (index !== -1) {
+        sections.splice(index, 1);
+        return true;
+    }
+    // Search nested slots
+    for (const section of sections) {
+        if (section.slots) {
+            for (const slot of section.slots) {
+                if (slot.sections && removeSectionFromArray(slot.sections, uuid))
+                    return true;
+            }
+        }
+    }
+    return false;
+}
+function removeFromRoutes(routes, uuid) {
+    for (const route of routes) {
+        if (route.sections && removeSectionFromArray(route.sections, uuid))
+            return true;
+        if (route.routes && removeFromRoutes(route.routes, uuid))
+            return true;
+    }
+    return false;
+}
+function removeRouteByName(routes, name) {
+    const index = routes.findIndex((r) => r.name === name);
+    if (index !== -1) {
+        routes.splice(index, 1);
+        return true;
+    }
+    for (const route of routes) {
+        if (route.routes && removeRouteByName(route.routes, name))
+            return true;
+    }
+    return false;
+}
+function resolveTargetArray(data, target) {
+    switch (target.area) {
+        case 'header':
+            if (!data.header)
+                data.header = { sections: [] };
+            if (!data.header.sections)
+                data.header.sections = [];
+            return data.header.sections;
+        case 'footer':
+            if (!data.footer)
+                data.footer = { sections: [] };
+            if (!data.footer.sections)
+                data.footer.sections = [];
+            return data.footer.sections;
+        case 'route':
+            if (!target.routeName)
+                return null;
+            const route = findRouteByName(data.routes || [], target.routeName);
+            if (!route)
+                return null;
+            if (!route.sections)
+                route.sections = [];
+            return route.sections;
+        case 'slot':
+            if (!target.sectionUuid || !target.slotKey)
+                return null;
+            const section = findSectionByUUID(data, target.sectionUuid);
+            if (!section)
+                return null;
+            if (!section.slots)
+                section.slots = [];
+            let slot = section.slots.find((s) => s.key === target.slotKey);
+            if (!slot) {
+                slot = { title: target.slotKey, key: target.slotKey, sections: [] };
+                section.slots.push(slot);
+            }
+            if (!slot.sections)
+                slot.sections = [];
+            return slot.sections;
+        default:
+            return null;
+    }
+}
+function normalizeComponentId(id) {
+    if (!id)
+        return '';
+    if (typeof id === 'object')
+        return id._id || id;
+    return id;
+}
+function summarizeSections(sections, indent = '') {
+    const lines = [];
+    for (const section of sections || []) {
+        const compId = normalizeComponentId(section.componentID);
+        const shortId = compId.substring(0, 8);
+        const disabled = section.disabled ? ' [DISABLED]' : '';
+        lines.push(`${indent}- **${section.title || 'Section'}** (uuid: \`${section.uuid}\`, component: \`${shortId}...\`)${disabled}`);
+        if (section.slots) {
+            for (const slot of section.slots) {
+                if (slot.sections && slot.sections.length > 0) {
+                    lines.push(`${indent}  Slot "${slot.key}" (${slot.sections.length} sections):`);
+                    lines.push(...summarizeSections(slot.sections, indent + '    '));
+                }
+            }
+        }
+    }
+    return lines;
+}
+function summarizeRoutes(routes, indent = '') {
+    const lines = [];
+    for (const route of routes || []) {
+        if (route.type === 'folder') {
+            lines.push(`${indent}- **${route.title}** (folder)`);
+            if (route.routes) {
+                lines.push(...summarizeRoutes(route.routes, indent + '  '));
+            }
+        }
+        else {
+            const sectionCount = (route.sections || []).length;
+            lines.push(`${indent}- **${route.title}** (name: \`${route.name}\`, path: \`${route.path}\`, ${sectionCount} sections)`);
+        }
+    }
+    return lines;
+}
+function summarizeInterface(data) {
+    const lines = [];
+    lines.push(`# Interface: ${data.title || 'Untitled'}`);
+    lines.push(`**ID:** \`${data._id}\` | **Layout:** ${data.layout || 'default'}\n`);
+    // Routes
+    const routes = data.routes || [];
+    lines.push(`## Routes`);
+    if (routes.length > 0) {
+        lines.push(...summarizeRoutes(routes));
+    }
+    else {
+        lines.push('No routes defined.');
+    }
+    lines.push('');
+    // Header
+    lines.push(`## Header (${(data.header?.sections || []).length} sections)`);
+    if (data.header?.sections?.length > 0) {
+        lines.push(...summarizeSections(data.header.sections));
+    }
+    lines.push('');
+    // Footer
+    lines.push(`## Footer (${(data.footer?.sections || []).length} sections)`);
+    if (data.footer?.sections?.length > 0) {
+        lines.push(...summarizeSections(data.footer.sections));
+    }
+    lines.push('');
+    // Menus
+    const menus = data.menus || [];
+    lines.push(`## Menus (${menus.length})`);
+    for (const menu of menus) {
+        lines.push(`- **${menu.title}** (name: \`${menu.name}\`, ${(menu.items || []).length} items)`);
+    }
+    lines.push('');
+    // Custom Components
+    const components = data.components || [];
+    lines.push(`## Custom Components (${components.length})`);
+    for (const comp of components) {
+        lines.push(`- \`<${comp.name}/>\` - ${comp.title || comp.name}`);
+    }
+    lines.push('');
+    // Services
+    const services = data.services || [];
+    lines.push(`## Services (${services.length})`);
+    for (const svc of services) {
+        lines.push(`- **${svc.title || svc.name}** (name: \`${svc.name}\`)`);
+    }
+    lines.push('');
+    // Styles
+    const styles = data.styles || {};
+    const hasPre = styles.pre && styles.pre.trim().length > 0;
+    const hasPost = styles.post && styles.post.trim().length > 0;
+    const themeCount = (styles.themes || []).length;
+    lines.push(`## Styles`);
+    lines.push(`- Pre-SCSS: ${hasPre ? 'yes' : 'none'}`);
+    lines.push(`- Post-SCSS: ${hasPost ? 'yes' : 'none'}`);
+    lines.push(`- Themes: ${themeCount}`);
+    return lines.join('\n');
+}
+function formatSectionDetail(section) {
+    const lines = [];
+    const compId = normalizeComponentId(section.componentID);
+    lines.push(`## Section: ${section.title || 'Untitled'}`);
+    lines.push(`- **UUID:** \`${section.uuid}\``);
+    lines.push(`- **Component ID:** \`${compId}\``);
+    lines.push(`- **Version:** ${section.componentVersion || 'latest'}`);
+    lines.push(`- **Disabled:** ${section.disabled || false}`);
+    lines.push(`- **Themes:** ${JSON.stringify(section.themes || [])}`);
+    lines.push('');
+    lines.push(`### Model`);
+    lines.push('```json');
+    lines.push(JSON.stringify(section.model || {}, null, 2));
+    lines.push('```');
+    lines.push('');
+    if (section.slots && section.slots.length > 0) {
+        lines.push(`### Slots`);
+        for (const slot of section.slots) {
+            lines.push(`**${slot.title || slot.key}** (key: \`${slot.key}\`, ${(slot.sections || []).length} sections)`);
+            lines.push(...summarizeSections(slot.sections || [], '  '));
+        }
+    }
+    return lines.join('\n');
+}
+async function getConfigAndFetch(interfaceId) {
+    const configManager = new ConfigManager();
+    const config = await configManager.loadConfig();
+    if (!config)
+        throw new Error('Qik MCP server not configured. Run setup first.');
+    if (!interfaceId)
+        throw new Error('interfaceId is required');
+    const data = await fetchInterface(config, interfaceId);
+    return { config, data };
+}
+function createScopeSelectionPrompt(contentType, availableScopes, userSession) {
+    const scopeOptions = availableScopes.map(scopeId => {
+        const title = getScopeTitle(userSession, scopeId);
+        return `- **${title}** (ID: \`${scopeId}\`)`;
+    }).join('\n');
+    return {
+        content: [{
+                type: "text",
+                text: `Multiple scopes available for creating ${contentType}. Please specify one:\n\n${scopeOptions}\n\nCall again with the \`scope\` parameter set to the desired scope ID.`
+            }]
+    };
+}
+// ============================================================================
+// TOOL DEFINITIONS
+// ============================================================================
+export const createInterfaceTool = {
+    name: "create_interface",
+    description: `Create a new interface (website/app).
+
+An interface is a visual page builder document containing routes, sections, menus, components, and styles.
+
+After creating, use \`add_interface_route\`, \`add_interface_section\`, etc. to build it out.
+
+**Example:**
+\`\`\`json
+{ "title": "School Fair Website" }
+\`\`\``,
     inputSchema: {
         type: "object",
         properties: {
-            prompt: {
+            title: {
                 type: "string",
-                description: "Natural language description of the interface you want to build"
+                description: "Interface title (e.g., 'School Fair Website')"
             },
             scope: {
                 type: "string",
-                description: "The scope ID to create the interface in. If not provided and multiple scopes are available, you'll be prompted to select one."
+                description: "Scope ID to create in. Omit to auto-select if only one scope available."
+            }
+        },
+        required: ["title"]
+    }
+};
+export const getInterfaceTool = {
+    name: "get_interface",
+    description: `Get an interface's structure.
+
+By default returns a **summary** (routes, menus, components, services, styles overview) to save context.
+Use \`routeName\` to see full section details for a specific route.
+Use \`sectionUuid\` to see full details for a specific section including its model.
+
+**Examples:**
+\`\`\`json
+{ "interfaceId": "abc123" }
+{ "interfaceId": "abc123", "routeName": "home" }
+{ "interfaceId": "abc123", "sectionUuid": "PBqx5sBIGc" }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: {
+                type: "string",
+                description: "The interface content ID"
             },
-            primaryColor: {
+            routeName: {
                 type: "string",
-                description: "Optional primary color for the interface (hex code, e.g., '#4a90e2'). Defaults to a nice blue."
+                description: "Get full section details for this route"
             },
-            includeAuth: {
-                type: "boolean",
-                description: "Force include authentication pages even if not mentioned in prompt. Defaults to auto-detect."
+            sectionUuid: {
+                type: "string",
+                description: "Get full details for this specific section"
             }
         },
-        required: ["prompt"],
-        additionalProperties: false
-    },
+        required: ["interfaceId"]
+    }
 };
-/**
- * Handler for building interfaces from prompts
- */
-export async function handleBuildInterfaceFromPrompt(args) {
-    try {
-        const configManager = new ConfigManager();
-        const config = await configManager.loadConfig();
-        if (!config) {
-            throw new Error('Qik MCP server not configured. Run setup first.');
-        }
-        console.log('🎨 Building interface structure from prompt...');
-        // Step 1: Parse the natural language prompt
-        const parsed = parseInterfacePrompt(args.prompt);
-        console.log('📋 Parsed requirements:', {
-            appName: parsed.appName,
-            appType: parsed.appType,
-            requiresAuth: parsed.requiresAuth,
-            pages: parsed.pages.map(p => p.name),
-            features: parsed.features
-        });
-        // Step 2: Fetch available components and glossary
-        const [components, glossaryResponse] = await Promise.all([
-            getMarketplaceComponents(config),
-            fetchGlossary(config)
-        ]);
-        console.log(`📦 Found ${components.length} available components`);
-        console.log(`📚 Found ${glossaryResponse.length} content types in glossary`);
-        // Step 3: Generate routes from parsed pages
-        const routes = await generateRoutes(parsed.pages, components, glossaryResponse, config);
-        console.log(`🛣️ Generated ${routes.length} routes`);
-        // Step 4: Add authentication pages if needed
-        if (parsed.requiresAuth || args.includeAuth) {
-            addAuthPages(routes, components);
-            console.log('🔐 Added authentication pages');
-        }
-        // Step 5: Add legal pages (Privacy Policy, Terms)
-        addLegalPages(routes, components);
-        console.log('📄 Added legal pages');
-        // Step 6: Generate menus
-        const menus = generateMenus(routes);
-        console.log(`📋 Generated ${menus.length} menus`);
-        // Step 7: Generate styles
-        const styles = generateInterfaceStyles(args.primaryColor);
-        const header = generateHeader(menus, components);
-        const footer = generateFooter(menus, components);
-        console.log('✨ Interface structure complete, delegating to create_content...');
-        // Step 8: Delegate to create_content with the built interface structure
-        // This will handle scope selection, permissions, and creation
-        return await handleCreateContent({
-            typeKey: "interface",
-            title: parsed.appName,
-            seo: {
-                title: parsed.appName,
-                description: `${parsed.appName} - Built with Qik`
-            },
-            menus,
-            services: [],
-            components: [],
-            styles,
-            header,
-            footer,
-            slots: [],
-            layout: '<div><header-slot /><route-slot /><footer-slot /></div>',
-            routes,
-            fields: [],
-            scope: args.scope // Pass through scope if provided
-        });
+export const publishInterfaceTool = {
+    name: "publish_interface",
+    description: `Publish an interface snapshot. Creates a frozen version that can be deployed.
+
+**Example:**
+\`\`\`json
+{ "interfaceId": "abc123" }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: {
+                type: "string",
+                description: "The interface content ID"
+            }
+        },
+        required: ["interfaceId"]
     }
-    catch (error) {
-        console.error('❌ Interface build failed:', error);
-        return {
-            content: [{
-                    type: "text",
-                    text: `❌ Failed to build interface: ${error.message}\n\n${error.stack || ''}`
-                }]
-        };
+};
+export const addInterfaceRouteTool = {
+    name: "add_interface_route",
+    description: `Add a route (page) to an interface.
+
+Routes can be nested inside folder-type routes using \`parentRouteName\`.
+Dynamic segments use \`:param\` syntax (e.g., \`/article/:slug\`).
+
+**Examples:**
+\`\`\`json
+{ "interfaceId": "abc123", "title": "Home", "path": "/", "name": "home" }
+{ "interfaceId": "abc123", "title": "Article Detail", "path": "/articles/:slug", "name": "articleDetail" }
+{ "interfaceId": "abc123", "title": "Legal", "path": "", "name": "legal", "type": "folder" }
+{ "interfaceId": "abc123", "title": "Privacy", "path": "/privacy", "name": "privacy", "parentRouteName": "legal" }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            title: { type: "string", description: "Route title (e.g., 'About Us')" },
+            path: { type: "string", description: "URL path (e.g., '/about'). Use :param for dynamic segments." },
+            name: { type: "string", description: "Unique route name in camelCase (e.g., 'aboutUs')" },
+            type: { type: "string", enum: ["route", "folder"], description: "Route type. Default: 'route'" },
+            parentRouteName: { type: "string", description: "Name of parent folder route for nesting" },
+            headerDisabled: { type: "boolean", description: "Disable the global header on this route" },
+            footerDisabled: { type: "boolean", description: "Disable the global footer on this route" }
+        },
+        required: ["interfaceId", "title", "path", "name"]
     }
-}
-/**
- * Fetch glossary from API
- */
-async function fetchGlossary(config) {
-    const response = await fetch(`${config.apiUrl || 'https://api.qik.dev'}/glossary`, {
-        headers: {
-            'Authorization': `Bearer ${config.accessToken}`,
-            'Content-Type': 'application/json',
+};
+export const updateInterfaceRouteTool = {
+    name: "update_interface_route",
+    description: `Update a route's properties.
+
+**Example:**
+\`\`\`json
+{ "interfaceId": "abc123", "routeName": "home", "title": "Home Page", "headerDisabled": true }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            routeName: { type: "string", description: "Name of the route to update" },
+            title: { type: "string" },
+            path: { type: "string" },
+            headerDisabled: { type: "boolean" },
+            footerDisabled: { type: "boolean" },
+            seo: {
+                type: "object",
+                properties: {
+                    title: { type: "string" },
+                    description: { type: "string" }
+                }
+            }
         },
-    });
-    if (!response.ok) {
-        throw new Error(`Failed to fetch glossary: HTTP ${response.status}`);
-    }
-    const data = await response.json();
-    return Array.isArray(data) ? data : (data.items || data.types || []);
-}
-/**
- * Add authentication pages to routes
- */
-function addAuthPages(routes, components) {
-    const hasLogin = routes.some(r => r.name === 'userLogin' || r.name === 'login');
-    const hasSignup = routes.some(r => r.name === 'userSignup' || r.name === 'signup');
-    // Find auth component
-    const authComponent = components.find(c => c.title.toLowerCase().includes('combined') &&
-        c.title.toLowerCase().includes('auth')) || components.find(c => c.title.toLowerCase().includes('login'));
-    if (!authComponent) {
-        console.warn('⚠️ Auth component not found in marketplace');
-        return;
-    }
-    if (!hasLogin) {
-        routes.push(createAuthPage('Login', '/login', 'userLogin', authComponent, 'login'));
-    }
-    if (!hasSignup) {
-        routes.push(createAuthPage('Signup', '/signup', 'userSignup', authComponent, 'signup'));
-    }
-}
-/**
- * Create an authentication page
- */
-function createAuthPage(title, path, name, component, defaultState) {
-    return {
-        title,
-        path,
-        name,
-        type: 'route',
-        sections: [{
-                title: component.title,
-                uuid: generateUUID(),
-                componentID: component._id,
-                componentVersion: 'latest',
-                model: {
-                    hideTitle: false,
-                    redirectTo: 'home',
-                    redirectFromIntent: true,
-                    defaultState
-                },
-                slots: []
-            }],
-        seo: {
-            title,
-            description: `${title} page`,
-            sitemapDisabled: false
+        required: ["interfaceId", "routeName"]
+    }
+};
+export const removeInterfaceRouteTool = {
+    name: "remove_interface_route",
+    description: `Remove a route from an interface. All sections within the route will be lost.
+
+**Example:**
+\`\`\`json
+{ "interfaceId": "abc123", "routeName": "aboutUs" }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            routeName: { type: "string", description: "Name of the route to remove" }
         },
-        headerDisabled: false,
-        footerDisabled: false,
-        contextVisibility: {
-            hideAuthenticated: true,
-            hideUnauthenticated: false
-        }
-    };
-}
-/**
- * Generate comprehensive interface styles
- */
-function generateInterfaceStyles(primaryColor) {
-    const primary = primaryColor || '#4a90e2';
-    return {
-        pre: `:root {
-    --primary: ${primary};
-    --text: #333;
-    --headings: #111;
-    --bg: #fff;
-    --bg-secondary: #f8f9fa;
-    --border: #e0e0e0;
-    --wrap-width: 1200px;
-    --radius: 0.5rem;
-    --shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-@media(prefers-color-scheme: dark) {
-    :root {
-        --bg: #1a1a1a;
-        --bg-secondary: #2d2d2d;
-        --text: #e0e0e0;
-        --headings: #fff;
-        --border: #404040;
-        --shadow: 0 2px 8px rgba(0,0,0,0.3);
+        required: ["interfaceId", "routeName"]
     }
-}`,
-        post: `body, html {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-    font-size: clamp(14px, 1.2vw, 18px);
-    line-height: 1.6;
-    color: var(--text);
-    background: var(--bg);
-    margin: 0;
-    padding: 0;
-}
-
-* {
-    box-sizing: border-box;
-}
+};
+export const addInterfaceSectionTool = {
+    name: "add_interface_section",
+    description: `Add a block component section to an interface.
 
-/* Vertical and Horizontal Wrapping */
-.v-wrap {
-    padding: 3rem 0;
-}
+This is the core building tool. Place a marketplace component as a section in the header, footer, a route, or nested inside another section's slot.
+
+**Target areas:**
+- \`"header"\` - Interface header (appears on all routes)
+- \`"footer"\` - Interface footer (appears on all routes)
+- \`"route"\` - A specific route's content (requires \`routeName\`)
+- \`"slot"\` - Nested inside another section's slot (requires \`sectionUuid\` and \`slotKey\`)
 
-.h-wrap {
-    max-width: var(--wrap-width);
-    margin: 0 auto;
-    padding: 0 1.5rem;
+**Common components:**
+- Custom Code (\`62b5a2bc6343c2335f85946b\`) - model: { html, javascript, scss }
+- Website Section (\`647d02f56348660726cc552d\`) - model: { outerClass, innerClass } - has slot "cells"
+- Basic Div (\`64d86d3563ed2a77be372c9a\`) - has slot "content"
+
+**Examples:**
+\`\`\`json
+{
+  "interfaceId": "abc123",
+  "target": { "area": "route", "routeName": "home" },
+  "componentId": "62b5a2bc6343c2335f85946b",
+  "title": "Hero Section",
+  "model": {
+    "html": "<div><h1>Welcome</h1></div>",
+    "javascript": "{}",
+    "scss": "h1 { font-size: 3em; }"
+  }
 }
+\`\`\`
 
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-    color: var(--headings);
-    line-height: 1.2;
-    margin-top: 0;
-    margin-bottom: 1rem;
-    font-weight: 700;
+\`\`\`json
+{
+  "interfaceId": "abc123",
+  "target": { "area": "slot", "sectionUuid": "PBqx5sBIGc", "slotKey": "cells" },
+  "componentId": "62b5a2bc6343c2335f85946b",
+  "title": "Content Block"
 }
+\`\`\`
 
-h1 { font-size: clamp(2rem, 5vw, 3rem); }
-h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
-h3 { font-size: clamp(1.25rem, 3vw, 2rem); }
-h4 { font-size: 1.5rem; }
-h5 { font-size: 1.25rem; }
-h6 { font-size: 1.1rem; }
+Returns the new section's UUID - save this for updating or nesting into its slots.`,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            target: {
+                type: "object",
+                description: "Where to place the section",
+                properties: {
+                    area: {
+                        type: "string",
+                        enum: ["header", "footer", "route", "slot"],
+                        description: "Target area"
+                    },
+                    routeName: { type: "string", description: "Required when area='route'" },
+                    sectionUuid: { type: "string", description: "Required when area='slot' - parent section UUID" },
+                    slotKey: { type: "string", description: "Required when area='slot' - slot key (e.g., 'cells', 'content')" }
+                },
+                required: ["area"]
+            },
+            componentId: {
+                type: "string",
+                description: "Component ObjectId. Common: Custom Code='62b5a2bc6343c2335f85946b', Website Section='647d02f56348660726cc552d', Basic Div='64d86d3563ed2a77be372c9a'"
+            },
+            title: { type: "string", description: "Display title for this section" },
+            model: {
+                type: "object",
+                description: "Field values for the component. For Custom Code: { html, javascript, scss }. Use get_interface_component_details to see fields."
+            },
+            componentVersion: { type: "string", description: "Component version: 'latest' (default) or 'draft'" }
+        },
+        required: ["interfaceId", "target", "componentId"]
+    }
+};
+export const updateInterfaceSectionTool = {
+    name: "update_interface_section",
+    description: `Update a section's model, title, or other properties.
 
-p {
-    margin: 0 0 1rem 0;
-}
+Model fields are **shallow-merged**: only the fields you provide are updated, others are preserved.
+For example, to update just the HTML of a Custom Code section, send \`model: { html: "<new>" }\` and javascript/scss remain unchanged.
 
-a {
-    color: var(--primary);
-    text-decoration: none;
-    transition: opacity 0.2s;
+**Example:**
+\`\`\`json
+{
+  "interfaceId": "abc123",
+  "sectionUuid": "PBqx5sBIGc",
+  "model": { "html": "<div>Updated content</div>" }
 }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            sectionUuid: { type: "string", description: "UUID of the section to update" },
+            model: { type: "object", description: "Updated field values (merged with existing)" },
+            title: { type: "string", description: "New title" },
+            disabled: { type: "boolean", description: "Disable/enable the section" },
+            themes: { type: "array", items: { type: "string" }, description: "Theme UUIDs to apply" }
+        },
+        required: ["interfaceId", "sectionUuid"]
+    }
+};
+export const removeInterfaceSectionTool = {
+    name: "remove_interface_section",
+    description: `Remove a section by UUID. Searches header, footer, all routes, and nested slots.
 
-a:hover {
-    opacity: 0.8;
-}
+**Example:**
+\`\`\`json
+{ "interfaceId": "abc123", "sectionUuid": "PBqx5sBIGc" }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            sectionUuid: { type: "string", description: "UUID of the section to remove" }
+        },
+        required: ["interfaceId", "sectionUuid"]
+    }
+};
+export const setInterfaceCustomComponentTool = {
+    name: "set_interface_custom_component",
+    description: `Add or update an inline custom component in the interface.
 
-/* Utility Classes */
-.font-xs { font-size: 0.75rem; }
-.font-sm { font-size: 0.875rem; }
-.font-lg { font-size: 1.25rem; }
-.font-xl { font-size: 1.5rem; }
-.font-muted { opacity: 0.6; }
+Custom components are defined with HTML, JS, and CSS and can be used as tags in other component templates (e.g., \`<event-card />\`).
 
-.text-center { text-align: center; }
-.text-right { text-align: right; }
+**JS format:** Vue Options API as a plain object \`{}\` without \`export default\`.
 
-/* Responsive Grid */
-.grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 2rem;
+**Example:**
+\`\`\`json
+{
+  "interfaceId": "abc123",
+  "name": "event-card",
+  "title": "Event Card",
+  "html": "<div class=\\"card\\"><h3>{{item.title}}</h3><p>{{item.data?.description}}</p></div>",
+  "js": "{ props: { item: { type: Object } } }",
+  "css": ".card { padding: 1em; border: 1px solid; border-radius: 0.3em; }"
 }
+\`\`\`
 
-/* Card Component */
-.card {
-    background: var(--bg-secondary);
-    border-radius: var(--radius);
-    padding: 1.5rem;
-    box-shadow: var(--shadow);
-}
+The component is then available as \`<event-card :item="myItem" />\` in Custom Code sections or other inline components.`,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            name: { type: "string", description: "Component tag name in kebab-case (e.g., 'event-card')" },
+            title: { type: "string", description: "Display title" },
+            html: { type: "string", description: "Vue template HTML" },
+            js: { type: "string", description: "Vue Options API object as plain {} (no export default)" },
+            css: { type: "string", description: "CSS/SCSS styles" }
+        },
+        required: ["interfaceId", "name", "html"]
+    }
+};
+export const setInterfaceServiceTool = {
+    name: "set_interface_service",
+    description: `Add or update a JavaScript service in the interface.
 
-/* Button Styles */
-button, .btn {
-    background: var(--primary);
-    color: white;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: var(--radius);
-    cursor: pointer;
-    font-size: 1rem;
-    transition: all 0.2s;
-}
+Services are reactive Vue instances available as \`this.$sdk.app.services.serviceName\` in all components.
+Use for shared state, API calls, or computed data.
+
+**JS format:** Vue Options API as a plain object \`{}\` without \`export default\`.
 
-button:hover, .btn:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow);
+**Example:**
+\`\`\`json
+{
+  "interfaceId": "abc123",
+  "name": "eventService",
+  "title": "Event Service",
+  "js": "{ data() { return { events: [], loading: false } }, created() { this.reload() }, methods: { async reload() { this.loading = true; const { items } = await $sdk.content.list('event'); this.events = items; this.loading = false; } } }"
 }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            name: { type: "string", description: "Service name in camelCase (e.g., 'eventService')" },
+            title: { type: "string", description: "Display title" },
+            js: { type: "string", description: "Vue Options API object as plain {}" }
+        },
+        required: ["interfaceId", "name", "js"]
+    }
+};
+export const setInterfaceMenuTool = {
+    name: "set_interface_menu",
+    description: `Create or update a navigation menu in the interface.
+
+Menu items link to routes (by name) or external URLs. Items can be nested for dropdown menus.
 
-/* Form Styles */
-input, textarea, select {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--bg);
-    color: var(--text);
-    font-size: 1rem;
+**Example:**
+\`\`\`json
+{
+  "interfaceId": "abc123",
+  "name": "primaryMenu",
+  "title": "Primary Menu",
+  "items": [
+    { "title": "Home", "type": "route", "route": "home" },
+    { "title": "About", "type": "route", "route": "about" },
+    { "title": "Docs", "type": "url", "url": "https://docs.example.com", "target": "_blank" }
+  ]
 }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            name: { type: "string", description: "Menu key/name (e.g., 'primaryMenu', 'footerMenu')" },
+            title: { type: "string", description: "Menu title" },
+            items: {
+                type: "array",
+                description: "Menu items",
+                items: {
+                    type: "object",
+                    properties: {
+                        title: { type: "string", description: "Display text" },
+                        type: { type: "string", enum: ["route", "url"], description: "Link type. Default: 'route'" },
+                        route: { type: "string", description: "Route name (when type='route')" },
+                        url: { type: "string", description: "URL (when type='url')" },
+                        target: { type: "string", description: "Window target (e.g., '_blank')" },
+                        items: { type: "array", description: "Submenu items (same structure)" }
+                    },
+                    required: ["title"]
+                }
+            }
+        },
+        required: ["interfaceId", "name", "title", "items"]
+    }
+};
+export const setInterfaceStylesTool = {
+    name: "set_interface_styles",
+    description: `Update the interface's global SCSS styles and themes.
+
+Only the provided fields are updated; others remain unchanged.
 
-input:focus, textarea:focus, select:focus {
-    outline: none;
-    border-color: var(--primary);
+- **pre**: SCSS injected before component styles. Use for CSS custom properties and variables.
+- **post**: SCSS injected after component styles. Use for global rules, fonts, and overrides.
+- **themes**: Named CSS blocks that can be applied to sections via their themes array.
+
+**Example:**
+\`\`\`json
+{
+  "interfaceId": "abc123",
+  "pre": ":root { --primary: #4F46E5; --text: #333; --headings: #111; --wrap-width: 1200px; }",
+  "post": "body { font-family: 'Inter', sans-serif; color: var(--text); } .h-wrap { max-width: var(--wrap-width); margin: auto; padding: 0 20px; } .v-wrap { padding: 2em 0; }"
 }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            pre: { type: "string", description: "SCSS before component styles (variables, mixins)" },
+            post: { type: "string", description: "SCSS after component styles (global rules, fonts)" },
+            themes: {
+                type: "array",
+                description: "Theme definitions",
+                items: {
+                    type: "object",
+                    properties: {
+                        title: { type: "string" },
+                        uuid: { type: "string", description: "Unique theme ID (10-char alphanumeric)" },
+                        body: { type: "string", description: "CSS rules for this theme" }
+                    },
+                    required: ["title", "uuid", "body"]
+                }
+            }
+        },
+        required: ["interfaceId"]
+    }
+};
+export const setInterfaceLayoutTool = {
+    name: "set_interface_layout",
+    description: `Set the interface's layout template.
+
+The default layout is \`<header-slot/><route-slot/><footer-slot/>\` (empty string = default).
+Set to a custom component tag to use a custom layout (e.g., \`<custom-layout />\`).
+The custom component must be defined via \`set_interface_custom_component\` first.
 
-/* Responsive */
-@media (max-width: 768px) {
-    .v-wrap {
-        padding: 2rem 0;
+**Example:**
+\`\`\`json
+{ "interfaceId": "abc123", "layout": "<custom-layout />" }
+\`\`\``,
+    inputSchema: {
+        type: "object",
+        properties: {
+            interfaceId: { type: "string", description: "The interface content ID" },
+            layout: { type: "string", description: "Layout template. Empty string for default." }
+        },
+        required: ["interfaceId", "layout"]
     }
-    
-    .h-wrap {
-        padding: 0 1rem;
+};
+// ============================================================================
+// HANDLERS
+// ============================================================================
+export async function handleCreateInterface(args) {
+    try {
+        const configManager = new ConfigManager();
+        const config = await configManager.loadConfig();
+        if (!config) {
+            throw new Error('Qik MCP server not configured. Run setup first.');
+        }
+        if (!args.title) {
+            return createErrorResponse('title is required');
+        }
+        // Get user session and check permissions
+        const userSession = await getUserSessionData();
+        const createPermission = 'interface.create';
+        const availableScopes = getAvailableScopes(userSession, createPermission);
+        if (availableScopes.length === 0) {
+            return createErrorResponse(`You don't have permission to create interfaces in any scope.`);
+        }
+        const selectedScopeId = args.scope;
+        if (!selectedScopeId && availableScopes.length > 1) {
+            return createScopeSelectionPrompt('interface', availableScopes, userSession);
+        }
+        const targetScopeId = selectedScopeId || availableScopes[0];
+        if (!availableScopes.includes(targetScopeId)) {
+            return createErrorResponse(`Invalid scope "${targetScopeId}".`);
+        }
+        const payload = {
+            title: args.title,
+            meta: {
+                scopes: [targetScopeId],
+                status: 'active'
+            },
+            routes: [
+                {
+                    title: 'Home',
+                    path: '/',
+                    name: 'home',
+                    type: 'route',
+                    sections: [],
+                    routes: []
+                }
+            ],
+            header: { sections: [] },
+            footer: { sections: [] },
+            menus: [],
+            components: [],
+            services: [],
+            styles: { pre: '', post: '', themes: [], includes: [] },
+        };
+        const response = await fetch(`${config.apiUrl || 'https://api.qik.dev'}/content/interface/create`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${config.accessToken}`,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload)
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`HTTP ${response.status} - ${errorText}`);
+        }
+        const result = await response.json();
+        const id = result._id || result.id;
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Interface Created\n\n**Title:** ${args.title}\n**ID:** \`${id}\`\n\nA default "Home" route (path: /) has been created. Use \`get_interface\` to see the structure, then start adding routes and sections.`
+                }]
+        };
     }
-    
-    .grid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
+    catch (error) {
+        return createErrorResponse(`Failed to create interface: ${error.message}`);
     }
 }
-
-/* Touch device optimization */
-@media (pointer: coarse) {
-    * {
-        -webkit-tap-highlight-color: transparent;
+export async function handleGetInterface(args) {
+    try {
+        const { data } = await getConfigAndFetch(args.interfaceId);
+        // If requesting a specific section
+        if (args.sectionUuid) {
+            const section = findSectionByUUID(data, args.sectionUuid);
+            if (!section) {
+                return createErrorResponse(`Section with UUID '${args.sectionUuid}' not found.`);
+            }
+            return {
+                content: [{
+                        type: "text",
+                        text: formatSectionDetail(section)
+                    }]
+            };
+        }
+        // If requesting a specific route's details
+        if (args.routeName) {
+            const route = findRouteByName(data.routes || [], args.routeName);
+            if (!route) {
+                const available = getAllRouteNames(data.routes || []);
+                return createErrorResponse(`Route '${args.routeName}' not found. Available: ${available.join(', ')}`);
+            }
+            const lines = [];
+            lines.push(`# Route: ${route.title}`);
+            lines.push(`**Name:** \`${route.name}\` | **Path:** \`${route.path}\` | **Type:** ${route.type || 'route'}`);
+            lines.push(`**Header disabled:** ${route.headerDisabled || false} | **Footer disabled:** ${route.footerDisabled || false}`);
+            lines.push('');
+            lines.push(`## Sections (${(route.sections || []).length})`);
+            for (const section of route.sections || []) {
+                lines.push(formatSectionDetail(section));
+                lines.push('---');
+            }
+            return {
+                content: [{
+                        type: "text",
+                        text: lines.join('\n')
+                    }]
+            };
+        }
+        // Default: summary view
+        return {
+            content: [{
+                    type: "text",
+                    text: summarizeInterface(data)
+                }]
+        };
     }
-    
-    button, .btn, a {
-        min-height: 44px;
-        min-width: 44px;
+    catch (error) {
+        return createErrorResponse(`Failed to get interface: ${error.message}`);
     }
-}`,
-        includes: [],
-        themes: []
-    };
 }
-/**
- * Generate header structure
- */
-function generateHeader(menus, components) {
-    // Find menu component
-    const menuComponent = components.find(c => c.title.toLowerCase().includes('horizontal') &&
-        c.title.toLowerCase().includes('menu'));
-    if (!menuComponent) {
-        return { sections: [] };
+export async function handlePublishInterface(args) {
+    try {
+        const configManager = new ConfigManager();
+        const config = await configManager.loadConfig();
+        if (!config)
+            throw new Error('Qik MCP server not configured. Run setup first.');
+        if (!args.interfaceId)
+            return createErrorResponse('interfaceId is required');
+        const response = await fetch(`${config.apiUrl || 'https://api.qik.dev'}/interface/${args.interfaceId}/publish`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${config.accessToken}`,
+                'Content-Type': 'application/json',
+            },
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`HTTP ${response.status} - ${errorText}`);
+        }
+        const result = await response.json();
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Interface Published\n\n**Interface ID:** \`${args.interfaceId}\`\n**Snapshot ID:** \`${result._id || 'created'}\`\n\nThe interface snapshot has been published.`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to publish interface: ${error.message}`);
     }
-    return {
-        sections: [{
-                title: 'Header Navigation',
-                uuid: generateUUID(),
-                componentID: menuComponent._id,
-                componentVersion: 'latest',
-                model: {
-                    menu: 'primaryMenu',
-                    style: 'horizontal'
-                },
-                slots: []
-            }]
-    };
 }
-/**
- * Generate footer structure
- */
-function generateFooter(menus, components) {
-    // Check if footer menu exists
-    const hasFooterMenu = menus.some(m => m.name === 'footerMenu');
-    if (!hasFooterMenu) {
-        return { sections: [] };
-    }
-    // Find menu component
-    const menuComponent = components.find(c => c.title.toLowerCase().includes('horizontal') &&
-        c.title.toLowerCase().includes('menu'));
-    if (!menuComponent) {
-        return { sections: [] };
+export async function handleAddInterfaceRoute(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (!args.title)
+            return createErrorResponse('title is required');
+        if (!args.name)
+            return createErrorResponse('name is required');
+        if (args.path === undefined || args.path === null)
+            return createErrorResponse('path is required');
+        if (!data.routes)
+            data.routes = [];
+        // Validate unique name
+        const existingNames = getAllRouteNames(data.routes);
+        if (existingNames.includes(args.name)) {
+            return createErrorResponse(`Route name '${args.name}' already exists. Available names: ${existingNames.join(', ')}`);
+        }
+        const newRoute = {
+            title: args.title,
+            path: args.path,
+            name: args.name,
+            type: args.type || 'route',
+            sections: [],
+            routes: [],
+        };
+        if (args.headerDisabled !== undefined)
+            newRoute.headerDisabled = args.headerDisabled;
+        if (args.footerDisabled !== undefined)
+            newRoute.footerDisabled = args.footerDisabled;
+        // Add to parent or top level
+        if (args.parentRouteName) {
+            const parent = findRouteByName(data.routes, args.parentRouteName);
+            if (!parent) {
+                return createErrorResponse(`Parent route '${args.parentRouteName}' not found. Available: ${existingNames.join(', ')}`);
+            }
+            if (!parent.routes)
+                parent.routes = [];
+            parent.routes.push(newRoute);
+        }
+        else {
+            data.routes.push(newRoute);
+        }
+        await saveInterface(config, args.interfaceId, data);
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Route Added\n\n**Title:** ${args.title}\n**Name:** \`${args.name}\`\n**Path:** \`${args.path}\`\n**Type:** ${newRoute.type}${args.parentRouteName ? `\n**Parent:** ${args.parentRouteName}` : ''}`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to add route: ${error.message}`);
     }
-    return {
-        sections: [{
-                title: 'Footer Navigation',
-                uuid: generateUUID(),
-                componentID: menuComponent._id,
-                componentVersion: 'latest',
-                model: {
-                    menu: 'footerMenu',
-                    style: 'horizontal'
-                },
-                slots: []
-            }]
-    };
 }
-/**
- * Generate UUID
- */
-function generateUUID() {
-    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    let result = '';
-    for (let i = 0; i < 10; i++) {
-        result += chars.charAt(Math.floor(Math.random() * chars.length));
+export async function handleUpdateInterfaceRoute(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (!args.routeName)
+            return createErrorResponse('routeName is required');
+        const route = findRouteByName(data.routes || [], args.routeName);
+        if (!route) {
+            const available = getAllRouteNames(data.routes || []);
+            return createErrorResponse(`Route '${args.routeName}' not found. Available: ${available.join(', ')}`);
+        }
+        if (args.title !== undefined)
+            route.title = args.title;
+        if (args.path !== undefined)
+            route.path = args.path;
+        if (args.headerDisabled !== undefined)
+            route.headerDisabled = args.headerDisabled;
+        if (args.footerDisabled !== undefined)
+            route.footerDisabled = args.footerDisabled;
+        if (args.seo) {
+            if (!route.seo)
+                route.seo = {};
+            Object.assign(route.seo, args.seo);
+        }
+        await saveInterface(config, args.interfaceId, data);
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Route Updated\n\n**Name:** \`${args.routeName}\`\n**Title:** ${route.title}\n**Path:** \`${route.path}\``
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to update route: ${error.message}`);
+    }
+}
+export async function handleRemoveInterfaceRoute(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (!args.routeName)
+            return createErrorResponse('routeName is required');
+        if (!removeRouteByName(data.routes || [], args.routeName)) {
+            const available = getAllRouteNames(data.routes || []);
+            return createErrorResponse(`Route '${args.routeName}' not found. Available: ${available.join(', ')}`);
+        }
+        await saveInterface(config, args.interfaceId, data);
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Route Removed\n\nRoute \`${args.routeName}\` has been removed.`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to remove route: ${error.message}`);
+    }
+}
+export async function handleAddInterfaceSection(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (!args.target?.area)
+            return createErrorResponse('target.area is required (header, footer, route, or slot)');
+        if (!args.componentId)
+            return createErrorResponse('componentId is required');
+        if (args.target.area === 'route' && !args.target.routeName) {
+            return createErrorResponse('target.routeName is required when area is "route"');
+        }
+        if (args.target.area === 'slot') {
+            if (!args.target.sectionUuid)
+                return createErrorResponse('target.sectionUuid is required when area is "slot"');
+            if (!args.target.slotKey)
+                return createErrorResponse('target.slotKey is required when area is "slot"');
+        }
+        const uuid = generateUUID();
+        const model = args.model ? parseNestedJsonStrings(args.model) : {};
+        const section = {
+            title: args.title || 'Section',
+            uuid,
+            componentID: args.componentId,
+            componentVersion: args.componentVersion || 'latest',
+            model,
+            slots: [],
+            themes: [],
+            collapsed: false,
+        };
+        const targetArray = resolveTargetArray(data, args.target);
+        if (!targetArray) {
+            if (args.target.area === 'route') {
+                const available = getAllRouteNames(data.routes || []);
+                return createErrorResponse(`Route '${args.target.routeName}' not found. Available: ${available.join(', ')}`);
+            }
+            if (args.target.area === 'slot') {
+                return createErrorResponse(`Section '${args.target.sectionUuid}' not found. Use get_interface to see current UUIDs.`);
+            }
+            return createErrorResponse(`Invalid target: ${JSON.stringify(args.target)}`);
+        }
+        targetArray.push(section);
+        await saveInterface(config, args.interfaceId, data);
+        const locationStr = args.target.area === 'route' ? `route "${args.target.routeName}"` :
+            args.target.area === 'slot' ? `slot "${args.target.slotKey}" of section "${args.target.sectionUuid}"` :
+                args.target.area;
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Section Added\n\n**Title:** ${section.title}\n**UUID:** \`${uuid}\`\n**Component:** \`${args.componentId}\`\n**Location:** ${locationStr}\n\nUse this UUID to update the section or add nested sections to its slots.`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to add section: ${error.message}`);
+    }
+}
+export async function handleUpdateInterfaceSection(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (!args.sectionUuid)
+            return createErrorResponse('sectionUuid is required');
+        const section = findSectionByUUID(data, args.sectionUuid);
+        if (!section) {
+            return createErrorResponse(`Section '${args.sectionUuid}' not found. Use get_interface to see current UUIDs.`);
+        }
+        if (args.title !== undefined)
+            section.title = args.title;
+        if (args.disabled !== undefined)
+            section.disabled = args.disabled;
+        if (args.themes !== undefined)
+            section.themes = args.themes;
+        if (args.model) {
+            const parsedModel = parseNestedJsonStrings(args.model);
+            section.model = Object.assign(section.model || {}, parsedModel);
+        }
+        await saveInterface(config, args.interfaceId, data);
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Section Updated\n\n**UUID:** \`${args.sectionUuid}\`\n**Title:** ${section.title}`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to update section: ${error.message}`);
+    }
+}
+export async function handleRemoveInterfaceSection(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (!args.sectionUuid)
+            return createErrorResponse('sectionUuid is required');
+        if (!removeSectionByUUID(data, args.sectionUuid)) {
+            return createErrorResponse(`Section '${args.sectionUuid}' not found. Use get_interface to see current UUIDs.`);
+        }
+        await saveInterface(config, args.interfaceId, data);
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Section Removed\n\nSection \`${args.sectionUuid}\` has been removed.`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to remove section: ${error.message}`);
+    }
+}
+export async function handleSetInterfaceCustomComponent(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (!args.name)
+            return createErrorResponse('name is required (kebab-case tag name)');
+        if (!args.html)
+            return createErrorResponse('html is required');
+        if (!data.components)
+            data.components = [];
+        const existing = data.components.find((c) => c.name === args.name);
+        const isUpdate = !!existing;
+        if (existing) {
+            existing.html = args.html;
+            if (args.js !== undefined)
+                existing.js = args.js;
+            if (args.css !== undefined)
+                existing.css = args.css;
+            if (args.title !== undefined)
+                existing.title = args.title;
+        }
+        else {
+            data.components.push({
+                title: args.title || args.name,
+                name: args.name,
+                html: args.html,
+                js: args.js || '{}',
+                css: args.css || '',
+            });
+        }
+        await saveInterface(config, args.interfaceId, data);
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Custom Component ${isUpdate ? 'Updated' : 'Created'}\n\n**Tag:** \`<${args.name} />\`\n**Title:** ${args.title || args.name}\n\nUse \`<${args.name} />\` in Custom Code sections or other inline components.`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to set custom component: ${error.message}`);
+    }
+}
+export async function handleSetInterfaceService(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (!args.name)
+            return createErrorResponse('name is required');
+        if (!args.js)
+            return createErrorResponse('js is required');
+        if (!data.services)
+            data.services = [];
+        const existing = data.services.find((s) => s.name === args.name);
+        const isUpdate = !!existing;
+        if (existing) {
+            existing.js = args.js;
+            if (args.title !== undefined)
+                existing.title = args.title;
+        }
+        else {
+            data.services.push({
+                title: args.title || args.name,
+                name: args.name,
+                js: args.js,
+            });
+        }
+        await saveInterface(config, args.interfaceId, data);
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Service ${isUpdate ? 'Updated' : 'Created'}\n\n**Name:** \`${args.name}\`\n**Title:** ${args.title || args.name}\n\nAccess via \`this.$sdk.app.services.${args.name}\` in components.`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to set service: ${error.message}`);
+    }
+}
+export async function handleSetInterfaceMenu(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (!args.name)
+            return createErrorResponse('name is required');
+        if (!args.title)
+            return createErrorResponse('title is required');
+        if (!args.items)
+            return createErrorResponse('items is required');
+        if (!data.menus)
+            data.menus = [];
+        const items = parseNestedJsonStrings(args.items);
+        // Normalize menu items
+        const normalizeItems = (menuItems) => {
+            return (menuItems || []).map((item) => ({
+                title: item.title || '',
+                type: item.type || 'route',
+                route: item.route || '',
+                url: item.url || '',
+                target: item.target || '',
+                items: item.items ? normalizeItems(item.items) : [],
+            }));
+        };
+        const normalizedItems = normalizeItems(items);
+        const existing = data.menus.find((m) => m.name === args.name);
+        const isUpdate = !!existing;
+        if (existing) {
+            existing.title = args.title;
+            existing.items = normalizedItems;
+        }
+        else {
+            data.menus.push({
+                title: args.title,
+                name: args.name,
+                items: normalizedItems,
+            });
+        }
+        await saveInterface(config, args.interfaceId, data);
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Menu ${isUpdate ? 'Updated' : 'Created'}\n\n**Name:** \`${args.name}\`\n**Title:** ${args.title}\n**Items:** ${normalizedItems.length}`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to set menu: ${error.message}`);
+    }
+}
+export async function handleSetInterfaceStyles(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (!data.styles)
+            data.styles = { pre: '', post: '', themes: [], includes: [] };
+        if (args.pre !== undefined)
+            data.styles.pre = args.pre;
+        if (args.post !== undefined)
+            data.styles.post = args.post;
+        if (args.themes !== undefined)
+            data.styles.themes = args.themes;
+        await saveInterface(config, args.interfaceId, data);
+        const updated = [];
+        if (args.pre !== undefined)
+            updated.push('pre-SCSS');
+        if (args.post !== undefined)
+            updated.push('post-SCSS');
+        if (args.themes !== undefined)
+            updated.push(`themes (${args.themes.length})`);
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Styles Updated\n\nUpdated: ${updated.join(', ')}`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to set styles: ${error.message}`);
+    }
+}
+export async function handleSetInterfaceLayout(args) {
+    try {
+        const { config, data } = await getConfigAndFetch(args.interfaceId);
+        if (args.layout === undefined)
+            return createErrorResponse('layout is required');
+        data.layout = args.layout;
+        await saveInterface(config, args.interfaceId, data);
+        return {
+            content: [{
+                    type: "text",
+                    text: `# Layout Updated\n\n**Layout:** ${args.layout || '(default: header-slot/route-slot/footer-slot)'}`
+                }]
+        };
+    }
+    catch (error) {
+        return createErrorResponse(`Failed to set layout: ${error.message}`);
     }
-    return result;
 }
 //# sourceMappingURL=interface-builder.js.map