@tonyclaw/agent-inspector 3.0.42 → 3.0.43

package/src/components/groups/GroupsDialog.tsx

@@ -130,16 +130,16 @@ export function buildGroupMemberRows(
 function statusClassName(status: InspectorGroup["status"] | MemberStatus): string {
   switch (status) {
     case "completed":
-      return "border-emerald-200 bg-emerald-50 text-emerald-700";
+      return "border-status-success/30 bg-status-success/10 text-status-success";
     case "failed":
     case "cancelled":
-      return "border-red-200 bg-red-50 text-red-700";
+      return "border-status-danger/30 bg-status-danger/10 text-status-danger";
     case "running":
-      return "border-sky-200 bg-sky-50 text-sky-700";
+      return "border-status-cool/30 bg-status-cool/10 text-status-cool";
     case "created":
-      return "border-zinc-200 bg-zinc-50 text-zinc-600";
+      return "border-border bg-muted/30 text-muted-foreground";
     case null:
-      return "border-zinc-200 bg-zinc-50 text-zinc-500";
+      return "border-border bg-muted/30 text-muted-foreground";
   }
 }
 
@@ -150,13 +150,13 @@ function statusLabel(status: InspectorGroup["status"] | MemberStatus): string {
 function reportStatusClassName(status: EvidenceReport["status"]): string {
   switch (status) {
     case "PASS":
-      return "border-emerald-200 bg-emerald-50 text-emerald-700";
+      return "border-status-success/30 bg-status-success/10 text-status-success";
     case "FAIL":
-      return "border-red-200 bg-red-50 text-red-700";
+      return "border-status-danger/30 bg-status-danger/10 text-status-danger";
     case "RUNNING":
-      return "border-sky-200 bg-sky-50 text-sky-700";
+      return "border-status-cool/30 bg-status-cool/10 text-status-cool";
     case "UNKNOWN":
-      return "border-zinc-200 bg-zinc-50 text-zinc-600";
+      return "border-border bg-muted/30 text-muted-foreground";
   }
 }
 
@@ -283,7 +283,11 @@ function evidenceReportFor(
   return null;
 }
 
-export function GroupsDialog(): JSX.Element {
+export function GroupsDialog({
+  labelledTrigger = false,
+}: {
+  labelledTrigger?: boolean;
+}): JSX.Element {
   const [open, setOpen] = useState(false);
   const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
   const [exportingGroupId, setExportingGroupId] = useState<string | null>(null);
@@ -446,8 +450,11 @@ export function GroupsDialog(): JSX.Element {
         <Button
           type="button"
           variant="ghost"
-          size="icon"
-          className={INSPECTOR_ICON_TRIGGER_CLASS}
+          size={labelledTrigger ? "default" : "icon"}
+          className={cn(
+            INSPECTOR_ICON_TRIGGER_CLASS,
+            labelledTrigger && "w-auto gap-2 px-3 text-xs max-lg:h-11 max-lg:w-auto",
+          )}
           aria-label="Evaluation groups"
           title="Evaluation groups"
         >
@@ -459,7 +466,7 @@ export function GroupsDialog(): JSX.Element {
               {groups.length}
             </span>
           ) : null}
-          <span className="sr-only">Evaluation groups</span>
+          <span className={labelledTrigger ? "" : "sr-only"}>Groups</span>
         </Button>
       </DialogTrigger>
       <DialogContent className="flex max-h-[85vh] max-w-5xl flex-col overflow-hidden">
@@ -553,7 +560,7 @@ function GroupList({
 
   if (error !== undefined) {
     return (
-      <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+      <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
         {error.message}
       </div>
     );
@@ -677,7 +684,7 @@ function GroupDetails({
               type="button"
               variant="outline"
               size="icon"
-              className="size-8 text-red-600 hover:text-red-700"
+              className="size-8 text-status-danger hover:text-status-danger/80"
               aria-label="Delete group"
               title="Delete group"
               disabled={isDeleting}
@@ -751,13 +758,13 @@ function GroupDetails({
         <EvidencePaths evidence={evidence} />
 
         {exportError !== null && (
-          <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+          <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
             {exportError}
           </div>
         )}
 
         {deleteError !== null && !isConfirmingDelete && (
-          <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+          <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
             {deleteError}
           </div>
         )}
@@ -789,14 +796,14 @@ function DeleteGroupPanel({
   const evidencePath = group.evidence?.markdownPath ?? "No evidence pack exported.";
 
   return (
-    <div className="rounded-md border border-red-200 bg-red-50 px-3 py-3 text-red-900">
+    <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-3 text-status-danger">
       <div className="flex min-w-0 flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
         <div className="min-w-0 space-y-2">
           <div className="flex items-center gap-2 text-sm font-semibold">
-            <Trash2 className="size-4 text-red-600" />
+            <Trash2 className="size-4 text-status-danger" />
             <span>Delete group?</span>
           </div>
-          <p className="text-xs text-red-800">
+          <p className="text-xs text-status-danger">
             Delete <span className="font-medium">{group.title}</span>. Session logs and run records
             stay intact.
           </p>
@@ -815,13 +822,13 @@ function DeleteGroupPanel({
             />
             <span className="min-w-0">
               <span className="block font-medium">Also delete exported evidence files</span>
-              <code className="mt-1 block truncate font-mono text-[11px] text-red-700">
+              <code className="mt-1 block truncate font-mono text-[11px] text-status-danger">
                 {evidencePath}
               </code>
             </span>
           </label>
           {error !== null && (
-            <div className="rounded-md border border-red-200 bg-white px-2 py-1.5 text-xs text-red-700">
+            <div className="rounded-md border border-status-danger/30 bg-card px-2 py-1.5 text-xs text-status-danger">
               {error}
             </div>
           )}
@@ -891,7 +898,7 @@ function EvidenceReportCard({
 
   if (error !== undefined && hasEvidence) {
     return (
-      <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+      <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
         Failed to load evidence report: {error.message}
       </div>
     );
@@ -916,7 +923,11 @@ function EvidenceReportCard({
           aria-label={copied ? "Copied evidence report" : "Copy evidence report"}
           onClick={copy}
         >
-          {copied ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5" />}
+          {copied ? (
+            <Check className="size-3.5 text-status-success" />
+          ) : (
+            <Copy className="size-3.5" />
+          )}
         </Button>
       </div>
       <p className="mt-1 text-xs text-muted-foreground">{report.summary}</p>
@@ -964,7 +975,11 @@ function CopyPathRow({ label, value }: { label: string; value: string }): JSX.El
         aria-label={copied ? `Copied ${label} path` : `Copy ${label} path`}
         onClick={copy}
       >
-        {copied ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5" />}
+        {copied ? (
+          <Check className="size-3.5 text-status-success" />
+        ) : (
+          <Copy className="size-3.5" />
+        )}
       </Button>
     </div>
   );
@@ -1095,7 +1110,7 @@ function MemberRow({
               <span className="min-w-0 truncate">{sessionLabel}</span>
               <Badge
                 variant="outline"
-                className="shrink-0 border-zinc-200 bg-zinc-50 text-zinc-600"
+                className="shrink-0 border-border bg-muted/30 text-muted-foreground"
               >
                 evidence
               </Badge>

package/src/components/inspector-pet/InspectorPet.tsx

@@ -22,7 +22,7 @@ import {
   nextInspectorPetWalkingPosition,
   randomInspectorPetEdgePosition,
   resolveInspectorPetStatus,
-  snapInspectorPetToEdge,
+  snapInspectorPetToCorner,
 } from "./inspectorPetLogic";
 import { InspectorPetCrab3D } from "./InspectorPetCrab3D";
 
@@ -63,11 +63,11 @@ function readViewport(): InspectorPetViewport {
 }
 
 function readStoredRoaming(): boolean {
-  if (typeof window === "undefined") return true;
+  if (typeof window === "undefined") return false;
   try {
-    return window.localStorage.getItem(INSPECTOR_PET_ROAMING_STORAGE_KEY) !== "0";
+    return window.localStorage.getItem(INSPECTOR_PET_ROAMING_STORAGE_KEY) === "1";
   } catch {
-    return true;
+    return false;
   }
 }
 
@@ -126,7 +126,7 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
   useEffect(() => {
     const nextViewport = readViewport();
     setViewport(nextViewport);
-    setPosition(randomInspectorPetEdgePosition(nextViewport, Math.random()));
+    setPosition(randomInspectorPetEdgePosition(nextViewport, 1));
   }, []);
 
   useEffect(() => {
@@ -181,7 +181,7 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
       const nextViewport = readViewport();
       setScuttling(false);
       setViewport(nextViewport);
-      setPosition((current) => snapInspectorPetToEdge(current, nextViewport));
+      setPosition((current) => snapInspectorPetToCorner(current, nextViewport));
     };
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
@@ -264,7 +264,7 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
       dragOccurredRef.current = dragState.moved;
       dragStateRef.current = null;
       setDragging(false);
-      setPosition((current) => snapInspectorPetToEdge(current, viewport));
+      setPosition((current) => snapInspectorPetToCorner(current, viewport));
     },
     [viewport],
   );
@@ -314,7 +314,7 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
       <button
         type="button"
         className={cn(
-          "pointer-events-auto fixed left-0 top-0 z-10 flex size-28 items-center justify-center bg-transparent text-foreground outline-none transition-[filter,opacity] duration-200 hover:opacity-95 hover:drop-shadow-[0_0_28px_rgba(245,158,11,0.32)] focus-visible:drop-shadow-[0_0_14px_rgba(251,191,36,0.72)]",
+          "pointer-events-auto fixed left-0 top-0 z-10 flex size-28 items-center justify-center bg-transparent text-foreground opacity-65 outline-none transition-[filter,opacity] duration-200 hover:opacity-100 hover:drop-shadow-[0_0_28px_rgba(245,158,11,0.32)] focus-visible:opacity-100 focus-visible:drop-shadow-[0_0_14px_rgba(251,191,36,0.72)]",
           dragging ? "cursor-grabbing" : "cursor-grab",
         )}
         style={petStyle}
@@ -370,7 +370,7 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
             <span className="min-w-0 flex-1 truncate text-xs font-medium">{status.label}</span>
             <button
               type="button"
-              className="inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+              className="inline-flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none max-lg:size-10"
               onClick={handleToggleRoaming}
               aria-label={roamingLabel}
               title={roamingLabel}

package/src/components/inspector-pet/inspectorPetLogic.ts

@@ -103,6 +103,20 @@ export function snapInspectorPetToEdge(
   }
 }
 
+export function snapInspectorPetToCorner(
+  position: InspectorPetPosition,
+  viewport: InspectorPetViewport,
+): InspectorPetPosition {
+  const clamped = clampInspectorPetPosition(position, viewport);
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
+  const maxX = maximumPetX(viewport);
+  const maxY = maximumPetY(viewport);
+  return {
+    x: clamped.x - edgeGap <= maxX - clamped.x ? edgeGap : maxX,
+    y: clamped.y - edgeGap <= maxY - clamped.y ? edgeGap : maxY,
+  };
+}
+
 export function randomInspectorPetEdgePosition(
   viewport: InspectorPetViewport,
   positionSample: number,
@@ -111,7 +125,7 @@ export function randomInspectorPetEdgePosition(
   const maxY = maximumPetY(viewport);
   const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
   return {
-    x: edgeGap + clampUnit(positionSample) * (maxX - edgeGap),
+    x: clampUnit(positionSample) < 0.5 ? edgeGap : maxX,
     y: maxY,
   };
 }

package/src/components/pi-agent/PiAgentPanel.tsx

@@ -5,7 +5,6 @@ import {
   createEmptyPiAgentConversation,
   getPiAgentResultLogIds,
   normalizePiAgentResponse,
-  PI_AGENT_SCOPE_PILLS,
   PI_AGENT_STARTERS,
   type PiAgentConversationMessage,
   type PiAgentEvidenceView,
@@ -30,8 +29,7 @@ export type PiAgentSearchResult = {
   reportedLogCount: number;
 };
 
-const DEFAULT_QUESTION =
-  "Analyze the current Inspector session. What looks abnormal, slow, or likely to hang?";
+const DEFAULT_QUESTION = "What looks abnormal, slow, or likely to hang?";
 
 function providerSupportsPiAgent(provider: {
   anthropicBaseUrl?: string;
@@ -209,7 +207,7 @@ export function PiAgentPanel({
   currentSessionId,
   logCount,
   onResultChange,
-}: PiAgentPanelProps): JSX.Element {
+}: PiAgentPanelProps): JSX.Element | null {
   const { providers } = useProviders();
   const piProviders = useMemo(
     () => sortProviderBySource(providers.filter(providerSupportsPiAgent)),
@@ -228,6 +226,8 @@ export function PiAgentPanel({
   const question = conversation.question;
   const canAsk = question.trim() !== "" && piProviders.length > 0 && !loading;
 
+  if (piProviders.length === 0) return null;
+
   const handleQuestionChange = (event: ChangeEvent<HTMLTextAreaElement>): void => {
     setConversation((current) => ({ ...current, question: event.currentTarget.value }));
   };
@@ -334,9 +334,9 @@ export function PiAgentPanel({
       <div className="flex items-center gap-2">
         <BrainCircuit className="size-4 text-cyan-200" />
         <div className="min-w-0 flex-1">
-          <div className="text-xs font-semibold text-foreground">Search with Assistant</div>
+          <div className="text-xs font-semibold text-foreground">Assistant</div>
           <div className="text-[11px] text-muted-foreground">
-            {currentSessionId === null ? "Search all Inspector evidence" : "Search this session"}
+            {currentSessionId === null ? "All evidence" : "Current session"}
           </div>
         </div>
         <button
@@ -350,26 +350,9 @@ export function PiAgentPanel({
       </div>
 
       {conversation.messages.length === 0 && (
-        <div className="mt-3 rounded-md bg-black/[0.18] px-3 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
-          <p className="text-[11px] leading-5 text-muted-foreground">
-            Describe the traffic you want to find in plain language. Assistant searches saved
-            traffic, sessions, tools, alerts, runs, groups, and knowledge, then uses linked evidence
-            to shape the log results.
-          </p>
-          <div className="mt-2 grid gap-1.5">
-            {PI_AGENT_SCOPE_PILLS.map((pill) => (
-              <div
-                key={pill.id}
-                className="rounded-sm bg-cyan-400/[0.06] px-2 py-1.5 shadow-[inset_0_0_0_1px_rgba(103,232,249,0.08)]"
-              >
-                <div className="text-[10px] font-medium text-cyan-50">{pill.label}</div>
-                <div className="mt-0.5 text-[9px] leading-4 text-muted-foreground">
-                  {pill.description}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
+        <p className="mt-3 text-[11px] leading-5 text-muted-foreground">
+          Ask about failures, latency, tokens, and tools.
+        </p>
       )}
 
       <div className="mt-3 grid grid-cols-2 gap-2">
@@ -437,7 +420,7 @@ export function PiAgentPanel({
         value={question}
         onChange={handleQuestionChange}
         className="mt-3 min-h-20 w-full resize-y rounded-md bg-black/25 px-3 py-2 text-xs leading-5 text-foreground outline-none shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring"
-        placeholder="Search failures, slow requests, token spikes, tool calls..."
+        placeholder="Ask about this Inspector data..."
       />
 
       <button
@@ -447,21 +430,15 @@ export function PiAgentPanel({
         className="mt-2 inline-flex h-8 w-full items-center justify-center gap-2 rounded-md bg-cyan-400/12 px-3 text-xs font-medium text-cyan-100 shadow-[inset_0_0_0_1px_rgba(103,232,249,0.18)] transition-colors hover:bg-cyan-400/18 disabled:cursor-not-allowed disabled:opacity-50"
       >
         {loading ? <Loader2 className="size-3.5 animate-spin" /> : <Send className="size-3.5" />}
-        <span>{loading ? "Searching..." : "Search logs"}</span>
+        <span>{loading ? "Searching..." : "Ask Assistant"}</span>
       </button>
 
       {conversation.error !== null && (
         <p className="mt-2 break-words text-[11px] leading-5 text-red-200">{conversation.error}</p>
       )}
-      {piProviders.length === 0 && (
-        <p className="mt-2 text-[11px] leading-5 text-muted-foreground">
-          Configure a Provider with Responses, Chat, or Anthropic URL to enable Inspector Assistant.
-        </p>
-      )}
       {logCount === 0 && (
         <p className="mt-2 text-[11px] leading-5 text-muted-foreground">
-          No logs are visible in this scope yet; Inspector Assistant can still answer Provider setup
-          questions.
+          No logs in this scope. Setup questions still work.
         </p>
       )}
     </section>

package/src/components/pi-agent/piAgentChatLogic.ts

@@ -71,30 +71,6 @@ export type PiAgentStarter = {
   question: string;
 };
 
-export type PiAgentScopePill = {
-  id: "saved-data" | "root-cause" | "evidence";
-  label: string;
-  description: string;
-};
-
-export const PI_AGENT_SCOPE_PILLS: readonly PiAgentScopePill[] = [
-  {
-    id: "saved-data",
-    label: "Saved Inspector data",
-    description: "requests, responses, sessions, tools, alerts, runs, groups, and knowledge",
-  },
-  {
-    id: "root-cause",
-    label: "Root-cause hints",
-    description: "failures, hangs, slow paths, token spikes, and provider drift",
-  },
-  {
-    id: "evidence",
-    label: "Evidence links",
-    description: "matched logs and metrics you can jump back into",
-  },
-];
-
 export const PI_AGENT_STARTERS: readonly PiAgentStarter[] = [
   {
     id: "reliability",

package/src/components/providers/ImportWizardDialog.tsx

@@ -253,7 +253,7 @@ export function ImportWizardDialog({
           )}
 
           {importResult !== null && (
-            <div className="text-sm text-green-500 border-t pt-2">{importResult}</div>
+            <div className="border-t pt-2 text-sm text-status-success">{importResult}</div>
           )}
 
           {importError !== null && (

package/src/components/providers/ProviderCard.tsx

@@ -182,11 +182,11 @@ export function ProviderCard({
   const isTestingValue = isTesting ?? false;
   const providerSourceBadge =
     provider.source === "company" ? (
-      <span className="shrink-0 rounded border border-cyan-300/20 bg-cyan-300/[0.08] px-1.5 py-0.5 text-xs text-cyan-100">
+      <span className="shrink-0 rounded border border-status-cool/30 bg-status-cool/10 px-1.5 py-0.5 text-xs text-status-cool">
         Company
       </span>
     ) : provider.source === "personal" ? (
-      <span className="shrink-0 rounded border border-violet-300/20 bg-violet-300/[0.08] px-1.5 py-0.5 text-xs text-violet-100">
+      <span className="shrink-0 rounded border border-status-accent/30 bg-status-accent/10 px-1.5 py-0.5 text-xs text-status-accent">
         Personal
       </span>
     ) : null;
@@ -238,7 +238,7 @@ export function ProviderCard({
       </div>
 
       {!hasContextMetadata && (
-        <div className="flex items-center justify-between gap-2 rounded-md border border-amber-500/25 bg-amber-500/6 px-2 py-1.5 text-xs text-muted-foreground">
+        <div className="flex items-center justify-between gap-2 rounded-md border border-status-watch/30 bg-status-watch/10 px-2 py-1.5 text-xs text-status-watch">
           <span>Context window metadata missing</span>
           <div className="flex shrink-0 items-center gap-1">
             <Button
@@ -270,7 +270,7 @@ export function ProviderCard({
       {showDetails && (
         <div className="space-y-3 border-t border-border/60 pt-3">
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <CheckCircle className="size-3.5 text-emerald-500" />
+            <CheckCircle className="size-3.5 text-status-success" />
             <span>API key configured</span>
           </div>
 

package/src/components/providers/ProviderForm.tsx

@@ -311,7 +311,7 @@ function EndpointUrlPreview({
             <div
               key={`${diagnostic.severity}:${diagnostic.message}`}
               className={
-                diagnostic.severity === "warning" ? "text-amber-200" : "text-muted-foreground"
+                diagnostic.severity === "warning" ? "text-status-watch" : "text-muted-foreground"
               }
             >
               {diagnostic.message}
@@ -809,7 +809,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                   placeholder="https://api.anthropic.com"
                   className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                 />
-                <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
+                <span className="shrink-0 select-none border-l border-border bg-muted/35 px-3 py-2 font-mono text-xs text-muted-foreground">
                   {ANTHROPIC_MESSAGES_ENDPOINT}
                 </span>
               </div>
@@ -841,7 +841,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                   placeholder="https://api.openai.com"
                   className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                 />
-                <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
+                <span className="shrink-0 select-none border-l border-border bg-muted/35 px-3 py-2 font-mono text-xs text-muted-foreground">
                   {OPENAI_CHAT_COMPLETIONS_ENDPOINT}
                 </span>
               </div>
@@ -873,7 +873,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                   placeholder="https://api.openai.com"
                   className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                 />
-                <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
+                <span className="shrink-0 select-none border-l border-border bg-muted/35 px-3 py-2 font-mono text-xs text-muted-foreground">
                   {OPENAI_RESPONSES_ENDPOINT}
                 </span>
               </div>
@@ -937,7 +937,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           </div>
         )}
         {provider !== undefined && !hasContextMetadata && modelMetadataUrl.trim() === "" && (
-          <p className="text-xs text-amber-400">
+          <p className="text-xs text-status-watch">
             This provider has no matching context metadata yet.
           </p>
         )}
@@ -975,7 +975,11 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             className="text-muted-foreground hover:text-foreground transition-colors p-1 shrink-0"
             aria-label="Copy API key"
           >
-            {copied ? <Check className="size-4 text-cyan-300" /> : <Copy className="size-4" />}
+            {copied ? (
+              <Check className="size-4 text-status-success" />
+            ) : (
+              <Copy className="size-4" />
+            )}
           </button>
         </div>
         {provider !== undefined && apiKey.trim() === "" && (
@@ -1035,7 +1039,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                                 updateModel(i, opt);
                                 setOpenModelDropdown(null);
                               }}
-                              className="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-white/[0.06]"
+                              className="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted/60"
                             >
                               {opt}
                             </button>

package/src/components/providers/ProviderTestResultsView.tsx

@@ -357,9 +357,9 @@ function ProviderTestResultDialog({
         <DialogHeader className="border-b border-border/70 px-5 py-4 pr-12">
           <div className="flex items-center gap-2">
             {result.success ? (
-              <CheckCircle className="size-4 text-cyan-300" />
+              <CheckCircle className="size-4 text-status-success" />
             ) : (
-              <AlertCircle className="size-4 text-red-300" />
+              <AlertCircle className="size-4 text-status-danger" />
             )}
             <DialogTitle className="text-base">{probeLabel}</DialogTitle>
           </div>
@@ -369,7 +369,7 @@ function ProviderTestResultDialog({
         </DialogHeader>
         <div className="space-y-4 overflow-y-auto p-5">
           {!result.success && (
-            <div className="rounded-md border border-red-400/20 bg-red-400/[0.06] px-3 py-2 text-sm text-red-200">
+            <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-2 text-sm text-status-danger">
               <div className="font-medium">{errorLabel(result.error?.type ?? "unknown")}</div>
               <div className="mt-1 break-words text-xs text-muted-foreground">{errorMessage}</div>
             </div>
@@ -405,8 +405,8 @@ function errorIcon(type: ErrorType): JSX.Element {
 }
 
 const PROBE_TONE_CLASSES: Record<ProbeTone, string> = {
-  success: "bg-cyan-300/[0.07] text-cyan-100 hover:bg-cyan-300/[0.11]",
-  failure: "bg-red-400/[0.07] text-red-200 hover:bg-red-400/[0.11]",
+  success: "bg-status-success/10 text-status-success hover:bg-status-success/15",
+  failure: "bg-status-danger/10 text-status-danger hover:bg-status-danger/15",
   pending: "bg-muted/40 text-foreground/80",
   quiet: "bg-transparent text-muted-foreground/70",
 };
@@ -522,11 +522,9 @@ export function ProviderTestMatrix({
         </div>
         {hasAnthropic && <ProviderFormatRow label="Anthropic" results={results?.anthropic} />}
         {hasChat && <ProviderFormatRow label="OpenAI Chat" results={results?.openaiChat} />}
-        <ProviderFormatRow
-          label="OpenAI Responses"
-          results={results?.openaiResponses}
-          configured={hasResponses}
-        />
+        {hasResponses && (
+          <ProviderFormatRow label="OpenAI Responses" results={results?.openaiResponses} />
+        )}
       </div>
     </div>
   );
@@ -554,11 +552,11 @@ function FormatSummaryBadge({
   const summary = summarizeFormat(results);
   const className =
     summary.failed > 0
-      ? "border-red-400/20 bg-red-400/[0.06] text-red-200"
+      ? "border-status-danger/30 bg-status-danger/10 text-status-danger"
       : summary.testing > 0
-        ? "border-amber-300/20 bg-amber-300/[0.06] text-amber-100"
+        ? "border-status-watch/30 bg-status-watch/10 text-status-watch"
         : summary.total > 0 && summary.passed === summary.total
-          ? "border-cyan-300/20 bg-cyan-300/[0.06] text-cyan-100"
+          ? "border-status-success/30 bg-status-success/10 text-status-success"
           : "border-border/60 bg-transparent text-muted-foreground";
   const value =
     summary.failed > 0
@@ -688,7 +686,7 @@ export function ProviderTestPill({
 
   if (isTesting) {
     return (
-      <span className="inline-flex items-center gap-1 rounded border border-cyan-300/25 bg-cyan-300/[0.08] px-2 py-1 text-xs text-cyan-100">
+      <span className="inline-flex items-center gap-1 rounded border border-status-cool/30 bg-status-cool/10 px-2 py-1 text-xs text-status-cool">
         <RotateCw className="size-3 animate-spin" />
         Testing
       </span>
@@ -710,7 +708,7 @@ export function ProviderTestPill({
   }
   if (summary.failed > 0) {
     return (
-      <span className="inline-flex items-center gap-1 rounded border border-red-400/25 bg-red-500/[0.08] px-2 py-1 text-xs text-red-200">
+      <span className="inline-flex items-center gap-1 rounded border border-status-danger/30 bg-status-danger/10 px-2 py-1 text-xs text-status-danger">
         <AlertCircle className="size-3" />
         {summary.failed} failed
       </span>
@@ -718,13 +716,13 @@ export function ProviderTestPill({
   }
   if (summary.testing > 0 || summary.passed < summary.total) {
     return (
-      <span className="rounded border border-amber-300/25 bg-amber-400/[0.08] px-2 py-1 text-xs text-amber-100">
+      <span className="rounded border border-status-watch/30 bg-status-watch/10 px-2 py-1 text-xs text-status-watch">
         {summary.passed}/{summary.total}
       </span>
     );
   }
   return (
-    <span className="inline-flex items-center gap-1 rounded border border-cyan-300/25 bg-cyan-300/[0.08] px-2 py-1 text-xs text-cyan-100">
+    <span className="inline-flex items-center gap-1 rounded border border-status-success/30 bg-status-success/10 px-2 py-1 text-xs text-status-success">
       <CheckCircle className="size-3" />
       {summary.passed}/{summary.total}
     </span>

package/src/components/providers/ProvidersPanel.tsx

@@ -625,7 +625,7 @@ export function ProvidersPanel({
             aria-label={configPathCopied ? "Copied config file path" : "Copy config file path"}
           >
             {configPathCopied ? (
-              <Check className="size-3 text-cyan-300" />
+              <Check className="size-3 text-status-success" />
             ) : (
               <Copy className="size-3" />
             )}