nav: icon tabs, and a roomier bid token cap

Chat and metrics tabs become a speech bubble and a bar chart -- the
analytics glyph SaaS dashboards use -- keeping the orange active state
and adding aria-label/title so the words aren't lost.

max_bid_tokens 3500 -> 5000, since the cap only bites on the winning
speculative drafts.

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

backend/app/config.py

@@ -1,4 +1,4 @@
-"""Central configuration for AuctionRouter.
+"""Central configuration for GAVL.
 
 All model choices, auction weights, and thresholds from the PRD live here so
 they can be tuned without touching pipeline code.
@@ -225,7 +225,7 @@ class Settings(BaseSettings):
     max_answer_tokens: int = 3500
     # Bids without a speculative answer stay ~100 tokens; the cap only
     # bites on answer-carrying bids (which are the winning drafts)
-    max_bid_tokens: int = 3500
+    max_bid_tokens: int = 5000
 
     # Conversation history caps per pipeline stage (turns are single
     # messages, so 4 turns = 2 user/assistant exchanges)

frontend/app/page.tsx

@@ -5,6 +5,7 @@ import { AccessGate } from "@/components/AccessGate";
 import { AuctionPanel } from "@/components/AuctionPanel";
 import { BidArcade } from "@/components/BidArcade";
 import { Chat } from "@/components/Chat";
+import { ChatIcon, MetricsIcon } from "@/components/icons";
 import { MetricsDashboard } from "@/components/MetricsDashboard";
 import { RoutingGraph } from "@/components/RoutingGraph";
 import { VerificationPanel } from "@/components/VerificationPanel";
@@ -55,17 +56,23 @@ export default function Home() {
           <span className="blink text-orange-500">_</span>
         </h1>
         <nav className="flex gap-2">
-          {(["chat", "metrics"] as Tab[]).map((t) => (
+          {([
+            ["chat", ChatIcon] as const,
+            ["metrics", MetricsIcon] as const,
+          ]).map(([t, Icon]) => (
             <button
               key={t}
               onClick={() => setTab(t)}
-              className={`rounded px-2.5 py-1.5 font-[family-name:var(--font-pixel)] text-[10px] uppercase sm:px-4 sm:py-2 sm:text-[12px] ${
+              aria-label={t}
+              aria-current={tab === t ? "page" : undefined}
+              title={t === "chat" ? "Chat" : "Metrics"}
+              className={`rounded p-2 sm:p-2.5 ${
                 tab === t
                   ? "glow-text bg-orange-950 text-orange-400"
                   : "bg-stone-900 text-stone-500 hover:text-stone-300"
               }`}
             >
-              {tab === t ? `▶ ${t}` : t}
+              <Icon className="h-4 w-4 sm:h-5 sm:w-5" />
             </button>
           ))}
         </nav>

frontend/components/icons.tsx

@@ -55,6 +55,27 @@ export function RegenerateIcon({ className = "h-4 w-4" }: { className?: string }
   );
 }
 
+/** Rounded speech bubble — the chat tab. */
+export function ChatIcon({ className = "h-4 w-4" }: { className?: string }) {
+  return (
+    <Svg className={className}>
+      <path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9.6 9.6 0 0 1-2.9-.4L3 21l1.6-4.7A8.1 8.1 0 0 1 3.6 11.5a8.4 8.4 0 0 1 9-8.4 8.4 8.4 0 0 1 8.4 8.4Z" />
+    </Svg>
+  );
+}
+
+/** Ascending bar chart — the analytics glyph every SaaS dashboard uses. */
+export function MetricsIcon({ className = "h-4 w-4" }: { className?: string }) {
+  return (
+    <Svg className={className}>
+      <line x1="3" y1="21" x2="21" y2="21" />
+      <line x1="7" y1="21" x2="7" y2="14" />
+      <line x1="12" y1="21" x2="12" y2="10" />
+      <line x1="17" y1="21" x2="17" y2="5" />
+    </Svg>
+  );
+}
+
 /** Pencil — edit an existing prompt. */
 export function PencilIcon({ className = "h-4 w-4" }: { className?: string }) {
   return (