stagent 0.1.11 → 0.1.12

package/src/components/profiles/__tests__/learned-context-panel.test.tsx

@@ -0,0 +1,175 @@
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+
+import { LearnedContextPanel } from "@/components/profiles/learned-context-panel";
+import type { LearnedContextRow } from "@/lib/db/schema";
+
+const { fetchMock } = vi.hoisted(() => ({
+  fetchMock: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("@/lib/utils/format-timestamp", () => ({
+  formatTimestamp: () => "just now",
+}));
+
+function makeRow(
+  overrides: Partial<LearnedContextRow> & {
+    id: string;
+    version: number;
+    changeType: LearnedContextRow["changeType"];
+  }
+): LearnedContextRow {
+  return {
+    id: overrides.id,
+    profileId: overrides.profileId ?? "general",
+    version: overrides.version,
+    content: overrides.content ?? null,
+    diff: overrides.diff ?? null,
+    changeType: overrides.changeType,
+    sourceTaskId: overrides.sourceTaskId ?? null,
+    proposalNotificationId: overrides.proposalNotificationId ?? null,
+    proposedAdditions: overrides.proposedAdditions ?? null,
+    approvedBy: overrides.approvedBy ?? null,
+    createdAt: overrides.createdAt ?? new Date("2026-03-17T12:00:00.000Z"),
+  };
+}
+
+describe("LearnedContextPanel", () => {
+  beforeEach(() => {
+    fetchMock.mockReset();
+    vi.stubGlobal("fetch", fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it("shows singular and plural version labels", async () => {
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValue({
+        history: [
+          makeRow({
+            id: "v1",
+            version: 1,
+            changeType: "approved",
+            content: "Validate inputs",
+            diff: "Validate inputs",
+          }),
+        ],
+        currentSize: 15,
+        limit: 8000,
+        needsSummarization: false,
+      }),
+    } as Response);
+
+    const { rerender } = render(<LearnedContextPanel profileId="general" />);
+
+    expect(await screen.findByText("1 version")).toBeInTheDocument();
+
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValue({
+        history: [
+          makeRow({
+            id: "v2",
+            version: 2,
+            changeType: "approved",
+            content: "Validate inputs\n\nUse retries",
+            diff: "Use retries",
+          }),
+          makeRow({
+            id: "v1",
+            version: 1,
+            changeType: "approved",
+            content: "Validate inputs",
+            diff: "Validate inputs",
+          }),
+        ],
+        currentSize: 28,
+        limit: 8000,
+        needsSummarization: false,
+      }),
+    } as Response);
+
+    rerender(<LearnedContextPanel profileId="general-v2" />);
+
+    expect(await screen.findByText("2 versions")).toBeInTheDocument();
+  });
+
+  it("renders badges, rollback content preview, and a unified diff toggle", async () => {
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: vi.fn().mockResolvedValue({
+        history: [
+          makeRow({
+            id: "v4",
+            version: 4,
+            changeType: "rollback",
+            content: "Validate inputs",
+            diff: "Rolled back to version 1",
+          }),
+          makeRow({
+            id: "v3",
+            version: 3,
+            changeType: "summarization",
+            content: "Validate inputs\nUse retries",
+            diff: "Summarized from 80 to 42 chars",
+          }),
+          makeRow({
+            id: "v2",
+            version: 2,
+            changeType: "proposal",
+            diff: "Always include retry guidance",
+          }),
+          makeRow({
+            id: "v1",
+            version: 1,
+            changeType: "approved",
+            content: "Validate inputs",
+            diff: "Validate inputs",
+          }),
+        ],
+        currentSize: 32,
+        limit: 8000,
+        needsSummarization: false,
+      }),
+    } as Response);
+
+    render(<LearnedContextPanel profileId="general" />);
+
+    expect((await screen.findAllByText("Rollback")).length).toBeGreaterThan(0);
+    expect(screen.getByText("Summarized")).toBeInTheDocument();
+    expect(screen.getByText("Proposed")).toBeInTheDocument();
+    expect(screen.getAllByText("Approved")).not.toHaveLength(0);
+
+    const rollbackCard = screen.getByText("v4").closest(".surface-card-muted");
+    expect(rollbackCard).not.toBeNull();
+    expect(
+      within(rollbackCard as HTMLElement).getByText("Restored Context")
+    ).toBeInTheDocument();
+    expect(
+      within(rollbackCard as HTMLElement).getByText("Validate inputs")
+    ).toBeInTheDocument();
+
+    const showDiffButtons = screen.getAllByRole("button", { name: /Show Diff/i });
+    fireEvent.click(showDiffButtons[0]);
+
+    const diffPanel = await screen.findByText("Unified Diff");
+    expect(diffPanel).toBeInTheDocument();
+    expect(screen.getByText("vs v3")).toBeInTheDocument();
+    expect(
+      screen.getByText((content, element) => {
+        return content === "-" && element?.getAttribute("aria-hidden") === "true";
+      })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Hide Diff/i })).toBeInTheDocument();
+  });
+});

package/src/components/profiles/context-proposal-review.tsx

@@ -6,6 +6,7 @@ import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
+import { LightMarkdown } from "@/components/shared/light-markdown";
 
 interface ContextProposalReviewProps {
   notificationId: string;
@@ -99,9 +100,12 @@ export function ContextProposalReview({
             placeholder="Edit the proposed context additions..."
           />
         ) : (
-          <pre className="max-h-48 overflow-auto whitespace-pre-wrap rounded-lg bg-background/50 p-3 text-xs text-foreground">
-            {proposedAdditions}
-          </pre>
+          <LightMarkdown
+            content={proposedAdditions}
+            maxHeight="max-h-48"
+            stripBracketTags
+            className="rounded-lg bg-background/50 p-3"
+          />
         )}
       </div>
 

package/src/components/profiles/learned-context-panel.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from "react";
 import {
   Brain,
+  ChevronDown,
+  ChevronUp,
   Check,
   Clock,
   History,
@@ -10,7 +12,6 @@ import {
   Plus,
   RotateCcw,
   Sparkles,
-  X,
 } from "lucide-react";
 import { toast } from "sonner";
 
@@ -18,8 +19,13 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
+import { LightMarkdown } from "@/components/shared/light-markdown";
 import { formatTimestamp } from "@/lib/utils/format-timestamp";
 import type { LearnedContextRow } from "@/lib/db/schema";
+import {
+  buildLearnedContextHistoryEntries,
+  hasMeaningfulDerivedDiff,
+} from "@/lib/utils/learned-context-history";
 
 interface ContextHistoryResponse {
   history: LearnedContextRow[];
@@ -49,6 +55,7 @@ export function LearnedContextPanel({ profileId }: LearnedContextPanelProps) {
   const [addingManual, setAddingManual] = useState(false);
   const [manualContent, setManualContent] = useState("");
   const [submitting, setSubmitting] = useState(false);
+  const [expandedDiffs, setExpandedDiffs] = useState<Record<string, boolean>>({});
 
   const refresh = useCallback(async () => {
     try {
@@ -66,6 +73,10 @@ export function LearnedContextPanel({ profileId }: LearnedContextPanelProps) {
     refresh();
   }, [refresh]);
 
+  useEffect(() => {
+    setExpandedDiffs({});
+  }, [profileId]);
+
   async function handleAddManual() {
     if (!manualContent.trim()) return;
     setSubmitting(true);
@@ -121,6 +132,7 @@ export function LearnedContextPanel({ profileId }: LearnedContextPanelProps) {
   }
 
   const history = data?.history ?? [];
+  const entries = buildLearnedContextHistoryEntries(history);
   const currentSize = data?.currentSize ?? 0;
   const limit = data?.limit ?? 8000;
   const usagePercent = Math.min((currentSize / limit) * 100, 100);
@@ -134,7 +146,7 @@ export function LearnedContextPanel({ profileId }: LearnedContextPanelProps) {
             Learned Context
             {history.length > 0 && (
               <Badge variant="secondary" className="text-xs">
-                {history.length} versions
+                {history.length} {history.length === 1 ? "version" : "versions"}
               </Badge>
             )}
           </CardTitle>
@@ -223,11 +235,25 @@ export function LearnedContextPanel({ profileId }: LearnedContextPanelProps) {
               Version History
             </div>
             <div className="max-h-72 space-y-2 overflow-y-auto">
-              {history.map((row) => {
+              {entries.map((entry) => {
+                const { row, snapshotContent, derivedDiff } = entry;
                 const badgeConfig = CHANGE_TYPE_BADGE[row.changeType] ?? {
                   variant: "outline" as const,
                   label: row.changeType,
                 };
+                const diffId = `learned-context-diff-${row.id}`;
+                const diffExpanded = expandedDiffs[row.id] ?? false;
+                const canShowDiff = hasMeaningfulDerivedDiff(derivedDiff);
+                const previewLabel =
+                  row.changeType === "rollback"
+                    ? "Restored Context"
+                    : row.changeType === "summarization"
+                      ? "Summarized Context"
+                      : row.changeType === "approved"
+                        ? "Approved Context"
+                        : row.changeType === "proposal"
+                          ? "Proposed Additions"
+                          : "Change Summary";
                 return (
                   <div
                     key={row.id}
@@ -269,11 +295,93 @@ export function LearnedContextPanel({ profileId }: LearnedContextPanelProps) {
                         </span>
                       </div>
                     </div>
-                    {row.diff && (
-                      <pre className="mt-2 max-h-24 overflow-auto whitespace-pre-wrap rounded-md bg-background/50 p-2 text-xs text-muted-foreground">
-                        {row.diff}
-                      </pre>
-                    )}
+                    <div className="mt-3 space-y-2">
+                      <div className="flex items-center justify-between gap-3">
+                        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                          {previewLabel}
+                        </p>
+                        {canShowDiff && (
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-6 px-2 text-xs"
+                            aria-expanded={diffExpanded}
+                            aria-controls={diffId}
+                            onClick={() =>
+                              setExpandedDiffs((current) => ({
+                                ...current,
+                                [row.id]: !current[row.id],
+                              }))
+                            }
+                          >
+                            {diffExpanded ? (
+                              <ChevronUp className="mr-1 h-3 w-3" />
+                            ) : (
+                              <ChevronDown className="mr-1 h-3 w-3" />
+                            )}
+                            {diffExpanded ? "Hide Diff" : "Show Diff"}
+                          </Button>
+                        )}
+                      </div>
+
+                      {snapshotContent ? (
+                        <LightMarkdown
+                          content={snapshotContent}
+                          maxHeight="max-h-28"
+                          className="rounded-md bg-background/50 p-2"
+                        />
+                      ) : row.diff ? (
+                        <LightMarkdown
+                          content={row.diff}
+                          maxHeight="max-h-24"
+                          className="rounded-md bg-background/50 p-2"
+                        />
+                      ) : null}
+
+                      {canShowDiff && diffExpanded && derivedDiff && (
+                        <div
+                          id={diffId}
+                          className="surface-scroll rounded-md border border-border/60 bg-background/60 p-2"
+                        >
+                          <div className="mb-2 flex items-center justify-between gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                            <span>Unified Diff</span>
+                            <span>
+                              {derivedDiff.previousVersion === null
+                                ? "Initial version"
+                                : `vs v${derivedDiff.previousVersion}`}
+                            </span>
+                          </div>
+                          <div className="max-h-44 space-y-1 overflow-y-auto font-mono text-xs">
+                            {derivedDiff.lines.map((line, index) => {
+                              const toneClass =
+                                line.kind === "added"
+                                  ? "bg-status-completed/10 text-status-completed"
+                                  : line.kind === "removed"
+                                    ? "bg-destructive/10 text-destructive"
+                                    : "bg-muted/40 text-muted-foreground";
+                              const prefix =
+                                line.kind === "added"
+                                  ? "+"
+                                  : line.kind === "removed"
+                                    ? "-"
+                                    : " ";
+
+                              return (
+                                <div
+                                  key={`${row.id}-diff-${index}`}
+                                  className={`grid grid-cols-[auto_minmax(0,1fr)] gap-2 rounded-sm px-2 py-1 ${toneClass}`}
+                                >
+                                  <span aria-hidden="true">{prefix}</span>
+                                  <span className="whitespace-pre-wrap break-words">
+                                    {line.value || " "}
+                                  </span>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 );
               })}

package/src/components/profiles/profile-detail-view.tsx

@@ -6,6 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
+import { LightMarkdown } from "@/components/shared/light-markdown";
 import {
   Copy,
   Pencil,
@@ -420,9 +421,11 @@ export function ProfileDetailView({ profileId, isBuiltin, initialProfile }: Prof
               <span className="text-muted-foreground text-xs group-open:rotate-90 transition-transform">▶</span>
             </summary>
             <div className="surface-panel mt-2 rounded-lg p-4">
-              <pre className="surface-scroll max-h-64 overflow-auto whitespace-pre-wrap rounded-lg p-4 text-xs">
-                {profile.skillMd}
-              </pre>
+              <LightMarkdown
+                content={profile.skillMd}
+                maxHeight="max-h-64"
+                className="surface-scroll rounded-lg p-4"
+              />
             </div>
           </details>
         )}

package/src/components/settings/__tests__/auth-config-section.test.tsx

@@ -0,0 +1,147 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { AuthConfigSection } from "@/components/settings/auth-config-section";
+
+vi.mock("@/lib/agents/runtime/catalog", () => ({
+  DEFAULT_AGENT_RUNTIME: "claude-code",
+  getRuntimeCatalogEntry: () => ({
+    id: "claude-code",
+    label: "Claude Code",
+  }),
+}));
+
+describe("auth config section", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+        const method = init?.method ?? "GET";
+
+        if (url === "/api/settings" && method === "GET") {
+          return {
+            ok: true,
+            json: async () => ({
+              method: "oauth",
+              hasKey: false,
+              apiKeySource: "oauth",
+            }),
+          };
+        }
+
+        if (url === "/api/settings/test" && method === "POST") {
+          return {
+            ok: true,
+            json: async () => ({
+              connected: true,
+              apiKeySource: "oauth",
+            }),
+          };
+        }
+
+        if (url === "/api/settings" && method === "POST") {
+          const body = JSON.parse(String(init?.body ?? "{}")) as { method?: string };
+          return {
+            ok: true,
+            json: async () => ({
+              method: body.method ?? "oauth",
+              hasKey: false,
+              apiKeySource: body.method === "oauth" ? "oauth" : "unknown",
+            }),
+          };
+        }
+
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      })
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders an OAuth test button and shows success feedback", async () => {
+    render(<AuthConfigSection />);
+
+    const testButton = await screen.findByRole("button", { name: "Test Connection" });
+    expect(testButton).toBeInTheDocument();
+    expect(screen.queryByText("Test OAuth connection")).not.toBeInTheDocument();
+
+    fireEvent.click(testButton);
+
+    await waitFor(() => {
+      expect(screen.getByText("Connected")).toBeInTheDocument();
+    });
+  });
+
+  it("shows the returned error message when the OAuth test fails", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+        const method = init?.method ?? "GET";
+
+        if (url === "/api/settings" && method === "GET") {
+          return {
+            ok: true,
+            json: async () => ({
+              method: "oauth",
+              hasKey: false,
+              apiKeySource: "oauth",
+            }),
+          };
+        }
+
+        if (url === "/api/settings/test" && method === "POST") {
+          return {
+            ok: true,
+            json: async () => ({
+              connected: false,
+              error: "OAuth token expired",
+            }),
+          };
+        }
+
+        if (url === "/api/settings" && method === "POST") {
+          const body = JSON.parse(String(init?.body ?? "{}")) as { method?: string };
+          return {
+            ok: true,
+            json: async () => ({
+              method: body.method ?? "oauth",
+              hasKey: false,
+              apiKeySource: body.method === "oauth" ? "oauth" : "unknown",
+            }),
+          };
+        }
+
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      })
+    );
+
+    render(<AuthConfigSection />);
+
+    fireEvent.click(await screen.findByRole("button", { name: "Test Connection" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("OAuth token expired")).toBeInTheDocument();
+    });
+  });
+
+  it("clears the inline test result when switching auth methods", async () => {
+    render(<AuthConfigSection />);
+
+    fireEvent.click(await screen.findByRole("button", { name: "Test Connection" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Connected")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /API Key/i }));
+
+    await waitFor(() => {
+      expect(screen.queryByText("Connected")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/settings/api-key-form.tsx

@@ -1,15 +1,17 @@
 "use client";
 
 import { useState } from "react";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Loader2, Eye, EyeOff, CheckCircle2, XCircle } from "lucide-react";
+import { ConnectionTestControl, type ConnectionTestResult } from "./connection-test-control";
 
 interface ApiKeyFormProps {
   hasKey: boolean;
   onSave: (key: string) => Promise<void>;
-  onTest: () => Promise<{ connected: boolean; apiKeySource?: string; error?: string }>;
+  onTest: () => Promise<ConnectionTestResult & { apiKeySource?: string }>;
   keyPrefix?: string;
   placeholder?: string;
   maskedPrefix?: string;
@@ -31,16 +33,10 @@ export function ApiKeyForm({
   const [showInput, setShowInput] = useState(!hasKey);
   const [showKey, setShowKey] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [testing, setTesting] = useState(false);
-  const [testResult, setTestResult] = useState<{
-    connected: boolean;
-    error?: string;
-  } | null>(null);
 
   async function handleSave() {
     if (!key.startsWith(keyPrefix)) return;
     setSaving(true);
-    setTestResult(null);
     try {
       await onSave(key);
       setKey("");
@@ -50,17 +46,6 @@ export function ApiKeyForm({
     }
   }
 
-  async function handleTest() {
-    setTesting(true);
-    setTestResult(null);
-    try {
-      const result = await onTest();
-      setTestResult(result);
-    } finally {
-      setTesting(false);
-    }
-  }
-
   return (
     <div className="space-y-4">
       <Label className="text-sm font-medium">API Key</Label>
@@ -108,30 +93,7 @@ export function ApiKeyForm({
         </div>
       )}
 
-      <div className="flex items-center gap-3">
-        <Button variant="outline" size="sm" onClick={handleTest} disabled={testing}>
-          {testing && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
-          {testButtonLabel}
-        </Button>
-
-        {testResult && (
-          <span className="flex items-center gap-1.5 text-sm">
-            {testResult.connected ? (
-              <>
-                <CheckCircle2 className="h-4 w-4 text-success" />
-                <span className="text-success">Connected</span>
-              </>
-            ) : (
-              <>
-                <XCircle className="h-4 w-4 text-status-failed" />
-                <span className="text-status-failed">
-                  {testResult.error || "Connection failed"}
-                </span>
-              </>
-            )}
-          </span>
-        )}
-      </div>
+      <ConnectionTestControl onTest={onTest} buttonLabel={testButtonLabel} />
 
       <p className="text-xs text-muted-foreground">
         Environment fallback: `{envVarName}`.