feat: auto-registering IPC services and UI (#144)

Author: jonathanlab

src/main/index.ts

@@ -12,6 +12,7 @@ import {
 } from "electron";
 import { ANALYTICS_EVENTS } from "../types/analytics.js";
 import { registerAgentIpc, type TaskController } from "./services/agent.js";
+import "./services/index.js";
 import { registerFsIpc } from "./services/fs.js";
 import { registerGitIpc } from "./services/git.js";
 import { registerOAuthHandlers } from "./services/oauth.js";

src/main/ipc/createIpcService.ts

@@ -0,0 +1,21 @@
+import { ipcMain } from "electron";
+
+type IpcHandler<TArgs extends any[], TResult> = (
+  event: Electron.IpcMainInvokeEvent,
+  ...args: TArgs
+) => Promise<TResult> | TResult;
+
+interface IpcServiceConfig<TArgs extends any[], TResult> {
+  channel: string;
+  handler: IpcHandler<TArgs, TResult>;
+}
+
+export function createIpcService<TArgs extends any[], TResult>(
+  config: IpcServiceConfig<TArgs, TResult>,
+) {
+  ipcMain.handle(config.channel, config.handler);
+
+  return {
+    channel: config.channel,
+  };
+}

src/main/preload.ts

@@ -4,6 +4,7 @@ import type {
   OAuthTokenResponse,
   StoredOAuthTokens,
 } from "../shared/types/oauth";
+import type { ContextMenuResult } from "./services/contextMenu.types.js";
 
 interface MessageBoxOptions {
   type?: "info" | "error" | "warning" | "question";
@@ -242,4 +243,10 @@ contextBridge.exposeInMainWorld("electronAPI", {
     ipcRenderer.on(channel, wrapped);
     return () => ipcRenderer.removeListener(channel, wrapped);
   },
+  // Context Menu API
+  showTaskContextMenu: (
+    taskId: string,
+    taskTitle: string,
+  ): Promise<ContextMenuResult> =>
+    ipcRenderer.invoke("show-task-context-menu", taskId, taskTitle),
 });

src/main/services/contextMenu.ts

@@ -0,0 +1,40 @@
+import { Menu, type MenuItemConstructorOptions } from "electron";
+import { createIpcService } from "../ipc/createIpcService.js";
+import type { ContextMenuResult } from "./contextMenu.types.js";
+
+export type {
+  ContextMenuAction,
+  ContextMenuResult,
+} from "./contextMenu.types.js";
+
+export const showTaskContextMenuService = createIpcService({
+  channel: "show-task-context-menu",
+  handler: async (
+    _event,
+    _taskId: string,
+    _taskTitle: string,
+  ): Promise<ContextMenuResult> => {
+    return new Promise((resolve) => {
+      const template: MenuItemConstructorOptions[] = [
+        {
+          label: "Rename",
+          click: () => resolve({ action: "rename" }),
+        },
+        {
+          label: "Duplicate",
+          click: () => resolve({ action: "duplicate" }),
+        },
+        { type: "separator" },
+        {
+          label: "Delete",
+          click: () => resolve({ action: "delete" }),
+        },
+      ];
+
+      const menu = Menu.buildFromTemplate(template);
+      menu.popup({
+        callback: () => resolve({ action: null }),
+      });
+    });
+  },
+});

src/main/services/contextMenu.types.ts

@@ -0,0 +1,14 @@
+export type ContextMenuAction = "rename" | "duplicate" | "delete" | null;
+
+export interface ContextMenuResult {
+  action: ContextMenuAction;
+}
+
+declare global {
+  interface IElectronAPI {
+    showTaskContextMenu: (
+      taskId: string,
+      taskTitle: string,
+    ) => Promise<ContextMenuResult>;
+  }
+}

src/main/services/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Auto-register all IPC services
+ * This file is auto-generated by vite-plugin-auto-services.ts
+ */
+
+import "./agent.js";
+import "./contextMenu.js";
+import "./fs.js";
+import "./git.js";
+import "./oauth.js";
+import "./os.js";
+import "./posthog-analytics.js";
+import "./posthog.js";
+import "./shell.js";
+import "./transcription-prompts.js";
+import "./updates.js";

src/main/services/types.ts

@@ -0,0 +1,6 @@
+/**
+ * Auto-import all IPC service types for declaration merging
+ * This file is auto-generated by vite-plugin-auto-services.ts
+ */
+
+import "./contextMenu.types.js";

src/renderer/components/RenameTaskDialog.tsx

@@ -0,0 +1,105 @@
+import { useUpdateTask } from "@features/tasks/hooks/useTasks";
+import { Button, Dialog, Flex, Text, TextField } from "@radix-ui/themes";
+import type { Task } from "@shared/types";
+import { useCallback, useEffect, useState } from "react";
+
+interface RenameTaskDialogProps {
+  task: Task | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function RenameTaskDialog({
+  task,
+  open,
+  onOpenChange,
+}: RenameTaskDialogProps) {
+  const [newTitle, setNewTitle] = useState("");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const updateTask = useUpdateTask();
+
+  useEffect(() => {
+    if (task && open) {
+      setNewTitle(task.title);
+      setErrorMessage(null);
+    }
+  }, [task, open]);
+
+  const handleRename = useCallback(async () => {
+    if (!task || !newTitle.trim()) {
+      return;
+    }
+
+    try {
+      await updateTask.mutateAsync({
+        taskId: task.id,
+        updates: { title: newTitle.trim() },
+      });
+      onOpenChange(false);
+    } catch (error) {
+      console.error("[rename] Failed to rename task", error);
+      setErrorMessage("Failed to rename task. Please try again.");
+    }
+  }, [task, newTitle, updateTask, onOpenChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleRename();
+      } else if (e.key === "Escape") {
+        onOpenChange(false);
+      }
+    },
+    [handleRename, onOpenChange],
+  );
+
+  if (!task) {
+    return null;
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Content maxWidth="450px" size="1">
+        <Flex direction="column">
+          <Dialog.Title size="2">Rename task</Dialog.Title>
+          <TextField.Root
+            value={newTitle}
+            onChange={(e) => setNewTitle(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={task.title}
+            autoFocus
+            size="1"
+            mb="2"
+          />
+          {errorMessage && (
+            <Text size="1" color="red">
+              {errorMessage}
+            </Text>
+          )}
+          <Flex justify="end" gap="3" mt="2">
+            <Button
+              size="1"
+              type="button"
+              variant="soft"
+              color="gray"
+              onClick={() => onOpenChange(false)}
+              disabled={updateTask.isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              size="1"
+              onClick={handleRename}
+              disabled={updateTask.isPending || !newTitle.trim()}
+              loading={updateTask.isPending}
+            >
+              Save
+            </Button>
+          </Flex>
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

src/renderer/components/ui/sidebar/Sidebar.tsx

@@ -3,7 +3,7 @@ import { Box, Flex } from "@radix-ui/themes";
 import { useSidebarStore } from "@stores/sidebarStore";
 import React from "react";
 
-const MIN_WIDTH = 100;
+const MIN_WIDTH = 140;
 
 export const Sidebar: React.FC<{ children: React.ReactNode }> = ({
   children,