From 8a19f35922c57b6b8607b2f43d94178209876f9b Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Sun, 25 Jan 2026 20:06:03 -0800
Subject: [PATCH] feat: add user profile with avatar, bio, and lifetime stats

- Add profile fields to HikariConfig (name, avatar path, bio)
- Create ProfilePanel component with trans-pride themed styling
- Add profile button to StatusBar for easy access
- Display lifetime stats (messages, tokens, code blocks, files, cost)
- Show achievement completion progress bar
- Support file picker for avatar image selection
- Remove global stats from StatsDisplay (now in Profile)

Co-Authored-By: Hikari <hikari@nhcarrigan.com>
---
 src-tauri/src/config.rs                 |  19 +
 src/lib/components/ConfigSidebar.svelte |   3 +
 src/lib/components/ProfilePanel.svelte  | 517 ++++++++++++++++++++++++
 src/lib/components/StatsDisplay.svelte  |   9 -
 src/lib/components/StatusBar.svelte     |  23 ++
 src/lib/stores/config.ts                |   6 +
 6 files changed, 568 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/ProfilePanel.svelte

diff --git a/src-tauri/src/config.rs b/src-tauri/src/config.rs
index cc626e0..fa73cbe 100644
--- a/src-tauri/src/config.rs
+++ b/src-tauri/src/config.rs
@@ -82,6 +82,16 @@ pub struct HikariConfig {
 
     #[serde(default)]
     pub compact_mode: bool,
+
+    // Profile fields
+    #[serde(default)]
+    pub profile_name: Option<String>,
+
+    #[serde(default)]
+    pub profile_avatar_path: Option<String>,
+
+    #[serde(default)]
+    pub profile_bio: Option<String>,
 }
 
 impl Default for HikariConfig {
@@ -105,6 +115,9 @@ impl Default for HikariConfig {
             streamer_mode: false,
             streamer_hide_paths: false,
             compact_mode: false,
+            profile_name: None,
+            profile_avatar_path: None,
+            profile_bio: None,
         }
     }
 }
@@ -162,6 +175,9 @@ mod tests {
         assert!(!config.streamer_mode);
         assert!(!config.streamer_hide_paths);
         assert!(!config.compact_mode);
+        assert!(config.profile_name.is_none());
+        assert!(config.profile_avatar_path.is_none());
+        assert!(config.profile_bio.is_none());
     }
 
     #[test]
@@ -185,6 +201,9 @@ mod tests {
             streamer_mode: false,
             streamer_hide_paths: false,
             compact_mode: false,
+            profile_name: Some("Test User".to_string()),
+            profile_avatar_path: None,
+            profile_bio: Some("A test bio".to_string()),
         };
 
         let json = serde_json::to_string(&config).unwrap();
diff --git a/src/lib/components/ConfigSidebar.svelte b/src/lib/components/ConfigSidebar.svelte
index de5d69d..3dd3673 100644
--- a/src/lib/components/ConfigSidebar.svelte
+++ b/src/lib/components/ConfigSidebar.svelte
@@ -30,6 +30,9 @@
     streamer_mode: false,
     streamer_hide_paths: false,
     compact_mode: false,
+    profile_name: null,
+    profile_avatar_path: null,
+    profile_bio: null,
   });
 
   let isOpen = $state(false);
diff --git a/src/lib/components/ProfilePanel.svelte b/src/lib/components/ProfilePanel.svelte
new file mode 100644
index 0000000..ec0de05
--- /dev/null
+++ b/src/lib/components/ProfilePanel.svelte
@@ -0,0 +1,517 @@
+<script lang="ts">
+  import { configStore, type HikariConfig } from "$lib/stores/config";
+  import { formattedStats } from "$lib/stores/stats";
+  import { achievementsStore } from "$lib/stores/achievements";
+  import { open } from "@tauri-apps/plugin-dialog";
+  import { convertFileSrc } from "@tauri-apps/api/core";
+
+  export let onClose: () => void;
+
+  let config: HikariConfig;
+  configStore.config.subscribe((c) => (config = c));
+
+  let editingName = false;
+  let editingBio = false;
+  let nameInput = config.profile_name || "";
+  let bioInput = config.profile_bio || "";
+
+  $: unlockedCount = Object.values($achievementsStore.achievements).filter((a) => a.unlocked).length;
+  $: totalAchievements = Object.values($achievementsStore.achievements).length;
+  $: achievementPercentage = totalAchievements > 0
+    ? Math.round((unlockedCount / totalAchievements) * 100)
+    : 0;
+
+  async function selectAvatar() {
+    try {
+      const selected = await open({
+        multiple: false,
+        filters: [
+          {
+            name: "Images",
+            extensions: ["png", "jpg", "jpeg", "gif", "webp"],
+          },
+        ],
+      });
+
+      if (selected && typeof selected === "string") {
+        await configStore.updateConfig({ profile_avatar_path: selected });
+      }
+    } catch (error) {
+      console.error("Failed to select avatar:", error);
+    }
+  }
+
+  async function removeAvatar() {
+    await configStore.updateConfig({ profile_avatar_path: null });
+  }
+
+  async function saveName() {
+    await configStore.updateConfig({ profile_name: nameInput || null });
+    editingName = false;
+  }
+
+  async function saveBio() {
+    await configStore.updateConfig({ profile_bio: bioInput || null });
+    editingBio = false;
+  }
+
+  function getAvatarSrc(path: string | null): string | null {
+    if (!path) return null;
+    return convertFileSrc(path);
+  }
+</script>
+
+<div class="profile-overlay" role="dialog" aria-modal="true">
+  <div class="profile-panel">
+    <div class="profile-header">
+      <h2>Profile</h2>
+      <button class="close-btn" on:click={onClose} aria-label="Close profile">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="profile-content">
+      <!-- Avatar Section -->
+      <div class="avatar-section">
+        <div class="avatar-container" on:click={selectAvatar} role="button" tabindex="0" on:keydown={(e) => e.key === 'Enter' && selectAvatar()}>
+          {#if config.profile_avatar_path}
+            <img src={getAvatarSrc(config.profile_avatar_path)} alt="Profile avatar" class="avatar-image" />
+            <div class="avatar-overlay">
+              <span>Change</span>
+            </div>
+          {:else}
+            <div class="avatar-placeholder">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+              <span>Add Photo</span>
+            </div>
+          {/if}
+        </div>
+        {#if config.profile_avatar_path}
+          <button class="remove-avatar-btn" on:click={removeAvatar}>Remove Photo</button>
+        {/if}
+      </div>
+
+      <!-- Name Section -->
+      <div class="name-section">
+        {#if editingName}
+          <input
+            type="text"
+            bind:value={nameInput}
+            placeholder="Enter your name"
+            class="name-input"
+            on:keydown={(e) => e.key === 'Enter' && saveName()}
+            on:blur={saveName}
+          />
+        {:else}
+          <button class="name-display" on:click={() => { editingName = true; nameInput = config.profile_name || ""; }}>
+            <span class="name-text">{config.profile_name || "Click to add name"}</span>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+            </svg>
+          </button>
+        {/if}
+      </div>
+
+      <!-- Bio Section -->
+      <div class="bio-section">
+        <h3>Bio</h3>
+        {#if editingBio}
+          <textarea
+            bind:value={bioInput}
+            placeholder="Tell us about yourself..."
+            class="bio-input"
+            rows="3"
+            on:blur={saveBio}
+          ></textarea>
+          <button class="save-bio-btn btn-trans-gradient" on:click={saveBio}>Save</button>
+        {:else}
+          <button class="bio-display" on:click={() => { editingBio = true; bioInput = config.profile_bio || ""; }}>
+            <span class="bio-text">{config.profile_bio || "Click to add a bio..."}</span>
+          </button>
+        {/if}
+      </div>
+
+      <!-- Stats Section -->
+      <div class="stats-section">
+        <h3>Lifetime Stats</h3>
+        <div class="stats-grid">
+          <div class="stat-card">
+            <span class="stat-value">{$formattedStats.messagesTotal}</span>
+            <span class="stat-label">Messages</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-value">{$formattedStats.totalTokens}</span>
+            <span class="stat-label">Tokens</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-value">{$formattedStats.codeBlocksTotal}</span>
+            <span class="stat-label">Code Blocks</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-value">{$formattedStats.filesEditedTotal}</span>
+            <span class="stat-label">Files Edited</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-value">{$formattedStats.filesCreatedTotal}</span>
+            <span class="stat-label">Files Created</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-value">{$formattedStats.totalCost}</span>
+            <span class="stat-label">Total Cost</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Achievements Section -->
+      <div class="achievements-section">
+        <h3>Achievements</h3>
+        <div class="achievement-progress">
+          <div class="progress-bar">
+            <div class="progress-fill" style="width: {achievementPercentage}%"></div>
+          </div>
+          <span class="progress-text">{unlockedCount} / {totalAchievements} ({achievementPercentage}%)</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .profile-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    backdrop-filter: blur(4px);
+  }
+
+  .profile-panel {
+    background: var(--bg-secondary);
+    border-radius: 16px;
+    width: 90%;
+    max-width: 480px;
+    max-height: 85vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--border-color);
+  }
+
+  .profile-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    background: var(--bg-secondary);
+    z-index: 1;
+  }
+
+  .profile-header h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    transition: all 0.2s;
+  }
+
+  .close-btn:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .profile-content {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  /* Avatar */
+  .avatar-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .avatar-container {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+    background: var(--bg-tertiary);
+    border: 3px solid var(--trans-pink);
+    box-shadow: 0 0 20px rgba(245, 169, 184, 0.3);
+    transition: all 0.3s;
+  }
+
+  .avatar-container:hover {
+    border-color: var(--trans-blue);
+    box-shadow: 0 0 30px rgba(91, 206, 250, 0.4);
+    transform: scale(1.02);
+  }
+
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatar-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s;
+    color: white;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .avatar-container:hover .avatar-overlay {
+    opacity: 1;
+  }
+
+  .avatar-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: var(--text-secondary);
+  }
+
+  .avatar-placeholder span {
+    font-size: 12px;
+  }
+
+  .remove-avatar-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 12px;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .remove-avatar-btn:hover {
+    color: var(--trans-pink);
+  }
+
+  /* Name */
+  .name-section {
+    text-align: center;
+  }
+
+  .name-display {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 0.2s;
+  }
+
+  .name-display:hover {
+    background: var(--bg-tertiary);
+  }
+
+  .name-display svg {
+    color: var(--text-secondary);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  .name-display:hover svg {
+    opacity: 1;
+  }
+
+  .name-text {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .name-input {
+    width: 100%;
+    max-width: 300px;
+    padding: 12px 16px;
+    font-size: 24px;
+    font-weight: 600;
+    text-align: center;
+    background: var(--bg-tertiary);
+    border: 2px solid var(--trans-pink);
+    border-radius: 8px;
+    color: var(--text-primary);
+    outline: none;
+  }
+
+  .name-input:focus {
+    border-color: var(--trans-blue);
+    box-shadow: 0 0 10px rgba(91, 206, 250, 0.3);
+  }
+
+  /* Bio */
+  .bio-section h3,
+  .stats-section h3,
+  .achievements-section h3 {
+    margin: 0 0 12px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .bio-display {
+    width: 100%;
+    text-align: left;
+    background: var(--bg-tertiary);
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .bio-display:hover {
+    border-color: var(--border-color);
+  }
+
+  .bio-text {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .bio-input {
+    width: 100%;
+    padding: 12px;
+    font-size: 14px;
+    background: var(--bg-tertiary);
+    border: 2px solid var(--trans-pink);
+    border-radius: 8px;
+    color: var(--text-primary);
+    resize: none;
+    outline: none;
+    font-family: inherit;
+  }
+
+  .bio-input:focus {
+    border-color: var(--trans-blue);
+    box-shadow: 0 0 10px rgba(91, 206, 250, 0.3);
+  }
+
+  .save-bio-btn {
+    margin-top: 8px;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  /* Stats */
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  }
+
+  .stat-card {
+    background: var(--bg-tertiary);
+    border-radius: 12px;
+    padding: 16px 12px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    border: 1px solid var(--border-color);
+  }
+
+  .stat-value {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--text-primary);
+    background: linear-gradient(135deg, var(--trans-blue), var(--trans-pink));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .stat-label {
+    font-size: 11px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  /* Achievements */
+  .achievement-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .progress-bar {
+    height: 12px;
+    background: var(--bg-tertiary);
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--trans-blue), var(--trans-pink), var(--trans-white), var(--trans-pink), var(--trans-blue));
+    background-size: 200% 100%;
+    animation: shimmer 3s linear infinite;
+    border-radius: 6px;
+    transition: width 0.5s ease;
+  }
+
+  @keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  .progress-text {
+    font-size: 14px;
+    color: var(--text-secondary);
+    text-align: center;
+  }
+</style>
diff --git a/src/lib/components/StatsDisplay.svelte b/src/lib/components/StatsDisplay.svelte
index 705433d..8590fc3 100644
--- a/src/lib/components/StatsDisplay.svelte
+++ b/src/lib/components/StatsDisplay.svelte
@@ -14,7 +14,6 @@
   <div class="stats-row">
     <span class="stat-label">Messages:</span>
     <span class="stat-value">{$formattedStats.messagesSession}</span>
-    <span class="stat-secondary">/ {$formattedStats.messagesTotal}</span>
   </div>
 
   <div class="stats-section">
@@ -32,11 +31,6 @@
       <span class="stat-label">Output:</span>
       <span class="stat-value">{$formattedStats.sessionOutputTokens}</span>
     </div>
-    <div class="stat-row stat-highlight">
-      <span class="stat-label">Total:</span>
-      <span class="stat-value">{$formattedStats.totalTokens}</span>
-      <span class="stat-cost">{$formattedStats.totalCost}</span>
-    </div>
   </div>
 
   <div class="stats-section">
@@ -44,17 +38,14 @@
     <div class="stat-row">
       <span class="stat-label">Code blocks:</span>
       <span class="stat-value">{$formattedStats.codeBlocksSession}</span>
-      <span class="stat-secondary">/ {$formattedStats.codeBlocksTotal}</span>
     </div>
     <div class="stat-row">
       <span class="stat-label">Files edited:</span>
       <span class="stat-value">{$formattedStats.filesEditedSession}</span>
-      <span class="stat-secondary">/ {$formattedStats.filesEditedTotal}</span>
     </div>
     <div class="stat-row">
       <span class="stat-label">Files created:</span>
       <span class="stat-value">{$formattedStats.filesCreatedSession}</span>
-      <span class="stat-secondary">/ {$formattedStats.filesCreatedTotal}</span>
     </div>
   </div>
 
diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
index 25d48d2..e109abe 100644
--- a/src/lib/components/StatusBar.svelte
+++ b/src/lib/components/StatusBar.svelte
@@ -22,6 +22,7 @@
   import { achievementProgress } from "$lib/stores/achievements";
   import SessionHistoryPanel from "./SessionHistoryPanel.svelte";
   import GitPanel from "./GitPanel.svelte";
+  import ProfilePanel from "./ProfilePanel.svelte";
 
   const DISCORD_URL = "https://chat.nhcarrigan.com";
   const DONATE_URL = "https://donate.nhcarrigan.com";
@@ -38,6 +39,7 @@
   let showKeyboardShortcuts = $state(false);
   let showSessionHistory = $state(false);
   let showGitPanel = $state(false);
+  let showProfile = $state(false);
   const progress = $derived($achievementProgress);
   let currentConfig: HikariConfig = $state({
     model: null,
@@ -58,6 +60,9 @@
     streamer_mode: false,
     streamer_hide_paths: false,
     compact_mode: false,
+    profile_name: null,
+    profile_avatar_path: null,
+    profile_bio: null,
   });
 
   let streamerModeActive = $state(false);
@@ -222,6 +227,20 @@
         title="Streamer mode active (Ctrl+Shift+S to toggle)"
       ></div>
     {/if}
+    <button
+      onclick={() => (showProfile = true)}
+      class="p-1 text-gray-500 icon-trans-hover"
+      title="Profile"
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+        />
+      </svg>
+    </button>
     <button
       onclick={onToggleCompact}
       class="p-1 text-gray-500 icon-trans-hover"
@@ -438,3 +457,7 @@
 {#if showGitPanel}
   <GitPanel isOpen={showGitPanel} onClose={() => (showGitPanel = false)} />
 {/if}
+
+{#if showProfile}
+  <ProfilePanel onClose={() => (showProfile = false)} />
+{/if}
diff --git a/src/lib/stores/config.ts b/src/lib/stores/config.ts
index d1842a1..ec0ed66 100644
--- a/src/lib/stores/config.ts
+++ b/src/lib/stores/config.ts
@@ -22,6 +22,9 @@ export interface HikariConfig {
   streamer_mode: boolean;
   streamer_hide_paths: boolean;
   compact_mode: boolean;
+  profile_name: string | null;
+  profile_avatar_path: string | null;
+  profile_bio: string | null;
 }
 
 const defaultConfig: HikariConfig = {
@@ -43,6 +46,9 @@ const defaultConfig: HikariConfig = {
   streamer_mode: false,
   streamer_hide_paths: false,
   compact_mode: false,
+  profile_name: null,
+  profile_avatar_path: null,
+  profile_bio: null,
 };
 
 function createConfigStore() {