), +})); + +vi.mock("@/webview/components/ui/hover-card", () => ({ + HoverCard: vi.fn(({ children }) =>

{children}

), + HoverCardContent: vi.fn(({ children }) =>

{children}

), + HoverCardTrigger: vi.fn(({ children }) =>

{children}

), +})); + +vi.mock("@/webview/components/ui/button", () => ({ + Button: vi.fn(({ children, onClick }) => ( + + )), +})); + +vi.mock("@/webview/components/ui/input-group", () => ({ + InputGroup: vi.fn(({ children }) =>

{children}

), + InputGroupAddon: vi.fn(({ children }) =>

{children}

), + InputGroupButton: vi.fn(({ children, onClick, title, disabled }) => ( + + )), + InputGroupTextarea: vi.fn(({ children, ...props }) => ( + + )), + InputGroupText: vi.fn(({ children }) => {children}), +})); + +vi.mock("@/webview/components/ui/field", () => ({ + Field: vi.fn(({ children }) =>

{children}

), + FieldGroup: vi.fn(({ children }) =>

{children}

), + FieldDescription: vi.fn(({ children }) =>

{children}

), + FieldSet: vi.fn(({ children }) =>

{children}

), +})); + +vi.mock("@/webview/components/ui/spinner", () => ({ + Spinner: vi.fn(({ className }) => ), +})); + +vi.mock("@/webview/components/ui/separator", () => ({ + Separator: vi.fn(() =>

), +})); + +vi.mock("@/webview/components/ui/dropdown-menu", () => ({ + DropdownMenu: vi.fn(({ children }) =>

{children}

), + DropdownMenuTrigger: vi.fn(({ children }) =>

{children}

), + DropdownMenuContent: vi.fn(({ children }) =>

{children}

), + DropdownMenuItem: vi.fn(({ children }) =>

{children}

), + DropdownMenuGroup: vi.fn(({ children }) =>

{children}

), + DropdownMenuLabel: vi.fn(({ children }) =>

{children}

), + DropdownMenuRadioGroup: vi.fn(({ children }) =>

{children}

), + DropdownMenuRadioItem: vi.fn(({ children }) =>

{children}

), +})); + +vi.mock("@/webview/components/ui/item", () => ({ + Item: vi.fn(({ children }) =>

{children}

), + ItemContent: vi.fn(({ children }) =>

{children}

), + ItemDescription: vi.fn(({ children }) =>

{children}

), + ItemMedia: vi.fn(({ children }) =>

{children}

), + ItemTitle: vi.fn(({ children }) =>

{children}

), +})); + +vi.mock("@/webview/components/ui/scroll-area", () => ({ + ScrollArea: vi.fn(({ children }) =>

{children}

), +})); + +vi.mock("@/webview/components/ui/popover", () => ({ + Popover: vi.fn(({ children }) =>

{children}

), + PopoverTrigger: vi.fn(({ children }) =>

{children}

), + PopoverContent: vi.fn(({ children }) =>

{children}

), +})); + +vi.mock("@/webview/components/ui/tooltip", () => ({ + Tooltip: vi.fn(({ children }) =>

{children}

), + TooltipTrigger: vi.fn(({ children }) =>

{children}

), + TooltipContent: vi.fn(({ children }) =>

{children}

), +})); + +vi.mock("@/webview/components/ui/switch", () => ({ + Switch: vi.fn(({ checked, onCheckedChange, ...props }) => ( + onCheckedChange?.(e.target.checked)} + {...props} + /> + )), +})); + +vi.mock("@/webview/components/PromptAttachments", () => ({ + PromptAttachments: vi.fn(({ attachments }) => ( +

{attachments.length} attachments

+ )), + usePromptAttachments: vi.fn(() => ({ + attachments: [], + handlePaste: vi.fn(), + removeAttachment: vi.fn(), + clearAttachments: vi.fn(), + getImageUrls: vi.fn(() => []), + })), +})); + +vi.mock("@/webview/lib/utils", () => ({ + cn: vi.fn((...args: unknown[]) => args.filter(Boolean).join(" ")), +})); + +vi.mock("lucide-react", () => ({ + ArrowUp: vi.fn(() => ), + Square: vi.fn(() => ), + StopCircle: vi.fn(() => ), + ChevronDown: vi.fn(() => ), + Send: vi.fn(() => ), + Reply: vi.fn(() => ), + FileCodeIcon: vi.fn(() => ), + Siren: vi.fn(() => ), + GraduationCap: vi.fn(() => ), + X: vi.fn(() => ), + AlertCircle: vi.fn(() => ), + CheckCircle: vi.fn(() => ), + Loader2: vi.fn(() => ), + Loader2Icon: vi.fn(() => ), + Settings: vi.fn(() => ), + Info: vi.fn(() => ), + Hand: vi.fn(() => ), + SquareChartGantt: vi.fn(() => ), +})); + +const mockOnSendPrompt = + vi.fn< + ( + prompt: string, + skills?: SkillInfo[], + images?: string[], + options?: { permissions?: unknown[]; alwaysAllows?: string[] } + ) => void + >(); +const mockOnInterrupt = vi.fn<() => void>(); +const mockOnSelectSkills = vi.fn<(skills: SkillInfo[]) => void>(); +const mockOnClearEditingMessage = vi.fn<() => void>(); + +const defaultProps: InputPromptProps = { + loading: false, + selectedSkills: [] as SkillInfo[], + availableSkills: [] as SkillInfo[], + pendingPermissionReply: null, + tokenTelemetry: { + model: "test", + thinkingEnabled: false, + reasoningEffort: "low", + activeTokens: 0, + compactPromptTokenThreshold: 100000, + usage: null, + }, + activeEditor: null, + editingMessage: null, + messages: [], + onSendPrompt: mockOnSendPrompt, + onInterrupt: mockOnInterrupt, + onSelectSkills: mockOnSelectSkills, + onClearEditingMessage: mockOnClearEditingMessage, +}; + +describe("InputPrompt", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + describe("handleSend", () => { + it("calls onSendPrompt when sending a message", async () => { + render(); + const textarea = screen.getByRole("textbox"); + fireEvent.change(textarea, { target: { value: "Hello" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + expect(mockOnSendPrompt).toHaveBeenCalledWith("Hello", [], [], { planMode: false }); + }); + + it("does not send empty message", () => { + render(); + const textarea = screen.getByRole("textbox"); + fireEvent.keyDown(textarea, { key: "Enter" }); + expect(mockOnSendPrompt).not.toHaveBeenCalled(); + }); + + it("trims whitespace before sending", async () => { + render(); + const textarea = screen.getByRole("textbox"); + fireEvent.change(textarea, { target: { value: " Hello " } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + expect(mockOnSendPrompt).toHaveBeenCalledWith("Hello", [], [], { planMode: false }); + }); + + it("does not send while loading", () => { + render(); + const textarea = screen.getByRole("textbox"); + fireEvent.change(textarea, { target: { value: "Hello" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + expect(mockOnSendPrompt).not.toHaveBeenCalled(); + }); + }); + + describe("Keyboard navigation", () => { + it("does not send on Shift+Enter", () => { + render(); + const textarea = screen.getByRole("textbox"); + fireEvent.change(textarea, { target: { value: "Hello" } }); + fireEvent.keyDown(textarea, { key: "Enter", shiftKey: true }); + expect(mockOnSendPrompt).not.toHaveBeenCalled(); + }); + + it("does not send on other keys", () => { + render(); + const textarea = screen.getByRole("textbox"); + fireEvent.change(textarea, { target: { value: "Hello" } }); + fireEvent.keyDown(textarea, { key: "A" }); + expect(mockOnSendPrompt).not.toHaveBeenCalled(); + }); + }); + + describe("History navigation", () => { + it("adds sent messages to history", async () => { + render(); + const textarea = screen.getByRole("textbox"); + + fireEvent.change(textarea, { target: { value: "First message" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + expect(mockOnSendPrompt).toHaveBeenCalledWith("First message", [], [], { planMode: false }); + + fireEvent.change(textarea, { target: { value: "Second message" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + expect(mockOnSendPrompt).toHaveBeenCalledWith("Second message", [], [], { planMode: false }); + }); + + it("navigates to previous history with ArrowUp when at start", async () => { + render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + // Add two messages to history + fireEvent.change(textarea, { target: { value: "First message" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + fireEvent.change(textarea, { target: { value: "Second message" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + + // Clear and navigate with ArrowUp + fireEvent.change(textarea, { target: { value: "" } }); + // Simulate cursor at start (selectionStart === 0) + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + + // Should show "Second message" (most recent) + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("Second message"); + }); + }); + + it("navigates through history with multiple ArrowUp presses", async () => { + render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + // Add three messages to history + fireEvent.change(textarea, { target: { value: "First" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + fireEvent.change(textarea, { target: { value: "Second" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + fireEvent.change(textarea, { target: { value: "Third" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + + // Navigate with ArrowUp twice + fireEvent.change(textarea, { target: { value: "" } }); + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("Third"); + }); + + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("Second"); + }); + }); + + it("navigates to next history with ArrowDown", async () => { + render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + // Add messages to history + fireEvent.change(textarea, { target: { value: "First" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + fireEvent.change(textarea, { target: { value: "Second" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + fireEvent.change(textarea, { target: { value: "Third" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + + // Navigate to history - shows most recent + fireEvent.change(textarea, { target: { value: "" } }); + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("Third"); + }); + + // ArrowUp again - goes to older + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("Second"); + }); + + // ArrowDown - goes back to newer + fireEvent.keyDown(textarea, { key: "ArrowDown" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("Third"); + }); + + // ArrowDown again - exits and restores draft (empty) + fireEvent.keyDown(textarea, { key: "ArrowDown" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe(""); + }); + }); + + it("restores draft when navigating past the end of history", async () => { + render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + // Add messages to history + fireEvent.change(textarea, { target: { value: "First" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + fireEvent.change(textarea, { target: { value: "Second" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + + // Navigate to history (entering with empty value preserves no draft) + fireEvent.change(textarea, { target: { value: "" } }); + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("Second"); + }); + + // Navigate back with ArrowDown (goes forward to end of history) + fireEvent.keyDown(textarea, { key: "ArrowDown" }); + await waitFor(() => { + // Reached end of history, restores empty draft + expect((textarea as HTMLTextAreaElement).value).toBe(""); + }); + }); + + it("exits history browsing when typing", async () => { + render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + // Add message to history + fireEvent.change(textarea, { target: { value: "History message" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + + // Navigate to history + fireEvent.change(textarea, { target: { value: "" } }); + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("History message"); + }); + + // Type something - should exit history browsing + fireEvent.change(textarea, { target: { value: "New input" } }); + + // Next ArrowUp should start from beginning, not from history position + fireEvent.change(textarea, { target: { value: "" } }); + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("History message"); + }); + }); + + it("exits history browsing when pressing non-arrow keys", async () => { + render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + // Add message to history + fireEvent.change(textarea, { target: { value: "History message" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + + // Navigate to history + fireEvent.change(textarea, { target: { value: "" } }); + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("History message"); + }); + + // Press Escape - should exit history browsing but not change value + fireEvent.keyDown(textarea, { key: "Escape" }); + expect((textarea as HTMLTextAreaElement).value).toBe("History message"); + }); + + it("does not navigate history when no history exists", () => { + render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + fireEvent.change(textarea, { target: { value: "" } }); + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + + // Value should remain empty + expect((textarea as HTMLTextAreaElement).value).toBe(""); + }); + + it("does not navigate history when caret is not at start/end", async () => { + render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + // Add message to history + fireEvent.change(textarea, { target: { value: "History message" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + + // Type content with caret in the middle + fireEvent.change(textarea, { target: { value: "Hello World" } }); + // Set cursor to middle (after "Hello") + textarea.setSelectionRange(5, 5); + + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + + // Value should remain unchanged since caret is not at start + expect((textarea as HTMLTextAreaElement).value).toBe("Hello World"); + }); + }); + + describe("Loading history from messages", () => { + it("loads user messages from messages prop into history", async () => { + const messages: SessionMessage[] = [ + { role: "user", content: "First message from history" }, + { role: "assistant", content: "Assistant response" }, + { role: "user", content: "Second message from history" }, + ]; + render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + // Navigate to history + fireEvent.change(textarea, { target: { value: "" } }); + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("Second message from history"); + }); + + // Navigate to older message + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("First message from history"); + }); + }); + + it("clears history when messages is empty", async () => { + const { rerender } = render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + // Add a message first + fireEvent.change(textarea, { target: { value: "New message" } }); + fireEvent.keyDown(textarea, { key: "Enter" }); + + // Rerender with empty messages + rerender(); + + // Try to navigate history - should not work since history is empty + fireEvent.change(textarea, { target: { value: "" } }); + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + + // Value should remain empty + expect((textarea as HTMLTextAreaElement).value).toBe(""); + }); + + it("ignores non-user messages when building history", async () => { + const messages: SessionMessage[] = [ + { role: "user", content: "User message" }, + { role: "assistant", content: "Should be ignored" }, + { role: "tool", content: "Should also be ignored" }, + { role: "system", content: "Ignored" }, + ]; + render(); + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + + // Navigate to history + fireEvent.change(textarea, { target: { value: "" } }); + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + + await waitFor(() => { + expect((textarea as HTMLTextAreaElement).value).toBe("User message"); + }); + + // Second ArrowUp should stay at the same message (already at oldest) + fireEvent.keyDown(textarea, { key: "ArrowUp" }); + expect((textarea as HTMLTextAreaElement).value).toBe("User message"); + }); + }); + + describe("Loading state", () => { + it("renders interrupt button when loading", () => { + render(); + expect(screen.getByTitle("Stop")).toBeInTheDocument(); + }); + + it("calls onInterrupt when interrupt button clicked", () => { + render(); + const button = screen.getByTitle("Stop"); + fireEvent.click(button); + expect(mockOnInterrupt).toHaveBeenCalled(); + }); + }); + + describe("Skills", () => { + it("renders skills panel", () => { + render(); + expect(screen.getByTestId("skills-panel")).toBeInTheDocument(); + }); + + it("passes selectedSkills to onSelectSkills", () => { + const skills = [{ id: "skill1", name: "TestSkill" }]; + render(); + // Skills panel should be rendered with skills + expect(screen.getByTestId("skills-panel")).toBeInTheDocument(); + }); + }); + + describe("Context meter", () => { + it("renders context meter", () => { + render(); + expect(screen.getByTestId("context-meter")).toBeInTheDocument(); + }); + }); + + describe("Hover card", () => { + it("renders hover card when activeEditor is null", () => { + render(); + // HoverCard may or may not be rendered based on activeEditor + expect(screen.getByTestId("field-group")).toBeInTheDocument(); + }); + + it("renders hover card when activeEditor is provided", () => { + render( + + ); + expect(screen.getByTestId("hover-card")).toBeInTheDocument(); + }); + }); + + describe("Editing message", () => { + it("restores text when editingMessage changes", () => { + const { rerender } = render(); + + expect((screen.getByRole("textbox") as HTMLTextAreaElement).value).toBe(""); + + rerender( + + ); + + expect((screen.getByRole("textbox") as HTMLTextAreaElement).value).toBe("Editing this message"); + }); + + it("calls onClearEditingMessage when sending while editing", async () => { + const { container } = render( + + ); + + // Wait for the editing message to be processed + await waitFor(() => { + const textarea = screen.getByRole("textbox") as HTMLTextAreaElement; + expect(textarea.value).toBe("Editing this message"); + }); + + // Click send button + const sendButton = container.querySelector("button[title='Send']"); + if (sendButton) { + fireEvent.click(sendButton); + } + + expect(mockOnSendPrompt).toHaveBeenCalledWith("Editing this message", [], [], { planMode: false }); + expect(mockOnClearEditingMessage).toHaveBeenCalled(); + }); + + it("calls onSelectSkills when editingMessage has skills", () => { + const skills = [{ name: "TestSkill" }]; + render(); + + expect(mockOnSelectSkills).toHaveBeenCalledWith(skills); + }); + }); +}); diff --git a/packages/vscode-ide-companion/src/webview/components/InputPrompt.tsx b/packages/vscode-ide-companion/src/webview/components/InputPrompt.tsx new file mode 100644 index 00000000..7e04cff8 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/components/InputPrompt.tsx @@ -0,0 +1,393 @@ +import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import SkillsPanel from "@/webview/components/SkillsPanel"; +import SkillsTags from "@/webview/components/SkillsTags"; +import ContextIndicator from "@/webview/components/ContextIndicator"; +import { PromptAttachments } from "@/webview/components/PromptAttachments"; +import type { ActiveEditor, EditingMessage, SessionMessage, SkillInfo, TokenTelemetry } from "@/webview/types"; +import { FileCodeIcon, Hand, Reply, Square, SquareChartGantt } from "lucide-react"; +import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@/webview/components/ui/input-group"; +import { Separator } from "@/webview/components/ui/separator"; +import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card"; +import { cn } from "@/webview/lib/utils"; +import { Field, FieldDescription, FieldGroup } from "./ui/field"; +import { Spinner } from "@/webview/components/ui/spinner"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuTrigger, +} from "@/webview/components/ui/dropdown-menu"; +import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/webview/components/ui/item"; +import { usePromptAttachments } from "@/webview/hooks/usePromptAttachments"; +import { toTitleCase } from "@/webview/utils"; +import { toast } from "@/webview/components/ui/sonner"; + +export interface InputPromptProps { + loading: boolean; + selectedSkills: SkillInfo[]; + availableSkills: SkillInfo[]; + pendingPermissionReply: unknown; + tokenTelemetry?: TokenTelemetry; + activeEditor: ActiveEditor | null; + editingMessage: EditingMessage | null; + messages?: SessionMessage[]; // Historical messages for history navigation + onSendPrompt: ( + prompt: string, + skills?: SkillInfo[], + images?: string[], + options?: { + permissions?: unknown[]; + alwaysAllows?: string[]; + planMode?: boolean; + askUserQuestionSummary?: boolean; + } + ) => void; + onInterrupt: () => void; + onSelectSkills: (skills: SkillInfo[]) => void; + onClearEditingMessage: () => void; +} + +export default function InputPrompt({ + loading, + selectedSkills, + availableSkills, + pendingPermissionReply, + tokenTelemetry, + activeEditor, + editingMessage, + messages, + onSendPrompt, + onInterrupt, + onSelectSkills, + onClearEditingMessage, +}: InputPromptProps) { + const [value, setValue] = useState(""); + const [planMode, setPlanMode] = useState<"false" | "true">("false"); + const [history, setHistory] = useState([]); + const [historyIdx, setHistoryIdx] = useState(-1); + const [draftBeforeHistory, setDraftBeforeHistory] = useState(""); + const textareaRef = useRef(null); + const { attachments, handlePaste, removeAttachment, clearAttachments, getImageUrls, loadImages } = + usePromptAttachments({ + onMaxExceeded: () => { + toast.warning("You can paste up to 10 images at a time", { position: "bottom-right" }); + }, + }); + + // Rebuild history from messages when messages change (e.g., loading a session) + useEffect(() => { + if (messages && messages.length > 0) { + const userMessages = messages + .filter( + (m) => + m.role === "user" && + typeof m.content === "string" && + m.content.trim() && + !m?.meta?.userPrompt?.askUserQuestionSummary + ) + .map((m) => m.content); + setHistory(userMessages); + setHistoryIdx(-1); + setDraftBeforeHistory(""); + } else { + // Clear history when no messages (new session) + setHistory([]); + setHistoryIdx(-1); + setDraftBeforeHistory(""); + } + }, [messages]); + + // Auto-resize textarea + const autoResize = useCallback(() => { + const el = textareaRef.current; + if (!el) return; + el.style.height = "auto"; + const lineHeight = 18; + const minHeight = lineHeight * 3 + 20; + const maxHeight = lineHeight * 10 + 20; + const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight); + el.style.height = `${next}px`; + el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden"; + }, []); + + useEffect(() => { + autoResize(); + }, [value, autoResize]); + + // Restore editing state when editingMessage changes + useEffect(() => { + if (editingMessage) { + setValue(editingMessage.text); + if (editingMessage.images && editingMessage.images.length > 0) { + loadImages(editingMessage.images); + } + if (editingMessage.skills && editingMessage.skills.length > 0) { + onSelectSkills(editingMessage.skills); + } + } + }, [editingMessage, loadImages, onSelectSkills]); + + const handleSend = useCallback(() => { + const trimmed = value.trim(); + const images = getImageUrls(); + if ((!trimmed && images.length === 0) || loading) return; + + const reply = pendingPermissionReply as { permissions?: unknown[]; alwaysAllows?: string[] } | null; + setHistory((prev) => [...prev, trimmed]); + setValue(""); + setHistoryIdx(-1); + + onSendPrompt(trimmed, selectedSkills, images, { ...reply, planMode: planMode === "true" }); + onSelectSkills([]); + clearAttachments(); + onClearEditingMessage(); + }, [ + value, + loading, + pendingPermissionReply, + selectedSkills, + onSendPrompt, + onSelectSkills, + getImageUrls, + clearAttachments, + onClearEditingMessage, + planMode, + ]); + + const handleKeyDown = useCallback( + (e: React.KeyboardEvent) => { + // if (e.isComposing) return; + + const el = textareaRef.current; + const isAtStart = el?.selectionStart === 0 && el?.selectionEnd === 0; + const isAtEnd = el?.selectionStart === el?.value.length && el?.selectionEnd === el?.value.length; + + // Exit history browsing mode on any non-ArrowUp/ArrowDown key + if (historyIdx !== -1 && e.key !== "ArrowUp" && e.key !== "ArrowDown") { + setHistoryIdx(-1); + } + + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + handleSend(); + } else if (e.key === "ArrowUp" && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) { + // Navigate to previous history item when: + // 1. Already in history browsing mode (historyIdx !== -1), OR + // 2. Caret is at the start of the input AND there's history + if ((historyIdx !== -1 || isAtStart) && history.length > 0) { + e.preventDefault(); + let nextIdx = historyIdx; + if (historyIdx === -1) { + // Enter history browsing mode: save current draft + setDraftBeforeHistory(value); + nextIdx = history.length - 1; + } else if (historyIdx > 0) { + nextIdx = historyIdx - 1; + } + if (nextIdx !== historyIdx) { + setHistoryIdx(nextIdx); + setValue(history[nextIdx]); + } + } + } else if (e.key === "ArrowDown" && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) { + // Navigate to next history item when: + // 1. Already in history browsing mode (historyIdx !== -1), OR + // 2. Caret is at the end of the input AND there's history + if ((historyIdx !== -1 || isAtEnd) && history.length > 0) { + e.preventDefault(); + if (historyIdx !== -1) { + if (historyIdx < history.length - 1) { + // Navigate to next (older) item + const nextIdx = historyIdx + 1; + setHistoryIdx(nextIdx); + setValue(history[nextIdx]); + } else { + // Reached the end of history: restore draft and exit browsing mode + setHistoryIdx(-1); + setValue(draftBeforeHistory); + } + } + } + } + }, + [handleSend, history, historyIdx, value, draftBeforeHistory] + ); + + /** + * Get the active skill badge to display when skills are loading + */ + const getActiveSkill = useCallback(() => { + if (loading && availableSkills.length > 0 && availableSkills.filter((x) => x.isLoaded).length > 0) { + return ( +

+ {availableSkills + .filter((x) => x.isLoaded) + .map((skill) => ( +

+ + + + + {toTitleCase(skill.name)} +

+ ))} +

+ ); + } + return null; + }, [loading, availableSkills]); + + /** + * Determine if the input has content (text or attachments) + */ + const hasContent = useMemo(() => value.trim().length > 0 || attachments.length > 0, [value, attachments]); + + return ( + + + {getActiveSkill()} + +

+ { + setValue(e.target.value); + if (historyIdx !== -1) { + setHistoryIdx(-1); + } + }} + onKeyDown={handleKeyDown} + onPaste={handlePaste} + className="text-[12px] max-h-50" + placeholder="Write a prompt... " + /> +

+ + { + const idx = selectedSkills.findIndex((s) => s.name === skill.name); + if (idx >= 0) { + onSelectSkills(selectedSkills.filter((s) => s.name !== skill.name)); + } else { + onSelectSkills([...selectedSkills, skill]); + } + }} + /> + + + {activeEditor && } + {activeEditor && ( + + + + + {activeEditor.fileName.split("/").pop()} + + + +

{activeEditor.fileName.split("/").pop()}

{activeEditor.fileName}

+ {activeEditor.languageId} + {activeEditor.lineCount} lines +

+ + + )} +

+ + + + {planMode === "true" ? ( +

+ + Plan +

+ ) : ( +

+ + Default +

+ )} + + + + + Modes + setPlanMode(value as "true" | "false")} + > + + + + + + + Default Mode + + Deep Code will make edits and run commands to complete your task + + + + + + + + + + + Plan Mode + + Deep code will explore the code and present a plan before editing + + + + + + + + + {loading ? ( + + + + + ) : ( + + + + )} +

+ + onSelectSkills(selectedSkills.filter((s) => s.name !== name))} + /> + + + + + ); +} diff --git a/packages/vscode-ide-companion/src/webview/components/Messages.test.tsx b/packages/vscode-ide-companion/src/webview/components/Messages.test.tsx new file mode 100644 index 00000000..b2aee1f1 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/components/Messages.test.tsx @@ -0,0 +1,105 @@ +/** + * Unit tests for Messages component + * + * Tests cover: + * - Rendering different message types + * - Auto-scroll behavior + * - Message role-based rendering + */ + +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { describe, it, expect, vi } from "vitest"; +import Messages from "./Messages"; +import type { SessionMessage } from "@/webview/types"; + +// Mock dependencies +vi.mock("@/webview/components/ui/scroll-area", () => ({ + ScrollArea: vi.fn(({ children }) =>

{children}

), + ScrollBar: vi.fn(() =>

), +})); + +vi.mock("@/webview/components/bubbles/UserBubble", () => ({ + default: vi.fn(({ content }) =>

{content}

), +})); + +vi.mock("@/webview/components/bubbles/AssistantBubble", () => ({ + default: vi.fn(({ message }) =>

{message.content}

), +})); + +vi.mock("@/webview/components/bubbles/ThinkingBubble", () => ({ + default: vi.fn(({ content }) =>

{content}

), +})); + +vi.mock("@/webview/components/bubbles/ToolBubble", () => ({ + default: vi.fn(({ content }) =>

{content}

), +})); + +vi.mock("@/webview/components/bubbles/SystemBubble", () => ({ + default: vi.fn(({ content }) =>

{content}

), +})); + +// Mock scrollIntoView +Element.prototype.scrollIntoView = vi.fn(); + +describe("Messages", () => { + const defaultProps = { + messages: [] as SessionMessage[], + loading: false, + llmStreamProgress: null, + processes: null, + }; + + it("renders welcome screen when no messages", () => { + render(); + expect(screen.getByText("Welcome to the Deep Code!")).toBeInTheDocument(); + }); + + it("renders user message", () => { + const messages: SessionMessage[] = [{ role: "user", content: "Hello" }]; + render(); + expect(screen.getByTestId("user-bubble")).toHaveTextContent("Hello"); + }); + + it("renders assistant message", () => { + const messages: SessionMessage[] = [{ role: "assistant", content: "Hi there!" }]; + render(); + expect(screen.getByTestId("assistant-bubble")).toHaveTextContent("Hi there!"); + }); + + it("renders thinking bubble when asThinking is true", () => { + const messages: SessionMessage[] = [{ role: "assistant", content: "Thinking...", meta: { asThinking: true } }]; + render(); + expect(screen.getByTestId("thinking-bubble")).toBeInTheDocument(); + }); + + it("renders tool message", () => { + const messages: SessionMessage[] = [ + { role: "tool", content: "Tool output", meta: { function: { name: "readFile" } } }, + ]; + render(); + expect(screen.getByTestId("tool-bubble")).toHaveTextContent("Tool output"); + }); + + it("renders system message", () => { + const messages: SessionMessage[] = [{ role: "system", content: "System info" }]; + render(); + expect(screen.getByTestId("system-bubble")).toBeInTheDocument(); + }); + + it("renders multiple messages of different types", () => { + const messages: SessionMessage[] = [ + { role: "user", content: "Question" }, + { role: "assistant", content: "Answer" }, + { role: "tool", content: "Result" }, + ]; + render(); + expect(screen.getAllByTestId(/bubble/)).toHaveLength(3); + }); + + it("renders message with html content", () => { + const messages: SessionMessage[] = [{ role: "assistant", content: "Text" }]; + render(); + expect(screen.getByTestId("assistant-bubble")).toHaveTextContent("Text"); + }); +}); diff --git a/packages/vscode-ide-companion/src/webview/components/Messages.tsx b/packages/vscode-ide-companion/src/webview/components/Messages.tsx new file mode 100644 index 00000000..0b42f1f2 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/components/Messages.tsx @@ -0,0 +1,242 @@ +import React, { useRef, useEffect, forwardRef, useImperativeHandle } from "react"; +import { ScrollArea, ScrollBar } from "@/webview/components/ui/scroll-area"; +import UserBubble from "@/webview/components/bubbles/UserBubble"; +import AssistantBubble from "@/webview/components/bubbles/AssistantBubble"; +import ThinkingBubble from "@/webview/components/bubbles/ThinkingBubble"; +import ToolBubble, { + type ToolBubbleProps, + type AskUserQuestionMetadata, +} from "@/webview/components/bubbles/ToolBubble"; +import SystemBubble from "@/webview/components/bubbles/SystemBubble"; +import type { EditingMessage, SessionMessage } from "@/webview/types"; +import AskQuestionSummary from "@/webview/components/AskQuestionSummary"; +import icon from "../../../assets/deepcoding_icon.png"; + +interface MessagesProps { + messages: SessionMessage[]; + loading: boolean; + onEditMessage?: (editing: EditingMessage) => void; + onAskUserQuestions?: (questions: AskUserQuestionMetadata["questions"]) => void; +} + +export interface MessagesHandle { + scrollToMessage: (messageId: string) => void; +} + +const Messages = forwardRef( + ({ messages, loading, onEditMessage, onAskUserQuestions }, ref) => { + const scrollAreaRef = useRef(null); + const bottomRef = useRef(null); + const suppressScrollRef = useRef(false); + const highlightedElRef = useRef(null); + const observerRef = useRef(null); + const observerFallbackRef = useRef | null>(null); + + const handleToBottom = () => { + bottomRef.current?.scrollIntoView({ behavior: "smooth" }); + }; + + useEffect(() => { + if (!suppressScrollRef.current) { + handleToBottom(); + } + }, [messages, loading]); + + // Cleanup observer on unmount + useEffect(() => { + return () => { + if (observerRef.current) { + observerRef.current.disconnect(); + } + if (observerFallbackRef.current) { + clearTimeout(observerFallbackRef.current); + } + }; + }, []); + + useImperativeHandle(ref, () => ({ + scrollToMessage: (messageId: string) => { + suppressScrollRef.current = true; + + // Clean up previous observer and fallback timer + if (observerRef.current) { + observerRef.current.disconnect(); + observerRef.current = null; + } + if (observerFallbackRef.current) { + clearTimeout(observerFallbackRef.current); + observerFallbackRef.current = null; + } + + // Remove highlight from previously highlighted element + if (highlightedElRef.current) { + highlightedElRef.current.classList.remove("msg-highlight-breathe"); + highlightedElRef.current = null; + } + + const el = document.querySelector(`[data-message-id="${messageId}"]`); + if (!el) { + setTimeout(() => { + suppressScrollRef.current = false; + }, 500); + return; + } + + // Scroll the element into view first (smooth) + el.scrollIntoView({ behavior: "smooth", block: "center" }); + + // Get the scrollable viewport as the IntersectionObserver root + const viewport = scrollAreaRef.current?.querySelector("[data-radix-scroll-area-viewport]") || null; + + let highlightApplied = false; + + const applyHighlight = () => { + if (highlightApplied) return; + highlightApplied = true; + el.classList.add("msg-highlight-breathe"); + highlightedElRef.current = el; + // Remove the class after animation completes (3 iterations * 0.8s) + setTimeout(() => { + el.classList.remove("msg-highlight-breathe"); + if (highlightedElRef.current === el) { + highlightedElRef.current = null; + } + }, 2600); + }; + + // Use IntersectionObserver to wait until the element is fully visible + const observer = new IntersectionObserver( + (entries) => { + for (const entry of entries) { + if (entry.intersectionRatio >= 0.99) { + // Clear fallback timer + if (observerFallbackRef.current) { + clearTimeout(observerFallbackRef.current); + observerFallbackRef.current = null; + } + applyHighlight(); + observer.disconnect(); + observerRef.current = null; + return; + } + } + }, + { + root: viewport, + threshold: [0.99], + } + ); + + observer.observe(el); + observerRef.current = observer; + + // Fallback: if the element never becomes fully visible within 2s + // (e.g., element is too large to fit), apply animation anyway + observerFallbackRef.current = setTimeout(() => { + if (observerRef.current) { + observerRef.current.disconnect(); + observerRef.current = null; + } + applyHighlight(); + }, 2000); + + // Re-enable auto-scroll after a delay + setTimeout(() => { + suppressScrollRef.current = false; + }, 1500); + }, + })); + + if (messages.length === 0) { + return ( +

Welcome to the Deep Code!

+ What would you like to do? Ask about this codebase or we can start writing code. +

+ ); + } + return ( + +

+ {messages.map((msg, index) => { + const prevMsg = index > 0 ? messages[index - 1] : null; + const shouldConnect = prevMsg ? prevMsg.role !== "user" && msg.role !== "user" : false; + const msgId = msg.id || `msg-${index}`; + + const wrapWithId = (element: React.ReactNode, key: string) => ( +

+ {element} +

+ ); + + switch (msg.role) { + case "user": { + if (msg.meta?.userPrompt?.askUserQuestionSummary) { + return wrapWithId(, `msg-${index}`); + } + return wrapWithId( + { + const meta = msg.meta as { userPrompt?: { imageUrls?: string[] } } | undefined; + onEditMessage({ + text: msg.content, + images: meta?.userPrompt?.imageUrls ?? [], + skills: [], + }); + } + : undefined + } + />, + `msg-${index}` + ); + } + case "assistant": { + const meta = msg.meta as { asThinking?: boolean } | undefined; + if (meta?.asThinking) { + return wrapWithId( + , + `msg-${index}` + ); + } + return wrapWithId(, `msg-${index}`); + } + case "tool": + return wrapWithId( + , + `msg-${index}` + ); + case "system": + return wrapWithId( + , + `msg-${index}` + ); + default: + return null; + } + })} +

+ + + ); + } +); + +export default Messages; diff --git a/packages/vscode-ide-companion/src/webview/components/ModeToggle.tsx b/packages/vscode-ide-companion/src/webview/components/ModeToggle.tsx new file mode 100644 index 00000000..14a44bc7 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/components/ModeToggle.tsx @@ -0,0 +1,31 @@ +import { Moon, Sun } from "lucide-react"; + +import { Button } from "@/webview/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/webview/components/ui/dropdown-menu"; +import { useTheme } from "@/webview/context/ThemeProvider"; + +export function ModeToggle({ variant = "ghost" }: { variant?: "ghost" | "outline" }) { + const { setTheme } = useTheme(); + + return ( + + + + + + setTheme("light")}>Light + setTheme("dark")}>Dark + setTheme("system")}>System + + + ); +} diff --git a/packages/vscode-ide-companion/src/webview/components/NetworkStatusIndicator.tsx b/packages/vscode-ide-companion/src/webview/components/NetworkStatusIndicator.tsx new file mode 100644 index 00000000..c09136fe --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/components/NetworkStatusIndicator.tsx @@ -0,0 +1,22 @@ +import { Wifi, WifiOff } from "lucide-react"; +import { cn } from "@/webview/lib/utils"; +import { useNetworkStatus } from "@/webview/hooks/useNetworkStatus"; + +export function NetworkStatusIndicator({ className }: { className?: string }) { + const { isOnline } = useNetworkStatus(); + + return ( +

+ {isOnline ? : } + {isOnline ? "Online" : "Offline"} +

+ ); +} diff --git a/packages/vscode-ide-companion/src/webview/components/PermissionPrompt.test.tsx b/packages/vscode-ide-companion/src/webview/components/PermissionPrompt.test.tsx new file mode 100644 index 00000000..cf4360df --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/components/PermissionPrompt.test.tsx @@ -0,0 +1,197 @@ +/** + * Unit tests for PermissionPrompt component + * + * Tests cover: + * - normalizeRequests + * - describeScope + * - getRiskClass + * - commitDecision flow + * - isAskPermission / isDenied conditions + */ + +import React from "react"; +import { render, screen, fireEvent } from "@testing-library/react"; +import { describe, it, expect, vi, beforeEach } from "vitest"; +import PermissionPrompt, { type PermissionPromptProps } from "./PermissionPrompt"; +import type { AskPermissionRequest, AppAction } from "@/webview/types"; + +// Mock dependencies +vi.mock("@/webview/components/ui/button", () => ({ + Button: vi.fn(({ children, onClick, ...props }) => ( + + )), +})); + +vi.mock("@/webview/components/ui/hover-card", () => ({ + HoverCard: vi.fn(({ children }) =>

{children}

), + HoverCardContent: vi.fn(({ children }) =>

{children}

), + HoverCardTrigger: vi.fn(({ children }) =>

{children}

), +})); + +vi.mock("lucide-react", () => ({ + X: vi.fn(() => ), + ShieldAlert: vi.fn(() => ), + ChevronDownIcon: vi.fn(() => ), + ChevronLeft: vi.fn(() => ), + ChevronRight: vi.fn(() => ), + Terminal: vi.fn(() => ), +})); + +const mockDispatch = vi.fn<(action: AppAction) => void>(); +const mockOnDenyPermission = vi.fn<(sessionId: string) => void>(); +const mockOnSendPrompt = + vi.fn< + ( + prompt: string, + skills?: unknown[], + images?: string[], + options?: { permissions?: unknown[]; alwaysAllows?: string[] } + ) => void + >(); +const mockOnInterrupt = vi.fn<() => void>(); + +const defaultProps: PermissionPromptProps = { + askPermissions: [] as AskPermissionRequest[], + sessionStatus: "idle", + pendingPermissionReply: null, + permissionPromptState: null, + activeSessionId: "session-1", + dispatch: mockDispatch, + onDenyPermission: mockOnDenyPermission, + onSendPrompt: mockOnSendPrompt, + onInterrupt: mockOnInterrupt, +}; + +describe("PermissionPrompt", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders nothing when no permissions requested", () => { + const { container } = render(); + expect(container).toBeEmptyDOMElement(); + }); + + it("renders nothing when sessionStatus is not ask_permission", () => { + const props = { + ...defaultProps, + askPermissions: [{ toolCallId: "tool1", name: "read", command: "cat", description: "", scopes: ["read-in-cwd"] }], + sessionStatus: "running" as const, + }; + const { container } = render(); + expect(container).toBeEmptyDOMElement(); + }); + + it("renders permission prompt when ask_permission status", () => { + const props = { + ...defaultProps, + askPermissions: [{ toolCallId: "tool1", name: "read", command: "cat", description: "", scopes: ["read-in-cwd"] }], + sessionStatus: "ask_permission" as const, + }; + render(); + // Header now includes tool name via capitalize in the collapsible trigger + expect(screen.getByText(/Permission required/)).toBeInTheDocument(); + }); + + it("renders denied state when permission denied", () => { + const props = { + ...defaultProps, + askPermissions: [{ toolCallId: "tool1", name: "read", command: "cat", description: "", scopes: ["read-in-cwd"] }], + sessionStatus: "permission_denied" as const, + pendingPermissionReply: { allow: false, alwaysAllows: [] }, + }; + render(); + expect(screen.getByText(/denied/i)).toBeInTheDocument(); + }); + + it("calls onDenyPermission when No clicked", () => { + const props = { + ...defaultProps, + askPermissions: [{ toolCallId: "tool1", name: "read", command: "cat", description: "", scopes: ["read-in-cwd"] }], + sessionStatus: "ask_permission" as const, + }; + render(); + const noButton = screen.getByText("No"); + fireEvent.click(noButton); + expect(mockOnDenyPermission).toHaveBeenCalled(); + }); + + it("calls onSendPrompt when Yes clicked", () => { + const props = { + ...defaultProps, + askPermissions: [{ toolCallId: "tool1", name: "read", command: "cat", description: "", scopes: ["read-in-cwd"] }], + sessionStatus: "ask_permission" as const, + }; + render(); + const yesButton = screen.getByText("Yes"); + fireEvent.click(yesButton); + expect(mockOnSendPrompt).toHaveBeenCalledWith( + "/continue", + [], + [], + expect.objectContaining({ permissions: expect.any(Array) }) + ); + }); + + it("shows always allow button when canAlwaysAllow", () => { + const props: PermissionPromptProps = { + ...defaultProps, + askPermissions: [{ toolCallId: "tool1", name: "read", command: "cat", description: "", scopes: ["read-in-cwd"] }], + sessionStatus: "ask_permission", + permissionPromptState: { + requests: [], + prompts: [], + index: 0, + decisions: {}, + alwaysAllows: [], + submitting: false, + }, + }; + render(); + expect(screen.getByText(/always allow/i)).toBeInTheDocument(); + }); + + it("calls onInterrupt when cancel clicked", () => { + const props = { + ...defaultProps, + askPermissions: [{ toolCallId: "tool1", name: "read", command: "cat", description: "", scopes: ["read-in-cwd"] }], + sessionStatus: "ask_permission" as const, + }; + render(); + // The close (X) button in the collapsible header calls handleCancel -> onInterrupt + const xIcon = screen.getByTestId("x-icon"); + fireEvent.click(xIcon); + expect(mockOnInterrupt).toHaveBeenCalled(); + }); + + it("renders risk class badge for scope", () => { + const props = { + ...defaultProps, + askPermissions: [{ toolCallId: "tool1", name: "read", command: "cat", description: "", scopes: ["read-in-cwd"] }], + sessionStatus: "ask_permission" as const, + }; + render(); + // Check for the risk class styling (bg-green-500 for read-in-cwd scope) + expect(document.body.innerHTML).toContain("bg-green-500/15"); + }); + + it("renders multiple permission requests in carousel layout", () => { + const props = { + ...defaultProps, + askPermissions: [ + { toolCallId: "tool1", name: "read", command: "cat", description: "", scopes: ["read-in-cwd"] }, + { toolCallId: "tool2", name: "write", command: "echo", description: "", scopes: ["write-in-cwd"] }, + ], + sessionStatus: "ask_permission" as const, + }; + render(); + // Carousel navigation elements should be present (prev/next buttons) + expect(screen.getByTestId("chevron-left-icon")).toBeInTheDocument(); + expect(screen.getByTestId("chevron-right-icon")).toBeInTheDocument(); + // Both tool names should be rendered as carousel slides + expect(screen.getByText("Read")).toBeInTheDocument(); + expect(screen.getByText("Write")).toBeInTheDocument(); + }); +}); diff --git a/packages/vscode-ide-companion/src/webview/components/PermissionPrompt.tsx b/packages/vscode-ide-companion/src/webview/components/PermissionPrompt.tsx new file mode 100644 index 00000000..2e3de4e9 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/components/PermissionPrompt.tsx @@ -0,0 +1,374 @@ +import React, { useMemo, useCallback, useState, useEffect, useRef } from "react"; +import { Button } from "@/webview/components/ui/button"; +import type { AppAction, AskPermissionRequest, PermissionPromptState, SkillInfo } from "@/webview/types"; +import { ShieldAlert, X, ChevronDownIcon, ChevronLeft, ChevronRight, Terminal } from "lucide-react"; +import { Alert, AlertDescription, AlertTitle } from "@/webview/components/ui/alert"; +import { capitalize } from "@/webview/utils"; +import type { CarouselApi } from "@/webview/components/ui/carousel"; +import { Carousel, CarouselContent, CarouselItem } from "@/webview/components/ui/carousel"; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/webview/components/ui/collapsible"; +import { Card, CardContent } from "@/webview/components/ui/card"; + +export interface PermissionPromptProps { + askPermissions: AskPermissionRequest[]; + sessionStatus: string | null; + pendingPermissionReply: unknown; + permissionPromptState: PermissionPromptState | null; + activeSessionId: string | null; + dispatch: (action: AppAction) => void; + onDenyPermission: (sessionId: string) => void; + onSendPrompt: ( + prompt: string, + skills?: SkillInfo[], + images?: string[], + options?: { permissions?: unknown[]; alwaysAllows?: string[] } + ) => void; + onInterrupt: () => void; +} + +type PermissionScope = string; + +const VALID_SCOPES: PermissionScope[] = [ + "read-in-cwd", + "read-out-cwd", + "write-in-cwd", + "write-out-cwd", + "delete-in-cwd", + "delete-out-cwd", + "query-git-log", + "mutate-git-log", + "network", + "mcp", +]; + +function describeScope(scope: string): string { + switch (scope) { + case "read-in-cwd": + return "reads inside this workspace"; + case "read-out-cwd": + return "reads outside this workspace"; + case "write-in-cwd": + return "writes inside this workspace"; + case "write-out-cwd": + return "writes outside this workspace"; + case "delete-in-cwd": + return "deletes inside this workspace"; + case "delete-out-cwd": + return "deletes outside this workspace"; + case "query-git-log": + return "Git history queries"; + case "mutate-git-log": + return "Git history changes"; + case "network": + return "network access"; + case "mcp": + return "MCP tool access"; + default: + return "unknown access"; + } +} + +function getRiskClass(scope: string): string { + switch (scope) { + case "read-in-cwd": + case "query-git-log": + return "bg-green-500/15 text-green-700 dark:text-green-400"; + case "read-out-cwd": + case "write-in-cwd": + case "network": + case "mcp": + return "bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"; + default: + return "bg-red-500/15 text-red-700 dark:text-red-400"; + } +} + +function normalizeRequests(requests: unknown[]): AskPermissionRequest[] { + return requests + .map((item) => { + if (!item || typeof item !== "object") return null; + const r = item as Record; + return { + toolCallId: String(r.toolCallId || ""), + name: String(r.name || "Tool"), + command: String(r.command || ""), + description: String(r.description || ""), + scopes: Array.isArray(r.scopes) ? r.scopes.filter((s) => typeof s === "string") : ["unknown"], + }; + }) + .filter(Boolean) as AskPermissionRequest[]; +} + +export default function PermissionPrompt({ + askPermissions, + sessionStatus, + pendingPermissionReply, + activeSessionId, + dispatch, + onDenyPermission, + onSendPrompt, + onInterrupt, +}: PermissionPromptProps) { + const [api, setApi] = React.useState(); + const carouselApiRef = useRef(null); + const pendingScrollRef = useRef(null); + const [open, setOpen] = React.useState(true); + const [current, setCurrent] = React.useState(0); + const [count, setCount] = React.useState(0); + const normalized = useMemo(() => normalizeRequests(askPermissions), [askPermissions]); + const isAskPermission = sessionStatus === "ask_permission" && normalized.length > 0; + const isDenied = (pendingPermissionReply && sessionStatus === "permission_denied") as boolean; + + // Build prompts from requests — one per (request, scope) pair + const prompts = useMemo(() => { + const result: Array<{ request: AskPermissionRequest; scope: string }> = []; + for (const req of normalized) { + const scopes = req.scopes.length > 0 ? req.scopes : ["unknown"]; + for (const scope of scopes) { + result.push({ request: req, scope }); + } + } + return result; + }, [normalized]); + + // Internal state for decisions (no sequential index — carousel manages position) + const [localState, setLocalState] = useState<{ + decisions: Record; + alwaysAllows: string[]; + submitting: boolean; + }>({ decisions: {}, alwaysAllows: [], submitting: false }); + + // Reset when prompts change + useEffect(() => { + setLocalState({ decisions: {}, alwaysAllows: [], submitting: false }); + }, [askPermissions]); + + // Store carousel API in ref for stable access from callbacks (avoids stale closures) + useEffect(() => { + carouselApiRef.current = api || null; + }, [api]); + + // Sync carousel slide counter + useEffect(() => { + if (!api) return; + setCount(api.scrollSnapList().length); + setCurrent(api.selectedScrollSnap() + 1); + api.on("select", () => { + setCurrent(api.selectedScrollSnap() + 1); + }); + }, [api]); + + // Execute pending auto-scroll after React commits the state update + useEffect(() => { + if (pendingScrollRef.current !== null && carouselApiRef.current) { + const idx = pendingScrollRef.current; + pendingScrollRef.current = null; + carouselApiRef.current.scrollTo(idx); + } + }); + + const commitDecision = useCallback( + (kind: "allow" | "deny" | "always", slideIndex: number) => { + if (localState.submitting) return; + + setLocalState((prev) => { + const prompt = prompts[slideIndex]; + if (!prompt) return prev; + + const newDecisions = { ...prev.decisions }; + const newAlwaysAllows = [...prev.alwaysAllows]; + + if (kind === "always" && VALID_SCOPES.includes(prompt.scope)) { + if (!newAlwaysAllows.includes(prompt.scope)) { + newAlwaysAllows.push(prompt.scope); + } + if (newDecisions[prompt.request.toolCallId] !== "deny") { + newDecisions[prompt.request.toolCallId] = "allow"; + } + } else if (kind === "deny") { + newDecisions[prompt.request.toolCallId] = "deny"; + } else { + if (newDecisions[prompt.request.toolCallId] !== "deny") { + newDecisions[prompt.request.toolCallId] = "allow"; + } + } + + // Find next undecided prompt after the current slide + let nextIdx = slideIndex + 1; + while (nextIdx < prompts.length) { + const s = prompts[nextIdx].scope; + const t = prompts[nextIdx].request.toolCallId; + if (VALID_SCOPES.includes(s) && newAlwaysAllows.includes(s)) { + nextIdx++; + continue; + } + if (newDecisions[t] !== undefined) { + nextIdx++; + continue; + } + break; + } + + if (nextIdx >= prompts.length) { + // All prompts decided — submit + const permissions = normalized.map((req) => ({ + toolCallId: req.toolCallId, + permission: (newDecisions[req.toolCallId] === "deny" ? "deny" : "allow") as "allow" | "deny", + })); + const hasDeny = permissions.some((p) => p.permission === "deny"); + + if (hasDeny) { + dispatch({ + type: "SET_PENDING_PERMISSION_REPLY", + reply: { permissions, alwaysAllows: newAlwaysAllows }, + }); + onDenyPermission(activeSessionId || ""); + } else { + onSendPrompt("/continue", [], [], { + permissions, + alwaysAllows: newAlwaysAllows, + }); + } + + return { ...prev, decisions: newDecisions, alwaysAllows: newAlwaysAllows, submitting: true }; + } + + // Schedule auto-scroll to the next undecided prompt (executed after render via useEffect) + pendingScrollRef.current = nextIdx; + + return { ...prev, decisions: newDecisions, alwaysAllows: newAlwaysAllows }; + }); + }, + [localState, prompts, normalized, dispatch, onDenyPermission, onSendPrompt, activeSessionId] + ); + + const handleCancel = useCallback(() => { + dispatch({ type: "SET_PENDING_PERMISSION_REPLY", reply: null }); + onInterrupt(); + setLocalState({ decisions: {}, alwaysAllows: [], submitting: false }); + }, [dispatch, onInterrupt]); + + if (!isAskPermission && !isDenied) return null; + + if (isDenied) { + return ( +

+ + + Permission denied + Add a reply, then press Enter to continue with the denial. + +

+ ); + } + + if (prompts.length === 0) return null; + + // Header label — show the tool name from the first prompt + const headerLabel = `Permission required — ${capitalize(prompts[0].request.name || "Tool")}`; + + return ( +

+ + + +

+ {headerLabel} +

+ + +

+ + + + + {prompts.map((p, idx) => ( + + + +

+ + {capitalize(p.request.name)} +

+ {p.request.command || "(no command)"} +

+ {p.request.description && ( +

{p.request.description}

+ )} +

+ {describeScope(p.scope)} +

+ + + + ))} + + + + + + {/* Navigation footer — matches AskQuestionCarousel style */} +

Do you want to proceed?

+ + {VALID_SCOPES.includes(prompts[current - 1]?.scope || "") && ( + + )} + +

+ {open && ( + <> + + + + )} + + {current}/{count} + +

+ ); +} diff --git a/packages/vscode-ide-companion/src/webview/components/PlanRenderer.test.tsx b/packages/vscode-ide-companion/src/webview/components/PlanRenderer.test.tsx new file mode 100644 index 00000000..f1b61a47 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/components/PlanRenderer.test.tsx @@ -0,0 +1,193 @@ +/** + * Unit tests for PlanRenderer component + * + * Tests cover: + * - Rendering of headings at all 6 levels + * - Task items with different statuses ([ ], [x], [>], [!]) + * - Bullet list items + * - Plain paragraphs + * - Inline markdown (code, bold, italic) + * - Indentation of nested items + * - Empty input + * - HTML escaping + */ + +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { describe, it, expect, vi } from "vitest"; +import PlanRenderer from "./PlanRenderer"; + +vi.mock("lucide-react", () => ({ + Circle: vi.fn(({ className }: { className?: string }) => ), + CircleCheckBig: vi.fn(({ className }: { className?: string }) => ( + + )), + Clock: vi.fn(({ className }: { className?: string }) => ), + CircleAlert: vi.fn(({ className }: { className?: string }) => ( + + )), +})); + +describe("PlanRenderer", () => { + it("renders spacer for empty plan input", () => { + const { container } = render(); + const wrapper = container.querySelector(".update-plan-markdown"); + expect(wrapper).toBeInTheDocument(); + // Empty string produces one empty line which renders as a spacer div + expect(wrapper?.children.length).toBe(1); + }); + + it("renders headings at different levels", () => { + const plan = "# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6"; + render(); + + // Headings render via dangerouslySetInnerHTML inside + expect(screen.getByText("H1")).toBeInTheDocument(); + expect(screen.getByText("H2")).toBeInTheDocument(); + expect(screen.getByText("H3")).toBeInTheDocument(); + expect(screen.getByText("H4")).toBeInTheDocument(); + expect(screen.getByText("H5")).toBeInTheDocument(); + expect(screen.getByText("H6")).toBeInTheDocument(); + + // The heading text is inside a within the

/

elements + const h1Text = screen.getByText("H1"); + expect(h1Text.closest("h1")).toBeInTheDocument(); + const h6Text = screen.getByText("H6"); + expect(h6Text.closest("h6")).toBeInTheDocument(); + }); + + it("falls through to paragraph when heading has too many #", () => { + // 7 # characters won't match the heading regex, so it falls through to paragraph + const plan = "####### Too Deep"; + render(); + // The whole line renders as a paragraph + const p = document.querySelector("p"); + expect(p).toBeInTheDocument(); + expect(p?.textContent).toContain("Too Deep"); + }); + + it("renders todo task items with Circle icon", () => { + const plan = "- [ ] Write tests"; + render(); + // Text is rendered via dangerouslySetInnerHTML + expect(screen.getByText("Write tests")).toBeInTheDocument(); + // Todo status uses Circle icon + expect(screen.getByTestId("icon-circle")).toBeInTheDocument(); + }); + + it("renders completed task items with check icon", () => { + const plan = "- [x] Implement login"; + render(); + expect(screen.getByText("Implement login")).toBeInTheDocument(); + expect(screen.getByTestId("icon-check")).toBeInTheDocument(); + }); + + it("renders active task items with clock icon", () => { + const plan = "- [>] In progress feature"; + render(); + expect(screen.getByText("In progress feature")).toBeInTheDocument(); + expect(screen.getByTestId("icon-clock")).toBeInTheDocument(); + }); + + it("renders attention task items with alert icon", () => { + const plan = "- [!] Blocked by dependency"; + render(); + expect(screen.getByText("Blocked by dependency")).toBeInTheDocument(); + expect(screen.getByTestId("icon-alert")).toBeInTheDocument(); + }); + + it("supports X (uppercase) for completed status", () => { + const plan = "- [X] Done (uppercase X)"; + render(); + expect(screen.getByText("Done (uppercase X)")).toBeInTheDocument(); + expect(screen.getByTestId("icon-check")).toBeInTheDocument(); + }); + + it("renders bullet list items", () => { + const plan = "- Regular bullet\n* Star bullet"; + render(); + expect(screen.getByText("Regular bullet")).toBeInTheDocument(); + expect(screen.getByText("Star bullet")).toBeInTheDocument(); + }); + + it("renders plain paragraphs", () => { + const plan = "This is a plain paragraph."; + render(); + expect(screen.getByText("This is a plain paragraph.")).toBeInTheDocument(); + }); + + it("renders inline code in items", () => { + const plan = "- [x] Use `useMemo` for optimization"; + render(); + const codeEl = document.querySelector("code"); + expect(codeEl).toBeInTheDocument(); + expect(codeEl?.textContent).toBe("useMemo"); + }); + + it("renders inline bold text", () => { + const plan = "- [x] Fix critical bug"; + render(); + const strongEl = document.querySelector("strong"); + expect(strongEl).toBeInTheDocument(); + expect(strongEl?.textContent).toBe("critical"); + }); + + it("renders inline italic text", () => { + const plan = "- Note: optional parameter"; + render(); + const emEl = document.querySelector("em"); + expect(emEl).toBeInTheDocument(); + expect(emEl?.textContent).toBe("optional"); + }); + + it("escapes HTML in plan content", () => { + const plan = "- [x] Test "; + render(); + const rendered = document.body.innerHTML; + expect(rendered).toContain("<script>"); + expect(rendered).not.toContain(" + + diff --git a/packages/vscode-ide-companion/src/webview/lib/utils.test.ts b/packages/vscode-ide-companion/src/webview/lib/utils.test.ts new file mode 100644 index 00000000..8ff17ea6 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/lib/utils.test.ts @@ -0,0 +1,56 @@ +/** + * Unit tests for lib/utils.ts + * + * Tests cover: + * - cn() function (clsx + tailwind-merge) + */ + +import { describe, it, expect } from "vitest"; +import { cn } from "./utils"; + +describe("cn", () => { + it("returns empty string for no args", () => { + expect(cn()).toBe(""); + }); + + it("returns single class", () => { + expect(cn("text-red-500")).toBe("text-red-500"); + }); + + it("combines multiple classes", () => { + expect(cn("text-red-500", "bg-blue-500")).toBe("text-red-500 bg-blue-500"); + }); + + it("handles conditional classes (falsy values)", () => { + const falsy = false; + expect(cn("base", falsy && "hidden", undefined, null, "visible")).toBe("base visible"); + }); + + it("handles object syntax", () => { + expect(cn("base", { active: true, disabled: false })).toBe("base active"); + }); + + it("handles array syntax", () => { + expect(cn(["a", "b"], "c")).toBe("a b c"); + }); + + it("merges conflicting tailwind classes (last wins)", () => { + expect(cn("px-2", "px-4")).toBe("px-4"); + }); + + it("merges conflicting color classes", () => { + expect(cn("text-red-500", "text-blue-500")).toBe("text-blue-500"); + }); + + it("handles complex merge scenarios", () => { + const result = cn("px-2 py-1 text-sm", "px-4", { "bg-red-500": true, "bg-blue-500": false }, "py-2"); + // Should contain all expected classes, order may vary due to tailwind-merge + expect(result).toContain("text-sm"); + expect(result).toContain("px-4"); + expect(result).toContain("bg-red-500"); + }); + + it("handles empty strings", () => { + expect(cn("", "test", "")).toBe("test"); + }); +}); diff --git a/packages/vscode-ide-companion/src/webview/lib/utils.ts b/packages/vscode-ide-companion/src/webview/lib/utils.ts new file mode 100644 index 00000000..a5ef1935 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/packages/vscode-ide-companion/src/webview/main.tsx b/packages/vscode-ide-companion/src/webview/main.tsx new file mode 100644 index 00000000..120da04a --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/main.tsx @@ -0,0 +1,30 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ErrorBoundary } from "@/webview/components/ErrorBoundary"; +import { Toaster } from "@/webview/components/ui/sonner"; +import { TooltipProvider } from "@/webview/components/ui/tooltip"; +import { ThemeProvider } from "@/webview/context/ThemeProvider"; +import { ChatProvider } from "@/webview/context/ChatProvider"; +import App from "@/webview/App"; +import React from "react"; +import "./index.css"; + +const queryClient = new QueryClient(); + +createRoot(document.getElementById("root")!).render( + + + + + + + + + + + + + + +); diff --git a/packages/vscode-ide-companion/src/webview/services/chatService.test.ts b/packages/vscode-ide-companion/src/webview/services/chatService.test.ts new file mode 100644 index 00000000..7e7aa43e --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/services/chatService.test.ts @@ -0,0 +1,344 @@ +/** + * Unit tests for chatService + * + * Tests cover: + * - Service methods with mocked wrpc + * - Return types + * - Error handling + / + +/ eslint-disable @typescript-eslint/no-explicit-any */ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import { chatService } from "./chatService"; +import { wrpc } from "@/webview/wrpc"; + +// Mock wrpc +vi.mock("@/webview/wrpc", () => ({ + wrpc: { + getInitialData: { + query: vi.fn(), + }, + getSkills: { + query: vi.fn(), + }, + getSessions: { + query: vi.fn(), + }, + sendPrompt: { + mutate: vi.fn(), + }, + createNewSession: { + mutate: vi.fn(), + }, + selectSession: { + query: vi.fn(), + }, + interrupt: { + mutate: vi.fn(), + }, + denyPermission: { + mutate: vi.fn(), + }, + copyText: { + mutate: vi.fn(), + }, + openFile: { + mutate: vi.fn(), + }, + openSettings: { + mutate: vi.fn(), + }, + showAlert: { + mutate: vi.fn(), + }, + }, +})); + +describe("chatService", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + describe("getInitialData", () => { + it("returns initial data when available", async () => { + const mockData = { + sessions: [{ id: "s1", summary: "Test" }], + activeSession: { id: "s1", summary: "Test", status: "idle", messages: [], askPermissions: [], processes: null }, + activeEditor: { fileName: "test.ts", languageId: "typescript", lineCount: 10 }, + }; + + vi.mocked(wrpc.getInitialData.query).mockResolvedValue(mockData as any); + + const result = await chatService.getInitialData(); + + expect(result).toEqual(mockData); + expect(wrpc.getInitialData.query).toHaveBeenCalledTimes(1); + }); + + it("returns null when no data", async () => { + vi.mocked(wrpc.getInitialData.query).mockResolvedValue(null as any); + + const result = await chatService.getInitialData(); + + expect(result).toBeNull(); + }); + }); + + describe("getSkills", () => { + it("returns skills array when available", async () => { + const mockSkills = [{ name: "skill1" }, { name: "skill2" }]; + vi.mocked(wrpc.getSkills.query).mockResolvedValue({ skills: mockSkills } as any); + + const result = await chatService.getSkills(); + + expect(result).toEqual(mockSkills); + }); + + it("returns skills for specific session", async () => { + const mockSkills = [{ name: "session-skill" }]; + vi.mocked(wrpc.getSkills.query).mockResolvedValue({ skills: mockSkills } as any); + + const result = await chatService.getSkills("session-123"); + + expect(wrpc.getSkills.query).toHaveBeenCalledWith("session-123"); + expect(result).toEqual(mockSkills); + }); + + it("returns empty array when no skills", async () => { + vi.mocked(wrpc.getSkills.query).mockResolvedValue(null as any); + + const result = await chatService.getSkills(); + + expect(result).toEqual([]); + }); + }); + + describe("sendPrompt", () => { + it("sends prompt with all options", async () => { + vi.mocked(wrpc.sendPrompt.mutate).mockResolvedValue({ ok: true, sessionId: "new-session-1" } as any); + + const result = await chatService.sendPrompt({ + prompt: "Hello", + skills: [{ name: "skill1" }], + images: ["image1.png", ""], // should filter empty + permissions: [{ toolCallId: "t1", permission: "allow" }], + alwaysAllows: ["read-in-cwd"], + }); + + expect(result).toEqual({ ok: true, sessionId: "new-session-1" }); + expect(wrpc.sendPrompt.mutate).toHaveBeenCalledWith({ + prompt: "Hello", + skills: [{ name: "skill1" }], + images: ["image1.png"], + permissions: [{ toolCallId: "t1", permission: "allow" }], + alwaysAllows: ["read-in-cwd"], + }); + }); + + it("sends minimal prompt", async () => { + vi.mocked(wrpc.sendPrompt.mutate).mockResolvedValue({ ok: true } as any); + + await chatService.sendPrompt({ prompt: "Hello" }); + + expect(wrpc.sendPrompt.mutate).toHaveBeenCalledWith({ + prompt: "Hello", + skills: [], + images: [], + permissions: undefined, + alwaysAllows: undefined, + }); + }); + + it("filters empty images", async () => { + vi.mocked(wrpc.sendPrompt.mutate).mockResolvedValue({ ok: true } as any); + + await chatService.sendPrompt({ + prompt: "Hello", + images: ["", "valid.png", ""], + }); + + expect(wrpc.sendPrompt.mutate).toHaveBeenCalledWith({ + prompt: "Hello", + skills: [], + images: ["valid.png"], + permissions: undefined, + alwaysAllows: undefined, + }); + }); + + it("returns error when sendPrompt fails", async () => { + vi.mocked(wrpc.sendPrompt.mutate).mockResolvedValue({ ok: false, error: "Network error" } as any); + + const result = await chatService.sendPrompt({ prompt: "Hello" }); + + expect(result).toEqual({ ok: false, error: "Network error" }); + }); + + it("returns sessionId from the server response", async () => { + vi.mocked(wrpc.sendPrompt.mutate).mockResolvedValue({ ok: true, sessionId: "session-abc" } as any); + + const result = await chatService.sendPrompt({ prompt: "Create a session" }); + + expect(result.sessionId).toBe("session-abc"); + }); + }); + + describe("createNewSession", () => { + it("creates new session and returns sessions", async () => { + const mockResult = { + sessions: [{ id: "s1" }, { id: "s2" }], + skills: [{ name: "skill1" }], + }; + vi.mocked(wrpc.createNewSession.mutate).mockResolvedValue(mockResult as any); + + const result = await chatService.createNewSession(); + + expect(result).toEqual(mockResult); + }); + + it("returns sessions even when no skills", async () => { + const mockResult = { sessions: [{ id: "s1" }] }; + vi.mocked(wrpc.createNewSession.mutate).mockResolvedValue(mockResult as any); + + const result = await chatService.createNewSession(); + + expect(result).toEqual(mockResult); + }); + }); + + describe("selectSession", () => { + it("returns session data when found", async () => { + const mockResult = { + ok: true, + session: { id: "s1", summary: "Test", status: "idle", askPermissions: [], processes: null }, + sessions: [{ id: "s1" }], + messages: [{ role: "user", content: "Hello" }], + }; + vi.mocked(wrpc.selectSession.query).mockResolvedValue(mockResult as any); + + const result = await chatService.selectSession("s1"); + + expect(result).toEqual(mockResult); + expect(wrpc.selectSession.query).toHaveBeenCalledWith("s1"); + }); + + it("returns ok false when session not found", async () => { + vi.mocked(wrpc.selectSession.query).mockResolvedValue({ ok: false, error: "Not found" } as any); + + const result = await chatService.selectSession("nonexistent"); + + expect(result.ok).toBe(false); + }); + }); + + describe("interrupt", () => { + it("returns ok on success", async () => { + vi.mocked(wrpc.interrupt.mutate).mockResolvedValue({ ok: true } as any); + + const result = await chatService.interrupt(); + + expect(result).toEqual({ ok: true }); + }); + }); + + describe("denyPermission", () => { + it("returns ok on success", async () => { + vi.mocked(wrpc.denyPermission.mutate).mockResolvedValue({ ok: true } as any); + + const result = await chatService.denyPermission("session-123"); + + expect(result).toEqual({ ok: true }); + expect(wrpc.denyPermission.mutate).toHaveBeenCalledWith("session-123"); + }); + }); + + describe("copyText", () => { + it("copies text to clipboard", async () => { + vi.mocked(wrpc.copyText.mutate).mockResolvedValue({ ok: true } as any); + + const result = await chatService.copyText("Hello World"); + + expect(result).toEqual({ ok: true }); + expect(wrpc.copyText.mutate).toHaveBeenCalledWith("Hello World"); + }); + }); + + describe("openFile", () => { + it("opens file with default line 1", async () => { + vi.mocked(wrpc.openFile.mutate).mockResolvedValue({ ok: true } as any); + + const result = await chatService.openFile("test.ts"); + + expect(result).toEqual({ ok: true }); + expect(wrpc.openFile.mutate).toHaveBeenCalledWith({ filePath: "test.ts", line: 1 }); + }); + + it("opens file at specific line", async () => { + vi.mocked(wrpc.openFile.mutate).mockResolvedValue({ ok: true } as any); + + await chatService.openFile("test.ts", 42); + + expect(wrpc.openFile.mutate).toHaveBeenCalledWith({ filePath: "test.ts", line: 42 }); + }); + }); + + describe("openSettings", () => { + it("opens settings", async () => { + vi.mocked(wrpc.openSettings.mutate).mockResolvedValue({ ok: true } as any); + + const result = await chatService.openSettings(); + + expect(result).toEqual({ ok: true }); + }); + }); + + describe("getSessions", () => { + it("returns sessions array when available", async () => { + const mockSessions = [ + { id: "s1", summary: "Session 1", createTime: "2024-01-01", updateTime: "2024-01-01", status: "idle" }, + { id: "s2", summary: "Session 2", createTime: "2024-01-02", updateTime: "2024-01-02", status: "processing" }, + ]; + vi.mocked(wrpc.getSessions.query).mockResolvedValue({ sessions: mockSessions } as any); + + const result = await chatService.getSessions(); + + expect(result).toEqual(mockSessions); + expect(wrpc.getSessions.query).toHaveBeenCalledTimes(1); + }); + + it("returns empty array when no sessions", async () => { + vi.mocked(wrpc.getSessions.query).mockResolvedValue(null as any); + + const result = await chatService.getSessions(); + + expect(result).toEqual([]); + }); + + it("returns empty array when result has no sessions field", async () => { + vi.mocked(wrpc.getSessions.query).mockResolvedValue({} as any); + + const result = await chatService.getSessions(); + + expect(result).toEqual([]); + }); + }); + + describe("showAlert", () => { + it("shows alert message and returns ok", async () => { + vi.mocked(wrpc.showAlert.mutate).mockResolvedValue({ ok: true } as any); + + const result = await chatService.showAlert("Test message"); + + expect(result).toEqual({ ok: true }); + expect(wrpc.showAlert.mutate).toHaveBeenCalledWith("Test message"); + }); + + it("passes any message string to wrpc", async () => { + vi.mocked(wrpc.showAlert.mutate).mockResolvedValue({ ok: true } as any); + + await chatService.showAlert("New chat button clicked"); + + expect(wrpc.showAlert.mutate).toHaveBeenCalledWith("New chat button clicked"); + }); + }); +}); diff --git a/packages/vscode-ide-companion/src/webview/services/chatService.ts b/packages/vscode-ide-companion/src/webview/services/chatService.ts new file mode 100644 index 00000000..4c269413 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/services/chatService.ts @@ -0,0 +1,227 @@ +/** + * Chat Service Layer + * + * Abstracts all wRPC calls into a typed service interface. + * This provides: + * - Better testability (can mock without actual RPC) + * - Clear API boundary between UI and data layer + * - Centralized error handling + */ + +import { wrpc } from "@/webview/wrpc"; +import type { SkillInfo, SessionSummary, SessionMessage, AskPermissionRequest, TokenTelemetry } from "@/webview/types"; + +// ============================================================================ +// Types +// ============================================================================ + +export interface SendPromptOptions { + prompt: string; + skills?: SkillInfo[]; + images?: string[]; + permissions?: Array<{ toolCallId: string; permission: "allow" | "deny" }>; + alwaysAllows?: string[]; + planMode?: boolean; + askUserQuestionSummary?: boolean; +} + +export interface InitialData { + sessions: SessionSummary[]; + activeSession: { + id: string; + summary: string; + status: string; + askPermissions: AskPermissionRequest[] | undefined; + processes: Record | null; + messages: SessionMessage[]; + } | null; + activeEditor: { fileName: string; languageId: string; lineCount: number } | null; + tokenTelemetry: TokenTelemetry; +} + +export interface SelectSessionResult { + ok: boolean; + session?: { + id: string; + summary: string; + status: string; + askPermissions: AskPermissionRequest[] | undefined; + processes: Record | null; + }; + sessions?: SessionSummary[]; + messages?: SessionMessage[]; + tokenTelemetry?: TokenTelemetry; +} + +export interface CreateSessionResult { + sessions: SessionSummary[]; + skills?: SkillInfo[]; + tokenTelemetry: TokenTelemetry; +} + +// ============================================================================ +// Service +// ============================================================================ + +export const chatService = { + /** + * Get initial data including sessions, active session, and active editor + */ + async getInitialData(): Promise { + const data = await wrpc.getInitialData.query(); + return data as InitialData; + }, + + /** + * Get list of available skills + */ + async getSkills(sessionId?: string): Promise { + const result = await wrpc.getSkills.query(sessionId); + return (result?.skills as SkillInfo[]) ?? []; + }, + + /** + * Get list of all sessions + */ + async getSessions(): Promise { + const result = await wrpc.getSessions.query(); + return (result?.sessions as SessionSummary[]) ?? []; + }, + + /** + * Send a prompt to the chat + */ + async sendPrompt(options: SendPromptOptions): Promise<{ ok: boolean; error?: string; sessionId?: string }> { + const normalizedImages = (options.images ?? []).filter(Boolean); + console.log("options:", options); + const result = await wrpc.sendPrompt.mutate({ + prompt: options.prompt, + skills: options.skills ?? [], + images: normalizedImages, + permissions: options.permissions, + alwaysAllows: options.alwaysAllows, + planMode: options.planMode, + askUserQuestionSummary: options.askUserQuestionSummary, + }); + + return result as { ok: boolean; error?: string; sessionId?: string }; + }, + + /** + * Create a new chat session + */ + async createNewSession(): Promise { + const result = await wrpc.createNewSession.mutate(); + return result as CreateSessionResult; + }, + + /** + * Select an existing session + */ + async selectSession(sessionId: string): Promise { + const result = await wrpc.selectSession.query(sessionId); + return result as SelectSessionResult; + }, + + /** + * Interrupt the current operation + */ + async interrupt(): Promise<{ ok: boolean }> { + const result = await wrpc.interrupt.mutate(); + return result as { ok: boolean }; + }, + + /** + * Deny a permission request + */ + async denyPermission(sessionId: string): Promise<{ ok: boolean }> { + const result = await wrpc.denyPermission.mutate(sessionId); + return result as { ok: boolean }; + }, + + /** + * Copy text to clipboard + */ + async copyText(text: string): Promise<{ ok: boolean }> { + const result = await wrpc.copyText.mutate(text); + return result as { ok: boolean }; + }, + + /** + * Open a file in the editor + */ + async openFile(filePath: string, line: number = 1): Promise<{ ok: boolean }> { + const result = await wrpc.openFile.mutate({ filePath, line }); + return result as { ok: boolean }; + }, + + /** + * Open settings + */ + async openSettings(): Promise<{ ok: boolean }> { + const result = await wrpc.openSettings.mutate(); + return result as { ok: boolean }; + }, + + async showAlert(message: string): Promise<{ ok: boolean }> { + const result = await wrpc.showAlert.mutate(message); + return result as { ok: boolean }; + }, + + /** + * Add a system message to the current session + */ + async addSystemMessage(content: string, meta?: Record): Promise<{ ok: boolean; error?: string }> { + const result = await wrpc.addSystemMessage.mutate({ content, meta }); + return result as { ok: boolean; error?: string; sessionId?: string }; + }, + + /** + * Rename a session + */ + async renameSession(sessionId: string, summary: string): Promise<{ ok: boolean; error?: string }> { + const result = await wrpc.renameSession.mutate({ sessionId, summary }); + return result as { ok: boolean; error?: string; sessionId?: string }; + }, + + /** + * Delete a session + */ + async deleteSession(sessionId: string): Promise<{ ok: boolean; error?: string; wasActiveSession?: boolean }> { + const result = await wrpc.deleteSession.mutate({ sessionId }); + return result as { ok: boolean; error?: string; wasActiveSession?: boolean }; + }, + + /** + * Get the JSONL file path for a session (for Inspect JSONL) + */ + async getSessionFilePath(sessionId: string): Promise<{ filePath: string }> { + const result = await wrpc.getSessionFilePath.query({ sessionId }); + return result as { filePath: string }; + }, + + /** + * Open a chat panel for a session in a specific view column + * viewColumn: 1 = Active (Open as Editor), 2 = Beside (Open to the Side) + */ + async openChatPanel(sessionId: string, viewColumn: number): Promise<{ ok: boolean }> { + const result = await wrpc.openChatPanel.mutate({ sessionId, viewColumn }); + return result as { ok: boolean }; + }, + + /** + * Open the chat in a new VSCode window + */ + async openChatInNewWindow(sessionId: string): Promise<{ ok: boolean }> { + const result = await wrpc.openChatInNewWindow.mutate({ sessionId }); + return result as { ok: boolean }; + }, + + /** + * Open a URL in the default browser + */ + async openExternal(url: string): Promise<{ ok: boolean }> { + const result = await wrpc.openExternal.mutate({ url }); + return result as { ok: boolean }; + }, +}; diff --git a/packages/vscode-ide-companion/src/webview/services/index.ts b/packages/vscode-ide-companion/src/webview/services/index.ts new file mode 100644 index 00000000..8872d32d --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/services/index.ts @@ -0,0 +1,2 @@ +export { chatService } from "./chatService"; +export type { SendPromptOptions, InitialData, SelectSessionResult, CreateSessionResult } from "./chatService"; diff --git a/packages/vscode-ide-companion/src/webview/types.ts b/packages/vscode-ide-companion/src/webview/types.ts new file mode 100644 index 00000000..87d2b63a --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/types.ts @@ -0,0 +1,167 @@ +// --- Message types --- + +import type { MessageMeta } from "@vegamo/deepcode-core"; + +export interface SessionMessage { + id?: string; + sessionId?: string; + role: "user" | "assistant" | "tool" | "system"; + content: string; + meta?: MessageMeta; + visible?: boolean; + checkpointHash?: string; + compacted?: boolean; + contentParams?: Record; + messageParams?: Record; + createTime?: string; + updateTime?: string; +} + +// --- Editing state --- + +export interface EditingMessage { + text: string; + images: string[]; + skills: SkillInfo[]; +} + +export interface AskPermissionRequest { + toolCallId: string; + name: string; + command: string; + description: string; + scopes: string[]; +} + +export interface LlmStreamProgressData { + requestId: string; + sessionId?: string; + phase: "start" | "streaming" | "end"; + formattedTokens?: string; + startedAt?: string; +} + +export interface TokenTelemetry { + model: string; + thinkingEnabled: boolean; + reasoningEffort: string; + activeTokens: number; + compactPromptTokenThreshold: number; + usage: unknown | null; +} + +export interface ActiveEditor { + fileName: string; + languageId: string; + lineCount: number; +} + +export interface SkillInfo { + name: string; + description?: string; + path?: string; + isLoaded?: boolean; +} + +// --- Session types --- + +export interface SessionSummary { + id: string; + summary: string; + createTime: string; + updateTime: string; + status: string; +} + +// --- Permission types --- + +export interface PermissionPromptState { + requests: AskPermissionRequest[]; + prompts: Array<{ request: AskPermissionRequest; scope: string }>; + index: number; + decisions: Record; + alwaysAllows: string[]; + submitting: boolean; +} + +// --- App state --- + +// --- AskUserQuestion types --- + +export interface AskUserQuestionData { + questions: Array<{ + question: string; + multiSelect: boolean; + options: Array<{ + label: string; + description?: string; + }>; + }>; +} + +export interface AppState { + sessions: SessionSummary[]; + activeSessionId: string | null; + activeSessionStatus: string | null; + messages: SessionMessage[]; + loading: boolean; + skills: SkillInfo[]; + selectedSkills: SkillInfo[]; + askPermissions: AskPermissionRequest[]; + processes: Record | null; + tokenTelemetry?: TokenTelemetry; + llmStreamProgress: LlmStreamProgressData | null; + lastMessageRole: "user" | "assistant" | "tool" | "system" | null; + permissionPromptState: PermissionPromptState | null; + pendingPermissionReply: { + permissions: Array<{ toolCallId: string; permission: "allow" | "deny" }>; + alwaysAllows: string[]; + } | null; + activeEditor: ActiveEditor | null; + editingMessage: EditingMessage | null; + askUserQuestions: AskUserQuestionData | null; + showContinuePrompt: boolean; + sessionListOpen: boolean; + searchPanelOpen: boolean; +} + +// --- App actions --- + +export type AppAction = + | { type: "INIT_EMPTY"; sessions: SessionSummary[]; tokenTelemetry: TokenTelemetry | null } + | { + type: "LOAD_SESSION"; + sessionId: string; + status: string | null; + messages: SessionMessage[]; + sessions: SessionSummary[]; + askPermissions?: AskPermissionRequest[]; + processes?: Record | null; + tokenTelemetry?: TokenTelemetry | null; + } + | { type: "SET_SESSIONS"; sessions: SessionSummary[] } + | { + type: "SESSION_STATUS"; + status: string | null; + sessionId?: string; + askPermissions?: AskPermissionRequest[]; + processes?: Record | null; + tokenTelemetry?: TokenTelemetry | undefined; + } + | { type: "LLM_STREAM_PROGRESS"; progress: LlmStreamProgressData } + | { type: "USER_MESSAGE"; content: string; meta?: Record } + | { type: "ASSISTANT_MESSAGE"; content?: string; html?: string; meta?: Record } + | { type: "APPEND_MESSAGE"; message: SessionMessage } + | { type: "SET_LOADING"; loading: boolean } + | { type: "SET_SKILLS"; skills: SkillInfo[] } + | { type: "SET_SELECTED_SKILLS"; skills: SkillInfo[] } + | { type: "SET_PERMISSION_PROMPT_STATE"; state: PermissionPromptState | null } + | { type: "SET_PENDING_PERMISSION_REPLY"; reply: AppState["pendingPermissionReply"] } + | { type: "CLEAR_MESSAGES" } + | { type: "SET_ACTIVE_EDITOR"; editor: ActiveEditor | null } + | { type: "SET_EDITING_MESSAGE"; editingMessage: EditingMessage | null } + | { type: "SET_ASK_USER_QUESTIONS"; data: AskUserQuestionData | null } + | { type: "DISMISS_CONTINUE_PROMPT" } + | { type: "SET_ACTIVE_SESSION_ID"; sessionId: string } + | { type: "TOGGLE_SESSION_LIST"; open?: boolean } + | { type: "TOGGLE_SEARCH_PANEL"; open?: boolean }; diff --git a/packages/vscode-ide-companion/src/webview/utils/index.ts b/packages/vscode-ide-companion/src/webview/utils/index.ts new file mode 100644 index 00000000..32bf5aed --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/utils/index.ts @@ -0,0 +1,136 @@ +import type { TokenTelemetry } from "@/webview/types"; +import type { AnswerFormValues } from "@/webview/components/AskQuestionCarousel"; + +export function flattenUsageFields(value: unknown, prefix = "") { + if (!value || typeof value !== "object" || Array.isArray(value)) { + return []; + } + + const rows: [string, unknown][] = []; + Object.entries(value).forEach(([key, nestedValue]) => { + const fieldName = prefix ? `${prefix}.${key}` : key; + if (nestedValue && typeof nestedValue === "object" && !Array.isArray(nestedValue)) { + rows.push(...flattenUsageFields(nestedValue, fieldName)); + } else { + rows.push([fieldName, nestedValue]); + } + }); + return rows; +} + +/** + * Get token usage percent. + * @param telemetry + / +export function getTokenUsagePercent(telemetry?: TokenTelemetry) { + const activeTokens = Number(telemetry?.activeTokens || 0); + const threshold = Number(telemetry?.compactPromptTokenThreshold || 0); + if (!Number.isFinite(activeTokens) || !Number.isFinite(threshold) || threshold <= 0) { + return 0; + } + return Math.trunc(((0.5 activeTokens) / threshold) * 100); +} + +/** + * Format usage field label. + * @param label + */ +export function formatUsageFieldLabel(label: string) { + if (label === "prompt_tokens_details.cached_tokens") { + return "prompt_cached_tokens"; + } + if (label === "completion_tokens_details.reasoning_tokens") { + return "completion_reasoning_tokens"; + } + return label; +} + +/** + * Convert a string to title case. + * @param str + */ +const acronymMap: Record = { + api: "API", + id: "ID", + url: "URL", + http: "HTTP", + https: "HTTPS", + cpu: "CPU", + gpu: "GPU", +}; + +/** + * 将下划线命名的字符串转换为标题大小写的可读字符串。 + * + * @param str - 下划线分隔的字符串，如 `'prompt_cache_miss_tokens'` 或 `'api_key'` + * @returns 转换后的字符串，如 `'Prompt Cache Miss Tokens'` + * + * @example + * toTitleCase('prompt_cache_miss_tokens') // "Prompt Cache Miss Tokens" + * toTitleCase('api-key') // "Api Key" + * toTitleCase('api_key') // "Api Key" + * toTitleCase('api__key') // "Api Key" + * toTitleCase('') // "" + */ +export function toTitleCase(str: string): string { + if (!str) return ""; + + return str + .trim() + .split(/[\s_-]+/) + .filter(Boolean) + .map((word) => { + const lower = word.toLowerCase(); + + if (acronymMap[lower]) { + return acronymMap[lower]; + } + + return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); + }) + .join(" "); +} + +/** + * 将字符串的首字母大写。 + * @param str + */ +export function capitalize(str: string): string { + if (!str) return str; + return str.charAt(0).toUpperCase() + str.slice(1); +} + +/** + * 构建 AskUserQuestion 的回复。 + * @param questions + */ +export function buildAskUserQuestionReply(questions: AnswerFormValues["answers"]) { + const lines = ["Answer to AskUserQuestion:"]; + + for (let index = 0; index < questions.length; index += 1) { + const question = questions[index]; + + const otherText = question?.other?.trim() || ""; + + if (question?.options?.length === 0 && !otherText) { + return { + ok: false, + error: `Please answer question ${index + 1}.`, + }; + } + + lines.push(""); + lines.push(`${index + 1}. ${question.question}`); + if ((question?.options || [])?.length > 0) { + lines.push(`- Selected: ${(question?.options || []).join(", ")}`); + } + if (otherText) { + lines.push(`- Other: ${otherText}`); + } + } + + return { + ok: true, + text: lines.join("\n"), + }; +} diff --git a/packages/vscode-ide-companion/src/webview/utils/utils.test.ts b/packages/vscode-ide-companion/src/webview/utils/utils.test.ts new file mode 100644 index 00000000..a7e6e6b5 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/utils/utils.test.ts @@ -0,0 +1,240 @@ +/** + * Unit tests for utils/index.ts + * + * Tests cover: + * - flattenUsageFields + * - getTokenUsagePercent + * - formatUsageFieldLabel + * - toTitleCase + * - buildAskUserQuestionReply + / + +import { describe, it, expect } from "vitest"; +import { + flattenUsageFields, + getTokenUsagePercent, + formatUsageFieldLabel, + toTitleCase, + buildAskUserQuestionReply, +} from "./index"; +import type { AnswerFormValues } from "@/webview/components/AskQuestionCarousel"; +import type { TokenTelemetry } from "@/webview/types"; + +describe("flattenUsageFields", () => { + it("returns empty array for null input", () => { + expect(flattenUsageFields(null)).toEqual([]); + expect(flattenUsageFields(undefined)).toEqual([]); + }); + + it("returns empty array for primitive values", () => { + expect(flattenUsageFields(123)).toEqual([]); + expect(flattenUsageFields("string")).toEqual([]); + expect(flattenUsageFields(true)).toEqual([]); + }); + + it("returns empty array for arrays", () => { + expect(flattenUsageFields([1, 2, 3])).toEqual([]); + }); + + it("flattens nested objects with prefix", () => { + const input = { + prompt_tokens: 100, + completion_tokens: 50, + details: { + reasoning_tokens: 20, + }, + }; + + const result = flattenUsageFields(input); + + expect(result).toContainEqual(["prompt_tokens", 100]); + expect(result).toContainEqual(["completion_tokens", 50]); + expect(result).toContainEqual(["details.reasoning_tokens", 20]); + }); + + it("handles flat objects without prefix", () => { + const input = { a: 1, b: 2 }; + const result = flattenUsageFields(input); + + expect(result).toContainEqual(["a", 1]); + expect(result).toContainEqual(["b", 2]); + }); +}); + +describe("getTokenUsagePercent", () => { + it("returns 0 for undefined telemetry", () => { + expect(getTokenUsagePercent(undefined)).toBe(0); + }); + + it("returns 0 when activeTokens is 0", () => { + expect( + getTokenUsagePercent({ activeTokens: 0, compactPromptTokenThreshold: 1000 } as unknown as TokenTelemetry) + ).toBe(0); + }); + + it("returns 0 when threshold is 0", () => { + expect( + getTokenUsagePercent({ activeTokens: 500, compactPromptTokenThreshold: 0 } as unknown as TokenTelemetry) + ).toBe(0); + }); + + it("returns 0 when threshold is negative", () => { + expect( + getTokenUsagePercent({ activeTokens: 500, compactPromptTokenThreshold: -100 } as unknown as TokenTelemetry) + ).toBe(0); + }); + + it("calculates correct percentage", () => { + // Formula: (0.5 activeTokens) / threshold * 100 + // (0.5 * 500) / 1000 * 100 = 250 / 1000 * 100 = 0.25 * 100 = 25 + const result = getTokenUsagePercent({ + activeTokens: 500, + compactPromptTokenThreshold: 1000, + } as unknown as TokenTelemetry); + expect(result).toBe(25); + }); + + it("floors the result", () => { + // Formula: (0.5 * activeTokens) / threshold * 100 + // (0.5 * 333) / 1000 * 100 = 166.5 / 1000 * 100 = 0.1665 * 100 = 16.65 + // truncated = 16 + const result = getTokenUsagePercent({ + activeTokens: 333, + compactPromptTokenThreshold: 1000, + } as unknown as TokenTelemetry); + expect(result).toBe(16); + }); + + it("handles string values", () => { + // String "500" converts to 500, "1000" to 1000 + // 500 / 1000 = 0.5, * 100 = 50 + // But Number("500") = 500, Number("1000") = 1000 + const result = getTokenUsagePercent({ + activeTokens: "500", + compactPromptTokenThreshold: "1000", + } as unknown as TokenTelemetry); + // The function uses Number() which converts strings correctly + // But the formula is (0.5 * activeTokens) / threshold + // So (0.5 * 500) / 1000 = 250 / 1000 = 0.25 * 100 = 25 + expect(result).toBe(25); + }); +}); + +describe("formatUsageFieldLabel", () => { + it("returns original label for non-matching strings", () => { + expect(formatUsageFieldLabel("some_field")).toBe("some_field"); + expect(formatUsageFieldLabel("")).toBe(""); + }); + + it("formats cached_tokens", () => { + expect(formatUsageFieldLabel("prompt_tokens_details.cached_tokens")).toBe("prompt_cached_tokens"); + }); + + it("formats reasoning_tokens", () => { + expect(formatUsageFieldLabel("completion_tokens_details.reasoning_tokens")).toBe("completion_reasoning_tokens"); + }); +}); + +describe("toTitleCase", () => { + it("converts empty string to empty string", () => { + expect(toTitleCase("")).toBe(""); + }); + + it("converts single word", () => { + expect(toTitleCase("hello")).toBe("Hello"); + }); + + it("converts underscore separated words", () => { + expect(toTitleCase("hello_world")).toBe("Hello World"); + }); + + it("converts multiple underscores", () => { + expect(toTitleCase("prompt_cache_hit_tokens")).toBe("Prompt Cache Hit Tokens"); + }); + + it("handles acronyms via acronymMap", () => { + // "api" matches acronymMap → "API", "key" doesn't → lowercased to "Key" + expect(toTitleCase("API_KEY")).toBe("API Key"); + }); + + it("handles mixed case by lowercasing after the first character", () => { + // word.slice(1).toLowerCase() converts "helloWorld" → "Helloworld" + expect(toTitleCase("helloWorld")).toBe("Helloworld"); + }); +}); + +describe("buildAskUserQuestionReply", () => { + it("returns error when all answers are empty", () => { + const answers = [{ question: "Q1", options: [], other: "" }] as AnswerFormValues["answers"]; + + const result = buildAskUserQuestionReply(answers); + + expect(result.ok).toBe(false); + expect(result.error).toContain("Please answer question 1"); + }); + + it("returns error for partially empty answers", () => { + const answers = [ + { question: "Q1", options: ["A"], other: "" }, + { question: "Q2", options: [], other: "" }, + ] as AnswerFormValues["answers"]; + + const result = buildAskUserQuestionReply(answers); + + expect(result.ok).toBe(false); + expect(result.error).toContain("Please answer question 2"); + }); + + it("returns ok with text when answers are valid (options only)", () => { + const answers = [{ question: "Q1", options: ["A", "B"], other: "" }] as AnswerFormValues["answers"]; + + const result = buildAskUserQuestionReply(answers); + + expect(result.ok).toBe(true); + expect(result.text).toContain("Answer to AskUserQuestion:"); + expect(result.text).toContain("1. Q1"); + expect(result.text).toContain("Selected: A, B"); + }); + + it("returns ok with text when answers are valid (other only)", () => { + const answers = [{ question: "Q1", options: [], other: "Custom answer" }] as AnswerFormValues["answers"]; + + const result = buildAskUserQuestionReply(answers); + + expect(result.ok).toBe(true); + expect(result.text).toContain("Other: Custom answer"); + }); + + it("returns ok with text when answers have both options and other", () => { + const answers = [{ question: "Q1", options: ["A"], other: "Additional info" }] as AnswerFormValues["answers"]; + + const result = buildAskUserQuestionReply(answers); + + expect(result.ok).toBe(true); + expect(result.text).toContain("Selected: A"); + expect(result.text).toContain("Other: Additional info"); + }); + + it("handles multiple questions", () => { + const answers = [ + { question: "Q1", options: ["A"], other: "" }, + { question: "Q2", options: ["B", "C"], other: "" }, + { question: "Q3", options: [], other: "Custom" }, + ] as AnswerFormValues["answers"]; + + const result = buildAskUserQuestionReply(answers); + + expect(result.ok).toBe(true); + expect(result.text).toContain("1. Q1"); + expect(result.text).toContain("2. Q2"); + expect(result.text).toContain("3. Q3"); + }); + + it("trims whitespace from other field", () => { + const answers = [{ question: "Q1", options: [], other: " " }] as AnswerFormValues["answers"]; + + const result = buildAskUserQuestionReply(answers); + + expect(result.ok).toBe(false); // Empty after trim + }); +}); diff --git a/packages/vscode-ide-companion/src/webview/vite-env.d.ts b/packages/vscode-ide-companion/src/webview/vite-env.d.ts new file mode 100644 index 00000000..96c80f18 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/vite-env.d.ts @@ -0,0 +1,11 @@ +/// + +declare module ".svg" { + const src: string; + export default src; +} + +declare module ".png" { + const src: string; + export default src; +} diff --git a/packages/vscode-ide-companion/src/webview/wrpc.ts b/packages/vscode-ide-companion/src/webview/wrpc.ts new file mode 100644 index 00000000..04815ccd --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/wrpc.ts @@ -0,0 +1,80 @@ +import { createWrpcClient } from "@webview-rpc/client"; +import { withReactQuery } from "@webview-rpc/react-query"; +import type { AppRouter } from "@/router"; + +// --------------------------------------------------------------------------- +// Extract per-procedure input / output from the AppRouter type so that +// direct method calls (wrpc.getSkills.query()) are fully type-safe. +// --------------------------------------------------------------------------- + +/** A router-level procedure carries _input / _output brand fields. */ +type ProcedureLike = { _input: unknown; _output: unknown }; + +type ExtractInput
= P extends { _input: infer I } ? I : never; +type ExtractOutput
= P extends { _output: infer O } ? Awaited : never; + +/** Given a router-def, produce { procName: { query; mutate } } for every procedure. */ +type ProcedureMethods = { + [K in keyof T as T[K] extends ProcedureLike ? K : never]: T[K] extends ProcedureLike + ? { + query: (input?: ExtractInput) => Promise>; + mutate: (input?: ExtractInput) => Promise>; + } + : never; +}; + +// --------------------------------------------------------------------------- +// Base client (provides call / useQuery / useMutation / useUtils) +// --------------------------------------------------------------------------- + +type BaseClient = ReturnType>; + +/** The full wrpc client: base methods + per-procedure { query, mutate } stubs. */ +export type WrpcClient = BaseClient & ProcedureMethods; + +const baseClient = withReactQuery(createWrpcClient()); + +// --------------------------------------------------------------------------- +// Proxy – bridges the gap between the AppRouter type-level API and the +// runtime API which only exposes call / useQuery / useMutation / useUtils. +// +// wrpc.getSkills.query() → wrpc.call("getSkills") +// wrpc.sendPrompt.mutate(in) → wrpc.call("sendPrompt", in) +// --------------------------------------------------------------------------- + +export const wrpc: WrpcClient = new Proxy(baseClient, { + get(target, prop, receiver) { + if (prop === "call" || prop === "useQuery" || prop === "useMutation" || prop === "useUtils") { + return Reflect.get(target, prop, receiver); + } + const path = String(prop); + return { + query: (input?: unknown) => { + console.log(`[wrpc] query: ${path}`, input); + return target.call(path, input).then( + (result: unknown) => { + console.log(`[wrpc] query: ${path} → resolved`, result); + return result; + }, + (err: unknown) => { + console.error(`[wrpc] query: ${path} → rejected`, err); + throw err; + } + ); + }, + mutate: (input?: unknown) => { + console.log(`[wrpc] mutate: ${path}`, input); + return target.call(path, input).then( + (result: unknown) => { + console.log(`[wrpc] mutate: ${path} → resolved`, result); + return result; + }, + (err: unknown) => { + console.error(`[wrpc] mutate: ${path} → rejected`, err); + throw err; + } + ); + }, + }; + }, +}) as WrpcClient; diff --git a/packages/vscode-ide-companion/tsconfig.build.json b/packages/vscode-ide-companion/tsconfig.build.json deleted file mode 100644 index 8601700a..00000000 --- a/packages/vscode-ide-companion/tsconfig.build.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2022", - "module": "ESNext", - "moduleResolution": "bundler", - "ignoreDeprecations": "6.0", - "lib": ["ES2022"], - "strict": true, - "esModuleInterop": true, - "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, - "resolveJsonModule": true, - "composite": true, - "declaration": true, - "outDir": "./dist", - "rootDir": "./src", - "types": ["node", "vscode"] - }, - "include": ["src/**/.ts"], - "exclude": ["node_modules", "dist"] -} diff --git a/packages/vscode-ide-companion/tsconfig.json b/packages/vscode-ide-companion/tsconfig.json index c0d84433..df5e1311 100644 --- a/packages/vscode-ide-companion/tsconfig.json +++ b/packages/vscode-ide-companion/tsconfig.json @@ -3,21 +3,24 @@ "target": "ES2022", "module": "ESNext", "moduleResolution": "bundler", - "ignoreDeprecations": "6.0", - "lib": ["ES2022"], + "lib": ["ES2022", "dom"], + "sourceMap": true, "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "noEmit": true, - "types": ["node", "vscode"], + "types": ["node", "vscode", "vitest/globals"], "baseUrl": ".", "paths": { "@vegamo/deepcode-core": ["../core/src/index.ts"], - "@vegamo/deepcode-core/": ["../core/src/"] - } + "@vegamo/deepcode-core/": ["../core/src/"], + "@/": ["./src/*"] + }, + "jsx": "react-jsx", + "jsxImportSource": "react" }, - "include": ["src/**/*.ts"], - "exclude": ["node_modules", ".vscode-test", "out"] + "include": ["src/**/*.ts", "src/**/*.tsx", "../core/src/**/.ts"], + "exclude": ["node_modules", ".vscode-test", "dist"] } diff --git a/packages/vscode-ide-companion/tsconfig.webview.json b/packages/vscode-ide-companion/tsconfig.webview.json new file mode 100644 index 00000000..bc2f4f35 --- /dev/null +++ b/packages/vscode-ide-companion/tsconfig.webview.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "types": ["vite/client", "node"], + "moduleResolution": "bundler", + "jsx": "react-jsx", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "noEmit": true, + "baseUrl": ".", + "paths": { + "@/": ["./src/"], + "@/webview/": ["./src/webview/*"] + } + }, + "include": ["src/webview/**/*.ts", "src/webview/**/*.tsx"], + "exclude": ["node_modules", "src/webview/**/*.test.ts", "src/webview/**/.test.tsx"] +} diff --git a/packages/vscode-ide-companion/vite.config.ts b/packages/vscode-ide-companion/vite.config.ts new file mode 100644 index 00000000..abd93bb6 --- /dev/null +++ b/packages/vscode-ide-companion/vite.config.ts @@ -0,0 +1,43 @@ +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; +import tailwindcss from "@tailwindcss/vite"; +import path from "path"; + +export default defineConfig(({ command }) => { + const port = 5174; + + return { + root: "src/webview", + plugins: [react(), tailwindcss()], + resolve: { + alias: { + "@": path.resolve(dirname, "./src"), + "@/webview": path.resolve(dirname, "./src/webview"), + }, + }, + base: "./", + server: + command === "serve" + ? { + port, + strictPort: true, + cors: { origin: "" }, + headers: { "Access-Control-Allow-Origin": "*" }, + } + : undefined, + build: { + assetsInlineLimit: 10000, + outDir: path.resolve(__dirname, "dist/webview"), + emptyOutDir: true, + rollupOptions: { + output: { + manualChunks(id) { + if (id.includes("node_modules")) { + return "vendor"; // 所有 node_modules 中的代码打包成 vendor.[hash].js + } + }, + }, + }, + }, + }; +}); diff --git a/packages/vscode-ide-companion/vitest.config.ts b/packages/vscode-ide-companion/vitest.config.ts new file mode 100644 index 00000000..741fefdc --- /dev/null +++ b/packages/vscode-ide-companion/vitest.config.ts @@ -0,0 +1,28 @@ +import { defineConfig } from "vitest/config"; +import react from "@vitejs/plugin-react-swc"; +import tailwindcss from "@tailwindcss/vite"; +import path from "path"; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + resolve: { + alias: { + "@": path.resolve(dirname, "./src"), + "@/webview": path.resolve(dirname, "./src/webview"), + vscode: path.resolve(dirname, "./src/tests/mocks__/vscode.ts"), + }, + }, + test: { + globals: true, + environment: "jsdom", + setupFiles: ["./src/tests/setup.ts"], + include: ["src/**/*.test.{ts,tsx}"], + // Exclude extension tests that require VS Code runtime + exclude: ["node_modules", "dist", "src/extension.test.ts"], + coverage: { + provider: "v8", + reporter: ["text", "json", "html"], + exclude: ["node_modules", "dist", "**/*.d.ts", "src/tests/", "/index.ts"], + }, + }, +}); diff --git a/packages/vscode-ide-companion/resources/deepcode_screenshot.png b/resources/deepcode_screenshot.png similarity index 100% rename from packages/vscode-ide-companion/resources/deepcode_screenshot.png rename to resources/deepcode_screenshot.png diff --git a/packages/vscode-ide-companion/resources/faq1.gif b/resources/faq1.gif similarity index 100% rename from packages/vscode-ide-companion/resources/faq1.gif rename to resources/faq1.gif diff --git a/scripts/build-vscode-companion.js b/scripts/build-vscode-companion.js index 7fbb1c2a..d4b2dbe5 100644 --- a/scripts/build-vscode-companion.js +++ b/scripts/build-vscode-companion.js @@ -1,5 +1,4 @@ import { spawnSync } from "node:child_process"; -import { cpSync, existsSync, rmSync } from "node:fs"; import { dirname, join } from "node:path"; import { fileURLToPath } from "node:url"; @@ -18,21 +17,14 @@ console.log(" Deep Code — Build VSCode Companion"); console.log("========================================="); run("npm", ["run", "build", "--workspace=@vegamo/deepcode-core"], "1/4 Build core"); -run("node", ["scripts/esbuild-vscode.config.js"], "2/4 Bundle extension"); -// Copy templates from core so the extension can read them at runtime via fs -const templatesSrc = join(root, "packages", "core", "templates"); -const templatesDest = join(root, "packages", "vscode-ide-companion", "templates"); +// Build webview first (Vite → dist/webview/) +run("npm", ["run", "build:webview", "--workspace=deepcode-vscode"], "2/4 Build webview"); -if (!existsSync(templatesSrc)) { - console.error(`\n❌ Templates not found at ${templatesSrc}`); - process.exit(1); -} - -rmSync(templatesDest, { recursive: true, force: true }); -cpSync(templatesSrc, templatesDest, { recursive: true, dereference: true }); -console.log("\n[3/4] Copied templates from core → vscode-ide-companion/templates/"); +// Build extension (esbuild bundle + copy templates → dist/extension.js) +run("npm", ["run", "build", "--workspace=deepcode-vscode"], "3/4 Build extension"); +// Package into .vsix for local verification run("npm", ["run", "package", "--workspace=deepcode-vscode"], "4/4 Package .vsix"); console.log("\n✅ VSCode companion build complete.\n\n"); diff --git a/scripts/clean.js b/scripts/clean.js index 4fd4c7e6..e8bc7ee0 100644 --- a/scripts/clean.js +++ b/scripts/clean.js @@ -32,8 +32,6 @@ for (const pkgDir of packageDirs) { // VSCode companion specific artifacts const vscodeDir = join(root, "packages", "vscode-ide-companion"); -rmSync(join(vscodeDir, "out"), RMRF); -console.log(" rm packages/vscode-ide-companion/out/"); rmSync(join(vscodeDir, "templates"), RMRF); console.log(" rm packages/vscode-ide-companion/templates/"); diff --git a/scripts/copy-bundle-assets.js b/scripts/copy-bundle-assets.js index c1905c79..23fc46cb 100644 --- a/scripts/copy-bundle-assets.js +++ b/scripts/copy-bundle-assets.js @@ -1,4 +1,4 @@ -import { cpSync, existsSync, mkdirSync, rmSync, statSync } from "node:fs"; +import { cpSync, existsSync, mkdirSync, rmSync } from "node:fs"; import { dirname, join, relative } from "node:path"; import { fileURLToPath } from "node:url"; diff --git a/scripts/esbuild-vscode.config.js b/scripts/esbuild-vscode.config.js deleted file mode 100644 index 25cd2bc2..00000000 --- a/scripts/esbuild-vscode.config.js +++ /dev/null @@ -1,29 +0,0 @@ -import { build } from "esbuild"; -import { dirname, join } from "node:path"; -import { fileURLToPath } from "node:url"; - -const dirname = dirname(fileURLToPath(import.meta.url)); -const root = join(dirname, ".."); - -const vscodeRoot = join(root, "packages", "vscode-ide-companion"); -const entry = join(vscodeRoot, "src", "extension.ts"); -const outfile = join(vscodeRoot, "out", "extension.js"); - -await build({ - entryPoints: [entry], - bundle: true, - platform: "node", - format: "cjs", - target: "node18", - outfile, - external: ["vscode"], - sourcemap: true, - footer: { - js: "module.exports = { activate, deactivate };", - }, - logOverride: { - "empty-import-meta": "silent", - }, -}); - -console.log(`\n✅ ${outfile} built successfully\n\n`); diff --git a/scripts/prepare-vscode.js b/scripts/prepare-vscode.js index a9e0cb83..8b536de5 100644 --- a/scripts/prepare-vscode.js +++ b/scripts/prepare-vscode.js @@ -80,6 +80,7 @@ const args = process.argv.slice(2); let version = null; let dryRun = false; let force = false; +let preRelease = false; for (let i = 0; i < args.length; i++) { const arg = args[i]; @@ -87,6 +88,8 @@ for (let i = 0; i < args.length; i++) { dryRun = true; } else if (arg === "--force") { force = true; + } else if (arg === "--pre-release") { + preRelease = true; } else if (!version) { version = arg; } else { @@ -104,6 +107,7 @@ Arguments: Options: --dry-run Preview all steps without executing --force Skip branch check (publish from non-main branch) + --pre-release Publish as a pre-release (auto-detected for -beta/-alpha versions) Environment: VSCE_PAT Required. Azure DevOps Personal Access Token for marketplace auth. @@ -122,13 +126,20 @@ if (!isValidSemver(version)) { fail(`Invalid semver version: ${version}`); } +// Auto-detect pre-release: version contains a pre-release identifier (e.g. -beta.1, -alpha.0, -rc.2) +const isPrereleaseVersion = /^\d+\.\d+\.\d+-/.test(version); +if (!preRelease && isPrereleaseVersion) { + preRelease = true; + log("\n🔖 Detected pre-release version — enabling --pre-release flag.\n"); +} + const TOTAL_STEPS = 7; // ── Banner ─────────────────────────────────────────────────────────────────── log("========================================="); log(` Deep Code VSCode — Publish v${version}`); -log(` dryRun=${dryRun} force=${force}`); +log(` dryRun=${dryRun} force=${force} preRelease=${preRelease}`); log("========================================="); // ── 1. Git checks ──────────────────────────────────────────────────────────── @@ -219,6 +230,7 @@ step(7, TOTAL_STEPS, "Publishing deepcode-vscode to marketplace..."); const vscodeRoot = join(root, "packages", "vscode-ide-companion"); const vsceArgs = ["vsce", "publish", version, "--no-dependencies"]; +if (preRelease) vsceArgs.push("--pre-release"); if (dryRun) vsceArgs.splice(2, 0, "--dry-run"); run("npx", vsceArgs, {

Something went wrong

/