refactor(ui): remove unused props/imports and delegate project path selection to tabs\n\n- Remove unused icons/components and dead handlers (e.g., directory selection) across UI components\n- Drop unused callbacks from props (onBack, onMCPClick, onUsageClick, etc.)\n- Fix createAgentsTab reference in App.tsx\n- Silence TypeScript lints by renaming unused vars (e.g., _error, _className)\n- Centralize project path selection in tab controls

Author: 123vivekr

src/App.tsx

@@ -1,17 +1,14 @@
 import { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { Loader2, Bot, FolderCode } from "lucide-react";
+import { motion } from "framer-motion";
+import { Bot, FolderCode } from "lucide-react";
 import { api, type Project, type Session, type ClaudeMdFile } from "@/lib/api";
 import { OutputCacheProvider } from "@/lib/outputCache";
 import { TabProvider } from "@/contexts/TabContext";
 import { ThemeProvider } from "@/contexts/ThemeContext";
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { ProjectList } from "@/components/ProjectList";
 import { FilePicker } from "@/components/FilePicker";
 import { SessionList } from "@/components/SessionList";
-import { RunningClaudeSessions } from "@/components/RunningClaudeSessions";
-import { Topbar } from "@/components/Topbar";
 import { CustomTitlebar } from "@/components/CustomTitlebar";
 import { MarkdownEditor } from "@/components/MarkdownEditor";
 import { ClaudeFileEditor } from "@/components/ClaudeFileEditor";
@@ -50,13 +47,13 @@ type View =
  */
 function AppContent() {
   const [view, setView] = useState<View>("tabs");
-  const { createClaudeMdTab, createSettingsTab, createUsageTab, createMCPTab, createProjectsTab, createAgentsTab } = useTabState();
+  const { createClaudeMdTab, createSettingsTab, createUsageTab, createMCPTab, createAgentsTab } = useTabState();
   const [projects, setProjects] = useState<Project[]>([]);
   const [selectedProject, setSelectedProject] = useState<Project | null>(null);
   const [sessions, setSessions] = useState<Session[]>([]);
   const [editingClaudeFile, setEditingClaudeFile] = useState<ClaudeMdFile | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const [_error, setError] = useState<string | null>(null);
   const [showNFO, setShowNFO] = useState(false);
   const [showClaudeBinaryDialog, setShowClaudeBinaryDialog] = useState(false);
   const [showProjectPicker, setShowProjectPicker] = useState(false);
@@ -197,10 +194,7 @@ function AppContent() {
   /**
    * Opens a new Claude Code session in the interactive UI
    */
-  const handleNewSession = async () => {
-    handleViewChange("tabs");
-    // The tab system will handle creating a new chat tab
-  };
+  // New session creation is handled by the tab system via titlebar actions
 
   /**
    * Handles editing a CLAUDE.md file from a project
@@ -229,10 +223,7 @@ function AppContent() {
   /**
    * Handles navigating to hooks configuration
    */
-  const handleProjectSettings = (project: Project) => {
-    setProjectForSettings(project);
-    handleViewChange("project-settings");
-  };
+  // Project settings navigation handled via `projectForSettings` state when needed
 
 
   const renderContent = () => {

src/components/AgentExecution.tsx

@@ -4,7 +4,6 @@ import {
   ArrowLeft, 
   Play, 
   StopCircle, 
-  FolderOpen, 
   Terminal,
   AlertCircle,
   Loader2,
@@ -22,13 +21,11 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { api, type Agent } from "@/lib/api";
 import { cn } from "@/lib/utils";
-import { open } from "@tauri-apps/plugin-dialog";
 import { listen, type UnlistenFn } from "@tauri-apps/api/event";
 import { StreamMessage } from "./StreamMessage";
 import { ExecutionControlBar } from "./ExecutionControlBar";
@@ -91,7 +88,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
   onBack,
   className,
 }) => {
-  const [projectPath, setProjectPath] = useState(initialProjectPath || "");
+  const [projectPath] = useState(initialProjectPath || "");
   const [task, setTask] = useState(agent.default_task || "");
   const [model, setModel] = useState(agent.model || "sonnet");
   const [isRunning, setIsRunning] = useState(false);
@@ -280,25 +277,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
   }, [messages]);
 
 
-  const handleSelectPath = async () => {
-    try {
-      const selected = await open({
-        directory: true,
-        multiple: false,
-        title: "Select Project Directory"
-      });
-      
-      if (selected) {
-        setProjectPath(selected as string);
-        setError(null); // Clear any previous errors
-      }
-    } catch (err) {
-      console.error("Failed to select directory:", err);
-      // More detailed error logging
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(`Failed to select directory: ${errorMessage}`);
-    }
-  };
+  // Project path selection is handled upstream when opening an execution tab
 
   const handleOpenHooksDialog = async () => {
     setIsHooksDialogOpen(true);

src/components/Agents.tsx

@@ -13,7 +13,6 @@ import { Badge } from '@/components/ui/badge';
 import { Card } from '@/components/ui/card';
 import { Toast } from '@/components/ui/toast';
 import { api, type Agent, type AgentRunWithMetrics } from '@/lib/api';
-import { formatISOTimestamp } from '@/lib/date-utils';
 import { open as openDialog, save } from '@tauri-apps/plugin-dialog';
 import { invoke } from '@tauri-apps/api/core';
 import { GitHubAgentBrowser } from '@/components/GitHubAgentBrowser';

src/components/CheckpointSettings.tsx

@@ -39,7 +39,6 @@ export const CheckpointSettings: React.FC<CheckpointSettingsProps> = ({
   sessionId,
   projectId,
   projectPath,
-  onClose,
   className,
 }) => {
   const [autoCheckpointEnabled, setAutoCheckpointEnabled] = useState(true);

src/components/ClaudeCodeSession.tsx

@@ -1,17 +1,12 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { 
-  ArrowLeft,
-  Terminal,
-  FolderOpen,
   Copy,
   ChevronDown,
   GitBranch,
-  Settings,
   ChevronUp,
   X,
   Hash,
-  Command,
   Wrench
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -20,7 +15,6 @@ import { Label } from "@/components/ui/label";
 import { Popover } from "@/components/ui/popover";
 import { api, type Session } from "@/lib/api";
 import { cn } from "@/lib/utils";
-import { open } from "@tauri-apps/plugin-dialog";
 import { listen, type UnlistenFn } from "@tauri-apps/api/event";
 import { StreamMessage } from "./StreamMessage";
 import { FloatingPromptInput, type FloatingPromptInputRef } from "./FloatingPromptInput";
@@ -77,14 +71,11 @@ interface ClaudeCodeSessionProps {
 export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   session,
   initialProjectPath = "",
-  onBack,
-  onProjectSettings,
   className,
   onStreamingChange,
   onProjectPathChange,
 }) => {
-  const [projectPath, setProjectPath] = useState(initialProjectPath || session?.project_path || "");
-  const [sessionRestoreData, setSessionRestoreData] = useState<{ projectId: string } | null>(null);
+  const [projectPath] = useState(initialProjectPath || session?.project_path || "");
   const [messages, setMessages] = useState<ClaudeStreamMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -437,29 +428,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
     }
   };
 
-  const handleSelectPath = async () => {
-    try {
-      const selected = await open({
-        directory: true,
-        multiple: false,
-        title: "Select Project Directory"
-      });
-      
-      if (selected) {
-        const selectedPath = selected as string;
-        setProjectPath(selectedPath);
-        setError(null);
-        // Call the callback to update tab title
-        if (onProjectPathChange) {
-          onProjectPathChange(selectedPath);
-        }
-      }
-    } catch (err) {
-      console.error("Failed to select directory:", err);
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(`Failed to select directory: ${errorMessage}`);
-    }
-  };
+  // Project path selection handled by parent tab controls
 
   const handleSendPrompt = async (prompt: string, model: "sonnet" | "opus") => {
     console.log('[ClaudeCodeSession] handleSendPrompt called with:', { prompt, model, projectPath, claudeSessionId, effectiveSession });

src/components/FloatingPromptInput.tsx

@@ -12,7 +12,7 @@ import {
   Lightbulb,
   Cpu,
   Rocket,
-  Zap as Lightning
+  
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -138,7 +138,7 @@ const THINKING_MODES: ThinkingModeConfig[] = [
 /**
  * ThinkingModeIndicator component - Shows visual indicator bars for thinking level
  */
-const ThinkingModeIndicator: React.FC<{ level: number; color?: string }> = ({ level, color }) => {
+const ThinkingModeIndicator: React.FC<{ level: number; color?: string }> = ({ level, color: _color }) => {
   const getBarColor = (barIndex: number) => {
     if (barIndex > level) return "bg-muted";
     return "bg-primary";

src/components/MCPManager.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { Download, AlertCircle, Loader2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { AlertCircle, Loader2 } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Card } from "@/components/ui/card";
 import { Toast, ToastContainer } from "@/components/ui/toast";
@@ -26,7 +25,7 @@ interface MCPManagerProps {
  * Provides a comprehensive UI for adding, configuring, and managing MCP servers
  */
 export const MCPManager: React.FC<MCPManagerProps> = ({
-  className,
+  className: _className,
 }) => {
   const [activeTab, setActiveTab] = useState("servers");
   const [servers, setServers] = useState<MCPServer[]>([]);

src/components/ProjectList.tsx

@@ -52,7 +52,7 @@ const getDisplayPath = (path: string, maxLength: number = 30): string => {
   for (const indicator of homeIndicators) {
     if (path.includes(indicator)) {
       const parts = path.split('/');
-      const userIndex = parts.findIndex((p, i) => 
+      const userIndex = parts.findIndex((_part, i) => 
         i > 0 && parts[i - 1] === indicator.split('/')[1]
       );
       if (userIndex > 0) {

src/components/SessionList.tsx

@@ -1,17 +1,12 @@
 import React, { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { FileText, Calendar, Clock, MessageSquare, Info } from "lucide-react";
-import { Card, CardContent } from "@/components/ui/card";
+import { Clock, MessageSquare } from "lucide-react";
+import { Card } from "@/components/ui/card";
 import { Pagination } from "@/components/ui/pagination";
 import { ClaudeMemoriesDropdown } from "@/components/ClaudeMemoriesDropdown";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { formatUnixTimestamp, formatISOTimestamp, truncateText, getFirstLine } from "@/lib/date-utils";
+import { truncateText, getFirstLine } from "@/lib/date-utils";
 import type { Session, ClaudeMdFile } from "@/lib/api";
 
 interface SessionListProps {
@@ -57,7 +52,6 @@ const ITEMS_PER_PAGE = 12;
 export const SessionList: React.FC<SessionListProps> = ({
   sessions,
   projectPath,
-  onBack,
   onSessionClick,
   onEditClaudeFile,
   className,

src/components/Settings.tsx

@@ -1,15 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { 
-  ArrowLeft, 
   Plus, 
   Trash2, 
   Save, 
   AlertCircle,
   Loader2,
-  BarChart3,
   Shield,
-  Trash,
   Check,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -18,7 +15,6 @@ import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Card } from "@/components/ui/card";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { 
   api, 
   type ClaudeSettings,
@@ -63,7 +59,6 @@ interface EnvironmentVariable {
  * Provides a no-code interface for editing the settings.json file
  */
 export const Settings: React.FC<SettingsProps> = ({
-  onBack,
   className,
 }) => {
   const [settings, setSettings] = useState<ClaudeSettings | null>(null);