feat(code): allow new task creation in command center (#1264)

Co-authored-by: JonathanLab <jonathanmieloo@gmail.com>

Author: adboio

apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx

@@ -1,3 +1,4 @@
+import { TaskInput } from "@features/task-detail/components/TaskInput";
 import { ArrowsOut, Plus, X } from "@phosphor-icons/react";
 import { Flex, Text } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
@@ -16,6 +17,48 @@ interface CommandCenterPanelProps {
 
 function EmptyCell({ cellIndex }: { cellIndex: number }) {
   const [selectorOpen, setSelectorOpen] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const assignTask = useCommandCenterStore((s) => s.assignTask);
+
+  const handleTaskCreated = useCallback(
+    (task: Task) => {
+      assignTask(cellIndex, task.id);
+    },
+    [assignTask, cellIndex],
+  );
+
+  if (isCreating) {
+    return (
+      <Flex direction="column" height="100%">
+        <Flex
+          align="center"
+          justify="between"
+          px="2"
+          py="1"
+          className="shrink-0 border-gray-6 border-b"
+        >
+          <Text
+            size="1"
+            weight="medium"
+            className="font-mono text-[11px] text-gray-11"
+          >
+            New task
+          </Text>
+          <button
+            type="button"
+            onClick={() => setIsCreating(false)}
+            className="flex h-5 w-5 items-center justify-center rounded text-gray-10 transition-colors hover:bg-gray-4 hover:text-gray-12"
+            title="Cancel"
+          >
+            <X size={12} />
+          </button>
+        </Flex>
+        <Flex direction="column" className="min-h-0 flex-1">
+          <TaskInput onTaskCreated={handleTaskCreated} />
+        </Flex>
+      </Flex>
+    );
+  }
 
   return (
     <Flex align="center" justify="center" height="100%">
@@ -24,6 +67,7 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) {
           cellIndex={cellIndex}
           open={selectorOpen}
           onOpenChange={setSelectorOpen}
+          onNewTask={() => setIsCreating(true)}
         >
           <button
             type="button"

apps/code/src/renderer/features/command-center/components/TaskSelector.tsx

@@ -9,13 +9,15 @@ interface TaskSelectorProps {
   cellIndex: number;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  onNewTask?: () => void;
   children: ReactNode;
 }
 
 export function TaskSelector({
   cellIndex,
   open,
   onOpenChange,
+  onNewTask,
   children,
 }: TaskSelectorProps) {
   const availableTasks = useAvailableTasks();
@@ -32,8 +34,12 @@ export function TaskSelector({
 
   const handleNewTask = useCallback(() => {
     onOpenChange(false);
-    navigateToTaskInput();
-  }, [onOpenChange, navigateToTaskInput]);
+    if (onNewTask) {
+      onNewTask();
+    } else {
+      navigateToTaskInput();
+    }
+  }, [onOpenChange, onNewTask, navigateToTaskInput]);
 
   return (
     <Popover.Root open={open} onOpenChange={onOpenChange}>
@@ -44,29 +50,31 @@ export function TaskSelector({
         sideOffset={4}
         style={{ padding: 4, minWidth: 240, maxHeight: 300 }}
       >
-        <div className="overflow-y-auto" style={{ maxHeight: 280 }}>
-          <button
-            type="button"
-            onClick={handleNewTask}
-            className="flex w-full items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-[12px] text-gray-12 transition-colors hover:bg-gray-3"
-          >
-            <Plus size={12} className="shrink-0" />
-            <span>New task</span>
-          </button>
-          {availableTasks.length > 0 && (
-            <>
-              <Separator size="4" my="1" />
-              {availableTasks.map((task) => (
-                <button
-                  key={task.id}
-                  type="button"
-                  onClick={() => handleSelect(task.id)}
-                  className="flex w-full items-center rounded-sm px-2 py-1.5 text-left text-[12px] text-gray-12 transition-colors hover:bg-gray-3"
-                >
-                  <span className="min-w-0 flex-1 truncate">{task.title}</span>
-                </button>
-              ))}
-            </>
+        <button
+          type="button"
+          onClick={handleNewTask}
+          className="flex w-full items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-[12px] text-gray-12 transition-colors hover:bg-gray-3"
+        >
+          <Plus size={12} />
+          New task
+        </button>
+        <Separator size="4" className="my-1" />
+        <div className="overflow-y-auto" style={{ maxHeight: 240 }}>
+          {availableTasks.length === 0 ? (
+            <div className="px-2 py-3 text-center font-mono text-[11px] text-gray-10">
+              No available tasks
+            </div>
+          ) : (
+            availableTasks.map((task) => (
+              <button
+                key={task.id}
+                type="button"
+                onClick={() => handleSelect(task.id)}
+                className="flex w-full items-center rounded-sm px-2 py-1.5 text-left text-[12px] text-gray-12 transition-colors hover:bg-gray-3"
+              >
+                <span className="min-w-0 flex-1 truncate">{task.title}</span>
+              </button>
+            ))
           )}
         </div>
       </Popover.Content>

apps/code/src/renderer/features/task-detail/components/TaskInput.tsx

@@ -33,7 +33,11 @@ import { type WorkspaceMode, WorkspaceModeSelect } from "./WorkspaceModeSelect";
 
 const DOT_FILL = "var(--gray-6)";
 
-export function TaskInput() {
+interface TaskInputProps {
+  onTaskCreated?: (task: import("@shared/types").Task) => void;
+}
+
+export function TaskInput({ onTaskCreated }: TaskInputProps = {}) {
   const { cloudRegion } = useAuthStore();
   const trpcReact = useTRPC();
   const { view } = useNavigationStore();
@@ -172,6 +176,7 @@ export function TaskInput() {
     executionMode: currentExecutionMode,
     model: currentModel,
     reasoningLevel: currentReasoningLevel,
+    onTaskCreated,
     environmentId: selectedEnvironment,
     sandboxEnvironmentId:
       effectiveWorkspaceMode === "cloud" && selectedCloudEnvId

apps/code/src/renderer/features/task-detail/hooks/useTaskCreation.ts

@@ -12,7 +12,7 @@ import type { WorkspaceMode } from "@main/services/workspace/schemas";
 import { get } from "@renderer/di/container";
 import { RENDERER_TOKENS } from "@renderer/di/tokens";
 import { toast } from "@renderer/utils/toast";
-import type { ExecutionMode } from "@shared/types";
+import type { ExecutionMode, Task } from "@shared/types";
 import { useNavigationStore } from "@stores/navigationStore";
 import { logger } from "@utils/logger";
 import { useCallback, useState } from "react";
@@ -34,6 +34,7 @@ interface UseTaskCreationOptions {
   reasoningLevel?: string;
   environmentId?: string | null;
   sandboxEnvironmentId?: string;
+  onTaskCreated?: (task: Task) => void;
 }
 
 interface UseTaskCreationReturn {
@@ -100,6 +101,7 @@ export function useTaskCreation({
   reasoningLevel,
   environmentId,
   sandboxEnvironmentId,
+  onTaskCreated,
 }: UseTaskCreationOptions): UseTaskCreationReturn {
   const [isCreatingTask, setIsCreatingTask] = useState(false);
   const { navigateToTask } = useNavigationStore();
@@ -154,7 +156,11 @@ export function useTaskCreation({
       const taskService = get<TaskService>(RENDERER_TOKENS.TaskService);
       const result = await taskService.createTask(input, (output) => {
         invalidateTasks(output.task);
-        navigateToTask(output.task);
+        if (onTaskCreated) {
+          onTaskCreated(output.task);
+        } else {
+          navigateToTask(output.task);
+        }
         editor.clear();
         log.info("Task ready, navigated early", { taskId: output.task.id });
       });
@@ -191,6 +197,7 @@ export function useTaskCreation({
     sandboxEnvironmentId,
     invalidateTasks,
     navigateToTask,
+    onTaskCreated,
   ]);
 
   return {