@skyhook-io/radar-app 1.13.5 → 1.14.1

package/src/components/diagnose/AgentCase.tsx

@@ -1,5 +1,4 @@
 import { clsx } from "clsx";
-import { Sparkles } from "lucide-react";
 import { Badge } from "@skyhook-io/k8s-ui";
 
 import type { DiagnosisEvidenceRole } from "../../api/diagnose";
@@ -11,7 +10,7 @@ export const AGENT_ROLE_LABELS: Readonly<
   cause: "Cause",
   symptom: "Symptom",
   context: "Context",
-  benign: "Not a problem",
+  benign: "Not a live problem",
   demoted: "Less relevant",
   rules_out: "Rules out",
 };
@@ -29,8 +28,11 @@ export function AgentRoleChip({ role }: { role: DiagnosisEvidenceRole }) {
       // and the badge's own baseline comes from the sparkle, landing 1px high.
       wrapperClassName="shrink-0 align-[-1px]"
     >
-      <Badge tone="agent" size="sm">
-        <Sparkles className="h-2.5 w-2.5 shrink-0" aria-hidden />
+      <Badge
+        tone="structural"
+        size="sm"
+        className="border-theme-border-light font-medium text-theme-text-primary"
+      >
         {AGENT_ROLE_LABELS[role]}
       </Badge>
     </Tooltip>
@@ -55,10 +57,13 @@ export function AgentClaimNote({
   role,
   excludes,
   subject,
+  gap,
   className,
 }: {
   claim: string;
   role?: DiagnosisEvidenceRole;
+  /** What the agent says this result does not cover; shown beside its reading of it. */
+  gap?: string;
   /**
    * The hypothesis this item excludes. Rendered only for `rules_out`, where
    * the chip frames it as rejected: a hypothesis is a claim the agent
@@ -69,7 +74,7 @@ export function AgentClaimNote({
   subject?: string;
   className?: string;
 }) {
-  if (!claim && !role) return null;
+  if (!claim && !role && !gap) return null;
   return (
     <p
       data-agent-claim
@@ -102,6 +107,14 @@ export function AgentClaimNote({
             {renderClaim(claim)}
           </>
         ) : null}
+        {gap ? (
+          <span
+            data-agent-gap
+            className="block text-[11px] text-theme-text-tertiary"
+          >
+            Not shown: {gap}
+          </span>
+        ) : null}
       </span>
     </p>
   );

package/src/components/diagnose/AnalysisStory.test.tsx

@@ -0,0 +1,308 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import {
+  AnalysisStory,
+  resolveStoryPlacements,
+  type StoryPlacementLoss,
+  type StoryPlacementTarget,
+} from "./AnalysisStory";
+import type { InvestigationCaseItem } from "./investigationCase";
+
+function target(index: number, observationId: string): StoryPlacementTarget {
+  return {
+    item: {
+      index,
+      role: "cause",
+      claim: "",
+      placement: "card",
+      groupId: `group-${observationId}`,
+      source: { id: `src-${observationId}` },
+      observation: {
+        source: { id: `src-${observationId}` },
+        revision: 1,
+        title: `Card ${observationId}`,
+      },
+    } as unknown as InvestigationCaseItem,
+    domId: `story-group-${observationId}`,
+  };
+}
+
+const resolver =
+  (table: Record<number, StoryPlacementTarget | StoryPlacementLoss>) =>
+  (index: number) =>
+    table[index] ?? ("invalid" as const);
+
+describe("resolveStoryPlacements", () => {
+  it("places the first block marker per observation and references the rest", () => {
+    const story = resolveStoryPlacements(
+      "A.\n\n[[radar:evidence=0]]\n\nAgain [[radar:evidence=0]] and [[radar:evidence=1]].\n\n[[radar:evidence=1]]\n\n[[radar:evidence=0]]",
+      resolver({ 0: target(0, "a"), 1: target(1, "a") }),
+    );
+    // Item 1 resolves to the same observation as item 0: one card, not two.
+    expect(story.byIndex.get(0)?.kind).toBe("placed");
+    expect(story.byIndex.get(1)?.kind).toBe("reference");
+    expect(story.placedCount).toBe(1);
+    expect(story.lostItems).toBe(0);
+  });
+
+  it("renders one card for a repeated block marker and keeps the paragraph when nothing places", () => {
+    const repeated = resolveStoryPlacements(
+      "[[radar:evidence=0]]\n\nAgain:\n\n[[radar:evidence=0]]",
+      resolver({ 0: target(0, "a") }),
+    );
+    expect(repeated.placedAt.get(0)).toBe(0);
+    const html = renderToStaticMarkup(
+      <AnalysisStory
+        report={"Opening paragraph.\n\n[[radar:evidence=2]]\n\nMore."}
+        resolveItem={resolver({ 2: "unlinked" })}
+        renderPlacement={() => null}
+        onReveal={vi.fn()}
+      />,
+    );
+    expect(html).toContain("Opening paragraph.");
+    expect(html).toContain('data-story-lost-support="unlinked"');
+  });
+
+  it("places a card under the paragraph that first mentions it inline, and drops that marker from the sentence", () => {
+    const story = resolveStoryPlacements(
+      "Envoy boots [[radar:evidence=0]] then hangs on xDS.\n\nLater, see [[radar:evidence=0]] again.",
+      resolver({ 0: target(0, "a") }),
+    );
+    expect(story.segments.map((segment) => segment.kind)).toEqual([
+      "prose",
+      "placement",
+      "prose",
+    ]);
+    expect(story.segments[1]).toEqual({
+      kind: "placement",
+      index: 0,
+      auto: true,
+    });
+    expect(story.placedAt.get(0)).toBe(1);
+    expect((story.segments[0] as { markdown: string }).markdown).toBe(
+      "Envoy boots then hangs on xDS.",
+    );
+    expect((story.segments[2] as { markdown: string }).markdown).toContain(
+      "#radar-evidence-0",
+    );
+    const html = renderToStaticMarkup(
+      <AnalysisStory
+        report={
+          "Envoy boots [[radar:evidence=0]] then hangs on xDS.\n\nLater, see [[radar:evidence=0]] again."
+        }
+        resolveItem={resolver({ 0: target(0, "a") })}
+        renderPlacement={() => <div data-card>card</div>}
+        onReveal={vi.fn()}
+        openRequest={1}
+      />,
+    );
+    expect(html).toContain("data-card");
+    expect(html).toContain("↑");
+  });
+
+  it("keeps an inline mention a reference when the agent places that card on its own line later, pointing down", () => {
+    const html = renderToStaticMarkup(
+      <AnalysisStory
+        report={
+          "First [[radar:evidence=0]] here.\n\nThen:\n\n[[radar:evidence=0]]"
+        }
+        resolveItem={resolver({ 0: target(0, "a") })}
+        renderPlacement={() => <div data-card>card</div>}
+        onReveal={vi.fn()}
+        openRequest={1}
+      />,
+    );
+    expect(html).toContain("↓");
+    expect(html.match(/data-card/g)).toHaveLength(1);
+  });
+
+  it("places two cards that share one source and revision when they are different groups", () => {
+    const shared = (index: number, group: string): StoryPlacementTarget => ({
+      item: {
+        index,
+        role: "context",
+        claim: "",
+        placement: "card",
+        groupId: group,
+        source: { id: "src-bundle" },
+        observation: {
+          source: { id: "src-bundle" },
+          revision: 1,
+          title: group,
+        },
+      } as unknown as InvestigationCaseItem,
+      domId: `story-${group}`,
+    });
+    const story = resolveStoryPlacements(
+      "[[radar:evidence=0]]\n\n[[radar:evidence=1]]",
+      resolver({ 0: shared(0, "logs"), 1: shared(1, "events") }),
+    );
+    expect(story.placedCount).toBe(2);
+    expect(story.byIndex.get(1)?.kind).toBe("placed");
+  });
+
+  it("keeps the compact flag of an inline marker it auto-places, and tidies only the marker's hole", () => {
+    const story = resolveStoryPlacements(
+      "Line one  \nline two says [[radar:evidence=0|compact]], then more.",
+      resolver({ 0: target(0, "a") }),
+    );
+    expect(story.segments).toEqual([
+      {
+        kind: "prose",
+        markdown: "Line one  \nline two says, then more.",
+      },
+      { kind: "placement", index: 0, auto: true, compact: true },
+    ]);
+    const breaks = (report: string) =>
+      (
+        resolveStoryPlacements(report, resolver({ 0: target(0, "a") }))
+          .segments[0] as { markdown: string }
+      ).markdown;
+    expect(breaks("Says [[radar:evidence=0]]  \nnext")).toBe("Says  \nnext");
+    expect(breaks("Says  \n[[radar:evidence=0]] next")).toBe("Says  \nnext");
+  });
+
+  it("keeps the agent's own-line placement when a twin item on the same card was mentioned inline first", () => {
+    const story = resolveStoryPlacements(
+      "Inline [[radar:evidence=1]] first.\n\nLater:\n\n[[radar:evidence=0]]",
+      resolver({ 0: target(0, "a"), 1: target(1, "a") }),
+    );
+    expect(story.segments.map((segment) => segment.kind)).toEqual([
+      "prose",
+      "prose",
+      "placement",
+    ]);
+    expect(story.byIndex.get(1)?.kind).toBe("reference");
+    expect(story.placedAt.get(1)).toBe(2);
+    expect(story.placedCount).toBe(1);
+  });
+
+  it("points a chip past the placement cap down, to Captured results", () => {
+    const table: Record<number, StoryPlacementTarget | StoryPlacementLoss> = {};
+    for (let i = 0; i < 8; i += 1) table[i] = target(i, `o${i}`);
+    const markers = Array.from(
+      { length: 6 },
+      (_, i) => `[[radar:evidence=${i}]]`,
+    ).join("\n\n");
+    const html = renderToStaticMarkup(
+      <AnalysisStory
+        report={`${markers}\n\nSee [[radar:evidence=7]] here.`}
+        resolveItem={resolver(table)}
+        renderPlacement={() => <div data-card>card</div>}
+        onReveal={vi.fn()}
+        openRequest={1}
+      />,
+    );
+    expect(html.match(/data-card/g)).toHaveLength(6);
+    expect(html).toContain('data-story-ref-direction="down"');
+
+    const ownLine = renderToStaticMarkup(
+      <AnalysisStory
+        report={Array.from(
+          { length: 7 },
+          (_, i) => `[[radar:evidence=${i}]]`,
+        ).join("\n\n")}
+        resolveItem={resolver(table)}
+        renderPlacement={() => <div data-card>card</div>}
+        onReveal={vi.fn()}
+        openRequest={1}
+      />,
+    );
+    expect(ownLine.match(/data-card/g)).toHaveLength(6);
+    expect(ownLine).toContain('data-story-ref-direction="down"');
+    expect(ownLine).not.toContain('data-story-ref-direction="up"');
+  });
+
+  it("caps placed cards and reports every distinct lost item once", () => {
+    const markers = Array.from(
+      { length: 8 },
+      (_, i) => `[[radar:evidence=${i}]]`,
+    ).join("\n\n");
+    const table: Record<number, StoryPlacementTarget | StoryPlacementLoss> = {};
+    for (let i = 0; i < 8; i += 1) table[i] = target(i, `o${i}`);
+    const story = resolveStoryPlacements(markers, resolver(table));
+    expect(story.placedCount).toBe(6);
+    expect(story.byIndex.get(7)?.kind).toBe("reference");
+
+    const lost = resolveStoryPlacements(
+      "[[radar:evidence=3]]\n\nx [[radar:evidence=3]] [[radar:evidence=4]]",
+      resolver({ 3: "unlinked", 4: "unplaced" }),
+    );
+    expect(lost.lostItems).toBe(2);
+    expect(lost.byIndex.get(3)).toEqual({ kind: "lost", reason: "unlinked" });
+  });
+});
+
+describe("AnalysisStory", () => {
+  const render = (report: string, open = false) =>
+    renderToStaticMarkup(
+      <AnalysisStory
+        report={report}
+        resolveItem={resolver({
+          0: target(0, "crash"),
+          1: target(1, "chart"),
+          2: "unlinked",
+        })}
+        renderPlacement={(t, { compact }) => (
+          <div data-placed={t.domId} data-compact={compact ? "1" : "0"}>
+            {t.item.observation?.title}
+          </div>
+        )}
+        onReveal={vi.fn()}
+        openRequest={open ? 1 : 0}
+      />,
+    );
+
+  it("previews the paragraph before the first placed card plus that card, compact, and nothing after", () => {
+    const html = render(
+      "Intro paragraph.\n\nThe container dies on start.\n\n[[radar:evidence=0]]\n\nThen a second thought.\n\n[[radar:evidence=1]]",
+    );
+    expect(html).toContain("The container dies on start.");
+    expect(html).toContain('data-placed="story-group-crash"');
+    expect(html).toContain('data-compact="1"');
+    expect(html).not.toContain("Intro paragraph.");
+    // The paragraph behind the fold shows only as the faded, aria-hidden teaser.
+    expect(html).toContain("data-story-teaser");
+    expect(html.split("Then a second thought.").length).toBe(2);
+    expect(html).not.toContain("story-group-chart");
+    expect(html).toContain("Expand");
+    expect(html).toContain('data-story-open="false"');
+  });
+
+  it("opens to the whole story with full cards, reference chips and visible lost support", () => {
+    const html = render(
+      "Intro.\n\n[[radar:evidence=0]]\n\nSee [[radar:evidence=0]] and [[radar:evidence=2]].",
+      true,
+    );
+    expect(html).toContain("Intro.");
+    expect(html).toContain('data-compact="0"');
+    expect(html).toContain("Show Card crash");
+    expect(html).toContain('data-story-lost-support="unlinked"');
+    expect(html).toContain("1 cited result could not be shown here.");
+    expect(html).toContain("Collapse");
+  });
+
+  it("keeps trailing content behind the fold and folds for it alone", () => {
+    const collapsed = render("One paragraph only.");
+    expect(collapsed).not.toContain("Expand");
+    const withTrailing = renderToStaticMarkup(
+      <AnalysisStory
+        report="One paragraph only."
+        resolveItem={resolver({})}
+        renderPlacement={() => null}
+        onReveal={vi.fn()}
+        trailing={<p data-trailing>Also checked: nothing else.</p>}
+      />,
+    );
+    expect(withTrailing).toContain("Expand");
+    expect(withTrailing).not.toContain("data-trailing");
+  });
+
+  it("does not offer a fold when everything already fits the preview", () => {
+    const html = render("One paragraph only.");
+    expect(html).toContain("One paragraph only.");
+    expect(html).not.toContain("Expand");
+    expect(html).toContain('data-story-open="true"');
+  });
+});