@wix/dev-machine-monitor 1.0.7 → 1.0.8
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/build/integration.js +8 -197
- package/build/integration.js.map +1 -0
- package/build/run.cjs +11 -248
- package/build/run.cjs.map +1 -1
- package/package.json +2 -2
package/build/integration.js
CHANGED
|
@@ -1,198 +1,10 @@
|
|
|
1
|
+
// lib/templates/error-client.html
|
|
2
|
+
var error_client_default = '<style>\n :root {\n --bg: #0f1724;\n --card: #0b1220;\n --accent: #7dd3fc;\n --muted: #94a3b8;\n --glass: rgba(255, 255, 255, 0.04);\n --radius: 16px;\n color-scheme: light dark;\n }\n * {\n box-sizing: border-box;\n }\n html,\n body {\n height: 100%;\n }\n body {\n margin: 0;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",\n Roboto, "Helvetica Neue", Arial;\n background: radial-gradient(\n 1200px 600px at 10% 10%,\n rgba(125, 211, 252, 0.06),\n transparent\n ),\n linear-gradient(180deg, var(--bg), #071025 80%);\n color: #e6eef8;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 32px;\n }\n .card {\n width: min(980px, 100%);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.02),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.04);\n border-radius: var(--radius);\n padding: 32px;\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 24px;\n align-items: center;\n box-shadow: 0 8px 40px rgba(2, 6, 23, 0.6);\n }\n .illustration {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .badge {\n background: var(--glass);\n padding: 14px;\n border-radius: 14px;\n text-align: center;\n }\n .code {\n font-weight: 700;\n font-size: 48px;\n letter-spacing: -2px;\n color: var(--accent);\n display: block;\n }\n h1 {\n margin: 0 0 6px 0;\n font-size: 20px;\n }\n p.lead {\n margin: 0;\n color: var(--muted);\n }\n .actions {\n margin-top: 18px;\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n .btn {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.03),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.05);\n padding: 10px 14px;\n border-radius: 12px;\n cursor: pointer;\n font-weight: 600;\n color: inherit;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n }\n .btn.primary {\n background: linear-gradient(180deg, var(--accent), #4ecfe8);\n color: #032;\n box-shadow: 0 6px 18px rgba(125, 211, 252, 0.08);\n }\n @media (max-width: 720px) {\n .card {\n grid-template-columns: 1fr;\n padding: 20px;\n }\n .illustration {\n order: -1;\n }\n }\n .wobble {\n transform-origin: center;\n animation: wob 6s ease-in-out infinite;\n }\n @keyframes wob {\n 0% {\n transform: rotate(-3deg);\n }\n 50% {\n transform: rotate(3deg);\n }\n 100% {\n transform: rotate(-3deg);\n }\n }\n</style>\n<main class="card">\n <div class="illustration">\n <div class="badge">\n <svg\n width="160"\n height="160"\n viewBox="0 0 64 64"\n fill="none"\n xmlns="http://www.w3.org/2000/svg"\n class="wobble"\n role="img"\n aria-hidden="true"\n >\n <rect\n x="6"\n y="10"\n width="52"\n height="36"\n rx="6"\n fill="rgba(125,211,252,0.06)"\n stroke="rgba(125,211,252,0.12)"\n />\n <circle cx="20" cy="28" r="4" fill="rgba(125,211,252,0.18)" />\n <rect\n x="32"\n y="24"\n width="16"\n height="6"\n rx="2"\n fill="rgba(125,211,252,0.22)"\n />\n <path\n d="M18 46c2-3 6-5 10-5s8 2 10 5"\n stroke="rgba(255,255,255,0.06)"\n stroke-width="1.5"\n stroke-linecap="round"\n />\n <path\n d="M42 20l6-6"\n stroke="rgba(255,255,255,0.06)"\n stroke-width="2"\n stroke-linecap="round"\n />\n </svg>\n </div>\n </div>\n\n <section>\n <span class="code" id="err-code">Build Error Occurred</span>\n <h1 id="err-title">We failed to build Your project</h1>\n <p class="lead">\n We hit an unexpected error while trying to build your project. Use an AI\n to get it fixed automatically.\n </p>\n <div class="actions">\n <a class="btn primary" id="homeBtn" onClick="fixWithAI()">Fix with AI</a>\n </div>\n </section>\n</main>\n';
|
|
3
|
+
|
|
1
4
|
// lib/integration.ts
|
|
2
5
|
var ErrorOverlay = class _ErrorOverlay {
|
|
3
6
|
static getOverlayHTML() {
|
|
4
|
-
|
|
5
|
-
<style>
|
|
6
|
-
:root {
|
|
7
|
-
--bg: #0f1724;
|
|
8
|
-
--card: #0b1220;
|
|
9
|
-
--accent: #7dd3fc;
|
|
10
|
-
--muted: #94a3b8;
|
|
11
|
-
--glass: rgba(255, 255, 255, 0.04);
|
|
12
|
-
--radius: 16px;
|
|
13
|
-
color-scheme: light dark;
|
|
14
|
-
}
|
|
15
|
-
* {
|
|
16
|
-
box-sizing: border-box;
|
|
17
|
-
}
|
|
18
|
-
html,
|
|
19
|
-
body {
|
|
20
|
-
height: 100%;
|
|
21
|
-
}
|
|
22
|
-
body {
|
|
23
|
-
margin: 0;
|
|
24
|
-
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
|
|
25
|
-
Roboto, "Helvetica Neue", Arial;
|
|
26
|
-
background: radial-gradient(
|
|
27
|
-
1200px 600px at 10% 10%,
|
|
28
|
-
rgba(125, 211, 252, 0.06),
|
|
29
|
-
transparent
|
|
30
|
-
),
|
|
31
|
-
linear-gradient(180deg, var(--bg), #071025 80%);
|
|
32
|
-
color: #e6eef8;
|
|
33
|
-
-webkit-font-smoothing: antialiased;
|
|
34
|
-
-moz-osx-font-smoothing: grayscale;
|
|
35
|
-
display: flex;
|
|
36
|
-
align-items: center;
|
|
37
|
-
justify-content: center;
|
|
38
|
-
padding: 32px;
|
|
39
|
-
}
|
|
40
|
-
.card {
|
|
41
|
-
width: min(980px, 100%);
|
|
42
|
-
background: linear-gradient(
|
|
43
|
-
180deg,
|
|
44
|
-
rgba(255, 255, 255, 0.02),
|
|
45
|
-
rgba(255, 255, 255, 0.01)
|
|
46
|
-
);
|
|
47
|
-
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
48
|
-
border-radius: var(--radius);
|
|
49
|
-
padding: 32px;
|
|
50
|
-
display: grid;
|
|
51
|
-
grid-template-columns: 300px 1fr;
|
|
52
|
-
gap: 24px;
|
|
53
|
-
align-items: center;
|
|
54
|
-
box-shadow: 0 8px 40px rgba(2, 6, 23, 0.6);
|
|
55
|
-
}
|
|
56
|
-
.illustration {
|
|
57
|
-
display: flex;
|
|
58
|
-
align-items: center;
|
|
59
|
-
justify-content: center;
|
|
60
|
-
}
|
|
61
|
-
.badge {
|
|
62
|
-
background: var(--glass);
|
|
63
|
-
padding: 14px;
|
|
64
|
-
border-radius: 14px;
|
|
65
|
-
text-align: center;
|
|
66
|
-
}
|
|
67
|
-
.code {
|
|
68
|
-
font-weight: 700;
|
|
69
|
-
font-size: 48px;
|
|
70
|
-
letter-spacing: -2px;
|
|
71
|
-
color: var(--accent);
|
|
72
|
-
display: block;
|
|
73
|
-
}
|
|
74
|
-
h1 {
|
|
75
|
-
margin: 0 0 6px 0;
|
|
76
|
-
font-size: 20px;
|
|
77
|
-
}
|
|
78
|
-
p.lead {
|
|
79
|
-
margin: 0;
|
|
80
|
-
color: var(--muted);
|
|
81
|
-
}
|
|
82
|
-
.actions {
|
|
83
|
-
margin-top: 18px;
|
|
84
|
-
display: flex;
|
|
85
|
-
gap: 12px;
|
|
86
|
-
flex-wrap: wrap;
|
|
87
|
-
}
|
|
88
|
-
.btn {
|
|
89
|
-
background: linear-gradient(
|
|
90
|
-
180deg,
|
|
91
|
-
rgba(255, 255, 255, 0.03),
|
|
92
|
-
rgba(255, 255, 255, 0.01)
|
|
93
|
-
);
|
|
94
|
-
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
95
|
-
padding: 10px 14px;
|
|
96
|
-
border-radius: 12px;
|
|
97
|
-
cursor: pointer;
|
|
98
|
-
font-weight: 600;
|
|
99
|
-
color: inherit;
|
|
100
|
-
text-decoration: none;
|
|
101
|
-
display: inline-flex;
|
|
102
|
-
align-items: center;
|
|
103
|
-
gap: 10px;
|
|
104
|
-
}
|
|
105
|
-
.btn.primary {
|
|
106
|
-
background: linear-gradient(180deg, var(--accent), #4ecfe8);
|
|
107
|
-
color: #032;
|
|
108
|
-
box-shadow: 0 6px 18px rgba(125, 211, 252, 0.08);
|
|
109
|
-
}
|
|
110
|
-
@media (max-width: 720px) {
|
|
111
|
-
.card {
|
|
112
|
-
grid-template-columns: 1fr;
|
|
113
|
-
padding: 20px;
|
|
114
|
-
}
|
|
115
|
-
.illustration {
|
|
116
|
-
order: -1;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
.wobble {
|
|
120
|
-
transform-origin: center;
|
|
121
|
-
animation: wob 6s ease-in-out infinite;
|
|
122
|
-
}
|
|
123
|
-
@keyframes wob {
|
|
124
|
-
0% {
|
|
125
|
-
transform: rotate(-3deg);
|
|
126
|
-
}
|
|
127
|
-
50% {
|
|
128
|
-
transform: rotate(3deg);
|
|
129
|
-
}
|
|
130
|
-
100% {
|
|
131
|
-
transform: rotate(-3deg);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
</style>
|
|
135
|
-
<main class="card">
|
|
136
|
-
<div class="illustration">
|
|
137
|
-
<div class="badge">
|
|
138
|
-
<svg
|
|
139
|
-
width="160"
|
|
140
|
-
height="160"
|
|
141
|
-
viewBox="0 0 64 64"
|
|
142
|
-
fill="none"
|
|
143
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
144
|
-
class="wobble"
|
|
145
|
-
role="img"
|
|
146
|
-
aria-hidden="true"
|
|
147
|
-
>
|
|
148
|
-
<rect
|
|
149
|
-
x="6"
|
|
150
|
-
y="10"
|
|
151
|
-
width="52"
|
|
152
|
-
height="36"
|
|
153
|
-
rx="6"
|
|
154
|
-
fill="rgba(125,211,252,0.06)"
|
|
155
|
-
stroke="rgba(125,211,252,0.12)"
|
|
156
|
-
/>
|
|
157
|
-
<circle cx="20" cy="28" r="4" fill="rgba(125,211,252,0.18)" />
|
|
158
|
-
<rect
|
|
159
|
-
x="32"
|
|
160
|
-
y="24"
|
|
161
|
-
width="16"
|
|
162
|
-
height="6"
|
|
163
|
-
rx="2"
|
|
164
|
-
fill="rgba(125,211,252,0.22)"
|
|
165
|
-
/>
|
|
166
|
-
<path
|
|
167
|
-
d="M18 46c2-3 6-5 10-5s8 2 10 5"
|
|
168
|
-
stroke="rgba(255,255,255,0.06)"
|
|
169
|
-
stroke-width="1.5"
|
|
170
|
-
stroke-linecap="round"
|
|
171
|
-
/>
|
|
172
|
-
<path
|
|
173
|
-
d="M42 20l6-6"
|
|
174
|
-
stroke="rgba(255,255,255,0.06)"
|
|
175
|
-
stroke-width="2"
|
|
176
|
-
stroke-linecap="round"
|
|
177
|
-
/>
|
|
178
|
-
</svg>
|
|
179
|
-
</div>
|
|
180
|
-
</div>
|
|
181
|
-
|
|
182
|
-
<section>
|
|
183
|
-
<span class="code" id="err-code">Build Error Occurred</span>
|
|
184
|
-
<h1 id="err-title">We failed to build Your project</h1>
|
|
185
|
-
<p class="lead">
|
|
186
|
-
We hit an unexpected error while trying to build your project.
|
|
187
|
-
Use an AI to get it fixed automatically.
|
|
188
|
-
</p>
|
|
189
|
-
<div class="actions">
|
|
190
|
-
<a class="btn primary" id="homeBtn" onClick="fixWithAI()">Fix with AI</a>
|
|
191
|
-
</div>
|
|
192
|
-
</section>
|
|
193
|
-
</main>
|
|
194
|
-
`;
|
|
195
|
-
return html;
|
|
7
|
+
return `__TEMPLATE__`;
|
|
196
8
|
}
|
|
197
9
|
constructor(error) {
|
|
198
10
|
console.error("monitor:error", error);
|
|
@@ -243,17 +55,16 @@ function customErrorOverlayPlugin() {
|
|
|
243
55
|
if (!id.includes("vite/dist/client/client.mjs")) {
|
|
244
56
|
return;
|
|
245
57
|
}
|
|
246
|
-
return
|
|
58
|
+
return code.replace("class ErrorOverlay", getOverlayCode() + "\nclass OldErrorOverlay");
|
|
247
59
|
}
|
|
248
60
|
};
|
|
249
61
|
}
|
|
250
|
-
function patchOverlay(code) {
|
|
251
|
-
return code.replace("class ErrorOverlay", getOverlayCode() + "\nclass OldErrorOverlay");
|
|
252
|
-
}
|
|
253
62
|
function getOverlayCode() {
|
|
254
|
-
|
|
63
|
+
const overlayAsString = ErrorOverlay.toString().replace("__TEMPLATE__", error_client_default);
|
|
64
|
+
return `${overlayAsString}
|
|
255
65
|
var ErrorOverlay = _ErrorOverlay;`;
|
|
256
66
|
}
|
|
257
67
|
export {
|
|
258
68
|
clientErrorMonitor
|
|
259
69
|
};
|
|
70
|
+
//# sourceMappingURL=integration.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../lib/templates/error-client.html","../lib/integration.ts"],"sourcesContent":["<style>\n :root {\n --bg: #0f1724;\n --card: #0b1220;\n --accent: #7dd3fc;\n --muted: #94a3b8;\n --glass: rgba(255, 255, 255, 0.04);\n --radius: 16px;\n color-scheme: light dark;\n }\n * {\n box-sizing: border-box;\n }\n html,\n body {\n height: 100%;\n }\n body {\n margin: 0;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\",\n Roboto, \"Helvetica Neue\", Arial;\n background: radial-gradient(\n 1200px 600px at 10% 10%,\n rgba(125, 211, 252, 0.06),\n transparent\n ),\n linear-gradient(180deg, var(--bg), #071025 80%);\n color: #e6eef8;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 32px;\n }\n .card {\n width: min(980px, 100%);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.02),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.04);\n border-radius: var(--radius);\n padding: 32px;\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 24px;\n align-items: center;\n box-shadow: 0 8px 40px rgba(2, 6, 23, 0.6);\n }\n .illustration {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .badge {\n background: var(--glass);\n padding: 14px;\n border-radius: 14px;\n text-align: center;\n }\n .code {\n font-weight: 700;\n font-size: 48px;\n letter-spacing: -2px;\n color: var(--accent);\n display: block;\n }\n h1 {\n margin: 0 0 6px 0;\n font-size: 20px;\n }\n p.lead {\n margin: 0;\n color: var(--muted);\n }\n .actions {\n margin-top: 18px;\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n .btn {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.03),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.05);\n padding: 10px 14px;\n border-radius: 12px;\n cursor: pointer;\n font-weight: 600;\n color: inherit;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n }\n .btn.primary {\n background: linear-gradient(180deg, var(--accent), #4ecfe8);\n color: #032;\n box-shadow: 0 6px 18px rgba(125, 211, 252, 0.08);\n }\n @media (max-width: 720px) {\n .card {\n grid-template-columns: 1fr;\n padding: 20px;\n }\n .illustration {\n order: -1;\n }\n }\n .wobble {\n transform-origin: center;\n animation: wob 6s ease-in-out infinite;\n }\n @keyframes wob {\n 0% {\n transform: rotate(-3deg);\n }\n 50% {\n transform: rotate(3deg);\n }\n 100% {\n transform: rotate(-3deg);\n }\n }\n</style>\n<main class=\"card\">\n <div class=\"illustration\">\n <div class=\"badge\">\n <svg\n width=\"160\"\n height=\"160\"\n viewBox=\"0 0 64 64\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"wobble\"\n role=\"img\"\n aria-hidden=\"true\"\n >\n <rect\n x=\"6\"\n y=\"10\"\n width=\"52\"\n height=\"36\"\n rx=\"6\"\n fill=\"rgba(125,211,252,0.06)\"\n stroke=\"rgba(125,211,252,0.12)\"\n />\n <circle cx=\"20\" cy=\"28\" r=\"4\" fill=\"rgba(125,211,252,0.18)\" />\n <rect\n x=\"32\"\n y=\"24\"\n width=\"16\"\n height=\"6\"\n rx=\"2\"\n fill=\"rgba(125,211,252,0.22)\"\n />\n <path\n d=\"M18 46c2-3 6-5 10-5s8 2 10 5\"\n stroke=\"rgba(255,255,255,0.06)\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M42 20l6-6\"\n stroke=\"rgba(255,255,255,0.06)\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </div>\n </div>\n\n <section>\n <span class=\"code\" id=\"err-code\">Build Error Occurred</span>\n <h1 id=\"err-title\">We failed to build Your project</h1>\n <p class=\"lead\">\n We hit an unexpected error while trying to build your project. Use an AI\n to get it fixed automatically.\n </p>\n <div class=\"actions\">\n <a class=\"btn primary\" id=\"homeBtn\" onClick=\"fixWithAI()\">Fix with AI</a>\n </div>\n </section>\n</main>\n","import type { AstroIntegration } from 'astro';\nimport type { PluginOption } from 'vite';\nimport template from './templates/error-client.html';\n\nclass ErrorOverlay {\n static getOverlayHTML() {\n return `__TEMPLATE__`;\n }\n\n constructor(error: Error) {\n console.error(\"monitor:error\", error);\n\n const overlay = document.createElement('div');\n overlay.innerHTML = ErrorOverlay.getOverlayHTML();\n\n window.fixWithAI = function() {\n window.parent?.postMessage(\n {\n type: \"clientError\",\n clientErrorData: {\n errorType: \"build\",\n message: error.message || \"Build/Runtime error occured\",\n stack: error.stack || error.message || 'No error details available',\n },\n },\n \"*\"\n );\n };\n\n return overlay;\n }\n}\n \nexport function clientErrorMonitor(): AstroIntegration {\n return {\n name: '@wix/dev-machine-monitor',\n hooks: {\n async 'astro:config:setup'({ command, updateConfig }) {\n if (command != \"dev\") {\n return;\n }\n\n updateConfig({\n vite: {\n plugins: [\n customErrorOverlayPlugin()\n ],\n }\n })\n }\n }\n }\n}\n \nfunction customErrorOverlayPlugin(): PluginOption {\n return {\n name: 'custom-error-overlay',\n transform(code, id, opts = {}) {\n if (opts?.ssr) {\n return;\n }\n\n if (!id.includes('vite/dist/client/client.mjs')) {\n return;\n }\n\n return code.replace('class ErrorOverlay', getOverlayCode() + '\\nclass OldErrorOverlay')\n },\n };\n}\n\n\nfunction getOverlayCode() {\n const overlayAsString = ErrorOverlay.toString().replace('__TEMPLATE__', template);\n return `${overlayAsString}\\nvar ErrorOverlay = _ErrorOverlay;`;\n}\n"],"mappings":";AAAA;;;ACIA,IAAM,eAAN,MAAM,cAAa;AAAA,EACjB,OAAO,iBAAiB;AACtB,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,OAAc;AACxB,YAAQ,MAAM,iBAAiB,KAAK;AAEpC,UAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,YAAQ,YAAY,cAAa,eAAe;AAEhD,WAAO,YAAY,WAAW;AAC5B,aAAO,QAAQ;AAAA,QACb;AAAA,UACE,MAAM;AAAA,UACN,iBAAiB;AAAA,YACf,WAAW;AAAA,YACX,SAAS,MAAM,WAAW;AAAA,YAC1B,OAAO,MAAM,SAAS,MAAM,WAAW;AAAA,UACzC;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AACF;AAEO,SAAS,qBAAuC;AACnD,SAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,MACL,MAAM,qBAAqB,EAAE,SAAS,aAAa,GAAG;AACpD,YAAI,WAAW,OAAO;AACpB;AAAA,QACF;AAEA,qBAAa;AAAA,UACX,MAAM;AAAA,YACJ,SAAS;AAAA,cACP,yBAAyB;AAAA,YAC3B;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACJ;AAAA,EACF;AACF;AAEA,SAAS,2BAAyC;AAChD,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU,MAAM,IAAI,OAAO,CAAC,GAAG;AAC7B,UAAI,MAAM,KAAK;AACb;AAAA,MACF;AAEA,UAAI,CAAC,GAAG,SAAS,6BAA6B,GAAG;AAC/C;AAAA,MACF;AAEA,aAAO,KAAK,QAAQ,sBAAsB,eAAe,IAAI,yBAAyB;AAAA,IACxF;AAAA,EACF;AACF;AAGA,SAAS,iBAAiB;AACxB,QAAM,kBAAkB,aAAa,SAAS,EAAE,QAAQ,gBAAgB,oBAAQ;AAChF,SAAO,GAAG,eAAe;AAAA;AAC3B;","names":[]}
|
package/build/run.cjs
CHANGED
|
@@ -6761,7 +6761,14 @@ var source_default = chalk;
|
|
|
6761
6761
|
// lib/run-proxy.ts
|
|
6762
6762
|
var http = __toESM(require("node:http"), 1);
|
|
6763
6763
|
var import_http_proxy_3 = __toESM(require_lib(), 1);
|
|
6764
|
-
|
|
6764
|
+
|
|
6765
|
+
// lib/templates/error-server.html
|
|
6766
|
+
var error_server_default = '<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="utf-8" />\n <meta name="viewport" content="width=device-width,initial-scale=1" />\n <title>Development Server Crashed</title>\n <style>\n :root {\n --bg: #0f1724;\n --card: #0b1220;\n --accent: #7dd3fc;\n --muted: #94a3b8;\n --glass: rgba(255, 255, 255, 0.04);\n --radius: 16px;\n color-scheme: light dark;\n }\n * {\n box-sizing: border-box;\n }\n html,\n body {\n height: 100%;\n }\n body {\n margin: 0;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",\n Roboto, "Helvetica Neue", Arial;\n background: radial-gradient(\n 1200px 600px at 10% 10%,\n rgba(125, 211, 252, 0.06),\n transparent\n ),\n linear-gradient(180deg, var(--bg), #071025 80%);\n color: #e6eef8;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 32px;\n }\n\n .card {\n width: min(980px, 100%);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.02),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.04);\n border-radius: var(--radius);\n padding: 32px;\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 24px;\n align-items: center;\n box-shadow: 0 8px 40px rgba(2, 6, 23, 0.6);\n }\n\n .illustration {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .badge {\n background: var(--glass);\n padding: 14px;\n border-radius: 14px;\n text-align: center;\n }\n .code {\n font-weight: 700;\n font-size: 48px;\n letter-spacing: -2px;\n color: var(--accent);\n display: block;\n }\n h1 {\n margin: 0 0 6px 0;\n font-size: 20px;\n }\n p.lead {\n margin: 0;\n color: var(--muted);\n }\n\n .actions {\n margin-top: 18px;\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n .btn {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.03),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.05);\n padding: 10px 14px;\n border-radius: 12px;\n cursor: pointer;\n font-weight: 600;\n color: inherit;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n }\n .btn.primary {\n background: linear-gradient(180deg, var(--accent), #4ecfe8);\n color: #032;\n box-shadow: 0 6px 18px rgba(125, 211, 252, 0.08);\n }\n .btn.ghost {\n background: transparent;\n border: 1px dashed rgba(255, 255, 255, 0.04);\n }\n\n .details {\n background: rgba(255, 255, 255, 0.02);\n border-radius: 12px;\n padding: 18px;\n margin-top: 8px;\n color: var(--muted);\n font-size: 14px;\n }\n\n .suggestions {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 12px;\n }\n .suggestion {\n display: flex;\n gap: 12px;\n align-items: flex-start;\n }\n .dot {\n width: 10px;\n height: 10px;\n border-radius: 10px;\n background: rgba(255, 255, 255, 0.06);\n margin-top: 6px;\n }\n\n @media (max-width: 720px) {\n .card {\n grid-template-columns: 1fr;\n padding: 20px;\n }\n .illustration {\n order: -1;\n }\n }\n\n .wobble {\n transform-origin: center;\n animation: wob 6s ease-in-out infinite;\n }\n @keyframes wob {\n 0% {\n transform: rotate(-3deg);\n }\n 50% {\n transform: rotate(3deg);\n }\n 100% {\n transform: rotate(-3deg);\n }\n }\n\n footer {\n font-size: 13px;\n color: var(--muted);\n text-align: left;\n margin-top: 18px;\n }\n </style>\n </head>\n <body>\n <main class="card">\n <div class="illustration">\n <div class="badge">\n <svg\n width="160"\n height="160"\n viewBox="0 0 64 64"\n fill="none"\n xmlns="http://www.w3.org/2000/svg"\n class="wobble"\n >\n <rect\n x="6"\n y="10"\n width="52"\n height="36"\n rx="6"\n fill="rgba(125,211,252,0.06)"\n stroke="rgba(125,211,252,0.12)"\n />\n <circle cx="20" cy="28" r="4" fill="rgba(125,211,252,0.18)" />\n <rect\n x="32"\n y="24"\n width="16"\n height="6"\n rx="2"\n fill="rgba(125,211,252,0.22)"\n />\n <path\n d="M18 46c2-3 6-5 10-5s8 2 10 5"\n stroke="rgba(255,255,255,0.06)"\n stroke-width="1.5"\n stroke-linecap="round"\n />\n <path\n d="M42 20l6-6"\n stroke="rgba(255,255,255,0.06)"\n stroke-width="2"\n stroke-linecap="round"\n />\n </svg>\n </div>\n </div>\n\n <section>\n <span class="code" id="err-code">Development Server Down</span>\n <h1 id="err-title">\n For unknown reasons development server has crashed and is not\n reachable.\n </h1>\n <p class="lead">\n We hit an unexpected error while trying to load the page. This usually\n clears up quickly \u2014 here are a few options.\n </p>\n\n <div class="actions">\n <form action="/__restart__" method="POST">\n <button class="btn primary" id="retryBtn" type="submit">\n Restart\n </button>\n <a class="btn" id="homeBtn" onClick="fixWithAI()">Fix with AI</a>\n </form>\n <script type="text/javascript">\n function fixWithAI() {\n window.parent?.postMessage(\n {\n type: "clientError",\n clientErrorData: {\n errorType: "build",\n message: "Development server is not responding",\n stack: "No stack trace available",\n },\n },\n "*"\n );\n }\n </script>\n </div>\n\n <div class="suggestions">\n <div class="suggestion">\n <span class="dot"></span>\n <div>\n Try refreshing the page or press <kbd>Ctrl</kbd> + <kbd>R</kbd>.\n </div>\n </div>\n <div class="suggestion">\n <span class="dot"></span>\n <div>Check your connection or try again in a few minutes.</div>\n </div>\n <div class="suggestion">\n <span class="dot"></span>\n <div>\n If the problem persists, open an issue or contact support.\n </div>\n </div>\n </div>\n </section>\n </main>\n </body>\n</html>\n';
|
|
6767
|
+
|
|
6768
|
+
// lib/templates/error-server-restarting.html
|
|
6769
|
+
var error_server_restarting_default = '<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="utf-8" />\n <meta name="viewport" content="width=device-width,initial-scale=1" />\n <title>Something went wrong \u2014 Error</title>\n <meta\n name="description"\n content="Friendly error page with suggestions and retry button."\n />\n <style>\n :root {\n --bg: #0f1724;\n --card: #0b1220;\n --accent: #7dd3fc;\n --muted: #94a3b8;\n --glass: rgba(255, 255, 255, 0.04);\n --radius: 16px;\n color-scheme: light dark;\n }\n * {\n box-sizing: border-box;\n }\n html,\n body {\n height: 100%;\n }\n body {\n margin: 0;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",\n Roboto, "Helvetica Neue", Arial;\n background: radial-gradient(\n 1200px 600px at 10% 10%,\n rgba(125, 211, 252, 0.06),\n transparent\n ),\n linear-gradient(180deg, var(--bg), #071025 80%);\n color: #e6eef8;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 32px;\n }\n\n .card {\n width: min(980px, 100%);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.02),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.04);\n border-radius: var(--radius);\n padding: 32px;\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 24px;\n align-items: center;\n box-shadow: 0 8px 40px rgba(2, 6, 23, 0.6);\n }\n\n .illustration {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .badge {\n background: var(--glass);\n padding: 14px;\n border-radius: 14px;\n text-align: center;\n }\n .code {\n font-weight: 700;\n font-size: 48px;\n letter-spacing: -2px;\n color: var(--accent);\n display: block;\n }\n h1 {\n margin: 0 0 6px 0;\n font-size: 20px;\n }\n p.lead {\n margin: 0;\n color: var(--muted);\n }\n\n .actions {\n margin-top: 18px;\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n .btn {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.03),\n rgba(255, 255, 255, 0.01)\n );\n border: 1px solid rgba(255, 255, 255, 0.05);\n padding: 10px 14px;\n border-radius: 12px;\n cursor: pointer;\n font-weight: 600;\n color: inherit;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n }\n .btn.primary {\n background: linear-gradient(180deg, var(--accent), #4ecfe8);\n color: #032;\n box-shadow: 0 6px 18px rgba(125, 211, 252, 0.08);\n }\n .btn.ghost {\n background: transparent;\n border: 1px dashed rgba(255, 255, 255, 0.04);\n }\n\n .details {\n background: rgba(255, 255, 255, 0.02);\n border-radius: 12px;\n padding: 18px;\n margin-top: 8px;\n color: var(--muted);\n font-size: 14px;\n }\n\n .suggestions {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 12px;\n }\n .suggestion {\n display: flex;\n gap: 12px;\n align-items: flex-start;\n }\n .dot {\n width: 10px;\n height: 10px;\n border-radius: 10px;\n background: rgba(255, 255, 255, 0.06);\n margin-top: 6px;\n }\n\n @media (max-width: 720px) {\n .card {\n grid-template-columns: 1fr;\n padding: 20px;\n }\n .illustration {\n order: -1;\n }\n }\n\n .wobble {\n transform-origin: center;\n animation: wob 6s ease-in-out infinite;\n }\n @keyframes wob {\n 0% {\n transform: rotate(-3deg);\n }\n 50% {\n transform: rotate(3deg);\n }\n 100% {\n transform: rotate(-3deg);\n }\n }\n\n footer {\n font-size: 13px;\n color: var(--muted);\n text-align: left;\n margin-top: 18px;\n }\n </style>\n </head>\n <body>\n <main class="card" role="main" aria-labelledby="err-title">\n <div class="illustration">\n <div class="badge" aria-hidden="true">\n <svg\n width="160"\n height="160"\n viewBox="0 0 64 64"\n fill="none"\n xmlns="http://www.w3.org/2000/svg"\n class="wobble"\n role="img"\n aria-hidden="true"\n >\n <rect\n x="6"\n y="10"\n width="52"\n height="36"\n rx="6"\n fill="rgba(125,211,252,0.06)"\n stroke="rgba(125,211,252,0.12)"\n />\n <circle cx="20" cy="28" r="4" fill="rgba(125,211,252,0.18)" />\n <rect\n x="32"\n y="24"\n width="16"\n height="6"\n rx="2"\n fill="rgba(125,211,252,0.22)"\n />\n <path\n d="M18 46c2-3 6-5 10-5s8 2 10 5"\n stroke="rgba(255,255,255,0.06)"\n stroke-width="1.5"\n stroke-linecap="round"\n />\n <path\n d="M42 20l6-6"\n stroke="rgba(255,255,255,0.06)"\n stroke-width="2"\n stroke-linecap="round"\n />\n </svg>\n </div>\n </div>\n\n <section>\n <span class="code" id="err-code">Restarting the services...</span>\n <h1 id="err-title">Please wait...</h1>\n <script>\n function checkIfSiteIsAlive(counter = 0) {\n if (counter === 10) {\n window.location.href = "/";\n return;\n }\n\n fetch("/")\n .then((response) => {\n if (response.ok) {\n window.location.href = "/";\n return;\n }\n return Promise.reject();\n })\n .catch((error) => {\n console.error(\n "monitor:error",\n "server is not yet reachable",\n error\n );\n setTimeout(() => checkIfSiteIsAlive(counter + 1), 2_000);\n });\n }\n checkIfSiteIsAlive();\n </script>\n <p class="lead">Waiting for server to restart</p>\n </section>\n </main>\n </body>\n</html>\n';
|
|
6770
|
+
|
|
6771
|
+
// lib/run-proxy.ts
|
|
6765
6772
|
async function runProxy(proxyFrom, proxyTo, stdio) {
|
|
6766
6773
|
const proxy = import_http_proxy_3.default.createProxy({
|
|
6767
6774
|
preserveHeaderKeyCase: true,
|
|
@@ -6771,132 +6778,11 @@ async function runProxy(proxyFrom, proxyTo, stdio) {
|
|
|
6771
6778
|
let onRestart = () => {
|
|
6772
6779
|
};
|
|
6773
6780
|
const httpServer = http.createServer((req, res) => {
|
|
6774
|
-
if (req.url?.startsWith(
|
|
6781
|
+
if (req.url?.startsWith("/__restart__") && req.method === "POST") {
|
|
6775
6782
|
onRestart();
|
|
6776
6783
|
res.writeHead(500, {
|
|
6777
6784
|
"Content-Type": "text/html"
|
|
6778
|
-
}).end(
|
|
6779
|
-
<!doctype html>
|
|
6780
|
-
<html lang="en">
|
|
6781
|
-
<head>
|
|
6782
|
-
<meta charset="utf-8" />
|
|
6783
|
-
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
6784
|
-
<title>Something went wrong \u2014 Error</title>
|
|
6785
|
-
<meta name="description" content="Friendly error page with suggestions and retry button." />
|
|
6786
|
-
<style>
|
|
6787
|
-
:root{
|
|
6788
|
-
--bg:#0f1724; /* deep navy */
|
|
6789
|
-
--card:#0b1220;
|
|
6790
|
-
--accent:#7dd3fc;
|
|
6791
|
-
--muted:#94a3b8;
|
|
6792
|
-
--glass: rgba(255,255,255,0.04);
|
|
6793
|
-
--radius:16px;
|
|
6794
|
-
color-scheme: light dark;
|
|
6795
|
-
}
|
|
6796
|
-
*{box-sizing:border-box}
|
|
6797
|
-
html,body{height:100%}
|
|
6798
|
-
body{
|
|
6799
|
-
margin:0;
|
|
6800
|
-
font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
|
|
6801
|
-
background: radial-gradient(1200px 600px at 10% 10%, rgba(125,211,252,0.06), transparent),
|
|
6802
|
-
linear-gradient(180deg, var(--bg), #071025 80%);
|
|
6803
|
-
color:#e6eef8;
|
|
6804
|
-
-webkit-font-smoothing:antialiased;
|
|
6805
|
-
-moz-osx-font-smoothing:grayscale;
|
|
6806
|
-
display:flex;align-items:center;justify-content:center;padding:32px;
|
|
6807
|
-
}
|
|
6808
|
-
|
|
6809
|
-
.card{
|
|
6810
|
-
width:min(980px,100%);
|
|
6811
|
-
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
|
|
6812
|
-
border: 1px solid rgba(255,255,255,0.04);
|
|
6813
|
-
border-radius:var(--radius);
|
|
6814
|
-
padding:32px;display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center;
|
|
6815
|
-
box-shadow: 0 8px 40px rgba(2,6,23,0.6);
|
|
6816
|
-
}
|
|
6817
|
-
|
|
6818
|
-
.illustration{display:flex;align-items:center;justify-content:center}
|
|
6819
|
-
.badge{background:var(--glass);padding:14px;border-radius:14px;text-align:center}
|
|
6820
|
-
.code{
|
|
6821
|
-
font-weight:700;font-size:48px;letter-spacing:-2px;color:var(--accent);
|
|
6822
|
-
display:block
|
|
6823
|
-
}
|
|
6824
|
-
h1{margin:0 0 6px 0;font-size:20px}
|
|
6825
|
-
p.lead{margin:0;color:var(--muted)}
|
|
6826
|
-
|
|
6827
|
-
.actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
|
|
6828
|
-
.btn{
|
|
6829
|
-
background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
|
|
6830
|
-
border:1px solid rgba(255,255,255,0.05);padding:10px 14px;border-radius:12px;cursor:pointer;
|
|
6831
|
-
font-weight:600;color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:10px
|
|
6832
|
-
}
|
|
6833
|
-
.btn.primary{background:linear-gradient(180deg,var(--accent),#4ecfe8);color:#032;box-shadow:0 6px 18px rgba(125,211,252,0.08)}
|
|
6834
|
-
.btn.ghost{background:transparent;border:1px dashed rgba(255,255,255,0.04)}
|
|
6835
|
-
|
|
6836
|
-
.details{background:rgba(255,255,255,0.02);border-radius:12px;padding:18px;margin-top:8px;color:var(--muted);font-size:14px}
|
|
6837
|
-
|
|
6838
|
-
.suggestions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
|
|
6839
|
-
.suggestion{display:flex;gap:12px;align-items:flex-start}
|
|
6840
|
-
.dot{width:10px;height:10px;border-radius:10px;background:rgba(255,255,255,0.06);margin-top:6px}
|
|
6841
|
-
|
|
6842
|
-
@media (max-width:720px){
|
|
6843
|
-
.card{grid-template-columns:1fr;padding:20px}
|
|
6844
|
-
.illustration{order: -1}
|
|
6845
|
-
}
|
|
6846
|
-
|
|
6847
|
-
/* subtle animation for the SVG */
|
|
6848
|
-
.wobble{transform-origin:center;animation:wob 6s ease-in-out infinite}
|
|
6849
|
-
@keyframes wob{0%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}100%{transform:rotate(-3deg)}}
|
|
6850
|
-
|
|
6851
|
-
footer{font-size:13px;color:var(--muted);text-align:left;margin-top:18px}
|
|
6852
|
-
</style>
|
|
6853
|
-
</head>
|
|
6854
|
-
<body>
|
|
6855
|
-
<main class="card" role="main" aria-labelledby="err-title">
|
|
6856
|
-
<div class="illustration">
|
|
6857
|
-
<div class="badge" aria-hidden="true">
|
|
6858
|
-
<!-- friendly robot / broken plug SVG -->
|
|
6859
|
-
<svg width="160" height="160" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="wobble" role="img" aria-hidden="true">
|
|
6860
|
-
<rect x="6" y="10" width="52" height="36" rx="6" fill="rgba(125,211,252,0.06)" stroke="rgba(125,211,252,0.12)"/>
|
|
6861
|
-
<circle cx="20" cy="28" r="4" fill="rgba(125,211,252,0.18)"/>
|
|
6862
|
-
<rect x="32" y="24" width="16" height="6" rx="2" fill="rgba(125,211,252,0.22)"/>
|
|
6863
|
-
<path d="M18 46c2-3 6-5 10-5s8 2 10 5" stroke="rgba(255,255,255,0.06)" stroke-width="1.5" stroke-linecap="round"/>
|
|
6864
|
-
<path d="M42 20l6-6" stroke="rgba(255,255,255,0.06)" stroke-width="2" stroke-linecap="round"/>
|
|
6865
|
-
</svg>
|
|
6866
|
-
</div>
|
|
6867
|
-
</div>
|
|
6868
|
-
|
|
6869
|
-
<section>
|
|
6870
|
-
<span class="code" id="err-code">Restarting the services...</span>
|
|
6871
|
-
<h1 id="err-title">Please wait...</h1>
|
|
6872
|
-
<script>
|
|
6873
|
-
function checkIfSiteIsAlive(counter = 0) {
|
|
6874
|
-
if (counter === 10) {
|
|
6875
|
-
window.location.href = "/";
|
|
6876
|
-
return;
|
|
6877
|
-
}
|
|
6878
|
-
|
|
6879
|
-
fetch('/')
|
|
6880
|
-
.then((response) => {
|
|
6881
|
-
if (response.ok) {
|
|
6882
|
-
window.location.href = "/";
|
|
6883
|
-
return;
|
|
6884
|
-
}
|
|
6885
|
-
return Promise.reject();
|
|
6886
|
-
})
|
|
6887
|
-
.catch((error) => {
|
|
6888
|
-
console.error('monitor:error', 'server is not yet reachable', error);
|
|
6889
|
-
setTimeout(() => checkIfSiteIsAlive(counter + 1), 2_000);
|
|
6890
|
-
});
|
|
6891
|
-
}
|
|
6892
|
-
checkIfSiteIsAlive();
|
|
6893
|
-
</script>
|
|
6894
|
-
<p class="lead">Waiting for server to restart</p>
|
|
6895
|
-
</section>
|
|
6896
|
-
</main>
|
|
6897
|
-
</body>
|
|
6898
|
-
</html>
|
|
6899
|
-
`);
|
|
6785
|
+
}).end(error_server_restarting_default);
|
|
6900
6786
|
} else {
|
|
6901
6787
|
proxy.web(req, res, { target: proxyTo });
|
|
6902
6788
|
}
|
|
@@ -6914,130 +6800,7 @@ async function runProxy(proxyFrom, proxyTo, stdio) {
|
|
|
6914
6800
|
if (!res.headersSent && !res.writableEnded) {
|
|
6915
6801
|
res.writeHead(500, {
|
|
6916
6802
|
"Content-Type": "text/html"
|
|
6917
|
-
}).end(
|
|
6918
|
-
<!doctype html>
|
|
6919
|
-
<html lang="en">
|
|
6920
|
-
<head>
|
|
6921
|
-
<meta charset="utf-8" />
|
|
6922
|
-
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
6923
|
-
<title>Development Server Crashed</title>
|
|
6924
|
-
<style>
|
|
6925
|
-
:root{
|
|
6926
|
-
--bg:#0f1724; /* deep navy */
|
|
6927
|
-
--card:#0b1220;
|
|
6928
|
-
--accent:#7dd3fc;
|
|
6929
|
-
--muted:#94a3b8;
|
|
6930
|
-
--glass: rgba(255,255,255,0.04);
|
|
6931
|
-
--radius:16px;
|
|
6932
|
-
color-scheme: light dark;
|
|
6933
|
-
}
|
|
6934
|
-
*{box-sizing:border-box}
|
|
6935
|
-
html,body{height:100%}
|
|
6936
|
-
body{
|
|
6937
|
-
margin:0;
|
|
6938
|
-
font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
|
|
6939
|
-
background: radial-gradient(1200px 600px at 10% 10%, rgba(125,211,252,0.06), transparent),
|
|
6940
|
-
linear-gradient(180deg, var(--bg), #071025 80%);
|
|
6941
|
-
color:#e6eef8;
|
|
6942
|
-
-webkit-font-smoothing:antialiased;
|
|
6943
|
-
-moz-osx-font-smoothing:grayscale;
|
|
6944
|
-
display:flex;align-items:center;justify-content:center;padding:32px;
|
|
6945
|
-
}
|
|
6946
|
-
|
|
6947
|
-
.card{
|
|
6948
|
-
width:min(980px,100%);
|
|
6949
|
-
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
|
|
6950
|
-
border: 1px solid rgba(255,255,255,0.04);
|
|
6951
|
-
border-radius:var(--radius);
|
|
6952
|
-
padding:32px;display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center;
|
|
6953
|
-
box-shadow: 0 8px 40px rgba(2,6,23,0.6);
|
|
6954
|
-
}
|
|
6955
|
-
|
|
6956
|
-
.illustration{display:flex;align-items:center;justify-content:center}
|
|
6957
|
-
.badge{background:var(--glass);padding:14px;border-radius:14px;text-align:center}
|
|
6958
|
-
.code{
|
|
6959
|
-
font-weight:700;font-size:48px;letter-spacing:-2px;color:var(--accent);
|
|
6960
|
-
display:block
|
|
6961
|
-
}
|
|
6962
|
-
h1{margin:0 0 6px 0;font-size:20px}
|
|
6963
|
-
p.lead{margin:0;color:var(--muted)}
|
|
6964
|
-
|
|
6965
|
-
.actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
|
|
6966
|
-
.btn{
|
|
6967
|
-
background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
|
|
6968
|
-
border:1px solid rgba(255,255,255,0.05);padding:10px 14px;border-radius:12px;cursor:pointer;
|
|
6969
|
-
font-weight:600;color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:10px
|
|
6970
|
-
}
|
|
6971
|
-
.btn.primary{background:linear-gradient(180deg,var(--accent),#4ecfe8);color:#032;box-shadow:0 6px 18px rgba(125,211,252,0.08)}
|
|
6972
|
-
.btn.ghost{background:transparent;border:1px dashed rgba(255,255,255,0.04)}
|
|
6973
|
-
|
|
6974
|
-
.details{background:rgba(255,255,255,0.02);border-radius:12px;padding:18px;margin-top:8px;color:var(--muted);font-size:14px}
|
|
6975
|
-
|
|
6976
|
-
.suggestions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
|
|
6977
|
-
.suggestion{display:flex;gap:12px;align-items:flex-start}
|
|
6978
|
-
.dot{width:10px;height:10px;border-radius:10px;background:rgba(255,255,255,0.06);margin-top:6px}
|
|
6979
|
-
|
|
6980
|
-
@media (max-width:720px){
|
|
6981
|
-
.card{grid-template-columns:1fr;padding:20px}
|
|
6982
|
-
.illustration{order: -1}
|
|
6983
|
-
}
|
|
6984
|
-
|
|
6985
|
-
/* subtle animation for the SVG */
|
|
6986
|
-
.wobble{transform-origin:center;animation:wob 6s ease-in-out infinite}
|
|
6987
|
-
@keyframes wob{0%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}100%{transform:rotate(-3deg)}}
|
|
6988
|
-
|
|
6989
|
-
footer{font-size:13px;color:var(--muted);text-align:left;margin-top:18px}
|
|
6990
|
-
</style>
|
|
6991
|
-
</head>
|
|
6992
|
-
<body>
|
|
6993
|
-
<main class="card">
|
|
6994
|
-
<div class="illustration">
|
|
6995
|
-
<div class="badge">
|
|
6996
|
-
<svg width="160" height="160" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="wobble">
|
|
6997
|
-
<rect x="6" y="10" width="52" height="36" rx="6" fill="rgba(125,211,252,0.06)" stroke="rgba(125,211,252,0.12)"/>
|
|
6998
|
-
<circle cx="20" cy="28" r="4" fill="rgba(125,211,252,0.18)"/>
|
|
6999
|
-
<rect x="32" y="24" width="16" height="6" rx="2" fill="rgba(125,211,252,0.22)"/>
|
|
7000
|
-
<path d="M18 46c2-3 6-5 10-5s8 2 10 5" stroke="rgba(255,255,255,0.06)" stroke-width="1.5" stroke-linecap="round"/>
|
|
7001
|
-
<path d="M42 20l6-6" stroke="rgba(255,255,255,0.06)" stroke-width="2" stroke-linecap="round"/>
|
|
7002
|
-
</svg>
|
|
7003
|
-
</div>
|
|
7004
|
-
</div>
|
|
7005
|
-
|
|
7006
|
-
<section>
|
|
7007
|
-
<span class="code" id="err-code">Development Server Down</span>
|
|
7008
|
-
<h1 id="err-title">For unknown reasons development server has crashed and is not reachable.</h1>
|
|
7009
|
-
<p class="lead">We hit an unexpected error while trying to load the page. This usually clears up quickly \u2014 here are a few options.</p>
|
|
7010
|
-
|
|
7011
|
-
<div class="actions">
|
|
7012
|
-
<form action=${RESTART_URL} method="POST">
|
|
7013
|
-
<button class="btn primary" id="retryBtn" type="submit">Retry</button>
|
|
7014
|
-
<a class="btn" id="homeBtn" onClick="fixWithAI()">Fix with AI</a>
|
|
7015
|
-
</form>
|
|
7016
|
-
<script type="text/javascript">
|
|
7017
|
-
function fixWithAI() {
|
|
7018
|
-
window.parent?.postMessage({
|
|
7019
|
-
type: "clientError",
|
|
7020
|
-
clientErrorData: {
|
|
7021
|
-
errorType: "build",
|
|
7022
|
-
message: 'Development server is not responding',
|
|
7023
|
-
stack: 'No stack trace available',
|
|
7024
|
-
}
|
|
7025
|
-
}, '*');
|
|
7026
|
-
}
|
|
7027
|
-
</script>
|
|
7028
|
-
</div>
|
|
7029
|
-
|
|
7030
|
-
<div class="suggestions">
|
|
7031
|
-
<div class="suggestion"><span class="dot"></span><div>Try refreshing the page or press <kbd>Ctrl</kbd> + <kbd>R</kbd>.</div></div>
|
|
7032
|
-
<div class="suggestion"><span class="dot"></span><div>Check your connection or try again in a few minutes.</div></div>
|
|
7033
|
-
<div class="suggestion"><span class="dot"></span><div>If the problem persists, open an issue or contact support.</div></div>
|
|
7034
|
-
</div>
|
|
7035
|
-
|
|
7036
|
-
</section>
|
|
7037
|
-
</main>
|
|
7038
|
-
</body>
|
|
7039
|
-
</html>
|
|
7040
|
-
`);
|
|
6803
|
+
}).end(error_server_default);
|
|
7041
6804
|
}
|
|
7042
6805
|
} else {
|
|
7043
6806
|
res.end();
|