claude-ws 0.3.97 → 0.3.99

package/src/components/settings/settings-page.tsx

@@ -1,19 +1,43 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 import { ArrowLeft, FolderOpen, X, Bot, Shield, Check } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
 import { useProjectStore } from '@/stores/project-store';
 import { useSettingsUIStore } from '@/stores/settings-ui-store';
 import { dispatchAgentProviderConfig } from '@/components/auth/agent-provider-dialog';
 import { ApiAccessKeySetupForm } from '@/components/access-anywhere/api-access-key-setup-modal';
 
 export function SettingsPage() {
+  const t = useTranslations('settings');
+  const tCommon = useTranslations('common');
   const { currentProject, updateProject } = useProjectStore();
   const { setOpen: setSettingsOpen } = useSettingsUIStore();
   const [editingName, setEditingName] = useState('');
   const [isEditing, setIsEditing] = useState(false);
+  const [autoCompactEnabled, setAutoCompactEnabled] = useState(false);
+
+  useEffect(() => {
+    fetch('/api/settings?keys=auto_compact_enabled')
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.auto_compact_enabled === 'true') {
+          setAutoCompactEnabled(true);
+        }
+      });
+  }, []);
+
+  const handleAutoCompactToggle = async (checked: boolean) => {
+    setAutoCompactEnabled(checked);
+    await fetch('/api/settings', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key: 'auto_compact_enabled', value: String(checked) }),
+    });
+  };
 
   const [agentProviderConfigured, setAgentProviderConfigured] = useState(false);
   const [apiAccessKeyConfigured, setApiAccessKeyConfigured] = useState(false);
@@ -71,7 +95,7 @@ export function SettingsPage() {
           </Button>
           <div className="flex items-center gap-3">
             <FolderOpen className="w-6 h-6" />
-            <h1 className="text-2xl font-bold">Settings</h1>
+            <h1 className="text-2xl font-bold">{t('title')}</h1>
           </div>
         </div>
         <Button
@@ -89,7 +113,7 @@ export function SettingsPage() {
         {/* Current Project Section */}
         {currentProject && (
           <div className="space-y-4">
-            <h2 className="text-lg font-semibold">Current Project</h2>
+            <h2 className="text-lg font-semibold">{t('currentProject')}</h2>
             <div className="space-y-3 p-4 border rounded-lg bg-card">
               <div className="flex items-center gap-3">
                 <FolderOpen className="h-5 w-5 text-muted-foreground" />
@@ -102,14 +126,14 @@ export function SettingsPage() {
                       autoFocus
                     />
                     <Button size="sm" onClick={handleSaveName}>
-                      Save
+                      {tCommon('save')}
                     </Button>
                     <Button
                       size="sm"
                       variant="ghost"
                       onClick={() => setIsEditing(false)}
                     >
-                      Cancel
+                      {tCommon('cancel')}
                     </Button>
                   </div>
                 ) : (
@@ -123,7 +147,7 @@ export function SettingsPage() {
                         setIsEditing(true);
                       }}
                     >
-                      Edit
+                      {tCommon('edit')}
                     </Button>
                   </div>
                 )}
@@ -135,21 +159,43 @@ export function SettingsPage() {
           </div>
         )}
 
+        {/* Context Management Section */}
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold">Context Management</h2>
+          <div className="space-y-3 p-4 border rounded-lg bg-card">
+            <div className="flex items-start gap-3">
+              <Checkbox
+                id="auto-compact"
+                checked={autoCompactEnabled}
+                onCheckedChange={(checked) => handleAutoCompactToggle(checked === true)}
+              />
+              <div className="space-y-1">
+                <label htmlFor="auto-compact" className="font-medium leading-none cursor-pointer">
+                  Auto-compact conversations
+                </label>
+                <p className="text-sm text-muted-foreground">
+                  Automatically compact conversation context when it exceeds 75% of the context window
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
         {/* Agent Provider Section */}
         <div className="space-y-4">
-          <h2 className="text-lg font-semibold">Agent Provider</h2>
+          <h2 className="text-lg font-semibold">{tCommon('agentProvider')}</h2>
           <div className="p-4 border rounded-lg bg-card">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-3">
                 <Bot className="h-5 w-5 text-muted-foreground" />
                 <div>
-                  <p className="font-medium">Claude API Configuration</p>
+                  <p className="font-medium">{t('claudeApiConfig')}</p>
                   <p className="text-sm text-muted-foreground">
                     {loadingStatus
-                      ? 'Checking...'
+                      ? tCommon('checking')
                       : agentProviderConfigured
-                        ? 'A provider is configured'
-                        : 'No provider configured'
+                        ? t('providerConfigured')
+                        : t('noProviderConfigured')
                     }
                   </p>
                 </div>
@@ -158,7 +204,7 @@ export function SettingsPage() {
                 {!loadingStatus && agentProviderConfigured && (
                   <span className="inline-flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
                     <Check className="h-3 w-3" />
-                    Configured
+                    {tCommon('configured')}
                   </span>
                 )}
                 <Button
@@ -166,7 +212,7 @@ export function SettingsPage() {
                   size="sm"
                   onClick={() => dispatchAgentProviderConfig()}
                 >
-                  Configure
+                  {t('configure')}
                 </Button>
               </div>
             </div>
@@ -175,19 +221,19 @@ export function SettingsPage() {
 
         {/* API Access Key Section */}
         <div className="space-y-4">
-          <h2 className="text-lg font-semibold">API Access Key</h2>
+          <h2 className="text-lg font-semibold">{t('apiAccessKey')}</h2>
           <div className="p-4 border rounded-lg bg-card space-y-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-3">
                 <Shield className="h-5 w-5 text-muted-foreground" />
                 <div>
-                  <p className="font-medium">Remote Access Authentication</p>
+                  <p className="font-medium">{t('remoteAccessAuth')}</p>
                   <p className="text-sm text-muted-foreground">
                     {loadingStatus
-                      ? 'Checking...'
+                      ? tCommon('checking')
                       : apiAccessKeyConfigured
-                        ? 'An API access key is configured'
-                        : 'No API access key configured'
+                        ? t('apiKeyConfigured')
+                        : t('noApiKeyConfigured')
                     }
                   </p>
                 </div>
@@ -195,7 +241,7 @@ export function SettingsPage() {
               {!loadingStatus && apiAccessKeyConfigured && (
                 <span className="inline-flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
                   <Check className="h-3 w-3" />
-                  Configured
+                  {tCommon('configured')}
                 </span>
               )}
             </div>

package/src/components/settings/setup-dialog.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 import { FolderOpen, AlertCircle, Plus, FolderOpen as FolderOpenIcon, Folder } from 'lucide-react';
 import {
   Dialog,
@@ -25,6 +26,8 @@ interface SetupDialogProps {
 }
 
 export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
+  const t = useTranslations('settings');
+  const tCommon = useTranslations('common');
   const { createProject, setCurrentProject } = useProjectStore();
   const [mode, setMode] = useState<Mode>('open');
   const [name, setName] = useState('');
@@ -68,7 +71,7 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
     setError('');
 
     if (!name.trim()) {
-      setError('Project name is required');
+      setError(t('projectNameRequired'));
       return;
     }
 
@@ -77,26 +80,26 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
     // For create mode, build path from root + sanitized name
     if (mode === 'create') {
       if (!rootPath.trim()) {
-        setError('Root folder is required');
+        setError(t('rootFolderRequired'));
         return;
       }
       const sanitizedName = sanitizeDirName(name);
       if (!sanitizedName) {
-        setError('Project name must contain at least one alphanumeric character');
+        setError(t('projectNameAlphanumeric'));
         return;
       }
       finalPath = `${rootPath.trim()}/${sanitizedName}`;
     } else {
       // Open mode - path is required
       if (!path.trim()) {
-        setError('Project path is required');
+        setError(t('projectPathRequired'));
         return;
       }
     }
 
     // Validate path format
     if (!finalPath.startsWith('/') && !finalPath.match(/^[A-Za-z]:\\/)) {
-      setError('Please enter an absolute path');
+      setError(t('enterAbsolutePath'));
       return;
     }
 
@@ -122,11 +125,11 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle>Set Up Project</DialogTitle>
+          <DialogTitle>{t('setUpProject')}</DialogTitle>
           <DialogDescription>
             {mode === 'open'
-              ? 'Select an existing project folder to open.'
-              : 'Configure a project folder to use with Claude Code.'}
+              ? t('selectExistingDescription')
+              : t('configureNewDescription')}
           </DialogDescription>
         </DialogHeader>
 
@@ -137,14 +140,14 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
               className="[&[data-state=active]]:![background-color:rgba(255,255,255,0.2)]"
             >
               <FolderOpenIcon className="h-4 w-4" />
-              Open Existing
+              {t('openExisting')}
             </TabsTrigger>
             <TabsTrigger
               value="create"
               className="[&[data-state=active]]:![background-color:rgba(255,255,255,0.2)]"
             >
               <Plus className="h-4 w-4" />
-              Create New
+              {t('createNew')}
             </TabsTrigger>
           </TabsList>
 
@@ -153,7 +156,7 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
               {/* Project Path - auto-named from folder */}
               <div className="space-y-2">
                 <label htmlFor="path-open" className="text-sm font-medium">
-                  Project Folder
+                  {t('projectFolder')}
                 </label>
                 <div className="flex gap-2">
                   <div
@@ -177,12 +180,12 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
                     onClick={() => (setBrowserMode('project'), setFolderBrowserOpen(true))}
                     disabled={loading}
                   >
-                    Browse
+                    {tCommon('browse')}
                   </Button>
                 </div>
                 {path && (
                   <p className="text-xs text-muted-foreground">
-                    Project name: <span className="font-medium">{name || '(auto-detected)'}</span>
+                    {t('projectName')}: <span className="font-medium">{name || t('autoDetected')}</span>
                   </p>
                 )}
               </div>
@@ -203,10 +206,10 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
                   onClick={() => onOpenChange(false)}
                   disabled={loading}
                 >
-                  Cancel
+                  {tCommon('cancel')}
                 </Button>
                 <Button type="submit" disabled={loading || !path}>
-                  {loading ? 'Opening...' : 'Open Project'}
+                  {loading ? tCommon('opening') : t('openProject')}
                 </Button>
               </div>
             </form>
@@ -217,7 +220,7 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
               {/* Project Name */}
               <div className="space-y-2">
                 <label htmlFor="name" className="text-sm font-medium">
-                  Project Name
+                  {t('projectName')}
                 </label>
                 <Input
                   id="name"
@@ -227,14 +230,14 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
                   disabled={loading}
                 />
                 <p className="text-xs text-muted-foreground">
-                  This will be the project folder name
+                  {t('folderNameHint')}
                 </p>
               </div>
 
               {/* Root Folder */}
               <div className="space-y-2">
                 <label htmlFor="root-path" className="text-sm font-medium">
-                  Root Folder
+                  {t('rootFolder')}
                 </label>
                 <div className="flex gap-2">
                   <div
@@ -258,11 +261,11 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
                     onClick={() => (setBrowserMode('root'), setFolderBrowserOpen(true))}
                     disabled={loading}
                   >
-                    Browse
+                    {tCommon('browse')}
                   </Button>
                 </div>
                 <p className="text-xs text-muted-foreground">
-                  Select the parent folder where project will be created
+                  {t('selectParentFolder')}
                 </p>
               </div>
 
@@ -270,7 +273,7 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
               {fullProjectPath && (
                 <div className="space-y-1">
                   <label className="text-sm font-medium">
-                    Project will be created at:
+                    {t('projectCreatedAt')}
                   </label>
                   <div className="p-3 bg-muted rounded-md text-sm font-mono break-all">
                     {fullProjectPath}
@@ -294,10 +297,10 @@ export function SetupDialog({ open, onOpenChange }: SetupDialogProps) {
                   onClick={() => onOpenChange(false)}
                   disabled={loading}
                 >
-                  Cancel
+                  {tCommon('cancel')}
                 </Button>
                 <Button type="submit" disabled={loading || !name || !rootPath}>
-                  {loading ? 'Creating...' : 'Create Project'}
+                  {loading ? tCommon('creating') : t('createProject')}
                 </Button>
               </div>
             </form>

package/src/components/setup/unified-setup-wizard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { useTranslations } from 'next-intl';
 import {
   Dialog,
   DialogContent,
@@ -32,6 +33,8 @@ interface UnifiedSetupWizardProps {
 }
 
 export function UnifiedSetupWizard({ open, onOpenChange, initialStatus }: UnifiedSetupWizardProps) {
+  const t = useTranslations('settings');
+  const tCommon = useTranslations('common');
   const [expandedSection, setExpandedSection] = useState<SectionId | null>(null);
   const [status, setStatus] = useState<SectionStatus>({
     agentProvider: initialStatus?.agentProvider ?? false,
@@ -118,9 +121,9 @@ export function UnifiedSetupWizard({ open, onOpenChange, initialStatus }: Unifie
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[600px] z-[9999] max-h-[80vh] p-0 flex flex-col overflow-hidden">
         <DialogHeader className="p-6 pb-2 shrink-0">
-          <DialogTitle>Set Up Your Workspace</DialogTitle>
+          <DialogTitle>{t('setUpWorkspace')}</DialogTitle>
           <DialogDescription>
-            Configure the essential settings for your workspace. You can always change these later in Settings.
+            {t('setUpWorkspaceDescription')}
           </DialogDescription>
         </DialogHeader>
 
@@ -139,9 +142,9 @@ export function UnifiedSetupWizard({ open, onOpenChange, initialStatus }: Unifie
                   {status.agentProvider ? <Check className="h-4 w-4" /> : <Bot className="h-4 w-4" />}
                 </div>
                 <div>
-                  <span className="font-medium">Agent Provider</span>
+                  <span className="font-medium">{tCommon('agentProvider')}</span>
                   <p className="text-xs text-muted-foreground">
-                    {status.agentProvider ? 'Configured' : 'Configure how to authenticate with Claude API'}
+                    {status.agentProvider ? tCommon('configured') : t('configureAuthDescription')}
                   </p>
                 </div>
               </div>
@@ -171,9 +174,9 @@ export function UnifiedSetupWizard({ open, onOpenChange, initialStatus }: Unifie
                   {status.apiAccessKey ? <Check className="h-4 w-4" /> : <Shield className="h-4 w-4" />}
                 </div>
                 <div>
-                  <span className="font-medium">API Access Key</span>
+                  <span className="font-medium">{t('apiAccessKey')}</span>
                   <p className="text-xs text-muted-foreground">
-                    {status.apiAccessKey ? 'Configured' : 'Set up authentication for remote access'}
+                    {status.apiAccessKey ? tCommon('configured') : t('setUpRemoteAccess')}
                   </p>
                 </div>
               </div>
@@ -203,9 +206,9 @@ export function UnifiedSetupWizard({ open, onOpenChange, initialStatus }: Unifie
                   {status.remoteAccess ? <Check className="h-4 w-4" /> : <Globe className="h-4 w-4" />}
                 </div>
                 <div>
-                  <span className="font-medium">Remote Access</span>
+                  <span className="font-medium">{tCommon('accessAnywhere')}</span>
                   <p className="text-xs text-muted-foreground">
-                    {status.remoteAccess ? 'Configured' : 'Access your workspace from anywhere'}
+                    {status.remoteAccess ? tCommon('configured') : t('setUpRemoteAccess')}
                   </p>
                 </div>
               </div>
@@ -242,7 +245,7 @@ export function UnifiedSetupWizard({ open, onOpenChange, initialStatus }: Unifie
             </Label>
           </div>
           <Button variant="outline" onClick={handleClose}>
-            Close
+            {tCommon('close')}
           </Button>
         </div>
       </DialogContent>

package/src/components/sidebar/file-browser/file-create-buttons.tsx

@@ -17,6 +17,7 @@ import { toast } from 'sonner';
 import { useSidebarStore } from '@/stores/sidebar-store';
 import { FileUploadDialog } from './file-upload-dialog';
 import type { FileEntry } from '@/types';
+import { useTranslations } from 'next-intl';
 
 interface FileCreateButtonsProps {
   /** Parent directory entry where files/folders will be created */
@@ -32,6 +33,9 @@ interface FileCreateButtonsProps {
  * Displays at the bottom of file tree for quick creation at project root
  */
 export function FileCreateButtons({ entry, rootPath, onRefresh }: FileCreateButtonsProps) {
+  const tSidebar = useTranslations('sidebar');
+  const tSettings = useTranslations('settings');
+  const tCommon = useTranslations('common');
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
   const [createType, setCreateType] = useState<'file' | 'folder'>('file');
@@ -65,7 +69,7 @@ export function FileCreateButtons({ entry, rootPath, onRefresh }: FileCreateButt
   const handleCreate = async () => {
     const trimmedName = createName.trim();
     if (!trimmedName) {
-      toast.error('Name cannot be empty');
+      toast.error(tSidebar('nameCannotBeEmpty'));
       return;
     }
 
@@ -84,7 +88,7 @@ export function FileCreateButtons({ entry, rootPath, onRefresh }: FileCreateButt
 
       if (!res.ok) {
         const data = await res.json();
-        throw new Error(data.error || 'Create failed');
+        throw new Error(data.error || tSettings('createFailed'));
       }
 
       const data = await res.json();
@@ -103,7 +107,7 @@ export function FileCreateButtons({ entry, rootPath, onRefresh }: FileCreateButt
         openTab(data.path);
       }
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : 'Create failed');
+      toast.error(err instanceof Error ? err.message : tSettings('createFailed'));
     } finally {
       setIsCreating(false);
     }

package/src/components/sidebar/file-browser/file-tab-content.tsx

@@ -14,6 +14,7 @@ import { useContextMentionStore } from '@/stores/context-mention-store';
 import { useProjectStore } from '@/stores/project-store';
 import { useFileSync } from '@/hooks/use-file-sync';
 import { waitForElement } from '@/lib/utils';
+import { useTranslations } from 'next-intl';
 
 interface FileContent {
   content: string | null;
@@ -30,6 +31,9 @@ interface FileTabContentProps {
 
 export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
   const activeProject = useActiveProject();
+  const t = useTranslations('editor');
+  const tCommon = useTranslations('common');
+  const tSidebar = useTranslations('sidebar');
   const { editorPosition, setEditorPosition, updateTabDirty, pendingEditorPosition, clearPendingEditorPosition } = useSidebarStore();
   const { selectedTask, tasks, createTask, selectTask, setSelectedTask } = useTaskStore();
   const { addFileMention, addLineMention } = useContextMentionStore();
@@ -439,7 +443,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
       if (createNew || !targetTask) {
         const projectId = selectedProjectIds[0];
         if (!projectId) {
-          alert('No project selected');
+          alert(tSidebar('selectProject'));
           return;
         }
 
@@ -470,7 +474,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
       }
     } catch (error) {
       console.error('Failed to attach file:', error);
-      alert(error instanceof Error ? error.message : 'Failed to attach file to chat');
+      alert(error instanceof Error ? error.message : t('addFileToChat'));
     }
   };
 
@@ -498,7 +502,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
               variant="ghost"
               size="icon-sm"
               onClick={() => setSearchVisible(!searchVisible)}
-              title="Search in file (⌘F)"
+              title={t('searchPlaceholder') + ' (⌘F)'}
               className={searchVisible ? 'bg-accent' : ''}
             >
               <Search className="size-4" />
@@ -512,7 +516,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
                 size="icon-sm"
                 onClick={handleUndo}
                 disabled={!canUndo}
-                title="Undo (⌘Z)"
+                title={t('undo') + ' (⌘Z)'}
               >
                 <Undo className="size-4" />
               </Button>
@@ -521,7 +525,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
                 size="icon-sm"
                 onClick={handleRedo}
                 disabled={!canRedo}
-                title="Redo (⌘⇧Z)"
+                title={t('redo') + ' (⌘⇧Z)'}
               >
                 <Redo className="size-4" />
               </Button>
@@ -534,7 +538,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
               size="sm"
               onClick={handleSave}
               disabled={!isDirty || saveStatus === 'saving'}
-              title="Save (⌘S)"
+              title={tCommon('save') + ' (⌘S)'}
               className="text-xs gap-1"
             >
               <Save className="size-3" />
@@ -547,7 +551,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
               variant="ghost"
               size="icon-sm"
               onClick={toggleViewMode}
-              title={viewMode === 'preview' ? 'Show source code' : 'Show preview'}
+              title={viewMode === 'preview' ? t('showSourceCode') : t('showPreview')}
               className={viewMode === 'preview' ? 'bg-accent' : ''}
             >
               {viewMode === 'preview' ? <Code className="size-4" /> : <Eye className="size-4" />}
@@ -560,7 +564,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
                 <Button
                   variant="ghost"
                   size="icon-sm"
-                  title={selection ? `Add lines L${selection.startLine}-${selection.endLine} to chat` : "Add file to chat"}
+                  title={selection ? t('addLinesToChat', { startLine: selection.startLine, endLine: selection.endLine }) : t('addFileToChat')}
                   className="relative"
                 >
                   <AtSign className="size-4" />
@@ -615,7 +619,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
                 <Button
                   variant="ghost"
                   size="icon-sm"
-                  title="Export"
+                  title={t('export')}
                 >
                   <Download className="size-4" />
                 </Button>
@@ -642,7 +646,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
         <div className="flex items-center gap-2 min-w-0 flex-1 justify-end">
           {/* Sync indicator */}
           {fileSync.isPolling && (
-            <span title="Checking for changes...">
+            <span title={t('checkingForChanges')}>
               <RefreshCw className="size-3 animate-spin text-muted-foreground" />
             </span>
           )}
@@ -652,7 +656,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
               size="sm"
               onClick={() => setShowDiffResolver(true)}
               className="text-xs gap-1 text-amber-600 dark:text-amber-400 hover:text-amber-600 dark:hover:text-amber-400"
-              title="External changes detected - click to resolve"
+              title={t('externalChangesDetected')}
             >
               <AlertCircle className="size-3" />
               <span className="hidden sm:inline">Conflict</span>
@@ -687,7 +691,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
                 closeSearch();
               }
             }}
-            placeholder="Search..."
+            placeholder={t('searchPlaceholder')}
             className="flex-1 min-w-0 bg-transparent border-0 outline-none text-sm placeholder:text-muted-foreground"
           />
           {searchQuery && (
@@ -700,7 +704,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
                 size="icon-sm"
                 onClick={handlePrevMatch}
                 disabled={totalMatches === 0}
-                title="Previous (⇧Enter)"
+                title={t('previousMatch') + ' (⇧Enter)'}
                 className="shrink-0"
               >
                 <span className="text-xs">↑</span>
@@ -710,7 +714,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
                 size="icon-sm"
                 onClick={handleNextMatch}
                 disabled={totalMatches === 0}
-                title="Next (Enter)"
+                title={t('nextMatch') + ' (Enter)'}
                 className="shrink-0"
               >
                 <span className="text-xs">↓</span>
@@ -721,7 +725,7 @@ export function FileTabContent({ tabId, filePath }: FileTabContentProps) {
             variant="ghost"
             size="icon-sm"
             onClick={closeSearch}
-            title="Close (Esc)"
+            title={tCommon('close') + ' (Esc)'}
             className="shrink-0"
           >
             <X className="size-4" />