Merge branch 'main' of github.com:webdevcody/automaker

2026-02-01 20:23:36 +00:00 · 2025-12-10 11:47:43 -05:00
parent 5e418984ad 9924187747
commit a8a63f4bed
47 changed files with 9701 additions and 4060 deletions
--- a/app/src/app/api/claude/test/route.ts
+++ b/app/src/app/api/claude/test/route.ts
@@ -1,6 +1,11 @@
-import Anthropic from "@anthropic-ai/sdk";
 import { NextRequest, NextResponse } from "next/server";

+interface AnthropicResponse {
+  content?: Array<{ type: string; text?: string }>;
+  model?: string;
+  error?: { message?: string };
+}
+
 export async function POST(request: NextRequest) {
  try {
    const { apiKey } = await request.json();
@@ -15,31 +20,60 @@ export async function POST(request: NextRequest) {
      );
    }

-    // Create Anthropic client with the provided key
-    const anthropic = new Anthropic({
-      apiKey: effectiveApiKey,
+    // Send a simple test prompt to the Anthropic API
+    const response = await fetch("https://api.anthropic.com/v1/messages", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": effectiveApiKey,
+        "anthropic-version": "2023-06-01",
+      },
+      body: JSON.stringify({
+        model: "claude-sonnet-4-20250514",
+        max_tokens: 100,
+        messages: [
+          {
+            role: "user",
+            content: "Respond with exactly: 'Claude API connection successful!' and nothing else.",
+          },
+        ],
+      }),
    });

-    // Send a simple test prompt
-    const response = await anthropic.messages.create({
-      model: "claude-sonnet-4-20250514",
-      max_tokens: 100,
-      messages: [
-        {
-          role: "user",
-          content: "Respond with exactly: 'Claude SDK connection successful!' and nothing else.",
-        },
-      ],
-    });
+    if (!response.ok) {
+      const errorData = (await response.json()) as AnthropicResponse;
+      const errorMessage = errorData.error?.message || `HTTP ${response.status}`;
+
+      if (response.status === 401) {
+        return NextResponse.json(
+          { success: false, error: "Invalid API key. Please check your Anthropic API key." },
+          { status: 401 }
+        );
+      }
+
+      if (response.status === 429) {
+        return NextResponse.json(
+          { success: false, error: "Rate limit exceeded. Please try again later." },
+          { status: 429 }
+        );
+      }
+
+      return NextResponse.json(
+        { success: false, error: `API error: ${errorMessage}` },
+        { status: response.status }
+      );
+    }
+
+    const data = (await response.json()) as AnthropicResponse;

    // Check if we got a valid response
-    if (response.content && response.content.length > 0) {
-      const textContent = response.content.find((block) => block.type === "text");
-      if (textContent && textContent.type === "text") {
+    if (data.content && data.content.length > 0) {
+      const textContent = data.content.find((block) => block.type === "text");
+      if (textContent && textContent.type === "text" && textContent.text) {
        return NextResponse.json({
          success: true,
          message: `Connection successful! Response: "${textContent.text}"`,
-          model: response.model,
+          model: data.model,
        });
      }
    }
@@ -47,33 +81,11 @@ export async function POST(request: NextRequest) {
    return NextResponse.json({
      success: true,
      message: "Connection successful! Claude responded.",
-      model: response.model,
+      model: data.model,
    });
  } catch (error: unknown) {
    console.error("Claude API test error:", error);

-    // Handle specific Anthropic API errors
-    if (error instanceof Anthropic.AuthenticationError) {
-      return NextResponse.json(
-        { success: false, error: "Invalid API key. Please check your Anthropic API key." },
-        { status: 401 }
-      );
-    }
-
-    if (error instanceof Anthropic.RateLimitError) {
-      return NextResponse.json(
-        { success: false, error: "Rate limit exceeded. Please try again later." },
-        { status: 429 }
-      );
-    }
-
-    if (error instanceof Anthropic.APIError) {
-      return NextResponse.json(
-        { success: false, error: `API error: ${error.message}` },
-        { status: error.status || 500 }
-      );
-    }
-
    const errorMessage =
      error instanceof Error ? error.message : "Failed to connect to Claude API";

--- a/app/src/app/globals.css
+++ b/app/src/app/globals.css
@@ -1609,6 +1609,39 @@
    box-shadow: 0 0 8px #f97e72;
 }

+/* Line clamp utilities for text overflow prevention */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Kanban card improvements to prevent text overflow */
+.kanban-card-content {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+/* Ensure proper column layout in double-width kanban columns */
+.kanban-columns-layout > * {
+  page-break-inside: avoid;
+  break-inside: avoid;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /* Electron title bar drag region */
 .titlebar-drag-region {
  -webkit-app-region: drag;
--- a/app/src/app/page.tsx
+++ b/app/src/app/page.tsx
@@ -10,6 +10,7 @@ import { SettingsView } from "@/components/views/settings-view";
 import { AgentToolsView } from "@/components/views/agent-tools-view";
 import { InterviewView } from "@/components/views/interview-view";
 import { ContextView } from "@/components/views/context-view";
+import { ProfilesView } from "@/components/views/profiles-view";
 import { useAppStore } from "@/store/app-store";
 import { getElectronAPI, isElectron } from "@/lib/electron";

@@ -109,6 +110,8 @@ export default function Home() {
        return <InterviewView />;
      case "context":
        return <ContextView />;
+      case "profiles":
+        return <ProfilesView />;
      default:
        return <WelcomeView />;
    }
--- a/app/src/components/layout/sidebar.tsx
+++ b/app/src/components/layout/sidebar.tsx
@@ -23,6 +23,7 @@ import {
  RotateCcw,
  Trash2,
  Undo2,
+  UserCircle,
  MoreVertical,
 } from "lucide-react";
 import {
@@ -487,6 +488,12 @@ export function Sidebar() {
          icon: Wrench,
          shortcut: NAV_SHORTCUTS.tools,
        },
+        {
+          id: "profiles",
+          label: "AI Profiles",
+          icon: UserCircle,
+          shortcut: NAV_SHORTCUTS.profiles,
+        },
      ],
    },
  ];
--- a/app/src/components/ui/badge.tsx
+++ b/app/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
--- a/app/src/components/ui/description-image-dropzone.tsx
+++ b/app/src/components/ui/description-image-dropzone.tsx
@@ -1,6 +1,6 @@
 "use client";

-import React, { useState, useRef, useCallback } from "react";
+import React, { useState, useRef, useCallback, useEffect } from "react";
 import { cn } from "@/lib/utils";
 import { ImageIcon, X, Loader2 } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
@@ -14,6 +14,9 @@ export interface FeatureImagePath {
  mimeType: string;
 }

+// Map to store preview data by image ID (persisted across component re-mounts)
+export type ImagePreviewMap = Map<string, string>;
+
 interface DescriptionImageDropZoneProps {
  value: string;
  onChange: (value: string) => void;
@@ -24,6 +27,9 @@ interface DescriptionImageDropZoneProps {
  disabled?: boolean;
  maxFiles?: number;
  maxFileSize?: number; // in bytes, default 10MB
+  // Optional: pass preview map from parent to persist across tab switches
+  previewMap?: ImagePreviewMap;
+  onPreviewMapChange?: (map: ImagePreviewMap) => void;
 }

 const ACCEPTED_IMAGE_TYPES = [
@@ -45,12 +51,31 @@ export function DescriptionImageDropZone({
  disabled = false,
  maxFiles = 5,
  maxFileSize = DEFAULT_MAX_FILE_SIZE,
+  previewMap,
+  onPreviewMapChange,
 }: DescriptionImageDropZoneProps) {
  const [isDragOver, setIsDragOver] = useState(false);
  const [isProcessing, setIsProcessing] = useState(false);
-  const [previewImages, setPreviewImages] = useState<Map<string, string>>(
-    new Map()
+  // Use parent-provided preview map if available, otherwise use local state
+  const [localPreviewImages, setLocalPreviewImages] = useState<Map<string, string>>(
+    () => new Map()
  );
+
+  // Determine which preview map to use - prefer parent-controlled state
+  const previewImages = previewMap !== undefined ? previewMap : localPreviewImages;
+  const setPreviewImages = useCallback((updater: Map<string, string> | ((prev: Map<string, string>) => Map<string, string>)) => {
+    if (onPreviewMapChange) {
+      const currentMap = previewMap !== undefined ? previewMap : localPreviewImages;
+      const newMap = typeof updater === 'function' ? updater(currentMap) : updater;
+      onPreviewMapChange(newMap);
+    } else {
+      setLocalPreviewImages((prev) => {
+        const newMap = typeof updater === 'function' ? updater(prev) : updater;
+        return newMap;
+      });
+    }
+  }, [onPreviewMapChange, previewMap, localPreviewImages]);
+
  const fileInputRef = useRef<HTMLInputElement>(null);
  const currentProject = useAppStore((state) => state.currentProject);

--- a/app/src/components/ui/dialog.tsx
+++ b/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 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200",
+          "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-2xl p-4" : "sm:max-w-2xl 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>
--- a/app/src/components/ui/git-diff-panel.tsx
+++ b/app/src/components/ui/git-diff-panel.tsx
@@ -0,0 +1,628 @@
+"use client";
+
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { getElectronAPI } from "@/lib/electron";
+import { cn } from "@/lib/utils";
+import {
+  File,
+  FileText,
+  FilePlus,
+  FileX,
+  FilePen,
+  ChevronDown,
+  ChevronRight,
+  Loader2,
+  RefreshCw,
+  GitBranch,
+  AlertCircle,
+} from "lucide-react";
+import { Button } from "./button";
+import type { FileStatus } from "@/types/electron";
+
+interface GitDiffPanelProps {
+  projectPath: string;
+  featureId: string;
+  className?: string;
+  /** Whether to show the panel in a compact/minimized state initially */
+  compact?: boolean;
+  /** Whether worktrees are enabled - if false, shows diffs from main project */
+  useWorktrees?: boolean;
+}
+
+interface ParsedDiffHunk {
+  header: string;
+  lines: {
+    type: "context" | "addition" | "deletion" | "header";
+    content: string;
+    lineNumber?: { old?: number; new?: number };
+  }[];
+}
+
+interface ParsedFileDiff {
+  filePath: string;
+  hunks: ParsedDiffHunk[];
+  isNew?: boolean;
+  isDeleted?: boolean;
+  isRenamed?: boolean;
+}
+
+const getFileIcon = (status: string) => {
+  switch (status) {
+    case "A":
+    case "?":
+      return <FilePlus className="w-4 h-4 text-green-500" />;
+    case "D":
+      return <FileX className="w-4 h-4 text-red-500" />;
+    case "M":
+    case "U":
+      return <FilePen className="w-4 h-4 text-amber-500" />;
+    case "R":
+    case "C":
+      return <File className="w-4 h-4 text-blue-500" />;
+    default:
+      return <FileText className="w-4 h-4 text-muted-foreground" />;
+  }
+};
+
+const getStatusBadgeColor = (status: string) => {
+  switch (status) {
+    case "A":
+    case "?":
+      return "bg-green-500/20 text-green-400 border-green-500/30";
+    case "D":
+      return "bg-red-500/20 text-red-400 border-red-500/30";
+    case "M":
+    case "U":
+      return "bg-amber-500/20 text-amber-400 border-amber-500/30";
+    case "R":
+    case "C":
+      return "bg-blue-500/20 text-blue-400 border-blue-500/30";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getStatusDisplayName = (status: string) => {
+  switch (status) {
+    case "A":
+      return "Added";
+    case "?":
+      return "Untracked";
+    case "D":
+      return "Deleted";
+    case "M":
+      return "Modified";
+    case "U":
+      return "Updated";
+    case "R":
+      return "Renamed";
+    case "C":
+      return "Copied";
+    default:
+      return "Changed";
+  }
+};
+
+/**
+ * Parse unified diff format into structured data
+ */
+function parseDiff(diffText: string): ParsedFileDiff[] {
+  if (!diffText) return [];
+
+  const files: ParsedFileDiff[] = [];
+  const lines = diffText.split("\n");
+  let currentFile: ParsedFileDiff | null = null;
+  let currentHunk: ParsedDiffHunk | null = null;
+  let oldLineNum = 0;
+  let newLineNum = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // New file diff
+    if (line.startsWith("diff --git")) {
+      if (currentFile) {
+        if (currentHunk) {
+          currentFile.hunks.push(currentHunk);
+        }
+        files.push(currentFile);
+      }
+      // Extract file path from diff header
+      const match = line.match(/diff --git a\/(.*?) b\/(.*)/);
+      currentFile = {
+        filePath: match ? match[2] : "unknown",
+        hunks: [],
+      };
+      currentHunk = null;
+      continue;
+    }
+
+    // New file indicator
+    if (line.startsWith("new file mode")) {
+      if (currentFile) currentFile.isNew = true;
+      continue;
+    }
+
+    // Deleted file indicator
+    if (line.startsWith("deleted file mode")) {
+      if (currentFile) currentFile.isDeleted = true;
+      continue;
+    }
+
+    // Renamed file indicator
+    if (line.startsWith("rename from") || line.startsWith("rename to")) {
+      if (currentFile) currentFile.isRenamed = true;
+      continue;
+    }
+
+    // Skip index, ---/+++ lines
+    if (
+      line.startsWith("index ") ||
+      line.startsWith("--- ") ||
+      line.startsWith("+++ ")
+    ) {
+      continue;
+    }
+
+    // Hunk header
+    if (line.startsWith("@@")) {
+      if (currentHunk && currentFile) {
+        currentFile.hunks.push(currentHunk);
+      }
+      // Parse line numbers from @@ -old,count +new,count @@
+      const hunkMatch = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+      oldLineNum = hunkMatch ? parseInt(hunkMatch[1], 10) : 1;
+      newLineNum = hunkMatch ? parseInt(hunkMatch[2], 10) : 1;
+      currentHunk = {
+        header: line,
+        lines: [{ type: "header", content: line }],
+      };
+      continue;
+    }
+
+    // Diff content lines
+    if (currentHunk) {
+      if (line.startsWith("+")) {
+        currentHunk.lines.push({
+          type: "addition",
+          content: line.substring(1),
+          lineNumber: { new: newLineNum },
+        });
+        newLineNum++;
+      } else if (line.startsWith("-")) {
+        currentHunk.lines.push({
+          type: "deletion",
+          content: line.substring(1),
+          lineNumber: { old: oldLineNum },
+        });
+        oldLineNum++;
+      } else if (line.startsWith(" ") || line === "") {
+        currentHunk.lines.push({
+          type: "context",
+          content: line.substring(1) || "",
+          lineNumber: { old: oldLineNum, new: newLineNum },
+        });
+        oldLineNum++;
+        newLineNum++;
+      }
+    }
+  }
+
+  // Don't forget the last file and hunk
+  if (currentFile) {
+    if (currentHunk) {
+      currentFile.hunks.push(currentHunk);
+    }
+    files.push(currentFile);
+  }
+
+  return files;
+}
+
+function DiffLine({
+  type,
+  content,
+  lineNumber,
+}: {
+  type: "context" | "addition" | "deletion" | "header";
+  content: string;
+  lineNumber?: { old?: number; new?: number };
+}) {
+  const bgClass = {
+    context: "bg-transparent",
+    addition: "bg-green-500/10",
+    deletion: "bg-red-500/10",
+    header: "bg-blue-500/10",
+  };
+
+  const textClass = {
+    context: "text-foreground-secondary",
+    addition: "text-green-400",
+    deletion: "text-red-400",
+    header: "text-blue-400",
+  };
+
+  const prefix = {
+    context: " ",
+    addition: "+",
+    deletion: "-",
+    header: "",
+  };
+
+  if (type === "header") {
+    return (
+      <div className={cn("px-2 py-1 font-mono text-xs", bgClass[type], textClass[type])}>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex font-mono text-xs", bgClass[type])}>
+      <span className="w-12 flex-shrink-0 text-right pr-2 text-muted-foreground select-none border-r border-border-glass">
+        {lineNumber?.old ?? ""}
+      </span>
+      <span className="w-12 flex-shrink-0 text-right pr-2 text-muted-foreground select-none border-r border-border-glass">
+        {lineNumber?.new ?? ""}
+      </span>
+      <span className={cn("w-4 flex-shrink-0 text-center select-none", textClass[type])}>
+        {prefix[type]}
+      </span>
+      <span className={cn("flex-1 px-2 whitespace-pre-wrap break-all", textClass[type])}>
+        {content || "\u00A0"}
+      </span>
+    </div>
+  );
+}
+
+function FileDiffSection({
+  fileDiff,
+  isExpanded,
+  onToggle,
+}: {
+  fileDiff: ParsedFileDiff;
+  isExpanded: boolean;
+  onToggle: () => void;
+}) {
+  const additions = fileDiff.hunks.reduce(
+    (acc, hunk) => acc + hunk.lines.filter((l) => l.type === "addition").length,
+    0
+  );
+  const deletions = fileDiff.hunks.reduce(
+    (acc, hunk) => acc + hunk.lines.filter((l) => l.type === "deletion").length,
+    0
+  );
+
+  return (
+    <div className="border border-border rounded-lg overflow-hidden">
+      <button
+        onClick={onToggle}
+        className="w-full px-3 py-2 flex items-center gap-2 text-left bg-card hover:bg-accent/50 transition-colors"
+      >
+        {isExpanded ? (
+          <ChevronDown className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+        ) : (
+          <ChevronRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+        )}
+        <FileText className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+        <span className="flex-1 text-sm font-mono truncate text-foreground">
+          {fileDiff.filePath}
+        </span>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {fileDiff.isNew && (
+            <span className="text-xs px-1.5 py-0.5 rounded bg-green-500/20 text-green-400">
+              new
+            </span>
+          )}
+          {fileDiff.isDeleted && (
+            <span className="text-xs px-1.5 py-0.5 rounded bg-red-500/20 text-red-400">
+              deleted
+            </span>
+          )}
+          {fileDiff.isRenamed && (
+            <span className="text-xs px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-400">
+              renamed
+            </span>
+          )}
+          {additions > 0 && (
+            <span className="text-xs text-green-400">+{additions}</span>
+          )}
+          {deletions > 0 && (
+            <span className="text-xs text-red-400">-{deletions}</span>
+          )}
+        </div>
+      </button>
+      {isExpanded && (
+        <div className="bg-background border-t border-border max-h-[400px] overflow-y-auto">
+          {fileDiff.hunks.map((hunk, hunkIndex) => (
+            <div key={hunkIndex} className="border-b border-border-glass last:border-b-0">
+              {hunk.lines.map((line, lineIndex) => (
+                <DiffLine
+                  key={lineIndex}
+                  type={line.type}
+                  content={line.content}
+                  lineNumber={line.lineNumber}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function GitDiffPanel({
+  projectPath,
+  featureId,
+  className,
+  compact = true,
+  useWorktrees = false,
+}: GitDiffPanelProps) {
+  const [isExpanded, setIsExpanded] = useState(!compact);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [files, setFiles] = useState<FileStatus[]>([]);
+  const [diffContent, setDiffContent] = useState<string>("");
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
+
+  const loadDiffs = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const api = getElectronAPI();
+
+      // Use worktree API if worktrees are enabled, otherwise use git API for main project
+      if (useWorktrees) {
+        if (!api?.worktree?.getDiffs) {
+          throw new Error("Worktree API not available");
+        }
+        const result = await api.worktree.getDiffs(projectPath, featureId);
+        if (result.success) {
+          setFiles(result.files || []);
+          setDiffContent(result.diff || "");
+        } else {
+          setError(result.error || "Failed to load diffs");
+        }
+      } else {
+        // Use git API for main project diffs
+        if (!api?.git?.getDiffs) {
+          throw new Error("Git API not available");
+        }
+        const result = await api.git.getDiffs(projectPath);
+        if (result.success) {
+          setFiles(result.files || []);
+          setDiffContent(result.diff || "");
+        } else {
+          setError(result.error || "Failed to load diffs");
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load diffs");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [projectPath, featureId, useWorktrees]);
+
+  // Load diffs when expanded
+  useEffect(() => {
+    if (isExpanded) {
+      loadDiffs();
+    }
+  }, [isExpanded, loadDiffs]);
+
+  const parsedDiffs = useMemo(() => parseDiff(diffContent), [diffContent]);
+
+  const toggleFile = (filePath: string) => {
+    setExpandedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  };
+
+  const expandAllFiles = () => {
+    setExpandedFiles(new Set(parsedDiffs.map((d) => d.filePath)));
+  };
+
+  const collapseAllFiles = () => {
+    setExpandedFiles(new Set());
+  };
+
+  // Total stats
+  const totalAdditions = parsedDiffs.reduce(
+    (acc, file) =>
+      acc +
+      file.hunks.reduce(
+        (hAcc, hunk) =>
+          hAcc + hunk.lines.filter((l) => l.type === "addition").length,
+        0
+      ),
+    0
+  );
+  const totalDeletions = parsedDiffs.reduce(
+    (acc, file) =>
+      acc +
+      file.hunks.reduce(
+        (hAcc, hunk) =>
+          hAcc + hunk.lines.filter((l) => l.type === "deletion").length,
+        0
+      ),
+    0
+  );
+
+  return (
+    <div
+      className={cn(
+        "rounded-xl border border-border bg-card backdrop-blur-sm overflow-hidden",
+        className
+      )}
+      data-testid="git-diff-panel"
+    >
+      {/* Header */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full px-4 py-3 flex items-center justify-between bg-card hover:bg-accent/50 transition-colors text-left"
+        data-testid="git-diff-panel-toggle"
+      >
+        <div className="flex items-center gap-2">
+          {isExpanded ? (
+            <ChevronDown className="w-4 h-4 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="w-4 h-4 text-muted-foreground" />
+          )}
+          <GitBranch className="w-4 h-4 text-brand-500" />
+          <span className="font-medium text-sm text-foreground">Git Changes</span>
+        </div>
+        <div className="flex items-center gap-3 text-xs">
+          {!isExpanded && files.length > 0 && (
+            <>
+              <span className="text-muted-foreground">
+                {files.length} {files.length === 1 ? "file" : "files"}
+              </span>
+              {totalAdditions > 0 && (
+                <span className="text-green-400">+{totalAdditions}</span>
+              )}
+              {totalDeletions > 0 && (
+                <span className="text-red-400">-{totalDeletions}</span>
+              )}
+            </>
+          )}
+        </div>
+      </button>
+
+      {/* Content */}
+      {isExpanded && (
+        <div className="border-t border-border">
+          {isLoading ? (
+            <div className="flex items-center justify-center gap-2 py-8 text-muted-foreground">
+              <Loader2 className="w-5 h-5 animate-spin" />
+              <span className="text-sm">Loading changes...</span>
+            </div>
+          ) : error ? (
+            <div className="flex flex-col items-center justify-center gap-2 py-8 text-muted-foreground">
+              <AlertCircle className="w-5 h-5 text-amber-500" />
+              <span className="text-sm">{error}</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={loadDiffs}
+                className="mt-2"
+              >
+                <RefreshCw className="w-4 h-4 mr-2" />
+                Retry
+              </Button>
+            </div>
+          ) : files.length === 0 ? (
+            <div className="flex items-center justify-center gap-2 py-8 text-muted-foreground">
+              <span className="text-sm">No changes detected</span>
+            </div>
+          ) : (
+            <div className="p-4 space-y-4">
+              {/* Summary bar */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4 flex-wrap">
+                  {(() => {
+                    // Group files by status
+                    const statusGroups = files.reduce((acc, file) => {
+                      const status = file.status;
+                      if (!acc[status]) {
+                        acc[status] = {
+                          count: 0,
+                          statusText: getStatusDisplayName(status),
+                          files: []
+                        };
+                      }
+                      acc[status].count += 1;
+                      acc[status].files.push(file.path);
+                      return acc;
+                    }, {} as Record<string, {count: number, statusText: string, files: string[]}>);
+
+                    return Object.entries(statusGroups).map(([status, group]) => (
+                      <div
+                        key={status}
+                        className="flex items-center gap-1.5"
+                        title={group.files.join('\n')}
+                        data-testid={`git-status-group-${status.toLowerCase()}`}
+                      >
+                        {getFileIcon(status)}
+                        <span
+                          className={cn(
+                            "text-xs px-1.5 py-0.5 rounded border font-medium",
+                            getStatusBadgeColor(status)
+                          )}
+                        >
+                          {group.count} {group.statusText}
+                        </span>
+                      </div>
+                    ));
+                  })()}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={expandAllFiles}
+                    className="text-xs h-7"
+                  >
+                    Expand All
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={collapseAllFiles}
+                    className="text-xs h-7"
+                  >
+                    Collapse All
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={loadDiffs}
+                    className="text-xs h-7"
+                  >
+                    <RefreshCw className="w-3 h-3 mr-1" />
+                    Refresh
+                  </Button>
+                </div>
+              </div>
+
+              {/* Stats */}
+              <div className="flex items-center gap-4 text-sm">
+                <span className="text-muted-foreground">
+                  {files.length} {files.length === 1 ? "file" : "files"} changed
+                </span>
+                {totalAdditions > 0 && (
+                  <span className="text-green-400">
+                    +{totalAdditions} additions
+                  </span>
+                )}
+                {totalDeletions > 0 && (
+                  <span className="text-red-400">
+                    -{totalDeletions} deletions
+                  </span>
+                )}
+              </div>
+
+              {/* File diffs */}
+              <div className="space-y-3">
+                {parsedDiffs.map((fileDiff) => (
+                  <FileDiffSection
+                    key={fileDiff.filePath}
+                    fileDiff={fileDiff}
+                    isExpanded={expandedFiles.has(fileDiff.filePath)}
+                    onToggle={() => toggleFile(fileDiff.filePath)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/app/src/components/ui/log-viewer.tsx
+++ b/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:
--- a/app/src/components/ui/tooltip.tsx
+++ b/app/src/components/ui/tooltip.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/app/src/components/views/agent-output-modal.tsx
+++ b/app/src/components/views/agent-output-modal.tsx
@@ -8,9 +8,12 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
-import { Loader2, List, FileText } from "lucide-react";
+import { Loader2, List, FileText, GitBranch } from "lucide-react";
 import { getElectronAPI } from "@/lib/electron";
 import { LogViewer } from "@/components/ui/log-viewer";
+import { GitDiffPanel } from "@/components/ui/git-diff-panel";
+import { useAppStore } from "@/store/app-store";
+import type { AutoModeEvent } from "@/types/electron";

 interface AgentOutputModalProps {
  open: boolean;
@@ -21,7 +24,7 @@ interface AgentOutputModalProps {
  onNumberKeyPress?: (key: string) => void;
 }

-type ViewMode = "parsed" | "raw";
+type ViewMode = "parsed" | "raw" | "changes";

 export function AgentOutputModal({
  open,
@@ -33,9 +36,11 @@ export function AgentOutputModal({
  const [output, setOutput] = useState<string>("");
  const [isLoading, setIsLoading] = useState(true);
  const [viewMode, setViewMode] = useState<ViewMode>("parsed");
+  const [projectPath, setProjectPath] = useState<string>("");
  const scrollRef = useRef<HTMLDivElement>(null);
  const autoScrollRef = useRef(true);
  const projectPathRef = useRef<string>("");
+  const useWorktrees = useAppStore((state) => state.useWorktrees);

  // Auto-scroll to bottom when output changes
  useEffect(() => {
@@ -63,6 +68,7 @@ export function AgentOutputModal({
        }

        projectPathRef.current = currentProject.path;
+        setProjectPath(currentProject.path);

        // Ensure context directory exists
        const contextDir = `${currentProject.path}/.automaker/agents-context`;
@@ -113,44 +119,78 @@ export function AgentOutputModal({
    if (!api?.autoMode) return;

    const unsubscribe = api.autoMode.onEvent((event) => {
-      // Filter events for this specific feature only
-      if (event.featureId !== featureId) {
+      // Filter events for this specific feature only (skip events without featureId)
+      if ("featureId" in event && event.featureId !== featureId) {
        return;
      }

      let newContent = "";

-      if (event.type === "auto_mode_progress") {
-        newContent = event.content || "";
-      } else if (event.type === "auto_mode_tool") {
-        const toolName = event.tool || "Unknown Tool";
-        const toolInput = event.input
-          ? JSON.stringify(event.input, null, 2)
-          : "";
-        newContent = `\n🔧 Tool: ${toolName}\n${
-          toolInput ? `Input: ${toolInput}` : ""
-        }`;
-      } else if (event.type === "auto_mode_phase") {
-        const phaseEmoji =
-          event.phase === "planning"
-            ? "📋"
-            : event.phase === "action"
-            ? "⚡"
-            : "✅";
-        newContent = `\n${phaseEmoji} ${event.message}\n`;
-      } else if (event.type === "auto_mode_error") {
-        newContent = `\n❌ Error: ${event.error}\n`;
-      } else if (event.type === "auto_mode_feature_complete") {
-        const emoji = event.passes ? "✅" : "⚠️";
-        newContent = `\n${emoji} Task completed: ${event.message}\n`;
+      switch (event.type) {
+        case "auto_mode_progress":
+          newContent = event.content || "";
+          break;
+        case "auto_mode_tool":
+          const toolName = event.tool || "Unknown Tool";
+          const toolInput = event.input
+            ? JSON.stringify(event.input, null, 2)
+            : "";
+          newContent = `\n🔧 Tool: ${toolName}\n${
+            toolInput ? `Input: ${toolInput}` : ""
+          }`;
+          break;
+        case "auto_mode_phase":
+          const phaseEmoji =
+            event.phase === "planning"
+              ? "📋"
+              : event.phase === "action"
+              ? "⚡"
+              : "✅";
+          newContent = `\n${phaseEmoji} ${event.message}\n`;
+          break;
+        case "auto_mode_error":
+          newContent = `\n❌ Error: ${event.error}\n`;
+          break;
+        case "auto_mode_ultrathink_preparation":
+          // Format thinking level preparation information
+          let prepContent = `\n🧠 Ultrathink Preparation\n`;
+          
+          if (event.warnings && event.warnings.length > 0) {
+            prepContent += `\n⚠️ Warnings:\n`;
+            event.warnings.forEach((warning: string) => {
+              prepContent += `  • ${warning}\n`;
+            });
+          }
+          
+          if (event.recommendations && event.recommendations.length > 0) {
+            prepContent += `\n💡 Recommendations:\n`;
+            event.recommendations.forEach((rec: string) => {
+              prepContent += `  • ${rec}\n`;
+            });
+          }
+          
+          if (event.estimatedCost !== undefined) {
+            prepContent += `\n💰 Estimated Cost: ~$${event.estimatedCost.toFixed(2)} per execution\n`;
+          }
+          
+          if (event.estimatedTime) {
+            prepContent += `\n⏱️ Estimated Time: ${event.estimatedTime}\n`;
+          }
+          
+          newContent = prepContent;
+          break;
+        case "auto_mode_feature_complete":
+          const emoji = event.passes ? "✅" : "⚠️";
+          newContent = `\n${emoji} Task completed: ${event.message}\n`;

-        // Close the modal when the feature is verified (passes = true)
-        if (event.passes) {
-          // Small delay to show the completion message before closing
-          setTimeout(() => {
-            onClose();
-          }, 1500);
-        }
+          // Close the modal when the feature is verified (passes = true)
+          if (event.passes) {
+            // Small delay to show the completion message before closing
+            setTimeout(() => {
+              onClose();
+            }, 1500);
+          }
+          break;
      }

      if (newContent) {
@@ -211,25 +251,37 @@ export function AgentOutputModal({
              <Loader2 className="w-5 h-5 text-primary animate-spin" />
              Agent Output
            </DialogTitle>
-            <div className="flex items-center gap-1 bg-zinc-900/50 rounded-lg p-1">
+            <div className="flex items-center gap-1 bg-muted rounded-lg p-1">
              <button
                onClick={() => setViewMode("parsed")}
                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
                  viewMode === "parsed"
                    ? "bg-primary/20 text-primary shadow-sm"
-                    : "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent"
                }`}
                data-testid="view-mode-parsed"
              >
                <List className="w-3.5 h-3.5" />
-                Parsed
+                Logs
+              </button>
+              <button
+                onClick={() => setViewMode("changes")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  viewMode === "changes"
+                    ? "bg-primary/20 text-primary shadow-sm"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                }`}
+                data-testid="view-mode-changes"
+              >
+                <GitBranch className="w-3.5 h-3.5" />
+                Changes
              </button>
              <button
                onClick={() => setViewMode("raw")}
                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
                  viewMode === "raw"
                    ? "bg-primary/20 text-primary shadow-sm"
-                    : "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent"
                }`}
                data-testid="view-mode-raw"
              >
@@ -246,34 +298,55 @@ export function AgentOutputModal({
          </DialogDescription>
        </DialogHeader>

-        <div
-          ref={scrollRef}
-          onScroll={handleScroll}
-          className="flex-1 overflow-y-auto bg-zinc-950 rounded-lg p-4 font-mono text-xs min-h-[400px] max-h-[60vh]"
-        >
-          {isLoading && !output ? (
-            <div className="flex items-center justify-center h-full text-muted-foreground">
-              <Loader2 className="w-6 h-6 animate-spin mr-2" />
-              Loading output...
+        {viewMode === "changes" ? (
+          <div className="flex-1 overflow-y-auto min-h-[400px] max-h-[60vh]">
+            {projectPath ? (
+              <GitDiffPanel
+                projectPath={projectPath}
+                featureId={featureId}
+                compact={false}
+                useWorktrees={useWorktrees}
+                className="border-0 rounded-lg"
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                <Loader2 className="w-6 h-6 animate-spin mr-2" />
+                Loading...
+              </div>
+            )}
+          </div>
+        ) : (
+          <>
+            <div
+              ref={scrollRef}
+              onScroll={handleScroll}
+              className="flex-1 overflow-y-auto bg-zinc-950 rounded-lg p-4 font-mono text-xs min-h-[400px] max-h-[60vh]"
+            >
+              {isLoading && !output ? (
+                <div className="flex items-center justify-center h-full text-muted-foreground">
+                  <Loader2 className="w-6 h-6 animate-spin mr-2" />
+                  Loading output...
+                </div>
+              ) : !output ? (
+                <div className="flex items-center justify-center h-full text-muted-foreground">
+                  No output yet. The agent will stream output here as it works.
+                </div>
+              ) : viewMode === "parsed" ? (
+                <LogViewer output={output} />
+              ) : (
+                <div className="whitespace-pre-wrap break-words text-zinc-300">
+                  {output}
+                </div>
+              )}
            </div>
-          ) : !output ? (
-            <div className="flex items-center justify-center h-full text-muted-foreground">
-              No output yet. The agent will stream output here as it works.
-            </div>
-          ) : viewMode === "parsed" ? (
-            <LogViewer output={output} />
-          ) : (
-            <div className="whitespace-pre-wrap break-words text-zinc-300">
-              {output}
-            </div>
-          )}
-        </div>

-        <div className="text-xs text-muted-foreground text-center flex-shrink-0">
-          {autoScrollRef.current
-            ? "Auto-scrolling enabled"
-            : "Scroll to bottom to enable auto-scroll"}
-        </div>
+            <div className="text-xs text-muted-foreground text-center flex-shrink-0">
+              {autoScrollRef.current
+                ? "Auto-scrolling enabled"
+                : "Scroll to bottom to enable auto-scroll"}
+            </div>
+          </>
+        )}
      </DialogContent>
    </Dialog>
  );
--- a/app/src/components/views/analysis-view.tsx
+++ b/app/src/components/views/analysis-view.tsx
@@ -326,8 +326,8 @@ export function AnalysisView() {
      const analyzeStructure = () => {
        const structure: string[] = [];
        const topLevelDirs = projectAnalysis.fileTree
-          .filter((n) => n.isDirectory)
-          .map((n) => n.name);
+          .filter((n: FileTreeNode) => n.isDirectory)
+          .map((n: FileTreeNode) => n.name);

        for (const dir of topLevelDirs) {
          structure.push(`      <directory name="${dir}" />`);
@@ -350,14 +350,14 @@ export function AnalysisView() {
  <technology_stack>
    <languages>
 ${Object.entries(projectAnalysis.filesByExtension)
-  .filter(([ext]) =>
+  .filter(([ext]: [string, number]) =>
    ["ts", "tsx", "js", "jsx", "py", "go", "rs", "java", "cpp", "c"].includes(
      ext
    )
  )
-  .sort((a, b) => b[1] - a[1])
+  .sort((a: [string, number], b: [string, number]) => b[1] - a[1])
  .slice(0, 5)
-  .map(([ext, count]) => `      <language ext=".${ext}" count="${count}" />`)
+  .map(([ext, count]: [string, number]) => `      <language ext=".${ext}" count="${count}" />`)
  .join("\n")}
    </languages>
    <frameworks>
@@ -375,10 +375,10 @@ ${analyzeStructure()}

  <file_breakdown>
 ${Object.entries(projectAnalysis.filesByExtension)
-  .sort((a, b) => b[1] - a[1])
+  .sort((a: [string, number], b: [string, number]) => b[1] - a[1])
  .slice(0, 10)
  .map(
-    ([ext, count]) =>
+    ([ext, count]: [string, number]) =>
      `    <extension type="${
        ext.startsWith("(") ? ext : "." + ext
      }" count="${count}" />`
@@ -465,11 +465,11 @@ ${Object.entries(projectAnalysis.filesByExtension)
      const detectFeatures = () => {
        const extensions = projectAnalysis.filesByExtension;
        const topLevelDirs = projectAnalysis.fileTree
-          .filter((n) => n.isDirectory)
-          .map((n) => n.name.toLowerCase());
+          .filter((n: FileTreeNode) => n.isDirectory)
+          .map((n: FileTreeNode) => n.name.toLowerCase());
        const topLevelFiles = projectAnalysis.fileTree
-          .filter((n) => !n.isDirectory)
-          .map((n) => n.name.toLowerCase());
+          .filter((n: FileTreeNode) => !n.isDirectory)
+          .map((n: FileTreeNode) => n.name.toLowerCase());

        // Check for test directories and files
        const hasTests =
@@ -840,7 +840,7 @@ ${Object.entries(projectAnalysis.filesByExtension)
        </div>
        {node.isDirectory && isExpanded && node.children && (
          <div>
-            {node.children.map((child) => renderNode(child, depth + 1))}
+            {node.children.map((child: FileTreeNode) => renderNode(child, depth + 1))}
          </div>
        )}
      </div>
@@ -964,9 +964,9 @@ ${Object.entries(projectAnalysis.filesByExtension)
                <CardContent>
                  <div className="space-y-2">
                    {Object.entries(projectAnalysis.filesByExtension)
-                      .sort((a, b) => b[1] - a[1])
+                      .sort((a: [string, number], b: [string, number]) => b[1] - a[1])
                      .slice(0, 15)
-                      .map(([ext, count]) => (
+                      .map(([ext, count]: [string, number]) => (
                        <div key={ext} className="flex justify-between text-sm">
                          <span className="text-muted-foreground font-mono">
                            {ext.startsWith("(") ? ext : `.${ext}`}
@@ -1107,7 +1107,7 @@ ${Object.entries(projectAnalysis.filesByExtension)
                data-testid="analysis-file-tree"
              >
                <div className="p-2">
-                  {projectAnalysis.fileTree.map((node) => renderNode(node))}
+                  {projectAnalysis.fileTree.map((node: FileTreeNode) => renderNode(node))}
                </div>
              </CardContent>
            </Card>
--- a/app/src/components/views/board-view.tsx
+++ b/app/src/components/views/board-view.tsx
--- a/app/src/components/views/kanban-card.tsx
+++ b/app/src/components/views/kanban-card.tsx
@@ -49,6 +49,9 @@ import {
  FileText,
  MoreVertical,
  AlertCircle,
+  GitBranch,
+  Undo2,
+  GitMerge,
 } from "lucide-react";
 import { CountUpTimer } from "@/components/ui/count-up-timer";
 import { getElectronAPI } from "@/lib/electron";
@@ -59,6 +62,12 @@ import {
  DEFAULT_MODEL,
 } from "@/lib/agent-context-parser";
 import { Markdown } from "@/components/ui/markdown";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";

 interface KanbanCardProps {
  feature: Feature;
@@ -72,6 +81,8 @@ interface KanbanCardProps {
  onMoveBackToInProgress?: () => void;
  onFollowUp?: () => void;
  onCommit?: () => void;
+  onRevert?: () => void;
+  onMerge?: () => void;
  hasContext?: boolean;
  isCurrentAutoTask?: boolean;
  shortcutKey?: string;
@@ -93,6 +104,8 @@ export function KanbanCard({
  onMoveBackToInProgress,
  onFollowUp,
  onCommit,
+  onRevert,
+  onMerge,
  hasContext,
  isCurrentAutoTask,
  shortcutKey,
@@ -101,9 +114,13 @@ export function KanbanCard({
 }: KanbanCardProps) {
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
+  const [isRevertDialogOpen, setIsRevertDialogOpen] = useState(false);
  const [agentInfo, setAgentInfo] = useState<AgentTaskInfo | null>(null);
  const { kanbanCardDetailLevel } = useAppStore();

+  // Check if feature has worktree
+  const hasWorktree = !!feature.branchName;
+
  // Helper functions to check what should be shown based on detail level
  const showSteps =
    kanbanCardDetailLevel === "standard" ||
@@ -196,7 +213,7 @@ export function KanbanCard({
      ref={setNodeRef}
      style={style}
      className={cn(
-        "cursor-grab active:cursor-grabbing transition-all backdrop-blur-sm border-border relative",
+        "cursor-grab active:cursor-grabbing transition-all backdrop-blur-sm border-border relative kanban-card-content",
        isDragging && "opacity-50 scale-105 shadow-lg",
        isCurrentAutoTask &&
          "border-running-indicator border-2 shadow-running-indicator/50 shadow-lg animate-pulse",
@@ -246,7 +263,43 @@ export function KanbanCard({
          <span>Errored</span>
        </div>
      )}
-      <CardHeader className="p-3 pb-2">
+      {/* Branch badge - show when feature has a worktree */}
+      {hasWorktree && !isCurrentAutoTask && (
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10 cursor-default",
+                  "bg-purple-500/20 border border-purple-500/50 text-purple-400",
+                  // Position below error badge if present, otherwise use normal position
+                  feature.error || feature.skipTests
+                    ? "top-8 left-2"
+                    : shortcutKey
+                      ? "top-2 left-10"
+                      : "top-2 left-2"
+                )}
+                data-testid={`branch-badge-${feature.id}`}
+              >
+                <GitBranch className="w-3 h-3 shrink-0" />
+                <span className="truncate max-w-[80px]">{feature.branchName?.replace("feature/", "")}</span>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="max-w-[300px]">
+              <p className="font-mono text-xs break-all">{feature.branchName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+      <CardHeader
+        className={cn(
+          "p-3 pb-2 block", // Reset grid layout to block for custom kanban card layout
+          // Add extra top padding when badges are present to prevent text overlap
+          (feature.skipTests || feature.error || shortcutKey) && "pt-10",
+          // Add even more top padding when both badges and branch are shown
+          hasWorktree && (feature.skipTests || feature.error) && "pt-14"
+        )}
+      >
        {isCurrentAutoTask && (
          <div className="absolute top-2 right-2 flex items-center justify-center gap-2 bg-running-indicator/20 border border-running-indicator rounded px-2 py-0.5">
            <Loader2 className="w-4 h-4 text-running-indicator animate-spin" />
@@ -320,11 +373,11 @@ export function KanbanCard({
              <GripVertical className="w-4 h-4 text-muted-foreground" />
            </div>
          )}
-          <div className="flex-1 min-w-0">
-            <CardTitle className="text-sm leading-tight">
+          <div className="flex-1 min-w-0 overflow-hidden">
+            <CardTitle className="text-sm leading-tight break-words hyphens-auto line-clamp-3 overflow-hidden">
              {feature.description}
            </CardTitle>
-            <CardDescription className="text-xs mt-1">
+            <CardDescription className="text-xs mt-1 truncate">
              {feature.category}
            </CardDescription>
          </div>
@@ -344,7 +397,7 @@ export function KanbanCard({
                ) : (
                  <Circle className="w-3 h-3 mt-0.5 shrink-0" />
                )}
-                <span className="truncate">{step}</span>
+                <span className="break-words hyphens-auto line-clamp-2 leading-relaxed">{step}</span>
              </div>
            ))}
            {feature.steps.length > 3 && (
@@ -358,13 +411,13 @@ export function KanbanCard({
        {/* Agent Info Panel - shows for in_progress, waiting_approval, verified */}
        {/* Detailed mode: Show all agent info */}
        {showAgentInfo && feature.status !== "backlog" && agentInfo && (
-          <div className="mb-3 space-y-2">
+          <div className="mb-3 space-y-2 overflow-hidden">
            {/* Model & Phase */}
-            <div className="flex items-center gap-2 text-xs">
+            <div className="flex items-center gap-2 text-xs flex-wrap">
              <div className="flex items-center gap-1 text-cyan-400">
                <Cpu className="w-3 h-3" />
                <span className="font-medium">
-                  {formatModelName(DEFAULT_MODEL)}
+                  {formatModelName(feature.model ?? DEFAULT_MODEL)}
                </span>
              </div>
              {agentInfo.currentPhase && (
@@ -408,15 +461,15 @@ export function KanbanCard({
                      ) : todo.status === "in_progress" ? (
                        <Loader2 className="w-2.5 h-2.5 text-amber-400 animate-spin shrink-0" />
                      ) : (
-                        <Circle className="w-2.5 h-2.5 text-zinc-500 shrink-0" />
+                        <Circle className="w-2.5 h-2.5 text-muted-foreground shrink-0" />
                      )}
                      <span
                        className={cn(
-                          "truncate",
+                          "break-words hyphens-auto line-clamp-2 leading-relaxed",
                          todo.status === "completed" &&
-                            "text-zinc-500 line-through",
+                            "text-muted-foreground line-through",
                          todo.status === "in_progress" && "text-amber-400",
-                          todo.status === "pending" && "text-zinc-400"
+                          todo.status === "pending" && "text-foreground-secondary"
                        )}
                      >
                        {todo.content}
@@ -437,25 +490,25 @@ export function KanbanCard({
              feature.status === "verified") && (
              <>
                {(feature.summary || summary || agentInfo.summary) && (
-                  <div className="space-y-1 pt-1 border-t border-white/5">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-1 text-[10px] text-green-400">
-                        <Sparkles className="w-3 h-3" />
-                        <span>Summary</span>
+                  <div className="space-y-1 pt-1 border-t border-border-glass overflow-hidden">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="flex items-center gap-1 text-[10px] text-green-400 min-w-0">
+                        <Sparkles className="w-3 h-3 shrink-0" />
+                        <span className="truncate">Summary</span>
                      </div>
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          setIsSummaryDialogOpen(true);
                        }}
-                        className="p-0.5 rounded hover:bg-white/10 transition-colors text-zinc-500 hover:text-zinc-300"
+                        className="p-0.5 rounded hover:bg-accent transition-colors text-muted-foreground hover:text-foreground shrink-0"
                        title="View full summary"
                        data-testid={`expand-summary-${feature.id}`}
                      >
                        <Expand className="w-3 h-3" />
                      </button>
                    </div>
-                    <p className="text-[10px] text-zinc-400 line-clamp-3">
+                    <p className="text-[10px] text-foreground-secondary line-clamp-3 break-words hyphens-auto leading-relaxed overflow-hidden">
                      {feature.summary || summary || agentInfo.summary}
                    </p>
                  </div>
@@ -465,7 +518,7 @@ export function KanbanCard({
                  !summary &&
                  !agentInfo.summary &&
                  agentInfo.toolCallCount > 0 && (
-                    <div className="flex items-center gap-2 text-[10px] text-muted-foreground pt-1 border-t border-white/5">
+                    <div className="flex items-center gap-2 text-[10px] text-muted-foreground pt-1 border-t border-border-glass">
                      <span className="flex items-center gap-1">
                        <Wrench className="w-2.5 h-2.5" />
                        {agentInfo.toolCallCount} tool calls
@@ -609,24 +662,65 @@ export function KanbanCard({
          )}
          {!isCurrentAutoTask && feature.status === "waiting_approval" && (
            <>
+              {/* Revert button - only show when worktree exists (icon only to save space) */}
+              {hasWorktree && onRevert && (
+                <TooltipProvider delayDuration={300}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 w-7 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/20 shrink-0"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setIsRevertDialogOpen(true);
+                        }}
+                        data-testid={`revert-${feature.id}`}
+                      >
+                        <Undo2 className="w-3.5 h-3.5" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="top">
+                      <p>Revert changes</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
              {/* Follow-up prompt button */}
              {onFollowUp && (
                <Button
                  variant="secondary"
                  size="sm"
-                  className="flex-1 h-7 text-xs"
+                  className="flex-1 h-7 text-xs min-w-0"
                  onClick={(e) => {
                    e.stopPropagation();
                    onFollowUp();
                  }}
                  data-testid={`follow-up-${feature.id}`}
                >
-                  <MessageSquare className="w-3 h-3 mr-1" />
-                  Follow-up
+                  <MessageSquare className="w-3 h-3 mr-1 shrink-0" />
+                  <span className="truncate">Follow-up</span>
                </Button>
              )}
-              {/* Commit and verify button */}
-              {onCommit && (
+              {/* Merge button - only show when worktree exists */}
+              {hasWorktree && onMerge && (
+                <Button
+                  variant="default"
+                  size="sm"
+                  className="flex-1 h-7 text-xs bg-purple-600 hover:bg-purple-700 min-w-0"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onMerge();
+                  }}
+                  data-testid={`merge-${feature.id}`}
+                  title="Merge changes into main branch"
+                >
+                  <GitMerge className="w-3 h-3 mr-1 shrink-0" />
+                  <span className="truncate">Merge</span>
+                </Button>
+              )}
+              {/* Commit and verify button - show when no worktree */}
+              {!hasWorktree && onCommit && (
                <Button
                  variant="default"
                  size="sm"
@@ -711,7 +805,7 @@ export function KanbanCard({
                : feature.description}
            </DialogDescription>
          </DialogHeader>
-          <div className="flex-1 overflow-y-auto p-4 bg-zinc-900/50 rounded-lg border border-white/10">
+          <div className="flex-1 overflow-y-auto p-4 bg-card rounded-lg border border-border">
            <Markdown>
              {feature.summary ||
                summary ||
@@ -730,6 +824,49 @@ export function KanbanCard({
          </DialogFooter>
        </DialogContent>
      </Dialog>
+
+      {/* Revert Confirmation Dialog */}
+      <Dialog open={isRevertDialogOpen} onOpenChange={setIsRevertDialogOpen}>
+        <DialogContent data-testid="revert-confirmation-dialog">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-red-400">
+              <Undo2 className="w-5 h-5" />
+              Revert Changes
+            </DialogTitle>
+            <DialogDescription>
+              This will discard all changes made by the agent and move the feature back to the backlog.
+              {feature.branchName && (
+                <span className="block mt-2 font-medium">
+                  Branch <code className="bg-muted px-1 py-0.5 rounded">{feature.branchName}</code> will be deleted.
+                </span>
+              )}
+              <span className="block mt-2 text-red-400 font-medium">
+                This action cannot be undone.
+              </span>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setIsRevertDialogOpen(false)}
+              data-testid="cancel-revert-button"
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                setIsRevertDialogOpen(false);
+                onRevert?.();
+              }}
+              data-testid="confirm-revert-button"
+            >
+              <Undo2 className="w-4 h-4 mr-2" />
+              Revert Changes
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
    </Card>
  );
 }
--- a/app/src/components/views/profiles-view.tsx
+++ b/app/src/components/views/profiles-view.tsx
@@ -0,0 +1,691 @@
+"use client";
+
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useAppStore, AIProfile, AgentModel, ThinkingLevel, ModelProvider } from "@/store/app-store";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { cn, modelSupportsThinking } from "@/lib/utils";
+import {
+  useKeyboardShortcuts,
+  ACTION_SHORTCUTS,
+  KeyboardShortcut,
+} from "@/hooks/use-keyboard-shortcuts";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  UserCircle,
+  Plus,
+  Pencil,
+  Trash2,
+  Brain,
+  Zap,
+  Scale,
+  Cpu,
+  Rocket,
+  Sparkles,
+  GripVertical,
+  Lock,
+  Check,
+} from "lucide-react";
+import { toast } from "sonner";
+import {
+  DndContext,
+  DragEndEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+// Icon mapping for profiles
+const PROFILE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  Brain,
+  Zap,
+  Scale,
+  Cpu,
+  Rocket,
+  Sparkles,
+};
+
+// Available icons for selection
+const ICON_OPTIONS = [
+  { name: "Brain", icon: Brain },
+  { name: "Zap", icon: Zap },
+  { name: "Scale", icon: Scale },
+  { name: "Cpu", icon: Cpu },
+  { name: "Rocket", icon: Rocket },
+  { name: "Sparkles", icon: Sparkles },
+];
+
+// Model options for the form
+const CLAUDE_MODELS: { id: AgentModel; label: string }[] = [
+  { id: "haiku", label: "Claude Haiku" },
+  { id: "sonnet", label: "Claude Sonnet" },
+  { id: "opus", label: "Claude Opus" },
+];
+
+const CODEX_MODELS: { id: AgentModel; label: string }[] = [
+  { id: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
+  { id: "gpt-5.1-codex", label: "GPT-5.1 Codex" },
+  { id: "gpt-5.1-codex-mini", label: "GPT-5.1 Codex Mini" },
+  { id: "gpt-5.1", label: "GPT-5.1" },
+];
+
+const THINKING_LEVELS: { id: ThinkingLevel; label: string }[] = [
+  { id: "none", label: "None" },
+  { id: "low", label: "Low" },
+  { id: "medium", label: "Medium" },
+  { id: "high", label: "High" },
+  { id: "ultrathink", label: "Ultrathink" },
+];
+
+// Helper to determine provider from model
+function getProviderFromModel(model: AgentModel): ModelProvider {
+  if (model.startsWith("gpt")) {
+    return "codex";
+  }
+  return "claude";
+}
+
+// Sortable Profile Card Component
+function SortableProfileCard({
+  profile,
+  onEdit,
+  onDelete,
+}: {
+  profile: AIProfile;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: profile.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : Brain;
+  const isCodex = profile.provider === "codex";
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "group relative flex items-start gap-4 p-4 rounded-xl border bg-card transition-all",
+        isDragging && "shadow-lg",
+        profile.isBuiltIn
+          ? "border-border/50"
+          : "border-border hover:border-primary/50 hover:shadow-sm"
+      )}
+      data-testid={`profile-card-${profile.id}`}
+    >
+      {/* Drag Handle */}
+      <button
+        {...attributes}
+        {...listeners}
+        className="p-1 rounded hover:bg-accent cursor-grab active:cursor-grabbing flex-shrink-0 mt-1"
+        data-testid={`profile-drag-handle-${profile.id}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <GripVertical className="h-4 w-4 text-muted-foreground" />
+      </button>
+
+      {/* Icon */}
+      <div
+        className={cn(
+          "flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center",
+          isCodex ? "bg-emerald-500/10" : "bg-primary/10"
+        )}
+      >
+        {IconComponent && (
+          <IconComponent
+            className={cn(
+              "w-5 h-5",
+              isCodex ? "text-emerald-500" : "text-primary"
+            )}
+          />
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold text-foreground">{profile.name}</h3>
+          {profile.isBuiltIn && (
+            <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+              <Lock className="w-2.5 h-2.5" />
+              Built-in
+            </span>
+          )}
+        </div>
+        <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">
+          {profile.description}
+        </p>
+        <div className="flex items-center gap-2 mt-2 flex-wrap">
+          <span
+            className={cn(
+              "text-xs px-2 py-0.5 rounded-full border",
+              isCodex
+                ? "border-emerald-500/30 text-emerald-600 dark:text-emerald-400 bg-emerald-500/10"
+                : "border-primary/30 text-primary bg-primary/10"
+            )}
+          >
+            {profile.model}
+          </span>
+          {profile.thinkingLevel !== "none" && (
+            <span className="text-xs px-2 py-0.5 rounded-full border border-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-500/10">
+              {profile.thinkingLevel}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      {!profile.isBuiltIn && (
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onEdit}
+            className="h-8 w-8 p-0"
+            data-testid={`edit-profile-${profile.id}`}
+          >
+            <Pencil className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onDelete}
+            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+            data-testid={`delete-profile-${profile.id}`}
+          >
+            <Trash2 className="w-4 h-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Profile Form Component
+function ProfileForm({
+  profile,
+  onSave,
+  onCancel,
+  isEditing,
+}: {
+  profile: Partial<AIProfile>;
+  onSave: (profile: Omit<AIProfile, "id">) => void;
+  onCancel: () => void;
+  isEditing: boolean;
+}) {
+  const [formData, setFormData] = useState({
+    name: profile.name || "",
+    description: profile.description || "",
+    model: profile.model || ("opus" as AgentModel),
+    thinkingLevel: profile.thinkingLevel || ("none" as ThinkingLevel),
+    icon: profile.icon || "Brain",
+  });
+
+  const provider = getProviderFromModel(formData.model);
+  const supportsThinking = modelSupportsThinking(formData.model);
+
+  const handleModelChange = (model: AgentModel) => {
+    const newProvider = getProviderFromModel(model);
+    setFormData({
+      ...formData,
+      model,
+      // Reset thinking level when switching to Codex (doesn't support thinking)
+      thinkingLevel: newProvider === "codex" ? "none" : formData.thinkingLevel,
+    });
+  };
+
+  const handleSubmit = () => {
+    if (!formData.name.trim()) {
+      toast.error("Please enter a profile name");
+      return;
+    }
+
+    onSave({
+      name: formData.name.trim(),
+      description: formData.description.trim(),
+      model: formData.model,
+      thinkingLevel: supportsThinking ? formData.thinkingLevel : "none",
+      provider,
+      isBuiltIn: false,
+      icon: formData.icon,
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Name */}
+      <div className="space-y-2">
+        <Label htmlFor="profile-name">Profile Name</Label>
+        <Input
+          id="profile-name"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          placeholder="e.g., Heavy Task, Quick Fix"
+          data-testid="profile-name-input"
+        />
+      </div>
+
+      {/* Description */}
+      <div className="space-y-2">
+        <Label htmlFor="profile-description">Description</Label>
+        <Textarea
+          id="profile-description"
+          value={formData.description}
+          onChange={(e) =>
+            setFormData({ ...formData, description: e.target.value })
+          }
+          placeholder="Describe when to use this profile..."
+          rows={2}
+          data-testid="profile-description-input"
+        />
+      </div>
+
+      {/* Icon Selection */}
+      <div className="space-y-2">
+        <Label>Icon</Label>
+        <div className="flex gap-2 flex-wrap">
+          {ICON_OPTIONS.map(({ name, icon: Icon }) => (
+            <button
+              key={name}
+              type="button"
+              onClick={() => setFormData({ ...formData, icon: name })}
+              className={cn(
+                "w-10 h-10 rounded-lg flex items-center justify-center border transition-colors",
+                formData.icon === name
+                  ? "bg-primary text-primary-foreground border-primary"
+                  : "bg-background hover:bg-accent border-input"
+              )}
+              data-testid={`icon-select-${name}`}
+            >
+              <Icon className="w-5 h-5" />
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Model Selection - Claude */}
+      <div className="space-y-2">
+        <Label className="flex items-center gap-2">
+          <Brain className="w-4 h-4 text-primary" />
+          Claude Models
+        </Label>
+        <div className="flex gap-2 flex-wrap">
+          {CLAUDE_MODELS.map(({ id, label }) => (
+            <button
+              key={id}
+              type="button"
+              onClick={() => handleModelChange(id)}
+              className={cn(
+                "flex-1 min-w-[100px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
+                formData.model === id
+                  ? "bg-primary text-primary-foreground border-primary"
+                  : "bg-background hover:bg-accent border-input"
+              )}
+              data-testid={`model-select-${id}`}
+            >
+              {label.replace("Claude ", "")}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Model Selection - Codex */}
+      <div className="space-y-2">
+        <Label className="flex items-center gap-2">
+          <Zap className="w-4 h-4 text-emerald-500" />
+          Codex Models
+        </Label>
+        <div className="flex gap-2 flex-wrap">
+          {CODEX_MODELS.map(({ id, label }) => (
+            <button
+              key={id}
+              type="button"
+              onClick={() => handleModelChange(id)}
+              className={cn(
+                "flex-1 min-w-[100px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
+                formData.model === id
+                  ? "bg-emerald-600 text-white border-emerald-500"
+                  : "bg-background hover:bg-accent border-input"
+              )}
+              data-testid={`model-select-${id}`}
+            >
+              {label.replace("GPT-5.1 ", "").replace("Codex ", "")}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Thinking Level - Only for Claude models */}
+      {supportsThinking && (
+        <div className="space-y-2">
+          <Label className="flex items-center gap-2">
+            <Brain className="w-4 h-4 text-amber-500" />
+            Thinking Level
+          </Label>
+          <div className="flex gap-2 flex-wrap">
+            {THINKING_LEVELS.map(({ id, label }) => (
+              <button
+                key={id}
+                type="button"
+                onClick={() => {
+                  setFormData({ ...formData, thinkingLevel: id });
+                  if (id === "ultrathink") {
+                    toast.warning("Ultrathink uses extensive reasoning", {
+                      description:
+                        "Best for complex architecture, migrations, or deep debugging (~$0.48/task).",
+                      duration: 4000,
+                    });
+                  }
+                }}
+                className={cn(
+                  "flex-1 min-w-[70px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
+                  formData.thinkingLevel === id
+                    ? "bg-amber-500 text-white border-amber-400"
+                    : "bg-background hover:bg-accent border-input"
+                )}
+                data-testid={`thinking-select-${id}`}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Higher levels give more time to reason through complex problems.
+          </p>
+        </div>
+      )}
+
+      {/* Actions */}
+      <DialogFooter className="pt-4">
+        <Button variant="ghost" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button onClick={handleSubmit} data-testid="save-profile-button">
+          {isEditing ? "Save Changes" : "Create Profile"}
+        </Button>
+      </DialogFooter>
+    </div>
+  );
+}
+
+export function ProfilesView() {
+  const { aiProfiles, addAIProfile, updateAIProfile, removeAIProfile, reorderAIProfiles } =
+    useAppStore();
+
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [editingProfile, setEditingProfile] = useState<AIProfile | null>(null);
+
+  // Sensors for drag-and-drop
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    })
+  );
+
+  // Separate built-in and custom profiles
+  const builtInProfiles = useMemo(
+    () => aiProfiles.filter((p) => p.isBuiltIn),
+    [aiProfiles]
+  );
+  const customProfiles = useMemo(
+    () => aiProfiles.filter((p) => !p.isBuiltIn),
+    [aiProfiles]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (over && active.id !== over.id) {
+        const oldIndex = aiProfiles.findIndex((p) => p.id === active.id);
+        const newIndex = aiProfiles.findIndex((p) => p.id === over.id);
+
+        if (oldIndex !== -1 && newIndex !== -1) {
+          reorderAIProfiles(oldIndex, newIndex);
+        }
+      }
+    },
+    [aiProfiles, reorderAIProfiles]
+  );
+
+  const handleAddProfile = (profile: Omit<AIProfile, "id">) => {
+    addAIProfile(profile);
+    setShowAddDialog(false);
+    toast.success("Profile created", {
+      description: `Created "${profile.name}" profile`,
+    });
+  };
+
+  const handleUpdateProfile = (profile: Omit<AIProfile, "id">) => {
+    if (editingProfile) {
+      updateAIProfile(editingProfile.id, profile);
+      setEditingProfile(null);
+      toast.success("Profile updated", {
+        description: `Updated "${profile.name}" profile`,
+      });
+    }
+  };
+
+  const handleDeleteProfile = (profile: AIProfile) => {
+    if (profile.isBuiltIn) return;
+
+    removeAIProfile(profile.id);
+    toast.success("Profile deleted", {
+      description: `Deleted "${profile.name}" profile`,
+    });
+  };
+
+  // Build keyboard shortcuts for profiles view
+  const profilesShortcuts: KeyboardShortcut[] = useMemo(() => {
+    const shortcuts: KeyboardShortcut[] = [];
+
+    // Add profile shortcut - when in profiles view
+    shortcuts.push({
+      key: ACTION_SHORTCUTS.addProfile,
+      action: () => setShowAddDialog(true),
+      description: "Create new profile",
+    });
+
+    return shortcuts;
+  }, []);
+
+  // Register keyboard shortcuts for profiles view
+  useKeyboardShortcuts(profilesShortcuts);
+
+  return (
+    <div
+      className="flex-1 flex flex-col overflow-hidden content-bg"
+      data-testid="profiles-view"
+    >
+      {/* Header Section */}
+      <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
+        <div className="px-8 py-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
+                <UserCircle className="w-5 h-5 text-primary-foreground" />
+              </div>
+              <div>
+                <h1 className="text-2xl font-bold text-foreground">
+                  AI Profiles
+                </h1>
+                <p className="text-sm text-muted-foreground">
+                  Create and manage model configuration presets
+                </p>
+              </div>
+            </div>
+            <Button onClick={() => setShowAddDialog(true)} data-testid="add-profile-button" className="relative">
+              <Plus className="w-4 h-4 mr-2" />
+              New Profile
+              <span className="hidden lg:flex items-center justify-center ml-2 px-2 py-0.5 text-[10px] font-mono rounded bg-white/5 border border-white/10 text-zinc-500">
+                {ACTION_SHORTCUTS.addProfile}
+              </span>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-8">
+        <div className="max-w-4xl mx-auto space-y-8">
+          {/* Custom Profiles Section */}
+          <div>
+            <div className="flex items-center gap-2 mb-4">
+              <h2 className="text-lg font-semibold text-foreground">
+                Custom Profiles
+              </h2>
+              <span className="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary">
+                {customProfiles.length}
+              </span>
+            </div>
+            {customProfiles.length === 0 ? (
+              <div className="rounded-xl border border-dashed border-border p-8 text-center">
+                <Sparkles className="w-10 h-10 text-muted-foreground mx-auto mb-3 opacity-50" />
+                <p className="text-muted-foreground">
+                  No custom profiles yet. Create one to get started!
+                </p>
+                <Button
+                  variant="outline"
+                  className="mt-4"
+                  onClick={() => setShowAddDialog(true)}
+                >
+                  <Plus className="w-4 h-4 mr-2" />
+                  Create Profile
+                </Button>
+              </div>
+            ) : (
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+              >
+                <SortableContext
+                  items={customProfiles.map((p) => p.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <div className="space-y-3">
+                    {customProfiles.map((profile) => (
+                      <SortableProfileCard
+                        key={profile.id}
+                        profile={profile}
+                        onEdit={() => setEditingProfile(profile)}
+                        onDelete={() => handleDeleteProfile(profile)}
+                      />
+                    ))}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            )}
+          </div>
+
+          {/* Built-in Profiles Section */}
+          <div>
+            <div className="flex items-center gap-2 mb-4">
+              <h2 className="text-lg font-semibold text-foreground">
+                Built-in Profiles
+              </h2>
+              <span className="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
+                {builtInProfiles.length}
+              </span>
+            </div>
+            <p className="text-sm text-muted-foreground mb-4">
+              Pre-configured profiles for common use cases. These cannot be
+              edited or deleted.
+            </p>
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={handleDragEnd}
+            >
+              <SortableContext
+                items={builtInProfiles.map((p) => p.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <div className="space-y-3">
+                  {builtInProfiles.map((profile) => (
+                    <SortableProfileCard
+                      key={profile.id}
+                      profile={profile}
+                      onEdit={() => {}}
+                      onDelete={() => {}}
+                    />
+                  ))}
+                </div>
+              </SortableContext>
+            </DndContext>
+          </div>
+        </div>
+      </div>
+
+      {/* Add Profile Dialog */}
+      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
+        <DialogContent data-testid="add-profile-dialog">
+          <DialogHeader>
+            <DialogTitle>Create New Profile</DialogTitle>
+            <DialogDescription>
+              Define a reusable model configuration preset.
+            </DialogDescription>
+          </DialogHeader>
+          <ProfileForm
+            profile={{}}
+            onSave={handleAddProfile}
+            onCancel={() => setShowAddDialog(false)}
+            isEditing={false}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Profile Dialog */}
+      <Dialog
+        open={!!editingProfile}
+        onOpenChange={() => setEditingProfile(null)}
+      >
+        <DialogContent data-testid="edit-profile-dialog">
+          <DialogHeader>
+            <DialogTitle>Edit Profile</DialogTitle>
+            <DialogDescription>Modify your profile settings.</DialogDescription>
+          </DialogHeader>
+          {editingProfile && (
+            <ProfileForm
+              profile={editingProfile}
+              onSave={handleUpdateProfile}
+              onCancel={() => setEditingProfile(null)}
+              isEditing={true}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
--- a/app/src/components/views/settings-view.tsx
+++ b/app/src/components/views/settings-view.tsx
--- a/app/src/hooks/use-electron-agent.ts
+++ b/app/src/hooks/use-electron-agent.ts
@@ -275,7 +275,8 @@ export function useElectronAgent({
          setIsProcessing(false);
          setError(event.error);
          if (event.message) {
-            setMessages((prev) => [...prev, event.message]);
+            const errorMessage = event.message;
+            setMessages((prev) => [...prev, errorMessage]);
          }
          break;
      }
@@ -409,5 +410,8 @@ export function useElectronAgent({
    stopExecution,
    clearHistory,
    error,
+    queuedMessages,
+    isQueueProcessing: isProcessingQueue,
+    clearMessageQueue: clearQueue,
  };
 }
--- a/app/src/hooks/use-keyboard-shortcuts.ts
+++ b/app/src/hooks/use-keyboard-shortcuts.ts
@@ -106,6 +106,7 @@ export const NAV_SHORTCUTS: Record<string, string> = {
  context: "C", // C for Context
  tools: "T", // T for Tools
  settings: "S", // S for Settings
+  profiles: "M", // M for Models/profiles
 };

 /**
@@ -127,4 +128,5 @@ export const ACTION_SHORTCUTS: Record<string, string> = {
  projectPicker: "P", // P for Project picker
  cyclePrevProject: "Q", // Q for previous project (cycle back through MRU)
  cycleNextProject: "E", // E for next project (cycle forward through MRU)
+  addProfile: "N", // N for New profile (when in profiles view)
 };
--- a/app/src/hooks/use-window-state.ts
+++ b/app/src/hooks/use-window-state.ts
@@ -0,0 +1,54 @@
+import { useState, useEffect } from "react";
+
+export interface WindowState {
+  isMaximized: boolean;
+  windowWidth: number;
+  windowHeight: number;
+}
+
+/**
+ * Hook to track window state (dimensions and maximized status)
+ * For Electron apps, considers window maximized if width > 1400px
+ * Also listens for window resize events to update state
+ */
+export function useWindowState(): WindowState {
+  const [windowState, setWindowState] = useState<WindowState>(() => {
+    if (typeof window === "undefined") {
+      return { isMaximized: false, windowWidth: 0, windowHeight: 0 };
+    }
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    return {
+      isMaximized: width > 1400,
+      windowWidth: width,
+      windowHeight: height,
+    };
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const updateWindowState = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      setWindowState({
+        isMaximized: width > 1400,
+        windowWidth: width,
+        windowHeight: height,
+      });
+    };
+
+    // Set initial state
+    updateWindowState();
+
+    // Listen for resize events
+    window.addEventListener("resize", updateWindowState);
+
+    return () => {
+      window.removeEventListener("resize", updateWindowState);
+    };
+  }, []);
+
+  return windowState;
+}
+
--- a/app/src/lib/agent-context-parser.ts
+++ b/app/src/lib/agent-context-parser.ts
@@ -34,8 +34,8 @@ export const DEFAULT_MODEL = "claude-opus-4-5-20251101";
 */
 export function formatModelName(model: string): string {
  if (model.includes("opus")) return "Opus 4.5";
-  if (model.includes("sonnet")) return "Sonnet 4";
-  if (model.includes("haiku")) return "Haiku 3.5";
+  if (model.includes("sonnet")) return "Sonnet 4.5";
+  if (model.includes("haiku")) return "Haiku 4.5";
  return model.split("-").slice(1, 3).join(" ");
 }

--- a/app/src/lib/electron.ts
+++ b/app/src/lib/electron.ts
@@ -41,22 +41,8 @@ export interface StatResult {
  error?: string;
 }

-// Auto Mode types
-export type AutoModePhase = "planning" | "action" | "verification";
-
-export interface AutoModeEvent {
-  type: "auto_mode_feature_start" | "auto_mode_progress" | "auto_mode_tool" | "auto_mode_feature_complete" | "auto_mode_error" | "auto_mode_complete" | "auto_mode_phase";
-  featureId?: string;
-  projectId?: string;
-  feature?: object;
-  content?: string;
-  tool?: string;
-  input?: unknown;
-  passes?: boolean;
-  message?: string;
-  error?: string;
-  phase?: AutoModePhase;
-}
+// Auto Mode types - Import from electron.d.ts to avoid duplication
+import type { AutoModeEvent, ModelDefinition, ProviderStatus, WorktreeAPI, GitAPI, WorktreeInfo, WorktreeStatus, FileDiffsResult, FileDiffResult, FileStatus } from "@/types/electron";

 // Feature Suggestions types
 export interface FeatureSuggestion {
@@ -104,7 +90,7 @@ export interface AutoModeAPI {
  stop: () => Promise<{ success: boolean; error?: string }>;
  stopFeature: (featureId: string) => Promise<{ success: boolean; error?: string }>;
  status: () => Promise<{ success: boolean; isRunning?: boolean; currentFeatureId?: string | null; runningFeatures?: string[]; error?: string }>;
-  runFeature: (projectPath: string, featureId: string) => Promise<{ success: boolean; passes?: boolean; error?: string }>;
+  runFeature: (projectPath: string, featureId: string, useWorktrees?: boolean) => Promise<{ success: boolean; passes?: boolean; error?: string }>;
  verifyFeature: (projectPath: string, featureId: string) => Promise<{ success: boolean; passes?: boolean; error?: string }>;
  resumeFeature: (projectPath: string, featureId: string) => Promise<{ success: boolean; passes?: boolean; error?: string }>;
  contextExists: (projectPath: string, featureId: string) => Promise<{ success: boolean; exists?: boolean; error?: string }>;
@@ -133,19 +119,63 @@ export interface ElectronAPI {
  deleteFile: (filePath: string) => Promise<WriteResult>;
  trashItem?: (filePath: string) => Promise<WriteResult>;
  getPath: (name: string) => Promise<string>;
-  saveImageToTemp?: (data: string, filename: string, mimeType: string) => Promise<SaveImageResult>;
-  autoMode?: AutoModeAPI;
+  saveImageToTemp?: (data: string, filename: string, mimeType: string, projectPath?: string) => Promise<SaveImageResult>;
+  checkClaudeCli?: () => Promise<{
+    success: boolean;
+    status?: string;
+    method?: string;
+    version?: string;
+    path?: string;
+    recommendation?: string;
+    installCommands?: {
+      macos?: string;
+      windows?: string;
+      linux?: string;
+      npm?: string;
+    };
+    error?: string;
+  }>;
+  checkCodexCli?: () => Promise<{
+    success: boolean;
+    status?: string;
+    method?: string;
+    version?: string;
+    path?: string;
+    hasApiKey?: boolean;
+    recommendation?: string;
+    installCommands?: {
+      macos?: string;
+      windows?: string;
+      linux?: string;
+      npm?: string;
+    };
+    error?: string;
+  }>;
+  model?: {
+    getAvailable: () => Promise<{
+      success: boolean;
+      models?: ModelDefinition[];
+      error?: string;
+    }>;
+    checkProviders: () => Promise<{
+      success: boolean;
+      providers?: Record<string, ProviderStatus>;
+      error?: string;
+    }>;
+  };
+  testOpenAIConnection?: (apiKey?: string) => Promise<{
+    success: boolean;
+    message?: string;
+    error?: string;
+  }>;
+  worktree?: WorktreeAPI;
+  git?: GitAPI;
  suggestions?: SuggestionsAPI;
  specRegeneration?: SpecRegenerationAPI;
 }

-// Augment global Window interface
-declare global {
-  interface Window {
-    electronAPI: ElectronAPI | undefined;
-    isElectron: boolean | undefined;
-  }
-}
+// Note: Window interface is declared in @/types/electron.d.ts
+// Do not redeclare here to avoid type conflicts

 // Mock data for web development
 const mockFeatures = [
@@ -394,12 +424,13 @@ export const getElectronAPI = (): ElectronAPI => {
    },

    // Save image to temp directory
-    saveImageToTemp: async (data: string, filename: string, mimeType: string) => {
-      // Generate a mock temp file path
+    saveImageToTemp: async (data: string, filename: string, mimeType: string, projectPath?: string) => {
+      // Generate a mock temp file path - use projectPath if provided
      const timestamp = Date.now();
-      const ext = mimeType.split("/")[1] || "png";
      const safeName = filename.replace(/[^a-zA-Z0-9.-]/g, "_");
-      const tempFilePath = `/tmp/automaker-images/${timestamp}_${safeName}`;
+      const tempFilePath = projectPath
+        ? `${projectPath}/.automaker/images/${timestamp}_${safeName}`
+        : `/tmp/automaker-images/${timestamp}_${safeName}`;

      // Store the image data in mock file system for testing
      mockFileSystem[tempFilePath] = data;
@@ -408,9 +439,37 @@ export const getElectronAPI = (): ElectronAPI => {
      return { success: true, path: tempFilePath };
    },

+    checkClaudeCli: async () => ({
+      success: false,
+      status: "not_installed",
+      recommendation: "Claude CLI checks are unavailable in the web preview.",
+    }),
+
+    checkCodexCli: async () => ({
+      success: false,
+      status: "not_installed",
+      recommendation: "Codex CLI checks are unavailable in the web preview.",
+    }),
+
+    model: {
+      getAvailable: async () => ({ success: true, models: [] }),
+      checkProviders: async () => ({ success: true, providers: {} }),
+    },
+
+    testOpenAIConnection: async () => ({
+      success: false,
+      error: "OpenAI connection test is only available in the Electron app.",
+    }),
+
    // Mock Auto Mode API
    autoMode: createMockAutoModeAPI(),

+    // Mock Worktree API
+    worktree: createMockWorktreeAPI(),
+
+    // Mock Git API (for non-worktree operations)
+    git: createMockGitAPI(),
+
    // Mock Suggestions API
    suggestions: createMockSuggestionsAPI(),

@@ -419,6 +478,99 @@ export const getElectronAPI = (): ElectronAPI => {
  };
 };

+// Mock Worktree API implementation
+function createMockWorktreeAPI(): WorktreeAPI {
+  return {
+    revertFeature: async (projectPath: string, featureId: string) => {
+      console.log("[Mock] Reverting feature:", { projectPath, featureId });
+      return { success: true, removedPath: `/mock/worktree/${featureId}` };
+    },
+
+    mergeFeature: async (projectPath: string, featureId: string, options?: object) => {
+      console.log("[Mock] Merging feature:", { projectPath, featureId, options });
+      return { success: true, mergedBranch: `feature/${featureId}` };
+    },
+
+    getInfo: async (projectPath: string, featureId: string) => {
+      console.log("[Mock] Getting worktree info:", { projectPath, featureId });
+      return {
+        success: true,
+        worktreePath: `/mock/worktrees/${featureId}`,
+        branchName: `feature/${featureId}`,
+        head: "abc1234",
+      };
+    },
+
+    getStatus: async (projectPath: string, featureId: string) => {
+      console.log("[Mock] Getting worktree status:", { projectPath, featureId });
+      return {
+        success: true,
+        modifiedFiles: 3,
+        files: ["src/feature.ts", "tests/feature.spec.ts", "README.md"],
+        diffStat: " 3 files changed, 50 insertions(+), 10 deletions(-)",
+        recentCommits: [
+          "abc1234 feat: implement feature",
+          "def5678 test: add tests for feature",
+        ],
+      };
+    },
+
+    list: async (projectPath: string) => {
+      console.log("[Mock] Listing worktrees:", { projectPath });
+      return { success: true, worktrees: [] };
+    },
+
+    getDiffs: async (projectPath: string, featureId: string) => {
+      console.log("[Mock] Getting file diffs:", { projectPath, featureId });
+      return {
+        success: true,
+        diff: "diff --git a/src/feature.ts b/src/feature.ts\n+++ new file\n@@ -0,0 +1,10 @@\n+export function feature() {\n+  return 'hello';\n+}",
+        files: [
+          { status: "A", path: "src/feature.ts", statusText: "Added" },
+          { status: "M", path: "README.md", statusText: "Modified" },
+        ],
+        hasChanges: true,
+      };
+    },
+
+    getFileDiff: async (projectPath: string, featureId: string, filePath: string) => {
+      console.log("[Mock] Getting file diff:", { projectPath, featureId, filePath });
+      return {
+        success: true,
+        diff: `diff --git a/${filePath} b/${filePath}\n+++ new file\n@@ -0,0 +1,5 @@\n+// New content`,
+        filePath,
+      };
+    },
+  };
+}
+
+// Mock Git API implementation (for non-worktree operations)
+function createMockGitAPI(): GitAPI {
+  return {
+    getDiffs: async (projectPath: string) => {
+      console.log("[Mock] Getting git diffs for project:", { projectPath });
+      return {
+        success: true,
+        diff: "diff --git a/src/feature.ts b/src/feature.ts\n+++ new file\n@@ -0,0 +1,10 @@\n+export function feature() {\n+  return 'hello';\n+}",
+        files: [
+          { status: "A", path: "src/feature.ts", statusText: "Added" },
+          { status: "M", path: "README.md", statusText: "Modified" },
+        ],
+        hasChanges: true,
+      };
+    },
+
+    getFileDiff: async (projectPath: string, filePath: string) => {
+      console.log("[Mock] Getting git file diff:", { projectPath, filePath });
+      return {
+        success: true,
+        diff: `diff --git a/${filePath} b/${filePath}\n+++ new file\n@@ -0,0 +1,5 @@\n+// New content`,
+        filePath,
+      };
+    },
+  };
+}
+
 // Mock Auto Mode state and implementation
 let mockAutoModeRunning = false;
 let mockRunningFeatures = new Set<string>(); // Track multiple concurrent feature verifications
@@ -487,11 +639,12 @@ function createMockAutoModeAPI(): AutoModeAPI {
      };
    },

-    runFeature: async (projectPath: string, featureId: string) => {
+    runFeature: async (projectPath: string, featureId: string, useWorktrees?: boolean) => {
      if (mockRunningFeatures.has(featureId)) {
        return { success: false, error: `Feature ${featureId} is already running` };
      }

+      console.log(`[Mock] Running feature ${featureId} with useWorktrees: ${useWorktrees}`);
      mockRunningFeatures.add(featureId);
      simulateAutoModeLoop(projectPath, featureId);

--- a/app/src/lib/log-parser.ts
+++ b/app/src/lib/log-parser.ts
@@ -12,7 +12,8 @@ export type LogEntryType =
  | "success"
  | "info"
  | "debug"
-  | "warning";
+  | "warning"
+  | "thinking";

 export interface LogEntry {
  id: string;
@@ -28,7 +29,27 @@ export interface LogEntry {
  };
 }

-const generateId = () => Math.random().toString(36).substring(2, 9);
+/**
+ * Generates a deterministic ID based on content and position
+ * This ensures the same log entry always gets the same ID,
+ * preserving expanded/collapsed state when new logs stream in
+ *
+ * Uses only the first 200 characters of content to ensure stability
+ * even when entries are merged (which appends content at the end)
+ */
+const generateDeterministicId = (content: string, lineIndex: number): string => {
+  // Use first 200 chars to ensure stability when entries are merged
+  const stableContent = content.slice(0, 200);
+  // Simple hash function for the content
+  let hash = 0;
+  const str = stableContent + '|' + lineIndex.toString();
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  return 'log_' + Math.abs(hash).toString(36);
+};

 /**
 * Detects the type of log entry based on content patterns
@@ -75,6 +96,18 @@ function detectEntryType(content: string): LogEntryType {
    return "warning";
  }

+  // Thinking/Preparation info
+  if (
+    trimmed.toLowerCase().includes("ultrathink") ||
+    trimmed.toLowerCase().includes("thinking level") ||
+    trimmed.toLowerCase().includes("estimated cost") ||
+    trimmed.toLowerCase().includes("estimated time") ||
+    trimmed.toLowerCase().includes("budget tokens") ||
+    trimmed.match(/thinking.*preparation/i)
+  ) {
+    return "thinking";
+  }
+
  // Debug info (JSON, stack traces, etc.)
  if (
    trimmed.startsWith("{") ||
@@ -130,6 +163,8 @@ function generateTitle(type: LogEntryType, content: string): string {
      return "Success";
    case "warning":
      return "Warning";
+    case "thinking":
+      return "Thinking Level";
    case "debug":
      return "Debug Info";
    case "prompt":
@@ -150,24 +185,32 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
  const entries: LogEntry[] = [];
  const lines = rawOutput.split("\n");

-  let currentEntry: LogEntry | null = null;
+  let currentEntry: Omit<LogEntry, 'id'> & { id?: string } | null = null;
  let currentContent: string[] = [];
+  let entryStartLine = 0; // Track the starting line for deterministic ID generation

  const finalizeEntry = () => {
    if (currentEntry && currentContent.length > 0) {
      currentEntry.content = currentContent.join("\n").trim();
      if (currentEntry.content) {
-        entries.push(currentEntry);
+        // Generate deterministic ID based on content and position
+        const entryWithId: LogEntry = {
+          ...currentEntry as Omit<LogEntry, 'id'>,
+          id: generateDeterministicId(currentEntry.content, entryStartLine),
+        };
+        entries.push(entryWithId);
      }
    }
    currentContent = [];
  };

+  let lineIndex = 0;
  for (const line of lines) {
    const trimmedLine = line.trim();

    // Skip empty lines at the beginning
    if (!trimmedLine && !currentEntry) {
+      lineIndex++;
      continue;
    }

@@ -180,15 +223,20 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
      trimmedLine.startsWith("✅") ||
      trimmedLine.startsWith("❌") ||
      trimmedLine.startsWith("⚠️") ||
+      trimmedLine.startsWith("🧠") ||
+      trimmedLine.toLowerCase().includes("ultrathink preparation") ||
+      trimmedLine.toLowerCase().includes("thinking level") ||
      (trimmedLine.startsWith("Input:") && currentEntry?.type === "tool_call");

    if (isNewEntry) {
      // Finalize previous entry
      finalizeEntry();

-      // Start new entry
+      // Track starting line for deterministic ID
+      entryStartLine = lineIndex;
+
+      // Start new entry (ID will be generated when finalizing)
      currentEntry = {
-        id: generateId(),
        type: lineType,
        title: generateTitle(lineType, trimmedLine),
        content: "",
@@ -202,15 +250,18 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
      // Continue current entry
      currentContent.push(line);
    } else {
+      // Track starting line for deterministic ID
+      entryStartLine = lineIndex;
+
      // No current entry, create a default info entry
      currentEntry = {
-        id: generateId(),
        type: "info",
        title: "Info",
        content: "",
      };
      currentContent.push(line);
    }
+    lineIndex++;
  }

  // Finalize last entry
@@ -230,6 +281,7 @@ function mergeConsecutiveEntries(entries: LogEntry[]): LogEntry[] {

  const merged: LogEntry[] = [];
  let current: LogEntry | null = null;
+  let mergeIndex = 0;

  for (const entry of entries) {
    if (
@@ -237,13 +289,15 @@ function mergeConsecutiveEntries(entries: LogEntry[]): LogEntry[] {
      (current.type === "debug" || current.type === "info") &&
      current.type === entry.type
    ) {
-      // Merge into current
+      // Merge into current - regenerate ID based on merged content
      current.content += "\n\n" + entry.content;
+      current.id = generateDeterministicId(current.content, mergeIndex);
    } else {
      if (current) {
        merged.push(current);
      }
      current = { ...entry };
+      mergeIndex = merged.length;
    }
  }

@@ -321,6 +375,14 @@ export function getLogTypeColors(type: LogEntryType): {
        icon: "text-orange-400",
        badge: "bg-orange-500/20 text-orange-300",
      };
+    case "thinking":
+      return {
+        bg: "bg-indigo-500/10",
+        border: "border-l-indigo-500",
+        text: "text-indigo-300",
+        icon: "text-indigo-400",
+        badge: "bg-indigo-500/20 text-indigo-300",
+      };
    case "debug":
      return {
        bg: "bg-primary/10",
--- a/app/src/lib/utils.ts
+++ b/app/src/lib/utils.ts
@@ -1,6 +1,45 @@
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
+import type { AgentModel } from "@/store/app-store"

 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
 }
+
+/**
+ * Check if a model is a Codex/OpenAI model (doesn't support thinking)
+ */
+export function isCodexModel(model?: AgentModel | string): boolean {
+  if (!model) return false;
+  const codexModels: string[] = [
+    "gpt-5.1-codex-max",
+    "gpt-5.1-codex",
+    "gpt-5.1-codex-mini",
+    "gpt-5.1",
+  ];
+  return codexModels.includes(model);
+}
+
+/**
+ * Determine if the current model supports extended thinking controls
+ */
+export function modelSupportsThinking(model?: AgentModel | string): boolean {
+  if (!model) return true;
+  return !isCodexModel(model);
+}
+
+/**
+ * Get display name for a model
+ */
+export function getModelDisplayName(model: AgentModel | string): string {
+  const displayNames: Record<string, string> = {
+    haiku: "Claude Haiku",
+    sonnet: "Claude Sonnet",
+    opus: "Claude Opus",
+    "gpt-5.1-codex-max": "GPT-5.1 Codex Max",
+    "gpt-5.1-codex": "GPT-5.1 Codex",
+    "gpt-5.1-codex-mini": "GPT-5.1 Codex Mini",
+    "gpt-5.1": "GPT-5.1",
+  };
+  return displayNames[model] || model;
+}
--- a/app/src/store/app-store.ts
+++ b/app/src/store/app-store.ts
@@ -10,7 +10,8 @@ export type ViewMode =
  | "settings"
  | "tools"
  | "interview"
-  | "context";
+  | "context"
+  | "profiles";

 export type ThemeMode =
  | "light"
@@ -32,6 +33,7 @@ export type KanbanCardDetailLevel = "minimal" | "standard" | "detailed";
 export interface ApiKeys {
  anthropic: string;
  google: string;
+  openai: string;
 }

 export interface ImageAttachment {
@@ -75,6 +77,36 @@ export interface FeatureImagePath {
  mimeType: string;
 }

+// Available models for feature execution
+// Claude models
+export type ClaudeModel = "opus" | "sonnet" | "haiku";
+// OpenAI/Codex models
+export type OpenAIModel =
+  | "gpt-5.1-codex-max"
+  | "gpt-5.1-codex"
+  | "gpt-5.1-codex-mini"
+  | "gpt-5.1";
+// Combined model type
+export type AgentModel = ClaudeModel | OpenAIModel;
+
+// Model provider type
+export type ModelProvider = "claude" | "codex";
+
+// Thinking level (budget_tokens) options
+export type ThinkingLevel = "none" | "low" | "medium" | "high" | "ultrathink";
+
+// AI Provider Profile - user-defined presets for model configurations
+export interface AIProfile {
+  id: string;
+  name: string;
+  description: string;
+  model: AgentModel;
+  thinkingLevel: ThinkingLevel;
+  provider: ModelProvider;
+  isBuiltIn: boolean; // Built-in profiles cannot be deleted
+  icon?: string; // Optional icon name from lucide
+}
+
 export interface Feature {
  id: string;
  category: string;
@@ -86,7 +118,30 @@ export interface Feature {
  startedAt?: string; // ISO timestamp for when the card moved to in_progress
  skipTests?: boolean; // When true, skip TDD approach and require manual verification
  summary?: string; // Summary of what was done/modified by the agent
+  model?: AgentModel; // Model to use for this feature (defaults to opus)
+  thinkingLevel?: ThinkingLevel; // Thinking level for extended thinking (defaults to none)
  error?: string; // Error message if the agent errored during processing
+  // Worktree info - set when a feature is being worked on in an isolated git worktree
+  worktreePath?: string; // Path to the worktree directory
+  branchName?: string; // Name of the feature branch
+}
+
+// File tree node for project analysis
+export interface FileTreeNode {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  extension?: string;
+  children?: FileTreeNode[];
+}
+
+// Project analysis result
+export interface ProjectAnalysis {
+  fileTree: FileTreeNode[];
+  totalFiles: number;
+  totalDirectories: number;
+  filesByExtension: Record<string, number>;
+  analyzedAt: string;
 }

 export interface AppState {
@@ -137,6 +192,19 @@ export interface AppState {

  // Feature Default Settings
  defaultSkipTests: boolean; // Default value for skip tests when creating new features
+
+  // Worktree Settings
+  useWorktrees: boolean; // Whether to use git worktree isolation for features (default: false)
+
+  // AI Profiles
+  aiProfiles: AIProfile[];
+
+  // Profile Display Settings
+  showProfilesOnly: boolean; // When true, hide model tweaking options and show only profile selection
+
+  // Project Analysis
+  projectAnalysis: ProjectAnalysis | null;
+  isAnalyzing: boolean;
 }

 export interface AutoModeActivity {
@@ -226,6 +294,23 @@ export interface AppActions {
  // Feature Default Settings actions
  setDefaultSkipTests: (skip: boolean) => void;

+  // Worktree Settings actions
+  setUseWorktrees: (enabled: boolean) => void;
+
+  // Profile Display Settings actions
+  setShowProfilesOnly: (enabled: boolean) => void;
+
+  // AI Profile actions
+  addAIProfile: (profile: Omit<AIProfile, "id">) => void;
+  updateAIProfile: (id: string, updates: Partial<AIProfile>) => void;
+  removeAIProfile: (id: string) => void;
+  reorderAIProfiles: (oldIndex: number, newIndex: number) => void;
+
+  // Project Analysis actions
+  setProjectAnalysis: (analysis: ProjectAnalysis | null) => void;
+  setIsAnalyzing: (analyzing: boolean) => void;
+  clearAnalysis: () => void;
+
  // Agent Session actions
  setLastSelectedSession: (projectPath: string, sessionId: string | null) => void;
  getLastSelectedSession: (projectPath: string) => string | null;
@@ -234,6 +319,60 @@ export interface AppActions {
  reset: () => void;
 }

+// Default built-in AI profiles
+const DEFAULT_AI_PROFILES: AIProfile[] = [
+  {
+    id: "profile-heavy-task",
+    name: "Heavy Task",
+    description: "Claude Opus with Ultrathink for complex architecture, migrations, or deep debugging.",
+    model: "opus",
+    thinkingLevel: "ultrathink",
+    provider: "claude",
+    isBuiltIn: true,
+    icon: "Brain",
+  },
+  {
+    id: "profile-balanced",
+    name: "Balanced",
+    description: "Claude Sonnet with medium thinking for typical development tasks.",
+    model: "sonnet",
+    thinkingLevel: "medium",
+    provider: "claude",
+    isBuiltIn: true,
+    icon: "Scale",
+  },
+  {
+    id: "profile-quick-edit",
+    name: "Quick Edit",
+    description: "Claude Haiku for fast, simple edits and minor fixes.",
+    model: "haiku",
+    thinkingLevel: "none",
+    provider: "claude",
+    isBuiltIn: true,
+    icon: "Zap",
+  },
+  {
+    id: "profile-codex-power",
+    name: "Codex Power",
+    description: "GPT-5.1 Codex Max for deep coding tasks via OpenAI CLI.",
+    model: "gpt-5.1-codex-max",
+    thinkingLevel: "none",
+    provider: "codex",
+    isBuiltIn: true,
+    icon: "Cpu",
+  },
+  {
+    id: "profile-codex-fast",
+    name: "Codex Fast",
+    description: "GPT-5.1 Codex Mini for lightweight and quick edits.",
+    model: "gpt-5.1-codex-mini",
+    thinkingLevel: "none",
+    provider: "codex",
+    isBuiltIn: true,
+    icon: "Rocket",
+  },
+];
+
 const initialState: AppState = {
  projects: [],
  currentProject: null,
@@ -250,6 +389,7 @@ const initialState: AppState = {
  apiKeys: {
    anthropic: "",
    google: "",
+    openai: "",
  },
  chatSessions: [],
  currentChatSession: null,
@@ -259,6 +399,11 @@ const initialState: AppState = {
  maxConcurrency: 3, // Default to 3 concurrent agents
  kanbanCardDetailLevel: "standard", // Default to standard detail level
  defaultSkipTests: false, // Default to TDD mode (tests enabled)
+  useWorktrees: false, // Default to disabled (worktree feature is experimental)
+  showProfilesOnly: false, // Default to showing all options (not profiles only)
+  aiProfiles: DEFAULT_AI_PROFILES,
+  projectAnalysis: null,
+  isAnalyzing: false,
 };

 export const useAppStore = create<AppState & AppActions>()(
@@ -722,6 +867,48 @@ export const useAppStore = create<AppState & AppActions>()(
      // Feature Default Settings actions
      setDefaultSkipTests: (skip) => set({ defaultSkipTests: skip }),

+      // Worktree Settings actions
+      setUseWorktrees: (enabled) => set({ useWorktrees: enabled }),
+
+      // Profile Display Settings actions
+      setShowProfilesOnly: (enabled) => set({ showProfilesOnly: enabled }),
+
+      // AI Profile actions
+      addAIProfile: (profile) => {
+        const id = `profile-${Date.now()}-${Math.random()
+          .toString(36)
+          .substr(2, 9)}`;
+        set({ aiProfiles: [...get().aiProfiles, { ...profile, id }] });
+      },
+
+      updateAIProfile: (id, updates) => {
+        set({
+          aiProfiles: get().aiProfiles.map((p) =>
+            p.id === id ? { ...p, ...updates } : p
+          ),
+        });
+      },
+
+      removeAIProfile: (id) => {
+        // Only allow removing non-built-in profiles
+        const profile = get().aiProfiles.find((p) => p.id === id);
+        if (profile && !profile.isBuiltIn) {
+          set({ aiProfiles: get().aiProfiles.filter((p) => p.id !== id) });
+        }
+      },
+
+      reorderAIProfiles: (oldIndex, newIndex) => {
+        const profiles = [...get().aiProfiles];
+        const [movedProfile] = profiles.splice(oldIndex, 1);
+        profiles.splice(newIndex, 0, movedProfile);
+        set({ aiProfiles: profiles });
+      },
+
+      // Project Analysis actions
+      setProjectAnalysis: (analysis) => set({ projectAnalysis: analysis }),
+      setIsAnalyzing: (analyzing) => set({ isAnalyzing: analyzing }),
+      clearAnalysis: () => set({ projectAnalysis: null }),
+
      // Agent Session actions
      setLastSelectedSession: (projectPath, sessionId) => {
        const current = get().lastSelectedSessionByProject;
@@ -742,7 +929,6 @@ export const useAppStore = create<AppState & AppActions>()(
      getLastSelectedSession: (projectPath) => {
        return get().lastSelectedSessionByProject[projectPath] || null;
      },
-
      // Reset
      reset: () => set(initialState),
    }),
@@ -763,6 +949,9 @@ export const useAppStore = create<AppState & AppActions>()(
        maxConcurrency: state.maxConcurrency,
        kanbanCardDetailLevel: state.kanbanCardDetailLevel,
        defaultSkipTests: state.defaultSkipTests,
+        useWorktrees: state.useWorktrees,
+        showProfilesOnly: state.showProfilesOnly,
+        aiProfiles: state.aiProfiles,
        lastSelectedSessionByProject: state.lastSelectedSessionByProject,
      }),
    }
--- a/app/src/types/electron.d.ts
+++ b/app/src/types/electron.d.ts
@@ -202,6 +202,14 @@ export type AutoModeEvent =
      projectId?: string;
      phase: "planning" | "action" | "verification";
      message: string;
+    }
+  | {
+      type: "auto_mode_ultrathink_preparation";
+      featureId: string;
+      warnings: string[];
+      recommendations: string[];
+      estimatedCost?: number;
+      estimatedTime?: string;
    };

 export type SpecRegenerationEvent =
@@ -279,7 +287,7 @@ export interface AutoModeAPI {
    error?: string;
  }>;

-  runFeature: (projectPath: string, featureId: string) => Promise<{
+  runFeature: (projectPath: string, featureId: string, useWorktrees?: boolean) => Promise<{
    success: boolean;
    passes?: boolean;
    error?: string;
@@ -370,6 +378,10 @@ export interface ElectronAPI {
    };
    error?: string;
  }>;
+  deleteFile: (filePath: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;

  // App APIs
  getPath: (name: string) => Promise<string>;
@@ -393,10 +405,191 @@ export interface ElectronAPI {
  // Auto Mode APIs
  autoMode: AutoModeAPI;

+  // Claude CLI Detection API
+  checkClaudeCli: () => Promise<{
+    success: boolean;
+    status?: string;
+    method?: string;
+    version?: string;
+    path?: string;
+    recommendation?: string;
+    installCommands?: {
+      macos?: string;
+      windows?: string;
+      linux?: string;
+      npm?: string;
+    };
+    error?: string;
+  }>;
+
+  // Codex CLI Detection API
+  checkCodexCli: () => Promise<{
+    success: boolean;
+    status?: string;
+    method?: string;
+    version?: string;
+    path?: string;
+    hasApiKey?: boolean;
+    recommendation?: string;
+    installCommands?: {
+      macos?: string;
+      windows?: string;
+      linux?: string;
+      npm?: string;
+    };
+    error?: string;
+  }>;
+
+  // Model Management APIs
+  model: {
+    // Get all available models from all providers
+    getAvailable: () => Promise<{
+      success: boolean;
+      models?: ModelDefinition[];
+      error?: string;
+    }>;
+
+    // Check all provider installation status
+    checkProviders: () => Promise<{
+      success: boolean;
+      providers?: Record<string, ProviderStatus>;
+      error?: string;
+    }>;
+  };
+
+  // OpenAI API
+  testOpenAIConnection: (apiKey?: string) => Promise<{
+    success: boolean;
+    message?: string;
+    error?: string;
+  }>;
+
+  // Worktree Management APIs
+  worktree: WorktreeAPI;
+
+  // Git Operations APIs (for non-worktree operations)
+  git: GitAPI;
+
  // Spec Regeneration APIs
  specRegeneration: SpecRegenerationAPI;
 }

+export interface WorktreeInfo {
+  worktreePath: string;
+  branchName: string;
+  head?: string;
+  baseBranch?: string;
+}
+
+export interface WorktreeStatus {
+  success: boolean;
+  modifiedFiles?: number;
+  files?: string[];
+  diffStat?: string;
+  recentCommits?: string[];
+  error?: string;
+}
+
+export interface FileStatus {
+  status: string;
+  path: string;
+  statusText: string;
+}
+
+export interface FileDiffsResult {
+  success: boolean;
+  diff?: string;
+  files?: FileStatus[];
+  hasChanges?: boolean;
+  error?: string;
+}
+
+export interface FileDiffResult {
+  success: boolean;
+  diff?: string;
+  filePath?: string;
+  error?: string;
+}
+
+export interface WorktreeAPI {
+  // Revert feature changes by removing the worktree
+  revertFeature: (projectPath: string, featureId: string) => Promise<{
+    success: boolean;
+    removedPath?: string;
+    error?: string;
+  }>;
+
+  // Merge feature worktree changes back to main branch
+  mergeFeature: (projectPath: string, featureId: string, options?: {
+    squash?: boolean;
+    commitMessage?: string;
+    squashMessage?: string;
+  }) => Promise<{
+    success: boolean;
+    mergedBranch?: string;
+    error?: string;
+  }>;
+
+  // Get worktree info for a feature
+  getInfo: (projectPath: string, featureId: string) => Promise<{
+    success: boolean;
+    worktreePath?: string;
+    branchName?: string;
+    head?: string;
+    error?: string;
+  }>;
+
+  // Get worktree status (changed files, commits)
+  getStatus: (projectPath: string, featureId: string) => Promise<WorktreeStatus>;
+
+  // List all feature worktrees
+  list: (projectPath: string) => Promise<{
+    success: boolean;
+    worktrees?: WorktreeInfo[];
+    error?: string;
+  }>;
+
+  // Get file diffs for a feature worktree
+  getDiffs: (projectPath: string, featureId: string) => Promise<FileDiffsResult>;
+
+  // Get diff for a specific file in a worktree
+  getFileDiff: (projectPath: string, featureId: string, filePath: string) => Promise<FileDiffResult>;
+}
+
+export interface GitAPI {
+  // Get diffs for the main project (not a worktree)
+  getDiffs: (projectPath: string) => Promise<FileDiffsResult>;
+
+  // Get diff for a specific file in the main project
+  getFileDiff: (projectPath: string, filePath: string) => Promise<FileDiffResult>;
+}
+
+// Model definition type
+export interface ModelDefinition {
+  id: string;
+  name: string;
+  modelString: string;
+  provider: "claude" | "codex";
+  description?: string;
+  tier?: "basic" | "standard" | "premium";
+  default?: boolean;
+}
+
+// Provider status type
+export interface ProviderStatus {
+  status: "installed" | "not_installed" | "api_key_only";
+  method?: string;
+  version?: string;
+  path?: string;
+  recommendation?: string;
+  installCommands?: {
+    macos?: string;
+    windows?: string;
+    linux?: string;
+    npm?: string;
+  };
+}
+
 declare global {
  interface Window {
    electronAPI: ElectronAPI;