tweaks

Author: jonathanlab

.claude/CLAUDE.md

@@ -4,8 +4,8 @@
 - Use `Kbd` for key hints. Fallback to Tailwind CSS when Radix lacks props.
 - Use zustand for state management.
 - Prefer creating separate, reusable components over large monolithic components.
-- When using Phosphor Icons, use the Icon name suffixed by `Icon` for the component name. For example, `<ArrowsDownUpIcon>`, not `<ArrowsDownUpIcon>`. Also import them  like so: `import { ArrowsDownUpIcon } from "@phosphor-icons/react";`
-
+- When using Phosphor Icons, use the Icon name suffixed by `Icon` for the component name. For example, `<ArrowsDownUpIcon>`, not `<ArrowsDownUp>`. Also import them  like so: `import { ArrowsDownUpIcon } from "@phosphor-icons/react";` Don't import the icon name without the `Icon` suffix. Also don't cast it like so during the import `import { ArrowsDownUp as ArrowsDownUpIcon } from "@phosphor-icons/react";`
+- Always "Sentence case" stuff. For example, "Task list", not "Task List".
 ## Layout Components
 
 - **Box**: Fundamental layout component for spacing, sizing, and responsive display

src/renderer/components/ShellTerminal.tsx

@@ -28,7 +28,10 @@ export function ShellTerminal({ cwd }: ShellTerminalProps) {
   // Auto-focus terminal when switching to shell mode
   useEffect(() => {
     if (cliMode === "shell" && terminal.current) {
-      terminal.current.focus();
+      // Use requestAnimationFrame to ensure the component is visible before focusing
+      requestAnimationFrame(() => {
+        terminal.current?.focus();
+      });
     }
   }, [cliMode]);