fix: remove monorepo

app/components/workbench/terminal/Terminal.tsx

@@ -0,0 +1,86 @@
+import { FitAddon } from '@xterm/addon-fit';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { Terminal as XTerm } from '@xterm/xterm';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
+import type { Theme } from '~/lib/stores/theme';
+import { createScopedLogger } from '~/utils/logger';
+import { getTerminalTheme } from './theme';
+
+const logger = createScopedLogger('Terminal');
+
+export interface TerminalRef {
+  reloadStyles: () => void;
+}
+
+export interface TerminalProps {
+  className?: string;
+  theme: Theme;
+  readonly?: boolean;
+  onTerminalReady?: (terminal: XTerm) => void;
+  onTerminalResize?: (cols: number, rows: number) => void;
+}
+
+export const Terminal = memo(
+  forwardRef<TerminalRef, TerminalProps>(({ className, theme, readonly, onTerminalReady, onTerminalResize }, ref) => {
+    const terminalElementRef = useRef<HTMLDivElement>(null);
+    const terminalRef = useRef<XTerm>();
+
+    useEffect(() => {
+      const element = terminalElementRef.current!;
+
+      const fitAddon = new FitAddon();
+      const webLinksAddon = new WebLinksAddon();
+
+      const terminal = new XTerm({
+        cursorBlink: true,
+        convertEol: true,
+        disableStdin: readonly,
+        theme: getTerminalTheme(readonly ? { cursor: '#00000000' } : {}),
+        fontSize: 12,
+        fontFamily: 'Menlo, courier-new, courier, monospace',
+      });
+
+      terminalRef.current = terminal;
+
+      terminal.loadAddon(fitAddon);
+      terminal.loadAddon(webLinksAddon);
+      terminal.open(element);
+
+      const resizeObserver = new ResizeObserver(() => {
+        fitAddon.fit();
+        onTerminalResize?.(terminal.cols, terminal.rows);
+      });
+
+      resizeObserver.observe(element);
+
+      logger.info('Attach terminal');
+
+      onTerminalReady?.(terminal);
+
+      return () => {
+        resizeObserver.disconnect();
+        terminal.dispose();
+      };
+    }, []);
+
+    useEffect(() => {
+      const terminal = terminalRef.current!;
+
+      // we render a transparent cursor in case the terminal is readonly
+      terminal.options.theme = getTerminalTheme(readonly ? { cursor: '#00000000' } : {});
+
+      terminal.options.disableStdin = readonly;
+    }, [theme, readonly]);
+
+    useImperativeHandle(ref, () => {
+      return {
+        reloadStyles: () => {
+          const terminal = terminalRef.current!;
+          terminal.options.theme = getTerminalTheme(readonly ? { cursor: '#00000000' } : {});
+        },
+      };
+    }, []);
+
+    return <div className={className} ref={terminalElementRef} />;
+  }),
+);

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,
+  };
+}