feat: add terminal and simple shortcut system (#16)

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
 </system_constraints>
 
@@ -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 \`<boltAction>\` 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.
 

packages/bolt/app/lib/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useMessageParser';
 export * from './usePromptEnhancer';
+export * from './useShortcuts';
 export * from './useSnapScroll';

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]);
+}

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<Shortcuts>({
+  toggleTerminal: {
+    key: 'j',
+    ctrlOrMetaKey: true,
+    action: () => workbenchStore.toggleTerminal(),
+  },
+});
+
+export const settingsStore = map<Settings>({
+  shortcuts: shortcutsStore.get(),
+});
+
+shortcutsStore.subscribe((shortcuts) => {
+  settingsStore.set({
+    ...settingsStore.get(),
+    shortcuts,
+  });
+});

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<WebContainer>;
+  #terminals: Array<{ terminal: ITerminal; process: WebContainerProcess }> = [];
+
+  showTerminal: WritableAtom<boolean> = import.meta.hot?.data.showTerminal ?? atom(false);
+
+  constructor(webcontainerPromise: Promise<WebContainer>) {
+    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 });
+    }
+  }
+}

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<Theme>(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() {

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<boolean> = 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);