feat(desktop): add slash commands and chat UI improvements

.claude/commands/create-pr.md

@@ -13,11 +13,15 @@ Create a pull request for the current branch.
 
 ## Step 2: Analyze Changes
 
+First, determine the base branch to diff against:
+- Run `git fetch origin main --quiet` to ensure the remote ref is up to date
+- Use `origin/main` (not local `main`) as the base for all diff/log commands — local `main` may be stale
+
 Run in parallel:
-- `git log main..HEAD --oneline` — commit history
-- `git log main..HEAD --format="%B---"` — full commit messages for context
-- `git diff main...HEAD --stat` — file change overview
-- `git diff main...HEAD` — full diff
+- `git log origin/main..HEAD --oneline` — commit history
+- `git log origin/main..HEAD --format="%B---"` — full commit messages for context
+- `git diff origin/main...HEAD --stat` — file change overview
+- `git diff origin/main...HEAD` — full diff
 
 Read the diff carefully to understand what changed and why.
 

apps/desktop/src/lib/trpc/routers/ai-chat/index.ts

@@ -1,3 +1,6 @@
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
 import { observable } from "@trpc/server/observable";
 import { z } from "zod";
 import { publicProcedure, router } from "../..";
@@ -11,6 +14,49 @@ import {
 	sessionStore,
 } from "./utils/session-manager";
 
+interface CommandEntry {
+	name: string;
+	description: string;
+	argumentHint: string;
+}
+
+function scanCustomCommands(cwd: string): CommandEntry[] {
+	const dirs = [
+		join(cwd, ".claude", "commands"),
+		join(homedir(), ".claude", "commands"),
+	];
+	const commands: CommandEntry[] = [];
+	const seen = new Set<string>();
+
+	for (const dir of dirs) {
+		if (!existsSync(dir)) continue;
+		try {
+			for (const file of readdirSync(dir)) {
+				if (!file.endsWith(".md")) continue;
+				const name = file.replace(/\.md$/, "");
+				if (seen.has(name)) continue;
+				seen.add(name);
+				const raw = readFileSync(join(dir, file), "utf-8");
+				const fmMatch = raw.match(/^---\n([\s\S]*?)\n---/);
+				const descMatch = fmMatch?.[1]?.match(/^description:\s*(.+)$/m);
+				const argMatch = fmMatch?.[1]?.match(/^argument-hint:\s*(.+)$/m);
+				commands.push({
+					name,
+					description: descMatch?.[1]?.trim() ?? "",
+					argumentHint: argMatch?.[1]?.trim() ?? "",
+				});
+			}
+		} catch (err) {
+			console.warn(
+				`[ai-chat/scanCustomCommands] Failed to read commands from ${dir}:`,
+				err,
+			);
+		}
+	}
+
+	return commands;
+}
+
 export const createAiChatRouter = () => {
 	return router({
 		getConfig: publicProcedure.query(() => ({
@@ -21,6 +67,12 @@ export const createAiChatRouter = () => {
 				null,
 		})),
 
+		getSlashCommands: publicProcedure
+			.input(z.object({ cwd: z.string() }))
+			.query(({ input }) => {
+				return { commands: scanCustomCommands(input.cwd) };
+			}),
+
 		startSession: publicProcedure
 			.input(
 				z.object({

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/ChatInterface.tsx

@@ -29,8 +29,10 @@ import {
 } from "./components/FileMentionPopover";
 import { ModelPicker } from "./components/ModelPicker";
 import { PermissionModePicker } from "./components/PermissionModePicker";
+import { SlashCommandInput } from "./components/SlashCommandInput";
 import { MODELS } from "./constants";
 import { useClaudeCodeHistory } from "./hooks/useClaudeCodeHistory";
+import type { SlashCommand } from "./hooks/useSlashCommands";
 import type { ModelOption, PermissionMode } from "./types";
 
 interface ChatInterfaceProps {
@@ -269,6 +271,13 @@ export function ChatInterface({
 		[stop],
 	);
 
+	const handleSlashCommandSend = useCallback(
+		(command: SlashCommand) => {
+			handleSend({ text: `/${command.name}` });
+		},
+		[handleSend],
+	);
+
 	return (
 		<div className="flex h-full flex-col bg-background">
 			{connectionStatus !== "connected" &&
@@ -316,43 +325,48 @@ export function ChatInterface({
 					)}
 					<PromptInputProvider>
 						<FileMentionProvider cwd={cwd}>
-							<FileMentionAnchor>
-								<PromptInput onSubmit={handleSend}>
-									<PromptInputTextarea placeholder="Ask anything..." />
-									<PromptInputFooter>
-										<PromptInputTools>
-											<PromptInputButton>
-												<HiMiniPaperClip className="size-4" />
-											</PromptInputButton>
-											<FileMentionTrigger />
-											<ThinkingToggle
-												enabled={thinkingEnabled}
-												onToggle={handleThinkingToggle}
-											/>
-											<ModelPicker
-												selectedModel={selectedModel}
-												onSelectModel={handleModelSelect}
-												open={modelSelectorOpen}
-												onOpenChange={setModelSelectorOpen}
-											/>
-											<PermissionModePicker
-												selectedMode={permissionMode}
-												onSelectMode={handlePermissionModeSelect}
-											/>
-										</PromptInputTools>
-										<div className="flex items-center gap-1">
-											<ContextIndicator
-												collections={collections}
-												modelId={selectedModel.id}
-											/>
-											<PromptInputSubmit
-												status={isLoading ? "streaming" : undefined}
-												onClick={isLoading ? handleStop : undefined}
-											/>
-										</div>
-									</PromptInputFooter>
-								</PromptInput>
-							</FileMentionAnchor>
+							<SlashCommandInput
+								onCommandSend={handleSlashCommandSend}
+								cwd={cwd}
+							>
+								<FileMentionAnchor>
+									<PromptInput onSubmit={handleSend}>
+										<PromptInputTextarea placeholder="Ask anything..." />
+										<PromptInputFooter>
+											<PromptInputTools>
+												<PromptInputButton>
+													<HiMiniPaperClip className="size-4" />
+												</PromptInputButton>
+												<FileMentionTrigger />
+												<ThinkingToggle
+													enabled={thinkingEnabled}
+													onToggle={handleThinkingToggle}
+												/>
+												<ModelPicker
+													selectedModel={selectedModel}
+													onSelectModel={handleModelSelect}
+													open={modelSelectorOpen}
+													onOpenChange={setModelSelectorOpen}
+												/>
+												<PermissionModePicker
+													selectedMode={permissionMode}
+													onSelectMode={handlePermissionModeSelect}
+												/>
+											</PromptInputTools>
+											<div className="flex items-center gap-1">
+												<ContextIndicator
+													collections={collections}
+													modelId={selectedModel.id}
+												/>
+												<PromptInputSubmit
+													status={isLoading ? "streaming" : undefined}
+													onClick={isLoading ? handleStop : undefined}
+												/>
+											</div>
+										</PromptInputFooter>
+									</PromptInput>
+								</FileMentionAnchor>
+							</SlashCommandInput>
 						</FileMentionProvider>
 					</PromptInputProvider>
 				</div>

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/components/SlashCommandInput/SlashCommandInput.tsx

@@ -0,0 +1,87 @@
+import { usePromptInputController } from "@superset/ui/ai-elements/prompt-input";
+import { Popover, PopoverAnchor } from "@superset/ui/popover";
+import { useCallback } from "react";
+import {
+	resolveCommandAction,
+	type SlashCommand,
+	useSlashCommands,
+} from "../../hooks/useSlashCommands";
+import { SlashCommandMenu } from "../SlashCommandMenu";
+
+interface SlashCommandInputProps {
+	onCommandSend: (command: SlashCommand) => void;
+	cwd: string;
+	children: React.ReactNode;
+}
+
+export function SlashCommandInput({
+	onCommandSend,
+	cwd,
+	children,
+}: SlashCommandInputProps) {
+	const { textInput } = usePromptInputController();
+
+	const slashCommands = useSlashCommands({
+		inputValue: textInput.value,
+		cwd,
+	});
+
+	const executeCommand = useCallback(
+		(command: SlashCommand) => {
+			const action = resolveCommandAction(command);
+			if (action.shouldSend) {
+				onCommandSend(command);
+			}
+			textInput.setInput(action.text);
+		},
+		[onCommandSend, textInput],
+	);
+
+	const handleKeyDownCapture = useCallback(
+		(e: React.KeyboardEvent) => {
+			if (!slashCommands.isOpen) return;
+
+			switch (e.key) {
+				case "Escape":
+					e.preventDefault();
+					e.stopPropagation();
+					textInput.setInput("");
+					break;
+				case "Enter":
+				case "Tab": {
+					e.preventDefault();
+					e.stopPropagation();
+					const cmd =
+						slashCommands.filteredCommands[slashCommands.selectedIndex];
+					if (cmd) executeCommand(cmd);
+					break;
+				}
+				case "ArrowUp":
+					e.preventDefault();
+					e.stopPropagation();
+					slashCommands.navigateUp();
+					break;
+				case "ArrowDown":
+					e.preventDefault();
+					e.stopPropagation();
+					slashCommands.navigateDown();
+					break;
+			}
+		},
+		[slashCommands, textInput, executeCommand],
+	);
+
+	return (
+		<Popover open={slashCommands.isOpen}>
+			<PopoverAnchor asChild>
+				<div onKeyDownCapture={handleKeyDownCapture}>{children}</div>
+			</PopoverAnchor>
+			<SlashCommandMenu
+				commands={slashCommands.filteredCommands}
+				selectedIndex={slashCommands.selectedIndex}
+				onSelect={executeCommand}
+				onHover={slashCommands.setSelectedIndex}
+			/>
+		</Popover>
+	);
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/components/SlashCommandInput/index.ts

@@ -0,0 +1 @@
+export { SlashCommandInput } from "./SlashCommandInput";

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/components/SlashCommandMenu/SlashCommandMenu.tsx

@@ -0,0 +1,72 @@
+import { PopoverContent } from "@superset/ui/popover";
+import { useEffect, useRef } from "react";
+import type { SlashCommand } from "../../hooks/useSlashCommands";
+
+interface SlashCommandMenuProps {
+	commands: SlashCommand[];
+	selectedIndex: number;
+	onSelect: (command: SlashCommand) => void;
+	onHover: (index: number) => void;
+}
+
+export function SlashCommandMenu({
+	commands,
+	selectedIndex,
+	onSelect,
+	onHover,
+}: SlashCommandMenuProps) {
+	const selectedRef = useRef<HTMLButtonElement>(null);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: must scroll when selectedIndex changes
+	useEffect(() => {
+		selectedRef.current?.scrollIntoView({ block: "nearest" });
+	}, [selectedIndex]);
+
+	if (commands.length === 0) return null;
+
+	return (
+		<PopoverContent
+			side="top"
+			align="start"
+			sideOffset={0}
+			className="w-80 p-0 text-xs"
+			onOpenAutoFocus={(e) => e.preventDefault()}
+			onCloseAutoFocus={(e) => e.preventDefault()}
+		>
+			<div className="max-h-[200px] overflow-y-auto p-1">
+				{commands.map((cmd, index) => (
+					<button
+						key={cmd.name}
+						ref={index === selectedIndex ? selectedRef : undefined}
+						type="button"
+						className={`flex w-full cursor-pointer flex-col gap-0.5 rounded-md px-3 py-2 text-left transition-colors ${
+							index === selectedIndex
+								? "bg-accent text-accent-foreground"
+								: "hover:bg-accent/50"
+						}`}
+						onMouseEnter={() => onHover(index)}
+						onMouseDown={(e) => {
+							e.preventDefault();
+							onSelect(cmd);
+						}}
+					>
+						<div className="flex items-center gap-1.5">
+							<span className="font-mono text-muted-foreground">/</span>
+							<span className="font-medium">{cmd.name}</span>
+							{cmd.argumentHint && (
+								<span className="text-muted-foreground">
+									{cmd.argumentHint}
+								</span>
+							)}
+						</div>
+						{cmd.description && (
+							<span className="text-muted-foreground pl-4">
+								{cmd.description}
+							</span>
+						)}
+					</button>
+				))}
+			</div>
+		</PopoverContent>
+	);
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/components/SlashCommandMenu/index.ts

@@ -0,0 +1 @@
+export { SlashCommandMenu } from "./SlashCommandMenu";

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/hooks/useSlashCommands/index.ts

@@ -0,0 +1,5 @@
+export {
+	resolveCommandAction,
+	type SlashCommand,
+	useSlashCommands,
+} from "./useSlashCommands";