feat(cli): implement Claude CLI detection and model selection for features

- Added a new service to detect the installation status of Claude Code CLI, providing users with installation recommendations and commands.
- Integrated CLI detection into the SettingsView to inform users about the CLI status and its benefits for ultrathink tasks.
- Enhanced feature creation and editing dialogs to allow users to select from multiple models (Haiku, Sonnet, Opus) and specify thinking levels (None, Low, Medium, High, Ultrathink).
- Updated the feature executor to utilize the selected model and thinking configuration during task execution, improving flexibility and performance.

This update enhances user experience by providing clearer options for model selection and ensuring optimal performance with the Claude CLI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>

app/src/components/ui/dialog.tsx

@@ -50,9 +50,11 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
+  compact = false,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean
+  compact?: boolean
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -60,7 +62,8 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 max-h-[calc(100vh-4rem)]",
+          compact ? "max-w-md p-4" : "sm:max-w-lg p-6",
           className
         )}
         {...props}
@@ -69,7 +72,10 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className={cn(
+              "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              compact ? "top-2 right-2" : "top-4 right-4"
+            )}
           >
             <XIcon />
             <span className="sr-only">Close</span>

app/src/components/ui/log-viewer.tsx

@@ -13,6 +13,7 @@ import {
   Bug,
   Info,
   FileOutput,
+  Brain,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
@@ -43,6 +44,8 @@ const getLogIcon = (type: LogEntryType) => {
       return <CheckCircle2 className="w-4 h-4" />;
     case "warning":
       return <AlertTriangle className="w-4 h-4" />;
+    case "thinking":
+      return <Brain className="w-4 h-4" />;
     case "debug":
       return <Bug className="w-4 h-4" />;
     default: