@tonyclaw/agent-inspector 2.0.11 → 2.0.12

package/src/components/ProxyViewer.tsx

@@ -1,11 +1,12 @@
 import { type JSX, useCallback, useEffect, useMemo, useRef, useState, Suspense } from "react";
-import { ArrowLeft, Check, Copy, Download, Plus } from "lucide-react";
+import { ArrowDownRight, ArrowLeft, ArrowUpRight, Check, Copy, Download, Plus } from "lucide-react";
 
 import type { CapturedLog } from "../proxy/schemas";
 import { exportLogsAsZip } from "../lib/export-logs";
 import type { TimeDisplayFormat } from "../lib/runtimeConfig";
 import { formatTimestampRange } from "../lib/timeDisplay";
-import { formatTokens } from "../lib/utils";
+import { cn, formatContextWindowTokens, formatTokens } from "../lib/utils";
+import { useProviders } from "../lib/useProviders";
 import packageJson from "../../package.json";
 import { ConversationGroup, groupLogsByConversation } from "./proxy-viewer";
 
@@ -17,8 +18,19 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/t
 import { SettingsDialog } from "./providers/SettingsDialog";
 import { computeCacheTrends } from "./proxy-viewer/cacheTrend";
 import { LazyCompareDrawer } from "./proxy-viewer/lazy";
+import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
 import { buildValidPredecessors } from "./proxy-viewer/viewerState";
 import { useKeyboardNavigation } from "./proxy-viewer/useKeyboardNavigation";
+import { SegmentBar } from "./proxy-viewer/anatomy/SegmentBar";
+import type {
+  ContextHealthLevel,
+  ContextRiskLevel,
+} from "./proxy-viewer/anatomy/contextIntelligence";
+import {
+  buildSessionContextSummary,
+  type SessionContextSummary,
+  type SessionModelContextSummary,
+} from "./proxy-viewer/anatomy/sessionContextSummary";
 
 function truncateSessionId(id: string): string {
   if (id.length <= 30) return id;
@@ -35,6 +47,12 @@ function computeTokenSummary(logs: CapturedLog[]): { totalIn: number; totalOut:
   return { totalIn, totalOut };
 }
 
+export type SessionContextScope = {
+  label: string;
+  logs: CapturedLog[];
+  showBackLink: boolean;
+};
+
 function formatTimeRange(logs: CapturedLog[], timeDisplayFormat: TimeDisplayFormat): string | null {
   const first = logs[0];
   const last = logs[logs.length - 1];
@@ -51,6 +69,173 @@ function getFirstUserAgent(logs: CapturedLog[]): string | null {
   return null;
 }
 
+export function resolveSessionContextScope({
+  pinnedSessionId,
+  selectedSession,
+  sessions,
+  logs,
+}: {
+  pinnedSessionId: string | undefined;
+  selectedSession: string;
+  sessions: readonly string[];
+  logs: readonly CapturedLog[];
+}): SessionContextScope | null {
+  if (pinnedSessionId !== undefined) {
+    const scopedLogs = logs.filter((log) => log.sessionId === pinnedSessionId);
+    if (scopedLogs.length === 0) return null;
+    return { label: pinnedSessionId, logs: scopedLogs, showBackLink: true };
+  }
+
+  if (selectedSession !== "__all__") {
+    const scopedLogs = logs.filter((log) => log.sessionId === selectedSession);
+    if (scopedLogs.length === 0) return null;
+    return { label: selectedSession, logs: scopedLogs, showBackLink: true };
+  }
+
+  const singleSessionId = sessions.length === 1 ? (sessions[0] ?? null) : null;
+  if (singleSessionId !== null) {
+    const allVisibleLogsBelongToSession = logs.every((log) => log.sessionId === singleSessionId);
+    if (allVisibleLogsBelongToSession) {
+      return { label: singleSessionId, logs: [...logs], showBackLink: false };
+    }
+  }
+
+  const allVisibleLogsAreSessionless =
+    sessions.length === 0 && logs.length > 0 && logs.every((log) => log.sessionId === null);
+  if (allVisibleLogsAreSessionless) {
+    return { label: "Visible requests", logs: [...logs], showBackLink: false };
+  }
+
+  return null;
+}
+
+function formatPercent(value: number | null): string {
+  if (value === null) return "Unknown";
+  const percent = value * 100;
+  if (percent >= 10) return `${percent.toFixed(0)}%`;
+  if (percent >= 1) return `${percent.toFixed(1)}%`;
+  if (percent > 0) return "<1%";
+  return "0%";
+}
+
+function formatTrend(value: number | null): string {
+  if (value === null) return "n/a";
+  if (Math.abs(value) < 0.1) return "0%";
+  const sign = value > 0 ? "+" : "";
+  return `${sign}${value.toFixed(1)}%`;
+}
+
+function progressPercent(value: number | null): number {
+  if (value === null || !Number.isFinite(value)) return 0;
+  return Math.min(Math.max(value * 100, 0), 100);
+}
+
+function peakMarkerPercent(
+  latestPercent: number | null,
+  peakPercent: number | null,
+): number | null {
+  if (peakPercent === null) return null;
+  const latest = progressPercent(latestPercent);
+  const peak = progressPercent(peakPercent);
+  if (peak <= 0) return null;
+  if (Math.abs(peak - latest) < 0.5) return null;
+  return peak;
+}
+
+function sessionRiskBarClass(risk: ContextRiskLevel): string {
+  switch (risk) {
+    case "danger":
+      return "bg-red-400";
+    case "watch":
+      return "bg-amber-300";
+    case "unknown":
+      return "bg-muted-foreground/50";
+    case "ok":
+      return "bg-emerald-400";
+  }
+}
+
+function formatContextWindow(summary: SessionModelContextSummary): string {
+  const tokens = summary.latest.contextWindow.tokens;
+  if (tokens === null) return "Window unknown";
+  return `Window ${formatContextWindowTokens(tokens)}`;
+}
+
+function formatLogReference(logId: number): string {
+  return `#${String(logId)}`;
+}
+
+function sessionRiskClass(risk: ContextRiskLevel): string {
+  switch (risk) {
+    case "danger":
+      return "text-red-300";
+    case "watch":
+      return "text-amber-200";
+    case "unknown":
+      return "text-muted-foreground";
+    case "ok":
+      return "text-emerald-300";
+  }
+}
+
+function sessionHealthClass(level: ContextHealthLevel): string {
+  switch (level) {
+    case "risk":
+      return "border-red-400/30 bg-red-500/10 text-red-100";
+    case "optimizable":
+      return "border-amber-400/25 bg-amber-400/8 text-amber-100";
+    case "ok":
+      return "border-emerald-400/25 bg-emerald-400/8 text-emerald-100";
+  }
+}
+
+function sessionHealthLabel(level: ContextHealthLevel): string {
+  switch (level) {
+    case "risk":
+      return "Risk";
+    case "optimizable":
+      return "Optimizable";
+    case "ok":
+      return "OK";
+  }
+}
+
+const LOG_FOCUS_RETRY_LIMIT = 10;
+const LOG_FOCUS_RETRY_DELAY_MS = 80;
+
+function highlightLogTarget(target: HTMLElement): void {
+  target.setAttribute("data-deep-link-highlight", "true");
+  window.setTimeout(() => {
+    target.removeAttribute("data-deep-link-highlight");
+  }, 1800);
+}
+
+function focusLogTarget(logId: number): boolean {
+  const target = document.getElementById(`log-${String(logId)}`);
+  if (!(target instanceof HTMLElement)) return false;
+  target.scrollIntoView({ block: "center", behavior: "smooth" });
+  target.focus({ preventScroll: true });
+  highlightLogTarget(target);
+  return true;
+}
+
+function openLogContext(logId: number): void {
+  dispatchLogFocusRequest({ logId, tab: "anatomy" });
+
+  let attempts = 0;
+  const tryFocus = (): void => {
+    dispatchLogFocusRequest({ logId, tab: "anatomy" });
+    if (focusLogTarget(logId)) return;
+
+    attempts += 1;
+    if (attempts < LOG_FOCUS_RETRY_LIMIT) {
+      window.setTimeout(tryFocus, LOG_FOCUS_RETRY_DELAY_MS);
+    }
+  };
+
+  window.setTimeout(tryFocus, 0);
+}
+
 function CopyableCommand({ command }: { command: string }): JSX.Element {
   const [copied, setCopied] = useState(false);
 
@@ -123,18 +308,213 @@ function McpReadyBadge(): JSX.Element {
   );
 }
 
+function SessionContextLogButton({ label, logId }: { label: string; logId: number }): JSX.Element {
+  return (
+    <button
+      type="button"
+      onClick={() => openLogContext(logId)}
+      className="inline-flex h-5 items-center rounded px-1 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+      title={`Open Context for ${formatLogReference(logId)}`}
+    >
+      {label} {formatLogReference(logId)}
+    </button>
+  );
+}
+
+function SessionContextProgressBar({
+  latestPercent,
+  peakPercent,
+  risk,
+  onOpenContext,
+}: {
+  latestPercent: number | null;
+  peakPercent: number | null;
+  risk: ContextRiskLevel;
+  onOpenContext: () => void;
+}): JSX.Element {
+  const latest = progressPercent(latestPercent);
+  const peakMarker = peakMarkerPercent(latestPercent, peakPercent);
+  const ariaLabel =
+    peakPercent === null
+      ? `Latest context window usage ${formatPercent(latestPercent)}`
+      : `Latest context window usage ${formatPercent(latestPercent)}, peak ${formatPercent(
+          peakPercent,
+        )}`;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpenContext}
+      className="group block w-full rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+      aria-label={`${ariaLabel}. Open latest Context details`}
+      title="Open latest Context details"
+    >
+      <span
+        className="relative block h-2.5 overflow-hidden rounded-full border border-border/70 bg-background transition-colors group-hover:border-foreground/30"
+        role="meter"
+        aria-label={ariaLabel}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={Math.round(latest)}
+      >
+        <span
+          className={cn("block h-full rounded-full transition-[width]", sessionRiskBarClass(risk))}
+          style={{ width: `${latest}%` }}
+        />
+        {peakMarker !== null && (
+          <span
+            className="absolute top-0 h-full w-0.5 rounded-full bg-amber-100/75 shadow-[0_0_0_1px_rgba(0,0,0,0.25)]"
+            style={{ left: `calc(${peakMarker}% - 0.5px)` }}
+            aria-hidden="true"
+          />
+        )}
+      </span>
+    </button>
+  );
+}
+
+function SessionModelContextRow({ summary }: { summary: SessionModelContextSummary }): JSX.Element {
+  const trend = summary.trendPercent;
+  const TrendIcon =
+    trend === null || Math.abs(trend) < 0.1 ? null : trend > 0 ? ArrowUpRight : ArrowDownRight;
+  const diagnosticLabel = summary.latest.diagnostics[0] ?? null;
+  const latestUsage = formatPercent(summary.latest.usagePercent);
+  const peakUsage = formatPercent(summary.peak.usagePercent);
+  const openLatestContext = (): void => {
+    openLogContext(summary.latest.logId);
+  };
+
+  return (
+    <div className="grid gap-x-4 gap-y-2 border-t border-border/60 py-2 first:border-t-0 lg:grid-cols-[minmax(180px,1fr)_minmax(260px,1fr)_minmax(260px,1.4fr)]">
+      <div className="min-w-0">
+        <div className="flex min-w-0 items-center gap-2">
+          <button
+            type="button"
+            onClick={openLatestContext}
+            className="min-w-0 truncate rounded-sm text-left font-mono font-semibold text-foreground transition-colors hover:text-cyan-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+            title={`Open latest Context for ${summary.model}`}
+          >
+            {summary.model}
+          </button>
+          <span
+            className={cn(
+              "inline-flex h-5 shrink-0 items-center rounded border px-1.5 font-mono text-[10px]",
+              sessionHealthClass(summary.latest.health.level),
+            )}
+          >
+            {sessionHealthLabel(summary.latest.health.level)}
+          </span>
+        </div>
+        <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground">
+          <span>{summary.requestCount} req</span>
+          <span>{formatContextWindow(summary)}</span>
+          <span className="truncate" title={summary.latest.contextWindow.label}>
+            {summary.latest.contextWindow.label}
+          </span>
+        </div>
+      </div>
+
+      <div className="min-w-0 space-y-2 text-xs">
+        <SessionContextProgressBar
+          latestPercent={summary.latest.usagePercent}
+          peakPercent={summary.peak.usagePercent}
+          risk={summary.latest.riskLevel}
+          onOpenContext={openLatestContext}
+        />
+        <div className="grid grid-cols-3 gap-2">
+          <div className="min-w-0">
+            <div className="text-[10px] uppercase text-muted-foreground">Latest</div>
+            <div className={cn("mt-0.5 font-mono", sessionRiskClass(summary.latest.riskLevel))}>
+              {latestUsage}
+            </div>
+            <SessionContextLogButton label="Log" logId={summary.latest.logId} />
+          </div>
+          <div className="min-w-0">
+            <div className="text-[10px] uppercase text-muted-foreground">Peak</div>
+            <div className={cn("mt-0.5 font-mono", sessionRiskClass(summary.peak.riskLevel))}>
+              {peakUsage}
+            </div>
+            <SessionContextLogButton label="Log" logId={summary.peak.logId} />
+          </div>
+          <div className="min-w-0">
+            <div className="text-[10px] uppercase text-muted-foreground">Trend</div>
+            <div className="mt-0.5 flex items-center gap-1 font-mono text-foreground">
+              {TrendIcon !== null && (
+                <TrendIcon
+                  className={cn(
+                    "size-3",
+                    trend !== null && trend > 0 ? "text-amber-300" : "text-emerald-300",
+                  )}
+                />
+              )}
+              {formatTrend(trend)}
+            </div>
+            <div className="h-5" aria-hidden="true" />
+          </div>
+        </div>
+      </div>
+
+      <div className="min-w-0 space-y-1.5">
+        <SegmentBar
+          segments={summary.latest.roleSegments}
+          totalTokens={summary.latest.roleTotalTokens}
+          showLabels={false}
+        />
+        <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground">
+          <span className="font-mono">
+            ~{formatTokens(summary.latest.estimatedInputTokens)} input
+          </span>
+          {summary.latest.windowUsedTokens !== null && (
+            <span className="font-mono">~{formatTokens(summary.latest.windowUsedTokens)} used</span>
+          )}
+          {diagnosticLabel !== null && <span className="truncate">{diagnosticLabel}</span>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SessionContextSummaryPanel({
+  summary,
+}: {
+  summary: SessionContextSummary;
+}): JSX.Element | null {
+  if (summary.models.length === 0) return null;
+  return (
+    <div className="mt-3 border-t border-border/70 pt-2">
+      <div className="mb-1 flex items-center justify-between gap-2">
+        <div className="text-[11px] font-semibold uppercase tracking-normal text-muted-foreground">
+          Session Context
+        </div>
+        <div className="font-mono text-[10px] text-muted-foreground">
+          {summary.models.length} model{summary.models.length === 1 ? "" : "s"}
+        </div>
+      </div>
+      <div className="max-h-52 overflow-y-auto pr-1">
+        {summary.models.map((modelSummary) => (
+          <SessionModelContextRow key={modelSummary.model} summary={modelSummary} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function SessionContextBar({
-  sessionId,
+  label,
   logs,
   totalIn,
   totalOut,
   timeDisplayFormat,
+  contextSummary,
+  showBackLink,
 }: {
-  sessionId: string;
+  label: string;
   logs: CapturedLog[];
   totalIn: number;
   totalOut: number;
   timeDisplayFormat: TimeDisplayFormat;
+  contextSummary: SessionContextSummary;
+  showBackLink: boolean;
 }): JSX.Element {
   const [copied, setCopied] = useState(false);
   const timeRange = useMemo(
@@ -151,50 +531,55 @@ function SessionContextBar({
   }, []);
 
   return (
-    <div className="mb-4 flex items-center gap-3 border border-border rounded-md bg-muted/20 px-3 py-2 text-xs">
-      <a
-        href="/"
-        className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-        aria-label="Back to all sessions"
-        title="Back to all sessions"
-      >
-        <ArrowLeft className="size-3.5" />
-      </a>
-      <div className="min-w-0 flex-1">
-        <div className="flex min-w-0 items-center gap-2">
-          <span className="font-mono font-semibold text-purple-400/90 truncate" title={sessionId}>
-            {truncateSessionId(sessionId)}
-          </span>
-          {userAgent !== null && (
-            <span
-              className="font-mono text-muted-foreground truncate max-w-[220px]"
-              title={userAgent}
-            >
-              {userAgent}
+    <div className="mb-4 border border-border rounded-md bg-muted/20 px-3 py-2 text-xs">
+      <div className="flex items-center gap-3">
+        {showBackLink && (
+          <a
+            href="/"
+            className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            aria-label="Back to all sessions"
+            title="Back to all sessions"
+          >
+            <ArrowLeft className="size-3.5" />
+          </a>
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 items-center gap-2">
+            <span className="font-mono font-semibold text-purple-400/90 truncate" title={label}>
+              {truncateSessionId(label)}
             </span>
-          )}
-        </div>
-        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground">
-          <span>
-            {logs.length} request{logs.length !== 1 ? "s" : ""}
-          </span>
-          {timeRange !== null && <span>{timeRange}</span>}
-          {(totalIn > 0 || totalOut > 0) && (
-            <span className="font-mono">
-              {formatTokens(totalIn)} in / {formatTokens(totalOut)} out
+            {userAgent !== null && (
+              <span
+                className="font-mono text-muted-foreground truncate max-w-[220px]"
+                title={userAgent}
+              >
+                {userAgent}
+              </span>
+            )}
+          </div>
+          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground">
+            <span>
+              {logs.length} request{logs.length !== 1 ? "s" : ""}
             </span>
-          )}
+            {timeRange !== null && <span>{timeRange}</span>}
+            {(totalIn > 0 || totalOut > 0) && (
+              <span className="font-mono">
+                {formatTokens(totalIn)} in / {formatTokens(totalOut)} out
+              </span>
+            )}
+          </div>
         </div>
+        <button
+          type="button"
+          onClick={handleCopyLink}
+          className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          aria-label={copied ? "Copied session link" : "Copy session link"}
+          title={copied ? "Copied session link" : "Copy session link"}
+        >
+          {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+        </button>
       </div>
-      <button
-        type="button"
-        onClick={handleCopyLink}
-        className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-        aria-label={copied ? "Copied session link" : "Copy session link"}
-        title={copied ? "Copied session link" : "Copy session link"}
-      >
-        {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
-      </button>
+      <SessionContextSummaryPanel summary={contextSummary} />
     </div>
   );
 }
@@ -246,6 +631,7 @@ export function ProxyViewer({
   pinnedSessionId,
 }: ProxyViewerProps): JSX.Element {
   const { totalIn, totalOut } = useMemo(() => computeTokenSummary(logs), [logs]);
+  const { providers } = useProviders();
   const [exporting, setExporting] = useState(false);
   const [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
   const [crabEntrancePhase, setCrabEntrancePhase] = useState<"hidden" | "playing" | "done">(
@@ -295,7 +681,20 @@ export function ProxyViewer({
   }, []);
 
   const groups = useMemo(() => groupLogsByConversation(logs), [logs]);
-  const hasPinnedSessionContext = pinnedSessionId !== undefined;
+  const sessionContextScope = useMemo(
+    () => resolveSessionContextScope({ pinnedSessionId, selectedSession, sessions, logs }),
+    [logs, pinnedSessionId, selectedSession, sessions],
+  );
+  const sessionContextLogs = sessionContextScope?.logs ?? [];
+  const hasSessionContext = sessionContextScope !== null && sessionContextLogs.length > 0;
+  const { totalIn: sessionContextTotalIn, totalOut: sessionContextTotalOut } = useMemo(
+    () => computeTokenSummary(sessionContextLogs),
+    [sessionContextLogs],
+  );
+  const sessionContextSummary = useMemo(
+    () => buildSessionContextSummary(sessionContextLogs, providers),
+    [sessionContextLogs, providers],
+  );
   const cacheTrends = useMemo(() => computeCacheTrends(groups), [groups]);
   const comparisonPredecessors = useMemo(() => buildValidPredecessors(groups), [groups]);
   const handleCompareWithPrevious = useCallback(
@@ -379,13 +778,15 @@ export function ProxyViewer({
           </div>
         </div>
 
-        {pinnedSessionId !== undefined && (
+        {hasSessionContext && sessionContextScope !== null && (
           <SessionContextBar
-            sessionId={pinnedSessionId}
-            logs={logs}
-            totalIn={totalIn}
-            totalOut={totalOut}
+            label={sessionContextScope.label}
+            logs={sessionContextLogs}
+            totalIn={sessionContextTotalIn}
+            totalOut={sessionContextTotalOut}
             timeDisplayFormat={timeDisplayFormat}
+            contextSummary={sessionContextSummary}
+            showBackLink={sessionContextScope.showBackLink}
           />
         )}
 
@@ -444,7 +845,7 @@ export function ProxyViewer({
             </button>
           </div>
           <div className="flex-1" />
-          {!hasPinnedSessionContext && (
+          {!hasSessionContext && (
             <span className="text-muted-foreground text-xs font-mono">
               {logs.length} request{logs.length !== 1 ? "s" : ""}
               {totalIn > 0 || totalOut > 0
@@ -535,7 +936,7 @@ export function ProxyViewer({
                   comparisonPredecessors={comparisonPredecessors}
                   onClearGroup={onClearGroup}
                   standalone={groups.length === 1}
-                  hasPinnedSessionContext={hasPinnedSessionContext}
+                  hasPinnedSessionContext={hasSessionContext}
                   timeDisplayFormat={timeDisplayFormat}
                 />
               ))}

package/src/components/providers/ProviderCard.tsx

@@ -27,7 +27,7 @@ import {
   findProviderModelMetadata,
   providerHasContextMetadata,
 } from "../../lib/providerModelMetadata";
-import { formatTokens } from "../../lib/utils";
+import { formatContextWindowTokens } from "../../lib/utils";
 import type {
   ProviderTestErrorType as ErrorType,
   ProviderTestResult as TestResult,
@@ -215,6 +215,30 @@ function formatTimeAgo(isoString: string): string {
   return `${diffDay}d ago`;
 }
 
+type ModelSourceLink = {
+  label: string;
+  title: string;
+  url: string;
+};
+
+function getModelSourceLink(sourceUrl: string | undefined): ModelSourceLink | null {
+  if (sourceUrl === undefined || sourceUrl.trim() === "") return null;
+  try {
+    const parsed = new URL(sourceUrl);
+    if (parsed.protocol !== "https:" && parsed.protocol !== "http:") return null;
+
+    const hostname = parsed.hostname.toLowerCase();
+    const isHuggingFace = hostname === "huggingface.co" || hostname.endsWith(".huggingface.co");
+    return {
+      label: isHuggingFace ? "HF" : "Source",
+      title: isHuggingFace ? "Open Hugging Face model source" : "Open model metadata source",
+      url: sourceUrl,
+    };
+  } catch {
+    return null;
+  }
+}
+
 export function ProviderCard({
   provider,
   testResults,
@@ -298,6 +322,7 @@ export function ProviderCard({
         <div className="flex flex-wrap gap-1">
           {provider.models.map((m) => {
             const metadata = findProviderModelMetadata(provider, m);
+            const sourceLink = getModelSourceLink(metadata?.sourceUrl);
             return (
               <span
                 key={m}
@@ -306,9 +331,27 @@ export function ProviderCard({
                 <span>{m}</span>
                 {metadata !== null && metadata.contextWindow !== undefined && (
                   <span className="font-mono text-foreground/80">
-                    {formatTokens(metadata.contextWindow)}
+                    {formatContextWindowTokens(metadata.contextWindow)}
                   </span>
                 )}
+                {sourceLink !== null && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <a
+                          href={sourceLink.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center gap-0.5 rounded border border-border/70 bg-background/70 px-1 font-mono text-[10px] leading-4 text-muted-foreground transition-colors hover:text-foreground"
+                          aria-label={sourceLink.title}
+                        >
+                          {sourceLink.label}
+                        </a>
+                      </TooltipTrigger>
+                      <TooltipContent>{sourceLink.title}</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
               </span>
             );
           })}