@handled-ai/design-system 0.18.56 → 0.18.58

package/src/components/email-preview-card.tsx

@@ -43,7 +43,7 @@ export function EmailPreviewCard({
   signatureHtml,
   className,
 }: EmailPreviewCardProps) {
-  const recipientLabel = to || "the recipient"
+  const recipientLabel = to ? `${to}'s` : "the recipient's"
   const bodyHtml = htmlBody ?? (textBody ? escapeHtml(textBody) : "")
 
   return (
@@ -51,7 +51,8 @@ export function EmailPreviewCard({
       <div className="flex items-start gap-2 mb-3 py-2.5 px-3 border rounded-lg bg-background text-[11.5px] text-muted-foreground">
         <Eye className="size-4 shrink-0 mt-0.5" />
         <span>
-          This is a preview for {recipientLabel}. Nothing has been sent yet.
+          This is how your email lands in {recipientLabel} inbox. Nothing has
+          been sent yet.
         </span>
       </div>
 
@@ -76,24 +77,17 @@ export function EmailPreviewCard({
           <div className="text-xs text-muted-foreground shrink-0">just now</div>
         </div>
 
-        <div className="flex gap-3 px-[18px] pt-3 pb-4">
-          <div className="size-9 shrink-0" aria-hidden="true" />
-          <div className="min-w-0 flex-1 space-y-3">
-            <div
-              className="text-[13.5px] leading-relaxed whitespace-pre-wrap"
-              data-testid="email-preview-body"
-              dangerouslySetInnerHTML={{ __html: bodyHtml }}
-            />
+        <div
+          className="px-[18px] py-2 ml-[47px] text-[13.5px] leading-relaxed whitespace-pre-wrap"
+          dangerouslySetInnerHTML={{ __html: bodyHtml }}
+        />
 
-            {signatureHtml ? (
-              <div
-                className="border-t border-border/50 pt-3 text-xs leading-relaxed text-muted-foreground"
-                data-testid="email-preview-signature"
-                dangerouslySetInnerHTML={{ __html: signatureHtml }}
-              />
-            ) : null}
-          </div>
-        </div>
+        {signatureHtml ? (
+          <div
+            className="ml-[47px] px-[18px] pt-3 mt-3 border-t border-border/50 pb-4 text-xs leading-relaxed text-muted-foreground"
+            dangerouslySetInnerHTML={{ __html: signatureHtml }}
+          />
+        ) : null}
       </div>
     </div>
   )

package/src/components/signal-feedback-inline.tsx

@@ -90,6 +90,7 @@ interface OpportunityPreview {
   description?: string | null
   churnType?: string | null
   churnTypeOptions?: Array<string | OpportunityPreviewOption>
+  nextStep?: string | null
 }
 
 interface OpportunityDraft {
@@ -97,6 +98,7 @@ interface OpportunityDraft {
   amount: string
   description: string
   churnType: string
+  nextStep?: string
 }
 
 interface SignalApprovalLabels {
@@ -459,7 +461,7 @@ function formatAmountDraftValue(value: string | number | null | undefined): stri
 }
 
 function buildOpportunityDraft(preview?: OpportunityPreview): OpportunityDraft {
-  return {
+  const draft: OpportunityDraft = {
     closeDate: preview?.closeDateValue ?? preview?.closeDate ?? "",
     amount: preview?.amountValue === undefined
       ? preview?.amount ?? ""
@@ -467,6 +469,10 @@ function buildOpportunityDraft(preview?: OpportunityPreview): OpportunityDraft {
     description: preview?.description ?? "",
     churnType: preview?.churnType ?? "",
   }
+  if (preview?.nextStep != null) {
+    draft.nextStep = preview.nextStep
+  }
+  return draft
 }
 
 function hasEditableOpportunityPreview(preview?: OpportunityPreview): boolean {
@@ -898,6 +904,17 @@ function Actions() {
                 )}
               </label>
 
+              <label className="space-y-1 text-xs">
+                <span className="font-medium text-muted-foreground">Next Step</span>
+                <textarea
+                  value={opportunityDraft.nextStep ?? ""}
+                  onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, nextStep: event.target.value }))}
+                  rows={2}
+                  placeholder="No next step set"
+                  className="w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+                />
+              </label>
+
               <label className="space-y-1 text-xs">
                 <span className="font-medium text-muted-foreground">Description</span>
                 <textarea

package/src/prototype/__tests__/detail-view-opportunity-preview.test.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { describe, expect, it } from "vitest"
+import { describe, expect, it, vi } from "vitest"
 import { fireEvent, render, screen } from "@testing-library/react"
 
 import { DetailView, type DetailViewProps } from "../prototype-inbox-view"
@@ -66,6 +66,7 @@ describe("DetailView opportunity approval preview", () => {
                 description: "Initial description",
                 churnType: "Churn Risk",
                 churnTypeOptions: ["Churn Risk", "Win Back"],
+                nextStep: "Initial next step",
               })
             },
           })}
@@ -84,7 +85,81 @@ describe("DetailView opportunity approval preview", () => {
     expect((await screen.findByLabelText("Close Date") as HTMLInputElement).value).toBe("2026-06-30")
     expect((screen.getByLabelText("Amount") as HTMLInputElement).value).toBe("$75,000")
     expect((screen.getByLabelText("Churn Type") as HTMLSelectElement).value).toBe("Churn Risk")
+    expect((screen.getByLabelText("Next Step") as HTMLTextAreaElement).value).toBe("Initial next step")
     expect((screen.getByLabelText("Description") as HTMLTextAreaElement).value).toBe("Initial description")
     expect((screen.getByRole("button", { name: /confirm/i }) as HTMLButtonElement).disabled).toBe(false)
   })
+
+  it("passes edited next step with the opportunity draft on confirm", async () => {
+    const onSignalApprove = vi.fn()
+
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalApprovalState: () => "confirming",
+          opportunityPreview: {
+            name: "Churn Risk - WIT-825 Fixture Account",
+            accountName: "WIT-825 Fixture Account",
+            stage: "Prospecting",
+            closeDate: "Jun 30, 2026",
+            closeDateValue: "2026-06-30",
+            amount: "$75,000",
+            amountValue: 75000,
+            description: "Initial description",
+            churnType: "Churn Risk",
+            churnTypeOptions: ["Churn Risk", "Win Back"],
+            nextStep: "Initial next step",
+          },
+          onSignalApprove,
+        })}
+      />,
+    )
+
+    const nextStepInput = screen.getByLabelText("Next Step") as HTMLTextAreaElement
+    fireEvent.change(nextStepInput, { target: { value: "Schedule validation call" } })
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+
+    expect(onSignalApprove).toHaveBeenCalledWith(baseItem, {
+      closeDate: "2026-06-30",
+      amount: "$75,000",
+      churnType: "Churn Risk",
+      description: "Initial description",
+      nextStep: "Schedule validation call",
+    })
+  })
+
+  it("omits untouched empty next step from the opportunity draft on confirm", async () => {
+    const onSignalApprove = vi.fn()
+
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalApprovalState: () => "confirming",
+          opportunityPreview: {
+            name: "Churn Risk - WIT-825 Fixture Account",
+            accountName: "WIT-825 Fixture Account",
+            stage: "Prospecting",
+            closeDate: "Jun 30, 2026",
+            closeDateValue: "2026-06-30",
+            amount: "$75,000",
+            amountValue: 75000,
+            description: "Initial description",
+            churnType: "Churn Risk",
+            churnTypeOptions: ["Churn Risk", "Win Back"],
+          },
+          onSignalApprove,
+        })}
+      />,
+    )
+
+    expect((screen.getByLabelText("Next Step") as HTMLTextAreaElement).value).toBe("")
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+
+    expect(onSignalApprove).toHaveBeenCalledWith(baseItem, {
+      closeDate: "2026-06-30",
+      amount: "$75,000",
+      churnType: "Churn Risk",
+      description: "Initial description",
+    })
+  })
 })

package/src/prototype/__tests__/detail-view-title-slots.test.tsx

@@ -1,5 +1,5 @@
-import { cleanup, render, screen } from "@testing-library/react"
-import { afterEach, describe, expect, it, vi } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
 
 import { DetailView } from "../prototype-inbox-view"
 import type { DetailViewProps } from "../prototype-inbox-view"
@@ -14,10 +14,6 @@ const baseItem = {
   tag1: "Signal",
 }
 
-afterEach(() => {
-  cleanup()
-})
-
 function renderDetailView(overrides: Partial<DetailViewProps> = {}) {
   const props: DetailViewProps = {
     item: baseItem,
@@ -43,23 +39,6 @@ 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>,
-    })
-
-    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-inbox-view.tsx

@@ -488,6 +488,14 @@ 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>