@zenith-open/zenithcms-plugin-ai-architect-ui 1.0.0-beta.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aman T Shekar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/admin/src/components/ui/PageHeader.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface PageHeaderProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    actions?: React.ReactNode;
+    className?: string;
+    backLink?: {
+        to: string;
+        label: string;
+    };
+    breadcrumbs?: any;
+}
+export declare function PageHeader({ title, description, icon, actions, className, backLink }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/admin/src/components/ui/PageHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { useTheme } from '../../context/ThemeContext';
+export function PageHeader({ title, description, icon, actions, className, backLink }) {
+    const { theme } = useTheme();
+    return (_jsxs("div", { className: cn("px-6 py-4 border-b flex items-center justify-between transition-colors", theme === 'dark' ? 'bg-[var(--z-bg-modal)] backdrop-blur-md border-z-border' : 'bg-z-panel/80 backdrop-blur-md border-z-border', className), children: [_jsxs("div", { className: "flex items-center gap-4", children: [backLink && (_jsx("a", { href: backLink.to, className: "flex items-center justify-center p-2 rounded-none border border-transparent hover:border-z-border hover:bg-z-hover transition-all text-z-secondary", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-arrow-left", children: [_jsx("path", { d: "m12 19-7-7 7-7" }), _jsx("path", { d: "M19 12H5" })] }) })), icon && (_jsx("div", { className: cn("p-2.5 rounded-none-none border", theme === 'dark' ? 'bg-z-panel border-z-border text-z-active-text' : 'bg-z-input border-z-border text-z-accent'), children: icon })), _jsxs("div", { children: [_jsx("h1", { className: cn("text-xl font-semibold   leading-none", 'text-z-primary'), children: title }), description && (_jsx("p", { className: cn("text-xs mt-1", theme === 'dark' ? 'text-z-muted' : 'text-z-secondary'), children: description }))] })] }), actions && (_jsx("div", { className: "flex items-center gap-3", children: actions }))] }));
+}

package/dist/admin/src/context/ThemeContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type Theme = 'light' | 'dark';
+interface ThemeContextType {
+    theme: Theme;
+    toggleTheme: () => void;
+    setTheme: (theme: Theme) => void;
+}
+export declare const ThemeProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useTheme: () => ThemeContextType;
+export {};

package/dist/admin/src/context/ThemeContext.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from 'react';
+const ThemeContext = createContext(undefined);
+export const ThemeProvider = ({ children }) => {
+    const [theme, setThemeState] = useState(localStorage.getItem('zenith_theme') || 'dark');
+    useEffect(() => {
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(theme);
+        localStorage.setItem('zenith_theme', theme);
+    }, [theme]);
+    const setTheme = (newTheme) => {
+        setThemeState(newTheme);
+    };
+    const toggleTheme = () => {
+        setThemeState(prev => prev === 'dark' ? 'light' : 'dark');
+    };
+    return (_jsx(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
+};
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context)
+        throw new Error('useTheme must be used within ThemeProvider');
+    return context;
+};

package/dist/admin/src/lib/ApiError.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Unified, typed error for all API-layer failures.
+ *
+ * Every `api` call throws `ApiError` on failure, so callers can catch
+ * with predictable properties instead of casting `unknown` / `any`.
+ *
+ * ```ts
+ * import api from './api'
+ * import { ApiError } from './ApiError'
+ *
+ * try {
+ * await api.post('/collections', data)
+ * } catch (err) {
+ * if (err instanceof ApiError) {
+ * console.error((err as { status?: number }).status, (err as { code?: string }).code, (err instanceof Error ? err.message : String(err)))
+ * }
+ * }
+ * ```
+ */
+export declare class ApiError extends Error {
+    /** HTTP status code, or 0 for network/tenant errors */
+    status: number;
+    /** Machine-readable short code: 'ERR_NETWORK', 'ERR_NO_TENANT', 'ERR_CSRF', etc. */
+    code: string;
+    /** The raw response payload (if any) */
+    response?: {
+        data: any;
+        status: number;
+        headers?: Headers;
+    };
+    constructor(opts: {
+        message: string;
+        status?: number;
+        code?: string;
+        response?: {
+            data: any;
+            status: number;
+            headers?: Headers;
+        };
+    });
+}

package/dist/admin/src/lib/ApiError.js

@@ -0,0 +1,34 @@
+/**
+ * Unified, typed error for all API-layer failures.
+ *
+ * Every `api` call throws `ApiError` on failure, so callers can catch
+ * with predictable properties instead of casting `unknown` / `any`.
+ *
+ * ```ts
+ * import api from './api'
+ * import { ApiError } from './ApiError'
+ *
+ * try {
+ * await api.post('/collections', data)
+ * } catch (err) {
+ * if (err instanceof ApiError) {
+ * console.error((err as { status?: number }).status, (err as { code?: string }).code, (err instanceof Error ? err.message : String(err)))
+ * }
+ * }
+ * ```
+ */
+export class ApiError extends Error {
+    /** HTTP status code, or 0 for network/tenant errors */
+    status;
+    /** Machine-readable short code: 'ERR_NETWORK', 'ERR_NO_TENANT', 'ERR_CSRF', etc. */
+    code;
+    /** The raw response payload (if any) */
+    response;
+    constructor(opts) {
+        super(opts.message);
+        this.name = 'ApiError';
+        this.status = opts.status ?? 0;
+        this.code = opts.code ?? 'ERR_UNKNOWN';
+        this.response = opts.response;
+    }
+}

package/dist/admin/src/lib/api.d.ts

@@ -0,0 +1,31 @@
+interface ApiResponse<T = any> {
+    data: T;
+    status: number;
+    headers: Headers;
+}
+declare const apiInstance: {
+    defaults: {
+        headers: Record<string, string>;
+    };
+    get<T = any>(path: string, config?: {
+        params?: any;
+        headers?: Record<string, string>;
+    }): Promise<ApiResponse<T>>;
+    post<T = any>(path: string, body?: any, config?: {
+        headers?: Record<string, string>;
+        params?: any;
+    }): Promise<ApiResponse<T>>;
+    patch<T = any>(path: string, body?: any, config?: {
+        headers?: Record<string, string>;
+        params?: any;
+    }): Promise<ApiResponse<T>>;
+    put<T = any>(path: string, body?: any, config?: {
+        headers?: Record<string, string>;
+        params?: any;
+    }): Promise<ApiResponse<T>>;
+    delete<T = any>(path: string, config?: {
+        headers?: Record<string, string>;
+        params?: any;
+    }): Promise<ApiResponse<T>>;
+};
+export default apiInstance;

package/dist/admin/src/lib/api.js

@@ -0,0 +1,240 @@
+import { useTenantStore } from './tenantStore';
+import { ApiError } from './ApiError';
+let isRefreshing = false;
+let failedQueue = [];
+const processQueue = (error, _token = null) => {
+    failedQueue.forEach((prom) => {
+        if (error) {
+            prom.reject(error);
+        }
+        else {
+            prom.resolve(_token);
+        }
+    });
+    failedQueue = [];
+};
+// Wrapped version ensures rejection handler throws don't break the redirect
+const safeProcessQueue = (error, token) => {
+    try {
+        processQueue(error, token);
+    }
+    catch { /* ignore — queue handlers should not throw */ }
+};
+const getCookie = (name) => {
+    if (typeof document === 'undefined')
+        return null;
+    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+    return match ? decodeURIComponent(match[2]) : null;
+};
+// Security: Never hardcode localhost as a fallback in production.
+// If VITE_API_URL is not set, fall back to '/api/v1' (same-host relative path).
+// If the admin and API are on different hosts, VITE_API_URL must be explicitly configured.
+let BASE_URL = import.meta.env.VITE_API_URL || '/api/v1';
+if (import.meta.env.PROD && BASE_URL.startsWith('http://') && !BASE_URL.includes('localhost') && !BASE_URL.includes('127.0.0.1')) {
+    console.warn('Insecure HTTP API URL used in production. Upgrading to HTTPS.');
+    BASE_URL = BASE_URL.replace('http://', 'https://');
+}
+function buildUrl(path, config) {
+    if (path.startsWith('http'))
+        return path;
+    let url = `${BASE_URL}${path}`;
+    if (config?.params) {
+        const searchParams = new URLSearchParams();
+        for (const [key, value] of Object.entries(config.params)) {
+            if (value !== undefined && value !== null) {
+                searchParams.append(key, String(value));
+            }
+        }
+        const qs = searchParams.toString();
+        if (qs)
+            url += (path.includes('?') ? '&' : '?') + qs;
+    }
+    return url;
+}
+function isFormData(body) {
+    return typeof FormData !== 'undefined' && body instanceof FormData;
+}
+async function fetchWithAuth(method, path, body, config) {
+    const url = buildUrl(path, config);
+    const headers = {
+        'Content-Type': 'application/json',
+        ...config?.headers,
+    };
+    const storeToken = useTenantStore.getState().token;
+    if (storeToken) {
+        headers['Authorization'] = `Bearer ${storeToken}`;
+    }
+    // Apply default headers set dynamically via api.defaults.headers
+    if (apiInstance.defaults.headers) {
+        for (const [key, value] of Object.entries(apiInstance.defaults.headers)) {
+            if (value !== undefined && !headers[key]) {
+                headers[key] = value;
+            }
+        }
+    }
+    // Ensure active site ID is dynamically set on every request to prevent tenant leaking
+    const currentSiteId = useTenantStore.getState().activeSiteId;
+    if (currentSiteId && !headers['x-zenith-site-id']) {
+        headers['x-zenith-site-id'] = currentSiteId;
+    }
+    // Hard tenant guard — abort any tenant-scoped request missing x-zenith-site-id.
+    // Exempt: auth, site listing, uploads, health, and protocol paths that run before
+    // a site is selected (globals editor, document locks, collab presence, media proxy).
+    const isTenantExempt = path.startsWith('/auth') ||
+        path === '/sites' ||
+        path.startsWith('/sites?') ||
+        path.startsWith('/sites/') ||
+        path.startsWith('/uploads') ||
+        path.startsWith('/health') ||
+        path.startsWith('/system') ||
+        path.startsWith('/globals') ||
+        path.startsWith('/locks') ||
+        path.startsWith('/presence') ||
+        path.startsWith('/media') ||
+        path.startsWith('/versions') ||
+        path.startsWith('/releases') ||
+        path.startsWith('/workspaces');
+    if (!currentSiteId && !headers['x-zenith-site-id'] && !isTenantExempt) {
+        throw new ApiError({
+            message: 'Missing tenant context: x-zenith-site-id is required for this request. ' +
+                'Ensure activeSiteId is set in localStorage before making API calls.',
+            code: 'ERR_NO_TENANT',
+        });
+    }
+    // Double-Submit Cookie CSRF for mutating requests
+    if (['post', 'put', 'delete', 'patch'].includes(method.toLowerCase())) {
+        const csrfToken = getCookie('XSRF-TOKEN');
+        if (csrfToken) {
+            headers['x-csrf-token'] = csrfToken;
+        }
+    }
+    // Don't set Content-Type for FormData (browser sets it with boundary)
+    if (isFormData(body)) {
+        delete headers['Content-Type'];
+    }
+    const fetchOptions = {
+        method,
+        headers,
+        credentials: 'include',
+    };
+    if (body !== undefined) {
+        fetchOptions.body = isFormData(body) ? body : JSON.stringify(body);
+    }
+    try {
+        return await fetch(url, fetchOptions).then(async (response) => {
+            let data;
+            try {
+                data = await response.json();
+            }
+            catch {
+                data = null;
+            }
+            return { data, status: response.status, headers: response.headers };
+        });
+    }
+    catch {
+        // Network error — throw ApiError so callers catch a consistent shape
+        throw new ApiError({ message: 'Network Error', code: 'ERR_NETWORK' });
+    }
+}
+async function request(method, path, body, config) {
+    const result = await fetchWithAuth(method, path, body, config);
+    // Handle 401 with token refresh (skip for login requests, as 401 means invalid credentials)
+    if (result.status === 401 && !path.includes('/login')) {
+        if (isRefreshing) {
+            // Queue this request until refresh completes
+            return new Promise((resolve, reject) => {
+                failedQueue.push({ resolve, reject });
+            }).then(async () => {
+                return fetchWithAuth(method, path, body, config);
+            });
+        }
+        isRefreshing = true;
+        try {
+            const newToken = await refreshToken();
+            safeProcessQueue(null, newToken);
+            return fetchWithAuth(method, path, body, config);
+        }
+        catch (refreshError) {
+            safeProcessQueue(refreshError, null);
+            if (refreshError?.status === 401 && !window.location.pathname.includes('/login')) {
+                localStorage.clear();
+                window.location.href = '/login';
+            }
+            throw refreshError;
+        }
+        finally {
+            isRefreshing = false;
+        }
+    }
+    // Throw for non-2xx status codes (ApiError with response payload)
+    if (result.status >= 400) {
+        const errorMsg = result.data?.error?.message || result.data?.message || '';
+        if (result.status === 403 && (errorMsg.includes('Access denied to this site') || errorMsg.includes('site_access') || errorMsg.includes('Forbidden'))) {
+            useTenantStore.getState().setActiveSiteId('');
+            localStorage.removeItem('activeSiteId');
+            if (!window.location.pathname.includes('/sites')) {
+                window.location.href = '/sites';
+            }
+        }
+        throw new ApiError({
+            message: result.data?.message || `Request failed with status ${result.status}`,
+            status: result.status,
+            code: 'ERR_HTTP',
+            response: { data: result.data, status: result.status, headers: result.headers },
+        });
+    }
+    return result;
+}
+async function refreshToken() {
+    const res = await fetch(`${BASE_URL}/auth/refresh`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+    });
+    if (!res.ok)
+        throw new ApiError({ message: 'Token refresh failed', status: res.status, code: 'ERR_REFRESH' });
+    const body = await res.json();
+    const newToken = body?.token || body?.accessToken;
+    if (newToken) {
+        useTenantStore.getState().setToken(newToken);
+    }
+    return newToken || '';
+}
+const getInitialSiteId = () => {
+    if (typeof window !== 'undefined' && window.localStorage) {
+        // First try from the store (which persists), fall back to raw localStorage for backward compatibility
+        const storeSiteId = useTenantStore.getState().activeSiteId;
+        if (storeSiteId)
+            return storeSiteId;
+        const legacySiteId = window.localStorage.getItem('activeSiteId');
+        if (legacySiteId) {
+            useTenantStore.getState().setActiveSiteId(legacySiteId);
+            return legacySiteId;
+        }
+    }
+    return '';
+};
+const apiInstance = {
+    defaults: {
+        headers: {
+            ...(getInitialSiteId() ? { 'x-zenith-site-id': getInitialSiteId() } : {})
+        },
+    },
+    async get(path, config) {
+        return request('GET', path, undefined, config);
+    },
+    async post(path, body, config) {
+        return request('POST', path, body, config);
+    },
+    async patch(path, body, config) {
+        return request('PATCH', path, body, config);
+    },
+    async put(path, body, config) {
+        return request('PUT', path, body, config);
+    },
+    async delete(path, config) {
+        return request('DELETE', path, undefined, config);
+    },
+};
+export default apiInstance;

package/dist/admin/src/lib/tenantStore.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Central store for authentication and multi‑tenant context.
+ * It persists to localStorage so the values survive page reloads.
+ */
+interface TenantState {
+    token: string | null;
+    activeSiteId: string | null;
+    activeSiteName: string | null;
+    setToken: (token: string | null) => void;
+    setActiveSiteId: (siteId: string | null, siteName?: string | null) => void;
+}
+export declare const useTenantStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<TenantState>, "setState" | "persist"> & {
+    setState(partial: TenantState | Partial<TenantState> | ((state: TenantState) => TenantState | Partial<TenantState>), replace?: false | undefined): unknown;
+    setState(state: TenantState | ((state: TenantState) => TenantState), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<TenantState, {
+            activeSiteId: string | null;
+            activeSiteName: string | null;
+        }, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: TenantState) => void) => () => void;
+        onFinishHydration: (fn: (state: TenantState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<TenantState, {
+            activeSiteId: string | null;
+            activeSiteName: string | null;
+        }, unknown>>;
+    };
+}>;
+export {};

package/dist/admin/src/lib/tenantStore.js

@@ -0,0 +1,46 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+function getLegacyToken() {
+    try {
+        return localStorage.getItem('token');
+    }
+    catch {
+        return null;
+    }
+}
+function getLegacySiteId() {
+    try {
+        return localStorage.getItem('activeSiteId');
+    }
+    catch {
+        return null;
+    }
+}
+function getLegacySiteName() {
+    try {
+        return localStorage.getItem('activeSiteName');
+    }
+    catch {
+        return null;
+    }
+}
+export const useTenantStore = create()(persist((set) => ({
+    // First try the persisted store; fall back to legacy localStorage keys
+    token: getLegacyToken(),
+    activeSiteId: getLegacySiteId(),
+    activeSiteName: getLegacySiteName(),
+    setToken: (token) => set({ token }),
+    setActiveSiteId: (siteId, siteName) => set((state) => ({
+        activeSiteId: siteId,
+        activeSiteName: siteName ?? state.activeSiteName,
+    })),
+}), {
+    name: 'zenith-tenant-store',
+    // SECURITY: Never persist the auth token to localStorage — it must live in
+    // memory only. The server uses HttpOnly cookies for actual authentication.
+    // Storing the token in localStorage makes it extractable via XSS attacks.
+    partialize: (state) => ({
+        activeSiteId: state.activeSiteId,
+        activeSiteName: state.activeSiteName,
+    }),
+}));

package/dist/admin/src/lib/utils.d.ts

@@ -0,0 +1,15 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Utility for merging Tailwind classes with clsx
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Extracts purely text strings from a nested JSON structure (e.g. Zenith blocks)
+ * Ideal for passing document content to AI APIs.
+ */
+export declare function extractTextFromBlocks(content: any): string;
+/**
+ * Generate a stable unique ID. Uses crypto.randomUUID() with a safe fallback
+ * for non-HTTPS contexts where the API throws a DOMException.
+ */
+export declare function uid(): string;

package/dist/admin/src/lib/utils.js

@@ -0,0 +1,40 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+/**
+ * Utility for merging Tailwind classes with clsx
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+/**
+ * Extracts purely text strings from a nested JSON structure (e.g. Zenith blocks)
+ * Ideal for passing document content to AI APIs.
+ */
+export function extractTextFromBlocks(content) {
+    if (!content)
+        return '';
+    if (typeof content === 'string')
+        return content;
+    if (Array.isArray(content)) {
+        return content.map(extractTextFromBlocks).filter(Boolean).join(' ');
+    }
+    if (typeof content === 'object') {
+        return Object.values(content).map(extractTextFromBlocks).filter(Boolean).join(' ');
+    }
+    return String(content);
+}
+/**
+ * Generate a stable unique ID. Uses crypto.randomUUID() with a safe fallback
+ * for non-HTTPS contexts where the API throws a DOMException.
+ */
+export function uid() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        try {
+            return crypto.randomUUID();
+        }
+        catch {
+            // Fallback for non-secure contexts (http, localhost without HTTPS)
+        }
+    }
+    return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+}

package/dist/plugin-ai-architect-ui/src/AIWriterPage.d.ts

@@ -0,0 +1,2 @@
+declare const AIWriterPage: () => import("react").JSX.Element;
+export default AIWriterPage;

package/dist/plugin-ai-architect-ui/src/AIWriterPage.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Sparkles, Send, Loader2, Copy, Zap, Terminal, Cpu, PenTool, ShieldCheck, Search, Image as ImageIcon, CheckCircle2, AlertCircle, ChevronRight, RotateCcw, Save, Download, Code2, Wand2, Hash } from 'lucide-react';
+import api from '../../admin/src/lib/api';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '../../admin/src/lib/utils';
+import toast from 'react-hot-toast';
+import { useTheme } from '../../admin/src/context/ThemeContext';
+import { PageHeader } from '../../admin/src/components/ui/PageHeader';
+// ── Tool Definitions ───────────────────────────────────────────────────────────
+const TOOLS = [
+    { id: 'seo', name: 'SEO Analysis', icon: Search, endpoint: '/content-tools/seo-analysis', desc: 'Score title, meta, content', color: 'text-amber-400' },
+    { id: 'quality', name: 'Quality Audit', icon: ShieldCheck, endpoint: '/content-tools/quality', desc: 'Readability + word structure', color: 'text-z-active-text' },
+    { id: 'improve', name: 'Refine Text', icon: Wand2, endpoint: '/content-tools/ai/improve', desc: 'AI-powered rewrite', color: 'text-purple-400' },
+    { id: 'meta', name: 'Meta Generator', icon: Hash, endpoint: '/content-tools/ai/meta-description', desc: 'Auto SEO meta description', color: 'text-z-active-text' },
+    { id: 'alt', name: 'Alt Text', icon: ImageIcon, endpoint: '/content-tools/ai/alt-text', desc: 'Generate image alt text', color: 'text-pink-400' },
+];
+const MODES = [
+    { id: 'writer', label: 'Writer', icon: PenTool, desc: 'Generate content from a prompt' },
+    { id: 'architect', label: 'Architect', icon: Cpu, desc: 'Design a collection schema with AI' },
+    { id: 'tools', label: 'Tools', icon: Zap, desc: 'SEO, quality, meta & more' },
+];
+// ── Result Renderers ──────────────────────────────────────────────────────────
+function SeoResultView({ data }) {
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-end gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary mb-1", children: "SEO Score" }), _jsx("span", { className: cn('text-5xl font-black tabular-nums', data.score >= 70 ? 'text-z-active-text' : data.score >= 45 ? 'text-amber-400' : 'text-red-400'), children: data.score }), _jsx("span", { className: "text-lg text-z-secondary font-black", children: "/100" })] }), _jsx("div", { className: "flex-1 h-2 bg-z-hover rounded-full overflow-hidden mb-3", children: _jsx("div", { className: cn('h-full transition-all duration-700', data.score >= 70 ? 'bg-z-accent' : data.score >= 45 ? 'bg-amber-500' : 'bg-red-500'), style: { width: `${data.score}%` } }) })] }), data.passed?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-active-text/70", children: "Passing" }), data.passed.map((p, i) => (_jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(CheckCircle2, { size: 11, className: "text-z-active-text flex-shrink-0" }), p] }, i)))] })), data.issues?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-red-500/70", children: "Issues" }), data.issues.map((p, i) => (_jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(AlertCircle, { size: 11, className: "text-red-500 flex-shrink-0" }), p] }, i)))] })), data.suggestions?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-amber-500/70", children: "Suggestions" }), data.suggestions.map((p, i) => (_jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(ChevronRight, { size: 11, className: "text-amber-500 flex-shrink-0" }), p] }, i)))] }))] }));
+}
+function QualityResultView({ data }) {
+    const gradeColor = { A: 'text-z-active-text', B: 'text-z-active-text', C: 'text-amber-400', D: 'text-orange-400', F: 'text-red-400' };
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-start gap-6", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary mb-1", children: "Grade" }), _jsx("span", { className: cn('text-6xl font-black', gradeColor[data.grade] || 'text-white'), children: data.grade })] }), _jsx("div", { className: "grid grid-cols-3 gap-3 flex-1 pt-1", children: [
+                            { label: 'Words', val: data.wordCount },
+                            { label: 'Sentences', val: data.sentenceCount },
+                            { label: 'Avg Words/Sent', val: data.avgWordsPerSentence },
+                        ].map(m => (_jsxs("div", { className: "bg-z-hover border border-z-border p-3", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-widest text-z-secondary mb-1", children: m.label }), _jsx("p", { className: "text-lg font-black text-white tabular-nums", children: m.val })] }, m.label))) })] }), data.issues?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-red-500/70", children: "Issues" }), data.issues.map((p, i) => _jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(AlertCircle, { size: 11, className: "text-red-500 flex-shrink-0" }), p] }, i))] })), data.suggestions?.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-active-text/70", children: "Suggestions" }), data.suggestions.map((p, i) => _jsxs("div", { className: "flex items-center gap-2.5 text-[10px] text-z-muted", children: [_jsx(CheckCircle2, { size: 11, className: "text-z-active-text flex-shrink-0" }), p] }, i))] }))] }));
+}
+function SchemaResultView({ data }) {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 flex-wrap", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-black text-white tracking-tight", children: data.name }), _jsxs("p", { className: "text-[9px] text-z-secondary font-mono mt-0.5", children: ["/", data.slug] })] }), _jsxs("div", { className: "flex gap-2", children: [data.drafts && _jsx("span", { className: "px-2 py-0.5 text-[7px] font-black uppercase tracking-widest bg-z-accent/10 border border-z-accent/20 text-z-active-text", children: "Drafts" }), data.timestamps && _jsx("span", { className: "px-2 py-0.5 text-[7px] font-black uppercase tracking-widest bg-gray-500/10 border border-gray-500/20 text-z-muted", children: "Timestamps" })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: [data.fields?.length || 0, " Fields"] }), data.fields?.map((f, i) => (_jsxs("div", { className: "flex items-center justify-between px-3 py-2 bg-z-hover border border-z-border hover:border-z-border-strong transition-colors group", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-[9px] font-mono text-z-active-text", children: f.name }), f.required && _jsx("span", { className: "text-[6px] font-black text-red-500 uppercase tracking-wider", children: "required" })] }), _jsx("span", { className: "text-[8px] text-gray-600 uppercase tracking-widest font-black", children: f.type })] }, i)))] })] }));
+}
+// ── Main Component ─────────────────────────────────────────────────────────────
+const AIWriterPage = () => {
+    const { theme } = useTheme();
+    const dark = theme === 'dark';
+    const [mode, setMode] = useState('writer');
+    const [prompt, setPrompt] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [result, setResult] = useState(null);
+    const [activeTool, setActiveTool] = useState('seo');
+    const [history, setHistory] = useState([]);
+    const [schemaForSave, setSchemaForSave] = useState(null);
+    const [savingSchema, setSavingSchema] = useState(false);
+    const textareaRef = useRef(null);
+    // Auto-resize textarea
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+            textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 300)}px`;
+        }
+    }, [prompt]);
+    const handleExecute = async () => {
+        if (!prompt.trim() && activeTool !== 'alt')
+            return;
+        setLoading(true);
+        setResult(null);
+        setSchemaForSave(null);
+        try {
+            let res;
+            let resultData;
+            if (mode === 'architect') {
+                res = await api.post('/system/ai-architect', { prompt });
+                resultData = res.data.data.schema;
+                setSchemaForSave(resultData);
+            }
+            else if (mode === 'writer') {
+                res = await api.post('/content-tools/ai/generate', { prompt });
+                resultData = res.data.data.text;
+            }
+            else {
+                const tool = TOOLS.find(t => t.id === activeTool);
+                let payload = { content: prompt };
+                if (activeTool === 'improve') {
+                    payload = { text: prompt, instruction: 'Make it more professional, clear, and concise. Improve grammar and flow.' };
+                }
+                else if (activeTool === 'meta') {
+                    payload = { title: 'Content', content: prompt };
+                }
+                else if (activeTool === 'seo') {
+                    payload = { title: prompt.split('\n')[0]?.substring(0, 60), content: prompt, description: prompt.substring(0, 160) };
+                }
+                else if (activeTool === 'alt') {
+                    payload = { imageUrl: prompt };
+                }
+                res = await api.post(tool.endpoint, payload);
+                const d = res.data.data;
+                if (activeTool === 'seo')
+                    resultData = d;
+                else if (activeTool === 'quality')
+                    resultData = d;
+                else if (activeTool === 'improve')
+                    resultData = d.text;
+                else if (activeTool === 'meta')
+                    resultData = d.description;
+                else if (activeTool === 'alt')
+                    resultData = d.altText;
+            }
+            setResult(resultData);
+            setHistory(prev => [{
+                    id: Date.now().toString(),
+                    mode,
+                    prompt: prompt.substring(0, 80),
+                    result: resultData,
+                    timestamp: new Date()
+                }, ...prev.slice(0, 19)]);
+            toast.success('Generated');
+        }
+        catch (err) {
+            const msg = err?.response?.data?.error?.message || err?.response?.data?.message || 'AI request failed';
+            toast.error(msg);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter')
+            handleExecute();
+    };
+    const saveSchemaToDb = async () => {
+        if (!schemaForSave)
+            return;
+        setSavingSchema(true);
+        try {
+            await api.post('/schemas', schemaForSave);
+            toast.success(`Collection "${schemaForSave.name}" created!`);
+            setSchemaForSave(null);
+        }
+        catch (err) {
+            toast.error(err?.response?.data?.error?.message || 'Failed to save schema');
+        }
+        finally {
+            setSavingSchema(false);
+        }
+    };
+    const copyResult = () => {
+        const text = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
+        navigator.clipboard.writeText(text);
+        toast.success('Copied to clipboard');
+    };
+    const downloadResult = () => {
+        const text = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
+        const ext = mode === 'architect' ? 'json' : 'txt';
+        const blob = new Blob([text], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `zenith-ai-output.${ext}`;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    const renderResult = () => {
+        if (!result)
+            return null;
+        if (mode === 'architect')
+            return _jsx(SchemaResultView, { data: result });
+        if (mode === 'tools' && activeTool === 'seo')
+            return _jsx(SeoResultView, { data: result });
+        if (mode === 'tools' && activeTool === 'quality')
+            return _jsx(QualityResultView, { data: result });
+        return (_jsx(motion.div, { initial: { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, className: "whitespace-pre-wrap text-[12px] leading-relaxed text-gray-300 font-sans", children: typeof result === 'string' ? result : JSON.stringify(result, null, 2) }));
+    };
+    const activePlaceholder = mode === 'architect'
+        ? 'Describe a collection schema... e.g., "An e-commerce product with variants, pricing, and inventory tracking"'
+        : mode === 'writer'
+            ? 'Describe the content you want to generate... e.g., "Write a compelling blog intro about sustainable fashion"'
+            : activeTool === 'alt'
+                ? 'Paste an image URL to generate alt text...'
+                : activeTool === 'meta'
+                    ? 'Paste your content to generate a meta description...'
+                    : 'Paste text to analyze...';
+    return (_jsxs("div", { className: "flex flex-col h-[calc(100vh-64px)] overflow-hidden", children: [_jsx(PageHeader, { title: "AI Architect", description: "Generate content, design schemas, and analyze text quality", actions: _jsx("div", { className: cn('flex p-0.5 border', dark ? 'bg-black border-z-border' : 'bg-z-panel border-z-border'), children: MODES.map(m => (_jsxs("button", { onClick: () => { setMode(m.id); setResult(null); setSchemaForSave(null); }, title: m.desc, className: cn('flex items-center gap-2 px-4 py-2 text-[9px] font-black uppercase tracking-widest transition-all', mode === m.id
+                            ? (dark ? 'bg-white text-black' : 'bg-gray-900 text-white')
+                            : (dark ? 'text-z-secondary hover:text-white' : 'text-z-secondary hover:text-z-primary')), children: [_jsx(m.icon, { size: 11 }), _jsx("span", { className: "hidden sm:inline", children: m.label })] }, m.id))) }) }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsxs("div", { className: cn('w-56 flex-shrink-0 border-r flex flex-col hidden lg:flex', dark ? 'border-z-border bg-black' : 'border-z-border bg-gray-50'), children: [_jsx("div", { className: cn('px-4 py-3 border-b flex-shrink-0', dark ? 'border-z-border' : 'border-z-border'), children: _jsx("p", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: "History" }) }), _jsxs("div", { className: "flex-1 overflow-y-auto p-2 space-y-1", children: [history.length === 0 && (_jsx("p", { className: "text-[8px] text-gray-600 uppercase tracking-widest p-2 text-center mt-4", children: "No history yet" })), history.map(h => (_jsxs("button", { onClick: () => { setResult(h.result); setSchemaForSave(h.mode === 'architect' ? h.result : null); }, className: cn('w-full text-left p-2.5 border border-transparent transition-all', dark ? 'hover:bg-z-hover hover:border-z-border' : 'hover:bg-white hover:border-z-border'), children: [_jsx("div", { className: "flex items-center gap-1.5 mb-1", children: _jsx("span", { className: cn('text-[7px] font-black uppercase tracking-widest', h.mode === 'architect' ? 'text-purple-400' : h.mode === 'tools' ? 'text-amber-400' : 'text-z-active-text'), children: h.mode }) }), _jsx("p", { className: "text-[9px] text-z-secondary truncate", children: h.prompt })] }, h.id)))] })] }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0 border-r", style: { borderColor: dark ? 'rgba(255,255,255,0.08)' : '#e5e7eb' }, children: [_jsx(AnimatePresence, { children: mode === 'tools' && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, className: cn('flex-shrink-0 border-b overflow-hidden', dark ? 'border-z-border' : 'border-z-border'), children: _jsx("div", { className: "p-3 flex gap-2 flex-wrap", children: TOOLS.map(tool => (_jsxs("button", { onClick: () => { setActiveTool(tool.id); setResult(null); }, title: tool.desc, className: cn('flex items-center gap-2 px-3 py-2 text-[9px] font-black uppercase tracking-widest border transition-all', activeTool === tool.id
+                                                ? (dark ? 'bg-white text-black border-white' : 'bg-gray-900 text-white border-gray-900')
+                                                : (dark ? 'border-z-border text-z-secondary hover:text-white hover:border-white/20' : 'border-z-border text-z-secondary hover:border-gray-400 hover:text-z-primary')), children: [_jsx(tool.icon, { size: 11, className: activeTool === tool.id ? '' : tool.color }), tool.name] }, tool.id))) }) })) }), _jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [_jsxs("div", { className: cn('flex-shrink-0 flex items-center gap-3 px-5 py-3 border-b', dark ? 'border-z-border' : 'border-z-border'), children: [_jsx(Terminal, { size: 12, className: "text-z-secondary" }), _jsx("span", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: mode === 'architect' ? 'Schema Prompt' : mode === 'writer' ? 'Content Prompt' : TOOLS.find(t => t.id === activeTool)?.name }), _jsx("span", { className: "ml-auto text-[8px] text-gray-600 uppercase tracking-widest hidden sm:block", children: "\u2318 + Enter to run" })] }), _jsx("textarea", { ref: textareaRef, value: prompt, onChange: e => setPrompt(e.target.value), onKeyDown: handleKeyDown, placeholder: activePlaceholder, className: cn('flex-1 w-full p-5 text-sm outline-none resize-none font-sans leading-relaxed', dark
+                                            ? 'bg-transparent text-white placeholder:text-gray-700'
+                                            : 'bg-transparent text-z-primary placeholder:text-z-muted') }), _jsx("div", { className: cn('flex-shrink-0 p-4 border-t', dark ? 'border-z-border' : 'border-z-border'), children: _jsxs("div", { className: "flex items-center gap-3", children: [prompt.trim() && (_jsx("button", { onClick: () => { setPrompt(''); setResult(null); }, className: "p-2.5 text-gray-600 hover:text-white transition-colors border border-transparent hover:border-white/10", title: "Clear", children: _jsx(RotateCcw, { size: 14 }) })), _jsx("button", { onClick: handleExecute, disabled: loading || (!prompt.trim() && activeTool !== 'alt'), className: cn('flex-1 py-3 font-black uppercase tracking-widest text-[10px] transition-all flex items-center justify-center gap-2.5', 'bg-z-accent hover:opacity-90 text-white', 'disabled:opacity-40 disabled:cursor-not-allowed', 'shadow-sm hover:shadow-sm'), children: loading
+                                                        ? _jsxs(_Fragment, { children: [_jsx(Loader2, { size: 13, className: "animate-spin" }), " Generating\u2026"] })
+                                                        : _jsxs(_Fragment, { children: [_jsx(Send, { size: 13 }), " ", mode === 'architect' ? 'Design Schema' : mode === 'writer' ? 'Generate Content' : 'Analyze'] }) })] }) })] })] }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("div", { className: cn('flex-shrink-0 flex items-center justify-between px-5 py-3 border-b', dark ? 'border-z-border' : 'border-z-border'), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Sparkles, { size: 12, className: result ? 'text-z-active-text' : 'text-z-secondary' }), _jsx("span", { className: "text-[8px] font-black uppercase tracking-[0.3em] text-z-secondary", children: "Output" }), result && _jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-z-accent shadow-sm" })] }), result && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: copyResult, title: "Copy", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: _jsx(Copy, { size: 13 }) }), _jsx("button", { onClick: downloadResult, title: "Download", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: _jsx(Download, { size: 13 }) }), mode === 'architect' && (_jsx("button", { onClick: () => { setResult(null); setSchemaForSave(null); }, title: "Clear", className: "p-2 text-z-secondary hover:text-white transition-colors border border-transparent hover:border-white/10", children: _jsx(RotateCcw, { size: 13 }) }))] }))] }), _jsx("div", { className: "flex-1 overflow-auto p-6", children: loading ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-4", children: [_jsxs("div", { className: "relative", children: [_jsx(Loader2, { size: 32, className: "animate-spin text-z-active-text" }), _jsx("div", { className: "absolute inset-0 blur-xl bg-z-accent/20 animate-pulse" })] }), _jsx("p", { className: "text-[9px] font-black uppercase tracking-[0.4em] text-z-secondary animate-pulse", children: mode === 'architect' ? 'Designing Schema…' : mode === 'writer' ? 'Writing Content…' : 'Analyzing…' })] })) : !result ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-5 opacity-30", children: [_jsx(Cpu, { size: 40, className: "text-z-secondary" }), _jsxs("div", { className: "text-center space-y-1", children: [_jsx("p", { className: "text-[9px] font-black uppercase tracking-[0.4em] text-z-secondary", children: "Awaiting Input" }), _jsx("p", { className: "text-[8px] text-gray-600 uppercase tracking-widest", children: mode === 'architect' ? 'Describe a collection to generate a schema' : mode === 'writer' ? 'Write a prompt to generate content' : 'Paste content to analyze' })] })] })) : (_jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.2 }, children: renderResult() }, JSON.stringify(result).substring(0, 50)) })) }), _jsx(AnimatePresence, { children: result && mode === 'architect' && schemaForSave && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, className: cn('flex-shrink-0 border-t overflow-hidden', dark ? 'border-z-border' : 'border-z-border'), children: _jsxs("div", { className: "px-5 py-3 flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-[8px] text-z-secondary uppercase tracking-widest", children: "Schema looks good? Save it as a live collection." }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { onClick: () => {
+                                                            const text = JSON.stringify(schemaForSave, null, 2);
+                                                            navigator.clipboard.writeText(text);
+                                                            toast.success('Schema copied as JSON');
+                                                        }, className: cn('px-4 py-2 border text-[9px] font-black uppercase tracking-widest flex items-center gap-2 transition-all', dark ? 'border-z-border text-z-muted hover:text-white hover:border-white/20' : 'border-z-border text-z-secondary hover:border-gray-400'), children: [_jsx(Code2, { size: 11 }), " Copy JSON"] }), _jsxs("button", { onClick: saveSchemaToDb, disabled: savingSchema, className: "px-5 py-2 bg-z-accent hover:opacity-90 text-white text-[9px] font-black uppercase tracking-widest flex items-center gap-2 transition-all disabled:opacity-50 shadow-sm", children: [savingSchema ? _jsx(Loader2, { size: 11, className: "animate-spin" }) : _jsx(Save, { size: 11 }), "Save Collection"] })] })] }) })) })] })] })] }));
+};
+export default AIWriterPage;

package/dist/plugin-ai-architect-ui/src/SettingsAi.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SettingsAiProps {
+    settings: Record<string, any>;
+    setSettings: (s: any) => void;
+    theme: 'light' | 'dark';
+}
+declare const SettingsAi: React.FC<SettingsAiProps>;
+export default SettingsAi;

package/dist/plugin-ai-architect-ui/src/SettingsAi.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Lock, Loader2, CheckCircle2, AlertCircle, ExternalLink, Eye, EyeOff, Cpu, Zap, ChevronRight, Info, TestTube2 } from 'lucide-react';
+import { cn } from '../../admin/src/lib/utils';
+import api from '../../admin/src/lib/api';
+import toast from 'react-hot-toast';
+const PROVIDERS = [
+    {
+        id: 'openrouter',
+        name: 'OpenRouter',
+        color: 'text-z-active-text',
+        description: 'Unified gateway to 200+ models from any provider via one API key',
+        docsUrl: 'https://openrouter.ai/keys',
+        keyPlaceholder: 'sk-or-v1-...',
+        keyField: 'openRouterApiKey',
+        badge: 'Recommended',
+        models: [
+            { value: 'anthropic/claude-3.5-sonnet', label: 'Claude 3.5 Sonnet', tier: 'pro' },
+            { value: 'anthropic/claude-3.5-haiku', label: 'Claude 3.5 Haiku', tier: 'pro' },
+            { value: 'anthropic/claude-3-opus', label: 'Claude 3 Opus', tier: 'ultra' },
+            { value: 'openai/gpt-4o', label: 'GPT-4o', tier: 'pro' },
+            { value: 'openai/gpt-4o-mini', label: 'GPT-4o Mini', tier: 'free' },
+            { value: 'openai/gpt-4-turbo', label: 'GPT-4 Turbo', tier: 'pro' },
+            { value: 'google/gemini-pro-1.5', label: 'Gemini 1.5 Pro', tier: 'pro' },
+            { value: 'google/gemini-flash-1.5', label: 'Gemini 1.5 Flash', tier: 'free' },
+            { value: 'meta-llama/llama-3.3-70b-instruct', label: 'Llama 3.3 70B', tier: 'free' },
+            { value: 'mistralai/mistral-large', label: 'Mistral Large', tier: 'pro' },
+            { value: 'mistralai/mixtral-8x7b-instruct', label: 'Mixtral 8x7B', tier: 'free' },
+            { value: 'deepseek/deepseek-r1', label: 'DeepSeek R1', tier: 'pro' },
+            { value: 'x-ai/grok-beta', label: 'Grok Beta', tier: 'pro' },
+            { value: 'cohere/command-r-plus', label: 'Cohere Command R+', tier: 'pro' },
+            { value: 'perplexity/llama-3.1-sonar-large-128k-online', label: 'Perplexity Sonar Large', tier: 'pro' },
+        ],
+    },
+    {
+        id: 'openai',
+        name: 'OpenAI',
+        color: 'text-z-active-text',
+        description: 'Direct access to GPT-4o, o1, and all OpenAI models',
+        docsUrl: 'https://platform.openai.com/api-keys',
+        keyPlaceholder: 'sk-proj-...',
+        keyField: 'openaiApiKey',
+        models: [
+            { value: 'gpt-4o', label: 'GPT-4o', tier: 'pro' },
+            { value: 'gpt-4o-mini', label: 'GPT-4o Mini', tier: 'free' },
+            { value: 'gpt-4-turbo', label: 'GPT-4 Turbo', tier: 'pro' },
+            { value: 'o1-preview', label: 'o1 Preview', tier: 'ultra' },
+            { value: 'o1-mini', label: 'o1 Mini', tier: 'pro' },
+            { value: 'o3-mini', label: 'o3 Mini', tier: 'pro' },
+        ],
+    },
+    {
+        id: 'anthropic',
+        name: 'Anthropic',
+        color: 'text-orange-400',
+        description: 'Direct access to Claude models with vision and context support',
+        docsUrl: 'https://console.anthropic.com/settings/keys',
+        keyPlaceholder: 'sk-ant-...',
+        keyField: 'anthropicApiKey',
+        models: [
+            { value: 'claude-3-5-sonnet-20241022', label: 'Claude 3.5 Sonnet', tier: 'pro' },
+            { value: 'claude-3-5-haiku-20241022', label: 'Claude 3.5 Haiku', tier: 'free' },
+            { value: 'claude-3-opus-20240229', label: 'Claude 3 Opus', tier: 'ultra' },
+        ],
+    },
+    {
+        id: 'google',
+        name: 'Google Gemini',
+        color: 'text-z-active-text',
+        description: 'Gemini Pro/Flash with long context and multimodal capabilities',
+        docsUrl: 'https://aistudio.google.com/app/apikey',
+        keyPlaceholder: 'AIza...',
+        keyField: 'googleApiKey',
+        models: [
+            { value: 'gemini-1.5-pro-latest', label: 'Gemini 1.5 Pro', tier: 'pro' },
+            { value: 'gemini-1.5-flash-latest', label: 'Gemini 1.5 Flash', tier: 'free' },
+            { value: 'gemini-2.0-flash-exp', label: 'Gemini 2.0 Flash', tier: 'pro' },
+        ],
+    },
+    {
+        id: 'groq',
+        name: 'Groq',
+        color: 'text-pink-400',
+        description: 'Ultra-fast inference with LPU hardware — 800+ tokens/sec',
+        docsUrl: 'https://console.groq.com/keys',
+        keyPlaceholder: 'gsk_...',
+        keyField: 'groqApiKey',
+        badge: 'Fastest',
+        models: [
+            { value: 'llama-3.3-70b-versatile', label: 'Llama 3.3 70B', tier: 'free' },
+            { value: 'llama-3.1-8b-instant', label: 'Llama 3.1 8B Instant', tier: 'free' },
+            { value: 'mixtral-8x7b-32768', label: 'Mixtral 8x7B', tier: 'free' },
+            { value: 'gemma2-9b-it', label: 'Gemma 2 9B', tier: 'free' },
+        ],
+    },
+    {
+        id: 'nvidia',
+        name: 'NVIDIA NIM',
+        color: 'text-green-400',
+        description: 'NVIDIA-hosted models with GPU-accelerated inference',
+        docsUrl: 'https://build.nvidia.com/explore/discover',
+        keyPlaceholder: 'nvapi-...',
+        keyField: 'nvidiaApiKey',
+        models: [
+            { value: 'meta/llama-3.1-405b-instruct', label: 'Llama 3.1 405B', tier: 'ultra' },
+            { value: 'meta/llama-3.1-70b-instruct', label: 'Llama 3.1 70B', tier: 'pro' },
+            { value: 'meta/llama-3.1-8b-instruct', label: 'Llama 3.1 8B', tier: 'free' },
+            { value: 'mistralai/mistral-large-2-instruct', label: 'Mistral Large 2', tier: 'pro' },
+            { value: 'nvidia/llama-3.1-nemotron-70b-instruct', label: 'Nemotron 70B', tier: 'pro' },
+        ],
+    },
+    {
+        id: 'together',
+        name: 'Together AI',
+        color: 'text-yellow-400',
+        description: 'Open-source models on fast distributed inference infrastructure',
+        docsUrl: 'https://api.together.xyz/settings/api-keys',
+        keyPlaceholder: 'together-...',
+        keyField: 'togetherApiKey',
+        models: [
+            { value: 'meta-llama/Llama-3.3-70B-Instruct-Turbo', label: 'Llama 3.3 70B Turbo', tier: 'pro' },
+            { value: 'mistralai/Mixtral-8x7B-Instruct-v0.1', label: 'Mixtral 8x7B', tier: 'free' },
+            { value: 'deepseek-ai/DeepSeek-R1', label: 'DeepSeek R1', tier: 'pro' },
+        ],
+    },
+    {
+        id: 'mistral',
+        name: 'Mistral AI',
+        color: 'text-amber-400',
+        description: 'Direct access to Mistral, Codestral, and Pixtral models',
+        docsUrl: 'https://console.mistral.ai/api-keys',
+        keyPlaceholder: 'mistral-...',
+        keyField: 'mistralApiKey',
+        models: [
+            { value: 'mistral-large-latest', label: 'Mistral Large', tier: 'pro' },
+            { value: 'mistral-small-latest', label: 'Mistral Small', tier: 'free' },
+            { value: 'codestral-latest', label: 'Codestral', tier: 'pro' },
+            { value: 'pixtral-large-latest', label: 'Pixtral Large', tier: 'ultra' },
+        ],
+    },
+    {
+        id: 'cohere',
+        name: 'Cohere',
+        color: 'text-teal-400',
+        description: 'Enterprise-grade models optimized for search and RAG workflows',
+        docsUrl: 'https://dashboard.cohere.com/api-keys',
+        keyPlaceholder: 'co_...',
+        keyField: 'cohereApiKey',
+        models: [
+            { value: 'command-r-plus', label: 'Command R+', tier: 'ultra' },
+            { value: 'command-r', label: 'Command R', tier: 'pro' },
+            { value: 'command-light', label: 'Command Light', tier: 'free' },
+        ],
+    },
+    {
+        id: 'xai',
+        name: 'xAI / Grok',
+        color: 'text-gray-300',
+        description: "Elon Musk's xAI Grok model with real-time X/Twitter integration",
+        docsUrl: 'https://console.x.ai/',
+        keyPlaceholder: 'xai-...',
+        keyField: 'xaiApiKey',
+        models: [
+            { value: 'grok-beta', label: 'Grok Beta', tier: 'pro' },
+            { value: 'grok-vision-beta', label: 'Grok Vision Beta', tier: 'pro' },
+        ],
+    },
+];
+const TIER_BADGE = {
+    free: 'bg-z-active-bg text-z-active-text border-z-accent/20',
+    pro: 'bg-z-accent/10 text-z-active-text border-z-accent/20',
+    ultra: 'bg-purple-500/10 text-purple-400 border-purple-500/20',
+};
+const SettingsAi = ({ settings, setSettings, theme }) => {
+    const dark = theme === 'dark';
+    const [validating, setValidating] = useState(false);
+    const [testResult, setTestResult] = useState(null);
+    const [showKeys, setShowKeys] = useState({});
+    const [expandedProvider, setExpandedProvider] = useState('openrouter');
+    const [dynamicModels, setDynamicModels] = useState({});
+    const [fetchingModels, setFetchingModels] = useState(null);
+    const activeProvider = PROVIDERS.find(p => {
+        const key = settings[p.keyField]?.trim();
+        return key && key !== '[MASKED_CREDENTIAL]';
+    }) || PROVIDERS.find(p => p.id === 'openrouter');
+    const handleValidate = async () => {
+        setValidating(true);
+        setTestResult(null);
+        try {
+            const providerId = settings.aiProvider || 'openrouter';
+            const providerConfig = PROVIDERS.find(p => p.id === providerId);
+            const apiKeyField = providerConfig ? providerConfig.keyField : 'openRouterApiKey';
+            const apiKey = settings[apiKeyField];
+            const res = await api.post('/system/settings/ai/validate', {
+                provider: providerId,
+                model: settings.aiModel,
+                apiKey: apiKey
+            });
+            setTestResult({ ok: true, msg: res.data.message || 'API Key is valid' });
+            toast.success('AI connection verified');
+        }
+        catch (err) {
+            const msg = err?.response?.data?.error?.message || err?.response?.data?.message || 'Connection failed';
+            setTestResult({ ok: false, msg });
+            toast.error('AI connection failed');
+        }
+        finally {
+            setValidating(false);
+        }
+    };
+    const handleFetchModels = async (providerId, apiKeyField) => {
+        setFetchingModels(providerId);
+        try {
+            const apiKey = settings[apiKeyField];
+            const res = await api.post('/system/settings/ai/models', {
+                provider: providerId,
+                apiKey: apiKey
+            });
+            const models = res.data?.data || [];
+            setDynamicModels(prev => ({ ...prev, [providerId]: models }));
+            toast.success(`Fetched ${models.length} models for ${providerId}`);
+        }
+        catch (err) {
+            const msg = err?.response?.data?.error?.message || err?.response?.data?.message || 'Failed to fetch models';
+            toast.error(msg);
+        }
+        finally {
+            setFetchingModels(null);
+        }
+    };
+    const toggleKey = (id) => setShowKeys(prev => ({ ...prev, [id]: !prev[id] }));
+    const inp = (dark) => cn('w-full border px-3 py-2.5 text-sm font-semibold outline-none transition-colors rounded-none focus-visible:ring-2 focus-visible:ring-z-active-border focus-visible:ring-offset-1 focus-visible:ring-offset-black', dark
+        ? 'bg-black border-z-border text-white placeholder:text-gray-700 focus:border-z-accent'
+        : 'bg-z-panel border-z-border text-z-primary placeholder:text-z-muted focus:border-z-accent');
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: cn('p-5 border space-y-4 shadow-sm', dark ? 'bg-z-panel backdrop-blur-md border-z-border' : 'bg-z-input border-z-border'), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Cpu, { size: 14, className: "text-z-active-text" }), _jsx("span", { className: cn('text-sm font-semibold  ', dark ? 'text-white' : 'text-z-primary'), children: "Active Model" }), _jsx("span", { className: "ml-auto text-sm text-z-secondary", children: "Used by all AI features" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-semibold text-z-secondary", children: "AI Provider" }), _jsx("select", { value: settings.aiProvider || 'openrouter', onChange: e => setSettings({ ...settings, aiProvider: e.target.value, aiModel: PROVIDERS.find(p => p.id === e.target.value)?.models[0]?.value || '' }), className: inp(dark), children: PROVIDERS.map(p => _jsx("option", { value: p.id, children: p.name }, p.id)) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-semibold text-z-secondary", children: "Model" }), _jsx("select", { value: settings.aiModel || '', onChange: e => setSettings({ ...settings, aiModel: e.target.value }), className: inp(dark), children: (dynamicModels[settings.aiProvider || 'openrouter'] || PROVIDERS.find(p => p.id === (settings.aiProvider || 'openrouter'))?.models || []).map(m => (_jsxs("option", { value: m.value, children: [m.label, " ", m.tier ? `(${m.tier})` : ''] }, m.value))) })] })] }), _jsxs("div", { className: "flex items-center gap-3 pt-1", children: [_jsxs("button", { onClick: handleValidate, disabled: validating, className: "px-4 py-2 bg-z-accent hover:opacity-90 shadow-sm text-white text-sm font-semibold flex items-center gap-2 disabled:opacity-50 transition-all", children: [validating ? _jsx(Loader2, { size: 11, className: "animate-spin" }) : _jsx(TestTube2, { size: 11 }), "Test Connection"] }), testResult && (_jsxs("div", { className: cn('flex items-center gap-2 text-sm font-semibold  ', testResult.ok ? 'text-z-active-text' : 'text-red-400'), children: [testResult.ok ? _jsx(CheckCircle2, { size: 11 }) : _jsx(AlertCircle, { size: 11 }), testResult.msg] }))] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Lock, { size: 12, className: "text-z-secondary" }), _jsx("span", { className: "text-sm font-semibold text-z-secondary", children: "Provider API Keys" }), _jsx("span", { className: "ml-auto text-sm text-gray-600", children: "All keys encrypted at rest" })] }), PROVIDERS.map(provider => {
+                        const isExpanded = expandedProvider === provider.id;
+                        const keyValue = settings[provider.keyField] || '';
+                        const hasKey = keyValue.trim() && keyValue !== '[MASKED_CREDENTIAL]';
+                        const isMasked = keyValue === '[MASKED_CREDENTIAL]';
+                        return (_jsxs("div", { className: cn('border transition-all shadow-sm', isExpanded
+                                ? (dark ? 'border-white/15 bg-black/80 backdrop-blur-md shadow-sm' : 'border-z-border-strong bg-white')
+                                : ('z-card-interactive')), children: [_jsxs("button", { onClick: () => setExpandedProvider(isExpanded ? '' : provider.id), className: "w-full flex items-center gap-3 px-4 py-3 text-left", children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [_jsx("div", { className: cn('w-2 h-2 rounded-full flex-shrink-0', hasKey || isMasked ? 'bg-z-accent shadow-sm' : 'bg-gray-700') }), _jsx("div", { className: cn('text-sm font-semibold', provider.color), children: provider.name }), provider.badge && (_jsx("span", { className: "text-sm font-semibold px-1.5 py-0.5 bg-z-active-bg border border-z-active-border text-z-active-text", children: provider.badge })), _jsx("span", { className: "text-sm text-gray-600 truncate hidden sm:block", children: provider.description })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [isMasked && _jsx("span", { className: "text-sm text-z-active-text font-semibold", children: "Configured" }), hasKey && !isMasked && _jsx("span", { className: "text-sm text-z-active-text font-semibold", children: "Active" }), _jsx(ChevronRight, { size: 12, className: cn('text-z-secondary transition-transform', isExpanded && 'rotate-90') })] })] }), isExpanded && (_jsxs("div", { className: "px-4 pb-4 space-y-3 border-t", style: { borderColor: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)' }, children: [_jsx("p", { className: "text-sm text-z-secondary pt-3", children: provider.description }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-semibold text-z-secondary", children: "API Key" }), _jsxs("a", { href: provider.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "text-sm text-z-active-text hover:text-z-active-text flex items-center gap-1 transition-colors", children: ["Get Key ", _jsx(ExternalLink, { size: 9 })] })] }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: showKeys[provider.id] ? 'text' : 'password', value: keyValue, onChange: e => setSettings({ ...settings, [provider.keyField]: e.target.value }), placeholder: isMasked ? '••••••••••••••••' : provider.keyPlaceholder, className: cn(inp(dark), 'pr-10 font-mono') }), _jsx("button", { type: "button", onClick: () => toggleKey(provider.id), className: "absolute right-3 top-1/2 -translate-y-1/2 text-z-secondary hover:text-white transition-colors", children: showKeys[provider.id] ? _jsx(EyeOff, { size: 13 }) : _jsx(Eye, { size: 13 }) })] }), isMasked && (_jsxs("p", { className: "text-sm text-amber-500/70 flex items-center gap-1", children: [_jsx(Lock, { size: 9 }), " Key is stored \u2014 enter a new value to replace it"] }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("label", { className: "text-sm font-semibold text-z-secondary", children: ["Available Models ", dynamicModels[provider.id] ? `(${dynamicModels[provider.id].length})` : ''] }), _jsxs("button", { type: "button", onClick: () => handleFetchModels(provider.id, provider.keyField), disabled: fetchingModels === provider.id || (!hasKey && !isMasked), className: "text-sm text-z-active-text hover:text-z-active-text flex items-center gap-1 disabled:opacity-50 transition-colors", children: [fetchingModels === provider.id ? _jsx(Loader2, { size: 9, className: "animate-spin" }) : _jsx(Zap, { size: 9 }), "Fetch Models"] })] }), _jsx("div", { className: "flex flex-wrap gap-1.5 max-h-[120px] overflow-y-auto pr-2 custom-scrollbar", children: (dynamicModels[provider.id] || provider.models).map(m => (_jsx("span", { title: m.value, className: cn('text-sm font-semibold   px-2 py-1 border', m.tier ? TIER_BADGE[m.tier] : 'bg-z-hover border-white/10 text-z-muted'), children: m.label }, m.value))) })] })] }))] }, provider.id));
+                    })] }), _jsxs("div", { className: cn('flex gap-3 p-4 border', dark ? 'bg-z-accent/5 border-z-accent/15' : 'bg-z-active-bg border-z-active-border'), children: [_jsx(Info, { size: 12, className: "text-z-active-text flex-shrink-0 mt-0.5" }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-semibold text-z-active-text", children: "Provider Priority" }), _jsx("p", { className: "text-sm text-z-secondary leading-relaxed", children: "The AI engine auto-selects providers in this order: OpenRouter \u2192 xAI \u2192 NVIDIA NIM \u2192 Groq \u2192 Together AI \u2192 Mistral \u2192 Cohere \u2192 OpenAI \u2192 Anthropic \u2192 Google Gemini. Set the \"Active Model\" above to override. Keys are never sent to the client." })] })] })] }));
+};
+export default SettingsAi;

package/dist/plugin-ai-architect-ui/src/index.d.ts

@@ -0,0 +1 @@
+export * from './plugin';

package/dist/plugin-ai-architect-ui/src/index.js

@@ -0,0 +1 @@
+export * from './plugin';

package/dist/plugin-ai-architect-ui/src/plugin.d.ts

@@ -0,0 +1,2 @@
+export { default as AIWriterPage } from './AIWriterPage';
+export { default as SettingsAi } from './SettingsAi';

package/dist/plugin-ai-architect-ui/src/plugin.js

@@ -0,0 +1,2 @@
+export { default as AIWriterPage } from './AIWriterPage';
+export { default as SettingsAi } from './SettingsAi';

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@zenith-open/zenithcms-plugin-ai-architect-ui",
+  "version": "1.0.0-beta.10",
+  "type": "module",
+  "description": "AI Copilot and SEO Architect UI Plugin for Zenith CMS",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.354.0",
+    "react-hot-toast": "2.6.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.21"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc"
+  }
+}