archbyte 0.1.0 → 0.1.1
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.
- package/bin/archbyte.js +15 -2
- package/package.json +2 -1
- package/templates/archbyte.yaml +24 -0
- package/templates/architecture.excalidraw.json +173 -0
- package/ui/dist/assets/{index-B66Til39.js → index-D-GWktm8.js} +1 -1
- package/ui/dist/assets/index-DMe9--0X.css +1 -0
- package/ui/dist/favicon.ico +0 -0
- package/ui/dist/index.html +3 -2
- package/ui/dist/logo.png +0 -0
- package/ui/dist/assets/index-BE2OWbzu.css +0 -1
package/bin/archbyte.js
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
|
|
3
|
+
const [major] = process.versions.node.split('.').map(Number);
|
|
4
|
+
if (major < 18) {
|
|
5
|
+
console.error(`\n ArchByte requires Node.js 18+. You have ${process.versions.node}.\n Download the latest version at https://nodejs.org/\n`);
|
|
6
|
+
process.exit(1);
|
|
7
|
+
}
|
|
8
|
+
|
|
3
9
|
import { Command } from 'commander';
|
|
4
10
|
import { handleServe } from '../dist/cli/serve.js';
|
|
5
11
|
import { handleGenerate } from '../dist/cli/generate.js';
|
|
@@ -21,8 +27,15 @@ const program = new Command();
|
|
|
21
27
|
program
|
|
22
28
|
.name('archbyte')
|
|
23
29
|
.description('ArchByte - See what agents build. As they build it.')
|
|
24
|
-
.version('0.1.
|
|
25
|
-
.addHelpText('after',
|
|
30
|
+
.version('0.1.1')
|
|
31
|
+
.addHelpText('after', `
|
|
32
|
+
Quick start:
|
|
33
|
+
$ archbyte login Sign in
|
|
34
|
+
$ archbyte init Configure your model provider
|
|
35
|
+
$ archbyte run Analyze → generate → serve
|
|
36
|
+
|
|
37
|
+
https://archbyte.heartbyte.io
|
|
38
|
+
`);
|
|
26
39
|
|
|
27
40
|
// — Getting started —
|
|
28
41
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "archbyte",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "ArchByte - See what agents build. As they build it.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
"bin/",
|
|
57
57
|
"dist/",
|
|
58
58
|
"!dist/agents/premium/",
|
|
59
|
+
"templates/",
|
|
59
60
|
"ui/dist/",
|
|
60
61
|
"README.md"
|
|
61
62
|
]
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# ArchByte Configuration
|
|
2
|
+
# https://heartbyte.io/archbyte
|
|
3
|
+
|
|
4
|
+
# Architecture fitness rules — control validation severity
|
|
5
|
+
# Levels: error (fail CI), warn (report), off (skip)
|
|
6
|
+
rules:
|
|
7
|
+
no-layer-bypass: warn
|
|
8
|
+
no-circular-deps: warn
|
|
9
|
+
no-orphans: off
|
|
10
|
+
max-connections:
|
|
11
|
+
level: warn
|
|
12
|
+
threshold: 8
|
|
13
|
+
|
|
14
|
+
# Custom rules — restrict specific connections
|
|
15
|
+
# custom:
|
|
16
|
+
# - name: "No direct DB access from UI"
|
|
17
|
+
# from: { layer: presentation }
|
|
18
|
+
# to: { type: database }
|
|
19
|
+
# level: error
|
|
20
|
+
#
|
|
21
|
+
# - name: "Services must go through API gateway"
|
|
22
|
+
# from: { type: service, not: { id: api-gateway } }
|
|
23
|
+
# to: { type: external }
|
|
24
|
+
# level: warn
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "excalidraw",
|
|
3
|
+
"version": 2,
|
|
4
|
+
"source": "archbyte",
|
|
5
|
+
"elements": [
|
|
6
|
+
{
|
|
7
|
+
"id": "presentation-layer-box",
|
|
8
|
+
"type": "rectangle",
|
|
9
|
+
"x": 50,
|
|
10
|
+
"y": 50,
|
|
11
|
+
"width": 700,
|
|
12
|
+
"height": 150,
|
|
13
|
+
"strokeColor": "#1971c2",
|
|
14
|
+
"backgroundColor": "#e7f5ff",
|
|
15
|
+
"strokeWidth": 2,
|
|
16
|
+
"roughness": 0
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"id": "presentation-layer-label",
|
|
20
|
+
"type": "text",
|
|
21
|
+
"x": 60,
|
|
22
|
+
"y": 60,
|
|
23
|
+
"width": 150,
|
|
24
|
+
"height": 25,
|
|
25
|
+
"text": "PRESENTATION",
|
|
26
|
+
"strokeColor": "#1971c2",
|
|
27
|
+
"backgroundColor": "transparent"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"id": "application-layer-box",
|
|
31
|
+
"type": "rectangle",
|
|
32
|
+
"x": 50,
|
|
33
|
+
"y": 220,
|
|
34
|
+
"width": 700,
|
|
35
|
+
"height": 150,
|
|
36
|
+
"strokeColor": "#e67700",
|
|
37
|
+
"backgroundColor": "#fff4e6",
|
|
38
|
+
"strokeWidth": 2,
|
|
39
|
+
"roughness": 0
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"id": "application-layer-label",
|
|
43
|
+
"type": "text",
|
|
44
|
+
"x": 60,
|
|
45
|
+
"y": 230,
|
|
46
|
+
"width": 150,
|
|
47
|
+
"height": 25,
|
|
48
|
+
"text": "APPLICATION",
|
|
49
|
+
"strokeColor": "#e67700",
|
|
50
|
+
"backgroundColor": "transparent"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"id": "data-layer-box",
|
|
54
|
+
"type": "rectangle",
|
|
55
|
+
"x": 50,
|
|
56
|
+
"y": 390,
|
|
57
|
+
"width": 700,
|
|
58
|
+
"height": 150,
|
|
59
|
+
"strokeColor": "#2f9e44",
|
|
60
|
+
"backgroundColor": "#ebfbee",
|
|
61
|
+
"strokeWidth": 2,
|
|
62
|
+
"roughness": 0
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"id": "data-layer-label",
|
|
66
|
+
"type": "text",
|
|
67
|
+
"x": 60,
|
|
68
|
+
"y": 400,
|
|
69
|
+
"width": 80,
|
|
70
|
+
"height": 25,
|
|
71
|
+
"text": "DATA",
|
|
72
|
+
"strokeColor": "#2f9e44",
|
|
73
|
+
"backgroundColor": "transparent"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"id": "frontend",
|
|
77
|
+
"type": "rectangle",
|
|
78
|
+
"x": 100,
|
|
79
|
+
"y": 100,
|
|
80
|
+
"width": 180,
|
|
81
|
+
"height": 70,
|
|
82
|
+
"strokeColor": "#1971c2",
|
|
83
|
+
"backgroundColor": "#d0ebff",
|
|
84
|
+
"roughness": 0
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"id": "frontend-text",
|
|
88
|
+
"type": "text",
|
|
89
|
+
"x": 110,
|
|
90
|
+
"y": 125,
|
|
91
|
+
"width": 160,
|
|
92
|
+
"height": 25,
|
|
93
|
+
"text": "Frontend App",
|
|
94
|
+
"strokeColor": "#1e1e1e",
|
|
95
|
+
"backgroundColor": "transparent"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"id": "backend",
|
|
99
|
+
"type": "rectangle",
|
|
100
|
+
"x": 100,
|
|
101
|
+
"y": 270,
|
|
102
|
+
"width": 180,
|
|
103
|
+
"height": 70,
|
|
104
|
+
"strokeColor": "#e67700",
|
|
105
|
+
"backgroundColor": "#ffe8cc",
|
|
106
|
+
"roughness": 0
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"id": "backend-text",
|
|
110
|
+
"type": "text",
|
|
111
|
+
"x": 110,
|
|
112
|
+
"y": 295,
|
|
113
|
+
"width": 160,
|
|
114
|
+
"height": 25,
|
|
115
|
+
"text": "Backend API",
|
|
116
|
+
"strokeColor": "#1e1e1e",
|
|
117
|
+
"backgroundColor": "transparent"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"id": "database",
|
|
121
|
+
"type": "ellipse",
|
|
122
|
+
"x": 100,
|
|
123
|
+
"y": 430,
|
|
124
|
+
"width": 180,
|
|
125
|
+
"height": 70,
|
|
126
|
+
"strokeColor": "#2f9e44",
|
|
127
|
+
"backgroundColor": "#b2f2bb",
|
|
128
|
+
"roughness": 0
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"id": "database-text",
|
|
132
|
+
"type": "text",
|
|
133
|
+
"x": 135,
|
|
134
|
+
"y": 455,
|
|
135
|
+
"width": 110,
|
|
136
|
+
"height": 25,
|
|
137
|
+
"text": "Database",
|
|
138
|
+
"strokeColor": "#1e1e1e",
|
|
139
|
+
"backgroundColor": "transparent"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"id": "arrow-frontend-to-backend",
|
|
143
|
+
"type": "arrow",
|
|
144
|
+
"x": 190,
|
|
145
|
+
"y": 170,
|
|
146
|
+
"width": 0,
|
|
147
|
+
"height": 100,
|
|
148
|
+
"strokeColor": "#868e96",
|
|
149
|
+
"backgroundColor": "transparent",
|
|
150
|
+
"points": [[0, 0], [0, 100]],
|
|
151
|
+
"startArrowhead": null,
|
|
152
|
+
"endArrowhead": "arrow"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"id": "arrow-backend-to-database",
|
|
156
|
+
"type": "arrow",
|
|
157
|
+
"x": 190,
|
|
158
|
+
"y": 340,
|
|
159
|
+
"width": 0,
|
|
160
|
+
"height": 90,
|
|
161
|
+
"strokeColor": "#868e96",
|
|
162
|
+
"backgroundColor": "transparent",
|
|
163
|
+
"points": [[0, 0], [0, 90]],
|
|
164
|
+
"startArrowhead": null,
|
|
165
|
+
"endArrowhead": "arrow"
|
|
166
|
+
}
|
|
167
|
+
],
|
|
168
|
+
"appState": {
|
|
169
|
+
"gridSize": 20,
|
|
170
|
+
"viewBackgroundColor": "#ffffff"
|
|
171
|
+
},
|
|
172
|
+
"flows": []
|
|
173
|
+
}
|
|
@@ -64,7 +64,7 @@ Error generating stack: `+p.message+`
|
|
|
64
64
|
`),a=s[0],u=s.slice(1).join(`
|
|
65
65
|
`),c=["arch-node",o.layer,o.active?"active":"",o.highlighted?"highlighted":"",o.locked?"locked":"",o.isConnected===!0?"connected":"",o.isConnected===!1?"dimmed":"",o.isSearchMatch===!0?"search-match":"",o.isSearchMatch===!1?"search-no-match":""].filter(Boolean).join(" "),h=aN[o.layer]||"#868e96",m=kp[o.nodeType]||kp.component;return f.jsxs(f.Fragment,{children:[f.jsx(pE,{color:h,isVisible:r,minWidth:100,minHeight:60}),f.jsxs("div",{className:c,style:{minWidth:o.width||130,width:"100%",height:"100%"},children:[f.jsx(Wr,{type:"target",position:Ee.Top}),f.jsx(Wr,{type:"target",position:Ee.Left}),f.jsx("div",{className:"node-type-icon",children:m}),f.jsxs("div",{className:"node-content",children:[f.jsx("div",{className:"label",children:a}),u&&f.jsx("div",{className:"sublabel",children:u}),o.description&&f.jsx("div",{className:"node-desc",children:o.description})]}),o.techStack&&o.techStack.length>0&&f.jsx("div",{className:"node-tech-row",children:o.techStack.slice(0,3).map((g,x)=>f.jsx("span",{className:"node-tech-pill",children:g},x))}),f.jsx(Wr,{type:"source",position:Ee.Bottom}),f.jsx(Wr,{type:"source",position:Ee.Right})]})]})}const bg=b.memo(uN),cN={develop:"#2f9e44",development:"#2f9e44",dev:"#2f9e44",staging:"#e67700",stage:"#e67700",production:"#c92a2a",prod:"#c92a2a"};function dN({selectedEnvironment:t,environments:r,onSelectEnvironment:o}){if(!r||Object.keys(r).length===0)return null;const s=Object.keys(r);return f.jsx("div",{className:"environment-tabs",children:s.map(a=>{var g;const u=t===a,c=r==null?void 0:r[a],h=(c==null?void 0:c.color)||cN[a]||"#6b7280",m=(c==null?void 0:c.label)||a.charAt(0).toUpperCase()+a.slice(1);return f.jsxs("button",{className:`env-tab ${u?"selected":""}`,onClick:()=>o(a),style:{"--env-color":h},children:[f.jsx("span",{className:"env-indicator"}),f.jsx("span",{className:"env-label",children:m}),u&&c&&f.jsx("span",{className:"env-meta",children:[c.deployment,c.scaling,(g=c.urlPatterns||c.urls)==null?void 0:g[0]].filter(Boolean).join(" | ")})]},a)})})}const fN=b.memo(dN);function hN(t){return t<1e3?`${t}ms`:`${(t/1e3).toFixed(1)}s`}function pN(t){return new Date(t).toLocaleDateString("en-GB",{day:"numeric",month:"short",year:"numeric"})}function mN({visible:t,onClose:r}){const[o,s]=b.useState(null),a=b.useCallback(async()=>{try{const u=await fetch("http://localhost:3847/api/stats");u.ok&&s(await u.json())}catch{}},[]);return b.useEffect(()=>{t&&a()},[t,a]),!t||!o?null:f.jsxs("div",{className:"stats-overlay",children:[f.jsxs("div",{className:"stats-overlay-header",children:[f.jsx("span",{className:"stats-overlay-title",children:"Architecture Stats"}),f.jsx("button",{className:"panel-close-btn",onClick:r,children:"x"})]}),(o.durationMs||o.filesScanned||o.analyzedAt)&&f.jsxs("div",{className:"stats-scan-info",children:[o.durationMs!=null&&f.jsx("span",{className:"scan-info-item",children:hN(o.durationMs)}),o.filesScanned!=null&&f.jsxs("span",{className:"scan-info-item",children:[o.filesScanned.toLocaleString()," files"]}),o.tokenUsage&&f.jsxs("span",{className:"scan-info-item",children:[(o.tokenUsage.input+o.tokenUsage.output).toLocaleString()," tokens"]}),o.mode&&f.jsx("span",{className:"scan-info-item",children:o.mode==="pipeline"?"static + model":"static only"}),o.analyzedAt&&f.jsx("span",{className:"scan-info-item",children:pN(o.analyzedAt)})]}),f.jsxs("div",{className:"stats-grid",children:[f.jsxs("div",{className:"stat-card",children:[f.jsx("div",{className:"stat-value",children:o.components}),f.jsx("div",{className:"stat-label",children:"Components"})]}),f.jsxs("div",{className:"stat-card",children:[f.jsx("div",{className:"stat-value",children:o.totalConnections}),f.jsx("div",{className:"stat-label",children:"Connections"})]}),f.jsxs("div",{className:"stat-card",children:[f.jsx("div",{className:"stat-value",children:o.databases}),f.jsx("div",{className:"stat-label",children:"Databases"})]}),f.jsxs("div",{className:"stat-card",children:[f.jsx("div",{className:"stat-value",children:o.externalServices}),f.jsx("div",{className:"stat-label",children:"External"})]}),f.jsxs("div",{className:`stat-card ${o.orphans>0?"highlight":""}`,children:[f.jsx("div",{className:"stat-value",children:o.orphans}),f.jsx("div",{className:"stat-label",children:"Orphans"})]}),f.jsxs("div",{className:"stat-card",children:[f.jsx("div",{className:"stat-value",children:o.flows}),f.jsx("div",{className:"stat-label",children:"Flows"})]})]})]})}const gN=b.memo(mN);function yN({visible:t,onClose:r,onHighlightNode:o}){const[s,a]=b.useState(null),[u,c]=b.useState(!1),h=b.useCallback(async()=>{c(!0);try{const m=await fetch("http://localhost:3847/api/validate");m.ok&&a(await m.json())}catch{}c(!1)},[]);return b.useEffect(()=>{t&&h()},[t,h]),!t||!s&&!u?null:f.jsxs("div",{className:"validation-panel",children:[f.jsxs("div",{className:"validation-header",children:[f.jsx("span",{className:"validation-title",children:"Validation"}),f.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[f.jsx("button",{className:"panel-btn cyan small",onClick:h,disabled:u,children:u?"...":"Re-validate"}),s&&f.jsx("span",{className:`validation-badge ${s.passed?"pass":"fail"}`,children:s.passed?"PASS":"FAIL"}),f.jsx("button",{className:"panel-close-btn",onClick:r,children:"x"})]})]}),u&&!s?f.jsx("div",{style:{color:"var(--text-muted)",fontSize:11,textAlign:"center",padding:12},children:"Validating..."}):s&&s.violations.length===0?f.jsx("div",{style:{color:"var(--text-muted)",fontSize:11,textAlign:"center",padding:12},children:"No violations found"}):s?f.jsx("div",{children:s.violations.map((m,g)=>f.jsxs("div",{className:`violation-item ${m.level}`,onClick:()=>{m.nodeIds&&m.nodeIds.length>0&&o(m.nodeIds[0])},children:[f.jsx("div",{className:"violation-rule",children:m.rule}),f.jsx("div",{className:"violation-message",children:m.message})]},g))}):null,s&&f.jsxs("div",{style:{marginTop:8,fontSize:10,color:"var(--text-muted)",textAlign:"center"},children:[s.errors," error",s.errors!==1?"s":"",", ",s.warnings," warning",s.warnings!==1?"s":""]})]})}const vN=b.memo(yN);function xN({visible:t}){const[r,o]=b.useState(null),[s,a]=b.useState([]),[u,c]=b.useState(!0),[h,m]=b.useState(!1),g=b.useCallback(async()=>{try{const[E,k]=await Promise.all([fetch("http://localhost:3847/api/patrol/latest"),fetch("http://localhost:3847/api/patrol/history")]);E.ok&&o(await E.json()),k.ok&&a(await k.json())}catch{}c(!1)},[]),x=b.useCallback(async()=>{try{const E=await fetch("http://localhost:3847/api/patrol/running");if(E.ok){const k=await E.json();m(k.running)}}catch{}},[]);b.useEffect(()=>{if(t){g(),x();const E=setInterval(g,h?5e3:1e4),k=setInterval(x,5e3);return()=>{clearInterval(E),clearInterval(k)}}},[t,g,x,h]);const y=async()=>{try{(await fetch("http://localhost:3847/api/patrol/start",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({interval:30})})).ok&&m(!0)}catch{}},v=async()=>{try{(await fetch("http://localhost:3847/api/patrol/stop",{method:"POST"})).ok&&m(!1)}catch{}};if(!t)return null;if(u)return f.jsx("div",{className:"ops-section",children:f.jsx("div",{className:"ops-empty",children:"Loading..."})});if(!r&&s.length===0)return f.jsxs("div",{className:"ops-section",children:[f.jsxs("div",{className:"ops-empty",children:["No patrol data yet.",f.jsx("span",{className:"ops-hint",children:"Start patrol to begin monitoring"})]}),f.jsx("div",{className:"patrol-actions",children:f.jsx("button",{className:"panel-btn green",onClick:y,disabled:h,children:h?"Running...":"Start Patrol"})})]});const _=s.slice(-20),S=_.filter(E=>E.passed).length,N=_.length>0?Math.round(S/_.length*100):0;return f.jsxs("div",{className:"ops-section",children:[f.jsx("div",{className:"patrol-actions",children:h?f.jsx("button",{className:"panel-btn red",onClick:v,children:"Stop Patrol"}):f.jsx("button",{className:"panel-btn green",onClick:y,children:"Start Patrol"})}),_.length>0&&f.jsxs("div",{className:"patrol-sparkline-row",children:[f.jsx("div",{className:"patrol-sparkline",children:_.map((E,k)=>f.jsx("div",{className:`spark-dot ${E.passed?"healthy":"violation"}`,title:`${new Date(E.timestamp).toLocaleTimeString()} — ${E.passed?"Healthy":"Violation"}`},k))}),f.jsxs("span",{className:"patrol-health-pct",children:[N,"%"]})]}),r&&f.jsxs("div",{className:`patrol-status-card ${r.passed?"healthy":"violation"}`,children:[f.jsxs("div",{className:"patrol-status-row",children:[f.jsx("span",{className:`patrol-badge ${r.passed?"healthy":"violation"}`,children:r.passed?"HEALTHY":"VIOLATION"}),f.jsx("span",{className:"patrol-time",children:new Date(r.timestamp).toLocaleTimeString()})]}),f.jsxs("div",{className:"patrol-counts",children:[r.errors>0&&f.jsxs("span",{className:"patrol-count error",children:[r.errors," err"]}),r.warnings>0&&f.jsxs("span",{className:"patrol-count warn",children:[r.warnings," warn"]}),r.errors===0&&r.warnings===0&&f.jsx("span",{className:"patrol-count ok",children:"All clear"})]})]}),r&&r.newViolations.length>0&&f.jsxs("div",{className:"patrol-violations",children:[f.jsx("div",{className:"patrol-violations-label",children:"New violations"}),r.newViolations.slice(0,5).map((E,k)=>f.jsxs("div",{className:`patrol-violation-item ${E.level}`,children:[f.jsx("span",{className:"patrol-v-rule",children:E.rule}),f.jsx("span",{className:"patrol-v-msg",children:E.message})]},k))]}),r&&r.resolvedViolations.length>0&&f.jsxs("div",{className:"patrol-violations resolved",children:[f.jsx("div",{className:"patrol-violations-label",children:"Resolved"}),r.resolvedViolations.slice(0,3).map((E,k)=>f.jsxs("div",{className:"patrol-violation-item resolved",children:[f.jsx("span",{className:"patrol-v-rule",children:E.rule}),f.jsx("span",{className:"patrol-v-msg",children:E.message})]},k))]}),f.jsxs("div",{className:"patrol-summary",children:[s.length," patrols total"]})]})}const wN=b.memo(xN);function SN({visible:t}){const[r,o]=b.useState([]),[s,a]=b.useState(null),[u,c]=b.useState(null),[h,m]=b.useState(!0),[g,x]=b.useState(null),[y,v]=b.useState(null),_=b.useRef(null),S=b.useCallback(async()=>{try{const I=await fetch("http://localhost:3847/api/workflow/list");I.ok&&o(await I.json())}catch{}m(!1)},[]),N=b.useCallback(async I=>{try{const C=await fetch(`http://localhost:3847/api/workflow/status/${I}`);if(C.ok){const j=await C.json();c(j),j&&g===I&&(j.status==="completed"||j.status==="failed")&&(x(null),S())}}catch{}},[g,S]);b.useEffect(()=>{if(t){S();const I=setInterval(S,g?3e3:1e4);return()=>clearInterval(I)}},[t,S,g]),b.useEffect(()=>(_.current&&clearInterval(_.current),s&&(N(s),_.current=setInterval(()=>N(s),g?3e3:1e4)),()=>{_.current&&clearInterval(_.current)}),[s,N,g]);const E=async I=>{v(null);try{const C=await fetch(`http://localhost:3847/api/workflow/run/${I}`,{method:"POST"});if(C.ok)x(I);else{const j=await C.json();v(j.error||"Failed to start workflow")}}catch{v("Failed to connect to server")}},k=async I=>{v(null);try{(await fetch("http://localhost:3847/api/workflow/reset",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:I})})).ok&&(c(null),S())}catch{}};return t?h?f.jsx("div",{className:"ops-section",children:f.jsx("div",{className:"ops-empty",children:"Loading..."})}):r.length===0?f.jsx("div",{className:"ops-section",children:f.jsxs("div",{className:"ops-empty",children:["No workflows available.",f.jsx("span",{className:"ops-hint",children:"Run: archbyte workflow --list"})]})}):f.jsxs("div",{className:"ops-section",children:[y&&f.jsx("div",{className:"wf-error",children:y}),r.map(I=>{const C=s===I.id,j=g===I.id;return f.jsxs("div",{className:"wf-item",children:[f.jsxs("div",{className:"wf-header",onClick:()=>a(C?null:I.id),children:[f.jsxs("div",{className:"wf-header-left",children:[f.jsx("span",{className:"wf-expand",children:C?"−":"+"}),f.jsx("span",{className:"wf-name",children:I.name}),I.builtin&&f.jsx("span",{className:"wf-tag",children:"built-in"})]}),(j||I.status)&&f.jsx("span",{className:`wf-status ${j?"running":I.status}`,children:j?"running":I.status==="completed"?"done":I.status})]}),C&&f.jsxs("div",{className:"wf-detail",children:[f.jsx("div",{className:"wf-desc",children:I.description}),u&&u.workflowId===I.id?f.jsxs("div",{className:"wf-steps",children:[Object.entries(u.steps).map(([O,A])=>f.jsxs("div",{className:`wf-step ${A.status}`,children:[f.jsx("span",{className:"wf-step-icon",children:A.status==="completed"?"✓":A.status==="running"?"▶":A.status==="failed"?"✗":"○"}),f.jsx("span",{className:"wf-step-id",children:O})]},O)),(()=>{const O=Object.keys(u.steps).length,A=Object.values(u.steps).filter(q=>q.status==="completed").length,H=O>0?Math.round(A/O*100):0;return f.jsxs("div",{className:"wf-progress",children:[f.jsx("div",{className:"wf-progress-bar",children:f.jsx("div",{className:"wf-progress-fill",style:{width:`${H}%`}})}),f.jsxs("span",{className:"wf-progress-label",children:[H,"%"]})]})})()]}):f.jsx("div",{className:"wf-steps-preview",children:I.steps.length>0?I.steps.join(" → "):"No state yet"}),f.jsxs("div",{className:"wf-actions",children:[f.jsx("button",{className:"panel-btn cyan",disabled:j,onClick:()=>E(I.id),children:j?"Running...":"Run"}),(I.status==="completed"||I.status==="failed")&&!j&&f.jsx("button",{className:"panel-btn amber",onClick:()=>k(I.id),children:"Reset"})]})]})]},I.id)})]}):null}const kN=b.memo(SN);function EN({projectInfo:t}){const[r,o]=b.useState(!1),s=b.useRef(null);return b.useEffect(()=>{if(!r)return;const a=u=>{s.current&&!s.current.contains(u.target)&&o(!1)};return document.addEventListener("mousedown",a),()=>document.removeEventListener("mousedown",a)},[r]),t?f.jsxs("div",{className:"project-info-wrapper",ref:s,children:[f.jsx("button",{className:"project-info-trigger",onClick:()=>o(!r),children:t.name}),r&&f.jsxs("div",{className:"project-info-popup",children:[f.jsxs("div",{className:"project-info-header",children:[f.jsx("span",{className:"project-info-name",children:t.name}),t.primaryLanguage&&f.jsx("span",{className:"project-info-lang",children:t.primaryLanguage})]}),t.description&&f.jsx("p",{className:"project-info-desc",children:t.description}),t.isMonorepo&&f.jsx("div",{className:"project-info-badge",children:"Monorepo"}),t.workspacePath&&f.jsxs("a",{className:"project-info-vscode",href:`vscode://file${t.workspacePath}`,title:"Open folder in VS Code",children:[f.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:f.jsx("path",{d:"M17.583 2.214L12.52 6.768 7.84 3.96 2.4 5.88v12.24l5.44 1.92 4.68-2.808 5.063 4.554L21.6 19.8V4.2l-4.017-1.986zM7.84 15.12V8.88l4.68 3.12-4.68 3.12zm9.743 2.544l-3.96-3.564 3.96-3.564v7.128z"})}),"Open in VS Code"]})]})]}):null}const NN={architecture:bg},CN=1500;function _N({flow:t,architecture:r,onClose:o}){var _;const[s,a]=b.useState(0),[u,c]=b.useState(new Set([(_=t.steps[0])==null?void 0:_.edge])),[h,m]=b.useState(!0),{flowNodeIds:g,flowEdges:x}=b.useMemo(()=>{const S=new Set(t.steps.map(k=>k.edge)),N=r.edges.filter(k=>S.has(k.id)),E=new Set;return N.forEach(k=>{E.add(k.source),E.add(k.target)}),{flowNodeIds:E,flowEdges:N}},[t,r]),y=b.useMemo(()=>{const S=r.nodes.filter(ee=>g.has(ee.id)),N=320,E=140,k=80,I=80,C=new Map,j=new Map;g.forEach(ee=>{C.set(ee,0),j.set(ee,[])}),x.forEach(ee=>{g.has(ee.source)&&g.has(ee.target)&&(j.get(ee.source).push(ee.target),C.set(ee.target,(C.get(ee.target)||0)+1))});const O=new Map,A=[];for(C.forEach((ee,U)=>{ee===0&&(A.push(U),O.set(U,0))});A.length>0;){const ee=A.shift(),U=O.get(ee);for(const X of j.get(ee)||[]){const ne=U+1;(!O.has(X)||O.get(X)<ne)&&O.set(X,ne),C.set(X,C.get(X)-1),C.get(X)===0&&A.push(X)}}S.forEach(ee=>{O.has(ee.id)||O.set(ee.id,0)});const H=new Map;S.forEach(ee=>{const U=O.get(ee.id);H.has(U)||H.set(U,[]),H.get(U).push(ee)});const q=[...H.keys()].sort((ee,U)=>ee-U),J=new Map;return q.forEach((ee,U)=>{H.get(ee).forEach((ne,P)=>{J.set(ne.id,{x:k+U*N,y:I+P*E})})}),S.map(ee=>{const U=J.get(ee.id)||{x:k,y:I};return{id:ee.id,type:"architecture",position:U,data:{label:ee.label,layer:ee.layer,nodeType:ee.type,width:ee.width,height:ee.height,path:ee.path,techStack:ee.techStack,description:ee.description},style:{width:ee.width,zIndex:1}}})},[r,g,x]);b.useEffect(()=>{if(!h)return;const S=setInterval(()=>{a(N=>{const E=N+1;if(E>=t.steps.length)return c(new Set([t.steps[0].edge])),0;const k=new Set;for(let I=0;I<=E;I++)k.add(t.steps[I].edge);return c(k),E})},CN);return()=>clearInterval(S)},[h,t]);const v=b.useMemo(()=>{const S=new Map;return t.steps.forEach((N,E)=>{S.has(N.edge)||S.set(N.edge,E+1)}),x.map(N=>{const E=u.has(N.id),k=S.get(N.id);return{id:N.id,source:N.source,target:N.target,label:E&&k?`${k}`:void 0,labelStyle:E&&k?{fill:"#fff",fontWeight:700,fontSize:13,fontFamily:"'JetBrains Mono', monospace",transform:"translateY(-22px)"}:void 0,labelBgStyle:E&&k?{fill:t.color,fillOpacity:.95,rx:10,ry:10,transform:"translateY(-22px)"}:void 0,labelBgPadding:[6,4],style:{stroke:E?t.color:N.color||"var(--border-color)",strokeWidth:E?5:2,opacity:E?1:.3,filter:E?"brightness(0.85) saturate(1.4)":void 0},animated:E,type:"smoothstep"}})},[x,u,t]);return f.jsx("div",{className:"flow-hud-overlay",children:f.jsxs("div",{className:"flow-hud-panel",children:[f.jsxs("div",{className:"flow-hud-header",children:[f.jsxs("div",{className:"flow-hud-title",children:[f.jsx("span",{className:"flow-hud-dot",style:{background:t.color}}),f.jsx("span",{children:t.name})]}),f.jsxs("div",{className:"flow-hud-controls",children:[h?f.jsx("button",{className:"flow-hud-btn",onClick:()=>m(!1),title:"Pause",children:"⏸"}):f.jsx("button",{className:"flow-hud-btn",onClick:()=>m(!0),title:"Play",children:"▶"}),f.jsx("button",{className:"flow-hud-close",onClick:o,title:"Close",children:"✕"})]})]}),f.jsx("div",{className:"flow-hud-description",children:t.description}),f.jsx("div",{className:"flow-hud-canvas",children:f.jsxs(fg,{nodes:y,edges:v,nodeTypes:NN,fitView:!0,fitViewOptions:{padding:.3},nodesDraggable:!1,nodesConnectable:!1,elementsSelectable:!1,panOnDrag:!0,zoomOnScroll:!0,minZoom:.3,maxZoom:2,proOptions:{hideAttribution:!0},children:[f.jsx(pg,{variant:Yn.Dots,gap:20,size:1,color:"var(--grid-color)"}),f.jsx(gg,{showInteractive:!1})]})}),f.jsx("div",{className:"flow-hud-steps",children:t.steps.map((S,N)=>f.jsxs("div",{className:`flow-hud-step ${N<=s?"active":""} ${N===s?"current":""}`,style:{borderColor:N<=s?t.color:void 0},children:[f.jsx("span",{className:"flow-hud-step-num",style:{background:N<=s?t.color:void 0},children:N+1}),S.label]},N))})]})})}function jN(t){return f.jsx(dg,{children:f.jsx(_N,{...t})})}const bN=b.memo(jN),PN=[{key:"anthropic",name:"Anthropic",icon:"A",models:"Claude 3.5 Sonnet, Claude 3 Opus",description:"Advanced reasoning and code analysis",requiresKey:!0},{key:"openai",name:"OpenAI",icon:"O",models:"GPT-4o, GPT-4 Turbo",description:"Versatile general-purpose models",requiresKey:!0},{key:"google",name:"Google",icon:"G",models:"Gemini 1.5 Pro, Gemini 1.5 Flash",description:"Fast multimodal analysis",requiresKey:!0},{key:"ollama",name:"Ollama",icon:"L",models:"Llama 3, CodeLlama, Mistral",description:"Local models, no API key needed",requiresKey:!1}];function MN({onComplete:t}){const[r,o]=b.useState(1),[s,a]=b.useState(null),[u,c]=b.useState(""),[h,m]=b.useState(!1),[g,x]=b.useState(null),y=N=>{a(N),c(""),x(null),N.requiresKey?o(2):o(3)},v=()=>{if(!u.trim()){x("API key is required");return}x(null),o(3)},_=async()=>{if(s){m(!0),x(null);try{const N={provider:s.key};s.requiresKey&&u.trim()&&(N.apiKey=u.trim());const E=await fetch("http://localhost:3847/api/config",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(N)});if(!E.ok){const k=await E.json();throw new Error(k.error||"Failed to save configuration")}t()}catch(N){x(N instanceof Error?N.message:"Failed to save configuration"),m(!1)}}},S=()=>{x(null),r===3&&(s!=null&&s.requiresKey)?o(2):r===3&&!(s!=null&&s.requiresKey)?o(1):(o(1),a(null),c(""))};return f.jsx("div",{style:Me.overlay,onClick:N=>N.stopPropagation(),children:f.jsxs("div",{style:Me.modal,children:[f.jsxs("div",{style:Me.header,children:[f.jsx("div",{style:Me.headerIcon,children:"⚙"}),f.jsx("h2",{style:Me.title,children:"Set Up Your AI Provider"}),f.jsx("p",{style:Me.subtitle,children:"ArchByte uses AI to analyze your codebase and generate architecture diagrams. Choose a provider to get started."})]}),f.jsx("div",{style:Me.stepIndicator,children:[1,2,3].map(N=>f.jsxs("div",{style:Me.stepRow,children:[f.jsx("div",{style:{...Me.stepDot,background:N<=r?"#7c3aed":"#3a3a4a",color:N<=r?"#fff":"#888"},children:N}),f.jsx("span",{style:{...Me.stepLabel,color:N<=r?"#ccc":"#666"},children:N===1?"Provider":N===2?"API Key":"Confirm"}),N<3&&f.jsx("div",{style:{...Me.stepLine,background:N<r?"#7c3aed":"#3a3a4a"}})]},N))}),r===1&&f.jsx("div",{style:Me.stepContent,children:f.jsx("div",{style:Me.providerGrid,children:PN.map(N=>f.jsxs("button",{style:{...Me.providerCard,borderColor:(s==null?void 0:s.key)===N.key?"#7c3aed":"#5a5a7a"},onClick:()=>y(N),onMouseEnter:E=>{E.currentTarget.style.borderColor="#7c3aed",E.currentTarget.style.background="#2a2a3e"},onMouseLeave:E=>{(s==null?void 0:s.key)!==N.key&&(E.currentTarget.style.borderColor="#5a5a7a"),E.currentTarget.style.background="#252536"},children:[f.jsx("div",{style:Me.providerIcon,children:N.icon}),f.jsx("div",{style:Me.providerName,children:N.name}),f.jsx("div",{style:Me.providerModels,children:N.models}),f.jsx("div",{style:Me.providerDesc,children:N.description}),!N.requiresKey&&f.jsx("div",{style:Me.noKeyBadge,children:"No API key needed"})]},N.key))})}),r===2&&s&&f.jsx("div",{style:Me.stepContent,children:f.jsxs("div",{style:Me.keySection,children:[f.jsxs("div",{style:Me.selectedProviderBadge,children:[f.jsx("span",{style:Me.providerIconSmall,children:s.icon}),f.jsx("span",{children:s.name})]}),f.jsx("label",{style:Me.label,children:"API Key"}),f.jsx("input",{type:"password",value:u,onChange:N=>{c(N.target.value),x(null)},placeholder:`Enter your ${s.name} API key`,style:Me.input,autoFocus:!0,onKeyDown:N=>{N.key==="Enter"&&v()}}),f.jsxs("p",{style:Me.keyHint,children:["Your key is stored locally in ",f.jsx("code",{style:Me.code,children:".archbyte/config.json"})," and never sent to external servers."]}),g&&f.jsx("div",{style:Me.error,children:g}),f.jsxs("div",{style:Me.buttonRow,children:[f.jsx("button",{style:Me.backBtn,onClick:S,children:"Back"}),f.jsx("button",{style:{...Me.primaryBtn,opacity:u.trim()?1:.5,cursor:u.trim()?"pointer":"not-allowed"},onClick:v,disabled:!u.trim(),children:"Continue"})]})]})}),r===3&&s&&f.jsx("div",{style:Me.stepContent,children:f.jsxs("div",{style:Me.confirmSection,children:[f.jsx("div",{style:Me.confirmIcon,children:"✓"}),f.jsx("h3",{style:Me.confirmTitle,children:"Ready to Analyze"}),f.jsxs("div",{style:Me.confirmDetails,children:[f.jsxs("div",{style:Me.confirmRow,children:[f.jsx("span",{style:Me.confirmLabel,children:"Provider"}),f.jsxs("span",{style:Me.confirmValue,children:[f.jsx("span",{style:Me.providerIconSmall,children:s.icon}),s.name]})]}),f.jsxs("div",{style:Me.confirmRow,children:[f.jsx("span",{style:Me.confirmLabel,children:"Models"}),f.jsx("span",{style:Me.confirmValue,children:s.models})]}),s.requiresKey&&f.jsxs("div",{style:Me.confirmRow,children:[f.jsx("span",{style:Me.confirmLabel,children:"API Key"}),f.jsxs("span",{style:Me.confirmValue,children:["*".repeat(Math.min(u.length,8)),"...",u.slice(-4)]})]})]}),g&&f.jsx("div",{style:Me.error,children:g}),f.jsxs("div",{style:Me.buttonRow,children:[f.jsx("button",{style:Me.backBtn,onClick:S,children:"Back"}),f.jsx("button",{style:{...Me.runBtn,opacity:h?.6:1,cursor:h?"wait":"pointer"},onClick:_,disabled:h,children:h?"Saving...":"Run First Analysis"})]})]})})]})})}const Me={overlay:{position:"fixed",inset:0,background:"rgba(0, 0, 0, 0.7)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:9999,backdropFilter:"blur(4px)"},modal:{background:"#1e1e2e",border:"1px solid #5a5a7a",borderRadius:16,padding:"36px 40px",maxWidth:600,width:"90vw",maxHeight:"90vh",overflowY:"auto"},header:{textAlign:"center",marginBottom:24},headerIcon:{fontSize:36,marginBottom:8,color:"#7c3aed"},title:{color:"#fff",margin:"0 0 8px",fontSize:22,fontWeight:700},subtitle:{color:"#999",margin:0,fontSize:14,lineHeight:1.5},stepIndicator:{display:"flex",alignItems:"center",justifyContent:"center",gap:0,marginBottom:28},stepRow:{display:"flex",alignItems:"center",gap:6},stepDot:{width:26,height:26,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:12,fontWeight:700,flexShrink:0},stepLabel:{fontSize:12,fontWeight:500},stepLine:{width:40,height:2,marginLeft:6,marginRight:6,borderRadius:1},stepContent:{minHeight:200},providerGrid:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:14},providerCard:{background:"#252536",border:"1px solid #5a5a7a",borderRadius:12,padding:"20px 16px",cursor:"pointer",textAlign:"left",transition:"border-color 0.15s, background 0.15s",display:"flex",flexDirection:"column",gap:6},providerIcon:{width:40,height:40,borderRadius:10,background:"#3a3a5a",display:"flex",alignItems:"center",justifyContent:"center",fontSize:20,fontWeight:800,color:"#7c3aed",marginBottom:4},providerName:{color:"#fff",fontSize:16,fontWeight:600},providerModels:{color:"#aaa",fontSize:12,lineHeight:1.4},providerDesc:{color:"#777",fontSize:11,lineHeight:1.4},noKeyBadge:{marginTop:4,fontSize:10,color:"#4ade80",fontWeight:600,textTransform:"uppercase",letterSpacing:.5},keySection:{display:"flex",flexDirection:"column",gap:14},selectedProviderBadge:{display:"inline-flex",alignItems:"center",gap:8,background:"#2a2a3e",border:"1px solid #5a5a7a",borderRadius:8,padding:"8px 14px",color:"#ccc",fontSize:14,fontWeight:500,alignSelf:"flex-start"},providerIconSmall:{width:22,height:22,borderRadius:6,background:"#3a3a5a",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:12,fontWeight:800,color:"#7c3aed"},label:{color:"#ccc",fontSize:13,fontWeight:600},input:{width:"100%",padding:"12px 14px",background:"#161622",border:"1px solid #5a5a7a",borderRadius:8,color:"#fff",fontSize:14,outline:"none",fontFamily:"'JetBrains Mono', monospace",boxSizing:"border-box"},keyHint:{color:"#777",fontSize:12,margin:0,lineHeight:1.4},code:{background:"#2a2a3e",padding:"2px 6px",borderRadius:4,fontSize:11,color:"#aaa"},error:{color:"#f87171",fontSize:13,padding:"8px 12px",background:"rgba(248, 113, 113, 0.1)",border:"1px solid rgba(248, 113, 113, 0.3)",borderRadius:8},buttonRow:{display:"flex",justifyContent:"flex-end",gap:10,marginTop:8},backBtn:{padding:"10px 20px",background:"transparent",border:"1px solid #5a5a7a",borderRadius:8,color:"#aaa",fontSize:14,cursor:"pointer",fontWeight:500},primaryBtn:{padding:"10px 24px",background:"#7c3aed",border:"none",borderRadius:8,color:"#fff",fontSize:14,cursor:"pointer",fontWeight:600},confirmSection:{textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",gap:12},confirmIcon:{width:52,height:52,borderRadius:"50%",background:"rgba(124, 58, 237, 0.15)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:26,color:"#7c3aed"},confirmTitle:{color:"#fff",fontSize:18,fontWeight:600,margin:0},confirmDetails:{width:"100%",maxWidth:360,background:"#252536",border:"1px solid #5a5a7a",borderRadius:10,padding:"14px 18px",display:"flex",flexDirection:"column",gap:10,textAlign:"left"},confirmRow:{display:"flex",justifyContent:"space-between",alignItems:"center"},confirmLabel:{color:"#888",fontSize:13},confirmValue:{color:"#ddd",fontSize:13,fontWeight:500,display:"inline-flex",alignItems:"center",gap:6},runBtn:{padding:"12px 28px",background:"linear-gradient(135deg, #7c3aed, #6d28d9)",border:"none",borderRadius:8,color:"#fff",fontSize:15,cursor:"pointer",fontWeight:700,letterSpacing:.3}},IN={"security-audit":{label:"Security Audit",icon:"⚠",color:"var(--accent-red)"},compliance:{label:"Compliance",icon:"☑",color:"var(--accent-cyan)"},performance:{label:"Performance",icon:"⚡",color:"var(--accent-amber)"},"dependency-risk":{label:"Dependency Risk",icon:"⬢",color:"#c084fc"},migration:{label:"Migration Plan",icon:"→",color:"var(--accent-green)"},"api-contracts":{label:"API Contracts",icon:"↔",color:"#60a5fa"},"drift-detection":{label:"Drift Detection",icon:"◎",color:"#f472b6"}},Yr={critical:0,high:1,medium:2,low:3};function ks({severity:t}){const r={critical:"var(--accent-red)",high:"hsl(25 95% 53%)",medium:"var(--accent-amber)",low:"var(--accent-green)"},o={critical:"hsl(0 90% 55% / 0.15)",high:"hsl(25 95% 53% / 0.15)",medium:"hsl(38 92% 50% / 0.15)",low:"hsl(142 76% 42% / 0.15)"},s={critical:"hsl(0 90% 55% / 0.3)",high:"hsl(25 95% 53% / 0.3)",medium:"hsl(38 92% 50% / 0.3)",low:"hsl(142 76% 42% / 0.3)"};return f.jsx("span",{style:{fontSize:9,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.5px",padding:"1px 6px",borderRadius:3,color:r[t],background:o[t],border:`1px solid ${s[t]}`,whiteSpace:"nowrap"},children:t})}function TN({value:t}){const r=Math.round(t*100);return f.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[f.jsx("div",{style:{flex:1,height:3,borderRadius:2,background:"var(--bg-hover)"},children:f.jsx("div",{style:{width:`${r}%`,height:"100%",borderRadius:2,background:r>=80?"var(--accent-green)":r>=50?"var(--accent-amber)":"var(--accent-red)"}})}),f.jsxs("span",{style:{fontSize:9,color:"var(--text-muted)",fontWeight:600,minWidth:28},children:[r,"%"]})]})}function zN({status:t}){const o={compliant:{color:"var(--accent-green)",bg:"hsl(142 76% 42% / 0.15)",border:"hsl(142 76% 42% / 0.3)"},partial:{color:"var(--accent-amber)",bg:"hsl(38 92% 50% / 0.15)",border:"hsl(38 92% 50% / 0.3)"},"non-compliant":{color:"var(--accent-red)",bg:"hsl(0 90% 55% / 0.15)",border:"hsl(0 90% 55% / 0.3)"}}[t];return f.jsx("span",{style:{fontSize:9,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.5px",padding:"1px 6px",borderRadius:3,color:o.color,background:o.bg,border:`1px solid ${o.border}`},children:t})}function RN({status:t}){const o={completed:{color:"var(--accent-green)",bg:"hsl(142 76% 42% / 0.15)",border:"hsl(142 76% 42% / 0.3)"},"in-progress":{color:"var(--accent-amber)",bg:"hsl(38 92% 50% / 0.15)",border:"hsl(38 92% 50% / 0.3)"},pending:{color:"var(--text-muted)",bg:"var(--bg-tertiary)",border:"var(--border-color)"}}[t];return f.jsx("span",{style:{fontSize:9,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.5px",padding:"1px 6px",borderRadius:3,color:o.color,background:o.bg,border:`1px solid ${o.border}`},children:t})}function AN({driftType:t}){const o={added:{color:"var(--accent-green)",bg:"hsl(142 76% 42% / 0.15)",border:"hsl(142 76% 42% / 0.3)"},removed:{color:"var(--accent-red)",bg:"hsl(0 90% 55% / 0.15)",border:"hsl(0 90% 55% / 0.3)"},modified:{color:"var(--accent-amber)",bg:"hsl(38 92% 50% / 0.15)",border:"hsl(38 92% 50% / 0.3)"}}[t];return f.jsx("span",{style:{fontSize:9,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.5px",padding:"1px 6px",borderRadius:3,color:o.color,background:o.bg,border:`1px solid ${o.border}`},children:t})}function LN({data:t}){const r=[...t.findings].sort((o,s)=>Yr[o.severity]-Yr[s.severity]);return r.length===0?f.jsx("div",{style:{color:"var(--text-muted)",fontSize:11,padding:"8px 0"},children:"No findings"}):f.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:r.map((o,s)=>f.jsxs("div",{style:{padding:"8px 10px",background:"var(--bg-tertiary)",borderRadius:6,borderLeft:`3px solid ${o.severity==="critical"?"var(--accent-red)":o.severity==="high"?"hsl(25 95% 53%)":o.severity==="medium"?"var(--accent-amber)":"var(--accent-green)"}`},children:[f.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4},children:[f.jsx("span",{style:{fontSize:10,fontWeight:600,color:"var(--text-muted)",fontFamily:"'JetBrains Mono', monospace"},children:o.owaspId}),f.jsx(ks,{severity:o.severity})]}),f.jsx("div",{style:{fontSize:11,color:"var(--text-primary)",fontWeight:500,marginBottom:2},children:o.title}),f.jsx("div",{style:{fontSize:10,color:"var(--text-secondary)",lineHeight:1.4},children:o.description}),o.affectedComponent&&f.jsxs("div",{style:{fontSize:9,color:"var(--text-muted)",marginTop:4,fontFamily:"'JetBrains Mono', monospace"},children:["Component: ",o.affectedComponent]})]},s))})}function DN({data:t}){return t.statuses.length===0?f.jsx("div",{style:{color:"var(--text-muted)",fontSize:11,padding:"8px 0"},children:"No compliance data"}):f.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:t.statuses.map((r,o)=>f.jsxs("div",{style:{padding:"8px 10px",background:"var(--bg-tertiary)",borderRadius:6},children:[f.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:6},children:[f.jsx("span",{style:{fontSize:12,fontWeight:600,color:"var(--text-primary)"},children:r.framework}),f.jsx(zN,{status:r.status})]}),f.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,marginBottom:4},children:[f.jsx("div",{style:{flex:1,height:4,borderRadius:2,background:"var(--bg-hover)"},children:f.jsx("div",{style:{width:r.controls>0?`${Math.round(r.passing/r.controls*100)}%`:"0%",height:"100%",borderRadius:2,background:r.status==="compliant"?"var(--accent-green)":r.status==="partial"?"var(--accent-amber)":"var(--accent-red)",transition:"width 0.3s"}})}),f.jsxs("span",{style:{fontSize:10,color:"var(--text-muted)",fontWeight:500,minWidth:40,textAlign:"right"},children:[r.passing,"/",r.controls]})]}),r.findings.length>0&&f.jsx("div",{style:{marginTop:4},children:r.findings.map((s,a)=>f.jsxs("div",{style:{fontSize:10,color:"var(--text-secondary)",padding:"2px 0",lineHeight:1.4},children:["- ",s]},a))})]},o))})}function $N({data:t}){const r=[...t.bottlenecks].sort((o,s)=>Yr[o.severity]-Yr[s.severity]);return r.length===0?f.jsx("div",{style:{color:"var(--text-muted)",fontSize:11,padding:"8px 0"},children:"No bottlenecks detected"}):f.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:r.map((o,s)=>f.jsxs("div",{style:{padding:"8px 10px",background:"var(--bg-tertiary)",borderRadius:6,borderLeft:`3px solid ${o.severity==="critical"?"var(--accent-red)":o.severity==="high"?"hsl(25 95% 53%)":o.severity==="medium"?"var(--accent-amber)":"var(--accent-green)"}`},children:[f.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4},children:[f.jsx("span",{style:{fontSize:10,fontWeight:600,color:"var(--text-muted)",fontFamily:"'JetBrains Mono', monospace"},children:o.component}),f.jsx(ks,{severity:o.severity})]}),f.jsx("div",{style:{fontSize:11,color:"var(--text-primary)",fontWeight:500,marginBottom:2},children:o.metric}),f.jsx("div",{style:{fontSize:10,color:"var(--text-secondary)",lineHeight:1.4},children:o.description}),o.recommendation&&f.jsx("div",{style:{fontSize:10,color:"var(--accent-cyan)",marginTop:4,fontStyle:"italic"},children:o.recommendation})]},s))})}function ON({data:t}){const r=[...t.risks].sort((o,s)=>s.riskScore-o.riskScore);return r.length===0?f.jsx("div",{style:{color:"var(--text-muted)",fontSize:11,padding:"8px 0"},children:"No risks identified"}):f.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:r.map((o,s)=>f.jsxs("div",{style:{padding:"8px 10px",background:"var(--bg-tertiary)",borderRadius:6},children:[f.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4},children:[f.jsxs("span",{style:{fontSize:11,fontWeight:600,color:"var(--text-primary)",fontFamily:"'JetBrains Mono', monospace"},children:[o.package,f.jsxs("span",{style:{fontSize:9,color:"var(--text-muted)",marginLeft:4},children:["@",o.version]})]}),f.jsx(ks,{severity:o.severity})]}),f.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,marginBottom:4},children:[f.jsx("span",{style:{fontSize:9,color:"var(--text-muted)",fontWeight:600},children:"Risk"}),f.jsx("div",{style:{flex:1,height:4,borderRadius:2,background:"var(--bg-hover)"},children:f.jsx("div",{style:{width:`${o.riskScore}%`,height:"100%",borderRadius:2,background:o.riskScore>=75?"var(--accent-red)":o.riskScore>=50?"var(--accent-amber)":"var(--accent-green)",transition:"width 0.3s"}})}),f.jsx("span",{style:{fontSize:10,fontWeight:600,color:"var(--text-muted)",minWidth:28},children:o.riskScore})]}),o.reasons.length>0&&f.jsx("div",{style:{marginTop:2},children:o.reasons.map((a,u)=>f.jsxs("div",{style:{fontSize:10,color:"var(--text-secondary)",padding:"1px 0",lineHeight:1.4},children:["- ",a]},u))})]},s))})}function FN({data:t}){const r=[...t.steps].sort((o,s)=>o.order-s.order);return r.length===0?f.jsx("div",{style:{color:"var(--text-muted)",fontSize:11,padding:"8px 0"},children:"No migration plan"}):f.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:r.map((o,s)=>f.jsxs("div",{style:{padding:"8px 10px",background:"var(--bg-tertiary)",borderRadius:6,borderLeft:`3px solid ${o.status==="completed"?"var(--accent-green)":o.status==="in-progress"?"var(--accent-amber)":"var(--border-color)"}`,opacity:o.status==="completed"?.7:1},children:[f.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4},children:[f.jsxs("span",{style:{fontSize:10,fontWeight:600,color:"var(--text-muted)"},children:["Step ",o.order]}),f.jsx(RN,{status:o.status})]}),f.jsx("div",{style:{fontSize:11,color:"var(--text-primary)",fontWeight:500,marginBottom:2},children:o.title}),f.jsx("div",{style:{fontSize:10,color:"var(--text-secondary)",lineHeight:1.4},children:o.description}),o.estimatedEffort&&f.jsxs("div",{style:{fontSize:9,color:"var(--text-muted)",marginTop:4,fontFamily:"'JetBrains Mono', monospace"},children:["Effort: ",o.estimatedEffort]})]},s))})}function HN({data:t}){const r=[...t.mismatches].sort((o,s)=>Yr[o.severity]-Yr[s.severity]);return r.length===0?f.jsx("div",{style:{color:"var(--text-muted)",fontSize:11,padding:"8px 0"},children:"No mismatches found"}):f.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:r.map((o,s)=>f.jsxs("div",{style:{padding:"8px 10px",background:"var(--bg-tertiary)",borderRadius:6,borderLeft:`3px solid ${o.severity==="critical"?"var(--accent-red)":o.severity==="high"?"hsl(25 95% 53%)":o.severity==="medium"?"var(--accent-amber)":"var(--accent-green)"}`},children:[f.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4},children:[f.jsx("span",{style:{fontSize:10,fontWeight:600,color:"var(--accent-cyan)",fontFamily:"'JetBrains Mono', monospace"},children:o.endpoint}),f.jsx(ks,{severity:o.severity})]}),f.jsx("div",{style:{fontSize:11,color:"var(--text-primary)",fontWeight:500,marginBottom:4},children:o.field}),f.jsxs("div",{style:{display:"flex",gap:8,fontSize:10},children:[f.jsxs("div",{style:{flex:1},children:[f.jsx("div",{style:{color:"var(--text-muted)",fontSize:9,marginBottom:2},children:"Spec"}),f.jsx("div",{style:{color:"var(--accent-green)",fontFamily:"'JetBrains Mono', monospace",fontSize:10,padding:"3px 6px",background:"hsl(142 76% 42% / 0.08)",borderRadius:3},children:o.specValue})]}),f.jsxs("div",{style:{flex:1},children:[f.jsx("div",{style:{color:"var(--text-muted)",fontSize:9,marginBottom:2},children:"Impl"}),f.jsx("div",{style:{color:"var(--accent-red)",fontFamily:"'JetBrains Mono', monospace",fontSize:10,padding:"3px 6px",background:"hsl(0 90% 55% / 0.08)",borderRadius:3},children:o.implValue})]})]})]},s))})}function VN({data:t}){const r=[...t.detections].sort((o,s)=>Yr[o.severity]-Yr[s.severity]);return r.length===0?f.jsx("div",{style:{color:"var(--text-muted)",fontSize:11,padding:"8px 0"},children:"No drift detected"}):f.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:r.map((o,s)=>f.jsxs("div",{style:{padding:"8px 10px",background:"var(--bg-tertiary)",borderRadius:6,borderLeft:`3px solid ${o.severity==="critical"?"var(--accent-red)":o.severity==="high"?"hsl(25 95% 53%)":o.severity==="medium"?"var(--accent-amber)":"var(--accent-green)"}`},children:[f.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4},children:[f.jsx("span",{style:{fontSize:10,fontWeight:600,color:"var(--text-muted)",fontFamily:"'JetBrains Mono', monospace"},children:o.component}),f.jsxs("div",{style:{display:"flex",gap:4,alignItems:"center"},children:[f.jsx(AN,{driftType:o.driftType}),f.jsx(ks,{severity:o.severity})]})]}),f.jsx("div",{style:{fontSize:10,color:"var(--text-secondary)",lineHeight:1.4},children:o.description}),f.jsx("div",{style:{fontSize:9,color:"var(--text-muted)",marginTop:4,fontFamily:"'JetBrains Mono', monospace"},children:new Date(o.detectedAt).toLocaleString()})]},s))})}function BN({visible:t,onClose:r,results:o}){const[s,a]=b.useState(new Set),[u,c]=b.useState(!1),[h,m]=b.useState([]),g=b.useCallback(E=>{a(k=>{const I=new Set(k);return I.has(E)?I.delete(E):I.add(E),I})},[]),x=b.useCallback(async()=>{c(!0);try{const E=await fetch("http://localhost:3847/api/premium-agents/results");if(E.ok){const k=await E.json();Array.isArray(k)&&m(k)}}catch{}c(!1)},[]);b.useEffect(()=>{t&&x()},[t,x]);const y=o.length>0?o:h,v=new Map;y.forEach(E=>{v.set(E.agentId,E)});const _=["security-audit","compliance","performance","dependency-risk","migration","api-contracts","drift-detection"];function S(E){const k=E.data;switch(k.agentId){case"security-audit":return k.findings.length;case"compliance":return k.statuses.length;case"performance":return k.bottlenecks.length;case"dependency-risk":return k.risks.length;case"migration":return k.steps.length;case"api-contracts":return k.mismatches.length;case"drift-detection":return k.detections.length}}function N(E){const k=E.data;switch(k.agentId){case"security-audit":return f.jsx(LN,{data:k});case"compliance":return f.jsx(DN,{data:k});case"performance":return f.jsx($N,{data:k});case"dependency-risk":return f.jsx(ON,{data:k});case"migration":return f.jsx(FN,{data:k});case"api-contracts":return f.jsx(HN,{data:k});case"drift-detection":return f.jsx(VN,{data:k})}}return t?f.jsxs("div",{style:{position:"absolute",top:16,right:16,background:"var(--bg-secondary)",backdropFilter:"blur(12px)",borderRadius:12,border:"1px solid var(--border-color)",zIndex:10,width:320,maxHeight:"calc(100vh - 200px)",overflowY:"auto",boxShadow:"0 2px 12px var(--shadow-color)"},children:[f.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"12px 14px 8px",borderBottom:"1px solid var(--border-color)"},children:[f.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[f.jsx("span",{style:{fontSize:10,fontWeight:600,textTransform:"uppercase",letterSpacing:"1px",color:"var(--text-muted)"},children:"Pro Agents"}),f.jsx("span",{style:{fontSize:9,fontWeight:600,padding:"1px 6px",borderRadius:3,background:"#7c3aed",color:"#fff"},children:"PRO"})]}),f.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[f.jsx("button",{className:"panel-btn cyan small",onClick:x,disabled:u,children:u?"...":"Refresh"}),f.jsx("button",{className:"panel-close-btn",onClick:r,children:"x"})]})]}),f.jsx("div",{style:{padding:"8px 10px 12px"},children:u&&y.length===0?f.jsx("div",{style:{color:"var(--text-muted)",fontSize:11,textAlign:"center",padding:20},children:"Loading agent results..."}):y.length===0?f.jsxs("div",{style:{color:"var(--text-muted)",fontSize:11,textAlign:"center",padding:20},children:["No premium agent results yet.",f.jsx("span",{style:{display:"block",marginTop:6,fontSize:10,color:"var(--accent-cyan)",opacity:.7,fontFamily:"'JetBrains Mono', monospace"},children:"Run agents to see results here"})]}):f.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:_.map(E=>{const k=v.get(E);if(!k)return null;const I=IN[E],C=s.has(E),j=S(k);return f.jsxs("div",{style:{borderRadius:8,border:"1px solid var(--border-color)",overflow:"hidden"},children:[f.jsxs("div",{onClick:()=>g(E),style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"8px 10px",background:C?"var(--bg-tertiary)":"transparent",cursor:"pointer",transition:"background 0.15s",userSelect:"none"},onMouseEnter:O=>{C||(O.currentTarget.style.background="var(--bg-hover)")},onMouseLeave:O=>{C||(O.currentTarget.style.background="transparent")},children:[f.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[f.jsx("span",{style:{fontSize:12},children:I.icon}),f.jsx("span",{style:{fontSize:11,fontWeight:600,color:"var(--text-primary)"},children:I.label}),j>0&&f.jsx("span",{style:{fontSize:9,fontWeight:600,padding:"0px 5px",borderRadius:8,background:"var(--bg-hover)",color:"var(--text-secondary)"},children:j})]}),f.jsx("div",{style:{display:"flex",alignItems:"center",gap:6},children:f.jsx("span",{style:{fontSize:10,color:"var(--text-muted)",fontFamily:"'JetBrains Mono', monospace",transition:"transform 0.2s",transform:C?"rotate(90deg)":"rotate(0deg)",display:"inline-block"},children:"▶"})})]}),C&&f.jsxs("div",{style:{padding:"6px 10px 10px"},children:[f.jsxs("div",{style:{marginBottom:8},children:[f.jsx("div",{style:{fontSize:9,color:"var(--text-muted)",marginBottom:3,fontWeight:500},children:"Confidence"}),f.jsx(TN,{value:k.confidence})]}),N(k),f.jsx("div",{style:{fontSize:9,color:"var(--text-muted)",marginTop:8,textAlign:"right",fontFamily:"'JetBrains Mono', monospace"},children:new Date(k.timestamp).toLocaleString()})]})]},E)})})}),y.length>0&&f.jsxs("div",{style:{padding:"8px 14px",borderTop:"1px solid var(--border-color)",fontSize:10,color:"var(--text-muted)",textAlign:"center"},children:[y.length," of ",_.length," agents reporting"]})]}):null}const WN=b.memo(BN);function li(t,r){return!t||t.length===0?!0:t.includes(r)}const UN=1500,YN={architecture:bg};function XN(t,r){const c=new Set(t.map(S=>S.id)),h=new Map,m=new Map;c.forEach(S=>{h.set(S,0),m.set(S,[])}),r.forEach(S=>{c.has(S.source)&&c.has(S.target)&&(m.get(S.source).push(S.target),h.set(S.target,(h.get(S.target)||0)+1))});const g=new Map,x=[];for(h.forEach((S,N)=>{S===0&&(x.push(N),g.set(N,0))});x.length>0;){const S=x.shift(),N=g.get(S);for(const E of m.get(S)||[]){const k=N+1;(!g.has(E)||g.get(E)<k)&&g.set(E,k),h.set(E,h.get(E)-1),h.get(E)===0&&x.push(E)}}t.forEach(S=>{g.has(S.id)||g.set(S.id,0)});const y=new Map;t.forEach(S=>{const N=g.get(S.id);y.has(N)||y.set(N,[]),y.get(N).push(S)});const v=new Map;return[...y.keys()].sort((S,N)=>S-N).forEach((S,N)=>{const E=y.get(S),k=100;E.forEach((I,C)=>{v.set(I.id,{x:100+N*320,y:k+C*160})})}),t.map(S=>{const N=v.get(S.id)||{x:100,y:100};return{id:S.id,type:"architecture",position:N,data:{label:S.label,layer:S.layer,nodeType:S.type,width:S.width,height:S.height,path:S.path,techStack:S.techStack,description:S.description},style:{width:S.width,zIndex:1}}})}function Ep(t,r="#64748b"){return t.map(o=>({id:o.id,source:o.source,target:o.target,label:o.label||void 0,labelStyle:o.label?{fill:"var(--text-secondary)",fontSize:10,fontWeight:500,fontFamily:"'JetBrains Mono', monospace"}:void 0,labelBgStyle:o.label?{fill:"var(--bg-secondary)",fillOpacity:.85,rx:4,ry:4}:void 0,labelBgPadding:[4,3],style:{stroke:o.color||r,strokeWidth:2,...o.style==="dashed"&&{strokeDasharray:"8 4"}},animated:o.animated||!1,type:"smoothstep",markerEnd:{type:ds.ArrowClosed,width:16,height:16,color:o.color||r}}))}function GN(){var Nr,xn,js;const[t,r,o]=Hk([]),[s,a,u]=Vk([]),[c,h]=b.useState(null),[m,g]=b.useState(!1),[x,y]=b.useState(null),[v]=b.useState([]),[_,S]=b.useState(!0),[N,E]=b.useState(null),[k,I]=b.useState({loggedIn:!1,email:null,tier:"free",features:{analyze:!0,validate:!1,patrol:!1,workflows:!1,chat:!1,premiumAgents:!1}}),[C,j]=b.useState(!1),[O,A]=b.useState(null),[H,q]=b.useState(!1),[J,ee]=b.useState(null),[,U]=b.useState(null),[X,ne]=b.useState(null),[P,K]=b.useState(null),[V,G]=b.useState(-1),[z,R]=b.useState(!1),[B,M]=b.useState(new Set),[$,ie]=b.useState(!1),[oe,de]=b.useState(new Set),[fe,me]=b.useState(new Set),[te,pe]=b.useState(null),[Ne,be]=b.useState(!1),[Ce,ke]=b.useState(!1),[ze,De]=b.useState(!1),[Te,Xe]=b.useState("patrol"),[Ct,ut]=b.useState(!1),[_t,It]=b.useState([]),[st,dn]=b.useState("develop"),[,Kn]=b.useState([]),[Qn,qt]=b.useState(),[Zt,In]=b.useState(null),[Jt,fn]=b.useState(null),[Tt,en]=b.useState(new Map),[yr,Xr]=b.useState(!1),Tn=b.useRef([]),[qn,Gr]=b.useState([]),Kr=50,[,Zn]=b.useState([]),[,Jn]=b.useState([]),[xt,zn]=b.useState(new Set),[jt,Qr]=b.useState(new Set),[ct,_o]=b.useState(()=>{const L=localStorage.getItem("archbyte-theme");return L==="dark"||L==="light"?L:"dark"});b.useEffect(()=>{document.documentElement.setAttribute("data-theme",ct),localStorage.setItem("archbyte-theme",ct)},[ct]);const[qr,tn]=b.useState(!1),[Rn,An]=b.useState(""),[hn,pn]=b.useState(new Set),[yi,nn]=b.useState(!1),[qe,vr]=b.useState(null),mn=ct==="dark"?"#64748b":"#94a3b8",jo="#fff",bo=20,rn=10,wt=b.useCallback(async()=>{try{await Io()}catch(L){console.error("Failed to load architecture:",L),E("Failed to connect to server"),to()}finally{S(!1)}},[]),Zr=async()=>{try{const L=await fetch("http://localhost:3847/api/tools-git");if(L.ok){const W=await L.json();fn(W)}}catch{}},Jr=async()=>{try{const L=await fetch("http://localhost:3847/api/config");if(L.ok){const W=await L.json();if(U(W),W.environments){qt(W.environments);const re=Object.keys(W.environments);re.length>0&&!re.includes(st)&&dn(re[0])}}}catch{}},vi=async()=>{try{const L=await fetch("http://localhost:3847/api/license");if(L.ok){const W=await L.json();I(W),j(!0)}}catch{j(!0)}},Po=async()=>{try{const L=await fetch("http://localhost:3847/api/project");if(L.ok){const W=await L.json();W&&ne(W)}}catch{}},Mo=async()=>{try{const L=await fetch("http://localhost:3847/api/analysis-status");if(L.ok){const W=await L.json();(W==null?void 0:W.status)==="error"&&W.error?ee(W.error):ee(null)}}catch{}},Io=async()=>{const L="http://localhost:3847/events",W="http://localhost:3847/api/architecture";Zr(),Jr(),Po(),vi(),Mo();try{const re=new EventSource(L);return re.onopen=()=>{console.log("SSE connected"),g(!0),E(null)},re.onmessage=le=>{try{const ue=JSON.parse(le.data);console.log("SSE message:",ue.type),ue.architecture&&xr(ue.architecture),ue.type==="git_update"&&ue.gitInfo&&Kn(ue.gitInfo),ue.type==="premium_agent_result"&&ue.premiumResults&&It(ue.premiumResults)}catch(ue){console.error("Failed to parse SSE message:",ue)}},re.onerror=le=>{console.error("SSE error:",le),re.close(),g(!1),eo(W)},()=>re.close()}catch{eo(W)}},eo=async L=>{try{const W=await fetch(L);if(W.ok){const re=await W.json();xr(re),g(!0)}else to()}catch{to()}},to=()=>{const L={nodes:[{id:"frontend",type:"component",label:`Frontend
|
|
66
66
|
(Web App)`,layer:"presentation",x:150,y:170,width:200,height:100,color:"#d0ebff"},{id:"backend",type:"service",label:`Backend
|
|
67
|
-
(API)`,layer:"application",x:150,y:370,width:200,height:100,color:"#ffe8cc"},{id:"database",type:"database",label:"Database",layer:"data",x:150,y:570,width:200,height:80,color:"#b2f2bb"}],edges:[{id:"e1",source:"frontend",target:"backend",color:"#1971c2"},{id:"e2",source:"backend",target:"database",color:"#2f9e44"}],flows:[],lastUpdated:new Date().toISOString(),version:1};xr(L)},xr=L=>{h(L),y(L.lastUpdated),L.gitInfo&&Kn(L.gitInfo),L.environments&&qt(L.environments)};b.useEffect(()=>{if(!c)return;const L=c.nodes.filter(le=>li(le.environments,st)&&!oe.has(le.id)&&!fe.has(le.layer)),W=new Set(L.map(le=>le.id)),re=c.edges.filter(le=>li(le.environments,st)&&W.has(le.source)&&W.has(le.target));r(XN(L,re)),a(Ep(re,mn))},[c,st,oe,fe,mn]),b.useEffect(()=>{wt()},[wt]),b.useEffect(()=>{if(!z||!P)return;const L=setInterval(()=>{G(W=>{const re=W+1;if(re>=P.steps.length)return M(new Set([P.steps[0].edge])),0;const le=new Set;for(let ue=0;ue<=re;ue++)le.add(P.steps[ue].edge);return M(le),re})},UN);return()=>clearInterval(L)},[z,P]),b.useEffect(()=>{if(!c)return;const L=c.nodes.filter(ye=>li(ye.environments,st)),W=new Set(L.map(ye=>ye.id)),re=c.edges.filter(ye=>li(ye.environments,st)&&W.has(ye.source)&&W.has(ye.target)),le=new Map;P&&P.steps.forEach((ye,Re)=>{le.has(ye.edge)||le.set(ye.edge,Re+1)});const ue=re.map(ye=>{const Re=B.has(ye.id),Pe=P==null?void 0:P.steps.some($e=>$e.edge===ye.id),Le=le.get(ye.id);return{id:ye.id,source:ye.source,target:ye.target,label:Re&&Le?`${Le}`:void 0,labelStyle:Re&&Le?{fill:jo,fontWeight:700,fontSize:12,fontFamily:"'JetBrains Mono', monospace",transform:"translateY(-22px)"}:void 0,labelBgStyle:Re&&Le?{fill:(P==null?void 0:P.color)||"#3b82f6",fillOpacity:.95,rx:10,ry:10,transform:"translateY(-22px)"}:void 0,labelBgPadding:[6,4],style:{stroke:Re?(P==null?void 0:P.color)||ye.color:ye.color||mn,strokeWidth:Re?6:3,opacity:P?Pe?1:.15:1,filter:Re?"brightness(0.85) saturate(1.4)":void 0},animated:Re,type:"smoothstep"}});a(ue)},[B,P,c,st,mn,jo]);const Ge=L=>{K(L),G(0),M(new Set([L.steps[0].edge])),R(!0),ie(!0)},wr=()=>{if(R(!1),K(null),G(-1),M(new Set),ie(!1),c){const L=c.nodes.filter(le=>li(le.environments,st)),W=new Set(L.map(le=>le.id)),re=c.edges.filter(le=>li(le.environments,st)&&W.has(le.source)&&W.has(le.target));a(Ep(re,mn))}},no=()=>{R(!1)},To=()=>{P&&R(!0)},gn=b.useRef(oe);b.useEffect(()=>{gn.current=oe},[oe]);const Ue=b.useCallback(()=>{Zn(L=>{const W={nodes:[...Tn.current],edges:[...s],hiddenNodeIds:new Set(gn.current)},re=[...L,W];return re.length>Kr&&re.shift(),re}),Jn([])},[s]),zo=b.useCallback(L=>{In(L),setTimeout(()=>In(null),3e3)},[]),er=b.useCallback(L=>{Ue(),de(W=>new Set([...W,L])),pe(null)},[Ue]),zt=b.useCallback(L=>{de(W=>{const re=new Set(W);return re.delete(L),re})},[]),xi=b.useCallback(()=>{de(new Set)},[]),bt=b.useCallback(L=>{me(W=>{const re=new Set(W);return re.has(L)?re.delete(L):re.add(L),re})},[]),wi=b.useCallback((L,W)=>{pe(W.id)},[]),Si=b.useCallback(()=>{pe(null)},[]);b.useEffect(()=>{Tn.current=t},[t]);const ki=b.useCallback(L=>{o(L);const W=L.some(le=>le.type==="position"&&le.dragging===!1&&le.position),re=L.some(le=>le.type==="dimensions"&&le.dimensions&&le.resizing===!1);(W||re)&&Ue(),L.forEach(le=>{if(le.type==="position"&&le.dragging===!1&&le.position){const ue=Tn.current.find(ye=>ye.id===le.id);ue&&en(ye=>{var Le,$e,We,ht;const Re=new Map(ye),Pe=Re.get(le.id);return Re.set(le.id,{id:le.id,x:le.position.x,y:le.position.y,width:(Pe==null?void 0:Pe.width)??((Le=ue.style)==null?void 0:Le.width)??(($e=ue.data)==null?void 0:$e.width)??100,height:(Pe==null?void 0:Pe.height)??((We=ue.style)==null?void 0:We.height)??((ht=ue.data)==null?void 0:ht.height)??60}),Re})}if(le.type==="dimensions"&&le.dimensions&&le.resizing===!1){const ue=Tn.current.find(ye=>ye.id===le.id);ue&&en(ye=>{const Re=new Map(ye),Pe=Re.get(le.id);return Re.set(le.id,{id:le.id,x:(Pe==null?void 0:Pe.x)??ue.position.x,y:(Pe==null?void 0:Pe.y)??ue.position.y,width:le.dimensions.width,height:le.dimensions.height}),Re})}})},[o,Ue]),Ln=b.useCallback(async()=>{if(Tt.size!==0){Xr(!0);try{const L=Array.from(Tt.values()),W=await fetch("http://localhost:3847/api/update-positions",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({updates:L})});if(W.ok)en(new Map),console.log("Changes saved successfully");else{const re=await W.json();console.error("Failed to save changes:",re)}}catch(L){console.error("Error saving changes:",L)}finally{Xr(!1)}}},[Tt]),Sr=b.useCallback(()=>{en(new Map),wt()},[wt]),Vt=b.useCallback(()=>{Zn(L=>{if(L.length===0)return L;const W=[...L],re=W.pop();if(Jn(le=>[...le,{nodes:[...Tn.current],edges:[...s],hiddenNodeIds:new Set(gn.current)}]),r(re.nodes),a(re.edges),de(re.hiddenNodeIds),c){const le=new Map;re.nodes.forEach(ue=>{var Re,Pe,Le,$e;const ye=c.nodes.find(We=>We.id===ue.id);if(ye){const We=ue.position.x,ht=ue.position.y,Oe=((Re=ue.style)==null?void 0:Re.width)??((Pe=ue.data)==null?void 0:Pe.width)??100,rt=((Le=ue.style)==null?void 0:Le.height)??(($e=ue.data)==null?void 0:$e.height)??60;(We!==ye.x||ht!==ye.y||Oe!==ye.width||rt!==ye.height)&&le.set(ue.id,{id:ue.id,x:We,y:ht,width:Oe,height:rt})}}),en(le)}return W})},[s,r,a,c]),tr=b.useCallback(()=>{Jn(L=>{if(L.length===0)return L;const W=[...L],re=W.pop();if(Zn(le=>[...le,{nodes:[...Tn.current],edges:[...s],hiddenNodeIds:new Set(gn.current)}]),r(re.nodes),a(re.edges),de(re.hiddenNodeIds),c){const le=new Map;re.nodes.forEach(ue=>{var Re,Pe,Le,$e;const ye=c.nodes.find(We=>We.id===ue.id);if(ye){const We=ue.position.x,ht=ue.position.y,Oe=((Re=ue.style)==null?void 0:Re.width)??((Pe=ue.data)==null?void 0:Pe.width)??100,rt=((Le=ue.style)==null?void 0:Le.height)??(($e=ue.data)==null?void 0:$e.height)??60;(We!==ye.x||ht!==ye.y||Oe!==ye.width||rt!==ye.height)&&le.set(ue.id,{id:ue.id,x:We,y:ht,width:Oe,height:rt})}}),en(le)}return W})},[s,r,a,c]),Ro=b.useCallback(({nodes:L})=>{Qr(new Set(L.map(W=>W.id))),L.length===1?pe(L[0].id):L.length===0&&pe(null)},[]),Ao=b.useCallback(()=>{if(jt.size===0&&!te)return;Ue();const L=jt.size>0?jt:new Set([te]);de(W=>new Set([...W,...L])),Qr(new Set),pe(null)},[jt,te,Ue]),kr=b.useCallback(()=>{const L=jt.size>0?jt:te?new Set([te]):new Set;if(L.size===0)return;const W=t.filter(re=>L.has(re.id));Gr(W)},[t,jt,te]),nr=b.useCallback(()=>{if(qn.length===0)return;Ue();const L=50,W=qn.map((re,le)=>{var ue;return{...re,id:`${re.id}-copy-${Date.now()}-${le}`,position:{x:re.position.x+L,y:re.position.y+L},selected:!0,data:{...re.data,label:`${((ue=re.data)==null?void 0:ue.label)||re.id} (copy)`}}});r(re=>[...re.map(le=>({...le,selected:!1})),...W]),W.forEach(re=>{en(le=>{var ye,Re,Pe,Le;const ue=new Map(le);return ue.set(re.id,{id:re.id,x:re.position.x,y:re.position.y,width:((ye=re.style)==null?void 0:ye.width)||((Re=re.data)==null?void 0:Re.width)||100,height:((Pe=re.style)==null?void 0:Pe.height)||((Le=re.data)==null?void 0:Le.height)||60}),ue})})},[qn,r,Ue]),yn=b.useCallback((L,W)=>{const re=jt.size>0?jt:te?new Set([te]):new Set;re.size!==0&&(Ue(),r(le=>le.map(ue=>{if(re.has(ue.id)&&!xt.has(ue.id)){const ye={x:ue.position.x+L,y:ue.position.y+W};return en(Re=>{var Le,$e,We,ht;const Pe=new Map(Re);return Pe.set(ue.id,{id:ue.id,x:ye.x,y:ye.y,width:((Le=ue.style)==null?void 0:Le.width)||(($e=ue.data)==null?void 0:$e.width)||100,height:((We=ue.style)==null?void 0:We.height)||((ht=ue.data)==null?void 0:ht.height)||60}),Pe}),{...ue,position:ye}}return ue})))},[jt,te,xt,r,Ue]),vn=b.useCallback(L=>{zn(W=>{const re=new Set(W);return re.has(L)?re.delete(L):re.add(L),re})},[]),Lo=b.useCallback(L=>{const W={id:`edge-${L.source}-${L.target}-${Date.now()}`,source:L.source,target:L.target,type:"smoothstep",animated:!0,style:{stroke:ct==="dark"?"#868e96":"#6b7280",strokeWidth:2}};a(re=>wm(W,re))},[a,ct]),Ei=b.useCallback((L,W)=>{Ue(),a(re=>i1(L,W,re))},[a,Ue]),Be=b.useCallback(async()=>{const L=document.querySelector(".react-flow");if(L){tn(!0);try{const W=await sN(L,{backgroundColor:ct==="dark"?"hsl(222, 47%, 5%)":"hsl(220, 20%, 97%)",quality:1,pixelRatio:2}),re=document.createElement("a");re.download=`architecture-diagram-${new Date().toISOString().split("T")[0]}.png`,re.href=W,re.click()}catch(W){console.error("Failed to export PNG:",W)}finally{tn(!1)}}},[ct]),Es=b.useCallback(async()=>{const L=document.querySelector(".react-flow");if(L){tn(!0);try{const W=await jg(L,{backgroundColor:ct==="dark"?"hsl(222, 47%, 5%)":"hsl(220, 20%, 97%)"}),re=document.createElement("a");re.download=`architecture-diagram-${new Date().toISOString().split("T")[0]}.svg`,re.href=W,re.click()}catch(W){console.error("Failed to export SVG:",W)}finally{tn(!1)}}},[ct]),Er=b.useCallback(async L=>{tn(!0);try{const W=await fetch(`http://localhost:3847/api/export?format=${L}`);if(!W.ok)throw new Error("Export failed");const re=await W.blob(),le=L==="mermaid"?"mmd":L==="plantuml"?"puml":L==="markdown"?"md":L,ue=document.createElement("a");ue.download=`architecture.${le}`,ue.href=URL.createObjectURL(re),ue.click(),URL.revokeObjectURL(ue.href)}catch(W){console.error(`Failed to export ${L}:`,W)}finally{tn(!1)}},[]),Ni=b.useCallback(()=>{if(!c)return;Ue();const L=250,W=100,re=100,le=t.map((ue,ye)=>({...ue,position:{x:W+ye*L,y:re}}));r(le)},[c,t,r,Ue]),Ns=b.useCallback(()=>{if(!c)return;Ue();const L=150,W=100,re=100,le=t.map((ue,ye)=>({...ue,position:{x:W,y:re+ye*L}}));r(le)},[c,t,r,Ue]),Cs=b.useCallback(()=>{if(!c)return;Ue();const L=280,W=180,re=100,le=100,ue=Math.ceil(Math.sqrt(t.length)),ye=t.map((Re,Pe)=>({...Re,position:{x:re+Pe%ue*L,y:le+Math.floor(Pe/ue)*W}}));r(ye)},[c,t,r,Ue]),_s=b.useCallback(()=>{if(!c)return;Ue();const L=320,W=160,re=100,le=100,ue=new Set(t.map(Oe=>Oe.id)),ye=new Map,Re=new Map;ue.forEach(Oe=>{ye.set(Oe,0),Re.set(Oe,[])}),s.forEach(Oe=>{ue.has(Oe.source)&&ue.has(Oe.target)&&(Re.get(Oe.source).push(Oe.target),ye.set(Oe.target,(ye.get(Oe.target)||0)+1))});const Pe=new Map,Le=[];for(ye.forEach((Oe,rt)=>{Oe===0&&(Le.push(rt),Pe.set(rt,0))});Le.length>0;){const Oe=Le.shift(),rt=Pe.get(Oe);for(const Bt of Re.get(Oe)||[]){const Cr=rt+1;(!Pe.has(Bt)||Pe.get(Bt)<Cr)&&Pe.set(Bt,Cr),ye.set(Bt,ye.get(Bt)-1),ye.get(Bt)===0&&Le.push(Bt)}}t.forEach(Oe=>{Pe.has(Oe.id)||Pe.set(Oe.id,0)});const $e=new Map;t.forEach(Oe=>{const rt=Pe.get(Oe.id);$e.has(rt)||$e.set(rt,[]),$e.get(rt).push(Oe)});const We=[];[...$e.keys()].sort((Oe,rt)=>Oe-rt).forEach((Oe,rt)=>{$e.get(Oe).forEach((Cr,bs)=>{We.push({...Cr,position:{x:re+rt*L,y:le+bs*W}})})}),r(We)},[c,t,s,r,Ue]),Ci=b.useCallback(()=>{if(!c)return;Ue();const L=250,W=180,re=100,le=100,ue={};t.forEach(Le=>{var We;const $e=((We=Le.data)==null?void 0:We.layer)||"application";ue[$e]||(ue[$e]=[]),ue[$e].push(Le)});const ye=["presentation","application","data","external","deployment"];let Re=le;const Pe=[];ye.forEach(Le=>{const $e=ue[Le]||[];$e.forEach((We,ht)=>{Pe.push({...We,position:{x:re+ht*L,y:Re}})}),$e.length>0&&(Re+=W)}),Object.entries(ue).forEach(([Le,$e])=>{ye.includes(Le)||($e.forEach((We,ht)=>{Pe.push({...We,position:{x:re+ht*L,y:Re}})}),Re+=W)}),r(Pe)},[c,t,r,Ue]),rr=b.useCallback(L=>{if(!L||!c){pn(new Set);return}const W=new Set;W.add(L),c.edges.forEach(re=>{re.source===L&&(W.add(re.target),W.add(re.id)),re.target===L&&(W.add(re.source),W.add(re.id))}),pn(W)},[c]),Dn=b.useMemo(()=>{if(!Rn.trim())return new Set;const L=Rn.toLowerCase(),W=new Set;return t.forEach(re=>{var ue;(((ue=re.data)==null?void 0:ue.label)||"").toLowerCase().includes(L)&&W.add(re.id)}),W},[Rn,t]),$n=b.useCallback(async L=>{try{await fetch("http://localhost:3847/api/open-file",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:L})})}catch(W){console.error("Failed to open file:",W)}},[]),On=b.useCallback((L,W)=>{if(!c)return;const re=c.nodes.find(le=>le.id===W.id);re&&(vr(re),nn(!0))},[c]);b.useEffect(()=>{const L=W=>{if(W.target instanceof HTMLInputElement||W.target instanceof HTMLTextAreaElement)return;const le=navigator.platform.toUpperCase().indexOf("MAC")>=0?W.metaKey:W.ctrlKey;if(W.key==="Backspace"||W.key==="Delete"){W.preventDefault(),Ao();return}if(le&&W.key==="c"){W.preventDefault(),kr();return}if(le&&W.key==="v"){W.preventDefault(),nr();return}if(le&&W.shiftKey&&W.key==="z"){W.preventDefault(),tr();return}if(le&&W.key==="z"){W.preventDefault(),Vt();return}if(le&&W.key==="s"){W.preventDefault(),Ln();return}if(W.key==="Escape"){An(""),pn(new Set),nn(!1);return}if(W.key==="ArrowUp"){W.preventDefault(),yn(0,W.shiftKey?-rn*5:-rn);return}if(W.key==="ArrowDown"){W.preventDefault(),yn(0,W.shiftKey?rn*5:rn);return}if(W.key==="ArrowLeft"){W.preventDefault(),yn(W.shiftKey?-rn*5:-rn,0);return}if(W.key==="ArrowRight"){W.preventDefault(),yn(W.shiftKey?rn*5:rn,0);return}if(le&&W.key==="l"&&te){W.preventDefault(),vn(te);return}};return window.addEventListener("keydown",L),()=>window.removeEventListener("keydown",L)},[Ao,kr,nr,Ln,yn,vn,te,Vt,tr]);const or=b.useMemo(()=>c?c.nodes.filter(L=>oe.has(L.id)):[],[c,oe]);return b.useEffect(()=>{c&&r(L=>L.map(W=>({...W,data:{...W.data,highlighted:W.id===Zt}})))},[Zt,c]),_?f.jsx("div",{className:"app",children:f.jsxs("div",{className:"loading",children:[f.jsx("div",{className:"loading-spinner"}),"Loading architecture..."]})}):f.jsxs("div",{className:"app",children:[f.jsxs("div",{className:"branding-header",children:[f.jsxs("div",{className:"archbyte-brand",children:[f.jsx("span",{className:"archbyte-name",children:"ArchByte"}),X?f.jsx(EN,{projectInfo:X}):f.jsx("span",{className:"archbyte-tagline",children:"See what agents build. As they build it."})]}),k.loggedIn&&f.jsx("div",{className:"branding-account",children:k.email&&f.jsxs("span",{className:"account-email",children:[k.email,k.tier==="premium"&&f.jsx("span",{className:"account-pro-tag",children:"PRO"})]})})]}),f.jsxs("div",{className:"toolbar",children:[f.jsxs("div",{className:"toolbar-left",children:[f.jsxs("div",{className:"toolbar-section",children:[f.jsx("span",{className:"toolbar-section-label",children:"View"}),f.jsxs("div",{className:"toolbar-section-items",children:[f.jsx("input",{type:"text",placeholder:"Search nodes...",value:Rn,onChange:L=>An(L.target.value),className:"toolbar-search"}),f.jsxs(Al,{trigger:"→ Layout ▾",triggerClassName:"toolbar-btn",children:[f.jsx("button",{className:"dropdown-item",onClick:_s,children:"→ Flow"}),f.jsx("button",{className:"dropdown-item",onClick:Cs,children:"⊡ Grid"}),f.jsx("button",{className:"dropdown-item",onClick:Ci,children:"⊞ By Layer"}),f.jsx("button",{className:"dropdown-item",onClick:Ni,children:"↔ Horizontal"}),f.jsx("button",{className:"dropdown-item",onClick:Ns,children:"↕ Vertical"})]}),f.jsx(Al,{trigger:fe.size>0?`☰ Layers (${5-fe.size}/5) ▾`:"☰ Layers ▾",triggerClassName:`toolbar-btn ${fe.size>0?"has-hidden":""}`,children:["presentation","application","data","external","deployment"].map(L=>f.jsxs("button",{className:`dropdown-item layer-dropdown-item ${fe.has(L)?"hidden-layer":""}`,onClick:()=>bt(L),children:[f.jsx("div",{className:`legend-color ${L}`}),f.jsx("span",{children:L.charAt(0).toUpperCase()+L.slice(1)}),f.jsx("span",{className:"layer-toggle-indicator",children:fe.has(L)?"○":"●"})]},L))}),f.jsx("button",{className:`toolbar-btn ${Ne?"active":""}`,onClick:()=>be(!Ne),children:"Stats"})]})]}),f.jsxs("div",{className:"toolbar-section",children:[f.jsx("span",{className:"toolbar-section-label",children:"Analyze"}),f.jsxs("div",{className:"toolbar-section-items",children:[f.jsx("button",{className:`toolbar-btn premium-btn ${k.features.validate?"":"premium-locked"} ${Ce?"active":""}`,onClick:()=>{if(!k.features.validate){A("Validate");return}ke(!Ce)},children:"Validate"}),f.jsxs(Al,{trigger:P?f.jsxs(f.Fragment,{children:[f.jsx("span",{className:"flow-dot-inline",style:{background:P.color}}),P.name]}):"▶ Flows ▾",triggerClassName:`toolbar-btn ${P?"has-active-flow":""}`,children:[P&&f.jsxs(f.Fragment,{children:[f.jsx("button",{className:"dropdown-item flow-clear",onClick:wr,children:"⏹ Clear active flow"}),f.jsx("div",{className:"dropdown-separator"})]}),c!=null&&c.flows&&c.flows.length>0?c.flows.map(L=>f.jsxs("button",{className:`dropdown-item flow-dropdown-item ${(P==null?void 0:P.id)===L.id?"active":""}`,onClick:()=>{(P==null?void 0:P.id)===L.id?wr():Ge(L)},children:[f.jsx("span",{className:"flow-dot-inline",style:{background:L.color}}),f.jsx("span",{className:"flow-dropdown-name",children:L.name}),(P==null?void 0:P.id)===L.id&&f.jsx("span",{className:"active-badge",children:"ACTIVE"})]},L.id)):f.jsx("span",{className:"dropdown-item disabled",children:"No flows defined"})]})]})]}),f.jsxs("div",{className:"toolbar-section",children:[f.jsx("span",{className:"toolbar-section-label",children:"Ops"}),f.jsxs("div",{className:"toolbar-section-items",children:[f.jsx("button",{className:`toolbar-btn premium-btn ${k.features.patrol?"":"premium-locked"} ${ze&&Te==="patrol"?"active":""}`,title:k.features.patrol?"":"Available in Pro",onClick:()=>{if(!k.features.patrol){A("Patrol");return}ze&&Te==="patrol"?De(!1):(Xe("patrol"),De(!0),ut(!1))},children:"Patrol"}),f.jsx("button",{className:`toolbar-btn premium-btn ${k.features.patrol?"":"premium-locked"} ${ze&&Te==="workflow"?"active":""}`,title:k.features.patrol?"":"Available in Pro",onClick:()=>{if(!k.features.patrol){A("Workflows");return}ze&&Te==="workflow"?De(!1):(Xe("workflow"),De(!0),ut(!1))},children:"Workflows"}),f.jsx("button",{className:`toolbar-btn premium-btn ${k.features.premiumAgents?"":"premium-locked"} ${Ct?"active":""}`,title:k.features.premiumAgents?"":"Available in Pro",onClick:()=>{if(!k.features.premiumAgents){A("Pro Agents");return}Ct?ut(!1):(ut(!0),De(!1))},children:"Agents"})]})]})]}),f.jsxs("div",{className:"toolbar-right",children:[J&&f.jsx("button",{className:"toolbar-btn toolbar-error-btn",onClick:()=>ee(null),title:J,children:"Analysis failed"}),f.jsxs(Al,{trigger:qr?"Exporting...":"↓ Export ▾",triggerClassName:"toolbar-btn",disabled:qr,children:[f.jsx("div",{className:"dropdown-label",children:"Image"}),f.jsx("button",{className:"dropdown-item",onClick:Be,children:"PNG — Raster image"}),f.jsx("button",{className:"dropdown-item",onClick:Es,children:"SVG — Vector image"}),f.jsx("div",{className:"dropdown-separator"}),f.jsx("div",{className:"dropdown-label",children:"Diagram"}),f.jsx("button",{className:"dropdown-item",onClick:()=>Er("mermaid"),children:"Mermaid — .mmd"}),f.jsx("button",{className:"dropdown-item",onClick:()=>Er("plantuml"),children:"PlantUML — .puml"}),f.jsx("button",{className:"dropdown-item",onClick:()=>Er("dot"),children:"Graphviz DOT — .dot"}),f.jsx("div",{className:"dropdown-separator"}),f.jsx("div",{className:"dropdown-label",children:"Document"}),f.jsx("button",{className:"dropdown-item",onClick:()=>Er("markdown"),children:"Markdown — .md"}),f.jsx("button",{className:"dropdown-item",onClick:()=>Er("json"),children:"JSON — .json"})]}),f.jsx("button",{className:"toolbar-btn-icon",onClick:()=>_o(ct==="dark"?"light":"dark"),title:`Switch to ${ct==="dark"?"light":"dark"} mode`,children:ct==="dark"?"☀":"☽"})]})]}),f.jsx(fN,{selectedEnvironment:st,environments:Qn,onSelectEnvironment:dn}),f.jsxs("div",{className:"canvas-container",children:[f.jsx("div",{className:"watermark",children:"@diabhey"}),f.jsxs(fg,{nodes:t.map(L=>({...L,draggable:!xt.has(L.id),data:{...L.data,locked:xt.has(L.id),isConnected:hn.size>0?hn.has(L.id):null,isSearchMatch:Rn?Dn.has(L.id):null}})),edges:s.map(L=>{var W;return{...L,style:{...L.style,opacity:hn.size>0?hn.has(L.id)?1:.15:1,strokeWidth:hn.has(L.id)?3:((W=L.style)==null?void 0:W.strokeWidth)||2}}}),onNodesChange:ki,onEdgesChange:u,onNodeClick:(L,W)=>{wi(L,W),rr(W.id)},onNodeDoubleClick:On,onPaneClick:()=>{Si(),rr(null)},onConnect:Lo,onReconnect:Ei,edgesReconnectable:!0,onSelectionChange:Ro,nodeTypes:YN,connectionMode:ko.Loose,snapToGrid:!0,snapGrid:[bo,bo],selectionOnDrag:!0,selectNodesOnDrag:!1,fitView:!0,fitViewOptions:{padding:.2},minZoom:.1,maxZoom:2,attributionPosition:"bottom-left",deleteKeyCode:null,children:[f.jsx(pg,{color:ct==="dark"?"hsl(220 25% 15%)":"hsl(220 15% 82%)",gap:20,variant:Yn.Dots}),f.jsx(gg,{})]}),te&&f.jsxs("div",{className:"node-actions-panel",children:[f.jsxs("div",{className:"node-actions-title",children:[xt.has(te)&&f.jsx("span",{className:"lock-icon",children:"🔒"}),((xn=(Nr=t.find(L=>L.id===te))==null?void 0:Nr.data)==null?void 0:xn.label)||te]}),f.jsxs("div",{className:"node-actions-buttons",children:[f.jsx("button",{className:`panel-btn ${xt.has(te)?"amber":"cyan"}`,onClick:()=>vn(te),title:"Lock/Unlock (Cmd+L)",children:xt.has(te)?"🔓 Unlock":"🔒 Lock"}),f.jsx("button",{className:"panel-btn red",onClick:()=>er(te),title:"Hide (Delete key)",children:"Hide"})]}),f.jsx("div",{className:"node-actions-hint",children:"Arrow keys to move • Shift for faster"})]}),yi&&qe&&f.jsxs("div",{className:"node-details-panel",children:[f.jsxs("div",{className:"node-details-header",children:[f.jsxs("div",{children:[f.jsx("div",{className:"node-details-title",children:qe.label.split(`
|
|
67
|
+
(API)`,layer:"application",x:150,y:370,width:200,height:100,color:"#ffe8cc"},{id:"database",type:"database",label:"Database",layer:"data",x:150,y:570,width:200,height:80,color:"#b2f2bb"}],edges:[{id:"e1",source:"frontend",target:"backend",color:"#1971c2"},{id:"e2",source:"backend",target:"database",color:"#2f9e44"}],flows:[],lastUpdated:new Date().toISOString(),version:1};xr(L)},xr=L=>{h(L),y(L.lastUpdated),L.gitInfo&&Kn(L.gitInfo),L.environments&&qt(L.environments)};b.useEffect(()=>{if(!c)return;const L=c.nodes.filter(le=>li(le.environments,st)&&!oe.has(le.id)&&!fe.has(le.layer)),W=new Set(L.map(le=>le.id)),re=c.edges.filter(le=>li(le.environments,st)&&W.has(le.source)&&W.has(le.target));r(XN(L,re)),a(Ep(re,mn))},[c,st,oe,fe,mn]),b.useEffect(()=>{wt()},[wt]),b.useEffect(()=>{if(!z||!P)return;const L=setInterval(()=>{G(W=>{const re=W+1;if(re>=P.steps.length)return M(new Set([P.steps[0].edge])),0;const le=new Set;for(let ue=0;ue<=re;ue++)le.add(P.steps[ue].edge);return M(le),re})},UN);return()=>clearInterval(L)},[z,P]),b.useEffect(()=>{if(!c)return;const L=c.nodes.filter(ye=>li(ye.environments,st)),W=new Set(L.map(ye=>ye.id)),re=c.edges.filter(ye=>li(ye.environments,st)&&W.has(ye.source)&&W.has(ye.target)),le=new Map;P&&P.steps.forEach((ye,Re)=>{le.has(ye.edge)||le.set(ye.edge,Re+1)});const ue=re.map(ye=>{const Re=B.has(ye.id),Pe=P==null?void 0:P.steps.some($e=>$e.edge===ye.id),Le=le.get(ye.id);return{id:ye.id,source:ye.source,target:ye.target,label:Re&&Le?`${Le}`:void 0,labelStyle:Re&&Le?{fill:jo,fontWeight:700,fontSize:12,fontFamily:"'JetBrains Mono', monospace",transform:"translateY(-22px)"}:void 0,labelBgStyle:Re&&Le?{fill:(P==null?void 0:P.color)||"#3b82f6",fillOpacity:.95,rx:10,ry:10,transform:"translateY(-22px)"}:void 0,labelBgPadding:[6,4],style:{stroke:Re?(P==null?void 0:P.color)||ye.color:ye.color||mn,strokeWidth:Re?6:3,opacity:P?Pe?1:.15:1,filter:Re?"brightness(0.85) saturate(1.4)":void 0},animated:Re,type:"smoothstep"}});a(ue)},[B,P,c,st,mn,jo]);const Ge=L=>{K(L),G(0),M(new Set([L.steps[0].edge])),R(!0),ie(!0)},wr=()=>{if(R(!1),K(null),G(-1),M(new Set),ie(!1),c){const L=c.nodes.filter(le=>li(le.environments,st)),W=new Set(L.map(le=>le.id)),re=c.edges.filter(le=>li(le.environments,st)&&W.has(le.source)&&W.has(le.target));a(Ep(re,mn))}},no=()=>{R(!1)},To=()=>{P&&R(!0)},gn=b.useRef(oe);b.useEffect(()=>{gn.current=oe},[oe]);const Ue=b.useCallback(()=>{Zn(L=>{const W={nodes:[...Tn.current],edges:[...s],hiddenNodeIds:new Set(gn.current)},re=[...L,W];return re.length>Kr&&re.shift(),re}),Jn([])},[s]),zo=b.useCallback(L=>{In(L),setTimeout(()=>In(null),3e3)},[]),er=b.useCallback(L=>{Ue(),de(W=>new Set([...W,L])),pe(null)},[Ue]),zt=b.useCallback(L=>{de(W=>{const re=new Set(W);return re.delete(L),re})},[]),xi=b.useCallback(()=>{de(new Set)},[]),bt=b.useCallback(L=>{me(W=>{const re=new Set(W);return re.has(L)?re.delete(L):re.add(L),re})},[]),wi=b.useCallback((L,W)=>{pe(W.id)},[]),Si=b.useCallback(()=>{pe(null)},[]);b.useEffect(()=>{Tn.current=t},[t]);const ki=b.useCallback(L=>{o(L);const W=L.some(le=>le.type==="position"&&le.dragging===!1&&le.position),re=L.some(le=>le.type==="dimensions"&&le.dimensions&&le.resizing===!1);(W||re)&&Ue(),L.forEach(le=>{if(le.type==="position"&&le.dragging===!1&&le.position){const ue=Tn.current.find(ye=>ye.id===le.id);ue&&en(ye=>{var Le,$e,We,ht;const Re=new Map(ye),Pe=Re.get(le.id);return Re.set(le.id,{id:le.id,x:le.position.x,y:le.position.y,width:(Pe==null?void 0:Pe.width)??((Le=ue.style)==null?void 0:Le.width)??(($e=ue.data)==null?void 0:$e.width)??100,height:(Pe==null?void 0:Pe.height)??((We=ue.style)==null?void 0:We.height)??((ht=ue.data)==null?void 0:ht.height)??60}),Re})}if(le.type==="dimensions"&&le.dimensions&&le.resizing===!1){const ue=Tn.current.find(ye=>ye.id===le.id);ue&&en(ye=>{const Re=new Map(ye),Pe=Re.get(le.id);return Re.set(le.id,{id:le.id,x:(Pe==null?void 0:Pe.x)??ue.position.x,y:(Pe==null?void 0:Pe.y)??ue.position.y,width:le.dimensions.width,height:le.dimensions.height}),Re})}})},[o,Ue]),Ln=b.useCallback(async()=>{if(Tt.size!==0){Xr(!0);try{const L=Array.from(Tt.values()),W=await fetch("http://localhost:3847/api/update-positions",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({updates:L})});if(W.ok)en(new Map),console.log("Changes saved successfully");else{const re=await W.json();console.error("Failed to save changes:",re)}}catch(L){console.error("Error saving changes:",L)}finally{Xr(!1)}}},[Tt]),Sr=b.useCallback(()=>{en(new Map),wt()},[wt]),Vt=b.useCallback(()=>{Zn(L=>{if(L.length===0)return L;const W=[...L],re=W.pop();if(Jn(le=>[...le,{nodes:[...Tn.current],edges:[...s],hiddenNodeIds:new Set(gn.current)}]),r(re.nodes),a(re.edges),de(re.hiddenNodeIds),c){const le=new Map;re.nodes.forEach(ue=>{var Re,Pe,Le,$e;const ye=c.nodes.find(We=>We.id===ue.id);if(ye){const We=ue.position.x,ht=ue.position.y,Oe=((Re=ue.style)==null?void 0:Re.width)??((Pe=ue.data)==null?void 0:Pe.width)??100,rt=((Le=ue.style)==null?void 0:Le.height)??(($e=ue.data)==null?void 0:$e.height)??60;(We!==ye.x||ht!==ye.y||Oe!==ye.width||rt!==ye.height)&&le.set(ue.id,{id:ue.id,x:We,y:ht,width:Oe,height:rt})}}),en(le)}return W})},[s,r,a,c]),tr=b.useCallback(()=>{Jn(L=>{if(L.length===0)return L;const W=[...L],re=W.pop();if(Zn(le=>[...le,{nodes:[...Tn.current],edges:[...s],hiddenNodeIds:new Set(gn.current)}]),r(re.nodes),a(re.edges),de(re.hiddenNodeIds),c){const le=new Map;re.nodes.forEach(ue=>{var Re,Pe,Le,$e;const ye=c.nodes.find(We=>We.id===ue.id);if(ye){const We=ue.position.x,ht=ue.position.y,Oe=((Re=ue.style)==null?void 0:Re.width)??((Pe=ue.data)==null?void 0:Pe.width)??100,rt=((Le=ue.style)==null?void 0:Le.height)??(($e=ue.data)==null?void 0:$e.height)??60;(We!==ye.x||ht!==ye.y||Oe!==ye.width||rt!==ye.height)&&le.set(ue.id,{id:ue.id,x:We,y:ht,width:Oe,height:rt})}}),en(le)}return W})},[s,r,a,c]),Ro=b.useCallback(({nodes:L})=>{Qr(new Set(L.map(W=>W.id))),L.length===1?pe(L[0].id):L.length===0&&pe(null)},[]),Ao=b.useCallback(()=>{if(jt.size===0&&!te)return;Ue();const L=jt.size>0?jt:new Set([te]);de(W=>new Set([...W,...L])),Qr(new Set),pe(null)},[jt,te,Ue]),kr=b.useCallback(()=>{const L=jt.size>0?jt:te?new Set([te]):new Set;if(L.size===0)return;const W=t.filter(re=>L.has(re.id));Gr(W)},[t,jt,te]),nr=b.useCallback(()=>{if(qn.length===0)return;Ue();const L=50,W=qn.map((re,le)=>{var ue;return{...re,id:`${re.id}-copy-${Date.now()}-${le}`,position:{x:re.position.x+L,y:re.position.y+L},selected:!0,data:{...re.data,label:`${((ue=re.data)==null?void 0:ue.label)||re.id} (copy)`}}});r(re=>[...re.map(le=>({...le,selected:!1})),...W]),W.forEach(re=>{en(le=>{var ye,Re,Pe,Le;const ue=new Map(le);return ue.set(re.id,{id:re.id,x:re.position.x,y:re.position.y,width:((ye=re.style)==null?void 0:ye.width)||((Re=re.data)==null?void 0:Re.width)||100,height:((Pe=re.style)==null?void 0:Pe.height)||((Le=re.data)==null?void 0:Le.height)||60}),ue})})},[qn,r,Ue]),yn=b.useCallback((L,W)=>{const re=jt.size>0?jt:te?new Set([te]):new Set;re.size!==0&&(Ue(),r(le=>le.map(ue=>{if(re.has(ue.id)&&!xt.has(ue.id)){const ye={x:ue.position.x+L,y:ue.position.y+W};return en(Re=>{var Le,$e,We,ht;const Pe=new Map(Re);return Pe.set(ue.id,{id:ue.id,x:ye.x,y:ye.y,width:((Le=ue.style)==null?void 0:Le.width)||(($e=ue.data)==null?void 0:$e.width)||100,height:((We=ue.style)==null?void 0:We.height)||((ht=ue.data)==null?void 0:ht.height)||60}),Pe}),{...ue,position:ye}}return ue})))},[jt,te,xt,r,Ue]),vn=b.useCallback(L=>{zn(W=>{const re=new Set(W);return re.has(L)?re.delete(L):re.add(L),re})},[]),Lo=b.useCallback(L=>{const W={id:`edge-${L.source}-${L.target}-${Date.now()}`,source:L.source,target:L.target,type:"smoothstep",animated:!0,style:{stroke:ct==="dark"?"#868e96":"#6b7280",strokeWidth:2}};a(re=>wm(W,re))},[a,ct]),Ei=b.useCallback((L,W)=>{Ue(),a(re=>i1(L,W,re))},[a,Ue]),Be=b.useCallback(async()=>{const L=document.querySelector(".react-flow");if(L){tn(!0);try{const W=await sN(L,{backgroundColor:ct==="dark"?"hsl(222, 47%, 5%)":"hsl(220, 20%, 97%)",quality:1,pixelRatio:2}),re=document.createElement("a");re.download=`architecture-diagram-${new Date().toISOString().split("T")[0]}.png`,re.href=W,re.click()}catch(W){console.error("Failed to export PNG:",W)}finally{tn(!1)}}},[ct]),Es=b.useCallback(async()=>{const L=document.querySelector(".react-flow");if(L){tn(!0);try{const W=await jg(L,{backgroundColor:ct==="dark"?"hsl(222, 47%, 5%)":"hsl(220, 20%, 97%)"}),re=document.createElement("a");re.download=`architecture-diagram-${new Date().toISOString().split("T")[0]}.svg`,re.href=W,re.click()}catch(W){console.error("Failed to export SVG:",W)}finally{tn(!1)}}},[ct]),Er=b.useCallback(async L=>{tn(!0);try{const W=await fetch(`http://localhost:3847/api/export?format=${L}`);if(!W.ok)throw new Error("Export failed");const re=await W.blob(),le=L==="mermaid"?"mmd":L==="plantuml"?"puml":L==="markdown"?"md":L,ue=document.createElement("a");ue.download=`architecture.${le}`,ue.href=URL.createObjectURL(re),ue.click(),URL.revokeObjectURL(ue.href)}catch(W){console.error(`Failed to export ${L}:`,W)}finally{tn(!1)}},[]),Ni=b.useCallback(()=>{if(!c)return;Ue();const L=250,W=100,re=100,le=t.map((ue,ye)=>({...ue,position:{x:W+ye*L,y:re}}));r(le)},[c,t,r,Ue]),Ns=b.useCallback(()=>{if(!c)return;Ue();const L=150,W=100,re=100,le=t.map((ue,ye)=>({...ue,position:{x:W,y:re+ye*L}}));r(le)},[c,t,r,Ue]),Cs=b.useCallback(()=>{if(!c)return;Ue();const L=280,W=180,re=100,le=100,ue=Math.ceil(Math.sqrt(t.length)),ye=t.map((Re,Pe)=>({...Re,position:{x:re+Pe%ue*L,y:le+Math.floor(Pe/ue)*W}}));r(ye)},[c,t,r,Ue]),_s=b.useCallback(()=>{if(!c)return;Ue();const L=320,W=160,re=100,le=100,ue=new Set(t.map(Oe=>Oe.id)),ye=new Map,Re=new Map;ue.forEach(Oe=>{ye.set(Oe,0),Re.set(Oe,[])}),s.forEach(Oe=>{ue.has(Oe.source)&&ue.has(Oe.target)&&(Re.get(Oe.source).push(Oe.target),ye.set(Oe.target,(ye.get(Oe.target)||0)+1))});const Pe=new Map,Le=[];for(ye.forEach((Oe,rt)=>{Oe===0&&(Le.push(rt),Pe.set(rt,0))});Le.length>0;){const Oe=Le.shift(),rt=Pe.get(Oe);for(const Bt of Re.get(Oe)||[]){const Cr=rt+1;(!Pe.has(Bt)||Pe.get(Bt)<Cr)&&Pe.set(Bt,Cr),ye.set(Bt,ye.get(Bt)-1),ye.get(Bt)===0&&Le.push(Bt)}}t.forEach(Oe=>{Pe.has(Oe.id)||Pe.set(Oe.id,0)});const $e=new Map;t.forEach(Oe=>{const rt=Pe.get(Oe.id);$e.has(rt)||$e.set(rt,[]),$e.get(rt).push(Oe)});const We=[];[...$e.keys()].sort((Oe,rt)=>Oe-rt).forEach((Oe,rt)=>{$e.get(Oe).forEach((Cr,bs)=>{We.push({...Cr,position:{x:re+rt*L,y:le+bs*W}})})}),r(We)},[c,t,s,r,Ue]),Ci=b.useCallback(()=>{if(!c)return;Ue();const L=250,W=180,re=100,le=100,ue={};t.forEach(Le=>{var We;const $e=((We=Le.data)==null?void 0:We.layer)||"application";ue[$e]||(ue[$e]=[]),ue[$e].push(Le)});const ye=["presentation","application","data","external","deployment"];let Re=le;const Pe=[];ye.forEach(Le=>{const $e=ue[Le]||[];$e.forEach((We,ht)=>{Pe.push({...We,position:{x:re+ht*L,y:Re}})}),$e.length>0&&(Re+=W)}),Object.entries(ue).forEach(([Le,$e])=>{ye.includes(Le)||($e.forEach((We,ht)=>{Pe.push({...We,position:{x:re+ht*L,y:Re}})}),Re+=W)}),r(Pe)},[c,t,r,Ue]),rr=b.useCallback(L=>{if(!L||!c){pn(new Set);return}const W=new Set;W.add(L),c.edges.forEach(re=>{re.source===L&&(W.add(re.target),W.add(re.id)),re.target===L&&(W.add(re.source),W.add(re.id))}),pn(W)},[c]),Dn=b.useMemo(()=>{if(!Rn.trim())return new Set;const L=Rn.toLowerCase(),W=new Set;return t.forEach(re=>{var ue;(((ue=re.data)==null?void 0:ue.label)||"").toLowerCase().includes(L)&&W.add(re.id)}),W},[Rn,t]),$n=b.useCallback(async L=>{try{await fetch("http://localhost:3847/api/open-file",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:L})})}catch(W){console.error("Failed to open file:",W)}},[]),On=b.useCallback((L,W)=>{if(!c)return;const re=c.nodes.find(le=>le.id===W.id);re&&(vr(re),nn(!0))},[c]);b.useEffect(()=>{const L=W=>{if(W.target instanceof HTMLInputElement||W.target instanceof HTMLTextAreaElement)return;const le=navigator.platform.toUpperCase().indexOf("MAC")>=0?W.metaKey:W.ctrlKey;if(W.key==="Backspace"||W.key==="Delete"){W.preventDefault(),Ao();return}if(le&&W.key==="c"){W.preventDefault(),kr();return}if(le&&W.key==="v"){W.preventDefault(),nr();return}if(le&&W.shiftKey&&W.key==="z"){W.preventDefault(),tr();return}if(le&&W.key==="z"){W.preventDefault(),Vt();return}if(le&&W.key==="s"){W.preventDefault(),Ln();return}if(W.key==="Escape"){An(""),pn(new Set),nn(!1);return}if(W.key==="ArrowUp"){W.preventDefault(),yn(0,W.shiftKey?-rn*5:-rn);return}if(W.key==="ArrowDown"){W.preventDefault(),yn(0,W.shiftKey?rn*5:rn);return}if(W.key==="ArrowLeft"){W.preventDefault(),yn(W.shiftKey?-rn*5:-rn,0);return}if(W.key==="ArrowRight"){W.preventDefault(),yn(W.shiftKey?rn*5:rn,0);return}if(le&&W.key==="l"&&te){W.preventDefault(),vn(te);return}};return window.addEventListener("keydown",L),()=>window.removeEventListener("keydown",L)},[Ao,kr,nr,Ln,yn,vn,te,Vt,tr]);const or=b.useMemo(()=>c?c.nodes.filter(L=>oe.has(L.id)):[],[c,oe]);return b.useEffect(()=>{c&&r(L=>L.map(W=>({...W,data:{...W.data,highlighted:W.id===Zt}})))},[Zt,c]),_?f.jsx("div",{className:"app",children:f.jsxs("div",{className:"loading",children:[f.jsx("div",{className:"loading-spinner"}),"Loading architecture..."]})}):f.jsxs("div",{className:"app",children:[f.jsxs("div",{className:"branding-header",children:[f.jsxs("div",{className:"archbyte-brand",children:[f.jsx("img",{src:"/logo.png",alt:"ArchByte",className:"archbyte-logo-img"}),f.jsx("span",{className:"archbyte-name",children:"ArchByte"}),X?f.jsx(EN,{projectInfo:X}):f.jsx("span",{className:"archbyte-tagline",children:"See what agents build. As they build it."})]}),k.loggedIn&&f.jsx("div",{className:"branding-account",children:k.email&&f.jsxs("span",{className:"account-email",children:[k.email,k.tier==="premium"&&f.jsx("span",{className:"account-pro-tag",children:"PRO"})]})})]}),f.jsxs("div",{className:"toolbar",children:[f.jsxs("div",{className:"toolbar-left",children:[f.jsxs("div",{className:"toolbar-section",children:[f.jsx("span",{className:"toolbar-section-label",children:"View"}),f.jsxs("div",{className:"toolbar-section-items",children:[f.jsx("input",{type:"text",placeholder:"Search nodes...",value:Rn,onChange:L=>An(L.target.value),className:"toolbar-search"}),f.jsxs(Al,{trigger:"→ Layout ▾",triggerClassName:"toolbar-btn",children:[f.jsx("button",{className:"dropdown-item",onClick:_s,children:"→ Flow"}),f.jsx("button",{className:"dropdown-item",onClick:Cs,children:"⊡ Grid"}),f.jsx("button",{className:"dropdown-item",onClick:Ci,children:"⊞ By Layer"}),f.jsx("button",{className:"dropdown-item",onClick:Ni,children:"↔ Horizontal"}),f.jsx("button",{className:"dropdown-item",onClick:Ns,children:"↕ Vertical"})]}),f.jsx(Al,{trigger:fe.size>0?`☰ Layers (${5-fe.size}/5) ▾`:"☰ Layers ▾",triggerClassName:`toolbar-btn ${fe.size>0?"has-hidden":""}`,children:["presentation","application","data","external","deployment"].map(L=>f.jsxs("button",{className:`dropdown-item layer-dropdown-item ${fe.has(L)?"hidden-layer":""}`,onClick:()=>bt(L),children:[f.jsx("div",{className:`legend-color ${L}`}),f.jsx("span",{children:L.charAt(0).toUpperCase()+L.slice(1)}),f.jsx("span",{className:"layer-toggle-indicator",children:fe.has(L)?"○":"●"})]},L))}),f.jsx("button",{className:`toolbar-btn ${Ne?"active":""}`,onClick:()=>be(!Ne),children:"Stats"})]})]}),f.jsxs("div",{className:"toolbar-section",children:[f.jsx("span",{className:"toolbar-section-label",children:"Analyze"}),f.jsxs("div",{className:"toolbar-section-items",children:[f.jsx("button",{className:`toolbar-btn premium-btn ${k.features.validate?"":"premium-locked"} ${Ce?"active":""}`,onClick:()=>{if(!k.features.validate){A("Validate");return}ke(!Ce)},children:"Validate"}),f.jsxs(Al,{trigger:P?f.jsxs(f.Fragment,{children:[f.jsx("span",{className:"flow-dot-inline",style:{background:P.color}}),P.name]}):"▶ Flows ▾",triggerClassName:`toolbar-btn ${P?"has-active-flow":""}`,children:[P&&f.jsxs(f.Fragment,{children:[f.jsx("button",{className:"dropdown-item flow-clear",onClick:wr,children:"⏹ Clear active flow"}),f.jsx("div",{className:"dropdown-separator"})]}),c!=null&&c.flows&&c.flows.length>0?c.flows.map(L=>f.jsxs("button",{className:`dropdown-item flow-dropdown-item ${(P==null?void 0:P.id)===L.id?"active":""}`,onClick:()=>{(P==null?void 0:P.id)===L.id?wr():Ge(L)},children:[f.jsx("span",{className:"flow-dot-inline",style:{background:L.color}}),f.jsx("span",{className:"flow-dropdown-name",children:L.name}),(P==null?void 0:P.id)===L.id&&f.jsx("span",{className:"active-badge",children:"ACTIVE"})]},L.id)):f.jsx("span",{className:"dropdown-item disabled",children:"No flows defined"})]})]})]}),f.jsxs("div",{className:"toolbar-section",children:[f.jsx("span",{className:"toolbar-section-label",children:"Ops"}),f.jsxs("div",{className:"toolbar-section-items",children:[f.jsx("button",{className:`toolbar-btn premium-btn ${k.features.patrol?"":"premium-locked"} ${ze&&Te==="patrol"?"active":""}`,title:k.features.patrol?"":"Available in Pro",onClick:()=>{if(!k.features.patrol){A("Patrol");return}ze&&Te==="patrol"?De(!1):(Xe("patrol"),De(!0),ut(!1))},children:"Patrol"}),f.jsx("button",{className:`toolbar-btn premium-btn ${k.features.patrol?"":"premium-locked"} ${ze&&Te==="workflow"?"active":""}`,title:k.features.patrol?"":"Available in Pro",onClick:()=>{if(!k.features.patrol){A("Workflows");return}ze&&Te==="workflow"?De(!1):(Xe("workflow"),De(!0),ut(!1))},children:"Workflows"}),f.jsx("button",{className:`toolbar-btn premium-btn ${k.features.premiumAgents?"":"premium-locked"} ${Ct?"active":""}`,title:k.features.premiumAgents?"":"Available in Pro",onClick:()=>{if(!k.features.premiumAgents){A("Pro Agents");return}Ct?ut(!1):(ut(!0),De(!1))},children:"Agents"})]})]})]}),f.jsxs("div",{className:"toolbar-right",children:[J&&f.jsx("button",{className:"toolbar-btn toolbar-error-btn",onClick:()=>ee(null),title:J,children:"Analysis failed"}),f.jsxs(Al,{trigger:qr?"Exporting...":"↓ Export ▾",triggerClassName:"toolbar-btn",disabled:qr,children:[f.jsx("div",{className:"dropdown-label",children:"Image"}),f.jsx("button",{className:"dropdown-item",onClick:Be,children:"PNG — Raster image"}),f.jsx("button",{className:"dropdown-item",onClick:Es,children:"SVG — Vector image"}),f.jsx("div",{className:"dropdown-separator"}),f.jsx("div",{className:"dropdown-label",children:"Diagram"}),f.jsx("button",{className:"dropdown-item",onClick:()=>Er("mermaid"),children:"Mermaid — .mmd"}),f.jsx("button",{className:"dropdown-item",onClick:()=>Er("plantuml"),children:"PlantUML — .puml"}),f.jsx("button",{className:"dropdown-item",onClick:()=>Er("dot"),children:"Graphviz DOT — .dot"}),f.jsx("div",{className:"dropdown-separator"}),f.jsx("div",{className:"dropdown-label",children:"Document"}),f.jsx("button",{className:"dropdown-item",onClick:()=>Er("markdown"),children:"Markdown — .md"}),f.jsx("button",{className:"dropdown-item",onClick:()=>Er("json"),children:"JSON — .json"})]}),f.jsx("button",{className:"toolbar-btn-icon",onClick:()=>_o(ct==="dark"?"light":"dark"),title:`Switch to ${ct==="dark"?"light":"dark"} mode`,children:ct==="dark"?"☀":"☽"})]})]}),f.jsx(fN,{selectedEnvironment:st,environments:Qn,onSelectEnvironment:dn}),f.jsxs("div",{className:"canvas-container",children:[f.jsx("div",{className:"watermark",children:"archbyte"}),f.jsxs(fg,{nodes:t.map(L=>({...L,draggable:!xt.has(L.id),data:{...L.data,locked:xt.has(L.id),isConnected:hn.size>0?hn.has(L.id):null,isSearchMatch:Rn?Dn.has(L.id):null}})),edges:s.map(L=>{var W;return{...L,style:{...L.style,opacity:hn.size>0?hn.has(L.id)?1:.15:1,strokeWidth:hn.has(L.id)?3:((W=L.style)==null?void 0:W.strokeWidth)||2}}}),onNodesChange:ki,onEdgesChange:u,onNodeClick:(L,W)=>{wi(L,W),rr(W.id)},onNodeDoubleClick:On,onPaneClick:()=>{Si(),rr(null)},onConnect:Lo,onReconnect:Ei,edgesReconnectable:!0,onSelectionChange:Ro,nodeTypes:YN,connectionMode:ko.Loose,snapToGrid:!0,snapGrid:[bo,bo],selectionOnDrag:!0,selectNodesOnDrag:!1,fitView:!0,fitViewOptions:{padding:.2},minZoom:.1,maxZoom:2,attributionPosition:"bottom-left",deleteKeyCode:null,children:[f.jsx(pg,{color:ct==="dark"?"hsl(220 25% 15%)":"hsl(220 15% 82%)",gap:20,variant:Yn.Dots}),f.jsx(gg,{})]}),te&&f.jsxs("div",{className:"node-actions-panel",children:[f.jsxs("div",{className:"node-actions-title",children:[xt.has(te)&&f.jsx("span",{className:"lock-icon",children:"🔒"}),((xn=(Nr=t.find(L=>L.id===te))==null?void 0:Nr.data)==null?void 0:xn.label)||te]}),f.jsxs("div",{className:"node-actions-buttons",children:[f.jsx("button",{className:`panel-btn ${xt.has(te)?"amber":"cyan"}`,onClick:()=>vn(te),title:"Lock/Unlock (Cmd+L)",children:xt.has(te)?"🔓 Unlock":"🔒 Lock"}),f.jsx("button",{className:"panel-btn red",onClick:()=>er(te),title:"Hide (Delete key)",children:"Hide"})]}),f.jsx("div",{className:"node-actions-hint",children:"Arrow keys to move • Shift for faster"})]}),yi&&qe&&f.jsxs("div",{className:"node-details-panel",children:[f.jsxs("div",{className:"node-details-header",children:[f.jsxs("div",{children:[f.jsx("div",{className:"node-details-title",children:qe.label.split(`
|
|
68
68
|
`)[0]}),f.jsxs("div",{className:"node-details-type",children:[qe.layer," • ",qe.type]})]}),f.jsx("button",{className:"panel-close-btn",onClick:()=>nn(!1),children:"×"})]}),qe.path&&f.jsxs("div",{className:"node-details-section",children:[f.jsx("div",{className:"node-details-section-title",children:"Path"}),f.jsx("div",{className:"node-details-path",children:qe.path})]}),qe.techStack&&qe.techStack.length>0&&f.jsxs("div",{className:"node-details-section",children:[f.jsx("div",{className:"node-details-section-title",children:"Tech Stack"}),f.jsx("div",{className:"node-details-tech-stack",children:qe.techStack.map((L,W)=>f.jsx("span",{className:"tech-badge",children:L},W))})]}),f.jsxs("div",{className:"node-details-section",children:[f.jsx("div",{className:"node-details-section-title",children:"Connections"}),f.jsxs("div",{className:"node-details-connections",children:[c==null?void 0:c.edges.filter(L=>L.source===qe.id||L.target===qe.id).map(L=>{const W=L.source===qe.id,re=W?L.target:L.source,le=c==null?void 0:c.nodes.find(ue=>ue.id===re);return f.jsxs("div",{className:"connection-item-detailed",children:[f.jsxs("div",{className:"connection-header",children:[f.jsx("span",{className:"connection-arrow",children:W?"→":"←"}),f.jsx("span",{className:"connection-target",children:(le==null?void 0:le.label.split(`
|
|
69
69
|
`)[0])||re})]}),L.label&&f.jsx("div",{className:"connection-label",children:L.label})]},L.id)}),(c==null?void 0:c.edges.filter(L=>L.source===qe.id||L.target===qe.id).length)===0&&f.jsx("span",{style:{color:"var(--text-muted)"},children:"No connections"})]})]}),f.jsxs("div",{className:"node-details-actions",children:[qe.path&&f.jsx("button",{className:"panel-btn cyan",onClick:()=>$n(qe.path),children:"Open in VS Code"}),f.jsx("button",{className:"panel-btn",onClick:()=>{rr(qe.id),nn(!1)},children:"Highlight Deps"})]})]}),Tt.size>0&&f.jsxs("div",{className:"save-panel",children:[f.jsxs("span",{className:"save-panel-text",children:[Tt.size," unsaved change",Tt.size!==1?"s":""]}),f.jsx("button",{className:"save-btn",onClick:Ln,disabled:yr,children:yr?"Saving...":"Save Changes"}),f.jsx("button",{className:"discard-btn",onClick:Sr,disabled:yr,children:"Discard"})]}),or.length>0&&f.jsxs("div",{className:"hidden-nodes-panel",children:[f.jsxs("div",{className:"hidden-nodes-title",children:["Hidden (",or.length,")",f.jsx("button",{className:"panel-btn cyan small",onClick:xi,children:"Show All"})]}),f.jsx("div",{className:"hidden-nodes-list",style:{maxHeight:220,overflowY:"auto"},children:or.map(L=>f.jsxs("div",{className:"hidden-node-item",children:[f.jsx("span",{className:"hidden-node-name",children:L.label.split(`
|
|
70
70
|
`)[0]}),f.jsx("button",{className:"panel-btn green small",onClick:()=>zt(L.id),children:"Show"})]},L.id))})]}),P&&f.jsxs("div",{className:"flow-progress-bar",children:[f.jsx("span",{className:"flow-progress-dot",style:{background:P.color}}),f.jsx("span",{className:"flow-progress-name",children:P.name}),f.jsx("div",{className:"flow-progress-steps",children:P.steps.map((L,W)=>f.jsx("div",{className:`flow-progress-step ${W<=V?"active":""} ${W===V?"current":""}`,style:{borderColor:W<=V?P.color:void 0},title:L.label,children:L.label},W))}),f.jsxs("div",{className:"flow-progress-controls",children:[z?f.jsx("button",{className:"flow-progress-btn",onClick:no,title:"Pause",children:"⏸"}):f.jsx("button",{className:"flow-progress-btn",onClick:To,title:"Resume",children:"▶"}),f.jsx("button",{className:"flow-progress-btn stop",onClick:wr,title:"Stop",children:"⏹"})]})]}),$&&P&&c&&f.jsx(bN,{flow:P,architecture:c,onClose:wr}),f.jsx(gN,{visible:Ne,onClose:()=>be(!1)}),f.jsx(vN,{visible:Ce,onClose:()=>ke(!1),onHighlightNode:L=>{zo(L),rr(L)}}),ze&&f.jsxs("div",{className:"ops-panel",children:[f.jsxs("div",{className:"ops-header",children:[f.jsxs("div",{className:"ops-tabs",children:[f.jsx("button",{className:`ops-tab ${Te==="patrol"?"active":""}`,onClick:()=>Xe("patrol"),children:"Patrol"}),f.jsx("button",{className:`ops-tab ${Te==="workflow"?"active":""}`,onClick:()=>Xe("workflow"),children:"Workflows"})]}),f.jsx("button",{className:"panel-close-btn",onClick:()=>De(!1),children:"x"})]}),f.jsx(wN,{visible:Te==="patrol"}),f.jsx(kN,{visible:Te==="workflow"})]}),f.jsx(WN,{visible:Ct,onClose:()=>ut(!1),results:_t}),v.length>0&&f.jsxs("div",{className:"agent-panel",children:[f.jsx("div",{className:"agent-panel-title",children:"Agent Activity"}),v.map((L,W)=>f.jsxs("div",{className:"agent-item",children:[f.jsx("div",{className:`agent-dot ${W===0?"active":""}`}),f.jsx("span",{className:"agent-name",children:L.agentName}),f.jsx("span",{className:"agent-target",children:L.targetComponent||L.action})]},W))]})]}),f.jsxs("div",{className:"status-bar",children:[f.jsxs("div",{className:"status-left",children:[f.jsxs("div",{className:"status-indicator",children:[f.jsx("div",{className:`status-dot ${m?"":"disconnected"}`}),f.jsx("span",{children:m?"Live":"Offline"})]}),N&&f.jsx("span",{style:{color:"var(--accent-red)"},children:N})]}),f.jsx("div",{className:"status-center"}),f.jsxs("div",{className:"status-right",children:[f.jsx("span",{children:x?`Updated ${new Date(x).toLocaleTimeString()}`:"Waiting..."}),Jt?f.jsxs("span",{className:"git-status",children:[Jt.repo&&f.jsx("a",{href:((js=Jt.remoteUrl)==null?void 0:js.replace(/^git@([^:]+):/,"https://$1/").replace(/\.git$/,""))||"#",target:"_blank",rel:"noopener noreferrer",className:"git-repo-badge",title:Jt.remoteUrl||"",children:Jt.repo}),f.jsx("span",{className:"git-branch",children:Jt.branch}),f.jsx("span",{className:"git-hash",children:Jt.commit})]}):f.jsxs("span",{children:["v",(c==null?void 0:c.version)||1]})]})]}),H&&f.jsx(MN,{onComplete:()=>{q(!1),wt()}}),O&&f.jsx(lN,{feature:O,onClose:()=>A(null)})]})}cy.createRoot(document.getElementById("root")).render(f.jsx(Np.StrictMode,{children:f.jsx(GN,{})}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap";.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgba(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgba(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__arrowhead polyline{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.react-flow__arrowhead polyline.arrowclosed{fill:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__pane.selection .react-flow__panel{pointer-events:none}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.top.center,.react-flow__panel.bottom.center{left:50%;transform:translate(-15px) translate(-50%)}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.left.center,.react-flow__panel.right.center{top:50%;transform:translateY(-15px) translateY(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__controls.horizontal .react-flow__controls-button{border-bottom:none;border-right:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) )}.react-flow__controls.horizontal .react-flow__controls-button:last-child{border-right:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:5px;height:5px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));translate:-50% -50%}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}:root{--bg-primary: hsl(222 47% 5%);--bg-secondary: hsl(222 47% 7%);--bg-tertiary: hsl(222 47% 10%);--bg-hover: hsl(222 47% 12%);--text-primary: hsl(210 40% 96%);--text-secondary: hsl(215 20% 55%);--text-muted: hsl(215 15% 40%);--border-color: hsl(220 25% 15%);--border-light: hsl(220 20% 12%);--shadow-color: rgba(0, 0, 0, .3);--canvas-bg: hsl(222 47% 5%);--canvas-dots: hsl(220 25% 15%);--watermark-color: rgba(255, 255, 255, .02);--accent-cyan: hsl(185 75% 50%);--accent-green: hsl(142 76% 42%);--accent-amber: hsl(38 92% 50%);--accent-red: hsl(0 90% 55%);--glow-cyan: 0 0 20px hsl(185 75% 50% / .15);--glow-green: 0 0 12px hsl(142 76% 42% / .3)}[data-theme=light]{--bg-primary: hsl(220 20% 97%);--bg-secondary: hsl(220 18% 94%);--bg-tertiary: hsl(220 16% 90%);--bg-hover: hsl(220 14% 86%);--text-primary: hsl(220 30% 12%);--text-secondary: hsl(220 15% 40%);--text-muted: hsl(220 10% 58%);--border-color: hsl(220 15% 82%);--border-light: hsl(220 12% 88%);--shadow-color: rgba(0, 0, 0, .08);--canvas-bg: hsl(220 20% 97%);--canvas-dots: hsl(220 15% 82%);--watermark-color: rgba(0, 0, 0, .02);--accent-cyan: hsl(185 80% 35%);--accent-green: hsl(142 72% 32%);--accent-amber: hsl(38 90% 42%);--accent-red: hsl(0 85% 45%);--glow-cyan: 0 0 12px hsl(185 80% 35% / .12);--glow-green: 0 0 8px hsl(142 72% 32% / .2)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:JetBrains Mono,monospace}.app{width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg-primary)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#303a50}.branding-header{position:relative;z-index:10;background:#080c16d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid hsl(185 75% 50% / .1);box-shadow:0 1px 12px #20cfdf0d}.archbyte-brand{display:flex;align-items:center;gap:10px}.archbyte-logo{font-size:20px}.archbyte-logo-img{height:22px;width:auto}.archbyte-name{font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.archbyte-tagline{font-size:13px;color:var(--text-muted);padding-left:14px;margin-left:4px;border-left:1px solid var(--border-color)}.branding-account{display:flex;align-items:center;gap:10px}.account-tier-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;letter-spacing:.3px;text-transform:uppercase}.account-tier-badge.premium{background:#672eb8;color:#fff}.account-tier-badge.free{background:#182543;color:var(--text-muted)}.account-email{font-size:12px;color:var(--text-muted);position:relative}.account-pro-tag{margin-left:6px;font-size:9px;font-weight:700;letter-spacing:.5px;padding:1px 4px;border-radius:3px;background:#a65eed26;color:#a65eed;border:1px solid hsl(270 80% 65% / .4);vertical-align:middle}.project-info-wrapper{position:relative;display:inline-flex;align-items:center}.project-info-trigger{background:none;border:1px solid transparent;color:var(--text-secondary);font-family:JetBrains Mono,monospace;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;margin-left:10px;padding:3px 10px 3px 14px;border-left:1px solid var(--border-color);border-radius:0}.project-info-trigger:hover{color:var(--text-primary);background:var(--bg-tertiary)}.project-info-popup{position:absolute;top:calc(100% + 8px);left:0;background:#090e1af2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:12px;padding:16px;width:340px;z-index:100;box-shadow:0 8px 32px var(--shadow-color);animation:popupFadeIn .15s ease-out}@keyframes popupFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.project-info-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.project-info-name{font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.project-info-lang{font-size:10px;font-weight:600;color:#4cd9e6;background:#20cfdf1f;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px}.project-info-desc{font-size:12px;color:var(--text-secondary);line-height:1.5;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--border-color)}.project-info-stats{display:flex;gap:6px;flex-wrap:wrap}.project-info-stat{display:flex;flex-direction:column;align-items:center;background:var(--bg-tertiary);padding:8px 12px;border-radius:8px;min-width:56px;flex:1}.project-info-stat-value{font-size:16px;font-weight:700;color:var(--text-primary);font-family:JetBrains Mono,monospace}.project-info-stat-label{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.project-info-badge{margin-top:10px;font-size:10px;font-weight:600;color:#f6c155;background:#f2a60d1a;padding:3px 10px;border-radius:10px;display:inline-block}.project-info-vscode{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;color:#75b3f0;background:#1980e61a;border:1px solid hsl(210 80% 50% / .2);text-decoration:none;cursor:pointer;transition:all .2s}.project-info-vscode:hover{background:#1980e633;border-color:#1980e666;color:#a3ccf5}.project-info-vscode svg{flex-shrink:0}[data-theme=light] .project-info-popup{background:#f9fafbf5}[data-theme=light] .project-info-vscode{color:#1466b8;background:#1980e614;border-color:#1980e633}[data-theme=light] .project-info-vscode:hover{background:#1980e626;border-color:#1980e659;color:#0f4d8a}.brand-attribution{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);text-decoration:none;transition:color .2s}.brand-attribution:hover{color:var(--text-primary)}.brand-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid hsl(185 75% 50% / .3);transition:border-color .2s,box-shadow .2s}.brand-attribution:hover .brand-avatar{border-color:var(--accent-cyan);box-shadow:0 0 12px #20cfdf4d}.brand-attribution-link{color:var(--accent-cyan);font-weight:600}.brand-attribution:hover .brand-attribution-link{color:#63dee9}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:16px}.toolbar-right{gap:8px}.toolbar-right .dropdown-menu{left:auto;right:0}.toolbar-section{display:flex;flex-direction:column;gap:3px;padding-right:12px;border-right:1px solid hsl(222 30% 25%)}.toolbar-section:last-child{padding-right:0;border-right:none}.toolbar-section-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);text-align:center;-webkit-user-select:none;user-select:none}.toolbar-section-items,.toolbar-group{display:flex;align-items:center;gap:6px}.toolbar-divider{width:1px;height:24px;background:var(--border-color);margin:0 8px}.toolbar-btn-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;font-size:15px;font-weight:600;font-family:system-ui,sans-serif;line-height:1;text-align:center;color:var(--text-secondary);cursor:pointer;transition:all .2s}.toolbar-btn-icon:hover{background:var(--bg-hover);color:var(--text-primary);box-shadow:var(--glow-cyan)}.toolbar-btn-icon:disabled{opacity:.5;cursor:not-allowed}.toolbar-error-btn{background:#ef444426!important;border-color:#ef444466!important;color:#ef4444!important;font-size:11px;animation:pulse-error 2s ease-in-out infinite}.toolbar-error-btn:hover{background:#ef444440!important}@keyframes pulse-error{0%,to{opacity:1}50%{opacity:.7}}.toolbar-btn{display:flex;align-items:center;gap:4px;height:32px;padding:0 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s}.toolbar-btn:hover{background:var(--bg-hover);color:var(--text-primary);box-shadow:var(--glow-cyan)}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.toolbar-btn.active{background:#20cfdf26;border-color:var(--accent-cyan);color:var(--accent-cyan)}.premium-btn{position:relative;border:1px solid hsl(270 80% 65% / .5)!important}.premium-btn.premium-locked{opacity:.4;cursor:not-allowed}.premium-btn.premium-locked:hover{opacity:.55}.premium-btn:after{content:"PRO";position:absolute;top:3px;right:4px;font-size:7px;font-weight:700;letter-spacing:.5px;line-height:1;color:#a65eed}.dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;font-size:12px;font-weight:500;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;text-align:left;transition:all .15s}.dropdown-item:hover{background:var(--bg-hover);color:var(--text-primary)}.shortcut-item{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;font-size:12px;color:var(--text-secondary)}.shortcut-item kbd{background:var(--bg-tertiary);padding:2px 6px;border-radius:4px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;color:var(--text-primary);margin-right:12px;border:1px solid var(--border-color)}.toolbar-search{height:32px;width:200px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:0 10px;font-size:12px;font-family:JetBrains Mono,monospace;color:var(--text-primary);outline:none;transition:border-color .2s}.toolbar-search::placeholder{color:var(--text-muted)}.toolbar-search:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 2px #20cfdf26}.dropdown-wrapper{position:relative}.dropdown-menu{position:absolute;top:100%;left:0;margin-top:4px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:4px;z-index:50;min-width:160px;box-shadow:0 4px 16px var(--shadow-color);animation:fade-in-up .15s ease-out}.dropdown-label{padding:6px 10px 4px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.dropdown-separator{height:1px;background:var(--border-color);margin:4px 0}.panel-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:1;padding:6px 10px;font-size:11px;font-family:JetBrains Mono,monospace;font-weight:500;border-radius:6px;cursor:pointer;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);transition:all .2s}.panel-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.panel-btn.cyan{border-color:#20cfdf4d;color:var(--accent-cyan);background:#20cfdf1a}.panel-btn.cyan:hover{background:#20cfdf33}.panel-btn.green{border-color:#1abc554d;color:var(--accent-green);background:#1abc551a}.panel-btn.green:hover{background:#1abc5533}.panel-btn.amber{border-color:#f59f0a4d;color:var(--accent-amber);background:#f59f0a1a}.panel-btn.amber:hover{background:#f59f0a33}.panel-btn.red{border-color:#f425254d;color:var(--accent-red);background:#f425251a}.panel-btn.red:hover{background:#f4252533}.panel-btn.small{flex:0;padding:3px 8px;font-size:10px}.panel-close-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:4px;font-size:14px;transition:all .2s}.panel-close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.save-btn{padding:6px 14px;background:var(--accent-cyan);color:var(--bg-primary);border:none;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s}.save-btn:hover{background:#4cd9e6}.save-btn:disabled{opacity:.5;cursor:not-allowed}.discard-btn{padding:6px 14px;background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;font-family:JetBrains Mono,monospace;font-size:12px;cursor:pointer;transition:all .2s}.discard-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.discard-btn:disabled{opacity:.5;cursor:not-allowed}.tech-badge{display:inline-flex;padding:2px 8px;font-size:10px;font-family:JetBrains Mono,monospace;border-radius:4px;background:#20cfdf1a;color:var(--accent-cyan);border:1px solid hsl(185 75% 50% / .3)}.active-badge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;background:#20cfdf26;color:var(--accent-cyan);border:1px solid hsl(185 75% 50% / .3)}.validation-badge{font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:4px}.validation-badge.pass{background:#1abc5526;color:var(--accent-green);border:1px solid hsl(142 76% 42% / .3)}.validation-badge.fail{background:#f4252526;color:var(--accent-red);border:1px solid hsl(0 90% 55% / .3)}.ops-tabs{display:flex;gap:2px;background:var(--bg-tertiary);border-radius:6px;padding:2px}.ops-tab{padding:4px 12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:4px;font-family:JetBrains Mono,monospace;transition:all .2s}.ops-tab.active{background:var(--bg-hover);color:var(--text-primary)}.ops-tab:hover{color:var(--text-primary)}.dropdown-item.disabled{opacity:.4;cursor:default;pointer-events:none}.watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:72px;font-weight:700;color:var(--watermark-color);pointer-events:none;z-index:0;-webkit-user-select:none;user-select:none;letter-spacing:-2px}.environment-tabs{display:flex;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:0 16px;gap:4px;height:48px;align-items:stretch}.env-tab{display:flex;align-items:center;gap:8px;padding:0 20px;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary);transition:all .2s;font-family:JetBrains Mono,monospace}.env-tab:hover{background:var(--bg-hover)}.env-tab.selected{border-bottom-color:var(--env-color);color:var(--text-primary);box-shadow:0 2px 12px color-mix(in srgb,var(--env-color) 20%,transparent)}.env-indicator{width:8px;height:8px;border-radius:50%;background:var(--env-color);opacity:.4;transition:opacity .2s}.env-tab.selected .env-indicator{opacity:1;animation:breathe 3s infinite}.env-label{font-weight:600}.env-meta{font-size:11px;color:var(--text-muted);font-weight:400;margin-left:8px;padding-left:8px;border-left:1px solid var(--border-color)}.component-info-panel{position:absolute;top:16px;left:16px;background:#090e1ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:16px;border-radius:12px;border:1px solid var(--border-color);font-size:12px;color:var(--text-primary);z-index:10;width:280px;box-shadow:0 2px 12px var(--shadow-color)}.node-details-panel{position:absolute;top:16px;left:16px;background:#090e1ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:16px;border-radius:12px;border:1px solid var(--border-color);font-size:12px;color:var(--text-primary);z-index:15;width:300px;max-height:calc(100vh - 200px);overflow-y:auto;box-shadow:0 2px 12px var(--shadow-color)}.node-details-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.node-details-title{font-size:14px;font-weight:600;color:var(--text-primary)}.node-details-type{font-size:10px;color:var(--text-muted);text-transform:uppercase;margin-top:2px}.node-details-section{margin-bottom:12px}.node-details-section-title{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.node-details-path{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-secondary);background:var(--bg-tertiary);padding:6px 8px;border-radius:4px;word-break:break-all;border:1px solid var(--border-light)}.node-details-tech-stack{display:flex;flex-wrap:wrap;gap:4px}.node-details-connections{display:flex;flex-direction:column;gap:4px}.connection-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary)}.connection-item-detailed{padding:8px 10px;background:var(--bg-tertiary);border-radius:6px;margin-bottom:6px;border:1px solid var(--border-light)}.connection-header{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-primary)}.connection-arrow{color:var(--text-muted)}.connection-target{color:var(--text-primary)}.connection-label{font-size:11px;color:var(--text-secondary);margin-top:4px;padding-left:18px;line-height:1.4}.node-details-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color)}.env-badge{display:inline-block;padding:4px 12px;border-radius:20px;color:var(--text-primary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.env-details{padding:10px 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);margin-bottom:12px}.env-detail-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0}.env-detail-label{font-size:10px;color:var(--text-muted);text-transform:uppercase}.env-detail-value{font-size:11px;font-weight:500;color:var(--text-secondary)}.component-list{display:flex;flex-direction:column;gap:6px}.component-list-title{font-weight:600;color:var(--text-muted);text-transform:uppercase;font-size:10px;letter-spacing:1px;margin-bottom:4px}.component-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s;text-align:left;width:100%}.component-item:hover{background:var(--bg-hover);border-color:var(--accent-cyan);transform:translate(2px);box-shadow:var(--glow-cyan)}.component-name{font-weight:600;font-size:12px;color:var(--text-primary)}.component-path{font-size:10px;color:var(--text-muted);font-family:JetBrains Mono,monospace}.git-info{display:flex;align-items:center;gap:8px;margin-top:4px}.git-branch{display:inline-flex;align-items:center;padding:2px 6px;background:#20cfdf1a;border:1px solid hsl(185 75% 50% / .3);border-radius:4px;font-size:10px;font-family:JetBrains Mono,monospace;color:var(--accent-cyan)}.git-hash{display:inline-flex;align-items:center;padding:2px 6px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;font-size:10px;font-family:JetBrains Mono,monospace;color:var(--text-secondary)}.no-git-info{color:var(--text-muted);font-style:italic;text-align:center;padding:12px}.canvas-container{flex:1;position:relative}.react-flow{background:var(--canvas-bg)!important}.react-flow__background{background:var(--canvas-bg)}.react-flow__controls{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 2px 8px var(--shadow-color)}.react-flow__controls-button{background:var(--bg-secondary);border-color:var(--border-color);fill:#fff;color:#fff}.react-flow__controls-button:hover{background:var(--bg-hover);fill:var(--text-primary)}.arch-node{padding:14px 16px;border-radius:12px;font-size:12px;font-weight:500;border:1.5px solid;min-width:130px;text-align:left;box-shadow:0 4px 16px #00000040,inset 0 1px #ffffff0d;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}.arch-node:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}.arch-node:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000059,inset 0 1px #ffffff0d}.arch-node .node-type-icon{position:absolute;top:10px;right:12px;font-size:16px;opacity:.35;line-height:1}.arch-node .node-content{flex:1;min-width:0}.arch-node .label{font-weight:700;font-size:13px;margin-bottom:2px;letter-spacing:-.2px;padding-right:20px}.arch-node .sublabel{font-size:10px;opacity:.7}.arch-node .node-desc{font-size:9px;opacity:.5;line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.arch-node .node-tech-row{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}.arch-node .node-tech-pill{font-size:8px;font-weight:600;padding:1px 6px;border-radius:3px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);opacity:.7;letter-spacing:.2px;text-transform:uppercase}.arch-node.presentation{background:linear-gradient(145deg,#122436,#152e47);border-color:#2680d999;color:#c6d9ec}.arch-node.presentation:hover{border-color:#3c8cdd;box-shadow:0 0 24px #2680d933,0 8px 24px #00000059}.arch-node.presentation .node-tech-pill{border-color:#2680d940;color:#99bfe6}.arch-node.application{background:linear-gradient(145deg,#322415,#432e19);border-color:#e88c3099;color:#ecd9c6}.arch-node.application:hover{border-color:#eb9947;box-shadow:0 0 24px #e88c3033,0 8px 24px #00000059}.arch-node.application .node-tech-pill{border-color:#e88c3040;color:#e6bf99}.arch-node.data{background:linear-gradient(145deg,#14291b,#183923);border-color:#2eb85c99;color:#c9e8d4}.arch-node.data:hover{border-color:#3c6;box-shadow:0 0 24px #2eb85c33,0 8px 24px #00000059}.arch-node.data .node-tech-pill{border-color:#2eb85c40;color:#9fdfb5}.arch-node.external{background:linear-gradient(145deg,#27192e,#331e3e);border-color:#9f53c699;color:#ddcde4}.arch-node.external:hover{border-color:#a6c;box-shadow:0 0 24px #9f53c633,0 8px 24px #00000059}.arch-node.external .node-tech-pill{border-color:#9f53c640;color:#c8a6d9}.arch-node.deployment{background:linear-gradient(145deg,#2e1919,#3e1e1e);border-color:#c339;color:#e4cdcd}.arch-node.deployment:hover{border-color:#d14747;box-shadow:0 0 24px #c333,0 8px 24px #00000059}.arch-node.deployment .node-tech-pill{border-color:#cc333340;color:#df9f9f}.react-flow__resize-control{border-radius:2px!important}.react-flow__resize-control.handle{width:8px!important;height:8px!important}.react-flow__node.selected .arch-node{box-shadow:0 0 0 2px #20cfdf66,0 4px 16px #0006}.arch-node.active{animation:pulse-border 2s infinite}@keyframes pulse-border{0%,to{box-shadow:0 0 #1abc5566}50%{box-shadow:0 0 0 8px #1abc5500}}.arch-node.highlighted{animation:highlight-glow 1.5s ease-in-out;box-shadow:0 0 20px #20cfdf99,0 0 40px #20cfdf4d;transform:scale(1.05);z-index:100}@keyframes highlight-glow{0%{box-shadow:0 0 #20cfdf00;transform:scale(1)}20%{box-shadow:0 0 30px #20cfdfcc,0 0 60px #20cfdf66;transform:scale(1.08)}to{box-shadow:0 0 20px #20cfdf99,0 0 40px #20cfdf4d;transform:scale(1.05)}}.arch-node.connected{box-shadow:0 0 0 3px var(--accent-green),0 4px 16px #1abc554d}.arch-node.dimmed{opacity:.3}.arch-node.search-match{box-shadow:0 0 0 3px var(--accent-amber),0 4px 16px #f59f0a66}.arch-node.search-no-match{opacity:.2}.node-actions-panel{position:absolute;top:60px;right:16px;background:#090e1ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:10px;padding:12px;box-shadow:0 4px 12px var(--shadow-color);z-index:10;min-width:180px}.node-actions-title{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.node-actions-buttons{display:flex;gap:8px;margin-bottom:8px}.node-actions-hint{font-size:10px;color:var(--text-muted);text-align:center;padding-top:8px;border-top:1px solid var(--border-color)}.lock-icon{margin-right:6px}.arch-node.locked{opacity:.7;cursor:not-allowed}.arch-node.locked:after{content:"🔒";position:absolute;top:4px;right:4px;font-size:10px}.hidden-nodes-panel{position:absolute;bottom:60px;right:16px;background:#090e1ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:10px;padding:12px;box-shadow:0 4px 12px var(--shadow-color);z-index:10;min-width:200px;max-width:280px;max-height:300px;overflow-y:auto}.hidden-nodes-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.hidden-nodes-list{display:flex;flex-direction:column;gap:6px}.hidden-node-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:var(--bg-tertiary);border-radius:6px}.hidden-node-name{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.status-bar{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:10px 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:12px;color:var(--text-secondary)}.status-left{display:flex;align-items:center;gap:16px;justify-self:start}.status-center{display:flex;align-items:center;justify-self:center}.status-indicator{display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-green);animation:breathe 2s infinite}.status-dot.disconnected{background:var(--accent-red);animation:none}@keyframes breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}.status-right{display:flex;align-items:center;gap:20px;justify-self:end}.layer-dropdown-item{gap:10px!important;transition:opacity .2s}.layer-dropdown-item.hidden-layer{opacity:.4}.layer-toggle-indicator{margin-left:auto;font-size:10px;color:var(--text-muted)}.legend-color{width:16px;height:16px;border-radius:4px;border:2px solid}.legend-color.presentation{background:#132639;border-color:#2680d9}.legend-color.application{background:#362617;border-color:#e88c30}.legend-color.data{background:#162d1d;border-color:#2eb85c}.legend-color.external{background:#2a1b32;border-color:#9f53c6}.legend-color.deployment{background:#321b1b;border-color:#c33}.loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary);font-size:14px}.loading-spinner{width:24px;height:24px;border:3px solid var(--border-color);border-top-color:var(--accent-cyan);border-radius:50%;animation:spin 1s linear infinite;margin-right:12px}@keyframes spin{to{transform:rotate(360deg)}}.agent-panel{position:absolute;bottom:60px;left:16px;background:#090e1ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:12px 16px;border-radius:10px;border:1px solid var(--border-color);font-size:11px;color:var(--text-primary);z-index:10;max-width:300px;box-shadow:0 2px 12px var(--shadow-color)}.agent-panel-title{font-weight:600;margin-bottom:8px;color:var(--text-muted);text-transform:uppercase;font-size:10px}.agent-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border-color)}.agent-item:last-child{border-bottom:none}.agent-dot{width:6px;height:6px;border-radius:50%}.agent-dot.active{background:var(--accent-green);animation:breathe 1.5s infinite}.agent-name{font-weight:500;color:var(--text-primary)}.agent-target{color:var(--text-muted);margin-left:auto}.flow-dropdown{min-width:240px}.flow-dot-inline{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.toolbar-btn.has-active-flow{background:#20cfdf1a;border-color:#20cfdf4d;color:var(--accent-cyan);gap:6px}.toolbar-btn.has-hidden{color:var(--accent-amber)}.flow-dropdown-item{gap:10px!important}.flow-dropdown-item.active{background:#20cfdf1a!important;color:var(--accent-cyan)!important}.flow-dropdown-name{flex:1}.flow-clear{color:var(--accent-red)!important}.flow-progress-bar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#090e1af2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:12px;padding:10px 16px;z-index:15;max-width:90vw;box-shadow:0 4px 20px var(--shadow-color),var(--glow-cyan);animation:slide-up .3s ease-out}.flow-progress-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;animation:breathe 2s infinite}.flow-progress-name{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;flex-shrink:0}.flow-progress-steps{display:flex;gap:4px;overflow-x:auto;max-width:500px}.flow-progress-step{padding:4px 8px;background:var(--bg-tertiary);border-radius:4px;font-size:10px;border-left:2px solid transparent;transition:all .3s;opacity:.4;color:var(--text-secondary);white-space:nowrap;flex-shrink:0}.flow-progress-step.active{opacity:1;background:var(--bg-hover);color:var(--text-primary)}.flow-progress-step.current{font-weight:600;box-shadow:0 1px 4px var(--shadow-color)}.flow-progress-controls{display:flex;gap:4px;flex-shrink:0;margin-left:4px}.flow-progress-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);background:var(--bg-tertiary);border-radius:6px;cursor:pointer;font-size:12px;color:var(--text-secondary);transition:all .2s}.flow-progress-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.flow-progress-btn.stop{border-color:#f425254d;color:var(--accent-red)}.flow-progress-btn.stop:hover{background:#f4252526}.flow-hud-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#070a13d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:flowHudFadeIn .2s ease-out}@keyframes flowHudFadeIn{0%{opacity:0}to{opacity:1}}.flow-hud-panel{width:90vw;height:85vh;max-width:1400px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 60px #20cfdf14,0 8px 32px #0006}.flow-hud-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-color);flex-shrink:0}.flow-hud-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:.3px}.flow-hud-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.flow-hud-controls{display:flex;align-items:center;gap:6px}.flow-hud-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s}.flow-hud-btn:hover{background:var(--bg-hover);border-color:var(--accent-cyan)}.flow-hud-close{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-muted);width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;transition:all .15s}.flow-hud-close:hover{background:#f4252526;border-color:var(--accent-red);color:var(--accent-red)}.flow-hud-description{padding:10px 20px;font-size:12px;color:var(--text-muted);border-bottom:1px solid var(--border-color);flex-shrink:0}.flow-hud-canvas{flex:1;min-height:0;position:relative}.flow-hud-canvas .react-flow__controls{bottom:10px;left:10px}.flow-hud-steps{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--border-color);overflow-x:auto;flex-shrink:0}.flow-hud-step{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:11px;color:var(--text-muted);background:var(--bg-tertiary);border:1px solid var(--border-color);white-space:nowrap;transition:all .3s}.flow-hud-step.active{color:var(--text-primary);border-color:currentColor}.flow-hud-step.current{box-shadow:0 0 12px currentColor}.flow-hud-step-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;color:var(--text-primary);background:var(--border-color);flex-shrink:0;transition:background .3s}.git-repo-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#2a1b32;border:1px solid hsl(280 50% 55% / .3);border-radius:4px;font-size:11px;font-family:JetBrains Mono,monospace;font-weight:500;color:#bf8cd9;text-decoration:none;transition:all .2s}.git-repo-badge:hover{background:#382442;border-color:#9f53c680}.save-panel{position:fixed;bottom:55px;left:50%;transform:translate(-50%);background:#20cfdf26;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text-primary);padding:12px 20px;border-radius:10px;border:1px solid var(--accent-cyan);display:flex;gap:16px;align-items:center;box-shadow:var(--glow-cyan);z-index:100;animation:slide-up .3s ease-out}@keyframes slide-up{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.save-panel-text{font-size:13px;font-weight:500}.react-flow__node.selected{outline:2px solid var(--accent-cyan);outline-offset:2px}.react-flow__handle{width:10px;height:10px;background:var(--accent-cyan);border:2px solid var(--bg-primary);opacity:0;transition:opacity .2s}.react-flow__node:hover .react-flow__handle,.react-flow__node.selected .react-flow__handle{opacity:1}.react-flow__handle:hover{transform:scale(1.2)}.clipboard-indicator{position:fixed;bottom:120px;left:50%;transform:translate(-50%);background:var(--bg-hover);color:var(--text-primary);padding:8px 16px;border-radius:6px;font-size:12px;border:1px solid var(--border-color);z-index:100;animation:fade-in-out 2s ease-in-out;pointer-events:none}@keyframes fade-in-out{0%,to{opacity:0;transform:translate(-50%) translateY(10px)}20%,80%{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scan-line{0%{top:-100%}to{top:200%}}.stats-overlay{position:absolute;bottom:60px;left:60px;background:var(--bg-secondary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:16px;border-radius:12px;border:1px solid var(--border-color);z-index:10;min-width:240px;box-shadow:var(--glow-cyan)}.stats-overlay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.stats-overlay-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--accent-cyan)}.stats-scan-info{display:flex;flex-wrap:wrap;gap:6px 12px;padding:8px 0;margin-bottom:8px;border-bottom:1px solid var(--border-color);font-size:11px;color:var(--text-muted)}.scan-info-item{white-space:nowrap}.scan-info-item:not(:last-child):after{content:"|";margin-left:12px;opacity:.3}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:10px;background:var(--bg-tertiary);border-radius:8px;border:1px solid var(--border-color)}.stat-value{font-size:20px;font-weight:700;color:var(--text-primary)}.stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-top:2px}.stat-card.highlight{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.validation-panel{position:absolute;top:16px;right:290px;background:var(--bg-secondary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:16px;border-radius:12px;border:1px solid var(--border-color);z-index:10;width:280px;max-height:calc(100vh - 200px);overflow-y:auto;box-shadow:0 2px 12px var(--shadow-color)}.validation-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.validation-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.violation-item{padding:10px;background:var(--bg-tertiary);border-radius:8px;margin-bottom:6px;border-left:3px solid;cursor:pointer;transition:all .2s}.violation-item:hover{background:var(--bg-hover)}.violation-item.error{border-left-color:var(--accent-red)}.violation-item.warn{border-left-color:var(--accent-amber)}.violation-rule{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}.violation-message{font-size:11px;color:var(--text-secondary)}.ops-panel{position:absolute;top:16px;right:16px;background:var(--bg-secondary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;border:1px solid var(--border-color);z-index:10;width:280px;max-height:calc(100vh - 200px);overflow-y:auto;box-shadow:0 2px 12px var(--shadow-color)}.ops-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 0}.ops-section{padding:12px}.ops-empty{color:var(--text-muted);font-size:11px;text-align:center;padding:20px 12px}.ops-hint{display:block;margin-top:6px;font-family:JetBrains Mono,monospace;font-size:10px;color:var(--accent-cyan);opacity:.7}.patrol-sparkline-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.patrol-sparkline{display:flex;gap:2px;flex:1}.spark-dot{width:8px;height:16px;border-radius:2px;flex-shrink:0;transition:opacity .15s}.spark-dot.healthy{background:var(--accent-green);opacity:.7}.spark-dot.violation{background:var(--accent-red);opacity:.8}.spark-dot:hover{opacity:1}.patrol-health-pct{font-size:12px;font-weight:700;color:var(--text-primary);min-width:32px;text-align:right}.patrol-status-card{padding:10px;background:var(--bg-tertiary);border-radius:8px;border:1px solid var(--border-color);margin-bottom:8px}.patrol-status-card.violation{border-color:#f425254d}.patrol-status-card.healthy{border-color:#1abc554d}.patrol-status-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.patrol-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:10px}.patrol-badge.healthy{background:#1abc5526;color:var(--accent-green)}.patrol-badge.violation{background:#f4252526;color:var(--accent-red)}.patrol-time{font-size:10px;color:var(--text-muted)}.patrol-counts{display:flex;gap:8px}.patrol-count{font-size:10px}.patrol-count.error{color:var(--accent-red)}.patrol-count.warn{color:var(--accent-amber)}.patrol-count.ok{color:var(--accent-green)}.patrol-violations{margin-bottom:8px}.patrol-violations-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:4px}.patrol-violation-item{padding:6px 8px;background:var(--bg-tertiary);border-radius:4px;margin-bottom:3px;border-left:2px solid;display:flex;gap:6px;align-items:baseline}.patrol-violation-item.error{border-left-color:var(--accent-red)}.patrol-violation-item.warn{border-left-color:var(--accent-amber)}.patrol-violation-item.resolved{border-left-color:var(--accent-green)}.patrol-v-rule{font-size:9px;font-weight:600;color:var(--text-muted);flex-shrink:0}.patrol-v-msg{font-size:10px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.patrol-summary{font-size:10px;color:var(--text-muted);text-align:center;padding-top:4px}.wf-item{border:1px solid var(--border-color);border-radius:8px;margin-bottom:6px;overflow:hidden}.wf-header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;cursor:pointer;transition:background .15s}.wf-header:hover{background:var(--bg-hover)}.wf-header-left{display:flex;align-items:center;gap:6px;overflow:hidden}.wf-expand{font-size:11px;color:var(--text-muted);width:12px;flex-shrink:0}.wf-name{font-size:11px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wf-tag{font-size:8px;color:var(--text-muted);background:var(--bg-tertiary);padding:1px 5px;border-radius:3px;flex-shrink:0}.wf-status{font-size:9px;font-weight:600;flex-shrink:0}.wf-status.completed{color:var(--accent-green)}.wf-status.running{color:var(--accent-amber)}.wf-status.failed{color:var(--accent-red)}.wf-detail{padding:0 10px 10px;border-top:1px solid var(--border-color)}.wf-desc{font-size:10px;color:var(--text-muted);padding:8px 0 6px}.wf-steps{display:flex;flex-direction:column;gap:3px}.wf-step{display:flex;align-items:center;gap:6px;font-size:10px;padding:3px 0}.wf-step-icon{font-size:10px;width:14px;text-align:center}.wf-step.completed .wf-step-icon{color:var(--accent-green)}.wf-step.running .wf-step-icon{color:var(--accent-amber)}.wf-step.failed .wf-step-icon{color:var(--accent-red)}.wf-step.pending .wf-step-icon{color:var(--text-muted)}.wf-step-id{color:var(--text-secondary)}.wf-step.completed .wf-step-id{color:var(--text-muted)}.wf-progress{display:flex;align-items:center;gap:8px;margin-top:6px}.wf-progress-bar{flex:1;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.wf-progress-fill{height:100%;background:var(--accent-cyan);border-radius:2px;transition:width .3s ease}.wf-progress-label{font-size:10px;font-weight:600;color:var(--text-muted);min-width:28px;text-align:right}.wf-steps-preview{font-size:10px;color:var(--text-muted);font-family:JetBrains Mono,monospace;padding:4px 0}.wf-run-hint{font-size:9px;font-family:JetBrains Mono,monospace;color:var(--accent-cyan);opacity:.6;margin-top:6px}.wf-actions{display:flex;gap:6px;margin-top:8px}.wf-actions .panel-btn{flex:1}.wf-error{font-size:11px;color:var(--accent-red);background:#f425251a;border:1px solid hsl(0 90% 55% / .25);border-radius:6px;padding:6px 10px;margin-bottom:8px}.patrol-actions{display:flex;gap:6px;margin-bottom:10px}.patrol-actions .panel-btn{flex:1}.chat-panel{position:absolute;bottom:16px;right:16px;width:350px;height:400px;background:#090e1af2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;z-index:20;box-shadow:0 4px 24px var(--shadow-color),var(--glow-cyan);animation:slide-up-chat .2s ease-out}@keyframes slide-up-chat{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border-color);flex-shrink:0}.chat-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-cyan)}.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:0}.chat-empty{color:var(--text-muted);font-size:12px;text-align:center;padding:40px 20px}.chat-message{max-width:85%;padding:8px 12px;border-radius:10px;font-size:12px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.chat-message.user{align-self:flex-end;background:#20cfdf26;border:1px solid hsl(185 75% 50% / .25);color:var(--text-primary)}.chat-message.assistant{align-self:flex-start;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary)}.chat-message-content{font-family:JetBrains Mono,monospace}.chat-cursor{display:inline-block;width:6px;height:14px;background:var(--accent-cyan);margin-left:2px;vertical-align:text-bottom;animation:chat-blink .8s step-end infinite}@keyframes chat-blink{0%,to{opacity:1}50%{opacity:0}}.chat-input-bar{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--border-color);flex-shrink:0}.chat-input{flex:1;height:32px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:0 10px;font-size:12px;font-family:JetBrains Mono,monospace;color:var(--text-primary);outline:none;transition:border-color .2s}.chat-input::placeholder{color:var(--text-muted)}.chat-input:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 2px #20cfdf26}.chat-send-btn,.chat-stop-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:1px solid var(--border-color);cursor:pointer;font-size:14px;font-weight:700;transition:all .2s;flex-shrink:0}.chat-send-btn{background:#20cfdf26;color:var(--accent-cyan);border-color:#20cfdf4d}.chat-send-btn:hover:not(:disabled){background:#20cfdf40}.chat-send-btn:disabled{opacity:.3;cursor:not-allowed}.chat-stop-btn{background:#f4252526;color:var(--accent-red);border-color:#f425254d;font-size:10px}.chat-stop-btn:hover{background:#f4252540}[data-theme=light] .arch-node{box-shadow:0 2px 12px #00000014,inset 0 1px #fff9}[data-theme=light] .arch-node:hover{box-shadow:0 4px 20px #0000001f,inset 0 1px #fff9}[data-theme=light] .arch-node:before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}[data-theme=light] .arch-node .node-tech-pill{background:#0000000a;border-color:#0000001a}[data-theme=light] .arch-node.presentation{background:linear-gradient(145deg,#e9f0f7,#d7e6f4);border-color:#428cd780;color:#19334d}[data-theme=light] .arch-node.presentation:hover{border-color:#428cd7;box-shadow:0 0 20px #428cd726,0 4px 20px #0000001f}[data-theme=light] .arch-node.presentation .node-tech-pill{color:#2e669e}[data-theme=light] .arch-node.application{background:linear-gradient(145deg,#f7f0e8,#f5e6d6);border-color:#df802080;color:#452e17}[data-theme=light] .arch-node.application:hover{border-color:#df8020;box-shadow:0 0 20px #df802026,0 4px 20px #0000001f}[data-theme=light] .arch-node.application .node-tech-pill{color:#8f5924}[data-theme=light] .arch-node.data{background:linear-gradient(145deg,#e6f4eb,#d5f1de);border-color:#2e9e5380;color:#1c4028}[data-theme=light] .arch-node.data:hover{border-color:#2e9e53;box-shadow:0 0 20px #2e9e5326,0 4px 20px #0000001f}[data-theme=light] .arch-node.data .node-tech-pill{color:#2a6f41}[data-theme=light] .arch-node.external{background:linear-gradient(145deg,#f1eaf5,#e9daf1);border-color:#9540bf80;color:#392145}[data-theme=light] .arch-node.external:hover{border-color:#9540bf;box-shadow:0 0 20px #9540bf26,0 4px 20px #0000001f}[data-theme=light] .arch-node.external .node-tech-pill{color:#743d8f}[data-theme=light] .arch-node.deployment{background:linear-gradient(145deg,#f7eded,#f4dddd);border-color:#be373780;color:#452121}[data-theme=light] .arch-node.deployment:hover{border-color:#be3737;box-shadow:0 0 20px #be373726,0 4px 20px #0000001f}[data-theme=light] .arch-node.deployment .node-tech-pill{color:#813131}[data-theme=light] .legend-color.presentation{background:#d9e6f2;border-color:#428cd7}[data-theme=light] .legend-color.application{background:#f2e6d9;border-color:#df8020}[data-theme=light] .legend-color.data{background:#dbf0e2;border-color:#2e9e53}[data-theme=light] .legend-color.external{background:#e8ddee;border-color:#9540bf}[data-theme=light] .legend-color.deployment{background:#f0dbdb;border-color:#be3737}[data-theme=light] .branding-header{background:#f6f7f9eb;border-bottom-color:#1295a126;box-shadow:0 1px 12px #1295a10f}[data-theme=light] .component-info-panel,[data-theme=light] .node-details-panel,[data-theme=light] .node-actions-panel,[data-theme=light] .hidden-nodes-panel,[data-theme=light] .agent-panel,[data-theme=light] .chat-panel{background:#f6f7f9eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}[data-theme=light] .flow-progress-bar{background:#f6f7f9f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}[data-theme=light] .save-panel{background:#1295a11a}[data-theme=light] ::-webkit-scrollbar-track{background:var(--bg-secondary)}[data-theme=light] ::-webkit-scrollbar-thumb{background:#bec4cf}[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:#a1a9ba}[data-theme=light] .git-repo-badge{background:#efe7f3;border-color:#9540bf4d;color:#739}[data-theme=light] .git-repo-badge:hover{background:#e4d6eb;border-color:#9540bf80}[data-theme=light] .toolbar-btn.active{background:#1295a11a}[data-theme=light] .flow-progress-btn.stop{border-color:#d4111140}[data-theme=light] .flow-progress-btn.stop:hover{background:#d411111a}[data-theme=light] .react-flow__controls-button{background:var(--bg-secondary);border-color:var(--border-color);fill:var(--text-primary);color:var(--text-primary)}[data-theme=light] .react-flow__controls-button:hover{background:var(--bg-hover)}[data-theme=light] .react-flow__handle{border-color:var(--bg-primary)}[data-theme=light] .react-flow__node.selected .arch-node{box-shadow:0 0 0 2px #1295a159,0 4px 12px #0000001f}
|
|
Binary file
|
package/ui/dist/index.html
CHANGED
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>ArchByte</title>
|
|
7
|
-
<
|
|
8
|
-
<
|
|
7
|
+
<link rel="icon" href="/favicon.ico">
|
|
8
|
+
<script type="module" crossorigin src="/assets/index-D-GWktm8.js"></script>
|
|
9
|
+
<link rel="stylesheet" crossorigin href="/assets/index-DMe9--0X.css">
|
|
9
10
|
</head>
|
|
10
11
|
<body>
|
|
11
12
|
<script>try{if(localStorage.getItem('archbyte-theme')==='light')document.documentElement.setAttribute('data-theme','light')}catch(e){}</script>
|
package/ui/dist/logo.png
ADDED
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap";.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgba(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgba(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__arrowhead polyline{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.react-flow__arrowhead polyline.arrowclosed{fill:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__pane.selection .react-flow__panel{pointer-events:none}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.top.center,.react-flow__panel.bottom.center{left:50%;transform:translate(-15px) translate(-50%)}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.left.center,.react-flow__panel.right.center{top:50%;transform:translateY(-15px) translateY(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__controls.horizontal .react-flow__controls-button{border-bottom:none;border-right:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) )}.react-flow__controls.horizontal .react-flow__controls-button:last-child{border-right:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:5px;height:5px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));translate:-50% -50%}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}:root{--bg-primary: hsl(222 47% 5%);--bg-secondary: hsl(222 47% 7%);--bg-tertiary: hsl(222 47% 10%);--bg-hover: hsl(222 47% 12%);--text-primary: hsl(210 40% 96%);--text-secondary: hsl(215 20% 55%);--text-muted: hsl(215 15% 40%);--border-color: hsl(220 25% 15%);--border-light: hsl(220 20% 12%);--shadow-color: rgba(0, 0, 0, .3);--canvas-bg: hsl(222 47% 5%);--canvas-dots: hsl(220 25% 15%);--watermark-color: rgba(255, 255, 255, .02);--accent-cyan: hsl(185 75% 50%);--accent-green: hsl(142 76% 42%);--accent-amber: hsl(38 92% 50%);--accent-red: hsl(0 90% 55%);--glow-cyan: 0 0 20px hsl(185 75% 50% / .15);--glow-green: 0 0 12px hsl(142 76% 42% / .3)}[data-theme=light]{--bg-primary: hsl(220 20% 97%);--bg-secondary: hsl(220 18% 94%);--bg-tertiary: hsl(220 16% 90%);--bg-hover: hsl(220 14% 86%);--text-primary: hsl(220 30% 12%);--text-secondary: hsl(220 15% 40%);--text-muted: hsl(220 10% 58%);--border-color: hsl(220 15% 82%);--border-light: hsl(220 12% 88%);--shadow-color: rgba(0, 0, 0, .08);--canvas-bg: hsl(220 20% 97%);--canvas-dots: hsl(220 15% 82%);--watermark-color: rgba(0, 0, 0, .02);--accent-cyan: hsl(185 80% 35%);--accent-green: hsl(142 72% 32%);--accent-amber: hsl(38 90% 42%);--accent-red: hsl(0 85% 45%);--glow-cyan: 0 0 12px hsl(185 80% 35% / .12);--glow-green: 0 0 8px hsl(142 72% 32% / .2)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:JetBrains Mono,monospace}.app{width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg-primary)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#303a50}.branding-header{position:relative;z-index:10;background:#080c16d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid hsl(185 75% 50% / .1);box-shadow:0 1px 12px #20cfdf0d}.archbyte-brand{display:flex;align-items:center;gap:10px}.archbyte-logo{font-size:20px}.archbyte-name{font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.archbyte-tagline{font-size:13px;color:var(--text-muted);padding-left:14px;margin-left:4px;border-left:1px solid var(--border-color)}.branding-account{display:flex;align-items:center;gap:10px}.account-tier-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;letter-spacing:.3px;text-transform:uppercase}.account-tier-badge.premium{background:#672eb8;color:#fff}.account-tier-badge.free{background:#182543;color:var(--text-muted)}.account-email{font-size:12px;color:var(--text-muted);position:relative}.account-pro-tag{margin-left:6px;font-size:9px;font-weight:700;letter-spacing:.5px;padding:1px 4px;border-radius:3px;background:#a65eed26;color:#a65eed;border:1px solid hsl(270 80% 65% / .4);vertical-align:middle}.project-info-wrapper{position:relative;display:inline-flex;align-items:center}.project-info-trigger{background:none;border:1px solid transparent;color:var(--text-secondary);font-family:JetBrains Mono,monospace;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;margin-left:10px;padding:3px 10px 3px 14px;border-left:1px solid var(--border-color);border-radius:0}.project-info-trigger:hover{color:var(--text-primary);background:var(--bg-tertiary)}.project-info-popup{position:absolute;top:calc(100% + 8px);left:0;background:#090e1af2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:12px;padding:16px;width:340px;z-index:100;box-shadow:0 8px 32px var(--shadow-color);animation:popupFadeIn .15s ease-out}@keyframes popupFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.project-info-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.project-info-name{font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.project-info-lang{font-size:10px;font-weight:600;color:#4cd9e6;background:#20cfdf1f;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px}.project-info-desc{font-size:12px;color:var(--text-secondary);line-height:1.5;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--border-color)}.project-info-stats{display:flex;gap:6px;flex-wrap:wrap}.project-info-stat{display:flex;flex-direction:column;align-items:center;background:var(--bg-tertiary);padding:8px 12px;border-radius:8px;min-width:56px;flex:1}.project-info-stat-value{font-size:16px;font-weight:700;color:var(--text-primary);font-family:JetBrains Mono,monospace}.project-info-stat-label{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.project-info-badge{margin-top:10px;font-size:10px;font-weight:600;color:#f6c155;background:#f2a60d1a;padding:3px 10px;border-radius:10px;display:inline-block}.project-info-vscode{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;color:#75b3f0;background:#1980e61a;border:1px solid hsl(210 80% 50% / .2);text-decoration:none;cursor:pointer;transition:all .2s}.project-info-vscode:hover{background:#1980e633;border-color:#1980e666;color:#a3ccf5}.project-info-vscode svg{flex-shrink:0}[data-theme=light] .project-info-popup{background:#f9fafbf5}[data-theme=light] .project-info-vscode{color:#1466b8;background:#1980e614;border-color:#1980e633}[data-theme=light] .project-info-vscode:hover{background:#1980e626;border-color:#1980e659;color:#0f4d8a}.brand-attribution{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);text-decoration:none;transition:color .2s}.brand-attribution:hover{color:var(--text-primary)}.brand-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid hsl(185 75% 50% / .3);transition:border-color .2s,box-shadow .2s}.brand-attribution:hover .brand-avatar{border-color:var(--accent-cyan);box-shadow:0 0 12px #20cfdf4d}.brand-attribution-link{color:var(--accent-cyan);font-weight:600}.brand-attribution:hover .brand-attribution-link{color:#63dee9}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:16px}.toolbar-right{gap:8px}.toolbar-right .dropdown-menu{left:auto;right:0}.toolbar-section{display:flex;flex-direction:column;gap:3px;padding-right:12px;border-right:1px solid hsl(222 30% 25%)}.toolbar-section:last-child{padding-right:0;border-right:none}.toolbar-section-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);text-align:center;-webkit-user-select:none;user-select:none}.toolbar-section-items,.toolbar-group{display:flex;align-items:center;gap:6px}.toolbar-divider{width:1px;height:24px;background:var(--border-color);margin:0 8px}.toolbar-btn-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;font-size:15px;font-weight:600;font-family:system-ui,sans-serif;line-height:1;text-align:center;color:var(--text-secondary);cursor:pointer;transition:all .2s}.toolbar-btn-icon:hover{background:var(--bg-hover);color:var(--text-primary);box-shadow:var(--glow-cyan)}.toolbar-btn-icon:disabled{opacity:.5;cursor:not-allowed}.toolbar-error-btn{background:#ef444426!important;border-color:#ef444466!important;color:#ef4444!important;font-size:11px;animation:pulse-error 2s ease-in-out infinite}.toolbar-error-btn:hover{background:#ef444440!important}@keyframes pulse-error{0%,to{opacity:1}50%{opacity:.7}}.toolbar-btn{display:flex;align-items:center;gap:4px;height:32px;padding:0 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s}.toolbar-btn:hover{background:var(--bg-hover);color:var(--text-primary);box-shadow:var(--glow-cyan)}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.toolbar-btn.active{background:#20cfdf26;border-color:var(--accent-cyan);color:var(--accent-cyan)}.premium-btn{position:relative;border:1px solid hsl(270 80% 65% / .5)!important}.premium-btn.premium-locked{opacity:.4;cursor:not-allowed}.premium-btn.premium-locked:hover{opacity:.55}.premium-btn:after{content:"PRO";position:absolute;top:3px;right:4px;font-size:7px;font-weight:700;letter-spacing:.5px;line-height:1;color:#a65eed}.dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;font-size:12px;font-weight:500;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;text-align:left;transition:all .15s}.dropdown-item:hover{background:var(--bg-hover);color:var(--text-primary)}.shortcut-item{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;font-size:12px;color:var(--text-secondary)}.shortcut-item kbd{background:var(--bg-tertiary);padding:2px 6px;border-radius:4px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;color:var(--text-primary);margin-right:12px;border:1px solid var(--border-color)}.toolbar-search{height:32px;width:200px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:0 10px;font-size:12px;font-family:JetBrains Mono,monospace;color:var(--text-primary);outline:none;transition:border-color .2s}.toolbar-search::placeholder{color:var(--text-muted)}.toolbar-search:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 2px #20cfdf26}.dropdown-wrapper{position:relative}.dropdown-menu{position:absolute;top:100%;left:0;margin-top:4px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:4px;z-index:50;min-width:160px;box-shadow:0 4px 16px var(--shadow-color);animation:fade-in-up .15s ease-out}.dropdown-label{padding:6px 10px 4px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.dropdown-separator{height:1px;background:var(--border-color);margin:4px 0}.panel-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:1;padding:6px 10px;font-size:11px;font-family:JetBrains Mono,monospace;font-weight:500;border-radius:6px;cursor:pointer;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);transition:all .2s}.panel-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.panel-btn.cyan{border-color:#20cfdf4d;color:var(--accent-cyan);background:#20cfdf1a}.panel-btn.cyan:hover{background:#20cfdf33}.panel-btn.green{border-color:#1abc554d;color:var(--accent-green);background:#1abc551a}.panel-btn.green:hover{background:#1abc5533}.panel-btn.amber{border-color:#f59f0a4d;color:var(--accent-amber);background:#f59f0a1a}.panel-btn.amber:hover{background:#f59f0a33}.panel-btn.red{border-color:#f425254d;color:var(--accent-red);background:#f425251a}.panel-btn.red:hover{background:#f4252533}.panel-btn.small{flex:0;padding:3px 8px;font-size:10px}.panel-close-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:4px;font-size:14px;transition:all .2s}.panel-close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.save-btn{padding:6px 14px;background:var(--accent-cyan);color:var(--bg-primary);border:none;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s}.save-btn:hover{background:#4cd9e6}.save-btn:disabled{opacity:.5;cursor:not-allowed}.discard-btn{padding:6px 14px;background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;font-family:JetBrains Mono,monospace;font-size:12px;cursor:pointer;transition:all .2s}.discard-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.discard-btn:disabled{opacity:.5;cursor:not-allowed}.tech-badge{display:inline-flex;padding:2px 8px;font-size:10px;font-family:JetBrains Mono,monospace;border-radius:4px;background:#20cfdf1a;color:var(--accent-cyan);border:1px solid hsl(185 75% 50% / .3)}.active-badge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;background:#20cfdf26;color:var(--accent-cyan);border:1px solid hsl(185 75% 50% / .3)}.validation-badge{font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:4px}.validation-badge.pass{background:#1abc5526;color:var(--accent-green);border:1px solid hsl(142 76% 42% / .3)}.validation-badge.fail{background:#f4252526;color:var(--accent-red);border:1px solid hsl(0 90% 55% / .3)}.ops-tabs{display:flex;gap:2px;background:var(--bg-tertiary);border-radius:6px;padding:2px}.ops-tab{padding:4px 12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:4px;font-family:JetBrains Mono,monospace;transition:all .2s}.ops-tab.active{background:var(--bg-hover);color:var(--text-primary)}.ops-tab:hover{color:var(--text-primary)}.dropdown-item.disabled{opacity:.4;cursor:default;pointer-events:none}.watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:72px;font-weight:700;color:var(--watermark-color);pointer-events:none;z-index:0;-webkit-user-select:none;user-select:none;letter-spacing:-2px}.environment-tabs{display:flex;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:0 16px;gap:4px;height:48px;align-items:stretch}.env-tab{display:flex;align-items:center;gap:8px;padding:0 20px;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary);transition:all .2s;font-family:JetBrains Mono,monospace}.env-tab:hover{background:var(--bg-hover)}.env-tab.selected{border-bottom-color:var(--env-color);color:var(--text-primary);box-shadow:0 2px 12px color-mix(in srgb,var(--env-color) 20%,transparent)}.env-indicator{width:8px;height:8px;border-radius:50%;background:var(--env-color);opacity:.4;transition:opacity .2s}.env-tab.selected .env-indicator{opacity:1;animation:breathe 3s infinite}.env-label{font-weight:600}.env-meta{font-size:11px;color:var(--text-muted);font-weight:400;margin-left:8px;padding-left:8px;border-left:1px solid var(--border-color)}.component-info-panel{position:absolute;top:16px;left:16px;background:#090e1ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:16px;border-radius:12px;border:1px solid var(--border-color);font-size:12px;color:var(--text-primary);z-index:10;width:280px;box-shadow:0 2px 12px var(--shadow-color)}.node-details-panel{position:absolute;top:16px;left:16px;background:#090e1ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:16px;border-radius:12px;border:1px solid var(--border-color);font-size:12px;color:var(--text-primary);z-index:15;width:300px;max-height:calc(100vh - 200px);overflow-y:auto;box-shadow:0 2px 12px var(--shadow-color)}.node-details-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.node-details-title{font-size:14px;font-weight:600;color:var(--text-primary)}.node-details-type{font-size:10px;color:var(--text-muted);text-transform:uppercase;margin-top:2px}.node-details-section{margin-bottom:12px}.node-details-section-title{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.node-details-path{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-secondary);background:var(--bg-tertiary);padding:6px 8px;border-radius:4px;word-break:break-all;border:1px solid var(--border-light)}.node-details-tech-stack{display:flex;flex-wrap:wrap;gap:4px}.node-details-connections{display:flex;flex-direction:column;gap:4px}.connection-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary)}.connection-item-detailed{padding:8px 10px;background:var(--bg-tertiary);border-radius:6px;margin-bottom:6px;border:1px solid var(--border-light)}.connection-header{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-primary)}.connection-arrow{color:var(--text-muted)}.connection-target{color:var(--text-primary)}.connection-label{font-size:11px;color:var(--text-secondary);margin-top:4px;padding-left:18px;line-height:1.4}.node-details-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color)}.env-badge{display:inline-block;padding:4px 12px;border-radius:20px;color:var(--text-primary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.env-details{padding:10px 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);margin-bottom:12px}.env-detail-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0}.env-detail-label{font-size:10px;color:var(--text-muted);text-transform:uppercase}.env-detail-value{font-size:11px;font-weight:500;color:var(--text-secondary)}.component-list{display:flex;flex-direction:column;gap:6px}.component-list-title{font-weight:600;color:var(--text-muted);text-transform:uppercase;font-size:10px;letter-spacing:1px;margin-bottom:4px}.component-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s;text-align:left;width:100%}.component-item:hover{background:var(--bg-hover);border-color:var(--accent-cyan);transform:translate(2px);box-shadow:var(--glow-cyan)}.component-name{font-weight:600;font-size:12px;color:var(--text-primary)}.component-path{font-size:10px;color:var(--text-muted);font-family:JetBrains Mono,monospace}.git-info{display:flex;align-items:center;gap:8px;margin-top:4px}.git-branch{display:inline-flex;align-items:center;padding:2px 6px;background:#20cfdf1a;border:1px solid hsl(185 75% 50% / .3);border-radius:4px;font-size:10px;font-family:JetBrains Mono,monospace;color:var(--accent-cyan)}.git-hash{display:inline-flex;align-items:center;padding:2px 6px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;font-size:10px;font-family:JetBrains Mono,monospace;color:var(--text-secondary)}.no-git-info{color:var(--text-muted);font-style:italic;text-align:center;padding:12px}.canvas-container{flex:1;position:relative}.react-flow{background:var(--canvas-bg)!important}.react-flow__background{background:var(--canvas-bg)}.react-flow__controls{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 2px 8px var(--shadow-color)}.react-flow__controls-button{background:var(--bg-secondary);border-color:var(--border-color);fill:#fff;color:#fff}.react-flow__controls-button:hover{background:var(--bg-hover);fill:var(--text-primary)}.arch-node{padding:14px 16px;border-radius:12px;font-size:12px;font-weight:500;border:1.5px solid;min-width:130px;text-align:left;box-shadow:0 4px 16px #00000040,inset 0 1px #ffffff0d;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}.arch-node:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}.arch-node:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000059,inset 0 1px #ffffff0d}.arch-node .node-type-icon{position:absolute;top:10px;right:12px;font-size:16px;opacity:.35;line-height:1}.arch-node .node-content{flex:1;min-width:0}.arch-node .label{font-weight:700;font-size:13px;margin-bottom:2px;letter-spacing:-.2px;padding-right:20px}.arch-node .sublabel{font-size:10px;opacity:.7}.arch-node .node-desc{font-size:9px;opacity:.5;line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.arch-node .node-tech-row{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}.arch-node .node-tech-pill{font-size:8px;font-weight:600;padding:1px 6px;border-radius:3px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);opacity:.7;letter-spacing:.2px;text-transform:uppercase}.arch-node.presentation{background:linear-gradient(145deg,#122436,#152e47);border-color:#2680d999;color:#c6d9ec}.arch-node.presentation:hover{border-color:#3c8cdd;box-shadow:0 0 24px #2680d933,0 8px 24px #00000059}.arch-node.presentation .node-tech-pill{border-color:#2680d940;color:#99bfe6}.arch-node.application{background:linear-gradient(145deg,#322415,#432e19);border-color:#e88c3099;color:#ecd9c6}.arch-node.application:hover{border-color:#eb9947;box-shadow:0 0 24px #e88c3033,0 8px 24px #00000059}.arch-node.application .node-tech-pill{border-color:#e88c3040;color:#e6bf99}.arch-node.data{background:linear-gradient(145deg,#14291b,#183923);border-color:#2eb85c99;color:#c9e8d4}.arch-node.data:hover{border-color:#3c6;box-shadow:0 0 24px #2eb85c33,0 8px 24px #00000059}.arch-node.data .node-tech-pill{border-color:#2eb85c40;color:#9fdfb5}.arch-node.external{background:linear-gradient(145deg,#27192e,#331e3e);border-color:#9f53c699;color:#ddcde4}.arch-node.external:hover{border-color:#a6c;box-shadow:0 0 24px #9f53c633,0 8px 24px #00000059}.arch-node.external .node-tech-pill{border-color:#9f53c640;color:#c8a6d9}.arch-node.deployment{background:linear-gradient(145deg,#2e1919,#3e1e1e);border-color:#c339;color:#e4cdcd}.arch-node.deployment:hover{border-color:#d14747;box-shadow:0 0 24px #c333,0 8px 24px #00000059}.arch-node.deployment .node-tech-pill{border-color:#cc333340;color:#df9f9f}.react-flow__resize-control{border-radius:2px!important}.react-flow__resize-control.handle{width:8px!important;height:8px!important}.react-flow__node.selected .arch-node{box-shadow:0 0 0 2px #20cfdf66,0 4px 16px #0006}.arch-node.active{animation:pulse-border 2s infinite}@keyframes pulse-border{0%,to{box-shadow:0 0 #1abc5566}50%{box-shadow:0 0 0 8px #1abc5500}}.arch-node.highlighted{animation:highlight-glow 1.5s ease-in-out;box-shadow:0 0 20px #20cfdf99,0 0 40px #20cfdf4d;transform:scale(1.05);z-index:100}@keyframes highlight-glow{0%{box-shadow:0 0 #20cfdf00;transform:scale(1)}20%{box-shadow:0 0 30px #20cfdfcc,0 0 60px #20cfdf66;transform:scale(1.08)}to{box-shadow:0 0 20px #20cfdf99,0 0 40px #20cfdf4d;transform:scale(1.05)}}.arch-node.connected{box-shadow:0 0 0 3px var(--accent-green),0 4px 16px #1abc554d}.arch-node.dimmed{opacity:.3}.arch-node.search-match{box-shadow:0 0 0 3px var(--accent-amber),0 4px 16px #f59f0a66}.arch-node.search-no-match{opacity:.2}.node-actions-panel{position:absolute;top:60px;right:16px;background:#090e1ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:10px;padding:12px;box-shadow:0 4px 12px var(--shadow-color);z-index:10;min-width:180px}.node-actions-title{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.node-actions-buttons{display:flex;gap:8px;margin-bottom:8px}.node-actions-hint{font-size:10px;color:var(--text-muted);text-align:center;padding-top:8px;border-top:1px solid var(--border-color)}.lock-icon{margin-right:6px}.arch-node.locked{opacity:.7;cursor:not-allowed}.arch-node.locked:after{content:"🔒";position:absolute;top:4px;right:4px;font-size:10px}.hidden-nodes-panel{position:absolute;bottom:60px;right:16px;background:#090e1ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:10px;padding:12px;box-shadow:0 4px 12px var(--shadow-color);z-index:10;min-width:200px;max-width:280px;max-height:300px;overflow-y:auto}.hidden-nodes-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.hidden-nodes-list{display:flex;flex-direction:column;gap:6px}.hidden-node-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:var(--bg-tertiary);border-radius:6px}.hidden-node-name{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.status-bar{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:10px 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:12px;color:var(--text-secondary)}.status-left{display:flex;align-items:center;gap:16px;justify-self:start}.status-center{display:flex;align-items:center;justify-self:center}.status-indicator{display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-green);animation:breathe 2s infinite}.status-dot.disconnected{background:var(--accent-red);animation:none}@keyframes breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}.status-right{display:flex;align-items:center;gap:20px;justify-self:end}.layer-dropdown-item{gap:10px!important;transition:opacity .2s}.layer-dropdown-item.hidden-layer{opacity:.4}.layer-toggle-indicator{margin-left:auto;font-size:10px;color:var(--text-muted)}.legend-color{width:16px;height:16px;border-radius:4px;border:2px solid}.legend-color.presentation{background:#132639;border-color:#2680d9}.legend-color.application{background:#362617;border-color:#e88c30}.legend-color.data{background:#162d1d;border-color:#2eb85c}.legend-color.external{background:#2a1b32;border-color:#9f53c6}.legend-color.deployment{background:#321b1b;border-color:#c33}.loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary);font-size:14px}.loading-spinner{width:24px;height:24px;border:3px solid var(--border-color);border-top-color:var(--accent-cyan);border-radius:50%;animation:spin 1s linear infinite;margin-right:12px}@keyframes spin{to{transform:rotate(360deg)}}.agent-panel{position:absolute;bottom:60px;left:16px;background:#090e1ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:12px 16px;border-radius:10px;border:1px solid var(--border-color);font-size:11px;color:var(--text-primary);z-index:10;max-width:300px;box-shadow:0 2px 12px var(--shadow-color)}.agent-panel-title{font-weight:600;margin-bottom:8px;color:var(--text-muted);text-transform:uppercase;font-size:10px}.agent-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border-color)}.agent-item:last-child{border-bottom:none}.agent-dot{width:6px;height:6px;border-radius:50%}.agent-dot.active{background:var(--accent-green);animation:breathe 1.5s infinite}.agent-name{font-weight:500;color:var(--text-primary)}.agent-target{color:var(--text-muted);margin-left:auto}.flow-dropdown{min-width:240px}.flow-dot-inline{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.toolbar-btn.has-active-flow{background:#20cfdf1a;border-color:#20cfdf4d;color:var(--accent-cyan);gap:6px}.toolbar-btn.has-hidden{color:var(--accent-amber)}.flow-dropdown-item{gap:10px!important}.flow-dropdown-item.active{background:#20cfdf1a!important;color:var(--accent-cyan)!important}.flow-dropdown-name{flex:1}.flow-clear{color:var(--accent-red)!important}.flow-progress-bar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#090e1af2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:12px;padding:10px 16px;z-index:15;max-width:90vw;box-shadow:0 4px 20px var(--shadow-color),var(--glow-cyan);animation:slide-up .3s ease-out}.flow-progress-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;animation:breathe 2s infinite}.flow-progress-name{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;flex-shrink:0}.flow-progress-steps{display:flex;gap:4px;overflow-x:auto;max-width:500px}.flow-progress-step{padding:4px 8px;background:var(--bg-tertiary);border-radius:4px;font-size:10px;border-left:2px solid transparent;transition:all .3s;opacity:.4;color:var(--text-secondary);white-space:nowrap;flex-shrink:0}.flow-progress-step.active{opacity:1;background:var(--bg-hover);color:var(--text-primary)}.flow-progress-step.current{font-weight:600;box-shadow:0 1px 4px var(--shadow-color)}.flow-progress-controls{display:flex;gap:4px;flex-shrink:0;margin-left:4px}.flow-progress-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);background:var(--bg-tertiary);border-radius:6px;cursor:pointer;font-size:12px;color:var(--text-secondary);transition:all .2s}.flow-progress-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.flow-progress-btn.stop{border-color:#f425254d;color:var(--accent-red)}.flow-progress-btn.stop:hover{background:#f4252526}.flow-hud-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#070a13d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:flowHudFadeIn .2s ease-out}@keyframes flowHudFadeIn{0%{opacity:0}to{opacity:1}}.flow-hud-panel{width:90vw;height:85vh;max-width:1400px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 60px #20cfdf14,0 8px 32px #0006}.flow-hud-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-color);flex-shrink:0}.flow-hud-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:.3px}.flow-hud-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.flow-hud-controls{display:flex;align-items:center;gap:6px}.flow-hud-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s}.flow-hud-btn:hover{background:var(--bg-hover);border-color:var(--accent-cyan)}.flow-hud-close{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-muted);width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;transition:all .15s}.flow-hud-close:hover{background:#f4252526;border-color:var(--accent-red);color:var(--accent-red)}.flow-hud-description{padding:10px 20px;font-size:12px;color:var(--text-muted);border-bottom:1px solid var(--border-color);flex-shrink:0}.flow-hud-canvas{flex:1;min-height:0;position:relative}.flow-hud-canvas .react-flow__controls{bottom:10px;left:10px}.flow-hud-steps{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--border-color);overflow-x:auto;flex-shrink:0}.flow-hud-step{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:11px;color:var(--text-muted);background:var(--bg-tertiary);border:1px solid var(--border-color);white-space:nowrap;transition:all .3s}.flow-hud-step.active{color:var(--text-primary);border-color:currentColor}.flow-hud-step.current{box-shadow:0 0 12px currentColor}.flow-hud-step-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;color:var(--text-primary);background:var(--border-color);flex-shrink:0;transition:background .3s}.git-repo-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#2a1b32;border:1px solid hsl(280 50% 55% / .3);border-radius:4px;font-size:11px;font-family:JetBrains Mono,monospace;font-weight:500;color:#bf8cd9;text-decoration:none;transition:all .2s}.git-repo-badge:hover{background:#382442;border-color:#9f53c680}.save-panel{position:fixed;bottom:55px;left:50%;transform:translate(-50%);background:#20cfdf26;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text-primary);padding:12px 20px;border-radius:10px;border:1px solid var(--accent-cyan);display:flex;gap:16px;align-items:center;box-shadow:var(--glow-cyan);z-index:100;animation:slide-up .3s ease-out}@keyframes slide-up{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.save-panel-text{font-size:13px;font-weight:500}.react-flow__node.selected{outline:2px solid var(--accent-cyan);outline-offset:2px}.react-flow__handle{width:10px;height:10px;background:var(--accent-cyan);border:2px solid var(--bg-primary);opacity:0;transition:opacity .2s}.react-flow__node:hover .react-flow__handle,.react-flow__node.selected .react-flow__handle{opacity:1}.react-flow__handle:hover{transform:scale(1.2)}.clipboard-indicator{position:fixed;bottom:120px;left:50%;transform:translate(-50%);background:var(--bg-hover);color:var(--text-primary);padding:8px 16px;border-radius:6px;font-size:12px;border:1px solid var(--border-color);z-index:100;animation:fade-in-out 2s ease-in-out;pointer-events:none}@keyframes fade-in-out{0%,to{opacity:0;transform:translate(-50%) translateY(10px)}20%,80%{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scan-line{0%{top:-100%}to{top:200%}}.stats-overlay{position:absolute;bottom:60px;left:60px;background:var(--bg-secondary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:16px;border-radius:12px;border:1px solid var(--border-color);z-index:10;min-width:240px;box-shadow:var(--glow-cyan)}.stats-overlay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.stats-overlay-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--accent-cyan)}.stats-scan-info{display:flex;flex-wrap:wrap;gap:6px 12px;padding:8px 0;margin-bottom:8px;border-bottom:1px solid var(--border-color);font-size:11px;color:var(--text-muted)}.scan-info-item{white-space:nowrap}.scan-info-item:not(:last-child):after{content:"|";margin-left:12px;opacity:.3}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:10px;background:var(--bg-tertiary);border-radius:8px;border:1px solid var(--border-color)}.stat-value{font-size:20px;font-weight:700;color:var(--text-primary)}.stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-top:2px}.stat-card.highlight{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.validation-panel{position:absolute;top:16px;right:290px;background:var(--bg-secondary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:16px;border-radius:12px;border:1px solid var(--border-color);z-index:10;width:280px;max-height:calc(100vh - 200px);overflow-y:auto;box-shadow:0 2px 12px var(--shadow-color)}.validation-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.validation-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.violation-item{padding:10px;background:var(--bg-tertiary);border-radius:8px;margin-bottom:6px;border-left:3px solid;cursor:pointer;transition:all .2s}.violation-item:hover{background:var(--bg-hover)}.violation-item.error{border-left-color:var(--accent-red)}.violation-item.warn{border-left-color:var(--accent-amber)}.violation-rule{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}.violation-message{font-size:11px;color:var(--text-secondary)}.ops-panel{position:absolute;top:16px;right:16px;background:var(--bg-secondary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;border:1px solid var(--border-color);z-index:10;width:280px;max-height:calc(100vh - 200px);overflow-y:auto;box-shadow:0 2px 12px var(--shadow-color)}.ops-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 0}.ops-section{padding:12px}.ops-empty{color:var(--text-muted);font-size:11px;text-align:center;padding:20px 12px}.ops-hint{display:block;margin-top:6px;font-family:JetBrains Mono,monospace;font-size:10px;color:var(--accent-cyan);opacity:.7}.patrol-sparkline-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.patrol-sparkline{display:flex;gap:2px;flex:1}.spark-dot{width:8px;height:16px;border-radius:2px;flex-shrink:0;transition:opacity .15s}.spark-dot.healthy{background:var(--accent-green);opacity:.7}.spark-dot.violation{background:var(--accent-red);opacity:.8}.spark-dot:hover{opacity:1}.patrol-health-pct{font-size:12px;font-weight:700;color:var(--text-primary);min-width:32px;text-align:right}.patrol-status-card{padding:10px;background:var(--bg-tertiary);border-radius:8px;border:1px solid var(--border-color);margin-bottom:8px}.patrol-status-card.violation{border-color:#f425254d}.patrol-status-card.healthy{border-color:#1abc554d}.patrol-status-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.patrol-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:10px}.patrol-badge.healthy{background:#1abc5526;color:var(--accent-green)}.patrol-badge.violation{background:#f4252526;color:var(--accent-red)}.patrol-time{font-size:10px;color:var(--text-muted)}.patrol-counts{display:flex;gap:8px}.patrol-count{font-size:10px}.patrol-count.error{color:var(--accent-red)}.patrol-count.warn{color:var(--accent-amber)}.patrol-count.ok{color:var(--accent-green)}.patrol-violations{margin-bottom:8px}.patrol-violations-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:4px}.patrol-violation-item{padding:6px 8px;background:var(--bg-tertiary);border-radius:4px;margin-bottom:3px;border-left:2px solid;display:flex;gap:6px;align-items:baseline}.patrol-violation-item.error{border-left-color:var(--accent-red)}.patrol-violation-item.warn{border-left-color:var(--accent-amber)}.patrol-violation-item.resolved{border-left-color:var(--accent-green)}.patrol-v-rule{font-size:9px;font-weight:600;color:var(--text-muted);flex-shrink:0}.patrol-v-msg{font-size:10px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.patrol-summary{font-size:10px;color:var(--text-muted);text-align:center;padding-top:4px}.wf-item{border:1px solid var(--border-color);border-radius:8px;margin-bottom:6px;overflow:hidden}.wf-header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;cursor:pointer;transition:background .15s}.wf-header:hover{background:var(--bg-hover)}.wf-header-left{display:flex;align-items:center;gap:6px;overflow:hidden}.wf-expand{font-size:11px;color:var(--text-muted);width:12px;flex-shrink:0}.wf-name{font-size:11px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wf-tag{font-size:8px;color:var(--text-muted);background:var(--bg-tertiary);padding:1px 5px;border-radius:3px;flex-shrink:0}.wf-status{font-size:9px;font-weight:600;flex-shrink:0}.wf-status.completed{color:var(--accent-green)}.wf-status.running{color:var(--accent-amber)}.wf-status.failed{color:var(--accent-red)}.wf-detail{padding:0 10px 10px;border-top:1px solid var(--border-color)}.wf-desc{font-size:10px;color:var(--text-muted);padding:8px 0 6px}.wf-steps{display:flex;flex-direction:column;gap:3px}.wf-step{display:flex;align-items:center;gap:6px;font-size:10px;padding:3px 0}.wf-step-icon{font-size:10px;width:14px;text-align:center}.wf-step.completed .wf-step-icon{color:var(--accent-green)}.wf-step.running .wf-step-icon{color:var(--accent-amber)}.wf-step.failed .wf-step-icon{color:var(--accent-red)}.wf-step.pending .wf-step-icon{color:var(--text-muted)}.wf-step-id{color:var(--text-secondary)}.wf-step.completed .wf-step-id{color:var(--text-muted)}.wf-progress{display:flex;align-items:center;gap:8px;margin-top:6px}.wf-progress-bar{flex:1;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.wf-progress-fill{height:100%;background:var(--accent-cyan);border-radius:2px;transition:width .3s ease}.wf-progress-label{font-size:10px;font-weight:600;color:var(--text-muted);min-width:28px;text-align:right}.wf-steps-preview{font-size:10px;color:var(--text-muted);font-family:JetBrains Mono,monospace;padding:4px 0}.wf-run-hint{font-size:9px;font-family:JetBrains Mono,monospace;color:var(--accent-cyan);opacity:.6;margin-top:6px}.wf-actions{display:flex;gap:6px;margin-top:8px}.wf-actions .panel-btn{flex:1}.wf-error{font-size:11px;color:var(--accent-red);background:#f425251a;border:1px solid hsl(0 90% 55% / .25);border-radius:6px;padding:6px 10px;margin-bottom:8px}.patrol-actions{display:flex;gap:6px;margin-bottom:10px}.patrol-actions .panel-btn{flex:1}.chat-panel{position:absolute;bottom:16px;right:16px;width:350px;height:400px;background:#090e1af2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;z-index:20;box-shadow:0 4px 24px var(--shadow-color),var(--glow-cyan);animation:slide-up-chat .2s ease-out}@keyframes slide-up-chat{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border-color);flex-shrink:0}.chat-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-cyan)}.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:0}.chat-empty{color:var(--text-muted);font-size:12px;text-align:center;padding:40px 20px}.chat-message{max-width:85%;padding:8px 12px;border-radius:10px;font-size:12px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.chat-message.user{align-self:flex-end;background:#20cfdf26;border:1px solid hsl(185 75% 50% / .25);color:var(--text-primary)}.chat-message.assistant{align-self:flex-start;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary)}.chat-message-content{font-family:JetBrains Mono,monospace}.chat-cursor{display:inline-block;width:6px;height:14px;background:var(--accent-cyan);margin-left:2px;vertical-align:text-bottom;animation:chat-blink .8s step-end infinite}@keyframes chat-blink{0%,to{opacity:1}50%{opacity:0}}.chat-input-bar{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--border-color);flex-shrink:0}.chat-input{flex:1;height:32px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:0 10px;font-size:12px;font-family:JetBrains Mono,monospace;color:var(--text-primary);outline:none;transition:border-color .2s}.chat-input::placeholder{color:var(--text-muted)}.chat-input:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 2px #20cfdf26}.chat-send-btn,.chat-stop-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:1px solid var(--border-color);cursor:pointer;font-size:14px;font-weight:700;transition:all .2s;flex-shrink:0}.chat-send-btn{background:#20cfdf26;color:var(--accent-cyan);border-color:#20cfdf4d}.chat-send-btn:hover:not(:disabled){background:#20cfdf40}.chat-send-btn:disabled{opacity:.3;cursor:not-allowed}.chat-stop-btn{background:#f4252526;color:var(--accent-red);border-color:#f425254d;font-size:10px}.chat-stop-btn:hover{background:#f4252540}[data-theme=light] .arch-node{box-shadow:0 2px 12px #00000014,inset 0 1px #fff9}[data-theme=light] .arch-node:hover{box-shadow:0 4px 20px #0000001f,inset 0 1px #fff9}[data-theme=light] .arch-node:before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}[data-theme=light] .arch-node .node-tech-pill{background:#0000000a;border-color:#0000001a}[data-theme=light] .arch-node.presentation{background:linear-gradient(145deg,#e9f0f7,#d7e6f4);border-color:#428cd780;color:#19334d}[data-theme=light] .arch-node.presentation:hover{border-color:#428cd7;box-shadow:0 0 20px #428cd726,0 4px 20px #0000001f}[data-theme=light] .arch-node.presentation .node-tech-pill{color:#2e669e}[data-theme=light] .arch-node.application{background:linear-gradient(145deg,#f7f0e8,#f5e6d6);border-color:#df802080;color:#452e17}[data-theme=light] .arch-node.application:hover{border-color:#df8020;box-shadow:0 0 20px #df802026,0 4px 20px #0000001f}[data-theme=light] .arch-node.application .node-tech-pill{color:#8f5924}[data-theme=light] .arch-node.data{background:linear-gradient(145deg,#e6f4eb,#d5f1de);border-color:#2e9e5380;color:#1c4028}[data-theme=light] .arch-node.data:hover{border-color:#2e9e53;box-shadow:0 0 20px #2e9e5326,0 4px 20px #0000001f}[data-theme=light] .arch-node.data .node-tech-pill{color:#2a6f41}[data-theme=light] .arch-node.external{background:linear-gradient(145deg,#f1eaf5,#e9daf1);border-color:#9540bf80;color:#392145}[data-theme=light] .arch-node.external:hover{border-color:#9540bf;box-shadow:0 0 20px #9540bf26,0 4px 20px #0000001f}[data-theme=light] .arch-node.external .node-tech-pill{color:#743d8f}[data-theme=light] .arch-node.deployment{background:linear-gradient(145deg,#f7eded,#f4dddd);border-color:#be373780;color:#452121}[data-theme=light] .arch-node.deployment:hover{border-color:#be3737;box-shadow:0 0 20px #be373726,0 4px 20px #0000001f}[data-theme=light] .arch-node.deployment .node-tech-pill{color:#813131}[data-theme=light] .legend-color.presentation{background:#d9e6f2;border-color:#428cd7}[data-theme=light] .legend-color.application{background:#f2e6d9;border-color:#df8020}[data-theme=light] .legend-color.data{background:#dbf0e2;border-color:#2e9e53}[data-theme=light] .legend-color.external{background:#e8ddee;border-color:#9540bf}[data-theme=light] .legend-color.deployment{background:#f0dbdb;border-color:#be3737}[data-theme=light] .branding-header{background:#f6f7f9eb;border-bottom-color:#1295a126;box-shadow:0 1px 12px #1295a10f}[data-theme=light] .component-info-panel,[data-theme=light] .node-details-panel,[data-theme=light] .node-actions-panel,[data-theme=light] .hidden-nodes-panel,[data-theme=light] .agent-panel,[data-theme=light] .chat-panel{background:#f6f7f9eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}[data-theme=light] .flow-progress-bar{background:#f6f7f9f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}[data-theme=light] .save-panel{background:#1295a11a}[data-theme=light] ::-webkit-scrollbar-track{background:var(--bg-secondary)}[data-theme=light] ::-webkit-scrollbar-thumb{background:#bec4cf}[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:#a1a9ba}[data-theme=light] .git-repo-badge{background:#efe7f3;border-color:#9540bf4d;color:#739}[data-theme=light] .git-repo-badge:hover{background:#e4d6eb;border-color:#9540bf80}[data-theme=light] .toolbar-btn.active{background:#1295a11a}[data-theme=light] .flow-progress-btn.stop{border-color:#d4111140}[data-theme=light] .flow-progress-btn.stop:hover{background:#d411111a}[data-theme=light] .react-flow__controls-button{background:var(--bg-secondary);border-color:var(--border-color);fill:var(--text-primary);color:var(--text-primary)}[data-theme=light] .react-flow__controls-button:hover{background:var(--bg-hover)}[data-theme=light] .react-flow__handle{border-color:var(--bg-primary)}[data-theme=light] .react-flow__node.selected .arch-node{box-shadow:0 0 0 2px #1295a159,0 4px 12px #0000001f}
|