generated from nhcarrigan/template
feat: massive overhaul to manage costs (#103)
### Explanation _No response_ ### Issue Closes #102 ### Attestations - [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [ ] I have pinned the dependencies to a specific patch version. ### Style - [ ] I have run the linter and resolved any errors. - [ ] My pull request uses an appropriate title, matching the conventional commit standards. - [ ] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [ ] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [ ] All new and existing tests pass locally with my changes. - [ ] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning _No response_ Reviewed-on: #103 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit was merged in pull request #103.
This commit is contained in:
@@ -161,7 +161,7 @@
|
||||
|
||||
<!-- Celebration confetti effect (CSS only) -->
|
||||
<div class="absolute inset-0 pointer-events-none overflow-hidden rounded-lg">
|
||||
{#each Array(10) as _ (_)}
|
||||
{#each Array.from({ length: 10 }, (_, i) => i) as confettiIndex (confettiIndex)}
|
||||
<div
|
||||
class="absolute w-2 h-2 bg-gradient-to-br {getRarityColor(
|
||||
getAchievementRarity(currentAchievement.achievement.id)
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
} from "$lib/stores/config";
|
||||
import { claudeStore } from "$lib/stores/claude";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import CostSummary from "./CostSummary.svelte";
|
||||
|
||||
let config: HikariConfig = $state({
|
||||
model: null,
|
||||
@@ -45,6 +46,11 @@
|
||||
text_secondary: null,
|
||||
border_color: null,
|
||||
},
|
||||
budget_enabled: false,
|
||||
session_token_budget: null,
|
||||
session_cost_budget: null,
|
||||
budget_action: "warn",
|
||||
budget_warning_threshold: 0.8,
|
||||
});
|
||||
|
||||
let showCustomThemeEditor = $state(false);
|
||||
@@ -74,8 +80,17 @@
|
||||
|
||||
const availableModels = [
|
||||
{ value: "", label: "Default (from ~/.claude)" },
|
||||
// Current generation (Claude 4.5)
|
||||
{ value: "claude-sonnet-4-5-20250929", label: "Claude Sonnet 4.5 (Recommended)" },
|
||||
{ value: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5 (Fast & Cheap)" },
|
||||
{ value: "claude-opus-4-5-20251101", label: "Claude Opus 4.5 (Most Capable)" },
|
||||
// Previous generation (Claude 4)
|
||||
{ value: "claude-opus-4-1-20250805", label: "Claude Opus 4.1" },
|
||||
{ value: "claude-sonnet-4-20250514", label: "Claude Sonnet 4" },
|
||||
{ value: "claude-opus-4-20250514", label: "Claude Opus 4" },
|
||||
// Legacy (Claude 3.x)
|
||||
{ value: "claude-3-7-sonnet-20250219", label: "Claude 3.7 Sonnet" },
|
||||
{ value: "claude-3-haiku-20240307", label: "Claude 3 Haiku (Cheapest)" },
|
||||
];
|
||||
|
||||
const commonTools = [
|
||||
@@ -778,6 +793,135 @@
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Budget Settings Section -->
|
||||
<section class="mb-6">
|
||||
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
||||
Budget Settings
|
||||
</h3>
|
||||
|
||||
<!-- Enable Budget Tracking -->
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={config.budget_enabled}
|
||||
class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
|
||||
/>
|
||||
<span class="text-sm text-[var(--text-primary)]">Enable budget tracking</span>
|
||||
</label>
|
||||
<p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
|
||||
Set limits on token usage and costs per session
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if config.budget_enabled}
|
||||
<!-- Token Budget -->
|
||||
<div class="mb-4">
|
||||
<label for="token-budget" class="block text-sm text-[var(--text-secondary)] mb-1">
|
||||
Session Token Budget
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
id="token-budget"
|
||||
type="number"
|
||||
bind:value={config.session_token_budget}
|
||||
min="0"
|
||||
step="10000"
|
||||
placeholder="e.g., 100000"
|
||||
class="flex-1 px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] text-sm focus:outline-none focus:border-[var(--accent-primary)]"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-tertiary)]">tokens</span>
|
||||
</div>
|
||||
<p class="text-xs text-[var(--text-tertiary)] mt-1">Leave empty for unlimited tokens</p>
|
||||
</div>
|
||||
|
||||
<!-- Cost Budget -->
|
||||
<div class="mb-4">
|
||||
<label for="cost-budget" class="block text-sm text-[var(--text-secondary)] mb-1">
|
||||
Session Cost Budget
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-[var(--text-secondary)]">$</span>
|
||||
<input
|
||||
id="cost-budget"
|
||||
type="number"
|
||||
bind:value={config.session_cost_budget}
|
||||
min="0"
|
||||
step="0.50"
|
||||
placeholder="e.g., 5.00"
|
||||
class="flex-1 px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] text-sm focus:outline-none focus:border-[var(--accent-primary)]"
|
||||
/>
|
||||
<span class="text-xs text-[var(--text-tertiary)]">USD</span>
|
||||
</div>
|
||||
<p class="text-xs text-[var(--text-tertiary)] mt-1">Leave empty for unlimited spending</p>
|
||||
</div>
|
||||
|
||||
<!-- Warning Threshold -->
|
||||
<div class="mb-4">
|
||||
<label for="warning-threshold" class="block text-sm text-[var(--text-secondary)] mb-2">
|
||||
Warning Threshold
|
||||
</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input
|
||||
id="warning-threshold"
|
||||
type="range"
|
||||
bind:value={config.budget_warning_threshold}
|
||||
min="0.5"
|
||||
max="0.95"
|
||||
step="0.05"
|
||||
class="flex-1 h-2 bg-[var(--bg-primary)] rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
<span class="text-sm text-[var(--text-secondary)] w-12 text-right">
|
||||
{Math.round(config.budget_warning_threshold * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs text-[var(--text-tertiary)] mt-1">
|
||||
Show warning when this percentage of budget is used
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Budget Action -->
|
||||
<div class="mb-4">
|
||||
<span class="block text-sm text-[var(--text-secondary)] mb-2"
|
||||
>When budget is exceeded</span
|
||||
>
|
||||
<div class="flex gap-2" role="group" aria-label="Budget action">
|
||||
<button
|
||||
onclick={() => (config.budget_action = "warn")}
|
||||
class="flex-1 px-3 py-2 rounded-lg border transition-colors text-sm {config.budget_action ===
|
||||
'warn'
|
||||
? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
|
||||
: 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
|
||||
>
|
||||
Warn Only
|
||||
</button>
|
||||
<button
|
||||
onclick={() => (config.budget_action = "block")}
|
||||
class="flex-1 px-3 py-2 rounded-lg border transition-colors text-sm {config.budget_action ===
|
||||
'block'
|
||||
? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
|
||||
: 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
|
||||
>
|
||||
Block Input
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-[var(--text-tertiary)] mt-2">
|
||||
{config.budget_action === "warn"
|
||||
? "Show a warning but allow continued usage"
|
||||
: "Prevent sending more messages until session is reset"}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Cost History Section -->
|
||||
<section class="mb-6">
|
||||
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
||||
Cost History
|
||||
</h3>
|
||||
<CostSummary />
|
||||
</section>
|
||||
|
||||
<!-- Notifications Section -->
|
||||
<section class="mb-6">
|
||||
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
||||
|
||||
@@ -0,0 +1,402 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
costTrackingStore,
|
||||
formattedCosts,
|
||||
formatCost,
|
||||
type CostSummary,
|
||||
type CostAlertThresholds,
|
||||
} from "$lib/stores/costTracking";
|
||||
|
||||
let selectedPeriod = $state<7 | 30 | 90>(7);
|
||||
let summary = $state<CostSummary | null>(null);
|
||||
let isLoading = $state(false);
|
||||
let showThresholdSettings = $state(false);
|
||||
let thresholds = $state<CostAlertThresholds>({
|
||||
daily: null,
|
||||
weekly: null,
|
||||
monthly: null,
|
||||
});
|
||||
|
||||
const costs = $derived($formattedCosts);
|
||||
|
||||
async function loadSummary() {
|
||||
isLoading = true;
|
||||
summary = await costTrackingStore.getSummary(selectedPeriod);
|
||||
isLoading = false;
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
const csv = await costTrackingStore.exportCsv(selectedPeriod);
|
||||
if (csv) {
|
||||
const blob = new Blob([csv], { type: "text/csv" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `hikari-costs-${selectedPeriod}days.csv`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveThresholds() {
|
||||
await costTrackingStore.setAlertThresholds(thresholds);
|
||||
showThresholdSettings = false;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
loadSummary();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="cost-summary">
|
||||
<h3 class="summary-title">Cost Summary</h3>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<div class="quick-stats">
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Today</span>
|
||||
<span class="stat-value">{costs.today}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">This Week</span>
|
||||
<span class="stat-value">{costs.week}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">This Month</span>
|
||||
<span class="stat-value">{costs.month}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Period Selector -->
|
||||
<div class="period-selector">
|
||||
<button
|
||||
class="period-btn"
|
||||
class:active={selectedPeriod === 7}
|
||||
onclick={() => (selectedPeriod = 7)}
|
||||
>
|
||||
7 Days
|
||||
</button>
|
||||
<button
|
||||
class="period-btn"
|
||||
class:active={selectedPeriod === 30}
|
||||
onclick={() => (selectedPeriod = 30)}
|
||||
>
|
||||
30 Days
|
||||
</button>
|
||||
<button
|
||||
class="period-btn"
|
||||
class:active={selectedPeriod === 90}
|
||||
onclick={() => (selectedPeriod = 90)}
|
||||
>
|
||||
90 Days
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Summary Details -->
|
||||
{#if isLoading}
|
||||
<div class="loading">Loading...</div>
|
||||
{:else if summary}
|
||||
<div class="summary-details">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Total Cost</span>
|
||||
<span class="detail-value highlight">{formatCost(summary.total_cost)}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Average Daily</span>
|
||||
<span class="detail-value">{formatCost(summary.average_daily_cost)}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Messages</span>
|
||||
<span class="detail-value">{summary.total_messages.toLocaleString()}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Sessions</span>
|
||||
<span class="detail-value">{summary.total_sessions.toLocaleString()}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Input Tokens</span>
|
||||
<span class="detail-value">{summary.total_input_tokens.toLocaleString()}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Output Tokens</span>
|
||||
<span class="detail-value">{summary.total_output_tokens.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Daily Breakdown (mini chart) -->
|
||||
{#if summary.daily_breakdown.length > 0}
|
||||
<div class="chart-section">
|
||||
<h4 class="chart-title">Daily Spending</h4>
|
||||
<div class="mini-chart">
|
||||
{#each summary.daily_breakdown.slice(-14) as day (day.date)}
|
||||
{@const maxCost = Math.max(...summary.daily_breakdown.map((d) => d.cost_usd), 0.01)}
|
||||
{@const height = (day.cost_usd / maxCost) * 100}
|
||||
<div class="chart-bar-container" title="{day.date}: {formatCost(day.cost_usd)}">
|
||||
<div class="chart-bar" style="height: {height}%"></div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="actions">
|
||||
<button class="action-btn" onclick={handleExport}> Export CSV </button>
|
||||
<button class="action-btn" onclick={() => (showThresholdSettings = !showThresholdSettings)}>
|
||||
Set Alerts
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Threshold Settings -->
|
||||
{#if showThresholdSettings}
|
||||
<div class="threshold-settings">
|
||||
<h4>Cost Alert Thresholds</h4>
|
||||
<div class="threshold-row">
|
||||
<label for="daily-threshold">Daily</label>
|
||||
<input
|
||||
id="daily-threshold"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="e.g., 1.00"
|
||||
bind:value={thresholds.daily}
|
||||
/>
|
||||
</div>
|
||||
<div class="threshold-row">
|
||||
<label for="weekly-threshold">Weekly</label>
|
||||
<input
|
||||
id="weekly-threshold"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="e.g., 5.00"
|
||||
bind:value={thresholds.weekly}
|
||||
/>
|
||||
</div>
|
||||
<div class="threshold-row">
|
||||
<label for="monthly-threshold">Monthly</label>
|
||||
<input
|
||||
id="monthly-threshold"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="e.g., 20.00"
|
||||
bind:value={thresholds.monthly}
|
||||
/>
|
||||
</div>
|
||||
<button class="save-btn" onclick={handleSaveThresholds}>Save Thresholds</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cost-summary {
|
||||
padding: 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.quick-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-primary);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.period-selector {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.period-btn {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-secondary);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.period-btn:hover {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.period-btn.active {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.summary-details {
|
||||
background: var(--bg-primary);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.25rem 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.detail-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-value.highlight {
|
||||
color: var(--accent-primary);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.mini-chart {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
height: 60px;
|
||||
background: var(--bg-primary);
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.chart-bar-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.chart-bar {
|
||||
width: 100%;
|
||||
background: var(--accent-primary);
|
||||
border-radius: 2px 2px 0 0;
|
||||
min-height: 2px;
|
||||
transition: height 0.3s;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.threshold-settings {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.threshold-settings h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.threshold-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.threshold-row label {
|
||||
width: 60px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.threshold-row input {
|
||||
flex: 1;
|
||||
padding: 0.4rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
@@ -26,6 +26,7 @@
|
||||
type SlashCommand,
|
||||
} from "$lib/commands/slashCommands";
|
||||
import { configStore, isStreamerMode } from "$lib/stores/config";
|
||||
import { stats, estimateMessageCost, formatTokenCount } from "$lib/stores/stats";
|
||||
import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
|
||||
import SnippetLibraryPanel from "$lib/components/SnippetLibraryPanel.svelte";
|
||||
import QuickActionsPanel from "$lib/components/QuickActionsPanel.svelte";
|
||||
@@ -50,6 +51,13 @@
|
||||
let showClipboardHistory = $state(false);
|
||||
let streamerModeActive = $state(false);
|
||||
|
||||
// Cost estimation for pre-submission display
|
||||
let costEstimate = $derived(
|
||||
inputValue.trim()
|
||||
? estimateMessageCost(inputValue, $stats.context_tokens_used, $stats.model)
|
||||
: null
|
||||
);
|
||||
|
||||
// Context menu state
|
||||
let textareaElement: HTMLTextAreaElement | undefined = $state();
|
||||
let contextMenuShow = $state(false);
|
||||
@@ -913,6 +921,13 @@ User: ${formattedMessage}`;
|
||||
</div>
|
||||
|
||||
<div class="button-wrapper">
|
||||
{#if costEstimate && isConnected && !isProcessing}
|
||||
<div class="cost-estimate" title="Estimated input cost for this message">
|
||||
<span class="cost-tokens">+{formatTokenCount(costEstimate.messageTokens)}</span>
|
||||
<span class="cost-value">${costEstimate.estimatedCost.toFixed(4)}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button type="button" onclick={handleFilePicker} class="attach-button" title="Attach files">
|
||||
<svg
|
||||
width="20"
|
||||
@@ -1138,6 +1153,28 @@ User: ${formattedMessage}`;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cost-estimate {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
min-width: 60px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.cost-tokens {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.cost-value {
|
||||
font-family: var(--font-mono, monospace);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.attach-button {
|
||||
|
||||
@@ -1,8 +1,84 @@
|
||||
<script lang="ts">
|
||||
import { formattedStats } from "$lib/stores/stats";
|
||||
import {
|
||||
formattedStats,
|
||||
contextWarning,
|
||||
getContextWarningMessage,
|
||||
stats,
|
||||
checkBudget,
|
||||
getBudgetStatusMessage,
|
||||
getRemainingTokenBudget,
|
||||
getRemainingCostBudget,
|
||||
} from "$lib/stores/stats";
|
||||
import { configStore } from "$lib/stores/config";
|
||||
import { costTrackingStore, formattedCosts } from "$lib/stores/costTracking";
|
||||
import { fade } from "svelte/transition";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let showToolsBreakdown = false;
|
||||
interface Props {
|
||||
onRequestSummary?: () => void;
|
||||
onStartFreshWithContext?: () => void;
|
||||
isSummarising?: boolean;
|
||||
}
|
||||
|
||||
let { onRequestSummary, onStartFreshWithContext, isSummarising = false }: Props = $props();
|
||||
|
||||
let showToolsBreakdown = $state(false);
|
||||
let showHistoricalCosts = $state(false);
|
||||
const historicalCosts = $derived($formattedCosts);
|
||||
|
||||
// Initialize cost tracking on mount
|
||||
onMount(() => {
|
||||
costTrackingStore.refresh();
|
||||
});
|
||||
|
||||
// Subscribe to config store
|
||||
const config = configStore.config;
|
||||
|
||||
const warning = $derived($contextWarning);
|
||||
|
||||
// Budget tracking - must be defined before showCompactionOptions
|
||||
const budgetStatus = $derived(
|
||||
checkBudget(
|
||||
$stats,
|
||||
$config.budget_enabled,
|
||||
$config.session_token_budget,
|
||||
$config.session_cost_budget,
|
||||
$config.budget_warning_threshold
|
||||
)
|
||||
);
|
||||
const budgetMessage = $derived(getBudgetStatusMessage(budgetStatus));
|
||||
|
||||
// Show compaction options when context or budget is at warning/critical levels
|
||||
const showCompactionOptions = $derived(
|
||||
warning === "high" ||
|
||||
warning === "critical" ||
|
||||
budgetStatus.type === "warning" ||
|
||||
budgetStatus.type === "exceeded"
|
||||
);
|
||||
|
||||
const remainingTokens = $derived(getRemainingTokenBudget($stats, $config.session_token_budget));
|
||||
const remainingCost = $derived(getRemainingCostBudget($stats, $config.session_cost_budget));
|
||||
|
||||
// Calculate budget usage percentages for progress bars
|
||||
const tokenBudgetPercent = $derived(() => {
|
||||
const budget = $config.session_token_budget;
|
||||
if (budget === null || budget === 0) return 0;
|
||||
const used = $stats.session_input_tokens + $stats.session_output_tokens;
|
||||
return Math.min(100, (used / budget) * 100);
|
||||
});
|
||||
|
||||
const costBudgetPercent = $derived(() => {
|
||||
const budget = $config.session_cost_budget;
|
||||
if (budget === null || budget === 0) return 0;
|
||||
return Math.min(100, ($stats.session_cost_usd / budget) * 100);
|
||||
});
|
||||
|
||||
// Get the appropriate colour class for the progress bar
|
||||
function getBudgetBarClass(percent: number, warningThreshold: number): string {
|
||||
if (percent >= 100) return "budget-bar-exceeded";
|
||||
if (percent >= warningThreshold * 100) return "budget-bar-warning";
|
||||
return "budget-bar-ok";
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="stats-display" transition:fade={{ duration: 200 }}>
|
||||
@@ -16,6 +92,120 @@
|
||||
<span class="stat-value">{$formattedStats.messagesSession}</span>
|
||||
</div>
|
||||
|
||||
<div class="stats-section">
|
||||
<h3>Context Window</h3>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Used:</span>
|
||||
<span class="stat-value">{$formattedStats.contextUsed} / {$formattedStats.contextLimit}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Utilisation:</span>
|
||||
<span class="stat-value context-util {warning ? `warning-${warning}` : ''}"
|
||||
>{$formattedStats.contextUtilisation}</span
|
||||
>
|
||||
</div>
|
||||
{#if warning}
|
||||
<div class="context-warning warning-{warning}">
|
||||
{getContextWarningMessage(warning)}
|
||||
</div>
|
||||
{/if}
|
||||
{#if showCompactionOptions && (onRequestSummary || onStartFreshWithContext)}
|
||||
<div class="compaction-actions">
|
||||
{#if onRequestSummary}
|
||||
<button
|
||||
class="compaction-btn"
|
||||
onclick={onRequestSummary}
|
||||
disabled={isSummarising}
|
||||
title="Compact conversation history to reduce context usage"
|
||||
>
|
||||
{#if isSummarising}
|
||||
Compacting...
|
||||
{:else}
|
||||
Compact
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
{#if onStartFreshWithContext}
|
||||
<button
|
||||
class="compaction-btn compaction-btn-primary"
|
||||
onclick={onStartFreshWithContext}
|
||||
disabled={isSummarising}
|
||||
title="Start a new conversation with context from this one"
|
||||
>
|
||||
Fresh Start
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $config.budget_enabled}
|
||||
<div class="stats-section">
|
||||
<h3>Budget</h3>
|
||||
{#if $config.session_token_budget !== null}
|
||||
<div class="budget-item">
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Tokens:</span>
|
||||
<span
|
||||
class="stat-value {budgetStatus.type !== 'ok' && budgetStatus.budget_type === 'token'
|
||||
? `budget-${budgetStatus.type}`
|
||||
: ''}"
|
||||
>
|
||||
{($stats.session_input_tokens + $stats.session_output_tokens).toLocaleString()} / {$config.session_token_budget.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div class="budget-bar-container">
|
||||
<div
|
||||
class="budget-bar {getBudgetBarClass(
|
||||
tokenBudgetPercent(),
|
||||
$config.budget_warning_threshold
|
||||
)}"
|
||||
style="width: {tokenBudgetPercent()}%"
|
||||
></div>
|
||||
</div>
|
||||
<div class="budget-remaining">
|
||||
{remainingTokens?.toLocaleString() ?? 0} remaining ({(
|
||||
100 - tokenBudgetPercent()
|
||||
).toFixed(1)}%)
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $config.session_cost_budget !== null}
|
||||
<div class="budget-item">
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Cost:</span>
|
||||
<span
|
||||
class="stat-value {budgetStatus.type !== 'ok' && budgetStatus.budget_type === 'cost'
|
||||
? `budget-${budgetStatus.type}`
|
||||
: ''}"
|
||||
>
|
||||
${$stats.session_cost_usd.toFixed(4)} / ${$config.session_cost_budget.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div class="budget-bar-container">
|
||||
<div
|
||||
class="budget-bar {getBudgetBarClass(
|
||||
costBudgetPercent(),
|
||||
$config.budget_warning_threshold
|
||||
)}"
|
||||
style="width: {costBudgetPercent()}%"
|
||||
></div>
|
||||
</div>
|
||||
<div class="budget-remaining">
|
||||
${remainingCost?.toFixed(4) ?? "0.0000"} remaining ({(
|
||||
100 - costBudgetPercent()
|
||||
).toFixed(1)}%)
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if budgetMessage}
|
||||
<div class="budget-warning budget-{budgetStatus.type}">
|
||||
{budgetMessage}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="stats-section">
|
||||
<h3>Tokens & Cost</h3>
|
||||
<div class="stat-row">
|
||||
@@ -49,7 +239,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if Object.keys($formattedStats.sessionToolsUsage).length > 0}
|
||||
{#if $formattedStats.sessionToolsFormatted.length > 0}
|
||||
<div class="stats-section">
|
||||
<h3 class="tools-header">
|
||||
<button class="tools-toggle" onclick={() => (showToolsBreakdown = !showToolsBreakdown)}>
|
||||
@@ -59,17 +249,57 @@
|
||||
</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>
|
||||
{#each $formattedStats.sessionToolsFormatted.sort((a, b) => b.totalTokens - a.totalTokens) as tool (tool.name)}
|
||||
<div class="stat-row stat-detail tool-row">
|
||||
<span class="stat-label">{tool.name}:</span>
|
||||
<span class="stat-value tool-stats">
|
||||
<span class="tool-calls">{tool.callCount} calls</span>
|
||||
{#if tool.totalTokens > 0}
|
||||
<span class="tool-tokens">(~{tool.formattedTokens})</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="tools-note">* Token estimates based on attribution</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Historical Costs Section -->
|
||||
<div class="stats-section">
|
||||
<h3 class="costs-header">
|
||||
<button class="costs-toggle" onclick={() => (showHistoricalCosts = !showHistoricalCosts)}>
|
||||
Historical Costs
|
||||
<span class="toggle-icon">{showHistoricalCosts ? "▼" : "▶"}</span>
|
||||
</button>
|
||||
</h3>
|
||||
{#if !showHistoricalCosts}
|
||||
<div class="costs-quick-stats">
|
||||
<span class="cost-badge" title="Today's cost">Today: {historicalCosts.today}</span>
|
||||
<span class="cost-badge" title="This week's cost">Week: {historicalCosts.week}</span>
|
||||
<span class="cost-badge" title="This month's cost">Month: {historicalCosts.month}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if showHistoricalCosts}
|
||||
<div class="historical-costs-expanded">
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Today:</span>
|
||||
<span class="stat-value cost-value">{historicalCosts.today}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">This Week:</span>
|
||||
<span class="stat-value cost-value">{historicalCosts.week}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">This Month:</span>
|
||||
<span class="stat-value cost-value">{historicalCosts.month}</span>
|
||||
</div>
|
||||
<p class="costs-note">Open Settings to view detailed cost history and set alerts.</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="model-info">
|
||||
<span class="model-label">Model:</span>
|
||||
<span class="model-value">{$formattedStats.model}</span>
|
||||
@@ -128,6 +358,79 @@
|
||||
color: var(--text-primary, #e5e7eb);
|
||||
}
|
||||
|
||||
.stat-cost {
|
||||
font-family: var(--font-mono, monospace);
|
||||
color: var(--accent-primary, #10b981);
|
||||
font-size: 0.8rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.125rem 0;
|
||||
}
|
||||
|
||||
.tools-header {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.tools-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tools-toggle:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tools-breakdown {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.tool-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tool-stats {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tool-calls {
|
||||
color: var(--text-primary, #e5e7eb);
|
||||
}
|
||||
|
||||
.tool-tokens {
|
||||
color: var(--text-secondary, #9ca3af);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.tools-note {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-secondary, #9ca3af);
|
||||
font-style: italic;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.model-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -148,4 +451,220 @@
|
||||
color: var(--text-primary, #e5e7eb);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.context-util {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.context-util.warning-moderate {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.context-util.warning-high {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.context-util.warning-critical {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.context-warning {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.context-warning.warning-moderate {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.context-warning.warning-high {
|
||||
background: rgba(249, 115, 22, 0.15);
|
||||
border: 1px solid rgba(249, 115, 22, 0.3);
|
||||
color: #fb923c;
|
||||
}
|
||||
|
||||
.context-warning.warning-critical {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* Budget progress bar styles */
|
||||
.budget-item {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.budget-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.budget-bar-container {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 3px;
|
||||
margin-top: 0.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.budget-bar {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition:
|
||||
width 0.3s ease,
|
||||
background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.budget-bar-ok {
|
||||
background: linear-gradient(90deg, #10b981, #34d399);
|
||||
}
|
||||
|
||||
.budget-bar-warning {
|
||||
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||
}
|
||||
|
||||
.budget-bar-exceeded {
|
||||
background: linear-gradient(90deg, #ef4444, #f87171);
|
||||
}
|
||||
|
||||
.budget-remaining {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.125rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Budget warning styles */
|
||||
.budget-warning {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.budget-warning.budget-warning {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.budget-warning.budget-exceeded {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.stat-value.budget-warning {
|
||||
color: #f59e0b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-value.budget-exceeded {
|
||||
color: #ef4444;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Compaction action buttons */
|
||||
.compaction-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.compaction-btn {
|
||||
flex: 1;
|
||||
padding: 0.375rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.compaction-btn:hover:not(:disabled) {
|
||||
border-color: var(--accent-primary);
|
||||
background: rgba(233, 69, 96, 0.1);
|
||||
}
|
||||
|
||||
.compaction-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.compaction-btn-primary {
|
||||
background: var(--accent-primary);
|
||||
border-color: var(--accent-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.compaction-btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-secondary);
|
||||
border-color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
/* Historical costs styles */
|
||||
.costs-header {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.costs-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.costs-toggle:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.costs-quick-stats {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cost-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
border-radius: 3px;
|
||||
color: #10b981;
|
||||
font-family: var(--font-mono, monospace);
|
||||
}
|
||||
|
||||
.historical-costs-expanded {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.cost-value {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.costs-note {
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -24,6 +24,12 @@
|
||||
import SessionHistoryPanel from "./SessionHistoryPanel.svelte";
|
||||
import GitPanel from "./GitPanel.svelte";
|
||||
import ProfilePanel from "./ProfilePanel.svelte";
|
||||
import { conversationsStore } from "$lib/stores/conversations";
|
||||
import {
|
||||
generateContextInjection,
|
||||
createSummary,
|
||||
sanitizeForJson,
|
||||
} from "$lib/utils/conversationUtils";
|
||||
|
||||
const DISCORD_URL = "https://chat.nhcarrigan.com";
|
||||
const DONATE_URL = "https://donate.nhcarrigan.com";
|
||||
@@ -41,6 +47,7 @@
|
||||
let showSessionHistory = $state(false);
|
||||
let showGitPanel = $state(false);
|
||||
let showProfile = $state(false);
|
||||
let isSummarising = $state(false);
|
||||
const progress = $derived($achievementProgress);
|
||||
let currentConfig: HikariConfig = $state({
|
||||
model: null,
|
||||
@@ -74,6 +81,11 @@
|
||||
text_secondary: null,
|
||||
border_color: null,
|
||||
},
|
||||
budget_enabled: false,
|
||||
session_token_budget: null,
|
||||
session_cost_budget: null,
|
||||
budget_action: "warn",
|
||||
budget_warning_threshold: 0.8,
|
||||
});
|
||||
|
||||
let streamerModeActive = $state(false);
|
||||
@@ -200,6 +212,106 @@
|
||||
function toggleAchievements() {
|
||||
onToggleAchievements();
|
||||
}
|
||||
|
||||
async function handleCompactConversation() {
|
||||
const activeId = get(conversationsStore.activeConversationId);
|
||||
if (!activeId) return;
|
||||
|
||||
isSummarising = true;
|
||||
|
||||
try {
|
||||
const conversationContent = conversationsStore.getConversationForSummary(activeId);
|
||||
const messageCount =
|
||||
get(conversationsStore.activeConversation)?.terminalLines.filter(
|
||||
(l) => l.type === "user" || l.type === "assistant"
|
||||
).length || 0;
|
||||
const tokenEstimate = conversationsStore.estimateTokenCount(activeId);
|
||||
|
||||
// Create a summary from the conversation content (truncate if too long)
|
||||
// Apply sanitization early to handle any problematic escape sequences
|
||||
const sanitizedContent = sanitizeForJson(conversationContent);
|
||||
const summaryContent =
|
||||
sanitizedContent.length > 4000
|
||||
? `${sanitizedContent.slice(0, 4000)}\n\n[Truncated for length - original had ${messageCount} messages]`
|
||||
: sanitizedContent;
|
||||
|
||||
// Step 1: Disconnect from Claude to reset context
|
||||
if (connectionStatus === "connected") {
|
||||
await invoke("stop_claude", { conversationId: activeId });
|
||||
}
|
||||
|
||||
// Step 2: Clear messages and store summary
|
||||
conversationsStore.compactWithSummary(activeId, summaryContent, messageCount, tokenEstimate);
|
||||
|
||||
// Step 3: Reconnect to Claude with fresh context
|
||||
const allAllowedTools = [
|
||||
...(currentConfig.auto_granted_tools || []),
|
||||
...Array.from(get(claudeStore.grantedTools)),
|
||||
];
|
||||
|
||||
await invoke("start_claude", {
|
||||
conversationId: activeId,
|
||||
options: {
|
||||
working_dir: workingDirectory || selectedDirectory,
|
||||
model: currentConfig.model || null,
|
||||
api_key: currentConfig.api_key || null,
|
||||
custom_instructions: currentConfig.custom_instructions || null,
|
||||
mcp_servers_json: currentConfig.mcp_servers_json || null,
|
||||
allowed_tools: allAllowedTools,
|
||||
},
|
||||
});
|
||||
|
||||
// Step 4: Send the context summary to Claude as the first message
|
||||
const contextPrompt = generateContextInjection(
|
||||
createSummary(summaryContent, messageCount, tokenEstimate)
|
||||
);
|
||||
|
||||
await invoke("send_prompt", {
|
||||
conversationId: activeId,
|
||||
message: contextPrompt,
|
||||
});
|
||||
|
||||
claudeStore.addLine(
|
||||
"system",
|
||||
"Conversation compacted. Context from previous session has been provided to Claude."
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to compact conversation:", error);
|
||||
claudeStore.addLine("error", `Failed to compact conversation: ${error}`);
|
||||
} finally {
|
||||
isSummarising = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStartFreshWithContext() {
|
||||
const activeId = get(conversationsStore.activeConversationId);
|
||||
if (!activeId) return;
|
||||
|
||||
const conversationContent = conversationsStore.getConversationForSummary(activeId);
|
||||
const messageCount =
|
||||
get(conversationsStore.activeConversation)?.terminalLines.filter(
|
||||
(l) => l.type === "user" || l.type === "assistant"
|
||||
).length || 0;
|
||||
const tokenEstimate = conversationsStore.estimateTokenCount(activeId);
|
||||
|
||||
const summary = createSummary(
|
||||
`This is a continuation of a previous conversation. Here's what was discussed:\n\n${conversationContent.slice(0, 4000)}${conversationContent.length > 4000 ? "\n\n[Truncated for length...]" : ""}`,
|
||||
messageCount,
|
||||
tokenEstimate
|
||||
);
|
||||
|
||||
const newConvId = conversationsStore.createConversation("Fresh Start");
|
||||
|
||||
conversationsStore.setSummary(newConvId, summary);
|
||||
|
||||
// Context injection is generated but the actual injection happens via the summary
|
||||
generateContextInjection(summary);
|
||||
claudeStore.addLine("system", "Started fresh conversation with context from previous session.");
|
||||
claudeStore.addLine(
|
||||
"system",
|
||||
`Previous session had ${messageCount} messages (~${tokenEstimate.toLocaleString()} tokens).`
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -446,7 +558,11 @@
|
||||
|
||||
{#if showStats}
|
||||
<div class="absolute top-full right-0 mt-2 mr-4 z-50">
|
||||
<StatsDisplay />
|
||||
<StatsDisplay
|
||||
onRequestSummary={handleCompactConversation}
|
||||
onStartFreshWithContext={handleStartFreshWithContext}
|
||||
{isSummarising}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if connectionStatus === "connected"}
|
||||
@@ -473,7 +589,11 @@
|
||||
<!-- 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 />
|
||||
<StatsDisplay
|
||||
onRequestSummary={handleCompactConversation}
|
||||
onStartFreshWithContext={handleStartFreshWithContext}
|
||||
{isSummarising}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -211,6 +211,16 @@
|
||||
{#each lines as line (line.id)}
|
||||
<div class="terminal-line mb-2 {getLineClass(line.type)} relative group">
|
||||
<span class="terminal-timestamp text-xs mr-2">{formatTime(line.timestamp)}</span>
|
||||
{#if line.cost && line.cost.costUsd > 0}
|
||||
<span
|
||||
class="terminal-cost text-xs mr-2"
|
||||
title="Input: {line.cost.inputTokens} | Output: {line.cost.outputTokens}"
|
||||
>
|
||||
${line.cost.costUsd < 0.01
|
||||
? line.cost.costUsd.toFixed(4)
|
||||
: line.cost.costUsd.toFixed(3)}
|
||||
</span>
|
||||
{/if}
|
||||
{#if getLinePrefix(line.type)}
|
||||
<span class="terminal-prefix mr-2">{getLinePrefix(line.type)}</span>
|
||||
{/if}
|
||||
@@ -291,6 +301,14 @@
|
||||
color: var(--text-tertiary, #6b7280);
|
||||
}
|
||||
|
||||
.terminal-cost {
|
||||
color: var(--terminal-cost, #10b981);
|
||||
background: var(--terminal-cost-bg, rgba(16, 185, 129, 0.1));
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.terminal-prefix {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user