@handled-ai/design-system 0.20.11 → 0.20.12

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.")
   })
 })

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

@@ -222,6 +222,7 @@ function TimelineSection({
   attentionCount,
   sysEvtConfig,
   lastActivityTime,
+  isCasePanel = false,
 }: {
   timelineEvents: TimelineEvent[]
   showTimeline: boolean
@@ -231,6 +232,7 @@ function TimelineSection({
   attentionCount?: number
   sysEvtConfig?: TimelineSystemEventsConfig
   lastActivityTime?: string
+  isCasePanel?: boolean
 }) {
   // Single-pass partition: compute visibleEvents and hiddenCount together
   const visibleEvents: TimelineEvent[] = []
@@ -245,6 +247,9 @@ function TimelineSection({
   // config was provided — so consumers that emit `isSystemNoise: true` always
   // give users a way to reveal those events.
   const toggleLabel = sysEvtConfig?.toggleLabel ?? "System events"
+  const toggleHelp = showSystemEvents
+    ? sysEvtConfig?.visibleHint?.replace("{count}", String(hiddenCount)) ?? "Hide system events"
+    : sysEvtConfig?.hiddenHint ?? "Show system events"
 
   // Derive "Last activity" from the first *visible* event so the collapsed
   // header never points at a hidden score-update. The caller-supplied
@@ -262,84 +267,106 @@ function TimelineSection({
   const eventCountLabel = `${visibleCount} ${visibleCount === 1 ? "event" : "events"}`
 
   return (
-    <div className="mb-8">
+    <div
+      className={cn(
+        isCasePanel ? "mt-8 border-t border-border pt-8 pb-8" : "mb-8"
+      )}
+    >
       {/* Header — outer non-interactive container */}
       <div
-        className="group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2"
+        className={cn(
+          "flex w-full items-center justify-between",
+          isCasePanel
+            ? "gap-4 border-b border-border pb-5"
+            : "group/timeline gap-2 rounded-md py-2 transition-colors hover:bg-muted/40 -mx-2 px-2"
+        )}
         data-testid="timeline-header"
       >
         {/* Left: collapse/expand button */}
         <button
           type="button"
           onClick={() => setShowTimeline((prev) => !prev)}
-          className="flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0"
+          className="flex min-w-0 cursor-pointer items-center gap-2 border-0 bg-transparent p-0 text-left"
           data-testid="timeline-collapse-btn"
         >
-          <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors">Activity timeline</h3>
+          <h3 className="text-xs font-bold uppercase tracking-[0.16em] text-muted-foreground transition-colors group-hover/timeline:text-foreground">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 && firstVisibleTime && (
+          {!isCasePanel && !showTimeline && firstVisibleTime && (
             <span className="text-[11px] text-muted-foreground/60" data-testid="last-activity-hint">
               &middot; Last activity {firstVisibleTime}
             </span>
           )}
-          <div className="flex items-center gap-1.5">
-            <span className="text-[11px] font-medium text-muted-foreground" data-testid="event-count">{eventCountLabel}</span>
-            <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}`} />
-          </div>
         </button>
 
-        {/* Right: system-events toggle — always rendered when noise events exist */}
-        {hasSystemNoise && (
+        {/* Right: system-events toggle, event count, and collapse affordance */}
+        <div className="flex shrink-0 items-center gap-4">
+          {hasSystemNoise && (
+            <button
+              type="button"
+              onClick={() => setShowSystemEvents((prev) => !prev)}
+              className={cn(
+                "inline-flex shrink-0 cursor-pointer items-center gap-3 rounded-full border px-3.5 py-2 text-sm font-semibold transition-colors",
+                showSystemEvents
+                  ? "border-foreground bg-foreground text-background shadow-sm hover:bg-foreground/90"
+                  : "border-border bg-background text-muted-foreground shadow-sm hover:bg-muted/40 hover:text-foreground"
+              )}
+              aria-pressed={showSystemEvents}
+              aria-label={toggleHelp}
+              title={toggleHelp}
+              data-testid="system-events-toggle"
+            >
+              <span
+                className={cn(
+                  "relative inline-flex h-4 w-8 shrink-0 items-center rounded-full p-0.5 transition-colors",
+                  showSystemEvents ? "bg-teal-600" : "bg-muted-foreground/30"
+                )}
+                aria-hidden="true"
+                data-testid="system-events-indicator"
+              >
+                <span
+                  className={cn(
+                    "block h-3 w-3 rounded-full bg-white shadow-sm transition-transform",
+                    showSystemEvents ? "translate-x-4" : "translate-x-0"
+                  )}
+                />
+              </span>
+              <span>{toggleLabel}</span>
+              {!showSystemEvents ? (
+                <span
+                  className="inline-flex min-w-[22px] items-center justify-center rounded-full bg-muted px-1.5 text-xs font-bold tabular-nums text-muted-foreground"
+                  data-testid="hidden-count-badge"
+                >
+                  {hiddenCount}
+                </span>
+              ) : null}
+            </button>
+          )}
+
           <button
             type="button"
-            onClick={() => setShowSystemEvents((prev) => !prev)}
+            onClick={() => setShowTimeline((prev) => !prev)}
             className={cn(
-              "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors hover:text-foreground",
-              showSystemEvents
-                ? "border-primary/40 bg-primary/10 text-primary shadow-sm hover:bg-primary/15"
-                : "border-border bg-background text-muted-foreground hover:bg-muted/40"
+              "inline-flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:text-foreground",
+              isCasePanel ? "gap-3 text-sm" : "gap-1.5 text-[11px]"
             )}
-            aria-pressed={showSystemEvents}
-            data-testid="system-events-toggle"
+            aria-label={showTimeline ? "Collapse activity timeline" : "Expand activity timeline"}
           >
-            {toggleLabel}
-            <span
-              className={cn(
-                "inline-flex min-w-[18px] items-center justify-center rounded-full px-1.5 text-[10px] font-semibold tabular-nums",
-                showSystemEvents
-                  ? "bg-primary/15 text-primary ring-1 ring-primary/30"
-                  : "bg-muted text-muted-foreground ring-1 ring-border/70"
-              )}
-              data-testid="hidden-count-badge"
-            >
-              {hiddenCount}
-            </span>
+            <span className="font-medium" data-testid="event-count">{eventCountLabel}</span>
+            <ChevronDown className={`h-3.5 w-3.5 transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}`} />
           </button>
-        )}
+        </div>
       </div>
 
       {/* Timeline body */}
       {showTimeline && visibleEvents.length > 0 && (
-        <div className="mt-3">
+        <div className="mt-6">
           <TimelineActivity events={visibleEvents} variant="case-panel" />
         </div>
       )}
-
-      {/* Footer hint */}
-      {showTimeline && !showSystemEvents && sysEvtConfig?.hiddenHint && hasSystemNoise && (
-        <p className="mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2" data-testid="timeline-footer-hint">
-          {sysEvtConfig.hiddenHint}
-        </p>
-      )}
-      {showTimeline && showSystemEvents && sysEvtConfig?.visibleHint && hasSystemNoise && (
-        <p className="mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2" data-testid="timeline-footer-hint">
-          {sysEvtConfig.visibleHint.replace("{count}", String(hiddenCount))}
-        </p>
-      )}
     </div>
   )
 }
@@ -583,6 +610,7 @@ export function DetailView({
       attentionCount={attentionCount}
       sysEvtConfig={sysEvtConfig}
       lastActivityTime={lastActivityTime}
+      isCasePanel={isCasePanelV2}
     />
   ) : null