flowengine-mcp-app 1.1.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +4 -5
  2. package/build/index.js +55 -53
  3. package/build/index.js.map +1 -1
  4. package/build/ui/base.d.ts +1 -0
  5. package/build/ui/base.d.ts.map +1 -1
  6. package/build/ui/base.js +201 -77
  7. package/build/ui/base.js.map +1 -1
  8. package/build/ui/chat.d.ts +6 -0
  9. package/build/ui/chat.d.ts.map +1 -0
  10. package/build/ui/chat.js +1530 -0
  11. package/build/ui/chat.js.map +1 -0
  12. package/build/ui/component-viewer.d.ts +14 -0
  13. package/build/ui/component-viewer.d.ts.map +1 -0
  14. package/build/ui/component-viewer.js +678 -0
  15. package/build/ui/component-viewer.js.map +1 -0
  16. package/build/ui/dashboard.d.ts +21 -0
  17. package/build/ui/dashboard.d.ts.map +1 -0
  18. package/build/ui/dashboard.js +252 -0
  19. package/build/ui/dashboard.js.map +1 -0
  20. package/build/ui/instances.js +4 -0
  21. package/build/ui/instances.js.map +1 -1
  22. package/build/ui/n8n-viewer.d.ts +12 -0
  23. package/build/ui/n8n-viewer.d.ts.map +1 -0
  24. package/build/ui/n8n-viewer.js +371 -0
  25. package/build/ui/n8n-viewer.js.map +1 -0
  26. package/package.json +1 -1
package/build/ui/base.js CHANGED
@@ -1,5 +1,6 @@
1
1
  /**
2
2
  * Base UI layout and shared components for MCP App
3
+ * Matches FlowEngine design system exactly
3
4
  */
4
5
  export function baseLayout(title, content) {
5
6
  return `<!DOCTYPE html>
@@ -17,159 +18,211 @@ export function baseLayout(title, content) {
17
18
 
18
19
  body {
19
20
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
20
- background: #0a0a0a;
21
+ background: #000000;
21
22
  color: #ffffff;
22
- padding: 24px;
23
+ min-height: 100vh;
24
+ padding: 48px 24px;
23
25
  line-height: 1.6;
26
+ position: relative;
27
+ }
28
+
29
+ /* Background gradient effects - matching FlowEngine */
30
+ body::before {
31
+ content: '';
32
+ position: absolute;
33
+ top: 80px;
34
+ left: 12%;
35
+ width: 500px;
36
+ height: 500px;
37
+ background: rgba(168, 85, 247, 0.15);
38
+ border-radius: 50%;
39
+ filter: blur(180px);
40
+ pointer-events: none;
41
+ z-index: 0;
42
+ }
43
+
44
+ body::after {
45
+ content: '';
46
+ position: absolute;
47
+ top: 200px;
48
+ right: 15%;
49
+ width: 400px;
50
+ height: 400px;
51
+ background: rgba(139, 92, 246, 0.1);
52
+ border-radius: 50%;
53
+ filter: blur(180px);
54
+ pointer-events: none;
55
+ z-index: 0;
56
+ }
57
+
58
+ .container {
59
+ max-width: 1200px;
60
+ margin: 0 auto;
61
+ position: relative;
62
+ z-index: 1;
24
63
  }
25
64
 
26
65
  .header {
27
66
  margin-bottom: 32px;
28
- padding-bottom: 16px;
29
- border-bottom: 1px solid #262626;
67
+ padding-bottom: 24px;
68
+ border-bottom: 1px solid rgba(31, 41, 55, 1);
30
69
  }
31
70
 
32
71
  .header h1 {
33
- font-size: 28px;
72
+ font-size: 32px;
34
73
  font-weight: 600;
35
74
  margin-bottom: 8px;
75
+ color: #ffffff;
36
76
  }
37
77
 
38
78
  .header p {
39
- color: #999;
40
- font-size: 14px;
79
+ color: rgba(156, 163, 175, 1);
80
+ font-size: 15px;
41
81
  }
42
82
 
43
83
  .grid {
44
84
  display: grid;
45
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
46
- gap: 16px;
85
+ grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
86
+ gap: 20px;
47
87
  margin-bottom: 24px;
48
88
  }
49
89
 
50
90
  .card {
51
- background: rgba(38, 38, 38, 0.5);
52
- border: 1px solid #262626;
91
+ background: rgba(17, 24, 39, 0.5);
92
+ border: 1px solid rgba(31, 41, 55, 1);
53
93
  border-radius: 12px;
54
- padding: 20px;
94
+ padding: 24px;
55
95
  transition: all 0.2s;
96
+ backdrop-filter: blur(12px);
56
97
  }
57
98
 
58
99
  .card:hover {
59
- border-color: #404040;
60
- background: rgba(38, 38, 38, 0.7);
100
+ border-color: rgba(75, 85, 99, 1);
101
+ background: rgba(17, 24, 39, 0.7);
61
102
  }
62
103
 
63
104
  .card-header {
64
105
  display: flex;
65
106
  justify-content: space-between;
66
107
  align-items: flex-start;
67
- margin-bottom: 16px;
108
+ margin-bottom: 20px;
109
+ gap: 16px;
68
110
  }
69
111
 
70
112
  .card-title {
71
113
  font-size: 18px;
72
114
  font-weight: 600;
73
- margin-bottom: 4px;
115
+ margin-bottom: 6px;
116
+ color: #ffffff;
117
+ word-break: break-all;
74
118
  }
75
119
 
76
120
  .card-subtitle {
77
121
  font-size: 13px;
78
- color: #999;
122
+ color: rgba(156, 163, 175, 1);
79
123
  }
80
124
 
81
125
  .badge {
82
126
  display: inline-flex;
83
127
  align-items: center;
84
128
  gap: 6px;
85
- padding: 4px 10px;
86
- border-radius: 6px;
87
- font-size: 12px;
129
+ padding: 6px 12px;
130
+ border-radius: 8px;
131
+ font-size: 13px;
88
132
  font-weight: 500;
133
+ white-space: nowrap;
134
+ flex-shrink: 0;
89
135
  }
90
136
 
91
137
  .badge-success {
92
138
  background: rgba(34, 197, 94, 0.1);
93
139
  border: 1px solid rgba(34, 197, 94, 0.3);
94
- color: #4ade80;
140
+ color: rgba(74, 222, 128, 1);
95
141
  }
96
142
 
97
143
  .badge-error {
98
144
  background: rgba(239, 68, 68, 0.1);
99
145
  border: 1px solid rgba(239, 68, 68, 0.3);
100
- color: #f87171;
146
+ color: rgba(248, 113, 113, 1);
101
147
  }
102
148
 
103
149
  .badge-warning {
104
150
  background: rgba(234, 179, 8, 0.1);
105
151
  border: 1px solid rgba(234, 179, 8, 0.3);
106
- color: #facc15;
152
+ color: rgba(250, 204, 21, 1);
107
153
  }
108
154
 
109
155
  .badge-neutral {
110
- background: rgba(115, 115, 115, 0.1);
111
- border: 1px solid rgba(115, 115, 115, 0.3);
112
- color: #a3a3a3;
156
+ background: rgba(75, 85, 99, 0.1);
157
+ border: 1px solid rgba(75, 85, 99, 0.3);
158
+ color: rgba(156, 163, 175, 1);
113
159
  }
114
160
 
115
161
  .stat {
116
162
  display: flex;
117
163
  justify-content: space-between;
118
- padding: 12px 0;
119
- border-bottom: 1px solid #262626;
164
+ align-items: center;
165
+ padding: 14px 0;
166
+ border-bottom: 1px solid rgba(31, 41, 55, 1);
120
167
  }
121
168
 
122
169
  .stat:last-child {
123
170
  border-bottom: none;
171
+ padding-bottom: 0;
124
172
  }
125
173
 
126
174
  .stat-label {
127
- color: #999;
128
- font-size: 13px;
175
+ color: rgba(156, 163, 175, 1);
176
+ font-size: 14px;
129
177
  }
130
178
 
131
179
  .stat-value {
132
180
  font-weight: 600;
133
181
  font-size: 14px;
182
+ color: #ffffff;
134
183
  }
135
184
 
136
185
  .btn {
137
186
  display: inline-flex;
138
187
  align-items: center;
188
+ justify-content: center;
139
189
  gap: 8px;
140
- padding: 10px 16px;
141
- border-radius: 8px;
190
+ padding: 12px 18px;
191
+ border-radius: 10px;
142
192
  font-size: 14px;
143
193
  font-weight: 500;
144
194
  text-decoration: none;
145
195
  cursor: pointer;
146
196
  transition: all 0.2s;
147
197
  border: 1px solid transparent;
198
+ white-space: nowrap;
148
199
  }
149
200
 
150
201
  .btn-primary {
151
202
  background: #ffffff;
152
203
  color: #000000;
204
+ border-color: transparent;
153
205
  }
154
206
 
155
207
  .btn-primary:hover {
156
- background: #e5e5e5;
208
+ background: rgba(229, 231, 235, 1);
157
209
  }
158
210
 
159
211
  .btn-secondary {
160
- background: rgba(38, 38, 38, 0.5);
161
- border-color: #404040;
162
- color: #d4d4d4;
212
+ background: transparent;
213
+ border-color: rgba(75, 85, 99, 1);
214
+ color: rgba(209, 213, 219, 1);
163
215
  }
164
216
 
165
217
  .btn-secondary:hover {
166
- background: #404040;
218
+ background: rgba(75, 85, 99, 1);
219
+ color: #ffffff;
167
220
  }
168
221
 
169
222
  .btn-danger {
170
223
  background: rgba(239, 68, 68, 0.1);
171
224
  border-color: rgba(239, 68, 68, 0.3);
172
- color: #f87171;
225
+ color: rgba(248, 113, 113, 1);
173
226
  }
174
227
 
175
228
  .btn-danger:hover {
@@ -178,64 +231,79 @@ export function baseLayout(title, content) {
178
231
 
179
232
  .actions {
180
233
  display: flex;
181
- gap: 8px;
182
- margin-top: 16px;
183
- padding-top: 16px;
184
- border-top: 1px solid #262626;
234
+ gap: 12px;
235
+ margin-top: 20px;
236
+ padding-top: 20px;
237
+ border-top: 1px solid rgba(31, 41, 55, 1);
238
+ flex-wrap: wrap;
185
239
  }
186
240
 
187
241
  .empty-state {
188
242
  text-align: center;
189
- padding: 64px 24px;
190
- color: #737373;
243
+ padding: 80px 24px;
244
+ color: rgba(115, 115, 115, 1);
191
245
  }
192
246
 
193
- .empty-state svg {
247
+ .empty-state-icon {
194
248
  width: 64px;
195
249
  height: 64px;
196
- margin: 0 auto 16px;
250
+ margin: 0 auto 20px;
197
251
  opacity: 0.5;
252
+ color: rgba(156, 163, 175, 1);
198
253
  }
199
254
 
200
255
  .empty-state h3 {
201
- font-size: 18px;
202
- margin-bottom: 8px;
203
- color: #a3a3a3;
256
+ font-size: 20px;
257
+ margin-bottom: 12px;
258
+ color: rgba(163, 163, 163, 1);
259
+ font-weight: 600;
204
260
  }
205
261
 
206
262
  .empty-state p {
207
- font-size: 14px;
263
+ font-size: 15px;
264
+ color: rgba(115, 115, 115, 1);
265
+ max-width: 400px;
266
+ margin: 0 auto;
267
+ }
268
+
269
+ .table-container {
270
+ background: rgba(17, 24, 39, 0.5);
271
+ border: 1px solid rgba(31, 41, 55, 1);
272
+ border-radius: 12px;
273
+ overflow: hidden;
274
+ margin: 20px 0;
208
275
  }
209
276
 
210
277
  .table {
211
278
  width: 100%;
212
279
  border-collapse: collapse;
213
- margin: 16px 0;
214
280
  }
215
281
 
216
282
  .table th {
217
283
  text-align: left;
218
- padding: 12px;
219
- background: rgba(38, 38, 38, 0.5);
220
- border: 1px solid #262626;
284
+ padding: 16px;
285
+ background: rgba(31, 41, 55, 0.3);
221
286
  font-size: 13px;
222
- color: #999;
223
- font-weight: 500;
287
+ color: rgba(156, 163, 175, 1);
288
+ font-weight: 600;
289
+ text-transform: uppercase;
290
+ letter-spacing: 0.5px;
224
291
  }
225
292
 
226
293
  .table td {
227
- padding: 12px;
228
- border: 1px solid #262626;
294
+ padding: 16px;
295
+ border-top: 1px solid rgba(31, 41, 55, 1);
229
296
  font-size: 14px;
297
+ color: #ffffff;
230
298
  }
231
299
 
232
- .table tr:hover {
233
- background: rgba(38, 38, 38, 0.3);
300
+ .table tbody tr:hover {
301
+ background: rgba(31, 41, 55, 0.3);
234
302
  }
235
303
 
236
304
  .icon {
237
- width: 16px;
238
- height: 16px;
305
+ width: 18px;
306
+ height: 18px;
239
307
  display: inline-block;
240
308
  }
241
309
 
@@ -244,43 +312,98 @@ export function baseLayout(title, content) {
244
312
  height: 8px;
245
313
  border-radius: 50%;
246
314
  display: inline-block;
247
- margin-right: 6px;
315
+ margin-right: 0;
248
316
  }
249
317
 
250
- .dot-success { background: #4ade80; }
251
- .dot-error { background: #f87171; }
252
- .dot-warning { background: #facc15; }
253
- .dot-neutral { background: #a3a3a3; }
318
+ .dot-success { background: rgba(74, 222, 128, 1); }
319
+ .dot-error { background: rgba(248, 113, 113, 1); }
320
+ .dot-warning { background: rgba(250, 204, 21, 1); }
321
+ .dot-neutral { background: rgba(163, 163, 163, 1); }
254
322
 
255
323
  .code {
256
- font-family: 'Monaco', 'Courier New', monospace;
257
- background: rgba(38, 38, 38, 0.5);
258
- border: 1px solid #262626;
324
+ font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
325
+ background: rgba(31, 41, 55, 0.5);
326
+ border: 1px solid rgba(31, 41, 55, 1);
259
327
  border-radius: 6px;
260
- padding: 2px 6px;
328
+ padding: 4px 8px;
261
329
  font-size: 13px;
262
- color: #22c55e;
330
+ color: rgba(74, 222, 128, 1);
263
331
  }
264
332
 
265
333
  a {
266
- color: #60a5fa;
334
+ color: rgba(147, 197, 253, 1);
267
335
  text-decoration: none;
268
336
  }
269
337
 
270
338
  a:hover {
271
339
  text-decoration: underline;
272
340
  }
341
+
342
+ /* Progress bar */
343
+ .progress {
344
+ width: 100%;
345
+ height: 8px;
346
+ background: rgba(31, 41, 55, 1);
347
+ border-radius: 4px;
348
+ overflow: hidden;
349
+ margin: 8px 0;
350
+ }
351
+
352
+ .progress-bar {
353
+ height: 100%;
354
+ background: linear-gradient(90deg, rgba(168, 85, 247, 1), rgba(139, 92, 246, 1));
355
+ border-radius: 4px;
356
+ transition: width 0.3s;
357
+ }
358
+
359
+ /* Metric cards */
360
+ .metric-grid {
361
+ display: grid;
362
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
363
+ gap: 16px;
364
+ margin-bottom: 24px;
365
+ }
366
+
367
+ .metric-card {
368
+ background: rgba(17, 24, 39, 0.5);
369
+ border: 1px solid rgba(31, 41, 55, 1);
370
+ border-radius: 12px;
371
+ padding: 20px;
372
+ text-align: center;
373
+ }
374
+
375
+ .metric-value {
376
+ font-size: 32px;
377
+ font-weight: 700;
378
+ margin-bottom: 8px;
379
+ background: linear-gradient(135deg, rgba(168, 85, 247, 1), rgba(139, 92, 246, 1));
380
+ -webkit-background-clip: text;
381
+ -webkit-text-fill-color: transparent;
382
+ background-clip: text;
383
+ }
384
+
385
+ .metric-label {
386
+ font-size: 13px;
387
+ color: rgba(156, 163, 175, 1);
388
+ text-transform: uppercase;
389
+ letter-spacing: 0.5px;
390
+ }
273
391
  </style>
274
392
  </head>
275
393
  <body>
276
- ${content}
394
+ <div class="container">
395
+ ${content}
396
+ </div>
277
397
  </body>
278
398
  </html>`;
279
399
  }
280
400
  export function renderEmptyState(title, description, iconSvg) {
401
+ const defaultIcon = `<svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
402
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
403
+ </svg>`;
281
404
  return `
282
405
  <div class="empty-state">
283
- ${iconSvg || '<svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'}
406
+ ${iconSvg || defaultIcon}
284
407
  <h3>${title}</h3>
285
408
  <p>${description}</p>
286
409
  </div>
@@ -290,10 +413,11 @@ export function renderError(error) {
290
413
  return baseLayout('Error', `
291
414
  <div class="header">
292
415
  <h1>⚠️ Error</h1>
416
+ <p>Something went wrong</p>
293
417
  </div>
294
418
  <div class="card">
295
- <div style="color: #f87171; padding: 16px; background: rgba(239, 68, 68, 0.1); border-radius: 8px;">
296
- ${error}
419
+ <div style="color: rgba(248, 113, 113, 1); padding: 20px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 10px;">
420
+ <strong>Error:</strong> ${error}
297
421
  </div>
298
422
  </div>
299
423
  `);
package/build/ui/base.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base.js","sourceRoot":"","sources":["../../src/ui/base.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,UAAU,UAAU,CAAC,KAAa,EAAE,OAAe;IACvD,OAAO;;;;;WAKE,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0QZ,OAAO;;QAEH,CAAC;AACT,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAa,EAAE,WAAmB,EAAE,OAAgB;IACnF,OAAO;;QAED,OAAO,IAAI,6LAA6L;YACpM,KAAK;WACN,WAAW;;GAEnB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,OAAO,UAAU,CAAC,OAAO,EAAE;;;;;;UAMnB,KAAK;;;GAGZ,CAAC,CAAC;AACL,CAAC"}
1
+ {"version":3,"file":"base.js","sourceRoot":"","sources":["../../src/ui/base.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,UAAU,UAAU,CAAC,KAAa,EAAE,OAAe;IACvD,OAAO;;;;;WAKE,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgYV,OAAO;;;QAGL,CAAC;AACT,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAa,EAAE,WAAmB,EAAE,OAAgB;IACnF,MAAM,WAAW,GAAG;;SAEb,CAAC;IAER,OAAO;;QAED,OAAO,IAAI,WAAW;YAClB,KAAK;WACN,WAAW;;GAEnB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,OAAO,UAAU,CAAC,OAAO,EAAE;;;;;;;kCAOK,KAAK;;;GAGpC,CAAC,CAAC;AACL,CAAC"}
package/build/ui/chat.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * AI Chat Interface for FlowEngine with n8n Demo
3
+ * Matches FlowEngine website chat UI exactly
4
+ */
5
+ export declare function renderChatInterface(): string;
6
+ //# sourceMappingURL=chat.d.ts.map
package/build/ui/chat.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../../src/ui/chat.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,wBAAgB,mBAAmB,IAAI,MAAM,CAo/C5C"}