Improve issue approval visibility

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/ApprovalCard.tsx

@@ -1,10 +1,11 @@
 import { CheckCircle2, XCircle, Clock } from "lucide-react";
 import { Link } from "@/lib/router";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Identity } from "./Identity";
 import { approvalLabel, typeIcon, defaultTypeIcon, ApprovalPayloadRenderer } from "./ApprovalPayload";
 import { timeAgo } from "../lib/timeAgo";
 import type { Approval, Agent } from "@paperclipai/shared";
+import { cn } from "@/lib/utils";
 
 function statusIcon(status: string) {
   if (status === "approved") return <CheckCircle2 className="h-3.5 w-3.5 text-green-600 dark:text-green-400" />;
@@ -96,9 +97,12 @@ export function ApprovalCard({
       {(detailLink || onOpen) ? (
         <div className="mt-3">
           {detailLink ? (
-            <Button variant="ghost" size="sm" className="text-xs px-0" asChild>
-              <Link to={detailLink}>View details</Link>
-            </Button>
+            <Link
+              to={detailLink}
+              className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "px-0 text-xs")}
+            >
+              View details
+            </Link>
           ) : (
             <Button variant="ghost" size="sm" className="text-xs px-0" onClick={onOpen}>
               View details

ui/src/components/ApprovalPayload.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { ApprovalPayloadRenderer, approvalLabel } from "./ApprovalPayload";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("approvalLabel", () => {
+  it("uses payload titles for generic board approvals", () => {
+    expect(
+      approvalLabel("request_board_approval", {
+        title: "Reply with an ASCII frog",
+      }),
+    ).toBe("Board Approval: Reply with an ASCII frog");
+  });
+});
+
+describe("ApprovalPayloadRenderer", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it("renders request_board_approval payload fields without falling back to raw JSON", () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <ApprovalPayloadRenderer
+          type="request_board_approval"
+          payload={{
+            title: "Reply with an ASCII frog",
+            summary: "Board asked for approval before posting the frog.",
+            recommendedAction: "Approve the frog reply.",
+            nextActionOnApproval: "Post the frog comment on the issue.",
+            proposedComment: "(o)<",
+          }}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Reply with an ASCII frog");
+    expect(container.textContent).toContain("Board asked for approval before posting the frog.");
+    expect(container.textContent).toContain("Approve the frog reply.");
+    expect(container.textContent).toContain("Post the frog comment on the issue.");
+    expect(container.textContent).toContain("(o)<");
+    expect(container.textContent).not.toContain("\"recommendedAction\"");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+});

ui/src/components/ApprovalPayload.tsx

@@ -8,11 +8,26 @@ export const typeLabel: Record<string, string> = {
   request_board_approval: "Board Approval",
 };
 
+function firstNonEmptyString(...values: unknown[]): string | null {
+  for (const value of values) {
+    if (typeof value === "string" && value.trim().length > 0) {
+      return value.trim();
+    }
+  }
+  return null;
+}
+
 /** Build a contextual label for an approval, e.g. "Hire Agent: Designer" */
 export function approvalLabel(type: string, payload?: Record<string, unknown> | null): string {
   const base = typeLabel[type] ?? type;
-  if (type === "hire_agent" && payload?.name) {
-    return `${base}: ${String(payload.name)}`;
+  const subject = firstNonEmptyString(
+    payload?.title,
+    payload?.name,
+    payload?.summary,
+    payload?.recommendedAction,
+  );
+  if (subject) {
+    return `${base}: ${subject}`;
   }
   return base;
 }
@@ -129,8 +144,39 @@ export function BudgetOverridePayload({ payload }: { payload: Record<string, unk
   );
 }
 
+export function BoardApprovalPayload({ payload }: { payload: Record<string, unknown> }) {
+  return (
+    <div className="mt-3 space-y-2 text-sm">
+      <PayloadField label="Title" value={payload.title} />
+      {!!payload.summary && (
+        <div className="flex items-start gap-2">
+          <span className="text-muted-foreground w-20 sm:w-24 shrink-0 text-xs pt-0.5">Summary</span>
+          <span className="text-muted-foreground">{String(payload.summary)}</span>
+        </div>
+      )}
+      {!!payload.recommendedAction && (
+        <div className="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
+          Recommended: {String(payload.recommendedAction)}
+        </div>
+      )}
+      {!!payload.nextActionOnApproval && (
+        <div className="flex items-start gap-2">
+          <span className="text-muted-foreground w-20 sm:w-24 shrink-0 text-xs pt-0.5">On approval</span>
+          <span>{String(payload.nextActionOnApproval)}</span>
+        </div>
+      )}
+      {!!payload.proposedComment && (
+        <div className="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground whitespace-pre-wrap font-mono max-h-48 overflow-y-auto">
+          {String(payload.proposedComment)}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ApprovalPayloadRenderer({ type, payload }: { type: string; payload: Record<string, unknown> }) {
   if (type === "hire_agent") return <HireAgentPayload payload={payload} />;
   if (type === "budget_override_required") return <BudgetOverridePayload payload={payload} />;
+  if (type === "request_board_approval") return <BoardApprovalPayload payload={payload} />;
   return <CeoStrategyPayload payload={payload} />;
 }