feat: stats and achievements #45

Merged
naomi merged 6 commits from feat/stats into main 2026-01-19 20:51:53 -08:00
11 changed files with 1128 additions and 1003 deletions
Showing only changes of commit 27f69cb308 - Show all commits
@@ -1,23 +1,33 @@
<script lang="ts">
import { onMount } from 'svelte';
import { fade, fly } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
import { listen } from '@tauri-apps/api/event';
import type { AchievementUnlockedEvent } from '$lib/types/achievements';
import { onMount } from "svelte";
import { fade, fly } from "svelte/transition";
import { cubicOut } from "svelte/easing";
import { listen } from "@tauri-apps/api/event";
import type { AchievementUnlockedEvent } from "$lib/types/achievements";
let achievements = $state<AchievementUnlockedEvent[]>([]);
let currentAchievement = $state<AchievementUnlockedEvent | null>(null);
let showNotification = $state(false);
onMount(async () => {
const unlisten = await listen<AchievementUnlockedEvent>('achievement:unlocked', (event) => {
onMount(() => {
let unlisten: (() => void) | undefined;
const setupListener = async () => {
unlisten = await listen<AchievementUnlockedEvent>("achievement:unlocked", (event) => {
achievements.push(event.payload);
if (!showNotification) {
showNext();
}
});
};
return unlisten;
setupListener();
return () => {
if (unlisten) {
unlisten();
}
};
});
function showNext() {
@@ -42,19 +52,33 @@
function getRarityColor(rarity: string): string {
switch (rarity) {
case 'legendary': return 'from-yellow-400 to-orange-500';
case 'epic': return 'from-purple-400 to-pink-500';
case 'rare': return 'from-blue-400 to-indigo-500';
default: return 'from-green-400 to-emerald-500';
case "legendary":
return "from-yellow-400 to-orange-500";
case "epic":
return "from-purple-400 to-pink-500";
case "rare":
return "from-blue-400 to-indigo-500";
default:
return "from-green-400 to-emerald-500";
}
}
function getAchievementRarity(id: string): string {
// Determine rarity based on achievement ID
if (id === 'TokenMaster') return 'legendary';
if (['CodeMachine', 'Unstoppable'].includes(id)) return 'epic';
if (['BlossomingCoder', 'CodeWizard', 'MasterBuilder', 'EnduranceChamp', 'DeepDive', 'CreativeCoder'].includes(id)) return 'rare';
return 'common';
if (id === "TokenMaster") return "legendary";
if (["CodeMachine", "Unstoppable"].includes(id)) return "epic";
if (
[
"BlossomingCoder",
"CodeWizard",
"MasterBuilder",
"EnduranceChamp",
"DeepDive",
"CreativeCoder",
].includes(id)
)
return "rare";
return "common";
}
</script>
@@ -67,18 +91,27 @@
<!-- Backdrop with animated gradient border -->
<div class="relative p-[2px] rounded-lg overflow-hidden">
<!-- Animated gradient border -->
<div class="absolute inset-0 bg-gradient-to-r {getRarityColor(getAchievementRarity(currentAchievement.achievement.id))} animate-pulse"></div>
<div
class="absolute inset-0 bg-gradient-to-r {getRarityColor(
getAchievementRarity(currentAchievement.achievement.id)
)} animate-pulse"
></div>
<!-- Main notification content -->
<div class="relative bg-[var(--bg-primary)] rounded-lg p-4 shadow-2xl backdrop-blur-sm">
<button
onclick={dismiss}
onkeydown={(e) => e.key === 'Enter' && dismiss()}
onkeydown={(e) => e.key === "Enter" && dismiss()}
class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
aria-label="Dismiss notification"
>
<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="M6 18L18 6M6 6l12 12"></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
@@ -89,13 +122,21 @@
<!-- Sparkle animations -->
<div class="absolute -top-1 -right-1 text-yellow-400 animate-ping"></div>
<div class="absolute -bottom-1 -left-1 text-yellow-400 animate-ping animation-delay-200"></div>
<div class="absolute top-1/2 -right-2 text-yellow-400 animate-ping animation-delay-400"></div>
<div
class="absolute -bottom-1 -left-1 text-yellow-400 animate-ping animation-delay-200"
>
</div>
<div class="absolute top-1/2 -right-2 text-yellow-400 animate-ping animation-delay-400">
</div>
</div>
<!-- Text content -->
<div class="flex-1 min-w-0 pt-1">
<h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
<h3
class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide"
>
Achievement Unlocked!
</h3>
<p class="text-lg font-bold text-[var(--text-primary)] mt-1">
@@ -107,7 +148,11 @@
<!-- Rarity badge -->
<div class="mt-2 inline-flex items-center">
<span class="px-2 py-1 text-xs font-medium rounded-full bg-gradient-to-r {getRarityColor(getAchievementRarity(currentAchievement.achievement.id))} text-white capitalize">
<span
class="px-2 py-1 text-xs font-medium rounded-full bg-gradient-to-r {getRarityColor(
getAchievementRarity(currentAchievement.achievement.id)
)} text-white capitalize"
>
{getAchievementRarity(currentAchievement.achievement.id)}
</span>
</div>
@@ -116,10 +161,13 @@
<!-- Celebration confetti effect (CSS only) -->
<div class="absolute inset-0 pointer-events-none overflow-hidden rounded-lg">
{#each Array(10) as _, i}
{#each Array(10) as _ (_)}
<div
class="absolute w-2 h-2 bg-gradient-to-br {getRarityColor(getAchievementRarity(currentAchievement.achievement.id))} rounded-full animate-fall"
style="left: {Math.random() * 100}%; animation-delay: {Math.random() * 2}s; animation-duration: {2 + Math.random() * 2}s;"
class="absolute w-2 h-2 bg-gradient-to-br {getRarityColor(
getAchievementRarity(currentAchievement.achievement.id)
)} rounded-full animate-fall"
style="left: {Math.random() * 100}%; animation-delay: {Math.random() *
2}s; animation-duration: {2 + Math.random() * 2}s;"
></div>
{/each}
</div>
+79 -36
View File
@@ -1,19 +1,19 @@
<script lang="ts">
import { slide } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import { slide } from "svelte/transition";
import { quintOut } from "svelte/easing";
import {
achievementsStore,
achievementProgress,
achievementCategories,
} from '$lib/stores/achievements';
import type { Achievement } from '$lib/types/achievements';
} from "$lib/stores/achievements";
import type { Achievement } from "$lib/types/achievements";
interface Props {
isOpen: boolean;
onClose?: () => void;
}
const { isOpen = $bindable(false), onClose } = $props<Props>();
const { isOpen = $bindable(false), onClose }: Props = $props();
let selectedCategory = $state<string | null>(null);
const achievementsState = $derived($achievementsStore);
@@ -21,33 +21,45 @@
function getRarityColor(rarity: string): string {
switch (rarity) {
case 'legendary': return 'text-yellow-500 dark:text-yellow-400';
case 'epic': return 'text-purple-500 dark:text-purple-400';
case 'rare': return 'text-blue-500 dark:text-blue-400';
default: return 'text-green-500 dark:text-green-400';
case "legendary":
return "text-yellow-500 dark:text-yellow-400";
case "epic":
return "text-purple-500 dark:text-purple-400";
case "rare":
return "text-blue-500 dark:text-blue-400";
default:
return "text-green-500 dark:text-green-400";
}
}
function getRarityBg(rarity: string): string {
switch (rarity) {
case 'legendary': return 'bg-yellow-500/10';
case 'epic': return 'bg-purple-500/10';
case 'rare': return 'bg-blue-500/10';
default: return 'bg-green-500/10';
case "legendary":
return "bg-yellow-500/10";
case "epic":
return "bg-purple-500/10";
case "rare":
return "bg-blue-500/10";
default:
return "bg-green-500/10";
}
}
function formatDate(date: Date | undefined): string {
if (!date) return '';
return new Date(date).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
if (!date) return "";
return new Date(date).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
});
}
function getAchievementsForCategory(categoryIds: string[]): Achievement[] {
return categoryIds.map(id => achievementsState.achievements[id as keyof typeof achievementsState.achievements]).filter(Boolean);
return categoryIds
.map(
(id) => achievementsState.achievements[id as keyof typeof achievementsState.achievements]
)
.filter(Boolean);
}
</script>
@@ -56,7 +68,7 @@
<div
class="fixed inset-0 bg-black/50 z-40"
onclick={onClose}
onkeydown={(e) => e.key === 'Escape' && onClose()}
onkeydown={(e) => e.key === "Escape" && onClose?.()}
role="button"
tabindex="-1"
aria-label="Close achievements panel"
@@ -66,7 +78,7 @@
<div
class="fixed left-0 top-0 h-full w-96 bg-[var(--bg-primary)] border-r border-[var(--border-color)]
shadow-2xl z-50 flex flex-col"
transition:slide={{ duration: 300, easing: quintOut, axis: 'x' }}
transition:slide={{ duration: 300, easing: quintOut, axis: "x" }}
>
<!-- Header -->
<div class="p-6 border-b border-[var(--border-color)]">
@@ -74,18 +86,26 @@
<h2 class="text-2xl font-bold text-[var(--text-primary)]">Achievements</h2>
<button
onclick={onClose}
onkeydown={(e) => e.key === 'Enter' && onClose()}
onkeydown={(e) => e.key === "Enter" && onClose?.()}
class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
aria-label="Close achievements panel"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<!-- Overall progress -->
<div class="mt-4">
<div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
<div
class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-2"
>
<span>{progress.unlocked} / {progress.total} Unlocked</span>
<span>{progress.percentage}%</span>
</div>
@@ -100,14 +120,17 @@
<!-- Categories -->
<div class="flex-1 overflow-y-auto">
{#each achievementCategories as category}
{#each achievementCategories as category (category.name)}
{@const achievements = getAchievementsForCategory(category.ids)}
{@const unlockedCount = achievements.filter(a => a.unlocked).length}
{@const unlockedCount = achievements.filter((a) => a.unlocked).length}
<div class="border-b border-[var(--border-color)]">
<button
onclick={() => selectedCategory = selectedCategory === category.name ? null : category.name}
onkeydown={(e) => e.key === 'Enter' && (selectedCategory = selectedCategory === category.name ? null : category.name)}
onclick={() =>
(selectedCategory = selectedCategory === category.name ? null : category.name)}
onkeydown={(e) =>
e.key === "Enter" &&
(selectedCategory = selectedCategory === category.name ? null : category.name)}
class="w-full p-4 text-left hover:bg-[var(--bg-secondary)] transition-colors"
>
<div class="flex items-center justify-between">
@@ -120,12 +143,19 @@
{unlockedCount} / {achievements.length}
</span>
<svg
class="w-5 h-5 transition-transform {selectedCategory === category.name ? 'rotate-180' : ''}"
class="w-5 h-5 transition-transform {selectedCategory === category.name
? 'rotate-180'
: ''}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
</div>
</div>
@@ -133,9 +163,11 @@
{#if selectedCategory === category.name}
<div class="p-4 space-y-3" transition:slide={{ duration: 200, easing: quintOut }}>
{#each achievements as achievement}
{#each achievements as achievement (achievement.id)}
<div
class="p-3 rounded-lg border {achievement.unlocked ? 'border-[var(--border-color)] bg-[var(--bg-secondary)]' : 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 opacity-50'}"
class="p-3 rounded-lg border {achievement.unlocked
? 'border-[var(--border-color)] bg-[var(--bg-secondary)]'
: 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 opacity-50'}"
>
<div class="flex items-start gap-3">
<!-- Icon -->
@@ -149,7 +181,11 @@
<h4 class="font-semibold text-[var(--text-primary)]">
{achievement.name}
</h4>
<span class="text-xs px-2 py-0.5 rounded-full {getRarityBg(achievement.rarity)} {getRarityColor(achievement.rarity)} capitalize">
<span
class="text-xs px-2 py-0.5 rounded-full {getRarityBg(
achievement.rarity
)} {getRarityColor(achievement.rarity)} capitalize"
>
{achievement.rarity}
</span>
</div>
@@ -171,7 +207,10 @@
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-1.5">
<div
class="bg-gray-500 h-1.5 rounded-full transition-all duration-300"
style="width: {Math.min((achievement.progress / achievement.maxProgress) * 100, 100)}%"
style="width: {Math.min(
(achievement.progress / achievement.maxProgress) * 100,
100
)}%"
></div>
</div>
</div>
@@ -193,8 +232,12 @@
<div class="flex items-center gap-2">
<span class="text-xl">{achievementsState.lastUnlocked.icon}</span>
<div>
<p class="font-semibold text-[var(--text-primary)]">{achievementsState.lastUnlocked.name}</p>
<p class="text-xs text-gray-500">{formatDate(achievementsState.lastUnlocked.unlockedAt)}</p>
<p class="font-semibold text-[var(--text-primary)]">
{achievementsState.lastUnlocked.name}
</p>
<p class="text-xs text-gray-500">
{formatDate(achievementsState.lastUnlocked.unlockedAt)}
</p>
</div>
</div>
</div>
+8 -9
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { formattedStats } from '$lib/stores/stats';
import { fade } from 'svelte/transition';
import { formattedStats } from "$lib/stores/stats";
import { fade } from "svelte/transition";
let showToolsBreakdown = false;
</script>
@@ -61,17 +61,14 @@
{#if Object.keys($formattedStats.sessionToolsUsage).length > 0}
<div class="stats-section">
<h3 class="tools-header">
<button
class="tools-toggle"
onclick={() => showToolsBreakdown = !showToolsBreakdown}
>
<button class="tools-toggle" onclick={() => (showToolsBreakdown = !showToolsBreakdown)}>
Tools Used
<span class="toggle-icon">{showToolsBreakdown ? '▼' : '▶'}</span>
<span class="toggle-icon">{showToolsBreakdown ? "▼" : "▶"}</span>
</button>
</h3>
{#if showToolsBreakdown}
<div class="tools-breakdown">
{#each Object.entries($formattedStats.sessionToolsUsage).sort((a, b) => b[1] - a[1]) as [tool, count]}
{#each Object.entries($formattedStats.sessionToolsUsage).sort((a, b) => b[1] - a[1]) as [tool, count] (tool)}
<div class="stat-row stat-detail">
<span class="stat-label">{tool}:</span>
<span class="stat-value">{count}</span>
@@ -98,7 +95,9 @@
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 0.85rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.08);
}
.stats-section {
+9 -5
View File
@@ -3,7 +3,7 @@
onToggleAchievements?: () => void;
}
const { onToggleAchievements = () => {} } = $props<Props>();
const { onToggleAchievements = () => {} }: Props = $props();
import { invoke } from "@tauri-apps/api/core";
import { getVersion } from "@tauri-apps/api/app";
@@ -188,14 +188,18 @@
>
<span class="text-lg">🏆</span>
{#if progress.unlocked > 0}
<span class="absolute -top-1 -right-1 bg-[var(--accent-primary)] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
<span
class="absolute -top-1 -right-1 bg-[var(--accent-primary)] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]"
>
{progress.unlocked}
</span>
{/if}
</button>
<button
onclick={() => showStats = !showStats}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors {showStats ? 'text-[var(--accent-primary)]' : ''}"
onclick={() => (showStats = !showStats)}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors {showStats
? 'text-[var(--accent-primary)]'
: ''}"
title="Usage Stats"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -269,7 +273,7 @@
{#if showStats}
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="fixed inset-0 z-40" onclick={() => showStats = false}></div>
<div class="fixed inset-0 z-40" onclick={() => (showStats = false)}></div>
<div class="fixed top-14 right-4 z-50">
<StatsDisplay />
</div>
+3 -1
View File
@@ -84,7 +84,9 @@
class="terminal-content h-[calc(100%-40px)] overflow-y-auto p-4 font-mono text-sm"
>
{#if lines.length === 0}
<div class="terminal-waiting italic">Waiting for Claude... Type a message below to start!</div>
<div class="terminal-waiting italic">
Waiting for Claude... Type a message below to start!
</div>
{:else}
{#each lines as line (line.id)}
<div class="terminal-line mb-2 {getLineClass(line.type)}">
+4 -4
View File
@@ -1,7 +1,7 @@
// Achievement sound player using the notification system
import { soundPlayer } from '$lib/notifications';
import { NotificationType } from '$lib/notifications/types';
import { soundPlayer } from "$lib/notifications";
import { NotificationType } from "$lib/notifications/types";
export function playAchievementSound() {
// Use the soundPlayer which respects global notification settings
@@ -12,8 +12,8 @@ export function playAchievementSound() {
export function testAchievementSound() {
try {
playAchievementSound();
console.log('Achievement sound played successfully!');
console.log("Achievement sound played successfully!");
} catch (error) {
console.error('Error playing achievement sound:', error);
console.error("Error playing achievement sound:", error);
}
}
+351 -325
View File
@@ -1,8 +1,8 @@
import { writable, derived } from 'svelte/store';
import { listen } from '@tauri-apps/api/event';
import { invoke } from '@tauri-apps/api/core';
import type { Achievement, AchievementUnlockedEvent, AchievementId } from '$lib/types/achievements';
import { playAchievementSound } from '$lib/sounds/achievement';
import { writable, derived } from "svelte/store";
import { listen } from "@tauri-apps/api/event";
import { invoke } from "@tauri-apps/api/core";
import type { Achievement, AchievementUnlockedEvent, AchievementId } from "$lib/types/achievements";
import { playAchievementSound } from "$lib/sounds/achievement";
interface AchievementState {
achievements: Record<AchievementId, Achievement>;
@@ -11,430 +11,436 @@ interface AchievementState {
}
// Initial achievement definitions
const achievementDefinitions: Record<AchievementId, Omit<Achievement, 'unlocked' | 'unlockedAt'>> = {
const achievementDefinitions: Record<
AchievementId,
Omit<Achievement, "unlocked" | "unlockedAt">
> = {
// Token milestones
FirstSteps: {
id: 'FirstSteps',
name: 'First Steps',
description: 'Generated your first 1,000 tokens',
icon: '👶',
rarity: 'common',
id: "FirstSteps",
name: "First Steps",
description: "Generated your first 1,000 tokens",
icon: "👶",
rarity: "common",
maxProgress: 1000,
},
GrowingStrong: {
id: 'GrowingStrong',
name: 'Growing Strong',
description: 'Reached 10,000 tokens total',
icon: '🌱',
rarity: 'common',
id: "GrowingStrong",
name: "Growing Strong",
description: "Reached 10,000 tokens total",
icon: "🌱",
rarity: "common",
maxProgress: 10000,
},
BlossomingCoder: {
id: 'BlossomingCoder',
name: 'Blossoming Coder',
description: 'Generated 100,000 tokens - you\'re really growing!',
icon: '🌸',
rarity: 'rare',
id: "BlossomingCoder",
name: "Blossoming Coder",
description: "Generated 100,000 tokens - you're really growing!",
icon: "🌸",
rarity: "rare",
maxProgress: 100000,
},
TokenMaster: {
id: 'TokenMaster',
name: 'Token Master',
description: 'One million tokens! You\'re unstoppable!',
icon: '👑',
rarity: 'legendary',
id: "TokenMaster",
name: "Token Master",
description: "One million tokens! You're unstoppable!",
icon: "👑",
rarity: "legendary",
maxProgress: 1000000,
},
// Code generation
HelloWorld: {
id: 'HelloWorld',
name: 'Hello, World!',
description: 'Generated your first code block',
icon: '👋',
rarity: 'common',
id: "HelloWorld",
name: "Hello, World!",
description: "Generated your first code block",
icon: "👋",
rarity: "common",
maxProgress: 1,
},
CodeWizard: {
id: 'CodeWizard',
name: 'Code Wizard',
description: '100 code blocks generated',
icon: '🧙‍♀️',
rarity: 'rare',
id: "CodeWizard",
name: "Code Wizard",
description: "100 code blocks generated",
icon: "🧙‍♀️",
rarity: "rare",
maxProgress: 100,
},
ThousandBlocks: {
id: 'ThousandBlocks',
name: 'Thousand Blocks',
description: '1,000 code blocks! You\'re a code machine!',
icon: '🏗️',
rarity: 'epic',
id: "ThousandBlocks",
name: "Thousand Blocks",
description: "1,000 code blocks! You're a code machine!",
icon: "🏗️",
rarity: "epic",
maxProgress: 1000,
},
// File operations
FileManipulator: {
id: 'FileManipulator',
name: 'File Manipulator',
description: 'Edited 10 files',
icon: '📝',
rarity: 'common',
id: "FileManipulator",
name: "File Manipulator",
description: "Edited 10 files",
icon: "📝",
rarity: "common",
maxProgress: 10,
},
FileArchitect: {
id: 'FileArchitect',
name: 'File Architect',
description: 'Created or edited 100 files',
icon: '🏛️',
rarity: 'rare',
id: "FileArchitect",
name: "File Architect",
description: "Created or edited 100 files",
icon: "🏛️",
rarity: "rare",
maxProgress: 100,
},
// Conversation milestones
ConversationStarter: {
id: 'ConversationStarter',
name: 'Conversation Starter',
description: 'Exchanged 10 messages',
icon: '💬',
rarity: 'common',
id: "ConversationStarter",
name: "Conversation Starter",
description: "Exchanged 10 messages",
icon: "💬",
rarity: "common",
maxProgress: 10,
},
ChattyKathy: {
id: 'ChattyKathy',
name: 'Chatty Kathy',
description: '100 messages exchanged',
icon: '🗣️',
rarity: 'common',
id: "ChattyKathy",
name: "Chatty Kathy",
description: "100 messages exchanged",
icon: "🗣️",
rarity: "common",
maxProgress: 100,
},
Conversationalist: {
id: 'Conversationalist',
name: 'Master Conversationalist',
description: '1,000 messages! We\'re really connecting!',
icon: '💖',
rarity: 'rare',
id: "Conversationalist",
name: "Master Conversationalist",
description: "1,000 messages! We're really connecting!",
icon: "💖",
rarity: "rare",
maxProgress: 1000,
},
// Tool usage
Toolsmith: {
id: 'Toolsmith',
name: 'Toolsmith',
description: 'Used 5 different tools',
icon: '🔨',
rarity: 'common',
id: "Toolsmith",
name: "Toolsmith",
description: "Used 5 different tools",
icon: "🔨",
rarity: "common",
maxProgress: 5,
},
ToolMaster: {
id: 'ToolMaster',
name: 'Tool Master',
description: 'Used 10 different tools efficiently',
icon: '🛠️',
rarity: 'rare',
id: "ToolMaster",
name: "Tool Master",
description: "Used 10 different tools efficiently",
icon: "🛠️",
rarity: "rare",
maxProgress: 10,
},
// Time-based achievements
EarlyBird: {
id: 'EarlyBird',
name: 'Early Bird',
description: 'Started a session between 5 AM and 7 AM',
icon: '🌅',
rarity: 'common',
id: "EarlyBird",
name: "Early Bird",
description: "Started a session between 5 AM and 7 AM",
icon: "🌅",
rarity: "common",
},
NightOwl: {
id: 'NightOwl',
name: 'Night Owl',
description: 'Coding after midnight',
icon: '🦉',
rarity: 'common',
id: "NightOwl",
name: "Night Owl",
description: "Coding after midnight",
icon: "🦉",
rarity: "common",
},
AllNighter: {
id: 'AllNighter',
name: 'All Nighter',
description: 'Worked through the night (2 AM - 5 AM)',
icon: '🌙',
rarity: 'rare',
id: "AllNighter",
name: "All Nighter",
description: "Worked through the night (2 AM - 5 AM)",
icon: "🌙",
rarity: "rare",
},
WeekendWarrior: {
id: 'WeekendWarrior',
name: 'Weekend Warrior',
description: 'Coding on a weekend',
icon: '⚔️',
rarity: 'common',
id: "WeekendWarrior",
name: "Weekend Warrior",
description: "Coding on a weekend",
icon: "⚔️",
rarity: "common",
},
DedicatedDeveloper: {
id: 'DedicatedDeveloper',
name: 'Dedicated Developer',
description: 'Coded for 30 days in a row',
icon: '🏆',
rarity: 'legendary',
id: "DedicatedDeveloper",
name: "Dedicated Developer",
description: "Coded for 30 days in a row",
icon: "🏆",
rarity: "legendary",
},
// Search and exploration
Explorer: {
id: 'Explorer',
name: 'Explorer',
description: 'Used search tools 50 times',
icon: '🔍',
rarity: 'common',
id: "Explorer",
name: "Explorer",
description: "Used search tools 50 times",
icon: "🔍",
rarity: "common",
maxProgress: 50,
},
MasterSearcher: {
id: 'MasterSearcher',
name: 'Master Searcher',
description: 'Searched 500 times across files',
icon: '🕵️‍♀️',
rarity: 'rare',
id: "MasterSearcher",
name: "Master Searcher",
description: "Searched 500 times across files",
icon: "🕵️‍♀️",
rarity: "rare",
maxProgress: 500,
},
// Session achievements
QuickSession: {
id: 'QuickSession',
name: 'Quick Session',
description: 'Completed a productive session in under 5 minutes',
icon: '⚡',
rarity: 'common',
id: "QuickSession",
name: "Quick Session",
description: "Completed a productive session in under 5 minutes",
icon: "⚡",
rarity: "common",
},
FocusedWork: {
id: 'FocusedWork',
name: 'Focused Work',
description: 'Worked for 30 minutes straight',
icon: '🎯',
rarity: 'common',
id: "FocusedWork",
name: "Focused Work",
description: "Worked for 30 minutes straight",
icon: "🎯",
rarity: "common",
},
DeepDive: {
id: 'DeepDive',
name: 'Deep Dive',
description: 'Worked for 2 hours continuously',
icon: '🏊‍♀️',
rarity: 'rare',
id: "DeepDive",
name: "Deep Dive",
description: "Worked for 2 hours continuously",
icon: "🏊‍♀️",
rarity: "rare",
},
MarathonSession: {
id: 'MarathonSession',
name: 'Marathon Session',
description: '5+ hour coding session!',
icon: '🏃‍♀️',
rarity: 'epic',
id: "MarathonSession",
name: "Marathon Session",
description: "5+ hour coding session!",
icon: "🏃‍♀️",
rarity: "epic",
},
// Special achievements
FirstMessage: {
id: 'FirstMessage',
name: 'First Message',
description: 'Sent your first message to Hikari',
icon: '✨',
rarity: 'common',
id: "FirstMessage",
name: "First Message",
description: "Sent your first message to Hikari",
icon: "✨",
rarity: "common",
maxProgress: 1,
},
FirstTool: {
id: 'FirstTool',
name: 'First Tool',
description: 'Used your first tool',
icon: '🔧',
rarity: 'common',
id: "FirstTool",
name: "First Tool",
description: "Used your first tool",
icon: "🔧",
rarity: "common",
maxProgress: 1,
},
FirstCodeBlock: {
id: 'FirstCodeBlock',
name: 'First Code',
description: 'Generated your first code block',
icon: '📦',
rarity: 'common',
id: "FirstCodeBlock",
name: "First Code",
description: "Generated your first code block",
icon: "📦",
rarity: "common",
maxProgress: 1,
},
FirstFileEdit: {
id: 'FirstFileEdit',
name: 'First Edit',
description: 'Made your first file edit',
icon: '✏️',
rarity: 'common',
id: "FirstFileEdit",
name: "First Edit",
description: "Made your first file edit",
icon: "✏️",
rarity: "common",
maxProgress: 1,
},
Polyglot: {
id: 'Polyglot',
name: 'Polyglot',
description: 'Generated code in 5+ languages in one session',
icon: '🌍',
rarity: 'rare',
id: "Polyglot",
name: "Polyglot",
description: "Generated code in 5+ languages in one session",
icon: "🌍",
rarity: "rare",
maxProgress: 5,
},
SpeedCoder: {
id: 'SpeedCoder',
name: 'Speed Coder',
description: 'Generated 10 code blocks in 10 minutes',
icon: '🚀',
rarity: 'rare',
id: "SpeedCoder",
name: "Speed Coder",
description: "Generated 10 code blocks in 10 minutes",
icon: "🚀",
rarity: "rare",
},
ClaudeConnoisseur: {
id: 'ClaudeConnoisseur',
name: 'Claude Connoisseur',
description: 'Used all available Claude models',
icon: '🎨',
rarity: 'epic',
id: "ClaudeConnoisseur",
name: "Claude Connoisseur",
description: "Used all available Claude models",
icon: "🎨",
rarity: "epic",
maxProgress: 5, // Adjust based on available models
},
MarathonCoder: {
id: 'MarathonCoder',
name: 'Marathon Coder',
description: '10,000 tokens in a single session',
icon: '🏃‍♂️',
rarity: 'epic',
id: "MarathonCoder",
name: "Marathon Coder",
description: "10,000 tokens in a single session",
icon: "🏃‍♂️",
rarity: "epic",
maxProgress: 10000,
},
// Relationship & Greetings
GoodMorning: {
id: 'GoodMorning',
name: 'Good Morning!',
description: 'Greeted Hikari with a good morning',
icon: '🌅',
rarity: 'common',
id: "GoodMorning",
name: "Good Morning!",
description: "Greeted Hikari with a good morning",
icon: "🌅",
rarity: "common",
maxProgress: 1,
},
GoodNight: {
id: 'GoodNight',
name: 'Sweet Dreams',
description: 'Said good night to Hikari',
icon: '🌙',
rarity: 'common',
id: "GoodNight",
name: "Sweet Dreams",
description: "Said good night to Hikari",
icon: "🌙",
rarity: "common",
maxProgress: 1,
},
ThankYou: {
id: 'ThankYou',
name: 'Grateful Heart',
description: 'Thanked Hikari for her help',
icon: '🙏',
rarity: 'common',
id: "ThankYou",
name: "Grateful Heart",
description: "Thanked Hikari for her help",
icon: "🙏",
rarity: "common",
maxProgress: 1,
},
LoveYou: {
id: 'LoveYou',
name: 'Heartfelt',
description: 'Expressed love to Hikari',
icon: '💕',
rarity: 'rare',
id: "LoveYou",
name: "Heartfelt",
description: "Expressed love to Hikari",
icon: "💕",
rarity: "rare",
maxProgress: 1,
},
// Personality & Fun
EmojiUser: {
id: 'EmojiUser',
name: 'Emoji Master',
description: 'Used 20+ emojis in messages',
icon: '😄',
rarity: 'common',
id: "EmojiUser",
name: "Emoji Master",
description: "Used 20+ emojis in messages",
icon: "😄",
rarity: "common",
maxProgress: 20,
},
CapsLock: {
id: 'CapsLock',
name: 'CAPS LOCK',
description: 'SENT A MESSAGE IN ALL CAPS',
icon: '🔊',
rarity: 'common',
id: "CapsLock",
name: "CAPS LOCK",
description: "SENT A MESSAGE IN ALL CAPS",
icon: "🔊",
rarity: "common",
maxProgress: 1,
},
QuestionMaster: {
id: 'QuestionMaster',
name: 'Question Master',
description: 'Asked 50 questions',
icon: '❓',
rarity: 'common',
id: "QuestionMaster",
name: "Question Master",
description: "Asked 50 questions",
icon: "❓",
rarity: "common",
maxProgress: 50,
},
PleaseAndThankYou: {
id: 'PleaseAndThankYou',
name: 'Polite Programmer',
description: 'Always says please and thank you',
icon: '🎩',
rarity: 'common',
id: "PleaseAndThankYou",
name: "Polite Programmer",
description: "Always says please and thank you",
icon: "🎩",
rarity: "common",
maxProgress: 10,
},
// Git & Development
CommitMaster: {
id: 'CommitMaster',
name: 'Commit Master',
description: 'Made 100 commits through Hikari',
icon: '📝',
rarity: 'rare',
id: "CommitMaster",
name: "Commit Master",
description: "Made 100 commits through Hikari",
icon: "📝",
rarity: "rare",
maxProgress: 100,
},
PRO: {
id: 'PRO',
name: 'PRO',
description: 'Created 10 pull requests',
icon: '🔀',
rarity: 'rare',
id: "PRO",
name: "PRO",
description: "Created 10 pull requests",
icon: "🔀",
rarity: "rare",
maxProgress: 10,
},
Reviewer: {
id: 'Reviewer',
name: 'Code Reviewer',
description: 'Reviewed 10 pull requests',
icon: '👀',
rarity: 'rare',
id: "Reviewer",
name: "Code Reviewer",
description: "Reviewed 10 pull requests",
icon: "👀",
rarity: "rare",
maxProgress: 10,
},
IssueTracker: {
id: 'IssueTracker',
name: 'Issue Tracker',
description: 'Created 25 issues',
icon: '🎯',
rarity: 'rare',
id: "IssueTracker",
name: "Issue Tracker",
description: "Created 25 issues",
icon: "🎯",
rarity: "rare",
maxProgress: 25,
},
GitGuru: {
id: 'GitGuru',
name: 'Git Guru',
description: 'Mastered git operations',
icon: '🌲',
rarity: 'epic',
id: "GitGuru",
name: "Git Guru",
description: "Mastered git operations",
icon: "🌲",
rarity: "epic",
},
// Tool Mastery
BashMaster: {
id: 'BashMaster',
name: 'Bash Master',
description: 'Used bash commands 100 times',
icon: '💻',
rarity: 'rare',
id: "BashMaster",
name: "Bash Master",
description: "Used bash commands 100 times",
icon: "💻",
rarity: "rare",
maxProgress: 100,
},
FileExplorer: {
id: 'FileExplorer',
name: 'File Explorer',
description: 'Explored files 100 times',
icon: '📂',
rarity: 'common',
id: "FileExplorer",
name: "File Explorer",
description: "Explored files 100 times",
icon: "📂",
rarity: "common",
maxProgress: 100,
},
SearchExpert: {
id: 'SearchExpert',
name: 'Search Expert',
description: 'Mastered advanced search queries',
icon: '🔎',
rarity: 'rare',
id: "SearchExpert",
name: "Search Expert",
description: "Mastered advanced search queries",
icon: "🔎",
rarity: "rare",
},
AgentCommander: {
id: 'AgentCommander',
name: 'Agent Commander',
description: 'Used task agents effectively',
icon: '🤖',
rarity: 'rare',
id: "AgentCommander",
name: "Agent Commander",
description: "Used task agents effectively",
icon: "🤖",
rarity: "rare",
},
MCPMaster: {
id: 'MCPMaster',
name: 'MCP Master',
description: 'Mastered MCP tool usage',
icon: '🛠️',
rarity: 'epic',
id: "MCPMaster",
name: "MCP Master",
description: "Mastered MCP tool usage",
icon: "🛠️",
rarity: "epic",
},
};
// Initialize all achievements as locked
const initialAchievements: Record<AchievementId, Achievement> = {} as Record<AchievementId, Achievement>;
const initialAchievements: Record<AchievementId, Achievement> = {} as Record<
AchievementId,
Achievement
>;
for (const [id, def] of Object.entries(achievementDefinitions)) {
initialAchievements[id as AchievementId] = {
...def,
@@ -454,11 +460,13 @@ function createAchievementsStore() {
return {
subscribe,
unlockAchievement: (event: AchievementUnlockedEvent, playSound: boolean = true) => {
update(state => {
update((state) => {
const achievement = state.achievements[event.achievement.id];
if (achievement && !achievement.unlocked) {
achievement.unlocked = true;
achievement.unlockedAt = event.achievement.unlocked_at ? new Date(event.achievement.unlocked_at) : new Date();
achievement.unlockedAt = event.achievement.unlocked_at
? new Date(event.achievement.unlocked_at)
: new Date();
state.totalUnlocked++;
state.lastUnlocked = achievement;
@@ -467,7 +475,7 @@ function createAchievementsStore() {
try {
playAchievementSound();
} catch (error) {
console.error('Failed to play achievement sound:', error);
console.error("Failed to play achievement sound:", error);
}
}
}
@@ -475,7 +483,7 @@ function createAchievementsStore() {
});
},
updateProgress: (id: AchievementId, progress: number) => {
update(state => {
update((state) => {
const achievement = state.achievements[id];
if (achievement) {
achievement.progress = progress;
@@ -489,26 +497,22 @@ function createAchievementsStore() {
totalUnlocked: 0,
lastUnlocked: null,
}));
}
},
};
}
export const achievementsStore = createAchievementsStore();
// Derived stores for different views
export const unlockedAchievements = derived(
achievementsStore,
$store => Object.values($store.achievements).filter(a => a.unlocked)
export const unlockedAchievements = derived(achievementsStore, ($store) =>
Object.values($store.achievements).filter((a) => a.unlocked)
);
export const lockedAchievements = derived(
achievementsStore,
$store => Object.values($store.achievements).filter(a => !a.unlocked)
export const lockedAchievements = derived(achievementsStore, ($store) =>
Object.values($store.achievements).filter((a) => !a.unlocked)
);
export const achievementsByRarity = derived(
achievementsStore,
$store => {
export const achievementsByRarity = derived(achievementsStore, ($store) => {
const byRarity: Record<string, Achievement[]> = {
common: [],
rare: [],
@@ -521,103 +525,125 @@ export const achievementsByRarity = derived(
}
return byRarity;
}
);
});
export const achievementProgress = derived(
achievementsStore,
$store => ({
export const achievementProgress = derived(achievementsStore, ($store) => ({
unlocked: $store.totalUnlocked,
total: Object.keys($store.achievements).length,
percentage: Math.round(($store.totalUnlocked / Object.keys($store.achievements).length) * 100),
})
);
}));
// Initialize achievement listener
export async function initAchievementsListener() {
// Listen for achievement unlocked events
await listen<AchievementUnlockedEvent>('achievement:unlocked', (event) => {
await listen<AchievementUnlockedEvent>("achievement:unlocked", (event) => {
achievementsStore.unlockAchievement(event.payload);
});
// Load saved achievements from persistent storage
try {
const savedAchievements = await invoke<AchievementUnlockedEvent[]>('load_saved_achievements');
const savedAchievements = await invoke<AchievementUnlockedEvent[]>("load_saved_achievements");
// Update the store with saved achievements (don't play sounds)
for (const event of savedAchievements) {
achievementsStore.unlockAchievement(event, false);
}
} catch (error) {
console.error('Failed to load saved achievements:', error);
console.error("Failed to load saved achievements:", error);
}
}
// Export achievement categories for the display panel
export const achievementCategories = [
{
name: 'Token Milestones',
description: 'Track your token generation progress',
ids: ['FirstSteps', 'GrowingStrong', 'BlossomingCoder', 'TokenMaster'] as AchievementId[],
name: "Token Milestones",
description: "Track your token generation progress",
ids: ["FirstSteps", "GrowingStrong", "BlossomingCoder", "TokenMaster"] as AchievementId[],
},
{
name: 'Code Generation',
description: 'Achievements for generating code',
ids: ['HelloWorld', 'CodeWizard', 'ThousandBlocks'] as AchievementId[],
name: "Code Generation",
description: "Achievements for generating code",
ids: ["HelloWorld", "CodeWizard", "ThousandBlocks"] as AchievementId[],
},
{
name: 'File Operations',
description: 'Working with files and projects',
ids: ['FileManipulator', 'FileArchitect'] as AchievementId[],
name: "File Operations",
description: "Working with files and projects",
ids: ["FileManipulator", "FileArchitect"] as AchievementId[],
},
{
name: 'Conversations',
description: 'Building our relationship through chat',
ids: ['ConversationStarter', 'ChattyKathy', 'Conversationalist'] as AchievementId[],
name: "Conversations",
description: "Building our relationship through chat",
ids: ["ConversationStarter", "ChattyKathy", "Conversationalist"] as AchievementId[],
},
{
name: 'Tools & Skills',
description: 'Mastering different tools',
ids: ['Toolsmith', 'ToolMaster'] as AchievementId[],
name: "Tools & Skills",
description: "Mastering different tools",
ids: ["Toolsmith", "ToolMaster"] as AchievementId[],
},
{
name: 'Time-Based',
description: 'When you code matters too!',
ids: ['EarlyBird', 'NightOwl', 'AllNighter', 'WeekendWarrior', 'DedicatedDeveloper'] as AchievementId[],
name: "Time-Based",
description: "When you code matters too!",
ids: [
"EarlyBird",
"NightOwl",
"AllNighter",
"WeekendWarrior",
"DedicatedDeveloper",
] as AchievementId[],
},
{
name: 'Search & Explore',
description: 'Finding what you need',
ids: ['Explorer', 'MasterSearcher'] as AchievementId[],
name: "Search & Explore",
description: "Finding what you need",
ids: ["Explorer", "MasterSearcher"] as AchievementId[],
},
{
name: 'Session Records',
description: 'Your coding session achievements',
ids: ['QuickSession', 'FocusedWork', 'DeepDive', 'MarathonSession', 'MarathonCoder'] as AchievementId[],
name: "Session Records",
description: "Your coding session achievements",
ids: [
"QuickSession",
"FocusedWork",
"DeepDive",
"MarathonSession",
"MarathonCoder",
] as AchievementId[],
},
{
name: 'Relationship & Greetings',
description: 'Our special moments together',
ids: ['GoodMorning', 'GoodNight', 'ThankYou', 'LoveYou'] as AchievementId[],
name: "Relationship & Greetings",
description: "Our special moments together",
ids: ["GoodMorning", "GoodNight", "ThankYou", "LoveYou"] as AchievementId[],
},
{
name: 'Personality & Fun',
description: 'Express yourself!',
ids: ['EmojiUser', 'CapsLock', 'QuestionMaster', 'PleaseAndThankYou'] as AchievementId[],
name: "Personality & Fun",
description: "Express yourself!",
ids: ["EmojiUser", "CapsLock", "QuestionMaster", "PleaseAndThankYou"] as AchievementId[],
},
{
name: 'Git & Development',
description: 'Version control mastery',
ids: ['CommitMaster', 'PRO', 'Reviewer', 'IssueTracker', 'GitGuru'] as AchievementId[],
name: "Git & Development",
description: "Version control mastery",
ids: ["CommitMaster", "PRO", "Reviewer", "IssueTracker", "GitGuru"] as AchievementId[],
},
{
name: 'Tool Mastery',
description: 'Master of all tools',
ids: ['BashMaster', 'FileExplorer', 'SearchExpert', 'AgentCommander', 'MCPMaster'] as AchievementId[],
name: "Tool Mastery",
description: "Master of all tools",
ids: [
"BashMaster",
"FileExplorer",
"SearchExpert",
"AgentCommander",
"MCPMaster",
] as AchievementId[],
},
{
name: 'Special',
description: 'Unique accomplishments',
ids: ['FirstMessage', 'FirstTool', 'FirstCodeBlock', 'FirstFileEdit', 'Polyglot', 'SpeedCoder', 'ClaudeConnoisseur'] as AchievementId[],
name: "Special",
description: "Unique accomplishments",
ids: [
"FirstMessage",
"FirstTool",
"FirstCodeBlock",
"FirstFileEdit",
"Polyglot",
"SpeedCoder",
"ClaudeConnoisseur",
] as AchievementId[],
},
];
+8 -8
View File
@@ -1,6 +1,6 @@
import { writable, derived } from 'svelte/store';
import { listen } from '@tauri-apps/api/event';
import { invoke } from '@tauri-apps/api/core';
import { writable, derived } from "svelte/store";
import { listen } from "@tauri-apps/api/event";
import { invoke } from "@tauri-apps/api/core";
export interface UsageStats {
total_input_tokens: number;
@@ -74,7 +74,7 @@ export const formattedStats = derived(stats, ($stats) => {
sessionInputTokens: formatNumber($stats.session_input_tokens),
sessionOutputTokens: formatNumber($stats.session_output_tokens),
sessionCost: formatCost($stats.session_cost_usd),
model: $stats.model || 'No model selected',
model: $stats.model || "No model selected",
// New formatted fields
messagesTotal: formatNumber($stats.messages_exchanged),
@@ -96,7 +96,7 @@ export const formattedStats = derived(stats, ($stats) => {
// Initialize stats listener
export async function initStatsListener() {
// Listen for stats updates from the backend
await listen('claude:stats', (event) => {
await listen("claude:stats", (event) => {
const payload = event.payload as { stats: UsageStats };
const { stats: newStats } = payload;
@@ -106,16 +106,16 @@ export async function initStatsListener() {
// Load initial stats from backend
try {
const initialStats = await invoke<UsageStats>('get_usage_stats');
const initialStats = await invoke<UsageStats>("get_usage_stats");
stats.set(initialStats);
} catch (error) {
console.error('Failed to load initial stats:', error);
console.error("Failed to load initial stats:", error);
}
}
// Reset session stats (call when starting new session)
export function resetSessionStats() {
stats.update(current => ({
stats.update((current) => ({
...current,
session_input_tokens: 0,
session_output_tokens: 0,
+52 -52
View File
@@ -10,76 +10,76 @@ export interface AchievementUnlockedEvent {
export type AchievementId =
// Token Milestones
| 'FirstSteps' // 1,000 tokens
| 'GrowingStrong' // 10,000 tokens
| 'BlossomingCoder' // 100,000 tokens
| 'TokenMaster' // 1,000,000 tokens
| "FirstSteps" // 1,000 tokens
| "GrowingStrong" // 10,000 tokens
| "BlossomingCoder" // 100,000 tokens
| "TokenMaster" // 1,000,000 tokens
// Code Generation
| 'HelloWorld' // First code block
| 'CodeWizard' // 100 code blocks
| 'ThousandBlocks' // 1,000 code blocks
| "HelloWorld" // First code block
| "CodeWizard" // 100 code blocks
| "ThousandBlocks" // 1,000 code blocks
// File Operations
| 'FileManipulator' // 10 files edited
| 'FileArchitect' // 100 files edited
| "FileManipulator" // 10 files edited
| "FileArchitect" // 100 files edited
// Conversation milestones
| 'ConversationStarter' // 10 messages
| 'ChattyKathy' // 100 messages
| 'Conversationalist' // 1,000 messages
| "ConversationStarter" // 10 messages
| "ChattyKathy" // 100 messages
| "Conversationalist" // 1,000 messages
// Tool usage
| 'Toolsmith' // 5 different tools
| 'ToolMaster' // 10 different tools
| "Toolsmith" // 5 different tools
| "ToolMaster" // 10 different tools
// Time-based achievements
| 'EarlyBird' // Started session 5-7 AM
| 'NightOwl' // Coding after midnight
| 'AllNighter' // Worked 2-5 AM
| 'WeekendWarrior' // Coding on weekend
| 'DedicatedDeveloper' // 30 days in a row
| "EarlyBird" // Started session 5-7 AM
| "NightOwl" // Coding after midnight
| "AllNighter" // Worked 2-5 AM
| "WeekendWarrior" // Coding on weekend
| "DedicatedDeveloper" // 30 days in a row
// Search and exploration
| 'Explorer' // 50 searches
| 'MasterSearcher' // 500 searches
| "Explorer" // 50 searches
| "MasterSearcher" // 500 searches
// Session achievements
| 'QuickSession' // Productive session < 5 min
| 'FocusedWork' // 30 min session
| 'DeepDive' // 2 hour session
| 'MarathonSession' // 5+ hour session
| "QuickSession" // Productive session < 5 min
| "FocusedWork" // 30 min session
| "DeepDive" // 2 hour session
| "MarathonSession" // 5+ hour session
// Special achievements
| 'FirstMessage' // First message sent
| 'FirstTool' // First tool used
| 'FirstCodeBlock' // First code generated
| 'FirstFileEdit' // First file edit
| 'Polyglot' // 5+ languages in one session
| 'SpeedCoder' // 10 code blocks in 10 minutes
| 'ClaudeConnoisseur' // Used all Claude models
| 'MarathonCoder' // 10k tokens in one session
| "FirstMessage" // First message sent
| "FirstTool" // First tool used
| "FirstCodeBlock" // First code generated
| "FirstFileEdit" // First file edit
| "Polyglot" // 5+ languages in one session
| "SpeedCoder" // 10 code blocks in 10 minutes
| "ClaudeConnoisseur" // Used all Claude models
| "MarathonCoder" // 10k tokens in one session
// Relationship & Greetings
| 'GoodMorning' // Said good morning
| 'GoodNight' // Said good night
| 'ThankYou' // Said thank you
| 'LoveYou' // Said love you
| "GoodMorning" // Said good morning
| "GoodNight" // Said good night
| "ThankYou" // Said thank you
| "LoveYou" // Said love you
// Personality & Fun
| 'EmojiUser' // Used 20+ emojis
| 'CapsLock' // ALL CAPS MESSAGE
| 'QuestionMaster' // Asked 50 questions
| 'PleaseAndThankYou' // Polite user
| "EmojiUser" // Used 20+ emojis
| "CapsLock" // ALL CAPS MESSAGE
| "QuestionMaster" // Asked 50 questions
| "PleaseAndThankYou" // Polite user
// Git & Development
| 'CommitMaster' // 100 commits
| 'PRO' // Created 10 PRs
| 'Reviewer' // Reviewed 10 PRs
| 'IssueTracker' // Created 25 issues
| 'GitGuru' // Used git commands
| "CommitMaster" // 100 commits
| "PRO" // Created 10 PRs
| "Reviewer" // Reviewed 10 PRs
| "IssueTracker" // Created 25 issues
| "GitGuru" // Used git commands
// Tool Mastery
| 'BashMaster' // Used bash 100 times
| 'FileExplorer' // Searched files 100 times
| 'SearchExpert' // Advanced searches
| 'AgentCommander' // Used task agents
| 'MCPMaster'; // Used MCP tools
| "BashMaster" // Used bash 100 times
| "FileExplorer" // Searched files 100 times
| "SearchExpert" // Advanced searches
| "AgentCommander" // Used task agents
| "MCPMaster"; // Used MCP tools
export interface Achievement {
id: AchievementId;
name: string;
description: string;
icon: string;
rarity: 'common' | 'rare' | 'epic' | 'legendary';
rarity: "common" | "rare" | "epic" | "legendary";
unlocked: boolean;
unlockedAt?: Date;
progress?: number;
+5 -2
View File
@@ -36,7 +36,7 @@
</script>
<div class="app-container h-screen w-screen flex flex-col bg-[var(--bg-primary)] overflow-hidden">
<StatusBar onToggleAchievements={() => achievementPanelOpen = !achievementPanelOpen} />
<StatusBar onToggleAchievements={() => (achievementPanelOpen = !achievementPanelOpen)} />
<main class="flex-1 flex overflow-hidden">
<!-- Left panel: Character display -->
@@ -56,7 +56,10 @@
<PermissionModal />
<ConfigSidebar />
<AchievementNotification />
<AchievementsPanel bind:isOpen={achievementPanelOpen} onClose={() => achievementPanelOpen = false} />
<AchievementsPanel
bind:isOpen={achievementPanelOpen}
onClose={() => (achievementPanelOpen = false)}
/>
</div>
<style>
+7 -7
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { testAchievementSound } from '$lib/sounds/achievement';
import { invoke } from '@tauri-apps/api/core';
import { testAchievementSound } from "$lib/sounds/achievement";
import { invoke } from "@tauri-apps/api/core";
async function testSound() {
testAchievementSound();
@@ -9,12 +9,12 @@
async function triggerAchievement() {
// This will trigger an achievement that hasn't been unlocked yet
try {
await invoke('check_achievements', {
eventType: 'message_sent',
data: {}
await invoke("check_achievements", {
eventType: "message_sent",
data: {},
});
} catch (error) {
console.error('Failed to trigger achievement:', error);
console.error("Failed to trigger achievement:", error);
}
}
</script>
@@ -38,7 +38,7 @@
</button>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-4">
Click the first button to test just the sound effect.<br>
Click the first button to test just the sound effect.<br />
Click the second button to trigger a real achievement (if any are available to unlock).
</p>
</div>