changeset

.changeset/wild-bugs-deny.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Update import aliases in webview

webview-ui/src/components/account/AccountOptions.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react"
-import { vscode } from "../../utils/vscode"
+import { vscode } from "@/utils/vscode"
 
 const AccountOptions = () => {
 	const handleAccountClick = () => {

webview-ui/src/components/account/AccountView.tsx

@@ -1,13 +1,13 @@
 import { VSCodeButton, VSCodeDivider, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { memo, useEffect, useState } from "react"
-import { useFirebaseAuth } from "../../context/FirebaseAuthContext"
-import { vscode } from "../../utils/vscode"
+import { useFirebaseAuth } from "@/context/FirebaseAuthContext"
+import { vscode } from "@/utils/vscode"
 import VSCodeButtonLink from "../common/VSCodeButtonLink"
 import ClineLogoWhite from "../../assets/ClineLogoWhite"
 import CountUp from "react-countup"
 import CreditsHistoryTable from "./CreditsHistoryTable"
-import { UsageTransaction, PaymentTransaction } from "../../../../src/shared/ClineAccount"
-import { useExtensionState } from "../../context/ExtensionStateContext"
+import { UsageTransaction, PaymentTransaction } from "@shared/ClineAccount"
+import { useExtensionState } from "@/context/ExtensionStateContext"
 
 type AccountViewProps = {
 	onDone: () => void

webview-ui/src/components/account/CreditsHistoryTable.tsx

@@ -1,8 +1,8 @@
 import { VSCodeDataGrid, VSCodeDataGridRow, VSCodeDataGridCell } from "@vscode/webview-ui-toolkit/react"
 import { useState } from "react"
 import { TabButton } from "../mcp/configuration/McpConfigurationView"
-import { UsageTransaction, PaymentTransaction } from "../../../../src/shared/ClineAccount"
-import { formatDollars, formatTimestamp } from "../../utils/format"
+import { UsageTransaction, PaymentTransaction } from "@shared/ClineAccount"
+import { formatDollars, formatTimestamp } from "@/utils/format"
 
 interface CreditsHistoryTableProps {
 	isLoading: boolean

webview-ui/src/components/browser/BrowserSettingsMenu.tsx

@@ -2,9 +2,9 @@ import { VSCodeButton, VSCodeCheckbox, VSCodeDropdown, VSCodeOption } from "@vsc
 import React, { useRef, useState } from "react"
 import { useClickAway } from "react-use"
 import styled from "styled-components"
-import { BROWSER_VIEWPORT_PRESETS } from "../../../../src/shared/BrowserSettings"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { vscode } from "../../utils/vscode"
+import { BROWSER_VIEWPORT_PRESETS } from "@shared/BrowserSettings"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
 import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 
 interface BrowserSettingsMenuProps {

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

@@ -1,6 +1,6 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { CSSProperties, memo } from "react"
-import { getAsVar, VSC_DESCRIPTION_FOREGROUND, VSC_INACTIVE_SELECTION_BACKGROUND } from "../../utils/vscStyles"
+import { getAsVar, VSC_DESCRIPTION_FOREGROUND, VSC_INACTIVE_SELECTION_BACKGROUND } from "@/utils/vscStyles"
 
 interface AnnouncementProps {
 	version: string

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

@@ -1,10 +1,10 @@
 import { VSCodeCheckbox, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { useCallback, useState } from "react"
 import styled from "styled-components"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { AutoApprovalSettings } from "../../../../src/shared/AutoApprovalSettings"
-import { vscode } from "../../utils/vscode"
-import { getAsVar, VSC_FOREGROUND, VSC_TITLEBAR_INACTIVE_FOREGROUND, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { AutoApprovalSettings } from "@shared/AutoApprovalSettings"
+import { vscode } from "@/utils/vscode"
+import { getAsVar, VSC_FOREGROUND, VSC_TITLEBAR_INACTIVE_FOREGROUND, VSC_DESCRIPTION_FOREGROUND } from "@/utils/vscStyles"
 
 interface AutoApproveMenuProps {
 	style?: React.CSSProperties

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

@@ -3,14 +3,14 @@ import deepEqual from "fast-deep-equal"
 import React, { CSSProperties, memo, useEffect, useMemo, useRef, useState } from "react"
 import { useSize } from "react-use"
 import styled from "styled-components"
-import { BROWSER_VIEWPORT_PRESETS } from "../../../../src/shared/BrowserSettings"
-import { BrowserAction, BrowserActionResult, ClineMessage, ClineSayBrowserAction } from "../../../../src/shared/ExtensionMessage"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { vscode } from "../../utils/vscode"
-import { BrowserSettingsMenu } from "../browser/BrowserSettingsMenu"
-import { CheckpointControls } from "../common/CheckpointControls"
-import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
-import { ChatRowContent, ProgressIndicator } from "./ChatRow"
+import { BROWSER_VIEWPORT_PRESETS } from "@shared/BrowserSettings"
+import { BrowserAction, BrowserActionResult, ClineMessage, ClineSayBrowserAction } from "@shared/ExtensionMessage"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
+import { BrowserSettingsMenu } from "@/components/browser/BrowserSettingsMenu"
+import { CheckpointControls } from "@/components/common/CheckpointControls"
+import CodeBlock, { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
+import { ChatRowContent, ProgressIndicator } from "@/components/chat/ChatRow"
 
 interface BrowserSessionRowProps {
 	messages: ClineMessage[]

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

@@ -12,25 +12,25 @@ import {
 	ClineSayTool,
 	COMPLETION_RESULT_CHANGES_FLAG,
 	ExtensionMessage,
-} from "../../../../src/shared/ExtensionMessage"
-import { COMMAND_OUTPUT_STRING, COMMAND_REQ_APP_STRING } from "../../../../src/shared/combineCommandSequences"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { findMatchingResourceOrTemplate, getMcpServerDisplayName } from "../../utils/mcp"
-import { vscode } from "../../utils/vscode"
-import { CheckmarkControl } from "../common/CheckmarkControl"
+} from "@shared/ExtensionMessage"
+import { COMMAND_OUTPUT_STRING, COMMAND_REQ_APP_STRING } from "@shared/combineCommandSequences"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { findMatchingResourceOrTemplate, getMcpServerDisplayName } from "@/utils/mcp"
+import { vscode } from "@/utils/vscode"
+import { CheckmarkControl } from "@/components/common/CheckmarkControl"
 import { CheckpointControls, CheckpointOverlay } from "../common/CheckpointControls"
 import CodeAccordian, { cleanPathPrefix } from "../common/CodeAccordian"
-import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
-import MarkdownBlock from "../common/MarkdownBlock"
-import Thumbnails from "../common/Thumbnails"
-import McpToolRow from "../mcp/configuration/tabs/installed/server-row/McpToolRow"
-import McpResponseDisplay from "../mcp/chat-display/McpResponseDisplay"
-import CreditLimitError from "./CreditLimitError"
-import { OptionsButtons } from "./OptionsButtons"
+import CodeBlock, { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
+import MarkdownBlock from "@/components/common/MarkdownBlock"
+import Thumbnails from "@/components/common/Thumbnails"
+import McpToolRow from "@/components/mcp/configuration/tabs/installed/server-row/McpToolRow"
+import McpResponseDisplay from "@/components/mcp/chat-display/McpResponseDisplay"
+import CreditLimitError from "@/components/chat/CreditLimitError"
+import { OptionsButtons } from "@/components/chat/OptionsButtons"
 import { highlightMentions } from "./TaskHeader"
-import SuccessButton from "../common/SuccessButton"
-import TaskFeedbackButtons from "./TaskFeedbackButtons"
-import McpResourceRow from "../mcp/configuration/tabs/installed/server-row/McpResourceRow"
+import SuccessButton from "@/components/common/SuccessButton"
+import TaskFeedbackButtons from "@/components/chat/TaskFeedbackButtons"
+import McpResourceRow from "@/components/mcp/configuration/tabs/installed/server-row/McpResourceRow"
 
 const ChatRowContainer = styled.div`
 	padding: 10px 6px 10px 15px;

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

@@ -3,26 +3,26 @@ import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, us
 import DynamicTextArea from "react-textarea-autosize"
 import { useClickAway, useEvent, useWindowSize } from "react-use"
 import styled from "styled-components"
-import { mentionRegex, mentionRegexGlobal } from "../../../../src/shared/context-mentions"
-import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
-import { useExtensionState } from "../../context/ExtensionStateContext"
+import { mentionRegex, mentionRegexGlobal } from "@shared/context-mentions"
+import { ExtensionMessage } from "@shared/ExtensionMessage"
+import { useExtensionState } from "@/context/ExtensionStateContext"
 import {
 	ContextMenuOptionType,
 	getContextMenuOptions,
 	insertMention,
 	removeMention,
 	shouldShowContextMenu,
-} from "../../utils/context-mentions"
-import { useMetaKeyDetection, useShortcut } from "../../utils/hooks"
-import { validateApiConfiguration, validateModelId } from "../../utils/validate"
-import { vscode } from "../../utils/vscode"
-import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
-import Thumbnails from "../common/Thumbnails"
-import Tooltip from "../common/Tooltip"
-import ApiOptions, { normalizeApiConfiguration } from "../settings/ApiOptions"
-import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
-import ContextMenu from "./ContextMenu"
-import { ChatSettings } from "../../../../src/shared/ChatSettings"
+} from "@/utils/context-mentions"
+import { useMetaKeyDetection, useShortcut } from "@/utils/hooks"
+import { validateApiConfiguration, validateModelId } from "@/utils/validate"
+import { vscode } from "@/utils/vscode"
+import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
+import Thumbnails from "@/components/common/Thumbnails"
+import Tooltip from "@/components/common/Tooltip"
+import ApiOptions, { normalizeApiConfiguration } from "@/components/settings/ApiOptions"
+import { MAX_IMAGES_PER_MESSAGE } from "@/components/chat/ChatView"
+import ContextMenu from "@/components/chat/ContextMenu"
+import { ChatSettings } from "@shared/ChatSettings"
 
 interface ChatTextAreaProps {
 	inputValue: string

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

@@ -11,22 +11,22 @@ import {
 	ClineSayBrowserAction,
 	ClineSayTool,
 	ExtensionMessage,
-} from "../../../../src/shared/ExtensionMessage"
-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"
-import HistoryPreview from "../history/HistoryPreview"
-import { normalizeApiConfiguration } from "../settings/ApiOptions"
-import Announcement from "./Announcement"
-import AutoApproveMenu from "./AutoApproveMenu"
-import BrowserSessionRow from "./BrowserSessionRow"
-import ChatRow from "./ChatRow"
-import ChatTextArea from "./ChatTextArea"
-import TaskHeader from "./TaskHeader"
-import TelemetryBanner from "../common/TelemetryBanner"
+} from "@shared/ExtensionMessage"
+import { findLast } from "@shared/array"
+import { combineApiRequests } from "@shared/combineApiRequests"
+import { combineCommandSequences } from "@shared/combineCommandSequences"
+import { getApiMetrics } from "@shared/getApiMetrics"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
+import HistoryPreview from "@/components/history/HistoryPreview"
+import { normalizeApiConfiguration } from "@/components/settings/ApiOptions"
+import Announcement from "@/components/chat/Announcement"
+import AutoApproveMenu from "@/components/chat/AutoApproveMenu"
+import BrowserSessionRow from "@/components/chat/BrowserSessionRow"
+import ChatRow from "@/components/chat/ChatRow"
+import ChatTextArea from "@/components/chat/ChatTextArea"
+import TaskHeader from "@/components/chat/TaskHeader"
+import TelemetryBanner from "@/components/common/TelemetryBanner"
 
 interface ChatViewProps {
 	isHidden: boolean

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef } from "react"
-import { ContextMenuOptionType, ContextMenuQueryItem, getContextMenuOptions } from "../../utils/context-mentions"
-import { cleanPathPrefix } from "../common/CodeAccordian"
+import { ContextMenuOptionType, ContextMenuQueryItem, getContextMenuOptions } from "@/utils/context-mentions"
+import { cleanPathPrefix } from "@/components/common/CodeAccordian"
 
 interface ContextMenuProps {
 	onSelect: (type: ContextMenuOptionType, value?: string) => void

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

@@ -1,8 +1,8 @@
 import React from "react"
-import VSCodeButtonLink from "../common/VSCodeButtonLink"
+import VSCodeButtonLink from "@/components/common/VSCodeButtonLink"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import { vscode } from "../../utils/vscode"
-import { Invoke } from "../../../../src/shared/ExtensionMessage"
+import { vscode } from "@/utils/vscode"
+import { Invoke } from "@shared/ExtensionMessage"
 
 interface CreditLimitErrorProps {
 	currentBalance: number

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

@@ -1,6 +1,6 @@
 import styled from "styled-components"
-import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
-import { vscode } from "../../utils/vscode"
+import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
+import { vscode } from "@/utils/vscode"
 
 const OptionButton = styled.button<{ isSelected?: boolean; isNotSelectable?: boolean }>`
 	padding: 8px 12px;

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

@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from "react"
 import styled from "styled-components"
-import { vscode } from "../../utils/vscode"
-import { TaskFeedbackType } from "../../../../src/shared/WebviewMessage"
+import { vscode } from "@/utils/vscode"
+import { TaskFeedbackType } from "@shared/WebviewMessage"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import VSCodeButtonLink from "../common/VSCodeButtonLink"
 
 interface TaskFeedbackButtonsProps {
 	messageTs: number

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

@@ -1,14 +1,14 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import React, { memo, useEffect, useMemo, useRef, useState } from "react"
 import { useWindowSize } from "react-use"
-import { mentionRegexGlobal } from "../../../../src/shared/context-mentions"
-import { ClineMessage } from "../../../../src/shared/ExtensionMessage"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { formatLargeNumber } from "../../utils/format"
-import { formatSize } from "../../utils/format"
-import { vscode } from "../../utils/vscode"
-import Thumbnails from "../common/Thumbnails"
-import { normalizeApiConfiguration } from "../settings/ApiOptions"
+import { mentionRegexGlobal } from "@shared/context-mentions"
+import { ClineMessage } from "@shared/ExtensionMessage"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { formatLargeNumber } from "@/utils/format"
+import { formatSize } from "@/utils/format"
+import { vscode } from "@/utils/vscode"
+import Thumbnails from "@/components/common/Thumbnails"
+import { normalizeApiConfiguration } from "@/components/settings/ApiOptions"
 
 interface TaskHeaderProps {
 	task: ClineMessage

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

@@ -1,10 +1,9 @@
 import { useCallback, useRef, useState, useEffect } from "react"
-import { useClickAway, useEvent } from "react-use"
+import { useEvent } from "react-use"
 import styled from "styled-components"
-import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
-import { vscode } from "../../utils/vscode"
-import { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
-import { ClineCheckpointRestore } from "../../../../src/shared/WebviewMessage"
+import { ExtensionMessage } from "@shared/ExtensionMessage"
+import { vscode } from "@/utils/vscode"
+import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import { createPortal } from "react-dom"
 import { useFloating, offset, flip, shift } from "@floating-ui/react"

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

@@ -2,10 +2,10 @@ import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import { useCallback, useRef, useState } from "react"
 import { useClickAway, useEvent } from "react-use"
 import styled from "styled-components"
-import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
-import { vscode } from "../../utils/vscode"
-import { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
-import { ClineCheckpointRestore } from "../../../../src/shared/WebviewMessage"
+import { ExtensionMessage } from "@shared/ExtensionMessage"
+import { vscode } from "@/utils/vscode"
+import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
+import { ClineCheckpointRestore } from "@shared/WebviewMessage"
 
 interface CheckpointOverlayProps {
 	messageTs?: number

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

@@ -1,6 +1,6 @@
 import { memo, useMemo } from "react"
-import { getLanguageFromPath } from "../../utils/getLanguageFromPath"
-import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
+import { getLanguageFromPath } from "@/utils/getLanguageFromPath"
+import CodeBlock, { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
 
 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 "@/context/ExtensionStateContext"
 
 export const CODE_BLOCK_BG_COLOR = "var(--vscode-editor-background, --vscode-sideBar-background, rgb(30 30 30))"
 

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

@@ -3,9 +3,9 @@ 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 { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
-import MermaidBlock from "./MermaidBlock"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
+import MermaidBlock from "@/components/common/MermaidBlock"
 
 interface MarkdownBlockProps {
 	markdown?: string

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 "@/utils/useDebounceEffect"
 import styled from "styled-components"
-import { vscode } from "../../utils/vscode"
+import { vscode } from "@/utils/vscode"
 
 const MERMAID_THEME = {
 	background: "#1e1e1e", // VS Code dark theme background

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

@@ -1,8 +1,8 @@
 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 { vscode } from "@/utils/vscode"
+import { TelemetrySetting } from "@shared/TelemetrySetting"
 
 const BannerContainer = styled.div`
 	background-color: var(--vscode-banner-background);

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 "@/utils/vscode"
 
 interface ThumbnailsProps {
 	images: string[]

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

@@ -6,7 +6,7 @@ import {
 	VSC_SIDEBAR_BACKGROUND,
 	VSC_INPUT_PLACEHOLDER_FOREGROUND,
 	VSC_INPUT_BORDER,
-} from "../../utils/vscStyles"
+} from "@/utils/vscStyles"
 
 interface TooltipProps {
 	visible: boolean

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

@@ -1,8 +1,8 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { vscode } from "../../utils/vscode"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
 import { memo } from "react"
-import { formatLargeNumber } from "../../utils/format"
+import { formatLargeNumber } from "@/utils/format"
 
 type HistoryPreviewProps = {
 	showHistoryView: () => void

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

@@ -1,14 +1,14 @@
 import { VSCodeButton, VSCodeTextField, VSCodeRadioGroup, VSCodeRadio } from "@vscode/webview-ui-toolkit/react"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { vscode } from "../../utils/vscode"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
 import { Virtuoso } from "react-virtuoso"
 import { memo, useMemo, useState, useEffect, useCallback } from "react"
 import Fuse, { FuseResult } from "fuse.js"
-import { formatLargeNumber } from "../../utils/format"
-import { formatSize } from "../../utils/format"
-import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
+import { formatLargeNumber } from "@/utils/format"
+import { formatSize } from "@/utils/format"
+import { ExtensionMessage } from "@shared/ExtensionMessage"
 import { useEvent } from "react-use"
-import DangerButton from "../common/DangerButton"
+import DangerButton from "@/components/common/DangerButton"
 
 type HistoryViewProps = {
 	onDone: () => void

webview-ui/src/components/mcp/chat-display/ImagePreview.tsx

@@ -1,8 +1,8 @@
 import React from "react"
-import { vscode } from "../../../utils/vscode"
+import { vscode } from "@/utils/vscode"
 import DOMPurify from "dompurify"
 import { getSafeHostname, formatUrlForOpening, checkIfImageUrl } from "./utils/mcpRichUtil"
-import ChatErrorBoundary from "../../chat/ChatErrorBoundary"
+import ChatErrorBoundary from "@/components/chat/ChatErrorBoundary"
 
 interface ImagePreviewProps {
 	url: string

webview-ui/src/components/mcp/chat-display/LinkPreview.tsx

@@ -1,8 +1,8 @@
 import React from "react"
-import { vscode } from "../../../utils/vscode"
+import { vscode } from "@/utils/vscode"
 import DOMPurify from "dompurify"
 import { getSafeHostname, normalizeRelativeUrl } from "./utils/mcpRichUtil"
-import ChatErrorBoundary from "../../chat/ChatErrorBoundary"
+import ChatErrorBoundary from "@/components/chat/ChatErrorBoundary"
 
 interface OpenGraphData {
 	title?: string

webview-ui/src/components/mcp/chat-display/McpResponseDisplay.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState, useCallback } from "react"
 import LinkPreview from "./LinkPreview"
 import ImagePreview from "./ImagePreview"
 import styled from "styled-components"
-import { CODE_BLOCK_BG_COLOR } from "../../common/CodeBlock"
-import ChatErrorBoundary from "../../chat/ChatErrorBoundary"
+import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
+import ChatErrorBoundary from "@/components/chat/ChatErrorBoundary"
 import { isUrl, isLocalhostUrl, formatUrlForOpening, checkIfImageUrl } from "./utils/mcpRichUtil"
 
 // Maximum number of URLs to process in total, per response

webview-ui/src/components/mcp/chat-display/utils/mcpRichUtil.ts

@@ -1,4 +1,4 @@
-import { vscode } from "../../../../utils/vscode"
+import { vscode } from "@/utils/vscode"
 
 // Safely create a URL object with error handling and ensure HTTPS
 export const safeCreateUrl = (url: string): URL | null => {

webview-ui/src/components/mcp/configuration/McpConfigurationView.tsx

@@ -1,8 +1,8 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import { useEffect, useState } from "react"
 import styled from "styled-components"
-import { useExtensionState } from "../../../context/ExtensionStateContext"
-import { vscode } from "../../../utils/vscode"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
 import AddRemoteServerForm from "./tabs/add-server/AddRemoteServerForm"
 import McpMarketplaceView from "./tabs/marketplace/McpMarketplaceView"
 import InstalledServersView from "./tabs/installed/InstalledServersView"

webview-ui/src/components/mcp/configuration/tabs/add-server/AddLocalServerForm.tsx

@@ -1,7 +1,7 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { vscode } from "../../../../../utils/vscode"
+import { vscode } from "@/utils/vscode"
 import styled from "styled-components"
-import { LINKS } from "../../../../../constants"
+import { LINKS } from "@/constants"
 
 type AddLocalServerFormProps = {
 	onServerAdded: () => void

webview-ui/src/components/mcp/configuration/tabs/add-server/AddRemoteServerForm.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState } from "react"
-import { vscode } from "../../../../../utils/vscode"
+import { vscode } from "@/utils/vscode"
 import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { useEvent } from "react-use"
 import { LINKS } from "@/constants"

webview-ui/src/components/mcp/configuration/tabs/installed/InstalledServersView.tsx

@@ -1,6 +1,6 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { vscode } from "../../../../../utils/vscode"
-import { useExtensionState } from "../../../../../context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
+import { useExtensionState } from "@/context/ExtensionStateContext"
 import ServerRow from "./server-row/ServerRow"
 const InstalledServersView = () => {
 	const { mcpServers: servers } = useExtensionState()

webview-ui/src/components/mcp/configuration/tabs/installed/server-row/McpResourceRow.tsx

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

webview-ui/src/components/mcp/configuration/tabs/installed/server-row/McpToolRow.tsx

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

webview-ui/src/components/mcp/configuration/tabs/installed/server-row/ServerRow.tsx

@@ -1,7 +1,7 @@
-import { McpServer } from "../../../../../../../../src/shared/mcp"
-import { DEFAULT_MCP_TIMEOUT_SECONDS } from "../../../../../../../../src/shared/mcp"
+import { McpServer } from "@shared/mcp"
+import { DEFAULT_MCP_TIMEOUT_SECONDS } from "@shared/mcp"
 import { useState } from "react"
-import { vscode } from "../../../../../../utils/vscode"
+import { vscode } from "@/utils/vscode"
 import {
 	VSCodeButton,
 	VSCodeCheckbox,
@@ -11,11 +11,11 @@ import {
 	VSCodePanelTab,
 	VSCodePanelView,
 } from "@vscode/webview-ui-toolkit/react"
-import { getMcpServerDisplayName } from "../../../../../../utils/mcp"
-import DangerButton from "../../../../../common/DangerButton"
+import { getMcpServerDisplayName } from "@/utils/mcp"
+import DangerButton from "@/components/common/DangerButton"
 import McpToolRow from "./McpToolRow"
 import McpResourceRow from "./McpResourceRow"
-import { useExtensionState } from "../../../../../../context/ExtensionStateContext"
+import { useExtensionState } from "@/context/ExtensionStateContext"
 
 const ServerRow = ({ server }: { server: McpServer }) => {
 	const { mcpMarketplaceCatalog, autoApprovalSettings } = useExtensionState()

webview-ui/src/components/mcp/configuration/tabs/marketplace/McpMarketplaceCard.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState, useRef, useMemo } from "react"
 import styled from "styled-components"
-import { McpMarketplaceItem, McpServer } from "../../../../../../../src/shared/mcp"
-import { vscode } from "../../../../../utils/vscode"
+import { McpMarketplaceItem, McpServer } from "@shared/mcp"
+import { vscode } from "@/utils/vscode"
 import { useEvent } from "react-use"
 
 interface McpMarketplaceCardProps {

webview-ui/src/components/mcp/configuration/tabs/marketplace/McpMarketplaceView.tsx

@@ -8,9 +8,9 @@ import {
 	VSCodeOption,
 	VSCodeTextField,
 } from "@vscode/webview-ui-toolkit/react"
-import { McpMarketplaceItem } from "../../../../../../../src/shared/mcp"
-import { useExtensionState } from "../../../../../context/ExtensionStateContext"
-import { vscode } from "../../../../../utils/vscode"
+import { McpMarketplaceItem } from "@shared/mcp"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
 import McpMarketplaceCard from "./McpMarketplaceCard"
 import McpSubmitCard from "./McpSubmitCard"
 const McpMarketplaceView = () => {

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

@@ -45,12 +45,12 @@ import {
 	xaiModels,
 	sambanovaModels,
 	sambanovaDefaultModelId,
-} from "../../../../src/shared/api"
-import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { vscode } from "../../utils/vscode"
-import { getAsVar, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
-import VSCodeButtonLink from "../common/VSCodeButtonLink"
+} from "@shared/api"
+import { ExtensionMessage } from "@shared/ExtensionMessage"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
+import { getAsVar, VSC_DESCRIPTION_FOREGROUND } from "@/utils/vscStyles"
+import VSCodeButtonLink from "@/components/common/VSCodeButtonLink"
 import OpenRouterModelPicker, { ModelDescriptionMarkdown, OPENROUTER_MODEL_PICKER_Z_INDEX } from "./OpenRouterModelPicker"
 import { ClineAccountInfoCard } from "./ClineAccountInfoCard"
 

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

@@ -1,7 +1,7 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import { useFirebaseAuth } from "../../context/FirebaseAuthContext"
-import { vscode } from "../../utils/vscode"
-import { useExtensionState } from "../../context/ExtensionStateContext"
+import { useFirebaseAuth } from "@/context/FirebaseAuthContext"
+import { vscode } from "@/utils/vscode"
+import { useExtensionState } from "@/context/ExtensionStateContext"
 
 export const ClineAccountInfoCard = () => {
 	const { user: firebaseUser, handleSignOut } = useFirebaseAuth()

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

@@ -2,7 +2,7 @@ import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { memo, useEffect, useRef, useState } from "react"
 import { useRemark } from "react-remark"
 import styled from "styled-components"
-import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
+import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
 
 const StyledMarkdown = styled.div`
 	font-family:

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

@@ -3,8 +3,8 @@ import Fuse from "fuse.js"
 import React, { KeyboardEvent, memo, useEffect, useMemo, useRef, useState } from "react"
 import { useRemark } from "react-remark"
 import styled from "styled-components"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { vscode } from "../../utils/vscode"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
 import { highlight } from "../history/HistoryView"
 
 const OpenAiModelPicker: React.FC = () => {

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

@@ -1,15 +1,15 @@
-import { VSCodeCheckbox, VSCodeDropdown, VSCodeLink, VSCodeOption, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import Fuse from "fuse.js"
 import React, { KeyboardEvent, memo, useEffect, useMemo, useRef, useState } from "react"
 import { useRemark } from "react-remark"
 import { useMount } from "react-use"
 import styled from "styled-components"
-import { openRouterDefaultModelId } from "../../../../src/shared/api"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { vscode } from "../../utils/vscode"
+import { openRouterDefaultModelId } from "@shared/api"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { vscode } from "@/utils/vscode"
 import { highlight } from "../history/HistoryView"
-import { DropdownContainer, ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
-import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
+import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
+import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
 import ThinkingBudgetSlider from "./ThinkingBudgetSlider"
 
 export interface OpenRouterModelPickerProps {

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

@@ -1,21 +1,13 @@
-import {
-	VSCodeButton,
-	VSCodeCheckbox,
-	VSCodeLink,
-	VSCodeTextArea,
-	VSCodePanels,
-	VSCodePanelTab,
-	VSCodePanelView,
-} from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeCheckbox, VSCodeLink, VSCodeTextArea } from "@vscode/webview-ui-toolkit/react"
 import { memo, useCallback, useEffect, useState } from "react"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { validateApiConfiguration, validateModelId } from "../../utils/validate"
-import { vscode } from "../../utils/vscode"
-import SettingsButton from "../common/SettingsButton"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { validateApiConfiguration, validateModelId } from "@/utils/validate"
+import { vscode } from "@/utils/vscode"
+import SettingsButton from "@/components/common/SettingsButton"
 import ApiOptions from "./ApiOptions"
 import { TabButton } from "../mcp/configuration/McpConfigurationView"
 import { useEvent } from "react-use"
-import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
+import { ExtensionMessage } from "@shared/ExtensionMessage"
 const { IS_DEV } = process.env
 
 type SettingsViewProps = {

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

@@ -1,5 +1,5 @@
 import { memo, useState } from "react"
-import { anthropicModels, ApiConfiguration } from "../../../../src/shared/api"
+import { anthropicModels, ApiConfiguration } from "@shared/api"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
 import styled from "styled-components"
 

webview-ui/src/components/settings/__tests__/APIOptions.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from "@testing-library/react"
 import { describe, it, expect, vi } from "vitest"
 import ApiOptions from "../ApiOptions"
-import { ExtensionStateContextProvider } from "../../../context/ExtensionStateContext"
+import { ExtensionStateContextProvider } from "@/context/ExtensionStateContext"
 
 vi.mock("../../../context/ExtensionStateContext", async (importOriginal) => {
 	const actual = await importOriginal()

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

@@ -1,12 +1,10 @@
-import { VSCodeButton, VSCodeDivider, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
-import { useCallback, useEffect, useState } from "react"
-import { useEvent } from "react-use"
-import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { validateApiConfiguration } from "../../utils/validate"
-import { vscode } from "../../utils/vscode"
-import ApiOptions from "../settings/ApiOptions"
-import ClineLogoWhite from "../../assets/ClineLogoWhite"
+import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import { useEffect, useState } from "react"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { validateApiConfiguration } from "@/utils/validate"
+import { vscode } from "@/utils/vscode"
+import ApiOptions from "@/components/settings/ApiOptions"
+import ClineLogoWhite from "@/assets/ClineLogoWhite"
 
 const WelcomeView = () => {
 	const { apiConfiguration } = useExtensionState()

webview-ui/src/context/ExtensionStateContext.tsx

@@ -1,15 +1,15 @@
 import React, { createContext, useCallback, useContext, useEffect, useState } from "react"
 import { useEvent } from "react-use"
-import { DEFAULT_AUTO_APPROVAL_SETTINGS } from "../../../src/shared/AutoApprovalSettings"
-import { ExtensionMessage, ExtensionState, DEFAULT_PLATFORM } from "../../../src/shared/ExtensionMessage"
-import { ApiConfiguration, ModelInfo, openRouterDefaultModelId, openRouterDefaultModelInfo } from "../../../src/shared/api"
-import { findLastIndex } from "../../../src/shared/array"
+import { DEFAULT_AUTO_APPROVAL_SETTINGS } from "@shared/AutoApprovalSettings"
+import { ExtensionMessage, ExtensionState, DEFAULT_PLATFORM } from "@shared/ExtensionMessage"
+import { ApiConfiguration, ModelInfo, openRouterDefaultModelId, openRouterDefaultModelInfo } from "@shared/api"
+import { findLastIndex } from "@shared/array"
 import { McpMarketplaceCatalog, McpServer } from "../../../src/shared/mcp"
 import { convertTextMateToHljs } from "../utils/textMateToHljs"
 import { vscode } from "../utils/vscode"
-import { DEFAULT_BROWSER_SETTINGS } from "../../../src/shared/BrowserSettings"
-import { DEFAULT_CHAT_SETTINGS } from "../../../src/shared/ChatSettings"
-import { TelemetrySetting } from "../../../src/shared/TelemetrySetting"
+import { DEFAULT_BROWSER_SETTINGS } from "@shared/BrowserSettings"
+import { DEFAULT_CHAT_SETTINGS } from "@shared/ChatSettings"
+import { TelemetrySetting } from "@shared/TelemetrySetting"
 
 interface ExtensionStateContextType extends ExtensionState {
 	didHydrateState: boolean

webview-ui/src/context/FirebaseAuthContext.tsx

@@ -1,7 +1,7 @@
 import { User, getAuth, signInWithCustomToken, signOut } from "firebase/auth"
 import { initializeApp } from "firebase/app"
 import React, { createContext, useCallback, useContext, useEffect, useState } from "react"
-import { vscode } from "../utils/vscode"
+import { vscode } from "@/utils/vscode"
 
 // Firebase configuration from extension
 const firebaseConfig = {

webview-ui/src/main.tsx

@@ -1,6 +1,5 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-import { PostHogProvider } from "posthog-js/react"
 import "./index.css"
 import App from "./App.tsx"
 import "../../node_modules/@vscode/codicons/dist/codicon.css"

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

@@ -1,4 +1,4 @@
-import { mentionRegex } from "../../../src/shared/context-mentions"
+import { mentionRegex } from "@shared/context-mentions"
 import { Fzf } from "fzf"
 
 export function insertMention(text: string, position: number, value: string): { newValue: string; mentionIndex: number } {

webview-ui/src/utils/mcp.ts

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

webview-ui/src/utils/validate.ts

@@ -1,5 +1,5 @@
-import { ApiConfiguration, openRouterDefaultModelId } from "../../../src/shared/api"
-import { ModelInfo } from "../../../src/shared/api"
+import { ApiConfiguration, openRouterDefaultModelId, ModelInfo } from "@shared/api"
+
 export function validateApiConfiguration(apiConfiguration?: ApiConfiguration): string | undefined {
 	if (apiConfiguration) {
 		switch (apiConfiguration.apiProvider) {

webview-ui/src/utils/vscode.ts

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