selftune 0.2.22 → 0.2.23

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

@@ -0,0 +1,156 @@
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "../primitives/card";
+import { Badge } from "../primitives/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../primitives/collapsible";
+import { timeAgo } from "../lib/format";
+import { ActivityIcon, ChevronDownIcon } from "lucide-react";
+import type { JobExecution } from "../types";
+
+const JOB_NAMES = [
+  "aggregation",
+  "alert-checker",
+  "badge-cache",
+  "retention-cleanup",
+  "orchestrate",
+  "sync",
+  "status",
+] as const;
+
+export interface JobHistoryFilters {
+  job: string;
+  status: string;
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+export function JobHistoryTimeline({
+  executions,
+  filters,
+  onFilterChange,
+}: {
+  executions: JobExecution[];
+  filters?: JobHistoryFilters;
+  onFilterChange?: (filters: JobHistoryFilters) => void;
+}) {
+  const currentJob = filters?.job ?? "";
+  const currentStatus = filters?.status ?? "";
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-sm">
+          <ActivityIcon className="size-4" />
+          Execution History
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Filter bar */}
+        {onFilterChange && (
+          <div className="flex flex-wrap items-center gap-2">
+            <select
+              value={currentJob}
+              onChange={(e) => onFilterChange({ job: e.target.value, status: currentStatus })}
+              className="h-7 rounded-md border border-input bg-transparent px-2 text-xs text-foreground outline-none focus:border-ring"
+            >
+              <option value="">All jobs</option>
+              {JOB_NAMES.map((name) => (
+                <option key={name} value={name}>
+                  {name}
+                </option>
+              ))}
+            </select>
+            <select
+              value={currentStatus}
+              onChange={(e) => onFilterChange({ job: currentJob, status: e.target.value })}
+              className="h-7 rounded-md border border-input bg-transparent px-2 text-xs text-foreground outline-none focus:border-ring"
+            >
+              <option value="">All statuses</option>
+              <option value="success">Success</option>
+              <option value="error">Error</option>
+            </select>
+          </div>
+        )}
+
+        {/* Timeline */}
+        {executions.length === 0 ? (
+          <p className="py-8 text-center text-sm text-muted-foreground">No executions yet</p>
+        ) : (
+          <div className="space-y-2">
+            {executions.map((exec) => (
+              <ExecutionRow key={exec.id} execution={exec} />
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function ExecutionRow({ execution }: { execution: JobExecution }) {
+  const [open, setOpen] = useState(false);
+  const isError = execution.status === "error";
+  const hasDetails = execution.error || Object.keys(execution.metrics).length > 0;
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div
+        className={`rounded-md border p-2 ${
+          isError ? "border-red-500/30 bg-red-950/10" : "border-border"
+        }`}
+      >
+        <CollapsibleTrigger
+          disabled={!hasDetails}
+          className="flex w-full items-center gap-3 text-left disabled:cursor-default"
+        >
+          <span
+            className={`mt-0.5 size-2 shrink-0 rounded-full ${
+              isError ? "bg-red-500" : "bg-emerald-500"
+            }`}
+          />
+          <Badge variant={isError ? "destructive" : "secondary"} className="text-[10px]">
+            {execution.jobName}
+          </Badge>
+          <span className="text-xs text-muted-foreground font-mono">
+            {timeAgo(execution.startedAt)}
+          </span>
+          <span className="text-xs text-muted-foreground/60 font-mono">
+            took {formatDuration(execution.durationMs)}
+          </span>
+          {typeof execution.metrics.total_llm_calls === "number" &&
+            execution.metrics.total_llm_calls > 0 && (
+              <span className="text-xs text-muted-foreground/60 font-mono">
+                {execution.metrics.total_llm_calls} LLM calls
+              </span>
+            )}
+          {hasDetails && (
+            <ChevronDownIcon
+              className={`ml-auto size-3.5 text-muted-foreground transition-transform ${
+                open ? "rotate-180" : ""
+              }`}
+            />
+          )}
+        </CollapsibleTrigger>
+
+        {hasDetails && (
+          <CollapsibleContent className="mt-2 border-t border-border pt-2">
+            {execution.error && (
+              <p className="text-xs text-red-400 font-mono mb-1">{execution.error}</p>
+            )}
+            {Object.keys(execution.metrics).length > 0 && (
+              <div className="flex flex-wrap gap-x-4 gap-y-1">
+                {Object.entries(execution.metrics).map(([key, value]) => (
+                  <span key={key} className="text-[11px] text-muted-foreground font-mono">
+                    {key}: {String(value)}
+                  </span>
+                ))}
+              </div>
+            )}
+          </CollapsibleContent>
+        )}
+      </div>
+    </Collapsible>
+  );
+}

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

@@ -1,14 +1,13 @@
-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";
+import { timeAgo } from "../lib/format";
+import { BotIcon, ChevronRightIcon, EyeIcon, SkipForwardIcon, ZapIcon } from "lucide-react";
 
 const ACTION_ICON: Record<string, React.ReactNode> = {
-  evolve: <ZapIcon className="size-3 text-primary-accent" />,
+  evolve: <ZapIcon className="size-3 text-amber-500" />,
   watch: <EyeIcon className="size-3 text-blue-500" />,
   skip: <SkipForwardIcon className="size-3 text-muted-foreground" />,
 };
@@ -66,15 +65,17 @@ function RunCard({ run }: { run: OrchestrateRunReport }) {
           <div
             className={`mt-1.5 size-2 shrink-0 rounded-full ${
               run.deployed > 0
-                ? "bg-primary"
+                ? "bg-emerald-500"
                 : run.evolved > 0
-                  ? "bg-primary-accent"
+                  ? "bg-amber-400"
                   : "bg-muted-foreground/40"
             }`}
           />
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
-              <span className="text-[10px] font-mono text-slate-500">{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
@@ -88,7 +89,7 @@ function RunCard({ run }: { run: OrchestrateRunReport }) {
             </div>
             <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
               {run.deployed > 0 && (
-                <span className="text-primary font-medium">{run.deployed} deployed</span>
+                <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>}
@@ -102,7 +103,7 @@ function RunCard({ run }: { run: OrchestrateRunReport }) {
         </div>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="ml-5 pl-3 border-l border-border/15 space-y-0.5 pb-2">
+        <div className="ml-5 pl-3 border-l border-border space-y-0.5 pb-2">
           {nonSkipActions.map((action, i) => (
             <SkillActionRow key={`${action.skill}-${i}`} action={action} />
           ))}
@@ -124,32 +125,7 @@ function RunCard({ run }: { run: OrchestrateRunReport }) {
   );
 }
 
-export function OrchestrateRunsPanel({
-  runs,
-  embedded = false,
-}: {
-  runs: OrchestrateRunReport[];
-  embedded?: boolean;
-}) {
-  const totalDeployed = runs.reduce((sum, r) => sum + r.deployed, 0);
-  const content =
-    runs.length === 0 ? (
-      <p className="py-4 text-center text-sm text-muted-foreground">
-        No orchestrate runs yet. Run{" "}
-        <code className="rounded bg-muted px-1 py-0.5 text-xs">selftune orchestrate</code> to start.
-      </p>
-    ) : (
-      <div className="space-y-0">
-        {runs.slice(0, 10).map((run) => (
-          <RunCard key={run.run_id} run={run} />
-        ))}
-      </div>
-    );
-
-  if (embedded) {
-    return <div>{content}</div>;
-  }
-
+export function OrchestrateRunsPanel({ runs }: { runs: OrchestrateRunReport[] }) {
   if (runs.length === 0) {
     return (
       <Card>
@@ -170,6 +146,8 @@ export function OrchestrateRunsPanel({
     );
   }
 
+  const totalDeployed = runs.reduce((sum, r) => sum + r.deployed, 0);
+
   return (
     <Card>
       <CardHeader>
@@ -182,7 +160,11 @@ export function OrchestrateRunsPanel({
           {totalDeployed > 0 && <> &middot; {totalDeployed} total deployments</>}
         </CardDescription>
       </CardHeader>
-      <CardContent>{content}</CardContent>
+      <CardContent className="space-y-0">
+        {runs.slice(0, 10).map((run) => (
+          <RunCard key={run.run_id} run={run} />
+        ))}
+      </CardContent>
     </Card>
   );
 }