fix(web): make child-thread approval actions easier to find

apps/web/src/components/chat/ChildThreadApprovals.tsx

@@ -7,6 +7,7 @@ import {
   squashAtomCommandFailure,
 } from "@t3tools/client-runtime/state/runtime";
 import { useState } from "react";
+import { ShieldQuestionIcon } from "lucide-react";
 import { useEnvironmentScope } from "../../state/session";
 import { childThreadApprovalsAtom, threadEnvironment } from "../../state/threads";
 import { useAtomCommand } from "../../state/use-atom-command";
@@ -23,7 +24,13 @@ function ChildApproval({ entry }: { entry: ChildThreadApproval }) {
       aria-label={`Approval from ${entry.title}`}
       className="rounded-lg border border-border bg-background p-3 text-xs"
     >
-      <p className="mb-2 font-medium">Approval needed from {entry.title}</p>
+      <div className="mb-2 flex items-start gap-2">
+        <ShieldQuestionIcon aria-hidden className="mt-0.5 size-4 shrink-0 text-warning" />
+        <div className="min-w-0">
+          <p className="font-medium">Your approval is needed</p>
+          <p className="text-muted-foreground wrap-anywhere">{entry.title}</p>
+        </div>
+      </div>
       <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono">
         {approval.detail || approval.requestKind}
       </pre>
@@ -39,9 +46,9 @@ function ChildApproval({ entry }: { entry: ChildThreadApproval }) {
           {fullAccessOverrideExplanation(approval.fullAccessOverride)}
         </p>
       ) : null}
-      <div className="mt-2 flex flex-wrap gap-2">
+      <div className="mt-3 flex flex-wrap items-center gap-2">
         <ComposerPendingApprovalActions
-          presentation="inline"
+          presentation="card"
           requestId={approval.requestId}
           isResponding={responding}
           canRespond={approval.responseCapability === "live"}

apps/web/src/components/chat/ComposerPendingApprovalActions.tsx

@@ -11,7 +11,7 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { composerFloatingLayerProps } from "./composerEventScope";
 
 interface ComposerPendingApprovalActionsProps {
-  presentation?: "composer" | "inline";
+  presentation?: "composer" | "inline" | "card";
   requestId: RuntimeRequestId;
   isResponding: boolean;
   canRespond: boolean;
@@ -61,7 +61,15 @@ export const ComposerPendingApprovalActions = memo(function ComposerPendingAppro
         const content = (
           <>
             {option.warning ? <TriangleAlertIcon className="size-3 shrink-0" /> : null}
-            <span className={presentation === "inline" ? "whitespace-normal" : "max-w-40 truncate"}>
+            <span
+              className={
+                presentation === "inline"
+                  ? "whitespace-normal"
+                  : presentation === "card"
+                    ? "max-w-40 whitespace-normal wrap-anywhere"
+                    : "max-w-40 truncate"
+              }
+            >
               {option.label}
             </span>
           </>
@@ -79,7 +87,7 @@ export const ComposerPendingApprovalActions = memo(function ComposerPendingAppro
             <Button
               key={option.decision}
               {...buttonProps}
-              size="xs"
+              size={presentation === "card" ? "sm-multiline" : "xs"}
               variant={option.decision === "accept" ? "default" : "outline"}
             >
               {content}