@handled-ai/design-system 0.20.10 → 0.20.11

package/src/components/__tests__/comment-composer.test.tsx

@@ -20,19 +20,16 @@ describe("CommentComposer", () => {
   it("exposes data-open only when expanded (collapsed vs open structure)", () => {
     const { container } = render(<CommentComposer onPost={() => {}} />);
     const root = container.querySelector('[data-slot="comment-composer"]')!;
-    // Collapsed: no data-open attribute, single-row textarea in a rounded input shell, no footer.
+    // Collapsed: no data-open attribute, compact single-row textarea, no footer.
     expect(root.getAttribute("data-open")).toBeNull();
-    expect(root.className).toContain("gap-4");
     const input = screen.getByRole("textbox") as HTMLTextAreaElement;
     expect(Number(input.rows)).toBe(1);
-    expect(input.className).toContain("min-h-14");
     expect(screen.queryByText("Comment")).toBeNull();
 
     // Open: data-open=true, taller textarea, footer with Cancel + Comment.
     fireEvent.focus(input);
     expect(root.getAttribute("data-open")).toBe("true");
-    expect(Number(input.rows)).toBe(4);
-    expect(input.className).toContain("min-h-32");
+    expect(Number(input.rows)).toBe(3);
     expect(screen.getByText("Cancel")).toBeDefined();
     expect(screen.getByText("Comment")).toBeDefined();
   });
@@ -41,7 +38,7 @@ describe("CommentComposer", () => {
     render(<CommentComposer onPost={() => {}} />);
     const input = screen.getByRole("textbox") as HTMLTextAreaElement;
     fireEvent.change(input, { target: { value: "draft" } });
-    expect(Number(input.rows)).toBe(4);
+    expect(Number(input.rows)).toBe(3);
     fireEvent.click(screen.getByText("Cancel").closest("button")!);
     expect(input.value).toBe("");
     expect(Number(input.rows)).toBe(1);
@@ -54,7 +51,6 @@ describe("CommentComposer", () => {
     fireEvent.focus(input);
     const btn = screen.getByText("Comment").closest("button")!;
     expect(btn.disabled).toBe(true);
-    expect(btn.className).toContain("bg-foreground");
     fireEvent.change(input, { target: { value: "  hi  " } });
     expect(btn.disabled).toBe(false);
   });

package/src/components/__tests__/email-body.test.tsx

@@ -80,4 +80,36 @@ describe("EmailBody", () => {
     expect(container.textContent).toContain("Line one & two\nLine 'three'")
     expectNoVisibleEscapeArtifacts(container.textContent ?? "")
   })
+
+  it("linkifies URLs and email addresses in plain text bodies after splitting details", () => {
+    const { container } = render(
+      <EmailBody
+        text={[
+          "Hi Dana,",
+          "",
+          "Please review https://example.com/report?case=123, then email ops@example.com.",
+          "",
+          "-- ",
+          "Jane Doe",
+          "https://example.com/signature",
+        ].join("\n")}
+        collapseDetails
+      />,
+    )
+
+    const body = container.querySelector('[data-slot="email-body-content"]')
+    const details = container.querySelector('[data-slot="email-body-details"]')
+
+    expect(body?.textContent).toContain("Please review https://example.com/report?case=123, then email ops@example.com.")
+    expect(body?.querySelector('a[href="https://example.com/report?case=123"]')?.textContent).toBe("https://example.com/report?case=123")
+    expect(body?.querySelector('a[href="mailto:ops@example.com"]')?.textContent).toBe("ops@example.com")
+    expect(body?.textContent).toContain("https://example.com/report?case=123,")
+    expect(details).toBeNull()
+
+    fireEvent.click(screen.getByRole("button", { name: "•••" }))
+
+    const expandedDetails = container.querySelector('[data-slot="email-body-details"]')
+    expect(expandedDetails?.textContent).toContain("Jane Doe")
+    expect(expandedDetails?.querySelector('a[href="https://example.com/signature"]')?.textContent).toBe("https://example.com/signature")
+  })
 })

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

@@ -340,6 +340,42 @@ describe("TimelineActivity", () => {
     )
   })
 
+  it.each(["default", "case-panel"] as const)(
+    "renders email source actionLabel, content, and Show less for the %s variant",
+    (variant) => {
+      const threadUrl = "https://mail.google.com/mail/u/0/#inbox/thread-1"
+      const event = minimal({
+        isInteractive: true,
+        defaultExpanded: true,
+        content: "Moved to waiting",
+        email: {
+          from: "Priya Raman",
+          to: "Dana Okafor",
+          subject: "Re: hi",
+          body: "plain fallback",
+        },
+        source: { label: "Gmail", actionLabel: "Open thread", url: threadUrl },
+      })
+
+      const { container } = render(<TimelineActivity events={[event]} variant={variant} />)
+
+      const sourceAction = screen.getByRole("link", { name: /Open thread/i })
+      expect(sourceAction).toHaveAttribute("href", threadUrl)
+      expect(screen.queryByRole("link", { name: /Open in Gmail/i })).toBeNull()
+      expect(screen.getByText("Moved to waiting")).toBeDefined()
+
+      const footer = variant === "case-panel"
+        ? container.querySelector('[data-slot="timeline-card-footer"]')
+        : sourceAction.closest("div")
+      const footerText = footer?.textContent ?? ""
+      const sourceActionIndex = footerText.indexOf("Open thread")
+      const showLessIndex = footerText.indexOf("Show less")
+
+      expect(sourceActionIndex).toBeGreaterThanOrEqual(0)
+      expect(showLessIndex).toBeGreaterThan(sourceActionIndex)
+    },
+  )
+
   it("uses shared helpers for decoded timeline sender, timestamp, snippets, and collapsed details", () => {
     const event = minimal({
       isInteractive: true,

package/src/components/comment-composer.tsx

@@ -55,34 +55,29 @@ function CommentComposer({
       data-slot="comment-composer"
       data-open={open ? "true" : undefined}
       className={cn(
-        "flex items-start gap-4 rounded-xl transition-colors",
+        "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",
         className
       )}
     >
-      <Avatar size="sm" className="mt-1">
+      <Avatar size="sm" className="mt-px">
         {author?.avatarUrl ? <AvatarImage src={author.avatarUrl} alt={author.name ?? "You"} /> : null}
-        <AvatarFallback className="bg-slate-700 text-[10px] font-semibold uppercase text-white dark:bg-slate-200 dark:text-slate-900">
+        <AvatarFallback className="bg-muted text-muted-foreground text-[10px] font-medium uppercase">
           {getInitials({ name: author?.name, email: author?.email })}
         </AvatarFallback>
       </Avatar>
 
-      <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"
-        )}
-      >
+      <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 ? 4 : 1}
+          rows={open ? 3 : 1}
           className={cn(
-            "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"
+            "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"
           )}
           onKeyDown={(e) => {
             if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
@@ -93,16 +88,15 @@ function CommentComposer({
         />
 
         {open ? (
-          <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}
+          <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}
             </span>
-            <span className="flex items-center gap-3">
+            <span className="flex items-center gap-2">
               <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)
@@ -110,15 +104,9 @@ function CommentComposer({
               >
                 Cancel
               </Button>
-              <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"
-              >
+              <Button type="button" size="sm" disabled={!canPost} onClick={post}>
                 Comment
-                <kbd className="ml-1 rounded px-1 text-[10px] text-background/70">⌘↵</kbd>
+                <kbd className="bg-primary-foreground/15 ml-1 rounded px-1 text-[10px]">⌘↵</kbd>
               </Button>
             </span>
           </div>

package/src/components/email-body.tsx

@@ -33,10 +33,55 @@ const PROSE = cn(
   "[&_sup]:align-super [&_sup]:text-[0.75em] [&_sub]:align-sub [&_sub]:text-[0.75em]",
 )
 
+const PLAIN_TEXT_LINK_RE = /https?:\/\/[^\s<>"']+|www\.[^\s<>"']+|[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi
+const TRAILING_LINK_PUNCTUATION_RE = /[),.;:!?]+$/
+
+function plainTextHref(value: string): string | null {
+  if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)) {
+    return `mailto:${value}`
+  }
+  const href = value.toLowerCase().startsWith("www.") ? `https://${value}` : value
+  try {
+    const url = new URL(href)
+    return url.protocol === "http:" || url.protocol === "https:" ? href : null
+  } catch {
+    return null
+  }
+}
+
+function linkifyPlainText(text: string): React.ReactNode[] {
+  const nodes: React.ReactNode[] = []
+  let cursor = 0
+
+  for (const match of text.matchAll(PLAIN_TEXT_LINK_RE)) {
+    const value = match[0]
+    const index = match.index ?? 0
+    if (index > cursor) nodes.push(text.slice(cursor, index))
+
+    const trailing = value.match(TRAILING_LINK_PUNCTUATION_RE)?.[0] ?? ""
+    const linkText = trailing ? value.slice(0, -trailing.length) : value
+    const href = plainTextHref(linkText)
+    if (href) {
+      nodes.push(
+        <a key={`${index}-${linkText}`} href={href} target="_blank" rel="noreferrer noopener">
+          {linkText}
+        </a>,
+      )
+    } else {
+      nodes.push(linkText)
+    }
+    if (trailing) nodes.push(trailing)
+    cursor = index + value.length
+  }
+
+  if (cursor < text.length) nodes.push(text.slice(cursor))
+  return nodes
+}
+
 function PlainTextBlock({ text, className, slot }: { text: string; className?: string; slot: string }) {
   return (
     <div data-slot={slot} className={cn(PROSE, "whitespace-pre-line", className)}>
-      {decodeEmailDisplayText(text)}
+      {linkifyPlainText(decodeEmailDisplayText(text))}
     </div>
   )
 }

package/src/components/timeline-activity.tsx

@@ -58,6 +58,7 @@ export interface TimelineEvent {
   content?: React.ReactNode
   source?: {
     label: string
+    actionLabel?: string
     url: string
   }
   defaultExpanded?: boolean
@@ -470,6 +471,8 @@ function SourceAction({
   onSourceClick?: () => void
   className: string
 }) {
+  const actionLabel = source.actionLabel ?? `Open in ${source.label}`
+
   if (onSourceClick) {
     return (
       <button
@@ -477,7 +480,7 @@ function SourceAction({
         onClick={(e) => { e.stopPropagation(); onSourceClick(); }}
         className={className}
       >
-        Open in {source.label}
+        {actionLabel}
         <ExternalLink className="h-3 w-3" />
       </button>
     )
@@ -490,7 +493,7 @@ function SourceAction({
       rel="noreferrer noopener"
       className={className}
     >
-      Open in {source.label}
+      {actionLabel}
       <ExternalLink className="h-3 w-3" />
     </a>
   )
@@ -535,13 +538,28 @@ function EmailCard({
 
               <TimelineEmailBody email={event.email} />
 
-              <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"
-              />
+              {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>
             </div>
           ) : (
             <CollapsedEmailPreview
@@ -570,9 +588,24 @@ 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)} data-slot="timeline-card-footer">
+          <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}
             <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/i),
+      screen.getByText("Activity timeline"),
       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/i),
+      screen.getByText("Activity timeline"),
     )
   })
 
@@ -148,7 +148,7 @@ describe("DetailView case-panel-v2 section layout", () => {
 
     expectInDocumentOrder(
       screen.getByText("Comment composer marker"),
-      screen.getByText(/activity timeline/i),
+      screen.getByText("Activity timeline"),
     )
   })
 

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

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

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

@@ -222,7 +222,6 @@ function TimelineSection({
   attentionCount,
   sysEvtConfig,
   lastActivityTime,
-  isCasePanel = false,
 }: {
   timelineEvents: TimelineEvent[]
   showTimeline: boolean
@@ -232,7 +231,6 @@ function TimelineSection({
   attentionCount?: number
   sysEvtConfig?: TimelineSystemEventsConfig
   lastActivityTime?: string
-  isCasePanel?: boolean
 }) {
   // Single-pass partition: compute visibleEvents and hiddenCount together
   const visibleEvents: TimelineEvent[] = []
@@ -247,9 +245,6 @@ 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
@@ -267,106 +262,84 @@ function TimelineSection({
   const eventCountLabel = `${visibleCount} ${visibleCount === 1 ? "event" : "events"}`
 
   return (
-    <div
-      className={cn(
-        isCasePanel ? "mt-8 border-t border-border pt-8 pb-8" : "mb-8"
-      )}
-    >
+    <div className="mb-8">
       {/* Header — outer non-interactive container */}
       <div
-        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"
-        )}
+        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"
         data-testid="timeline-header"
       >
         {/* Left: collapse/expand button */}
         <button
           type="button"
           onClick={() => setShowTimeline((prev) => !prev)}
-          className="flex min-w-0 cursor-pointer items-center gap-2 border-0 bg-transparent p-0 text-left"
+          className="flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0"
           data-testid="timeline-collapse-btn"
         >
-          <h3 className="text-xs font-bold uppercase tracking-[0.16em] text-muted-foreground transition-colors group-hover/timeline:text-foreground">ACTIVITY TIMELINE</h3>
+          <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors">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>
           )}
-          {!isCasePanel && !showTimeline && firstVisibleTime && (
+          {!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, 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>
-          )}
-
+        {/* Right: system-events toggle — always rendered when noise events exist */}
+        {hasSystemNoise && (
           <button
             type="button"
-            onClick={() => setShowTimeline((prev) => !prev)}
+            onClick={() => setShowSystemEvents((prev) => !prev)}
             className={cn(
-              "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]"
+              "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"
             )}
-            aria-label={showTimeline ? "Collapse activity timeline" : "Expand activity timeline"}
+            aria-pressed={showSystemEvents}
+            data-testid="system-events-toggle"
           >
-            <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" : ""}`} />
+            {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>
           </button>
-        </div>
+        )}
       </div>
 
       {/* Timeline body */}
       {showTimeline && visibleEvents.length > 0 && (
-        <div className="mt-6">
+        <div className="mt-3">
           <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>
   )
 }
@@ -610,7 +583,6 @@ export function DetailView({
       attentionCount={attentionCount}
       sysEvtConfig={sysEvtConfig}
       lastActivityTime={lastActivityTime}
-      isCasePanel={isCasePanelV2}
     />
   ) : null