diff --git a/apps/server/src/wsServer.ts b/apps/server/src/wsServer.ts index 60ed5abf8d231d9e66ea00c95ce66cc78dba248d..f9458ca33dc5f9338b7286e9b77ebccb30cad7a8 100644 --- a/apps/server/src/wsServer.ts +++ b/apps/server/src/wsServer.ts @@ -324,11 +324,32 @@ export function createServer(options: ServerOptions) { if (!params?.cwd) throw new Error("cwd is required"); const editorDef = EDITORS.find((e) => e.id === params.editor); if (!editorDef) throw new Error(`Unknown editor: ${params.editor}`); - if (!editorDef.command) { - // Can't open file manager programmatically from server, just succeed silently + + let command: string; + let args: string[]; + + if (editorDef.command) { + command = editorDef.command; + args = [params.cwd]; + } else if (editorDef.id === "file-manager") { + // Use platform-specific file manager command + switch (process.platform) { + case "darwin": + command = "open"; + break; + case "win32": + command = "explorer"; + break; + default: + command = "xdg-open"; + break; + } + args = [params.cwd]; + } else { return undefined; } - const child = spawn(editorDef.command, [params.cwd], { + + const child = spawn(command, args, { detached: true, stdio: "ignore", }); diff --git a/apps/web/components.json b/apps/web/components.json new file mode 100644 index 0000000000000000000000000000000000000000..6d93c116a26739572f788df9eb3f60fa5fb016b2 --- /dev/null +++ b/apps/web/components.json @@ -0,0 +1,27 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "base-mira", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "", + "css": "src/index.css", + "baseColor": "zinc", + "cssVariables": true, + "prefix": "" + }, + "iconLibrary": "lucide", + "rtl": false, + "menuColor": "default", + "menuAccent": "bold", + "aliases": { + "components": "~/components", + "utils": "~/lib/utils", + "ui": "~/components/ui", + "lib": "~/lib", + "hooks": "~/hooks" + }, + "registries": { + "@coss": "https://coss.com/ui/r/{name}.json" + } +} diff --git a/apps/web/package.json b/apps/web/package.json index d2185184eb9aa42820468ab15ffc5315e7f9a378..8f610f069f1d2c0a4a234516873e0647f2130df4 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -11,17 +11,20 @@ "test": "vitest run --passWithNoTests" }, "dependencies": { - "@xterm/addon-fit": "^0.11.0", - "@xterm/xterm": "^6.0.0", + "@base-ui/react": "^1.2.0", "@t3tools/contracts": "workspace:*", "@tanstack/react-query": "^5.90.0", + "@xterm/addon-fit": "^0.11.0", + "@xterm/xterm": "^6.0.0", + "class-variance-authority": "^0.7.1", "highlight.js": "^11.11.1", - "lucide-react": "^0.563.0", + "lucide-react": "^0.564.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-markdown": "^10.1.0", "rehype-highlight": "^7.0.2", "remark-gfm": "^4.0.1", + "tailwind-merge": "^3.4.0", "zod": "^3.24.1" }, "devDependencies": { diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 41c7ff36fc482abec692acf944ed13e9ee998623..8a7e6c0fff8e971d62734db38a888dd55bcaee5b 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -10,6 +10,7 @@ import { StoreProvider, useStore } from "./store"; import { DEFAULT_THREAD_TERMINAL_HEIGHT, DEFAULT_THREAD_TERMINAL_ID } from "./types"; import { onServerWelcome } from "./wsNativeApi"; import { useNativeApi } from "./hooks/useNativeApi"; +import { AnchoredToastProvider, ToastProvider } from "./components/ui/toast"; function EventRouter() { const api = useNativeApi(); @@ -181,7 +182,7 @@ function Layout() { } return ( -
+
@@ -198,7 +199,11 @@ export default function App() { return ( - + + + + + ); diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx index 2abbae13c81cfd651492392f1990bc0b2847690f..b9b38a4b19ef5c22e3f19093c942e0fb3ec386eb 100644 --- a/apps/web/src/components/BranchToolbar.tsx +++ b/apps/web/src/components/BranchToolbar.tsx @@ -1,9 +1,21 @@ import type { GitBranch } from "@t3tools/contracts"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useState } from "react"; -import { useStore } from "../store"; import { useNativeApi } from "../hooks/useNativeApi"; +import { useStore } from "../store"; +import { Button } from "./ui/button"; +import { + Combobox, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, + ComboboxPopup, + ComboboxTrigger, +} from "./ui/combobox"; +import { ChevronDownIcon, PlusIcon } from "lucide-react"; +import { InputGroup, InputGroupAddon, InputGroupInput } from "./ui/input-group"; interface BranchToolbarProps { envMode: "local" | "worktree"; @@ -19,7 +31,6 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B const [isBranchMenuOpen, setIsBranchMenuOpen] = useState(false); const [isCreatingBranch, setIsCreatingBranch] = useState(false); const [newBranchName, setNewBranchName] = useState(""); - const branchMenuRef = useRef(null); const activeThread = state.threads.find((thread) => thread.id === state.activeThreadId); const activeProject = state.projects.find((project) => project.id === activeThread?.projectId); @@ -37,6 +48,8 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B }); const branches = branchesQuery.data?.branches ?? []; + const branchNames = branches.map((branch) => branch.name); + const branchByName = new Map(branches.map((branch) => [branch.name, branch])); // Default to true while loading — showing "Initialize git" during a fetch is wrong, // and worktrees are inherently git repos. const isRepo = branchesQuery.data?.isRepo ?? !branchesQuery.isLoading; @@ -46,8 +59,10 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B const checkoutMutation = useMutation({ mutationFn: (branch: string) => api!.git.checkout({ cwd: branchCwd!, branch }), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["git", "branches", branchCwd] }), - onError: (error) => - setThreadError(error instanceof Error ? error.message : "Failed to checkout branch."), + onError: (error) => { + setThreadError(error instanceof Error ? error.message : "Failed to checkout branch."); + setIsBranchMenuOpen(true); + }, }); const createBranchMutation = useMutation({ @@ -88,17 +103,9 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B }, [activeThreadId, activeWorktreePath, activeThreadBranch, queryBranches, dispatch]); useEffect(() => { - if (!isBranchMenuOpen) return; - const handleClickOutside = (event: MouseEvent) => { - if (!branchMenuRef.current) return; - if (event.target instanceof Node && !branchMenuRef.current.contains(event.target)) { - setIsBranchMenuOpen(false); - } - }; - window.addEventListener("mousedown", handleClickOutside); - return () => { - window.removeEventListener("mousedown", handleClickOutside); - }; + if (isBranchMenuOpen) return; + setIsCreatingBranch(false); + setNewBranchName(""); }, [isBranchMenuOpen]); // ── Helpers ─────────────────────────────────────────────────────────── @@ -171,21 +178,19 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B
{envLocked || activeWorktreePath ? ( - + {activeWorktreePath ? "Worktree" : "Local"} ) : ( - + )}
@@ -199,59 +204,56 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B {initMutation.isPending ? "Initializing\u2026" : "Initialize git"} ) : ( -
- - {isBranchMenuOpen && ( -
-

- Branch -

-
- {branches.map((branch) => { - const isSelected = branch.name === activeThread.branch; - const hasSecondaryWorktree = - branch.worktreePath && branch.worktreePath !== activeProject.cwd; - return ( -
+ No branches found. + + + {(branchName) => { + const branch = branchByName.get(branchName); + if (!branch) return null; + + const hasSecondaryWorktree = + branch.worktreePath && branch.worktreePath !== activeProject.cwd; + return ( + selectBranch(branch)} + > +
+ {branchName} {(branch.current || branch.isDefault || hasSecondaryWorktree) && ( {branch.current @@ -261,58 +263,64 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B : "default"} )} - - ); - })} -
- {envMode === "local" && ( - <> -
- {isCreatingBranch ? ( -
{ - event.preventDefault(); - createBranch(); - }} - > - + + ); + }} + + {envMode === "local" && ( + <> + {isCreatingBranch ? ( + { + event.preventDefault(); + createBranch(); + }} + > + + setNewBranchName(event.target.value)} onKeyDown={(event) => { if (event.key === "Escape") { + event.stopPropagation(); setIsCreatingBranch(false); setNewBranchName(""); } }} - // biome-ignore lint/a11y/noAutofocus: branch name input should focus when shown autoFocus /> - - - ) : ( - - )} - - )} -
- )} -
+ + + + + + ) : ( + + )} + + )} + + )}
); diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx index ba027e16905883504b667850e5ecf429faffb078..c1ba0cbd9c9e798f8e6525f9888ee0815fc7f979 100644 --- a/apps/web/src/components/ChatView.tsx +++ b/apps/web/src/components/ChatView.tsx @@ -4,6 +4,7 @@ import { PROVIDER_SEND_TURN_MAX_IMAGE_BYTES, type ProviderSendTurnAttachmentInput, type ProviderApprovalDecision, + ModelSlug, } from "@t3tools/contracts"; import { type ClipboardEvent, @@ -27,6 +28,7 @@ import { DEFAULT_REASONING, MODEL_OPTIONS, REASONING_OPTIONS, + ReasoningEffort, resolveModelSlug, } from "../model-logic"; import { @@ -46,22 +48,30 @@ import { isTerminalToggleShortcut } from "../terminal-shortcuts"; import ChatMarkdown from "./ChatMarkdown"; import ThreadTerminalDrawer from "./ThreadTerminalDrawer"; import { useNativeApi } from "../hooks/useNativeApi"; +import { Alert, AlertAction, AlertDescription, AlertTitle } from "./ui/alert"; +import { + ChevronDownIcon, + CircleAlertIcon, + FolderClosedIcon, + InfoIcon, + LockIcon, + LockOpenIcon, + XIcon, +} from "lucide-react"; +import { Button } from "./ui/button"; +import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./ui/select"; +import { Separator } from "./ui/separator"; +import { Group, GroupSeparator } from "./ui/group"; +import { Menu, MenuItem, MenuPopup, MenuShortcut, MenuTrigger } from "./ui/menu"; +import { CursorIcon, Icon } from "./Icons"; +import { cn } from "~/lib/utils"; +import { Badge } from "./ui/badge"; function formatMessageMeta(createdAt: string, duration: string | null): string { if (!duration) return formatTimestamp(createdAt); return `${formatTimestamp(createdAt)} • ${duration}`; } -const FILE_MANAGER_LABEL = navigator.platform.includes("Mac") - ? "Finder" - : navigator.platform.includes("Win") - ? "Explorer" - : "Files"; - -function editorLabel(editor: (typeof EDITORS)[number]): string { - return editor.command ? editor.label : FILE_MANAGER_LABEL; -} - const LAST_EDITOR_KEY = "t3code:last-editor"; const MAX_VISIBLE_WORK_LOG_ENTRIES = 6; const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`; @@ -119,13 +129,7 @@ export default function ChatView() { const [expandedImage, setExpandedImage] = useState(null); const [isSending, setIsSending] = useState(false); const [isConnecting, setIsConnecting] = useState(false); - const [isModelMenuOpen, setIsModelMenuOpen] = useState(false); - const [isEditorMenuOpen, setIsEditorMenuOpen] = useState(false); - const [lastEditor, setLastEditor] = useState(() => { - const stored = localStorage.getItem(LAST_EDITOR_KEY); - return EDITORS.some((e) => e.id === stored) ? (stored as EditorId) : EDITORS[0].id; - }); - const [selectedEffort, setSelectedEffort] = useState(DEFAULT_REASONING); + const [selectedEffort, setSelectedEffort] = useState(DEFAULT_REASONING); const [envMode, setEnvMode] = useState<"local" | "worktree">("local"); const [isSwitchingRuntimeMode, setIsSwitchingRuntimeMode] = useState(false); const [respondingRequestIds, setRespondingRequestIds] = useState([]); @@ -137,8 +141,6 @@ export default function ChatView() { const textareaRef = useRef(null); const composerImagesRef = useRef([]); const dragDepthRef = useRef(0); - const modelMenuRef = useRef(null); - const editorMenuRef = useRef(null); const terminalOpenByThreadRef = useRef>({}); const activeThread = state.threads.find((t) => t.id === state.activeThreadId); @@ -150,7 +152,6 @@ export default function ChatView() { const phase = derivePhase(activeThread?.session ?? null); const isWorking = phase === "running" || isSending || isConnecting; const nowIso = new Date(nowTick).toISOString(); - const modelOptions = MODEL_OPTIONS; const workLogEntries = useMemo( () => deriveWorkLogEntries(activeThread?.events ?? [], undefined), [activeThread?.events], @@ -304,7 +305,9 @@ export default function ChatView() { (terminalId: string) => { if (!activeThreadId || !api) return; const fallbackExitWrite = () => - api.terminal.write({ threadId: activeThreadId, terminalId, data: "exit\n" }).catch(() => undefined); + api.terminal + .write({ threadId: activeThreadId, terminalId, data: "exit\n" }) + .catch(() => undefined); if ("close" in api.terminal && typeof api.terminal.close === "function") { void api.terminal .close({ threadId: activeThreadId, terminalId }) @@ -395,22 +398,21 @@ export default function ChatView() { }; }, [revokePreviewUrls]); + /** + * Close expanded image on Escape key + */ useEffect(() => { if (!expandedImage) { return; } const onKeyDown = (event: globalThis.KeyboardEvent) => { - if (event.key !== "Escape") { - return; - } + if (event.key !== "Escape") return; setExpandedImage(null); }; window.addEventListener("keydown", onKeyDown); - return () => { - window.removeEventListener("keydown", onKeyDown); - }; + return () => window.removeEventListener("keydown", onKeyDown); }, [expandedImage]); const activeWorktreePath = activeThread?.worktreePath; @@ -438,53 +440,6 @@ export default function ChatView() { }; }, [phase]); - useEffect(() => { - if (!isModelMenuOpen) return; - - const handleClickOutside = (event: MouseEvent) => { - if (!modelMenuRef.current) return; - if (event.target instanceof Node && !modelMenuRef.current.contains(event.target)) { - setIsModelMenuOpen(false); - } - }; - - window.addEventListener("mousedown", handleClickOutside); - return () => { - window.removeEventListener("mousedown", handleClickOutside); - }; - }, [isModelMenuOpen]); - - useEffect(() => { - if (!isEditorMenuOpen) return; - - const handleClickOutside = (event: MouseEvent) => { - if (!editorMenuRef.current) return; - if (event.target instanceof Node && !editorMenuRef.current.contains(event.target)) { - setIsEditorMenuOpen(false); - } - }; - - window.addEventListener("mousedown", handleClickOutside); - return () => { - window.removeEventListener("mousedown", handleClickOutside); - }; - }, [isEditorMenuOpen]); - - // Cmd+O / Ctrl+O to open in last-used editor - useEffect(() => { - const handler = (e: globalThis.KeyboardEvent) => { - if (e.key === "o" && (e.metaKey || e.ctrlKey) && !e.shiftKey) { - if (api && activeProject) { - e.preventDefault(); - const cwd = activeThread?.worktreePath ?? activeProject.cwd; - void api.shell.openInEditor(cwd, lastEditor); - } - } - }; - window.addEventListener("keydown", handler); - return () => window.removeEventListener("keydown", handler); - }, [api, activeProject, activeThread, lastEditor]); - useEffect(() => { if (!activeThreadId) return; const previous = terminalOpenByThreadRef.current[activeThreadId] ?? false; @@ -516,15 +471,6 @@ export default function ChatView() { return () => window.removeEventListener("keydown", handler); }, [activeThreadId, toggleTerminalVisibility]); - const openInEditor = (editorId: EditorId) => { - if (!api || !activeProject) return; - const cwd = activeThread?.worktreePath ?? activeProject.cwd; - void api.shell.openInEditor(cwd, editorId); - setLastEditor(editorId); - localStorage.setItem(LAST_EDITOR_KEY, editorId); - setIsEditorMenuOpen(false); - }; - const setThreadError = (threadId: string | null, error: string | null) => { if (!threadId) return; dispatch({ @@ -579,13 +525,6 @@ export default function ChatView() { }); }; - const openImageDialog = (src: string | undefined, name: string) => { - if (!src) { - return; - } - setExpandedImage({ src, name }); - }; - const onComposerPaste = (event: ClipboardEvent) => { const files = Array.from(event.clipboardData.files); if (files.length === 0) { @@ -782,13 +721,15 @@ export default function ChatView() { setIsSending(true); try { const turnAttachments = await Promise.all( - composerImagesSnapshot.map(async (image): Promise => ({ - type: "image", - name: image.name, - mimeType: image.mimeType, - sizeBytes: image.sizeBytes, - dataUrl: await readFileAsDataUrl(image.file), - })), + composerImagesSnapshot.map( + async (image): Promise => ({ + type: "image", + name: image.name, + mimeType: image.mimeType, + sizeBytes: image.sizeBytes, + dataUrl: await readFileAsDataUrl(image.file), + }), + ), ); const shouldBootstrap = previousMessages.length > 0 && @@ -800,7 +741,7 @@ export default function ChatView() { latestPromptForBootstrap, PROVIDER_SEND_TURN_MAX_INPUT_CHARS, ).text - : (trimmed || undefined); + : trimmed || undefined; await api.providers.sendTurn({ sessionId: sessionInfo.sessionId, ...(input ? { input } : {}), @@ -849,14 +790,13 @@ export default function ChatView() { } }; - const onModelSelect = (model: string) => { + const onModelSelect = (model: ModelSlug) => { if (!activeThread) return; dispatch({ type: "SET_THREAD_MODEL", threadId: activeThread.id, model: resolveModelSlug(model), }); - setIsModelMenuOpen(false); }; const onKeyDown = (e: KeyboardEvent) => { @@ -892,132 +832,97 @@ export default function ChatView() { >

{activeThread.title}

- {activeProject && ( - - {activeProject.name} - - )} + {activeProject && {activeProject.name}}
{/* Open in editor */} - {activeProject && ( -
- - {isEditorMenuOpen && ( -
- {EDITORS.map((editor) => ( - - ))} -
- )} -
- )} + {activeProject && } {/* Git actions */} {activeProject && } {/* Diff toggle */} - +
{/* Error banner */} {activeThread.error && ( -
- {activeThread.error} +
+ + + + {activeThread.error} + +
)} {pendingApprovals.length > 0 && ( -
-
- {pendingApprovals.map((approval) => { - const isResponding = respondingRequestIds.includes(approval.requestId); - return ( -
+ {pendingApprovals.map((approval) => { + const isResponding = respondingRequestIds.includes(approval.requestId); + + return ( + + + + {approval.requestKind === "command" + ? "Command approval requested" + : "File-change approval requested"} + + -

- {approval.requestKind === "command" - ? "Command approval requested" - : "File-change approval requested"} -

- {approval.detail && ( -

- {approval.detail} -

- )} -
- - - - -
-
- ); - })} -
+ {approval.detail} + + + + + + + + + ); + })}
)} @@ -1140,7 +1045,9 @@ export default function ChatView() { src={image.previewUrl} alt={image.name} className="h-full max-h-[220px] w-full cursor-zoom-in object-cover" - onClick={() => openImageDialog(image.previewUrl, image.name)} + onClick={() => + setExpandedImage({ src: image.previewUrl!, name: image.name }) + } /> ) : (
@@ -1152,7 +1059,7 @@ export default function ChatView() {
)} {timelineEntry.message.text && ( - 
+                          
                             {timelineEntry.message.text}
                           

                         )}
@@ -1241,21 +1148,24 @@ export default function ChatView() {
                           src={image.previewUrl}
                           alt={image.name}
                           className="h-full w-full cursor-zoom-in object-cover"
-                          onClick={() => openImageDialog(image.previewUrl, image.name)}
+                          onClick={() =>
+                            setExpandedImage({ src: image.previewUrl, name: image.name })
+                          }
                         />
                       ) : (
                         

                           {image.name}
                         

                       )}
-                      
+                        
+
))}
@@ -1281,110 +1191,23 @@ export default function ChatView() {
{/* Model picker */} -
- - {isModelMenuOpen && ( -
-

Select model

-
- {modelOptions.map((model) => { - const isSelected = model === selectedModel; - return ( - - ); - })} -
-
- )} -
+ {/* Divider */} -
+ {/* Reasoning effort */} - + {/* Divider */} -
+ {/* Runtime mode toggle */} - + {state.runtimeMode === "full-access" ? : } + {state.runtimeMode === "full-access" ? "Full access" : "Supervised"} +
{/* Right side: send / stop button */} @@ -1461,7 +1248,9 @@ export default function ChatView() { + + {expandedImage.name} ); } + +function ModelPicker(props: { model: ModelSlug; onModelChange: (model: ModelSlug) => void }) { + return ( + + ); +} + +function ReasoningEffortPicker(props: { + effort: ReasoningEffort; + onEffortChange: (effort: ReasoningEffort) => void; +}) { + return ( + + ); +} + +function OpenInPicker() { + const [lastEditor, setLastEditor] = useState(() => { + const stored = localStorage.getItem(LAST_EDITOR_KEY); + return EDITORS.some((e) => e.id === stored) ? (stored as EditorId) : EDITORS[0].id; + }); + + const options = [ + { + label: "Cursor", + Icon: CursorIcon, + value: "cursor", + }, + { + label: navigator.platform.includes("Mac") + ? "Finder" + : navigator.platform.includes("Win") + ? "Explorer" + : "Files", + Icon: FolderClosedIcon, + value: "file-manager", + }, + ] satisfies { label: string; Icon: Icon; value: EditorId }[]; + const primaryOption = options.find(({ value }) => value === lastEditor); + + const api = useNativeApi(); + const { state } = useStore(); + const activeProject = state.projects.find((p) => p.id === state.activeThreadId); + const activeThread = state.threads.find((t) => t.id === state.activeThreadId); + + const openInEditor = useCallback( + (editorId: EditorId | null) => { + if (!api || !activeProject) return; + const editor = editorId ?? lastEditor; + const cwd = activeThread?.worktreePath ?? activeProject.cwd; + void api.shell.openInEditor(cwd, editor); + localStorage.setItem(LAST_EDITOR_KEY, editor); + setLastEditor(editor); + }, + [api, activeProject, activeThread, lastEditor, setLastEditor], + ); + + // Cmd+O / Ctrl+O to open in last-used editor + useEffect(() => { + const handler = (e: globalThis.KeyboardEvent) => { + if (e.key === "o" && (e.metaKey || e.ctrlKey) && !e.shiftKey) { + if (api && activeProject) { + e.preventDefault(); + const cwd = activeThread?.worktreePath ?? activeProject.cwd; + void api.shell.openInEditor(cwd, lastEditor); + } + } + }; + window.addEventListener("keydown", handler); + return () => window.removeEventListener("keydown", handler); + }, [api, activeProject, activeThread, lastEditor]); + + return ( + + + + + }> + + + {options.map(({ label, Icon, value }) => ( + openInEditor(value)}> + + ))} + + + + ); +} diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx index 59ad7303c1655de66d88d91dc33f25c8754d4f56..84a6cad50831d99a6d14174207309cecd3298b03 100644 --- a/apps/web/src/components/DiffPanel.tsx +++ b/apps/web/src/components/DiffPanel.tsx @@ -1,5 +1,7 @@ +import { XIcon } from "lucide-react"; import { isElectron } from "../env"; import { useStore } from "../store"; +import { Button } from "./ui/button"; export default function DiffPanel() { const { dispatch } = useStore(); @@ -11,13 +13,14 @@ export default function DiffPanel() { className={`flex items-center justify-between border-b border-border px-4 ${isElectron ? "drag-region h-[52px]" : "py-3"}`} >

Uncommitted changes

- + +
{/* Placeholder content */} diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx index 1da8325b823acb21942fb273f8d7a4a580b4e19d..621a69bd217ffdd85a74267b045609ece153a816 100644 --- a/apps/web/src/components/GitActionsControl.tsx +++ b/apps/web/src/components/GitActionsControl.tsx @@ -5,15 +5,13 @@ import { type NativeApi, } from "@t3tools/contracts"; import { queryOptions, useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { - CheckIcon, - CloudUploadIcon, - GitCommitIcon, - Loader2Icon, - XIcon, -} from "lucide-react"; +import { useCallback, useEffect, useMemo, useState } from "react"; +import { ChevronDownIcon, CloudUploadIcon, GitCommitIcon } from "lucide-react"; import { GitHubIcon } from "./Icons"; +import { Button } from "~/components/ui/button"; +import { Group, GroupSeparator } from "~/components/ui/group"; +import { Menu, MenuItem, MenuPopup, MenuTrigger } from "~/components/ui/menu"; +import { toastManager } from "~/components/ui/toast"; interface GitActionsControlProps { api: NativeApi | undefined; @@ -27,112 +25,38 @@ interface GitActionMenuItem { label: string; disabled: boolean; icon: GitActionIconName; - kind: "open_modal" | "run_action" | "open_pr"; + kind: "run_action" | "open_pr"; action?: GitStackedAction; } -interface GitModalActionOption { - action: GitStackedAction; - label: string; - disabled: boolean; - icon: GitActionIconName; - detail?: string; +function GitActionItemIcon({ icon }: { icon: GitActionIconName }) { + if (icon === "commit") return ; + if (icon === "push") return ; + return ; } -type GitProgressStepStatus = "pending" | "running" | "completed" | "skipped" | "failed"; +function describeGitResult(result: GitRunStackedActionResult): string { + const parts: string[] = []; -interface GitProgressStep { - id: "generate" | "commit" | "push" | "pr"; - label: string; - status: GitProgressStepStatus; - detail?: string; -} - -function GitActionIcon(props: { icon: GitActionIconName; disabled: boolean }) { - const toneClass = props.disabled ? "text-muted-foreground/45" : "text-foreground/85"; - - if (props.icon === "commit") { - return ; + if (result.commit.status === "created") { + parts.push(result.commit.subject ?? "Committed changes"); } - if (props.icon === "push") { - return ; + if (result.push.status === "pushed") { + parts.push( + result.push.upstreamBranch + ? `Pushed to ${result.push.upstreamBranch}` + : "Pushed", + ); } - return ; -} - -function runningStepMessage(stepId: GitProgressStep["id"]): string { - if (stepId === "generate") return "Generating commit message..."; - if (stepId === "commit") return "Committing changes..."; - if (stepId === "push") return "Pushing branch..."; - return "Preparing pull request..."; -} - -function gitActionModalTitle(): string { - return "Commit your changes"; -} - -function initialGitProgressSteps( - action: GitStackedAction, - commitMessage: string, -): GitProgressStep[] { - const hasCustomMessage = commitMessage.trim().length > 0; - const steps: GitProgressStep[] = []; - - if (!hasCustomMessage) { - steps.push({ - id: "generate", - label: "Generate commit message", - status: "pending", - }); + if (result.pr.status === "created") { + parts.push(result.pr.number ? `Created PR #${result.pr.number}` : "Created PR"); + } else if (result.pr.status === "opened_existing") { + parts.push(result.pr.number ? `PR #${result.pr.number}` : "Opened existing PR"); } - steps.push({ - id: "commit", - label: "Commit changes", - status: "pending", - }); - - if (action !== "commit") { - steps.push({ - id: "push", - label: "Push branch", - status: "pending", - }); - } - - if (action === "commit_push_pr") { - steps.push({ - id: "pr", - label: "Create or open PR", - status: "pending", - }); - } - - return steps; -} - -function updateProgressStep( - steps: GitProgressStep[], - id: GitProgressStep["id"], - status: GitProgressStepStatus, - detail?: string, -): GitProgressStep[] { - return steps.map((step) => { - if (step.id !== id) return step; - return { - ...step, - status, - ...(detail ? { detail } : {}), - }; - }); -} - -function runActionLabel(action: GitStackedAction): string { - if (action === "commit") return "Commit changes"; - if (action === "commit_push") return "Commit and push"; - return "Commit and create PR"; + return parts.join(" · ") || "No changes needed."; } function buildGitActionMenuItems( @@ -162,7 +86,8 @@ function buildGitActionMenuItems( label: "Commit", disabled: !canCommit, icon: "commit", - kind: "open_modal", + kind: "run_action", + action: "commit", }, { id: "push", @@ -191,41 +116,6 @@ function buildGitActionMenuItems( ]; } -function buildGitModalActionOptions( - gitStatus: GitStatusResult | null, - isDisabled: boolean, -): GitModalActionOption[] { - const hasBranch = gitStatus?.branch !== null; - const hasOpenPr = gitStatus?.openPr !== null; - - return [ - { - action: "commit", - label: "Commit", - disabled: isDisabled, - icon: "commit", - }, - { - action: "commit_push", - label: "Commit and push", - disabled: isDisabled || !hasBranch, - icon: "push", - ...(!hasBranch ? { detail: "Requires an attached branch." } : {}), - }, - { - action: "commit_push_pr", - label: "Commit and create PR", - disabled: isDisabled || !hasBranch || hasOpenPr, - icon: "pr", - ...(!hasBranch - ? { detail: "Requires an attached branch." } - : hasOpenPr - ? { detail: "A PR is already open for this branch." } - : {}), - }, - ]; -} - function getGitStatusQueryKey(gitCwd: string | null): readonly ["git", "status", string | null] { return ["git", "status", gitCwd]; } @@ -245,17 +135,7 @@ function gitStatusQueryOptions(api: NativeApi | undefined, gitCwd: string | null export default function GitActionsControl({ api, gitCwd }: GitActionsControlProps) { const queryClient = useQueryClient(); - const [isGitMenuOpen, setIsGitMenuOpen] = useState(false); - const [isGitModalActionRunning, setIsGitModalActionRunning] = useState(false); - const [gitActionError, setGitActionError] = useState(null); - const [isGitModalOpen, setIsGitModalOpen] = useState(false); - const [gitModalSelectedAction, setGitModalSelectedAction] = useState("commit"); - const [gitModalCommitMessage, setGitModalCommitMessage] = useState(""); - const [gitModalProgress, setGitModalProgress] = useState([]); - const [gitModalError, setGitModalError] = useState(null); - const [gitModalResult, setGitModalResult] = useState(null); - const [isGitProgressToastVisible, setIsGitProgressToastVisible] = useState(false); - const gitMenuRef = useRef(null); + const [selectedGitActionId, setSelectedGitActionId] = useState("commit"); const { data: gitStatus = null, error: gitStatusError } = useQuery( gitStatusQueryOptions(api, gitCwd), @@ -268,581 +148,167 @@ export default function GitActionsControl({ api, gitCwd }: GitActionsControlProp } return api.git.runStackedAction({ cwd: gitCwd, action }); }, - onMutate: () => { - setIsGitMenuOpen(false); - setGitActionError(null); - setGitModalError(null); - }, onSuccess: async () => { await queryClient.invalidateQueries({ queryKey: ["git"] }); }, - onError: (error) => { - setGitActionError(error instanceof Error ? error.message : "Git action failed."); - }, }); - const isGitActionRunning = isGitModalActionRunning || runImmediateGitActionMutation.isPending; + const isGitActionRunning = runImmediateGitActionMutation.isPending; const gitBaseDisabled = !api || !gitCwd || !gitStatus || isGitActionRunning; const gitActionMenuItems = useMemo( () => buildGitActionMenuItems(gitStatus, gitBaseDisabled), [gitBaseDisabled, gitStatus], ); - const gitModalActionOptions = useMemo( - () => buildGitModalActionOptions(gitStatus, !gitStatus || isGitActionRunning), - [gitStatus, isGitActionRunning], + const selectedGitActionItem = useMemo( + () => gitActionMenuItems.find((item) => item.id === selectedGitActionId) ?? null, + [gitActionMenuItems, selectedGitActionId], ); - const selectedGitModalActionOption = useMemo( - () => gitModalActionOptions.find((option) => option.action === gitModalSelectedAction) ?? null, - [gitModalActionOptions, gitModalSelectedAction], - ); - const visibleGitActionError = gitActionError ?? gitStatusError?.message; - const gitProgressToastOpenPrUrl = gitModalResult?.pr.url ?? gitStatus?.openPr?.url ?? null; - const showGitProgressToast = - isGitProgressToastVisible && - (isGitModalActionRunning || - gitModalProgress.length > 0 || - gitModalError !== null || - gitModalResult !== null); - const activeGitProgressStep = useMemo( - () => gitModalProgress.find((step) => step.status === "running") ?? null, - [gitModalProgress], - ); - const gitProgressToastStatus = isGitModalActionRunning - ? "running" - : gitModalError - ? "failed" - : "done"; - const gitProgressToastMessage = isGitModalActionRunning - ? runningStepMessage(activeGitProgressStep?.id ?? "commit") - : gitModalError - ? "Git action failed." - : "Done."; const refreshGitStatus = useCallback(async () => { if (!api || !gitCwd) return; await queryClient.invalidateQueries({ queryKey: ["git"] }); - setGitActionError(null); }, [api, gitCwd, queryClient]); - const openGitActionModal = useCallback(() => { - setIsGitMenuOpen(false); - setIsGitModalOpen(true); - setGitModalSelectedAction("commit"); - setGitModalCommitMessage(""); - setIsGitProgressToastVisible(false); - setGitModalProgress([]); - setGitModalError(null); - setGitModalResult(null); - setGitActionError(null); - }, []); - - const closeGitActionModal = useCallback(() => { - if (isGitActionRunning) return; - setIsGitModalOpen(false); - setGitModalSelectedAction("commit"); - setGitModalCommitMessage(""); - }, [isGitActionRunning]); - const runGitActionImmediately = useCallback( (action: GitStackedAction) => { - runImmediateGitActionMutation.mutate(action); + const promise = runImmediateGitActionMutation.mutateAsync(action); + toastManager.promise(promise, { + loading: { + title: action === "commit_push" ? "Pushing..." : "Creating PR...", + }, + success: (result) => { + const prUrl = result.pr.url; + return { + title: "Done", + description: describeGitResult(result), + ...(prUrl + ? { + timeout: 10_000, + actionProps: { + children: "Open PR", + onClick: () => void api?.shell.openExternal(prUrl), + }, + } + : {}), + }; + }, + error: (err) => ({ + title: "Action failed", + description: err instanceof Error ? err.message : "An error occurred.", + }), + }); + void promise.catch(() => undefined); }, - [runImmediateGitActionMutation], + [api, runImmediateGitActionMutation], ); const openExistingPr = useCallback(() => { - setIsGitMenuOpen(false); - setGitActionError(null); if (!api) { - setGitActionError("Link opening is unavailable."); + toastManager.add({ type: "error", title: "Link opening is unavailable." }); return; } const prUrl = gitStatus?.openPr?.url ?? null; if (!prUrl) { - setGitActionError("No open PR found for the current branch."); + toastManager.add({ type: "error", title: "No open PR found." }); return; } void api.shell.openExternal(prUrl).catch((error) => { - setGitActionError(error instanceof Error ? error.message : "Unable to open PR link."); + toastManager.add({ + type: "error", + title: "Unable to open PR link", + description: error instanceof Error ? error.message : undefined, + }); }); }, [api, gitStatus?.openPr?.url]); - const openPrFromToast = useCallback(() => { - if (!api) { - setGitModalError("Link opening is unavailable."); + const runSelectedAction = useCallback(() => { + if (!selectedGitActionItem || selectedGitActionItem.disabled) return; + if (selectedGitActionItem.kind === "open_pr") { + openExistingPr(); return; } - - const prUrl = gitProgressToastOpenPrUrl; - if (!prUrl) return; - - void api.shell.openExternal(prUrl).catch((error) => { - setGitModalError(error instanceof Error ? error.message : "Unable to open PR link."); - }); - }, [api, gitProgressToastOpenPrUrl]); - - const dismissGitProgressToast = useCallback(() => { - if (isGitModalActionRunning) return; - setIsGitProgressToastVisible(false); - setGitModalProgress([]); - setGitModalError(null); - setGitModalResult(null); - }, [isGitModalActionRunning]); - - const runGitAction = useCallback(async () => { - if (!api || !gitCwd) return; - if (!selectedGitModalActionOption || selectedGitModalActionOption.disabled) return; - const actionCwd = gitCwd; - const action = selectedGitModalActionOption.action; - const commitMessage = gitModalCommitMessage.trim(); - const includeGeneratedCommitMessage = commitMessage.length === 0; - - setIsGitMenuOpen(false); - setIsGitModalOpen(false); - setIsGitProgressToastVisible(true); - setIsGitModalActionRunning(true); - setGitModalError(null); - setGitActionError(null); - setGitModalResult(null); - setGitModalProgress(initialGitProgressSteps(action, commitMessage)); - - let commit: GitRunStackedActionResult["commit"] = { - status: "skipped_no_changes", - }; - let push: GitRunStackedActionResult["push"] = { - status: "skipped_not_requested", - }; - let pr: GitRunStackedActionResult["pr"] = { - status: "skipped_not_requested", - }; - - const updateStep = ( - id: GitProgressStep["id"], - status: GitProgressStepStatus, - detail?: string, - ) => { - setGitModalProgress((steps) => updateProgressStep(steps, id, status, detail)); - }; - - try { - if (includeGeneratedCommitMessage) { - updateStep("generate", "running"); - } else { - updateStep("commit", "running"); - } - - const commitRun = await api.git.runStackedAction({ - cwd: actionCwd, - action: "commit", - ...(commitMessage.length > 0 ? { commitMessage } : {}), - }); - commit = commitRun.commit; - - if (includeGeneratedCommitMessage) { - if (commitRun.commit.status === "created") { - if (commitRun.commit.subject) { - setGitModalCommitMessage(commitRun.commit.subject); - } - updateStep("generate", "completed"); - } else { - updateStep("generate", "skipped", "No local changes to commit."); - } - } - - if (commitRun.commit.status === "created") { - updateStep("commit", "completed", commitRun.commit.subject ?? "Committed local changes."); - } else { - updateStep("commit", "skipped", "No local changes to commit."); - } - - if (action !== "commit") { - updateStep("push", "running"); - const pushRun = await api.git.runStackedAction({ - cwd: actionCwd, - action: "commit_push", - }); - push = pushRun.push; - if (pushRun.push.status === "pushed") { - updateStep( - "push", - "completed", - pushRun.push.upstreamBranch - ? `Pushed to ${pushRun.push.upstreamBranch}.` - : "Pushed latest commits.", - ); - } else { - updateStep("push", "skipped", "Branch already up to date."); - } - } - - if (action === "commit_push_pr") { - updateStep("pr", "running"); - const prRun = await api.git.runStackedAction({ - cwd: actionCwd, - action: "commit_push_pr", - }); - pr = prRun.pr; - if (prRun.pr.status === "opened_existing") { - updateStep( - "pr", - "completed", - prRun.pr.number ? `Opened existing PR #${prRun.pr.number}.` : "Opened existing PR.", - ); - } else if (prRun.pr.status === "created") { - updateStep( - "pr", - "completed", - prRun.pr.number ? `Created PR #${prRun.pr.number}.` : "Created PR.", - ); - } else { - updateStep("pr", "skipped", "PR step was not requested."); - } - } - - setGitModalResult({ action, commit, push, pr }); - } catch (error) { - const message = error instanceof Error ? error.message : "Git action failed."; - setGitModalError(message); - setGitActionError(message); - setGitModalProgress((steps) => { - const active = steps.find((step) => step.status === "running"); - if (!active) return steps; - return updateProgressStep(steps, active.id, "failed", message); - }); - } finally { - setIsGitModalActionRunning(false); - await refreshGitStatus().catch(() => undefined); + if (selectedGitActionItem.action) { + runGitActionImmediately(selectedGitActionItem.action); } - }, [ - api, - gitCwd, - gitModalCommitMessage, - refreshGitStatus, - selectedGitModalActionOption, - ]); + }, [openExistingPr, runGitActionImmediately, selectedGitActionItem]); useEffect(() => { - setGitActionError(null); - setGitModalError(null); - setIsGitModalOpen(false); - setIsGitProgressToastVisible(false); - setGitModalSelectedAction("commit"); - setGitModalCommitMessage(""); - setGitModalProgress([]); - setGitModalResult(null); + setSelectedGitActionId("commit"); }, [gitCwd]); useEffect(() => { - if (!isGitModalOpen) return; - if (selectedGitModalActionOption && !selectedGitModalActionOption.disabled) return; - - const fallback = gitModalActionOptions.find((option) => !option.disabled); + if (selectedGitActionItem) return; + const fallback = gitActionMenuItems.find((item) => !item.disabled) ?? gitActionMenuItems[0]; if (fallback) { - setGitModalSelectedAction(fallback.action); + setSelectedGitActionId(fallback.id); } - }, [gitModalActionOptions, isGitModalOpen, selectedGitModalActionOption]); - - useEffect(() => { - if (!isGitMenuOpen) return; - - const handleClickOutside = (event: MouseEvent) => { - if (!gitMenuRef.current) return; - if (event.target instanceof Node && !gitMenuRef.current.contains(event.target)) { - setIsGitMenuOpen(false); - } - }; - - window.addEventListener("mousedown", handleClickOutside); - return () => { - window.removeEventListener("mousedown", handleClickOutside); - }; - }, [isGitMenuOpen]); - - useEffect(() => { - if (!isGitModalOpen) return; - - const handleEscape = (event: globalThis.KeyboardEvent) => { - if (event.key !== "Escape") return; - if (isGitActionRunning) return; - closeGitActionModal(); - }; - - window.addEventListener("keydown", handleEscape); - return () => { - window.removeEventListener("keydown", handleEscape); - }; - }, [closeGitActionModal, isGitActionRunning, isGitModalOpen]); + }, [gitActionMenuItems, selectedGitActionItem]); if (!gitCwd) return null; return ( - <> -
- + + { + if (open) void refreshGitStatus(); + }} + > + } disabled={!gitStatus || isGitActionRunning} > - {isGitActionRunning ? "Running..." : "Git actions"} - - - {isGitMenuOpen && ( -
-

Git actions

- {gitActionMenuItems.map((item) => { - return ( - - ); - })} - {gitStatus?.branch === null && ( -

- Detached HEAD: push and PR actions are unavailable. -

- )} - {gitStatus && - gitStatus.branch !== null && - !gitStatus.hasWorkingTreeChanges && - gitStatus.aheadCount === 0 && - gitStatus.behindCount > 0 && ( -

- Branch is behind upstream. Pull/rebase before opening a PR. -

- )} - {visibleGitActionError && ( -

- {visibleGitActionError} -

- )} -
- )} -
- - {isGitModalOpen && ( -
{ - closeGitActionModal(); - }} - > -
{ - event.stopPropagation(); - }} - > -
-
-
- -
-
-

- Git actions -

-

- {gitActionModalTitle()} -

-
-
- -
-
-
- Branch - - {gitStatus?.branch ?? "(detached HEAD)"} - -
-
- Changes - - {gitStatus?.hasWorkingTreeChanges - ? "Working tree has changes" - : "No local changes"} - -
-
-
- -