feat: add first version of workbench, increase token limit, improve system prompt

2024-07-17 20:54:46 +02:00
parent b4420a22bb
commit 621b8804d8
50 changed files with 2979 additions and 423 deletions
--- a/packages/bolt/app/components/chat/Artifact.tsx
+++ b/packages/bolt/app/components/chat/Artifact.tsx
@@ -1,34 +1,176 @@
 import { useStore } from '@nanostores/react';
-import { workspaceStore } from '~/lib/stores/workspace';
+import { AnimatePresence, motion } from 'framer-motion';
+import { computed } from 'nanostores';
+import { useState } from 'react';
+import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
+import { getArtifactKey, workbenchStore, type ActionState } from '../../lib/stores/workbench';
+import { classNames } from '../../utils/classNames';
+import { cubicEasingFn } from '../../utils/easings';
+import { IconButton } from '../ui/IconButton';
+
+const highlighterOptions = {
+  langs: ['shell'],
+  themes: ['light-plus', 'dark-plus'],
+};
+
+const shellHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> =
+  import.meta.hot?.data.shellHighlighter ?? (await createHighlighter(highlighterOptions));
+
+if (import.meta.hot) {
+  import.meta.hot.data.shellHighlighter = shellHighlighter;
+}

 interface ArtifactProps {
+  artifactId: string;
  messageId: string;
 }

-export function Artifact({ messageId }: ArtifactProps) {
-  const artifacts = useStore(workspaceStore.artifacts);
+export function Artifact({ artifactId, messageId }: ArtifactProps) {
+  const [showActions, setShowActions] = useState(false);

-  const artifact = artifacts[messageId];
+  const artifacts = useStore(workbenchStore.artifacts);
+  const artifact = artifacts[getArtifactKey(artifactId, messageId)];
+
+  const actions = useStore(
+    computed(artifact.actions, (actions) => {
+      return Object.values(actions);
+    }),
+  );

  return (
-    <button
-      className="flex border rounded-lg overflow-hidden items-stretch bg-gray-50/25 w-full"
-      onClick={() => {
-        const showWorkspace = workspaceStore.showWorkspace.get();
-        workspaceStore.showWorkspace.set(!showWorkspace);
-      }}
-    >
-      <div className="border-r flex items-center px-6 bg-gray-100/50">
-        {!artifact?.closed ? (
-          <div className="i-svg-spinners:90-ring-with-bg scale-130"></div>
-        ) : (
-          <div className="i-ph:code-bold scale-130 text-gray-600"></div>
+    <div className="flex flex-col overflow-hidden border rounded-lg w-full">
+      <div className="flex">
+        <button
+          className="flex items-stretch bg-gray-50/25 w-full overflow-hidden"
+          onClick={() => {
+            const showWorkbench = workbenchStore.showWorkbench.get();
+            workbenchStore.showWorkbench.set(!showWorkbench);
+          }}
+        >
+          <div className="flex items-center px-6 bg-gray-100/50">
+            {!artifact?.closed ? (
+              <div className="i-svg-spinners:90-ring-with-bg scale-130"></div>
+            ) : (
+              <div className="i-ph:code-bold scale-130 text-gray-600"></div>
+            )}
+          </div>
+          <div className="px-4 p-3 w-full text-left">
+            <div className="w-full">{artifact?.title}</div>
+            <small className="inline-block w-full w-full">Click to open Workbench</small>
+          </div>
+        </button>
+        <AnimatePresence>
+          {actions.length && (
+            <motion.button
+              initial={{ width: 0 }}
+              animate={{ width: 'auto' }}
+              exit={{ width: 0 }}
+              transition={{ duration: 0.15, ease: cubicEasingFn }}
+              className="hover:bg-gray-200"
+              onClick={() => setShowActions(!showActions)}
+            >
+              <div className="p-4">
+                <div className={showActions ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>
+              </div>
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+      <AnimatePresence>
+        {showActions && actions.length > 0 && (
+          <motion.div
+            className="actions"
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: '0px' }}
+            transition={{ duration: 0.15 }}
+          >
+            <div className="p-4 text-left border-t">
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.15 }}
+              >
+                <h4 className="font-semibold mb-2">Actions</h4>
+                <ul className="list-none space-y-2.5">
+                  {actions.map((action, index) => {
+                    const { status, type, content, abort } = action;
+
+                    return (
+                      <li key={index} className={classNames(getTextColor(action.status))}>
+                        <div className="flex items-center gap-1.5">
+                          <div className="text-lg">
+                            {status === 'running' ? (
+                              <div className="i-svg-spinners:90-ring-with-bg"></div>
+                            ) : status === 'pending' ? (
+                              <div className="i-ph:circle-duotone"></div>
+                            ) : status === 'complete' ? (
+                              <div className="i-ph:check-circle-duotone"></div>
+                            ) : status === 'failed' || status === 'aborted' ? (
+                              <div className="i-ph:x-circle-duotone"></div>
+                            ) : null}
+                          </div>
+                          {type === 'file' ? (
+                            <div>
+                              Create <code className="bg-gray-100 text-gray-700">{action.filePath}</code>
+                            </div>
+                          ) : type === 'shell' ? (
+                            <div className="flex items-center w-full min-h-[28px]">
+                              <span className="flex-1">Run command</span>
+                              {abort !== undefined && status === 'running' && (
+                                <IconButton icon="i-ph:x-circle" size="xl" onClick={() => abort()} />
+                              )}
+                            </div>
+                          ) : null}
+                        </div>
+                        {type === 'shell' && <ShellCodeBlock classsName="mt-1" code={content} />}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </motion.div>
+            </div>
+          </motion.div>
        )}
-      </div>
-      <div className="flex flex-col items-center px-4 p-2.5">
-        <div className="text-left w-full">{artifact?.title}</div>
-        <small className="w-full text-left">Click to open code</small>
-      </div>
-    </button>
+      </AnimatePresence>
+    </div>
+  );
+}
+
+function getTextColor(status: ActionState['status']) {
+  switch (status) {
+    case 'pending': {
+      return 'text-gray-500';
+    }
+    case 'running': {
+      return 'text-gray-1000';
+    }
+    case 'complete': {
+      return 'text-positive-600';
+    }
+    case 'aborted': {
+      return 'text-gray-600';
+    }
+    case 'failed': {
+      return 'text-negative-600';
+    }
+    default: {
+      return undefined;
+    }
+  }
+}
+
+interface ShellCodeBlockProps {
+  classsName?: string;
+  code: string;
+}
+
+function ShellCodeBlock({ classsName, code }: ShellCodeBlockProps) {
+  return (
+    <div
+      className={classNames('text-xs', classsName)}
+      dangerouslySetInnerHTML={{ __html: shellHighlighter.codeToHtml(code, { lang: 'shell', theme: 'dark-plus' }) }}
+    ></div>
  );
 }
--- a/packages/bolt/app/components/chat/BaseChat.tsx
+++ b/packages/bolt/app/components/chat/BaseChat.tsx
@@ -2,16 +2,14 @@ import type { Message } from 'ai';
 import type { LegacyRef } from 'react';
 import React from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
-import { IconButton } from '~/components/ui/IconButton';
-import { Workspace } from '~/components/workspace/Workspace.client';
-import { classNames } from '~/utils/classNames';
+import { classNames } from '../../utils/classNames';
+import { IconButton } from '../ui/IconButton';
+import { Workbench } from '../workbench/Workbench.client';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';

 interface BaseChatProps {
  textareaRef?: LegacyRef<HTMLTextAreaElement> | undefined;
-  messagesSlot?: React.ReactNode;
-  workspaceSlot?: React.ReactNode;
  chatStarted?: boolean;
  isStreaming?: boolean;
  messages?: Message[];
@@ -80,14 +78,17 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
              </ClientOnly>
              <div
                className={classNames('relative w-full max-w-3xl md:mx-auto z-2', {
-                  'sticky bottom-0 bg-bolt-elements-app-backgroundColor': chatStarted,
+                  'sticky bottom-0': chatStarted,
                })}
              >
                <div
-                  className={classNames('shadow-sm mb-6 border border-gray-200 bg-white rounded-lg overflow-hidden')}
+                  className={classNames(
+                    'shadow-sm border border-gray-200 bg-white/85 backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',
+                  )}
                >
                  <textarea
                    ref={textareaRef}
+                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none bg-transparent`}
                    onKeyDown={(event) => {
                      if (event.key === 'Enter') {
                        if (event.shiftKey) {
@@ -103,7 +104,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                    onChange={(event) => {
                      handleInputChange?.(event);
                    }}
-                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none`}
                    style={{
                      minHeight: TEXTAREA_MIN_HEIGHT,
                      maxHeight: TEXTAREA_MAX_HEIGHT,
@@ -146,10 +146,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                    ) : null}
                  </div>
                </div>
+                <div className="bg-white pb-6">{/* Ghost Element */}</div>
              </div>
            </div>
          </div>
-          <ClientOnly>{() => <Workspace chatStarted={chatStarted} />}</ClientOnly>
+          <ClientOnly>{() => <Workbench chatStarted={chatStarted} />}</ClientOnly>
        </div>
      </div>
    );
--- a/packages/bolt/app/components/chat/Chat.client.tsx
+++ b/packages/bolt/app/components/chat/Chat.client.tsx
@@ -1,9 +1,9 @@
 import { useChat } from 'ai/react';
 import { useAnimate } from 'framer-motion';
 import { useEffect, useRef, useState } from 'react';
-import { useMessageParser, usePromptEnhancer } from '~/lib/hooks';
-import { cubicEasingFn } from '~/utils/easings';
-import { createScopedLogger } from '~/utils/logger';
+import { useMessageParser, usePromptEnhancer } from '../../lib/hooks';
+import { cubicEasingFn } from '../../utils/easings';
+import { createScopedLogger } from '../../utils/logger';
 import { BaseChat } from './BaseChat';

 const logger = createScopedLogger('Chat');
--- a/packages/bolt/app/components/chat/CodeBlock.tsx
+++ b/packages/bolt/app/components/chat/CodeBlock.tsx
@@ -1,82 +1,81 @@
 import { memo, useEffect, useState } from 'react';
-import {
-  bundledLanguages,
-  codeToHtml,
-  isSpecialLang,
-  type BundledLanguage,
-  type BundledTheme,
-  type SpecialLanguage,
-} from 'shiki';
-import { classNames } from '~/utils/classNames';
-import { createScopedLogger } from '~/utils/logger';
+import { bundledLanguages, codeToHtml, isSpecialLang, type BundledLanguage, type SpecialLanguage } from 'shiki';
+import { classNames } from '../../utils/classNames';
+import { createScopedLogger } from '../../utils/logger';
 import styles from './CodeBlock.module.scss';

 const logger = createScopedLogger('CodeBlock');

 interface CodeBlockProps {
+  className?: string;
  code: string;
-  language?: BundledLanguage;
-  theme?: BundledTheme | SpecialLanguage;
+  language?: BundledLanguage | SpecialLanguage;
+  theme?: 'light-plus' | 'dark-plus';
+  disableCopy?: boolean;
 }

-export const CodeBlock = memo(({ code, language, theme }: CodeBlockProps) => {
-  const [html, setHTML] = useState<string | undefined>(undefined);
-  const [copied, setCopied] = useState(false);
+export const CodeBlock = memo(
+  ({ className, code, language = 'plaintext', theme = 'dark-plus', disableCopy = false }: CodeBlockProps) => {
+    const [html, setHTML] = useState<string | undefined>(undefined);
+    const [copied, setCopied] = useState(false);

-  const copyToClipboard = () => {
-    if (copied) {
-      return;
-    }
+    const copyToClipboard = () => {
+      if (copied) {
+        return;
+      }

-    navigator.clipboard.writeText(code);
+      navigator.clipboard.writeText(code);

-    setCopied(true);
+      setCopied(true);

-    setTimeout(() => {
-      setCopied(false);
-    }, 2000);
-  };
-
-  useEffect(() => {
-    if (language && !isSpecialLang(language) && !(language in bundledLanguages)) {
-      logger.warn(`Unsupported language '${language}'`);
-    }
-
-    logger.trace(`Language = ${language}`);
-
-    const processCode = async () => {
-      setHTML(await codeToHtml(code, { lang: language ?? 'plaintext', theme: theme ?? 'dark-plus' }));
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
    };

-    processCode();
-  }, [code]);
+    useEffect(() => {
+      if (language && !isSpecialLang(language) && !(language in bundledLanguages)) {
+        logger.warn(`Unsupported language '${language}'`);
+      }

-  return (
-    <div className="relative group">
-      <div
-        className={classNames(
-          styles.CopyButtonContainer,
-          'bg-white absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center opacity-0 group-hover:opacity-100',
-          {
-            'rounded-l-0 opacity-100': copied,
-          },
-        )}
-      >
-        <button
+      logger.trace(`Language = ${language}`);
+
+      const processCode = async () => {
+        setHTML(await codeToHtml(code, { lang: language, theme }));
+      };
+
+      processCode();
+    }, [code]);
+
+    return (
+      <div className={classNames('relative group text-left', className)}>
+        <div
          className={classNames(
-            'flex items-center bg-transparent p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300',
+            styles.CopyButtonContainer,
+            'bg-white absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center opacity-0 group-hover:opacity-100',
            {
-              'before:opacity-0': !copied,
-              'before:opacity-100': copied,
+              'rounded-l-0 opacity-100': copied,
            },
          )}
-          title="Copy Code"
-          onClick={() => copyToClipboard()}
        >
-          <div className="i-ph:clipboard-text-duotone"></div>
-        </button>
+          {!disableCopy && (
+            <button
+              className={classNames(
+                'flex items-center bg-transparent p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300',
+                {
+                  'before:opacity-0': !copied,
+                  'before:opacity-100': copied,
+                },
+              )}
+              title="Copy Code"
+              onClick={() => copyToClipboard()}
+            >
+              <div className="i-ph:clipboard-text-duotone"></div>
+            </button>
+          )}
+        </div>
+        <div dangerouslySetInnerHTML={{ __html: html ?? '' }}></div>
      </div>
-      <div dangerouslySetInnerHTML={{ __html: html ?? '' }}></div>
-    </div>
-  );
-});
+    );
+  },
+);
--- a/packages/bolt/app/components/chat/Markdown.module.scss
+++ b/packages/bolt/app/components/chat/Markdown.module.scss
@@ -6,6 +6,12 @@ $color-link: #3498db;
 $color-code-bg: #f8f8f8;
 $color-blockquote-border: #dfe2e5;

+@mixin not-inside-actions {
+  &:not(:has(:global(.actions)), :global(.actions *)) {
+    @content;
+  }
+}
+
 .MarkdownContent {
  line-height: 1.6;
  color: $color-text;
@@ -15,11 +21,13 @@ $color-blockquote-border: #dfe2e5;
  }

  :is(h1, h2, h3, h4, h5, h6) {
-    margin-top: 24px;
-    margin-bottom: 16px;
-    font-weight: 600;
-    line-height: 1.25;
-    color: $color-heading;
+    @include not-inside-actions {
+      margin-top: 24px;
+      margin-bottom: 16px;
+      font-weight: 600;
+      line-height: 1.25;
+      color: $color-heading;
+    }
  }

  h1 {
@@ -68,9 +76,12 @@ $color-blockquote-border: #dfe2e5;
  :not(pre) > code {
    font-family: $font-mono;
    font-size: 14px;
-    background-color: $color-code-bg;
    border-radius: 6px;
    padding: 0.2em 0.4em;
+
+    @include not-inside-actions {
+      background-color: $color-code-bg;
+    }
  }

  pre {
@@ -83,6 +94,7 @@ $color-blockquote-border: #dfe2e5;
    font-size: 14px;
    background: transparent;
    overflow-x: auto;
+    min-width: 0;
  }

  blockquote {
@@ -93,25 +105,35 @@ $color-blockquote-border: #dfe2e5;
  }

  :is(ul, ol) {
-    padding-left: 2em;
-    margin-top: 0;
-    margin-bottom: 24px;
+    @include not-inside-actions {
+      padding-left: 2em;
+      margin-top: 0;
+      margin-bottom: 24px;
+    }
  }

  ul {
-    list-style-type: disc;
+    @include not-inside-actions {
+      list-style-type: disc;
+    }
  }

  ol {
-    list-style-type: decimal;
+    @include not-inside-actions {
+      list-style-type: decimal;
+    }
  }

-  li + li {
-    margin-top: 8px;
-  }
+  li {
+    @include not-inside-actions {
+      & + li {
+        margin-top: 8px;
+      }

-  li > *:not(:last-child) {
-    margin-bottom: 16px;
+      > *:not(:last-child) {
+        margin-bottom: 16px;
+      }
+    }
  }

  img {
--- a/packages/bolt/app/components/chat/Markdown.tsx
+++ b/packages/bolt/app/components/chat/Markdown.tsx
@@ -1,10 +1,11 @@
 import { memo, useMemo } from 'react';
 import ReactMarkdown, { type Components } from 'react-markdown';
 import type { BundledLanguage } from 'shiki';
-import { createScopedLogger } from '~/utils/logger';
-import { rehypePlugins, remarkPlugins } from '~/utils/markdown';
+import { createScopedLogger } from '../../utils/logger';
+import { rehypePlugins, remarkPlugins } from '../../utils/markdown';
 import { Artifact } from './Artifact';
 import { CodeBlock } from './CodeBlock';
+
 import styles from './Markdown.module.scss';

 const logger = createScopedLogger('MarkdownComponent');
@@ -20,13 +21,18 @@ export const Markdown = memo(({ children }: MarkdownProps) => {
    return {
      div: ({ className, children, node, ...props }) => {
        if (className?.includes('__boltArtifact__')) {
+          const artifactId = node?.properties.dataArtifactId as string;
          const messageId = node?.properties.dataMessageId as string;

-          if (!messageId) {
-            logger.warn(`Invalud message id ${messageId}`);
+          if (!artifactId) {
+            logger.debug(`Invalid artifact id ${messageId}`);
          }

-          return <Artifact messageId={messageId} />;
+          if (!messageId) {
+            logger.debug(`Invalid message id ${messageId}`);
+          }
+
+          return <Artifact artifactId={artifactId} messageId={messageId} />;
        }

        return (
--- a/packages/bolt/app/components/chat/Messages.client.tsx
+++ b/packages/bolt/app/components/chat/Messages.client.tsx
@@ -1,5 +1,5 @@
 import type { Message } from 'ai';
-import { classNames } from '~/utils/classNames';
+import { classNames } from '../../utils/classNames';
 import { AssistantMessage } from './AssistantMessage';
 import { UserMessage } from './UserMessage';

@@ -50,7 +50,9 @@ export function Messages(props: MessagesProps) {
                  >
                    <div className={isUserMessage ? 'i-ph:user-fill text-xl' : 'i-blitz:logo'}></div>
                  </div>
-                  {isUser ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+                  <div className="grid grid-col-1 w-full">
+                    {isUser ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+                  </div>
                </div>
              </div>
            );
--- a/packages/bolt/app/components/editor/codemirror/BinaryContent.tsx
+++ b/packages/bolt/app/components/editor/codemirror/BinaryContent.tsx
@@ -0,0 +1,7 @@
+export function BinaryContent() {
+  return (
+    <div className="flex items-center justify-center absolute inset-0 z-10 text-sm bg-tk-elements-app-backgroundColor text-tk-elements-app-textColor">
+      File format cannot be displayed.
+    </div>
+  );
+}
--- a/packages/bolt/app/components/editor/codemirror/CodeMirrorEditor.tsx
+++ b/packages/bolt/app/components/editor/codemirror/CodeMirrorEditor.tsx
@@ -0,0 +1,339 @@
+import { acceptCompletion, autocompletion, closeBrackets } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { bracketMatching, foldGutter, indentOnInput, indentUnit } from '@codemirror/language';
+import { searchKeymap } from '@codemirror/search';
+import { Compartment, EditorSelection, EditorState, type Extension } from '@codemirror/state';
+import {
+  EditorView,
+  drawSelection,
+  dropCursor,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  keymap,
+  lineNumbers,
+  scrollPastEnd,
+} from '@codemirror/view';
+import { useEffect, useRef, useState, type MutableRefObject } from 'react';
+import type { Theme } from '../../../types/theme';
+import { classNames } from '../../../utils/classNames';
+import { debounce } from '../../../utils/debounce';
+import { createScopedLogger } from '../../../utils/logger';
+import { BinaryContent } from './BinaryContent';
+import { getTheme, reconfigureTheme } from './cm-theme';
+import { indentKeyBinding } from './indent';
+import { getLanguage } from './languages';
+
+const logger = createScopedLogger('CodeMirrorEditor');
+
+export interface EditorDocument {
+  value: string | Uint8Array;
+  loading: boolean;
+  filePath: string;
+  scroll?: ScrollPosition;
+}
+
+export interface EditorSettings {
+  fontSize?: string;
+  tabSize?: number;
+}
+
+type TextEditorDocument = EditorDocument & {
+  value: string;
+};
+
+export interface ScrollPosition {
+  top: number;
+  left: number;
+}
+
+export interface EditorUpdate {
+  selection: EditorSelection;
+  content: string;
+}
+
+export type OnChangeCallback = (update: EditorUpdate) => void;
+export type OnScrollCallback = (position: ScrollPosition) => void;
+
+interface Props {
+  theme: Theme;
+  id?: unknown;
+  doc?: EditorDocument;
+  debounceChange?: number;
+  debounceScroll?: number;
+  autoFocusOnDocumentChange?: boolean;
+  onChange?: OnChangeCallback;
+  onScroll?: OnScrollCallback;
+  className?: string;
+  settings?: EditorSettings;
+}
+
+type EditorStates = Map<string, EditorState>;
+
+export function CodeMirrorEditor({
+  id,
+  doc,
+  debounceScroll = 100,
+  debounceChange = 150,
+  autoFocusOnDocumentChange = false,
+  onScroll,
+  onChange,
+  theme,
+  settings,
+  className = '',
+}: Props) {
+  const [language] = useState(new Compartment());
+  const [readOnly] = useState(new Compartment());
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<EditorView>();
+  const themeRef = useRef<Theme>();
+  const docRef = useRef<EditorDocument>();
+  const editorStatesRef = useRef<EditorStates>();
+  const onScrollRef = useRef(onScroll);
+  const onChangeRef = useRef(onChange);
+
+  const isBinaryFile = doc?.value instanceof Uint8Array;
+
+  onScrollRef.current = onScroll;
+  onChangeRef.current = onChange;
+
+  docRef.current = doc;
+  themeRef.current = theme;
+
+  useEffect(() => {
+    const onUpdate = debounce((update: EditorUpdate) => {
+      onChangeRef.current?.(update);
+    }, debounceChange);
+
+    const view = new EditorView({
+      parent: containerRef.current!,
+      dispatchTransactions(transactions) {
+        const previousSelection = view.state.selection;
+
+        view.update(transactions);
+
+        const newSelection = view.state.selection;
+
+        const selectionChanged =
+          newSelection !== previousSelection &&
+          (newSelection === undefined || previousSelection === undefined || !newSelection.eq(previousSelection));
+
+        if (
+          docRef.current &&
+          !docRef.current.loading &&
+          (transactions.some((transaction) => transaction.docChanged) || selectionChanged)
+        ) {
+          onUpdate({
+            selection: view.state.selection,
+            content: view.state.doc.toString(),
+          });
+
+          editorStatesRef.current!.set(docRef.current.filePath, view.state);
+        }
+      },
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      viewRef.current?.destroy();
+      viewRef.current = undefined;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!viewRef.current) {
+      return;
+    }
+
+    viewRef.current.dispatch({
+      effects: [reconfigureTheme(theme)],
+    });
+  }, [theme]);
+
+  useEffect(() => {
+    editorStatesRef.current = new Map<string, EditorState>();
+  }, [id]);
+
+  useEffect(() => {
+    const editorStates = editorStatesRef.current!;
+    const view = viewRef.current!;
+    const theme = themeRef.current!;
+
+    if (!doc) {
+      const state = newEditorState('', theme, settings, onScrollRef, debounceScroll, [language.of([])]);
+
+      view.setState(state);
+
+      setNoDocument(view);
+
+      return;
+    }
+
+    if (doc.value instanceof Uint8Array) {
+      return;
+    }
+
+    if (doc.filePath === '') {
+      logger.warn('File path should not be empty');
+    }
+
+    let state = editorStates.get(doc.filePath);
+
+    if (!state) {
+      state = newEditorState(doc.value, theme, settings, onScrollRef, debounceScroll, [
+        language.of([]),
+        readOnly.of([EditorState.readOnly.of(doc.loading)]),
+      ]);
+
+      editorStates.set(doc.filePath, state);
+    }
+
+    view.setState(state);
+
+    setEditorDocument(view, theme, language, readOnly, autoFocusOnDocumentChange, doc as TextEditorDocument);
+  }, [doc?.value, doc?.filePath, doc?.loading, autoFocusOnDocumentChange]);
+
+  return (
+    <div className={classNames('relative h-full', className)}>
+      {isBinaryFile && <BinaryContent />}
+      <div className="h-full overflow-hidden" ref={containerRef} />
+    </div>
+  );
+}
+
+export default CodeMirrorEditor;
+
+CodeMirrorEditor.displayName = 'CodeMirrorEditor';
+
+function newEditorState(
+  content: string,
+  theme: Theme,
+  settings: EditorSettings | undefined,
+  onScrollRef: MutableRefObject<OnScrollCallback | undefined>,
+  debounceScroll: number,
+  extensions: Extension[],
+) {
+  return EditorState.create({
+    doc: content,
+    extensions: [
+      EditorView.domEventHandlers({
+        scroll: debounce((_event, view) => {
+          onScrollRef.current?.({ left: view.scrollDOM.scrollLeft, top: view.scrollDOM.scrollTop });
+        }, debounceScroll),
+        keydown: (event) => {
+          if (event.code === 'KeyS' && (event.ctrlKey || event.metaKey)) {
+            event.preventDefault();
+          }
+        },
+      }),
+      getTheme(theme, settings),
+      history(),
+      keymap.of([
+        ...defaultKeymap,
+        ...historyKeymap,
+        ...searchKeymap,
+        { key: 'Tab', run: acceptCompletion },
+        indentKeyBinding,
+      ]),
+      indentUnit.of('\t'),
+      autocompletion({
+        closeOnBlur: false,
+      }),
+      closeBrackets(),
+      lineNumbers(),
+      scrollPastEnd(),
+      dropCursor(),
+      drawSelection(),
+      bracketMatching(),
+      EditorState.tabSize.of(settings?.tabSize ?? 2),
+      indentOnInput(),
+      highlightActiveLineGutter(),
+      highlightActiveLine(),
+      foldGutter({
+        markerDOM: (open) => {
+          const icon = document.createElement('div');
+
+          icon.className = `fold-icon ${open ? 'i-ph-caret-down-bold' : 'i-ph-caret-right-bold'}`;
+
+          return icon;
+        },
+      }),
+      ...extensions,
+    ],
+  });
+}
+
+function setNoDocument(view: EditorView) {
+  view.dispatch({
+    selection: { anchor: 0 },
+    changes: {
+      from: 0,
+      to: view.state.doc.length,
+      insert: '',
+    },
+  });
+
+  view.scrollDOM.scrollTo(0, 0);
+}
+
+function setEditorDocument(
+  view: EditorView,
+  theme: Theme,
+  language: Compartment,
+  readOnly: Compartment,
+  autoFocus: boolean,
+  doc: TextEditorDocument,
+) {
+  if (doc.value !== view.state.doc.toString()) {
+    view.dispatch({
+      selection: { anchor: 0 },
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: doc.value,
+      },
+    });
+  }
+
+  view.dispatch({
+    effects: [readOnly.reconfigure([EditorState.readOnly.of(doc.loading)])],
+  });
+
+  getLanguage(doc.filePath).then((languageSupport) => {
+    if (!languageSupport) {
+      return;
+    }
+
+    view.dispatch({
+      effects: [language.reconfigure([languageSupport]), reconfigureTheme(theme)],
+    });
+
+    requestAnimationFrame(() => {
+      const currentLeft = view.scrollDOM.scrollLeft;
+      const currentTop = view.scrollDOM.scrollTop;
+      const newLeft = doc.scroll?.left ?? 0;
+      const newTop = doc.scroll?.top ?? 0;
+
+      const needsScrolling = currentLeft !== newLeft || currentTop !== newTop;
+
+      if (autoFocus) {
+        if (needsScrolling) {
+          // we have to wait until the scroll position was changed before we can set the focus
+          view.scrollDOM.addEventListener(
+            'scroll',
+            () => {
+              view.focus();
+            },
+            { once: true },
+          );
+        } else {
+          // if the scroll position is still the same we can focus immediately
+          view.focus();
+        }
+      }
+
+      view.scrollDOM.scrollTo(newLeft, newTop);
+    });
+  });
+}
--- a/packages/bolt/app/components/editor/codemirror/cm-theme.ts
+++ b/packages/bolt/app/components/editor/codemirror/cm-theme.ts
@@ -0,0 +1,165 @@
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { Compartment, type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import type { Theme } from '../../../types/theme.js';
+import type { EditorSettings } from './CodeMirrorEditor.js';
+import { vscodeDarkTheme } from './themes/vscode-dark.js';
+
+import './styles.css';
+
+export const darkTheme = EditorView.theme({}, { dark: true });
+export const themeSelection = new Compartment();
+
+export function getTheme(theme: Theme, settings: EditorSettings = {}): Extension {
+  return [
+    getEditorTheme(settings),
+    theme === 'dark' ? themeSelection.of([getDarkTheme()]) : themeSelection.of([getLightTheme()]),
+  ];
+}
+
+export function reconfigureTheme(theme: Theme) {
+  return themeSelection.reconfigure(theme === 'dark' ? getDarkTheme() : getLightTheme());
+}
+
+function getEditorTheme(settings: EditorSettings) {
+  return EditorView.theme({
+    ...(settings.fontSize && {
+      '&': {
+        fontSize: settings.fontSize,
+      },
+    }),
+    '&.cm-editor': {
+      height: '100%',
+      background: 'var(--cm-backgroundColor)',
+      color: 'var(--cm-textColor)',
+    },
+    '.cm-cursor': {
+      borderLeft: 'var(--cm-cursor-width) solid var(--cm-cursor-backgroundColor)',
+    },
+    '.cm-scroller': {
+      lineHeight: '1.5',
+    },
+    '.cm-line': {
+      padding: '0 0 0 4px',
+    },
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+      backgroundColor: 'var(--cm-selection-backgroundColorFocused)',
+      opacity: 'var(--cm-selection-backgroundOpacityFocused, 0.3)',
+    },
+    '&:not(.cm-focused) > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+      backgroundColor: 'var(--cm-selection-backgroundColorBlured)',
+      opacity: 'var(--cm-selection-backgroundOpacityBlured, 0.3)',
+    },
+    '&.cm-focused > .cm-scroller .cm-matchingBracket': {
+      backgroundColor: 'var(--cm-matching-bracket)',
+    },
+    '.cm-activeLine': {
+      background: 'var(--cm-activeLineBackgroundColor)',
+    },
+    '.cm-gutters': {
+      background: 'var(--cm-gutter-backgroundColor)',
+      borderRight: 0,
+      color: 'var(--cm-gutter-textColor)',
+    },
+    '.cm-gutter': {
+      '&.cm-lineNumbers': {
+        fontFamily: 'Roboto Mono, monospace',
+        fontSize: '13px',
+        minWidth: '28px',
+      },
+      '& .cm-activeLineGutter': {
+        background: 'transparent',
+        color: 'var(--cm-gutter-activeLineTextColor)',
+      },
+      '&.cm-foldGutter .cm-gutterElement > .fold-icon': {
+        cursor: 'pointer',
+        color: 'var(--cm-foldGutter-textColor)',
+        transform: 'translateY(2px)',
+        '&:hover': {
+          color: 'var(--cm-foldGutter-textColorHover)',
+        },
+      },
+    },
+    '.cm-foldGutter .cm-gutterElement': {
+      padding: '0 4px',
+    },
+    '.cm-tooltip-autocomplete > ul > li': {
+      minHeight: '18px',
+    },
+    '.cm-panel.cm-search label': {
+      marginLeft: '2px',
+    },
+    '.cm-panel.cm-search input[type=checkbox]': {
+      position: 'relative',
+      transform: 'translateY(2px)',
+      marginRight: '4px',
+    },
+    '.cm-panels': {
+      borderColor: 'var(--cm-panels-borderColor)',
+    },
+    '.cm-panel.cm-search': {
+      background: 'var(--cm-search-backgroundColor)',
+      color: 'var(--cm-search-textColor)',
+      padding: '6px 8px',
+    },
+    '.cm-search .cm-button': {
+      background: 'var(--cm-search-button-backgroundColor)',
+      borderColor: 'var(--cm-search-button-borderColor)',
+      color: 'var(--cm-search-button-textColor)',
+      borderRadius: '4px',
+      '&:hover': {
+        color: 'var(--cm-search-button-textColorHover)',
+      },
+      '&:focus-visible': {
+        outline: 'none',
+        borderColor: 'var(--cm-search-button-borderColorFocused)',
+      },
+      '&:hover:not(:focus-visible)': {
+        background: 'var(--cm-search-button-backgroundColorHover)',
+        borderColor: 'var(--cm-search-button-borderColorHover)',
+      },
+      '&:hover:focus-visible': {
+        background: 'var(--cm-search-button-backgroundColorHover)',
+        borderColor: 'var(--cm-search-button-borderColorFocused)',
+      },
+    },
+    '.cm-panel.cm-search [name=close]': {
+      top: '6px',
+      right: '6px',
+      padding: '0 6px',
+      backgroundColor: 'var(--cm-search-closeButton-backgroundColor)',
+      color: 'var(--cm-search-closeButton-textColor)',
+      '&:hover': {
+        'border-radius': '6px',
+        color: 'var(--cm-search-closeButton-textColorHover)',
+        backgroundColor: 'var(--cm-search-closeButton-backgroundColorHover)',
+      },
+    },
+    '.cm-search input': {
+      background: 'var(--cm-search-input-backgroundColor)',
+      borderColor: 'var(--cm-search-input-borderColor)',
+      outline: 'none',
+      borderRadius: '4px',
+      '&:focus-visible': {
+        borderColor: 'var(--cm-search-input-borderColorFocused)',
+      },
+    },
+    '.cm-tooltip': {
+      background: 'var(--cm-tooltip-backgroundColor)',
+      borderColor: 'var(--cm-tooltip-borderColor)',
+      color: 'var(--cm-tooltip-textColor)',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete ul li[aria-selected]': {
+      background: 'var(--cm-tooltip-backgroundColorSelected)',
+      color: 'var(--cm-tooltip-textColorSelected)',
+    },
+  });
+}
+
+function getLightTheme() {
+  return syntaxHighlighting(defaultHighlightStyle);
+}
+
+function getDarkTheme() {
+  return syntaxHighlighting(vscodeDarkTheme);
+}
--- a/packages/bolt/app/components/editor/codemirror/indent.ts
+++ b/packages/bolt/app/components/editor/codemirror/indent.ts
@@ -0,0 +1,68 @@
+import { indentLess } from '@codemirror/commands';
+import { indentUnit } from '@codemirror/language';
+import { EditorSelection, EditorState, Line, type ChangeSpec } from '@codemirror/state';
+import { EditorView, type KeyBinding } from '@codemirror/view';
+
+export const indentKeyBinding: KeyBinding = {
+  key: 'Tab',
+  run: indentMore,
+  shift: indentLess,
+};
+
+function indentMore({ state, dispatch }: EditorView) {
+  if (state.readOnly) {
+    return false;
+  }
+
+  dispatch(
+    state.update(
+      changeBySelectedLine(state, (from, to, changes) => {
+        changes.push({ from, to, insert: state.facet(indentUnit) });
+      }),
+      { userEvent: 'input.indent' },
+    ),
+  );
+
+  return true;
+}
+
+function changeBySelectedLine(
+  state: EditorState,
+  cb: (from: number, to: number | undefined, changes: ChangeSpec[], line: Line) => void,
+) {
+  return state.changeByRange((range) => {
+    const changes: ChangeSpec[] = [];
+
+    const line = state.doc.lineAt(range.from);
+
+    // just insert single indent unit at the current cursor position
+    if (range.from === range.to) {
+      cb(range.from, undefined, changes, line);
+    }
+    // handle the case when multiple characters are selected in a single line
+    else if (range.from < range.to && range.to <= line.to) {
+      cb(range.from, range.to, changes, line);
+    } else {
+      let atLine = -1;
+
+      // handle the case when selection spans multiple lines
+      for (let pos = range.from; pos <= range.to; ) {
+        const line = state.doc.lineAt(pos);
+
+        if (line.number > atLine && (range.empty || range.to > line.from)) {
+          cb(line.from, undefined, changes, line);
+          atLine = line.number;
+        }
+
+        pos = line.to + 1;
+      }
+    }
+
+    const changeSet = state.changes(changes);
+
+    return {
+      changes,
+      range: EditorSelection.range(changeSet.mapPos(range.anchor, 1), changeSet.mapPos(range.head, 1)),
+    };
+  });
+}
--- a/packages/bolt/app/components/editor/codemirror/languages.ts
+++ b/packages/bolt/app/components/editor/codemirror/languages.ts
@@ -0,0 +1,91 @@
+import { LanguageDescription } from '@codemirror/language';
+
+export const supportedLanguages = [
+  LanguageDescription.of({
+    name: 'TS',
+    extensions: ['ts'],
+    async load() {
+      return import('@codemirror/lang-javascript').then((module) => module.javascript({ typescript: true }));
+    },
+  }),
+  LanguageDescription.of({
+    name: 'JS',
+    extensions: ['js', 'mjs', 'cjs'],
+    async load() {
+      return import('@codemirror/lang-javascript').then((module) => module.javascript());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'TSX',
+    extensions: ['tsx'],
+    async load() {
+      return import('@codemirror/lang-javascript').then((module) => module.javascript({ jsx: true, typescript: true }));
+    },
+  }),
+  LanguageDescription.of({
+    name: 'JSX',
+    extensions: ['jsx'],
+    async load() {
+      return import('@codemirror/lang-javascript').then((module) => module.javascript({ jsx: true }));
+    },
+  }),
+  LanguageDescription.of({
+    name: 'HTML',
+    extensions: ['html'],
+    async load() {
+      return import('@codemirror/lang-html').then((module) => module.html());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'CSS',
+    extensions: ['css'],
+    async load() {
+      return import('@codemirror/lang-css').then((module) => module.css());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'SASS',
+    extensions: ['sass'],
+    async load() {
+      return import('@codemirror/lang-sass').then((module) => module.sass({ indented: true }));
+    },
+  }),
+  LanguageDescription.of({
+    name: 'SCSS',
+    extensions: ['scss'],
+    async load() {
+      return import('@codemirror/lang-sass').then((module) => module.sass({ indented: false }));
+    },
+  }),
+  LanguageDescription.of({
+    name: 'JSON',
+    extensions: ['json'],
+    async load() {
+      return import('@codemirror/lang-json').then((module) => module.json());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'Markdown',
+    extensions: ['md'],
+    async load() {
+      return import('@codemirror/lang-markdown').then((module) => module.markdown());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'Wasm',
+    extensions: ['wat'],
+    async load() {
+      return import('@codemirror/lang-wast').then((module) => module.wast());
+    },
+  }),
+];
+
+export async function getLanguage(fileName: string) {
+  const languageDescription = LanguageDescription.matchFilename(supportedLanguages, fileName);
+
+  if (languageDescription) {
+    return await languageDescription.load();
+  }
+
+  return undefined;
+}
--- a/packages/bolt/app/components/editor/codemirror/styles.css
+++ b/packages/bolt/app/components/editor/codemirror/styles.css
@@ -0,0 +1,133 @@
+:root {
+  --cm-backgroundColor: var(--bolt-elements-editor-backgroundColor, var(--bolt-elements-app-backgroundColor));
+  --cm-textColor: var(--bolt-elements-editor-textColor, var(--bolt-text-primary));
+
+  /* Gutter */
+
+  --cm-gutter-backgroundColor: var(--bolt-elements-editor-gutter-backgroundColor, var(--cm-backgroundColor));
+  --cm-gutter-textColor: var(--bolt-elements-editor-gutter-textColor, var(--bolt-text-secondary));
+  --cm-gutter-activeLineTextColor: var(--bolt-elements-editor-gutter-activeLineTextColor, var(--cm-gutter-textColor));
+
+  /* Fold Gutter */
+
+  --cm-foldGutter-textColor: var(--bolt-elements-editor-foldGutter-textColor, var(--cm-gutter-textColor));
+  --cm-foldGutter-textColorHover: var(--bolt-elements-editor-foldGutter-textColorHover, var(--cm-gutter-textColor));
+
+  /* Active Line */
+
+  --cm-activeLineBackgroundColor: var(--bolt-elements-editor-activeLineBackgroundColor, rgb(224 231 235 / 30%));
+
+  /* Cursor */
+
+  --cm-cursor-width: 2px;
+  --cm-cursor-backgroundColor: var(--bolt-elements-editor-cursorColor, var(--bolt-text-primary));
+
+  /* Matching Brackets */
+
+  --cm-matching-bracket: var(--bolt-elements-editor-matchingBracketBackgroundColor, rgb(50 140 130 / 0.3));
+
+  /* Selection */
+
+  --cm-selection-backgroundColorFocused: var(--bolt-elements-editor-selection-backgroundColor, #42b4ff);
+  --cm-selection-backgroundOpacityFocused: var(--bolt-elements-editor-selection-backgroundOpacity, 0.3);
+  --cm-selection-backgroundColorBlured: var(--bolt-elements-editor-selection-inactiveBackgroundColor, #c9e9ff);
+  --cm-selection-backgroundOpacityBlured: var(--bolt-elements-editor-selection-inactiveBackgroundOpacity, 0.3);
+
+  /* Panels */
+
+  --cm-panels-borderColor: var(--bolt-elements-editor-panels-borderColor, var(--bolt-elements-app-borderColor));
+
+  /* Search */
+
+  --cm-search-backgroundColor: var(--bolt-elements-editor-search-backgroundColor, var(--cm-backgroundColor));
+  --cm-search-textColor: var(--bolt-elements-editor-search-textColor, var(--bolt-elements-app-textColor));
+  --cm-search-closeButton-backgroundColor: var(--bolt-elements-editor-search-closeButton-backgroundColor, transparent);
+
+  --cm-search-closeButton-backgroundColorHover: var(
+    --bolt-elements-editor-search-closeButton-backgroundColorHover,
+    var(--bolt-background-secondary)
+  );
+
+  --cm-search-closeButton-textColor: var(
+    --bolt-elements-editor-search-closeButton-textColor,
+    var(--bolt-text-secondary)
+  );
+
+  --cm-search-closeButton-textColorHover: var(
+    --bolt-elements-editor-search-closeButton-textColorHover,
+    var(--bolt-text-primary)
+  );
+
+  --cm-search-button-backgroundColor: var(
+    --bolt-elements-editor-search-button-backgroundColor,
+    var(--bolt-background-secondary)
+  );
+
+  --cm-search-button-backgroundColorHover: var(
+    --bolt-elements-editor-search-button-backgroundColorHover,
+    var(--bolt-background-active)
+  );
+
+  --cm-search-button-textColor: var(--bolt-elements-editor-search-button-textColor, var(--bolt-text-secondary));
+  --cm-search-button-textColorHover: var(--bolt-elements-editor-search-button-textColorHover, var(--bolt-text-primary));
+  --cm-search-button-borderColor: var(--bolt-elements-editor-search-button-borderColor, transparent);
+
+  --cm-search-button-borderColorHover: var(
+    --bolt-elements-editor-search-button-borderColorHover,
+    var(--cm-search-button-borderColor)
+  );
+
+  --cm-search-button-borderColorFocused: var(
+    --bolt-elements-editor-search-button-borderColorFocused,
+    var(--bolt-border-accent)
+  );
+
+  --cm-search-input-backgroundColor: var(
+    --bolt-elements-editor-search-input-backgroundColor,
+    var(--bolt-background-primary)
+  );
+
+  --cm-search-input-borderColor: var(
+    --bolt-elements-editor-search-input-borderColor,
+    var(--bolt-elements-app-borderColor)
+  );
+
+  --cm-search-input-borderColorFocused: var(
+    --bolt-elements-editor-search-input-borderColorFocused,
+    var(--bolt-border-accent)
+  );
+
+  /* Tooltip */
+
+  --cm-tooltip-backgroundColor: var(
+    --bolt-elements-editor-tooltip-backgroundColor,
+    var(--bolt-elements-app-backgroundColor)
+  );
+
+  --cm-tooltip-textColor: var(--bolt-elements-editor-tooltip-textColor, var(--bolt-text-primary));
+
+  --cm-tooltip-backgroundColorSelected: var(
+    --bolt-elements-editor-tooltip-backgroundColorSelected,
+    var(--bolt-background-accent)
+  );
+
+  --cm-tooltip-textColorSelected: var(
+    --bolt-elements-editor-tooltip-textColorSelected,
+    var(--bolt-text-primary-inverted)
+  );
+
+  --cm-tooltip-borderColor: var(--bolt-elements-editor-tooltip-borderColor, var(--bolt-elements-app-borderColor));
+}
+
+html[data-theme='light'] {
+  --bolt-elements-editor-gutter-textColor: #237893;
+  --bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-text-primary);
+  --bolt-elements-editor-foldGutter-textColorHover: var(--bolt-text-primary);
+}
+
+html[data-theme='dark'] {
+  --bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-text-primary);
+  --bolt-elements-editor-selection-backgroundOpacityBlured: 0.1;
+  --bolt-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
+  --bolt-elements-editor-foldGutter-textColorHover: var(--bolt-text-primary);
+}
--- a/packages/bolt/app/components/editor/codemirror/themes/vscode-dark.ts
+++ b/packages/bolt/app/components/editor/codemirror/themes/vscode-dark.ts
@@ -0,0 +1,76 @@
+import { HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+export const vscodeDarkTheme = HighlightStyle.define([
+  {
+    tag: [
+      tags.keyword,
+      tags.operatorKeyword,
+      tags.modifier,
+      tags.color,
+      tags.constant(tags.name),
+      tags.standard(tags.name),
+      tags.standard(tags.tagName),
+      tags.special(tags.brace),
+      tags.atom,
+      tags.bool,
+      tags.special(tags.variableName),
+    ],
+    color: '#569cd6',
+  },
+  {
+    tag: [tags.controlKeyword, tags.moduleKeyword],
+    color: '#c586c0',
+  },
+  {
+    tag: [
+      tags.name,
+      tags.deleted,
+      tags.character,
+      tags.macroName,
+      tags.propertyName,
+      tags.variableName,
+      tags.labelName,
+      tags.definition(tags.name),
+    ],
+    color: '#9cdcfe',
+  },
+  { tag: tags.heading, fontWeight: 'bold', color: '#9cdcfe' },
+  {
+    tag: [
+      tags.typeName,
+      tags.className,
+      tags.tagName,
+      tags.number,
+      tags.changed,
+      tags.annotation,
+      tags.self,
+      tags.namespace,
+    ],
+    color: '#4ec9b0',
+  },
+  {
+    tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
+    color: '#dcdcaa',
+  },
+  { tag: [tags.number], color: '#b5cea8' },
+  {
+    tag: [tags.operator, tags.punctuation, tags.separator, tags.url, tags.escape, tags.regexp],
+    color: '#d4d4d4',
+  },
+  {
+    tag: [tags.regexp],
+    color: '#d16969',
+  },
+  {
+    tag: [tags.special(tags.string), tags.processingInstruction, tags.string, tags.inserted],
+    color: '#ce9178',
+  },
+  { tag: [tags.angleBracket], color: '#808080' },
+  { tag: tags.strong, fontWeight: 'bold' },
+  { tag: tags.emphasis, fontStyle: 'italic' },
+  { tag: tags.strikethrough, textDecoration: 'line-through' },
+  { tag: [tags.meta, tags.comment], color: '#6a9955' },
+  { tag: tags.link, color: '#6a9955', textDecoration: 'underline' },
+  { tag: tags.invalid, color: '#ff0000' },
+]);
--- a/packages/bolt/app/components/ui/IconButton.tsx
+++ b/packages/bolt/app/components/ui/IconButton.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { classNames } from '~/utils/classNames';
+import { classNames } from '../../utils/classNames';

 type IconSize = 'sm' | 'md' | 'xl' | 'xxl';

--- a/packages/bolt/app/components/workbench/EditorPanel.tsx
+++ b/packages/bolt/app/components/workbench/EditorPanel.tsx
@@ -0,0 +1,21 @@
+import { useStore } from '@nanostores/react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { themeStore } from '../../lib/stores/theme';
+import CodeMirrorEditor from '../editor/codemirror/CodeMirrorEditor';
+import { FileTreePanel } from './FileTreePanel';
+
+export function EditorPanel() {
+  const theme = useStore(themeStore);
+
+  return (
+    <PanelGroup direction="horizontal">
+      <Panel defaultSize={30} minSize={20} collapsible={false}>
+        <FileTreePanel />
+      </Panel>
+      <PanelResizeHandle />
+      <Panel defaultSize={70} minSize={20}>
+        <CodeMirrorEditor theme={theme} settings={{ tabSize: 2 }} />
+      </Panel>
+    </PanelGroup>
+  );
+}
--- a/packages/bolt/app/components/workbench/FileTree.tsx
+++ b/packages/bolt/app/components/workbench/FileTree.tsx
@@ -0,0 +1,3 @@
+export function FileTree() {
+  return <div>File Tree</div>;
+}
--- a/packages/bolt/app/components/workbench/FileTreePanel.tsx
+++ b/packages/bolt/app/components/workbench/FileTreePanel.tsx
@@ -0,0 +1,9 @@
+import { FileTree } from './FileTree';
+
+export function FileTreePanel() {
+  return (
+    <div className="border-r h-full p-4">
+      <FileTree />
+    </div>
+  );
+}
--- a/packages/bolt/app/components/workbench/Preview.tsx
+++ b/packages/bolt/app/components/workbench/Preview.tsx
@@ -0,0 +1,63 @@
+import { useStore } from '@nanostores/react';
+import { memo, useEffect, useRef, useState } from 'react';
+import { workbenchStore } from '../../lib/stores/workbench';
+import { IconButton } from '../ui/IconButton';
+
+export const Preview = memo(() => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [activePreviewIndex] = useState(0);
+  const previews = useStore(workbenchStore.previews);
+  const activePreview = previews[activePreviewIndex];
+
+  const [url, setUrl] = useState('');
+  const [iframeUrl, setIframeUrl] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (activePreview && !iframeUrl) {
+      const { baseUrl } = activePreview;
+
+      setUrl(baseUrl);
+      setIframeUrl(baseUrl);
+    }
+  }, [activePreview, iframeUrl]);
+
+  const reloadPreview = () => {
+    if (iframeRef.current) {
+      iframeRef.current.src = iframeRef.current.src;
+    }
+  };
+
+  return (
+    <div className="w-full h-full flex flex-col">
+      <div className="bg-gray-100 rounded-t-lg p-2 flex items-center space-x-1.5">
+        <div className="i-ph:circle-fill text-[#FF5F57]"></div>
+        <div className="i-ph:circle-fill text-[#FEBC2E]"></div>
+        <div className="i-ph:circle-fill text-[#29CC41]"></div>
+        <div className="flex-grow"></div>
+      </div>
+      <div className="bg-white p-2 flex items-center gap-1">
+        <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
+        <div className="flex items-center gap-1 flex-grow bg-gray-100 rounded-full px-3 py-1 text-sm text-gray-600 hover:bg-gray-200 hover:focus-within:bg-white focus-within:bg-white focus-within:ring-2 focus-within:ring-accent">
+          <div className="bg-white rounded-full p-[2px] -ml-1">
+            <div className="i-ph:info-bold text-lg"></div>
+          </div>
+          <input
+            className="w-full bg-transparent outline-none"
+            type="text"
+            value={url}
+            onChange={(event) => {
+              setUrl(event.target.value);
+            }}
+          />
+        </div>
+      </div>
+      <div className="flex-1 bg-white border-t">
+        {activePreview ? (
+          <iframe ref={iframeRef} className="border-none w-full h-full" src={iframeUrl}></iframe>
+        ) : (
+          <div className="flex w-full h-full justify-center items-center">No preview available</div>
+        )}
+      </div>
+    </div>
+  );
+});
--- a/packages/bolt/app/components/workbench/Workbench.client.tsx
+++ b/packages/bolt/app/components/workbench/Workbench.client.tsx
@@ -0,0 +1,69 @@
+import { useStore } from '@nanostores/react';
+import { AnimatePresence, motion, type Variants } from 'framer-motion';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { workbenchStore } from '../../lib/stores/workbench';
+import { cubicEasingFn } from '../../utils/easings';
+import { IconButton } from '../ui/IconButton';
+import { EditorPanel } from './EditorPanel';
+import { Preview } from './Preview';
+
+interface WorkspaceProps {
+  chatStarted?: boolean;
+}
+
+const workbenchVariants = {
+  closed: {
+    width: 0,
+    transition: {
+      duration: 0.2,
+      ease: cubicEasingFn,
+    },
+  },
+  open: {
+    width: '100%',
+    transition: {
+      duration: 0.2,
+      ease: cubicEasingFn,
+    },
+  },
+} satisfies Variants;
+
+export function Workbench({ chatStarted }: WorkspaceProps) {
+  const showWorkbench = useStore(workbenchStore.showWorkbench);
+
+  return (
+    chatStarted && (
+      <AnimatePresence>
+        {showWorkbench && (
+          <motion.div initial="closed" animate="open" exit="closed" variants={workbenchVariants}>
+            <div className="fixed top-[calc(var(--header-height)+1.5rem)] bottom-[calc(1.5rem-1px)] w-[50vw] mr-4 z-0">
+              <div className="flex flex-col bg-white border border-gray-200 shadow-sm rounded-lg overflow-hidden absolute inset-0 right-8">
+                <div className="px-3 py-2 border-b border-gray-200">
+                  <IconButton
+                    icon="i-ph:x-circle"
+                    className="ml-auto"
+                    size="xxl"
+                    onClick={() => {
+                      workbenchStore.showWorkbench.set(false);
+                    }}
+                  />
+                </div>
+                <div className="flex-1 overflow-hidden">
+                  <PanelGroup direction="vertical">
+                    <Panel defaultSize={50} minSize={20}>
+                      <EditorPanel />
+                    </Panel>
+                    <PanelResizeHandle />
+                    <Panel defaultSize={50} minSize={20}>
+                      <Preview />
+                    </Panel>
+                  </PanelGroup>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    )
+  );
+}
--- a/packages/bolt/app/components/workspace/Workspace.client.tsx
+++ b/packages/bolt/app/components/workspace/Workspace.client.tsx
@@ -1,55 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { AnimatePresence, motion, type Variants } from 'framer-motion';
-import { IconButton } from '~/components/ui/IconButton';
-import { cubicEasingFn } from '~/utils/easings';
-import { workspaceStore } from '../../lib/stores/workspace';
-
-interface WorkspaceProps {
-  chatStarted?: boolean;
-}
-
-const workspaceVariants = {
-  closed: {
-    width: 0,
-    transition: {
-      duration: 0.2,
-      ease: cubicEasingFn,
-    },
-  },
-  open: {
-    width: '100%',
-    transition: {
-      duration: 0.5,
-      type: 'spring',
-    },
-  },
-} satisfies Variants;
-
-export function Workspace({ chatStarted }: WorkspaceProps) {
-  const showWorkspace = useStore(workspaceStore.showWorkspace);
-
-  return (
-    chatStarted && (
-      <AnimatePresence>
-        {showWorkspace && (
-          <motion.div initial="closed" animate="open" exit="closed" variants={workspaceVariants}>
-            <div className="fixed top-[calc(var(--header-height)+1.5rem)] bottom-6 w-[50vw] mr-4 z-0">
-              <div className="bg-white border border-gray-200 shadow-sm rounded-lg overflow-hidden absolute inset-0 right-8">
-                <header className="px-3 py-2 border-b border-gray-200">
-                  <IconButton
-                    icon="i-ph:x-circle"
-                    className="ml-auto"
-                    size="xxl"
-                    onClick={() => {
-                      workspaceStore.showWorkspace.set(false);
-                    }}
-                  />
-                </header>
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    )
-  );
-}