@handled-ai/design-system 0.18.58 → 0.19.0-rc.1

package/src/components/__tests__/conversation-panel.test.tsx

@@ -0,0 +1,157 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import {
+  ConversationPanel,
+  type ConversationThread,
+  type ConvParticipant,
+} from "../conversation-panel";
+
+const me: ConvParticipant = { name: "Dana Okafor", email: "dana@handled.ai" };
+const priya: ConvParticipant = { name: "Priya Raman", email: "priya@northwind.io" };
+
+function thread(overrides: Partial<ConversationThread> = {}): ConversationThread {
+  return {
+    threadId: "t1",
+    subject: "Want to connect?",
+    status: "responded",
+    lastWhen: "2h ago",
+    contact: priya,
+    messages: [
+      {
+        id: "m1",
+        direction: "outbound",
+        from: me,
+        to: priya,
+        date: "Jun 1",
+        body: "Hi Priya, can we talk?",
+      },
+      {
+        id: "m2",
+        direction: "inbound",
+        from: priya,
+        to: me,
+        date: "Today",
+        bodyHtml: '<p>Sure, see the <a href="https://ex.io/x">doc</a>.</p>',
+      },
+    ],
+    ...overrides,
+  };
+}
+
+describe("ConversationPanel", () => {
+  it("renders nothing with no threads", () => {
+    const { container } = render(<ConversationPanel threads={[]} />);
+    expect(container.querySelector('[data-slot="conversation-panel"]')).toBeNull();
+  });
+
+  it("shows the 'Email response detected' badge when a thread has responded", () => {
+    render(<ConversationPanel threads={[thread()]} me={me} />);
+    expect(screen.getByText("Email response detected")).toBeDefined();
+  });
+
+  it("shows the 'Awaiting response' badge when nothing has responded", () => {
+    render(<ConversationPanel threads={[thread({ status: "awaiting" })]} me={me} />);
+    expect(screen.getByText("Awaiting response")).toBeDefined();
+  });
+
+  it("auto-opens the first responded thread and renders its newest message as HTML", () => {
+    const { container } = render(<ConversationPanel threads={[thread()]} me={me} />);
+    // newest (inbound) message expanded -> its anchor is in the DOM
+    const link = container.querySelector('a[href="https://ex.io/x"]');
+    expect(link).not.toBeNull();
+  });
+
+
+  it("sanitizes HTML message bodies and quoted history before rendering", () => {
+    const unsafe = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          bodyHtml:
+            '<p onclick="alert(1)">Hello <a href="javascript:alert(1)">bad</a><script>alert(1)</script><img src="https://example.com/x.png" onerror="alert(1)"></p>',
+          quoted: {
+            attr: '<span onclick="alert(1)">On Tuesday</span>',
+            html: '<blockquote class="gmail_quote" style="color:red"><a href="data:text/html,boom">quoted</a></blockquote>',
+          },
+        },
+      ],
+    });
+
+    const { container } = render(<ConversationPanel threads={[unsafe]} me={me} />);
+    const message = container.querySelector('[data-slot="conv-message"]')!;
+    expect(message.innerHTML).not.toContain("script");
+    expect(message.innerHTML).not.toContain("onclick");
+    expect(message.innerHTML).not.toContain("onerror");
+    expect(message.innerHTML).not.toContain("javascript:");
+    expect(message.querySelector("img")?.getAttribute("src")).toBe("https://example.com/x.png");
+
+    fireEvent.click(screen.getByTitle("Show quoted text"));
+    const quoted = container.querySelector("blockquote.gmail_quote")!;
+    expect(quoted).not.toBeNull();
+    expect(quoted.outerHTML).not.toContain("style=");
+    expect(quoted.outerHTML).not.toContain("data:text/html");
+  });
+
+  it("keeps the reply composer open and shows an error when async send fails", async () => {
+    const onSendReply = vi.fn().mockRejectedValue(new Error("Gmail send failed"));
+    render(<ConversationPanel threads={[thread({ draft: "Sounds good" })]} me={me} onSendReply={onSendReply} />);
+
+    fireEvent.click(screen.getByText("Reply"));
+    fireEvent.click(screen.getByText("Send"));
+    fireEvent.click(screen.getByText("Send now"));
+
+    await waitFor(() => expect(screen.getByRole("alert").textContent).toContain("Gmail send failed"));
+    expect(screen.getByPlaceholderText("Write your reply…")).toBeDefined();
+    expect(screen.queryByText(/Reply sent/i)).toBeNull();
+  });
+
+  it("shows sent state only after async send succeeds", async () => {
+    const onSendReply = vi.fn().mockResolvedValue(undefined);
+    render(<ConversationPanel threads={[thread({ draft: "Sounds good" })]} me={me} onSendReply={onSendReply} />);
+
+    fireEvent.click(screen.getByText("Reply"));
+    fireEvent.click(screen.getByText("Send"));
+    fireEvent.click(screen.getByText("Send now"));
+
+    await waitFor(() => expect(screen.getByText(/Reply sent/i)).toBeDefined());
+  });
+
+  it("offers a Reply affordance for participant threads", () => {
+    render(<ConversationPanel threads={[thread()]} me={me} />);
+    expect(screen.getByText("Reply")).toBeDefined();
+  });
+
+  it("renders the read-only notice and no Reply when canReply is false", () => {
+    render(
+      <ConversationPanel
+        threads={[thread({ canReply: false, status: "viewing", defaultOpenThreadId: "t1" } as Partial<ConversationThread>)]}
+        me={me}
+        defaultOpenThreadId="t1"
+      />,
+    );
+    expect(screen.getByText(/Viewing only/i)).toBeDefined();
+    expect(screen.queryByText("Reply")).toBeNull();
+  });
+
+  it("shows the paused-playbook banner when a thread is paused", () => {
+    render(
+      <ConversationPanel
+        threads={[thread({ paused: { playbook: "Retention Outreach" } })]}
+        me={me}
+        tenantName="Mercury OS"
+      />,
+    );
+    expect(screen.getByText(/Follow-up actions stopped/i)).toBeDefined();
+  });
+
+  it("opens the reply composer when Reply is clicked", () => {
+    render(<ConversationPanel threads={[thread()]} me={me} />);
+    fireEvent.click(screen.getByText("Reply"));
+    expect(screen.getByPlaceholderText("Write your reply…")).toBeDefined();
+  });
+});

package/src/components/__tests__/owner-chips.test.tsx

@@ -0,0 +1,100 @@
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import {
+  SignalOwnerChip,
+  AccountOwnerChip,
+  OwnerChips,
+  type OwnerPerson,
+} from "../owner-chips";
+
+const dana: OwnerPerson = { id: "u1", name: "Dana Okafor", role: "Senior RM" };
+const marcus: OwnerPerson = { id: "u2", name: "Marcus Lee", role: "Treasury" };
+
+describe("SignalOwnerChip", () => {
+  it("renders data-slot and the 'Signal owner' label", () => {
+    const { container } = render(<SignalOwnerChip owner={null} />);
+    expect(container.querySelector('[data-slot="signal-owner-chip"]')).not.toBeNull();
+    expect(screen.getByText("Signal owner")).toBeDefined();
+  });
+
+  it("shows 'Unassigned' (data-empty) with no owner", () => {
+    const { container } = render(<SignalOwnerChip owner={null} />);
+    const el = container.querySelector('[data-slot="signal-owner-chip"]');
+    expect(el?.getAttribute("data-empty")).toBe("true");
+    expect(screen.getByText("Unassigned")).toBeDefined();
+  });
+
+  it("shows the owner's first name when assigned", () => {
+    render(<SignalOwnerChip owner={dana} />);
+    expect(screen.getByText("Dana")).toBeDefined();
+  });
+
+  it("renders a static span (no button) when read-only / no handlers", () => {
+    const { container } = render(<SignalOwnerChip owner={dana} />);
+    const el = container.querySelector('[data-slot="signal-owner-chip"]');
+    expect(el?.tagName.toLowerCase()).toBe("span");
+  });
+
+  it("renders a button trigger when assignment handlers are provided", () => {
+    const { container } = render(
+      <SignalOwnerChip owner={null} assignableOwners={[dana]} onAssign={() => {}} />,
+    );
+    const el = container.querySelector('[data-slot="signal-owner-chip"]');
+    expect(el?.tagName.toLowerCase()).toBe("button");
+  });
+  // NOTE: the assignment menu opens via Radix (pointer events + a body portal),
+  // which doesn't drive cleanly under happy-dom; the open/select interaction is
+  // covered by Radix's own tests. Here we assert the trigger affordance only.
+});
+
+describe("AccountOwnerChip", () => {
+  it("renders nothing when there are no owners", () => {
+    const { container } = render(<AccountOwnerChip owners={[]} />);
+    expect(container.querySelector('[data-slot="account-owner-chip"]')).toBeNull();
+  });
+
+  it("single owner -> static chip, no dropdown (no data-multi)", () => {
+    const { container } = render(<AccountOwnerChip owners={[dana]} />);
+    const el = container.querySelector('[data-slot="account-owner-chip"]');
+    expect(el).not.toBeNull();
+    expect(el?.getAttribute("data-multi")).toBeNull();
+    expect(el?.tagName.toLowerCase()).toBe("span");
+    expect(screen.getByText("Dana")).toBeDefined();
+  });
+
+  it("single owner with href -> renders an external link", () => {
+    const { container } = render(
+      <AccountOwnerChip owners={[{ ...dana, href: "https://sf.example/u1" }]} />,
+    );
+    const el = container.querySelector('[data-slot="account-owner-chip"]') as HTMLAnchorElement;
+    expect(el.tagName.toLowerCase()).toBe("a");
+    expect(el.getAttribute("href")).toBe("https://sf.example/u1");
+    expect(el.getAttribute("rel")).toContain("noopener");
+  });
+
+  it("multiple owners -> a button with a ×N badge and data-multi", () => {
+    const { container } = render(<AccountOwnerChip owners={[dana, marcus]} />);
+    const el = container.querySelector('[data-slot="account-owner-chip"]');
+    expect(el?.getAttribute("data-multi")).toBe("true");
+    expect(el?.tagName.toLowerCase()).toBe("button");
+    expect(screen.getByText("×2")).toBeDefined();
+  });
+});
+
+
+describe("OwnerChips", () => {
+  it("renders the composite with accountOwners and without the legacy owners prop", () => {
+    const { container } = render(<OwnerChips owner={dana} accountOwners={[marcus]} />);
+    expect(container.querySelector('[data-slot="signal-owner-chip"]')).not.toBeNull();
+    expect(container.querySelector('[data-slot="account-owner-chip"]')).not.toBeNull();
+    expect(screen.getByText("Dana")).toBeDefined();
+    expect(screen.getByText("Marcus")).toBeDefined();
+  });
+
+  it("allows accountOwners to be omitted", () => {
+    const { container } = render(<OwnerChips owner={dana} />);
+    expect(container.querySelector('[data-slot="signal-owner-chip"]')).not.toBeNull();
+    expect(container.querySelector('[data-slot="account-owner-chip"]')).toBeNull();
+  });
+});

package/src/components/__tests__/signal-priority-popover.test.tsx

@@ -119,8 +119,8 @@ describe("SignalPriorityPopover", () => {
 
     // Check head section
     expect(content.textContent).toContain("Why this is high priority")
-    expect(content.textContent).toContain("79")
-    expect(content.textContent).toContain("/100")
+    expect(screen.getByTestId("priority-overall-score").textContent).toContain("79")
+    expect(screen.getByTestId("priority-overall-score").textContent).toContain("/100")
     expect(content.textContent).toContain("High range")
     expect(content.textContent).toContain("60-79")
   })
@@ -188,13 +188,50 @@ describe("SignalPriorityPopover", () => {
     expect(row.textContent).not.toContain("Raises0/100")
   })
 
-  it("renders Contributing factors section label", () => {
+  it("renders Contributing factors section label and shared-consumer-safe default formula label", () => {
     render(<SignalPriorityPopover {...defaultProps} />)
     fireEvent.click(screen.getByTestId("priority-popover-trigger"))
 
     const content = screen.getByTestId("priority-popover-content")
     expect(content.textContent).toContain("Contributing factors")
-    expect(content.textContent).toContain("Score = weighted sum")
+    expect(content.textContent).toContain("Priority factors")
+    expect(content.textContent).not.toContain("Score = weighted sum")
+    expect(content.textContent).not.toContain("Priority = weighted signals + calibration")
+  })
+
+  it("renders a custom formula label when provided", () => {
+    render(
+      <SignalPriorityPopover
+        {...defaultProps}
+        formulaLabel="Priority = weighted signals + calibration"
+      />,
+    )
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).toContain("Priority = weighted signals + calibration")
+  })
+
+
+  it("renders the overall score number by default while preserving factor row scores", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    expect(screen.getByTestId("priority-overall-score").textContent).toBe("79/100")
+    expect(screen.getByTestId("factor-row-test_severity").textContent).toContain("85/100")
+    expect(screen.getByTestId("factor-row-account_depth").textContent).toContain("30/100")
+  })
+
+  it("hides only the overall header score in label display mode", () => {
+    render(<SignalPriorityPopover {...defaultProps} scoreDisplay="label" />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const header = screen.getByTestId("priority-popover-header")
+    expect(screen.queryByTestId("priority-overall-score")).toBeNull()
+    expect(header.textContent).toContain("Why this is high priority")
+    expect(header.textContent).not.toContain("79/100")
+    expect(screen.getByTestId("factor-row-test_severity").textContent).toContain("85/100")
+    expect(screen.getByTestId("factor-row-account_depth").textContent).toContain("30/100")
   })
 
   it("renders score track bars with correct width percentage", () => {

package/src/components/__tests__/timeline-activity.test.tsx

@@ -149,4 +149,59 @@ describe("TimelineActivity", () => {
       expect(TONE_CLASSES[tone].icon).toBeTruthy()
     }
   })
+
+  // --- Email body: opt-in HTML render mode ---
+
+  it("sanitizes formatted HTML when email.bodyHtml is provided", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: {
+        from: "Priya Raman",
+        to: "Dana Okafor",
+        subject: "Re: hi",
+        body: "plain fallback",
+        bodyHtml:
+          '<p onclick="alert(1)">Hello <a href="javascript:alert(1)">bad</a><script>alert(1)</script><img src="https://example.com/pixel.png" onerror="alert(1)"></p>',
+      },
+    })
+    const { container } = render(<TimelineActivity events={[event]} />)
+    const html = container.querySelector('[data-slot="timeline-email-html"]')!
+    expect(html.innerHTML).not.toContain("script")
+    expect(html.innerHTML).not.toContain("onclick")
+    expect(html.innerHTML).not.toContain("onerror")
+    expect(html.innerHTML).not.toContain("javascript:")
+    expect(html.querySelector("img")?.getAttribute("src")).toBe("https://example.com/pixel.png")
+    expect(html.querySelector("a")?.getAttribute("href")).toBeNull()
+  })
+
+  it("renders formatted HTML when email.bodyHtml is provided", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: {
+        from: "Priya Raman",
+        to: "Dana Okafor",
+        subject: "Re: hi",
+        body: "plain fallback",
+        bodyHtml: '<p>Hello <a href="https://example.com">link</a></p>',
+      },
+    })
+    const { container } = render(<TimelineActivity events={[event]} />)
+    const html = container.querySelector('[data-slot="timeline-email-html"]')
+    expect(html).not.toBeNull()
+    // Renders the actual anchor element (not escaped text)
+    expect(html!.querySelector("a")?.getAttribute("href")).toBe("https://example.com")
+  })
+
+  it("falls back to the plain-text body when bodyHtml is absent", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: { from: "Priya", to: "Dana", subject: "Re: hi", body: "just text" },
+    })
+    const { container } = render(<TimelineActivity events={[event]} />)
+    expect(container.querySelector('[data-slot="timeline-email-html"]')).toBeNull()
+    expect(screen.getByText("just text")).toBeDefined()
+  })
 })

package/src/components/__tests__/virtualized-data-table-resize.test.tsx

@@ -84,6 +84,24 @@ describe("VirtualizedDataTable — resize handles render when enabled", () => {
     });
   });
 
+  it("each handle has a wider grab target and visible divider", () => {
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={testColumns}
+        data={testData}
+        height={300}
+        enableColumnResizing
+      />,
+    );
+
+    container.querySelectorAll('[role="separator"]').forEach((sep) => {
+      expect(sep.classList.contains("w-4")).toBe(true);
+      expect(sep.classList.contains("-mr-2")).toBe(true);
+      expect(sep.className).toContain("after:bg-border/70");
+      expect(sep.className).toContain("hover:after:bg-primary/60");
+    });
+  });
+
   it("header cells have 'relative' class when resizing is enabled", () => {
     const { container } = render(
       <VirtualizedDataTable

package/src/components/case-panel-activity-timeline.tsx

@@ -62,6 +62,8 @@ export type CasePanelActivityPayload =
       dueLabel: string
       status?: "upcoming" | "due" | "overdue" | "met"
       description?: string
+      /** 0..1 elapsed toward the deadline; renders a thin progress bar. */
+      progress?: number
     }
   | {
       kind: "operatorNote"
@@ -373,6 +375,24 @@ function renderPayloadContent(
             ) : null}
           </div>
           {payload.description ? <p className="text-xs leading-relaxed text-muted-foreground">{payload.description}</p> : null}
+          {typeof payload.progress === "number" ? (
+            <div
+              data-slot="deadline-progress"
+              role="progressbar"
+              aria-valuenow={Math.round(Math.min(1, Math.max(0, payload.progress)) * 100)}
+              aria-valuemin={0}
+              aria-valuemax={100}
+              className="bg-muted h-1.5 w-full overflow-hidden rounded-full"
+            >
+              <div
+                className={cn(
+                  "h-full rounded-full",
+                  payload.status === "overdue" ? "bg-red-500" : payload.status === "due" ? "bg-amber-500" : "bg-foreground/70"
+                )}
+                style={{ width: `${Math.min(1, Math.max(0, payload.progress)) * 100}%` }}
+              />
+            </div>
+          ) : null}
         </div>
       )
     case "operatorNote":

package/src/components/comment-composer.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+/**
+ * comment-composer.tsx — an internal-note composer for the case activity
+ * timeline. Posting a comment prepends an `operatorNote` event to the log
+ * (wired by the consumer). Collapses to a single line; expands on focus or
+ * when it has text. ⌘↵ / Ctrl↵ posts.
+ *
+ * Presentational: `onPost` does the work (the consumer persists the note and
+ * adds it to the timeline). Reuses Avatar / Button / Textarea primitives.
+ */
+
+import * as React from "react"
+import { Lock } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { getInitials } from "../lib/user-display"
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar"
+import { Button } from "./button"
+import { Textarea } from "./textarea"
+
+export interface CommentComposerProps {
+  /** Called with the trimmed note text when the operator posts. */
+  onPost: (text: string) => void
+  /** Current operator (for the avatar). */
+  author?: { name?: string; email?: string; avatarUrl?: string | null }
+  placeholder?: string
+  /** Hint shown in the footer; defaults to the internal-note reassurance. */
+  hint?: string
+  className?: string
+}
+
+function CommentComposer({
+  onPost,
+  author,
+  placeholder = "Add a comment or internal note…",
+  hint = "Internal note: only your team sees this",
+  className,
+}: CommentComposerProps) {
+  const [text, setText] = React.useState("")
+  const [focused, setFocused] = React.useState(false)
+  const open = focused || text.length > 0
+  const canPost = text.trim().length > 0
+
+  const post = () => {
+    const value = text.trim()
+    if (!value) return
+    onPost(value)
+    setText("")
+    setFocused(false)
+  }
+
+  return (
+    <div
+      data-slot="comment-composer"
+      data-open={open ? "true" : undefined}
+      className={cn(
+        "border-border bg-background flex items-start gap-2 rounded-lg border p-2 transition-colors",
+        open && "ring-ring/30 ring-2",
+        className
+      )}
+    >
+      <Avatar size="sm" className="mt-0.5">
+        {author?.avatarUrl ? <AvatarImage src={author.avatarUrl} alt={author.name ?? "You"} /> : null}
+        <AvatarFallback className="bg-muted text-muted-foreground text-[10px] font-medium uppercase">
+          {getInitials({ name: author?.name, email: author?.email })}
+        </AvatarFallback>
+      </Avatar>
+
+      <div className="min-w-0 flex-1">
+        <Textarea
+          data-slot="comment-composer-input"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onFocus={() => setFocused(true)}
+          placeholder={placeholder}
+          rows={open ? 3 : 1}
+          className={cn(
+            "resize-none border-0 bg-transparent p-1 text-sm shadow-none focus-visible:ring-0",
+            !open && "min-h-0"
+          )}
+          onKeyDown={(e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+              e.preventDefault()
+              post()
+            }
+          }}
+        />
+
+        {open ? (
+          <div className="mt-1 flex items-center justify-between gap-2">
+            <span className="text-muted-foreground inline-flex items-center gap-1 text-[11px]">
+              <Lock size={12} /> {hint}
+            </span>
+            <span className="flex items-center gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setText("")
+                  setFocused(false)
+                }}
+              >
+                Cancel
+              </Button>
+              <Button type="button" size="sm" disabled={!canPost} onClick={post}>
+                Comment
+                <kbd className="bg-primary-foreground/15 ml-1 rounded px-1 text-[10px]">⌘↵</kbd>
+              </Button>
+            </span>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export { CommentComposer }