@handled-ai/design-system 0.18.22 → 0.18.24

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

@@ -0,0 +1,414 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown, ExternalLink } from "lucide-react"
+import { cn } from "../lib/utils"
+import { TONE_CLASSES, type TimelineEventTone } from "./timeline-activity"
+
+export type CasePanelActivityTone = TimelineEventTone
+
+export type CasePanelActivityActor =
+  | { kind: "system" }
+  | { kind: "integration"; name: string; iconUrl?: string }
+  | { kind: "user"; name: string; avatarUrl?: string; verb?: string }
+
+export type CasePanelPayloadAction = {
+  kind: "openSignal"
+  key: string
+  eventId: string
+}
+
+export type CasePanelActivityPayload =
+  | {
+      kind: "signal"
+      key: string
+      summary: string
+      detail?: string
+      actionLabel?: string
+    }
+  | {
+      kind: "scoreUpdate"
+      label?: string
+      previousScore?: number
+      nextScore: number
+      reason?: string
+    }
+  | {
+      kind: "recommendation"
+      recommendation: string
+      rationale?: string
+      actionLabel?: string
+    }
+  | {
+      kind: "email"
+      from: string
+      to?: string
+      subject: string
+      preview?: string
+      body?: string
+    }
+  | {
+      kind: "salesforce"
+      objectLabel: string
+      recordLabel?: string
+      changeSummary: string
+      deepLink?: {
+        href: string
+        label?: string
+      }
+    }
+  | {
+      kind: "deadline"
+      dueLabel: string
+      status?: "upcoming" | "due" | "overdue" | "met"
+      description?: string
+    }
+  | {
+      kind: "operatorNote"
+      note: string
+    }
+  | {
+      kind: "assignment"
+      assignee: string
+      from?: string
+      role?: string
+    }
+  | {
+      kind: "caseOpened"
+      source?: string
+      openedBy?: string
+      description?: string
+    }
+  | {
+      kind: "generic"
+      description: string
+      metadata?: Array<{ label: string; value: string }>
+    }
+
+export interface CasePanelActivityEvent {
+  id: string
+  title: string
+  timeLabel: string
+  tone: CasePanelActivityTone
+  actor?: CasePanelActivityActor
+  isSystemNoise?: boolean
+  payload: CasePanelActivityPayload
+}
+
+export interface CasePanelActivityTimelineProps {
+  events: CasePanelActivityEvent[]
+  className?: string
+  title?: string
+  defaultExpanded?: boolean
+  defaultShowSystemEvents?: boolean
+  onPayloadAction?: (action: CasePanelPayloadAction) => void
+}
+
+const NEUTRAL_DOT_CLASSES = "bg-background border-border/60"
+const NEUTRAL_ICON_CLASSES = "text-muted-foreground"
+
+const PAYLOAD_LABELS: Record<CasePanelActivityPayload["kind"], string> = {
+  signal: "Signal",
+  scoreUpdate: "Score update",
+  recommendation: "Recommendation",
+  email: "Email",
+  salesforce: "Salesforce",
+  deadline: "Deadline",
+  operatorNote: "Operator note",
+  assignment: "Assignment",
+  caseOpened: "Case opened",
+  generic: "Update",
+}
+
+const STATUS_CLASSES: Record<NonNullable<Extract<CasePanelActivityPayload, { kind: "deadline" }>["status"]>, string> = {
+  upcoming: "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-950/30 dark:text-blue-300",
+  due: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300",
+  overdue: "border-red-200 bg-red-50 text-red-700 dark:border-red-900/40 dark:bg-red-950/30 dark:text-red-300",
+  met: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-950/30 dark:text-emerald-300",
+}
+
+export function CasePanelActivityTimeline({
+  events,
+  className,
+  title = "Activity",
+  defaultExpanded = false,
+  defaultShowSystemEvents = false,
+  onPayloadAction,
+}: CasePanelActivityTimelineProps) {
+  const [expanded, setExpanded] = React.useState(defaultExpanded)
+  const [showSystemEvents, setShowSystemEvents] = React.useState(defaultShowSystemEvents)
+
+  const nonSystemEvents = events.filter((event) => !event.isSystemNoise)
+  const visibleEvents = showSystemEvents ? events : nonSystemEvents
+  const systemNoiseCount = events.length - nonSystemEvents.length
+  const lastActivityText = nonSystemEvents[0]?.timeLabel ?? events[0]?.timeLabel ?? "No activity yet"
+
+  return (
+    <section className={cn("rounded-xl border border-border bg-card text-card-foreground shadow-sm", className)}>
+      <button
+        type="button"
+        className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/30"
+        aria-expanded={expanded}
+        onClick={() => setExpanded((current) => !current)}
+      >
+        <span className="min-w-0">
+          <span className="flex items-center gap-2">
+            <span className="text-sm font-semibold text-foreground">{title}</span>
+            <span className="rounded-full border border-border bg-muted/40 px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+              {nonSystemEvents.length} {nonSystemEvents.length === 1 ? "event" : "events"}
+            </span>
+          </span>
+          <span className="mt-1 block truncate text-xs text-muted-foreground">Last activity {lastActivityText}</span>
+        </span>
+        <ChevronDown className={cn("h-4 w-4 shrink-0 text-muted-foreground transition-transform", expanded && "rotate-180")} />
+      </button>
+
+      {expanded ? (
+        <div className="border-t border-border px-4 py-4">
+          {systemNoiseCount > 0 ? (
+            <label className="mb-4 flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
+              <span>Show system events</span>
+              <input
+                type="checkbox"
+                className="h-4 w-4 rounded border-border text-primary accent-current"
+                checked={showSystemEvents}
+                onChange={(event) => setShowSystemEvents(event.target.checked)}
+              />
+            </label>
+          ) : null}
+
+          {visibleEvents.length > 0 ? (
+            <div className="space-y-0">
+              {visibleEvents.map((event, index) => (
+                <CasePanelActivityTimelineItem
+                  key={event.id}
+                  event={event}
+                  isLast={index === visibleEvents.length - 1}
+                  onPayloadAction={onPayloadAction}
+                />
+              ))}
+            </div>
+          ) : (
+            <p className="rounded-lg border border-dashed border-border px-3 py-6 text-center text-sm text-muted-foreground">
+              No activity to show.
+            </p>
+          )}
+        </div>
+      ) : null}
+    </section>
+  )
+}
+
+function CasePanelActivityTimelineItem({
+  event,
+  isLast,
+  onPayloadAction,
+}: {
+  event: CasePanelActivityEvent
+  isLast: boolean
+  onPayloadAction?: (action: CasePanelPayloadAction) => void
+}) {
+  const toneStyle = TONE_CLASSES[event.tone]
+  const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES
+  const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES
+
+  return (
+    <article className="group relative flex gap-3.5" data-testid="case-panel-activity-event">
+      {!isLast ? <div className="absolute bottom-[-6px] left-[9px] top-5 w-px bg-border/60" /> : null}
+      <div className="relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-card">
+        <span
+          aria-hidden="true"
+          className={cn("flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-card", dotClasses, iconClasses)}
+          data-testid="case-panel-activity-dot"
+        >
+          <span className="h-1.5 w-1.5 rounded-full bg-current" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1 pb-5 pt-0.5">
+        <div className="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
+          <h3 className="pr-4 text-[13px] font-medium leading-relaxed text-foreground">{event.title}</h3>
+          <time className="mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70">{event.timeLabel}</time>
+        </div>
+        <ActorByline actor={event.actor} timeLabel={event.timeLabel} />
+        <PayloadCard event={event} onPayloadAction={onPayloadAction} />
+      </div>
+    </article>
+  )
+}
+
+function ActorByline({ actor, timeLabel }: { actor?: CasePanelActivityActor; timeLabel: string }) {
+  if (!actor || actor.kind === "system") return null
+
+  if (actor.kind === "integration") {
+    return (
+      <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground" data-testid="case-panel-activity-byline">
+        {actor.iconUrl ? <img src={actor.iconUrl} alt="" className="h-4 w-4 rounded-sm object-cover" /> : null}
+        <span className="font-medium text-foreground">{actor.name}</span>
+        <span>synced this update</span>
+        <span className="text-muted-foreground/40">&middot;</span>
+        <span>{timeLabel}</span>
+      </div>
+    )
+  }
+
+  const verb = actor.verb ?? "updated this case"
+  const initial = actor.name.charAt(0).toUpperCase()
+
+  return (
+    <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground" data-testid="case-panel-activity-byline">
+      {actor.avatarUrl ? (
+        <img src={actor.avatarUrl} alt={actor.name} className="h-4 w-4 rounded-full object-cover" />
+      ) : (
+        <span className="flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/10 text-[8px] font-semibold text-muted-foreground">
+          {initial}
+        </span>
+      )}
+      <span className="font-medium text-foreground">{actor.name}</span>
+      <span>{verb}</span>
+      <span className="text-muted-foreground/40">&middot;</span>
+      <span>{timeLabel}</span>
+    </div>
+  )
+}
+
+function PayloadCard({
+  event,
+  onPayloadAction,
+}: {
+  event: CasePanelActivityEvent
+  onPayloadAction?: (action: CasePanelPayloadAction) => void
+}) {
+  const payload = event.payload
+
+  return (
+    <div className="mt-2 rounded-lg border border-border/80 bg-muted/20 px-3 py-2.5 text-sm" data-testid={`case-panel-payload-${payload.kind}`}>
+      <div className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+        {PAYLOAD_LABELS[payload.kind]}
+      </div>
+      {renderPayloadContent(payload, event.id, onPayloadAction)}
+    </div>
+  )
+}
+
+function renderPayloadContent(
+  payload: CasePanelActivityPayload,
+  eventId: string,
+  onPayloadAction?: (action: CasePanelPayloadAction) => void
+) {
+  switch (payload.kind) {
+    case "signal":
+      return (
+        <div className="space-y-2">
+          <p className="text-foreground">{payload.summary}</p>
+          {payload.detail ? <p className="text-xs leading-relaxed text-muted-foreground">{payload.detail}</p> : null}
+          {onPayloadAction ? (
+            <button
+              type="button"
+              className="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+              onClick={() => onPayloadAction({ kind: "openSignal", key: payload.key, eventId })}
+            >
+              {payload.actionLabel ?? "Open signal"}
+            </button>
+          ) : null}
+        </div>
+      )
+    case "scoreUpdate":
+      return (
+        <div className="space-y-1">
+          <p className="text-foreground">
+            {payload.label ?? "Score"}: {payload.previousScore !== undefined ? `${payload.previousScore} → ` : ""}{payload.nextScore}
+          </p>
+          {payload.reason ? <p className="text-xs leading-relaxed text-muted-foreground">{payload.reason}</p> : null}
+        </div>
+      )
+    case "recommendation":
+      return (
+        <div className="space-y-1">
+          <p className="font-medium text-foreground">{payload.recommendation}</p>
+          {payload.rationale ? <p className="text-xs leading-relaxed text-muted-foreground">{payload.rationale}</p> : null}
+          {payload.actionLabel ? <p className="text-xs font-medium text-muted-foreground">{payload.actionLabel}</p> : null}
+        </div>
+      )
+    case "email":
+      return (
+        <div className="space-y-1">
+          <p className="font-medium text-foreground">{payload.subject}</p>
+          <p className="text-xs text-muted-foreground">
+            From {payload.from}{payload.to ? ` to ${payload.to}` : ""}
+          </p>
+          {payload.preview ? <p className="text-sm text-foreground/90">{payload.preview}</p> : null}
+          {payload.body ? <p className="whitespace-pre-line text-xs leading-relaxed text-muted-foreground">{payload.body}</p> : null}
+        </div>
+      )
+    case "salesforce":
+      return (
+        <div className="space-y-2">
+          <p className="text-foreground">
+            <span className="font-medium">{payload.objectLabel}</span>
+            {payload.recordLabel ? <span className="text-muted-foreground"> · {payload.recordLabel}</span> : null}
+          </p>
+          <p className="text-xs leading-relaxed text-muted-foreground">{payload.changeSummary}</p>
+          {payload.deepLink ? (
+            <a
+              href={payload.deepLink.href}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {payload.deepLink.label ?? "Open in Salesforce"}
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          ) : null}
+        </div>
+      )
+    case "deadline":
+      return (
+        <div className="space-y-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="font-medium text-foreground">{payload.dueLabel}</span>
+            {payload.status ? (
+              <span className={cn("rounded-full border px-2 py-0.5 text-[11px] font-medium", STATUS_CLASSES[payload.status])}>
+                {payload.status}
+              </span>
+            ) : null}
+          </div>
+          {payload.description ? <p className="text-xs leading-relaxed text-muted-foreground">{payload.description}</p> : null}
+        </div>
+      )
+    case "operatorNote":
+      return <p className="whitespace-pre-line text-sm leading-relaxed text-foreground">{payload.note}</p>
+    case "assignment":
+      return (
+        <p className="text-foreground">
+          Assigned to <span className="font-medium">{payload.assignee}</span>
+          {payload.role ? <span className="text-muted-foreground"> as {payload.role}</span> : null}
+          {payload.from ? <span className="text-muted-foreground"> from {payload.from}</span> : null}
+        </p>
+      )
+    case "caseOpened":
+      return (
+        <div className="space-y-1">
+          <p className="text-foreground">
+            Case opened{payload.openedBy ? ` by ${payload.openedBy}` : ""}{payload.source ? ` from ${payload.source}` : ""}
+          </p>
+          {payload.description ? <p className="text-xs leading-relaxed text-muted-foreground">{payload.description}</p> : null}
+        </div>
+      )
+    case "generic":
+      return (
+        <div className="space-y-2">
+          <p className="text-foreground">{payload.description}</p>
+          {payload.metadata && payload.metadata.length > 0 ? (
+            <dl className="grid gap-1 text-xs text-muted-foreground">
+              {payload.metadata.map((item) => (
+                <div key={`${item.label}-${item.value}`} className="flex gap-2">
+                  <dt className="font-medium text-foreground">{item.label}</dt>
+                  <dd>{item.value}</dd>
+                </div>
+              ))}
+            </dl>
+          ) : null}
+        </div>
+      )
+  }
+}

package/src/components/case-panel-detail.tsx

@@ -0,0 +1,228 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArrowUpRight,
+  Check,
+  Copy,
+  ExternalLink,
+} from "lucide-react"
+import { cn } from "../lib/utils"
+
+export type CasePanelDetailWidth = "comfortable" | "modest" | "full"
+
+export interface CasePanelDetailProps {
+  children: React.ReactNode
+  /** Reading measure for the detail content column. Defaults to the handoff's comfortable 880px measure. */
+  width?: CasePanelDetailWidth
+  /** Accessible label for the detail region. */
+  "aria-label"?: string
+  className?: string
+}
+
+const detailWidthClasses: Record<CasePanelDetailWidth, string> = {
+  comfortable: "mx-auto w-full max-w-[880px] px-10 pb-[120px] pt-8",
+  modest: "mx-auto w-full max-w-[720px] px-8 pb-[112px] pt-7",
+  full: "w-full px-8 pb-[120px] pt-8",
+}
+
+export function CasePanelDetail({
+  children,
+  width = "comfortable",
+  "aria-label": ariaLabel = "Case detail",
+  className,
+}: CasePanelDetailProps) {
+  return (
+    <section aria-label={ariaLabel} className={cn("min-w-0 bg-background", className)}>
+      <div className={detailWidthClasses[width]}>{children}</div>
+    </section>
+  )
+}
+
+export interface CasePanelHeaderProps {
+  title: React.ReactNode
+  /** Optional action, usually a Quick action trigger. */
+  action?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+}
+
+export function CasePanelHeader({
+  title,
+  action,
+  children,
+  className,
+}: CasePanelHeaderProps) {
+  return (
+    <header className={cn("mb-7", className)}>
+      <div className="flex items-start justify-between gap-5">
+        <div className="min-w-0 flex-1">
+          <h1 className="m-0 text-[27px] font-bold leading-[1.18] tracking-[-0.02em] text-foreground [text-wrap:balance]">
+            {title}
+          </h1>
+          {children}
+        </div>
+        {action ? <div className="flex shrink-0 items-center gap-2">{action}</div> : null}
+      </div>
+    </header>
+  )
+}
+
+export interface CasePanelIdentityLink {
+  id: string
+  label: string
+  href?: string
+  icon?: React.ReactNode
+  kind?: "icon" | "text"
+  disabled?: boolean
+}
+
+export interface CasePanelIdentitySublineProps {
+  callsign: string
+  links?: CasePanelIdentityLink[]
+  onCopyCallsign?: (callsign: string) => void
+  copyLabel?: string
+  copiedLabel?: string
+  className?: string
+}
+
+export function CasePanelIdentitySubline({
+  callsign,
+  links = [],
+  onCopyCallsign,
+  copyLabel = "Copy call sign",
+  copiedLabel = "Call sign copied",
+  className,
+}: CasePanelIdentitySublineProps) {
+  const [copied, setCopied] = React.useState(false)
+  const normalizedCallsign = callsign.startsWith("@") ? callsign : `@${callsign}`
+
+  const handleCopy = React.useCallback(() => {
+    onCopyCallsign?.(normalizedCallsign)
+    setCopied(true)
+    window.setTimeout(() => setCopied(false), 1400)
+  }, [normalizedCallsign, onCopyCallsign])
+
+  return (
+    <div className={cn("mt-[9px] inline-flex flex-wrap items-center gap-[7px] text-[13px] text-muted-foreground", className)}>
+      <span className="font-mono font-medium tracking-[0.01em] text-gray-700">{normalizedCallsign}</span>
+      <button
+        type="button"
+        onClick={handleCopy}
+        aria-label={copied ? copiedLabel : copyLabel}
+        className="inline-flex h-[22px] w-[22px] items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-accent hover:text-foreground"
+      >
+        {copied ? <Check className="h-[13px] w-[13px] text-emerald-700" aria-hidden="true" /> : <Copy className="h-[13px] w-[13px]" aria-hidden="true" />}
+      </button>
+      {links.length > 0 ? (
+        <>
+          <span aria-hidden="true" className="mx-[3px] h-3.5 w-px bg-gray-200" />
+          <span className="inline-flex items-center gap-1.5">
+            {links.map((link) => (
+              <CasePanelIdentityLinkButton key={link.id} link={link} />
+            ))}
+          </span>
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+function CasePanelIdentityLinkButton({ link }: { link: CasePanelIdentityLink }) {
+  const disabled = link.disabled || !link.href
+  const iconOnly = link.kind === "icon"
+  const content = iconOnly ? (
+    <>{link.icon ?? <ExternalLink className="h-[13px] w-[13px]" aria-hidden="true" />}</>
+  ) : (
+    <>
+      {link.icon ? <span className="inline-flex h-3.5 w-3.5 items-center justify-center">{link.icon}</span> : null}
+      <span>{link.label}</span>
+      <ArrowUpRight className="h-[11px] w-[11px] text-gray-400" aria-hidden="true" />
+    </>
+  )
+
+  const className = iconOnly
+    ? "inline-flex h-[26px] w-[26px] items-center justify-center rounded-[7px] border border-border bg-background text-foreground shadow-[0_1px_1.5px_rgba(0,0,0,0.03)] transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-45"
+    : "inline-flex h-[26px] items-center gap-1.5 rounded-[7px] border border-border bg-background px-2 text-xs font-medium text-foreground shadow-[0_1px_1.5px_rgba(0,0,0,0.03)] transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-45"
+
+  if (disabled) {
+    return (
+      <button type="button" disabled aria-label={link.label} className={className}>
+        {content}
+      </button>
+    )
+  }
+
+  return (
+    <a href={link.href} aria-label={link.label} className={className}>
+      {content}
+    </a>
+  )
+}
+
+export interface CasePanelSignalBriefProps {
+  children: React.ReactNode
+  label?: string
+  className?: string
+}
+
+export function CasePanelSignalBrief({
+  children,
+  label = "Signal brief",
+  className,
+}: CasePanelSignalBriefProps) {
+  return (
+    <section className={cn("mt-7", className)} aria-labelledby="case-panel-signal-brief-heading">
+      <div id="case-panel-signal-brief-heading" className="mb-2.5 text-[11px] font-semibold uppercase tracking-[0.07em] text-muted-foreground">
+        {label}
+      </div>
+      <div className="text-base leading-[1.6] text-foreground [text-wrap:pretty]">{children}</div>
+    </section>
+  )
+}
+
+export interface CasePanelMetadataRowProps {
+  children: React.ReactNode
+  label?: string
+  className?: string
+}
+
+export function CasePanelMetadataRow({
+  children,
+  label = "Case metadata",
+  className,
+}: CasePanelMetadataRowProps) {
+  return (
+    <div aria-label={label} className={cn("mt-[18px] flex flex-wrap items-center gap-2", className)}>
+      {children}
+    </div>
+  )
+}
+
+export interface CasePanelDetailSlotsProps {
+  why?: React.ReactNode
+  actions?: React.ReactNode
+  opportunity?: React.ReactNode
+  timeline?: React.ReactNode
+  playPanel?: React.ReactNode
+  className?: string
+}
+
+export function CasePanelDetailSlots({
+  why,
+  actions,
+  opportunity,
+  timeline,
+  playPanel,
+  className,
+}: CasePanelDetailSlotsProps) {
+  return (
+    <div className={cn("mt-7 space-y-6", className)}>
+      {why ? <div data-slot="why">{why}</div> : null}
+      {actions ? <div data-slot="actions">{actions}</div> : null}
+      {opportunity ? <div data-slot="opportunity">{opportunity}</div> : null}
+      {timeline ? <div data-slot="timeline">{timeline}</div> : null}
+      {playPanel ? <div data-slot="play-panel">{playPanel}</div> : null}
+    </div>
+  )
+}