+
Tokens:
@@ -275,83 +275,51 @@ const TaskHeader: React.FC = ({
{formatLargeNumber(tokensOut || 0)}
- {!isCostAvailable &&
}
+ {!isCostAvailable &&
}
-
- Context:
-
- {contextTokens
- ? `${formatLargeNumber(contextTokens)} (${contextPercentage}%)`
- : "-"}
-
-
+ {isTaskExpanded && contextWindow && (
+
+
+ )}
{shouldShowPromptCacheInfo && (cacheReads !== undefined || cacheWrites !== undefined) && (
-
+
Cache:
-
+
-
+
)}
+
{isCostAvailable && (
-
-
-
API Cost:
+
+
+ API Cost:
${totalCost?.toFixed(4)}
-
+
)}
)}
- {/* {apiProvider === "" && (
-
-
Credits Remaining:
-
- {formatPrice(Credits || 0)}
- {(Credits || 0) < 1 && (
- <>
- {" "}
-
- (get more?)
-
-
- )}
-
-
- )} */}
)
}
@@ -378,18 +346,44 @@ export const highlightMentions = (text?: string, withShadow = true) => {
})
}
-const ExportButton = () => (
-
vscode.postMessage({ type: "exportCurrentTask" })}
- style={
- {
- // marginBottom: "-2px",
- // marginRight: "-2.5px",
- }
- }>
- EXPORT
-
+const TaskActions = ({ item }: { item: HistoryItem | undefined }) => (
+
+ vscode.postMessage({ type: "exportCurrentTask" })}>
+
+ {item?.size && (
+ vscode.postMessage({ type: "deleteTaskWithId", text: item.id })}>
+
+ )}
+
+)
+
+const ContextWindowProgress = ({ contextWindow, contextTokens }: { contextWindow: number; contextTokens: number }) => (
+ <>
+
+ Context Window:
+
+
+
{formatLargeNumber(contextTokens)}
+
+
{formatLargeNumber(contextWindow)}
+
+
)
export default memo(TaskHeader)
diff --git a/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx b/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx
index b3e88013a8..aa52c2db88 100644
--- a/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx
+++ b/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx
@@ -9,16 +9,20 @@ import { Checkpoint } from "./schema"
type CheckpointMenuProps = {
ts: number
commitHash: string
- checkpoint?: Checkpoint
- currentCheckpointHash?: string
+ currentHash?: string
+ checkpoint: Checkpoint
}
-export const CheckpointMenu = ({ ts, commitHash, checkpoint, currentCheckpointHash }: CheckpointMenuProps) => {
+export const CheckpointMenu = ({ ts, commitHash, currentHash, checkpoint }: CheckpointMenuProps) => {
const [portalContainer, setPortalContainer] = useState
()
const [isOpen, setIsOpen] = useState(false)
const [isConfirming, setIsConfirming] = useState(false)
- const isCurrent = currentCheckpointHash === commitHash
+ const isCurrent = currentHash === commitHash
+ const isFirst = checkpoint.isFirst
+
+ const isDiffAvailable = !isFirst
+ const isRestoreAvailable = !isFirst || !isCurrent
const onCheckpointDiff = useCallback(() => {
vscode.postMessage({ type: "checkpointDiff", payload: { ts, commitHash, mode: "checkpoint" } })
@@ -45,69 +49,75 @@ export const CheckpointMenu = ({ ts, commitHash, checkpoint, currentCheckpointHa
return (
- {!checkpoint?.isFirst && (
+ {isDiffAvailable && (
)}
-
{
- setIsOpen(open)
- setIsConfirming(false)
- }}>
-
-
-
-
-
-
- {!isCurrent && (
-
-
- Restore Files
-
-
- Restores your project's files back to a snapshot taken at this point.
-
-
- )}
-
-
- {!isConfirming ? (
-
setIsConfirming(true)}>
- Restore Files & Task
+ {isRestoreAvailable && (
+ {
+ setIsOpen(open)
+ setIsConfirming(false)
+ }}>
+
+
+
+
+
+
+ {!isCurrent && (
+
+
+ Restore Files
- ) : (
- <>
-
-
-
-
setIsConfirming(false)}>
-
-
-
- )}
- {isConfirming ? (
-
This action cannot be undone.
- ) : (
- Restores your project's files back to a snapshot taken at this point and deletes
- all messages after this point.
+ Restores your project's files back to a snapshot taken at this point.
- )}
-
+
+
+ {!isConfirming ? (
+
setIsConfirming(true)}>
+ Restore Files & Task
+
+ ) : (
+ <>
+
+
+
+
setIsConfirming(false)}>
+
+
+
+ )}
+ {isConfirming ? (
+
+ This action cannot be undone.
+
+ ) : (
+
+ Restores your project's files back to a snapshot taken at this point and
+ deletes all messages after this point.
+
+ )}
+
+
-
-
-
+
+
+ )}
- currentCheckpointHash?: string
}
export const CheckpointSaved = ({ checkpoint, ...props }: CheckpointSavedProps) => {
- const isCurrent = props.currentCheckpointHash === props.commitHash
+ const isCurrent = props.currentHash === props.commitHash
const metadata = useMemo(() => {
if (!checkpoint) {
@@ -19,16 +21,23 @@ export const CheckpointSaved = ({ checkpoint, ...props }: CheckpointSavedProps)
}
const result = checkpointSchema.safeParse(checkpoint)
- return result.success ? result.data : undefined
+
+ if (!result.success || result.data.version < REQUIRED_VERSION) {
+ return undefined
+ }
+
+ return result.data
}, [checkpoint])
- const isFirst = !!metadata?.isFirst
+ if (!metadata) {
+ return null
+ }
return (
{isFirst ? "Initial Checkpoint" : "Checkpoint"}
+ {metadata.isFirst ? "Initial Checkpoint" : "Checkpoint"}
{isCurrent && Current }
diff --git a/webview-ui/src/components/chat/checkpoints/schema.ts b/webview-ui/src/components/chat/checkpoints/schema.ts
index 4acd32a6ab..7f097966b8 100644
--- a/webview-ui/src/components/chat/checkpoints/schema.ts
+++ b/webview-ui/src/components/chat/checkpoints/schema.ts
@@ -4,6 +4,8 @@ export const checkpointSchema = z.object({
isFirst: z.boolean(),
from: z.string(),
to: z.string(),
+ strategy: z.enum(["local", "shadow"]),
+ version: z.number(),
})
export type Checkpoint = z.infer
diff --git a/webview-ui/src/components/history/HistoryView.tsx b/webview-ui/src/components/history/HistoryView.tsx
index 6d251b67b2..38ca14df46 100644
--- a/webview-ui/src/components/history/HistoryView.tsx
+++ b/webview-ui/src/components/history/HistoryView.tsx
@@ -1,12 +1,15 @@
-import { VSCodeButton, VSCodeTextField, VSCodeRadioGroup, VSCodeRadio } from "@vscode/webview-ui-toolkit/react"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { vscode } from "../../utils/vscode"
-import { Virtuoso } from "react-virtuoso"
import React, { memo, useMemo, useState, useEffect } from "react"
import { Fzf } from "fzf"
+import prettyBytes from "pretty-bytes"
+import { Virtuoso } from "react-virtuoso"
+import { VSCodeButton, VSCodeTextField, VSCodeRadioGroup, VSCodeRadio } from "@vscode/webview-ui-toolkit/react"
+
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
import { formatLargeNumber } from "../../utils/format"
import { highlightFzfMatch } from "../../utils/highlight"
import { useCopyToClipboard } from "../../utils/clipboard"
+import { Button } from "../ui"
type HistoryViewProps = {
onDone: () => void
@@ -19,7 +22,6 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
const [searchQuery, setSearchQuery] = useState("")
const [sortOption, setSortOption] = useState("newest")
const [lastNonRelevantSort, setLastNonRelevantSort] = useState("newest")
- const { showCopyFeedback, copyWithFeedback } = useCopyToClipboard()
useEffect(() => {
if (searchQuery && sortOption !== "mostRelevant" && !lastNonRelevantSort) {
@@ -99,357 +101,329 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
}, [presentableTasks, searchQuery, fzf, sortOption])
return (
- <>
-
- {showCopyFeedback && Prompt Copied to Clipboard
}
+
-
-
History
- Done
-
-
-
- {
- const newValue = (e.target as HTMLInputElement)?.value
- setSearchQuery(newValue)
- if (newValue && !searchQuery && sortOption !== "mostRelevant") {
- setLastNonRelevantSort(sortOption)
- setSortOption("mostRelevant")
- }
- }}>
+ History
+ Done
+
+
+
+
{
+ const newValue = (e.target as HTMLInputElement)?.value
+ setSearchQuery(newValue)
+ if (newValue && !searchQuery && sortOption !== "mostRelevant") {
+ setLastNonRelevantSort(sortOption)
+ setSortOption("mostRelevant")
+ }
+ }}>
+
+ {searchQuery && (
- {searchQuery && (
- setSearchQuery("")}
- slot="end"
- style={{
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- height: "100%",
- }}
- />
- )}
-
- setSortOption((e.target as HTMLInputElement).value as SortOption)}>
- Newest
- Oldest
- Most Expensive
- Most Tokens
-
- Most Relevant
-
-
-
-
-
-
(
-
- )),
- }}
- itemContent={(index, item) => (
- setSearchQuery("")}
+ slot="end"
style={{
- cursor: "pointer",
- borderBottom:
- index < taskHistory.length - 1
- ? "1px solid var(--vscode-panel-border)"
- : "none",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ height: "100%",
}}
- onClick={() => handleHistorySelect(item.id)}>
+ />
+ )}
+
+ setSortOption((e.target as HTMLInputElement).value as SortOption)}>
+ Newest
+ Oldest
+ Most Expensive
+ Most Tokens
+
+ Most Relevant
+
+
+
+
+
+
(
+
+ )),
+ }}
+ itemContent={(index, item) => (
+ handleHistorySelect(item.id)}>
+
+
+ {formatDate(item.ts)}
+
+
+ {
+ e.stopPropagation()
+ handleDeleteHistoryItem(item.id)
+ }}>
+
+
+
+
+
-
- {formatDate(item.ts)}
-
-
- copyWithFeedback(item.task, e)}>
-
- {
- e.stopPropagation()
- handleDeleteHistoryItem(item.id)
- }}>
-
-
-
-
-
+
+ Tokens:
+
+
+
+
+
+
+ {!item.totalCost &&
}
+
+
+ {!!item.cacheWrites && (
+
+
+ Cache:
+
+
+
+
+
+
+ )}
+
+ {!!item.totalCost && (
+
-
+
- Tokens:
+ API Cost:
-
-
-
-
+ ${item.totalCost?.toFixed(4)}
- {!item.totalCost &&
}
-
-
- {!!item.cacheWrites && (
-
-
- Cache:
-
-
-
-
-
-
- )}
- {!!item.totalCost && (
-
-
-
- API Cost:
-
-
- ${item.totalCost?.toFixed(4)}
-
-
+
+
- )}
-
+
+ )}
- )}
- />
-
+ )}
+ />
-
+
+ )
+}
+
+const CopyButton = ({ itemTask }: { itemTask: string }) => {
+ const { showCopyFeedback, copyWithFeedback } = useCopyToClipboard()
+
+ return (
+
copyWithFeedback(itemTask, e)}>
+ {showCopyFeedback ?
)
}
const ExportButton = ({ itemId }: { itemId: string }) => (
-
{
e.stopPropagation()
vscode.postMessage({ type: "exportTaskWithId", text: itemId })
}}>
- EXPORT
-
+
+
)
export default memo(HistoryView)
diff --git a/webview-ui/src/components/history/__tests__/HistoryView.test.tsx b/webview-ui/src/components/history/__tests__/HistoryView.test.tsx
index d47c5e460b..7408b26878 100644
--- a/webview-ui/src/components/history/__tests__/HistoryView.test.tsx
+++ b/webview-ui/src/components/history/__tests__/HistoryView.test.tsx
@@ -181,9 +181,6 @@ describe("HistoryView", () => {
// Verify clipboard was called
expect(navigator.clipboard.writeText).toHaveBeenCalledWith("Test task 1")
- // Verify modal appears immediately after clipboard operation
- expect(screen.getByText("Prompt Copied to Clipboard")).toBeInTheDocument()
-
// Advance timer to trigger the setTimeout for modal disappearance
act(() => {
jest.advanceTimersByTime(2000)
@@ -239,7 +236,7 @@ describe("HistoryView", () => {
const taskContainer = screen.getByTestId("virtuoso-item-2")
fireEvent.mouseEnter(taskContainer)
- const exportButton = within(taskContainer).getByText("EXPORT")
+ const exportButton = within(taskContainer).getByTestId("export")
fireEvent.click(exportButton)
// Verify vscode message was sent
diff --git a/webview-ui/src/components/prompts/PromptsView.tsx b/webview-ui/src/components/prompts/PromptsView.tsx
index 8b46e488ae..51472d4cab 100644
--- a/webview-ui/src/components/prompts/PromptsView.tsx
+++ b/webview-ui/src/components/prompts/PromptsView.tsx
@@ -6,6 +6,8 @@ import {
VSCodeOption,
VSCodeTextField,
VSCodeCheckbox,
+ VSCodeRadioGroup,
+ VSCodeRadio,
} from "@vscode/webview-ui-toolkit/react"
import { useExtensionState } from "../../context/ExtensionStateContext"
import {
@@ -17,6 +19,7 @@ import {
ModeConfig,
GroupEntry,
} from "../../../../src/shared/modes"
+import { CustomModeSchema } from "../../../../src/core/config/CustomModesSchema"
import {
supportPrompt,
SupportPromptType,
@@ -30,6 +33,8 @@ import { vscode } from "../../utils/vscode"
// Get all available groups that should show in prompts view
const availableGroups = (Object.keys(TOOL_GROUPS) as ToolGroup[]).filter((group) => !TOOL_GROUPS[group].alwaysAvailable)
+type ModeSource = "global" | "project"
+
type PromptsViewProps = {
onDone: () => void
}
@@ -64,6 +69,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
const [selectedPromptContent, setSelectedPromptContent] = useState("")
const [selectedPromptTitle, setSelectedPromptTitle] = useState("")
const [isToolsEditMode, setIsToolsEditMode] = useState(false)
+ const [showConfigMenu, setShowConfigMenu] = useState(false)
const [isCreateModeDialogOpen, setIsCreateModeDialogOpen] = useState(false)
const [activeSupportTab, setActiveSupportTab] = useState
("ENHANCE")
@@ -88,10 +94,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
)
const updateCustomMode = useCallback((slug: string, modeConfig: ModeConfig) => {
+ const source = modeConfig.source || "global"
vscode.postMessage({
type: "updateCustomMode",
slug,
- modeConfig,
+ modeConfig: {
+ ...modeConfig,
+ source, // Ensure source is set
+ },
})
}, [])
@@ -146,15 +156,36 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
const [newModeRoleDefinition, setNewModeRoleDefinition] = useState("")
const [newModeCustomInstructions, setNewModeCustomInstructions] = useState("")
const [newModeGroups, setNewModeGroups] = useState(availableGroups)
+ const [newModeSource, setNewModeSource] = useState("global")
+
+ // Field-specific error states
+ const [nameError, setNameError] = useState("")
+ const [slugError, setSlugError] = useState("")
+ const [roleDefinitionError, setRoleDefinitionError] = useState("")
+ const [groupsError, setGroupsError] = useState("")
+
+ // Helper to reset form state
+ const resetFormState = useCallback(() => {
+ // Reset form fields
+ setNewModeName("")
+ setNewModeSlug("")
+ setNewModeGroups(availableGroups)
+ setNewModeRoleDefinition("")
+ setNewModeCustomInstructions("")
+ setNewModeSource("global")
+ // Reset error states
+ setNameError("")
+ setSlugError("")
+ setRoleDefinitionError("")
+ setGroupsError("")
+ }, [])
// Reset form fields when dialog opens
useEffect(() => {
if (isCreateModeDialogOpen) {
- setNewModeGroups(availableGroups)
- setNewModeRoleDefinition("")
- setNewModeCustomInstructions("")
+ resetFormState()
}
- }, [isCreateModeDialogOpen])
+ }, [isCreateModeDialogOpen, resetFormState])
// Helper function to generate a unique slug from a name
const generateSlug = useCallback((name: string, attempt = 0): string => {
@@ -175,25 +206,62 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
)
const handleCreateMode = useCallback(() => {
- if (!newModeName.trim() || !newModeSlug.trim()) return
+ // Clear previous errors
+ setNameError("")
+ setSlugError("")
+ setRoleDefinitionError("")
+ setGroupsError("")
+ const source = newModeSource
const newMode: ModeConfig = {
slug: newModeSlug,
name: newModeName,
- roleDefinition: newModeRoleDefinition.trim() || "",
+ roleDefinition: newModeRoleDefinition.trim(),
customInstructions: newModeCustomInstructions.trim() || undefined,
groups: newModeGroups,
+ source,
}
+
+ // Validate the mode against the schema
+ const result = CustomModeSchema.safeParse(newMode)
+ if (!result.success) {
+ // Map Zod errors to specific fields
+ result.error.errors.forEach((error) => {
+ const field = error.path[0] as string
+ const message = error.message
+
+ switch (field) {
+ case "name":
+ setNameError(message)
+ break
+ case "slug":
+ setSlugError(message)
+ break
+ case "roleDefinition":
+ setRoleDefinitionError(message)
+ break
+ case "groups":
+ setGroupsError(message)
+ break
+ }
+ })
+ return
+ }
+
updateCustomMode(newModeSlug, newMode)
switchMode(newModeSlug)
setIsCreateModeDialogOpen(false)
- setNewModeName("")
- setNewModeSlug("")
- setNewModeRoleDefinition("")
- setNewModeCustomInstructions("")
- setNewModeGroups(availableGroups)
+ resetFormState()
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [newModeName, newModeSlug, newModeRoleDefinition, newModeCustomInstructions, newModeGroups, updateCustomMode])
+ }, [
+ newModeName,
+ newModeSlug,
+ newModeRoleDefinition,
+ newModeCustomInstructions,
+ newModeGroups,
+ newModeSource,
+ updateCustomMode,
+ ])
const isNameOrSlugTaken = useCallback(
(name: string, slug: string) => {
@@ -233,15 +301,29 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
newGroups = oldGroups.filter((g) => getGroupName(g) !== group)
}
if (customMode) {
+ const source = customMode.source || "global"
updateCustomMode(customMode.slug, {
...customMode,
groups: newGroups,
+ source,
})
}
},
[updateCustomMode],
)
+ // Handle clicks outside the config menu
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (showConfigMenu) {
+ setShowConfigMenu(false)
+ }
+ }
+
+ document.addEventListener("click", handleClickOutside)
+ return () => document.removeEventListener("click", handleClickOutside)
+ }, [showConfigMenu])
+
useEffect(() => {
const handler = (event: MessageEvent) => {
const message = event.data
@@ -307,31 +389,16 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
}
return (
-
-
-
Prompts
+
+
+
Prompts
Done
-
-
-
-
Preferred Language
+
+
+
+
Preferred Language
{
@@ -341,15 +408,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
text: e.target.value,
})
}}
- style={{
- width: "100%",
- padding: "4px 8px",
- backgroundColor: "var(--vscode-input-background)",
- color: "var(--vscode-input-foreground)",
- border: "1px solid var(--vscode-input-border)",
- borderRadius: "2px",
- height: "28px",
- }}>
+ className="w-full px-2 py-1 h-7 bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded">
English
Arabic - العربية
Portuguese - Português (Brasil)
@@ -369,19 +428,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
Traditional Chinese - 繁體中文
Turkish - Türkçe
-
+
Select the language that Cline should use for communication.
-
Custom Instructions for All Modes
-
+
Custom Instructions for All Modes
+
These instructions apply to all modes. They provide a base set of behaviors that can be enhanced
by mode-specific instructions below.
@@ -399,23 +452,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
}}
rows={4}
resize="vertical"
- style={{ width: "100%" }}
+ className="w-full"
data-testid="global-custom-instructions-textarea"
/>
-
+
Instructions can also be loaded from{" "}
vscode.postMessage({
type: "openFile",
@@ -432,50 +475,74 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
-
-
-
Mode-Specific Prompts
-
+
+
e.stopPropagation()} className="flex justify-between items-center mb-3">
+
Modes
+
-
{
- vscode.postMessage({
- type: "openCustomModesSettings",
- })
- }}>
-
+
+
{
+ e.preventDefault()
+ e.stopPropagation()
+ setShowConfigMenu((prev) => !prev)
+ }}
+ onBlur={() => {
+ // Add slight delay to allow menu item clicks to register
+ setTimeout(() => setShowConfigMenu(false), 200)
+ }}>
+
+ {showConfigMenu && (
+
e.stopPropagation()}
+ onMouseDown={(e) => e.stopPropagation()}
+ className="absolute top-full right-0 w-[200px] mt-1 bg-vscode-editor-background border border-vscode-input-border rounded shadow-md z-[1000]">
+
{
+ e.preventDefault() // Prevent blur
+ vscode.postMessage({
+ type: "openCustomModesSettings",
+ })
+ setShowConfigMenu(false)
+ }}
+ onClick={(e) => e.preventDefault()}>
+ Edit Global Modes
+
+
{
+ e.preventDefault() // Prevent blur
+ vscode.postMessage({
+ type: "openFile",
+ text: "./.roomodes",
+ values: {
+ create: true,
+ content: JSON.stringify({ customModes: [] }, null, 2),
+ },
+ })
+ setShowConfigMenu(false)
+ }}
+ onClick={(e) => e.preventDefault()}>
+ Edit Project Modes (.roomodes)
+
+
+ )}
+
-
+
Hit the + to create a new custom mode, or just ask Roo in chat to create one for you!
-
+
{modes.map((modeConfig) => {
const isActive = mode === modeConfig.slug
return (
@@ -484,18 +551,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
data-testid={`${modeConfig.slug}-tab`}
data-active={isActive ? "true" : "false"}
onClick={() => handleModeSwitch(modeConfig)}
- style={{
- padding: "4px 8px",
- border: "none",
- background: isActive ? "var(--vscode-button-background)" : "none",
- color: isActive
- ? "var(--vscode-button-foreground)"
- : "var(--vscode-foreground)",
- cursor: "pointer",
- opacity: isActive ? 1 : 0.8,
- borderRadius: "3px",
- fontWeight: "bold",
- }}>
+ className={`px-2 py-1 border-none rounded cursor-pointer font-bold ${
+ isActive
+ ? "bg-vscode-button-background text-vscode-button-foreground opacity-100"
+ : "bg-transparent text-vscode-foreground opacity-80"
+ }`}>
{modeConfig.name}
)
@@ -506,10 +566,10 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
{/* Only show name and delete for custom modes */}
{mode && findModeBySlug(mode, customModes) && (
-
-
-
Name
-
+
+
+
Name
+
) => {
@@ -521,10 +581,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
updateCustomMode(mode, {
...customMode,
name: target.value,
+ source: customMode.source || "global",
})
}
}}
- style={{ width: "100%" }}
+ className="w-full"
/>
{
)}
-
-
Role Definition
+
+
Role Definition
{!findModeBySlug(mode, customModes) && (
{
)}
-
+
Define Roo's expertise and personality for this mode. This description shapes how Roo
presents itself and approaches tasks.
@@ -590,6 +640,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
updateCustomMode(mode, {
...customMode,
roleDefinition: value.trim() || "",
+ source: customMode.source || "global",
})
} else {
// For built-in modes, update the prompts
@@ -618,34 +669,23 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
text: value,
})
}}
- style={{ width: "100%" }}>
+ className="w-full">
{(listApiConfigMeta || []).map((config) => (
{config.name}
))}
-
+
Select which API configuration to use for this mode
{/* Show tools for all modes */}
-
-
-
Available Tools
+
+
+
Available Tools
{findModeBySlug(mode, customModes) && (
{
)}
{!findModeBySlug(mode, customModes) && (
-
+
Tools for built-in modes cannot be modified
)}
{isToolsEditMode && findModeBySlug(mode, customModes) ? (
-
+
{availableGroups.map((group) => {
const currentMode = getCurrentMode()
const isCustomMode = findModeBySlug(mode, customModes)
@@ -689,12 +719,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
disabled={!isCustomMode}>
{GROUP_DISPLAY_NAMES[group]}
{group === "edit" && (
-
+
Allowed files:{" "}
{(() => {
const currentMode = getCurrentMode()
@@ -717,13 +742,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
})}
) : (
-
+
{(() => {
const currentMode = getCurrentMode()
const enabledGroups = currentMode?.groups || []
@@ -754,7 +773,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
alignItems: "center",
marginBottom: "4px",
}}>
-
Mode-specific Custom Instructions
+
Mode-specific Custom Instructions (optional)
{!findModeBySlug(mode, customModes) && (
{
updateCustomMode(mode, {
...customMode,
customInstructions: value.trim() || undefined,
+ source: customMode.source || "global",
})
} else {
// For built-in modes, update the prompts
@@ -1095,6 +1115,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
}}
style={{ width: "100%" }}
/>
+ {nameError && (
+ {nameError}
+ )}
Slug
@@ -1117,7 +1140,43 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
The slug is used in URLs and file names. It should be lowercase and contain only
letters, numbers, and hyphens.
+ {slugError && (
+
{slugError}
+ )}
+
+
Save Location
+
+ Choose where to save this mode. Project-specific modes take precedence over global
+ modes.
+
+
) => {
+ const target = ((e as CustomEvent)?.detail?.target ||
+ (e.target as HTMLInputElement)) as HTMLInputElement
+ setNewModeSource(target.value as ModeSource)
+ }}>
+
+ Global
+
+ Available in all workspaces
+
+
+
+ Project-specific (.roomodes)
+
+ Only available in this workspace, takes precedence over global
+
+
+
+
+
Role Definition
{
resize="vertical"
style={{ width: "100%" }}
/>
+ {roleDefinitionError && (
+
+ {roleDefinitionError}
+
+ )}
Available Tools
@@ -1177,9 +1241,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
))}
+ {groupsError && (
+
{groupsError}
+ )}
-
Custom Instructions
+
+ Custom Instructions (optional)
+
{
backgroundColor: "var(--vscode-editor-background)",
}}>
setIsCreateModeDialogOpen(false)}>Cancel
-
+
Create Mode
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index 307ac250da..b866561adf 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/webview-ui/src/components/settings/SettingsView.tsx
@@ -63,6 +63,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
setExperimentEnabled,
alwaysAllowModeSwitch,
setAlwaysAllowModeSwitch,
+ maxOpenTabsContext,
+ setMaxOpenTabsContext,
} = useExtensionState()
const [apiErrorMessage, setApiErrorMessage] = useState
(undefined)
const [modelIdErrorMessage, setModelIdErrorMessage] = useState(undefined)
@@ -104,6 +106,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
vscode.postMessage({ type: "alwaysApproveResubmit", bool: alwaysApproveResubmit })
vscode.postMessage({ type: "requestDelaySeconds", value: requestDelaySeconds })
vscode.postMessage({ type: "rateLimitSeconds", value: rateLimitSeconds })
+ vscode.postMessage({ type: "maxOpenTabsContext", value: maxOpenTabsContext })
vscode.postMessage({ type: "currentApiConfigName", text: currentApiConfigName })
vscode.postMessage({
type: "upsertApiConfiguration",
@@ -626,6 +629,28 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
+
+
+
Open tabs context limit
+
+ {maxOpenTabsContext ?? 20}
+
+
+
+ Maximum number of VSCode open tabs to include in context. Higher values provide more context
+ but increase token usage.
+
+
+
(event: any) => void
customModes: ModeConfig[]
setCustomModes: (value: ModeConfig[]) => void
+ setMaxOpenTabsContext: (value: number) => void
}
export const ExtensionStateContext = createContext(undefined)
@@ -117,6 +118,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
enhancementApiConfigId: "",
autoApprovalEnabled: false,
customModes: [],
+ maxOpenTabsContext: 20,
})
const [didHydrateState, setDidHydrateState] = useState(false)
@@ -350,6 +352,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
setAutoApprovalEnabled: (value) => setState((prevState) => ({ ...prevState, autoApprovalEnabled: value })),
handleInputChange,
setCustomModes: (value) => setState((prevState) => ({ ...prevState, customModes: value })),
+ setMaxOpenTabsContext: (value) => setState((prevState) => ({ ...prevState, maxOpenTabsContext: value })),
}
return {children}
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index d4ccf2f233..4e36246063 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -83,6 +83,8 @@
--color-vscode-notifications-foreground: var(--vscode-notifications-foreground);
--color-vscode-notifications-background: var(--vscode-notifications-background);
--color-vscode-notifications-border: var(--vscode-notifications-border);
+ --color-vscode-descriptionForeground: var(--vscode-descriptionForeground);
+ --color-vscode-errorForeground: var(--vscode-errorForeground);
}
@layer base {