Merge branch 'main' into feat/feature-priority

2026-01-31 20:03:37 +00:00 · 2025-12-16 01:13:27 -06:00
parent 9eb9c070cd 7110a690e1
commit 8774d28bc4
42 changed files with 2201 additions and 610 deletions
--- a/apps/app/src/components/delete-all-archived-sessions-dialog.tsx
+++ b/apps/app/src/components/delete-all-archived-sessions-dialog.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
+
+interface DeleteAllArchivedSessionsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  archivedCount: number;
+  onConfirm: () => void;
+}
+
+export function DeleteAllArchivedSessionsDialog({
+  open,
+  onOpenChange,
+  archivedCount,
+  onConfirm,
+}: DeleteAllArchivedSessionsDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="delete-all-archived-sessions-dialog">
+        <DialogHeader>
+          <DialogTitle>Delete All Archived Sessions</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete all archived sessions? This action
+            cannot be undone.
+            {archivedCount > 0 && (
+              <span className="block mt-2 text-yellow-500">
+                {archivedCount} session(s) will be deleted.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            data-testid="confirm-delete-all-archived-sessions"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete All
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/apps/app/src/components/session-manager.tsx
+++ b/apps/app/src/components/session-manager.tsx
@@ -27,6 +27,7 @@ import type { SessionListItem } from "@/types/electron";
 import { useKeyboardShortcutsConfig } from "@/hooks/use-keyboard-shortcuts";
 import { getElectronAPI } from "@/lib/electron";
 import { DeleteSessionDialog } from "@/components/delete-session-dialog";
+import { DeleteAllArchivedSessionsDialog } from "@/components/delete-all-archived-sessions-dialog";

 // Random session name generator
 const adjectives = [
@@ -116,6 +117,7 @@ export function SessionManager({
  );
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [sessionToDelete, setSessionToDelete] = useState<SessionListItem | null>(null);
+  const [isDeleteAllArchivedDialogOpen, setIsDeleteAllArchivedDialogOpen] = useState(false);

  // Check running state for all sessions
  const checkRunningSessions = async (sessionList: SessionListItem[]) => {
@@ -314,6 +316,20 @@ export function SessionManager({
    setSessionToDelete(null);
  };

+  // Delete all archived sessions
+  const handleDeleteAllArchivedSessions = async () => {
+    const api = getElectronAPI();
+    if (!api?.sessions) return;
+
+    // Delete each archived session
+    for (const session of archivedSessions) {
+      await api.sessions.delete(session.id);
+    }
+
+    await loadSessions();
+    setIsDeleteAllArchivedDialogOpen(false);
+  };
+
  const activeSessions = sessions.filter((s) => !s.isArchived);
  const archivedSessions = sessions.filter((s) => s.isArchived);
  const displayedSessions =
@@ -402,6 +418,22 @@ export function SessionManager({
          </div>
        )}

+        {/* Delete All Archived button - shown at the top of archived sessions */}
+        {activeTab === "archived" && archivedSessions.length > 0 && (
+          <div className="pb-2 border-b mb-2">
+            <Button
+              variant="destructive"
+              size="sm"
+              className="w-full"
+              onClick={() => setIsDeleteAllArchivedDialogOpen(true)}
+              data-testid="delete-all-archived-sessions-button"
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete All Archived Sessions
+            </Button>
+          </div>
+        )}
+
        {/* Session list */}
        {displayedSessions.map((session) => (
          <div
@@ -574,6 +606,14 @@ export function SessionManager({
        session={sessionToDelete}
        onConfirm={confirmDeleteSession}
      />
+
+      {/* Delete All Archived Sessions Confirmation Dialog */}
+      <DeleteAllArchivedSessionsDialog
+        open={isDeleteAllArchivedDialogOpen}
+        onOpenChange={setIsDeleteAllArchivedDialogOpen}
+        archivedCount={archivedSessions.length}
+        onConfirm={handleDeleteAllArchivedSessions}
+      />
    </Card>
  );
 }
--- a/apps/app/src/components/ui/git-diff-panel.tsx
+++ b/apps/app/src/components/ui/git-diff-panel.tsx
@@ -620,6 +620,41 @@ export function GitDiffPanel({
                    onToggle={() => toggleFile(fileDiff.filePath)}
                  />
                ))}
+                {/* Fallback for files that have no diff content (shouldn't happen after fix, but safety net) */}
+                {files.length > 0 && parsedDiffs.length === 0 && (
+                  <div className="space-y-2">
+                    {files.map((file) => (
+                      <div
+                        key={file.path}
+                        className="border border-border rounded-lg overflow-hidden"
+                      >
+                        <div className="w-full px-3 py-2 flex items-center gap-2 text-left bg-card">
+                          {getFileIcon(file.status)}
+                          <span className="flex-1 text-sm font-mono truncate text-foreground">
+                            {file.path}
+                          </span>
+                          <span
+                            className={cn(
+                              "text-xs px-1.5 py-0.5 rounded border font-medium",
+                              getStatusBadgeColor(file.status)
+                            )}
+                          >
+                            {getStatusDisplayName(file.status)}
+                          </span>
+                        </div>
+                        <div className="px-4 py-3 text-sm text-muted-foreground bg-background border-t border-border">
+                          {file.status === "?" ? (
+                            <span>New file - content preview not available</span>
+                          ) : file.status === "D" ? (
+                            <span>File deleted</span>
+                          ) : (
+                            <span>Diff content not available</span>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
              </div>
            </div>
          )}
--- a/apps/app/src/components/views/board-view/components/kanban-card.tsx
+++ b/apps/app/src/components/views/board-view/components/kanban-card.tsx
@@ -84,8 +84,8 @@ function formatThinkingLevel(level: ThinkingLevel | undefined): string {
  const labels: Record<ThinkingLevel, string> = {
    none: "",
    low: "Low",
-    medium: "Med",
-    high: "High",
+    medium: "Med", //
+    high: "High", //
    ultrathink: "Ultra",
  };
  return labels[level];
@@ -952,7 +952,7 @@ export const KanbanCard = memo(function KanbanCard({
              ) : null}
              {onViewOutput && !feature.skipTests && (
                <Button
-                  variant="ghost"
+                  variant="secondary"
                  size="sm"
                  className="h-7 text-[11px] px-2"
                  onClick={(e) => {
--- a/apps/app/src/components/views/board-view/dialogs/add-feature-dialog.tsx
+++ b/apps/app/src/components/views/board-view/dialogs/add-feature-dialog.tsx
@@ -19,7 +19,9 @@ import {
  FeatureImagePath as DescriptionImagePath,
  ImagePreviewMap,
 } from "@/components/ui/description-image-dropzone";
-import { MessageSquare, Settings2, FlaskConical } from "lucide-react";
+import { MessageSquare, Settings2, FlaskConical, Sparkles, ChevronDown } from "lucide-react";
+import { toast } from "sonner";
+import { getElectronAPI } from "@/lib/electron";
 import { modelSupportsThinking } from "@/lib/utils";
 import {
  useAppStore,
@@ -35,6 +37,12 @@ import {
  TestingTabContent,
  PrioritySelector,
 } from "../shared";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";

 interface AddFeatureDialogProps {
  open: boolean;
@@ -82,6 +90,11 @@ export function AddFeatureDialog({
    useState<ImagePreviewMap>(() => new Map());
  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
  const [descriptionError, setDescriptionError] = useState(false);
+  const [isEnhancing, setIsEnhancing] = useState(false);
+  const [enhancementMode, setEnhancementMode] = useState<'improve' | 'technical' | 'simplify' | 'acceptance'>('improve');
+
+  // Get enhancement model from store
+  const { enhancementModel } = useAppStore();

  // Sync skipTests default when dialog opens
  useEffect(() => {
@@ -144,6 +157,33 @@ export function AddFeatureDialog({
    }
  };

+  const handleEnhanceDescription = async () => {
+    if (!newFeature.description.trim() || isEnhancing) return;
+
+    setIsEnhancing(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.enhancePrompt?.enhance(
+        newFeature.description,
+        enhancementMode,
+        enhancementModel
+      );
+
+      if (result?.success && result.enhancedText) {
+        const enhancedText = result.enhancedText;
+        setNewFeature(prev => ({ ...prev, description: enhancedText }));
+        toast.success("Description enhanced!");
+      } else {
+        toast.error(result?.error || "Failed to enhance description");
+      }
+    } catch (error) {
+      console.error("Enhancement failed:", error);
+      toast.error("Failed to enhance description");
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+
  const handleModelSelect = (model: AgentModel) => {
    setNewFeature({
      ...newFeature,
@@ -208,7 +248,7 @@ export function AddFeatureDialog({
          </TabsList>

          {/* Prompt Tab */}
-          <TabsContent value="prompt" className="space-y-4 overflow-y-auto">
+          <TabsContent value="prompt" className="space-y-4 overflow-y-auto cursor-default">
            <div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <DescriptionImageDropZone
@@ -230,6 +270,45 @@ export function AddFeatureDialog({
                error={descriptionError}
              />
            </div>
+            <div className="flex w-fit items-center gap-3 select-none cursor-default">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size="sm" className="w-[180px] justify-between">
+                    {enhancementMode === 'improve' && 'Improve Clarity'}
+                    {enhancementMode === 'technical' && 'Add Technical Details'}
+                    {enhancementMode === 'simplify' && 'Simplify'}
+                    {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
+                    <ChevronDown className="w-4 h-4 ml-2" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
+                    Improve Clarity
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
+                    Add Technical Details
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
+                    Simplify
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
+                    Add Acceptance Criteria
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleEnhanceDescription}
+                disabled={!newFeature.description.trim() || isEnhancing}
+                loading={isEnhancing}
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                Enhance with AI
+              </Button>
+            </div>
            <div className="space-y-2">
              <Label htmlFor="category">Category (optional)</Label>
              <CategoryAutocomplete
@@ -254,7 +333,7 @@ export function AddFeatureDialog({
          </TabsContent>

          {/* Model Tab */}
-          <TabsContent value="model" className="space-y-4 overflow-y-auto">
+          <TabsContent value="model" className="space-y-4 overflow-y-auto cursor-default">
            {/* Show Advanced Options Toggle */}
            {showProfilesOnly && (
              <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
@@ -317,7 +396,7 @@ export function AddFeatureDialog({
          </TabsContent>

          {/* Testing Tab */}
-          <TabsContent value="testing" className="space-y-4 overflow-y-auto">
+          <TabsContent value="testing" className="space-y-4 overflow-y-auto cursor-default">
            <TestingTabContent
              skipTests={newFeature.skipTests}
              onSkipTestsChange={(skipTests) =>
--- a/apps/app/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
+++ b/apps/app/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
@@ -19,13 +19,16 @@ import {
  FeatureImagePath as DescriptionImagePath,
  ImagePreviewMap,
 } from "@/components/ui/description-image-dropzone";
-import { MessageSquare, Settings2, FlaskConical, GitBranch } from "lucide-react";
+import { MessageSquare, Settings2, FlaskConical, Sparkles, ChevronDown } from "lucide-react";
+import { toast } from "sonner";
+import { getElectronAPI } from "@/lib/electron";
 import { modelSupportsThinking } from "@/lib/utils";
 import {
  Feature,
  AgentModel,
  ThinkingLevel,
  AIProfile,
+  useAppStore,
 } from "@/store/app-store";
 import {
  ModelSelector,
@@ -34,7 +37,12 @@ import {
  TestingTabContent,
  PrioritySelector,
 } from "../shared";
-import { DependencyTreeDialog } from "./dependency-tree-dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";

 interface EditFeatureDialogProps {
  feature: Feature | null;
@@ -73,7 +81,11 @@ export function EditFeatureDialog({
  const [editFeaturePreviewMap, setEditFeaturePreviewMap] =
    useState<ImagePreviewMap>(() => new Map());
  const [showEditAdvancedOptions, setShowEditAdvancedOptions] = useState(false);
-  const [showDependencyTree, setShowDependencyTree] = useState(false);
+  const [isEnhancing, setIsEnhancing] = useState(false);
+  const [enhancementMode, setEnhancementMode] = useState<'improve' | 'technical' | 'simplify' | 'acceptance'>('improve');
+
+  // Get enhancement model from store
+  const { enhancementModel } = useAppStore();

  useEffect(() => {
    setEditingFeature(feature);
@@ -134,6 +146,33 @@ export function EditFeatureDialog({
    });
  };

+  const handleEnhanceDescription = async () => {
+    if (!editingFeature?.description.trim() || isEnhancing) return;
+
+    setIsEnhancing(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.enhancePrompt?.enhance(
+        editingFeature.description,
+        enhancementMode,
+        enhancementModel
+      );
+
+      if (result?.success && result.enhancedText) {
+        const enhancedText = result.enhancedText;
+        setEditingFeature(prev => prev ? { ...prev, description: enhancedText } : prev);
+        toast.success("Description enhanced!");
+      } else {
+        toast.error(result?.error || "Failed to enhance description");
+      }
+    } catch (error) {
+      console.error("Enhancement failed:", error);
+      toast.error("Failed to enhance description");
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+
  const editModelAllowsThinking = modelSupportsThinking(editingFeature?.model);

  if (!editingFeature) {
@@ -182,7 +221,7 @@ export function EditFeatureDialog({
          </TabsList>

          {/* Prompt Tab */}
-          <TabsContent value="prompt" className="space-y-4 overflow-y-auto">
+          <TabsContent value="prompt" className="space-y-4 overflow-y-auto cursor-default">
            <div className="space-y-2">
              <Label htmlFor="edit-description">Description</Label>
              <DescriptionImageDropZone
@@ -206,6 +245,45 @@ export function EditFeatureDialog({
                data-testid="edit-feature-description"
              />
            </div>
+            <div className="flex w-fit items-center gap-3 select-none cursor-default">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size="sm" className="w-[180px] justify-between">
+                    {enhancementMode === 'improve' && 'Improve Clarity'}
+                    {enhancementMode === 'technical' && 'Add Technical Details'}
+                    {enhancementMode === 'simplify' && 'Simplify'}
+                    {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
+                    <ChevronDown className="w-4 h-4 ml-2" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
+                    Improve Clarity
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
+                    Add Technical Details
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
+                    Simplify
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
+                    Add Acceptance Criteria
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleEnhanceDescription}
+                disabled={!editingFeature.description.trim() || isEnhancing}
+                loading={isEnhancing}
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                Enhance with AI
+              </Button>
+            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-category">Category (optional)</Label>
              <CategoryAutocomplete
@@ -236,7 +314,7 @@ export function EditFeatureDialog({
          </TabsContent>

          {/* Model Tab */}
-          <TabsContent value="model" className="space-y-4 overflow-y-auto">
+          <TabsContent value="model" className="space-y-4 overflow-y-auto cursor-default">
            {/* Show Advanced Options Toggle */}
            {showProfilesOnly && (
              <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
@@ -302,7 +380,7 @@ export function EditFeatureDialog({
          </TabsContent>

          {/* Testing Tab */}
-          <TabsContent value="testing" className="space-y-4 overflow-y-auto">
+          <TabsContent value="testing" className="space-y-4 overflow-y-auto cursor-default">
            <TestingTabContent
              skipTests={editingFeature.skipTests ?? false}
              onSkipTestsChange={(skipTests) =>
--- a/apps/app/src/components/views/settings-view.tsx
+++ b/apps/app/src/components/views/settings-view.tsx
@@ -2,28 +2,18 @@

 import { useState } from "react";
 import { useAppStore } from "@/store/app-store";
-import { Label } from "@/components/ui/label";
-import {
-  Key,
-  Palette,
-  Terminal,
-  FlaskConical,
-  Trash2,
-  Settings2,
-  Volume2,
-  VolumeX,
-} from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";

-import { useCliStatus } from "./settings-view/hooks/use-cli-status";
-import { useScrollTracking } from "@/hooks/use-scroll-tracking";
+import { useCliStatus, useSettingsView } from "./settings-view/hooks";
+import { NAV_ITEMS } from "./settings-view/config/navigation";
 import { SettingsHeader } from "./settings-view/components/settings-header";
 import { KeyboardMapDialog } from "./settings-view/components/keyboard-map-dialog";
 import { DeleteProjectDialog } from "./settings-view/components/delete-project-dialog";
 import { SettingsNavigation } from "./settings-view/components/settings-navigation";
 import { ApiKeysSection } from "./settings-view/api-keys/api-keys-section";
 import { ClaudeCliStatus } from "./settings-view/cli-status/claude-cli-status";
+import { AIEnhancementSection } from "./settings-view/ai-enhancement";
 import { AppearanceSection } from "./settings-view/appearance/appearance-section";
+import { AudioSection } from "./settings-view/audio/audio-section";
 import { KeyboardShortcutsSection } from "./settings-view/keyboard-shortcuts/keyboard-shortcuts-section";
 import { FeatureDefaultsSection } from "./settings-view/feature-defaults/feature-defaults-section";
 import { DangerZoneSection } from "./settings-view/danger-zone/danger-zone-section";
@@ -33,17 +23,6 @@ import type {
 } from "./settings-view/shared/types";
 import type { Project as ElectronProject } from "@/lib/electron";

-// Navigation items for the side panel
-const NAV_ITEMS = [
-  { id: "api-keys", label: "API Keys", icon: Key },
-  { id: "claude", label: "Claude", icon: Terminal },
-  { id: "appearance", label: "Appearance", icon: Palette },
-  { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },
-  { id: "audio", label: "Audio", icon: Volume2 },
-  { id: "defaults", label: "Feature Defaults", icon: FlaskConical },
-  { id: "danger", label: "Danger Zone", icon: Trash2 },
-];
-
 export function SettingsView() {
  const {
    theme,
@@ -91,23 +70,72 @@ export function SettingsView() {
  };

  // Use CLI status hook
-  const {
-    claudeCliStatus,
-    isCheckingClaudeCli,
-    handleRefreshClaudeCli,
-  } = useCliStatus();
+  const { claudeCliStatus, isCheckingClaudeCli, handleRefreshClaudeCli } =
+    useCliStatus();

-  // Use scroll tracking hook
-  const { activeSection, scrollToSection, scrollContainerRef } =
-    useScrollTracking({
-      items: NAV_ITEMS,
-      filterFn: (item) => item.id !== "danger" || !!currentProject,
-      initialSection: "api-keys",
-    });
+  // Use settings view navigation hook
+  const { activeView, navigateTo } = useSettingsView();

  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [showKeyboardMapDialog, setShowKeyboardMapDialog] = useState(false);

+  // Render the active section based on current view
+  const renderActiveSection = () => {
+    switch (activeView) {
+      case "claude":
+        return (
+          <ClaudeCliStatus
+            status={claudeCliStatus}
+            isChecking={isCheckingClaudeCli}
+            onRefresh={handleRefreshClaudeCli}
+          />
+        );
+      case "ai-enhancement":
+        return <AIEnhancementSection />;
+      case "appearance":
+        return (
+          <AppearanceSection
+            effectiveTheme={effectiveTheme}
+            currentProject={settingsProject}
+            onThemeChange={handleSetTheme}
+          />
+        );
+      case "keyboard":
+        return (
+          <KeyboardShortcutsSection
+            onOpenKeyboardMap={() => setShowKeyboardMapDialog(true)}
+          />
+        );
+      case "audio":
+        return (
+          <AudioSection
+            muteDoneSound={muteDoneSound}
+            onMuteDoneSoundChange={setMuteDoneSound}
+          />
+        );
+      case "defaults":
+        return (
+          <FeatureDefaultsSection
+            showProfilesOnly={showProfilesOnly}
+            defaultSkipTests={defaultSkipTests}
+            useWorktrees={useWorktrees}
+            onShowProfilesOnlyChange={setShowProfilesOnly}
+            onDefaultSkipTestsChange={setDefaultSkipTests}
+            onUseWorktreesChange={setUseWorktrees}
+          />
+        );
+      case "danger":
+        return (
+          <DangerZoneSection
+            project={settingsProject}
+            onDeleteClick={() => setShowDeleteDialog(true)}
+          />
+        );
+      default:
+        return <ApiKeysSection />;
+    }
+  };
+
  return (
    <div
      className="flex-1 flex flex-col overflow-hidden content-bg"
@@ -118,107 +146,17 @@ export function SettingsView() {

      {/* Content Area with Sidebar */}
      <div className="flex-1 flex overflow-hidden">
-        {/* Sticky Side Navigation */}
+        {/* Side Navigation - No longer scrolls, just switches views */}
        <SettingsNavigation
          navItems={NAV_ITEMS}
-          activeSection={activeSection}
+          activeSection={activeView}
          currentProject={currentProject}
-          onNavigate={scrollToSection}
+          onNavigate={navigateTo}
        />

-        {/* Scrollable Content */}
-        <div ref={scrollContainerRef} className="flex-1 overflow-y-auto p-8">
-          <div className="max-w-4xl mx-auto space-y-6 pb-96">
-            {/* API Keys Section */}
-            <ApiKeysSection />
-
-            {/* Claude CLI Status Section */}
-            {claudeCliStatus && (
-              <ClaudeCliStatus
-                status={claudeCliStatus}
-                isChecking={isCheckingClaudeCli}
-                onRefresh={handleRefreshClaudeCli}
-              />
-            )}
-
-            {/* Appearance Section */}
-            <AppearanceSection
-              effectiveTheme={effectiveTheme}
-              currentProject={settingsProject}
-              onThemeChange={handleSetTheme}
-            />
-
-
-            {/* Keyboard Shortcuts Section */}
-            <KeyboardShortcutsSection
-              onOpenKeyboardMap={() => setShowKeyboardMapDialog(true)}
-            />
-
-            {/* Audio Section */}
-            <div
-              id="audio"
-              className="rounded-2xl border border-border/50 bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl shadow-sm shadow-black/5 overflow-hidden scroll-mt-6"
-            >
-              <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
-                <div className="flex items-center gap-3 mb-2">
-                  <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
-                    <Volume2 className="w-5 h-5 text-brand-500" />
-                  </div>
-                  <h2 className="text-lg font-semibold text-foreground tracking-tight">
-                    Audio
-                  </h2>
-                </div>
-                <p className="text-sm text-muted-foreground/80 ml-12">
-                  Configure audio and notification settings.
-                </p>
-              </div>
-              <div className="p-6 space-y-4">
-                {/* Mute Done Sound Setting */}
-                <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
-                  <Checkbox
-                    id="mute-done-sound"
-                    checked={muteDoneSound}
-                    onCheckedChange={(checked) =>
-                      setMuteDoneSound(checked === true)
-                    }
-                    className="mt-1"
-                    data-testid="mute-done-sound-checkbox"
-                  />
-                  <div className="space-y-1.5">
-                    <Label
-                      htmlFor="mute-done-sound"
-                      className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-                    >
-                      <VolumeX className="w-4 h-4 text-brand-500" />
-                      Mute notification sound when agents complete
-                    </Label>
-                    <p className="text-xs text-muted-foreground/80 leading-relaxed">
-                      When enabled, disables the &quot;ding&quot; sound that
-                      plays when an agent completes a feature. The feature
-                      will still move to the completed column, but without
-                      audio notification.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Feature Defaults Section */}
-            <FeatureDefaultsSection
-              showProfilesOnly={showProfilesOnly}
-              defaultSkipTests={defaultSkipTests}
-              useWorktrees={useWorktrees}
-              onShowProfilesOnlyChange={setShowProfilesOnly}
-              onDefaultSkipTestsChange={setDefaultSkipTests}
-              onUseWorktreesChange={setUseWorktrees}
-            />
-
-            {/* Danger Zone Section - Only show when a project is selected */}
-            <DangerZoneSection
-              project={settingsProject}
-              onDeleteClick={() => setShowDeleteDialog(true)}
-            />
-          </div>
+        {/* Content Panel - Shows only the active section */}
+        <div className="flex-1 overflow-y-auto p-8">
+          <div className="max-w-4xl mx-auto">{renderActiveSection()}</div>
        </div>
      </div>

--- a/apps/app/src/components/views/settings-view/ai-enhancement/ai-enhancement-section.tsx
+++ b/apps/app/src/components/views/settings-view/ai-enhancement/ai-enhancement-section.tsx
@@ -0,0 +1,91 @@
+import { Label } from "@/components/ui/label";
+import { Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useAppStore } from "@/store/app-store";
+import { CLAUDE_MODELS } from "@/components/views/board-view/shared/model-constants";
+
+export function AIEnhancementSection() {
+  const { enhancementModel, setEnhancementModel } = useAppStore();
+
+  return (
+    <div
+      className={cn(
+        "rounded-2xl overflow-hidden",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Sparkles className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">AI Enhancement</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Choose the model used when enhancing feature descriptions.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        <div className="space-y-4">
+          <Label className="text-foreground font-medium">
+            Enhancement Model
+          </Label>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+            {CLAUDE_MODELS.map(({ id, label, description, badge }) => {
+              const isActive = enhancementModel === id;
+              return (
+                <button
+                  key={id}
+                  onClick={() => setEnhancementModel(id)}
+                  className={cn(
+                    "group flex flex-col items-start gap-2 px-4 py-4 rounded-xl text-left",
+                    "transition-all duration-200 ease-out",
+                    isActive
+                      ? [
+                          "bg-gradient-to-br from-brand-500/15 to-brand-600/10",
+                          "border-2 border-brand-500/40",
+                          "text-foreground",
+                          "shadow-md shadow-brand-500/10",
+                        ]
+                      : [
+                          "bg-accent/30 hover:bg-accent/50",
+                          "border border-border/50 hover:border-border",
+                          "text-muted-foreground hover:text-foreground",
+                          "hover:shadow-sm",
+                        ],
+                    "hover:scale-[1.02] active:scale-[0.98]"
+                  )}
+                  data-testid={`enhancement-model-${id}`}
+                >
+                  <div className="flex items-center gap-2 w-full">
+                    <span className={cn(
+                      "font-medium text-sm",
+                      isActive ? "text-foreground" : "group-hover:text-foreground"
+                    )}>
+                      {label}
+                    </span>
+                    {badge && (
+                      <span className={cn(
+                        "ml-auto text-xs px-2 py-0.5 rounded-full",
+                        isActive
+                          ? "bg-brand-500/20 text-brand-500"
+                          : "bg-accent text-muted-foreground"
+                      )}>
+                        {badge}
+                      </span>
+                    )}
+                  </div>
+                  <span className="text-xs text-muted-foreground/80">
+                    {description}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/app/src/components/views/settings-view/ai-enhancement/index.ts
+++ b/apps/app/src/components/views/settings-view/ai-enhancement/index.ts
@@ -0,0 +1 @@
+export { AIEnhancementSection } from "./ai-enhancement-section";
--- a/apps/app/src/components/views/settings-view/api-keys/api-keys-section.tsx
+++ b/apps/app/src/components/views/settings-view/api-keys/api-keys-section.tsx
@@ -58,9 +58,8 @@ export function ApiKeysSection() {

  return (
    <div
-      id="api-keys"
      className={cn(
-        "rounded-2xl overflow-hidden scroll-mt-6",
+        "rounded-2xl overflow-hidden",
        "border border-border/50",
        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
        "shadow-sm shadow-black/5"
--- a/apps/app/src/components/views/settings-view/appearance/appearance-section.tsx
+++ b/apps/app/src/components/views/settings-view/appearance/appearance-section.tsx
@@ -18,9 +18,8 @@ export function AppearanceSection({
 }: AppearanceSectionProps) {
  return (
    <div
-      id="appearance"
      className={cn(
-        "rounded-2xl overflow-hidden scroll-mt-6",
+        "rounded-2xl overflow-hidden",
        "border border-border/50",
        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
        "shadow-sm shadow-black/5"
--- a/apps/app/src/components/views/settings-view/audio/audio-section.tsx
+++ b/apps/app/src/components/views/settings-view/audio/audio-section.tsx
@@ -0,0 +1,64 @@
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Volume2, VolumeX } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface AudioSectionProps {
+  muteDoneSound: boolean;
+  onMuteDoneSoundChange: (value: boolean) => void;
+}
+
+export function AudioSection({
+  muteDoneSound,
+  onMuteDoneSoundChange,
+}: AudioSectionProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl overflow-hidden",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Volume2 className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Audio
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure audio and notification settings.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="mute-done-sound"
+            checked={muteDoneSound}
+            onCheckedChange={onMuteDoneSoundChange}
+            className="mt-1"
+            data-testid="mute-done-sound-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="mute-done-sound"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <VolumeX className="w-4 h-4 text-brand-500" />
+              Mute notification sound when agents complete
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              When enabled, disables the &quot;ding&quot; sound that plays when
+              an agent completes a feature. The feature will still move to the
+              completed column, but without audio notification.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/app/src/components/views/settings-view/cli-status/claude-cli-status.tsx
+++ b/apps/app/src/components/views/settings-view/cli-status/claude-cli-status.tsx
@@ -23,9 +23,8 @@ export function ClaudeCliStatus({

  return (
    <div
-      id="claude"
      className={cn(
-        "rounded-2xl overflow-hidden scroll-mt-6",
+        "rounded-2xl overflow-hidden",
        "border border-border/50",
        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
        "shadow-sm shadow-black/5"
--- a/apps/app/src/components/views/settings-view/components/settings-navigation.tsx
+++ b/apps/app/src/components/views/settings-view/components/settings-navigation.tsx
@@ -1,12 +1,13 @@
 import { cn } from "@/lib/utils";
 import type { Project } from "@/lib/electron";
 import type { NavigationItem } from "../config/navigation";
+import type { SettingsViewId } from "../hooks/use-settings-view";

 interface SettingsNavigationProps {
  navItems: NavigationItem[];
-  activeSection: string;
+  activeSection: SettingsViewId;
  currentProject: Project | null;
-  onNavigate: (sectionId: string) => void;
+  onNavigate: (sectionId: SettingsViewId) => void;
 }

 export function SettingsNavigation({
--- a/apps/app/src/components/views/settings-view/config/navigation.ts
+++ b/apps/app/src/components/views/settings-view/config/navigation.ts
@@ -3,14 +3,16 @@ import {
  Key,
  Terminal,
  Palette,
-  LayoutGrid,
  Settings2,
+  Volume2,
  FlaskConical,
  Trash2,
+  Sparkles,
 } from "lucide-react";
+import type { SettingsViewId } from "../hooks/use-settings-view";

 export interface NavigationItem {
-  id: string;
+  id: SettingsViewId;
  label: string;
  icon: LucideIcon;
 }
@@ -19,9 +21,10 @@ export interface NavigationItem {
 export const NAV_ITEMS: NavigationItem[] = [
  { id: "api-keys", label: "API Keys", icon: Key },
  { id: "claude", label: "Claude", icon: Terminal },
+  { id: "ai-enhancement", label: "AI Enhancement", icon: Sparkles },
  { id: "appearance", label: "Appearance", icon: Palette },
-  { id: "kanban", label: "Kanban Display", icon: LayoutGrid },
  { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },
+  { id: "audio", label: "Audio", icon: Volume2 },
  { id: "defaults", label: "Feature Defaults", icon: FlaskConical },
  { id: "danger", label: "Danger Zone", icon: Trash2 },
 ];
--- a/apps/app/src/components/views/settings-view/danger-zone/danger-zone-section.tsx
+++ b/apps/app/src/components/views/settings-view/danger-zone/danger-zone-section.tsx
@@ -16,9 +16,8 @@ export function DangerZoneSection({

  return (
    <div
-      id="danger"
      className={cn(
-        "rounded-2xl overflow-hidden scroll-mt-6",
+        "rounded-2xl overflow-hidden",
        "border border-destructive/30",
        "bg-gradient-to-br from-destructive/5 via-card/70 to-card/80 backdrop-blur-xl",
        "shadow-sm shadow-destructive/5"
--- a/apps/app/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx
+++ b/apps/app/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx
@@ -22,9 +22,8 @@ export function FeatureDefaultsSection({
 }: FeatureDefaultsSectionProps) {
  return (
    <div
-      id="defaults"
      className={cn(
-        "rounded-2xl overflow-hidden scroll-mt-6",
+        "rounded-2xl overflow-hidden",
        "border border-border/50",
        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
        "shadow-sm shadow-black/5"
--- a/apps/app/src/components/views/settings-view/hooks/index.ts
+++ b/apps/app/src/components/views/settings-view/hooks/index.ts
@@ -0,0 +1,2 @@
+export { useCliStatus } from "./use-cli-status";
+export { useSettingsView, type SettingsViewId } from "./use-settings-view";
--- a/apps/app/src/components/views/settings-view/hooks/use-settings-view.ts
+++ b/apps/app/src/components/views/settings-view/hooks/use-settings-view.ts
@@ -0,0 +1,30 @@
+import { useState, useCallback } from "react";
+
+export type SettingsViewId =
+  | "api-keys"
+  | "claude"
+  | "ai-enhancement"
+  | "appearance"
+  | "keyboard"
+  | "audio"
+  | "defaults"
+  | "danger";
+
+interface UseSettingsViewOptions {
+  initialView?: SettingsViewId;
+}
+
+export function useSettingsView({
+  initialView = "api-keys",
+}: UseSettingsViewOptions = {}) {
+  const [activeView, setActiveView] = useState<SettingsViewId>(initialView);
+
+  const navigateTo = useCallback((viewId: SettingsViewId) => {
+    setActiveView(viewId);
+  }, []);
+
+  return {
+    activeView,
+    navigateTo,
+  };
+}
--- a/apps/app/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx
+++ b/apps/app/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx
@@ -11,9 +11,8 @@ export function KeyboardShortcutsSection({
 }: KeyboardShortcutsSectionProps) {
  return (
    <div
-      id="keyboard"
      className={cn(
-        "rounded-2xl overflow-hidden scroll-mt-6",
+        "rounded-2xl overflow-hidden",
        "border border-border/50",
        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
        "shadow-sm shadow-black/5"
--- a/apps/app/src/lib/electron.ts
+++ b/apps/app/src/lib/electron.ts
@@ -316,6 +316,13 @@ export interface ElectronAPI {
  autoMode?: AutoModeAPI;
  features?: FeaturesAPI;
  runningAgents?: RunningAgentsAPI;
+  enhancePrompt?: {
+    enhance: (originalText: string, enhancementMode: string, model?: string) => Promise<{
+      success: boolean;
+      enhancedText?: string;
+      error?: string;
+    }>;
+  };
  setup?: {
    getClaudeStatus: () => Promise<{
      success: boolean;
--- a/apps/app/src/lib/http-api-client.ts
+++ b/apps/app/src/lib/http-api-client.ts
@@ -58,6 +58,12 @@ type EventType =

 type EventCallback = (payload: unknown) => void;

+interface EnhancePromptResult {
+  success: boolean;
+  enhancedText?: string;
+  error?: string;
+}
+
 /**
 * HTTP API Client that implements ElectronAPI interface
 */
@@ -546,6 +552,20 @@ export class HttpApiClient implements ElectronAPI {
    },
  };

+  // Enhance Prompt API
+  enhancePrompt = {
+    enhance: (
+      originalText: string,
+      enhancementMode: string,
+      model?: string
+    ): Promise<EnhancePromptResult> =>
+      this.post("/api/enhance-prompt", {
+        originalText,
+        enhancementMode,
+        model,
+      }),
+  };
+
  // Worktree API
  worktree: WorktreeAPI = {
    revertFeature: (projectPath: string, featureId: string) =>
--- a/apps/app/src/store/app-store.ts
+++ b/apps/app/src/store/app-store.ts
@@ -410,6 +410,9 @@ export interface AppState {
  // Audio Settings
  muteDoneSound: boolean; // When true, mute the notification sound when agents complete (default: false)

+  // Enhancement Model Settings
+  enhancementModel: AgentModel; // Model used for feature enhancement (default: sonnet)
+
  // Project Analysis
  projectAnalysis: ProjectAnalysis | null;
  isAnalyzing: boolean;
@@ -578,6 +581,9 @@ export interface AppActions {
  // Audio Settings actions
  setMuteDoneSound: (muted: boolean) => void;

+  // Enhancement Model actions
+  setEnhancementModel: (model: AgentModel) => void;
+
  // AI Profile actions
  addAIProfile: (profile: Omit<AIProfile, "id">) => void;
  updateAIProfile: (id: string, updates: Partial<AIProfile>) => void;
@@ -715,6 +721,7 @@ const initialState: AppState = {
  showProfilesOnly: false, // Default to showing all options (not profiles only)
  keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS, // Default keyboard shortcuts
  muteDoneSound: false, // Default to sound enabled (not muted)
+  enhancementModel: "sonnet", // Default to sonnet for feature enhancement
  aiProfiles: DEFAULT_AI_PROFILES,
  projectAnalysis: null,
  isAnalyzing: false,
@@ -1332,6 +1339,9 @@ export const useAppStore = create<AppState & AppActions>()(
      // Audio Settings actions
      setMuteDoneSound: (muted) => set({ muteDoneSound: muted }),

+      // Enhancement Model actions
+      setEnhancementModel: (model) => set({ enhancementModel: model }),
+
      // AI Profile actions
      addAIProfile: (profile) => {
        const id = `profile-${Date.now()}-${Math.random()
@@ -2163,6 +2173,7 @@ export const useAppStore = create<AppState & AppActions>()(
        showProfilesOnly: state.showProfilesOnly,
        keyboardShortcuts: state.keyboardShortcuts,
        muteDoneSound: state.muteDoneSound,
+        enhancementModel: state.enhancementModel,
        // Profiles and sessions
        aiProfiles: state.aiProfiles,
        chatSessions: state.chatSessions,
				`@@ -0,0 +1 @@`
				`export { AIEnhancementSection } from "./ai-enhancement-section";`