feat: add character avatars with upload and zoom functionality

- Add avatar upload with file picker dialog
- Display avatars in header, chat messages, and settings
- Implement clickable avatars with full-screen zoom modal
- Enable asset protocol for local file access in Tauri config
- Add tauri-plugin-dialog for native file selection
- Store avatars in ~/.config/claudia/avatars/
- Support PNG, JPG, JPEG, and WEBP formats
- Modal closes on overlay click or ESC key

src-tauri/Cargo.lock

@@ -56,6 +56,27 @@ version = "1.0.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a23eb6b1614318a8071c9b2521f36b424b2c83db5eb3a0fead4a6c0809af6e61"
 
+[[package]]
+name = "ashpd"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6cbdf310d77fd3aaee6ea2093db7011dc2d35d2eb3481e5607f1f8d942ed99df"
+dependencies = [
+ "enumflags2",
+ "futures-channel",
+ "futures-util",
+ "rand 0.9.2",
+ "raw-window-handle",
+ "serde",
+ "serde_repr",
+ "tokio",
+ "url",
+ "wayland-backend",
+ "wayland-client",
+ "wayland-protocols",
+ "zbus",
+]
+
 [[package]]
 name = "async-broadcast"
 version = "0.7.2"
@@ -747,6 +768,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "89a09f22a6c6069a18470eb92d2298acf25463f14256d24778e1230d789a2aec"
 dependencies = [
  "bitflags 2.9.4",
+ "block2 0.6.2",
+ "libc",
  "objc2 0.6.3",
 ]
 
@@ -761,6 +784,15 @@ dependencies = [
  "syn 2.0.106",
 ]
 
+[[package]]
+name = "dlib"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "330c60081dcc4c72131f8eb70510f1ac07223e5d4163db481a04a0befcffa412"
+dependencies = [
+ "libloading",
+]
+
 [[package]]
 name = "dlopen2"
 version = "0.8.0"
@@ -784,6 +816,12 @@ dependencies = [
  "syn 2.0.106",
 ]
 
+[[package]]
+name = "downcast-rs"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75b325c5dbd37f80359721ad39aca5a29fb04c89279657cffdda8736d0c0b9d2"
+
 [[package]]
 name = "dpi"
 version = "0.1.2"
@@ -1541,6 +1579,12 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "http-range"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "21dec9db110f5f872ed9699c3ecf50cf16f423502706ba5c72462e28d3157573"
+
 [[package]]
 name = "httparse"
 version = "1.10.1"
@@ -2838,7 +2882,7 @@ checksum = "740ebea15c5d1428f910cd1a5f52cebf8d25006245ed8ade92702f4943d91e07"
 dependencies = [
  "base64 0.22.1",
  "indexmap 2.11.4",
- "quick-xml",
+ "quick-xml 0.38.3",
  "serde",
  "time",
 ]
@@ -2968,6 +3012,15 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "quick-xml"
+version = "0.37.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "331e97a1af0bf59823e6eadffe373d7b27f485be8748f71471c662c1f269b7fb"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "quick-xml"
 version = "0.38.3"
@@ -3017,6 +3070,16 @@ dependencies = [
  "rand_core 0.6.4",
 ]
 
+[[package]]
+name = "rand"
+version = "0.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6db2770f06117d490610c7488547d543617b21bfa07796d7a12f6f1bd53850d1"
+dependencies = [
+ "rand_chacha 0.9.0",
+ "rand_core 0.9.3",
+]
+
 [[package]]
 name = "rand_chacha"
 version = "0.2.2"
@@ -3037,6 +3100,16 @@ dependencies = [
  "rand_core 0.6.4",
 ]
 
+[[package]]
+name = "rand_chacha"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3022b5f1df60f26e1ffddd6c66e8aa15de382ae63b3a0c1bfc0e4d3e3f325cb"
+dependencies = [
+ "ppv-lite86",
+ "rand_core 0.9.3",
+]
+
 [[package]]
 name = "rand_core"
 version = "0.5.1"
@@ -3055,6 +3128,15 @@ dependencies = [
  "getrandom 0.2.16",
 ]
 
+[[package]]
+name = "rand_core"
+version = "0.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "99d9a13982dcf210057a8a78572b2217b667c3beacbf3a0d8b454f6f82837d38"
+dependencies = [
+ "getrandom 0.3.3",
+]
+
 [[package]]
 name = "rand_hc"
 version = "0.2.0"
@@ -3191,6 +3273,31 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "rfd"
+version = "0.15.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef2bee61e6cffa4635c72d7d81a84294e28f0930db0ddcb0f66d10244674ebed"
+dependencies = [
+ "ashpd",
+ "block2 0.6.2",
+ "dispatch2",
+ "glib-sys",
+ "gobject-sys",
+ "gtk-sys",
+ "js-sys",
+ "log",
+ "objc2 0.6.3",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation 0.3.2",
+ "raw-window-handle",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "windows-sys 0.59.0",
+]
+
 [[package]]
 name = "ring"
 version = "0.17.14"
@@ -3347,6 +3454,12 @@ dependencies = [
  "syn 2.0.106",
 ]
 
+[[package]]
+name = "scoped-tls"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e1cf6437eb19a8f4a6cc0f7dca544973b0b78843adbfeb3683d1a94a0024a294"
+
 [[package]]
 name = "scopeguard"
 version = "1.2.0"
@@ -3898,6 +4011,7 @@ dependencies = [
  "gtk",
  "heck 0.5.0",
  "http",
+ "http-range",
  "jni",
  "libc",
  "log",
@@ -3944,6 +4058,7 @@ dependencies = [
  "serde_json",
  "tauri",
  "tauri-build",
+ "tauri-plugin-dialog",
  "tauri-plugin-opener",
  "tokio",
  "uuid",
@@ -4029,6 +4144,46 @@ dependencies = [
  "walkdir",
 ]
 
+[[package]]
+name = "tauri-plugin-dialog"
+version = "2.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0beee42a4002bc695550599b011728d9dfabf82f767f134754ed6655e434824e"
+dependencies = [
+ "log",
+ "raw-window-handle",
+ "rfd",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "tauri-plugin-fs",
+ "thiserror 2.0.17",
+ "url",
+]
+
+[[package]]
+name = "tauri-plugin-fs"
+version = "2.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "315784ec4be45e90a987687bae7235e6be3d6e9e350d2b75c16b8a4bf22c1db7"
+dependencies = [
+ "anyhow",
+ "dunce",
+ "glob",
+ "percent-encoding",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "tauri",
+ "tauri-plugin",
+ "tauri-utils",
+ "thiserror 2.0.17",
+ "toml 0.9.8",
+ "url",
+]
+
 [[package]]
 name = "tauri-plugin-opener"
 version = "2.5.0"
@@ -4273,6 +4428,7 @@ dependencies = [
  "slab",
  "socket2",
  "tokio-macros",
+ "tracing",
  "windows-sys 0.59.0",
 ]
 
@@ -4822,6 +4978,66 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "wayland-backend"
+version = "0.3.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "673a33c33048a5ade91a6b139580fa174e19fb0d23f396dca9fa15f2e1e49b35"
+dependencies = [
+ "cc",
+ "downcast-rs",
+ "rustix",
+ "scoped-tls",
+ "smallvec",
+ "wayland-sys",
+]
+
+[[package]]
+name = "wayland-client"
+version = "0.31.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c66a47e840dc20793f2264eb4b3e4ecb4b75d91c0dd4af04b456128e0bdd449d"
+dependencies = [
+ "bitflags 2.9.4",
+ "rustix",
+ "wayland-backend",
+ "wayland-scanner",
+]
+
+[[package]]
+name = "wayland-protocols"
+version = "0.32.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "efa790ed75fbfd71283bd2521a1cfdc022aabcc28bdcff00851f9e4ae88d9901"
+dependencies = [
+ "bitflags 2.9.4",
+ "wayland-backend",
+ "wayland-client",
+ "wayland-scanner",
+]
+
+[[package]]
+name = "wayland-scanner"
+version = "0.31.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "54cb1e9dc49da91950bdfd8b848c49330536d9d1fb03d4bfec8cae50caa50ae3"
+dependencies = [
+ "proc-macro2",
+ "quick-xml 0.37.5",
+ "quote",
+]
+
+[[package]]
+name = "wayland-sys"
+version = "0.31.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34949b42822155826b41db8e5d0c1be3a2bd296c747577a43a3e6daefc296142"
+dependencies = [
+ "dlib",
+ "log",
+ "pkg-config",
+]
+
 [[package]]
 name = "web-sys"
 version = "0.3.81"
@@ -5511,6 +5727,7 @@ dependencies = [
  "ordered-stream",
  "serde",
  "serde_repr",
+ "tokio",
  "tracing",
  "uds_windows",
  "windows-sys 0.60.2",
@@ -5636,6 +5853,7 @@ dependencies = [
  "endi",
  "enumflags2",
  "serde",
+ "url",
  "winnow 0.7.13",
  "zvariant_derive",
  "zvariant_utils",

src-tauri/Cargo.toml

@@ -18,8 +18,9 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2", features = ["protocol-asset"] }
 tauri-plugin-opener = "2"
+tauri-plugin-dialog = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 reqwest = { version = "0.12", features = ["json", "stream"] }

src-tauri/src/lib.rs

@@ -113,6 +113,15 @@ fn get_character_history_path(character_id: &str) -> PathBuf {
     PathBuf::from(home).join(format!(".config/claudia/history_{}.json", character_id))
 }
 
+fn get_avatars_dir() -> PathBuf {
+    let home = std::env::var("HOME").unwrap_or_else(|_| "/tmp".to_string());
+    PathBuf::from(home).join(".config/claudia/avatars")
+}
+
+fn get_avatar_path(filename: &str) -> PathBuf {
+    get_avatars_dir().join(filename)
+}
+
 fn load_config() -> Option<ApiConfig> {
     let path = get_config_path();
     if let Ok(contents) = fs::read_to_string(path) {
@@ -217,15 +226,73 @@ fn update_character(
     system_prompt: String,
     greeting: Option<String>,
     personality: Option<String>,
+    avatar_path: Option<String>,
 ) -> Result<(), String> {
     let mut character = get_active_character();
     character.name = name;
     character.system_prompt = system_prompt;
     character.greeting = greeting;
     character.personality = personality;
+    character.avatar_path = avatar_path;
     save_character(&character)
 }
 
+#[tauri::command]
+fn upload_avatar(source_path: String, character_id: String) -> Result<String, String> {
+    // Create avatars directory if it doesn't exist
+    let avatars_dir = get_avatars_dir();
+    fs::create_dir_all(&avatars_dir).map_err(|e| e.to_string())?;
+
+    // Get file extension
+    let source = PathBuf::from(&source_path);
+    let extension = source
+        .extension()
+        .and_then(|s| s.to_str())
+        .ok_or_else(|| "Invalid file extension".to_string())?;
+
+    // Create unique filename: character_id + extension
+    let filename = format!("{}.{}", character_id, extension);
+    let dest_path = get_avatar_path(&filename);
+
+    // Copy file
+    fs::copy(&source, &dest_path).map_err(|e| format!("Failed to copy file: {}", e))?;
+
+    Ok(filename)
+}
+
+#[tauri::command]
+async fn select_and_upload_avatar(app_handle: tauri::AppHandle, character_id: String) -> Result<String, String> {
+    use tauri_plugin_dialog::DialogExt;
+
+    // Open file dialog
+    let file_path = app_handle
+        .dialog()
+        .file()
+        .add_filter("Images", &["png", "jpg", "jpeg", "webp"])
+        .blocking_pick_file();
+
+    if let Some(path) = file_path {
+        // Upload the selected file
+        let path_str = path.as_path()
+            .ok_or_else(|| "Could not get file path".to_string())?
+            .to_string_lossy()
+            .to_string();
+        upload_avatar(path_str, character_id)
+    } else {
+        Err("No file selected".to_string())
+    }
+}
+
+#[tauri::command]
+fn get_avatar_full_path(avatar_filename: String) -> Result<String, String> {
+    let path = get_avatar_path(&avatar_filename);
+    if path.exists() {
+        Ok(path.to_string_lossy().to_string())
+    } else {
+        Err("Avatar file not found".to_string())
+    }
+}
+
 #[tauri::command]
 async fn validate_api(base_url: String, api_key: String) -> Result<Vec<String>, String> {
     let client = reqwest::Client::new();
@@ -485,6 +552,17 @@ fn delete_character(character_id: String) -> Result<(), String> {
         return Err("Cannot delete the default character.".to_string());
     }
 
+    // Get character to check for avatar
+    if let Some(character) = load_character(&character_id) {
+        // Remove avatar if it exists
+        if let Some(avatar_filename) = character.avatar_path {
+            let avatar_path = get_avatar_path(&avatar_filename);
+            if avatar_path.exists() {
+                fs::remove_file(avatar_path).ok();
+            }
+        }
+    }
+
     // Remove character file
     let path = get_character_path(&character_id);
     if path.exists() {
@@ -543,6 +621,7 @@ fn set_active_character(character_id: String) -> Result<(), String> {
 pub fn run() {
     tauri::Builder::default()
         .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_dialog::init())
         .invoke_handler(tauri::generate_handler![
             chat,
             chat_stream,
@@ -553,6 +632,9 @@ pub fn run() {
             clear_chat_history,
             get_character,
             update_character,
+            upload_avatar,
+            select_and_upload_avatar,
+            get_avatar_full_path,
             list_characters,
             create_character,
             delete_character,

src-tauri/tauri.conf.json

@@ -24,7 +24,11 @@
       }
     ],
     "security": {
-      "csp": null
+      "csp": null,
+      "assetProtocol": {
+        "enable": true,
+        "scope": ["$HOME/.config/claudia/**"]
+      }
     }
   },
   "bundle": {

src/index.html

@@ -135,6 +135,27 @@
               />
             </div>
 
+            <div class="form-group">
+              <label for="character-avatar">Avatar (Optional)</label>
+              <div class="avatar-upload">
+                <div id="avatar-preview" class="avatar-preview">
+                  <div class="avatar-circle-large"></div>
+                </div>
+                <input
+                  type="file"
+                  id="character-avatar"
+                  accept="image/png,image/jpeg,image/jpg,image/webp"
+                  style="display: none;"
+                />
+                <button type="button" id="upload-avatar-btn" class="btn-secondary">
+                  Choose Image
+                </button>
+                <button type="button" id="remove-avatar-btn" class="btn-secondary" style="display: none;">
+                  Remove
+                </button>
+              </div>
+            </div>
+
             <div class="form-group">
               <label for="character-system-prompt">System Prompt</label>
               <textarea
@@ -193,5 +214,13 @@
         </div>
       </footer>
     </div>
+
+    <!-- Avatar zoom modal -->
+    <div id="avatar-modal" class="avatar-modal" style="display: none;">
+      <div class="avatar-modal-overlay"></div>
+      <div class="avatar-modal-content">
+        <img id="avatar-modal-img" src="" alt="Avatar" />
+      </div>
+    </div>
   </body>
 </html>

src/main.js

@@ -12,6 +12,66 @@ let characterHeaderName;
 let newCharacterBtn;
 
 let currentCharacter = null;
+let pendingAvatarPath = null;
+
+// Helper function to get avatar URL
+async function getAvatarUrl(avatarFilename) {
+  if (!avatarFilename) return null;
+  try {
+    const fullPath = await invoke('get_avatar_full_path', { avatarFilename });
+    console.log('Avatar full path:', fullPath);
+
+    // Try to use convertFileSrc if available
+    if (window.__TAURI__ && window.__TAURI__.core && window.__TAURI__.core.convertFileSrc) {
+      const url = window.__TAURI__.core.convertFileSrc(fullPath);
+      console.log('Converted URL:', url);
+      return url;
+    } else {
+      // Fallback to using the path directly with proper protocol
+      const url = `asset://localhost/${fullPath}`;
+      console.log('Using asset protocol URL:', url);
+      return url;
+    }
+  } catch (error) {
+    console.error('Failed to get avatar URL for', avatarFilename, ':', error);
+    return null;
+  }
+}
+
+// Show avatar in modal
+function showAvatarModal(avatarUrl) {
+  const modal = document.getElementById('avatar-modal');
+  const modalImg = document.getElementById('avatar-modal-img');
+
+  modalImg.src = avatarUrl;
+  modal.style.display = 'flex';
+
+  // Fade in animation
+  modal.style.opacity = '0';
+  setTimeout(() => {
+    modal.style.opacity = '1';
+    modal.style.transition = 'opacity 0.2s ease';
+  }, 10);
+}
+
+// Hide avatar modal
+function hideAvatarModal() {
+  const modal = document.getElementById('avatar-modal');
+  modal.style.opacity = '0';
+  setTimeout(() => {
+    modal.style.display = 'none';
+  }, 200);
+}
+
+// Make avatar clickable
+function makeAvatarClickable(avatarElement, avatarUrl) {
+  if (!avatarUrl) return;
+
+  avatarElement.addEventListener('click', (e) => {
+    e.stopPropagation();
+    showAvatarModal(avatarUrl);
+  });
+}
 
 // Auto-resize textarea
 function autoResize(textarea) {
@@ -26,7 +86,16 @@ function addMessage(content, isUser = false) {
 
   const avatar = document.createElement('div');
   avatar.className = 'avatar-circle';
-  // TODO: Set avatar image
+
+  // Set avatar image for assistant messages
+  if (!isUser && currentCharacter && currentCharacter.avatar_path) {
+    getAvatarUrl(currentCharacter.avatar_path).then(url => {
+      if (url) {
+        avatar.style.backgroundImage = `url('${url}')`;
+        makeAvatarClickable(avatar, url);
+      }
+    });
+  }
 
   const contentDiv = document.createElement('div');
   contentDiv.className = 'message-content';
@@ -187,6 +256,16 @@ async function handleSubmit(e) {
     const avatar = document.createElement('div');
     avatar.className = 'avatar-circle';
 
+    // Set avatar image for streaming messages
+    if (currentCharacter && currentCharacter.avatar_path) {
+      getAvatarUrl(currentCharacter.avatar_path).then(url => {
+        if (url) {
+          avatar.style.backgroundImage = `url('${url}')`;
+          makeAvatarClickable(avatar, url);
+        }
+      });
+    }
+
     const contentDiv = document.createElement('div');
     contentDiv.className = 'message-content';
 
@@ -384,6 +463,55 @@ async function handleSaveSettings(e) {
   }
 }
 
+// Avatar upload handling
+async function handleAvatarUpload() {
+  const characterMsg = document.getElementById('character-message');
+
+  try {
+    const characterId = document.getElementById('character-settings-select').value;
+    const avatarFilename = await invoke('select_and_upload_avatar', {
+      characterId: characterId
+    });
+
+    pendingAvatarPath = avatarFilename;
+
+    // Update preview
+    const avatarPreview = document.querySelector('.avatar-circle-large');
+    const avatarUrl = await getAvatarUrl(avatarFilename);
+    if (avatarUrl) {
+      avatarPreview.style.backgroundImage = `url('${avatarUrl}')`;
+    }
+    document.getElementById('remove-avatar-btn').style.display = 'inline-block';
+
+    characterMsg.textContent = 'Avatar uploaded. Click "Save Character" to apply.';
+    characterMsg.className = 'validation-message success';
+    setTimeout(() => {
+      characterMsg.style.display = 'none';
+    }, 3000);
+  } catch (error) {
+    console.error('Avatar upload error:', error);
+    // Don't show error if user just cancelled the dialog
+    if (error && !error.toString().includes('No file selected')) {
+      characterMsg.textContent = `Failed to upload avatar: ${error}`;
+      characterMsg.className = 'validation-message error';
+    }
+  }
+}
+
+function handleAvatarRemove() {
+  pendingAvatarPath = null;
+  const avatarPreview = document.querySelector('.avatar-circle-large');
+  avatarPreview.style.backgroundImage = '';
+  document.getElementById('remove-avatar-btn').style.display = 'none';
+
+  const characterMsg = document.getElementById('character-message');
+  characterMsg.textContent = 'Avatar removed. Click "Save Character" to apply.';
+  characterMsg.className = 'validation-message success';
+  setTimeout(() => {
+    characterMsg.style.display = 'none';
+  }, 3000);
+}
+
 // App controls
 function setupAppControls() {
   document.getElementById('settings-btn').addEventListener('click', showSettings);
@@ -397,6 +525,8 @@ function setupAppControls() {
     await invoke('set_active_character', { characterId });
     await loadCharacterSettings();
   });
+  document.getElementById('upload-avatar-btn').addEventListener('click', handleAvatarUpload);
+  document.getElementById('remove-avatar-btn').addEventListener('click', handleAvatarRemove);
 }
 
 // Keyboard shortcuts
@@ -433,6 +563,19 @@ async function loadCharacters() {
     characterHeaderName.textContent = activeCharacter.name;
     currentCharacter = activeCharacter;
 
+    // Update header avatar
+    const headerAvatar = document.querySelector('.avatar-circle');
+    if (headerAvatar && activeCharacter.avatar_path) {
+      getAvatarUrl(activeCharacter.avatar_path).then(url => {
+        if (url) {
+          headerAvatar.style.backgroundImage = `url('${url}')`;
+          makeAvatarClickable(headerAvatar, url);
+        }
+      });
+    } else if (headerAvatar) {
+      headerAvatar.style.backgroundImage = '';
+    }
+
     await loadChatHistory();
   } catch (error) {
     console.error('Failed to load characters:', error);
@@ -552,6 +695,24 @@ async function loadCharacterSettings() {
     document.getElementById('character-system-prompt').value = character.system_prompt;
     document.getElementById('character-greeting').value = character.greeting || '';
     document.getElementById('character-personality').value = character.personality || '';
+
+    // Load avatar preview
+    const avatarPreview = document.querySelector('.avatar-circle-large');
+    const removeAvatarBtn = document.getElementById('remove-avatar-btn');
+    if (character.avatar_path) {
+      getAvatarUrl(character.avatar_path).then(url => {
+        if (url) {
+          avatarPreview.style.backgroundImage = `url('${url}')`;
+          makeAvatarClickable(avatarPreview, url);
+        }
+      });
+      removeAvatarBtn.style.display = 'inline-block';
+      pendingAvatarPath = character.avatar_path;
+    } else {
+      avatarPreview.style.backgroundImage = '';
+      removeAvatarBtn.style.display = 'none';
+      pendingAvatarPath = null;
+    }
   } catch (error) {
     console.error('Failed to load character:', error);
   }
@@ -582,7 +743,8 @@ async function handleSaveCharacter(e) {
       name,
       systemPrompt,
       greeting,
-      personality
+      personality,
+      avatarPath: pendingAvatarPath
     });
     characterMsg.textContent = 'Character saved successfully';
     characterMsg.className = 'validation-message success';
@@ -654,6 +816,19 @@ window.addEventListener('DOMContentLoaded', () => {
   setupKeyboardShortcuts();
   setupTabs();
 
+  // Avatar modal close handlers
+  const avatarModal = document.getElementById('avatar-modal');
+  const avatarModalOverlay = document.querySelector('.avatar-modal-overlay');
+
+  avatarModalOverlay.addEventListener('click', hideAvatarModal);
+
+  // ESC key to close modal
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && avatarModal.style.display !== 'none') {
+      hideAvatarModal();
+    }
+  });
+
   messageInput.focus();
   setStatus('Ready');
 

src/styles.css

@@ -84,6 +84,28 @@ body {
   border-radius: 50%;
   background: var(--bg-tertiary);
   border: 1px solid var(--border);
+  background-size: cover;
+  background-position: center;
+}
+
+.avatar-circle-large {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: var(--bg-tertiary);
+  border: 2px solid var(--border);
+  background-size: cover;
+  background-position: center;
+}
+
+.avatar-upload {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar-preview {
+  flex-shrink: 0;
 }
 
 #character-header-name {
@@ -730,6 +752,65 @@ body {
   border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
+/* Avatar Modal */
+.avatar-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  cursor: pointer;
+}
+
+.avatar-modal-content {
+  position: relative;
+  z-index: 1;
+  max-width: 90vw;
+  max-height: 90vh;
+  pointer-events: none;
+}
+
+.avatar-modal-content img {
+  max-width: 100%;
+  max-height: 90vh;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  object-fit: contain;
+}
+
+/* Make avatars clickable */
+.avatar-circle,
+.avatar-circle-large {
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.avatar-circle:hover,
+.avatar-circle-large:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+.avatar-circle:active,
+.avatar-circle-large:active {
+  transform: scale(0.95);
+}
+
 /* Responsive */
 @media (max-width: 600px) {
   .messages-list {