@handled-ai/design-system 0.16.0 → 0.16.1

package/src/prototype/__tests__/detail-view-attention.test.tsx

@@ -0,0 +1,101 @@
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { DetailView, type DetailViewProps } from "../prototype-inbox-view";
+import type { QueueItem, SignalScoreData } from "../prototype-config";
+import type { TimelineEvent } from "../../components/timeline-activity";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const baseItem: QueueItem = {
+  id: "1",
+  title: "Test Signal",
+  details: "Some details",
+  statusColor: "green",
+  time: "2h ago",
+  company: "Acme Inc",
+  tag1: "renewal",
+};
+
+function makeSignalScore(): SignalScoreData {
+  return {
+    score: 75,
+    factors: [
+      { key: "trigger", label: "Trigger strength", score: 70, why: "Strong signal" },
+    ],
+    whyNow: "Strong signals detected.",
+    evidence: ["Evidence line 1"],
+    confidence: 80,
+  };
+}
+
+const sampleTimelineEvents: TimelineEvent[] = [
+  { id: "t1", icon: React.createElement("span", null, "📧"), title: "Email sent", time: "1h ago" },
+  { id: "t2", icon: React.createElement("span", null, "📞"), title: "Call logged", time: "3h ago" },
+];
+
+function baseProps(overrides: Partial<DetailViewProps> = {}): DetailViewProps {
+  return {
+    item: baseItem,
+    sections: { signalBrief: true, suggestedActions: false, timeline: true },
+    getSignalScore: () => makeSignalScore(),
+    buildSuggestedActions: () => [],
+    buildSourceItems: () => [],
+    getTimelineEvents: () => sampleTimelineEvents,
+    accountContacts: [],
+    emailSignature: "",
+    iconMap: {},
+    ...overrides,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("DetailView attentionCount", () => {
+  it("renders attention pill with count when attentionCount > 0 and timeline collapsed", () => {
+    const props = baseProps({ attentionCount: 3 });
+    const { container } = render(<DetailView {...props} />);
+    const pill = container.querySelector("span.inline-flex");
+    expect(pill).not.toBeNull();
+    expect(pill!.textContent).toContain("3");
+    expect(pill!.textContent).toContain("new");
+    expect(pill!.className).toContain("bg-destructive/10");
+  });
+
+  it("does NOT render pill when attentionCount is 0", () => {
+    const props = baseProps({ attentionCount: 0 });
+    const { container } = render(<DetailView {...props} />);
+    const pill = container.querySelector("span.inline-flex");
+    expect(pill).toBeNull();
+  });
+
+  it("does NOT render pill when attentionCount is undefined", () => {
+    const props = baseProps({ attentionCount: undefined });
+    const { container } = render(<DetailView {...props} />);
+    const pill = container.querySelector("span.inline-flex");
+    expect(pill).toBeNull();
+  });
+
+  it("does NOT render pill when timeline is expanded", () => {
+    const props = baseProps({ attentionCount: 5 });
+    const { container } = render(<DetailView {...props} />);
+
+    // Pill should be visible while collapsed
+    let pill = container.querySelector("span.inline-flex");
+    expect(pill).not.toBeNull();
+    expect(pill!.textContent).toContain("5");
+
+    // Click the timeline header button to expand
+    const timelineButton = container.querySelector("button.group\\/timeline") as HTMLElement;
+    expect(timelineButton).not.toBeNull();
+    fireEvent.click(timelineButton);
+
+    // After expanding, pill should be gone
+    pill = container.querySelector("span.inline-flex");
+    expect(pill).toBeNull();
+  });
+});

package/src/prototype/prototype-inbox-view.tsx

@@ -142,6 +142,8 @@ export interface DetailViewProps {
   approveButtonIconUrl?: string
   opportunityPreview?: OpportunityPreview
   onRequestApproval?: () => Promise<void>
+  /** Number of important/attention-worthy events to highlight on the collapsed timeline header. */
+  attentionCount?: number
 }
 
 export function DetailView({
@@ -172,6 +174,7 @@ export function DetailView({
   approveButtonIconUrl,
   opportunityPreview,
   onRequestApproval,
+  attentionCount,
 }: DetailViewProps) {
   const [evidenceExpanded, setEvidenceExpanded] = React.useState(false)
   const [showTimeline, setShowTimeline] = React.useState(false)
@@ -422,6 +425,11 @@ export function DetailView({
               >
                 <div className="flex items-center gap-2">
                   <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors">Activity timeline</h3>
+                  {!showTimeline && attentionCount != null && attentionCount > 0 && (
+                    <span className="inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20">
+                      {attentionCount} new
+                    </span>
+                  )}
                   {!showTimeline && (lastActivityTime || (timelineEvents.length > 0 && timelineEvents[0].time)) && (
                     <span className="text-[11px] text-muted-foreground/60">
                       &middot; Last activity {lastActivityTime ?? timelineEvents[0]?.time ?? ''}