ui tweaks

Author: jonathanlab

src/renderer/components/MainLayout.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { RecordingsView } from "@/renderer/features/recordings";
 import { useIntegrations } from "../hooks/useIntegrations";
+import { useLayoutStore } from "../stores/layoutStore";
 import { useTabStore } from "../stores/tabStore";
 import { CommandMenu } from "./command";
 import { SettingsView } from "./SettingsView";
@@ -16,6 +17,7 @@ import { TaskList } from "./tasks/TaskList";
 export function MainLayout() {
   const { activeTabId, tabs, createTab, setActiveTab, closeTab } =
     useTabStore();
+  const { setCliMode } = useLayoutStore();
   useIntegrations();
   const [commandMenuOpen, setCommandMenuOpen] = useState(false);
   const [taskCreateOpen, setTaskCreateOpen] = useState(false);
@@ -37,6 +39,20 @@ export function MainLayout() {
     }
   }, [tabs, activeTabId, setActiveTab, createTab, closeTab]);
 
+  const handleFocusTaskMode = useCallback(() => {
+    // Find the Tasks tab or use the first task-list tab
+    const tasksTab = tabs.find((tab) => tab.type === "task-list");
+
+    if (tasksTab) {
+      setActiveTab(tasksTab.id);
+    }
+
+    // Switch to task mode
+    setCliMode("task");
+
+    // Note: The auto-focus effect in CliTaskPanel will handle focusing the editor
+  }, [tabs, setActiveTab, setCliMode]);
+
   useHotkeys("mod+k", () => setCommandMenuOpen((prev) => !prev), {
     enabled: !commandMenuOpen,
   });
@@ -46,7 +62,7 @@ export function MainLayout() {
   useHotkeys("mod+p", () => setCommandMenuOpen((prev) => !prev), {
     enabled: !commandMenuOpen,
   });
-  useHotkeys("mod+n", () => setTaskCreateOpen(true));
+  useHotkeys("mod+n", () => handleFocusTaskMode());
   useHotkeys("mod+,", () => handleOpenSettings());
 
   useEffect(() => {
@@ -88,10 +104,7 @@ export function MainLayout() {
 
       <Box flexGrow="1" overflow="hidden">
         {activeTab?.type === "task-list" && (
-          <TaskList
-            onSelectTask={handleSelectTask}
-            onNewTask={() => setTaskCreateOpen(true)}
-          />
+          <TaskList onSelectTask={handleSelectTask} />
         )}
 
         {activeTab?.type === "task-detail" && activeTab.data ? (
@@ -105,11 +118,7 @@ export function MainLayout() {
 
       <StatusBar onOpenSettings={handleOpenSettings} />
 
-      <CommandMenu
-        open={commandMenuOpen}
-        onOpenChange={setCommandMenuOpen}
-        onCreateTask={() => setTaskCreateOpen(true)}
-      />
+      <CommandMenu open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />
       <TaskCreate open={taskCreateOpen} onOpenChange={setTaskCreateOpen} />
     </Flex>
   );

src/renderer/components/ShellTerminal.tsx

@@ -45,7 +45,23 @@ export function ShellTerminal({ cwd }: ShellTerminalProps) {
   }, [cliMode]);
 
   useEffect(() => {
-    if (!terminalRef.current) return;
+    console.log("[ShellTerminal] Effect running", {
+      hasRef: !!terminalRef.current,
+      hasTerminal: !!terminal.current,
+    });
+
+    if (!terminalRef.current) {
+      console.log("[ShellTerminal] No terminalRef, returning");
+      return;
+    }
+
+    // Don't recreate if already exists
+    if (terminal.current) {
+      console.log("[ShellTerminal] Terminal already exists, returning");
+      return;
+    }
+
+    console.log("[ShellTerminal] Creating terminal...");
 
     // Generate unique session ID for this effect run using cryptographically secure random
     const sessionId = `shell-${Date.now()}-${secureRandomString(7)}`;
@@ -84,7 +100,7 @@ export function ShellTerminal({ cwd }: ShellTerminalProps) {
       ) {
         // Manually trigger mode switch since event won't bubble to global handler
         event.preventDefault();
-        setCliMode(cliMode === "task" ? "shell" : "task");
+        setCliMode((current) => (current === "task" ? "shell" : "task"));
         return false; // Don't let xterm handle this
       }
       // Let xterm handle everything else normally
@@ -154,6 +170,7 @@ export function ShellTerminal({ cwd }: ShellTerminalProps) {
 
     // Cleanup
     return () => {
+      console.log("[ShellTerminal] Cleanup running, disposing terminal");
       window.removeEventListener("resize", handleResize);
       disposable.dispose();
       unsubscribeData?.();
@@ -162,8 +179,13 @@ export function ShellTerminal({ cwd }: ShellTerminalProps) {
         console.error("Failed to destroy shell session:", error);
       });
       term.dispose();
+      terminal.current = null;
+      fitAddon.current = null;
+      console.log(
+        "[ShellTerminal] Cleanup complete, terminal.current set to null",
+      );
     };
-  }, [cwd, cliMode, setCliMode]);
+  }, [cwd, setCliMode]);
 
   return (
     <Box

src/renderer/components/command/CommandMenu.tsx

@@ -5,22 +5,19 @@ import { useCallback, useEffect, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import type { Task } from "@/shared/types";
 import { useTasks } from "../../hooks/useTasks";
+import { useLayoutStore } from "../../stores/layoutStore";
 import { useTabStore } from "../../stores/tabStore";
 import { Command } from "./Command";
 import { CommandKeyHints } from "./CommandKeyHints";
 
 interface CommandMenuProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onCreateTask?: () => void;
 }
 
-export function CommandMenu({
-  open,
-  onOpenChange,
-  onCreateTask,
-}: CommandMenuProps) {
+export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const { tabs, setActiveTab, createTab } = useTabStore();
+  const { setCliMode } = useLayoutStore();
   const { data: tasks = [] } = useTasks();
   const commandRef = useRef<HTMLDivElement>(null);
 
@@ -96,8 +93,20 @@ export function CommandMenu({
   };
 
   const handleCreateTask = () => {
+    // Find the Tasks tab or use the first task-list tab
+    const tasksTab = tabs.find((tab) => tab.type === "task-list");
+
+    if (tasksTab) {
+      setActiveTab(tasksTab.id);
+    }
+
+    // Switch to task mode
+    setCliMode("task");
+
+    // Close the command menu
     onOpenChange(false);
-    onCreateTask?.();
+
+    // Note: The auto-focus effect in CliTaskPanel will handle focusing the editor
   };
 
   const handleNavigateToTask = (task: {