selftune 0.2.2 → 0.2.6

package/packages/ui/README.md

@@ -0,0 +1,113 @@
+# @selftune/ui
+
+Shared UI components for selftune dashboards. Source-only workspace package — no build step, consumed directly by Vite's bundler.
+
+## Usage
+
+Add as a workspace dependency:
+
+```json
+{
+  "dependencies": {
+    "@selftune/ui": "workspace:*"
+  }
+}
+```
+
+Import from subpath exports:
+
+```tsx
+import { Badge, Button, Card } from "@selftune/ui/primitives"
+import { SkillHealthGrid, EvolutionTimeline } from "@selftune/ui/components"
+import { cn, timeAgo, deriveStatus, STATUS_CONFIG } from "@selftune/ui/lib"
+import type { SkillCard, EvolutionEntry } from "@selftune/ui/types"
+```
+
+Or import everything from the root:
+
+```tsx
+import { Badge, SkillHealthGrid, cn, type SkillCard } from "@selftune/ui"
+```
+
+## Exports
+
+### Primitives (`@selftune/ui/primitives`)
+
+shadcn/ui components built on [@base-ui/react](https://base-ui.com/):
+
+| Component | Source |
+|-----------|--------|
+| `Badge`, `badgeVariants` | badge.tsx |
+| `Button`, `buttonVariants` | button.tsx |
+| `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` | card.tsx |
+| `Checkbox` | checkbox.tsx |
+| `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` | collapsible.tsx |
+| `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, ... | dropdown-menu.tsx |
+| `Label` | label.tsx |
+| `Select`, `SelectTrigger`, `SelectContent`, `SelectItem`, ... | select.tsx |
+| `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`, ... | table.tsx |
+| `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | tabs.tsx |
+| `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider` | tooltip.tsx |
+
+### Domain Components (`@selftune/ui/components`)
+
+Presentational components for selftune dashboard views. No data fetching, no routing — pass data and callbacks as props.
+
+| Component | Description |
+|-----------|-------------|
+| `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 (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. |
+| `InfoTip` | Small info icon with tooltip, used to explain metrics. |
+
+### Utilities (`@selftune/ui/lib`)
+
+| Export | Description |
+|--------|-------------|
+| `cn(...inputs)` | Tailwind class merge utility (clsx + tailwind-merge) |
+| `timeAgo(timestamp)` | Relative time string ("3h ago", "2d ago") |
+| `formatRate(rate)` | Format 0-1 rate as percentage string ("85%") |
+| `deriveStatus(passRate, checks)` | Derive `SkillHealthStatus` from pass rate and check count |
+| `sortByPassRateAndChecks(items)` | Sort skill cards by pass rate ascending, then checks descending |
+| `STATUS_CONFIG` | Icon, variant, and label for each `SkillHealthStatus` value |
+
+### Types (`@selftune/ui/types`)
+
+Self-contained type declarations matching the dashboard contract shapes:
+
+`SkillCard`, `SkillHealthStatus`, `EvalSnapshot`, `EvolutionEntry`, `EvidenceEntry`, `PendingProposal`, `UnmatchedQuery`, `OrchestrateRunReport`, `OrchestrateRunSkillAction`
+
+## Tailwind CSS
+
+This package uses Tailwind v4. The Vite plugin auto-scans imported workspace packages, so classes should be detected automatically. If not, add to your app's `styles.css`:
+
+```css
+@source "../../packages/ui/src";
+```
+
+## Adding a New Primitive
+
+1. Copy the shadcn component into `src/primitives/`
+2. Replace `@/lib/utils` with `../lib/utils` in the import
+3. Re-export from `src/primitives/index.ts`
+
+## Adding a New Domain Component
+
+1. Create the component in `src/components/`
+2. Import primitives from `../primitives/`, utils from `../lib/`, types from `../types`
+3. Keep it **purely presentational** — no data fetching, no router imports
+4. For navigation, accept a render prop (e.g., `renderSkillName`) instead of importing router components
+5. Re-export from `src/components/index.ts`
+
+## Peer Dependencies
+
+Required: `react`, `react-dom`
+
+Optional (only needed by specific components):
+- `@dnd-kit/*` — SkillHealthGrid drag-and-drop
+- `@tanstack/react-table` — SkillHealthGrid table
+- `react-markdown` — EvidenceViewer markdown rendering
+- `recharts` — future chart components

package/packages/ui/index.ts

@@ -0,0 +1,10 @@
+// Primitives
+
+// Domain components
+export * from "./src/components/index";
+// Utilities
+export * from "./src/lib/index";
+export * from "./src/primitives/index";
+
+// Types
+export * from "./src/types";

package/packages/ui/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@selftune/ui",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Shared UI components for selftune dashboards",
+  "type": "module",
+  "license": "MIT",
+  "author": "Daniel Petro",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/selftune-dev/selftune.git",
+    "directory": "packages/ui"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./primitives": "./src/primitives/index.ts",
+    "./components": "./src/components/index.ts",
+    "./lib": "./src/lib/index.ts",
+    "./types": "./src/types.ts"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dnd-kit/core": "^6.0.0",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "react-markdown": "^10.0.0",
+    "recharts": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/modifiers": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
+    "@dnd-kit/utilities": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    }
+  }
+}

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

@@ -0,0 +1,171 @@
+import { Badge } from "../primitives/badge"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../primitives/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/tabs"
+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",
+  validated: "secondary",
+  deployed: "default",
+  rejected: "destructive",
+  rolled_back: "destructive",
+  pending: "secondary",
+}
+
+export function ActivityPanel({
+  evolution,
+  pendingProposals,
+  unmatchedQueries,
+}: {
+  evolution: EvolutionEntry[]
+  pendingProposals: PendingProposal[]
+  unmatchedQueries: UnmatchedQuery[]
+}) {
+  const hasActivity = evolution.length > 0 || pendingProposals.length > 0 || unmatchedQueries.length > 0
+
+  if (!hasActivity) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm">
+            <ActivityIcon className="size-4" />
+            Activity
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No recent activity
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-sm">
+          <ActivityIcon className="size-4" />
+          Activity
+        </CardTitle>
+        <CardDescription>Recent evolution events and queries</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Tabs
+          defaultValue={
+            pendingProposals.length > 0
+              ? "pending"
+              : evolution.length > 0
+                ? "timeline"
+                : "unmatched"
+          }
+        >
+          <TabsList className="w-full">
+            {pendingProposals.length > 0 && (
+              <TabsTrigger value="pending" className="flex-1 gap-1.5">
+                <GitPullRequestArrowIcon className="size-3.5" />
+                Pending
+                <Badge variant="secondary" className="ml-1 h-4 px-1.5 text-[10px]">
+                  {pendingProposals.length}
+                </Badge>
+              </TabsTrigger>
+            )}
+            <TabsTrigger value="timeline" className="flex-1 gap-1.5">
+              <ClockIcon className="size-3.5" />
+              Timeline
+            </TabsTrigger>
+            {unmatchedQueries.length > 0 && (
+              <TabsTrigger value="unmatched" className="flex-1 gap-1.5">
+                <SearchXIcon className="size-3.5" />
+                Unmatched
+                <Badge variant="destructive" className="ml-1 h-4 px-1.5 text-[10px]">
+                  {unmatchedQueries.length}
+                </Badge>
+              </TabsTrigger>
+            )}
+          </TabsList>
+
+          {pendingProposals.length > 0 && (
+            <TabsContent value="pending" className="mt-4 space-y-3">
+              {pendingProposals.slice(0, 10).map((p) => (
+                <div key={p.proposal_id} className="flex gap-3">
+                  <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>
+                  </div>
+                </div>
+              ))}
+            </TabsContent>
+          )}
+
+          <TabsContent value="timeline" className="mt-4 space-y-3">
+            {evolution.slice(0, 30).map((entry, i) => (
+              <div key={`${entry.proposal_id}-${i}`} className="flex gap-3">
+                <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.proposal_id.slice(0, 8)}
+                  </span>
+                </div>
+              </div>
+            ))}
+            {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>
+  )
+}