selftune 0.2.22 → 0.2.24

package/packages/dashboard-core/src/screens/overview/OverviewOnboardingBanner.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import { RocketIcon } from "lucide-react";
+
+export interface OverviewOnboardingBannerProps {
+  skillCount: number;
+  storageKey?: string;
+}
+
+export function OverviewOnboardingBanner({
+  skillCount,
+  storageKey = "selftune-onboarding-dismissed",
+}: OverviewOnboardingBannerProps) {
+  const [dismissed, setDismissed] = useState(() => {
+    try {
+      return localStorage.getItem(storageKey) === "true";
+    } catch {
+      return false;
+    }
+  });
+
+  if (skillCount > 0 || dismissed) return null;
+
+  const dismiss = () => {
+    setDismissed(true);
+    try {
+      localStorage.setItem(storageKey, "true");
+    } catch {
+      // ignore local storage failures
+    }
+  };
+
+  return (
+    <div className="col-span-12 rounded-xl border-2 border-dashed border-primary/30 bg-primary/5 p-8">
+      <div className="mx-auto flex max-w-md flex-col items-center gap-4 text-center">
+        <div className="flex size-12 items-center justify-center rounded-full bg-primary/10">
+          <RocketIcon className="size-6 text-primary" />
+        </div>
+        <h2 className="font-headline text-lg font-semibold">Welcome to selftune</h2>
+        <p className="text-sm leading-relaxed text-muted-foreground">
+          No skills detected yet. Once you start using selftune in your project, skills will appear
+          here automatically.
+        </p>
+        <div className="grid w-full grid-cols-1 gap-3 text-left sm:grid-cols-3">
+          <div className="flex items-start gap-2.5 rounded-lg border bg-card p-3">
+            <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-blue-500/10 text-xs font-bold text-blue-500">
+              1
+            </div>
+            <div>
+              <p className="text-xs font-medium">Run selftune</p>
+              <p className="text-[11px] text-muted-foreground">
+                Enable selftune in your project to start tracking skills
+              </p>
+            </div>
+          </div>
+          <div className="flex items-start gap-2.5 rounded-lg border bg-card p-3">
+            <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-amber-500/10 text-xs font-bold text-amber-500">
+              2
+            </div>
+            <div>
+              <p className="text-xs font-medium">Skills appear</p>
+              <p className="text-[11px] text-muted-foreground">
+                Skills are detected and monitored automatically
+              </p>
+            </div>
+          </div>
+          <div className="flex items-start gap-2.5 rounded-lg border bg-card p-3">
+            <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-emerald-500/10 text-xs font-bold text-emerald-500">
+              3
+            </div>
+            <div>
+              <p className="text-xs font-medium">Watch evolution</p>
+              <p className="text-[11px] text-muted-foreground">
+                Proposals flow in with validated improvements
+              </p>
+            </div>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={dismiss}
+          className="text-xs text-muted-foreground hover:text-foreground"
+        >
+          Dismiss
+        </button>
+      </div>
+    </div>
+  );
+}

package/packages/dashboard-core/src/screens/overview/OverviewRunSummary.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+
+import { timeAgo } from "@selftune/ui/lib";
+
+export interface OverviewRunSummaryProps {
+  lastRun: string | null;
+  deployed: number;
+  evolved: number;
+  watched: number;
+  runCount: number;
+  historyAction?: ReactNode;
+}
+
+export function OverviewRunSummary({
+  lastRun,
+  deployed,
+  evolved,
+  watched,
+  runCount,
+  historyAction,
+}: OverviewRunSummaryProps) {
+  if (runCount === 0) return null;
+
+  return (
+    <div className="col-span-12 flex items-center gap-6 rounded-xl border border-border/10 bg-card/50 px-5 py-3 text-xs text-muted-foreground">
+      <span className="font-headline text-[10px] uppercase tracking-[0.2em]">Last Cycle</span>
+      <span>{lastRun ? timeAgo(lastRun) : "Never"}</span>
+      <span className="text-muted-foreground/30">|</span>
+      <span>{deployed} deployed</span>
+      <span>{evolved} evolved</span>
+      <span>{watched} watched</span>
+      {historyAction ? (
+        <>
+          <span className="text-muted-foreground/30">|</span>
+          <span className="ml-auto">{historyAction}</span>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/packages/dashboard-core/src/screens/overview/index.ts

@@ -0,0 +1,16 @@
+export { OverviewCoreSurface, type OverviewCoreSurfaceProps } from "./OverviewCoreSurface";
+export {
+  OverviewCompositionSurface,
+  type OverviewCompositionSurfaceProps,
+} from "./OverviewCompositionSurface";
+export {
+  OverviewComparisonSurface,
+  type OverviewComparisonSurfaceProps,
+  type OverviewComparisonWatchlistConfig,
+} from "./OverviewComparisonSurface";
+export {
+  OverviewOnboardingBanner,
+  type OverviewOnboardingBannerProps,
+} from "./OverviewOnboardingBanner";
+export { OverviewRunSummary, type OverviewRunSummaryProps } from "./OverviewRunSummary";
+export type { OverviewComparisonRow } from "./types";

package/packages/dashboard-core/src/screens/overview/types.ts

@@ -0,0 +1,13 @@
+import type { EvolutionEntry, TrustBucket } from "@selftune/ui/types";
+
+export interface OverviewComparisonRow {
+  skillName: string;
+  subtext?: string | null;
+  triggerRate: number | null;
+  routingConfidence: number | null;
+  confidenceCoverage: number;
+  sessions: number;
+  lastEvolution: EvolutionEntry | null;
+  bucket: TrustBucket;
+  sortTimestamp?: string | null;
+}

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

@@ -0,0 +1,99 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@selftune/ui/primitives";
+
+export interface SkillReportDailyBreakdownRow {
+  date: string;
+  evalCount: number;
+  passRate: number;
+  explicit: number;
+  implicit: number;
+  contextual: number;
+}
+
+export interface SkillReportDailyBreakdownSectionProps {
+  rows: SkillReportDailyBreakdownRow[];
+  title?: ReactNode;
+  maxRows?: number;
+}
+
+function formatShortDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  if (Number.isNaN(date.getTime())) return dateStr;
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+function formatPercent(rate: number): string {
+  return `${(rate * 100).toFixed(1)}%`;
+}
+
+export function SkillReportDailyBreakdownSection({
+  rows,
+  title = "Daily Breakdown",
+  maxRows = 14,
+}: SkillReportDailyBreakdownSectionProps) {
+  if (rows.length === 0) return null;
+
+  return (
+    <Card className="bg-muted border-none shadow-none ring-0">
+      <CardHeader>
+        <CardTitle className="font-headline text-lg tracking-tight">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-xs uppercase text-muted-foreground">Date</TableHead>
+              <TableHead className="text-xs uppercase text-muted-foreground">Evals</TableHead>
+              <TableHead className="text-xs uppercase text-muted-foreground">Pass Rate</TableHead>
+              <TableHead className="text-xs uppercase text-muted-foreground">Explicit</TableHead>
+              <TableHead className="text-xs uppercase text-muted-foreground">Implicit</TableHead>
+              <TableHead className="text-xs uppercase text-muted-foreground">Contextual</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.slice(0, maxRows).map((row) => (
+              <TableRow key={row.date}>
+                <TableCell className="text-foreground">{formatShortDate(row.date)}</TableCell>
+                <TableCell className="font-mono text-muted-foreground">{row.evalCount}</TableCell>
+                <TableCell className="font-mono">
+                  <span
+                    className={
+                      row.passRate >= 0.8
+                        ? "text-emerald-400"
+                        : row.passRate >= 0.6
+                          ? "text-amber-400"
+                          : "text-red-400"
+                    }
+                  >
+                    {formatPercent(row.passRate)}
+                  </span>
+                </TableCell>
+                <TableCell className="font-mono text-muted-foreground">{row.explicit}</TableCell>
+                <TableCell className="font-mono text-muted-foreground">{row.implicit}</TableCell>
+                <TableCell className="font-mono text-muted-foreground">{row.contextual}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,35 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { DataQualityPanel } from "@selftune/ui/components";
+import { Card, CardContent } from "@selftune/ui/primitives";
+import type { TrustFields } from "@selftune/ui/types";
+
+export interface SkillReportDataQualityTabContentProps {
+  evidenceQuality?: TrustFields["evidence_quality"];
+  dataHygiene?: TrustFields["data_hygiene"];
+  emptyState?: ReactNode;
+}
+
+export function SkillReportDataQualityTabContent({
+  evidenceQuality,
+  dataHygiene,
+  emptyState,
+}: SkillReportDataQualityTabContentProps) {
+  if (!evidenceQuality && !dataHygiene) {
+    return (
+      emptyState ?? (
+        <Card className="rounded-2xl border border-border/15 bg-card">
+          <CardContent className="py-12">
+            <p className="text-center text-sm text-muted-foreground">
+              Detailed data-quality metrics are not available for this skill yet.
+            </p>
+          </CardContent>
+        </Card>
+      )
+    );
+  }
+
+  return <DataQualityPanel evidenceQuality={evidenceQuality} dataHygiene={dataHygiene} />;
+}

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { ChevronDownIcon } from "lucide-react";
+
+import { EvolutionTimeline } from "@selftune/ui/components";
+import type { EvolutionEntry } from "@selftune/ui/types";
+
+export interface SkillReportEvidenceRailProps {
+  evolution: EvolutionEntry[];
+  activeProposal: string | null;
+  onSelect(proposalId: string): void;
+  collapsedProposalCount?: number;
+}
+
+export function SkillReportEvidenceRail({
+  evolution,
+  activeProposal,
+  onSelect,
+  collapsedProposalCount = 6,
+}: SkillReportEvidenceRailProps) {
+  const proposalCount = useMemo(
+    () => new Set(evolution.map((entry) => entry.proposal_id)).size,
+    [evolution],
+  );
+  const shouldCollapse = proposalCount > collapsedProposalCount;
+  const [expanded, setExpanded] = useState(!shouldCollapse);
+
+  const visibleEntries = useMemo(() => {
+    if (expanded) return evolution;
+
+    const allowed = new Set<string>();
+    const collapsed: EvolutionEntry[] = [];
+    for (const entry of evolution) {
+      if (!allowed.has(entry.proposal_id)) {
+        if (allowed.size >= collapsedProposalCount) continue;
+        allowed.add(entry.proposal_id);
+      }
+      collapsed.push(entry);
+    }
+    return collapsed;
+  }, [collapsedProposalCount, evolution, expanded]);
+
+  return (
+    <aside className="w-full px-4 py-4 @5xl/main:w-[252px] @5xl/main:self-start @5xl/main:pr-0">
+      <div className="@5xl/main:sticky @5xl/main:top-16">
+        <div
+          className={`rounded-xl border border-border/10 bg-muted/20 px-3 py-3 text-xs ${expanded ? "themed-scroll max-h-[26rem] overflow-y-auto @5xl/main:max-h-[calc(100svh-6rem)]" : "overflow-visible"}`}
+        >
+          <EvolutionTimeline
+            entries={visibleEntries}
+            selectedProposalId={activeProposal}
+            onSelect={onSelect}
+          />
+          {shouldCollapse ? (
+            <button
+              type="button"
+              onClick={() => setExpanded((value) => !value)}
+              className="mt-2 flex w-full items-center justify-center gap-1.5 py-2 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <ChevronDownIcon
+                className={`size-3 transition-transform duration-150 ${expanded ? "rotate-180" : ""}`}
+              />
+              {expanded ? "Collapse timeline" : `Show full timeline (${proposalCount} proposals)`}
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </aside>
+  );
+}

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

@@ -0,0 +1,63 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { EvidenceViewer } from "@selftune/ui/components";
+import { Card, CardContent } from "@selftune/ui/primitives";
+import type { EvidenceEntry, EvolutionEntry } from "@selftune/ui/types";
+
+import { SkillReportEvidenceRail } from "./SkillReportEvidenceRail";
+
+export interface SkillReportEvidenceSectionProps {
+  evolution: EvolutionEntry[];
+  activeProposal: string | null;
+  onSelect: (proposalId: string) => void;
+  evidence: EvidenceEntry[];
+  viewerProposalId: string;
+  showViewer: boolean;
+  emptyState?: ReactNode;
+}
+
+export function SkillReportEvidenceSection({
+  evolution,
+  activeProposal,
+  onSelect,
+  evidence,
+  viewerProposalId,
+  showViewer,
+  emptyState,
+}: SkillReportEvidenceSectionProps) {
+  return (
+    <div className="overflow-hidden rounded-2xl border border-border/15 bg-card">
+      <div className="flex flex-col @5xl/main:grid @5xl/main:grid-cols-[252px_minmax(0,1fr)] @5xl/main:items-start">
+        {evolution.length > 0 ? (
+          <SkillReportEvidenceRail
+            evolution={evolution}
+            activeProposal={activeProposal}
+            onSelect={onSelect}
+          />
+        ) : null}
+
+        <div className="min-w-0 p-4 @xl/main:p-5">
+          {showViewer ? (
+            <EvidenceViewer
+              proposalId={viewerProposalId}
+              evolution={evolution}
+              evidence={evidence}
+            />
+          ) : (
+            (emptyState ?? (
+              <Card className="rounded-2xl">
+                <CardContent className="py-12">
+                  <div className="flex items-center justify-center text-sm text-muted-foreground">
+                    No recent evaluation evidence available
+                  </div>
+                </CardContent>
+              </Card>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+"use client";
+
+import { PromptEvidencePanel } from "@selftune/ui/components";
+import type { TrustFields } from "@selftune/ui/types";
+
+import {
+  SkillReportEvidenceSection,
+  type SkillReportEvidenceSectionProps,
+} from "./SkillReportEvidenceSection";
+
+export interface SkillReportEvidenceTabContentProps extends SkillReportEvidenceSectionProps {
+  examples?: TrustFields["examples"];
+}
+
+export function SkillReportEvidenceTabContent({
+  examples,
+  ...evidenceSectionProps
+}: SkillReportEvidenceTabContentProps) {
+  return (
+    <div data-parity-root="skill-report-evidence" className="space-y-6">
+      {examples ? <PromptEvidencePanel examples={examples} /> : null}
+      <SkillReportEvidenceSection {...evidenceSectionProps} />
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { InvocationsPanel, type InvocationRow, type SessionMeta } from "@selftune/ui/components";
+
+export interface SkillReportInvocationsSectionProps {
+  invocations: InvocationRow[];
+  sessionMetadata?: SessionMeta[];
+  callout?: ReactNode;
+}
+
+export function SkillReportInvocationsSection({
+  invocations,
+  sessionMetadata,
+  callout,
+}: SkillReportInvocationsSectionProps) {
+  return (
+    <div className="space-y-2">
+      {callout}
+      <InvocationsPanel invocations={invocations} sessionMetadata={sessionMetadata} />
+    </div>
+  );
+}

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

@@ -0,0 +1,79 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+export interface SkillReportMissedQueryRow {
+  id: string;
+  query: string;
+  confidence: number | null;
+  source: string | null;
+  createdAt: string;
+}
+
+export interface SkillReportMissedQueriesSectionProps {
+  rows: SkillReportMissedQueryRow[];
+  emptyState?: ReactNode;
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const now = Date.now();
+  const then = new Date(dateStr).getTime();
+  const diff = now - then;
+
+  const minutes = Math.floor(diff / 60_000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+
+  const date = new Date(dateStr);
+  if (Number.isNaN(date.getTime())) return dateStr;
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function SkillReportMissedQueriesSection({
+  rows,
+  emptyState,
+}: SkillReportMissedQueriesSectionProps) {
+  if (rows.length === 0) {
+    return (
+      emptyState ?? (
+        <div className="rounded-lg border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
+          No missed queries detected.
+        </div>
+      )
+    );
+  }
+
+  return (
+    <div data-parity-root="skill-report-missed-queries" className="space-y-3">
+      {rows.map((row) => (
+        <div key={row.id} className="flex items-start gap-3 rounded-lg border border-border p-3">
+          <div className="mt-0.5 h-2 w-2 shrink-0 rounded-full bg-orange-500" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm text-foreground">{row.query}</p>
+            <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
+              {row.confidence !== null && (
+                <span className="font-medium text-orange-600 dark:text-orange-400">
+                  {(row.confidence * 100).toFixed(0)}% confidence
+                </span>
+              )}
+              {row.source ? (
+                <span className="rounded bg-muted px-1.5 py-0.5">{row.source}</span>
+              ) : null}
+              <span>{formatRelativeTime(row.createdAt)}</span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}