hikari-desktop/src/lib/components/CostSummary.svelte

<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>