Verbrauch-Tab: Tokens/Kosten pro Pool und Projekt aus Transcripts

- usage_stats: streamt <pool>/projects/*/*.jsonl, zählt message.usage,
  Dedup über message.id+requestId, Zeitfilter (eigener RFC3339-Parser),
  Projektpfad-Mapping wie claudes Ordnerkodierung
- Preistabelle je Modell (Fable/Opus/Sonnet/Haiku, Cache 1.25x/0.1x),
  Kosten als API-Gegenwert ausgewiesen
- UI-Tab mit 7/30-Tage-Filter: Pool-Zeilen aggregiert, Projekte
  aufklappbar darunter, Summenzeile; i18n de/en
- Tests: Aggregation+Dedup+Zeitfilter, leerer Fall, parse_ts-Referenz

src/App.vue

@@ -4,9 +4,10 @@ import { enable, disable, isEnabled } from "@tauri-apps/plugin-autostart";
 import { useI18n } from "vue-i18n";
 import ProjectList from "./components/ProjectList.vue";
 import PoolList from "./components/PoolList.vue";
+import UsageList from "./components/UsageList.vue";
 import { setLocale } from "./i18n";
 
-const tab = ref<"projects" | "pools">("projects");
+const tab = ref<"projects" | "pools" | "usage">("projects");
 const autostart = ref(false);
 const { locale } = useI18n();
 
@@ -34,6 +35,9 @@ async function toggleAutostart() {
       <button :class="{ active: tab === 'pools' }" @click="tab = 'pools'">
         {{ $t("app.pools") }}
       </button>
+      <button :class="{ active: tab === 'usage' }" @click="tab = 'usage'">
+        {{ $t("app.usage") }}
+      </button>
     </nav>
     <div class="header-right">
       <div class="lang">
@@ -48,6 +52,7 @@ async function toggleAutostart() {
   </header>
   <main>
     <ProjectList v-if="tab === 'projects'" />
-    <PoolList v-else />
+    <PoolList v-else-if="tab === 'pools'" />
+    <UsageList v-else />
   </main>
 </template>