Refactor: Use path aliases in webview source files. (#2801)

* Refactor: Use path aliases in webview source files.

* Add module resolution to root jest config.

* Add tests.

Broken import.

Another broken import.

 Broken test.

jest.config.js

@@ -36,6 +36,8 @@ module.exports = {
 		"^default-shell$": "<rootDir>/src/__mocks__/default-shell.js",
 		"^os-name$": "<rootDir>/src/__mocks__/os-name.js",
 		"^strip-bom$": "<rootDir>/src/__mocks__/strip-bom.js",
+		"^@roo/(.*)$": "<rootDir>/src/$1",
+		"^@src/(.*)$": "<rootDir>/webview-ui/src/$1",
 	},
 	transformIgnorePatterns: [
 		"node_modules/(?!(@modelcontextprotocol|delay|p-wait-for|serialize-error|strip-ansi|default-shell|os-name|strip-bom)/)",

webview-ui/jest.config.cjs

@@ -12,6 +12,8 @@ module.exports = {
 		"^vscrui$": "<rootDir>/src/__mocks__/vscrui.ts",
 		"^@vscode/webview-ui-toolkit/react$": "<rootDir>/src/__mocks__/@vscode/webview-ui-toolkit/react.ts",
 		"^@/(.*)$": "<rootDir>/src/$1",
+		'^@roo/(.*)$': '<rootDir>/../src/$1',
+		'^@src/(.*)$': '<rootDir>/src/$1',		
 		"^src/i18n/setup$": "<rootDir>/src/__mocks__/i18n/setup.ts",
 		"^\\.\\./setup$": "<rootDir>/src/__mocks__/i18n/setup.ts",
 		"^\\./setup$": "<rootDir>/src/__mocks__/i18n/setup.ts",

webview-ui/src/App.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react"
 import { useEvent } from "react-use"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
-import { ExtensionMessage } from "../../src/shared/ExtensionMessage"
+import { ExtensionMessage } from "@roo/shared/ExtensionMessage"
 import TranslationProvider from "./i18n/TranslationContext"
 
 import { vscode } from "./utils/vscode"

webview-ui/src/__tests__/App.test.tsx

@@ -6,13 +6,13 @@ import "@testing-library/jest-dom"
 
 import AppWithProviders from "../App"
 
-jest.mock("../utils/vscode", () => ({
+jest.mock("@src/utils/vscode", () => ({
 	vscode: {
 		postMessage: jest.fn(),
 	},
 }))
 
-jest.mock("../components/chat/ChatView", () => ({
+jest.mock("@src/components/chat/ChatView", () => ({
 	__esModule: true,
 	default: function ChatView({ isHidden }: { isHidden: boolean }) {
 		return (
@@ -23,7 +23,7 @@ jest.mock("../components/chat/ChatView", () => ({
 	},
 }))
 
-jest.mock("../components/settings/SettingsView", () => ({
+jest.mock("@src/components/settings/SettingsView", () => ({
 	__esModule: true,
 	default: function SettingsView({ onDone }: { onDone: () => void }) {
 		return (
@@ -34,7 +34,7 @@ jest.mock("../components/settings/SettingsView", () => ({
 	},
 }))
 
-jest.mock("../components/history/HistoryView", () => ({
+jest.mock("@src/components/history/HistoryView", () => ({
 	__esModule: true,
 	default: function HistoryView({ onDone }: { onDone: () => void }) {
 		return (
@@ -45,7 +45,7 @@ jest.mock("../components/history/HistoryView", () => ({
 	},
 }))
 
-jest.mock("../components/mcp/McpView", () => ({
+jest.mock("@src/components/mcp/McpView", () => ({
 	__esModule: true,
 	default: function McpView({ onDone }: { onDone: () => void }) {
 		return (
@@ -56,7 +56,7 @@ jest.mock("../components/mcp/McpView", () => ({
 	},
 }))
 
-jest.mock("../components/prompts/PromptsView", () => ({
+jest.mock("@src/components/prompts/PromptsView", () => ({
 	__esModule: true,
 	default: function PromptsView({ onDone }: { onDone: () => void }) {
 		return (
@@ -67,7 +67,7 @@ jest.mock("../components/prompts/PromptsView", () => ({
 	},
 }))
 
-jest.mock("../context/ExtensionStateContext", () => ({
+jest.mock("@src/context/ExtensionStateContext", () => ({
 	useExtensionState: () => ({
 		didHydrateState: true,
 		showWelcome: false,

webview-ui/src/__tests__/ContextWindowProgress.test.tsx

@@ -2,7 +2,7 @@
 
 import { render, screen } from "@testing-library/react"
 import "@testing-library/jest-dom"
-import TaskHeader from "../components/chat/TaskHeader"
+import TaskHeader from "@src/components/chat/TaskHeader"
 
 // Mock formatLargeNumber function
 jest.mock("@/utils/format", () => ({
@@ -15,7 +15,7 @@ jest.mock("@vscode/webview-ui-toolkit/react", () => ({
 }))
 
 // Mock ExtensionStateContext since we use useExtensionState
-jest.mock("../context/ExtensionStateContext", () => ({
+jest.mock("@src/context/ExtensionStateContext", () => ({
 	useExtensionState: jest.fn(() => ({
 		apiConfiguration: {
 			apiProvider: "openai",
@@ -30,8 +30,8 @@ jest.mock("../context/ExtensionStateContext", () => ({
 }))
 
 // Mock highlighting function to avoid JSX parsing issues in tests
-jest.mock("../components/chat/TaskHeader", () => {
-	const originalModule = jest.requireActual("../components/chat/TaskHeader")
+jest.mock("@src/components/chat/TaskHeader", () => {
+	const originalModule = jest.requireActual("@src/components/chat/TaskHeader")
 	return {
 		__esModule: true,
 		...originalModule,

webview-ui/src/__tests__/ContextWindowProgressLogic.test.ts

@@ -1,7 +1,7 @@
 // This test directly tests the logic of the ContextWindowProgress component calculations
 // without needing to render the full component
 import { describe, test, expect } from "@jest/globals"
-import { calculateTokenDistribution } from "../utils/model-utils"
+import { calculateTokenDistribution } from "@src/utils/model-utils"
 
 export {} // This makes the file a proper TypeScript module
 

webview-ui/src/__tests__/TelemetryClient.test.ts

@@ -1,7 +1,7 @@
 /**
  * Tests for TelemetryClient
  */
-import { telemetryClient } from "../utils/TelemetryClient"
+import { telemetryClient } from "@src/utils/TelemetryClient"
 import posthog from "posthog-js"
 
 describe("TelemetryClient", () => {

webview-ui/src/__tests__/components/common/CommandOutputViewer.test.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import CommandOutputViewer from "../../../components/common/CommandOutputViewer"
+import CommandOutputViewer from "@src/components/common/CommandOutputViewer"
 
 // Mock the cn utility function
-jest.mock("../../../lib/utils", () => ({
+jest.mock("@src/lib/utils", () => ({
 	cn: (...inputs: any[]) => inputs.filter(Boolean).join(" "),
 }))
 

webview-ui/src/components/chat/AutoApproveMenu.tsx

@@ -2,9 +2,9 @@ import { useCallback, useMemo, useState } from "react"
 import { Trans } from "react-i18next"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
-import { vscode } from "../../utils/vscode"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { useAppTranslation } from "../../i18n/TranslationContext"
+import { vscode } from "@src/utils/vscode"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { AutoApproveToggle, AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle"
 
 interface AutoApproveMenuProps {

webview-ui/src/components/chat/BrowserSessionRow.tsx

@@ -1,14 +1,9 @@
 import deepEqual from "fast-deep-equal"
 import React, { memo, useEffect, useMemo, useRef, useState } from "react"
 import { useSize } from "react-use"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import {
-	BrowserAction,
-	BrowserActionResult,
-	ClineMessage,
-	ClineSayBrowserAction,
-} from "../../../../src/shared/ExtensionMessage"
-import { vscode } from "../../utils/vscode"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { BrowserAction, BrowserActionResult, ClineMessage, ClineSayBrowserAction } from "@roo/shared/ExtensionMessage"
+import { vscode } from "@src/utils/vscode"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import { ChatRowContent, ProgressIndicator } from "./ChatRow"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"

webview-ui/src/components/chat/ChatRow.tsx

@@ -6,18 +6,13 @@ import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-u
 
 import { Button } from "@/components/ui"
 
-import { useCopyToClipboard } from "../../utils/clipboard"
-import { safeJsonParse } from "../../utils/json"
-import {
-	ClineApiReqInfo,
-	ClineAskUseMcpServer,
-	ClineMessage,
-	ClineSayTool,
-} from "../../../../src/shared/ExtensionMessage"
-import { COMMAND_OUTPUT_STRING } from "../../../../src/shared/combineCommandSequences"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { findMatchingResourceOrTemplate } from "../../utils/mcp"
-import { vscode } from "../../utils/vscode"
+import { useCopyToClipboard } from "@src/utils/clipboard"
+import { safeJsonParse } from "@src/utils/json"
+import { ClineApiReqInfo, ClineAskUseMcpServer, ClineMessage, ClineSayTool } from "@roo/shared/ExtensionMessage"
+import { COMMAND_OUTPUT_STRING } from "@roo/shared/combineCommandSequences"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { findMatchingResourceOrTemplate } from "@src/utils/mcp"
+import { vscode } from "@src/utils/vscode"
 import CodeAccordian, { removeLeadingNonAlphanumeric } from "../common/CodeAccordian"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import CommandOutputViewer from "../common/CommandOutputViewer"

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -2,10 +2,10 @@ import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, us
 import { useEvent } from "react-use"
 import DynamicTextArea from "react-textarea-autosize"
 
-import { mentionRegex, mentionRegexGlobal } from "../../../../src/shared/context-mentions"
-import { WebviewMessage } from "../../../../src/shared/WebviewMessage"
-import { Mode, getAllModes } from "../../../../src/shared/modes"
-import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
+import { mentionRegex, mentionRegexGlobal } from "@roo/shared/context-mentions"
+import { WebviewMessage } from "@roo/shared/WebviewMessage"
+import { Mode, getAllModes } from "@roo/shared/modes"
+import { ExtensionMessage } from "@roo/shared/ExtensionMessage"
 
 import { vscode } from "@/utils/vscode"
 import { useExtensionState } from "@/context/ExtensionStateContext"
@@ -17,7 +17,7 @@ import {
 	removeMention,
 	shouldShowContextMenu,
 	SearchResult,
-} from "@/utils/context-mentions"
+} from "@src/utils/context-mentions"
 import { convertToMentionPath } from "@/utils/path-mentions"
 import { SelectDropdown, DropdownOptionType, Button } from "@/components/ui"
 

webview-ui/src/components/chat/ChatView.tsx

@@ -10,14 +10,14 @@ import {
 	ClineSayBrowserAction,
 	ClineSayTool,
 	ExtensionMessage,
-} from "../../../../src/shared/ExtensionMessage"
-import { McpServer, McpTool } from "../../../../src/shared/mcp"
-import { findLast } from "../../../../src/shared/array"
-import { combineApiRequests } from "../../../../src/shared/combineApiRequests"
-import { combineCommandSequences } from "../../../../src/shared/combineCommandSequences"
-import { getApiMetrics } from "../../../../src/shared/getApiMetrics"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { vscode } from "../../utils/vscode"
+} from "@roo/shared/ExtensionMessage"
+import { McpServer, McpTool } from "@roo/shared/mcp"
+import { findLast } from "@roo/shared/array"
+import { combineApiRequests } from "@roo/shared/combineApiRequests"
+import { combineCommandSequences } from "@roo/shared/combineCommandSequences"
+import { getApiMetrics } from "@roo/shared/getApiMetrics"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { vscode } from "@src/utils/vscode"
 import HistoryPreview from "../history/HistoryPreview"
 import RooHero from "../welcome/RooHero"
 import { normalizeApiConfiguration } from "../settings/ApiOptions"
@@ -27,9 +27,9 @@ import ChatRow from "./ChatRow"
 import ChatTextArea from "./ChatTextArea"
 import TaskHeader from "./TaskHeader"
 import AutoApproveMenu from "./AutoApproveMenu"
-import { AudioType } from "../../../../src/shared/WebviewMessage"
-import { validateCommand } from "../../utils/command-validation"
-import { getAllModes } from "../../../../src/shared/modes"
+import { AudioType } from "@roo/shared/WebviewMessage"
+import { validateCommand } from "@src/utils/command-validation"
+import { getAllModes } from "@roo/shared/modes"
 import TelemetryBanner from "../common/TelemetryBanner"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import removeMd from "remove-markdown"

webview-ui/src/components/chat/ContextMenu.tsx

@@ -4,9 +4,9 @@ import {
 	ContextMenuQueryItem,
 	getContextMenuOptions,
 	SearchResult,
-} from "../../utils/context-mentions"
+} from "@src/utils/context-mentions"
 import { removeLeadingNonAlphanumeric } from "../common/CodeAccordian"
-import { ModeConfig } from "../../../../src/shared/modes"
+import { ModeConfig } from "@roo/shared/modes"
 
 interface ContextMenuProps {
 	onSelect: (type: ContextMenuOptionType, value?: string) => void

webview-ui/src/components/chat/FollowUpSuggest.tsx

@@ -3,7 +3,7 @@ import { Edit } from "lucide-react"
 
 import { Button } from "@/components/ui"
 
-import { useAppTranslation } from "../../i18n/TranslationContext"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
 
 interface FollowUpSuggestProps {
 	suggestions?: string[]

webview-ui/src/components/chat/TaskHeader.tsx

@@ -8,11 +8,11 @@ import { formatLargeNumber } from "@/utils/format"
 import { calculateTokenDistribution, getMaxTokensForModel } from "@/utils/model-utils"
 import { Button } from "@/components/ui"
 
-import { ClineMessage } from "../../../../src/shared/ExtensionMessage"
-import { mentionRegexGlobal } from "../../../../src/shared/context-mentions"
-import { HistoryItem } from "../../../../src/shared/HistoryItem"
+import { ClineMessage } from "@roo/shared/ExtensionMessage"
+import { mentionRegexGlobal } from "@roo/shared/context-mentions"
+import { HistoryItem } from "@roo/shared/HistoryItem"
 
-import { useExtensionState } from "../../context/ExtensionStateContext"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
 import Thumbnails from "../common/Thumbnails"
 import { normalizeApiConfiguration } from "../settings/ApiOptions"
 import { DeleteTaskDialog } from "../history/DeleteTaskDialog"

webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx

@@ -1,19 +1,19 @@
 import { render, fireEvent, screen } from "@testing-library/react"
 import ChatTextArea from "../ChatTextArea"
-import { useExtensionState } from "../../../context/ExtensionStateContext"
-import { vscode } from "../../../utils/vscode"
-import { defaultModeSlug } from "../../../../../src/shared/modes"
-import * as pathMentions from "../../../utils/path-mentions"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { vscode } from "@src/utils/vscode"
+import { defaultModeSlug } from "@roo/shared/modes"
+import * as pathMentions from "@src/utils/path-mentions"
 
 // Mock modules
-jest.mock("../../../utils/vscode", () => ({
+jest.mock("@src/utils/vscode", () => ({
 	vscode: {
 		postMessage: jest.fn(),
 	},
 }))
-jest.mock("../../../components/common/CodeBlock")
-jest.mock("../../../components/common/MarkdownBlock")
-jest.mock("../../../utils/path-mentions", () => ({
+jest.mock("@src/components/common/CodeBlock")
+jest.mock("@src/components/common/MarkdownBlock")
+jest.mock("@src/utils/path-mentions", () => ({
 	convertToMentionPath: jest.fn((path, cwd) => {
 		// Simple mock implementation that mimics the real function's behavior
 		if (cwd && path.toLowerCase().startsWith(cwd.toLowerCase())) {
@@ -29,7 +29,7 @@ const mockPostMessage = vscode.postMessage as jest.Mock
 const mockConvertToMentionPath = pathMentions.convertToMentionPath as jest.Mock
 
 // Mock ExtensionStateContext
-jest.mock("../../../context/ExtensionStateContext")
+jest.mock("@src/context/ExtensionStateContext")
 
 // Custom query function to get the enhance prompt button
 const getEnhancePromptButton = () => {

webview-ui/src/components/chat/__tests__/ChatView.auto-approve.test.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import ChatView from "../ChatView"
-import { ExtensionStateContextProvider } from "../../../context/ExtensionStateContext"
-import { vscode } from "../../../utils/vscode"
+import { ExtensionStateContextProvider } from "@src/context/ExtensionStateContext"
+import { vscode } from "@src/utils/vscode"
 
 // Mock vscode API
-jest.mock("../../../utils/vscode", () => ({
+jest.mock("@src/utils/vscode", () => ({
 	vscode: {
 		postMessage: jest.fn(),
 	},
@@ -49,18 +49,18 @@ jest.mock("../AutoApproveMenu", () => ({
 	default: () => null,
 }))
 
-jest.mock("../../common/CodeBlock", () => ({
+jest.mock("@src/components/common/CodeBlock", () => ({
 	__esModule: true,
 	default: () => null,
 	CODE_BLOCK_BG_COLOR: "rgb(30, 30, 30)",
 }))
 
-jest.mock("../../common/CodeAccordian", () => ({
+jest.mock("@src/components/common/CodeAccordian", () => ({
 	__esModule: true,
 	default: () => null,
 }))
 
-jest.mock("../ContextMenu", () => ({
+jest.mock("@src/components/chat/ContextMenu", () => ({
 	__esModule: true,
 	default: () => null,
 }))

webview-ui/src/components/chat/__tests__/ChatView.test.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { render, waitFor, act } from "@testing-library/react"
 import ChatView from "../ChatView"
-import { ExtensionStateContextProvider } from "../../../context/ExtensionStateContext"
-import { vscode } from "../../../utils/vscode"
+import { ExtensionStateContextProvider } from "@src/context/ExtensionStateContext"
+import { vscode } from "@src/utils/vscode"
 
 // Define minimal types needed for testing
 interface ClineMessage {
@@ -25,7 +25,7 @@ interface ExtensionState {
 }
 
 // Mock vscode API
-jest.mock("../../../utils/vscode", () => ({
+jest.mock("@src/utils/vscode", () => ({
 	vscode: {
 		postMessage: jest.fn(),
 	},

webview-ui/src/components/chat/__tests__/TaskHeader.test.tsx

@@ -3,7 +3,7 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
 import TaskHeader from "../TaskHeader"
-import { ApiConfiguration } from "../../../../../src/shared/api"
+import { ApiConfiguration } from "@roo/shared/api"
 
 // Mock the vscode API
 jest.mock("@/utils/vscode", () => ({
@@ -18,7 +18,7 @@ jest.mock("@vscode/webview-ui-toolkit/react", () => ({
 }))
 
 // Mock the ExtensionStateContext
-jest.mock("../../../context/ExtensionStateContext", () => ({
+jest.mock("@src/context/ExtensionStateContext", () => ({
 	useExtensionState: () => ({
 		apiConfiguration: {
 			apiProvider: "anthropic",

webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next"
 import { Button, Popover, PopoverContent, PopoverTrigger } from "@/components/ui"
 import { useRooPortal } from "@/components/ui/hooks"
 
-import { vscode } from "../../../utils/vscode"
+import { vscode } from "@src/utils/vscode"
 import { Checkpoint } from "./schema"
 
 type CheckpointMenuProps = {

webview-ui/src/components/common/CodeAccordian.tsx

@@ -1,7 +1,7 @@
 import { memo, useMemo } from "react"
-import { getLanguageFromPath } from "../../utils/getLanguageFromPath"
+import { getLanguageFromPath } from "@src/utils/getLanguageFromPath"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
-import { ToolProgressStatus } from "../../../../src/shared/ExtensionMessage"
+import { ToolProgressStatus } from "@roo/shared/ExtensionMessage"
 
 interface CodeAccordianProps {
 	code?: string

webview-ui/src/components/common/CodeBlock.tsx

@@ -3,7 +3,7 @@ import { useRemark } from "react-remark"
 import rehypeHighlight, { Options } from "rehype-highlight"
 import styled from "styled-components"
 import { visit } from "unist-util-visit"
-import { useExtensionState } from "../../context/ExtensionStateContext"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
 
 export const CODE_BLOCK_BG_COLOR = "var(--vscode-editor-background, --vscode-sideBar-background, rgb(30 30 30))"
 

webview-ui/src/components/common/CommandOutputViewer.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useEffect, useRef } from "react"
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso"
-import { cn } from "../../lib/utils"
+import { cn } from "@src/lib/utils"
 
 interface CommandOutputViewerProps {
 	output: string

webview-ui/src/components/common/MarkdownBlock.tsx

@@ -3,7 +3,7 @@ import { useRemark } from "react-remark"
 import rehypeHighlight, { Options } from "rehype-highlight"
 import styled from "styled-components"
 import { visit } from "unist-util-visit"
-import { useExtensionState } from "../../context/ExtensionStateContext"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
 import MermaidBlock from "./MermaidBlock"
 

webview-ui/src/components/common/MermaidBlock.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from "react"
 import mermaid from "mermaid"
-import { useDebounceEffect } from "../../utils/useDebounceEffect"
+import { useDebounceEffect } from "@src/utils/useDebounceEffect"
 import styled from "styled-components"
-import { vscode } from "../../utils/vscode"
+import { vscode } from "@src/utils/vscode"
 
 const MERMAID_THEME = {
 	background: "#1e1e1e", // VS Code dark theme background

webview-ui/src/components/common/TelemetryBanner.tsx

@@ -1,9 +1,9 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { memo, useState } from "react"
 import styled from "styled-components"
-import { vscode } from "../../utils/vscode"
-import { TelemetrySetting } from "../../../../src/shared/TelemetrySetting"
-import { useAppTranslation } from "../../i18n/TranslationContext"
+import { vscode } from "@src/utils/vscode"
+import { TelemetrySetting } from "@roo/shared/TelemetrySetting"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Trans } from "react-i18next"
 
 const BannerContainer = styled.div`

webview-ui/src/components/common/Thumbnails.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useLayoutEffect, memo } from "react"
 import { useWindowSize } from "react-use"
-import { vscode } from "../../utils/vscode"
+import { vscode } from "@src/utils/vscode"
 
 interface ThumbnailsProps {
 	images: string[]

webview-ui/src/components/history/HistoryPreview.tsx

@@ -4,7 +4,7 @@ import { vscode } from "@/utils/vscode"
 import { formatLargeNumber, formatDate } from "@/utils/format"
 import { Button } from "@/components/ui"
 
-import { useAppTranslation } from "../../i18n/TranslationContext"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { CopyButton } from "./CopyButton"
 import { useTaskSearch } from "./useTaskSearch"
 

webview-ui/src/components/history/__tests__/HistoryView.test.tsx

@@ -2,12 +2,12 @@
 
 import { render, screen, fireEvent, within, act } from "@testing-library/react"
 import HistoryView from "../HistoryView"
-import { useExtensionState } from "../../../context/ExtensionStateContext"
-import { vscode } from "../../../utils/vscode"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { vscode } from "@src/utils/vscode"
 
-jest.mock("../../../context/ExtensionStateContext")
-jest.mock("../../../utils/vscode")
-jest.mock("../../../i18n/TranslationContext")
+jest.mock("@src/context/ExtensionStateContext")
+jest.mock("@src/utils/vscode")
+jest.mock("@src/i18n/TranslationContext")
 jest.mock("react-virtuoso", () => ({
 	Virtuoso: ({ data, itemContent }: any) => (
 		<div data-testid="virtuoso-container">

webview-ui/src/components/mcp/McpEnabledToggle.tsx

@@ -1,8 +1,8 @@
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
 import { FormEvent } from "react"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { useAppTranslation } from "../../i18n/TranslationContext"
-import { vscode } from "../../utils/vscode"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { vscode } from "@src/utils/vscode"
 
 const McpEnabledToggle = () => {
 	const { mcpEnabled, setMcpEnabled } = useExtensionState()

webview-ui/src/components/mcp/McpResourceRow.tsx

@@ -1,4 +1,4 @@
-import { McpResource, McpResourceTemplate } from "../../../../src/shared/mcp"
+import { McpResource, McpResourceTemplate } from "@roo/shared/mcp"
 
 type McpResourceRowProps = {
 	item: McpResource | McpResourceTemplate

webview-ui/src/components/mcp/McpToolRow.tsx

@@ -1,7 +1,7 @@
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
-import { McpTool } from "../../../../src/shared/mcp"
-import { useAppTranslation } from "../../i18n/TranslationContext"
-import { vscode } from "../../utils/vscode"
+import { McpTool } from "@roo/shared/mcp"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { vscode } from "@src/utils/vscode"
 
 type McpToolRowProps = {
 	tool: McpTool

webview-ui/src/components/mcp/McpView.tsx

@@ -8,13 +8,13 @@ import {
 	VSCodePanelView,
 } from "@vscode/webview-ui-toolkit/react"
 
-import { McpServer } from "../../../../src/shared/mcp"
+import { McpServer } from "@roo/shared/mcp"
 
 import { vscode } from "@/utils/vscode"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui"
 
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { useAppTranslation } from "../../i18n/TranslationContext"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Trans } from "react-i18next"
 import { Tab, TabContent, TabHeader } from "../common/Tab"
 import McpToolRow from "./McpToolRow"

webview-ui/src/components/mcp/__tests__/McpToolRow.test.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 import { render, fireEvent, screen } from "@testing-library/react"
 import McpToolRow from "../McpToolRow"
-import { vscode } from "../../../utils/vscode"
+import { vscode } from "@src/utils/vscode"
 
 // Mock the translation hook
-jest.mock("../../../i18n/TranslationContext", () => ({
+jest.mock("@src/i18n/TranslationContext", () => ({
 	useAppTranslation: () => ({
 		t: (key: string) => {
 			const translations: Record<string, string> = {
@@ -17,7 +17,7 @@ jest.mock("../../../i18n/TranslationContext", () => ({
 	}),
 }))
 
-jest.mock("../../../utils/vscode", () => ({
+jest.mock("@src/utils/vscode", () => ({
 	vscode: {
 		postMessage: jest.fn(),
 	},

webview-ui/src/components/prompts/PromptsView.tsx

@@ -10,7 +10,7 @@ import {
 	VSCodeRadio,
 } from "@vscode/webview-ui-toolkit/react"
 
-import { useExtensionState } from "../../context/ExtensionStateContext"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
 import {
 	Mode,
 	PromptComponent,
@@ -19,15 +19,15 @@ import {
 	getAllModes,
 	ModeConfig,
 	GroupEntry,
-} from "../../../../src/shared/modes"
-import { modeConfigSchema } from "../../../../src/schemas"
-import { supportPrompt, SupportPromptType } from "../../../../src/shared/support-prompt"
+} from "@roo/shared/modes"
+import { modeConfigSchema } from "@roo/schemas"
+import { supportPrompt, SupportPromptType } from "@roo/shared/support-prompt"
 
-import { TOOL_GROUPS, ToolGroup } from "../../../../src/shared/tools"
-import { vscode } from "../../utils/vscode"
+import { TOOL_GROUPS, ToolGroup } from "@roo/shared/tools"
+import { vscode } from "@src/utils/vscode"
 import { Tab, TabContent, TabHeader } from "../common/Tab"
 import i18next from "i18next"
-import { useAppTranslation } from "../../i18n/TranslationContext"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Trans } from "react-i18next"
 
 // Get all available groups that should show in prompts view

webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx

@@ -1,10 +1,10 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react"
 import PromptsView from "../PromptsView"
-import { ExtensionStateContext } from "../../../context/ExtensionStateContext"
-import { vscode } from "../../../utils/vscode"
+import { ExtensionStateContext } from "@src/context/ExtensionStateContext"
+import { vscode } from "@src/utils/vscode"
 
 // Mock vscode API
-jest.mock("../../../utils/vscode", () => ({
+jest.mock("@src/utils/vscode", () => ({
 	vscode: {
 		postMessage: jest.fn(),
 	},

webview-ui/src/components/settings/About.tsx

@@ -5,7 +5,7 @@ import { Info, Download, Upload, TriangleAlert } from "lucide-react"
 
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
-import { TelemetrySetting } from "../../../../src/shared/TelemetrySetting"
+import { TelemetrySetting } from "@roo/shared/TelemetrySetting"
 
 import { vscode } from "@/utils/vscode"
 import { cn } from "@/lib/utils"

webview-ui/src/components/settings/ApiConfigManager.tsx

@@ -2,7 +2,7 @@ import { memo, useEffect, useRef, useState } from "react"
 import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { ChevronsUpDown, Check, X } from "lucide-react"
 
-import { ApiConfigMeta } from "../../../../src/shared/ExtensionMessage"
+import { ApiConfigMeta } from "@roo/shared/ExtensionMessage"
 
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { cn } from "@/lib/utils"

webview-ui/src/components/settings/ApiOptions.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useMemo, useState } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { Trans } from "react-i18next"
-import { getRequestyAuthUrl, getOpenRouterAuthUrl, getGlamaAuthUrl } from "../../oauth/urls"
+import { getRequestyAuthUrl, getOpenRouterAuthUrl, getGlamaAuthUrl } from "@src/oauth/urls"
 import { useDebounce, useEvent } from "react-use"
 import { LanguageModelChatSelector } from "vscode"
 import { Checkbox } from "vscrui"
@@ -38,8 +38,8 @@ import {
 	xaiDefaultModelId,
 	xaiModels,
 	ApiProvider,
-} from "../../../../src/shared/api"
-import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
+} from "@roo/shared/api"
+import { ExtensionMessage } from "@roo/shared/ExtensionMessage"
 
 import { vscode } from "@/utils/vscode"
 import { validateApiConfiguration, validateModelId, validateBedrockArn } from "@/utils/validate"
@@ -49,7 +49,7 @@ import {
 } from "@/components/ui/hooks/useOpenRouterModelProviders"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectSeparator, Button } from "@/components/ui"
 import { MODELS_BY_PROVIDER, PROVIDERS, VERTEX_REGIONS, REASONING_MODELS } from "./constants"
-import { AWS_REGIONS } from "../../../../src/shared/aws_regions"
+import { AWS_REGIONS } from "@roo/shared/aws_regions"
 import { VSCodeButtonLink } from "../common/VSCodeButtonLink"
 import { ModelInfoView } from "./ModelInfoView"
 import { ModelPicker } from "./ModelPicker"

webview-ui/src/components/settings/AutoApproveToggle.tsx

@@ -2,7 +2,7 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui"
 
-import { GlobalSettings } from "../../../../src/schemas"
+import { GlobalSettings } from "@roo/schemas"
 
 type AutoApproveToggles = Pick<
 	GlobalSettings,

webview-ui/src/components/settings/ExperimentalSettings.tsx

@@ -2,7 +2,7 @@ import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { FlaskConical } from "lucide-react"
 
-import { EXPERIMENT_IDS, experimentConfigsMap, ExperimentId } from "../../../../src/shared/experiments"
+import { EXPERIMENT_IDS, experimentConfigsMap, ExperimentId } from "@roo/shared/experiments"
 
 import { cn } from "@/lib/utils"
 

webview-ui/src/components/settings/LanguageSettings.tsx

@@ -4,7 +4,7 @@ import { Globe } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui"
-import { Language, LANGUAGES } from "../../../../src/shared/language"
+import { Language, LANGUAGES } from "@roo/shared/language"
 
 import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"

webview-ui/src/components/settings/ModelInfoView.tsx

@@ -5,7 +5,7 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
 import { formatPrice } from "@/utils/formatPrice"
 import { cn } from "@/lib/utils"
 
-import { ModelInfo, geminiModels } from "../../../../src/shared/api"
+import { ModelInfo, geminiModels } from "@roo/shared/api"
 
 import { ModelDescriptionMarkdown } from "./ModelDescriptionMarkdown"
 

webview-ui/src/components/settings/ModelPicker.tsx

@@ -3,7 +3,7 @@ import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { Trans } from "react-i18next"
 import { ChevronsUpDown, Check, X } from "lucide-react"
 
-import { ProviderSettings, ModelInfo } from "../../../../src/schemas"
+import { ProviderSettings, ModelInfo } from "@roo/schemas"
 
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { cn } from "@/lib/utils"

webview-ui/src/components/settings/ReasoningEffort.tsx

@@ -2,8 +2,8 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
 
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui"
 
-import { ApiConfiguration } from "../../../../src/shared/api"
-import { reasoningEfforts, ReasoningEffort as ReasoningEffortType } from "../../../../src/schemas"
+import { ApiConfiguration } from "@roo/shared/api"
+import { reasoningEfforts, ReasoningEffort as ReasoningEffortType } from "@roo/schemas"
 
 interface ReasoningEffortProps {
 	apiConfiguration: ApiConfiguration

webview-ui/src/components/settings/SettingsView.tsx

@@ -16,9 +16,9 @@ import {
 } from "lucide-react"
 import { CaretSortIcon } from "@radix-ui/react-icons"
 
-import { ExperimentId } from "../../../../src/shared/experiments"
-import { TelemetrySetting } from "../../../../src/shared/TelemetrySetting"
-import { ApiConfiguration } from "../../../../src/shared/api"
+import { ExperimentId } from "@roo/shared/experiments"
+import { TelemetrySetting } from "@roo/shared/TelemetrySetting"
+import { ApiConfiguration } from "@roo/shared/api"
 
 import { vscode } from "@/utils/vscode"
 import { ExtensionStateContextType, useExtensionState } from "@/context/ExtensionStateContext"

webview-ui/src/components/settings/ThinkingBudget.tsx

@@ -3,7 +3,7 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
 
 import { Slider } from "@/components/ui"
 
-import { ApiConfiguration, ModelInfo } from "../../../../src/shared/api"
+import { ApiConfiguration, ModelInfo } from "@roo/shared/api"
 
 const DEFAULT_MAX_OUTPUT_TOKENS = 16_384
 const DEFAULT_MAX_THINKING_TOKENS = 8_192

webview-ui/src/components/settings/__tests__/ContextManagementSettings.test.tsx

@@ -2,7 +2,7 @@
 
 import { render, screen, fireEvent } from "@testing-library/react"
 
-import { ContextManagementSettings } from "../ContextManagementSettings"
+import { ContextManagementSettings } from "@src/components/settings/ContextManagementSettings"
 
 class MockResizeObserver {
 	observe() {}

webview-ui/src/components/settings/__tests__/ModelPicker.test.tsx

@@ -5,7 +5,7 @@ import { act } from "react"
 
 import { ModelPicker } from "../ModelPicker"
 
-jest.mock("../../../context/ExtensionStateContext", () => ({
+jest.mock("@src/context/ExtensionStateContext", () => ({
 	useExtensionState: jest.fn(),
 }))
 

webview-ui/src/components/settings/__tests__/SettingsView.test.tsx

@@ -9,7 +9,7 @@ import { ExtensionStateContextProvider } from "@/context/ExtensionStateContext"
 import SettingsView from "../SettingsView"
 
 // Mock vscode API
-jest.mock("../../../utils/vscode", () => ({
+jest.mock("@src/utils/vscode", () => ({
 	vscode: {
 		postMessage: jest.fn(),
 	},

webview-ui/src/components/settings/__tests__/ThinkingBudget.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, fireEvent } from "@testing-library/react"
 import { ThinkingBudget } from "../ThinkingBudget"
-import { ModelInfo } from "../../../../../src/shared/api"
+import { ModelInfo } from "@roo/shared/api"
 
 jest.mock("@/components/ui", () => ({
 	Slider: ({ value, onValueChange, min, max }: any) => (

webview-ui/src/components/settings/constants.ts

@@ -10,7 +10,7 @@ import {
 	vertexModels,
 	xaiModels,
 	REASONING_MODELS,
-} from "../../../../src/shared/api"
+} from "@roo/shared/api"
 
 export { REASONING_MODELS }
 

webview-ui/src/components/settings/types.ts

@@ -1,4 +1,4 @@
-import { ExperimentId } from "../../../../src/shared/experiments"
+import { ExperimentId } from "@roo/shared/experiments"
 
 import { ExtensionStateContextType } from "@/context/ExtensionStateContext"
 

webview-ui/src/components/ui/hooks/useOpenRouterModelProviders.ts

@@ -2,8 +2,8 @@ import axios from "axios"
 import { z } from "zod"
 import { useQuery, UseQueryOptions } from "@tanstack/react-query"
 
-import { ModelInfo } from "../../../../../src/shared/api"
-import { parseApiPrice } from "../../../../../src/utils/cost"
+import { ModelInfo } from "@roo/shared/api"
+import { parseApiPrice } from "@roo/utils/cost"
 
 export const OPENROUTER_DEFAULT_PROVIDER_NAME = "[default]"
 

webview-ui/src/components/welcome/RooHero.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react"
-import { useAppTranslation } from "../../i18n/TranslationContext"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
 
 const WelcomeView = () => {
 	const { t } = useAppTranslation()

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -1,13 +1,13 @@
 import { useCallback, useState } from "react"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { validateApiConfiguration } from "../../utils/validate"
-import { vscode } from "../../utils/vscode"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { validateApiConfiguration } from "@src/utils/validate"
+import { vscode } from "@src/utils/vscode"
 import ApiOptions from "../settings/ApiOptions"
 import { Tab, TabContent } from "../common/Tab"
 import { Trans } from "react-i18next"
-import { useAppTranslation } from "../../i18n/TranslationContext"
-import { getRequestyAuthUrl, getOpenRouterAuthUrl } from "../../oauth/urls"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { getRequestyAuthUrl, getOpenRouterAuthUrl } from "@src/oauth/urls"
 import RooHero from "./RooHero"
 import knuthShuffle from "knuth-shuffle-seeded"
 

webview-ui/src/context/ExtensionStateContext.tsx

@@ -1,16 +1,16 @@
 import React, { createContext, useCallback, useContext, useEffect, useState } from "react"
 import { useEvent } from "react-use"
-import { ApiConfigMeta, ExtensionMessage, ExtensionState } from "../../../src/shared/ExtensionMessage"
-import { ApiConfiguration } from "../../../src/shared/api"
-import { vscode } from "../utils/vscode"
-import { convertTextMateToHljs } from "../utils/textMateToHljs"
-import { findLastIndex } from "../../../src/shared/array"
-import { McpServer } from "../../../src/shared/mcp"
-import { checkExistKey } from "../../../src/shared/checkExistApiConfig"
-import { Mode, CustomModePrompts, defaultModeSlug, defaultPrompts, ModeConfig } from "../../../src/shared/modes"
-import { CustomSupportPrompts } from "../../../src/shared/support-prompt"
-import { experimentDefault, ExperimentId } from "../../../src/shared/experiments"
-import { TelemetrySetting } from "../../../src/shared/TelemetrySetting"
+import { ApiConfigMeta, ExtensionMessage, ExtensionState } from "@roo/shared/ExtensionMessage"
+import { ApiConfiguration } from "@roo/shared/api"
+import { vscode } from "@src/utils/vscode"
+import { convertTextMateToHljs } from "@src/utils/textMateToHljs"
+import { findLastIndex } from "@roo/shared/array"
+import { McpServer } from "@roo/shared/mcp"
+import { checkExistKey } from "@roo/shared/checkExistApiConfig"
+import { Mode, CustomModePrompts, defaultModeSlug, defaultPrompts, ModeConfig } from "@roo/shared/modes"
+import { CustomSupportPrompts } from "@roo/shared/support-prompt"
+import { experimentDefault, ExperimentId } from "@roo/shared/experiments"
+import { TelemetrySetting } from "@roo/shared/TelemetrySetting"
 
 export interface ExtensionStateContextType extends ExtensionState {
 	didHydrateState: boolean

webview-ui/src/context/__tests__/ExtensionStateContext.test.tsx

@@ -2,10 +2,10 @@
 
 import { render, screen, act } from "@testing-library/react"
 
-import { ExtensionState } from "../../../../src/shared/ExtensionMessage"
+import { ExtensionState } from "@roo/shared/ExtensionMessage"
 import { ExtensionStateContextProvider, useExtensionState, mergeExtensionState } from "../ExtensionStateContext"
-import { ExperimentId } from "../../../../src/shared/experiments"
-import { ApiConfiguration } from "../../../../src/shared/api"
+import { ExperimentId } from "@roo/shared/experiments"
+import { ApiConfiguration } from "@roo/shared/api"
 
 // Test component that consumes the context
 const TestComponent = () => {

webview-ui/src/stories/AutosizeTextarea.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { AutosizeTextarea } from "../components/ui/autosize-textarea"
+import { AutosizeTextarea } from "@src/components/ui/autosize-textarea"
 
 const meta: Meta<typeof AutosizeTextarea> = {
 	title: "Primitives/AutosizeTextarea",

webview-ui/src/stories/Collapsible.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../components/ui/collapsible"
-import { Button } from "../components/ui/button"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@src/components/ui/collapsible"
+import { Button } from "@src/components/ui/button"
 import { ChevronsUpDown } from "lucide-react"
 
 const meta: Meta<typeof Collapsible> = {

webview-ui/src/utils/TelemetryClient.ts

@@ -1,5 +1,5 @@
 import posthog from "posthog-js"
-import { TelemetrySetting } from "../../../src/shared/TelemetrySetting"
+import { TelemetrySetting } from "@roo/shared/TelemetrySetting"
 
 class TelemetryClient {
 	private static instance: TelemetryClient

webview-ui/src/utils/__tests__/context-mentions.test.ts

@@ -5,7 +5,7 @@ import {
 	shouldShowContextMenu,
 	ContextMenuOptionType,
 	ContextMenuQueryItem,
-} from "../context-mentions"
+} from "@src/utils/context-mentions"
 
 describe("insertMention", () => {
 	it("should insert mention at cursor position when no @ symbol exists", () => {

webview-ui/src/utils/context-mentions.ts

@@ -1,6 +1,6 @@
-import { mentionRegex } from "../../../src/shared/context-mentions"
+import { mentionRegex } from "@roo/shared/context-mentions"
 import { Fzf } from "fzf"
-import { ModeConfig } from "../../../src/shared/modes"
+import { ModeConfig } from "@roo/shared/modes"
 import * as path from "path"
 
 export interface SearchResult {

webview-ui/src/utils/mcp.ts

@@ -1,4 +1,4 @@
-import { McpResource, McpResourceTemplate } from "../../../src/shared/mcp"
+import { McpResource, McpResourceTemplate } from "@roo/shared/mcp"
 
 /**
  * Matches a URI against an array of URI templates and returns the matching template

webview-ui/src/utils/validate.ts

@@ -1,4 +1,4 @@
-import { ApiConfiguration, ModelInfo } from "../../../src/shared/api"
+import { ApiConfiguration, ModelInfo } from "@roo/shared/api"
 import i18next from "i18next"
 
 export function validateApiConfiguration(apiConfiguration?: ApiConfiguration): string | undefined {

webview-ui/src/utils/vscode.ts

@@ -1,4 +1,4 @@
-import { WebviewMessage } from "../../../src/shared/WebviewMessage"
+import { WebviewMessage } from "@roo/shared/WebviewMessage"
 import type { WebviewApi } from "vscode-webview"
 
 /**

webview-ui/tsconfig.json

@@ -17,7 +17,9 @@
 		"jsx": "react-jsx",
 		"baseUrl": ".",
 		"paths": {
-			"@/*": ["./src/*"]
+			"@/*": ["./src/*"],
+			"@src/*": ["./src/*"],
+			"@roo/*": ["../src/*"]
 		}
 	},
 	"include": ["src", "../src/shared"]

webview-ui/vite.config.ts

@@ -1,4 +1,4 @@
-import path from "path"
+import { resolve } from "path"
 import fs from "fs"
 
 import { defineConfig } from "vite"
@@ -17,7 +17,7 @@ const writePortToFile = () => {
 
 				if (port) {
 					// Write to a file in the project root
-					const portFilePath = path.resolve(__dirname, "../.vite-port")
+					const portFilePath = resolve(__dirname, "../.vite-port")
 					fs.writeFileSync(portFilePath, port.toString())
 					console.log(`[Vite Plugin] Server started on port ${port}`)
 					console.log(`[Vite Plugin] Port information written to ${portFilePath}`)
@@ -34,7 +34,9 @@ export default defineConfig({
 	plugins: [react(), tailwindcss(), writePortToFile()],
 	resolve: {
 		alias: {
-			"@": path.resolve(__dirname, "./src"),
+			"@": resolve(__dirname, "./src"),
+			"@src": resolve(__dirname, "./src"),
+			"@roo": resolve(__dirname, "../src"),
 		},
 	},
 	build: {