@handled-ai/design-system 0.19.1 → 0.20.0

package/src/components/conversation-panel.tsx

@@ -28,6 +28,7 @@ import {
   CornerUpLeft,
   CheckCheck,
   MailOpen,
+  FilePenLine,
   Reply,
   ReplyAll,
   Eye,
@@ -75,7 +76,7 @@ export interface ConvMessage {
   date: string
   /** Relative label, e.g. "2 days ago". */
   ago?: string
-  receipt?: { kind: "new" | "read" | "opened" | "sent"; label: string }
+  receipt?: { kind: "new" | "read" | "opened" | "sent" | "draft"; label: string }
   /** HTML body (preferred). Sanitized by the component before rendering. */
   bodyHtml?: string
   /** Plain-text fallback when `bodyHtml` is absent. */
@@ -84,7 +85,7 @@ export interface ConvMessage {
   quoted?: { attr: string; html: string }
 }
 
-export type ConvStatus = "responded" | "awaiting" | "viewing"
+export type ConvStatus = "responded" | "awaiting" | "viewing" | "draft"
 
 export interface ConversationThread {
   threadId: string
@@ -181,12 +182,14 @@ function firstName(name: string): string {
 
 const STATUS_PILL: Record<ConvStatus, { label: string; cls: string }> = {
   responded: { label: "New reply", cls: "bg-status-active-bg text-status-active-fg border-status-active-border" },
+  draft: { label: "Draft", cls: "bg-status-pending-bg text-status-pending-fg border-status-pending-border" },
   awaiting: { label: "Awaiting", cls: "bg-status-pending-bg text-status-pending-fg border-status-pending-border" },
   viewing: { label: "Viewing", cls: "bg-muted text-muted-foreground border-border" },
 }
 
 const STATUS_DOT: Record<ConvStatus, string> = {
   responded: "bg-status-active-fg",
+  draft: "bg-status-pending-fg",
   awaiting: "bg-status-pending-fg",
   viewing: "bg-muted-foreground/50",
 }
@@ -257,6 +260,8 @@ function MessageView({
                 <CornerUpLeft size={11} />
               ) : message.receipt.kind === "read" ? (
                 <CheckCheck size={11} />
+              ) : message.receipt.kind === "draft" ? (
+                <FilePenLine size={11} />
               ) : (
                 <MailOpen size={11} />
               )}
@@ -696,32 +701,37 @@ function ConversationPanel({
   className,
 }: ConversationPanelProps) {
   const responded = threads.filter((t) => t.status === "responded" && t.canReply !== false).length
+  const draft = threads.filter((t) => effectiveStatus(t) === "draft").length
   const awaiting = threads.filter((t) => effectiveStatus(t) === "awaiting").length
   const anyPaused = threads.some((t) => t.paused)
 
   const [hubOpen, setHubOpen] = React.useState(true)
   const [openId, setOpenId] = React.useState<string | null>(() => {
     if (defaultOpenThreadId) return defaultOpenThreadId
-    const firstResponded = threads.find((t) => t.status === "responded" && t.canReply !== false)
-    return firstResponded ? firstResponded.threadId : null
+    const firstActionable = threads.find((t) => ["responded", "draft"].includes(t.status) && t.canReply !== false)
+    return firstActionable ? firstActionable.threadId : null
   })
 
   if (!threads.length) return null
 
-  // Header badge state: a responded reply leads; else an awaiting state; else neutral.
+  // Header badge state: a responded reply leads, then drafts to finish, then sent mail awaiting a reply.
   const badge =
     responded > 0
       ? { label: "Email response detected", dot: "bg-status-active-fg", ring: "bg-status-active-fg/30" }
-      : awaiting > 0
-        ? { label: "Awaiting response", dot: "bg-status-pending-fg", ring: "bg-status-pending-fg/30" }
-        : { label: "Conversations", dot: "bg-muted-foreground/50", ring: "bg-muted-foreground/20" }
+      : draft > 0
+        ? { label: "Draft ready", dot: "bg-status-pending-fg", ring: "bg-status-pending-fg/30" }
+        : awaiting > 0
+          ? { label: "Awaiting response", dot: "bg-status-pending-fg", ring: "bg-status-pending-fg/30" }
+          : { label: "Conversations", dot: "bg-muted-foreground/50", ring: "bg-muted-foreground/20" }
 
   const headTitle =
     responded > 0
       ? `${responded} ${responded === 1 ? "reply needs" : "replies need"} your response`
-      : awaiting > 0
-        ? `Awaiting response on ${awaiting} ${awaiting === 1 ? "thread" : "threads"}`
-        : `${threads.length} email ${threads.length === 1 ? "thread" : "threads"}`
+      : draft > 0
+        ? `Draft ready on ${draft} ${draft === 1 ? "thread" : "threads"}`
+        : awaiting > 0
+          ? `Awaiting response on ${awaiting} ${awaiting === 1 ? "thread" : "threads"}`
+          : `${threads.length} email ${threads.length === 1 ? "thread" : "threads"}`
 
   return (
     <section
@@ -741,7 +751,7 @@ function ConversationPanel({
             "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-semibold",
             responded > 0
               ? "bg-status-active-bg text-status-active-fg"
-              : awaiting > 0
+              : draft > 0 || awaiting > 0
                 ? "bg-status-pending-bg text-status-pending-fg"
                 : "bg-muted text-muted-foreground"
           )}

package/src/prototype/__tests__/detail-view-metadata-layout.test.tsx

@@ -0,0 +1,97 @@
+import { cleanup, render, screen } from "@testing-library/react"
+import { afterEach, describe, expect, it } from "vitest"
+
+import { DetailView } from "../prototype-inbox-view"
+import type { DetailViewProps } from "../prototype-inbox-view"
+import type { SignalScoreData } from "../prototype-config"
+
+const baseItem = {
+  id: "case-1",
+  title: "Churn risk case title",
+  details: "Case details",
+  statusColor: "red",
+  time: "1h ago",
+  company: "Acme Corp",
+  tag1: "Signal",
+}
+
+afterEach(() => {
+  cleanup()
+})
+
+function renderDetailView(
+  overrides: Partial<DetailViewProps> = {},
+  scoreOverrides: Partial<SignalScoreData> = {},
+) {
+  const props: DetailViewProps = {
+    item: baseItem,
+    sections: { signalBrief: true, suggestedActions: false, timeline: false },
+    getSignalScore: () => ({
+      score: 72,
+      factors: [],
+      whyNow: "Why now",
+      evidence: [],
+      confidence: 80,
+      urgencyLabel: "High",
+      urgencyExplanation: "High priority",
+      signalBrief: "BRIEF BODY TEXT",
+      timeChipLabel: "3 days left",
+      ...scoreOverrides,
+    }),
+    buildSuggestedActions: () => [],
+    buildSourceItems: () => [],
+    accountContacts: [],
+    emailSignature: "",
+    iconMap: {},
+    renderMetadataExtra: () => <span data-testid="metadata-extra">Owner: Lee</span>,
+    ...overrides,
+  }
+
+  return render(<DetailView {...props} />)
+}
+
+const PRECEDES = Node.DOCUMENT_POSITION_PRECEDING
+const FOLLOWS = Node.DOCUMENT_POSITION_FOLLOWING
+
+describe("DetailView metadataLayout", () => {
+  it("renders the metadata chips above the brief by default", () => {
+    renderDetailView()
+
+    const brief = screen.getByText("BRIEF BODY TEXT")
+    const meta = screen.getByTestId("metadata-extra")
+    // metadata-extra comes before the brief body in document order
+    expect(brief.compareDocumentPosition(meta) & PRECEDES).toBeTruthy()
+    expect(screen.getByTestId("priority-popover-trigger")).toBeTruthy()
+  })
+
+  it("relocates the metadata chips below the brief when metadataLayout='below-brief'", () => {
+    renderDetailView({ metadataLayout: "below-brief" })
+
+    const brief = screen.getByText("BRIEF BODY TEXT")
+    const meta = screen.getByTestId("metadata-extra")
+    // metadata-extra now follows the brief body
+    expect(brief.compareDocumentPosition(meta) & FOLLOWS).toBeTruthy()
+    // chips themselves (priority + account + deadline) render exactly once
+    expect(screen.getAllByTestId("priority-popover-trigger")).toHaveLength(1)
+    expect(screen.getByText("3 days left")).toBeTruthy()
+  })
+})
+
+describe("DetailView deadline chip tone", () => {
+  it("applies the red tone when timeChipTone='red'", () => {
+    renderDetailView({}, { timeChipTone: "red" })
+    expect(screen.getByText("3 days left").className).toContain("text-red-700")
+  })
+
+  it("applies the amber tone when timeChipTone='amber'", () => {
+    renderDetailView({}, { timeChipTone: "amber" })
+    expect(screen.getByText("3 days left").className).toContain("text-amber-700")
+  })
+
+  it("uses a neutral tone when timeChipTone is omitted", () => {
+    renderDetailView()
+    const chip = screen.getByText("3 days left")
+    expect(chip.className).not.toContain("text-red-700")
+    expect(chip.className).not.toContain("text-amber-700")
+  })
+})

package/src/prototype/prototype-config.ts

@@ -142,6 +142,11 @@ export interface SignalScoreData {
   timeChipLabel?: string
   /** Expanded detail for time chip popover (e.g., "Day 2 of 14 · Event detected on May 1"). */
   timeChipDetail?: string
+  /**
+   * Visual urgency tone for the deadline chip. The consumer computes this from the live deadline
+   * (e.g. amber when a few days remain, red when due/overdue). Defaults to neutral when omitted.
+   */
+  timeChipTone?: "neutral" | "amber" | "red"
 }
 
 // ---------------------------------------------------------------------------

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

@@ -169,6 +169,13 @@ export interface DetailViewProps {
   renderTitleSubtext?: (item: QueueItem) => React.ReactNode
   /** Render extra metadata chips (e.g. assignee) inside the chips row below the title. */
   renderMetadataExtra?: (item: QueueItem) => React.ReactNode
+  /**
+   * Where the metadata chips row (priority · deadline · account · renderMetadataExtra) sits.
+   * - "default": above the signal brief (legacy layout, unchanged for existing consumers).
+   * - "below-brief": moved beneath the brief text, just before `renderBeforeScore`
+   *   (case-panel redesign — chips + owners read as one block under the brief).
+   */
+  metadataLayout?: "default" | "below-brief"
   /** Override the built-in account details metadata button label. */
   accountDetailsButtonLabel?: (item: QueueItem) => React.ReactNode
   /** Accessible label for the built-in account details metadata button. */
@@ -352,6 +359,7 @@ export function DetailView({
   renderTitleActionRow,
   renderTitleSubtext,
   renderMetadataExtra,
+  metadataLayout = "default",
   accountDetailsButtonLabel,
   getAccountDetailsButtonAriaLabel,
   onOpenSignalBucket,
@@ -465,6 +473,84 @@ export function DetailView({
     [suggestedActions],
   )
 
+  // Deadline chip tone (case-panel redesign): amber as the deadline nears, red when due/overdue.
+  const timeChipToneClass =
+    signalData.timeChipTone === "red"
+      ? "border-red-300 bg-red-50 text-red-700 hover:bg-red-50"
+      : signalData.timeChipTone === "amber"
+        ? "border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-50"
+        : "hover:bg-muted/50"
+
+  // The metadata chips row (priority · deadline · account · renderMetadataExtra). Rendered above
+  // the brief by default, or beneath it when `metadataLayout === "below-brief"` (case-panel redesign).
+  const metadataChips = (
+    <>
+      <SignalPriorityPopover
+        score={signalData.score}
+        urgencyLabel={signalData.urgencyLabel}
+        urgencyExplanation={signalData.urgencyExplanation ?? signalData.signalBrief}
+        scoreDisplay={signalData.priorityScoreDisplay}
+        formulaLabel={signalData.priorityFormulaLabel}
+        factors={signalData.priorityFactors ?? []}
+        metaText={undefined}
+        feedbackChips={signalData.priorityFeedbackChips}
+        onFeedbackSubmit={signalData.onPriorityFeedback}
+        initialFactorFeedback={signalData.initialFactorPopoverFeedback}
+        onFactorFeedback={signalData.onFactorFeedback}
+        initialPriorityFeedback={signalData.initialPriorityFeedback}
+      />
+      {signalData.timeChipLabel && (
+        <Badge
+          variant="outline"
+          title={signalData.timeChipDetail ?? undefined}
+          className={`transition-colors ${timeChipToneClass}`}
+        >
+          {signalData.timeChipLabel}
+        </Badge>
+      )}
+      <TooltipProvider delayDuration={300}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={onOpenEntityPanel}
+              className="group/account ml-1 inline-flex max-w-full items-center gap-2 rounded-md border border-border/60 bg-background px-2 py-1 transition-colors hover:border-border hover:bg-muted/50"
+              aria-label={getAccountDetailsButtonAriaLabel?.(item) ?? `View account details for ${item.company}`}
+            >
+              <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-foreground text-[9px] font-semibold uppercase leading-none text-background">
+                {getCompanyInitials(item.company)}
+              </span>
+              {accountDetailsButtonLabel ? (
+                <span className="inline-flex min-w-0 items-center gap-1.5 text-xs font-medium text-foreground">
+                  {accountDetailsButtonLabel(item)}
+                </span>
+              ) : (
+                <span className="truncate text-xs font-medium text-foreground">{item.company}</span>
+              )}
+              <span className="flex shrink-0 items-center gap-1.5">
+                <span
+                  aria-hidden
+                  className={`h-1.5 w-1.5 shrink-0 rounded-full ${STATUS_DOT_CLASS[item.statusColor] ?? "bg-muted-foreground/40"}`}
+                />
+                {/* "View account" expands in on hover via an animated grid column */}
+                <span className="-ml-1.5 grid grid-cols-[0fr] transition-all duration-200 ease-out group-hover/account:ml-0 group-hover/account:grid-cols-[1fr]">
+                  <span className="overflow-hidden">
+                    <span className="block whitespace-nowrap text-xs font-medium text-muted-foreground/80">
+                      View account
+                    </span>
+                  </span>
+                </span>
+                <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/50 transition-transform duration-150 group-hover/account:translate-x-0.5 group-hover/account:text-muted-foreground" />
+              </span>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>Open account panel</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      {renderMetadataExtra?.(item)}
+    </>
+  )
+
   return (
     <SignalApproval.Root
       key={item.id}
@@ -506,71 +592,9 @@ export function DetailView({
             ) : null}
           </div>
 
-          <div className="mb-6 flex flex-wrap items-center gap-2">
-            <SignalPriorityPopover
-              score={signalData.score}
-              urgencyLabel={signalData.urgencyLabel}
-              urgencyExplanation={signalData.urgencyExplanation ?? signalData.signalBrief}
-              scoreDisplay={signalData.priorityScoreDisplay}
-              formulaLabel={signalData.priorityFormulaLabel}
-              factors={signalData.priorityFactors ?? []}
-              metaText={undefined}
-              feedbackChips={signalData.priorityFeedbackChips}
-              onFeedbackSubmit={signalData.onPriorityFeedback}
-              initialFactorFeedback={signalData.initialFactorPopoverFeedback}
-              onFactorFeedback={signalData.onFactorFeedback}
-              initialPriorityFeedback={signalData.initialPriorityFeedback}
-            />
-            {signalData.timeChipLabel && (
-              <Badge
-                variant="outline"
-                title={signalData.timeChipDetail ?? undefined}
-                className="transition-colors hover:bg-muted/50"
-              >
-                {signalData.timeChipLabel}
-              </Badge>
-            )}
-            <TooltipProvider delayDuration={300}>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={onOpenEntityPanel}
-                    className="group/account ml-1 inline-flex max-w-full items-center gap-2 rounded-md border border-border/60 bg-background px-2 py-1 transition-colors hover:border-border hover:bg-muted/50"
-                    aria-label={getAccountDetailsButtonAriaLabel?.(item) ?? `View account details for ${item.company}`}
-                  >
-                    <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-foreground text-[9px] font-semibold uppercase leading-none text-background">
-                      {getCompanyInitials(item.company)}
-                    </span>
-                    {accountDetailsButtonLabel ? (
-                      <span className="inline-flex min-w-0 items-center gap-1.5 text-xs font-medium text-foreground">
-                        {accountDetailsButtonLabel(item)}
-                      </span>
-                    ) : (
-                      <span className="truncate text-xs font-medium text-foreground">{item.company}</span>
-                    )}
-                    <span className="flex shrink-0 items-center gap-1.5">
-                      <span
-                        aria-hidden
-                        className={`h-1.5 w-1.5 shrink-0 rounded-full ${STATUS_DOT_CLASS[item.statusColor] ?? "bg-muted-foreground/40"}`}
-                      />
-                      {/* "View account" expands in on hover via an animated grid column */}
-                      <span className="-ml-1.5 grid grid-cols-[0fr] transition-all duration-200 ease-out group-hover/account:ml-0 group-hover/account:grid-cols-[1fr]">
-                        <span className="overflow-hidden">
-                          <span className="block whitespace-nowrap text-xs font-medium text-muted-foreground/80">
-                            View account
-                          </span>
-                        </span>
-                      </span>
-                      <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/50 transition-transform duration-150 group-hover/account:translate-x-0.5 group-hover/account:text-muted-foreground" />
-                    </span>
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>Open account panel</TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-            {renderMetadataExtra?.(item)}
-          </div>
+          {metadataLayout === "default" ? (
+            <div className="mb-6 flex flex-wrap items-center gap-2">{metadataChips}</div>
+          ) : null}
 
           {/* Signal Brief */}
           {sections.signalBrief && (() => {
@@ -612,6 +636,11 @@ export function DetailView({
                   </p>
                 )}
 
+                {/* Metadata chips relocated beneath the brief (case-panel redesign). */}
+                {metadataLayout === "below-brief" ? (
+                  <div className="mb-4 flex flex-wrap items-center gap-2">{metadataChips}</div>
+                ) : null}
+
                 {/* Before-score content slot (e.g. "Signals on Case" chips) */}
                 {renderBeforeScore?.(item)}