selftune 0.2.22 → 0.2.23

package/packages/telemetry-contract/src/types.ts

@@ -1,7 +1,7 @@
 export const CANONICAL_SCHEMA_VERSION = "2.0" as const;
 export type CanonicalSchemaVersion = typeof CANONICAL_SCHEMA_VERSION;
 
-export const CANONICAL_PLATFORMS = ["claude_code", "codex", "opencode", "openclaw"] as const;
+export const CANONICAL_PLATFORMS = ["claude_code", "codex", "opencode", "openclaw", "pi"] as const;
 export type CanonicalPlatform = (typeof CANONICAL_PLATFORMS)[number];
 
 export const CANONICAL_CAPTURE_MODES = [
@@ -143,18 +143,7 @@ export interface CanonicalExecutionFactRecord extends CanonicalSessionRecordBase
   errors_encountered: number;
   input_tokens?: number;
   output_tokens?: number;
-  cached_input_tokens?: number;
-  reasoning_output_tokens?: number;
-  cost_usd?: number;
   duration_ms?: number;
-  files_changed?: number;
-  lines_added?: number;
-  lines_removed?: number;
-  lines_modified?: number;
-  /** Count of output-producing tool calls (Write, Edit, WebFetch, WebSearch, Skill, Agent). */
-  artifact_count?: number;
-  /** Inferred session type based on tool distribution. */
-  session_type?: "dev" | "research" | "content" | "mixed";
   completion_status?: CanonicalCompletionStatus;
   end_reason?: string;
 }

package/packages/telemetry-contract/tests/compatibility.test.ts

@@ -1,5 +1,4 @@
 import { describe, expect, test } from "bun:test";
-
 import { completePush } from "../fixtures/complete-push.js";
 import { evidenceOnlyPush } from "../fixtures/evidence-only-push.js";
 import { partialPushNoSessions } from "../fixtures/partial-push-no-sessions.js";

package/packages/ui/AGENTS.md

@@ -0,0 +1,16 @@
+# @selftune/ui
+
+Shared React component library used by both the cloud dashboard and the local OSS dashboard. Canonical copy lives here; synced to `oss/selftune/packages/ui` via `scripts/sync-embedded-shared.sh`.
+
+| Directory         | Contents                                                                                                                                                                                                                                    |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src/primitives/` | Base UI: Badge, Button, Card, Checkbox, Collapsible, DropdownMenu, Label, Select, Table, Tabs, Tooltip                                                                                                                                      |
+| `src/components/` | Shared components: SkillHealthGrid, EvolutionTimeline, EvidenceViewer, ActivityTimeline, OrchestrateRunsPanel, SectionCards, InfoTip, SkillReportPanels, SkillReportGuide, InvocationsPanel, SkillsLibrary, AnalyticsCharts, OverviewPanels |
+| `src/types.ts`    | Shared types: SkillCard, SkillHealthStatus, EvalSnapshot, EvolutionEntry, TrustState, TrustFields, ExampleRow, AutonomyStatus, TrustWatchlistEntry, AttentionItem, AutonomousDecision                                                       |
+| `src/lib/`        | Utilities: format (formatRate, timeAgo), constants (STATUS_CONFIG), utils (deriveStatus, sortByPassRateAndChecks)                                                                                                                           |
+
+**Exports:** `./primitives`, `./components`, `./types`, `./lib`
+
+**Dependencies:** react, @base-ui/react, lucide-react, clsx, tailwind-merge
+
+**Important:** Do NOT edit `oss/selftune/packages/ui/` directly. Edit here and run `scripts/sync-embedded-shared.sh`.

package/packages/ui/README.md

@@ -57,7 +57,7 @@ Presentational components for selftune dashboard views. No data fetching, no rou
 | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | `SkillHealthGrid`      | Sortable/filterable data table with drag-and-drop, pagination, and view tabs. Accepts `renderSkillName` prop for custom routing. |
 | `EvolutionTimeline`    | Proposal lifecycle timeline grouped by proposal ID, with pass rate deltas.                                                       |
-| `ActivityPanel`        | Tabbed activity feed (undeployed proposals, timeline events, unmatched queries).                                                 |
+| `ActivityPanel`        | Tabbed activity feed (pending proposals, timeline events, unmatched queries).                                                    |
 | `EvidenceViewer`       | Full evidence trail for a proposal — side-by-side diffs, validation results, iteration rounds.                                   |
 | `SectionCards`         | Dashboard metric stat cards (skills count, pass rate, unmatched, sessions, etc.).                                                |
 | `OrchestrateRunsPanel` | Collapsible orchestrate run reports with per-skill action details.                                                               |

package/packages/ui/package.json

@@ -38,7 +38,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.0.0",
-    "recharts": "^2.0.0"
+    "recharts": "^3.0.0"
   },
   "peerDependenciesMeta": {
     "@dnd-kit/core": {

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

@@ -1,11 +1,10 @@
-import { ClockIcon, GitPullRequestArrowIcon, SearchXIcon, ActivityIcon } from "lucide-react";
-
-import { timeAgo } from "../lib/format";
 import { Badge } from "../primitives/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/tabs";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/tooltip";
 import type { EvolutionEntry, PendingProposal, UnmatchedQuery } from "../types";
+import { timeAgo } from "../lib/format";
+import { ClockIcon, GitPullRequestArrowIcon, SearchXIcon, ActivityIcon } from "lucide-react";
 
 const ACTION_VARIANT: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
   created: "outline",
@@ -21,179 +20,15 @@ export function ActivityPanel({
   pendingProposals,
   unmatchedQueries,
   onSelectProposal,
-  embedded = false,
 }: {
   evolution: EvolutionEntry[];
   pendingProposals: PendingProposal[];
   unmatchedQueries: UnmatchedQuery[];
   onSelectProposal?: (skillName: string, proposalId: string) => void;
-  embedded?: boolean;
 }) {
   const hasActivity =
     evolution.length > 0 || pendingProposals.length > 0 || unmatchedQueries.length > 0;
 
-  const content = hasActivity ? (
-    <Tabs
-      defaultValue={
-        pendingProposals.length > 0 ? "pending" : evolution.length > 0 ? "timeline" : "unmatched"
-      }
-    >
-      <TooltipProvider>
-        <TabsList className="w-full">
-          {pendingProposals.length > 0 && (
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <TabsTrigger
-                    value="pending"
-                    className="flex-1 gap-1.5"
-                    aria-label={`Pending proposals (${pendingProposals.length})`}
-                  />
-                }
-              >
-                <GitPullRequestArrowIcon className="size-3.5" />
-                <Badge variant="secondary" className="h-4 px-1 text-[10px]">
-                  {pendingProposals.length}
-                </Badge>
-              </TooltipTrigger>
-              <TooltipContent>Undeployed proposals</TooltipContent>
-            </Tooltip>
-          )}
-          <Tooltip>
-            <TooltipTrigger
-              render={<TabsTrigger value="timeline" className="flex-1" aria-label="Timeline" />}
-            >
-              <ClockIcon className="size-3.5" />
-            </TooltipTrigger>
-            <TooltipContent>Timeline</TooltipContent>
-          </Tooltip>
-          {unmatchedQueries.length > 0 && (
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <TabsTrigger
-                    value="unmatched"
-                    className="flex-1 gap-1.5"
-                    aria-label={`Unmatched queries (${unmatchedQueries.length})`}
-                  />
-                }
-              >
-                <SearchXIcon className="size-3.5" />
-                <Badge variant="destructive" className="h-4 px-1 text-[10px]">
-                  {unmatchedQueries.length}
-                </Badge>
-              </TooltipTrigger>
-              <TooltipContent>Unmatched queries</TooltipContent>
-            </Tooltip>
-          )}
-        </TabsList>
-      </TooltipProvider>
-
-      {pendingProposals.length > 0 && (
-        <TabsContent value="pending" className="mt-4 space-y-3">
-          {pendingProposals.slice(0, 10).map((p) => (
-            <button
-              key={p.proposal_id}
-              type="button"
-              onClick={() => {
-                if (p.skill_name && onSelectProposal) onSelectProposal(p.skill_name, p.proposal_id);
-              }}
-              disabled={!p.skill_name || !onSelectProposal}
-              className="flex w-full gap-3 rounded-md p-1.5 text-left transition-colors enabled:hover:bg-accent/40 disabled:cursor-default"
-            >
-              <div className="mt-1 size-2 shrink-0 rounded-full bg-primary-accent" />
-              <div className="flex-1 min-w-0 space-y-1">
-                <div className="flex items-center gap-2">
-                  <Badge variant={ACTION_VARIANT[p.action] ?? "secondary"} className="text-[10px]">
-                    {p.action}
-                  </Badge>
-                  <span className="text-[10px] text-slate-500 font-mono">
-                    {timeAgo(p.timestamp)}
-                  </span>
-                </div>
-                <p className="text-xs text-muted-foreground line-clamp-2">{p.details}</p>
-                {p.skill_name && (
-                  <span className="text-[10px] text-muted-foreground/60 font-mono">
-                    {p.skill_name} · #{p.proposal_id.slice(0, 8)}
-                  </span>
-                )}
-              </div>
-            </button>
-          ))}
-        </TabsContent>
-      )}
-
-      <TabsContent value="timeline" className="mt-4 space-y-3">
-        {evolution.slice(0, 30).map((entry, i) => (
-          <button
-            key={`${entry.proposal_id}-${i}`}
-            type="button"
-            onClick={() => {
-              if (entry.skill_name && onSelectProposal)
-                onSelectProposal(entry.skill_name, entry.proposal_id);
-            }}
-            disabled={!entry.skill_name || !onSelectProposal}
-            className="flex w-full gap-3 rounded-md p-1.5 text-left transition-colors enabled:hover:bg-accent/40 disabled:cursor-default"
-          >
-            <div
-              className={`mt-1 size-2 shrink-0 rounded-full ${
-                entry.action === "deployed"
-                  ? "bg-primary"
-                  : entry.action === "rejected" || entry.action === "rolled_back"
-                    ? "bg-destructive"
-                    : entry.action === "validated"
-                      ? "bg-primary-accent"
-                      : "bg-primary-accent"
-              }`}
-            />
-            <div className="flex-1 min-w-0 space-y-1">
-              <div className="flex items-center gap-2">
-                <Badge
-                  variant={ACTION_VARIANT[entry.action] ?? "secondary"}
-                  className="text-[10px]"
-                >
-                  {entry.action}
-                </Badge>
-                <span className="text-xs text-muted-foreground font-mono">
-                  {timeAgo(entry.timestamp)}
-                </span>
-              </div>
-              <p className="text-xs text-muted-foreground line-clamp-2">{entry.details}</p>
-              <span className="text-[10px] text-muted-foreground/60 font-mono">
-                {entry.skill_name ? `${entry.skill_name} · ` : ""}#{entry.proposal_id.slice(0, 8)}
-              </span>
-            </div>
-          </button>
-        ))}
-        {evolution.length === 0 && (
-          <p className="text-sm text-muted-foreground py-4 text-center">No timeline events</p>
-        )}
-      </TabsContent>
-
-      {unmatchedQueries.length > 0 && (
-        <TabsContent value="unmatched" className="mt-4 space-y-2">
-          {unmatchedQueries.slice(0, 15).map((q, i) => (
-            <div key={`${q.session_id}-${i}`} className="flex gap-3">
-              <div className="mt-1 size-2 shrink-0 rounded-full bg-muted-foreground/40" />
-              <div className="flex-1 min-w-0 space-y-0.5">
-                <span className="font-mono text-xs text-muted-foreground">
-                  {timeAgo(q.timestamp)}
-                </span>
-                <p className="line-clamp-2 font-mono text-xs text-foreground/80">{q.query}</p>
-              </div>
-            </div>
-          ))}
-        </TabsContent>
-      )}
-    </Tabs>
-  ) : (
-    <p className="py-6 text-center text-sm text-muted-foreground">No recent activity</p>
-  );
-
-  if (embedded) {
-    return <div>{content}</div>;
-  }
-
   if (!hasActivity) {
     return (
       <Card>
@@ -219,7 +54,156 @@ export function ActivityPanel({
         </CardTitle>
         <CardDescription>Recent evolution events and queries</CardDescription>
       </CardHeader>
-      <CardContent>{content}</CardContent>
+      <CardContent>
+        <Tabs
+          defaultValue={
+            pendingProposals.length > 0
+              ? "pending"
+              : evolution.length > 0
+                ? "timeline"
+                : "unmatched"
+          }
+        >
+          <TooltipProvider>
+            <TabsList className="w-full">
+              {pendingProposals.length > 0 && (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={<TabsTrigger value="pending" className="flex-1 gap-1.5" />}
+                  >
+                    <GitPullRequestArrowIcon className="size-3.5" />
+                    <Badge variant="secondary" className="h-4 px-1 text-[10px]">
+                      {pendingProposals.length}
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent>Pending proposals</TooltipContent>
+                </Tooltip>
+              )}
+              <Tooltip>
+                <TooltipTrigger render={<TabsTrigger value="timeline" className="flex-1" />}>
+                  <ClockIcon className="size-3.5" />
+                </TooltipTrigger>
+                <TooltipContent>Timeline</TooltipContent>
+              </Tooltip>
+              {unmatchedQueries.length > 0 && (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={<TabsTrigger value="unmatched" className="flex-1 gap-1.5" />}
+                  >
+                    <SearchXIcon className="size-3.5" />
+                    <Badge variant="destructive" className="h-4 px-1 text-[10px]">
+                      {unmatchedQueries.length}
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent>Unmatched queries</TooltipContent>
+                </Tooltip>
+              )}
+            </TabsList>
+          </TooltipProvider>
+
+          {pendingProposals.length > 0 && (
+            <TabsContent value="pending" className="mt-4 space-y-3">
+              {pendingProposals.slice(0, 10).map((p) => (
+                <button
+                  key={p.proposal_id}
+                  type="button"
+                  onClick={() => {
+                    if (p.skill_name && onSelectProposal)
+                      onSelectProposal(p.skill_name, p.proposal_id);
+                  }}
+                  disabled={!p.skill_name || !onSelectProposal}
+                  className="flex w-full gap-3 rounded-md p-1.5 text-left transition-colors enabled:hover:bg-accent/40 disabled:cursor-default"
+                >
+                  <div className="mt-1 size-2 shrink-0 rounded-full bg-amber-400" />
+                  <div className="flex-1 min-w-0 space-y-1">
+                    <div className="flex items-center gap-2">
+                      <Badge
+                        variant={ACTION_VARIANT[p.action] ?? "secondary"}
+                        className="text-[10px]"
+                      >
+                        {p.action}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground font-mono">
+                        {timeAgo(p.timestamp)}
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground line-clamp-2">{p.details}</p>
+                    {p.skill_name && (
+                      <span className="text-[10px] text-muted-foreground/60 font-mono">
+                        {p.skill_name} · #{p.proposal_id.slice(0, 8)}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              ))}
+            </TabsContent>
+          )}
+
+          <TabsContent value="timeline" className="mt-4 space-y-3">
+            {evolution.slice(0, 30).map((entry, i) => (
+              <button
+                key={`${entry.proposal_id}-${i}`}
+                type="button"
+                onClick={() => {
+                  if (entry.skill_name && onSelectProposal)
+                    onSelectProposal(entry.skill_name, entry.proposal_id);
+                }}
+                disabled={!entry.skill_name || !onSelectProposal}
+                className="flex w-full gap-3 rounded-md p-1.5 text-left transition-colors enabled:hover:bg-accent/40 disabled:cursor-default"
+              >
+                <div
+                  className={`mt-1 size-2 shrink-0 rounded-full ${
+                    entry.action === "deployed"
+                      ? "bg-emerald-500"
+                      : entry.action === "rejected" || entry.action === "rolled_back"
+                        ? "bg-red-500"
+                        : entry.action === "validated"
+                          ? "bg-amber-400"
+                          : "bg-primary-accent"
+                  }`}
+                />
+                <div className="flex-1 min-w-0 space-y-1">
+                  <div className="flex items-center gap-2">
+                    <Badge
+                      variant={ACTION_VARIANT[entry.action] ?? "secondary"}
+                      className="text-[10px]"
+                    >
+                      {entry.action}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground font-mono">
+                      {timeAgo(entry.timestamp)}
+                    </span>
+                  </div>
+                  <p className="text-xs text-muted-foreground line-clamp-2">{entry.details}</p>
+                  <span className="text-[10px] text-muted-foreground/60 font-mono">
+                    {entry.skill_name ? `${entry.skill_name} · ` : ""}#
+                    {entry.proposal_id.slice(0, 8)}
+                  </span>
+                </div>
+              </button>
+            ))}
+            {evolution.length === 0 && (
+              <p className="text-sm text-muted-foreground text-center py-4">No timeline events</p>
+            )}
+          </TabsContent>
+
+          {unmatchedQueries.length > 0 && (
+            <TabsContent value="unmatched" className="mt-4 space-y-2">
+              {unmatchedQueries.slice(0, 15).map((q, i) => (
+                <div key={`${q.session_id}-${i}`} className="flex gap-3">
+                  <div className="mt-1 size-2 shrink-0 rounded-full bg-muted-foreground/40" />
+                  <div className="flex-1 min-w-0 space-y-0.5">
+                    <span className="text-xs text-muted-foreground font-mono">
+                      {timeAgo(q.timestamp)}
+                    </span>
+                    <p className="text-xs font-mono text-foreground/80 line-clamp-2">{q.query}</p>
+                  </div>
+                </div>
+              ))}
+            </TabsContent>
+          )}
+        </Tabs>
+      </CardContent>
     </Card>
   );
 }