feat: enhanced CLI panel with file mentions and loading states

## Summary
- Add file path highlighting with @ mentions in CLI and RichTextEditor
- Implement scrollable file hints with wrap-around navigation
- Add loading state with animated dots during task creation
- Persist CLI panel width with Zustand
- Fix linter errors with proper TypeScript types

## Changes
- Created FilePathHighlight extension for detecting and styling @file mentions
- Added scrolling window for file hints (shows 10 at a time)
- Implemented wrap-around navigation for file hints
- Added spinner and "Spawning task..." indicator during task creation
- Made CLI panel width persistent using Zustand store
- Disabled spell checking in CLI editor
- Made caret semi-transparent with color blend mode
- Added proper TypeScript types for ProseMirror nodes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: jonathanlab

src/renderer/components/FolderPicker.tsx

@@ -180,7 +180,7 @@ export function FolderPicker({
     <Popover.Root open={open} onOpenChange={handleOpenChange}>
       <Popover.Trigger>
         <Button
-          variant="surface"
+          variant="outline"
           size={size}
           color="gray"
           style={{ width: "100%" }}

src/renderer/components/RichTextEditor.tsx

@@ -1,10 +1,14 @@
 import { Box } from "@radix-ui/themes";
 import type { MentionItem } from "@shared/types";
+import { Extension } from "@tiptap/core";
 import { Link } from "@tiptap/extension-link";
 import { Mention } from "@tiptap/extension-mention";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { Typography } from "@tiptap/extension-typography";
 import { Underline } from "@tiptap/extension-underline";
+import type { Node } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import type { SuggestionOptions } from "@tiptap/suggestion";
@@ -19,6 +23,56 @@ import { markdownToTiptap, tiptapToMarkdown } from "../utils/tiptap-converter";
 import { MentionList, type MentionListRef } from "./FileMentionList";
 import { FormattingToolbar } from "./FormattingToolbar";
 
+const FilePathHighlight = Extension.create({
+  name: "filePathHighlight",
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("filePathHighlight"),
+        state: {
+          init(_, { doc }) {
+            return findFilePathDecorations(doc);
+          },
+          apply(tr, oldState) {
+            return tr.docChanged ? findFilePathDecorations(tr.doc) : oldState;
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state);
+          },
+        },
+      }),
+    ];
+  },
+});
+
+function findFilePathDecorations(doc: Node) {
+  const decorations: Decoration[] = [];
+  const regex = /@[^\s]+/g;
+
+  doc.descendants((node: Node, pos: number) => {
+    if (node.isText && node.text) {
+      let match: RegExpExecArray | null = null;
+      regex.lastIndex = 0;
+      match = regex.exec(node.text);
+      while (match !== null) {
+        const from = pos + match.index;
+        const to = from + match[0].length;
+        decorations.push(
+          Decoration.inline(from, to, {
+            class: "rich-text-file-path",
+          }),
+        );
+        match = regex.exec(node.text);
+      }
+    }
+  });
+
+  return DecorationSet.create(doc, decorations);
+}
+
 interface RichTextEditorProps {
   value: string;
   onChange: (value: string) => void;
@@ -201,6 +255,7 @@ export function RichTextEditor({
             let root: ReturnType<typeof createRoot> | null = null;
 
             return {
+              // biome-ignore lint/suspicious/noExplicitAny: TipTap suggestion API doesn't provide types
               onStart: (props: any) => {
                 popup = document.createElement("div");
                 popup.style.position = "absolute";
@@ -237,9 +292,11 @@ export function RichTextEditor({
                 );
 
                 // Store ref for keyboard handling
+                // biome-ignore lint/suspicious/noExplicitAny: Dynamic property for component reference
                 (component as any).ref = ref;
               },
 
+              // biome-ignore lint/suspicious/noExplicitAny: TipTap suggestion API doesn't provide types
               onUpdate: (props: any) => {
                 if (!root) return;
 
@@ -271,11 +328,14 @@ export function RichTextEditor({
                 }
 
                 // Store ref for keyboard handling
+                // biome-ignore lint/suspicious/noExplicitAny: Dynamic property for component reference
                 (component as any).ref = ref;
               },
 
+              // biome-ignore lint/suspicious/noExplicitAny: TipTap suggestion API doesn't provide types
               onKeyDown: (props: any) => {
                 if (!component) return false;
+                // biome-ignore lint/suspicious/noExplicitAny: Dynamic property for component reference
                 const ref = (component as any).ref;
                 if (ref?.current?.onKeyDown) {
                   return ref.current.onKeyDown(props);
@@ -293,6 +353,7 @@ export function RichTextEditor({
           },
         } as Partial<SuggestionOptions>,
       }),
+      FilePathHighlight,
     ],
     content: markdownToTiptap(value),
     onUpdate: ({ editor }) => {
@@ -475,6 +536,17 @@ export function RichTextEditor({
     >
       {showToolbar && editor && <FormattingToolbar editor={editor} />}
       <EditorContent editor={editor} />
+      <style>
+        {`
+          .rich-text-file-path {
+            background-color: var(--accent-a3);
+            color: var(--accent-11);
+            padding: 2px 4px;
+            border-radius: 3px;
+            font-weight: 500;
+          }
+        `}
+      </style>
     </Box>
   );
 }