nhcarrigan/hikari-desktop
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 9 Pull Requests 36 Actions Releases 22 Activity

chore: fix lints and tests
Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 53s
Details
CI / Lint & Test (pull_request) Failing after 7m36s
Details
CI / Build Linux (pull_request) Has been skipped
Details
CI / Build Windows (cross-compile) (pull_request) Has been skipped
Details

Browse Source
This commit is contained in:
Naomi Carrigan
2026-01-19 19:51:10 -08:00
parent da566f408e
commit 27f69cb308
11 changed files with 1128 additions and 1003 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/StatsDisplay.svelte
+144 -145
View File
@@ -1,169 +1,168 @@
<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;
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">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-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>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>
<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] (tool)}
<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="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 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-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 {
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);
}
.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-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-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-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-label {
color: var(--text-secondary, #9ca3af);
}
.stat-value {
font-family: var(--font-mono, monospace);
color: var(--text-primary, #e5e7eb);
}
.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-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-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>
.model-value {
font-family: var(--font-mono, monospace);
color: var(--text-primary, #e5e7eb);
font-size: 0.75rem;
}
</style>