@wix/dev-machine-monitor 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/integration.js +48 -209
  2. package/build/integration.js.map +1 -0
  3. package/build/run.cjs +11 -248
  4. package/build/run.cjs.map +1 -1
  5. package/package.json +2 -2
package/build/integration.js CHANGED
@@ -1,203 +1,16 @@
1
- // lib/integration.ts
2
- var ErrorOverlay = class _ErrorOverlay {
3
- static getOverlayHTML() {
4
- const html = `
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>
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';
181
3
 
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;
196
- }
4
+ // lib/integration.ts
5
+ var { HTMLElement = class {
6
+ } } = globalThis;
7
+ var ErrorOverlay = class extends HTMLElement {
197
8
  constructor(error) {
9
+ super();
10
+ const div = document.createElement("div");
11
+ div.innerHTML = `__TEMPLATE__`;
12
+ this.appendChild(div);
198
13
  console.error("monitor:error", error);
199
- const overlay = document.createElement("div");
200
- overlay.innerHTML = _ErrorOverlay.getOverlayHTML();
201
14
  window.fixWithAI = function() {
202
15
  window.parent?.postMessage(
203
16
  {
@@ -211,22 +24,46 @@ var ErrorOverlay = class _ErrorOverlay {
211
24
  "*"
212
25
  );
213
26
  };
214
- return overlay;
27
+ }
28
+ close() {
29
+ this.parentNode?.removeChild(this);
215
30
  }
216
31
  };
217
32
  function clientErrorMonitor() {
33
+ let lastErrorPayload = null;
218
34
  return {
219
35
  name: "@wix/dev-machine-monitor",
220
36
  hooks: {
37
+ "astro:server:setup"({ server }) {
38
+ server.ws.on("connection", (socket) => {
39
+ const originalSend = socket.send;
40
+ socket.send = function(...args) {
41
+ const data = args[0];
42
+ if (typeof data === "string") {
43
+ try {
44
+ const payload = JSON.parse(data);
45
+ if (payload.type === "error") {
46
+ lastErrorPayload = data;
47
+ } else if (payload.type === "update" || payload.type === "full-reload") {
48
+ lastErrorPayload = null;
49
+ }
50
+ } catch (e) {
51
+ }
52
+ }
53
+ return originalSend.apply(this, args);
54
+ };
55
+ if (lastErrorPayload) {
56
+ originalSend.apply(socket, [lastErrorPayload]);
57
+ }
58
+ });
59
+ },
221
60
  async "astro:config:setup"({ command, updateConfig }) {
222
61
  if (command != "dev") {
223
62
  return;
224
63
  }
225
64
  updateConfig({
226
65
  vite: {
227
- plugins: [
228
- customErrorOverlayPlugin()
229
- ]
66
+ plugins: [customErrorOverlayPlugin()]
230
67
  }
231
68
  });
232
69
  }
@@ -243,17 +80,19 @@ function customErrorOverlayPlugin() {
243
80
  if (!id.includes("vite/dist/client/client.mjs")) {
244
81
  return;
245
82
  }
246
- return patchOverlay(code);
83
+ const overlay = ErrorOverlay.toString().replace(
84
+ "class extends HTMLElement",
85
+ "class ErrorOverlay extends HTMLElement"
86
+ ).replace("__TEMPLATE__", error_client_default);
87
+ return code.replace(
88
+ "class ErrorOverlay",
89
+ `${overlay}
90
+ class OldErrorOverlay`
91
+ );
247
92
  }
248
93
  };
249
94
  }
250
- function patchOverlay(code) {
251
- return code.replace("class ErrorOverlay", getOverlayCode() + "\nclass OldErrorOverlay");
252
- }
253
- function getOverlayCode() {
254
- return `${ErrorOverlay.toString()}
255
- var ErrorOverlay = _ErrorOverlay;`;
256
- }
257
95
  export {
258
96
  clientErrorMonitor
259
97
  };
98
+ //# sourceMappingURL=integration.js.map
package/build/integration.js.map ADDED
@@ -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\nconst { HTMLElement = class {} as typeof globalThis.HTMLElement } = globalThis;\n\nclass ErrorOverlay extends HTMLElement {\n constructor(error: Error) {\n super();\n\n const div = document.createElement(\"div\");\n div.innerHTML = `__TEMPLATE__`;\n\n this.appendChild(div);\n\n console.error(\"monitor:error\", error);\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\n close(): void {\n this.parentNode?.removeChild(this);\n }\n}\n\nexport function clientErrorMonitor(): AstroIntegration {\n let lastErrorPayload: any = null;\n\n return {\n name: \"@wix/dev-machine-monitor\",\n hooks: {\n \"astro:server:setup\"({ server }) {\n server.ws.on(\"connection\", (socket) => {\n const originalSend = socket.send;\n\n socket.send = function (...args) {\n const data = args[0];\n\n if (typeof data === \"string\") {\n try {\n const payload = JSON.parse(data);\n if (payload.type === \"error\") {\n lastErrorPayload = data;\n } else if (\n payload.type === \"update\" ||\n payload.type === \"full-reload\"\n ) {\n lastErrorPayload = null;\n }\n } catch (e) {\n // Ignore parse errors (ping/pong frames)\n }\n }\n\n // Pass through to the original implementation\n // @ts-ignore\n return originalSend.apply(this, args);\n };\n\n if (lastErrorPayload) {\n // @ts-ignore\n originalSend.apply(socket, [lastErrorPayload]);\n }\n });\n },\n async \"astro:config:setup\"({ command, updateConfig }) {\n if (command != \"dev\") {\n return;\n }\n\n updateConfig({\n vite: {\n plugins: [customErrorOverlayPlugin()],\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 const overlay = ErrorOverlay.toString()\n .replace(\n \"class extends HTMLElement\",\n \"class ErrorOverlay extends HTMLElement\"\n )\n .replace(\"__TEMPLATE__\", template);\n\n return code.replace(\n \"class ErrorOverlay\",\n `${overlay}\\nclass OldErrorOverlay`\n );\n },\n };\n}\n"],"mappings":";AAAA;;;ACIA,IAAM,EAAE,cAAc,MAAM;AAAC,EAAmC,IAAI;AAEpE,IAAM,eAAN,cAA2B,YAAY;AAAA,EACrC,YAAY,OAAc;AACxB,UAAM;AAEN,UAAM,MAAM,SAAS,cAAc,KAAK;AACxC,QAAI,YAAY;AAEhB,SAAK,YAAY,GAAG;AAEpB,YAAQ,MAAM,iBAAiB,KAAK;AAEpC,WAAO,YAAY,WAAY;AAC7B,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;AAAA,EACF;AAAA,EAEA,QAAc;AACZ,SAAK,YAAY,YAAY,IAAI;AAAA,EACnC;AACF;AAEO,SAAS,qBAAuC;AACrD,MAAI,mBAAwB;AAE5B,SAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,MACL,qBAAqB,EAAE,OAAO,GAAG;AAC/B,eAAO,GAAG,GAAG,cAAc,CAAC,WAAW;AACrC,gBAAM,eAAe,OAAO;AAE5B,iBAAO,OAAO,YAAa,MAAM;AAC/B,kBAAM,OAAO,KAAK,CAAC;AAEnB,gBAAI,OAAO,SAAS,UAAU;AAC5B,kBAAI;AACF,sBAAM,UAAU,KAAK,MAAM,IAAI;AAC/B,oBAAI,QAAQ,SAAS,SAAS;AAC5B,qCAAmB;AAAA,gBACrB,WACE,QAAQ,SAAS,YACjB,QAAQ,SAAS,eACjB;AACA,qCAAmB;AAAA,gBACrB;AAAA,cACF,SAAS,GAAG;AAAA,cAEZ;AAAA,YACF;AAIA,mBAAO,aAAa,MAAM,MAAM,IAAI;AAAA,UACtC;AAEA,cAAI,kBAAkB;AAEpB,yBAAa,MAAM,QAAQ,CAAC,gBAAgB,CAAC;AAAA,UAC/C;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,MAAM,qBAAqB,EAAE,SAAS,aAAa,GAAG;AACpD,YAAI,WAAW,OAAO;AACpB;AAAA,QACF;AAEA,qBAAa;AAAA,UACX,MAAM;AAAA,YACJ,SAAS,CAAC,yBAAyB,CAAC;AAAA,UACtC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;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,YAAM,UAAU,aAAa,SAAS,EACnC;AAAA,QACC;AAAA,QACA;AAAA,MACF,EACC,QAAQ,gBAAgB,oBAAQ;AAEnC,aAAO,KAAK;AAAA,QACV;AAAA,QACA,GAAG,OAAO;AAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF;","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
- var RESTART_URL = "/restart";
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(RESTART_URL) && req.method === "POST") {
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();