refactor: move workbench components and stores to its own directory structure

Restructure the workbench module by moving components and stores from shared/workbench to workbench directory. This includes terminal components, editor utilities, preview stores, and UI components. Update all import paths to reflect the new structure.

The changes include:
- Moving terminal components and theme files
- Relocating editor utilities like EnvMasking and indent
- Transferring stores for previews, editor, and terminal
- Updating all affected import statements across the codebase
- Moving UI components like PortDropdown and Inspector

app/chat/components/BaseChat.tsx

@@ -6,7 +6,7 @@ import type { JSONValue, Message } from 'ai';
 import React, { type RefCallback, useEffect, useState } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { Menu } from '~/layout/sidebar/Menu.client';
-import { Workbench } from '~/shared/workbench/components/Workbench.client';
+import { Workbench } from '~/workbench/components/Workbench.client';
 import { classNames } from '~/shared/utils/classNames';
 import { PROVIDER_LIST } from '~/shared/utils/constants';
 import { Messages } from './Messages.client';
@@ -26,12 +26,12 @@ import type { ModelInfo } from '~/shared/lib/providers/types';
 import ProgressCompilation from './ProgressCompilation';
 import type { ProgressAnnotation } from '~/shared/types/context';
 import { SupabaseChatAlert } from '~/chat/components/alerts/SupabaseAlert';
-import { expoUrlAtom } from '~/shared/workbench/stores/qrCodeStore';
+import { expoUrlAtom } from '~/workbench/stores/qrCodeStore';
 import { useStore } from '@nanostores/react';
 import { StickToBottom, useStickToBottomContext } from '~/chat/hooks/StickToBottom';
 import { ChatBox } from './chatBox/ChatBox';
 import type { DesignScheme } from '~/shared/types/design-scheme';
-import type { ElementInfo } from '~/shared/workbench/components/ui/Inspector';
+import type { ElementInfo } from '~/workbench/components/ui/Inspector';
 
 const TEXTAREA_MIN_HEIGHT = 76;
 

app/chat/components/Chat.client.tsx

@@ -11,7 +11,7 @@ import { cssTransition, toast, ToastContainer } from 'react-toastify';
 import { useMessageParser, usePromptEnhancer, useShortcuts } from '~/shared/hooks';
 import { description, useChatHistory } from '~/shared/lib/persistence';
 import { chatStore } from '~/chat/stores/chat';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { DEFAULT_MODEL, DEFAULT_PROVIDER, PROMPT_COOKIE_KEY, PROVIDER_LIST } from '~/shared/utils/constants';
 import { cubicEasingFn } from '~/shared/utils/easings';
 import { createScopedLogger, renderLogger } from '~/shared/utils/logger';
@@ -28,7 +28,7 @@ import { streamingState } from '~/shared/stores/streaming';
 import { filesToArtifacts } from '~/shared/utils/fileUtils';
 import { supabaseConnection } from '~/shared/stores/supabase';
 import { defaultDesignScheme, type DesignScheme } from '~/shared/types/design-scheme';
-import type { ElementInfo } from '~/shared/workbench/components/ui/Inspector';
+import type { ElementInfo } from '~/workbench/components/ui/Inspector';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',

app/chat/components/chatBox/ChatBox.tsx

@@ -12,12 +12,12 @@ import { IconButton } from '~/shared/components/ui/IconButton';
 import { toast } from 'react-toastify';
 import { SpeechRecognitionButton } from '~/chat/components/chatBox/SpeechRecognition';
 import { SupabaseConnection } from './SupabaseConnection';
-import { ExpoQrModal } from '~/shared/workbench/components/ui/ExpoQrModal';
+import { ExpoQrModal } from '~/workbench/components/ui/ExpoQrModal';
 import styles from '~/chat/components/BaseChat.module.scss';
 import type { ProviderInfo } from '~/shared/types/model';
 import { ColorSchemeDialog } from '~/shared/components/ui/ColorSchemeDialog';
 import type { DesignScheme } from '~/shared/types/design-scheme';
-import type { ElementInfo } from '~/shared/workbench/components/ui/Inspector';
+import type { ElementInfo } from '~/workbench/components/ui/Inspector';
 
 interface ChatBoxProps {
   isModelSettingsCollapsed: boolean;

app/chat/components/chatExportAndImport/ExportChatButton.tsx

@@ -1,5 +1,5 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { classNames } from '~/shared/utils/classNames';
 
 export const ExportChatButton = ({ exportChat }: { exportChat?: () => void }) => {

app/chat/components/messages/Artifact.tsx

@@ -4,7 +4,7 @@ import { computed } from 'nanostores';
 import { memo, useEffect, useRef, useState } from 'react';
 import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
 import type { ActionState } from '~/shared/lib/runtime/action-runner';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { classNames } from '~/shared/utils/classNames';
 import { cubicEasingFn } from '~/shared/utils/easings';
 import { WORK_DIR } from '~/shared/utils/constants';

app/chat/components/messages/AssistantMessage.tsx

@@ -2,7 +2,7 @@ import { memo, Fragment } from 'react';
 import { Markdown } from '~/chat/components/markdown/Markdown';
 import type { JSONValue } from 'ai';
 import Popover from '~/shared/components/ui/Popover';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { WORK_DIR } from '~/shared/utils/constants';
 import WithTooltip from '~/shared/components/ui/Tooltip';
 import type { Message } from 'ai';

app/layout/header/components/DeployButton.tsx

@@ -2,7 +2,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { useStore } from '@nanostores/react';
 import { netlifyConnection } from '~/shared/stores/netlify';
 import { vercelConnection } from '~/shared/stores/vercel';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { streamingState } from '~/shared/stores/streaming';
 import { classNames } from '~/shared/utils/classNames';
 import { useState } from 'react';

app/layout/header/components/HeaderActionButtons.client.tsx

@@ -1,5 +1,5 @@
 import { useStore } from '@nanostores/react';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { useState } from 'react';
 import { streamingState } from '~/shared/stores/streaming';
 import { ExportChatButton } from '~/chat/components/chatExportAndImport/ExportChatButton';

app/layout/header/hooks/useNetlifyDeploy.tsx

@@ -1,7 +1,7 @@
 import { toast } from 'react-toastify';
 import { useStore } from '@nanostores/react';
 import { netlifyConnection } from '~/shared/stores/netlify';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { webcontainer } from '~/shared/lib/webcontainer';
 import { path } from '~/shared/utils/path';
 import { useState } from 'react';

app/layout/header/hooks/useVercelDeploy.tsx

@@ -1,7 +1,7 @@
 import { toast } from 'react-toastify';
 import { useStore } from '@nanostores/react';
 import { vercelConnection } from '~/shared/stores/vercel';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { webcontainer } from '~/shared/lib/webcontainer';
 import { path } from '~/shared/utils/path';
 import { useState } from 'react';

app/settings/tabs/connections/components/PushToGitHubDialog.tsx

@@ -9,10 +9,10 @@ import { getLocalStorage } from '~/shared/lib/persistence';
 import { classNames } from '~/shared/utils/classNames';
 import type { GitHubUserResponse } from '~/shared/components/github/types/GitHub';
 import { logStore } from '~/shared/stores/logs';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { extractRelativePath } from '~/shared/utils/diff';
 import { formatSize } from '~/shared/utils/formatSize';
-import type { FileMap, File } from '~/shared/workbench/stores/files';
+import type { FileMap, File } from '~/workbench/stores/files';
 
 // UI Components
 import { Badge, EmptyState, StatusIndicator, SearchInput } from '~/shared/components/ui';

app/shared/hooks/useMessageParser.ts

@@ -1,7 +1,7 @@
 import type { Message } from 'ai';
 import { useCallback, useState } from 'react';
 import { StreamingMessageParser } from '~/shared/lib/runtime/message-parser';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { createScopedLogger } from '~/shared/utils/logger';
 
 const logger = createScopedLogger('useMessageParser');

app/shared/lib/persistence/types.ts

@@ -1,4 +1,4 @@
-import type { FileMap } from '~/shared/workbench/stores/files';
+import type { FileMap } from '~/workbench/stores/files';
 
 export interface Snapshot {
   chatIndex: string;

app/shared/lib/persistence/useChatHistory.ts

@@ -3,7 +3,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { atom } from 'nanostores';
 import { generateId, type JSONValue, type Message } from 'ai';
 import { toast } from 'react-toastify';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { logStore } from '~/shared/stores/logs'; // Import logStore
 import {
   getMessages,
@@ -17,7 +17,7 @@ import {
   setSnapshot,
   type IChatMetadata,
 } from './db';
-import type { FileMap } from '~/shared/workbench/stores/files';
+import type { FileMap } from '~/workbench/stores/files';
 import type { Snapshot } from './types';
 import { webcontainer } from '~/shared/lib/webcontainer';
 import { detectProjectCommands, createCommandActionsString } from '~/shared/utils/projectCommands';

app/shared/lib/webcontainer/index.ts

@@ -32,7 +32,7 @@ if (!import.meta.env.SSR) {
       .then(async (webcontainer) => {
         webcontainerContext.loaded = true;
 
-        const { workbenchStore } = await import('~/shared/workbench/stores/workbench');
+        const { workbenchStore } = await import('~/workbench/stores/workbench');
 
         const response = await fetch('/inspector-script.js');
         const inspectorScript = await response.text();

app/shared/utils/diff.ts

@@ -1,5 +1,5 @@
 import { createTwoFilesPatch } from 'diff';
-import type { FileMap } from '~/shared/workbench/stores/files';
+import type { FileMap } from '~/workbench/stores/files';
 import { MODIFICATIONS_TAG_NAME, WORK_DIR } from './constants';
 
 export const modificationsRegex = new RegExp(

app/shared/utils/shell.ts

@@ -1,8 +1,8 @@
 import type { WebContainer, WebContainerProcess } from '@webcontainer/api';
-import type { ITerminal } from '~/shared/workbench/components/terminal/types/terminal';
+import type { ITerminal } from '~/workbench/components/terminal/types/terminal';
 import { withResolvers } from './promises';
 import { atom } from 'nanostores';
-import { expoUrlAtom } from '~/shared/workbench/stores/qrCodeStore';
+import { expoUrlAtom } from '~/workbench/stores/qrCodeStore';
 
 export async function newShellProcess(webcontainer: WebContainer, terminal: ITerminal) {
   const args: string[] = [];

app/workbench/components/EditorPanel.tsx

@@ -9,10 +9,10 @@ import {
   type OnChangeCallback as OnEditorChange,
   type OnSaveCallback as OnEditorSave,
   type OnScrollCallback as OnEditorScroll,
-} from '~/shared/workbench/components/editor/codemirror/CodeMirrorEditor';
+} from '~/workbench/components/editor/codemirror/CodeMirrorEditor';
 import { PanelHeader } from '~/shared/components/ui/PanelHeader';
 import { PanelHeaderButton } from '~/shared/components/ui/PanelHeaderButton';
-import type { FileMap } from '~/shared/workbench/stores/files';
+import type { FileMap } from '~/workbench/stores/files';
 import type { FileHistory } from '~/shared/types/actions';
 import { themeStore } from '~/shared/stores/theme';
 import { WORK_DIR } from '~/shared/utils/constants';
@@ -21,7 +21,7 @@ import { isMobile } from '~/shared/utils/mobile';
 import { FileBreadcrumb } from './ui/FileBreadcrumb';
 import { FileTree } from './ui/FileTree';
 import { DEFAULT_TERMINAL_SIZE, TerminalTabs } from './terminal/TerminalTabs';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { Search } from './ui/Search'; // <-- Ensure Search is imported
 import { classNames } from '~/shared/utils/classNames'; // <-- Import classNames if not already present
 import { LockManager } from './ui/LockManager'; // <-- Import LockManager

app/workbench/components/Preview.tsx

@@ -1,11 +1,11 @@
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useStore } from '@nanostores/react';
 import { IconButton } from '~/shared/components/ui/IconButton';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { PortDropdown } from './ui/PortDropdown';
 import { ScreenshotSelector } from './ui/ScreenshotSelector';
-import { expoUrlAtom } from '~/shared/workbench/stores/qrCodeStore';
-import { ExpoQrModal } from '~/shared/workbench/components/ui/ExpoQrModal';
+import { expoUrlAtom } from '~/workbench/stores/qrCodeStore';
+import { ExpoQrModal } from '~/workbench/components/ui/ExpoQrModal';
 import type { ElementInfo } from './ui/Inspector';
 
 type ResizeSide = 'left' | 'right' | null;

app/workbench/components/Workbench.client.tsx

@@ -11,11 +11,11 @@ import { DiffView } from './ui/DiffView';
 import {
   type OnChangeCallback as OnEditorChange,
   type OnScrollCallback as OnEditorScroll,
-} from '~/shared/workbench/components/editor/codemirror/CodeMirrorEditor';
+} from '~/workbench/components/editor/codemirror/CodeMirrorEditor';
 import { IconButton } from '~/shared/components/ui/IconButton';
 import { PanelHeaderButton } from '~/shared/components/ui/PanelHeaderButton';
 import { Slider, type SliderOptions } from '~/shared/components/ui/Slider';
-import { workbenchStore, type WorkbenchViewType } from '~/shared/workbench/stores/workbench';
+import { workbenchStore, type WorkbenchViewType } from '~/workbench/stores/workbench';
 import { classNames } from '~/shared/utils/classNames';
 import { cubicEasingFn } from '~/shared/utils/easings';
 import { renderLogger } from '~/shared/utils/logger';

app/workbench/components/terminal/TerminalTabs.tsx

@@ -4,7 +4,7 @@ import { Panel, type ImperativePanelHandle } from 'react-resizable-panels';
 import { IconButton } from '~/shared/components/ui/IconButton';
 import { shortcutEventEmitter } from '~/shared/hooks';
 import { themeStore } from '~/shared/stores/theme';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { classNames } from '~/shared/utils/classNames';
 import { Terminal, type TerminalRef } from './Terminal';
 import { createScopedLogger } from '~/shared/utils/logger';

app/workbench/components/ui/DiffView.tsx

@@ -1,8 +1,8 @@
 import { memo, useMemo, useState, useEffect, useCallback } from 'react';
 import { useStore } from '@nanostores/react';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
-import type { FileMap } from '~/shared/workbench/stores/files';
-import type { EditorDocument } from '~/shared/workbench/components/editor/codemirror/CodeMirrorEditor';
+import { workbenchStore } from '~/workbench/stores/workbench';
+import type { FileMap } from '~/workbench/stores/files';
+import type { EditorDocument } from '~/workbench/components/editor/codemirror/CodeMirrorEditor';
 import { diffLines, type Change } from 'diff';
 import { getHighlighter } from 'shiki';
 import '~/styles/diff-view.css';

app/workbench/components/ui/ExpoQrModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/shared/components/ui/Dialog';
 import { useStore } from '@nanostores/react';
-import { expoUrlAtom } from '~/shared/workbench/stores/qrCodeStore';
+import { expoUrlAtom } from '~/workbench/stores/qrCodeStore';
 import { QRCode } from 'react-qrcode-logo';
 
 interface ExpoQrModalProps {

app/workbench/components/ui/FileBreadcrumb.tsx

@@ -1,7 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { AnimatePresence, motion, type Variants } from 'framer-motion';
 import { memo, useEffect, useRef, useState } from 'react';
-import type { FileMap } from '~/shared/workbench/stores/files';
+import type { FileMap } from '~/workbench/stores/files';
 import { classNames } from '~/shared/utils/classNames';
 import { WORK_DIR } from '~/shared/utils/constants';
 import { cubicEasingFn } from '~/shared/utils/easings';

app/workbench/components/ui/FileTree.tsx

@@ -1,11 +1,11 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-import type { FileMap } from '~/shared/workbench/stores/files';
+import type { FileMap } from '~/workbench/stores/files';
 import { classNames } from '~/shared/utils/classNames';
 import { createScopedLogger, renderLogger } from '~/shared/utils/logger';
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import type { FileHistory } from '~/shared/types/actions';
 import { diffLines, type Change } from 'diff';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { toast } from 'react-toastify';
 import { path } from '~/shared/utils/path';
 

app/workbench/components/ui/LockManager.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { classNames } from '~/shared/utils/classNames';
 import { Checkbox } from '~/shared/components/ui/Checkbox';
 import { toast } from '~/shared/components/ui/use-toast';

app/workbench/components/ui/PortDropdown.tsx

@@ -1,5 +1,5 @@
 import { memo, useEffect, useRef } from 'react';
-import type { PreviewInfo } from '~/shared/workbench/stores/previews';
+import type { PreviewInfo } from '~/workbench/stores/previews';
 
 interface PortDropdownProps {
   activePreviewIndex: number;

app/workbench/components/ui/Search.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import type { TextSearchOptions, TextSearchOnProgressCallback, WebContainer } from '@webcontainer/api';
-import { workbenchStore } from '~/shared/workbench/stores/workbench';
+import { workbenchStore } from '~/workbench/stores/workbench';
 import { webcontainer } from '~/shared/lib/webcontainer';
 import { WORK_DIR } from '~/shared/utils/constants';
 import { debounce } from '~/shared/utils/debounce';

app/workbench/stores/editor.ts

@@ -1,5 +1,5 @@
 import { atom, computed, map, type MapStore, type WritableAtom } from 'nanostores';
-import type { EditorDocument, ScrollPosition } from '~/shared/workbench/components/editor/codemirror/CodeMirrorEditor';
+import type { EditorDocument, ScrollPosition } from '~/workbench/components/editor/codemirror/CodeMirrorEditor';
 import type { FileMap, FilesStore } from './files';
 import { createScopedLogger } from '~/shared/utils/logger';
 

app/workbench/stores/terminal.ts

@@ -1,6 +1,6 @@
 import type { WebContainer, WebContainerProcess } from '@webcontainer/api';
 import { atom, type WritableAtom } from 'nanostores';
-import type { ITerminal } from '~/shared/workbench/components/terminal/types/terminal';
+import type { ITerminal } from '~/workbench/components/terminal/types/terminal';
 import { newBoltShellProcess, newShellProcess } from '~/shared/utils/shell';
 import { coloredText } from '~/shared/utils/terminal';
 

app/workbench/stores/workbench.ts

@@ -1,9 +1,9 @@
 import { atom, map, type MapStore, type ReadableAtom, type WritableAtom } from 'nanostores';
-import type { EditorDocument, ScrollPosition } from '~/shared/workbench/components/editor/codemirror/CodeMirrorEditor';
+import type { EditorDocument, ScrollPosition } from '~/workbench/components/editor/codemirror/CodeMirrorEditor';
 import { ActionRunner } from '~/shared/lib/runtime/action-runner';
 import type { ActionCallbackData, ArtifactCallbackData } from '~/shared/lib/runtime/message-parser';
 import { webcontainer } from '~/shared/lib/webcontainer';
-import type { ITerminal } from '~/shared/workbench/components/terminal/types/terminal';
+import type { ITerminal } from '~/workbench/components/terminal/types/terminal';
 import { unreachable } from '~/shared/utils/unreachable';
 import { EditorStore } from './editor';
 import { FilesStore, type FileMap } from './files';