@handled-ai/design-system 0.20.9 → 0.20.10

package/src/components/comment-composer.tsx

@@ -55,29 +55,34 @@ function CommentComposer({
       data-slot="comment-composer"
       data-open={open ? "true" : undefined}
       className={cn(
-        "border-border bg-background flex items-start gap-2 rounded-lg border px-2 py-1.5 transition-colors",
-        open && "ring-ring/30 ring-2",
+        "flex items-start gap-4 rounded-xl transition-colors",
         className
       )}
     >
-      <Avatar size="sm" className="mt-px">
+      <Avatar size="sm" className="mt-1">
         {author?.avatarUrl ? <AvatarImage src={author.avatarUrl} alt={author.name ?? "You"} /> : null}
-        <AvatarFallback className="bg-muted text-muted-foreground text-[10px] font-medium uppercase">
+        <AvatarFallback className="bg-slate-700 text-[10px] font-semibold uppercase text-white dark:bg-slate-200 dark:text-slate-900">
           {getInitials({ name: author?.name, email: author?.email })}
         </AvatarFallback>
       </Avatar>
 
-      <div className="min-w-0 flex-1">
+      <div
+        data-slot="comment-composer-shell"
+        className={cn(
+          "min-w-0 flex-1 rounded-xl border border-border bg-background transition-[box-shadow,border-color]",
+          open ? "overflow-hidden shadow-sm" : "shadow-none"
+        )}
+      >
         <Textarea
           data-slot="comment-composer-input"
           value={text}
           onChange={(e) => setText(e.target.value)}
           onFocus={() => setFocused(true)}
           placeholder={placeholder}
-          rows={open ? 3 : 1}
+          rows={open ? 4 : 1}
           className={cn(
-            "resize-none border-0 bg-transparent px-1 py-0.5 text-sm leading-snug shadow-none focus-visible:ring-0",
-            !open && "min-h-0"
+            "resize-none rounded-none border-0 bg-transparent px-5 py-4 text-[15px] leading-6 shadow-none outline-none placeholder:text-muted-foreground/60 focus-visible:ring-0 focus-visible:ring-offset-0",
+            open ? "min-h-32" : "min-h-14"
           )}
           onKeyDown={(e) => {
             if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
@@ -88,15 +93,16 @@ function CommentComposer({
         />
 
         {open ? (
-          <div className="mt-0.5 flex items-center justify-between gap-2">
-            <span className="text-muted-foreground inline-flex items-center gap-1 text-[11px]">
-              <Lock size={12} /> {hint}
+          <div className="flex items-center justify-between gap-3 border-t border-border bg-muted/10 px-5 py-4">
+            <span className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+              <Lock size={16} strokeWidth={1.75} /> {hint}
             </span>
-            <span className="flex items-center gap-2">
+            <span className="flex items-center gap-3">
               <Button
                 type="button"
                 variant="ghost"
                 size="sm"
+                className="px-2 text-sm font-medium text-muted-foreground hover:bg-transparent hover:text-foreground"
                 onClick={() => {
                   setText("")
                   setFocused(false)
@@ -104,9 +110,15 @@ function CommentComposer({
               >
                 Cancel
               </Button>
-              <Button type="button" size="sm" disabled={!canPost} onClick={post}>
+              <Button
+                type="button"
+                size="sm"
+                disabled={!canPost}
+                onClick={post}
+                className="rounded-lg bg-foreground px-4 text-sm font-semibold text-background shadow-none hover:bg-foreground/90"
+              >
                 Comment
-                <kbd className="bg-primary-foreground/15 ml-1 rounded px-1 text-[10px]">⌘↵</kbd>
+                <kbd className="ml-1 rounded px-1 text-[10px] text-background/70">⌘↵</kbd>
               </Button>
             </span>
           </div>

package/src/components/conversation-panel.tsx

@@ -298,34 +298,19 @@ function PersonAvatar({ person, size = "sm" }: { person: ConvParticipant; size?:
 }
 
 const STATUS_PILL: Record<ConvStatus, { label: string; cls: string }> = {
-  responded: { label: "NEW REPLY", cls: "bg-status-warning-bg text-status-warning-fg border-status-warning-border" },
+  responded: { label: "New reply", cls: "bg-status-active-bg text-status-active-fg border-status-active-border" },
   draft: { label: "Draft", cls: "bg-background text-foreground/80 border-border" },
-  awaiting: { label: "SENT", cls: "bg-status-info-bg text-status-info-fg border-status-info-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-warning-fg",
+  responded: "bg-status-active-fg",
   draft: "bg-status-pending-fg",
-  awaiting: "bg-status-info-fg",
+  awaiting: "bg-status-pending-fg",
   viewing: "bg-muted-foreground/50",
 }
 
-const THREAD_ROW_ACCENT: Record<ConvStatus, string> = {
-  responded: "border-l-4 border-l-status-warning-border bg-status-warning-bg/25",
-  awaiting: "border-l-4 border-l-status-info-border bg-status-info-bg/25",
-  draft: "border-l-4 border-l-status-pending-border bg-status-pending-bg/20",
-  viewing: "",
-}
-
-const RECEIPT_CHIP: Record<NonNullable<ConvMessage["receipt"]>["kind"], string> = {
-  new: "border-status-warning-border bg-status-warning-bg text-status-warning-fg",
-  read: "border-status-info-border bg-status-info-bg text-status-info-fg",
-  opened: "border-status-info-border bg-status-info-bg text-status-info-fg",
-  sent: "border-status-info-border bg-status-info-bg text-status-info-fg",
-  draft: "border-status-pending-border bg-status-pending-bg text-status-pending-fg",
-}
-
 function effectiveStatus(t: ConversationThread): ConvStatus {
   return t.canReply === false ? "viewing" : t.status
 }
@@ -447,10 +432,10 @@ function MessageView({
         </span>
         <span className="flex shrink-0 items-center gap-2">
           {message.receipt ? (
-            <span className={cn("inline-flex items-center gap-1 rounded-md border px-1.5 py-px text-[10px] font-semibold leading-4", RECEIPT_CHIP[message.receipt.kind])}>
+            <span className="text-muted-foreground inline-flex items-center gap-1 text-[11px]">
               {message.receipt.kind === "new" ? (
                 <CornerUpLeft size={11} />
-              ) : message.receipt.kind === "read" || message.receipt.kind === "sent" ? (
+              ) : message.receipt.kind === "read" ? (
                 <CheckCheck size={11} />
               ) : message.receipt.kind === "draft" ? (
                 <FilePenLine size={11} />
@@ -826,10 +811,10 @@ function ThreadBody({
   return (
     <div data-slot="conv-thread-body" className="space-y-2">
       {canReply && thread.paused ? (
-        <div className="border-status-warning-border bg-status-warning-bg text-status-warning-fg flex items-start gap-2 rounded-md border border-l-4 p-2.5 text-[12px]">
+        <div className="border-status-pending-border bg-status-pending-bg text-status-pending-fg flex items-start gap-2 rounded-md border p-2.5 text-[12px]">
           <Pause size={13} className="mt-0.5 shrink-0" />
           <span>
-            <b>Playbook stopped.</b> Follow-up actions for {thread.paused.playbook} won’t send
+            <b>Follow-up actions stopped.</b> Your {thread.paused.playbook} next steps won’t send
             automatically while this conversation is live. Continue it in {tenantName ?? "the app"} or Gmail.
           </span>
         </div>
@@ -945,12 +930,7 @@ function ThreadRow({
   const pill = STATUS_PILL[status]
 
   return (
-    <div
-      data-slot="conv-thread"
-      data-status={status}
-      data-open={open ? "true" : undefined}
-      className={cn("border-border border-b last:border-b-0", THREAD_ROW_ACCENT[status])}
-    >
+    <div data-slot="conv-thread" data-open={open ? "true" : undefined} className="border-border border-b last:border-b-0">
       <button
         type="button"
         onClick={onToggleOpen}
@@ -1011,13 +991,11 @@ function ConversationPanel({
   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 hubGmailThread = threads.find((t) => canOpenInGmail(t, onOpenInGmail))
-  const firstAwaiting = threads.find((t) => effectiveStatus(t) === "awaiting")
 
   const [hubOpen, setHubOpen] = React.useState(true)
   const [openId, setOpenId] = React.useState<string | null>(() => {
     if (defaultOpenThreadId) return defaultOpenThreadId
-    const firstActionable = threads.find((t) => ["responded", "draft", "awaiting"].includes(t.status) && t.canReply !== false)
+    const firstActionable = threads.find((t) => ["responded", "draft"].includes(t.status) && t.canReply !== false)
     return firstActionable ? firstActionable.threadId : null
   })
 
@@ -1026,11 +1004,11 @@ function ConversationPanel({
   // 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-warning-fg", ring: "bg-status-warning-fg/30" }
+      ? { label: "Email response detected", dot: "bg-status-active-fg", ring: "bg-status-active-fg/30" }
       : draft > 0
         ? { label: "Draft ready", dot: "bg-status-pending-fg", ring: "bg-status-pending-fg/30" }
         : awaiting > 0
-          ? { label: "Email sent · awaiting reply", dot: "bg-status-info-fg", ring: "bg-status-info-fg/30" }
+          ? { 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 =
@@ -1039,56 +1017,30 @@ function ConversationPanel({
       : draft > 0
         ? `Draft ready on ${draft} ${draft === 1 ? "thread" : "threads"}`
         : awaiting > 0
-          ? awaiting === 1 && firstAwaiting
-            ? `Awaiting a response from ${firstName(displayParticipant(firstAwaiting.contact).name)}`
-            : `Awaiting responses on ${awaiting} threads`
+          ? `Awaiting response on ${awaiting} ${awaiting === 1 ? "thread" : "threads"}`
           : `${threads.length} email ${threads.length === 1 ? "thread" : "threads"}`
 
-  const panelState = responded > 0 ? "responded" : draft > 0 ? "draft" : awaiting > 0 ? "awaiting" : "viewing"
-
   return (
     <section
       data-slot="conversation-panel"
       data-responded={responded > 0 ? "true" : undefined}
-      data-state={panelState}
-      className={cn(
-        "bg-background overflow-hidden rounded-xl border",
-        panelState === "responded"
-          ? "border-status-warning-border"
-          : panelState === "awaiting"
-            ? "border-status-info-border"
-            : "border-border",
-        className,
-      )}
+      className={cn("border-border bg-background overflow-hidden rounded-xl border", className)}
     >
-      <div
-        data-slot="conversation-panel-header"
-        className={cn(
-          "flex w-full items-center gap-2 px-3 py-2.5",
-          panelState === "responded"
-            ? "bg-status-warning-bg/45"
-            : panelState === "awaiting"
-              ? "bg-status-info-bg/55"
-              : "bg-background",
-        )}
+      <button
+        type="button"
+        onClick={() => setHubOpen((v) => !v)}
+        aria-expanded={hubOpen}
+        className="flex w-full items-center gap-3 px-3 py-2.5 text-left"
       >
-        <button
-          type="button"
-          onClick={() => setHubOpen((v) => !v)}
-          aria-expanded={hubOpen}
-          className="flex min-w-0 flex-1 items-center gap-3 text-left"
-        >
         <span
           data-slot="conversation-badge"
           className={cn(
             "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-semibold",
             responded > 0
-              ? "bg-status-warning-bg text-status-warning-fg"
-              : awaiting > 0
-                ? "bg-status-info-bg text-status-info-fg"
-                : draft > 0
-                  ? "bg-status-pending-bg text-status-pending-fg"
-                  : "bg-muted text-muted-foreground"
+              ? "bg-status-active-bg text-status-active-fg"
+              : draft > 0 || awaiting > 0
+                ? "bg-status-pending-bg text-status-pending-fg"
+                : "bg-muted text-muted-foreground"
           )}
         >
           <span className="relative inline-flex size-2">
@@ -1104,18 +1056,12 @@ function ConversationPanel({
             {anyPaused ? <> · <b>playbook stopped</b></> : null}
           </span>
         </span>
-          {hubOpen ? (
-            <ChevronUp size={16} className="text-muted-foreground shrink-0" />
-          ) : (
-            <ChevronDown size={16} className="text-muted-foreground shrink-0" />
-          )}
-        </button>
-        {hubGmailThread ? (
-          <div className="shrink-0" onClick={(event) => event.stopPropagation()}>
-            <OpenInGmailButton thread={hubGmailThread} onOpenInGmail={onOpenInGmail} />
-          </div>
-        ) : null}
-      </div>
+        {hubOpen ? (
+          <ChevronUp size={16} className="text-muted-foreground shrink-0" />
+        ) : (
+          <ChevronDown size={16} className="text-muted-foreground shrink-0" />
+        )}
+      </button>
 
       {hubOpen ? (
         <div className="border-border border-t">

package/src/components/timeline-activity.tsx

@@ -58,7 +58,6 @@ export interface TimelineEvent {
   content?: React.ReactNode
   source?: {
     label: string
-    actionLabel?: string
     url: string
   }
   defaultExpanded?: boolean
@@ -471,8 +470,6 @@ function SourceAction({
   onSourceClick?: () => void
   className: string
 }) {
-  const actionLabel = source.actionLabel ?? `Open in ${source.label}`
-
   if (onSourceClick) {
     return (
       <button
@@ -480,7 +477,7 @@ function SourceAction({
         onClick={(e) => { e.stopPropagation(); onSourceClick(); }}
         className={className}
       >
-        {actionLabel}
+        Open in {source.label}
         <ExternalLink className="h-3 w-3" />
       </button>
     )
@@ -493,7 +490,7 @@ function SourceAction({
       rel="noreferrer noopener"
       className={className}
     >
-      {actionLabel}
+      Open in {source.label}
       <ExternalLink className="h-3 w-3" />
     </a>
   )
@@ -538,28 +535,13 @@ function EmailCard({
 
               <TimelineEmailBody email={event.email} />
 
-              {event.content ? (
-                <div className="rounded-md bg-muted/30 px-2.5 py-2 text-xs text-muted-foreground">
-                  {event.content}
-                </div>
-              ) : null}
-
-              <div className="mt-2 flex items-center gap-3">
-                {event.source ? (
-                  <SourceAction
-                    source={event.source}
-                    onSourceClick={event.onSourceClick}
-                    className="mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
-                  />
-                ) : null}
-                <ShowLessButton
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    setExpanded(false)
-                  }}
-                  className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
-                />
-              </div>
+              <ShowLessButton
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setExpanded(false)
+                }}
+                className="mt-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+              />
             </div>
           ) : (
             <CollapsedEmailPreview
@@ -588,24 +570,9 @@ function EmailCard({
 
           <div className={classes.cardBody} data-slot="timeline-card-body">
             <TimelineEmailBody email={event.email} />
-            {event.content ? (
-              <div className="mt-3 rounded-md bg-muted/30 px-2.5 py-2 text-xs text-muted-foreground">
-                {event.content}
-              </div>
-            ) : null}
           </div>
 
-          <div
-            className={cn(classes.cardFooter, classes.actionLinkRow, event.source ? "justify-between" : "justify-end")}
-            data-slot="timeline-card-footer"
-          >
-            {event.source ? (
-              <SourceAction
-                source={event.source}
-                onSourceClick={event.onSourceClick}
-                className={classes.actionLink}
-              />
-            ) : null}
+          <div className={cn(classes.cardFooter, classes.actionLinkRow)} data-slot="timeline-card-footer">
             <ShowLessButton
               type="button"
               onClick={(e) => {

package/src/prototype/__tests__/detail-view-case-panel-v2.test.tsx

@@ -101,7 +101,7 @@ describe("DetailView case-panel-v2 section layout", () => {
       screen.getByText("Cash movement"),
       screen.getByText("Approve action"),
       screen.getByText("After-score marker"),
-      screen.getByText("Activity timeline"),
+      screen.getByText(/activity timeline/i),
       screen.getByText("Legacy detail extra marker"),
     )
   })
@@ -125,7 +125,7 @@ describe("DetailView case-panel-v2 section layout", () => {
       screen.getByText("Opportunity marker"),
       screen.getByText("Primary action marker"),
       screen.getByText("Comment area marker"),
-      screen.getByText("Activity timeline"),
+      screen.getByText(/activity timeline/i),
     )
   })
 
@@ -148,7 +148,7 @@ describe("DetailView case-panel-v2 section layout", () => {
 
     expectInDocumentOrder(
       screen.getByText("Comment composer marker"),
-      screen.getByText("Activity timeline"),
+      screen.getByText(/activity timeline/i),
     )
   })
 

package/src/prototype/__tests__/detail-view-timeline-system-events.test.tsx

@@ -209,20 +209,22 @@ describe("DetailView timeline system-events toggle", () => {
     const badge = container.querySelector('[data-testid="hidden-count-badge"]')
     expect(badge).not.toBeNull()
     expect(badge?.textContent).toBe("2")
-    expect(badge).toHaveClass("min-w-[18px]")
+    expect(badge).toHaveClass("min-w-[22px]")
   })
 
-  it("calls localStorage.setItem when toggle changes and shows a stronger pressed style", () => {
+  it("calls localStorage.setItem when toggle changes and shows the active pill style", () => {
     const { container } = render(<DetailView {...baseProps()} />)
     expandTimeline(container)
     const toggle = container.querySelector(
       '[data-testid="system-events-toggle"]',
     ) as HTMLElement
     expect(toggle).toHaveAttribute("aria-pressed", "false")
+    expect(toggle).toHaveAttribute("title", "Score changes are hidden.")
     fireEvent.click(toggle)
     expect(toggle).toHaveAttribute("aria-pressed", "true")
-    expect(toggle.className).toContain("border-primary/40")
-    expect(toggle.className).toContain("bg-primary/10")
+    expect(toggle).toHaveClass("border-foreground")
+    expect(toggle).toHaveClass("bg-foreground")
+    expect(toggle).toHaveAttribute("title", "Showing 2 score changes.")
     expect(localStorageMock.setItem).toHaveBeenCalledWith(
       "test-show-score-changes",
       "true",
@@ -312,18 +314,19 @@ describe("DetailView timeline system-events toggle", () => {
     expect(toggle).toBeNull()
   })
 
-  it("shows footer hint below the case-panel timeline when timeline is expanded and system events are hidden", () => {
+  it("does not render a footer hint and uses the hidden hint as toggle help", () => {
     const { container } = render(<DetailView {...baseProps()} />)
     expandTimeline(container)
     const timeline = container.querySelector('[data-variant="case-panel"]')
     const hint = container.querySelector('[data-testid="timeline-footer-hint"]')
+    const toggle = container.querySelector('[data-testid="system-events-toggle"]')
     expect(timeline).not.toBeNull()
-    expect(hint).not.toBeNull()
-    expect(hint?.textContent).toBe("Score changes are hidden.")
-    expect(timeline?.compareDocumentPosition(hint as Node)).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
+    expect(hint).toBeNull()
+    expect(toggle).toHaveAttribute("title", "Score changes are hidden.")
+    expect(toggle).toHaveAttribute("aria-label", "Score changes are hidden.")
   })
 
-  it("shows visible footer hint with count when system events are shown", () => {
+  it("uses visible footer hint text as toggle help with count when system events are shown", () => {
     const { container } = render(<DetailView {...baseProps()} />)
     expandTimeline(container)
     // Toggle on
@@ -332,8 +335,8 @@ describe("DetailView timeline system-events toggle", () => {
     ) as HTMLElement
     fireEvent.click(toggle)
     const hint = container.querySelector('[data-testid="timeline-footer-hint"]')
-    expect(hint).not.toBeNull()
-    expect(hint?.textContent).toBe("Showing 2 score changes.")
+    expect(hint).toBeNull()
+    expect(toggle).toHaveAttribute("title", "Showing 2 score changes.")
   })
 
   // --- Toggle always renders when system-noise events exist (review fix #1) ---
@@ -414,10 +417,10 @@ describe("DetailView timeline system-events toggle", () => {
     const toggle = container.querySelector('[data-testid="system-events-toggle"]')
     expect(toggle).not.toBeNull()
     expect(toggle?.textContent).toContain("Legacy label")
-    // Footer hint should work too
+    // Deprecated hint props are accepted and exposed as toggle help.
     expandTimeline(container)
     const hint = container.querySelector('[data-testid="timeline-footer-hint"]')
-    expect(hint).not.toBeNull()
-    expect(hint?.textContent).toBe("Legacy hidden hint.")
+    expect(hint).toBeNull()
+    expect(toggle).toHaveAttribute("title", "Legacy hidden hint.")
   })
 })