vibecodingmachine-core 1.0.2 → 2025.11.2-7.1239

package/src/ui/ButtonComponents.js

@@ -1,247 +1,247 @@
-/**
- * Shared UI Button Components
- * Used by both electron app and VSCode extension
- */
-
-// Button component for autonomous mode
-export function createAutonomousButton({
-  autonomousMode = false,
-  isPaused = false,
-  onClick,
-  className = '',
-  style = {}
-}) {
-  const button = document.createElement('button');
-  button.className = `autonomous-button ${autonomousMode ? 'active' : ''} ${className}`;
-  button.textContent = autonomousMode ? '🤖 Stop Auto' : '🤖 Start Auto';
-  button.disabled = isPaused;
-  button.title = autonomousMode ? 'Stop autonomous development' : 'Start autonomous feature implementation';
-
-  // Apply shared styles
-  Object.assign(button.style, {
-    padding: '8px 16px',
-    backgroundColor: autonomousMode ? '#d83b01' : '#68217a',
-    color: 'white',
-    border: 'none',
-    borderRadius: '6px',
-    fontSize: '14px',
-    cursor: isPaused ? 'not-allowed' : 'pointer',
-    transition: 'all 0.2s',
-    fontWeight: '500',
-    ...style
-  });
-
-  button.addEventListener('click', onClick);
-  return button;
-}
-
-// Button component for pause/resume
-export function createPauseButton({
-  isPaused = false,
-  onClick,
-  className = '',
-  style = {}
-}) {
-  const button = document.createElement('button');
-  button.className = `pause-button ${isPaused ? 'paused' : ''} ${className}`;
-  button.textContent = isPaused ? '▶️ Resume' : '⏸️ Pause (Esc)';
-  button.title = isPaused ? 'Resume autonomous development' : 'Pause autonomous development (Esc)';
-
-  // Apply shared styles
-  Object.assign(button.style, {
-    padding: '8px 16px',
-    backgroundColor: isPaused ? '#28a745' : '#ffc107',
-    color: isPaused ? 'white' : '#000',
-    border: 'none',
-    borderRadius: '6px',
-    fontSize: '14px',
-    cursor: 'pointer',
-    transition: 'all 0.2s',
-    ...style
-  });
-
-  button.addEventListener('click', onClick);
-  return button;
-}
-
-// Button component for stop
-export function createStopButton({
-  autonomousMode = false,
-  onClick,
-  className = '',
-  style = {}
-}) {
-  const button = document.createElement('button');
-  button.className = `stop-button ${className}`;
-  button.textContent = '🛑 Stop';
-  button.disabled = !autonomousMode;
-  button.title = 'Stop autonomous development completely';
-
-  // Apply shared styles
-  Object.assign(button.style, {
-    padding: '8px 16px',
-    backgroundColor: autonomousMode ? '#dc3545' : '#6c757d',
-    color: 'white',
-    border: 'none',
-    borderRadius: '6px',
-    fontSize: '14px',
-    cursor: autonomousMode ? 'pointer' : 'not-allowed',
-    transition: 'all 0.2s',
-    ...style
-  });
-
-  button.addEventListener('click', onClick);
-  return button;
-}
-
-// Button component for check quota
-export function createCheckQuotaButton({
-  isCheckingQuota = false,
-  onClick,
-  className = '',
-  style = {}
-}) {
-  const button = document.createElement('button');
-  button.className = `check-quota-button ${className}`;
-  button.textContent = isCheckingQuota ? 'Checking...' : '🔍 Check Quota';
-  button.disabled = isCheckingQuota;
-  button.title = 'Check for quota warnings and switch to available IDE';
-
-  // Apply shared styles
-  Object.assign(button.style, {
-    padding: '8px 16px',
-    backgroundColor: isCheckingQuota ? '#6c757d' : '#17a2b8',
-    color: 'white',
-    border: 'none',
-    borderRadius: '6px',
-    fontSize: '14px',
-    cursor: isCheckingQuota ? 'not-allowed' : 'pointer',
-    transition: 'all 0.2s',
-    ...style
-  });
-
-  button.addEventListener('click', onClick);
-  return button;
-}
-
-// Button component for open IDE
-export function createOpenIdeButton({
-  isOpeningIde = false,
-  onClick,
-  className = '',
-  style = {}
-}) {
-  const button = document.createElement('button');
-  button.className = `open-ide-button ${className}`;
-  button.textContent = isOpeningIde ? 'Opening...' : 'Open IDE';
-  button.disabled = isOpeningIde;
-  button.title = isOpeningIde ? 'Opening IDE...' : 'Open IDE (dev mode)';
-
-  // Apply shared styles
-  Object.assign(button.style, {
-    padding: '8px 16px',
-    backgroundColor: isOpeningIde ? '#6c757d' : '#28a745',
-    color: 'white',
-    border: 'none',
-    borderRadius: '6px',
-    fontSize: '14px',
-    cursor: isOpeningIde ? 'not-allowed' : 'pointer',
-    transition: 'all 0.2s',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px',
-    ...style
-  });
-
-  button.addEventListener('click', onClick);
-  return button;
-}
-
-// IDE selector button
-export function createIdeButton({
-  ide,
-  isActive = false,
-  onClick,
-  className = '',
-  style = {}
-}) {
-  const button = document.createElement('button');
-  button.className = `ide-button ${isActive ? 'active' : ''} ${className}`;
-  button.textContent = ide === 'vscode' ? 'VS Code' : ide.charAt(0).toUpperCase() + ide.slice(1);
-  button.dataset.ide = ide;
-  button.title = `Select ${ide}`;
-
-  // Apply shared styles
-  Object.assign(button.style, {
-    padding: '8px 16px',
-    backgroundColor: isActive ? '#68217a' : '#007acc',
-    color: 'white',
-    border: 'none',
-    borderRadius: '6px',
-    fontSize: '14px',
-    cursor: 'pointer',
-    transition: 'all 0.2s',
-    margin: '0 5px',
-    ...style
-  });
-
-  button.addEventListener('click', onClick);
-  return button;
-}
-
-// Container for control buttons
-export function createControlButtonContainer({
-  className = '',
-  style = {}
-}) {
-  const container = document.createElement('div');
-  container.className = `control-buttons ${className}`;
-
-  // Apply shared styles
-  Object.assign(container.style, {
-    display: 'flex',
-    gap: '10px',
-    marginTop: '10px',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    ...style
-  });
-
-  return container;
-}
-
-// Update button states
-export function updateAutonomousButton(button, autonomousMode, isPaused) {
-  button.textContent = autonomousMode ? '🤖 Stop Auto' : '🤖 Start Auto';
-  button.className = `autonomous-button ${autonomousMode ? 'active' : ''}`;
-  button.disabled = isPaused;
-  button.style.backgroundColor = autonomousMode ? '#d83b01' : '#68217a';
-  button.style.cursor = isPaused ? 'not-allowed' : 'pointer';
-}
-
-export function updatePauseButton(button, isPaused) {
-  button.textContent = isPaused ? '▶️ Resume' : '⏸️ Pause (Esc)';
-  button.className = `pause-button ${isPaused ? 'paused' : ''}`;
-  button.style.backgroundColor = isPaused ? '#28a745' : '#ffc107';
-  button.style.color = isPaused ? 'white' : '#000';
-}
-
-export function updateStopButton(button, autonomousMode) {
-  button.disabled = !autonomousMode;
-  button.style.backgroundColor = autonomousMode ? '#dc3545' : '#6c757d';
-  button.style.cursor = autonomousMode ? 'pointer' : 'not-allowed';
-}
-
-export function updateCheckQuotaButton(button, isCheckingQuota) {
-  button.textContent = isCheckingQuota ? 'Checking...' : '🔍 Check Quota';
-  button.disabled = isCheckingQuota;
-  button.style.backgroundColor = isCheckingQuota ? '#6c757d' : '#17a2b8';
-  button.style.cursor = isCheckingQuota ? 'not-allowed' : 'pointer';
-}
-
-export function updateOpenIdeButton(button, isOpeningIde) {
-  button.textContent = isOpeningIde ? 'Opening...' : 'Open IDE';
-  button.disabled = isOpeningIde;
-  button.style.backgroundColor = isOpeningIde ? '#6c757d' : '#28a745';
-  button.style.cursor = isOpeningIde ? 'not-allowed' : 'pointer';
-}
+/**
+ * Shared UI Button Components
+ * Used by both electron app and VSCode extension
+ */
+
+// Button component for autonomous mode
+export function createAutonomousButton({
+  autonomousMode = false,
+  isPaused = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `autonomous-button ${autonomousMode ? 'active' : ''} ${className}`;
+  button.textContent = autonomousMode ? '🤖 Stop Auto' : '🤖 Start Auto';
+  button.disabled = isPaused;
+  button.title = autonomousMode ? 'Stop autonomous development' : 'Start autonomous feature implementation';
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: autonomousMode ? '#d83b01' : '#68217a',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: isPaused ? 'not-allowed' : 'pointer',
+    transition: 'all 0.2s',
+    fontWeight: '500',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// Button component for pause/resume
+export function createPauseButton({
+  isPaused = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `pause-button ${isPaused ? 'paused' : ''} ${className}`;
+  button.textContent = isPaused ? '▶️ Resume' : '⏸️ Pause (Esc)';
+  button.title = isPaused ? 'Resume autonomous development' : 'Pause autonomous development (Esc)';
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: isPaused ? '#28a745' : '#ffc107',
+    color: isPaused ? 'white' : '#000',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: 'pointer',
+    transition: 'all 0.2s',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// Button component for stop
+export function createStopButton({
+  autonomousMode = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `stop-button ${className}`;
+  button.textContent = '🛑 Stop';
+  button.disabled = !autonomousMode;
+  button.title = 'Stop autonomous development completely';
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: autonomousMode ? '#dc3545' : '#6c757d',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: autonomousMode ? 'pointer' : 'not-allowed',
+    transition: 'all 0.2s',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// Button component for check quota
+export function createCheckQuotaButton({
+  isCheckingQuota = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `check-quota-button ${className}`;
+  button.textContent = isCheckingQuota ? 'Checking...' : '🔍 Check Quota';
+  button.disabled = isCheckingQuota;
+  button.title = 'Check for quota warnings and switch to available IDE';
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: isCheckingQuota ? '#6c757d' : '#17a2b8',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: isCheckingQuota ? 'not-allowed' : 'pointer',
+    transition: 'all 0.2s',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// Button component for open IDE
+export function createOpenIdeButton({
+  isOpeningIde = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `open-ide-button ${className}`;
+  button.textContent = isOpeningIde ? 'Opening...' : 'Open IDE';
+  button.disabled = isOpeningIde;
+  button.title = isOpeningIde ? 'Opening IDE...' : 'Open IDE (dev mode)';
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: isOpeningIde ? '#6c757d' : '#28a745',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: isOpeningIde ? 'not-allowed' : 'pointer',
+    transition: 'all 0.2s',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// IDE selector button
+export function createIdeButton({
+  ide,
+  isActive = false,
+  onClick,
+  className = '',
+  style = {}
+}) {
+  const button = document.createElement('button');
+  button.className = `ide-button ${isActive ? 'active' : ''} ${className}`;
+  button.textContent = ide === 'vscode' ? 'VS Code' : ide.charAt(0).toUpperCase() + ide.slice(1);
+  button.dataset.ide = ide;
+  button.title = `Select ${ide}`;
+
+  // Apply shared styles
+  Object.assign(button.style, {
+    padding: '8px 16px',
+    backgroundColor: isActive ? '#68217a' : '#007acc',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: 'pointer',
+    transition: 'all 0.2s',
+    margin: '0 5px',
+    ...style
+  });
+
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+// Container for control buttons
+export function createControlButtonContainer({
+  className = '',
+  style = {}
+}) {
+  const container = document.createElement('div');
+  container.className = `control-buttons ${className}`;
+
+  // Apply shared styles
+  Object.assign(container.style, {
+    display: 'flex',
+    gap: '10px',
+    marginTop: '10px',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    ...style
+  });
+
+  return container;
+}
+
+// Update button states
+export function updateAutonomousButton(button, autonomousMode, isPaused) {
+  button.textContent = autonomousMode ? '🤖 Stop Auto' : '🤖 Start Auto';
+  button.className = `autonomous-button ${autonomousMode ? 'active' : ''}`;
+  button.disabled = isPaused;
+  button.style.backgroundColor = autonomousMode ? '#d83b01' : '#68217a';
+  button.style.cursor = isPaused ? 'not-allowed' : 'pointer';
+}
+
+export function updatePauseButton(button, isPaused) {
+  button.textContent = isPaused ? '▶️ Resume' : '⏸️ Pause (Esc)';
+  button.className = `pause-button ${isPaused ? 'paused' : ''}`;
+  button.style.backgroundColor = isPaused ? '#28a745' : '#ffc107';
+  button.style.color = isPaused ? 'white' : '#000';
+}
+
+export function updateStopButton(button, autonomousMode) {
+  button.disabled = !autonomousMode;
+  button.style.backgroundColor = autonomousMode ? '#dc3545' : '#6c757d';
+  button.style.cursor = autonomousMode ? 'pointer' : 'not-allowed';
+}
+
+export function updateCheckQuotaButton(button, isCheckingQuota) {
+  button.textContent = isCheckingQuota ? 'Checking...' : '🔍 Check Quota';
+  button.disabled = isCheckingQuota;
+  button.style.backgroundColor = isCheckingQuota ? '#6c757d' : '#17a2b8';
+  button.style.cursor = isCheckingQuota ? 'not-allowed' : 'pointer';
+}
+
+export function updateOpenIdeButton(button, isOpeningIde) {
+  button.textContent = isOpeningIde ? 'Opening...' : 'Open IDE';
+  button.disabled = isOpeningIde;
+  button.style.backgroundColor = isOpeningIde ? '#6c757d' : '#28a745';
+  button.style.cursor = isOpeningIde ? 'not-allowed' : 'pointer';
+}