@handled-ai/design-system 0.19.2 → 0.20.1

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/__tests__/detail-view-title-slots.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react"
-import { describe, expect, it, vi } from "vitest"
+import { cleanup, render, screen } from "@testing-library/react"
+import { afterEach, describe, expect, it, vi } from "vitest"
 
 import { DetailView } from "../prototype-inbox-view"
 import type { DetailViewProps } from "../prototype-inbox-view"
@@ -14,6 +14,10 @@ const baseItem = {
   tag1: "Signal",
 }
 
+afterEach(() => {
+  cleanup()
+})
+
 function renderDetailView(overrides: Partial<DetailViewProps> = {}) {
   const props: DetailViewProps = {
     item: baseItem,
@@ -39,6 +43,30 @@ function renderDetailView(overrides: Partial<DetailViewProps> = {}) {
 }
 
 describe("DetailView title slots", () => {
+  it("does not render the inert detail Back button while preserving title and metadata slots", () => {
+    renderDetailView({
+      renderTitleActionRow: () => (
+        <button type="button">Full-width quick action</button>
+      ),
+      renderMetadataExtra: () => <span data-testid="metadata-extra">Owner: Lee</span>,
+      accountDetailsButtonLabel: (item) => (
+        <>
+          <span>View account details</span>
+          <span>{item.company}</span>
+        </>
+      ),
+      getAccountDetailsButtonAriaLabel: (item) => `View account details for ${item.company}`,
+    })
+
+    expect(screen.queryByRole("button", { name: "Back" })).toBeNull()
+    expect(screen.getByRole("heading", { name: "Churn risk case title" })).toBeTruthy()
+    expect(screen.getAllByText("Acme Corp").length).toBeGreaterThan(0)
+    expect(screen.getByRole("button", { name: "Full-width quick action" })).toBeTruthy()
+    expect(screen.getByTestId("metadata-extra").textContent).toBe("Owner: Lee")
+    expect(screen.getByTestId("priority-popover-trigger")).toBeTruthy()
+    expect(screen.getByRole("button", { name: "View account details for Acme Corp" })).toBeTruthy()
+  })
+
   it("renders supporting title text below the main title", () => {
     renderDetailView({
       renderTitleSubtext: (item) => <p data-testid="title-subtext">Full title: {item.title}</p>,

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"
 }
 
 // ---------------------------------------------------------------------------
@@ -219,12 +224,18 @@ export interface InboxViewConfig {
    *  - "prominent": standard foreground color, text-base size for the brief
    */
   briefStyleVariant?: BriefStyleVariant
+  /** Opt-in detail panel section ordering. Defaults to the existing layout. */
+  sectionLayout?: "default" | "case-panel-v2"
   /** Render extra content at the end of the detail view, below the suggested actions section. */
   renderDetailExtra?: (item: QueueItem) => React.ReactNode
   /** Render content between the signal brief text and the signal score bar (e.g. "Signals on Case" chips). */
   renderBeforeScore?: (item: QueueItem) => React.ReactNode
   /** Render content between the signal score section and the activity timeline (e.g. OpportunityPanel). */
   renderAfterScore?: (item: QueueItem) => React.ReactNode
+  /** Render primary case-panel content between the opportunity section and comment area. */
+  renderPrimaryAction?: (item: QueueItem) => React.ReactNode
+  /** Render case-panel comment content before the activity timeline. */
+  renderCommentArea?: (item: QueueItem) => React.ReactNode
   /** Formatted string for "Last activity X ago" in the collapsed timeline header. If omitted, falls back to the first event's time. */
   lastActivityTime?: string
   /** Configuration for the system-noise events toggle (score changes, etc.). */

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

@@ -155,11 +155,17 @@ export interface DetailViewProps {
   hideApproveButton?: boolean
   signalBriefCopy?: InboxViewConfig["signalBriefCopy"]
   briefStyleVariant?: BriefStyleVariant
+  /** Opt-in detail panel section ordering. Defaults to the existing layout. */
+  sectionLayout?: InboxViewConfig["sectionLayout"]
   renderDetailExtra?: (item: QueueItem) => React.ReactNode
   /** Render content between the signal brief text and the signal score bar (e.g. "Signals on Case" chips). */
   renderBeforeScore?: (item: QueueItem) => React.ReactNode
   /** Render content between the signal score section and the activity timeline. */
   renderAfterScore?: (item: QueueItem) => React.ReactNode
+  /** Render primary case-panel content between the opportunity section and comment area. */
+  renderPrimaryAction?: (item: QueueItem) => React.ReactNode
+  /** Render case-panel comment content before the activity timeline. */
+  renderCommentArea?: (item: QueueItem) => React.ReactNode
   lastActivityTime?: string
   /** Render extra content inline with the detail title. */
   renderTitleExtra?: (item: QueueItem) => React.ReactNode
@@ -169,6 +175,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. */
@@ -344,14 +357,18 @@ export function DetailView({
   hideApproveButton,
   signalBriefCopy,
   briefStyleVariant = "default",
+  sectionLayout = "default",
   renderDetailExtra,
   renderBeforeScore,
   renderAfterScore,
+  renderPrimaryAction,
+  renderCommentArea,
   lastActivityTime,
   renderTitleExtra,
   renderTitleActionRow,
   renderTitleSubtext,
   renderMetadataExtra,
+  metadataLayout = "default",
   accountDetailsButtonLabel,
   getAccountDetailsButtonAriaLabel,
   onOpenSignalBucket,
@@ -465,6 +482,121 @@ 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"
+
+  const isCasePanelV2 = sectionLayout === "case-panel-v2"
+  const v2WhyText = signalData.signalBrief
+    ? signalData.whyNow || signalData.urgencyExplanation
+    : undefined
+
+  // 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)}
+    </>
+  )
+
+  const timelineSection = sections.timeline && timelineEvents.length > 0 ? (
+    <TimelineSection
+      timelineEvents={timelineEvents}
+      showTimeline={showTimeline}
+      setShowTimeline={setShowTimeline}
+      showSystemEvents={showSystemEvents}
+      setShowSystemEvents={setShowSystemEvents}
+      attentionCount={attentionCount}
+      sysEvtConfig={sysEvtConfig}
+      lastActivityTime={lastActivityTime}
+    />
+  ) : null
+
+  const suggestedActionsSection = sections.suggestedActions ? (
+    <SignalApproval.Gate>
+      <SuggestedActions
+        actions={suggestedActions}
+        accountContacts={accountContacts}
+        signature={emailSignature}
+        iconMap={iconMap}
+        onDismiss={(id) => console.log("Dismiss action:", id)}
+        onSend={(id) => console.log("Send action:", id)}
+        onSaveDraft={(id) => console.log("Save draft:", id)}
+        onDuplicate={handleDuplicate}
+        onOpenAccountDetails={onOpenEntityPanel}
+        onOpenRecentActivity={onOpenRecentActivity}
+        onMarkComplete={(id) => console.log("Mark complete:", id)}
+        onDispatchAgent={(id) => console.log("Dispatch agent:", id)}
+      />
+    </SignalApproval.Gate>
+  ) : null
+
   return (
     <SignalApproval.Root
       key={item.id}
@@ -488,14 +620,6 @@ export function DetailView({
         <div className="pb-8">
           {/* Header */}
           <div className="mb-4 flex items-center gap-2">
-            <button
-              type="button"
-              className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
-            >
-              <ArrowLeft className="h-3.5 w-3.5" />
-              Back
-            </button>
-            <span className="text-muted-foreground/40">&middot;</span>
             <span className="text-xs text-muted-foreground">{item.company}</span>
           </div>
 
@@ -514,71 +638,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>
+          {!isCasePanelV2 && metadataLayout === "default" ? (
+            <div className="mb-6 flex flex-wrap items-center gap-2">{metadataChips}</div>
+          ) : null}
 
           {/* Signal Brief */}
           {sections.signalBrief && (() => {
@@ -620,59 +682,78 @@ export function DetailView({
                   </p>
                 )}
 
-                {/* Before-score content slot (e.g. "Signals on Case" chips) */}
-                {renderBeforeScore?.(item)}
+                {/* Metadata chips relocated beneath the brief (case-panel redesign). */}
+                {isCasePanelV2 || metadataLayout === "below-brief" ? (
+                  <div className="mb-4 flex flex-wrap items-center gap-2">{metadataChips}</div>
+                ) : null}
 
-                <ScoreWhyChips
-                  item={item}
-                  signalData={signalData}
-                  onOpenSignalBucket={onOpenSignalBucket}
-                />
-                <div className="mt-4">
-                  <SignalApproval.Actions />
-                </div>
+                {!isCasePanelV2 ? (
+                  <>
+                    {/* Before-score content slot (e.g. "Signals on Case" chips) */}
+                    {renderBeforeScore?.(item)}
+
+                    <ScoreWhyChips
+                      item={item}
+                      signalData={signalData}
+                      onOpenSignalBucket={onOpenSignalBucket}
+                    />
+                    <div className="mt-4">
+                      <SignalApproval.Actions />
+                    </div>
+                  </>
+                ) : null}
               </div>
             )
           })()}
 
-          {/* After-score content slot (e.g. OpportunityPanel) */}
-          {renderAfterScore?.(item)}
-
-          {/* Activity Timeline */}
-          {sections.timeline && timelineEvents.length > 0 && (
-            <TimelineSection
-              timelineEvents={timelineEvents}
-              showTimeline={showTimeline}
-              setShowTimeline={setShowTimeline}
-              showSystemEvents={showSystemEvents}
-              setShowSystemEvents={setShowSystemEvents}
-              attentionCount={attentionCount}
-              sysEvtConfig={sysEvtConfig}
-              lastActivityTime={lastActivityTime}
-            />
+          {isCasePanelV2 ? (
+            <>
+              {sections.signalBrief ? (
+                <>
+                  {/* Before-score content slot (e.g. status/attention pills) */}
+                  {renderBeforeScore?.(item)}
+
+                  {v2WhyText ? (
+                    <div className="mb-8">
+                      <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3">The why</h3>
+                      <p className="text-sm text-foreground/90 leading-relaxed mb-4">
+                        {v2WhyText}
+                      </p>
+                    </div>
+                  ) : null}
+
+                  <div className="mb-8">
+                    <ScoreWhyChips
+                      item={item}
+                      signalData={signalData}
+                      onOpenSignalBucket={onOpenSignalBucket}
+                    />
+                    <div className="mt-4">
+                      <SignalApproval.Actions />
+                    </div>
+                  </div>
+                </>
+              ) : null}
+
+              {/* After-score content slot (e.g. OpportunityPanel) */}
+              {renderAfterScore?.(item)}
+              {renderPrimaryAction?.(item)}
+              {renderCommentArea?.(item)}
+              {timelineSection}
+            </>
+          ) : (
+            <>
+              {/* After-score content slot (e.g. OpportunityPanel) */}
+              {renderAfterScore?.(item)}
+
+              {/* Activity Timeline */}
+              {timelineSection}
+            </>
           )}
         </div>
 
-        {/* Suggested Actions */}
-        {sections.suggestedActions && (
-          <SignalApproval.Gate>
-            <SuggestedActions
-              actions={suggestedActions}
-              accountContacts={accountContacts}
-              signature={emailSignature}
-              iconMap={iconMap}
-              onDismiss={(id) => console.log("Dismiss action:", id)}
-              onSend={(id) => console.log("Send action:", id)}
-              onSaveDraft={(id) => console.log("Save draft:", id)}
-              onDuplicate={handleDuplicate}
-              onOpenAccountDetails={onOpenEntityPanel}
-              onOpenRecentActivity={onOpenRecentActivity}
-              onMarkComplete={(id) => console.log("Mark complete:", id)}
-              onDispatchAgent={(id) => console.log("Dispatch agent:", id)}
-            />
-          </SignalApproval.Gate>
-        )}
-        {renderDetailExtra?.(item)}
+        {!isCasePanelV2 ? suggestedActionsSection : null}
+        {!isCasePanelV2 ? renderDetailExtra?.(item) : null}
       </div>
     </SignalApproval.Root>
   )
@@ -714,9 +795,12 @@ export function PrototypeInboxView({
   hideApproveButton,
   signalBriefCopy,
   briefStyleVariant,
+  sectionLayout,
   renderDetailExtra,
   renderBeforeScore,
   renderAfterScore,
+  renderPrimaryAction,
+  renderCommentArea,
   lastActivityTime,
   timelineSystemEventsConfig,
   attentionCount,
@@ -959,9 +1043,12 @@ export function PrototypeInboxView({
     hideApproveButton,
     signalBriefCopy,
     briefStyleVariant,
+    sectionLayout,
     renderDetailExtra,
     renderBeforeScore,
     renderAfterScore,
+    renderPrimaryAction,
+    renderCommentArea,
     lastActivityTime,
     timelineSystemEventsConfig,
     attentionCount,