selftune 0.2.9 → 0.2.12

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

@@ -1,8 +1,3 @@
-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,
@@ -13,7 +8,13 @@ import {
   TrendingDownIcon,
   ChevronDownIcon,
   ChevronRightIcon,
-} from "lucide-react"
+} from "lucide-react";
+import { useState } from "react";
+
+import { timeAgo } from "../lib/format";
+import { cn } from "../lib/utils";
+import { Badge } from "../primitives/badge";
+import type { EvalSnapshot, EvolutionEntry } from "../types";
 
 const ACTION_ICON: Record<string, React.ReactNode> = {
   created: <CircleDotIcon className="size-3.5" />,
@@ -21,7 +22,7 @@ const ACTION_ICON: Record<string, React.ReactNode> = {
   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",
@@ -29,7 +30,7 @@ const ACTION_COLOR: Record<string, string> = {
   deployed: "bg-emerald-500",
   rejected: "bg-red-500",
   rolled_back: "bg-red-400",
-}
+};
 
 const ACTION_RING: Record<string, string> = {
   created: "ring-blue-500/30",
@@ -37,7 +38,7 @@ const ACTION_RING: Record<string, string> = {
   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",
@@ -45,58 +46,65 @@ const ACTION_LINE: Record<string, string> = {
   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
+  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[]>()
+  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)
+    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())
+    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()
-  })
+    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
+  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!
+    if (steps[i].eval_snapshot) return steps[i].eval_snapshot!;
   }
-  return null
+  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
+  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
+      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 = [
@@ -105,10 +113,10 @@ const LIFECYCLE_STEPS = [
   { 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)
+  const [open, setOpen] = useState(false);
 
   return (
     <div className="px-2 pb-2">
@@ -124,10 +132,7 @@ function LifecycleLegend() {
         <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={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>
@@ -137,18 +142,18 @@ function LifecycleLegend() {
         </div>
       )}
     </div>
-  )
+  );
 }
 
 export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Props) {
-  const groups = groupByProposal(entries)
+  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 (
@@ -159,29 +164,29 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
       <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)
+          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,
-                )}>
+                <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)} />
-                )}
+                {!isLast && <div className={cn("w-0.5 flex-1 min-h-[16px]", lineColor)} />}
               </div>
 
               {/* Content */}
@@ -191,14 +196,18 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
                 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"
-                    : "",
+                  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"}
+                    variant={
+                      terminal === "deployed"
+                        ? "default"
+                        : terminal === "rejected" || terminal === "rolled_back"
+                          ? "destructive"
+                          : "secondary"
+                    }
                     className="text-[10px] capitalize"
                   >
                     {terminal.replace("_", " ")}
@@ -211,11 +220,13 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
                 {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>
-                    )}
+                    {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">
@@ -244,9 +255,9 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
                 )}
               </button>
             </div>
-          )
+          );
         })}
       </nav>
     </div>
-  )
+  );
 }

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

@@ -1,5 +1,6 @@
-import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/tooltip"
-import { InfoIcon } from "lucide-react"
+import { InfoIcon } from "lucide-react";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/tooltip";
 
 /** Small info icon that shows a tooltip on hover. Used to explain metrics and concepts. */
 export function InfoTip({ text }: { text: string }) {
@@ -15,5 +16,5 @@ export function InfoTip({ text }: { text: string }) {
         {text}
       </TooltipContent>
     </Tooltip>
-  )
+  );
 }

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

@@ -1,33 +1,17 @@
-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"
+import { BotIcon, ChevronRightIcon, EyeIcon, SkipForwardIcon, ZapIcon } from "lucide-react";
+import { useState } from "react";
+
+import { timeAgo } from "../lib/format";
+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";
 
 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 (
@@ -38,18 +22,25 @@ function SkillActionRow({ action }: { action: OrchestrateRunSkillAction }) {
           <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"
+              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}
+            {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">
@@ -60,42 +51,56 @@ function SkillActionRow({ action }: { action: OrchestrateRunSkillAction }) {
         <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")
+  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={`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>
+              <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>
+                <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>
+                <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.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" : ""}`} />
+          <ChevronRightIcon
+            className={`size-4 text-muted-foreground shrink-0 mt-1 transition-transform duration-200 ${open ? "rotate-90" : ""}`}
+          />
         </div>
       </CollapsibleTrigger>
       <CollapsibleContent>
@@ -118,7 +123,7 @@ function RunCard({ run }: { run: OrchestrateRunReport }) {
         </div>
       </CollapsibleContent>
     </Collapsible>
-  )
+  );
 }
 
 export function OrchestrateRunsPanel({ runs }: { runs: OrchestrateRunReport[] }) {
@@ -133,14 +138,16 @@ export function OrchestrateRunsPanel({ runs }: { runs: OrchestrateRunReport[] })
         </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.
+            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)
+  const totalDeployed = runs.reduce((sum, r) => sum + r.deployed, 0);
 
   return (
     <Card>
@@ -160,5 +167,5 @@ export function OrchestrateRunsPanel({ runs }: { runs: OrchestrateRunReport[] })
         ))}
       </CardContent>
     </Card>
-  )
+  );
 }

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

@@ -1,12 +1,3 @@
-import { Badge } from "../primitives/badge"
-import {
-  Card,
-  CardAction,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../primitives/card"
-import { InfoTip } from "./InfoTip"
 import {
   TrendingUpIcon,
   TrendingDownIcon,
@@ -16,16 +7,20 @@ import {
   FlaskConicalIcon,
   LayersIcon,
   SearchXIcon,
-} from "lucide-react"
+} from "lucide-react";
+
+import { Badge } from "../primitives/badge";
+import { Card, CardAction, CardDescription, CardHeader, CardTitle } from "../primitives/card";
+import { InfoTip } from "./InfoTip";
 
 interface SectionCardsProps {
-  skillsCount: number
-  avgPassRate: number | null
-  unmatchedCount: number
-  sessionsCount: number
-  pendingCount: number
-  evidenceCount: number
-  hasEvolution?: boolean
+  skillsCount: number;
+  avgPassRate: number | null;
+  unmatchedCount: number;
+  sessionsCount: number;
+  pendingCount: number;
+  evidenceCount: number;
+  hasEvolution?: boolean;
 }
 
 export function SectionCards({
@@ -37,8 +32,8 @@ export function SectionCards({
   evidenceCount,
   hasEvolution = true,
 }: SectionCardsProps) {
-  const passRateStr = avgPassRate !== null ? `${Math.round(avgPassRate * 100)}%` : "--"
-  const passRateGood = avgPassRate !== null && avgPassRate >= 0.7
+  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">
@@ -68,7 +63,9 @@ export function SectionCards({
             Avg Trigger Rate
             <InfoTip text="Average percentage of skill checks that resulted in a trigger across all graded skills (5+ checks). Run selftune evolve to improve this." />
           </CardDescription>
-          <CardTitle className={`text-2xl font-semibold tabular-nums @[250px]/card:text-3xl ${!passRateGood && avgPassRate !== null ? "text-red-600" : ""}`}>
+          <CardTitle
+            className={`text-2xl font-semibold tabular-nums @[250px]/card:text-3xl ${!passRateGood && avgPassRate !== null ? "text-red-600" : ""}`}
+          >
             {passRateStr}
           </CardTitle>
           <CardAction>
@@ -128,7 +125,7 @@ export function SectionCards({
         <CardHeader>
           <CardDescription className="flex items-center gap-1.5">
             <AlertTriangleIcon className="size-3.5" />
-            Pending Proposals
+            Undeployed Proposals
             <InfoTip text="Evolution proposals that have been generated but not yet validated or deployed. Requires running selftune evolve." />
           </CardDescription>
           <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
@@ -140,9 +137,7 @@ export function SectionCards({
                 no evolution runs yet
               </Badge>
             ) : pendingCount > 0 ? (
-              <Badge variant="secondary">
-                awaiting review
-              </Badge>
+              <Badge variant="secondary">not yet deployed</Badge>
             ) : null}
           </CardAction>
         </CardHeader>
@@ -168,5 +163,5 @@ export function SectionCards({
         </CardHeader>
       </Card>
     </div>
-  )
+  );
 }