@skyhook-io/radar-app 1.13.1 → 1.13.2

package/src/components/diagnose/Home.tsx

@@ -1,49 +1,103 @@
-// The recent-investigations list — now backed by server-side runs (the source of
-// truth), so background/running investigations appear here live. Used both as the
-// docked Home view and the master pane of the maximized workspace.
-import { Loader2, Sparkles } from "lucide-react";
-import { StatusDot, type StatusTone } from "@skyhook-io/k8s-ui";
-import { Badge } from "@skyhook-io/k8s-ui/components/ui/Badge";
+// Server-side runs keep background and running investigations visible in both
+// the docked Home view and the maximized workspace's master pane.
+import { CircleAlert, Loader2, Server, Sparkles, Square } from "lucide-react";
 import { type RunSummary } from "../../api/diagnose";
+import {
+  groupQualifiesLaneId,
+  pluralToKind,
+} from "@skyhook-io/k8s-ui/utils/navigation";
+import { parseContextName } from "../../utils/context-name";
+import { formatInvestigationTarget } from "./target";
+import { Tooltip } from "../ui/Tooltip";
 
-// Compact "3m ago" / "2h ago" / date label.
-function relativeTime(ts: number, now: number): string {
-  const s = Math.max(0, Math.round((now - ts) / 1000));
-  if (s < 60) return "just now";
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
-  if (s < 7 * 86400) return `${Math.floor(s / 86400)}d ago`;
-  return new Date(ts).toLocaleDateString();
+function historyDay(date: Date, now: Date): string {
+  if (date.toDateString() === now.toDateString()) return "Today";
+  const yesterday = new Date(now);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (date.toDateString() === yesterday.toDateString()) return "Yesterday";
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    ...(date.getFullYear() === now.getFullYear() ? {} : { year: "numeric" }),
+  });
 }
 
-// Map a run status to the design-system status tone (StatusDot). stopped is
-// user-initiated → neutral/unknown, NOT a failure (distinct from error).
-function runTone(status: RunSummary["status"]): StatusTone {
-  switch (status) {
-    case "error":
-      return "unhealthy";
-    case "stale":
-      return "degraded";
-    case "done":
-      return "healthy";
-    default: // stopped
-      return "unknown";
-  }
-}
+// Relative age makes the list easy to scan; a stable local timestamp makes two
+// investigations of the same target distinguishable when they ran close
+// together. Keep today's label compact because the date is redundant there.
+export function absoluteTime(ts: number, now: number): string {
+  const date = new Date(ts);
+  const current = new Date(now);
+  const today =
+    date.getFullYear() === current.getFullYear() &&
+    date.getMonth() === current.getMonth() &&
+    date.getDate() === current.getDate();
 
-function statusDot(status: RunSummary["status"]) {
-  if (status === "running" || status === "stopping")
-    return <Loader2 className="h-3 w-3 shrink-0 animate-spin text-accent" />;
-  return <StatusDot tone={runTone(status)} className="shrink-0" />;
+  return date.toLocaleString(
+    undefined,
+    today
+      ? { hour: "numeric", minute: "2-digit" }
+      : {
+          month: "short",
+          day: "numeric",
+          ...(date.getFullYear() === current.getFullYear()
+            ? {}
+            : { year: "numeric" as const }),
+          hour: "numeric",
+          minute: "2-digit",
+        },
+  );
 }
 
-// A short text status for terminal non-done states, so the run's outcome doesn't
-// rely on decoding a 6px colored dot (and so "I stopped it" reads differently from
-// "it failed"). Done/running are conveyed by the dot + time already.
-function statusWord(
-  status: RunSummary["status"],
-): { text: string; cls: string } | null {
+const historyStatuses = {
+  running: {
+    label: "Running",
+    short: "Running",
+    Icon: Loader2,
+    className: "text-accent-text",
+  },
+  stopping: {
+    label: "Stopping",
+    short: "Stopping",
+    Icon: Loader2,
+    className: "text-theme-text-tertiary",
+  },
+  done: {
+    label: "Completed",
+    short: "",
+    Icon: undefined,
+    className: "text-theme-text-tertiary",
+  },
+  error: {
+    label: "Investigation failed",
+    short: "Failed",
+    Icon: CircleAlert,
+    className: "text-theme-text-secondary",
+  },
+  stopped: {
+    label: "Stopped",
+    short: "Stopped",
+    Icon: Square,
+    className: "text-theme-text-secondary",
+  },
+  stale: {
+    label: "Read-only investigation",
+    short: "",
+    Icon: undefined,
+    className: "text-theme-text-tertiary",
+  },
+} as const;
+
+// A short text status means no run outcome relies on decoding a 6px colored dot.
+export function statusWord(status: RunSummary["status"]): {
+  text: string;
+  cls: string;
+} {
   switch (status) {
+    case "running":
+      return { text: "Running", cls: "text-accent" };
+    case "done":
+      return { text: "Completed", cls: "text-theme-text-secondary" };
     case "error":
       return { text: "Failed", cls: "text-red-400" };
     case "stopped":
@@ -51,11 +105,7 @@ function statusWord(
     case "stopping":
       return { text: "Stopping", cls: "text-theme-text-tertiary" };
     case "stale":
-      // Plain words, not the internal status name: "stale" means the run was
-      // about a cluster that's no longer connected.
-      return { text: "Different cluster", cls: "text-amber-500" };
-    default:
-      return null;
+      return { text: "Read-only", cls: "text-theme-text-tertiary" };
   }
 }
 
@@ -65,14 +115,58 @@ export function RecentList({
   onSelect,
   selectedId,
   historyDegraded = false,
+  currentContext,
 }: {
   agentLabel: string;
   runs: RunSummary[];
   onSelect: (id: string) => void;
   selectedId?: string | null;
   historyDegraded?: boolean;
+  currentContext?: string;
 }) {
-  const now = Date.now();
+  const now = new Date();
+  const contexts = new Map(
+    runs.map((r) => [r.context, parseContextName(r.context)]),
+  );
+  const contextsByName = new Map<string, Set<string>>();
+  const groupsByKind = new Map<string, Set<string>>();
+  for (const [raw, parsed] of contexts) {
+    const names = contextsByName.get(parsed.clusterName) ?? new Set<string>();
+    names.add(raw);
+    contextsByName.set(parsed.clusterName, names);
+  }
+  for (const r of runs) {
+    const kind = pluralToKind(r.kind);
+    const groups = groupsByKind.get(kind) ?? new Set<string>();
+    // Match Radar's resource-lane display convention: built-in API groups
+    // share a readable kind label; custom groups may need disambiguation.
+    groups.add(groupQualifiesLaneId(r.group) ? r.group : "");
+    groupsByKind.set(kind, groups);
+  }
+  const organizationRuns = runs.filter(
+    (r) => r.trigger === "background" || r.ownedByMe === false,
+  );
+  const yourRuns = runs.filter((r) => !organizationRuns.includes(r));
+  const collections = organizationRuns.length
+    ? [
+        { label: "Your investigations", runs: yourRuns },
+        { label: "Organization", runs: organizationRuns },
+      ].filter((collection) => collection.runs.length > 0)
+    : [{ label: "", runs }];
+  // Status bookkeeping (including cluster switches) updates updatedAt. It must
+  // not change the apparent start time or reshuffle the navigation list.
+  const groupedCollections = collections.map((collection) => {
+    const days = new Map<string, RunSummary[]>();
+    for (const r of [...collection.runs].sort(
+      (a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt),
+    )) {
+      const day = historyDay(new Date(r.createdAt), now);
+      const entries = days.get(day) ?? [];
+      entries.push(r);
+      days.set(day, entries);
+    }
+    return { label: collection.label, days };
+  });
 
   // Persistence broke (disk error) — without this the user reasonably assumes
   // their history survives a restart, and it won't.
@@ -97,7 +191,7 @@ export function RecentList({
             <Sparkles className="inline h-3.5 w-3.5 align-text-bottom text-accent" />{" "}
             action to investigate it with {agentLabel} —{" "}
             <span className="font-medium text-theme-text-secondary">
-              Diagnose
+              Investigate
             </span>{" "}
             a problem, or just ask about it. Investigations run in the
             background and are kept in your history here.
@@ -107,83 +201,159 @@ export function RecentList({
     );
   }
 
-  const organizationRuns = runs.filter(
-    (r) => r.trigger === "background" || r.ownedByMe === false,
-  );
-  const yourRuns = runs.filter((r) => !organizationRuns.includes(r));
-  const groups = organizationRuns.length
-    ? [
-        { label: "Your investigations", runs: yourRuns },
-        { label: "Organization", runs: organizationRuns },
-      ].filter((group) => group.runs.length > 0)
-    : [{ label: "Investigations", runs }];
-
   return (
-    <div className="space-y-2">
+    <div className="space-y-4">
       {degradedNote}
-      {groups.map((group) => (
-        <div key={group.label} className="space-y-2">
-          <div className="pt-1 text-[11px] font-medium uppercase tracking-wide text-theme-text-tertiary">
-            {group.label}
-          </div>
-          {group.runs.map((r) => (
-            <button
-              key={r.id}
-              onClick={() => onSelect(r.id)}
-              className={`flex w-full flex-col gap-0.5 rounded-md border px-2.5 py-2 text-left ${
-                r.id === selectedId
-                  ? "border-accent/50 bg-accent/10"
-                  : "border-theme-border/60 bg-theme-base/40 hover:bg-theme-hover"
-              }`}
-            >
-              <div className="flex items-center gap-2">
-                {statusDot(r.status)}
-                <span className="min-w-0 flex-1 truncate text-sm text-theme-text-primary">
-                  {r.kind} {r.namespace ? `${r.namespace}/` : ""}
-                  {r.name}
-                </span>
-                {(r.trigger || r.visibility) && (
-                  <Badge severity="neutral" size="sm" className="shrink-0">
-                    {r.trigger === "background"
-                      ? "Automatic"
-                      : r.visibility === "organization"
-                        ? "Shared"
-                        : "Private"}
-                  </Badge>
-                )}
-                <span className="shrink-0 text-[11px] text-theme-text-tertiary">
-                  {r.status === "running" || r.status === "stopping" ? (
-                    r.status === "stopping" ? "stopping…" : "running…"
-                  ) : (
-                    <>
-                      {(() => {
-                        const w = statusWord(r.status);
-                        return w ? (
-                          <span className={`font-medium ${w.cls}`}>
-                            {w.text} ·{" "}
-                          </span>
-                        ) : null;
-                      })()}
-                      {relativeTime(new Date(r.updatedAt).getTime(), now)}
-                    </>
-                  )}
-                </span>
-              </div>
-              {(r.status === "stale" && r.context) || r.preview ? (
-                <div className="truncate pl-3.5 text-xs text-theme-text-tertiary">
-                  {/* A foreign-cluster run names its cluster — in mixed multi-
-                      context history, identical-looking rows otherwise give no way
-                      to tell WHICH cluster an investigation was about. */}
-                  {r.status === "stale" && r.context ? (
-                    <span className="text-amber-600/80 dark:text-amber-500/80">
-                      {r.context}
+      <h2 className="px-2 text-sm font-medium text-theme-text-secondary">
+        Investigations
+      </h2>
+      {groupedCollections.map((collection) => (
+        <div key={collection.label} className="space-y-4">
+          {collection.label && (
+            <h3 className="px-2 text-xs font-semibold text-theme-text-secondary">
+              {collection.label}
+            </h3>
+          )}
+          {[...collection.days].map(([day, entries]) => (
+            <section key={day} aria-label={day} className="space-y-1">
+              <h3 className="px-2 pb-1 text-xs font-medium text-theme-text-tertiary">
+                {day}
+              </h3>
+              {entries.map((r) => {
+                const { label, short, Icon, className } =
+                  historyStatuses[r.status];
+                const parsed = contexts.get(r.context)!;
+                const collision =
+                  contextsByName.get(parsed.clusterName)!.size > 1;
+                const peers = [
+                  ...contextsByName.get(parsed.clusterName)!,
+                ].filter((raw) => raw !== r.context);
+                const qualifier =
+                  parsed.account &&
+                  peers.every(
+                    (raw) => contexts.get(raw)!.account !== parsed.account,
+                  )
+                    ? parsed.account
+                    : parsed.account &&
+                        parsed.region &&
+                        peers.every((raw) => {
+                          const peer = contexts.get(raw)!;
+                          return (
+                            peer.account !== parsed.account ||
+                            peer.region !== parsed.region
+                          );
+                        })
+                      ? `${parsed.account} · ${parsed.region}`
+                      : r.context;
+                const readableKind = pluralToKind(r.kind);
+                const kind =
+                  groupsByKind.get(readableKind)!.size > 1
+                    ? `${readableKind} · ${r.group || "core"}`
+                    : readableKind;
+                const initialIssue = r.health?.topReason?.trim();
+                const isCurrentCluster = currentContext === r.context;
+                const visibility =
+                  r.trigger === "background"
+                    ? "Automatic"
+                    : r.visibility === "organization"
+                      ? "Shared"
+                      : r.visibility === "private"
+                        ? "Private"
+                        : "";
+                const identity = `${formatInvestigationTarget(r)} · ${r.context}${isCurrentCluster ? " · Current cluster" : ""} · ${label}${visibility ? ` · ${visibility}` : ""} · Started ${new Date(r.createdAt).toLocaleString()}${initialIssue ? ` · Started with ${initialIssue}` : ""}`;
+                return (
+                  <button
+                    key={r.id}
+                    onClick={() => onSelect(r.id)}
+                    aria-label={identity}
+                    aria-current={r.id === selectedId ? "true" : undefined}
+                    className={`flex w-full min-w-0 flex-col gap-0.5 rounded-md border-l-2 px-2 py-2 text-left focus-visible:outline-2 focus-visible:outline-accent ${
+                      r.id === selectedId
+                        ? "border-accent bg-accent-muted"
+                        : "border-transparent hover:bg-theme-hover"
+                    }`}
+                  >
+                    <span className="flex w-full items-start gap-2">
+                      <Tooltip
+                        content={r.name}
+                        position="right"
+                        delay={600}
+                        className="pointer-events-none"
+                        wrapperClassName="min-w-0 flex-1"
+                      >
+                        <span className="min-w-0 flex-1 line-clamp-2 break-words text-sm font-medium leading-5 text-theme-text-primary">
+                          {r.name}
+                        </span>
+                      </Tooltip>
+                      {(Icon || short) && (
+                        <span
+                          aria-hidden="true"
+                          className={`flex shrink-0 items-center gap-1 text-xs leading-5 ${className}`}
+                        >
+                          {Icon && (
+                            <Icon
+                              className={`mt-0.5 h-3.5 w-3.5 ${r.status === "running" || r.status === "stopping" ? "animate-spin motion-reduce:animate-none" : r.status === "error" ? "text-semantic-error" : ""}`}
+                            />
+                          )}
+                          {short}
+                        </span>
+                      )}
+                    </span>
+                    <span className="flex w-full items-baseline gap-2 text-xs leading-4 text-theme-text-secondary">
+                      <span className="min-w-0 flex-1 truncate">
+                        {r.namespace ? `${r.namespace} · ` : ""}
+                        {kind}
+                      </span>
+                      <time
+                        dateTime={r.createdAt}
+                        className="shrink-0 tabular-nums text-theme-text-tertiary"
+                      >
+                        {new Date(r.createdAt).toLocaleTimeString(undefined, {
+                          hour: "numeric",
+                          minute: "2-digit",
+                        })}
+                      </time>
                     </span>
-                  ) : null}
-                  {r.status === "stale" && r.context && r.preview ? " · " : ""}
-                  {r.preview}
-                </div>
-              ) : null}
-            </button>
+                    <Tooltip
+                      content={`${r.context}${isCurrentCluster ? " · Current cluster" : ""}`}
+                      position="right"
+                      delay={600}
+                      className="pointer-events-none"
+                      wrapperClassName="w-full min-w-0"
+                    >
+                      <span
+                        aria-label={
+                          isCurrentCluster
+                            ? `Current cluster: ${parsed.clusterName}`
+                            : `Cluster: ${parsed.clusterName}`
+                        }
+                        className={`flex w-full items-center gap-1 text-xs leading-4 ${isCurrentCluster ? "text-accent-text" : "text-theme-text-tertiary"}`}
+                      >
+                        <Server className="h-3 w-3 shrink-0" aria-hidden />
+                        <span className="min-w-0 flex-1 truncate">
+                          {parsed.clusterName}
+                        </span>
+                        {visibility && (
+                          <span className="shrink-0 text-theme-text-tertiary">
+                            {visibility}
+                          </span>
+                        )}
+                      </span>
+                    </Tooltip>
+                    {collision && qualifier !== parsed.clusterName && (
+                      <span className="w-full break-words text-xs leading-4 text-theme-text-secondary">
+                        {qualifier}
+                      </span>
+                    )}
+                    {initialIssue && (
+                      <span className="line-clamp-1 w-full text-xs leading-4 text-theme-text-secondary">
+                        Started with {initialIssue}
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </section>
           ))}
         </div>
       ))}