-
+
+
+
+
+
{
+ if (!terminalToggledByShortcut.current) {
+ workbenchStore.toggleTerminal(true);
+ }
+ }}
+ onCollapse={() => {
+ if (!terminalToggledByShortcut.current) {
+ workbenchStore.toggleTerminal(false);
+ }
+ }}
+ >
+
+
+ Terminal
+
+
+ {Array.from({ length: terminalCount }, (_, index) => {
+ return (
+
+ {
+ terminalRefs.current.push(ref);
+ }}
+ onTerminalReady={(terminal) => workbenchStore.attachTerminal(terminal)}
+ onTerminalResize={(cols, rows) => workbenchStore.onTerminalResize(cols, rows)}
+ className="h-full"
+ theme={theme}
+ />
+
+ );
+ })}
+
diff --git a/packages/bolt/app/components/workbench/Workbench.client.tsx b/packages/bolt/app/components/workbench/Workbench.client.tsx
index e3bd7e6..987ef79 100644
--- a/packages/bolt/app/components/workbench/Workbench.client.tsx
+++ b/packages/bolt/app/components/workbench/Workbench.client.tsx
@@ -1,5 +1,5 @@
import { useStore } from '@nanostores/react';
-import { AnimatePresence, motion, type HTMLMotionProps, type Variants } from 'framer-motion';
+import { motion, type HTMLMotionProps, type Variants } from 'framer-motion';
import { computed } from 'nanostores';
import { memo, useCallback, useEffect, useState } from 'react';
import { toast } from 'react-toastify';
@@ -98,52 +98,48 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
return (
chatStarted && (
-
- {showWorkbench && (
-
-
-
-
-
- {
- workbenchStore.showWorkbench.set(false);
- }}
- />
-
-
-
+
+
+
+
+
+ {
+ workbenchStore.showWorkbench.set(false);
+ }}
+ />
-
- )}
-
+
+
+
)
);
});
diff --git a/packages/bolt/app/components/workbench/terminal/Terminal.tsx b/packages/bolt/app/components/workbench/terminal/Terminal.tsx
new file mode 100644
index 0000000..2e386c4
--- /dev/null
+++ b/packages/bolt/app/components/workbench/terminal/Terminal.tsx
@@ -0,0 +1,83 @@
+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 { getTerminalTheme } from './theme';
+
+import '@xterm/xterm/css/xterm.css';
+
+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
(({ className, theme, readonly, onTerminalReady, onTerminalResize }, ref) => {
+ const terminalElementRef = useRef(null);
+ const terminalRef = useRef();
+
+ 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: 13,
+ 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);
+
+ 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 ;
+ }),
+);
diff --git a/packages/bolt/app/components/workbench/terminal/theme.ts b/packages/bolt/app/components/workbench/terminal/theme.ts
new file mode 100644
index 0000000..a9ef07d
--- /dev/null
+++ b/packages/bolt/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,
+ };
+}
diff --git a/packages/bolt/app/entry.client.tsx b/packages/bolt/app/entry.client.tsx
index 11ffec2..f95b51d 100644
--- a/packages/bolt/app/entry.client.tsx
+++ b/packages/bolt/app/entry.client.tsx
@@ -1,12 +1,7 @@
import { RemixBrowser } from '@remix-run/react';
-import { startTransition, StrictMode } from 'react';
+import { startTransition } from 'react';
import { hydrateRoot } from 'react-dom/client';
startTransition(() => {
- hydrateRoot(
- document,
-
-
- ,
- );
+ hydrateRoot(document, );
});
diff --git a/packages/bolt/app/lib/.server/llm/prompts.ts b/packages/bolt/app/lib/.server/llm/prompts.ts
index 1346295..96eb621 100644
--- a/packages/bolt/app/lib/.server/llm/prompts.ts
+++ b/packages/bolt/app/lib/.server/llm/prompts.ts
@@ -13,6 +13,10 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
IMPORTANT: Git is NOT available.
+ IMPORTANT: Prefer writing Node.js scripts instead of shell scripts. The environment doesn't fully support shell scripts, so use Node.js for scripting tasks whenever possible!
+
+ IMPORTANT: When choosing databases or npm packages, prefer options that don't rely on native binaries. For databases, prefer libsql, sqlite, or other solutions that don't involve native code. WebContainer CANNOT execute arbitrary native binaries.
+
Available shell commands: cat, chmod, cp, echo, hostname, kill, ln, ls, mkdir, mv, ps, pwd, rm, rmdir, xxd, alias, cd, clear, curl, env, false, getconf, head, sort, tail, touch, true, uptime, which, code, jq, loadenv, node, python3, wasm, xdg-open, command, exit, export, source
@@ -92,7 +96,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
- When Using \`npx\`, ALWAYS provide the \`--yes\` flag.
- When running multiple shell commands, use \`&&\` to run them sequentially.
- - IMPORTANT: Do NOT re-run a dev command if there is one that starts a dev server and new dependencies were installed or files updated! If a dev server has started already, assume that installing dependencies will be executed in a different process and will be picked up by the dev server.
+ - ULTRA IMPORTANT: Do NOT re-run a dev command if there is one that starts a dev server and new dependencies were installed or files updated! If a dev server has started already, assume that installing dependencies will be executed in a different process and will be picked up by the dev server.
- file: For writing new files or updating existing files. For each file add a \`filePath\` attribute to the opening \`\` tag to specify the file path. The content of the file artifact is the file contents. All file paths MUST BE relative to the current working directory.
diff --git a/packages/bolt/app/lib/hooks/index.ts b/packages/bolt/app/lib/hooks/index.ts
index 9837e12..fb60321 100644
--- a/packages/bolt/app/lib/hooks/index.ts
+++ b/packages/bolt/app/lib/hooks/index.ts
@@ -1,3 +1,4 @@
export * from './useMessageParser';
export * from './usePromptEnhancer';
+export * from './useShortcuts';
export * from './useSnapScroll';
diff --git a/packages/bolt/app/lib/hooks/useShortcuts.ts b/packages/bolt/app/lib/hooks/useShortcuts.ts
new file mode 100644
index 0000000..4f982ad
--- /dev/null
+++ b/packages/bolt/app/lib/hooks/useShortcuts.ts
@@ -0,0 +1,56 @@
+import { useStore } from '@nanostores/react';
+import { useEffect } from 'react';
+import { shortcutsStore, type Shortcuts } from '~/lib/stores/settings';
+
+class ShortcutEventEmitter {
+ #emitter = new EventTarget();
+
+ dispatch(type: keyof Shortcuts) {
+ this.#emitter.dispatchEvent(new Event(type));
+ }
+
+ on(type: keyof Shortcuts, cb: VoidFunction) {
+ this.#emitter.addEventListener(type, cb);
+
+ return () => {
+ this.#emitter.removeEventListener(type, cb);
+ };
+ }
+}
+
+export const shortcutEventEmitter = new ShortcutEventEmitter();
+
+export function useShortcuts(): void {
+ const shortcuts = useStore(shortcutsStore);
+
+ useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent): void => {
+ const { key, ctrlKey, shiftKey, altKey, metaKey } = event;
+
+ for (const name in shortcuts) {
+ const shortcut = shortcuts[name as keyof Shortcuts];
+
+ if (
+ shortcut.key.toLowerCase() === key.toLowerCase() &&
+ (shortcut.ctrlOrMetaKey
+ ? ctrlKey || metaKey
+ : (shortcut.ctrlKey === undefined || shortcut.ctrlKey === ctrlKey) &&
+ (shortcut.metaKey === undefined || shortcut.metaKey === metaKey)) &&
+ (shortcut.shiftKey === undefined || shortcut.shiftKey === shiftKey) &&
+ (shortcut.altKey === undefined || shortcut.altKey === altKey)
+ ) {
+ shortcutEventEmitter.dispatch(name as keyof Shortcuts);
+ event.preventDefault();
+ shortcut.action();
+ break;
+ }
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ }, [shortcuts]);
+}
diff --git a/packages/bolt/app/lib/stores/settings.ts b/packages/bolt/app/lib/stores/settings.ts
new file mode 100644
index 0000000..5e48bfe
--- /dev/null
+++ b/packages/bolt/app/lib/stores/settings.ts
@@ -0,0 +1,39 @@
+import { map } from 'nanostores';
+import { workbenchStore } from './workbench';
+
+export interface Shortcut {
+ key: string;
+ ctrlKey?: boolean;
+ shiftKey?: boolean;
+ altKey?: boolean;
+ metaKey?: boolean;
+ ctrlOrMetaKey?: boolean;
+ action: () => void;
+}
+
+export interface Shortcuts {
+ toggleTerminal: Shortcut;
+}
+
+export interface Settings {
+ shortcuts: Shortcuts;
+}
+
+export const shortcutsStore = map({
+ toggleTerminal: {
+ key: 'j',
+ ctrlOrMetaKey: true,
+ action: () => workbenchStore.toggleTerminal(),
+ },
+});
+
+export const settingsStore = map({
+ shortcuts: shortcutsStore.get(),
+});
+
+shortcutsStore.subscribe((shortcuts) => {
+ settingsStore.set({
+ ...settingsStore.get(),
+ shortcuts,
+ });
+});
diff --git a/packages/bolt/app/lib/stores/terminal.ts b/packages/bolt/app/lib/stores/terminal.ts
new file mode 100644
index 0000000..419320e
--- /dev/null
+++ b/packages/bolt/app/lib/stores/terminal.ts
@@ -0,0 +1,40 @@
+import type { WebContainer, WebContainerProcess } from '@webcontainer/api';
+import { atom, type WritableAtom } from 'nanostores';
+import type { ITerminal } from '~/types/terminal';
+import { newShellProcess } from '~/utils/shell';
+import { coloredText } from '~/utils/terminal';
+
+export class TerminalStore {
+ #webcontainer: Promise;
+ #terminals: Array<{ terminal: ITerminal; process: WebContainerProcess }> = [];
+
+ showTerminal: WritableAtom = import.meta.hot?.data.showTerminal ?? atom(false);
+
+ constructor(webcontainerPromise: Promise) {
+ this.#webcontainer = webcontainerPromise;
+
+ if (import.meta.hot) {
+ import.meta.hot.data.showTerminal = this.showTerminal;
+ }
+ }
+
+ toggleTerminal(value?: boolean) {
+ this.showTerminal.set(value !== undefined ? value : !this.showTerminal.get());
+ }
+
+ async attachTerminal(terminal: ITerminal) {
+ try {
+ const shellProcess = await newShellProcess(await this.#webcontainer, terminal);
+ this.#terminals.push({ terminal, process: shellProcess });
+ } catch (error: any) {
+ terminal.write(coloredText.red('Failed to spawn shell\n\n') + error.message);
+ return;
+ }
+ }
+
+ onTerminalResize(cols: number, rows: number) {
+ for (const { process } of this.#terminals) {
+ process.resize({ cols, rows });
+ }
+ }
+}
diff --git a/packages/bolt/app/lib/stores/theme.ts b/packages/bolt/app/lib/stores/theme.ts
index f9d5fed..4f3e47b 100644
--- a/packages/bolt/app/lib/stores/theme.ts
+++ b/packages/bolt/app/lib/stores/theme.ts
@@ -8,6 +8,8 @@ export function themeIsDark() {
return themeStore.get() === 'dark';
}
+export const DEFAULT_THEME = 'light';
+
export const themeStore = atom(initStore());
function initStore() {
@@ -15,10 +17,10 @@ function initStore() {
const persistedTheme = localStorage.getItem(kTheme) as Theme | undefined;
const themeAttribute = document.querySelector('html')?.getAttribute('data-theme');
- return persistedTheme ?? (themeAttribute as Theme) ?? 'light';
+ return persistedTheme ?? (themeAttribute as Theme) ?? DEFAULT_THEME;
}
- return 'light';
+ return DEFAULT_THEME;
}
export function toggleTheme() {
diff --git a/packages/bolt/app/lib/stores/workbench.ts b/packages/bolt/app/lib/stores/workbench.ts
index 8603fe9..41cd86a 100644
--- a/packages/bolt/app/lib/stores/workbench.ts
+++ b/packages/bolt/app/lib/stores/workbench.ts
@@ -3,10 +3,12 @@ import type { EditorDocument, ScrollPosition } from '~/components/editor/codemir
import { ActionRunner } from '~/lib/runtime/action-runner';
import type { ActionCallbackData, ArtifactCallbackData } from '~/lib/runtime/message-parser';
import { webcontainer } from '~/lib/webcontainer';
+import type { ITerminal } from '~/types/terminal';
import { unreachable } from '~/utils/unreachable';
import { EditorStore } from './editor';
import { FilesStore, type FileMap } from './files';
import { PreviewsStore } from './previews';
+import { TerminalStore } from './terminal';
export interface ArtifactState {
title: string;
@@ -22,6 +24,7 @@ export class WorkbenchStore {
#previewsStore = new PreviewsStore(webcontainer);
#filesStore = new FilesStore(webcontainer);
#editorStore = new EditorStore(this.#filesStore);
+ #terminalStore = new TerminalStore(webcontainer);
artifacts: Artifacts = import.meta.hot?.data.artifacts ?? map({});
showWorkbench: WritableAtom = import.meta.hot?.data.showWorkbench ?? atom(false);
@@ -53,6 +56,22 @@ export class WorkbenchStore {
return this.#editorStore.selectedFile;
}
+ get showTerminal() {
+ return this.#terminalStore.showTerminal;
+ }
+
+ toggleTerminal(value?: boolean) {
+ this.#terminalStore.toggleTerminal(value);
+ }
+
+ attachTerminal(terminal: ITerminal) {
+ this.#terminalStore.attachTerminal(terminal);
+ }
+
+ onTerminalResize(cols: number, rows: number) {
+ this.#terminalStore.onTerminalResize(cols, rows);
+ }
+
setDocuments(files: FileMap) {
this.#editorStore.setDocuments(files);
diff --git a/packages/bolt/app/styles/components/resize-handle.scss b/packages/bolt/app/styles/components/resize-handle.scss
new file mode 100644
index 0000000..0b75009
--- /dev/null
+++ b/packages/bolt/app/styles/components/resize-handle.scss
@@ -0,0 +1,28 @@
+[data-resize-handle] {
+ position: relative;
+
+ &[data-panel-group-direction='horizontal']:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: -6px;
+ right: -5px;
+ z-index: $zIndexMax;
+ }
+
+ &[data-panel-group-direction='vertical']:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: -5px;
+ bottom: -6px;
+ z-index: $zIndexMax;
+ }
+
+ &[data-resize-handle-state='hover']:after,
+ &[data-resize-handle-state='drag']:after {
+ background-color: #8882;
+ }
+}
diff --git a/packages/bolt/app/styles/components/terminal.scss b/packages/bolt/app/styles/components/terminal.scss
new file mode 100644
index 0000000..dc1d224
--- /dev/null
+++ b/packages/bolt/app/styles/components/terminal.scss
@@ -0,0 +1,3 @@
+.xterm {
+ height: 100%;
+}
diff --git a/packages/bolt/app/styles/index.scss b/packages/bolt/app/styles/index.scss
index d3e5016..3901a96 100644
--- a/packages/bolt/app/styles/index.scss
+++ b/packages/bolt/app/styles/index.scss
@@ -1,5 +1,8 @@
@import './variables.scss';
+@import './z-index.scss';
@import './animations.scss';
+@import './components/terminal.scss';
+@import './components/resize-handle.scss';
body {
--at-apply: bg-bolt-elements-app-backgroundColor;
diff --git a/packages/bolt/app/styles/variables.scss b/packages/bolt/app/styles/variables.scss
index 3daf8f8..8e275d5 100644
--- a/packages/bolt/app/styles/variables.scss
+++ b/packages/bolt/app/styles/variables.scss
@@ -20,12 +20,72 @@
--bolt-border-primary: theme('colors.gray.200');
--bolt-border-accent: theme('colors.accent.600');
+
+ /* Terminal Colors */
+ --bolt-terminal-background: var(--bolt-background-primary);
+ --bolt-terminal-foreground: #333333;
+ --bolt-terminal-selection-background: #00000040;
+ --bolt-terminal-black: #000000;
+ --bolt-terminal-red: #cd3131;
+ --bolt-terminal-green: #00bc00;
+ --bolt-terminal-yellow: #949800;
+ --bolt-terminal-blue: #0451a5;
+ --bolt-terminal-magenta: #bc05bc;
+ --bolt-terminal-cyan: #0598bc;
+ --bolt-terminal-white: #555555;
+ --bolt-terminal-brightBlack: #686868;
+ --bolt-terminal-brightRed: #cd3131;
+ --bolt-terminal-brightGreen: #00bc00;
+ --bolt-terminal-brightYellow: #949800;
+ --bolt-terminal-brightBlue: #0451a5;
+ --bolt-terminal-brightMagenta: #bc05bc;
+ --bolt-terminal-brightCyan: #0598bc;
+ --bolt-terminal-brightWhite: #a5a5a5;
}
/* Color Tokens Dark Theme */
:root,
:root[data-theme='dark'] {
- --bolt-background-primary: theme('colors.gray.50');
+ --bolt-background-primary: theme('colors.gray.0');
+ --bolt-background-secondary: theme('colors.gray.50');
+ --bolt-background-active: theme('colors.gray.200');
+ --bolt-background-accent: theme('colors.accent.600');
+ --bolt-background-accent-secondary: theme('colors.accent.600');
+ --bolt-background-accent-active: theme('colors.accent.500');
+
+ --bolt-text-primary: theme('colors.gray.800');
+ --bolt-text-primary-inverted: theme('colors.gray.0');
+ --bolt-text-secondary: theme('colors.gray.600');
+ --bolt-text-secondary-inverted: theme('colors.gray.200');
+ --bolt-text-disabled: theme('colors.gray.400');
+ --bolt-text-accent: theme('colors.accent.600');
+ --bolt-text-positive: theme('colors.positive.700');
+ --bolt-text-warning: theme('colors.warning.600');
+ --bolt-text-negative: theme('colors.negative.600');
+
+ --bolt-border-primary: theme('colors.gray.200');
+ --bolt-border-accent: theme('colors.accent.600');
+
+ /* Terminal Colors */
+ --bolt-terminal-background: #16181d;
+ --bolt-terminal-foreground: #eff0eb;
+ --bolt-terminal-selection-background: #97979b33;
+ --bolt-terminal-black: #000000;
+ --bolt-terminal-red: #ff5c57;
+ --bolt-terminal-green: #5af78e;
+ --bolt-terminal-yellow: #f3f99d;
+ --bolt-terminal-blue: #57c7ff;
+ --bolt-terminal-magenta: #ff6ac1;
+ --bolt-terminal-cyan: #9aedfe;
+ --bolt-terminal-white: #f1f1f0;
+ --bolt-terminal-brightBlack: #686868;
+ --bolt-terminal-brightRed: #ff5c57;
+ --bolt-terminal-brightGreen: #5af78e;
+ --bolt-terminal-brightYellow: #f3f99d;
+ --bolt-terminal-brightBlue: #57c7ff;
+ --bolt-terminal-brightMagenta: #ff6ac1;
+ --bolt-terminal-brightCyan: #9aedfe;
+ --bolt-terminal-brightWhite: #f1f1f0;
}
/*
@@ -36,9 +96,33 @@
:root {
--header-height: 65px;
+ --z-index-max: 999;
+
/* App */
--bolt-elements-app-backgroundColor: var(--bolt-background-primary);
--bolt-elements-app-borderColor: var(--bolt-border-primary);
--bolt-elements-app-textColor: var(--bolt-text-primary);
--bolt-elements-app-linkColor: var(--bolt-text-accent);
+
+ /* Terminal */
+ --bolt-elements-terminal-backgroundColor: var(--bolt-terminal-background);
+ --bolt-elements-terminal-textColor: var(--bolt-terminal-foreground);
+ --bolt-elements-terminal-cursorColor: var(--bolt-terminal-foreground);
+ --bolt-elements-terminal-selection-backgroundColor: var(--bolt-terminal-selection-background);
+ --bolt-elements-terminal-color-black: var(--bolt-terminal-black);
+ --bolt-elements-terminal-color-red: var(--bolt-terminal-red);
+ --bolt-elements-terminal-color-green: var(--bolt-terminal-green);
+ --bolt-elements-terminal-color-yellow: var(--bolt-terminal-yellow);
+ --bolt-elements-terminal-color-blue: var(--bolt-terminal-blue);
+ --bolt-elements-terminal-color-magenta: var(--bolt-terminal-magenta);
+ --bolt-elements-terminal-color-cyan: var(--bolt-terminal-cyan);
+ --bolt-elements-terminal-color-white: var(--bolt-terminal-white);
+ --bolt-elements-terminal-color-brightBlack: var(--bolt-terminal-brightBlack);
+ --bolt-elements-terminal-color-brightRed: var(--bolt-terminal-brightRed);
+ --bolt-elements-terminal-color-brightGreen: var(--bolt-terminal-brightGreen);
+ --bolt-elements-terminal-color-brightYellow: var(--bolt-terminal-brightYellow);
+ --bolt-elements-terminal-color-brightBlue: var(--bolt-terminal-brightBlue);
+ --bolt-elements-terminal-color-brightMagenta: var(--bolt-terminal-brightMagenta);
+ --bolt-elements-terminal-color-brightCyan: var(--bolt-terminal-brightCyan);
+ --bolt-elements-terminal-color-brightWhite: var(--bolt-terminal-brightWhite);
}
diff --git a/packages/bolt/app/styles/z-index.scss b/packages/bolt/app/styles/z-index.scss
new file mode 100644
index 0000000..8f5dc59
--- /dev/null
+++ b/packages/bolt/app/styles/z-index.scss
@@ -0,0 +1 @@
+$zIndexMax: 999;
diff --git a/packages/bolt/app/types/terminal.ts b/packages/bolt/app/types/terminal.ts
new file mode 100644
index 0000000..75ae3a3
--- /dev/null
+++ b/packages/bolt/app/types/terminal.ts
@@ -0,0 +1,8 @@
+export interface ITerminal {
+ readonly cols?: number;
+ readonly rows?: number;
+
+ reset: () => void;
+ write: (data: string) => void;
+ onData: (cb: (data: string) => void) => void;
+}
diff --git a/packages/bolt/app/utils/shell.ts b/packages/bolt/app/utils/shell.ts
new file mode 100644
index 0000000..1c5c834
--- /dev/null
+++ b/packages/bolt/app/utils/shell.ts
@@ -0,0 +1,51 @@
+import type { WebContainer } from '@webcontainer/api';
+import type { ITerminal } from '~/types/terminal';
+import { withResolvers } from './promises';
+
+export async function newShellProcess(webcontainer: WebContainer, terminal: ITerminal) {
+ const args: string[] = [];
+
+ // we spawn a JSH process with a fallback cols and rows in case the process is not attached yet to a visible terminal
+ const process = await webcontainer.spawn('/bin/jsh', ['--osc', ...args], {
+ terminal: {
+ cols: terminal.cols ?? 80,
+ rows: terminal.rows ?? 15,
+ },
+ });
+
+ const input = process.input.getWriter();
+ const output = process.output;
+
+ const jshReady = withResolvers();
+
+ let isInteractive = false;
+
+ output.pipeTo(
+ new WritableStream({
+ write(data) {
+ if (!isInteractive) {
+ const [, osc] = data.match(/\x1b\]654;([^\x07]+)\x07/) || [];
+
+ if (osc === 'interactive') {
+ // wait until we see the interactive OSC
+ isInteractive = true;
+
+ jshReady.resolve();
+ }
+ }
+
+ terminal.write(data);
+ },
+ }),
+ );
+
+ terminal.onData((data) => {
+ if (isInteractive) {
+ input.write(data);
+ }
+ });
+
+ await jshReady.promise;
+
+ return process;
+}
diff --git a/packages/bolt/app/utils/terminal.ts b/packages/bolt/app/utils/terminal.ts
new file mode 100644
index 0000000..324816a
--- /dev/null
+++ b/packages/bolt/app/utils/terminal.ts
@@ -0,0 +1,11 @@
+const reset = '\x1b[0m';
+
+export const escapeCodes = {
+ reset,
+ clear: '\x1b[g',
+ red: '\x1b[1;31m',
+};
+
+export const coloredText = {
+ red: (text: string) => `${escapeCodes.red}${text}${reset}`,
+};
diff --git a/packages/bolt/package.json b/packages/bolt/package.json
index 1511b89..7a48c52 100644
--- a/packages/bolt/package.json
+++ b/packages/bolt/package.json
@@ -39,7 +39,7 @@
"@remix-run/react": "^2.10.2",
"@stackblitz/sdk": "^1.11.0",
"@unocss/reset": "^0.61.0",
- "@webcontainer/api": "^1.3.0-internal.1",
+ "@webcontainer/api": "^1.3.0-internal.2",
"@xterm/addon-fit": "^0.10.0",
"@xterm/addon-web-links": "^0.11.0",
"@xterm/xterm": "^5.5.0",
@@ -51,6 +51,7 @@
"nanostores": "^0.10.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-hotkeys-hook": "^4.5.0",
"react-markdown": "^9.0.1",
"react-resizable-panels": "^2.0.20",
"react-toastify": "^10.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce43c08..cc2e950 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,8 +105,8 @@ importers:
specifier: ^0.61.0
version: 0.61.0
'@webcontainer/api':
- specifier: ^1.3.0-internal.1
- version: 1.3.0-internal.1
+ specifier: ^1.3.0-internal.2
+ version: 1.3.0-internal.2
'@xterm/addon-fit':
specifier: ^0.10.0
version: 0.10.0(@xterm/xterm@5.5.0)
@@ -140,6 +140,9 @@ importers:
react-dom:
specifier: ^18.2.0
version: 18.3.1(react@18.3.1)
+ react-hotkeys-hook:
+ specifier: ^4.5.0
+ version: 4.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react-markdown:
specifier: ^9.0.1
version: 9.0.1(@types/react@18.3.3)(react@18.3.1)
@@ -1722,8 +1725,8 @@ packages:
'@web3-storage/multipart-parser@1.0.0':
resolution: {integrity: sha512-BEO6al7BYqcnfX15W2cnGR+Q566ACXAT9UQykORCWW80lmkpWsnEob6zJS1ZVBKsSJC8+7vJkHwlp+lXG1UCdw==}
- '@webcontainer/api@1.3.0-internal.1':
- resolution: {integrity: sha512-XHveAaZgZItLWieict8xTteBbPLeAwCJLuc80Zq6Mmk0LEWTw8yYZep0dTKbet6bd9MPTQ1+vjPAsEtD0H1fOA==}
+ '@webcontainer/api@1.3.0-internal.2':
+ resolution: {integrity: sha512-lLSlSehbuYc9E7ecK+tMRX4BbWETNX1OgRlS+NerQh3X3sHNbxLD86eScEMAiA5VBnUeSnLtLe7eC/ftM8fR3Q==}
'@xterm/addon-fit@0.10.0':
resolution: {integrity: sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==}
@@ -4090,6 +4093,12 @@ packages:
peerDependencies:
react: ^18.3.1
+ react-hotkeys-hook@4.5.0:
+ resolution: {integrity: sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==}
+ peerDependencies:
+ react: '>=16.8.1'
+ react-dom: '>=16.8.1'
+
react-is@18.3.1:
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
@@ -6814,7 +6823,7 @@ snapshots:
'@web3-storage/multipart-parser@1.0.0': {}
- '@webcontainer/api@1.3.0-internal.1': {}
+ '@webcontainer/api@1.3.0-internal.2': {}
'@xterm/addon-fit@0.10.0(@xterm/xterm@5.5.0)':
dependencies:
@@ -9748,6 +9757,11 @@ snapshots:
react: 18.3.1
scheduler: 0.23.2
+ react-hotkeys-hook@4.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+ dependencies:
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+
react-is@18.3.1: {}
react-markdown@9.0.1(@types/react@18.3.3)(react@18.3.1):