selftune 0.2.22 → 0.2.24

package/packages/dashboard-core/src/screens/skill-report/SkillReportScaffold.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+import {
+  SkillReportGuideSheet,
+  SkillReportOnboardingBanner,
+  SkillReportTopRow,
+  SkillTrustNarrativePanel,
+  TrustSignalsGrid,
+} from "@selftune/ui/components";
+import { Button } from "@selftune/ui/primitives";
+import type { TrustFields, TrustState } from "@selftune/ui/types";
+
+export interface SkillReportNextAction {
+  icon: ReactNode;
+  text: string;
+  actionLabel: string;
+  variant: "default" | "secondary" | "destructive" | "outline";
+}
+
+export interface SkillReportScaffoldProps {
+  backLink: ReactNode;
+  title: string;
+  statusBadge?: ReactNode;
+  toolbarMeta?: ReactNode;
+  summary?: ReactNode;
+  showOnboardingBanner?: boolean;
+  guideButtonLabel?: string;
+  nextAction: SkillReportNextAction;
+  trustState: TrustState;
+  coverage?: TrustFields["coverage"];
+  evidenceQuality?: TrustFields["evidence_quality"];
+  routingQuality?: TrustFields["routing_quality"];
+  evolutionState?: TrustFields["evolution_state"];
+  dataHygiene?: TrustFields["data_hygiene"];
+  fallbackChecks: number;
+  fallbackSessions: number;
+  fallbackEvidenceRows: number;
+  fallbackEvolutionRows: number;
+  fallbackLatestAction?: string;
+  nextActionText: string;
+  children?: ReactNode;
+}
+
+export function SkillReportScaffold({
+  backLink,
+  title,
+  statusBadge,
+  toolbarMeta,
+  summary,
+  showOnboardingBanner = false,
+  guideButtonLabel = "How to read this page",
+  nextAction,
+  trustState,
+  coverage,
+  evidenceQuality,
+  routingQuality,
+  evolutionState,
+  dataHygiene,
+  fallbackChecks,
+  fallbackSessions,
+  fallbackEvidenceRows,
+  fallbackEvolutionRows,
+  fallbackLatestAction,
+  nextActionText,
+  children,
+}: SkillReportScaffoldProps) {
+  const [isGuideOpen, setIsGuideOpen] = useState(false);
+
+  return (
+    <>
+      <SkillReportGuideSheet open={isGuideOpen} onOpenChange={setIsGuideOpen} />
+
+      <div className="@container/main flex flex-1 flex-col gap-5 p-4 lg:px-6 lg:pb-6 lg:pt-0">
+        <div className="sticky top-0 z-30 space-y-2 border-b border-border/15 bg-background/95 py-2.5 backdrop-blur supports-[backdrop-filter]:bg-background/85">
+          <div className="flex flex-wrap items-center gap-3">
+            {backLink}
+            <h1 className="shrink-0 font-headline text-base font-semibold tracking-tight lg:text-lg">
+              {title}
+            </h1>
+            {statusBadge}
+            <div className="ml-auto flex shrink-0 items-center gap-4">
+              <Button variant="outline" size="sm" onClick={() => setIsGuideOpen(true)}>
+                {guideButtonLabel}
+              </Button>
+              {toolbarMeta}
+            </div>
+          </div>
+
+          {summary ? (
+            <div className="space-y-1.5 text-sm leading-relaxed text-muted-foreground">
+              {summary}
+            </div>
+          ) : null}
+        </div>
+
+        {showOnboardingBanner ? (
+          <SkillReportOnboardingBanner onOpenGuide={() => setIsGuideOpen(true)} />
+        ) : null}
+
+        <div className="space-y-4">
+          <SkillReportTopRow
+            nextAction={nextAction}
+            latestDecision={
+              (evolutionState?.evolution_rows ?? fallbackEvolutionRows) > 0 &&
+              (evolutionState?.latest_action ?? fallbackLatestAction)
+                ? {
+                    action: evolutionState?.latest_action ?? fallbackLatestAction ?? "No data",
+                    timestamp: evolutionState?.latest_timestamp ?? null,
+                    evolutionCount: evolutionState?.evolution_rows ?? fallbackEvolutionRows,
+                  }
+                : undefined
+            }
+          />
+
+          <SkillTrustNarrativePanel
+            trustState={trustState}
+            coverage={coverage}
+            evidenceQuality={evidenceQuality}
+            routingQuality={routingQuality}
+            evolutionState={evolutionState}
+            dataHygiene={dataHygiene}
+            fallbackChecks={fallbackChecks}
+            fallbackSessions={fallbackSessions}
+            nextActionText={nextActionText}
+            onOpenGuide={() => setIsGuideOpen(true)}
+          />
+
+          <TrustSignalsGrid
+            coverage={coverage}
+            evidenceQuality={evidenceQuality}
+            routingQuality={routingQuality}
+            evolutionState={evolutionState}
+            fallbackChecks={fallbackChecks}
+            fallbackSessions={fallbackSessions}
+            fallbackEvidenceRows={fallbackEvidenceRows}
+            fallbackEvolutionRows={fallbackEvolutionRows}
+            fallbackLatestAction={fallbackLatestAction}
+          />
+        </div>
+
+        {children ? (
+          <div className="space-y-4 border-t border-border/10 pt-4">{children}</div>
+        ) : null}
+      </div>
+    </>
+  );
+}

package/packages/dashboard-core/src/screens/skill-report/SkillReportSections.test.tsx

@@ -0,0 +1,224 @@
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@selftune/ui/components", () => ({
+  DataQualityPanel: ({
+    evidenceQuality,
+    dataHygiene,
+  }: {
+    evidenceQuality?: { prompt_link_rate: number };
+    dataHygiene?: { raw_checks: number };
+  }) => (
+    <div>
+      Data Quality
+      {evidenceQuality ? ` / prompt ${evidenceQuality.prompt_link_rate}` : ""}
+      {dataHygiene ? ` / rows ${dataHygiene.raw_checks}` : ""}
+    </div>
+  ),
+  EvidenceViewer: ({ proposalId }: { proposalId: string }) => (
+    <div>Evidence Viewer {proposalId}</div>
+  ),
+  InvocationsPanel: ({
+    invocations,
+    sessionMetadata,
+  }: {
+    invocations: Array<unknown>;
+    sessionMetadata?: Array<unknown>;
+  }) => (
+    <div>
+      Invocations {invocations.length}
+      {sessionMetadata ? ` / sessions ${sessionMetadata.length}` : ""}
+    </div>
+  ),
+  PromptEvidencePanel: ({
+    examples,
+  }: {
+    examples: { good: Array<unknown>; missed: Array<unknown>; noisy: Array<unknown> };
+  }) => (
+    <div>
+      Prompt Evidence / good {examples.good.length} / missed {examples.missed.length} / noisy{" "}
+      {examples.noisy.length}
+    </div>
+  ),
+}));
+
+vi.mock("@selftune/ui/primitives", () => ({
+  Card: ({ children }: { children?: ReactNode }) => <section>{children}</section>,
+  CardContent: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock("./SkillReportEvidenceRail", () => ({
+  SkillReportEvidenceRail: ({ activeProposal }: { activeProposal: string | null }) => (
+    <div>Evidence Rail {activeProposal ?? "none"}</div>
+  ),
+}));
+
+import { SkillReportEvidenceSection } from "./SkillReportEvidenceSection";
+import { SkillReportEvidenceTabContent } from "./SkillReportEvidenceTabContent";
+import { SkillReportInvocationsSection } from "./SkillReportInvocationsSection";
+import { SkillReportDataQualityTabContent } from "./SkillReportDataQualityTabContent";
+
+describe("Skill report shared sections", () => {
+  it("renders the shared evidence viewer layout", () => {
+    const html = renderToStaticMarkup(
+      <SkillReportEvidenceSection
+        evolution={[
+          {
+            proposal_id: "p1",
+            action: "validated",
+            timestamp: "2026-04-11T00:00:00Z",
+            details: "Validated",
+          },
+        ]}
+        activeProposal="p1"
+        onSelect={() => {}}
+        evidence={[
+          {
+            proposal_id: "p1",
+            target: "description",
+            stage: "validated",
+            timestamp: "2026-04-11T00:00:00Z",
+            rationale: null,
+            confidence: null,
+            original_text: null,
+            proposed_text: null,
+            validation: null,
+            details: null,
+            eval_set: [],
+          },
+        ]}
+        viewerProposalId="p1"
+        showViewer
+      />,
+    );
+
+    expect(html).toContain("Evidence Rail p1");
+    expect(html).toContain("Evidence Viewer p1");
+  });
+
+  it("renders the empty state when the viewer is disabled", () => {
+    const html = renderToStaticMarkup(
+      <SkillReportEvidenceSection
+        evolution={[]}
+        activeProposal={null}
+        onSelect={() => {}}
+        evidence={[]}
+        viewerProposalId=""
+        showViewer={false}
+        emptyState={<div>No shared evidence yet</div>}
+      />,
+    );
+
+    expect(html).toContain("No shared evidence yet");
+  });
+
+  it("renders the shared invocations wrapper", () => {
+    const html = renderToStaticMarkup(
+      <SkillReportInvocationsSection
+        invocations={[
+          {
+            timestamp: "2026-04-11T00:00:00Z",
+            session_id: "sess-1",
+            triggered: true,
+            query: "test query",
+            invocation_mode: "implicit",
+            confidence: 0.7,
+            tool_name: null,
+            agent_type: "main",
+          },
+        ]}
+        sessionMetadata={[
+          {
+            session_id: "sess-1",
+            agent_cli: "codex",
+          },
+        ]}
+        callout={<div>Operational invocations only</div>}
+      />,
+    );
+
+    expect(html).toContain("Operational invocations only");
+    expect(html).toContain("Invocations 1 / sessions 1");
+  });
+
+  it("renders prompt evidence ahead of the shared evidence viewer", () => {
+    const html = renderToStaticMarkup(
+      <SkillReportEvidenceTabContent
+        examples={{
+          good: [
+            {
+              timestamp: "2026-04-12T00:00:00Z",
+              session_id: "sess-1",
+              query_text: "good query",
+              triggered: true,
+              confidence: 0.91,
+              invocation_mode: "explicit",
+              prompt_kind: null,
+              source: "codex",
+              platform: "codex",
+              workspace_path: null,
+              query_origin: "matched_prompt",
+              is_system_like: false,
+              observation_kind: "canonical",
+            },
+          ],
+          missed: [],
+          noisy: [],
+        }}
+        evolution={[]}
+        activeProposal={null}
+        onSelect={() => {}}
+        evidence={[]}
+        viewerProposalId=""
+        showViewer={false}
+        emptyState={<div>No shared evidence yet</div>}
+      />,
+    );
+
+    expect(html).toContain("Prompt Evidence / good 1 / missed 0 / noisy 0");
+    expect(html).toContain("No shared evidence yet");
+  });
+
+  it("renders the data-quality panel when metrics are available", () => {
+    const html = renderToStaticMarkup(
+      <SkillReportDataQualityTabContent
+        evidenceQuality={{
+          prompt_link_rate: 0.85,
+          inline_query_rate: 0.6,
+          user_prompt_rate: 0.7,
+          meta_prompt_rate: 0.05,
+          internal_prompt_rate: 0.03,
+          no_prompt_rate: 0.22,
+          system_like_rate: 0.04,
+          invocation_mode_coverage: 1,
+          confidence_coverage: 0.9,
+          source_coverage: 1,
+          scope_coverage: 0.95,
+        }}
+        dataHygiene={{
+          naming_variants: [],
+          source_breakdown: [],
+          prompt_kind_breakdown: [],
+          observation_breakdown: [],
+          raw_checks: 42,
+          operational_checks: 40,
+          internal_prompt_rows: 1,
+          internal_prompt_rate: 0.02,
+          legacy_rows: 1,
+          legacy_rate: 0.02,
+          repaired_rows: 0,
+          repaired_rate: 0,
+        }}
+      />,
+    );
+
+    expect(html).toContain("Data Quality / prompt 0.85 / rows 42");
+  });
+
+  it("renders the empty data-quality state when metrics are unavailable", () => {
+    const html = renderToStaticMarkup(<SkillReportDataQualityTabContent />);
+
+    expect(html).toContain("Detailed data-quality metrics are not available for this skill yet.");
+  });
+});

package/packages/dashboard-core/src/screens/skill-report/SkillReportTabs.test.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@selftune/ui/primitives", () => ({
+  Tabs: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+  TabsList: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+  TabsTrigger: ({ children }: { children?: ReactNode }) => <button>{children}</button>,
+  TabsContent: ({ children }: { children?: ReactNode }) => <section>{children}</section>,
+  Tooltip: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+  TooltipTrigger: ({ children, render }: { children?: ReactNode; render?: ReactNode }) => (
+    <div>
+      {render}
+      {children}
+    </div>
+  ),
+  TooltipContent: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+}));
+
+import { SkillReportTabs } from "./SkillReportTabs";
+
+describe("SkillReportTabs", () => {
+  it("renders only visible tabs and their content", () => {
+    const html = renderToStaticMarkup(
+      <SkillReportTabs
+        defaultValue="evidence"
+        tabs={[
+          {
+            value: "evidence",
+            label: "Evidence",
+            content: <div>Evidence body</div>,
+          },
+          {
+            value: "invocations",
+            label: "Invocations",
+            content: <div>Invocations body</div>,
+          },
+          {
+            value: "hidden",
+            label: "Hidden",
+            hidden: true,
+            content: <div>Hidden body</div>,
+          },
+        ]}
+      />,
+    );
+
+    expect(html).toContain("Evidence");
+    expect(html).toContain("Invocations");
+    expect(html).toContain("Evidence body");
+    expect(html).toContain("Invocations body");
+    expect(html).not.toContain("Hidden");
+    expect(html).not.toContain("Hidden body");
+  });
+
+  it("renders tooltip and badge content when configured", () => {
+    const html = renderToStaticMarkup(
+      <SkillReportTabs
+        defaultValue="invocations"
+        tabs={[
+          {
+            value: "invocations",
+            label: "Invocations",
+            badge: <span>12</span>,
+            tooltip: "Operational invocations only",
+            content: <div>Invocations body</div>,
+          },
+        ]}
+      />,
+    );
+
+    expect(html).toContain("Invocations");
+    expect(html).toContain("12");
+    expect(html).toContain("Operational invocations only");
+  });
+});

package/packages/dashboard-core/src/screens/skill-report/SkillReportTabs.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@selftune/ui/primitives";
+
+export interface SkillReportTabDefinition {
+  value: string;
+  label: ReactNode;
+  badge?: ReactNode;
+  tooltip?: ReactNode;
+  content: ReactNode;
+  hidden?: boolean;
+  contentClassName?: string;
+}
+
+export interface SkillReportTabsProps {
+  tabs: SkillReportTabDefinition[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+const TRIGGER_CLASS_NAME =
+  "rounded-lg px-3 font-headline text-xs uppercase tracking-wider data-active:bg-background/70 data-active:text-foreground";
+
+export function SkillReportTabs({
+  tabs,
+  value,
+  defaultValue,
+  onValueChange,
+}: SkillReportTabsProps) {
+  const visibleTabs = tabs.filter((tab) => !tab.hidden);
+  if (visibleTabs.length === 0) return null;
+
+  const firstValue = visibleTabs[0]?.value;
+  const tabsProps =
+    value !== undefined
+      ? { value, onValueChange }
+      : { defaultValue: defaultValue ?? firstValue, onValueChange };
+
+  return (
+    <Tabs {...tabsProps}>
+      <TabsList
+        variant="line"
+        className="rounded-xl border border-border/10 bg-muted/20 px-1.5 py-1"
+      >
+        {visibleTabs.map((tab) => {
+          const triggerChildren = (
+            <>
+              {tab.label}
+              {tab.badge}
+            </>
+          );
+
+          return tab.tooltip ? (
+            <Tooltip key={tab.value}>
+              <TooltipTrigger
+                render={<TabsTrigger value={tab.value} className={TRIGGER_CLASS_NAME} />}
+              >
+                {triggerChildren}
+              </TooltipTrigger>
+              <TooltipContent>{tab.tooltip}</TooltipContent>
+            </Tooltip>
+          ) : (
+            <TabsTrigger key={tab.value} value={tab.value} className={TRIGGER_CLASS_NAME}>
+              {triggerChildren}
+            </TabsTrigger>
+          );
+        })}
+      </TabsList>
+
+      {visibleTabs.map((tab) => (
+        <TabsContent key={tab.value} value={tab.value} className={tab.contentClassName}>
+          {tab.content}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}

package/packages/dashboard-core/src/screens/skill-report/SkillReportTrendSection.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { PassRateTrendChart, type PassRateTrendPoint } from "@selftune/ui/components";
+import { Card, CardContent, CardHeader, CardTitle } from "@selftune/ui/primitives";
+
+export interface SkillReportTrendSectionProps {
+  data: PassRateTrendPoint[];
+  title?: ReactNode;
+  mode?: "pass_rate" | "volume";
+  isLoading?: boolean;
+  loadingState?: ReactNode;
+}
+
+export function SkillReportTrendSection({
+  data,
+  title = "Pass Rate Trend",
+  mode = "pass_rate",
+  isLoading = false,
+  loadingState,
+}: SkillReportTrendSectionProps) {
+  return (
+    <Card className="bg-muted border-none shadow-none ring-0">
+      <CardHeader>
+        <CardTitle className="font-headline text-lg tracking-tight">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {isLoading && loadingState ? loadingState : <PassRateTrendChart data={data} mode={mode} />}
+      </CardContent>
+    </Card>
+  );
+}

package/packages/dashboard-core/src/screens/skill-report/SkillReportTrustBadge.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import {
+  EyeIcon,
+  ShieldAlertIcon,
+  ShieldCheckIcon,
+  ShieldIcon,
+  ShieldQuestionIcon,
+} from "lucide-react";
+
+import { Badge } from "@selftune/ui/primitives";
+import type { TrustState } from "@selftune/ui/types";
+
+export function SkillReportTrustBadge({ state }: { state: TrustState }) {
+  const config = getSkillReportTrustBadgeConfig(state);
+
+  return (
+    <Badge variant={config.variant} className="gap-1 shrink-0 text-[10px]">
+      {config.icon}
+      {config.label}
+    </Badge>
+  );
+}
+
+export function getSkillReportTrustBadgeConfig(state: TrustState): {
+  label: string;
+  variant: "default" | "secondary" | "destructive" | "outline";
+  icon: ReactNode;
+} {
+  switch (state) {
+    case "low_sample":
+      return {
+        label: "Low Sample",
+        variant: "secondary",
+        icon: <ShieldQuestionIcon className="size-3" />,
+      };
+    case "observed":
+      return {
+        label: "Observed",
+        variant: "outline",
+        icon: <EyeIcon className="size-3" />,
+      };
+    case "watch":
+      return {
+        label: "Watch",
+        variant: "secondary",
+        icon: <ShieldAlertIcon className="size-3" />,
+      };
+    case "validated":
+      return {
+        label: "Validated",
+        variant: "default",
+        icon: <ShieldCheckIcon className="size-3" />,
+      };
+    case "deployed":
+      return {
+        label: "Deployed",
+        variant: "default",
+        icon: <ShieldCheckIcon className="size-3" />,
+      };
+    case "rolled_back":
+      return {
+        label: "Rolled Back",
+        variant: "destructive",
+        icon: <ShieldIcon className="size-3" />,
+      };
+  }
+}

package/packages/dashboard-core/src/screens/skill-report/index.ts

@@ -0,0 +1,45 @@
+export {
+  SkillReportEvidenceSection,
+  type SkillReportEvidenceSectionProps,
+} from "./SkillReportEvidenceSection";
+export {
+  SkillReportEvidenceRail,
+  type SkillReportEvidenceRailProps,
+} from "./SkillReportEvidenceRail";
+export {
+  SkillReportInvocationsSection,
+  type SkillReportInvocationsSectionProps,
+} from "./SkillReportInvocationsSection";
+export {
+  SkillReportEvidenceTabContent,
+  type SkillReportEvidenceTabContentProps,
+} from "./SkillReportEvidenceTabContent";
+export {
+  SkillReportDataQualityTabContent,
+  type SkillReportDataQualityTabContentProps,
+} from "./SkillReportDataQualityTabContent";
+export {
+  SkillReportTrendSection,
+  type SkillReportTrendSectionProps,
+} from "./SkillReportTrendSection";
+export {
+  SkillReportDailyBreakdownSection,
+  type SkillReportDailyBreakdownRow,
+  type SkillReportDailyBreakdownSectionProps,
+} from "./SkillReportDailyBreakdownSection";
+export {
+  SkillReportMissedQueriesSection,
+  type SkillReportMissedQueryRow,
+  type SkillReportMissedQueriesSectionProps,
+} from "./SkillReportMissedQueriesSection";
+export {
+  SkillReportTabs,
+  type SkillReportTabDefinition,
+  type SkillReportTabsProps,
+} from "./SkillReportTabs";
+export {
+  SkillReportScaffold,
+  type SkillReportNextAction,
+  type SkillReportScaffoldProps,
+} from "./SkillReportScaffold";
+export { SkillReportTrustBadge, getSkillReportTrustBadgeConfig } from "./SkillReportTrustBadge";