stagent 0.1.11 → 0.1.13

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-browser.tsx

@@ -107,6 +107,7 @@ export function ProfileBrowser({ initialProfiles }: ProfileBrowserProps) {
             <ProfileCard
               key={profile.id}
               profile={profile}
+              isBuiltin={profile.isBuiltin}
               onClick={() => router.push(`/profiles/${profile.id}`)}
             />
           ))}

package/src/components/profiles/profile-card.tsx

@@ -4,14 +4,16 @@ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { listRuntimeCatalog } from "@/lib/agents/runtime/catalog";
 import { getSupportedRuntimes } from "@/lib/agents/profiles/compatibility";
+import { IconCircle, getProfileIcon, getDomainColors } from "@/lib/constants/card-icons";
 import type { AgentProfile } from "@/lib/agents/profiles/types";
 
 interface ProfileCardProps {
   profile: AgentProfile;
+  isBuiltin?: boolean;
   onClick: () => void;
 }
 
-export function ProfileCard({ profile, onClick }: ProfileCardProps) {
+export function ProfileCard({ profile, isBuiltin = true, onClick }: ProfileCardProps) {
   const runtimeLabelMap = new Map(
     listRuntimeCatalog().map((runtime) => [
       runtime.id,
@@ -32,13 +34,19 @@ export function ProfileCard({ profile, onClick }: ProfileCardProps) {
         }
       }}
     >
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-base font-medium">{profile.name}</CardTitle>
-        <Badge
-          variant={profile.domain === "work" ? "default" : "secondary"}
-        >
-          {profile.domain}
-        </Badge>
+      <CardHeader className="flex flex-row items-center gap-3 space-y-0 pb-2">
+        <IconCircle
+          icon={getProfileIcon(profile.id)}
+          colors={getDomainColors(profile.domain, isBuiltin)}
+        />
+        <div className="flex min-w-0 flex-1 items-center justify-between">
+          <CardTitle className="truncate text-base font-medium">{profile.name}</CardTitle>
+          <Badge
+            variant={profile.domain === "work" ? "default" : "secondary"}
+          >
+            {profile.domain}
+          </Badge>
+        </div>
       </CardHeader>
       <CardContent className="space-y-3">
         <p className="line-clamp-2 text-sm text-muted-foreground">

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,
@@ -39,6 +40,7 @@ import {
   getSupportedRuntimes,
 } from "@/lib/agents/profiles/compatibility";
 import type { AgentProfile } from "@/lib/agents/profiles/types";
+import { IconCircle, getProfileIcon, getDomainColors } from "@/lib/constants/card-icons";
 
 interface TestResult {
   task: string;
@@ -178,7 +180,11 @@ export function ProfileDetailView({ profileId, isBuiltin, initialProfile }: Prof
     <div className="space-y-6" aria-live="polite">
       {/* Header */}
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-3">
+          <IconCircle
+            icon={getProfileIcon(profile.id)}
+            colors={getDomainColors(profile.domain, isBuiltin)}
+          />
           <h1 className="text-2xl font-bold">{profile.name}</h1>
           <Badge variant={profile.domain === "work" ? "default" : "secondary"}>
             {profile.domain}
@@ -420,9 +426,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();
+    });
+  });
+});