flowengine-mcp-app 1.0.0

package/build/ui/instances.js

@@ -0,0 +1,229 @@
+/**
+ * Instance / Hosting Management UI
+ */
+import { baseLayout, renderEmptyState } from './base.js';
+export function renderInstancesManager(instances) {
+    if (!instances || instances.length === 0) {
+        return baseLayout('Hosting', `
+      <div class="header">
+        <h1>🚀 Hosting Management</h1>
+        <p>Manage your FlowEngine instances</p>
+      </div>
+      ${renderEmptyState('No Instances Found', 'You don\'t have any instances yet. Provision your first instance to get started.')}
+      <div class="card">
+        <h3 style="margin-bottom: 12px;">Get Started</h3>
+        <p style="color: #999; margin-bottom: 16px;">FlowEngine instances are fully-managed n8n automation servers. Each instance includes:</p>
+        <ul style="color: #999; margin-left: 20px; margin-bottom: 16px;">
+          <li>Dedicated n8n automation server</li>
+          <li>Custom domain support</li>
+          <li>Automated backups</li>
+          <li>Scalable storage</li>
+        </ul>
+        <button class="btn btn-primary">+ Provision New Instance</button>
+      </div>
+    `);
+    }
+    const activeInstances = instances.filter((i) => i.status === 'active' || i.status === 'running');
+    const totalStorage = instances.reduce((sum, i) => sum + i.storage_limit_gb, 0);
+    const usedStorage = instances.reduce((sum, i) => sum + (i.storage_used_gb || 0), 0);
+    const instanceCards = instances
+        .map((instance) => {
+        const statusBadge = getInstanceStatusBadge(instance.status);
+        const storagePercent = instance.storage_used_gb ? Math.round((instance.storage_used_gb / instance.storage_limit_gb) * 100) : 0;
+        const storageBarColor = storagePercent > 80 ? '#f87171' : storagePercent > 60 ? '#facc15' : '#4ade80';
+        return `
+        <div class="card">
+          <div class="card-header">
+            <div>
+              <div class="card-title">${instance.instance_url}</div>
+              <div class="card-subtitle">ID: ${instance.id.slice(0, 8)}...</div>
+            </div>
+            ${statusBadge}
+          </div>
+
+          <div>
+            <div class="stat">
+              <span class="stat-label">Storage</span>
+              <span class="stat-value">${instance.storage_used_gb || 0} GB / ${instance.storage_limit_gb} GB</span>
+            </div>
+            <div style="width: 100%; height: 6px; background: #262626; border-radius: 3px; overflow: hidden; margin-top: 8px;">
+              <div style="width: ${storagePercent}%; height: 100%; background: ${storageBarColor}; transition: width 0.3s;"></div>
+            </div>
+
+            <div class="stat" style="margin-top: 12px;">
+              <span class="stat-label">Subscription</span>
+              <span class="stat-value">${instance.subscription_status || 'Active'}</span>
+            </div>
+            ${instance.tier
+            ? `
+            <div class="stat">
+              <span class="stat-label">Tier</span>
+              <span class="stat-value"><span class="badge badge-neutral">${instance.tier}</span></span>
+            </div>`
+            : ''}
+            <div class="stat">
+              <span class="stat-label">Created</span>
+              <span class="stat-value">${new Date(instance.created_at).toLocaleDateString()}</span>
+            </div>
+          </div>
+
+          <div class="actions">
+            <a href="https://${instance.instance_url}" target="_blank" class="btn btn-primary">
+              Open Instance →
+            </a>
+            <button class="btn btn-secondary">Settings</button>
+          </div>
+        </div>
+      `;
+    })
+        .join('');
+    return baseLayout('Hosting', `
+    <div class="header">
+      <h1>🚀 Hosting Management</h1>
+      <p>${instances.length} instances • ${activeInstances.length} active • ${usedStorage.toFixed(1)} / ${totalStorage} GB used</p>
+    </div>
+
+    <div class="grid">
+      ${instanceCards}
+    </div>
+
+    <div class="card">
+      <h3 style="margin-bottom: 12px;">Quick Actions</h3>
+      <div style="display: flex; gap: 12px;">
+        <button class="btn btn-primary">+ New Instance</button>
+        <button class="btn btn-secondary">View All Backups</button>
+        <button class="btn btn-secondary">Billing Settings</button>
+      </div>
+    </div>
+  `);
+}
+export function renderInstanceDetails(instance, healthData) {
+    const statusBadge = getInstanceStatusBadge(instance.status);
+    const storagePercent = instance.storage_used_gb ? Math.round((instance.storage_used_gb / instance.storage_limit_gb) * 100) : 0;
+    return baseLayout(`Instance: ${instance.instance_url}`, `
+    <div class="header">
+      <h1>🚀 ${instance.instance_url}</h1>
+      <p>Instance ID: <span class="code">${instance.id}</span> • ${statusBadge}</p>
+    </div>
+
+    <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 24px;">
+      <div class="card">
+        <div class="stat">
+          <span class="stat-label">Status</span>
+          <span class="stat-value">${statusBadge}</span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="stat">
+          <span class="stat-label">Storage</span>
+          <span class="stat-value">${instance.storage_used_gb || 0} / ${instance.storage_limit_gb} GB</span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="stat">
+          <span class="stat-label">Subscription</span>
+          <span class="stat-value">${instance.subscription_status || 'Active'}</span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="stat">
+          <span class="stat-label">Uptime</span>
+          <span class="stat-value">${healthData?.uptime || '99.9%'}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="card" style="margin-bottom: 24px;">
+      <h3 style="margin-bottom: 16px;">Storage Usage</h3>
+      <div style="margin-bottom: 12px;">
+        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+          <span style="color: #999; font-size: 14px;">Used: ${instance.storage_used_gb || 0} GB</span>
+          <span style="color: #999; font-size: 14px;">${storagePercent}%</span>
+        </div>
+        <div style="width: 100%; height: 12px; background: #262626; border-radius: 6px; overflow: hidden;">
+          <div style="width: ${storagePercent}%; height: 100%; background: linear-gradient(90deg, #4ade80, #22c55e); transition: width 0.3s;"></div>
+        </div>
+      </div>
+      ${storagePercent > 80
+        ? '<div style="color: #f87171; font-size: 13px; margin-top: 12px;">⚠️ Storage is running low. Consider upgrading your plan.</div>'
+        : ''}
+    </div>
+
+    <div class="card" style="margin-bottom: 24px;">
+      <h3 style="margin-bottom: 16px;">Instance Information</h3>
+      <div class="stat">
+        <span class="stat-label">URL</span>
+        <span class="stat-value"><a href="https://${instance.instance_url}" target="_blank">${instance.instance_url}</a></span>
+      </div>
+      ${instance.tier
+        ? `
+      <div class="stat">
+        <span class="stat-label">Tier</span>
+        <span class="stat-value"><span class="badge badge-neutral">${instance.tier}</span></span>
+      </div>`
+        : ''}
+      <div class="stat">
+        <span class="stat-label">Created</span>
+        <span class="stat-value">${new Date(instance.created_at).toLocaleDateString()}</span>
+      </div>
+      <div class="stat">
+        <span class="stat-label">Last Updated</span>
+        <span class="stat-value">${new Date(instance.updated_at).toLocaleDateString()}</span>
+      </div>
+    </div>
+
+    ${healthData ? renderHealthMetrics(healthData) : ''}
+
+    <div class="actions">
+      <a href="https://${instance.instance_url}" target="_blank" class="btn btn-primary">
+        Open Instance →
+      </a>
+      <button class="btn btn-secondary">Change Domain</button>
+      <button class="btn btn-secondary">Upgrade Storage</button>
+      <button class="btn btn-secondary">Create Backup</button>
+      <button class="btn btn-danger">Delete Instance</button>
+    </div>
+  `);
+}
+function getInstanceStatusBadge(status) {
+    const statusLower = status.toLowerCase();
+    if (statusLower === 'active' || statusLower === 'running') {
+        return '<span class="badge badge-success"><span class="dot dot-success"></span>Active</span>';
+    }
+    else if (statusLower === 'paused' || statusLower === 'suspended') {
+        return '<span class="badge badge-warning"><span class="dot dot-warning"></span>Paused</span>';
+    }
+    else if (statusLower === 'error' || statusLower === 'failed') {
+        return '<span class="badge badge-error"><span class="dot dot-error"></span>Error</span>';
+    }
+    else if (statusLower === 'provisioning' || statusLower === 'starting') {
+        return '<span class="badge badge-warning"><span class="dot dot-warning"></span>Starting</span>';
+    }
+    else {
+        return '<span class="badge badge-neutral"><span class="dot dot-neutral"></span>Inactive</span>';
+    }
+}
+function renderHealthMetrics(healthData) {
+    return `
+    <div class="card" style="margin-bottom: 24px;">
+      <h3 style="margin-bottom: 16px;">Health Metrics</h3>
+      <div class="stat">
+        <span class="stat-label">Response Time</span>
+        <span class="stat-value">${healthData.response_time || '120ms'}</span>
+      </div>
+      <div class="stat">
+        <span class="stat-label">CPU Usage</span>
+        <span class="stat-value">${healthData.cpu_usage || '23%'}</span>
+      </div>
+      <div class="stat">
+        <span class="stat-label">Memory Usage</span>
+        <span class="stat-value">${healthData.memory_usage || '512 MB'}</span>
+      </div>
+      <div class="stat">
+        <span class="stat-label">Last Health Check</span>
+        <span class="stat-value">${healthData.last_check ? new Date(healthData.last_check).toLocaleString() : 'Just now'}</span>
+      </div>
+    </div>
+  `;
+}
+//# sourceMappingURL=instances.js.map

package/build/ui/instances.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"instances.js","sourceRoot":"","sources":["../../src/ui/instances.ts"],"names":[],"mappings":"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"}

package/build/ui/portals.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Client Portals UI
+ */
+export interface PortalInstance {
+    id: string;
+    instance_url: string;
+    storage_limit_gb: number;
+    status: string;
+    created_at: string;
+    subscription_status?: string;
+}
+export declare function renderPortalsDashboard(instances: PortalInstance[]): string;
+export declare function renderPortalDetails(instanceId: string, workflows: any[], widgets: any[]): string;
+//# sourceMappingURL=portals.d.ts.map

package/build/ui/portals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portals.d.ts","sourceRoot":"","sources":["../../src/ui/portals.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,MAAM,CA6E1E;AAkBD,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,MAAM,CAqChG"}

package/build/ui/portals.js

@@ -0,0 +1,184 @@
+/**
+ * Client Portals UI
+ */
+import { baseLayout, renderEmptyState } from './base.js';
+export function renderPortalsDashboard(instances) {
+    if (!instances || instances.length === 0) {
+        return baseLayout('Client Portals', `
+      <div class="header">
+        <h1>🏢 Client Portals</h1>
+        <p>Manage your client instances and portals</p>
+      </div>
+      ${renderEmptyState('No Portals Found', 'You don\'t have any client portals yet. Create your first instance to get started.')}
+    `);
+    }
+    const instanceCards = instances
+        .map((instance) => {
+        const statusBadge = getStatusBadge(instance.status, instance.subscription_status);
+        const storageUsed = Math.floor(Math.random() * instance.storage_limit_gb * 0.7); // Mock data
+        return `
+        <div class="card">
+          <div class="card-header">
+            <div>
+              <div class="card-title">${instance.instance_url}</div>
+              <div class="card-subtitle">ID: ${instance.id.slice(0, 8)}...</div>
+            </div>
+            ${statusBadge}
+          </div>
+
+          <div>
+            <div class="stat">
+              <span class="stat-label">Storage</span>
+              <span class="stat-value">${storageUsed} GB / ${instance.storage_limit_gb} GB</span>
+            </div>
+            <div class="stat">
+              <span class="stat-label">Subscription</span>
+              <span class="stat-value">${instance.subscription_status || 'Active'}</span>
+            </div>
+            <div class="stat">
+              <span class="stat-label">Created</span>
+              <span class="stat-value">${new Date(instance.created_at).toLocaleDateString()}</span>
+            </div>
+          </div>
+
+          <div class="actions">
+            <a href="https://${instance.instance_url}" target="_blank" class="btn btn-primary">
+              Open Portal →
+            </a>
+            <button class="btn btn-secondary">Manage</button>
+          </div>
+        </div>
+      `;
+    })
+        .join('');
+    return baseLayout('Client Portals', `
+    <div class="header">
+      <h1>🏢 Client Portals</h1>
+      <p>Manage ${instances.length} client ${instances.length === 1 ? 'instance' : 'instances'}</p>
+    </div>
+
+    <div class="grid">
+      ${instanceCards}
+    </div>
+
+    <div class="card">
+      <h3 style="margin-bottom: 12px;">Quick Actions</h3>
+      <div style="display: flex; gap: 12px;">
+        <button class="btn btn-primary">+ New Portal</button>
+        <button class="btn btn-secondary">View All Clients</button>
+        <button class="btn btn-secondary">Invite Client</button>
+      </div>
+    </div>
+  `);
+}
+function getStatusBadge(status, subscriptionStatus) {
+    const isActive = status === 'active' || status === 'running';
+    const isPaused = status === 'paused' || subscriptionStatus === 'paused';
+    const isError = status === 'error' || status === 'failed';
+    if (isActive) {
+        return '<span class="badge badge-success"><span class="dot dot-success"></span>Active</span>';
+    }
+    else if (isPaused) {
+        return '<span class="badge badge-warning"><span class="dot dot-warning"></span>Paused</span>';
+    }
+    else if (isError) {
+        return '<span class="badge badge-error"><span class="dot dot-error"></span>Error</span>';
+    }
+    else {
+        return '<span class="badge badge-neutral"><span class="dot dot-neutral"></span>Inactive</span>';
+    }
+}
+export function renderPortalDetails(instanceId, workflows, widgets) {
+    return baseLayout('Portal Details', `
+    <div class="header">
+      <h1>📊 Portal Details</h1>
+      <p>Instance: <span class="code">${instanceId.slice(0, 8)}...</span></p>
+    </div>
+
+    <div class="card" style="margin-bottom: 24px;">
+      <h3 style="margin-bottom: 16px;">Overview</h3>
+      <div class="stat">
+        <span class="stat-label">Active Workflows</span>
+        <span class="stat-value">${workflows.filter((w) => w.active).length} / ${workflows.length}</span>
+      </div>
+      <div class="stat">
+        <span class="stat-label">Widgets</span>
+        <span class="stat-value">${widgets.length}</span>
+      </div>
+      <div class="stat">
+        <span class="stat-label">Status</span>
+        <span class="stat-value"><span class="badge badge-success">Active</span></span>
+      </div>
+    </div>
+
+    <h3 style="margin: 24px 0 16px;">Workflows</h3>
+    ${renderWorkflowsList(workflows)}
+
+    <h3 style="margin: 24px 0 16px;">Widgets</h3>
+    ${renderWidgetsList(widgets)}
+
+    <div class="actions">
+      <button class="btn btn-primary">Open Portal</button>
+      <button class="btn btn-secondary">Manage Settings</button>
+    </div>
+  `);
+}
+function renderWorkflowsList(workflows) {
+    if (!workflows || workflows.length === 0) {
+        return renderEmptyState('No Workflows', 'No workflows configured for this portal.');
+    }
+    const rows = workflows
+        .slice(0, 5)
+        .map((w) => `
+    <tr>
+      <td>${w.name}</td>
+      <td>${w.active ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-neutral">Inactive</span>'}</td>
+      <td>${w.executions_count || 0} runs</td>
+    </tr>
+  `)
+        .join('');
+    return `
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Workflow</th>
+          <th>Status</th>
+          <th>Executions</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${rows}
+      </tbody>
+    </table>
+  `;
+}
+function renderWidgetsList(widgets) {
+    if (!widgets || widgets.length === 0) {
+        return renderEmptyState('No Widgets', 'No widgets configured for this portal.');
+    }
+    const rows = widgets
+        .slice(0, 5)
+        .map((w) => `
+    <tr>
+      <td>${w.name}</td>
+      <td><span class="code">${w.widget_type}</span></td>
+      <td>${w.is_active ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-neutral">Inactive</span>'}</td>
+    </tr>
+  `)
+        .join('');
+    return `
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Widget</th>
+          <th>Type</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${rows}
+      </tbody>
+    </table>
+  `;
+}
+//# sourceMappingURL=portals.js.map

package/build/ui/portals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portals.js","sourceRoot":"","sources":["../../src/ui/portals.ts"],"names":[],"mappings":"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"}

package/build/ui/widgets.d.ts

@@ -0,0 +1,17 @@
+/**
+ * UI Builder - Forms, Chatbots, and Interactive Components
+ */
+export interface Widget {
+    id: string;
+    name: string;
+    widget_type: string;
+    webhook_url: string;
+    is_active: boolean;
+    created_at: string;
+    updated_at: string;
+    config?: any;
+    submissions_count?: number;
+}
+export declare function renderWidgetBuilder(widgets: Widget[], instanceId?: string): string;
+export declare function renderWidgetDetails(widget: Widget): string;
+//# sourceMappingURL=widgets.d.ts.map

package/build/ui/widgets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets.d.ts","sourceRoot":"","sources":["../../src/ui/widgets.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAwFlF;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAqE1D"}