jettypod 4.4.120 → 4.4.121

package/apps/dashboard/components/settings/ContextDocumentsSection.tsx

@@ -0,0 +1,317 @@
+'use client';
+
+import { useState, useRef, useCallback } from 'react';
+import { openDialog } from '@/lib/tauri';
+import { dataBridge } from '@/lib/data-bridge';
+import type { ContextDocument } from '@/lib/data-bridge';
+
+interface ContextDocumentsSectionProps {
+  initialDocuments: ContextDocument[];
+}
+
+export function ContextDocumentsSection({ initialDocuments }: ContextDocumentsSectionProps) {
+  const [documents, setDocuments] = useState<ContextDocument[]>(initialDocuments);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [editingDoc, setEditingDoc] = useState<{ name: string; content: string }>({ name: '', content: '' });
+  const [isAdding, setIsAdding] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleAddText = () => {
+    setDropdownOpen(false);
+    setIsAdding(true);
+    setEditingDoc({ name: '', content: '' });
+    setValidationError(null);
+  };
+
+  const handleAddFile = async () => {
+    setDropdownOpen(false);
+    const selected = await openDialog({ multiple: true, title: 'Select context files' });
+    if (!selected) return;
+    const paths = Array.isArray(selected) ? selected : [selected];
+    for (const filePath of paths) {
+      if (typeof filePath === 'string') {
+        const name = filePath.split('/').pop() || filePath;
+        // Skip duplicates by name
+        if (documents.some(d => d.name === name)) continue;
+        const doc: ContextDocument = { type: 'file', name, path: filePath };
+        await dataBridge.addContextDocument(doc);
+        setDocuments(prev => [...prev, doc]);
+      }
+    }
+  };
+
+  const handleSaveNew = async () => {
+    if (!editingDoc.name.trim()) {
+      setValidationError('Name is required');
+      return;
+    }
+    if (!editingDoc.content.trim()) {
+      setValidationError('Content is required');
+      return;
+    }
+    setValidationError(null);
+    const doc: ContextDocument = { type: 'text', name: editingDoc.name.trim(), content: editingDoc.content };
+    await dataBridge.addContextDocument(doc);
+    setDocuments(prev => [...prev, doc]);
+    setIsAdding(false);
+    setEditingDoc({ name: '', content: '' });
+  };
+
+  const handleCancelNew = () => {
+    setIsAdding(false);
+    setEditingDoc({ name: '', content: '' });
+    setValidationError(null);
+  };
+
+  const handleEdit = (index: number) => {
+    const doc = documents[index];
+    setEditingIndex(index);
+    setEditingDoc({ name: doc.name, content: doc.content || '' });
+    setValidationError(null);
+  };
+
+  const handleSaveEdit = async () => {
+    if (editingIndex === null) return;
+    if (!editingDoc.name.trim()) {
+      setValidationError('Name is required');
+      return;
+    }
+    if (!editingDoc.content.trim()) {
+      setValidationError('Content is required');
+      return;
+    }
+    setValidationError(null);
+    const doc: ContextDocument = { type: 'text', name: editingDoc.name.trim(), content: editingDoc.content };
+    await dataBridge.updateContextDocument(editingIndex, doc);
+    setDocuments(prev => prev.map((d, i) => i === editingIndex ? doc : d));
+    setEditingIndex(null);
+    setEditingDoc({ name: '', content: '' });
+  };
+
+  const handleCancelEdit = () => {
+    setEditingIndex(null);
+    setEditingDoc({ name: '', content: '' });
+    setValidationError(null);
+  };
+
+  const handleRemove = async (index: number) => {
+    await dataBridge.removeContextDocument(index);
+    setDocuments(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    if (containerRef.current && !containerRef.current.contains(e.relatedTarget as Node)) {
+      setDragOver(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback(async (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    const files = Array.from(e.dataTransfer.files);
+    for (const file of files) {
+      const filePath = (file as unknown as { path?: string }).path || file.name;
+      const name = file.name;
+      // Skip duplicates by name
+      if (documents.some(d => d.name === name)) continue;
+      const doc: ContextDocument = { type: 'file', name, path: filePath };
+      await dataBridge.addContextDocument(doc);
+      setDocuments(prev => [...prev, doc]);
+    }
+  }, [documents]);
+
+  return (
+    <div className="mt-8">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-[15px] font-medium text-zinc-900 dark:text-zinc-100">
+          Context Documents
+        </h3>
+        <div className="relative" ref={dropdownRef}>
+          <button
+            onClick={() => setDropdownOpen(!dropdownOpen)}
+            className="w-8 h-8 rounded-lg border-2 border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-400 dark:text-zinc-500 text-lg flex items-center justify-center transition-all duration-200 hover:border-[#819D9F] hover:text-zinc-900 dark:hover:text-zinc-100 active:scale-95"
+          >
+            +
+          </button>
+          {dropdownOpen && (
+            <>
+              <div className="fixed inset-0 z-10" onClick={() => setDropdownOpen(false)} />
+              <div className="absolute top-[calc(100%+6px)] right-0 z-20 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl p-1.5 min-w-[220px] shadow-lg">
+                <button
+                  onClick={handleAddFile}
+                  className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg w-full text-left text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
+                >
+                  <svg className="w-[18px] h-[18px] text-zinc-400" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+                    <path d="M10 4v12M15 9.5c0 2.5-2.5 4.5-5 4.5S5 12 5 9.5V6a3 3 0 016 0v4a1.5 1.5 0 01-3 0V6.5" />
+                  </svg>
+                  Upload from device
+                </button>
+                <button
+                  onClick={handleAddText}
+                  className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg w-full text-left text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
+                >
+                  <svg className="w-[18px] h-[18px] text-zinc-400" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M4 5h12M4 10h8M4 15h5" />
+                    <path d="M15 12v6M12 15h6" />
+                  </svg>
+                  Add text content
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div
+        ref={containerRef}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={`bg-zinc-50 dark:bg-zinc-800/50 rounded-xl border-2 transition-all duration-200 overflow-hidden ${
+          dragOver
+            ? 'border-[#819D9F] shadow-[0_0_0_3px_rgba(129,157,159,0.15)]'
+            : 'border-zinc-200 dark:border-zinc-700'
+        }`}
+      >
+        {documents.length === 0 && !isAdding ? (
+          <div className="py-10 text-center text-zinc-400 dark:text-zinc-500 text-sm">
+            Drop files here or use + to add context
+          </div>
+        ) : (
+          <>
+            {documents.map((doc, index) => (
+              editingIndex === index ? (
+                <div key={index} className="bg-zinc-100 dark:bg-zinc-900/50 border-b border-zinc-200/50 dark:border-zinc-700/40">
+                  <div className="flex items-center gap-2.5 px-3.5 pt-3">
+                    <Grip />
+                    <TypeIcon type={doc.type} />
+                    <input
+                      type="text"
+                      value={editingDoc.name}
+                      onChange={e => setEditingDoc(prev => ({ ...prev, name: e.target.value }))}
+                      placeholder="Name this snippet..."
+                      className="flex-1 bg-transparent border-none text-[13px] font-medium text-zinc-900 dark:text-zinc-100 outline-none"
+                    />
+                  </div>
+                  <div className="px-3.5 mt-2">
+                    <textarea
+                      value={editingDoc.content}
+                      onChange={e => setEditingDoc(prev => ({ ...prev, content: e.target.value }))}
+                      placeholder="Type or paste your context text here..."
+                      className="w-full bg-white dark:bg-zinc-800 border-2 border-zinc-200 dark:border-zinc-700 rounded-lg px-3 py-2.5 text-[13px] text-zinc-700 dark:text-zinc-200 leading-relaxed resize-y min-h-[72px] focus:outline-none focus:border-[#819D9F] focus:shadow-[0_0_0_3px_rgba(129,157,159,0.15)] transition-all"
+                      rows={3}
+                    />
+                  </div>
+                  <div className="flex items-center justify-end gap-2 px-3.5 py-2">
+                    {validationError && (
+                      <span className="text-[12px] text-red-500 dark:text-red-400 mr-auto">{validationError}</span>
+                    )}
+                    <button onClick={handleCancelEdit} className="px-3.5 py-1.5 rounded-lg border-2 border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-500 text-[13px] font-medium hover:border-zinc-300 dark:hover:border-zinc-600 hover:text-zinc-700 dark:hover:text-zinc-300 transition-all">Cancel</button>
+                    <button onClick={handleSaveEdit} className="px-3.5 py-1.5 rounded-lg border-none bg-[#819D9F] text-zinc-900 text-[13px] font-medium hover:brightness-105 transition-all active:scale-[0.98]">Save</button>
+                  </div>
+                </div>
+              ) : (
+                <div
+                  key={index}
+                  className="group flex items-center px-3.5 py-2.5 border-b border-zinc-200/50 dark:border-zinc-700/40 last:border-b-0 hover:bg-white/50 dark:hover:bg-white/[0.02] transition-colors"
+                >
+                  <Grip />
+                  <TypeIcon type={doc.type} />
+                  <div className="flex-1 min-w-0 ml-2.5">
+                    <div className="text-[13px] font-medium text-zinc-900 dark:text-zinc-100 truncate">{doc.name}</div>
+                    <div className="text-[11px] text-zinc-400 dark:text-zinc-500 truncate font-mono mt-0.5">
+                      {doc.type === 'file' ? doc.path : (doc.content || '').slice(0, 80) + ((doc.content || '').length > 80 ? '...' : '')}
+                    </div>
+                  </div>
+                  <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                    {doc.type === 'text' && (
+                      <button onClick={() => handleEdit(index)} className="w-[26px] h-[26px] rounded-md flex items-center justify-center text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-200 transition-all text-[13px]" title="Edit">
+                        ✎
+                      </button>
+                    )}
+                    <button onClick={() => handleRemove(index)} className="w-[26px] h-[26px] rounded-md flex items-center justify-center text-zinc-400 hover:bg-red-100 dark:hover:bg-red-900/20 hover:text-red-600 dark:hover:text-red-400 transition-all text-[13px]" title="Remove">
+                        ×
+                    </button>
+                  </div>
+                </div>
+              )
+            ))}
+
+            {isAdding && (
+              <div className="bg-zinc-100 dark:bg-zinc-900/50 border-b border-zinc-200/50 dark:border-zinc-700/40">
+                <div className="flex items-center gap-2.5 px-3.5 pt-3">
+                  <Grip />
+                  <TypeIcon type="text" />
+                  <input
+                    type="text"
+                    value={editingDoc.name}
+                    onChange={e => setEditingDoc(prev => ({ ...prev, name: e.target.value }))}
+                    placeholder="Name this snippet..."
+                    className="flex-1 bg-transparent border-none text-[13px] font-medium text-zinc-900 dark:text-zinc-100 outline-none"
+                    autoFocus
+                  />
+                </div>
+                <div className="px-3.5 mt-2">
+                  <textarea
+                    value={editingDoc.content}
+                    onChange={e => setEditingDoc(prev => ({ ...prev, content: e.target.value }))}
+                    placeholder="Type or paste your context text here..."
+                    className="w-full bg-white dark:bg-zinc-800 border-2 border-zinc-200 dark:border-zinc-700 rounded-lg px-3 py-2.5 text-[13px] text-zinc-700 dark:text-zinc-200 leading-relaxed resize-y min-h-[72px] focus:outline-none focus:border-[#819D9F] focus:shadow-[0_0_0_3px_rgba(129,157,159,0.15)] transition-all"
+                    rows={3}
+                  />
+                </div>
+                <div className="flex items-center justify-end gap-2 px-3.5 py-2">
+                  {validationError && (
+                    <span className="text-[12px] text-red-500 dark:text-red-400 mr-auto">{validationError}</span>
+                  )}
+                  <button onClick={handleCancelNew} className="px-3.5 py-1.5 rounded-lg border-2 border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-500 text-[13px] font-medium hover:border-zinc-300 dark:hover:border-zinc-600 hover:text-zinc-700 dark:hover:text-zinc-300 transition-all">Cancel</button>
+                  <button onClick={handleSaveNew} className="px-3.5 py-1.5 rounded-lg border-none bg-[#819D9F] text-zinc-900 text-[13px] font-medium hover:brightness-105 transition-all active:scale-[0.98]">Save</button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
+        {dragOver && (
+          <div className="py-5 text-center border-t border-dashed border-zinc-300 dark:border-zinc-600">
+            <span className="text-[13px] font-medium text-[#819D9F]">Drop files to add as context</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Grip() {
+  return (
+    <div className="flex flex-col gap-[1.5px] cursor-grab opacity-20 hover:opacity-60 transition-opacity p-1">
+      <span className="block w-2.5 h-[1.5px] bg-zinc-500 rounded-sm" />
+      <span className="block w-2.5 h-[1.5px] bg-zinc-500 rounded-sm" />
+      <span className="block w-2.5 h-[1.5px] bg-zinc-500 rounded-sm" />
+    </div>
+  );
+}
+
+function TypeIcon({ type }: { type: 'file' | 'text' }) {
+  if (type === 'file') {
+    return (
+      <div className="w-[26px] h-[26px] rounded-md flex items-center justify-center text-[11px] font-bold shrink-0 bg-[#819D9F]/15 text-[#819D9F]">
+        F
+      </div>
+    );
+  }
+  return (
+    <div className="w-[26px] h-[26px] rounded-md flex items-center justify-center text-[11px] font-bold shrink-0 bg-[#e57a44]/12 text-[#e57a44]">
+      T
+    </div>
+  );
+}

package/apps/dashboard/components/settings/EnvVarsSection.tsx

@@ -1,8 +1,9 @@
-'use client';
 
 import { useState } from 'react';
+import { invoke } from '@/lib/tauri';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
+import { dataBridge } from '@/lib/data-bridge';
 
 interface EnvVar {
   name: string;
@@ -43,22 +44,8 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
     setCurrentFile(filename);
     setErrorMessage(null);
     try {
-      // Persist selection
-      await fetch('/api/settings/env-vars', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'select', file: filename }),
-      });
-      // Load vars from selected file
-      const res = await fetch(`/api/settings/env-vars?file=${encodeURIComponent(filename)}`);
-      if (!res.ok) {
-        const data = await res.json();
-        setErrorMessage(data.error || 'Failed to load environment variables');
-        setEnvVars([]);
-        return;
-      }
-      const vars = await res.json();
-      setEnvVars(vars);
+      const vars = await dataBridge.getEnvVars(filename);
+      setEnvVars(vars.map(v => ({ name: v.key, value: v.value })));
     } catch {
       setErrorMessage('Failed to load environment variables');
       setEnvVars([]);
@@ -67,22 +54,16 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
 
   const refreshFiles = async () => {
     try {
-      const res = await fetch('/api/settings/env-vars?action=discover');
-      if (res.ok) {
-        const data = await res.json();
-        setEnvFiles(data.files || []);
-        // If selected file no longer exists, fall back
-        if (currentFile && !data.files.includes(currentFile)) {
-          const fallback = data.files[0] || null;
-          setCurrentFile(fallback);
-          if (fallback) {
-            const varsRes = await fetch(`/api/settings/env-vars?file=${encodeURIComponent(fallback)}`);
-            if (varsRes.ok) {
-              setEnvVars(await varsRes.json());
-            }
-          } else {
-            setEnvVars([]);
-          }
+      const files = await dataBridge.discoverEnvFiles();
+      setEnvFiles(files);
+      if (currentFile && !files.includes(currentFile)) {
+        const fallback = files[0] || null;
+        setCurrentFile(fallback);
+        if (fallback) {
+          const vars = await dataBridge.getEnvVars(fallback);
+          setEnvVars(vars.map(v => ({ name: v.key, value: v.value })));
+        } else {
+          setEnvVars([]);
         }
       }
     } catch {
@@ -93,16 +74,9 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
   const handleCreateEnvFile = async () => {
     setErrorMessage(null);
     try {
-      const res = await fetch('/api/settings/env-vars', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'create', file: '.env' }),
-      });
-      if (!res.ok) {
-        setErrorMessage('Failed to create .env file');
-        return;
-      }
-      setEnvFiles(['.env']);
+      await invoke('db_create_env_file', { filename: '.env' });
+      const files = await dataBridge.discoverEnvFiles();
+      setEnvFiles(files);
       setCurrentFile('.env');
       setEnvVars([]);
       showSuccess('.env file created');
@@ -128,16 +102,7 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
 
     setErrorMessage(null);
     try {
-      const res = await fetch('/api/settings/env-vars', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'add', name: formName, value: formValue, file: currentFile }),
-      });
-      if (!res.ok) {
-        const data = await res.json();
-        setErrorMessage(data.error || 'Failed to add variable');
-        return;
-      }
+      await invoke('db_create_env_var', { file: currentFile, key: formName, value: formValue });
       setEnvVars([...envVars, { name: formName, value: formValue }]);
       setFormName('');
       setFormValue('');
@@ -152,16 +117,7 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
     if (!editingName) return;
     setErrorMessage(null);
     try {
-      const res = await fetch('/api/settings/env-vars', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: editingName, value: formValue, file: currentFile }),
-      });
-      if (!res.ok) {
-        const data = await res.json();
-        setErrorMessage(data.error || 'Failed to update variable');
-        return;
-      }
+      await invoke('db_update_env_var', { file: currentFile, key: editingName, value: formValue });
       setEnvVars(envVars.map(v => v.name === editingName ? { ...v, value: formValue } : v));
       setFormValue('');
       setEditingName(null);
@@ -175,16 +131,7 @@ export function EnvVarsSection({ initialEnvVars, envFiles: initialEnvFiles, sele
     if (!deletingName) return;
     setErrorMessage(null);
     try {
-      const res = await fetch('/api/settings/env-vars', {
-        method: 'DELETE',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: deletingName, file: currentFile }),
-      });
-      if (!res.ok) {
-        const data = await res.json();
-        setErrorMessage(data.error || 'Failed to delete variable');
-        return;
-      }
+      await invoke('db_delete_env_var', { file: currentFile, key: deletingName });
       setEnvVars(envVars.filter(v => v.name !== deletingName));
       setDeletingName(null);
       showSuccess('Variable deleted successfully');

package/apps/dashboard/components/settings/GeneralSection.tsx

@@ -1,24 +1,37 @@
-'use client';
 
 import { useState } from 'react';
+import { invoke } from '@/lib/tauri';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
+import { dataBridge } from '@/lib/data-bridge';
 
 interface MainBranchInfo {
   branch: string;
   source: 'configured' | 'detected';
 }
 
+const CLAUDE_MODELS = [
+  { id: 'default', label: 'Default', description: 'Opus 4.6', value: null },
+  { id: 'sonnet', label: 'Sonnet', description: 'Sonnet 4.6', value: 'sonnet' },
+  { id: 'haiku', label: 'Haiku', description: 'Haiku 4.5', value: 'haiku' },
+];
+
 interface GeneralSectionProps {
   initialMainBranch: MainBranchInfo;
+  initialClaudeModel: string | null;
 }
 
-export function GeneralSection({ initialMainBranch }: GeneralSectionProps) {
+export function GeneralSection({ initialMainBranch, initialClaudeModel }: GeneralSectionProps) {
   const [mainBranch, setMainBranch] = useState(initialMainBranch);
   const [inputValue, setInputValue] = useState(initialMainBranch.branch);
   const [isEditing, setIsEditing] = useState(false);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
 
+  // Claude model state
+  const [claudeModel, setClaudeModel] = useState<string | null>(initialClaudeModel);
+  const [selectedModel, setSelectedModel] = useState<string | null>(initialClaudeModel);
+  const [isEditingModel, setIsEditingModel] = useState(false);
+
   const showSuccess = (message: string) => {
     setSuccessMessage(message);
     setTimeout(() => setSuccessMessage(null), 3000);
@@ -28,19 +41,16 @@ export function GeneralSection({ initialMainBranch }: GeneralSectionProps) {
     const trimmed = inputValue.trim();
     const value = trimmed === '' ? null : trimmed;
 
-    const res = await fetch('/api/settings/general', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ mainBranch: value }),
-    });
-
-    if (res.ok) {
-      const data = await res.json();
-      setMainBranch(data.mainBranch);
-      setInputValue(data.mainBranch.branch);
-      setIsEditing(false);
-      showSuccess(value ? 'Main branch updated' : 'Reset to auto-detect');
+    if (value) {
+      await invoke('db_set_main_branch', { branch: value });
+    } else {
+      await invoke('db_reset_main_branch');
     }
+    const branch = await dataBridge.getMainBranch();
+    setMainBranch({ branch, source: value ? 'configured' : 'detected' });
+    setInputValue(branch);
+    setIsEditing(false);
+    showSuccess(value ? 'Main branch updated' : 'Reset to auto-detect');
   };
 
   const handleCancel = () => {
@@ -49,21 +59,42 @@ export function GeneralSection({ initialMainBranch }: GeneralSectionProps) {
   };
 
   const handleReset = async () => {
-    const res = await fetch('/api/settings/general', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ mainBranch: null }),
-    });
-
-    if (res.ok) {
-      const data = await res.json();
-      setMainBranch(data.mainBranch);
-      setInputValue(data.mainBranch.branch);
-      setIsEditing(false);
-      showSuccess('Reset to auto-detect');
+    await invoke('db_reset_main_branch');
+    const branch = await dataBridge.getMainBranch();
+    setMainBranch({ branch, source: 'detected' });
+    setInputValue(branch);
+    setIsEditing(false);
+    showSuccess('Reset to auto-detect');
+  };
+
+  // Claude model handlers
+  const handleModelSave = async () => {
+    if (selectedModel) {
+      await dataBridge.setClaudeModel(selectedModel);
+    } else {
+      await dataBridge.resetClaudeModel();
     }
+    setClaudeModel(selectedModel);
+    setIsEditingModel(false);
+    const modelLabel = CLAUDE_MODELS.find(m => m.value === selectedModel)?.label || 'Default';
+    showSuccess(`Model set to ${modelLabel}`);
   };
 
+  const handleModelCancel = () => {
+    setSelectedModel(claudeModel);
+    setIsEditingModel(false);
+  };
+
+  const handleModelReset = async () => {
+    await dataBridge.resetClaudeModel();
+    setClaudeModel(null);
+    setSelectedModel(null);
+    setIsEditingModel(false);
+    showSuccess('Model reset to default');
+  };
+
+  const currentModel = CLAUDE_MODELS.find(m => m.value === claudeModel) || CLAUDE_MODELS[0];
+
   return (
     <section id="general">
       <div className="flex items-center justify-between mb-6">
@@ -136,6 +167,86 @@ export function GeneralSection({ initialMainBranch }: GeneralSectionProps) {
           </div>
         )}
       </div>
+
+      {/* Claude Code Model Setting */}
+      <div className="p-6 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg mt-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <label className="block text-base font-medium text-zinc-900 dark:text-zinc-100">
+              Claude Code Model
+            </label>
+            <p className="text-base text-zinc-500 dark:text-zinc-400 mt-1">
+              The model used for Claude Code sessions in this project.
+            </p>
+          </div>
+          {!isEditingModel && (
+            <div className="flex items-center gap-3">
+              <span className="text-base text-zinc-900 dark:text-zinc-100">
+                {currentModel.label}
+              </span>
+              <span className="px-2 py-1 text-xs rounded bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400">
+                {claudeModel ? 'configured' : 'default'}
+              </span>
+              <Button
+                onClick={() => {
+                  setSelectedModel(claudeModel);
+                  setIsEditingModel(true);
+                }}
+                variant="ghost"
+                size="sm"
+              >
+                Edit
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {isEditingModel && (
+          <div className="mt-4 space-y-4">
+            <div className="space-y-2">
+              {CLAUDE_MODELS.map((model) => (
+                <label
+                  key={model.id}
+                  className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors duration-200 ${
+                    selectedModel === model.value
+                      ? 'bg-zinc-200 dark:bg-zinc-700'
+                      : 'hover:bg-zinc-100 dark:hover:bg-zinc-700/50'
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="claude-model"
+                    checked={selectedModel === model.value}
+                    onChange={() => setSelectedModel(model.value)}
+                    className="w-4 h-4 accent-[#819D9F]"
+                  />
+                  <div>
+                    <span className="text-base font-medium text-zinc-900 dark:text-zinc-100">
+                      {model.label}
+                    </span>
+                    <span className="text-sm text-zinc-500 dark:text-zinc-400 ml-2">
+                      {model.description}
+                    </span>
+                  </div>
+                </label>
+              ))}
+            </div>
+            <div className="flex gap-3">
+              <Button onClick={handleModelSave} size="sm">
+                Save
+              </Button>
+              {claudeModel && (
+                <Button onClick={handleModelReset} variant="ghost" size="sm">
+                  Reset to Default
+                </Button>
+              )}
+              <Button onClick={handleModelCancel} variant="ghost" size="sm">
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
     </section>
   );
 }