┌─────────────────────────────────────────────────┐
│                   TalkCody                      │
├─────────────────────────────────────────────────┤
│                                                 │
│  ┌───────────────┐         ┌────────────────┐  │
│  │   Frontend    │         │    Backend     │  │
│  │  React + TS   │◄───────►│  Tauri/Rust    │  │
│  │   Vite 7      │   IPC   │                │  │
│  └───────────────┘         └────────────────┘  │
│         │                           │          │
│         │                           │          │
│         ▼                           ▼          │
│  ┌───────────────┐         ┌────────────────┐  │
│  │   Services    │         │  File System   │  │
│  │  AI/Database  │         │   Operations   │  │
│  └───────────────┘         └────────────────┘  │
│         │                           │          │
└─────────┼───────────────────────────┼──────────┘
          │                           │
          ▼                           ▼
    ┌─────────┐              ┌──────────────┐
    │ AI APIs │              │ Local Files  │
    │(OpenAI, │              │  & SQLite    │
    │Claude..)│              │              │
    └─────────┘              └──────────────┘

App
├── Layout
│   ├── Sidebar
│   │   ├── ProjectList
│   │   ├── ConversationList
│   │   └── Navigation
│   └── MainContent
│       ├── ChatView
│       │   ├── MessageList
│       │   │   └── Message
│       │   │       ├── TextContent
│       │   │       ├── CodeBlock
│       │   │       └── ToolResult
│       │   └── ChatInput
│       ├── ExplorerView
│       │   ├── FileTree
│       │   └── Editor
│       ├── AgentsView
│       └── SettingsView
└── Providers
    ├── ThemeProvider
    ├── I18nProvider
    └── ToastProvider

services/
├── ai/
│   ├── providers/          # AI provider integrations
│   ├── agent-service.ts    # Agent management
│   ├── chat-service.ts     # Chat functionality
│   └── completion-service.ts
├── database/
│   ├── db-service.ts       # Database operations
│   ├── models/             # Data models
│   └── migrations/         # Schema migrations
├── file/
│   ├── file-service.ts     # File operations
│   ├── search-service.ts   # Code search
│   └── watcher-service.ts  # File watching
└── mcp/
    ├── mcp-service.ts      # MCP client
    ├── server-manager.ts   # Server management
    └── tool-registry.ts    # Tool registration

// Frontend invokes Tauri command
import { invoke } from '@tauri-apps/api/core';

const result = await invoke('read_file', {
  path: '/path/to/file.ts'
});

// Rust command handler
#[tauri::command]
async fn read_file(path: String) -> Result<String, String> {
    tokio::fs::read_to_string(&path)
        .await
        .map_err(|e| e.to_string())
}

// Frontend listens to backend events
import { listen } from '@tauri-apps/api/event';

await listen('file-changed', (event) => {
  console.log('File changed:', event.payload);
});

// Backend emits events
app.emit_all("file-changed", payload)?;

User Input
    ↓
Chat Service
    ↓
AI Provider Service (Vercel AI SDK)
    ↓
Provider-Specific SDK
    ↓
HTTP Request
    ↓
AI API (OpenAI/Anthropic/etc.)
    ↓
Streaming Response
    ↓
UI Update (real-time)

interface AIProvider {
  chat(messages: Message[]): AsyncIterator<string>;
  complete(prompt: string): Promise<string>;
  embed(text: string): Promise<number[]>;
}

1. User types message
   ↓
2. ChatInput component captures input
   ↓
3. ChatService.sendMessage()
   ↓
4. Save message to DB
   ↓
5. Call AI provider with context
   ↓
6. Stream response chunks
   ↓
7. Update UI in real-time
   ↓
8. Save AI response to DB
   ↓
9. Tool execution (if needed)
   ↓
10. Update conversation state

1. User requests file operation
   ↓
2. FileService validates request
   ↓
3. Check permissions
   ↓
4. Invoke Tauri command
   ↓
5. Rust executes file operation
   ↓
6. Return result via IPC
   ↓
7. Update file tree UI
   ↓
8. Emit file-changed event
   ↓
9. Update dependent components

// Update UI immediately
setMessages([...messages, newMessage]);

// Then persist to database
await db.saveMessage(newMessage);

// Rollback on error
if (error) {
  setMessages(messages);
}

// Load data as needed
const conversations = useLazyQuery(
  () => db.getConversations(projectId),
  [projectId]
);

// Restrict file access to allowed directories
fn validate_path(path: &Path, allowed: &Path) -> Result<()> {
    if !path.starts_with(allowed) {
        return Err("Access denied");
    }
    Ok(())
}

// Keys encrypted before storage
const encrypted = await encrypt(apiKey, systemKey);
await db.saveEncryptedKey(encrypted);

// Tauri command permissions
#[tauri::command]
#[cfg(not(debug_assertions))]
async fn dangerous_operation() {
    // Only available in debug builds
}

{
  "csp": {
    "default-src": "'self'",
    "connect-src": [
      "'self'",
      "https://api.openai.com",
      "https://api.anthropic.com"
    ]
  }
}

// Lazy load routes
const ChatView = lazy(() => import('./pages/ChatView'));
const SettingsView = lazy(() => import('./pages/SettingsView'));

// Render only visible messages
<VirtualList
  items={messages}
  itemHeight={100}
  windowSize={10}
/>

// Prevent unnecessary re-renders
const processedMessages = useMemo(
  () => messages.map(process),
  [messages]
);

-- Index frequently queried columns
CREATE INDEX idx_messages_conversation
ON messages(conversation_id);

CREATE INDEX idx_messages_timestamp
ON messages(created_at DESC);

// Cache expensive computations
const cache = new Map();

function getProcessedContent(id: string) {
  if (cache.has(id)) {
    return cache.get(id);
  }
  const result = expensiveProcess(id);
  cache.set(id, result);
  return result;
}

TalkCody MCP Client
├── Server Discovery
│   ├── stdio servers
│   ├── SSE servers
│   └── HTTP servers
├── Protocol Handler
│   ├── Request/Response
│   ├── Streaming
│   └── Error handling
├── Tool Registry
│   ├── Tool discovery
│   ├── Schema validation
│   └── Execution
└── Resource Manager
    ├── Connection pooling
    ├── Timeout handling
    └── Retry logic

1. AI decides to use tool
   ↓
2. Tool registry validates request
   ↓
3. MCP client sends request to server
   ↓
4. Server executes tool
   ↓
5. Result returned to client
   ↓
6. Result sent to AI
   ↓
7. AI incorporates result in response

Plugin API
├── Hooks
│   ├── beforeSendMessage
│   ├── afterReceiveResponse
│   ├── onFileOpen
│   └── onToolExecute
├── UI Extensions
│   ├── Custom panels
│   ├── Context menus
│   └── Status bar items
└── Custom Tools
    ├── Tool registration
    ├── Execution hooks
    └── Result formatting

1. Vite starts dev server (port 5173)
2. TypeScript compiler watches files
3. Tauri watches Rust source
4. Hot reload on changes
5. DevTools enabled

1. TypeScript → JavaScript (tsc)
2. Vite bundles frontend → dist/
3. Rust compiles with optimizations
4. Tauri bundles application
5. Code signing (release)
6. Create installers (.dmg, .msi, etc.)

1. Version bump
2. Update changelog
3. Run full test suite
4. Build for all platforms
5. Code signing
6. Create GitHub release
7. Upload artifacts
8. Update documentation
9. Notify users