selftune 0.2.2 → 0.2.6

package/packages/ui/src/components/EvolutionTimeline.tsx

@@ -0,0 +1,252 @@
+import { useState } from "react"
+import { Badge } from "../primitives/badge"
+import { cn } from "../lib/utils"
+import type { EvalSnapshot, EvolutionEntry } from "../types"
+import { timeAgo } from "../lib/format"
+import {
+  CircleDotIcon,
+  RocketIcon,
+  ShieldCheckIcon,
+  XCircleIcon,
+  UndoIcon,
+  TrendingUpIcon,
+  TrendingDownIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+
+const ACTION_ICON: Record<string, React.ReactNode> = {
+  created: <CircleDotIcon className="size-3.5" />,
+  validated: <ShieldCheckIcon className="size-3.5" />,
+  deployed: <RocketIcon className="size-3.5" />,
+  rejected: <XCircleIcon className="size-3.5" />,
+  rolled_back: <UndoIcon className="size-3.5" />,
+}
+
+const ACTION_COLOR: Record<string, string> = {
+  created: "bg-blue-500",
+  validated: "bg-amber-500",
+  deployed: "bg-emerald-500",
+  rejected: "bg-red-500",
+  rolled_back: "bg-red-400",
+}
+
+const ACTION_RING: Record<string, string> = {
+  created: "ring-blue-500/30",
+  validated: "ring-amber-500/30",
+  deployed: "ring-emerald-500/30",
+  rejected: "ring-red-500/30",
+  rolled_back: "ring-red-400/30",
+}
+
+const ACTION_LINE: Record<string, string> = {
+  created: "bg-blue-500/30",
+  validated: "bg-amber-500/30",
+  deployed: "bg-emerald-500/30",
+  rejected: "bg-red-500/30",
+  rolled_back: "bg-red-400/30",
+}
+
+interface Props {
+  entries: EvolutionEntry[]
+  selectedProposalId: string | null
+  onSelect: (proposalId: string) => void
+}
+
+/** Group evolution entries by proposal_id, ordered newest-first. */
+function groupByProposal(entries: EvolutionEntry[]) {
+  const map = new Map<string, EvolutionEntry[]>()
+  for (const e of entries) {
+    const group = map.get(e.proposal_id) ?? []
+    group.push(e)
+    map.set(e.proposal_id, group)
+  }
+  for (const group of map.values()) {
+    group.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
+  }
+  return Array.from(map.entries()).sort((a, b) => {
+    const aLast = a[1][a[1].length - 1]
+    const bLast = b[1][b[1].length - 1]
+    return new Date(bLast.timestamp).getTime() - new Date(aLast.timestamp).getTime()
+  })
+}
+
+function terminalAction(entries: EvolutionEntry[]): string {
+  return entries[entries.length - 1].action
+}
+
+/** Find the best eval_snapshot across all steps in a proposal group */
+function findEvalSnapshot(steps: EvolutionEntry[]): EvalSnapshot | null {
+  for (let i = steps.length - 1; i >= 0; i--) {
+    if (steps[i].eval_snapshot) return steps[i].eval_snapshot!
+  }
+  return null
+}
+
+function PassRateDelta({ snapshot }: { snapshot: EvalSnapshot }) {
+  const net = snapshot.net_change
+  if (net === undefined || net === null) return null
+  const pct = Math.round(net * 100)
+  const isPositive = pct > 0
+  return (
+    <span className={cn(
+      "inline-flex items-center gap-0.5 text-[10px] font-mono font-medium",
+      isPositive ? "text-emerald-600 dark:text-emerald-400" : "text-red-500",
+    )}>
+      {isPositive ? <TrendingUpIcon className="size-2.5" /> : <TrendingDownIcon className="size-2.5" />}
+      {isPositive ? "+" : ""}{pct}%
+    </span>
+  )
+}
+
+const LIFECYCLE_STEPS = [
+  { action: "created", label: "Created", desc: "Proposal generated from session data" },
+  { action: "validated", label: "Validated", desc: "Eval tests run, awaiting deployment" },
+  { action: "deployed", label: "Deployed", desc: "Accepted and applied to skill file" },
+  { action: "rejected", label: "Rejected", desc: "Failed validation criteria" },
+  { action: "rolled_back", label: "Rolled Back", desc: "Reverted after deployment" },
+]
+
+function LifecycleLegend() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="px-2 pb-2">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1 text-[10px] text-muted-foreground/70 hover:text-muted-foreground transition-colors w-full"
+      >
+        {open ? <ChevronDownIcon className="size-3" /> : <ChevronRightIcon className="size-3" />}
+        Lifecycle stages
+      </button>
+      {open && (
+        <div className="mt-1.5 space-y-1.5 rounded-md border bg-muted/30 p-2">
+          {LIFECYCLE_STEPS.map((step) => (
+            <div key={step.action} className="flex items-start gap-2">
+              <div className={cn(
+                "size-2 rounded-full mt-1 shrink-0",
+                ACTION_COLOR[step.action],
+              )} />
+              <div className="min-w-0">
+                <span className="text-[10px] font-medium">{step.label}</span>
+                <p className="text-[10px] text-muted-foreground/70 leading-tight">{step.desc}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Props) {
+  const groups = groupByProposal(entries)
+
+  if (groups.length === 0) {
+    return (
+      <div className="flex items-center justify-center rounded-lg border border-dashed py-6 px-3">
+        <p className="text-xs text-muted-foreground">No evolution history yet</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-0">
+      <h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-2 pb-2 sticky top-0 z-10 bg-background">
+        Evolution
+      </h2>
+      <LifecycleLegend />
+      <nav className="flex flex-col">
+        {groups.map(([proposalId, steps], groupIdx) => {
+          const terminal = terminalAction(steps)
+          const isSelected = selectedProposalId === proposalId
+          const lastStep = steps[steps.length - 1]
+          const dotColor = ACTION_COLOR[terminal] ?? "bg-muted-foreground"
+          const ringColor = ACTION_RING[terminal] ?? "ring-muted-foreground/30"
+          const lineColor = ACTION_LINE[terminal] ?? "bg-border"
+          const isLast = groupIdx === groups.length - 1
+          const snapshot = findEvalSnapshot(steps)
+
+          return (
+            <div key={proposalId} className="relative flex gap-3">
+              {/* Vertical connector line */}
+              <div className="flex flex-col items-center">
+                <div className={cn(
+                  "flex items-center justify-center size-7 rounded-full ring-2 text-white shrink-0 z-10",
+                  dotColor,
+                  ringColor,
+                )}>
+                  {ACTION_ICON[terminal] ?? <CircleDotIcon className="size-3.5" />}
+                </div>
+                {!isLast && (
+                  <div className={cn("w-0.5 flex-1 min-h-[16px]", lineColor)} />
+                )}
+              </div>
+
+              {/* Content */}
+              <button
+                type="button"
+                onClick={() => onSelect(proposalId)}
+                className={cn(
+                  "flex-1 min-w-0 rounded-md px-2.5 py-2 text-left transition-all mb-1",
+                  "hover:bg-accent/50",
+                  isSelected
+                    ? "bg-primary/5 ring-1 ring-primary/20"
+                    : "",
+                )}
+              >
+                <div className="flex items-center gap-1.5">
+                  <Badge
+                    variant={terminal === "deployed" ? "default" : terminal === "rejected" || terminal === "rolled_back" ? "destructive" : "secondary"}
+                    className="text-[10px] capitalize"
+                  >
+                    {terminal.replace("_", " ")}
+                  </Badge>
+                  <span className="text-[10px] text-muted-foreground">
+                    {timeAgo(lastStep.timestamp)}
+                  </span>
+                </div>
+                {/* Pass rate delta from eval snapshot */}
+                {snapshot && (
+                  <div className="flex items-center gap-1.5 mt-1">
+                    <PassRateDelta snapshot={snapshot} />
+                    {snapshot.before_pass_rate !== undefined && snapshot.after_pass_rate !== undefined && (
+                      <span className="text-[10px] text-muted-foreground/60 font-mono">
+                        {Math.round(snapshot.before_pass_rate * 100)}&rarr;{Math.round(snapshot.after_pass_rate * 100)}%
+                      </span>
+                    )}
+                  </div>
+                )}
+                <div className="flex items-center gap-1.5 mt-1">
+                  <span className="text-[10px] font-mono text-muted-foreground/70">
+                    #{proposalId.slice(0, 8)}
+                  </span>
+                  {/* Step dots */}
+                  {steps.length > 1 && (
+                    <div className="flex gap-0.5 ml-auto">
+                      {steps.map((s, i) => (
+                        <div
+                          key={`${s.action}-${i}`}
+                          className={cn(
+                            "size-1.5 rounded-full",
+                            ACTION_COLOR[s.action] ?? "bg-muted-foreground",
+                          )}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+                {lastStep.details && (
+                  <p className="text-[11px] text-muted-foreground/80 line-clamp-2 mt-1 leading-snug">
+                    {lastStep.details}
+                  </p>
+                )}
+              </button>
+            </div>
+          )
+        })}
+      </nav>
+    </div>
+  )
+}

package/packages/ui/src/components/InfoTip.tsx

@@ -0,0 +1,19 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/tooltip"
+import { InfoIcon } from "lucide-react"
+
+/** Small info icon that shows a tooltip on hover. Used to explain metrics and concepts. */
+export function InfoTip({ text }: { text: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        className="inline-flex items-center text-muted-foreground/50 hover:text-muted-foreground transition-colors cursor-help"
+        onClick={(e) => e.preventDefault()}
+      >
+        <InfoIcon className="size-3" />
+      </TooltipTrigger>
+      <TooltipContent side="top" className="max-w-[220px]">
+        {text}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

package/packages/ui/src/components/OrchestrateRunsPanel.tsx

@@ -0,0 +1,164 @@
+import { useState } from "react"
+import { Badge } from "../primitives/badge"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../primitives/card"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../primitives/collapsible"
+import type { OrchestrateRunReport, OrchestrateRunSkillAction } from "../types"
+import { timeAgo } from "../lib/format"
+import {
+  BotIcon,
+  CheckCircleIcon,
+  ChevronRightIcon,
+  EyeIcon,
+  SkipForwardIcon,
+  ZapIcon,
+} from "lucide-react"
+
+const ACTION_ICON: Record<string, React.ReactNode> = {
+  evolve: <ZapIcon className="size-3 text-amber-500" />,
+  watch: <EyeIcon className="size-3 text-blue-500" />,
+  skip: <SkipForwardIcon className="size-3 text-muted-foreground" />,
+}
+
+function SkillActionRow({ action }: { action: OrchestrateRunSkillAction }) {
+  return (
+    <div className="flex items-start gap-2 py-1">
+      <div className="mt-0.5 shrink-0">{ACTION_ICON[action.action] ?? null}</div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-1.5">
+          <span className="text-xs font-medium truncate">{action.skill}</span>
+          <Badge
+            variant={
+              action.rolledBack ? "destructive"
+              : action.action === "evolve" && action.deployed ? "default"
+              : action.action === "evolve" ? "secondary"
+              : action.action === "watch" ? "outline"
+              : "secondary"
+            }
+            className="text-[10px] h-4 px-1.5 shrink-0"
+          >
+            {action.rolledBack ? "rolled back"
+             : action.action === "evolve" && action.deployed ? "deployed"
+             : action.action === "evolve" ? "evolved"
+             : action.action}
+          </Badge>
+          {action.alert && (
+            <Badge variant="destructive" className="text-[10px] h-4 px-1.5 shrink-0">
+              alert
+            </Badge>
+          )}
+        </div>
+        <p className="text-[11px] text-muted-foreground line-clamp-1">{action.reason}</p>
+      </div>
+    </div>
+  )
+}
+
+function RunCard({ run }: { run: OrchestrateRunReport }) {
+  const [open, setOpen] = useState(false)
+  const nonSkipActions = run.skill_actions.filter((a) => a.action !== "skip")
+  const skipActions = run.skill_actions.filter((a) => a.action === "skip")
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="w-full text-left">
+        <div className="flex items-start gap-3 py-2 hover:bg-muted/50 rounded-md px-2 -mx-2 transition-colors">
+          <div className={`mt-1.5 size-2 shrink-0 rounded-full ${
+            run.deployed > 0 ? "bg-emerald-500"
+            : run.evolved > 0 ? "bg-amber-400"
+            : "bg-muted-foreground/40"
+          }`} />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-mono text-muted-foreground">{timeAgo(run.timestamp)}</span>
+              {run.dry_run && (
+                <Badge variant="outline" className="text-[10px] h-4 px-1.5">dry-run</Badge>
+              )}
+              {run.approval_mode === "review" && (
+                <Badge variant="outline" className="text-[10px] h-4 px-1.5">review</Badge>
+              )}
+            </div>
+            <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+              {run.deployed > 0 && <span className="text-emerald-600 font-medium">{run.deployed} deployed</span>}
+              {run.evolved > 0 && <span>{run.evolved} evolved</span>}
+              {run.watched > 0 && <span>{run.watched} watched</span>}
+              {run.skipped > 0 && <span>{run.skipped} skipped</span>}
+              <span>{(run.elapsed_ms / 1000).toFixed(1)}s</span>
+            </div>
+          </div>
+          <ChevronRightIcon className={`size-4 text-muted-foreground shrink-0 mt-1 transition-transform duration-200 ${open ? "rotate-90" : ""}`} />
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="ml-5 pl-3 border-l border-border space-y-0.5 pb-2">
+          {nonSkipActions.map((action, i) => (
+            <SkillActionRow key={`${action.skill}-${i}`} action={action} />
+          ))}
+          {skipActions.length > 0 && (
+            <details className="group">
+              <summary className="text-[11px] text-muted-foreground cursor-pointer hover:text-foreground py-1">
+                {skipActions.length} skipped
+              </summary>
+              <div className="space-y-0.5">
+                {skipActions.map((action, i) => (
+                  <SkillActionRow key={`${action.skill}-skip-${i}`} action={action} />
+                ))}
+              </div>
+            </details>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+export function OrchestrateRunsPanel({ runs }: { runs: OrchestrateRunReport[] }) {
+  if (runs.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm">
+            <BotIcon className="size-4" />
+            Orchestrate Runs
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground text-center py-4">
+            No orchestrate runs yet. Run <code className="text-xs bg-muted px-1 py-0.5 rounded">selftune orchestrate</code> to start.
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const totalDeployed = runs.reduce((sum, r) => sum + r.deployed, 0)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-sm">
+          <BotIcon className="size-4" />
+          Orchestrate Runs
+        </CardTitle>
+        <CardDescription>
+          {runs.length} recent run{runs.length !== 1 ? "s" : ""}
+          {totalDeployed > 0 && <> &middot; {totalDeployed} total deployments</>}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-0">
+        {runs.slice(0, 10).map((run) => (
+          <RunCard key={run.run_id} run={run} />
+        ))}
+      </CardContent>
+    </Card>
+  )
+}

package/packages/ui/src/components/index.ts

@@ -0,0 +1,7 @@
+export { ActivityPanel } from "./ActivityTimeline";
+export { EvidenceViewer } from "./EvidenceViewer";
+export { EvolutionTimeline } from "./EvolutionTimeline";
+export { InfoTip } from "./InfoTip";
+export { OrchestrateRunsPanel } from "./OrchestrateRunsPanel";
+export { SectionCards } from "./section-cards";
+export { SkillHealthGrid } from "./skill-health-grid";

package/packages/ui/src/components/section-cards.tsx

@@ -0,0 +1,155 @@
+import { Badge } from "../primitives/badge"
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../primitives/card"
+import { InfoTip } from "./InfoTip"
+import {
+  TrendingUpIcon,
+  TrendingDownIcon,
+  AlertTriangleIcon,
+  ActivityIcon,
+  EyeIcon,
+  FlaskConicalIcon,
+  LayersIcon,
+  SearchXIcon,
+} from "lucide-react"
+
+interface SectionCardsProps {
+  skillsCount: number
+  avgPassRate: number | null
+  unmatchedCount: number
+  sessionsCount: number
+  pendingCount: number
+  evidenceCount: number
+}
+
+export function SectionCards({
+  skillsCount,
+  avgPassRate,
+  unmatchedCount,
+  sessionsCount,
+  pendingCount,
+  evidenceCount,
+}: SectionCardsProps) {
+  const passRateStr = avgPassRate !== null ? `${Math.round(avgPassRate * 100)}%` : "--"
+  const passRateGood = avgPassRate !== null && avgPassRate >= 0.7
+
+  return (
+    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-3">
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription className="flex items-center gap-1.5">
+            <LayersIcon className="size-3.5" />
+            Skills Monitored
+            <InfoTip text="Total number of skills detected and being tracked by selftune" />
+          </CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            {skillsCount}
+          </CardTitle>
+          <CardAction>
+            <Badge variant="outline">
+              <ActivityIcon className="size-3" />
+              live
+            </Badge>
+          </CardAction>
+        </CardHeader>
+      </Card>
+
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription className="flex items-center gap-1.5">
+            <FlaskConicalIcon className="size-3.5" />
+            Avg Pass Rate
+            <InfoTip text="Average percentage of eval test cases that passed across all graded skills (5+ checks)" />
+          </CardDescription>
+          <CardTitle className={`text-2xl font-semibold tabular-nums @[250px]/card:text-3xl ${!passRateGood && avgPassRate !== null ? "text-red-600" : ""}`}>
+            {passRateStr}
+          </CardTitle>
+          {avgPassRate !== null && (
+            <CardAction>
+              <Badge variant={passRateGood ? "outline" : "destructive"}>
+                {passRateGood ? (
+                  <TrendingUpIcon className="size-3" />
+                ) : (
+                  <TrendingDownIcon className="size-3" />
+                )}
+                {passRateStr}
+              </Badge>
+            </CardAction>
+          )}
+        </CardHeader>
+      </Card>
+
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription className="flex items-center gap-1.5">
+            <SearchXIcon className="size-3.5" />
+            Unmatched Queries
+            <InfoTip text="User prompts that didn't match any skill's trigger criteria — potential gaps in coverage" />
+          </CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            {unmatchedCount}
+          </CardTitle>
+          {unmatchedCount > 0 && (
+            <CardAction>
+              <Badge variant="destructive">
+                <AlertTriangleIcon className="size-3" />
+                needs attention
+              </Badge>
+            </CardAction>
+          )}
+        </CardHeader>
+      </Card>
+
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription className="flex items-center gap-1.5">
+            <ActivityIcon className="size-3.5" />
+            Sessions
+            <InfoTip text="Total agent sessions that have been recorded and analyzed" />
+          </CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            {sessionsCount}
+          </CardTitle>
+        </CardHeader>
+      </Card>
+
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription className="flex items-center gap-1.5">
+            <AlertTriangleIcon className="size-3.5" />
+            Pending Proposals
+            <InfoTip text="Evolution proposals that have been generated but not yet validated or deployed" />
+          </CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            {pendingCount}
+          </CardTitle>
+          {pendingCount > 0 && (
+            <CardAction>
+              <Badge variant="secondary">
+                awaiting review
+              </Badge>
+            </CardAction>
+          )}
+        </CardHeader>
+      </Card>
+
+      <Card className="@container/card">
+        <CardHeader>
+          <CardDescription className="flex items-center gap-1.5">
+            <EyeIcon className="size-3.5" />
+            Total Evidence
+            <InfoTip text="Number of evidence entries documenting skill changes with before/after validation results" />
+          </CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            {evidenceCount}
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    </div>
+  )
+}