@meshxdata/fops 0.1.51 → 0.1.53

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 (90) hide show
  1. package/CHANGELOG.md +207 -21
  2. package/package.json +2 -6
  3. package/src/agent/agent.js +6 -0
  4. package/src/commands/setup.js +34 -0
  5. package/src/doctor.js +11 -8
  6. package/src/fleet-registry.js +38 -2
  7. package/src/plugins/__test-fixtures__/fake-plugin.js +2 -0
  8. package/src/plugins/__test-fixtures__/no-register-plugin.js +2 -0
  9. package/src/plugins/__test-fixtures__/with-register/index.js +2 -0
  10. package/src/plugins/__test-fixtures__/without-register/index.js +2 -0
  11. package/src/plugins/api.js +4 -0
  12. package/src/plugins/builtins/docker-compose.js +59 -0
  13. package/src/plugins/bundled/fops-plugin-azure/index.js +4 -0
  14. package/src/plugins/bundled/fops-plugin-azure/lib/azure-aks-core.js +53 -53
  15. package/src/plugins/bundled/fops-plugin-azure/lib/azure-aks-secrets.js +151 -0
  16. package/src/plugins/bundled/fops-plugin-azure/lib/azure-aks-storage.js +2 -2
  17. package/src/plugins/bundled/fops-plugin-azure/lib/azure-cost.js +52 -22
  18. package/src/plugins/bundled/fops-plugin-azure/lib/azure-fleet.js +12 -4
  19. package/src/plugins/bundled/fops-plugin-azure/lib/azure-helpers.js +6 -2
  20. package/src/plugins/bundled/fops-plugin-azure/lib/azure-ops.js +113 -7
  21. package/src/plugins/bundled/fops-plugin-azure/lib/azure-provision-init.js +13 -4
  22. package/src/plugins/bundled/fops-plugin-azure/lib/azure-provision.js +91 -14
  23. package/src/plugins/bundled/fops-plugin-azure/lib/azure-service.js +507 -0
  24. package/src/plugins/bundled/fops-plugin-azure/lib/azure-sync.js +146 -7
  25. package/src/plugins/bundled/fops-plugin-azure/lib/azure.js +1 -1
  26. package/src/plugins/bundled/fops-plugin-azure/lib/commands/test-cmds.js +28 -0
  27. package/src/plugins/bundled/fops-plugin-azure/lib/commands/vm-cmds.js +61 -0
  28. package/src/plugins/bundled/fops-plugin-cloud/api.js +712 -0
  29. package/src/plugins/bundled/fops-plugin-cloud/fops.plugin.json +6 -0
  30. package/src/plugins/bundled/fops-plugin-cloud/index.js +208 -0
  31. package/src/plugins/bundled/fops-plugin-cloud/lib/azure-provider.js +81 -0
  32. package/src/plugins/bundled/fops-plugin-cloud/lib/provider.js +50 -0
  33. package/src/plugins/bundled/fops-plugin-cloud/ui/dist/assets/favicon-C49brna2.svg +15 -0
  34. package/src/plugins/bundled/fops-plugin-cloud/ui/dist/assets/index-CVqQ_kKW.js +65 -0
  35. package/src/plugins/bundled/fops-plugin-cloud/ui/dist/assets/index-DZetahP3.css +1 -0
  36. package/src/plugins/bundled/fops-plugin-cloud/ui/dist/index.html +28 -0
  37. package/src/plugins/bundled/fops-plugin-cloud/ui/index.html +27 -0
  38. package/src/plugins/bundled/fops-plugin-cloud/ui/package-lock.json +2634 -0
  39. package/src/plugins/bundled/fops-plugin-cloud/ui/package.json +29 -0
  40. package/src/plugins/bundled/fops-plugin-cloud/ui/postcss.config.cjs +5 -0
  41. package/src/plugins/bundled/fops-plugin-cloud/ui/src/App.jsx +32 -0
  42. package/src/plugins/bundled/fops-plugin-cloud/ui/src/api/client.js +114 -0
  43. package/src/plugins/bundled/fops-plugin-cloud/ui/src/api/queries.js +111 -0
  44. package/src/plugins/bundled/fops-plugin-cloud/ui/src/components/LogPanel.jsx +162 -0
  45. package/src/plugins/bundled/fops-plugin-cloud/ui/src/components/ThemeToggle.jsx +46 -0
  46. package/src/plugins/bundled/fops-plugin-cloud/ui/src/css/additional-styles/utility-patterns.css +147 -0
  47. package/src/plugins/bundled/fops-plugin-cloud/ui/src/css/style.css +138 -0
  48. package/src/plugins/bundled/fops-plugin-cloud/ui/src/favicon.svg +15 -0
  49. package/src/plugins/bundled/fops-plugin-cloud/ui/src/lib/utils.ts +19 -0
  50. package/src/plugins/bundled/fops-plugin-cloud/ui/src/main.jsx +25 -0
  51. package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/Audit.jsx +164 -0
  52. package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/Costs.jsx +305 -0
  53. package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/CreateResource.jsx +285 -0
  54. package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/Fleet.jsx +307 -0
  55. package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/Resources.jsx +229 -0
  56. package/src/plugins/bundled/fops-plugin-cloud/ui/src/partials/Header.jsx +132 -0
  57. package/src/plugins/bundled/fops-plugin-cloud/ui/src/partials/Sidebar.jsx +174 -0
  58. package/src/plugins/bundled/fops-plugin-cloud/ui/src/partials/SidebarLinkGroup.jsx +21 -0
  59. package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/AuthContext.jsx +170 -0
  60. package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/Info.jsx +49 -0
  61. package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/ThemeContext.jsx +37 -0
  62. package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/Transition.jsx +116 -0
  63. package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/Utils.js +63 -0
  64. package/src/plugins/bundled/fops-plugin-cloud/ui/vite.config.js +23 -0
  65. package/src/plugins/bundled/fops-plugin-foundation/test-helpers.js +65 -0
  66. package/src/plugins/loader.js +34 -1
  67. package/src/plugins/registry.js +15 -0
  68. package/src/plugins/schemas.js +17 -0
  69. package/src/project.js +1 -1
  70. package/src/serve.js +196 -2
  71. package/src/shell.js +21 -1
  72. package/src/web/admin.html.js +236 -0
  73. package/src/web/api.js +73 -0
  74. package/src/web/dist/assets/index-BphVaAUd.css +1 -0
  75. package/src/web/dist/assets/index-CSckLzuG.js +129 -0
  76. package/src/web/dist/index.html +2 -2
  77. package/src/web/frontend/index.html +16 -0
  78. package/src/web/frontend/src/App.jsx +445 -0
  79. package/src/web/frontend/src/components/ChatView.jsx +910 -0
  80. package/src/web/frontend/src/components/InputBox.jsx +523 -0
  81. package/src/web/frontend/src/components/Sidebar.jsx +410 -0
  82. package/src/web/frontend/src/components/StatusBar.jsx +37 -0
  83. package/src/web/frontend/src/components/TabBar.jsx +87 -0
  84. package/src/web/frontend/src/hooks/useWebSocket.js +412 -0
  85. package/src/web/frontend/src/index.css +78 -0
  86. package/src/web/frontend/src/main.jsx +6 -0
  87. package/src/web/frontend/vite.config.js +21 -0
  88. package/src/web/server.js +64 -1
  89. package/src/web/dist/assets/index-NXC8Hvnp.css +0 -1
  90. package/src/web/dist/assets/index-QH1N4ejK.js +0 -112
@@ -0,0 +1,412 @@
1
+ import { useState, useEffect, useCallback, useRef } from "react";
2
+
3
+ /**
4
+ * WebSocket hook for real-time FopsCore events.
5
+ */
6
+ export function useWebSocket() {
7
+ const [connected, setConnected] = useState(false);
8
+ const [sessions, setSessions] = useState([]);
9
+ const [activeSession, setActiveSession] = useState(null);
10
+ const [agents, setAgents] = useState([]);
11
+ const [messages, setMessages] = useState([]);
12
+ const [streamingText, setStreamingText] = useState("");
13
+ const [thinkingText, setThinkingText] = useState("");
14
+ const [statusText, setStatusText] = useState("");
15
+ const [toolCalls, setToolCalls] = useState([]);
16
+ const [pendingConfirm, setPendingConfirm] = useState(null);
17
+ const [isStreaming, setIsStreaming] = useState(false);
18
+ const [services, setServices] = useState([]);
19
+ const [foundationStats, setFoundationStats] = useState(null);
20
+ const [updateAvailable, setUpdateAvailable] = useState(null);
21
+ const wsRef = useRef(null);
22
+ const lastStreamEventRef = useRef(0);
23
+
24
+ const connect = useCallback(() => {
25
+ const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
26
+ const ws = new WebSocket(`${proto}//${window.location.host}/ws`);
27
+
28
+ ws.onopen = () => setConnected(true);
29
+ ws.onclose = () => {
30
+ setConnected(false);
31
+ setTimeout(connect, 2000);
32
+ };
33
+
34
+ ws.onmessage = (e) => {
35
+ const msg = JSON.parse(e.data);
36
+
37
+ switch (msg.type) {
38
+ case "init": {
39
+ const incoming = msg.sessions || [];
40
+ setSessions((prev) => (incoming.length >= prev.length ? incoming : prev));
41
+ setActiveSession(msg.activeSession);
42
+ setAgents(msg.agents || []);
43
+ if (msg.services) setServices(msg.services);
44
+ if (msg.foundationStats) setFoundationStats(msg.foundationStats);
45
+ if (msg.updateAvailable) setUpdateAvailable(msg.updateAvailable);
46
+ // Load messages for active session
47
+ if (msg.activeSession) {
48
+ fetch(`/api/sessions/${msg.activeSession}`)
49
+ .then((r) => r.json())
50
+ .then((data) => setMessages(data.messages || []));
51
+ }
52
+ break;
53
+ }
54
+
55
+ case "session:created":
56
+ setSessions((prev) =>
57
+ prev.some((s) => s.id === msg.sessionId)
58
+ ? prev
59
+ : [...prev, { id: msg.sessionId, agent: msg.agentName, status: "idle" }]
60
+ );
61
+ break;
62
+
63
+ case "session:switched":
64
+ setActiveSession(msg.sessionId);
65
+ setStreamingText("");
66
+ setThinkingText("");
67
+ setToolCalls([]);
68
+ fetch(`/api/sessions/${msg.sessionId}`)
69
+ .then((r) => r.json())
70
+ .then((data) => setMessages(data.messages || []));
71
+ break;
72
+
73
+ case "session:closed":
74
+ setSessions((prev) => prev.filter((s) => s.id !== msg.sessionId));
75
+ break;
76
+
77
+ case "stream:start":
78
+ lastStreamEventRef.current = Date.now();
79
+ setIsStreaming(true);
80
+ setStreamingText("");
81
+ setThinkingText("");
82
+ setStatusText("Thinking");
83
+ setToolCalls([]);
84
+ break;
85
+
86
+ case "stream:chunk":
87
+ lastStreamEventRef.current = Date.now();
88
+ setStreamingText(msg.text);
89
+ setStatusText("Responding");
90
+ break;
91
+
92
+ case "stream:thinking":
93
+ lastStreamEventRef.current = Date.now();
94
+ setThinkingText((prev) => prev + msg.text);
95
+ setStatusText("Reasoning");
96
+ break;
97
+
98
+ case "stream:status":
99
+ lastStreamEventRef.current = Date.now();
100
+ setStatusText(msg.status);
101
+ break;
102
+
103
+ case "stream:end":
104
+ lastStreamEventRef.current = 0;
105
+ setIsStreaming(false);
106
+ setStreamingText("");
107
+ setThinkingText("");
108
+ setStatusText("");
109
+ // Refresh messages
110
+ if (msg.sessionId) {
111
+ fetch(`/api/sessions/${msg.sessionId}`)
112
+ .then((r) => r.json())
113
+ .then((data) => setMessages(data.messages || []));
114
+ }
115
+ break;
116
+
117
+ case "tool:start":
118
+ lastStreamEventRef.current = Date.now();
119
+ setToolCalls((prev) => [...prev, { name: msg.name, status: "running" }]);
120
+ setStatusText(`Using ${msg.name}`);
121
+ break;
122
+
123
+ case "tool:result":
124
+ lastStreamEventRef.current = Date.now();
125
+ setToolCalls((prev) =>
126
+ prev.map((tc) =>
127
+ tc.name === msg.name && tc.status === "running"
128
+ ? { ...tc, status: msg.ok ? "done" : "error" }
129
+ : tc
130
+ )
131
+ );
132
+ break;
133
+
134
+ case "tool:confirm":
135
+ setPendingConfirm({ name: msg.name, input: msg.input });
136
+ break;
137
+
138
+ case "stack:status":
139
+ if (msg.services) setServices(msg.services);
140
+ if (msg.foundationStats) setFoundationStats(msg.foundationStats);
141
+ break;
142
+
143
+ case "ollama:log":
144
+ setMessages((prev) => {
145
+ const last = prev[prev.length - 1];
146
+ if (last?.role === "assistant" && last.content.startsWith("### Ollama Setup")) {
147
+ return [...prev.slice(0, -1), { role: "assistant", content: last.content + `\n${msg.line}` }];
148
+ }
149
+ return prev;
150
+ });
151
+ break;
152
+
153
+ case "ollama:done": {
154
+ const result = msg.result || {};
155
+ const lines = ["### Ollama Setup Complete\n"];
156
+ for (const s of (result.steps || [])) {
157
+ const icon = s.status === "ok" ? "\u2713" : s.status === "error" ? "\u2717" : s.status === "warn" ? "\u26A0" : "\u25CF";
158
+ lines.push(`- ${icon} **${s.step}** \u2014 ${s.detail}`);
159
+ }
160
+ if (result.ok && result.model) {
161
+ lines.push(`\n**Ready!** Use \`/local\` to switch to Ollama mode with \`${result.model}\``);
162
+ lines.push(`Or set \`OLLAMA_MODEL=${result.model}\` in your environment.`);
163
+ } else if (!result.ok) {
164
+ lines.push("\n**Setup had errors.** Check the issues above.");
165
+ }
166
+ setMessages((prev) => {
167
+ const filtered = prev.filter((m) => !(m.role === "assistant" && m.content.startsWith("### Ollama Setup\nDetecting")));
168
+ return [...filtered, { role: "assistant", content: lines.join("\n") }];
169
+ });
170
+ break;
171
+ }
172
+
173
+ case "stack:log":
174
+ setMessages((prev) => {
175
+ const last = prev[prev.length - 1];
176
+ if (last?.role === "assistant" && (last.content.startsWith("### Starting") || last.content.startsWith("### Stopping"))) {
177
+ const lines = last.content.split("\n");
178
+ if (lines.length > 20) lines.splice(1, lines.length - 20);
179
+ return [...prev.slice(0, -1), { role: "assistant", content: lines.join("\n") + `\n${msg.line}` }];
180
+ }
181
+ return prev;
182
+ });
183
+ break;
184
+
185
+ case "stack:done": {
186
+ const label = msg.action === "up" ? "started" : "stopped";
187
+ const summary = msg.ok
188
+ ? `\n\n**Stack ${label}.**`
189
+ : `\n\n**Stack ${msg.action} failed.** ${msg.error || `(exit code ${msg.exitCode ?? "unknown"})`}`;
190
+ setMessages((prev) => {
191
+ const last = prev[prev.length - 1];
192
+ if (last?.role === "assistant" && (last.content.startsWith("### Starting") || last.content.startsWith("### Stopping"))) {
193
+ return [...prev.slice(0, -1), { role: "assistant", content: last.content + summary }];
194
+ }
195
+ return [...prev, { role: "assistant", content: `### Stack${summary}` }];
196
+ });
197
+ break;
198
+ }
199
+
200
+ case "bootstrap:log":
201
+ setMessages((prev) => {
202
+ const last = prev[prev.length - 1];
203
+ if (last?.role === "assistant" && last.content.startsWith("### Bootstrap")) {
204
+ const lines = last.content.split("\n");
205
+ if (lines.length > 20) lines.splice(1, lines.length - 20);
206
+ return [...prev.slice(0, -1), { role: "assistant", content: lines.join("\n") + `\n${msg.line}` }];
207
+ }
208
+ return prev;
209
+ });
210
+ break;
211
+
212
+ case "bootstrap:done": {
213
+ const summary = msg.ok
214
+ ? "\n\n**Bootstrap complete.**"
215
+ : `\n\n**Bootstrap failed.** ${msg.error || `(exit code ${msg.exitCode ?? "unknown"})`}`;
216
+ setMessages((prev) => {
217
+ const last = prev[prev.length - 1];
218
+ if (last?.role === "assistant" && last.content.startsWith("### Bootstrap")) {
219
+ return [...prev.slice(0, -1), { role: "assistant", content: last.content + summary }];
220
+ }
221
+ return [...prev, { role: "assistant", content: `### Bootstrap${summary}` }];
222
+ });
223
+ break;
224
+ }
225
+
226
+ case "train:log":
227
+ setMessages((prev) => {
228
+ const last = prev[prev.length - 1];
229
+ if (last?.role === "assistant" && last.content.startsWith("### Embedding Training")) {
230
+ const lines = last.content.split("\n");
231
+ if (lines.length > 20) lines.splice(1, lines.length - 20);
232
+ return [...prev.slice(0, -1), { role: "assistant", content: lines.join("\n") + `\n${msg.line}` }];
233
+ }
234
+ return prev;
235
+ });
236
+ break;
237
+
238
+ case "train:done": {
239
+ const result = msg.result || {};
240
+ const lines = [result.ok ? "### Embedding Training Complete\n" : "### Embedding Training Failed\n"];
241
+ for (const s of (result.steps || [])) {
242
+ const icon = s.status === "ok" ? "\u2713" : s.status === "error" ? "\u2717" : s.status === "warn" ? "\u26A0" : "\u25CF";
243
+ lines.push(`- ${icon} **${s.step}** \u2014 ${s.detail}`);
244
+ }
245
+ if (!result.ok) {
246
+ lines.push("\n**Training had errors.** Check the issues above.");
247
+ }
248
+ setMessages((prev) => {
249
+ const filtered = prev.filter((m) => !(m.role === "assistant" && m.content.startsWith("### Embedding Training\n")));
250
+ return [...filtered, { role: "assistant", content: lines.join("\n") }];
251
+ });
252
+ break;
253
+ }
254
+
255
+ case "error":
256
+ lastStreamEventRef.current = 0;
257
+ setIsStreaming(false);
258
+ setStatusText("");
259
+ setStreamingText("");
260
+ setThinkingText("");
261
+ if (msg.message) {
262
+ setMessages((prev) => [...prev, { role: "assistant", content: `**Error:** ${msg.message}` }]);
263
+ }
264
+ break;
265
+ }
266
+ };
267
+
268
+ wsRef.current = ws;
269
+ }, []);
270
+
271
+ useEffect(() => {
272
+ connect();
273
+ return () => wsRef.current?.close();
274
+ }, [connect]);
275
+
276
+ // Poll services + foundation stats every 30s via REST API
277
+ useEffect(() => {
278
+ const poll = () => {
279
+ fetch("/api/status")
280
+ .then((r) => r.json())
281
+ .then((data) => {
282
+ if (data.services) setServices(data.services);
283
+ if (data.foundationStats) setFoundationStats(data.foundationStats);
284
+ if (data.updateAvailable) setUpdateAvailable(data.updateAvailable);
285
+ })
286
+ .catch(() => {});
287
+ };
288
+ poll();
289
+ const interval = setInterval(poll, 30000);
290
+ return () => clearInterval(interval);
291
+ }, []);
292
+
293
+ // Stale-streaming failsafe: if isStreaming but no events for 90s, auto-reset
294
+ useEffect(() => {
295
+ const interval = setInterval(() => {
296
+ if (lastStreamEventRef.current > 0) {
297
+ const elapsed = Date.now() - lastStreamEventRef.current;
298
+ if (elapsed > 90_000) {
299
+ lastStreamEventRef.current = 0;
300
+ setIsStreaming(false);
301
+ setStreamingText("");
302
+ setThinkingText("");
303
+ setStatusText("");
304
+ }
305
+ }
306
+ }, 5000);
307
+ return () => clearInterval(interval);
308
+ }, []);
309
+
310
+ const send = useCallback((type, data = {}) => {
311
+ if (wsRef.current?.readyState === WebSocket.OPEN) {
312
+ wsRef.current.send(JSON.stringify({ type, ...data }));
313
+ }
314
+ }, []);
315
+
316
+ const sendMessage = useCallback((text) => {
317
+ if (activeSession) {
318
+ setMessages((prev) => [...prev, { role: "user", content: text }]);
319
+ send("send", { sessionId: activeSession, text });
320
+ }
321
+ }, [activeSession, send]);
322
+
323
+ const createSession = useCallback((agentName) => {
324
+ send("create_session", { agentName });
325
+ }, [send]);
326
+
327
+ const switchSession = useCallback((sessionId) => {
328
+ send("switch", { sessionId });
329
+ }, [send]);
330
+
331
+ const closeSession = useCallback((sessionId) => {
332
+ send("close_session", { sessionId });
333
+ }, [send]);
334
+
335
+ const cancelStream = useCallback(() => {
336
+ if (activeSession) {
337
+ send("cancel", { sessionId: activeSession });
338
+ }
339
+ // Always reset input-blocking state so the user can type again
340
+ lastStreamEventRef.current = 0;
341
+ setIsStreaming(false);
342
+ setStreamingText("");
343
+ setThinkingText("");
344
+ setStatusText("");
345
+ }, [activeSession, send]);
346
+
347
+ const sendOllamaSetup = useCallback(() => {
348
+ send("ollama_setup");
349
+ }, [send]);
350
+
351
+ const sendStackUp = useCallback(() => {
352
+ send("stack_up");
353
+ }, [send]);
354
+
355
+ const sendStackDown = useCallback(() => {
356
+ send("stack_down");
357
+ }, [send]);
358
+
359
+ const sendBootstrap = useCallback(() => {
360
+ send("bootstrap");
361
+ }, [send]);
362
+
363
+ const sendTrain = useCallback(() => {
364
+ send("train");
365
+ }, [send]);
366
+
367
+ const sendLearningEvent = useCallback((eventType, payload = {}, sessionId = null) => {
368
+ if (!eventType) return;
369
+ send("learning_event", { eventType, payload, sessionId });
370
+ }, [send]);
371
+
372
+ const respondConfirm = useCallback((action) => {
373
+ send("tool_confirm_response", { action });
374
+ setPendingConfirm(null);
375
+ }, [send]);
376
+
377
+ const appendMessage = useCallback((sessionId, role, content) => {
378
+ if (!sessionId || typeof content !== "string" || !content.trim()) return;
379
+ send("append_message", { sessionId, role, content });
380
+ }, [send]);
381
+
382
+ return {
383
+ connected,
384
+ sessions,
385
+ activeSession,
386
+ agents,
387
+ messages,
388
+ setMessages,
389
+ streamingText,
390
+ thinkingText,
391
+ statusText,
392
+ toolCalls,
393
+ isStreaming,
394
+ services,
395
+ foundationStats,
396
+ updateAvailable,
397
+ pendingConfirm,
398
+ respondConfirm,
399
+ sendMessage,
400
+ sendOllamaSetup,
401
+ sendStackUp,
402
+ sendStackDown,
403
+ sendBootstrap,
404
+ sendTrain,
405
+ sendLearningEvent,
406
+ appendMessage,
407
+ createSession,
408
+ switchSession,
409
+ closeSession,
410
+ cancelStream,
411
+ };
412
+ }
@@ -0,0 +1,78 @@
1
+ @import "tailwindcss";
2
+
3
+ /* ===== Base ===== */
4
+ body {
5
+ margin: 0;
6
+ padding: 0;
7
+ font-family: "Sora", system-ui, -apple-system, sans-serif;
8
+ background: #08080c;
9
+ color: #e0dfe4;
10
+ height: 100vh;
11
+ height: 100dvh;
12
+ overflow: hidden;
13
+ -webkit-font-smoothing: antialiased;
14
+ -moz-osx-font-smoothing: grayscale;
15
+ }
16
+
17
+ #root {
18
+ height: 100vh;
19
+ height: 100dvh;
20
+ display: flex;
21
+ flex-direction: column;
22
+ }
23
+
24
+ code, pre, .font-mono {
25
+ font-family: "IBM Plex Mono", "JetBrains Mono", "Fira Code", monospace;
26
+ }
27
+
28
+ ::selection {
29
+ background: rgba(249, 115, 22, 0.3);
30
+ color: #e0dfe4;
31
+ }
32
+
33
+ /* ===== Scrollbar ===== */
34
+ ::-webkit-scrollbar { width: 5px; }
35
+ ::-webkit-scrollbar-track { background: transparent; }
36
+ ::-webkit-scrollbar-thumb { background: #26263a; border-radius: 10px; }
37
+ ::-webkit-scrollbar-thumb:hover { background: #3f3f56; }
38
+
39
+ /* ===== Animations ===== */
40
+ @keyframes pulse {
41
+ 0%, 100% { opacity: 1; }
42
+ 50% { opacity: 0.35; }
43
+ }
44
+ .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
45
+
46
+ @keyframes fadeIn {
47
+ from { opacity: 0; transform: translateY(6px); }
48
+ to { opacity: 1; transform: translateY(0); }
49
+ }
50
+ .animate-fade-in { animation: fadeIn 0.25s ease-out; }
51
+
52
+ @keyframes slideIn {
53
+ from { opacity: 0; transform: translateX(-6px); }
54
+ to { opacity: 1; transform: translateX(0); }
55
+ }
56
+ .animate-slide-in { animation: slideIn 0.2s ease-out; }
57
+
58
+ @keyframes cursorBlink {
59
+ 0%, 100% { opacity: 1; }
60
+ 50% { opacity: 0; }
61
+ }
62
+ .animate-cursor { animation: cursorBlink 1s step-end infinite; }
63
+
64
+ @keyframes glowPulse {
65
+ 0%, 100% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.15); }
66
+ 50% { box-shadow: 0 0 16px rgba(249, 115, 22, 0.3); }
67
+ }
68
+
69
+ /* ===== Noise Overlay ===== */
70
+ .noise::after {
71
+ content: '';
72
+ position: fixed;
73
+ inset: 0;
74
+ pointer-events: none;
75
+ opacity: 0.02;
76
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
77
+ z-index: 9999;
78
+ }
@@ -0,0 +1,6 @@
1
+ import React from "react";
2
+ import { createRoot } from "react-dom/client";
3
+ import App from "./App.jsx";
4
+ import "./index.css";
5
+
6
+ createRoot(document.getElementById("root")).render(<App />);
@@ -0,0 +1,21 @@
1
+ import { defineConfig } from "vite";
2
+ import react from "@vitejs/plugin-react";
3
+ import tailwindcss from "@tailwindcss/vite";
4
+
5
+ export default defineConfig({
6
+ plugins: [react(), tailwindcss()],
7
+ root: "src/web/frontend",
8
+ build: {
9
+ outDir: "../dist",
10
+ emptyOutDir: true,
11
+ },
12
+ server: {
13
+ proxy: {
14
+ "/api": "http://localhost:3099",
15
+ "/ws": {
16
+ target: "ws://localhost:3099",
17
+ ws: true,
18
+ },
19
+ },
20
+ },
21
+ });
package/src/web/server.js CHANGED
@@ -161,7 +161,19 @@ export async function startWebServer(root, registry, opts = {}) {
161
161
  } catch { /* File plugin route not available — skip */ }
162
162
 
163
163
  // API routes
164
- app.route("/api", createApiRoutes(core, shared));
164
+ const apiRoutes = createApiRoutes(core, shared);
165
+
166
+ // Panels endpoint — expose registered web panels for navigation
167
+ apiRoutes.get("/panels", (c) => {
168
+ const panels = (registry.webPanels || []).map((p) => ({
169
+ name: p.name,
170
+ title: p.title,
171
+ prefix: p.prefix,
172
+ }));
173
+ return c.json(panels);
174
+ });
175
+
176
+ app.route("/api", apiRoutes);
165
177
 
166
178
  // WebSocket endpoint — use Hono's lifecycle hooks to bridge to our handler
167
179
  const wsClients = new Map(); // ws → cleanup fn
@@ -182,6 +194,57 @@ export async function startWebServer(root, registry, opts = {}) {
182
194
  },
183
195
  })));
184
196
 
197
+ // Mount plugin web panels
198
+ for (const panel of registry.webPanels || []) {
199
+ const prefix = panel.prefix.replace(/\/+$/, "");
200
+
201
+ // Mount plugin API routes if provided
202
+ if (typeof panel.apiFactory === "function") {
203
+ app.use(`${prefix}/api/*`, cors());
204
+ const panelApi = panel.apiFactory(registry);
205
+ app.route(`${prefix}/api`, panelApi);
206
+ }
207
+
208
+ // Serve plugin SPA static assets
209
+ if (panel.distDir && fs.existsSync(panel.distDir)) {
210
+ app.get(`${prefix}/assets/*`, (c) => {
211
+ const assetPath = c.req.path.slice(prefix.length);
212
+ const filePath = path.join(panel.distDir, assetPath);
213
+ if (fs.existsSync(filePath)) {
214
+ const ext = path.extname(filePath);
215
+ const contentType = {
216
+ ".js": "application/javascript",
217
+ ".css": "text/css",
218
+ ".svg": "image/svg+xml",
219
+ ".png": "image/png",
220
+ ".woff2": "font/woff2",
221
+ ".woff": "font/woff",
222
+ ".ttf": "font/ttf",
223
+ ".ico": "image/x-icon",
224
+ }[ext] || "application/octet-stream";
225
+ return c.body(fs.readFileSync(filePath), { headers: { "Content-Type": contentType } });
226
+ }
227
+ return c.notFound();
228
+ });
229
+
230
+ // SPA fallback for plugin routes
231
+ app.get(`${prefix}/*`, (c) => {
232
+ const indexPath = path.join(panel.distDir, "index.html");
233
+ if (fs.existsSync(indexPath)) {
234
+ return c.html(fs.readFileSync(indexPath, "utf8"));
235
+ }
236
+ return c.notFound();
237
+ });
238
+ app.get(prefix, (c) => {
239
+ const indexPath = path.join(panel.distDir, "index.html");
240
+ if (fs.existsSync(indexPath)) {
241
+ return c.html(fs.readFileSync(indexPath, "utf8"));
242
+ }
243
+ return c.notFound();
244
+ });
245
+ }
246
+ }
247
+
185
248
  // Serve static SPA files
186
249
  const distDir = path.join(__dirname, "dist");
187
250
  if (fs.existsSync(distDir)) {
@@ -1 +0,0 @@
1
- /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-400:oklch(85.2% .199 91.936);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-cyan-300:oklch(86.5% .127 207.078);--color-cyan-400:oklch(78.9% .154 211.53);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-500:oklch(62.7% .265 303.9);--color-fuchsia-300:oklch(83.3% .145 321.434);--color-fuchsia-400:oklch(74% .238 322.16);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-normal:0em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-2xl:40px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-full{top:100%}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-full{bottom:100%}.left-0{left:calc(var(--spacing)*0)}.left-2{left:calc(var(--spacing)*2)}.left-4{left:calc(var(--spacing)*4)}.z-10{z-index:10}.z-50{z-index:50}.mx-1{margin-inline:calc(var(--spacing)*1)}.mx-4{margin-inline:calc(var(--spacing)*4)}.my-0\.5{margin-block:calc(var(--spacing)*.5)}.my-3{margin-block:calc(var(--spacing)*3)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-2\.5{margin-top:calc(var(--spacing)*2.5)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-auto{margin-top:auto}.mr-1{margin-right:calc(var(--spacing)*1)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-1\.5{margin-bottom:calc(var(--spacing)*1.5)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.ml-0\.5{margin-left:calc(var(--spacing)*.5)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-8{margin-left:calc(var(--spacing)*8)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-1\.5{height:calc(var(--spacing)*1.5)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-8{height:calc(var(--spacing)*8)}.h-\[2px\]{height:2px}.h-\[5px\]{height:5px}.h-\[6px\]{height:6px}.h-\[14px\]{height:14px}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-20{max-height:calc(var(--spacing)*20)}.max-h-52{max-height:calc(var(--spacing)*52)}.w-1\.5{width:calc(var(--spacing)*1.5)}.w-1\/2{width:50%}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-60{width:calc(var(--spacing)*60)}.w-\[2px\]{width:2px}.w-\[5px\]{width:5px}.w-\[6px\]{width:6px}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[220px\]{min-width:220px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-grab{cursor:grab}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-\[\#1a1a28\]{border-color:#1a1a28}.border-\[\#1a1a28\]\/50{border-color:#1a1a2880}.border-\[\#2e2e40\]{border-color:#2e2e40}.border-\[\#818cf8\]\/20{border-color:#818cf833}.border-\[\#818cf8\]\/30{border-color:#818cf84d}.border-\[\#26263a\]{border-color:#26263a}.border-\[\#f97316\]{border-color:#f97316}.border-\[\#f97316\]\/20{border-color:#f9731633}.border-\[\#fbbf24\]\/20{border-color:#fbbf2433}.border-\[\#fbbf24\]\/25{border-color:#fbbf2440}.border-cyan-400\/30{border-color:#00d2ef4d}@supports (color:color-mix(in lab,red,red)){.border-cyan-400\/30{border-color:color-mix(in oklab,var(--color-cyan-400)30%,transparent)}}.border-emerald-400\/20{border-color:#00d29433}@supports (color:color-mix(in lab,red,red)){.border-emerald-400\/20{border-color:color-mix(in oklab,var(--color-emerald-400)20%,transparent)}}.border-emerald-400\/30{border-color:#00d2944d}@supports (color:color-mix(in lab,red,red)){.border-emerald-400\/30{border-color:color-mix(in oklab,var(--color-emerald-400)30%,transparent)}}.border-purple-500\/20{border-color:#ac4bff33}@supports (color:color-mix(in lab,red,red)){.border-purple-500\/20{border-color:color-mix(in oklab,var(--color-purple-500)20%,transparent)}}.border-red-400\/20{border-color:#ff656833}@supports (color:color-mix(in lab,red,red)){.border-red-400\/20{border-color:color-mix(in oklab,var(--color-red-400)20%,transparent)}}.border-red-400\/30{border-color:#ff65684d}@supports (color:color-mix(in lab,red,red)){.border-red-400\/30{border-color:color-mix(in oklab,var(--color-red-400)30%,transparent)}}.border-red-500\/20{border-color:#fb2c3633}@supports (color:color-mix(in lab,red,red)){.border-red-500\/20{border-color:color-mix(in oklab,var(--color-red-500)20%,transparent)}}.border-transparent{border-color:#0000}.border-yellow-400\/30{border-color:#fac8004d}@supports (color:color-mix(in lab,red,red)){.border-yellow-400\/30{border-color:color-mix(in oklab,var(--color-yellow-400)30%,transparent)}}.bg-\[\#0a0a10\]{background-color:#0a0a10}.bg-\[\#0c0c12\]{background-color:#0c0c12}.bg-\[\#0c0c14\]{background-color:#0c0c14}.bg-\[\#0e0e16\]{background-color:#0e0e16}.bg-\[\#1a1a28\]{background-color:#1a1a28}.bg-\[\#1e1e2e\]{background-color:#1e1e2e}.bg-\[\#3a3a50\]{background-color:#3a3a50}.bg-\[\#818cf8\]{background-color:#818cf8}.bg-\[\#06060a\]{background-color:#06060a}.bg-\[\#08080c\]{background-color:#08080c}.bg-\[\#12121a\]{background-color:#12121a}.bg-\[\#14141c\]{background-color:#14141c}.bg-\[\#18181f\]{background-color:#18181f}.bg-\[\#f97316\]{background-color:#f97316}.bg-\[\#f97316\]\/8{background-color:#f9731614}.bg-\[\#f97316\]\/20{background-color:#f9731633}.bg-\[\#fbbf24\]\/8{background-color:#fbbf2414}.bg-emerald-400{background-color:var(--color-emerald-400)}.bg-emerald-400\/8{background-color:#00d29414}@supports (color:color-mix(in lab,red,red)){.bg-emerald-400\/8{background-color:color-mix(in oklab,var(--color-emerald-400)8%,transparent)}}.bg-red-400{background-color:var(--color-red-400)}.bg-red-400\/8{background-color:#ff656814}@supports (color:color-mix(in lab,red,red)){.bg-red-400\/8{background-color:color-mix(in oklab,var(--color-red-400)8%,transparent)}}.bg-red-400\/50{background-color:#ff656880}@supports (color:color-mix(in lab,red,red)){.bg-red-400\/50{background-color:color-mix(in oklab,var(--color-red-400)50%,transparent)}}.bg-red-400\/60{background-color:#ff656899}@supports (color:color-mix(in lab,red,red)){.bg-red-400\/60{background-color:color-mix(in oklab,var(--color-red-400)60%,transparent)}}.bg-red-500\/5{background-color:#fb2c360d}@supports (color:color-mix(in lab,red,red)){.bg-red-500\/5{background-color:color-mix(in oklab,var(--color-red-500)5%,transparent)}}.bg-transparent{background-color:#0000}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-0{padding-block:calc(var(--spacing)*0)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-5{padding-block:calc(var(--spacing)*5)}.py-\[1px\]{padding-block:1px}.py-\[2px\]{padding-block:2px}.py-\[3px\]{padding-block:3px}.pr-3{padding-right:calc(var(--spacing)*3)}.pb-0\.5{padding-bottom:calc(var(--spacing)*.5)}.pl-2{padding-left:calc(var(--spacing)*2)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-4{padding-left:calc(var(--spacing)*4)}.pl-5{padding-left:calc(var(--spacing)*5)}.pl-\[6px\]{padding-left:6px}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-normal{--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#1e1e2a\]{color:#1e1e2a}.text-\[\#2e2e40\]{color:#2e2e40}.text-\[\#3a3a50\]{color:#3a3a50}.text-\[\#4e4e63\]{color:#4e4e63}.text-\[\#5a5a70\]{color:#5a5a70}.text-\[\#6b6b80\]{color:#6b6b80}.text-\[\#6e7a8a\]{color:#6e7a8a}.text-\[\#8b8b9e\]{color:#8b8b9e}.text-\[\#818cf8\]{color:#818cf8}.text-\[\#08080c\]{color:#08080c}.text-\[\#18181f\]{color:#18181f}.text-\[\#26263a\]{color:#26263a}.text-\[\#a0a0b0\]{color:#a0a0b0}.text-\[\#c0bfc6\]{color:#c0bfc6}.text-\[\#e0dfe4\]{color:#e0dfe4}.text-\[\#f97316\]{color:#f97316}.text-\[\#fb923c\]{color:#fb923c}.text-\[\#fbbf24\]{color:#fbbf24}.text-cyan-300\/70{color:#53eafdb3}@supports (color:color-mix(in lab,red,red)){.text-cyan-300\/70{color:color-mix(in oklab,var(--color-cyan-300)70%,transparent)}}.text-cyan-400{color:var(--color-cyan-400)}.text-emerald-300\/70{color:#5ee9b5b3}@supports (color:color-mix(in lab,red,red)){.text-emerald-300\/70{color:color-mix(in oklab,var(--color-emerald-300)70%,transparent)}}.text-emerald-400{color:var(--color-emerald-400)}.text-fuchsia-300\/80{color:#f2a9ffcc}@supports (color:color-mix(in lab,red,red)){.text-fuchsia-300\/80{color:color-mix(in oklab,var(--color-fuchsia-300)80%,transparent)}}.text-fuchsia-400{color:var(--color-fuchsia-400)}.text-purple-400{color:var(--color-purple-400)}.text-red-400{color:var(--color-red-400)}.text-yellow-300\/70{color:#ffe02ab3}@supports (color:color-mix(in lab,red,red)){.text-yellow-300\/70{color:color-mix(in oklab,var(--color-yellow-300)70%,transparent)}}.text-yellow-400{color:var(--color-yellow-400)}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.decoration-\[\#f97316\]\/30{text-decoration-color:#f973164d}.underline-offset-2{text-underline-offset:2px}.opacity-0{opacity:0}.opacity-60{opacity:.6}.opacity-\[0\.07\]{opacity:.07}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_12px_rgba\(249\,115\,22\,0\.3\)\]{--tw-shadow:0 0 12px var(--tw-shadow-color,#f973164d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur-2xl{--tw-blur:blur(var(--blur-2xl));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-\[\#2e2e40\]::placeholder{color:#2e2e40}.focus-within\:border-\[\#f97316\]\/50:focus-within{border-color:#f9731680}.focus-within\:shadow-\[0_0_20px_rgba\(249\,115\,22\,0\.08\)\]:focus-within{--tw-shadow:0 0 20px var(--tw-shadow-color,#f9731614);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(hover:hover){.hover\:bg-\[\#1a1a28\]:hover{background-color:#1a1a28}.hover\:bg-\[\#1c1c28\]:hover{background-color:#1c1c28}.hover\:bg-\[\#12121a\]:hover{background-color:#12121a}.hover\:bg-\[\#14141c\]:hover{background-color:#14141c}.hover\:bg-\[\#18181f\]:hover{background-color:#18181f}.hover\:bg-\[\#f97316\]\/20:hover{background-color:#f9731633}.hover\:bg-\[\#fb923c\]:hover{background-color:#fb923c}.hover\:bg-emerald-400\/10:hover{background-color:#00d2941a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-emerald-400\/10:hover{background-color:color-mix(in oklab,var(--color-emerald-400)10%,transparent)}}.hover\:bg-red-400\/10:hover{background-color:#ff65681a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-red-400\/10:hover{background-color:color-mix(in oklab,var(--color-red-400)10%,transparent)}}.hover\:text-\[\#8b8b9e\]:hover{color:#8b8b9e}.hover\:text-\[\#e0dfe4\]:hover{color:#e0dfe4}.hover\:text-\[\#f87171\]:hover{color:#f87171}.hover\:text-\[\#f97316\]:hover{color:#f97316}.hover\:text-\[\#fb923c\]:hover{color:#fb923c}.hover\:decoration-\[\#fb923c\]\/50:hover{text-decoration-color:#fb923c80}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:cursor-grabbing:active{cursor:grabbing}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}}body{color:#e0dfe4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#08080c;height:100dvh;margin:0;padding:0;font-family:Sora,system-ui,-apple-system,sans-serif;overflow:hidden}#root{flex-direction:column;height:100dvh;display:flex}code,pre,.font-mono{font-family:IBM Plex Mono,JetBrains Mono,Fira Code,monospace}::selection{color:#e0dfe4;background:#f973164d}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#26263a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#3f3f56}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.25s ease-out fadeIn}@keyframes slideIn{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}.animate-slide-in{animation:.2s ease-out slideIn}@keyframes cursorBlink{0%,to{opacity:1}50%{opacity:0}}.animate-cursor{animation:1s step-end infinite cursorBlink}@keyframes glowPulse{0%,to{box-shadow:0 0 8px #f9731626}50%{box-shadow:0 0 16px #f973164d}}.noise:after{content:"";pointer-events:none;opacity:.02;z-index:9999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;top:0;right:0;bottom:0;left:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}