Merge main into massive-terminal-upgrade

Resolves merge conflicts:
- apps/server/src/routes/terminal/common.ts: Keep randomBytes import, use @automaker/utils for createLogger
- apps/ui/eslint.config.mjs: Use main's explicit globals list with XMLHttpRequest and MediaQueryListEvent additions
- apps/ui/src/components/views/terminal-view.tsx: Keep our terminal improvements (killAllSessions, beforeunload, better error handling)
- apps/ui/src/config/terminal-themes.ts: Keep our search highlight colors for all themes
- apps/ui/src/store/app-store.ts: Keep our terminal settings persistence improvements (merge function)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/ui/src/components/views/settings-view/api-keys/authentication-status-display.tsx

@@ -1,12 +1,6 @@
-import { Label } from "@/components/ui/label";
-import {
-  CheckCircle2,
-  AlertCircle,
-  Info,
-  Terminal,
-  Sparkles,
-} from "lucide-react";
-import type { ClaudeAuthStatus } from "@/store/setup-store";
+import { Label } from '@/components/ui/label';
+import { CheckCircle2, AlertCircle, Info, Terminal } from 'lucide-react';
+import type { ClaudeAuthStatus } from '@/store/setup-store';
 
 interface AuthenticationStatusDisplayProps {
   claudeAuthStatus: ClaudeAuthStatus | null;
@@ -39,35 +33,29 @@ export function AuthenticationStatusDisplay({
         <div className="p-3 rounded-lg bg-card border border-border">
           <div className="flex items-center gap-2 mb-1.5">
             <Terminal className="w-4 h-4 text-brand-500" />
-            <span className="text-sm font-medium text-foreground">
-              Claude (Anthropic)
-            </span>
+            <span className="text-sm font-medium text-foreground">Claude (Anthropic)</span>
           </div>
           <div className="space-y-1.5 text-xs min-h-12">
             {claudeAuthStatus?.authenticated ? (
               <>
                 <div className="flex items-center gap-2">
                   <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
-                  <span className="text-green-400 font-medium">
-                    Authenticated
-                  </span>
+                  <span className="text-green-400 font-medium">Authenticated</span>
                 </div>
                 <div className="flex items-center gap-2 text-muted-foreground">
                   <Info className="w-3 h-3 shrink-0" />
                   <span>
-                    {claudeAuthStatus.method === "oauth_token"
-                      ? "Using stored OAuth token (subscription)"
-                      : claudeAuthStatus.method === "api_key_env"
-                      ? "Using ANTHROPIC_API_KEY"
-                      : claudeAuthStatus.method === "api_key"
-                      ? "Using stored API key"
-                      : claudeAuthStatus.method === "credentials_file"
-                      ? "Using credentials file"
-                      : claudeAuthStatus.method === "cli_authenticated"
-                      ? "Using Claude CLI authentication"
-                      : `Using ${
-                          claudeAuthStatus.method || "detected"
-                        } authentication`}
+                    {claudeAuthStatus.method === 'oauth_token'
+                      ? 'Using stored OAuth token (subscription)'
+                      : claudeAuthStatus.method === 'api_key_env'
+                        ? 'Using ANTHROPIC_API_KEY'
+                        : claudeAuthStatus.method === 'api_key'
+                          ? 'Using stored API key'
+                          : claudeAuthStatus.method === 'credentials_file'
+                            ? 'Using credentials file'
+                            : claudeAuthStatus.method === 'cli_authenticated'
+                              ? 'Using Claude CLI authentication'
+                              : `Using ${claudeAuthStatus.method || 'detected'} authentication`}
                   </span>
                 </div>
               </>

apps/ui/src/components/views/settings-view/api-keys/claude-usage-section.tsx

@@ -0,0 +1,42 @@
+import { cn } from '@/lib/utils';
+
+export function ClaudeUsageSection() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-green-500/20 to-green-600/10 flex items-center justify-center border border-green-500/20">
+            <div className="w-5 h-5 rounded-full bg-green-500/50" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Claude Usage Tracking
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Track your Claude Code usage limits. Uses the Claude CLI for data.
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Info about CLI requirement */}
+        <div className="rounded-lg bg-secondary/30 p-3 text-xs text-muted-foreground space-y-2 border border-border/50">
+          <p>Usage tracking requires Claude Code CLI to be installed and authenticated:</p>
+          <ol className="list-decimal list-inside space-y-1 ml-1">
+            <li>Install Claude Code CLI if not already installed</li>
+            <li>
+              Run <code className="font-mono bg-muted px-1 rounded">claude login</code> to
+              authenticate
+            </li>
+            <li>Usage data will be fetched automatically every ~minute</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/settings-view/api-keys/hooks/index.ts

@@ -0,0 +1 @@
+export { useApiKeyManagement } from './use-api-key-management';

apps/ui/src/components/views/settings-view/api-keys/index.ts

@@ -0,0 +1,4 @@
+export { ApiKeyField } from './api-key-field';
+export { ApiKeysSection } from './api-keys-section';
+export { AuthenticationStatusDisplay } from './authentication-status-display';
+export { SecurityNotice } from './security-notice';