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

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";
@@ -15,6 +16,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%">
@@ -23,6 +66,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

@@ -1,4 +1,5 @@
-import { Popover } from "@radix-ui/themes";
+import { Plus } from "@phosphor-icons/react";
+import { Popover, Separator } from "@radix-ui/themes";
 import { type ReactNode, useCallback } from "react";
 import { useAvailableTasks } from "../hooks/useAvailableTasks";
 import { useCommandCenterStore } from "../stores/commandCenterStore";
@@ -7,13 +8,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();
@@ -27,6 +30,11 @@ export function TaskSelector({
     [assignTask, cellIndex, onOpenChange],
   );
 
+  const handleNewTask = useCallback(() => {
+    onOpenChange(false);
+    onNewTask();
+  }, [onOpenChange, onNewTask]);
+
   return (
     <Popover.Root open={open} onOpenChange={onOpenChange}>
       <Popover.Trigger>{children}</Popover.Trigger>
@@ -36,6 +44,15 @@ export function TaskSelector({
         sideOffset={4}
         style={{ padding: 4, minWidth: 240, maxHeight: 300 }}
       >
+        <button
+          type="button"
+          onClick={handleNewTask}
+          className="flex w-full items-center gap-1.5 rounded-sm px-2 py-1.5 text-left font-mono text-[11px] text-gray-12 transition-colors hover:bg-gray-3"
+        >
+          <Plus size={12} />
+          Create new task
+        </button>
+        <Separator size="4" className="my-1" />
         <div className="overflow-y-auto" style={{ maxHeight: 280 }}>
           {availableTasks.length === 0 ? (
             <div className="px-2 py-3 text-center font-mono text-[11px] text-gray-10">

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

@@ -31,7 +31,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 trpcReact = useTRPC();
   const { view } = useNavigationStore();
   const { data: mostRecentRepo } = useQuery(
@@ -131,6 +135,7 @@ export function TaskInput() {
     executionMode: currentExecutionMode,
     model: currentModel,
     reasoningLevel: currentReasoningLevel,
+    onTaskCreated,
   });
 
   const handleCycleMode = useCallback(() => {

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

@@ -9,7 +9,7 @@ import { useConnectivity } from "@hooks/useConnectivity";
 import type { WorkspaceMode } from "@main/services/workspace/schemas";
 import { get } from "@renderer/di/container";
 import { RENDERER_TOKENS } from "@renderer/di/tokens";
-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";
@@ -30,6 +30,7 @@ interface UseTaskCreationOptions {
   adapter?: "claude" | "codex";
   model?: string;
   reasoningLevel?: string;
+  onTaskCreated?: (task: Task) => void;
 }
 
 interface UseTaskCreationReturn {
@@ -91,6 +92,7 @@ export function useTaskCreation({
   adapter,
   model,
   reasoningLevel,
+  onTaskCreated,
 }: UseTaskCreationOptions): UseTaskCreationReturn {
   const [isCreatingTask, setIsCreatingTask] = useState(false);
   const { navigateToTask } = useNavigationStore();
@@ -140,8 +142,12 @@ export function useTaskCreation({
         // Invalidate tasks query
         invalidateTasks(task);
 
-        // Navigate to the new task
-        navigateToTask(task);
+        // Navigate to the new task or notify caller
+        if (onTaskCreated) {
+          onTaskCreated(task);
+        } else {
+          navigateToTask(task);
+        }
 
         // Clear editor
         editor.clear();
@@ -176,6 +182,7 @@ export function useTaskCreation({
     reasoningLevel,
     invalidateTasks,
     navigateToTask,
+    onTaskCreated,
   ]);
 
   return {