feat(web): add context window support to dashboard config

- Add GET /api/model/info endpoint that resolves model metadata using the
  same 10-step context-length detection chain the agent uses. Returns
  auto-detected context length, config override, effective value, and
  model capabilities (tools, vision, reasoning, max output, model family).

- Surface model.context_length as model_context_length virtual field in
  the config normalize/denormalize cycle. 0 = auto-detect (default),
  positive value overrides. Writing 0 removes context_length from the
  model dict on disk.

- Add ModelInfoCard component showing resolved context window (e.g. '1M
  auto-detected' or '500K override — auto: 1M'), max output tokens, and
  colored capability badges (Tools, Vision, Reasoning, model family).

- Inject ModelInfoCard between model field and context_length override in
  ConfigPage General tab. Card re-fetches on model change and after save.

- Insert model_context_length right after model in CONFIG_SCHEMA ordering
  so the three elements (model input → info card → override) are adjacent.

web/src/components/ModelInfoCard.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Brain,
+  Eye,
+  Gauge,
+  Lightbulb,
+  Wrench,
+  Loader2,
+} from "lucide-react";
+import { api } from "@/lib/api";
+import type { ModelInfoResponse } from "@/lib/api";
+import { formatTokenCount } from "@/lib/format";
+
+interface ModelInfoCardProps {
+  /** Current model string from config state — used to detect changes */
+  currentModel: string;
+  /** Bumped after config saves to trigger re-fetch */
+  refreshKey?: number;
+}
+
+export function ModelInfoCard({ currentModel, refreshKey = 0 }: ModelInfoCardProps) {
+  const [info, setInfo] = useState<ModelInfoResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const lastFetchKeyRef = useRef("");
+
+  useEffect(() => {
+    if (!currentModel) return;
+    // Re-fetch when model changes OR when refreshKey bumps (after save)
+    const fetchKey = `${currentModel}:${refreshKey}`;
+    if (fetchKey === lastFetchKeyRef.current) return;
+    lastFetchKeyRef.current = fetchKey;
+    setLoading(true);
+    api
+      .getModelInfo()
+      .then(setInfo)
+      .catch(() => setInfo(null))
+      .finally(() => setLoading(false));
+  }, [currentModel, refreshKey]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 py-2 text-xs text-muted-foreground">
+        <Loader2 className="h-3 w-3 animate-spin" />
+        Loading model info…
+      </div>
+    );
+  }
+
+  if (!info || !info.model) return null;
+
+  const caps = info.capabilities;
+  const hasCaps = caps && Object.keys(caps).length > 0;
+
+  return (
+    <div className="rounded-lg border border-border/60 bg-muted/30 px-3 py-2.5 space-y-2">
+      {/* Context window */}
+      <div className="flex items-center gap-4 text-xs">
+        <div className="flex items-center gap-1.5 text-muted-foreground">
+          <Gauge className="h-3.5 w-3.5" />
+          <span className="font-medium">Context Window</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="font-mono font-semibold text-foreground">
+            {formatTokenCount(info.effective_context_length)}
+          </span>
+          {info.config_context_length > 0 ? (
+            <span className="text-amber-500/80 text-[10px]">
+              (override — auto: {formatTokenCount(info.auto_context_length)})
+            </span>
+          ) : (
+            <span className="text-muted-foreground/60 text-[10px]">auto-detected</span>
+          )}
+        </div>
+      </div>
+
+      {/* Max output */}
+      {hasCaps && caps.max_output_tokens && caps.max_output_tokens > 0 && (
+        <div className="flex items-center gap-4 text-xs">
+          <div className="flex items-center gap-1.5 text-muted-foreground">
+            <Lightbulb className="h-3.5 w-3.5" />
+            <span className="font-medium">Max Output</span>
+          </div>
+          <span className="font-mono font-semibold text-foreground">
+            {formatTokenCount(caps.max_output_tokens)}
+          </span>
+        </div>
+      )}
+
+      {/* Capability badges */}
+      {hasCaps && (
+        <div className="flex flex-wrap items-center gap-1.5 pt-0.5">
+          {caps.supports_tools && (
+            <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400">
+              <Wrench className="h-2.5 w-2.5" /> Tools
+            </span>
+          )}
+          {caps.supports_vision && (
+            <span className="inline-flex items-center gap-1 rounded-full bg-blue-500/10 px-2 py-0.5 text-[10px] font-medium text-blue-600 dark:text-blue-400">
+              <Eye className="h-2.5 w-2.5" /> Vision
+            </span>
+          )}
+          {caps.supports_reasoning && (
+            <span className="inline-flex items-center gap-1 rounded-full bg-purple-500/10 px-2 py-0.5 text-[10px] font-medium text-purple-600 dark:text-purple-400">
+              <Brain className="h-2.5 w-2.5" /> Reasoning
+            </span>
+          )}
+          {caps.model_family && (
+            <span className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+              {caps.model_family}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

web/src/lib/api.ts

@@ -43,6 +43,7 @@ export const api = {
   getConfig: () => fetchJSON<Record<string, unknown>>("/api/config"),
   getDefaults: () => fetchJSON<Record<string, unknown>>("/api/config/defaults"),
   getSchema: () => fetchJSON<{ fields: Record<string, unknown>; category_order: string[] }>("/api/config/schema"),
+  getModelInfo: () => fetchJSON<ModelInfoResponse>("/api/model/info"),
   saveConfig: (config: Record<string, unknown>) =>
     fetchJSON<{ ok: boolean }>("/api/config", {
       method: "PUT",
@@ -325,6 +326,24 @@ export interface SessionSearchResponse {
   results: SessionSearchResult[];
 }
 
+// ── Model info types ──────────────────────────────────────────────────
+
+export interface ModelInfoResponse {
+  model: string;
+  provider: string;
+  auto_context_length: number;
+  config_context_length: number;
+  effective_context_length: number;
+  capabilities: {
+    supports_tools?: boolean;
+    supports_vision?: boolean;
+    supports_reasoning?: boolean;
+    context_window?: number;
+    max_output_tokens?: number;
+    model_family?: string;
+  };
+}
+
 // ── OAuth provider types ────────────────────────────────────────────────
 
 export interface OAuthProviderStatus {

web/src/lib/format.ts

@@ -0,0 +1,9 @@
+/**
+ * Format a token count as a human-readable string (e.g. 1M, 128K, 4096).
+ * Strips trailing ".0" for clean round numbers.
+ */
+export function formatTokenCount(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(n % 1_000 === 0 ? 0 : 1)}K`;
+  return String(n);
+}

web/src/pages/AnalyticsPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useCallback } from "react";
+import { formatTokenCount } from "@/lib/format";
 import {
   BarChart3,
   Cpu,
@@ -18,11 +19,7 @@ const PERIODS = [
 
 const CHART_HEIGHT_PX = 160;
 
-function formatTokens(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
-  return String(n);
-}
+const formatTokens = formatTokenCount;
 
 function formatDate(day: string): string {
   try {

web/src/pages/ConfigPage.tsx

@@ -32,6 +32,7 @@ import { getNestedValue, setNestedValue } from "@/lib/nested";
 import { useToast } from "@/hooks/useToast";
 import { Toast } from "@/components/Toast";
 import { AutoField } from "@/components/AutoField";
+import { ModelInfoCard } from "@/components/ModelInfoCard";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -87,6 +88,7 @@ export default function ConfigPage() {
   const [yamlLoading, setYamlLoading] = useState(false);
   const [yamlSaving, setYamlSaving] = useState(false);
   const [activeCategory, setActiveCategory] = useState<string>("");
+  const [modelInfoRefreshKey, setModelInfoRefreshKey] = useState(0);
   const { toast, showToast } = useToast();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -174,6 +176,7 @@ export default function ConfigPage() {
     try {
       await api.saveConfig(config);
       showToast("Configuration saved", "success");
+      setModelInfoRefreshKey((k) => k + 1);
     } catch (e) {
       showToast(`Failed to save: ${e}`, "error");
     } finally {
@@ -186,6 +189,7 @@ export default function ConfigPage() {
     try {
       await api.saveConfigRaw(yamlText);
       showToast("YAML config saved", "success");
+      setModelInfoRefreshKey((k) => k + 1);
       api.getConfig().then(setConfig).catch(() => {});
     } catch (e) {
       showToast(`Failed to save YAML: ${e}`, "error");
@@ -238,6 +242,7 @@ export default function ConfigPage() {
   const renderFields = (fields: [string, Record<string, unknown>][], showCategory = false) => {
     let lastSection = "";
     let lastCat = "";
+    const currentModel = config ? String(getNestedValue(config, "model") ?? "") : "";
     return fields.map(([key, s]) => {
       const parts = key.split(".");
       const section = parts.length > 1 ? parts[0] : "";
@@ -274,6 +279,12 @@ export default function ConfigPage() {
               onChange={(v) => setConfig(setNestedValue(config, key, v))}
             />
           </div>
+          {/* Inject model info card right after the model field */}
+          {key === "model" && currentModel && (
+            <div className="py-1">
+              <ModelInfoCard currentModel={currentModel} refreshKey={modelInfoRefreshKey} />
+            </div>
+          )}
         </div>
       );
     });