Add option to delete source code when removing component

Author: HumbleBee14

extensions/roopik-roo/src/api/providers/human-relay.ts

@@ -496,7 +496,7 @@ export const component_remove: OpenAI.Chat.ChatCompletionTool = {
 	function: {
 		name: "component_remove",
 		description:
-			"[Roopik IDE] Remove a component from its canvas. This stops the build watcher but does not delete the source files.",
+			"[Roopik IDE] Remove component from canvas. Set deleteSourceCode=true to automatically delete source files - do NOT use terminal commands to delete files manually.",
 		strict: true,
 		parameters: {
 			type: "object",
@@ -505,6 +505,10 @@ export const component_remove: OpenAI.Chat.ChatCompletionTool = {
 					type: "string",
 					description: "The component's unique ID (from component_list)",
 				},
+				deleteSourceCode: {
+					type: "boolean",
+					description: "If true, also delete the source code files from disk (default: false)",
+				},
 			},
 			required: ["componentId"],
 			additionalProperties: false,

extensions/roopik-roo/src/core/prompts/tools/native-tools/roopik.ts

@@ -323,12 +323,14 @@ Usage:
 
 export function getComponentRemoveDescription(): string {
 	return `## component_remove
-Description: [Roopik IDE] Remove a component from its canvas. This stops the build watcher but does not delete the source files.
+Description: [Roopik IDE] Remove a component from its canvas. Set deleteSourceCode=true to automatically delete source files from disk - DO NOT manually delete files with terminal commands.
 Parameters:
 - componentId: (required) The component's unique ID (from component_list)
+- deleteSourceCode: (optional) Set to true to delete source code from disk (default: false). When true, both UI removal and file deletion are handled automatically internally.
 Usage:
 <component_remove>
 <componentId>component-id</componentId>
+<deleteSourceCode>true</deleteSourceCode>
 </component_remove>`
 }
 
@@ -440,7 +442,7 @@ These tools integrate with Roopik IDE's browser preview, canvas, and component f
 2. \`component_add\` - Add component folder to canvas (Once you write a component code, you have to pass the absolute path of the component file to the canvas add tool which shows the live preview of the component in the canvas UI)
 3. \`component_list\` - See all components on canvas (this will show the list of all components added to the canvas to you if you need to see the list of components added to the canvas or get info about a specific component use \`component_get_info\`)
 4. \`component_rebuild\` - Force rebuild after changes (use this tool if you make changes to the component code and want to rebuild the component)
-5. \`component_remove\` - Remove component from canvas (IMPORTANT: This only removes the component from the canvas UI visually, it does NOT delete the code files. To fully remove a component: first call \`component_remove\` to remove from canvas, then delete the component folder for a clean removal)
+5. \`component_remove\` - Remove component (set deleteSourceCode=true to delete files automatically - never use terminal commands to delete files)
 6. User views live preview in canvas UI
 - **IMPORTANT**: DO NOT use browser_open or browser_screenshot for canvas components. The canvas UI shows live preview automatically after component_add. Browser tools are only for projects with dev servers.
 

extensions/roopik-roo/src/core/prompts/tools/roopik/roopik-tools.ts

@@ -408,7 +408,8 @@ async function handleRemoveComponent(task: Task, block: ToolUse, callbacks: Tool
 	if (!componentId) {
 		return { success: false, error: "Missing required parameter: componentId" }
 	}
-	return roopikClient.removeComponent(componentId)
+	const deleteSourceCode = block.params.deleteSourceCode === true || block.params.deleteSourceCode === "true"
+	return roopikClient.removeComponent(componentId, deleteSourceCode)
 }
 
 async function handleGetComponentInfo(task: Task, block: ToolUse, callbacks: ToolCallbacks): Promise<RoopikToolResult> {

extensions/roopik-roo/src/core/tools/roopik/RoopikToolHandler.ts

@@ -268,6 +268,7 @@ export interface AddComponentsData {
  */
 export interface RemoveComponentData {
 	componentId: string
+	deletedSourceCode: boolean
 }
 
 /**
@@ -558,10 +559,13 @@ export class RoopikToolClient {
 
 	/**
 	 * Remove a component from its canvas
+	 * @param componentId The component's unique ID
+	 * @param deleteSourceCode If true, also delete the source code files from disk (default: false)
 	 */
-	async removeComponent(componentId: string): Promise<RoopikToolResult<RemoveComponentData>> {
+	async removeComponent(componentId: string, deleteSourceCode?: boolean): Promise<RoopikToolResult<RemoveComponentData>> {
 		return this.executeCommand<RemoveComponentData>("roopik.tools.removeComponent", {
 			componentId,
+			deleteSourceCode,
 		})
 	}
 

extensions/roopik-roo/src/services/roopik/RoopikToolClient.ts

@@ -94,6 +94,7 @@ export const toolParamNames = [
 	"entryFile", // component_add
 	"framework", // component_add
 	"componentId", // component_remove, component_get_info, component_rebuild
+	"deleteSourceCode", // component_remove
 	"components", // component_add_batch
 	// browser_action parameters
 	"key", // browser_action (press)
@@ -404,17 +405,17 @@ export const TOOL_ALIASES: Record<string, ToolName> = {
 export type DiffResult =
 	| { success: true; content: string; failParts?: DiffResult[] }
 	| ({
-			success: false
-			error?: string
-			details?: {
-				similarity?: number
-				threshold?: number
-				matchedRange?: { start: number; end: number }
-				searchContent?: string
-				bestMatch?: string
-			}
-			failParts?: DiffResult[]
-	  } & ({ error: string } | { failParts: DiffResult[] }))
+		success: false
+		error?: string
+		details?: {
+			similarity?: number
+			threshold?: number
+			matchedRange?: { start: number; end: number }
+			searchContent?: string
+			bestMatch?: string
+		}
+		failParts?: DiffResult[]
+	} & ({ error: string } | { failParts: DiffResult[] }))
 
 export interface DiffItem {
 	content: string

extensions/roopik-roo/src/shared/tools.ts

@@ -407,7 +407,7 @@ export class CanvasPanel implements vscode.Disposable {
 					break;
 
 				case 'deleteComponent':
-					await this.handleDeleteComponent(message.payload as { componentId: string });
+					await this.handleDeleteComponent(message.payload as { componentId: string; deleteSourceCode?: boolean });
 					break;
 
 				case 'saveCanvas':
@@ -677,9 +677,8 @@ export class CanvasPanel implements vscode.Disposable {
 	/**
 	 * Handle delete component request from webview
 	 */
-	private async handleDeleteComponent(payload: { componentId: string }): Promise<void> {
-		this.logger.info(`Deleting component: ${payload.componentId}`);
-		await this.manager.deleteComponent(payload.componentId);
+	private async handleDeleteComponent(payload: { componentId: string; deleteSourceCode?: boolean }): Promise<void> {
+		await this.manager.deleteComponent(payload.componentId, payload.deleteSourceCode);
 		// onComponentDeleted event will be routed back
 	}
 

extensions/roopik/src/canvasPanel.ts

@@ -427,13 +427,13 @@ export class RoopikExtensionManager implements vscode.Disposable {
 	/**
 	 * Delete a component via Core's ComponentService
 	 */
-	public async deleteComponent(componentId: string): Promise<void> {
-		this.logger.info(`Deleting component: ${componentId}`);
+	public async deleteComponent(componentId: string, deleteSourceCode?: boolean): Promise<void> {
+		const deleteSourceCodeValue = deleteSourceCode ?? false;
 
 		// TODO: Call Core via IPC
-		// return this.componentClient.deleteComponent(componentId);
+		// return this.componentClient.deleteComponent(componentId, deleteSourceCode);
 
-		await vscode.commands.executeCommand('roopik.core.deleteComponent', componentId);
+		await vscode.commands.executeCommand('roopik.core.deleteComponent', componentId, deleteSourceCodeValue);
 	}
 
 	/**

extensions/roopik/src/roopikExtensionManager.ts

@@ -35,13 +35,17 @@ export interface InfiniteCanvasProps {
 	onSandboxClick: (id: string) => void;
 	onSandboxDoubleClick: (id: string) => void;
 	onSandboxUpdate: (id: string, updates: Partial<Sandbox>) => void;
-	onSandboxDelete: (id: string) => void;
+	onSandboxDelete: (id: string, deleteSourceCode?: boolean) => void;
 	/** Called when user clicks code icon to view sandbox code */
 	onSandboxShowCode: (id: string) => void;
 	/** Called when user clicks reload icon to force rebuild */
 	onSandboxRebuild: (id: string) => void;
 	/** Called when clicking on canvas background (not on a sandbox) */
 	onCanvasBackgroundClick?: () => void;
+	/** Delete source code preference from parent */
+	deleteSourceCodePref?: boolean;
+	/** Callback when delete source code preference changes */
+	onDeleteSourceCodePrefChange?: (value: boolean) => void;
 }
 
 // ============================================================
@@ -64,10 +68,12 @@ interface SandboxLayerProps {
 	onSandboxDragStart: (e: React.MouseEvent, sandboxId: string) => void;
 	onSandboxClick: (id: string) => void;
 	onSandboxDoubleClick: (id: string) => void;
-	onSandboxDelete: (id: string) => void;
+	onSandboxDelete: (id: string, deleteSourceCode?: boolean) => void;
 	onSandboxShowCode: (id: string) => void;
 	onSandboxRebuild: (id: string) => void;
 	onSandboxUpdate: (id: string, updates: Partial<Sandbox>) => void;
+	deleteSourceCodePref?: boolean;
+	onDeleteSourceCodePrefChange?: (value: boolean) => void;
 }
 
 /**
@@ -90,6 +96,8 @@ function SandboxLayer({
 	onSandboxShowCode,
 	onSandboxRebuild,
 	onSandboxUpdate,
+	deleteSourceCodePref,
+	onDeleteSourceCodePrefChange
 }: SandboxLayerProps) {
 	// Debug log for inspect mode
 
@@ -122,10 +130,12 @@ function SandboxLayer({
 						onMouseDown={(e) => onSandboxDragStart(e, sandbox.id)}
 						onClick={() => onSandboxClick(sandbox.id)}
 						onDoubleClick={() => onSandboxDoubleClick(sandbox.id)}
-						onDelete={() => onSandboxDelete(sandbox.id)}
+						onDelete={(deleteSourceCode) => onSandboxDelete(sandbox.id, deleteSourceCode)}
 						onShowCode={() => onSandboxShowCode(sandbox.id)}
 						onRebuild={() => onSandboxRebuild(sandbox.id)}
 						onDeviceModeChange={(mode) => onSandboxUpdate(sandbox.id, { deviceMode: mode })}
+						deleteSourceCodePref={deleteSourceCodePref}
+						onDeleteSourceCodePrefChange={onDeleteSourceCodePrefChange}
 					/>
 				);
 			})}
@@ -167,6 +177,8 @@ export function InfiniteCanvas({
 	onSandboxShowCode,
 	onSandboxRebuild,
 	onCanvasBackgroundClick,
+	deleteSourceCodePref,
+	onDeleteSourceCodePrefChange,
 }: InfiniteCanvasProps) {
 	const canvasRef = useRef<HTMLDivElement>(null);
 
@@ -237,6 +249,8 @@ export function InfiniteCanvas({
 					onSandboxShowCode={onSandboxShowCode}
 					onSandboxRebuild={onSandboxRebuild}
 					onSandboxUpdate={onSandboxUpdate}
+					deleteSourceCodePref={deleteSourceCodePref}
+					onDeleteSourceCodePrefChange={onDeleteSourceCodePrefChange}
 				/>
 			</div>
 		</div>