feat: key usage panel — display usage data for Claude, OpenCode, and Copilot

Adds 'Key Usage' to the sidebar dropdown with per-provider live usage:
- Claude: 5-hour and weekly utilization bars with reset timestamps
  (normalizes Anthropic's 0-100% API response to 0-1 internally)
- OpenCode: Scrapes usage from workspace page via OPENCODE_COOKIE
  session cookie, mapping key IDs to OPENCODE_WS1_ID/OPENCODE_WS2_ID
- Copilot: Fetches from api.github.com/copilot_internal/user with
  entitlement/remaining/quota reset tracking

New files: opencode.ts, copilot.ts (usage fetchers), KeyUsage.svelte
New route: GET /models/key-usage?keyId=X dispatches by provider

1 files changed, 5 insertions, 2 deletions

diff --git a/packages/frontend/src/lib/components/SidebarPanel.svelte b/packages/frontend/src/lib/components/SidebarPanel.svelte
index fe92486..2184818 100644
--- a/packages/frontend/src/lib/components/SidebarPanel.svelte
+++ b/packages/frontend/src/lib/components/SidebarPanel.svelte
@@ -4,6 +4,7 @@
 	import ConfigPanel from "./ConfigPanel.svelte";
 	import SkillsBrowser from "./SkillsBrowser.svelte";
 	import PermissionLog from "./PermissionLog.svelte";
+	import KeyUsage from "./KeyUsage.svelte";
 	import type { TaskItem, LogEntry, KeyInfo, ModelInfo } from "../types.js";
 
 	const {
@@ -24,7 +25,7 @@
 
 	let selected = $state("Tasks");
 
-	const options = ["Model Status", "Tasks", "Config", "Skills", "Permission Log"];
+	const options = ["Key Usage", "Model Status", "Tasks", "Config", "Skills", "Permission Log"];
 </script>
 
 <div class="bg-base-200 rounded-lg p-3">
@@ -38,7 +39,9 @@
 	</select>
 
 	<div class="mt-2">
-		{#if selected === "Model Status"}
+		{#if selected === "Key Usage"}
+			<KeyUsage {keys} {apiBase} />
+		{:else if selected === "Model Status"}
 			<ModelStatus {models} {keys} {tags} />
 		{:else if selected === "Tasks"}
 			<TaskListPanel {tasks} />