generated from nhcarrigan/template
feat: add statistics
This commit is contained in:
+14
@@ -10,7 +10,14 @@
|
||||
--accent-secondary: #ff6b9d;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a0a0a0;
|
||||
--text-tertiary: #6b7280;
|
||||
--border-color: #2a2a4a;
|
||||
|
||||
/* Terminal specific colors */
|
||||
--terminal-user: #22d3ee;
|
||||
--terminal-tool: #c084fc;
|
||||
--terminal-tool-name: #ddd6fe;
|
||||
--terminal-error: #f87171;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
@@ -22,7 +29,14 @@
|
||||
--accent-secondary: #ff6b9d;
|
||||
--text-primary: #1a1a2e;
|
||||
--text-secondary: #5a5a7a;
|
||||
--text-tertiary: #9ca3af;
|
||||
--border-color: #d0d0e0;
|
||||
|
||||
/* Terminal specific colors */
|
||||
--terminal-user: #0891b2;
|
||||
--terminal-tool: #7c3aed;
|
||||
--terminal-tool-name: #8b5cf6;
|
||||
--terminal-error: #dc2626;
|
||||
}
|
||||
|
||||
html,
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
disabled={!isConnected || isSubmitting}
|
||||
rows={1}
|
||||
class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)]
|
||||
rounded-lg text-white placeholder-gray-500 resize-none
|
||||
rounded-lg text-[var(--text-primary)] placeholder-gray-500 resize-none
|
||||
focus:outline-none focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
transition-all duration-200"
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
<script lang="ts">
|
||||
import { formattedStats } from '$lib/stores/stats';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
let showToolsBreakdown = false;
|
||||
</script>
|
||||
|
||||
<div class="stats-display" transition:fade={{ duration: 200 }}>
|
||||
<div class="stats-row">
|
||||
<span class="stat-label">Duration:</span>
|
||||
<span class="stat-value">{$formattedStats.sessionDuration}</span>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h3>Tokens & Cost</h3>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Session:</span>
|
||||
<span class="stat-value">{$formattedStats.sessionTokens}</span>
|
||||
<span class="stat-cost">{$formattedStats.sessionCost}</span>
|
||||
</div>
|
||||
<div class="stat-row stat-detail">
|
||||
<span class="stat-label">Input:</span>
|
||||
<span class="stat-value">{$formattedStats.sessionInputTokens}</span>
|
||||
</div>
|
||||
<div class="stat-row stat-detail">
|
||||
<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">
|
||||
<h3>Activity</h3>
|
||||
<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>
|
||||
|
||||
{#if Object.keys($formattedStats.sessionToolsUsage).length > 0}
|
||||
<div class="stats-section">
|
||||
<h3 class="tools-header">
|
||||
<button
|
||||
class="tools-toggle"
|
||||
onclick={() => showToolsBreakdown = !showToolsBreakdown}
|
||||
>
|
||||
Tools Used
|
||||
<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]}
|
||||
<div class="stat-row stat-detail">
|
||||
<span class="stat-label">{tool}:</span>
|
||||
<span class="stat-value">{count}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="model-info">
|
||||
<span class="model-label">Model:</span>
|
||||
<span class="model-value">{$formattedStats.model}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stats-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-secondary);
|
||||
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);
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.stats-section h3 {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 0.25rem 0;
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.125rem 0;
|
||||
}
|
||||
|
||||
.stat-detail {
|
||||
margin-left: 1rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.stat-highlight {
|
||||
font-weight: 600;
|
||||
color: var(--accent-primary);
|
||||
margin-top: 0.25rem;
|
||||
padding-top: 0.25rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--text-secondary, #9ca3af);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-family: var(--font-mono, monospace);
|
||||
color: var(--text-primary, #e5e7eb);
|
||||
}
|
||||
|
||||
.model-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.model-label {
|
||||
color: var(--text-secondary, #9ca3af);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.model-value {
|
||||
font-family: var(--font-mono, monospace);
|
||||
color: var(--text-primary, #e5e7eb);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
@@ -7,6 +7,7 @@
|
||||
import { configStore, type HikariConfig } from "$lib/stores/config";
|
||||
import type { ConnectionStatus } from "$lib/types/messages";
|
||||
import { onMount } from "svelte";
|
||||
import StatsDisplay from "./StatsDisplay.svelte";
|
||||
|
||||
const DISCORD_URL = "https://chat.nhcarrigan.com";
|
||||
|
||||
@@ -16,6 +17,7 @@
|
||||
let isConnecting = $state(false);
|
||||
let grantedToolsList: string[] = $state([]);
|
||||
let appVersion = $state("");
|
||||
let showStats = $state(false);
|
||||
let currentConfig: HikariConfig = $state({
|
||||
model: null,
|
||||
api_key: null,
|
||||
@@ -167,6 +169,20 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
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">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zM13 19v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2zM21 19V8a2 2 0 00-2-2h-2a2 2 0 00-2 2v11a2 2 0 002 2h2a2 2 0 002-2z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onclick={configStore.openSidebar}
|
||||
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
|
||||
@@ -201,6 +217,12 @@
|
||||
{#if appVersion}
|
||||
<span class="text-xs text-gray-600">v{appVersion}</span>
|
||||
{/if}
|
||||
|
||||
{#if showStats}
|
||||
<div class="absolute top-full right-0 mt-2 mr-4 z-50">
|
||||
<StatsDisplay />
|
||||
</div>
|
||||
{/if}
|
||||
{#if connectionStatus === "connected"}
|
||||
<button
|
||||
onclick={handleDisconnect}
|
||||
@@ -219,3 +241,12 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#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 top-14 right-4 z-50">
|
||||
<StatsDisplay />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -25,17 +25,17 @@
|
||||
function getLineClass(type: string): string {
|
||||
switch (type) {
|
||||
case "user":
|
||||
return "text-cyan-400";
|
||||
return "terminal-user";
|
||||
case "assistant":
|
||||
return "text-gray-100";
|
||||
return "terminal-assistant";
|
||||
case "system":
|
||||
return "text-gray-500 italic";
|
||||
return "terminal-system italic";
|
||||
case "tool":
|
||||
return "text-purple-400";
|
||||
return "terminal-tool";
|
||||
case "error":
|
||||
return "text-red-400";
|
||||
return "terminal-error";
|
||||
default:
|
||||
return "text-gray-300";
|
||||
return "terminal-default";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<span class="text-sm text-gray-400 ml-2">Terminal</span>
|
||||
<span class="text-sm terminal-header-text ml-2">Terminal</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -84,16 +84,16 @@
|
||||
class="terminal-content h-[calc(100%-40px)] overflow-y-auto p-4 font-mono text-sm"
|
||||
>
|
||||
{#if lines.length === 0}
|
||||
<div class="text-gray-500 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)}">
|
||||
<span class="text-gray-600 text-xs mr-2">{formatTime(line.timestamp)}</span>
|
||||
<span class="terminal-timestamp text-xs mr-2">{formatTime(line.timestamp)}</span>
|
||||
{#if getLinePrefix(line.type)}
|
||||
<span class="text-gray-500 mr-2">{getLinePrefix(line.type)}</span>
|
||||
<span class="terminal-prefix mr-2">{getLinePrefix(line.type)}</span>
|
||||
{/if}
|
||||
{#if line.toolName}
|
||||
<span class="text-purple-300 mr-2">[{line.toolName}]</span>
|
||||
<span class="terminal-tool-name mr-2">[{line.toolName}]</span>
|
||||
{/if}
|
||||
<span class="whitespace-pre-wrap">{line.content}</span>
|
||||
</div>
|
||||
@@ -107,4 +107,49 @@
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-color) var(--bg-terminal);
|
||||
}
|
||||
|
||||
/* Terminal text colors that adapt to theme */
|
||||
.terminal-user {
|
||||
color: var(--terminal-user, #22d3ee);
|
||||
}
|
||||
|
||||
.terminal-assistant {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.terminal-system {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.terminal-tool {
|
||||
color: var(--terminal-tool, #c084fc);
|
||||
}
|
||||
|
||||
.terminal-error {
|
||||
color: var(--terminal-error, #f87171);
|
||||
}
|
||||
|
||||
.terminal-default {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.terminal-timestamp {
|
||||
color: var(--text-tertiary, #6b7280);
|
||||
}
|
||||
|
||||
.terminal-prefix {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.terminal-tool-name {
|
||||
color: var(--terminal-tool-name, #ddd6fe);
|
||||
}
|
||||
|
||||
.terminal-waiting {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.terminal-header-text {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
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;
|
||||
total_output_tokens: number;
|
||||
total_cost_usd: number;
|
||||
session_input_tokens: number;
|
||||
session_output_tokens: number;
|
||||
session_cost_usd: number;
|
||||
model: string | null;
|
||||
|
||||
// New fields
|
||||
messages_exchanged: number;
|
||||
session_messages_exchanged: number;
|
||||
code_blocks_generated: number;
|
||||
session_code_blocks_generated: number;
|
||||
files_edited: number;
|
||||
session_files_edited: number;
|
||||
files_created: number;
|
||||
session_files_created: number;
|
||||
tools_usage: Record<string, number>;
|
||||
session_tools_usage: Record<string, number>;
|
||||
session_duration_seconds: number;
|
||||
}
|
||||
|
||||
// Main stats store
|
||||
export const stats = writable<UsageStats>({
|
||||
total_input_tokens: 0,
|
||||
total_output_tokens: 0,
|
||||
total_cost_usd: 0,
|
||||
session_input_tokens: 0,
|
||||
session_output_tokens: 0,
|
||||
session_cost_usd: 0,
|
||||
model: null,
|
||||
messages_exchanged: 0,
|
||||
session_messages_exchanged: 0,
|
||||
code_blocks_generated: 0,
|
||||
session_code_blocks_generated: 0,
|
||||
files_edited: 0,
|
||||
session_files_edited: 0,
|
||||
files_created: 0,
|
||||
session_files_created: 0,
|
||||
tools_usage: {},
|
||||
session_tools_usage: {},
|
||||
session_duration_seconds: 0,
|
||||
});
|
||||
|
||||
// Derived store for formatted display values
|
||||
export const formattedStats = derived(stats, ($stats) => {
|
||||
const formatNumber = (num: number) => num.toLocaleString();
|
||||
const formatCost = (cost: number) => `$${cost.toFixed(4)}`;
|
||||
const formatDuration = (seconds: number) => {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const secs = seconds % 60;
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}h ${minutes}m ${secs}s`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}m ${secs}s`;
|
||||
} else {
|
||||
return `${secs}s`;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
totalTokens: formatNumber($stats.total_input_tokens + $stats.total_output_tokens),
|
||||
totalInputTokens: formatNumber($stats.total_input_tokens),
|
||||
totalOutputTokens: formatNumber($stats.total_output_tokens),
|
||||
totalCost: formatCost($stats.total_cost_usd),
|
||||
sessionTokens: formatNumber($stats.session_input_tokens + $stats.session_output_tokens),
|
||||
sessionInputTokens: formatNumber($stats.session_input_tokens),
|
||||
sessionOutputTokens: formatNumber($stats.session_output_tokens),
|
||||
sessionCost: formatCost($stats.session_cost_usd),
|
||||
model: $stats.model || 'No model selected',
|
||||
|
||||
// New formatted fields
|
||||
messagesTotal: formatNumber($stats.messages_exchanged),
|
||||
messagesSession: formatNumber($stats.session_messages_exchanged),
|
||||
codeBlocksTotal: formatNumber($stats.code_blocks_generated),
|
||||
codeBlocksSession: formatNumber($stats.session_code_blocks_generated),
|
||||
filesEditedTotal: formatNumber($stats.files_edited),
|
||||
filesEditedSession: formatNumber($stats.session_files_edited),
|
||||
filesCreatedTotal: formatNumber($stats.files_created),
|
||||
filesCreatedSession: formatNumber($stats.session_files_created),
|
||||
sessionDuration: formatDuration($stats.session_duration_seconds),
|
||||
toolsUsage: $stats.tools_usage,
|
||||
sessionToolsUsage: $stats.session_tools_usage,
|
||||
};
|
||||
});
|
||||
|
||||
// Note: Cost calculation is now done in the Rust backend
|
||||
|
||||
// Initialize stats listener
|
||||
export async function initStatsListener() {
|
||||
// Listen for stats updates from the backend
|
||||
await listen('claude:stats', (event) => {
|
||||
const payload = event.payload as { stats: UsageStats };
|
||||
const { stats: newStats } = payload;
|
||||
|
||||
// The backend already tracks all totals - just set the stats directly
|
||||
stats.set(newStats);
|
||||
});
|
||||
|
||||
// Load initial stats from backend
|
||||
try {
|
||||
const initialStats = await invoke<UsageStats>('get_usage_stats');
|
||||
stats.set(initialStats);
|
||||
} catch (error) {
|
||||
console.error('Failed to load initial stats:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Reset session stats (call when starting new session)
|
||||
export function resetSessionStats() {
|
||||
stats.update(current => ({
|
||||
...current,
|
||||
session_input_tokens: 0,
|
||||
session_output_tokens: 0,
|
||||
session_cost_usd: 0,
|
||||
session_messages_exchanged: 0,
|
||||
session_code_blocks_generated: 0,
|
||||
session_files_edited: 0,
|
||||
session_files_created: 0,
|
||||
session_tools_usage: {},
|
||||
session_duration_seconds: 0,
|
||||
}));
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { invoke } from "@tauri-apps/api/core";
|
||||
import { claudeStore } from "$lib/stores/claude";
|
||||
import { characterState } from "$lib/stores/character";
|
||||
import { configStore } from "$lib/stores/config";
|
||||
import { initStatsListener, resetSessionStats } from "$lib/stores/stats";
|
||||
import type { ConnectionStatus, PermissionPromptEvent } from "$lib/types/messages";
|
||||
import type { CharacterState } from "$lib/types/states";
|
||||
import {
|
||||
@@ -76,6 +77,9 @@ export async function initializeTauriListeners() {
|
||||
// Initialize notification rules
|
||||
initializeNotificationRules();
|
||||
|
||||
// Initialize stats listener
|
||||
await initStatsListener();
|
||||
|
||||
const connectionUnlisten = await listen<string>("claude:connection", async (event) => {
|
||||
const status = event.payload as ConnectionStatus;
|
||||
claudeStore.setConnectionStatus(status);
|
||||
@@ -88,6 +92,7 @@ export async function initializeTauriListeners() {
|
||||
characterState.setState("idle");
|
||||
if (!hasConnectedThisSession) {
|
||||
hasConnectedThisSession = true;
|
||||
resetSessionStats(); // Reset session stats on new connection
|
||||
await sendGreeting();
|
||||
}
|
||||
} else if (status === "disconnected") {
|
||||
|
||||
Reference in New Issue
Block a user