crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/workbench/terminal/TerminalManager.tsx

@@ -0,0 +1,68 @@
+import { memo, useEffect } from 'react';
+import type { Terminal as XTerm } from '@xterm/xterm';
+import { createScopedLogger } from '~/utils/logger';
+
+const logger = createScopedLogger('TerminalManager');
+
+interface TerminalManagerProps {
+  terminal: XTerm | null;
+  isActive: boolean;
+  onReconnect?: () => void;
+}
+
+export const TerminalManager = memo(({ terminal, isActive }: TerminalManagerProps) => {
+  // Simplified terminal manager - removed aggressive health checking that was causing issues
+
+  // Basic terminal event handling - no aggressive monitoring
+  useEffect(() => {
+    if (!terminal) {
+      return undefined;
+    }
+
+    const disposables: Array<{ dispose: () => void }> = [];
+
+    // Set up paste handler via terminal's onKey
+    const onPasteKeyDisposable = terminal.onKey((e) => {
+      // Detect Ctrl+V or Cmd+V
+      if ((e.domEvent.ctrlKey || e.domEvent.metaKey) && e.domEvent.key === 'v') {
+        if (!isActive) {
+          return;
+        }
+
+        // Read from clipboard if available
+        if (navigator.clipboard && navigator.clipboard.readText) {
+          navigator.clipboard
+            .readText()
+            .then((text) => {
+              if (text && terminal) {
+                terminal.paste(text);
+              }
+            })
+            .catch((err) => {
+              logger.warn('Failed to read clipboard:', err);
+            });
+        }
+      }
+    });
+
+    disposables.push(onPasteKeyDisposable);
+
+    return () => {
+      disposables.forEach((d) => d.dispose());
+    };
+  }, [terminal, isActive]);
+
+  // Auto-focus terminal when it becomes active
+  useEffect(() => {
+    if (isActive && terminal) {
+      // Small delay to ensure DOM is ready
+      setTimeout(() => {
+        terminal.focus();
+      }, 100);
+    }
+  }, [isActive, terminal]);
+
+  return null; // This is a utility component, no UI
+});
+
+TerminalManager.displayName = 'TerminalManager';

tools/bolt.diy/app/components/workbench/terminal/TerminalTabs.tsx

@@ -0,0 +1,277 @@
+import { useStore } from '@nanostores/react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { Panel, type ImperativePanelHandle } from 'react-resizable-panels';
+import { IconButton } from '~/components/ui/IconButton';
+import { shortcutEventEmitter } from '~/lib/hooks';
+import { themeStore } from '~/lib/stores/theme';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { classNames } from '~/utils/classNames';
+import { Terminal, type TerminalRef } from './Terminal';
+import { TerminalManager } from './TerminalManager';
+import { createScopedLogger } from '~/utils/logger';
+
+const logger = createScopedLogger('Terminal');
+
+const MAX_TERMINALS = 3;
+export const DEFAULT_TERMINAL_SIZE = 25;
+
+export const TerminalTabs = memo(() => {
+  const showTerminal = useStore(workbenchStore.showTerminal);
+  const theme = useStore(themeStore);
+
+  const terminalRefs = useRef<Map<number, TerminalRef>>(new Map());
+  const terminalPanelRef = useRef<ImperativePanelHandle>(null);
+  const terminalToggledByShortcut = useRef(false);
+
+  const [activeTerminal, setActiveTerminal] = useState(0);
+  const [terminalCount, setTerminalCount] = useState(0);
+
+  const addTerminal = () => {
+    if (terminalCount < MAX_TERMINALS) {
+      setTerminalCount(terminalCount + 1);
+      setActiveTerminal(terminalCount);
+    }
+  };
+
+  const closeTerminal = useCallback(
+    (index: number) => {
+      if (index === 0) {
+        return;
+      } // Can't close bolt terminal
+
+      const terminalRef = terminalRefs.current.get(index);
+
+      if (terminalRef?.getTerminal) {
+        const terminal = terminalRef.getTerminal();
+
+        if (terminal) {
+          workbenchStore.detachTerminal(terminal);
+        }
+      }
+
+      // Remove the terminal from refs
+      terminalRefs.current.delete(index);
+
+      // Adjust terminal count and active terminal
+      setTerminalCount(terminalCount - 1);
+
+      if (activeTerminal === index) {
+        setActiveTerminal(Math.max(0, index - 1));
+      } else if (activeTerminal > index) {
+        setActiveTerminal(activeTerminal - 1);
+      }
+    },
+    [activeTerminal, terminalCount],
+  );
+
+  useEffect(() => {
+    return () => {
+      terminalRefs.current.forEach((ref, index) => {
+        if (index > 0 && ref?.getTerminal) {
+          const terminal = ref.getTerminal();
+
+          if (terminal) {
+            workbenchStore.detachTerminal(terminal);
+          }
+        }
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    const { current: terminal } = terminalPanelRef;
+
+    if (!terminal) {
+      return;
+    }
+
+    const isCollapsed = terminal.isCollapsed();
+
+    if (!showTerminal && !isCollapsed) {
+      terminal.collapse();
+    } else if (showTerminal && isCollapsed) {
+      terminal.resize(DEFAULT_TERMINAL_SIZE);
+    }
+
+    terminalToggledByShortcut.current = false;
+  }, [showTerminal]);
+
+  useEffect(() => {
+    const unsubscribeFromEventEmitter = shortcutEventEmitter.on('toggleTerminal', () => {
+      terminalToggledByShortcut.current = true;
+    });
+
+    const unsubscribeFromThemeStore = themeStore.subscribe(() => {
+      terminalRefs.current.forEach((ref) => {
+        ref?.reloadStyles();
+      });
+    });
+
+    return () => {
+      unsubscribeFromEventEmitter();
+      unsubscribeFromThemeStore();
+    };
+  }, []);
+
+  return (
+    <Panel
+      ref={terminalPanelRef}
+      defaultSize={showTerminal ? DEFAULT_TERMINAL_SIZE : 0}
+      minSize={10}
+      collapsible
+      onExpand={() => {
+        if (!terminalToggledByShortcut.current) {
+          workbenchStore.toggleTerminal(true);
+        }
+      }}
+      onCollapse={() => {
+        if (!terminalToggledByShortcut.current) {
+          workbenchStore.toggleTerminal(false);
+        }
+      }}
+    >
+      <div className="h-full">
+        <div className="bg-bolt-elements-terminals-background h-full flex flex-col">
+          <div className="flex items-center bg-bolt-elements-background-depth-2 border-y border-bolt-elements-borderColor gap-1.5 min-h-[34px] p-2">
+            {Array.from({ length: terminalCount + 1 }, (_, index) => {
+              const isActive = activeTerminal === index;
+
+              return (
+                <React.Fragment key={index}>
+                  {index == 0 ? (
+                    <button
+                      key={index}
+                      className={classNames(
+                        'flex items-center text-sm cursor-pointer gap-1.5 px-3 py-2 h-full whitespace-nowrap rounded-full',
+                        {
+                          'bg-bolt-elements-terminals-buttonBackground text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary':
+                            isActive,
+                          'bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary hover:bg-bolt-elements-terminals-buttonBackground':
+                            !isActive,
+                        },
+                      )}
+                      onClick={() => setActiveTerminal(index)}
+                    >
+                      <div className="i-ph:terminal-window-duotone text-lg" />
+                      Bolt Terminal
+                    </button>
+                  ) : (
+                    <React.Fragment>
+                      <button
+                        key={index}
+                        className={classNames(
+                          'flex items-center text-sm cursor-pointer gap-1.5 px-3 py-2 h-full whitespace-nowrap rounded-full',
+                          {
+                            'bg-bolt-elements-terminals-buttonBackground text-bolt-elements-textPrimary': isActive,
+                            'bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary hover:bg-bolt-elements-terminals-buttonBackground':
+                              !isActive,
+                          },
+                        )}
+                        onClick={() => setActiveTerminal(index)}
+                      >
+                        <div className="i-ph:terminal-window-duotone text-lg" />
+                        Terminal {terminalCount > 1 && index}
+                        <button
+                          className="bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary hover:bg-transparent rounded"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            closeTerminal(index);
+                          }}
+                        >
+                          <div className="i-ph:x text-xs" />
+                        </button>
+                      </button>
+                    </React.Fragment>
+                  )}
+                </React.Fragment>
+              );
+            })}
+            {terminalCount < MAX_TERMINALS && <IconButton icon="i-ph:plus" size="md" onClick={addTerminal} />}
+            <IconButton
+              icon="i-ph:arrow-clockwise"
+              title="Reset Terminal"
+              size="md"
+              onClick={() => {
+                const ref = terminalRefs.current.get(activeTerminal);
+
+                if (ref?.getTerminal()) {
+                  const terminal = ref.getTerminal()!;
+                  terminal.clear();
+                  terminal.focus();
+
+                  if (activeTerminal === 0) {
+                    workbenchStore.attachBoltTerminal(terminal);
+                  } else {
+                    workbenchStore.attachTerminal(terminal);
+                  }
+                }
+              }}
+            />
+            <IconButton
+              className="ml-auto"
+              icon="i-ph:caret-down"
+              title="Close"
+              size="md"
+              onClick={() => workbenchStore.toggleTerminal(false)}
+            />
+          </div>
+          {Array.from({ length: terminalCount + 1 }, (_, index) => {
+            const isActive = activeTerminal === index;
+
+            logger.debug(`Starting bolt terminal [${index}]`);
+
+            if (index == 0) {
+              return (
+                <React.Fragment key={`terminal-container-${index}`}>
+                  <Terminal
+                    key={`terminal-${index}`}
+                    id={`terminal_${index}`}
+                    className={classNames('h-full overflow-hidden modern-scrollbar-invert', {
+                      hidden: !isActive,
+                    })}
+                    ref={(ref) => {
+                      if (ref) {
+                        terminalRefs.current.set(index, ref);
+                      }
+                    }}
+                    onTerminalReady={(terminal) => workbenchStore.attachBoltTerminal(terminal)}
+                    onTerminalResize={(cols, rows) => workbenchStore.onTerminalResize(cols, rows)}
+                    theme={theme}
+                  />
+                  <TerminalManager
+                    terminal={terminalRefs.current.get(index)?.getTerminal() || null}
+                    isActive={isActive}
+                  />
+                </React.Fragment>
+              );
+            } else {
+              return (
+                <React.Fragment key={`terminal-container-${index}`}>
+                  <Terminal
+                    key={`terminal-${index}`}
+                    id={`terminal_${index}`}
+                    className={classNames('modern-scrollbar h-full overflow-hidden', {
+                      hidden: !isActive,
+                    })}
+                    ref={(ref) => {
+                      if (ref) {
+                        terminalRefs.current.set(index, ref);
+                      }
+                    }}
+                    onTerminalReady={(terminal) => workbenchStore.attachTerminal(terminal)}
+                    onTerminalResize={(cols, rows) => workbenchStore.onTerminalResize(cols, rows)}
+                    theme={theme}
+                  />
+                  <TerminalManager
+                    terminal={terminalRefs.current.get(index)?.getTerminal() || null}
+                    isActive={isActive}
+                  />
+                </React.Fragment>
+              );
+            }
+          })}
+        </div>
+      </div>
+    </Panel>
+  );
+});

tools/bolt.diy/app/components/workbench/terminal/theme.ts

@@ -0,0 +1,36 @@
+import type { ITheme } from '@xterm/xterm';
+
+const style = getComputedStyle(document.documentElement);
+const cssVar = (token: string) => style.getPropertyValue(token) || undefined;
+
+export function getTerminalTheme(overrides?: ITheme): ITheme {
+  return {
+    cursor: cssVar('--bolt-elements-terminal-cursorColor'),
+    cursorAccent: cssVar('--bolt-elements-terminal-cursorColorAccent'),
+    foreground: cssVar('--bolt-elements-terminal-textColor'),
+    background: cssVar('--bolt-elements-terminal-backgroundColor'),
+    selectionBackground: cssVar('--bolt-elements-terminal-selection-backgroundColor'),
+    selectionForeground: cssVar('--bolt-elements-terminal-selection-textColor'),
+    selectionInactiveBackground: cssVar('--bolt-elements-terminal-selection-backgroundColorInactive'),
+
+    // ansi escape code colors
+    black: cssVar('--bolt-elements-terminal-color-black'),
+    red: cssVar('--bolt-elements-terminal-color-red'),
+    green: cssVar('--bolt-elements-terminal-color-green'),
+    yellow: cssVar('--bolt-elements-terminal-color-yellow'),
+    blue: cssVar('--bolt-elements-terminal-color-blue'),
+    magenta: cssVar('--bolt-elements-terminal-color-magenta'),
+    cyan: cssVar('--bolt-elements-terminal-color-cyan'),
+    white: cssVar('--bolt-elements-terminal-color-white'),
+    brightBlack: cssVar('--bolt-elements-terminal-color-brightBlack'),
+    brightRed: cssVar('--bolt-elements-terminal-color-brightRed'),
+    brightGreen: cssVar('--bolt-elements-terminal-color-brightGreen'),
+    brightYellow: cssVar('--bolt-elements-terminal-color-brightYellow'),
+    brightBlue: cssVar('--bolt-elements-terminal-color-brightBlue'),
+    brightMagenta: cssVar('--bolt-elements-terminal-color-brightMagenta'),
+    brightCyan: cssVar('--bolt-elements-terminal-color-brightCyan'),
+    brightWhite: cssVar('--bolt-elements-terminal-color-brightWhite'),
+
+    ...overrides,
+  };
+}

tools/bolt.diy/app/components/workflow/WorkflowPhase.tsx

@@ -0,0 +1,109 @@
+/**
+ * Workflow Phase Component.
+ * 
+ * Individual phase display with expandable details.
+ */
+
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import type { WorkflowPhase as WorkflowPhaseType } from '~/routes/api.workflow-status.$proposalId';
+import { classNames } from '~/utils/classNames';
+
+interface WorkflowPhaseProps {
+  phase: WorkflowPhaseType;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+export function WorkflowPhase({ phase, isExpanded, onToggle }: WorkflowPhaseProps) {
+  const statusColors = {
+    pending: "text-bolt-elements-textTertiary",
+    running: "text-blue-500",
+    success: "text-green-500",
+    failed: "text-red-500",
+    skipped: "text-yellow-500"
+  };
+
+  const formatTimestamp = (timestamp?: number) => {
+    if (!timestamp) return "N/A";
+    return new Date(timestamp * 1000).toLocaleString();
+  };
+
+  const formatDuration = (duration?: number) => {
+    if (!duration) return "N/A";
+    if (duration < 60) return `${Math.round(duration)}s`;
+    return `${Math.round(duration / 60)}m ${Math.round(duration % 60)}s`;
+  };
+
+  return (
+    <div className="bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg">
+      <button
+        onClick={onToggle}
+        className="w-full px-4 py-3 flex items-center justify-between hover:bg-bolt-elements-background-depth-2 transition-colors"
+      >
+        <div className="flex items-center gap-3 flex-1 text-left">
+          {isExpanded ? (
+            <ChevronDownIcon className="w-5 h-5 text-bolt-elements-textSecondary" />
+          ) : (
+            <ChevronRightIcon className="w-5 h-5 text-bolt-elements-textSecondary" />
+          )}
+          <div>
+            <h4 className="font-semibold text-bolt-elements-textPrimary">
+              {phase.name}
+            </h4>
+            <div className="flex items-center gap-4 mt-1">
+              <span className={classNames(
+                "text-xs font-medium",
+                statusColors[phase.status] || statusColors.pending
+              )}>
+                {phase.status.toUpperCase()}
+              </span>
+              {phase.timestamp && (
+                <span className="text-xs text-bolt-elements-textSecondary">
+                  {formatTimestamp(phase.timestamp)}
+                </span>
+              )}
+              {phase.duration && (
+                <span className="text-xs text-bolt-elements-textSecondary">
+                  Duration: {formatDuration(phase.duration)}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </button>
+
+      {isExpanded && (
+        <div className="px-4 pb-4 border-t border-bolt-elements-borderColor">
+          {phase.error && (
+            <div className="mt-3 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
+              <p className="text-sm text-red-500 font-medium mb-1">Error</p>
+              <p className="text-sm text-red-400">{phase.error}</p>
+            </div>
+          )}
+
+          {phase.details && (
+            <div className="mt-3 space-y-2">
+              {Object.entries(phase.details).map(([key, value]) => (
+                <div key={key} className="text-sm">
+                  <span className="text-bolt-elements-textSecondary font-medium">
+                    {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:
+                  </span>
+                  <span className="ml-2 text-bolt-elements-textPrimary">
+                    {typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {!phase.details && !phase.error && (
+            <div className="mt-3 text-sm text-bolt-elements-textSecondary">
+              No additional details available
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+

tools/bolt.diy/app/components/workflow/WorkflowStatus.tsx

@@ -0,0 +1,60 @@
+/**
+ * Workflow Status Component.
+ * 
+ * Displays overall workflow status and key metrics.
+ */
+
+import type { WorkflowStatus as WorkflowStatusType } from '~/routes/api.workflow-status.$proposalId';
+
+interface WorkflowStatusProps {
+  workflowStatus: WorkflowStatusType;
+}
+
+export function WorkflowStatus({ workflowStatus }: WorkflowStatusProps) {
+  const successCount = workflowStatus.phases.filter(p => p.status === "success").length;
+  const failedCount = workflowStatus.phases.filter(p => p.status === "failed").length;
+  const runningCount = workflowStatus.phases.filter(p => p.status === "running").length;
+  const pendingCount = workflowStatus.phases.filter(p => p.status === "pending").length;
+
+  return (
+    <div className="bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg p-6">
+      <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-4">
+        Status Summary
+      </h3>
+      
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div>
+          <p className="text-sm text-bolt-elements-textSecondary mb-1">Success</p>
+          <p className="text-2xl font-bold text-green-500">{successCount}</p>
+        </div>
+        <div>
+          <p className="text-sm text-bolt-elements-textSecondary mb-1">Failed</p>
+          <p className="text-2xl font-bold text-red-500">{failedCount}</p>
+        </div>
+        <div>
+          <p className="text-sm text-bolt-elements-textSecondary mb-1">Running</p>
+          <p className="text-2xl font-bold text-blue-500">{runningCount}</p>
+        </div>
+        <div>
+          <p className="text-sm text-bolt-elements-textSecondary mb-1">Pending</p>
+          <p className="text-2xl font-bold text-bolt-elements-textTertiary">{pendingCount}</p>
+        </div>
+      </div>
+
+      {workflowStatus.deployment_url && (
+        <div className="mt-4 p-3 bg-green-500/10 border border-green-500/20 rounded-lg">
+          <p className="text-sm text-green-500 font-medium mb-1">Deployment</p>
+          <a 
+            href={workflowStatus.deployment_url} 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="text-sm text-green-400 hover:text-green-300 underline"
+          >
+            {workflowStatus.deployment_url}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}
+