selftune 0.2.28 → 0.2.30

package/cli/selftune/utils/llm-call.ts

@@ -17,6 +17,23 @@ const logger = createLogger("llm-call");
 export const LLM_BACKED_AGENT_CANDIDATES = ["claude", "codex", "opencode", "pi"] as const;
 export type LlmBackedAgent = (typeof LLM_BACKED_AGENT_CANDIDATES)[number];
 
+export interface LlmInvocationIdentity {
+  platform: string;
+  model: string | null;
+}
+
+export interface LlmCallLifecycleEvent extends LlmInvocationIdentity {
+  agent: string;
+  durationMs: number | null;
+  success: boolean | null;
+  error: string | null;
+}
+
+export interface LlmCallObserver {
+  onStart?: (event: LlmCallLifecycleEvent) => void;
+  onFinish?: (event: LlmCallLifecycleEvent) => void;
+}
+
 // ---------------------------------------------------------------------------
 // Model alias resolution
 // ---------------------------------------------------------------------------
@@ -61,6 +78,41 @@ function resolvePiThinking(effort: EffortLevel): string {
   return PI_THINKING_MAP[effort];
 }
 
+export function describeLlmInvocation(agent: string, modelFlag?: string): LlmInvocationIdentity {
+  if (agent === "claude") {
+    return {
+      platform: "claude_code",
+      model: modelFlag ? resolveModelFlag(modelFlag) : null,
+    };
+  }
+
+  if (agent === "opencode") {
+    return {
+      platform: "opencode",
+      model: modelFlag ? resolveOpenCodeModel(modelFlag) : null,
+    };
+  }
+
+  if (agent === "codex") {
+    return {
+      platform: "codex",
+      model: modelFlag ?? null,
+    };
+  }
+
+  if (agent === "pi") {
+    return {
+      platform: "pi",
+      model: modelFlag ?? null,
+    };
+  }
+
+  return {
+    platform: agent,
+    model: modelFlag ?? null,
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Bundled agent file loading (for codex inline prompt injection)
 // ---------------------------------------------------------------------------
@@ -208,6 +260,7 @@ export async function callViaAgent(
   modelFlag?: string,
   retryOpts?: RetryOptions,
   effort?: EffortLevel,
+  observer?: LlmCallObserver,
 ): Promise<string> {
   // Write prompt to temp file to avoid shell quoting issues
   const promptFile = join(tmpdir(), `selftune-llm-${Date.now()}.txt`);
@@ -216,6 +269,7 @@ export async function callViaAgent(
   try {
     const promptContent = readFileSync(promptFile, "utf-8");
     let cmd: string[];
+    const identity = describeLlmInvocation(agent, modelFlag);
 
     if (agent === "claude") {
       cmd = ["claude", "-p", promptContent];
@@ -264,6 +318,18 @@ export async function callViaAgent(
     const maxRetries = retryOpts?.maxRetries ?? DEFAULT_MAX_RETRIES;
     const initialBackoffMs = retryOpts?.initialBackoffMs ?? DEFAULT_INITIAL_BACKOFF_MS;
     let lastError: Error | undefined;
+    const startedAt = Date.now();
+    try {
+      observer?.onStart?.({
+        agent,
+        ...identity,
+        durationMs: null,
+        success: null,
+        error: null,
+      });
+    } catch {
+      // fail-open: instrumentation must never block the real LLM call
+    }
     for (let attempt = 0; attempt <= maxRetries; attempt++) {
       if (attempt > 0) {
         const backoffMs = initialBackoffMs * 2 ** (attempt - 1);
@@ -296,10 +362,32 @@ export async function callViaAgent(
         }
 
         const raw = await new Response(proc.stdout).text();
+        try {
+          observer?.onFinish?.({
+            agent,
+            ...identity,
+            durationMs: Date.now() - startedAt,
+            success: true,
+            error: null,
+          });
+        } catch {
+          // fail-open: instrumentation must never block the real LLM call
+        }
         return raw;
       } catch (err) {
         lastError = err instanceof Error ? err : new Error(String(err));
         if (!isTransientError(lastError) || attempt === maxRetries) {
+          try {
+            observer?.onFinish?.({
+              agent,
+              ...identity,
+              durationMs: Date.now() - startedAt,
+              success: false,
+              error: lastError.message,
+            });
+          } catch {
+            // fail-open: instrumentation must never block the real LLM call
+          }
           throw lastError;
         }
         logger.warn(`Transient failure on attempt ${attempt + 1}: ${lastError.message}`);
@@ -533,9 +621,10 @@ export async function callLlm(
   agent: string,
   modelFlag?: string,
   effort?: EffortLevel,
+  observer?: LlmCallObserver,
 ): Promise<string> {
   if (!agent) {
     throw new Error("Agent must be specified for callLlm");
   }
-  return callViaAgent(systemPrompt, userPrompt, agent, modelFlag, undefined, effort);
+  return callViaAgent(systemPrompt, userPrompt, agent, modelFlag, undefined, effort, observer);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selftune",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "description": "Skill-level observability and self-improvement for AI agents — monitors skill routing, detects missed triggers, and evolves descriptions automatically",
   "keywords": [
     "agent",

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

@@ -77,7 +77,7 @@ export function SkillReportDailyBreakdownSection({
                   <span
                     className={
                       row.passRate >= 0.8
-                        ? "text-emerald-400"
+                        ? "text-primary"
                         : row.passRate >= 0.6
                           ? "text-amber-400"
                           : "text-red-400"

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

@@ -28,7 +28,6 @@ export interface SkillReportScaffoldProps {
   summary?: ReactNode;
   showOnboardingBanner?: boolean;
   guideButtonLabel?: string;
-  prioritizeChildren?: boolean;
   nextAction: SkillReportNextAction;
   trustState: TrustState;
   coverage?: TrustFields["coverage"];
@@ -53,7 +52,6 @@ export function SkillReportScaffold({
   summary,
   showOnboardingBanner = false,
   guideButtonLabel = "How to read this page",
-  prioritizeChildren = false,
   nextAction,
   trustState,
   coverage,
@@ -117,8 +115,6 @@ export function SkillReportScaffold({
             }
           />
 
-          {prioritizeChildren && children ? <div className="space-y-4">{children}</div> : null}
-
           <SkillTrustNarrativePanel
             trustState={trustState}
             coverage={coverage}
@@ -145,7 +141,7 @@ export function SkillReportScaffold({
           />
         </div>
 
-        {children && !prioritizeChildren ? (
+        {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/SkillReportTrustBadge.tsx

@@ -1,12 +1,4 @@
-import type { ReactNode } from "react";
-import {
-  EyeIcon,
-  ShieldAlertIcon,
-  ShieldCheckIcon,
-  ShieldIcon,
-  ShieldQuestionIcon,
-} from "lucide-react";
-
+import { cn } from "@selftune/ui/lib";
 import { Badge } from "@selftune/ui/primitives";
 import type { TrustState } from "@selftune/ui/types";
 
@@ -14,8 +6,8 @@ export function SkillReportTrustBadge({ state }: { state: TrustState }) {
   const config = getSkillReportTrustBadgeConfig(state);
 
   return (
-    <Badge variant={config.variant} className="gap-1 shrink-0 text-[10px]">
-      {config.icon}
+    <Badge variant={config.variant} className="gap-1.5 shrink-0 text-[10px]">
+      <span className={cn("size-1.5 shrink-0 rounded-full", config.dotClassName)} />
       {config.label}
     </Badge>
   );
@@ -24,44 +16,44 @@ export function SkillReportTrustBadge({ state }: { state: TrustState }) {
 export function getSkillReportTrustBadgeConfig(state: TrustState): {
   label: string;
   variant: "default" | "secondary" | "destructive" | "outline";
-  icon: ReactNode;
+  dotClassName: string;
 } {
   switch (state) {
     case "low_sample":
       return {
         label: "Low Sample",
         variant: "secondary",
-        icon: <ShieldQuestionIcon className="size-3" />,
+        dotClassName: "bg-muted-foreground/60",
       };
     case "observed":
       return {
         label: "Observed",
         variant: "outline",
-        icon: <EyeIcon className="size-3" />,
+        dotClassName: "bg-muted-foreground",
       };
     case "watch":
       return {
         label: "Watch",
         variant: "secondary",
-        icon: <ShieldAlertIcon className="size-3" />,
+        dotClassName: "bg-amber-400",
       };
     case "validated":
       return {
         label: "Validated",
         variant: "default",
-        icon: <ShieldCheckIcon className="size-3" />,
+        dotClassName: "bg-primary",
       };
     case "deployed":
       return {
         label: "Deployed",
         variant: "default",
-        icon: <ShieldCheckIcon className="size-3" />,
+        dotClassName: "bg-primary",
       };
     case "rolled_back":
       return {
         label: "Rolled Back",
         variant: "destructive",
-        icon: <ShieldIcon className="size-3" />,
+        dotClassName: "bg-destructive",
       };
   }
 }

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

@@ -4,40 +4,14 @@ import { Card, CardContent, CardHeader, CardTitle } from "../primitives/card";
 import type { EvidenceEntry, EvolutionEntry } from "../types";
 import { formatRate, timeAgo } from "../lib/format";
 import {
-  CheckCircleIcon,
   ChevronDownIcon,
   ChevronRightIcon,
-  CircleDotIcon,
   FileTextIcon,
-  InfoIcon,
-  RocketIcon,
-  ShieldCheckIcon,
   ShieldAlertIcon,
-  XCircleIcon,
-  UndoIcon,
-  ArrowRightIcon,
-  TrendingUpIcon,
-  TrendingDownIcon,
   ListChecksIcon,
 } from "lucide-react";
 import Markdown from "react-markdown";
 
-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_VARIANT: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
-  created: "outline",
-  validated: "secondary",
-  deployed: "default",
-  rejected: "destructive",
-  rolled_back: "destructive",
-};
-
 interface Props {
   proposalId: string;
   evolution: EvolutionEntry[];
@@ -123,9 +97,9 @@ function formatValidationValue(key: string, val: unknown): React.ReactNode {
   // Booleans
   if (typeof val === "boolean") {
     return val ? (
-      <CheckCircleIcon className="size-3.5 text-emerald-500 inline" />
+      <span className="inline-block size-2 rounded-full bg-primary align-middle" />
     ) : (
-      <XCircleIcon className="size-3.5 text-red-500 inline" />
+      <span className="inline-block size-2 rounded-full bg-destructive align-middle" />
     );
   }
   // Numbers that look like rates (0-1 range, or key contains "rate"/"change")
@@ -212,12 +186,12 @@ function PerEntryResult({ entry }: { entry: Record<string, unknown> }) {
     <div className="flex items-start gap-2 text-xs py-1.5 border-b border-border/50 last:border-0">
       {isPass !== null ? (
         isPass ? (
-          <CheckCircleIcon className="size-3.5 text-emerald-500 shrink-0 mt-0.5" />
+          <span className="mt-1 size-2 shrink-0 rounded-full bg-primary" />
         ) : (
-          <XCircleIcon className="size-3.5 text-red-500 shrink-0 mt-0.5" />
+          <span className="mt-1 size-2 shrink-0 rounded-full bg-destructive" />
         )
       ) : (
-        <CircleDotIcon className="size-3.5 text-muted-foreground shrink-0 mt-0.5" />
+        <span className="mt-1 size-2 shrink-0 rounded-full bg-muted-foreground/60" />
       )}
       <span className="flex-1 min-w-0 line-clamp-2">
         {query ? String(query) : JSON.stringify(entry)}
@@ -307,7 +281,7 @@ function ValidationResults({ validation }: { validation: Record<string, unknown>
         )}
         {typeof net_change === "number" && (
           <span
-            className={`text-xs font-mono font-semibold ${net_change > 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}`}
+            className={`text-xs font-mono font-semibold ${net_change > 0 ? "text-primary" : "text-destructive"}`}
           >
             {net_change > 0 ? "+" : ""}
             {(net_change * 100).toFixed(1)}%
@@ -324,7 +298,7 @@ function ValidationResults({ validation }: { validation: Record<string, unknown>
       {/* New passes */}
       {newPassesArr.length > 0 && (
         <div>
-          <p className="text-[11px] font-medium text-emerald-600 dark:text-emerald-400 mb-1">
+          <p className="mb-1 text-[11px] font-medium text-primary">
             New Passes ({newPassesArr.length})
           </p>
           <div className="rounded border bg-card p-2">
@@ -345,10 +319,10 @@ function ValidationResults({ validation }: { validation: Record<string, unknown>
       {/* Regressions */}
       {regressionsArr.length > 0 && (
         <div>
-          <p className="text-[11px] font-medium text-red-500 mb-1">
+          <p className="text-[11px] font-medium text-destructive mb-1">
             Regressions ({regressionsArr.length})
           </p>
-          <div className="rounded border border-red-200 dark:border-red-900/50 bg-card p-2">
+          <div className="rounded border border-destructive/20 bg-card p-2">
             {regressionsArr.map((entry) => (
               <PerEntryResult
                 key={getEvidenceListKey("regression", entry)}
@@ -406,7 +380,7 @@ function PerEntryResultsSection({ entries }: { entries: unknown[] }) {
       {/* Pass rate bar */}
       <div className="h-1.5 rounded-full bg-muted overflow-hidden mb-2">
         <div
-          className="h-full rounded-full bg-emerald-500 transition-all"
+          className="h-full rounded-full bg-primary transition-all"
           style={{ width: `${entries.length > 0 ? (passCount / entries.length) * 100 : 0}%` }}
         />
       </div>
@@ -442,7 +416,7 @@ function DeltaBadge({ prev, curr }: { prev: number | null; curr: number | null }
   const positive = delta > 0;
   return (
     <span
-      className={`text-[10px] font-mono font-semibold ${positive ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}`}
+      className={`text-[10px] font-mono font-semibold ${positive ? "text-primary" : "text-destructive"}`}
     >
       {positive ? "+" : ""}
       {pct}% vs previous
@@ -487,12 +461,12 @@ function EvalSetSection({ evalSet }: { evalSet: Array<Record<string, unknown>> }
               >
                 {typeof passed === "boolean" ? (
                   passed ? (
-                    <CheckCircleIcon className="size-3.5 text-emerald-500 shrink-0 mt-0.5" />
+                    <span className="mt-1 size-2 shrink-0 rounded-full bg-primary" />
                   ) : (
-                    <XCircleIcon className="size-3.5 text-red-500 shrink-0 mt-0.5" />
+                    <span className="mt-1 size-2 shrink-0 rounded-full bg-destructive" />
                   )
                 ) : (
-                  <CircleDotIcon className="size-3.5 text-muted-foreground shrink-0 mt-0.5" />
+                  <span className="mt-1 size-2 shrink-0 rounded-full bg-muted-foreground/60" />
                 )}
                 <span className="flex-1 min-w-0 line-clamp-2">
                   {String(query ?? JSON.stringify(evalEntry))}
@@ -648,15 +622,7 @@ function CollapsedEvidenceCard({
   );
 }
 
-export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
-  const steps = useMemo(
-    () =>
-      evolution
-        .filter((e) => e.proposal_id === proposalId)
-        .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()),
-    [evolution, proposalId],
-  );
-
+export function EvidenceViewer({ proposalId, evidence }: Props) {
   const entries = useMemo(
     () =>
       evidence
@@ -677,13 +643,6 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
     });
   };
 
-  const snapshot = useMemo(() => {
-    for (let i = steps.length - 1; i >= 0; i--) {
-      if (steps[i].eval_snapshot) return steps[i].eval_snapshot as Record<string, unknown>;
-    }
-    return null;
-  }, [steps]);
-
   // Separate proposal-stage entries from validation-stage entries, then group validations by target
   const { proposalEntries, validationsByTarget } = useMemo(() => {
     const proposals: EvidenceEntry[] = [];
@@ -702,92 +661,6 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
 
   return (
     <div className="space-y-4">
-      {/* Context banner */}
-      <div className="flex items-start gap-2.5 rounded-lg border border-primary/20 bg-primary/5 px-3.5 py-2.5">
-        <InfoIcon className="size-4 text-primary/60 shrink-0 mt-0.5" />
-        <p className="text-xs text-muted-foreground leading-relaxed">
-          This view shows the complete evidence trail for a skill evolution proposal &mdash; how the
-          skill was changed, the eval test results before and after, and whether the change improved
-          performance.
-        </p>
-      </div>
-
-      {/* Proposal journey */}
-      <Card>
-        <CardHeader className="pb-3">
-          <CardTitle className="text-sm flex items-center gap-2">
-            <span>Proposal Journey</span>
-            <span className="font-mono text-xs text-muted-foreground">
-              #{proposalId.slice(0, 12)}
-            </span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          <div className="flex items-center gap-2 flex-wrap">
-            {steps.map((step, i) => (
-              <div key={`${step.action}-${step.timestamp}`} className="contents">
-                {i > 0 && <ArrowRightIcon className="size-3 text-muted-foreground/50 shrink-0" />}
-                <div className="flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 bg-card">
-                  {ACTION_ICON[step.action]}
-                  <Badge
-                    variant={ACTION_VARIANT[step.action] ?? "secondary"}
-                    className="text-[10px] capitalize"
-                  >
-                    {step.action.replace("_", " ")}
-                  </Badge>
-                  <span className="text-[10px] text-muted-foreground">
-                    {timeAgo(step.timestamp)}
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {/* Eval snapshot — pass rate change */}
-          {snapshot && (
-            <div className="flex items-center gap-3 rounded-md border bg-muted/20 px-3 py-2">
-              {typeof snapshot.net_change === "number" && (
-                <div className="flex items-center gap-1">
-                  {(snapshot.net_change as number) > 0 ? (
-                    <TrendingUpIcon className="size-3.5 text-emerald-500" />
-                  ) : (
-                    <TrendingDownIcon className="size-3.5 text-red-500" />
-                  )}
-                  <span
-                    className={`text-sm font-semibold font-mono ${(snapshot.net_change as number) > 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}`}
-                  >
-                    {(snapshot.net_change as number) > 0 ? "+" : ""}
-                    {Math.round((snapshot.net_change as number) * 100)}%
-                  </span>
-                </div>
-              )}
-              {typeof snapshot.before_pass_rate === "number" &&
-                typeof snapshot.after_pass_rate === "number" && (
-                  <span className="text-xs text-muted-foreground font-mono">
-                    {Math.round((snapshot.before_pass_rate as number) * 100)}% &rarr;{" "}
-                    {Math.round((snapshot.after_pass_rate as number) * 100)}%
-                  </span>
-                )}
-              {snapshot.improved !== undefined && (
-                <Badge
-                  variant={snapshot.improved ? "default" : "destructive"}
-                  className="text-[10px]"
-                >
-                  {snapshot.improved ? "Improved" : "Regressed"}
-                </Badge>
-              )}
-            </div>
-          )}
-
-          {/* Details from last step */}
-          {steps.length > 0 && steps[steps.length - 1].details && (
-            <p className="text-xs text-muted-foreground leading-relaxed">
-              {steps[steps.length - 1].details}
-            </p>
-          )}
-        </CardContent>
-      </Card>
-
       {/* Proposal-stage evidence — standalone cards showing original/proposed text */}
       {proposalEntries.map((entry) => (
         <EvidenceCard

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

@@ -3,48 +3,30 @@ 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" />,
-};
+import { TrendingUpIcon, TrendingDownIcon, ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 
 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",
+  created: "bg-primary/35",
+  validated: "bg-primary/65",
+  deployed: "bg-primary",
+  rejected: "bg-destructive/85",
+  rolled_back: "bg-destructive/45",
 };
 
 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",
+  created: "ring-primary/15",
+  validated: "ring-primary/20",
+  deployed: "ring-primary/30",
+  rejected: "ring-destructive/20",
+  rolled_back: "ring-destructive/15",
 };
 
 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",
+  created: "bg-primary/12",
+  validated: "bg-primary/18",
+  deployed: "bg-primary/30",
+  rejected: "bg-destructive/18",
+  rolled_back: "bg-destructive/12",
 };
 
 interface Props {
@@ -92,7 +74,7 @@ function PassRateDelta({ snapshot }: { snapshot: EvalSnapshot }) {
     <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 ? "text-primary" : "text-destructive",
       )}
     >
       {isPositive ? (
@@ -157,7 +139,7 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
 
   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">
+      <h2 className="sticky top-0 z-10 px-2 pb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
         Evolution
       </h2>
       <LifecycleLegend />
@@ -177,14 +159,8 @@ export function EvolutionTimeline({ entries, selectedProposalId, onSelect }: Pro
               {/* 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>
+                  className={cn("size-3 shrink-0 rounded-full ring-2 z-10", dotColor, ringColor)}
+                />
                 {!isLast && <div className={cn("w-0.5 flex-1 min-h-[16px]", lineColor)} />}
               </div>
 

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

@@ -84,10 +84,7 @@ function ExampleRowItem({ row }: { row: ExampleRow }) {
       <TableCell className="py-2">
         <div className="flex items-center gap-1.5">
           {row.triggered ? (
-            <Badge
-              variant="outline"
-              className="border-green-600/30 text-[10px] font-normal text-green-600"
-            >
+            <Badge variant="outline" className="text-[10px] font-normal">
               triggered
             </Badge>
           ) : (

package/skill/SKILL.md

@@ -13,7 +13,7 @@ description: >
   even if they don't say "selftune" explicitly.
 metadata:
   author: selftune-dev
-  version: 0.2.28
+  version: 0.2.30
   category: developer-tools
 ---