selftune 0.2.21 → 0.2.23

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

@@ -1,3 +1,8 @@
+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,
@@ -9,15 +14,8 @@ import {
   ChevronDownIcon,
   ChevronRightIcon,
 } from "lucide-react";
-import { useState } from "react";
-import type { ReactNode } 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, ReactNode> = {
+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" />,
@@ -26,43 +24,27 @@ const ACTION_ICON: Record<string, ReactNode> = {
 };
 
 const ACTION_COLOR: Record<string, string> = {
-  created: "bg-primary/15",
-  validated: "bg-primary/25",
-  deployed: "bg-primary/30",
-  rejected: "bg-destructive/20",
-  rolled_back: "bg-destructive/15",
-};
-
-const ACTION_ICON_COLOR: Record<string, string> = {
-  created: "text-primary/70",
-  validated: "text-primary/85",
-  deployed: "text-primary",
-  rejected: "text-destructive",
-  rolled_back: "text-destructive/70",
+  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-primary/15",
-  validated: "ring-primary/25",
-  deployed: "ring-primary/30",
-  rejected: "ring-destructive/25",
-  rolled_back: "ring-destructive/15",
-};
-
-const ACTION_DOT: Record<string, string> = {
-  created: "bg-primary/40 ring-primary/30",
-  validated: "bg-primary/60 ring-primary/40",
-  deployed: "bg-primary ring-primary/50",
-  rejected: "bg-destructive/60 ring-destructive/40",
-  rolled_back: "bg-destructive/40 ring-destructive/30",
+  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-primary/15",
-  validated: "bg-primary/20",
-  deployed: "bg-primary/25",
-  rejected: "bg-destructive/20",
-  rolled_back: "bg-destructive/15",
+  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 {
@@ -71,21 +53,6 @@ interface Props {
   onSelect: (proposalId: string) => void;
 }
 
-function validationModeBadge(
-  mode?: string | null,
-): { label: string; variant: "default" | "secondary" | "outline" } | null {
-  switch (mode) {
-    case "host_replay":
-      return { label: "replay", variant: "default" };
-    case "llm_judge":
-      return { label: "judge", variant: "secondary" };
-    case "structural_guard":
-      return { label: "structural", variant: "outline" };
-    default:
-      return null;
-  }
-}
-
 /** Group evolution entries by proposal_id, ordered newest-first. */
 function groupByProposal(entries: EvolutionEntry[]) {
   const map = new Map<string, EvolutionEntry[]>();
@@ -125,7 +92,7 @@ function PassRateDelta({ snapshot }: { snapshot: EvalSnapshot }) {
     <span
       className={cn(
         "inline-flex items-center gap-0.5 text-[10px] font-mono font-medium",
-        isPositive ? "text-primary" : "text-destructive",
+        isPositive ? "text-emerald-600 dark:text-emerald-400" : "text-red-500",
       )}
     >
       {isPositive ? (
@@ -151,35 +118,23 @@ function LifecycleLegend() {
   const [open, setOpen] = useState(false);
 
   return (
-    <div className="px-2 pb-3">
+    <div className="px-2 pb-2">
       <button
         type="button"
         onClick={() => setOpen(!open)}
-        aria-expanded={open}
-        aria-controls="evolution-lifecycle-stages"
-        className="flex w-full items-center gap-1 text-[10px] text-muted-foreground/70 transition-colors hover:text-muted-foreground"
+        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
-          id="evolution-lifecycle-stages"
-          className="mt-1.5 space-y-2.5 rounded-md border bg-muted/30 p-2"
-        >
+        <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 shrink-0 ring-1 mt-[3px]",
-                  ACTION_DOT[step.action],
-                )}
-              />
-              <div className="min-w-0 flex flex-col gap-0.5">
-                <span className="text-[10px] font-medium leading-none">{step.label}</span>
-                <span className="text-[10px] text-muted-foreground/70 leading-tight">
-                  {step.desc}
-                </span>
+              <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>
           ))}
@@ -202,7 +157,7 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
 
   return (
     <div className="flex flex-col gap-0">
-      <h2 className="px-2 pb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/80">
+      <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 />
@@ -211,13 +166,11 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
           const terminal = terminalAction(steps);
           const isSelected = selectedProposalId === proposalId;
           const lastStep = steps[steps.length - 1];
-          const dotColor = ACTION_COLOR[terminal] ?? "bg-muted-foreground/20";
-          const iconColor = ACTION_ICON_COLOR[terminal] ?? "text-muted-foreground";
+          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 validationBadge = validationModeBadge(lastStep.validation_mode);
 
           return (
             <div key={proposalId} className="relative flex gap-3">
@@ -225,15 +178,14 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
               <div className="flex flex-col items-center">
                 <div
                   className={cn(
-                    "flex items-center justify-center size-7 rounded-full ring-2 shrink-0 z-10",
+                    "flex items-center justify-center size-7 rounded-full ring-2 text-white shrink-0 z-10",
                     dotColor,
                     ringColor,
-                    iconColor,
                   )}
                 >
                   {ACTION_ICON[terminal] ?? <CircleDotIcon className="size-3.5" />}
                 </div>
-                {!isLast && <div className={cn("w-0.5 flex-1 min-h-[8px] my-1", lineColor)} />}
+                {!isLast && <div className={cn("w-0.5 flex-1 min-h-[16px]", lineColor)} />}
               </div>
 
               {/* Content */}
@@ -262,11 +214,6 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
                   <span className="text-[10px] text-muted-foreground">
                     {timeAgo(lastStep.timestamp)}
                   </span>
-                  {validationBadge && (
-                    <Badge variant={validationBadge.variant} className="text-[9px] uppercase">
-                      {validationBadge.label}
-                    </Badge>
-                  )}
                 </div>
                 {/* Pass rate delta from eval snapshot */}
                 {snapshot && (
@@ -293,7 +240,7 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
                           key={`${s.action}-${i}`}
                           className={cn(
                             "size-1.5 rounded-full",
-                            ACTION_DOT[s.action] ?? "bg-muted-foreground/40",
+                            ACTION_COLOR[s.action] ?? "bg-muted-foreground",
                           )}
                         />
                       ))}

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

@@ -1,6 +1,5 @@
-import { InfoIcon } from "lucide-react";
-
 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 }) {

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

@@ -0,0 +1,413 @@
+import { useMemo, useState } from "react";
+import { ChevronRightIcon, FilterIcon } from "lucide-react";
+import {
+  Badge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../primitives";
+import { InfoTip } from "./InfoTip";
+import { observationBadge, historicalContextBadge } from "./SkillReportPanels";
+import { timeAgo } from "../lib/format";
+
+import type { ObservationKind, HistoricalContext } from "../types";
+
+/* ─── Public types ────────────────────────────────────── */
+
+export interface InvocationRow {
+  timestamp: string | null;
+  session_id: string | null;
+  triggered: boolean;
+  query: string;
+  invocation_mode: string | null;
+  confidence: number | null;
+  tool_name: string | null;
+  agent_type: string | null;
+  observation_kind?: ObservationKind | null;
+  historical_context?: HistoricalContext | null;
+}
+
+export interface SessionMeta {
+  session_id: string;
+  started_at?: string | null;
+  model?: string | null;
+  workspace_path?: string | null;
+  platform?: string | null;
+  agent_cli?: string | null;
+}
+
+export type InvocationFilter = "all" | "misses" | "low_confidence";
+
+/* ─── Session group ───────────────────────────────────── */
+
+function SessionGroup({
+  sessionId,
+  meta,
+  invocations,
+  defaultExpanded,
+}: {
+  sessionId: string;
+  meta?: SessionMeta;
+  invocations: InvocationRow[];
+  defaultExpanded: boolean;
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const ts = meta?.started_at ?? invocations[0]?.timestamp;
+
+  const modeBreakdown = invocations.reduce(
+    (acc, inv) => {
+      const mode = inv.invocation_mode ?? "unknown";
+      acc[mode] = (acc[mode] ?? 0) + 1;
+      return acc;
+    },
+    {} as Record<string, number>,
+  );
+
+  const formatInvoker = (inv: InvocationRow): { label: string; hint: string } => {
+    const cli = meta?.agent_cli?.replace(/_/g, " ");
+    const platform = meta?.platform?.replace(/_/g, " ");
+
+    if (inv.agent_type && inv.agent_type !== "main") {
+      return {
+        label: inv.agent_type,
+        hint: cli ? `${cli} subagent` : "subagent invocation",
+      };
+    }
+    if (cli) {
+      return {
+        label: cli,
+        hint:
+          inv.agent_type === "main"
+            ? "main agent invocation"
+            : "session agent that invoked the skill",
+      };
+    }
+    if (platform) {
+      return {
+        label: platform,
+        hint: inv.agent_type === "main" ? "main agent invocation" : "session platform",
+      };
+    }
+    if (inv.agent_type) {
+      return { label: inv.agent_type, hint: "recorded subagent type" };
+    }
+    return {
+      label: "No data",
+      hint: "invoker was not captured in this record",
+    };
+  };
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-slate-200 transition-colors dark:border-slate-800">
+      {/* Session header */}
+      <button
+        type="button"
+        className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-slate-50 active:bg-slate-100 dark:hover:bg-slate-800/40 dark:active:bg-slate-800/60"
+        onClick={() => setExpanded(!expanded)}
+      >
+        <ChevronRightIcon
+          className={`size-3.5 shrink-0 text-slate-400 transition-transform duration-150 dark:text-slate-500 ${expanded ? "rotate-90" : ""}`}
+        />
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-slate-900 dark:text-white">
+              {invocations.length} invocation
+              {invocations.length !== 1 ? "s" : ""}
+            </span>
+            <span className="text-xs text-slate-500 dark:text-slate-400">
+              {ts ? timeAgo(ts) : ""}
+            </span>
+          </div>
+          <div className="flex flex-wrap items-center gap-1.5">
+            {meta?.model && (
+              <Badge variant="secondary" className="text-[10px] font-normal">
+                {meta.model}
+              </Badge>
+            )}
+            {meta?.workspace_path && (
+              <span
+                className="font-mono text-[11px] text-slate-500 dark:text-slate-400"
+                title={meta.workspace_path}
+              >
+                {meta.workspace_path.split("/").slice(-2).join("/")}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Compact mode summary when collapsed */}
+        {!expanded && (
+          <div className="flex shrink-0 items-center gap-1">
+            {Object.entries(modeBreakdown).map(([mode, count]) => (
+              <Badge key={mode} variant="outline" className="gap-1 text-[10px] font-normal">
+                {mode} <span className="text-slate-400 dark:text-slate-500">{count}</span>
+              </Badge>
+            ))}
+          </div>
+        )}
+        <span className="shrink-0 font-mono text-[10px] text-slate-300 dark:text-slate-600">
+          {sessionId.substring(0, 8)}
+        </span>
+      </button>
+
+      {/* Invocation table */}
+      {expanded && (
+        <div className="overflow-x-auto border-t border-slate-200 dark:border-slate-800">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-slate-50 hover:bg-slate-50 dark:bg-slate-800/40 dark:hover:bg-slate-800/40">
+                <TableHead className="h-8 text-[10px] font-semibold uppercase tracking-[0.15em]">
+                  Prompt <InfoTip text="The user prompt that led to this skill being invoked" />
+                </TableHead>
+                <TableHead className="h-8 w-[90px] text-[10px] font-semibold uppercase tracking-[0.15em]">
+                  Mode{" "}
+                  <InfoTip text="explicit = user typed /skillname; implicit = user mentioned skill by name; inferred = agent chose skill autonomously" />
+                </TableHead>
+                <TableHead className="h-8 w-[70px] text-[10px] font-semibold uppercase tracking-[0.15em]">
+                  Confidence{" "}
+                  <InfoTip text="Model's confidence score (0-100%) when routing this prompt to the skill" />
+                </TableHead>
+                <TableHead className="h-8 w-[110px] text-[10px] font-semibold uppercase tracking-[0.15em]">
+                  Invoker{" "}
+                  <InfoTip text="Who invoked the skill. Prefers subagent type when present, otherwise falls back to the session agent or platform." />
+                </TableHead>
+                <TableHead className="h-8 w-[120px] text-[10px] font-semibold uppercase tracking-[0.15em]">
+                  Evidence
+                </TableHead>
+                <TableHead className="h-8 w-[70px] text-right text-[10px] font-semibold uppercase tracking-[0.15em]">
+                  Time
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {invocations.map((inv, i) => (
+                <TableRow
+                  key={i}
+                  className={!inv.triggered ? "bg-red-50/50 dark:bg-red-950/10" : ""}
+                >
+                  <TableCell
+                    className="max-w-[500px] truncate py-2 text-sm"
+                    title={inv.query || undefined}
+                  >
+                    {inv.query || (
+                      <span className="italic text-slate-300 dark:text-slate-600">
+                        No prompt recorded
+                      </span>
+                    )}
+                    {!inv.triggered && (
+                      <Badge variant="destructive" className="ml-2 text-[10px] font-normal">
+                        missed
+                      </Badge>
+                    )}
+                  </TableCell>
+                  <TableCell className="py-2">
+                    {inv.invocation_mode ? (
+                      <Badge variant="secondary" className="text-[10px] font-normal">
+                        {inv.invocation_mode}
+                      </Badge>
+                    ) : (
+                      <span className="text-[11px] text-slate-400 dark:text-slate-500">
+                        Unknown mode
+                      </span>
+                    )}
+                  </TableCell>
+                  <TableCell className="py-2 font-mono text-xs tabular-nums text-slate-600 dark:text-slate-300">
+                    {inv.confidence !== null
+                      ? `${Math.round(inv.confidence * 100)}%`
+                      : "Not recorded"}
+                  </TableCell>
+                  <TableCell className="py-2">
+                    {(() => {
+                      const invoker = formatInvoker(inv);
+                      return invoker.label === "No data" ? (
+                        <span
+                          className="text-[11px] text-slate-400 dark:text-slate-500"
+                          title={invoker.hint}
+                        >
+                          {invoker.label}
+                        </span>
+                      ) : (
+                        <Badge
+                          variant={
+                            inv.agent_type && inv.agent_type !== "main" ? "outline" : "secondary"
+                          }
+                          className="text-[10px] font-normal capitalize"
+                          title={invoker.hint}
+                        >
+                          {invoker.label}
+                        </Badge>
+                      );
+                    })()}
+                  </TableCell>
+                  <TableCell className="py-2">
+                    {(() => {
+                      const observation = observationBadge(inv.observation_kind);
+                      const historicalCtx = historicalContextBadge(inv.historical_context);
+                      return observation ? (
+                        <div className="flex flex-wrap items-center gap-1.5">
+                          <Badge variant={observation.variant} className="text-[10px] font-normal">
+                            {observation.label}
+                          </Badge>
+                          {historicalCtx && (
+                            <Badge
+                              variant={historicalCtx.variant}
+                              className="text-[10px] font-normal"
+                            >
+                              {historicalCtx.label}
+                            </Badge>
+                          )}
+                        </div>
+                      ) : (
+                        <div className="flex flex-wrap items-center gap-1.5">
+                          <span className="text-[11px] text-slate-400 dark:text-slate-500">
+                            canonical
+                          </span>
+                          {historicalCtx && (
+                            <Badge
+                              variant={historicalCtx.variant}
+                              className="text-[10px] font-normal"
+                            >
+                              {historicalCtx.label}
+                            </Badge>
+                          )}
+                        </div>
+                      );
+                    })()}
+                  </TableCell>
+                  <TableCell className="whitespace-nowrap py-2 text-right font-mono text-[11px] text-slate-400 dark:text-slate-500">
+                    {inv.timestamp ? timeAgo(inv.timestamp) : ""}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ─── InvocationsPanel ────────────────────────────────── */
+
+export function InvocationsPanel({
+  invocations,
+  sessionMetadata = [],
+}: {
+  invocations: InvocationRow[];
+  sessionMetadata?: SessionMeta[];
+}) {
+  const [filter, setFilter] = useState<InvocationFilter>("all");
+
+  const sessionMetaMap = useMemo(
+    () => new Map(sessionMetadata.map((s) => [s.session_id, s])),
+    [sessionMetadata],
+  );
+
+  const filtered = useMemo(() => {
+    switch (filter) {
+      case "misses":
+        return invocations.filter((i) => !i.triggered);
+      case "low_confidence":
+        return invocations.filter((i) => i.confidence !== null && i.confidence < 0.5);
+      default:
+        return invocations;
+    }
+  }, [invocations, filter]);
+
+  const groupedSessions = useMemo(() => {
+    const sessionMap = new Map<string, InvocationRow[]>();
+    for (const inv of filtered) {
+      const sid = inv.session_id ?? "unknown";
+      const arr = sessionMap.get(sid);
+      if (arr) arr.push(inv);
+      else sessionMap.set(sid, [inv]);
+    }
+    return [...sessionMap.entries()].sort(([, a], [, b]) =>
+      (b[0]?.timestamp ?? "").localeCompare(a[0]?.timestamp ?? ""),
+    );
+  }, [filtered]);
+
+  if (invocations.length === 0) {
+    return (
+      <div className="flex items-center justify-center rounded-lg border border-dashed border-slate-300 py-12 dark:border-slate-700">
+        <p className="text-sm text-slate-500 dark:text-slate-400">
+          No invocation records yet. Invocations appear when skills are triggered during real
+          sessions.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* Filters */}
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <div className="flex flex-wrap items-center gap-2">
+          <FilterIcon className="size-3.5 text-slate-400 dark:text-slate-500" />
+          {(
+            [
+              ["all", "All"],
+              ["misses", "Misses"],
+              ["low_confidence", "Low confidence"],
+            ] as const
+          ).map(([key, label]) => (
+            <button key={key} type="button" onClick={() => setFilter(key)} className="inline-block">
+              <Badge
+                variant={filter === key ? "default" : "outline"}
+                className="cursor-pointer text-[10px]"
+              >
+                {label}
+              </Badge>
+            </button>
+          ))}
+        </div>
+        <span className="text-xs text-slate-500 dark:text-slate-400">
+          {filtered.length} invocations across {groupedSessions.length} sessions
+        </span>
+      </div>
+
+      {/* Legend */}
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-slate-500 dark:text-slate-400">
+        <span className="inline-flex items-center gap-1.5">
+          <span className="size-1.5 rounded-full bg-slate-400" />
+          explicit = user typed /skill
+        </span>
+        <span className="inline-flex items-center gap-1.5">
+          <span className="size-1.5 rounded-full bg-slate-400" />
+          implicit = mentioned by name
+        </span>
+        <span className="inline-flex items-center gap-1.5">
+          <span className="size-1.5 rounded-full bg-slate-400" />
+          inferred = agent chose autonomously
+        </span>
+        <span className="inline-flex items-center gap-1.5">
+          <span className="size-1.5 rounded-full bg-red-400" />
+          missed = skill should have triggered
+        </span>
+      </div>
+
+      {/* Session groups */}
+      {groupedSessions.length === 0 ? (
+        <div className="flex items-center justify-center py-8 text-sm text-slate-500 dark:text-slate-400">
+          No invocations match this filter.
+        </div>
+      ) : (
+        groupedSessions.map(([sessionId, sessionInvocations], idx) => {
+          const meta = sessionMetaMap.get(sessionId);
+          return (
+            <SessionGroup
+              key={sessionId}
+              sessionId={sessionId}
+              meta={meta}
+              invocations={sessionInvocations}
+              defaultExpanded={idx < 3}
+            />
+          );
+        })
+      )}
+    </div>
+  );
+}