Showing the changes to apps/web/src (2 of 4 files). Show all
Unified · Split
| @@ -0,0 +1,28 @@ | ||
| 1 | +import { ApprovalRequestId } from "@t3tools/contracts"; | |
| 2 | +import { renderToStaticMarkup } from "react-dom/server"; | |
| 3 | +import { describe, expect, it } from "vite-plus/test"; | |
| 4 | + | |
| 5 | +import { ComposerPendingApprovalPanel } from "./ComposerPendingApprovalPanel"; | |
| 6 | + | |
| 7 | +describe("ComposerPendingApprovalPanel", () => { | |
| 8 | + it("renders complete multiline command details without hover or truncation", () => { | |
| 9 | + const detail = `bun run release -- ${"long-argument ".repeat(20)}\nsecond line`; | |
| 10 | + const markup = renderToStaticMarkup( | |
| 11 | + <ComposerPendingApprovalPanel | |
| 12 | + approval={{ | |
| 13 | + requestId: ApprovalRequestId.make("approval-1"), | |
| 14 | + requestKind: "command", | |
| 15 | + createdAt: "2026-07-18T00:00:00.000Z", | |
| 16 | + detail, | |
| 17 | + }} | |
| 18 | + pendingCount={1} | |
| 19 | + />, | |
| 20 | + ); | |
| 21 | + | |
| 22 | + expect(markup).toContain('data-approval-detail="complete"'); | |
| 23 | + expect(markup).toContain('aria-label="Command"'); | |
| 24 | + expect(markup).toContain(detail); | |
| 25 | + expect(markup).not.toContain("truncate"); | |
| 26 | + expect(markup).not.toContain("line-clamp"); | |
| 27 | + }); | |
| 28 | +}); | |
| @@ -16,6 +16,12 @@ export const ComposerPendingApprovalPanel = memo(function ComposerPendingApprova · 15 unmodified lines | ||
| 16 | 16 | : approval.requestKind === "file-read" |
| 17 | 17 | ? "File-read approval requested" |
| 18 | 18 | : "File-change approval requested"; |
| 19 | + const detailLabel = | |
| 20 | + approval.requestKind === "command" | |
| 21 | + ? "Command" | |
| 22 | + : approval.requestKind === "file-read" | |
| 23 | + ? "File to read" | |
| 24 | + : "File change"; | |
| 19 | 25 | |
| 20 | 26 | return ( |
| 21 | 27 | <div className="px-4 py-3.5 sm:px-5 sm:py-4"> |
| @@ -26,6 +32,18 @@ export const ComposerPendingApprovalPanel = memo(function ComposerPendingApprova · 4 unmodified lines | ||
| 26 | 32 | <span className="text-xs text-muted-foreground">1/{pendingCount}</span> |
| 27 | 33 | ) : null} |
| 28 | 34 | </div> |
| 35 | + {approval.detail ? ( | |
| 36 | + <div className="mt-3 rounded-lg border border-border/65 bg-background/70 p-3"> | |
| 37 | + <p className="text-xs font-medium text-muted-foreground">{detailLabel}</p> | |
| 38 | + <pre | |
| 39 | + aria-label={detailLabel} | |
| 40 | + className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground" | |
| 41 | + data-approval-detail="complete" | |
| 42 | + > | |
| 43 | + {approval.detail} | |
| 44 | + </pre> | |
| 45 | + </div> | |
| 46 | + ) : null} | |
| 29 | 47 | </div> |
| 30 | 48 | ); |
| 31 | 49 | }); |