chore: retimestamp to retrigger CI

getSkills (DetailsTab): null/undefined/empty inputs, id+name priority,
description truthy-guard edge cases, id-name precedence, falsy coercion.

extractSkills (SkillsTab): same inputs plus tags/examples coercion,
"undefined" id vs "Unnamed skill" name distinction, mixed valid/invalid.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

.gitea/workflows/status-reaper.yml

@@ -67,12 +67,13 @@ on:
 permissions:
   contents: read
 
-# Single-flight: two reaper ticks racing would POST duplicate
-# compensations. Idempotent at the API (Gitea overwrites by context
-# on POST /statuses/{sha}) but cleaner to serialise.
-concurrency:
-  group: status-reaper
-  cancel-in-progress: false
+# NOTE: NO `concurrency:` block is intentional.
+# Gitea 1.22.6 doesn't honor `cancel-in-progress: false`: queued ticks
+# of the same group get cancelled-with-started=0 instead of waiting
+# (DB-verified 2026-05-12, runs 16053/16085 of status-reaper.yml).
+# The reaper's POST /statuses/{sha} is idempotent — Gitea de-dups by
+# context — so concurrent ticks are safe; accept them rather than
+# serialise via the broken mechanism.
 
 jobs:
   reap:

canvas/src/components/tabs/DetailsTab.tsx

@@ -402,7 +402,7 @@ function Row({ label, value, mono }: { label: string; value: string; mono?: bool
   );
 }
 
-function getSkills(card: Record<string, unknown> | null): { id: string; description?: string }[] {
+export function getSkills(card: Record<string, unknown> | null): { id: string; description?: string }[] {
   if (!card) return [];
   const skills = card.skills;
   if (!Array.isArray(skills)) return [];

canvas/src/components/tabs/SkillsTab.tsx

@@ -647,7 +647,7 @@ export function SkillsTab({ workspaceId, data }: Props) {
   );
 }
 
-function extractSkills(agentCard: Record<string, unknown> | null): SkillEntry[] {
+export function extractSkills(agentCard: Record<string, unknown> | null): SkillEntry[] {
   if (!agentCard) return [];
   const rawSkills = agentCard.skills;
   if (!Array.isArray(rawSkills)) return [];

canvas/src/components/tabs/__tests__/extractSkills.test.ts

@@ -0,0 +1,140 @@
+// @vitest-environment jsdom
+/**
+ * Unit tests for extractSkills — pure helper from SkillsTab.
+ *
+ * Covers: null card, non-array skills, empty skills, full skill entries
+ * (id, name, description, tags, examples), id-only fallback, name-only
+ * fallback, string coercion, array coercion for tags/examples,
+ * filtering entries with no id after coercion, empty string id (filtered).
+ */
+import { describe, it, expect } from "vitest";
+import { extractSkills } from "../SkillsTab";
+
+describe("extractSkills", () => {
+  it("returns [] for null card", () => {
+    expect(extractSkills(null)).toEqual([]);
+  });
+
+  it("returns [] when card.skills is not an array", () => {
+    expect(extractSkills({ skills: undefined })).toEqual([]);
+    expect(extractSkills({ skills: "not-an-array" })).toEqual([]);
+    expect(extractSkills({ skills: { id: "x" } })).toEqual([]);
+  });
+
+  it("returns [] for empty skills array", () => {
+    expect(extractSkills({ skills: [] })).toEqual([]);
+  });
+
+  it("maps a fully-populated skill entry", () => {
+    const card = {
+      skills: [
+        {
+          id: "code_search",
+          name: "Code Search",
+          description: "Semantic code search",
+          tags: ["search", "code"],
+          examples: ["Find unused exports", "Search by AST pattern"],
+        },
+      ],
+    };
+    expect(extractSkills(card)).toEqual([
+      {
+        id: "code_search",
+        name: "Code Search",
+        description: "Semantic code search",
+        tags: ["search", "code"],
+        examples: ["Find unused exports", "Search by AST pattern"],
+      },
+    ]);
+  });
+
+  it("uses name as id when id is absent", () => {
+    const card = { skills: [{ name: "web_scraper" }] };
+    expect(extractSkills(card)).toEqual([
+      { id: "web_scraper", name: "web_scraper", description: "", tags: [], examples: [] },
+    ]);
+  });
+
+  it("uses id as name when name is absent", () => {
+    const card = { skills: [{ id: "legacy_skill" }] };
+    expect(extractSkills(card)).toEqual([
+      { id: "legacy_skill", name: "legacy_skill", description: "", tags: [], examples: [] },
+    ]);
+  });
+
+  it("filters out entries with neither id nor name", () => {
+    // id: String(undefined || undefined || "") → "" → filtered (id.length = 0)
+    const card = { skills: [{ description: "orphan entry" }] };
+    expect(extractSkills(card)).toEqual([]);
+  });
+
+  it("filters out entries with no id after string coercion", () => {
+    // id resolves to "" after String(undefined || null || {})
+    const card = { skills: [{ id: null, name: null }] };
+    expect(extractSkills(card)).toEqual([]);
+  });
+
+  it("filters out entries with empty-string id", () => {
+    const card = { skills: [{ id: "", name: "" }] };
+    expect(extractSkills(card)).toEqual([]);
+  });
+
+  it("coerces numeric tags to strings", () => {
+    const card = { skills: [{ id: "x", tags: [1, "two", 3] }] };
+    expect(extractSkills(card)).toEqual([
+      { id: "x", name: "x", description: "", tags: ["1", "two", "3"], examples: [] },
+    ]);
+  });
+
+  it("coerces non-array tags to empty array", () => {
+    const card = { skills: [{ id: "x", tags: "not-an-array" }] };
+    expect(extractSkills(card)).toEqual([
+      { id: "x", name: "x", description: "", tags: [], examples: [] },
+    ]);
+  });
+
+  it("coerces non-array examples to empty array", () => {
+    const card = { skills: [{ id: "x", examples: 42 }] };
+    expect(extractSkills(card)).toEqual([
+      { id: "x", name: "x", description: "", tags: [], examples: [] },
+    ]);
+  });
+
+  // NOTE: extractSkills uses `String(skill.description || "")` — falsy values
+  // (0, null, false) fall through to "", NOT to their string form.
+  it("returns '' for falsy description values (0, null, false)", () => {
+    const card = { skills: [{ id: "x", description: 0 }] };
+    expect(extractSkills(card)).toEqual([
+      { id: "x", name: "x", description: "", tags: [], examples: [] },
+    ]);
+  });
+
+  it("handles mixed valid/invalid entries", () => {
+    const card = {
+      skills: [
+        { id: "valid_one", name: "One" },
+        { name: "named_only" },
+        { description: "orphan" },               // filtered — id becomes ""
+        { id: "valid_two", examples: ["a", "b"] },
+      ],
+    };
+    expect(extractSkills(card)).toEqual([
+      { id: "valid_one", name: "One", description: "", tags: [], examples: [] },
+      { id: "named_only", name: "named_only", description: "", tags: [], examples: [] },
+      { id: "valid_two", name: "valid_two", description: "", tags: [], examples: ["a", "b"] },
+    ]);
+  });
+
+  it("handles a realistic agent card with multiple skills", () => {
+    const card = {
+      skills: [
+        { id: "web_search", name: "Web Search", description: "Search the web", tags: ["search"], examples: ["Latest news"] },
+        { id: "file_read", name: "Read Files", description: "Read from disk", tags: ["io"], examples: [] },
+      ],
+    };
+    const result = extractSkills(card);
+    expect(result).toHaveLength(2);
+    expect(result[0].id).toBe("web_search");
+    expect(result[1].tags).toEqual(["io"]);
+  });
+});

canvas/src/components/tabs/__tests__/getSkills.test.ts

@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+/**
+ * Unit tests for getSkills — pure helper from DetailsTab.
+ *
+ * Covers: null card, non-array skills, empty skills, id-only entries,
+ * name-only entries (id derives from name), entries with description,
+ * entries with neither id nor name (filtered out), mixed entries.
+ */
+import { describe, it, expect } from "vitest";
+import { getSkills } from "../DetailsTab";
+
+describe("getSkills", () => {
+  it("returns [] for null card", () => {
+    expect(getSkills(null)).toEqual([]);
+  });
+
+  it("returns [] when card.skills is not an array", () => {
+    expect(getSkills({ skills: undefined })).toEqual([]);
+    expect(getSkills({ skills: "not-an-array" })).toEqual([]);
+    expect(getSkills({ skills: { id: "x" } })).toEqual([]);
+  });
+
+  it("returns [] for empty skills array", () => {
+    expect(getSkills({ skills: [] })).toEqual([]);
+  });
+
+  it("maps skill with id and description", () => {
+    const card = { skills: [{ id: "code_search", description: "Find code patterns" }] };
+    expect(getSkills(card)).toEqual([{ id: "code_search", description: "Find code patterns" }]);
+  });
+
+  it("maps skill with id only (description absent)", () => {
+    const card = { skills: [{ id: "code_search" }] };
+    expect(getSkills(card)).toEqual([{ id: "code_search", description: undefined }]);
+  });
+
+  it("derives id from name when id is absent", () => {
+    const card = { skills: [{ name: "web_scraper" }] };
+    expect(getSkills(card)).toEqual([{ id: "web_scraper" }]);
+  });
+
+  it("maps description when present", () => {
+    const card = { skills: [{ id: "file_write", description: "Writes files to disk" }] };
+    expect(getSkills(card)).toEqual([{ id: "file_write", description: "Writes files to disk" }]);
+  });
+
+  it("returns description as undefined when skill has no description", () => {
+    const card = { skills: [{ id: "noop_skill" }] };
+    const result = getSkills(card);
+    // The map always includes description; it's undefined when absent
+    expect(result).toEqual([{ id: "noop_skill", description: undefined }]);
+  });
+
+  it("filters out skills with neither id nor name", () => {
+    // id: String(undefined || undefined || "") → "" → filtered
+    const card = { skills: [{ description: "loner" }] };
+    expect(getSkills(card)).toEqual([]);
+  });
+
+  it("handles mixed valid/invalid entries", () => {
+    const card = {
+      skills: [
+        { id: "valid_one" },
+        { name: "named_skill" },
+        { description: "orphaned" },   // filtered
+        { id: "valid_two", description: "Has both" },
+      ],
+    };
+    expect(getSkills(card)).toEqual([
+      { id: "valid_one", description: undefined },
+      { id: "named_skill", description: undefined },
+      { id: "valid_two", description: "Has both" },
+    ]);
+  });
+
+  it("handles string coercion for numeric ids/names", () => {
+    const card = { skills: [{ id: 42, name: "numeric_id" }] };
+    expect(getSkills(card)).toEqual([{ id: "42" }]);
+  });
+
+  it("uses id over name when both are present", () => {
+    const card = { skills: [{ id: "priority_id", name: "fallback_name" }] };
+    expect(getSkills(card)).toEqual([{ id: "priority_id", description: undefined }]);
+  });
+
+  it("omits description when it is falsy (0 is falsy in JS)", () => {
+    // The implementation uses `s.description ?` — 0 is falsy, so it's treated
+    // as absent and undefined is returned. Non-zero numbers coerce fine.
+    const cardZero = { skills: [{ id: "x", description: 0 }] };
+    expect(getSkills(cardZero)).toEqual([{ id: "x", description: undefined }]);
+
+    const cardNum = { skills: [{ id: "x", description: 42 }] };
+    expect(getSkills(cardNum)).toEqual([{ id: "x", description: "42" }]);
+  });
+});

canvas/src/components/ui/__tests__/KeyValueField.test.tsx

@@ -0,0 +1,142 @@
+// @vitest-environment jsdom
+/**
+ * Tests for KeyValueField component.
+ *
+ * Covers: initial password type, onChange callback (including whitespace trim
+ * on type), aria-label forwarding, disabled state, and auto-hide timer setup.
+ */
+import React from "react";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
+import { KeyValueField } from "../KeyValueField";
+
+describe("KeyValueField — rendering", () => {
+  afterEach(cleanup);
+
+  it("renders input with type=password by default (secret hidden)", () => {
+    render(<KeyValueField value="" onChange={vi.fn()} />);
+    const input = screen.getByLabelText("Secret value");
+    expect(input.getAttribute("type")).toBe("password");
+  });
+
+  it("passes custom aria-label to the input element", () => {
+    render(<KeyValueField value="" onChange={vi.fn()} aria-label="API secret key" />);
+    expect(screen.getByLabelText("API secret key")).toBeTruthy();
+  });
+
+  it("disables the input when disabled=true", () => {
+    render(<KeyValueField value="secret" onChange={vi.fn()} disabled />);
+    expect(screen.getByLabelText("Secret value").disabled).toBe(true);
+  });
+
+  it("renders with the current value", () => {
+    render(<KeyValueField value="sk-test-key-123" onChange={vi.fn()} />);
+    expect(screen.getByLabelText("Secret value").value).toBe("sk-test-key-123");
+  });
+
+  it("renders with the placeholder text", () => {
+    render(<KeyValueField value="" onChange={vi.fn()} placeholder="Enter API key" />);
+    expect(screen.getByLabelText("Secret value").getAttribute("placeholder")).toBe("Enter API key");
+  });
+
+  it("renders the RevealToggle child button", () => {
+    render(<KeyValueField value="secret" onChange={vi.fn()} />);
+    // KeyValueField renders exactly one button (the RevealToggle)
+    expect(screen.getByRole("button")).toBeTruthy();
+  });
+});
+
+describe("KeyValueField — onChange", () => {
+  afterEach(cleanup);
+
+  it("calls onChange with the new value when user types", () => {
+    const onChange = vi.fn();
+    render(<KeyValueField value="" onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText("Secret value"), { target: { value: "new-value" } });
+    expect(onChange).toHaveBeenCalledWith("new-value");
+  });
+
+  it("trims leading whitespace when user types with leading space", () => {
+    const onChange = vi.fn();
+    render(<KeyValueField value="" onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText("Secret value"), { target: { value: "  trimmed" } });
+    expect(onChange).toHaveBeenCalledWith("trimmed");
+  });
+
+  it("trims trailing whitespace when user types with trailing space", () => {
+    const onChange = vi.fn();
+    render(<KeyValueField value="" onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText("Secret value"), { target: { value: "trimmed  " } });
+    expect(onChange).toHaveBeenCalledWith("trimmed");
+  });
+
+  it("trims both sides when user types whitespace-surrounded value", () => {
+    const onChange = vi.fn();
+    render(<KeyValueField value="" onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText("Secret value"), { target: { value: "  both sides  " } });
+    expect(onChange).toHaveBeenCalledWith("both sides");
+  });
+
+  it("does not modify value with no whitespace", () => {
+    const onChange = vi.fn();
+    render(<KeyValueField value="" onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText("Secret value"), { target: { value: "clean-value" } });
+    expect(onChange).toHaveBeenCalledWith("clean-value");
+  });
+});
+
+describe("KeyValueField — auto-hide timer setup", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+  });
+
+  it("sets up a 30s setTimeout when the component mounts with a non-empty value", () => {
+    const setTimeoutSpy = vi.spyOn(global, "setTimeout");
+    render(<KeyValueField value="secret" onChange={vi.fn()} />);
+    // No timer should be set initially (revealed=false by default)
+    const callsBeforeInteraction = setTimeoutSpy.mock.calls.length;
+
+    // Simulate reveal (click the only button)
+    act(() => { fireEvent.click(screen.getByRole("button")); });
+
+    // After reveal, a 30s timer should be set
+    const timerCalls = setTimeoutSpy.mock.calls.filter(
+      ([, delay]) => delay === 30_000,
+    );
+    expect(timerCalls.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("clears existing timer when a new toggle happens before auto-hide fires", () => {
+    const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");
+    const timerObj = {}; // fake timer ID
+    vi.spyOn(global, "setTimeout").mockImplementation((fn: () => void, delay: number) => {
+      return timerObj;
+    });
+    render(<KeyValueField value="secret" onChange={vi.fn()} />);
+
+    // First toggle — reveal
+    act(() => { fireEvent.click(screen.getByRole("button")); });
+
+    // Second toggle — hide (should clear the timer from first toggle)
+    act(() => { fireEvent.click(screen.getByRole("button")); });
+
+    // clearTimeout was called with the timer object
+    expect(clearTimeoutSpy).toHaveBeenCalledWith(timerObj);
+  });
+
+  it("clears timer on unmount", () => {
+    const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");
+    const { unmount } = render(<KeyValueField value="secret" onChange={vi.fn()} />);
+
+    // Toggle reveal to start the timer
+    act(() => { fireEvent.click(screen.getByRole("button")); });
+
+    unmount();
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+  });
+});

canvas/src/components/ui/__tests__/RevealToggle.test.tsx

@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+/**
+ * Tests for RevealToggle component.
+ *
+ * Covers: eye-icon (hidden) vs eye-off-icon (revealed), onToggle callback,
+ * aria-label (default + custom), title attribute.
+ */
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { RevealToggle } from "../RevealToggle";
+
+afterEach(cleanup);
+
+describe("RevealToggle", () => {
+  it("renders as a button", () => {
+    render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
+    expect(screen.getByRole("button")).toBeTruthy();
+  });
+
+  it("uses default aria-label when not provided", () => {
+    render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
+    expect(screen.getByRole("button").getAttribute("aria-label")).toBe("Toggle reveal secret");
+  });
+
+  it("uses custom aria-label when provided", () => {
+    render(<RevealToggle revealed={false} onToggle={vi.fn()} label="Show password" />);
+    expect(screen.getByRole("button").getAttribute("aria-label")).toBe("Show password");
+  });
+
+  it('title is "Hide value" when revealed', () => {
+    render(<RevealToggle revealed={true} onToggle={vi.fn()} />);
+    expect(screen.getByRole("button").getAttribute("title")).toBe("Hide value");
+  });
+
+  it('title is "Show value" when hidden', () => {
+    render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
+    expect(screen.getByRole("button").getAttribute("title")).toBe("Show value");
+  });
+
+  it("calls onToggle when clicked (revealed=true → should hide)", () => {
+    const onToggle = vi.fn();
+    render(<RevealToggle revealed={true} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onToggle when clicked (revealed=false → should show)", () => {
+    const onToggle = vi.fn();
+    render(<RevealToggle revealed={false} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the eye-open SVG (hide icon) when revealed=false", () => {
+    render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
+    const btn = screen.getByRole("button");
+    // The eye SVG contains a circle element; eye-off has a strikethrough line
+    expect(btn.querySelector("circle")).toBeTruthy();
+    expect(btn.querySelectorAll("line")).toHaveLength(0);
+  });
+
+  it("renders the eye-off SVG (show icon) when revealed=true", () => {
+    render(<RevealToggle revealed={true} onToggle={vi.fn()} />);
+    const btn = screen.getByRole("button");
+    // EyeOffIcon has a line (strikethrough) through the eye
+    expect(btn.querySelectorAll("line")).toHaveLength(1);
+  });
+});

canvas/src/components/ui/__tests__/ValidationHint.test.tsx

@@ -0,0 +1,49 @@
+// @vitest-environment jsdom
+/**
+ * Tests for ValidationHint component.
+ *
+ * Covers: null/neutral render, error state (red ⚠ + message), valid state
+ * (green ✓ + "Valid format"), ARIA role="alert" on error.
+ */
+import { afterEach, describe, it, expect } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { ValidationHint } from "../ValidationHint";
+
+afterEach(cleanup);
+
+describe("ValidationHint", () => {
+  it("renders nothing when error is null and showValid is false", () => {
+    const { container } = render(<ValidationHint error={null} showValid={false} />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders nothing when error is null and showValid is undefined", () => {
+    const { container } = render(<ValidationHint error={null} />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders error state with ⚠ icon and message", () => {
+    render(<ValidationHint error="Key name must be UPPER_SNAKE_CASE" />);
+    const el = screen.getByRole("alert");
+    expect(el.textContent).toContain("⚠");
+    expect(el.textContent).toContain("Key name must be UPPER_SNAKE_CASE");
+  });
+
+  it("renders valid state with ✓ and 'Valid format'", () => {
+    render(<ValidationHint error={null} showValid />);
+    const el = screen.getByText("Valid format");
+    expect(el.textContent).toContain("✓");
+  });
+
+  it("prefers error over valid when both are set (error is not null)", () => {
+    // ValidationHint checks error first; showValid is only rendered when error is falsy.
+    render(<ValidationHint error="Some error" showValid />);
+    expect(screen.getByRole("alert")).toBeTruthy();
+    expect(screen.queryByText("Valid format")).toBeNull();
+  });
+
+  it("error alert has role='alert' for screen readers", () => {
+    render(<ValidationHint error="Invalid format" />);
+    expect(screen.getByRole("alert")).toBeTruthy();
+  });
+});