vite-plugin-opencode-assistant 1.0.27 β†’ 1.0.29

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 (37) hide show
  1. package/es/client/App.vue.js +64 -36
  2. package/es/client/composables/index.d.ts +10 -0
  3. package/es/client/composables/index.js +22 -0
  4. package/es/client/composables/useOpencodeSSE.d.ts +64 -0
  5. package/es/client/composables/useOpencodeSSE.js +29 -0
  6. package/es/client/composables/useOpencodeSessionSSE.d.ts +66 -0
  7. package/es/client/composables/useOpencodeSessionSSE.js +168 -0
  8. package/es/client/composables/useSSE.d.ts +85 -18
  9. package/es/client/composables/useSSE.js +101 -44
  10. package/es/client/composables/useServerSSE.d.ts +53 -0
  11. package/es/client/composables/useServerSSE.js +36 -0
  12. package/es/client/composables/useServiceStatus.d.ts +0 -2
  13. package/es/client/composables/useServiceStatus.js +1 -7
  14. package/es/client/composables/useSessions.d.ts +24 -5
  15. package/es/client/composables/useSessions.js +16 -2
  16. package/es/core/proxy-server.js +67 -159
  17. package/es/index.js +3 -1
  18. package/lib/client/App.vue.js +63 -35
  19. package/lib/client/composables/index.d.ts +10 -0
  20. package/lib/client/composables/index.js +54 -0
  21. package/lib/client/composables/useOpencodeSSE.d.ts +64 -0
  22. package/lib/client/composables/useOpencodeSSE.js +52 -0
  23. package/lib/client/composables/useOpencodeSessionSSE.d.ts +66 -0
  24. package/lib/client/composables/useOpencodeSessionSSE.js +187 -0
  25. package/lib/client/composables/useSSE.d.ts +85 -18
  26. package/lib/client/composables/useSSE.js +100 -43
  27. package/lib/client/composables/useServerSSE.d.ts +53 -0
  28. package/lib/client/composables/useServerSSE.js +59 -0
  29. package/lib/client/composables/useServiceStatus.d.ts +0 -2
  30. package/lib/client/composables/useServiceStatus.js +1 -7
  31. package/lib/client/composables/useSessions.d.ts +24 -5
  32. package/lib/client/composables/useSessions.js +16 -2
  33. package/lib/client.js +2823 -2566
  34. package/lib/core/proxy-server.js +67 -159
  35. package/lib/index.js +3 -1
  36. package/lib/style.css +1 -1
  37. package/package.json +4 -4
@@ -128,44 +128,61 @@ function generateBridgeScript(options) {
128
128
  if (event.data && event.data.type === "OPENCODE_SET_THEME") {
129
129
  setTheme(event.data.theme);
130
130
  }
131
-
131
+
132
132
  if (event.data && event.data.type === "OPENCODE_INSERT_FILE_PART") {
133
133
  insertFilePart(event.data.element);
134
134
  }
135
-
135
+
136
136
  if (event.data && event.data.type === "minimize-state-change") {
137
137
  handleMinimizeStateChange(event.data.minimized);
138
138
  }
139
-
139
+
140
140
  if (event.data && event.data.type === "prompt-dock-visibility-change") {
141
141
  handlePromptDockVisibilityChange(event.data.visible);
142
142
  }
143
143
  });
144
144
 
145
+ // === \u6700\u5C0F\u5316\u72B6\u6001\u6837\u5F0F ===
146
+ const minimizeStyles = \`
147
+ .opencode-minimized [data-dock-surface="tray"]:not([data-slot="permission-footer"]) {
148
+ display: none !important;
149
+ }
150
+ .opencode-minimized [data-slot="session-turn-list"] {
151
+ padding-bottom: 10px !important;
152
+ }
153
+ .opencode-prompt-dock-hidden [data-component="session-prompt-dock"]:not(:has([data-kind="permission"])) {
154
+ display: none !important;
155
+ }
156
+ \`;
157
+
158
+ function injectMinimizeStyles() {
159
+ if (document.getElementById('opencode-minimize-styles')) return;
160
+ const style = document.createElement('style');
161
+ style.id = 'opencode-minimize-styles';
162
+ style.textContent = minimizeStyles;
163
+ document.head.appendChild(style);
164
+ }
165
+
145
166
  // === \u6700\u5C0F\u5316\u72B6\u6001\u5904\u7406 ===
146
167
  let savedMinimizedState = null;
147
168
  let savedPromptDockVisibleState = null;
148
-
169
+
149
170
  function handleMinimizeStateChange(minimized) {
150
171
  savedMinimizedState = minimized;
151
- const dockSurface = document.querySelector('[data-dock-surface="tray"]');
152
- const sessionTurnList = document.querySelector('[data-slot="session-turn-list"]');
153
-
154
- if (dockSurface) {
155
- dockSurface.style.display = minimized ? 'none' : '';
156
- }
157
-
158
- if (sessionTurnList) {
159
- sessionTurnList.style.paddingBottom = minimized ? '10px' : '';
172
+ if (minimized) {
173
+ document.documentElement.classList.add('opencode-minimized');
174
+ } else {
175
+ document.documentElement.classList.remove('opencode-minimized');
160
176
  }
161
177
  }
162
178
 
163
179
  // === \u5BF9\u8BDD\u6846\u663E\u793A\u72B6\u6001\u5904\u7406 ===
164
180
  function handlePromptDockVisibilityChange(visible) {
165
181
  savedPromptDockVisibleState = visible;
166
- const promptDock = document.querySelector('[data-component="session-prompt-dock"]');
167
- if (promptDock) {
168
- promptDock.style.display = visible ? '' : 'none';
182
+ if (!visible) {
183
+ document.documentElement.classList.add('opencode-prompt-dock-hidden');
184
+ } else {
185
+ document.documentElement.classList.remove('opencode-prompt-dock-hidden');
169
186
  }
170
187
  }
171
188
 
@@ -181,11 +198,11 @@ function generateBridgeScript(options) {
181
198
 
182
199
  // === \u4FDD\u5B58\u8F93\u5165\u6846\u5149\u6807\u4F4D\u7F6E ===
183
200
  let savedRange = null;
184
-
201
+
185
202
  function setupPromptInputListener() {
186
203
  const promptInput = document.querySelector('[data-component="prompt-input"]');
187
204
  if (!promptInput) return;
188
-
205
+
189
206
  promptInput.addEventListener('blur', function() {
190
207
  const selection = window.getSelection();
191
208
  if (selection && selection.rangeCount > 0) {
@@ -195,7 +212,7 @@ function generateBridgeScript(options) {
195
212
  }
196
213
  }
197
214
  });
198
-
215
+
199
216
  promptInput.addEventListener('focus', function() {
200
217
  savedRange = null;
201
218
  });
@@ -221,29 +238,29 @@ function generateBridgeScript(options) {
221
238
 
222
239
  const jsonStr = JSON.stringify({
223
240
  nodeContext: {
224
- "filePath": {
225
- "value": filePath ?? '\u672A\u77E5',
226
- "desc": "\u6E90\u7801\u6587\u4EF6\u8DEF\u5F84"
241
+ "filePath": {
242
+ "value": filePath ?? '\u672A\u77E5',
243
+ "desc": "\u6E90\u7801\u6587\u4EF6\u8DEF\u5F84"
227
244
  },
228
- "line": {
229
- "value": line ?? '\u672A\u77E5',
230
- "desc": "\u4EE3\u7801\u6240\u5728\u884C\u53F7"
245
+ "line": {
246
+ "value": line ?? '\u672A\u77E5',
247
+ "desc": "\u4EE3\u7801\u6240\u5728\u884C\u53F7"
231
248
  },
232
- "column": {
233
- "value": column ?? '\u672A\u77E5',
234
- "desc": "\u4EE3\u7801\u6240\u5728\u5217\u53F7"
249
+ "column": {
250
+ "value": column ?? '\u672A\u77E5',
251
+ "desc": "\u4EE3\u7801\u6240\u5728\u5217\u53F7"
235
252
  },
236
- "description": {
237
- "value": description ?? '\u672A\u77E5',
238
- "desc": "DOM \u5143\u7D20\u9009\u62E9\u5668"
253
+ "description": {
254
+ "value": description ?? '\u672A\u77E5',
255
+ "desc": "DOM \u5143\u7D20\u9009\u62E9\u5668"
239
256
  },
240
- "innerText": {
241
- "value": innerText ? innerText.substring(0, 500) : '',
242
- "desc": "DOM \u5143\u7D20\u5185\u90E8\u6587\u672C"
257
+ "innerText": {
258
+ "value": innerText ? innerText.substring(0, 500) : '',
259
+ "desc": "DOM \u5143\u7D20\u5185\u90E8\u6587\u672C"
243
260
  },
244
- "selectAt": {
245
- "value": previewPageUrl || '\u672A\u77E5',
246
- "desc": "\u7528\u6237\u9009\u4E2D\u8282\u70B9\u65F6\u7684\u9875\u9762 URL"
261
+ "selectAt": {
262
+ "value": previewPageUrl || '\u672A\u77E5',
263
+ "desc": "\u7528\u6237\u9009\u4E2D\u8282\u70B9\u65F6\u7684\u9875\u9762 URL"
247
264
  }
248
265
  }
249
266
  });
@@ -252,30 +269,30 @@ function generateBridgeScript(options) {
252
269
  span.setAttribute('data-type', 'file');
253
270
  span.setAttribute('data-path', jsonStr);
254
271
  span.setAttribute('contenteditable', 'false');
255
-
272
+
256
273
  span.textContent = displayText;
257
274
 
258
275
  if (savedRange) {
259
276
  const range = savedRange;
260
277
  range.collapse(false);
261
278
  range.insertNode(span);
262
-
279
+
263
280
  const space = document.createTextNode('\\u00A0');
264
281
  span.parentNode.insertBefore(space, span.nextSibling);
265
-
282
+
266
283
  const newRange = document.createRange();
267
284
  newRange.setStartAfter(space);
268
285
  newRange.collapse(true);
269
-
286
+
270
287
  promptInput.focus();
271
-
288
+
272
289
  const selection = window.getSelection();
273
290
  if (selection) {
274
291
  selection.removeAllRanges();
275
292
  selection.addRange(newRange);
276
293
  }
277
294
  savedRange = null;
278
-
295
+
279
296
  promptInput.dispatchEvent(new Event('input', { bubbles: true }));
280
297
  return;
281
298
  }
@@ -283,20 +300,20 @@ function generateBridgeScript(options) {
283
300
  const selection = window.getSelection();
284
301
  if (selection && selection.rangeCount > 0) {
285
302
  const range = selection.getRangeAt(0);
286
-
303
+
287
304
  if (promptInput.contains(range.commonAncestorContainer)) {
288
305
  range.collapse(false);
289
306
  range.insertNode(span);
290
-
307
+
291
308
  const space = document.createTextNode('\\u00A0');
292
309
  span.parentNode.insertBefore(space, span.nextSibling);
293
-
310
+
294
311
  const newRange = document.createRange();
295
312
  newRange.setStartAfter(space);
296
313
  newRange.collapse(true);
297
314
  selection.removeAllRanges();
298
315
  selection.addRange(newRange);
299
-
316
+
300
317
  promptInput.dispatchEvent(new Event('input', { bubbles: true }));
301
318
  return;
302
319
  }
@@ -305,7 +322,7 @@ function generateBridgeScript(options) {
305
322
  promptInput.appendChild(span);
306
323
  const space = document.createTextNode('\\u00A0');
307
324
  promptInput.appendChild(space);
308
-
325
+
309
326
  const newRange = document.createRange();
310
327
  newRange.setStartAfter(space);
311
328
  newRange.collapse(true);
@@ -314,119 +331,17 @@ function generateBridgeScript(options) {
314
331
  newSelection.removeAllRanges();
315
332
  newSelection.addRange(newRange);
316
333
  }
317
-
334
+
318
335
  promptInput.dispatchEvent(new Event('input', { bubbles: true }));
319
336
  promptInput.focus();
320
337
  }
321
338
 
322
- // === \u601D\u8003\u72B6\u6001\u76D1\u542C (\u5B8C\u5168\u590D\u523B OpenCode Web \u5B9E\u73B0) ===
323
- // OpenCode Web \u6838\u5FC3\u903B\u8F91:
324
- // working = !!pending() || sessionStatus().type !== "idle"
325
- // pending = \u6700\u540E\u4E00\u6761\u672A\u5B8C\u6210\u7684 assistant \u6D88\u606F (time.completed \u4E0D\u662F\u6570\u5B57)
326
- // sessionStatus = sync.data.session_status[sessionID]
327
-
328
- let eventSource = null;
329
- const sessionStatus = {};
330
- const pendingMessages = {};
331
-
332
- function getCurrentSessionID() {
333
- const match = window.location.pathname.match(/\\/session\\/([^\\/]+)/);
334
- return match ? match[1] : null;
335
- }
336
-
337
- function isPending(message) {
338
- return message.role === 'assistant' && typeof message.time?.completed !== 'number';
339
- }
340
-
341
- function updateThinkingState(sessionID) {
342
- const status = sessionStatus[sessionID];
343
- const pending = pendingMessages[sessionID];
344
-
345
- const isThinking = !!pending || (status && status.type !== 'idle');
346
-
347
- if (window.parent !== window) {
348
- window.parent.postMessage({
349
- type: 'OPENCODE_THINKING_STATE',
350
- thinking: isThinking,
351
- sessionID: sessionID,
352
- statusType: status?.type || 'idle',
353
- hasPending: !!pending
354
- }, '*');
355
- }
356
- }
357
-
358
- function handleEvent(payload) {
359
- const type = payload.type;
360
- const props = payload.properties;
361
-
362
- switch (type) {
363
- case 'session.status': {
364
- const sessionID = props.sessionID;
365
- sessionStatus[sessionID] = props.status;
366
- updateThinkingState(sessionID);
367
- break;
368
- }
369
-
370
- case 'message.updated': {
371
- const info = props.info;
372
- if (!info || !info.sessionID) break;
373
- const sessionID = info.sessionID;
374
-
375
- if (info.role === 'assistant') {
376
- if (isPending(info)) {
377
- pendingMessages[sessionID] = info;
378
- } else {
379
- delete pendingMessages[sessionID];
380
- }
381
- updateThinkingState(sessionID);
382
- }
383
- break;
384
- }
385
-
386
- case 'message.part.delta': {
387
- const sessionID = props.sessionID;
388
- if (sessionID && !pendingMessages[sessionID]) {
389
- pendingMessages[sessionID] = { role: 'assistant', time: {} };
390
- updateThinkingState(sessionID);
391
- }
392
- break;
393
- }
394
- }
395
- }
396
-
397
- function setupThinkingListener() {
398
- if (eventSource) {
399
- eventSource.close();
400
- }
401
-
402
- eventSource = new EventSource('/global/event');
403
-
404
- eventSource.onmessage = function(event) {
405
- try {
406
- const data = JSON.parse(event.data);
407
- const payload = data.payload;
408
- if (!payload) return;
409
- handleEvent(payload);
410
- } catch (e) {
411
- // ignore parse errors
412
- }
413
- };
414
-
415
- eventSource.onerror = function(err) {
416
- console.warn('[OpenCode Bridge] SSE connection error, retrying in 3s...');
417
- eventSource.close();
418
- setTimeout(setupThinkingListener, 3000);
419
- };
420
-
421
- console.log('[OpenCode Bridge] SSE listener setup complete');
422
- }
423
-
424
339
  // === \u5C31\u7EEA\u901A\u77E5 ===
425
340
  function init() {
341
+ injectMinimizeStyles();
426
342
  if (window.parent !== window) {
427
343
  window.parent.postMessage({ type: "OPENCODE_READY" }, "*");
428
344
  }
429
- setupThinkingListener();
430
345
  setupPromptInputListener();
431
346
  applySavedStates();
432
347
 
@@ -452,13 +367,6 @@ function generateBridgeScript(options) {
452
367
  } else {
453
368
  init();
454
369
  }
455
-
456
- window.addEventListener('beforeunload', function() {
457
- if (eventSource) {
458
- eventSource.close();
459
- eventSource = null;
460
- }
461
- });
462
370
  })();
463
371
  `;
464
372
  }
package/lib/index.js CHANGED
@@ -199,7 +199,9 @@ function createOpenCodePlugin(options = {}) {
199
199
  const widget = (0, import_injector.injectWidget)({
200
200
  theme: config.theme,
201
201
  open: config.open,
202
- hotkey: config.hotkey
202
+ hotkey: config.hotkey,
203
+ proxyPort: actualProxyPort,
204
+ proxyHost: config.hostname
203
205
  });
204
206
  timer.end();
205
207
  return html.replace("</body>", `${widget}</body>`);
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.opencode-chat.no-transition,.opencode-chat.no-transition.open{transition:none!important}.opencode-chat.minimized{width:300px;height:300px}.opencode-chat.minimized .opencode-iframe-container{margin-top:-146px}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.opencode-notification:before{content:"πŸ’‘";font-size:16px}.opencode-dialog-overlay{position:fixed;inset:0;background:var(--oc-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opencode-dialog{background:var(--oc-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--oc-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.opencode-dialog-content{margin-bottom:20px}.opencode-dialog-message{font-size:15px;color:var(--oc-text-primary);line-height:1.5}.opencode-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.opencode-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-dialog-btn.cancel{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-dialog-btn.cancel:hover{background:var(--oc-text-primary);color:var(--oc-bg-main)}.opencode-dialog-btn.confirm{background:var(--oc-danger);color:#fff}.opencode-dialog-btn.confirm:hover{background:var(--oc-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.opencode-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-page-notification:before{content:"πŸ’‘";font-size:16px}.opencode-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}#vue-inspector-container{display:none!important}.opencode-element-tooltip{position:fixed;background:var(--oc-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--oc-shadow-md);max-width:300px;pointer-events:none}.opencode-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.opencode-tooltip-file{font-size:11px;color:var(--oc-text-placeholder);word-break:break-all}.opencode-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media (max-width:768px){.opencode-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}.opencode-iframe-container{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;margin-top:-42px}.opencode-loading-overlay{position:absolute;inset:0;background:var(--oc-overlay-bg);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10;transition:opacity .3s ease}.opencode-loading-overlay.visible{display:flex}.opencode-loading-spinner{width:40px;height:40px;border:3px solid var(--oc-border-primary);border-top-color:var(--oc-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.opencode-loading-text{margin-top:12px;font-size:14px;color:var(--oc-text-placeholder)}.opencode-error-overlay{position:absolute;inset:0;z-index:15;margin-top:42px;display:none}.opencode-error-overlay.visible{display:flex}.opencode-empty-state-overlay{position:absolute;inset:0;background:var(--oc-bg-secondary);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:5;transition:opacity .3s ease;margin-top:42px}.opencode-empty-state-overlay.visible{display:flex}.opencode-empty-state-icon{color:var(--oc-text-placeholder);margin-bottom:16px}.opencode-empty-state-text{color:var(--oc-text-primary);font-size:16px;font-weight:500;margin-bottom:24px}.opencode-empty-state-btn{padding:10px 24px;border-radius:8px;border:none;background:var(--oc-primary);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:var(--oc-shadow-primary)}.opencode-empty-state-btn:hover{background:var(--oc-primary-hover);transform:translateY(-1px);box-shadow:var(--oc-shadow-primary-hover)}.opencode-empty-state-btn:active{transform:translateY(0)}.opencode-iframe{width:100%;height:100%;border:none}.opencode-chat-header{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;background:var(--oc-bg-secondary);border-bottom:1px solid var(--oc-border-primary);z-index:5}.opencode-chat-header-left{display:flex;align-items:center;gap:4px}.opencode-chat-header-title{font-size:14px;font-weight:600;color:var(--oc-text-primary);position:absolute;left:50%;transform:translate(-50%)}.opencode-chat-header-actions{display:flex;gap:4px}.opencode-header-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-header-btn:hover{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-header-btn.close:hover{background:var(--oc-danger);color:#fff}.opencode-header-btn.select-btn.active,.opencode-header-btn.session-toggle.active{background:var(--oc-primary);color:#fff}.opencode-select-mode-hint{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:10px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-radius:12px;font-size:14px;font-weight:500;box-shadow:0 6px 20px #ef444480,0 0 0 3px #ef44444d;z-index:9999999;display:none;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.3)}.opencode-select-mode-hint.visible{display:flex;animation:slideDown .3s ease,pulseHint 2s ease-in-out infinite}.opencode-hint-shortcut{padding:4px 10px;background:#ffffff40;border-radius:6px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.4)}@keyframes pulseHint{0%,to{box-shadow:0 6px 20px #ef444480,0 0 0 3px #ef44444d}50%{box-shadow:0 6px 20px #ef444499,0 0 0 6px #ef444466}}.opencode-right-toolbar{width:140px;background:var(--oc-bg-secondary);border-left:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease;overflow:hidden}.opencode-right-toolbar.collapsed{width:0;overflow:hidden}.opencode-right-toolbar.collapsed .opencode-selected-nodes-header,.opencode-right-toolbar.collapsed .opencode-selected-nodes,.opencode-right-toolbar.collapsed .opencode-clear-all-btn{display:none}.opencode-selected-nodes-header{padding:12px 8px 8px;border-bottom:1px solid var(--oc-border-primary)}.opencode-selected-nodes-title{font-size:14px;font-weight:600;color:var(--oc-text-primary);margin-bottom:4px}.opencode-selected-nodes-desc{font-size:11px;color:var(--oc-text-placeholder);line-height:1.4}.opencode-selected-nodes{flex:1;display:flex;flex-direction:column;padding:8px;gap:6px;overflow-y:auto;overflow-x:hidden}.opencode-selected-nodes:empty:before{content:"ζš‚ζ— ι€‰δΈ­ε…ƒη΄ ";color:var(--oc-text-placeholder);font-size:12px;text-align:center;padding:20px 10px}.opencode-selected-node{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--oc-bg-main);border:1px solid var(--oc-border-primary);border-radius:6px;font-size:12px;transition:all .2s}.opencode-selected-node:hover{border-color:var(--oc-primary);box-shadow:var(--oc-shadow-primary)}.opencode-node-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.opencode-node-text{color:var(--oc-text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-node-file{color:var(--oc-text-placeholder);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-node-remove{width:18px;height:18px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;flex-shrink:0}.opencode-node-remove:hover{background:var(--oc-danger);color:#fff}.opencode-clear-all-btn{width:calc(100% - 16px);margin:8px;padding:8px 12px;border-radius:6px;border:none;background:var(--oc-danger);color:#fff;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .2s}.opencode-clear-all-btn:hover{background:var(--oc-danger-hover);transform:scale(1.02)}.opencode-session-list{width:240px;background:var(--oc-bg-secondary);border-right:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.opencode-session-list.collapsed{width:0;overflow:hidden}.opencode-session-list.collapsed .opencode-session-list-header,.opencode-session-list.collapsed .opencode-session-list-content{display:none}.opencode-session-list-header{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--oc-text-primary)}.opencode-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--oc-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-new-session-btn:hover{background:var(--oc-primary-hover);transform:scale(1.05)}.opencode-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.opencode-session-list-loading-overlay{position:absolute;inset:0;background:var(--oc-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.opencode-loading-spinner.small{width:24px;height:24px;border-width:2px}.opencode-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:transform .2s;margin-bottom:4px;color:var(--oc-text-primary)}.opencode-session-item:hover{background:var(--oc-bg-tertiary)}.opencode-session-item.active{background:var(--oc-primary);color:#fff;transition:none}.opencode-session-title{font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-session-meta{font-size:12px;opacity:.6}.opencode-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.opencode-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.opencode-session-item:hover .opencode-session-delete-btn{opacity:1}.opencode-session-delete-btn:hover{background:var(--oc-danger);color:#fff}.opencode-session-item.active .opencode-session-delete-btn{color:#ffffffb3}.opencode-session-item.active .opencode-session-delete-btn:hover{background:#fff3;color:#fff}.opencode-session-header-skeleton{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:none;justify-content:space-between;align-items:center}.opencode-session-header-skeleton.visible{display:flex}.opencode-skeleton-header-title{height:18px;width:80px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.opencode-skeleton-header-btn{width:28px;height:28px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.opencode-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.opencode-session-skeleton.visible{display:block}.opencode-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--oc-skeleton-bg)}.opencode-skeleton-title{height:16px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.opencode-skeleton-meta{height:12px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.opencode-session-empty{padding:32px 16px;text-align:center;color:var(--oc-text-placeholder);font-size:13px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.opencode-button{width:42px;height:42px;border-radius:50%;background:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px #667eea66;transition:all .3s ease;display:flex;align-items:center;justify-content:center;padding:0;position:relative}.opencode-button svg{transform:rotate(180deg) scale(1.1);transition:transform .3s ease;width:100%;height:100%;display:block}.opencode-button:hover svg{transform:rotate(180deg) scale(1.1)}.opencode-button:hover{transform:scale(1.1);box-shadow:0 6px 16px #667eea80}.opencode-button.thinking{background:linear-gradient(135deg,#667eea,#764ba2);animation:thinking-glow 1.5s ease-in-out infinite,thinking-pulse 1.5s ease-in-out infinite;box-shadow:0 0 20px #667eea99,0 0 40px #764ba266,0 0 60px #667eea33}.opencode-button.thinking svg path{fill:#fff}.opencode-button.thinking:before{content:"";position:absolute;inset:-2px;border-radius:50%;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-button.thinking:after{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 180deg,transparent,rgba(102,126,234,.3),transparent,rgba(118,75,162,.3),transparent);z-index:-2;animation:thinking-rotate 2s linear infinite reverse;filter:blur(8px)}@keyframes thinking-glow{0%,to{box-shadow:0 0 20px #667eea99,0 0 40px #764ba266,0 0 60px #667eea33}50%{box-shadow:0 0 30px #667eeacc,0 0 60px #764ba299,0 0 90px #667eea4d}}@keyframes thinking-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes thinking-pulse{0%,to{transform:scale(1)}50%{transform:scale(.95)}}.opencode-button.opencode-theme-dark{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px #667eea4d}.opencode-button.opencode-theme-dark:before{content:"";position:absolute;inset:-2px;border-radius:50%;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-button.opencode-theme-dark:hover{box-shadow:0 6px 16px #667eea66}.opencode-button.opencode-theme-dark svg path{fill:#fff}.floating-bubble{position:fixed;top:0;left:0;z-index:999999;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;will-change:transform}.floating-bubble:active{cursor:grabbing}body.floating-bubble-dragging *{pointer-events:none!important}body.floating-bubble-dragging .floating-bubble,body.floating-bubble-dragging .floating-bubble *{pointer-events:auto!important}.opencode-chrome-warmup-error-details[data-v-6b3ae44a]{margin-top:8px;padding:12px;background:var(--oc-bg-tertiary);border-radius:6px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;color:var(--oc-text-secondary);max-height:120px;overflow-y:auto;word-break:break-word}.opencode-custom-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.opencode-loading-spinner{width:32px;height:32px;border:3px solid var(--oc-border-primary);border-top-color:var(--oc-primary);border-radius:50%;animation:opencode-spin .8s linear infinite}@keyframes opencode-spin{to{transform:rotate(360deg)}}.opencode-loading-text{margin-top:12px;color:var(--oc-text-secondary);font-size:14px}.opencode-chrome-warmup-failed{position:absolute;inset:0;background:var(--oc-bg-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:15}.opencode-chrome-warmup-failed-icon{color:var(--oc-warning, #f59e0b);margin-bottom:16px}.opencode-chrome-warmup-failed-title{color:var(--oc-text-primary);font-size:18px;font-weight:600;margin-bottom:8px}.opencode-chrome-warmup-failed-text{color:var(--oc-text-secondary);font-size:14px;margin-bottom:24px;text-align:left;max-width:400px;line-height:1.6;text-align:center}.opencode-chrome-warmup-failed-text p{margin:0 0 12px;font-weight:500;color:var(--oc-text-primary)}.opencode-chrome-warmup-steps{margin:0;padding-left:20px}.opencode-chrome-warmup-steps li{margin-bottom:8px;color:var(--oc-text-secondary);font-size:13px;line-height:1.5}.opencode-chrome-warmup-steps li:last-child{margin-bottom:0}.opencode-chrome-warmup-code{display:inline-block;background:var(--oc-bg-tertiary);color:var(--oc-primary);padding:2px 6px;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;font-weight:500;word-break:break-all;margin:0 2px}.opencode-chrome-warmup-failed-actions{display:flex;gap:12px}.opencode-chrome-warmup-failed-btn{padding:10px 24px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-chrome-warmup-failed-btn.primary{background:var(--oc-primary);color:#fff;box-shadow:var(--oc-shadow-primary)}.opencode-chrome-warmup-failed-btn.primary:hover:not(:disabled){background:var(--oc-primary-hover);transform:translateY(-1px);box-shadow:var(--oc-shadow-primary-hover)}.opencode-chrome-warmup-failed-btn.primary:active:not(:disabled){transform:translateY(0)}.opencode-chrome-warmup-failed-btn.primary:disabled{opacity:.6;cursor:not-allowed}
1
+ .opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.opencode-chat.no-transition,.opencode-chat.no-transition.open{transition:none!important}.opencode-chat.minimized{width:300px;height:300px}.opencode-chat.minimized .opencode-iframe-container{margin-top:-146px}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.opencode-notification:before{content:"πŸ’‘";font-size:16px}.opencode-dialog-overlay{position:fixed;inset:0;background:var(--oc-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opencode-dialog{background:var(--oc-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--oc-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.opencode-dialog-content{margin-bottom:20px}.opencode-dialog-message{font-size:15px;color:var(--oc-text-primary);line-height:1.5}.opencode-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.opencode-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-dialog-btn.cancel{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-dialog-btn.cancel:hover{background:var(--oc-text-primary);color:var(--oc-bg-main)}.opencode-dialog-btn.confirm{background:var(--oc-danger);color:#fff}.opencode-dialog-btn.confirm:hover{background:var(--oc-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.opencode-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-page-notification:before{content:"πŸ’‘";font-size:16px}.opencode-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}#vue-inspector-container{display:none!important}.opencode-element-tooltip{position:fixed;background:var(--oc-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--oc-shadow-md);max-width:300px;pointer-events:none}.opencode-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.opencode-tooltip-file{font-size:11px;color:var(--oc-text-placeholder);word-break:break-all}.opencode-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media (max-width:768px){.opencode-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}.opencode-iframe-container{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;margin-top:-42px}.opencode-loading-overlay{position:absolute;inset:0;background:var(--oc-overlay-bg);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10;transition:opacity .3s ease}.opencode-loading-overlay.visible{display:flex}.opencode-loading-spinner{width:40px;height:40px;border:3px solid var(--oc-border-primary);border-top-color:var(--oc-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.opencode-loading-text{margin-top:12px;font-size:14px;color:var(--oc-text-placeholder)}.opencode-error-overlay{position:absolute;inset:0;z-index:15;margin-top:42px;display:none}.opencode-error-overlay.visible{display:flex}.opencode-empty-state-overlay{position:absolute;inset:0;background:var(--oc-bg-secondary);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:5;transition:opacity .3s ease;margin-top:42px}.opencode-empty-state-overlay.visible{display:flex}.opencode-empty-state-icon{color:var(--oc-text-placeholder);margin-bottom:16px}.opencode-empty-state-text{color:var(--oc-text-primary);font-size:16px;font-weight:500;margin-bottom:24px}.opencode-empty-state-btn{padding:10px 24px;border-radius:8px;border:none;background:var(--oc-primary);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:var(--oc-shadow-primary)}.opencode-empty-state-btn:hover{background:var(--oc-primary-hover);transform:translateY(-1px);box-shadow:var(--oc-shadow-primary-hover)}.opencode-empty-state-btn:active{transform:translateY(0)}.opencode-iframe{width:100%;height:100%;border:none}.opencode-chat-header{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;background:var(--oc-bg-secondary);border-bottom:1px solid var(--oc-border-primary);z-index:5}.opencode-chat-header-left{display:flex;align-items:center;gap:4px}.opencode-chat-header-title{font-size:14px;font-weight:600;color:var(--oc-text-primary);position:absolute;left:50%;transform:translate(-50%)}.opencode-chat-header-actions{display:flex;gap:4px}.opencode-header-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-header-btn:hover{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-header-btn.close:hover{background:var(--oc-danger);color:#fff}.opencode-header-btn.select-btn.active,.opencode-header-btn.session-toggle.active{background:var(--oc-primary);color:#fff}.opencode-select-mode-hint{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:10px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-radius:12px;font-size:14px;font-weight:500;box-shadow:0 6px 20px #ef444480,0 0 0 3px #ef44444d;z-index:9999999;display:none;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.3)}.opencode-select-mode-hint.visible{display:flex;animation:slideDown .3s ease,pulseHint 2s ease-in-out infinite}.opencode-hint-shortcut{padding:4px 10px;background:#ffffff40;border-radius:6px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.4)}@keyframes pulseHint{0%,to{box-shadow:0 6px 20px #ef444480,0 0 0 3px #ef44444d}50%{box-shadow:0 6px 20px #ef444499,0 0 0 6px #ef444466}}.opencode-right-toolbar{width:140px;background:var(--oc-bg-secondary);border-left:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease;overflow:hidden}.opencode-right-toolbar.collapsed{width:0;overflow:hidden}.opencode-right-toolbar.collapsed .opencode-selected-nodes-header,.opencode-right-toolbar.collapsed .opencode-selected-nodes,.opencode-right-toolbar.collapsed .opencode-clear-all-btn{display:none}.opencode-selected-nodes-header{padding:12px 8px 8px;border-bottom:1px solid var(--oc-border-primary)}.opencode-selected-nodes-title{font-size:14px;font-weight:600;color:var(--oc-text-primary);margin-bottom:4px}.opencode-selected-nodes-desc{font-size:11px;color:var(--oc-text-placeholder);line-height:1.4}.opencode-selected-nodes{flex:1;display:flex;flex-direction:column;padding:8px;gap:6px;overflow-y:auto;overflow-x:hidden}.opencode-selected-nodes:empty:before{content:"ζš‚ζ— ι€‰δΈ­ε…ƒη΄ ";color:var(--oc-text-placeholder);font-size:12px;text-align:center;padding:20px 10px}.opencode-selected-node{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--oc-bg-main);border:1px solid var(--oc-border-primary);border-radius:6px;font-size:12px;transition:all .2s}.opencode-selected-node:hover{border-color:var(--oc-primary);box-shadow:var(--oc-shadow-primary)}.opencode-node-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.opencode-node-text{color:var(--oc-text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-node-file{color:var(--oc-text-placeholder);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-node-remove{width:18px;height:18px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;flex-shrink:0}.opencode-node-remove:hover{background:var(--oc-danger);color:#fff}.opencode-clear-all-btn{width:calc(100% - 16px);margin:8px;padding:8px 12px;border-radius:6px;border:none;background:var(--oc-danger);color:#fff;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .2s}.opencode-clear-all-btn:hover{background:var(--oc-danger-hover);transform:scale(1.02)}.opencode-session-list{width:240px;background:var(--oc-bg-secondary);border-right:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.opencode-session-list.collapsed{width:0;overflow:hidden}.opencode-session-list.collapsed .opencode-session-list-header,.opencode-session-list.collapsed .opencode-session-list-content{display:none}.opencode-session-list-header{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--oc-text-primary)}.opencode-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--oc-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-new-session-btn:hover{background:var(--oc-primary-hover);transform:scale(1.05)}.opencode-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.opencode-session-list-loading-overlay{position:absolute;inset:0;background:var(--oc-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.opencode-loading-spinner.small{width:24px;height:24px;border-width:2px}.opencode-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:transform .2s;margin-bottom:4px;color:var(--oc-text-primary)}.opencode-session-item:hover{background:var(--oc-bg-tertiary)}.opencode-session-item.active{background:var(--oc-primary);color:#fff;transition:none}.opencode-session-title{font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-session-meta{font-size:12px;opacity:.6}.opencode-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.opencode-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.opencode-session-item:hover .opencode-session-delete-btn{opacity:1}.opencode-session-delete-btn:hover{background:var(--oc-danger);color:#fff}.opencode-session-item.active .opencode-session-delete-btn{color:#ffffffb3}.opencode-session-item.active .opencode-session-delete-btn:hover{background:#fff3;color:#fff}.opencode-session-header-skeleton{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:none;justify-content:space-between;align-items:center}.opencode-session-header-skeleton.visible{display:flex}.opencode-skeleton-header-title{height:18px;width:80px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.opencode-skeleton-header-btn{width:28px;height:28px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.opencode-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.opencode-session-skeleton.visible{display:block}.opencode-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--oc-skeleton-bg)}.opencode-skeleton-title{height:16px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.opencode-skeleton-meta{height:12px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.opencode-session-empty{padding:32px 16px;text-align:center;color:var(--oc-text-placeholder);font-size:13px}.opencode-thinking-loading{display:inline-block;width:12px;height:12px;margin-right:6px;border:2px solid var(--oc-border-secondary);border-top-color:var(--oc-text-secondary);border-radius:50%;animation:thinking-spin .8s linear infinite;vertical-align:middle}.opencode-session-item.active .opencode-thinking-loading{border-color:#ffffff4d;border-top-color:#ffffffe6}@keyframes thinking-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.opencode-button{width:42px;height:42px;border-radius:50%;background:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px #667eea66;transition:all .3s ease;display:flex;align-items:center;justify-content:center;padding:0;position:relative}.opencode-button svg{transform:rotate(180deg) scale(1.1);transition:transform .3s ease;width:100%;height:100%;display:block}.opencode-button:hover svg{transform:rotate(180deg) scale(1.1)}.opencode-button:hover{transform:scale(1.1);box-shadow:0 6px 16px #667eea80}.opencode-button.thinking{background:linear-gradient(135deg,#667eea,#764ba2);animation:thinking-glow 1.5s ease-in-out infinite,thinking-pulse 1.5s ease-in-out infinite;box-shadow:0 0 20px #667eea99,0 0 40px #764ba266,0 0 60px #667eea33}.opencode-button.thinking svg path{fill:#fff}.opencode-button.thinking:before{content:"";position:absolute;inset:-2px;border-radius:50%;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-button.thinking:after{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 180deg,transparent,rgba(102,126,234,.3),transparent,rgba(118,75,162,.3),transparent);z-index:-2;animation:thinking-rotate 2s linear infinite reverse;filter:blur(8px)}@keyframes thinking-glow{0%,to{box-shadow:0 0 20px #667eea99,0 0 40px #764ba266,0 0 60px #667eea33}50%{box-shadow:0 0 30px #667eeacc,0 0 60px #764ba299,0 0 90px #667eea4d}}@keyframes thinking-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes thinking-pulse{0%,to{transform:scale(1)}50%{transform:scale(.85)}}.opencode-button.opencode-theme-dark{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px #667eea4d}.opencode-button.opencode-theme-dark:before{content:"";position:absolute;inset:-2px;border-radius:50%;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-button.opencode-theme-dark:hover{box-shadow:0 6px 16px #667eea66}.opencode-button.opencode-theme-dark svg path{fill:#fff}.floating-bubble{position:fixed;top:0;left:0;z-index:999999;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;will-change:transform}.floating-bubble:active{cursor:grabbing}body.floating-bubble-dragging *{pointer-events:none!important}body.floating-bubble-dragging .floating-bubble,body.floating-bubble-dragging .floating-bubble *{pointer-events:auto!important}.opencode-chrome-warmup-error-details[data-v-6b3ae44a]{margin-top:8px;padding:12px;background:var(--oc-bg-tertiary);border-radius:6px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;color:var(--oc-text-secondary);max-height:120px;overflow-y:auto;word-break:break-word}.opencode-custom-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.opencode-loading-spinner{width:32px;height:32px;border:3px solid var(--oc-border-primary);border-top-color:var(--oc-primary);border-radius:50%;animation:opencode-spin .8s linear infinite}@keyframes opencode-spin{to{transform:rotate(360deg)}}.opencode-loading-text{margin-top:12px;color:var(--oc-text-secondary);font-size:14px}.opencode-chrome-warmup-failed{position:absolute;inset:0;background:var(--oc-bg-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:15}.opencode-chrome-warmup-failed-icon{color:var(--oc-warning, #f59e0b);margin-bottom:16px}.opencode-chrome-warmup-failed-title{color:var(--oc-text-primary);font-size:18px;font-weight:600;margin-bottom:8px}.opencode-chrome-warmup-failed-text{color:var(--oc-text-secondary);font-size:14px;margin-bottom:24px;text-align:left;max-width:400px;line-height:1.6;text-align:center}.opencode-chrome-warmup-failed-text p{margin:0 0 12px;font-weight:500;color:var(--oc-text-primary)}.opencode-chrome-warmup-steps{margin:0;padding-left:20px}.opencode-chrome-warmup-steps li{margin-bottom:8px;color:var(--oc-text-secondary);font-size:13px;line-height:1.5}.opencode-chrome-warmup-steps li:last-child{margin-bottom:0}.opencode-chrome-warmup-code{display:inline-block;background:var(--oc-bg-tertiary);color:var(--oc-primary);padding:2px 6px;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;font-weight:500;word-break:break-all;margin:0 2px}.opencode-chrome-warmup-failed-actions{display:flex;gap:12px}.opencode-chrome-warmup-failed-btn{padding:10px 24px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-chrome-warmup-failed-btn.primary{background:var(--oc-primary);color:#fff;box-shadow:var(--oc-shadow-primary)}.opencode-chrome-warmup-failed-btn.primary:hover:not(:disabled){background:var(--oc-primary-hover);transform:translateY(-1px);box-shadow:var(--oc-shadow-primary-hover)}.opencode-chrome-warmup-failed-btn.primary:active:not(:disabled){transform:translateY(0)}.opencode-chrome-warmup-failed-btn.primary:disabled{opacity:.6;cursor:not-allowed}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-opencode-assistant",
3
- "version": "1.0.27",
3
+ "version": "1.0.29",
4
4
  "description": "Embed OpenCode Web UI in your Vite dev server for real-time code modification and preview",
5
5
  "type": "module",
6
6
  "main": "lib/index.js",
@@ -36,9 +36,9 @@
36
36
  "license": "MIT",
37
37
  "dependencies": {
38
38
  "unplugin-vue-inspector": "^2.4.0",
39
- "@vite-plugin-opencode-assistant/opencode": "1.0.27",
40
- "@vite-plugin-opencode-assistant/components": "1.0.27",
41
- "@vite-plugin-opencode-assistant/shared": "1.0.27"
39
+ "@vite-plugin-opencode-assistant/components": "1.0.29",
40
+ "@vite-plugin-opencode-assistant/shared": "1.0.29",
41
+ "@vite-plugin-opencode-assistant/opencode": "1.0.29"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "vite": ">=4.0.0"