authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-12 18:45:46-08:00
committergravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-12 18:45:46-08:00
log6d6991bca199d9100ae152b5db1d55195d395688
treed00fa16fd614e0e999938f1f6f7f50eda5032eca
parent057770ebfcbf413b34930fe8a47367cda74f1c8a

Refine pending approval panel styles

- Constrain pending approval cards to a centered max-width section with updated padding - Improve light/dark theme contrast for approval detail text and action buttons - Keep existing approval actions and behavior unchanged while updating visual hierarchy

1 files changed, 60 insertions(+), 56 deletions(-)

apps/web/src/components/ChatView.tsx+60-56
......@@ -888,64 +888,68 @@ export default function ChatView() {
888888 )}
889889
890890 {pendingApprovals.length > 0 && (
891 <div className="mx-4 mt-3 space-y-2">
892 {pendingApprovals.map((approval) => {
893 const isResponding = respondingRequestIds.includes(approval.requestId);
894 return (
895 <div
896 key={approval.requestId}
897 className="rounded-lg border border-amber-300/20 bg-amber-500/[0.07] px-3 py-2"
898 >
899 <p className="text-xs font-medium text-amber-100">
900 {approval.requestKind === "command"
901 ? "Command approval requested"
902 : "File-change approval requested"}
903 </p>
904 {approval.detail && (
905 <p
906 className="mt-1 truncate font-mono text-[11px] text-amber-100/75"
907 title={approval.detail}
908 >
909 {approval.detail}
891 <div className="px-5 pt-3">
892 <div className="mx-auto max-w-3xl space-y-2">
893 {pendingApprovals.map((approval) => {
894 const isResponding = respondingRequestIds.includes(approval.requestId);
895 return (
896 <div
897 key={approval.requestId}
898 className="rounded-lg border border-amber-300/40 bg-amber-50 px-3 py-2 dark:border-amber-300/20 dark:bg-amber-500/[0.07]"
899 >
900 <p className="text-xs font-medium text-amber-900 dark:text-amber-100">
901 {approval.requestKind === "command"
902 ? "Command approval requested"
903 : "File-change approval requested"}
910904 </p>
911 )}
912 <div className="mt-2 flex flex-wrap gap-1.5">
913 <button
914 type="button"
915 className="rounded-md border border-border bg-accent px-2 py-1 text-[11px] text-foreground transition-colors duration-150 hover:bg-accent/80 disabled:cursor-not-allowed disabled:opacity-50"
916 disabled={isResponding}
917 onClick={() => void onRespondToApproval(approval.requestId, "accept")}
918 >
919 Approve once
920 </button>
921 <button
922 type="button"
923 className="rounded-md border border-sky-300/30 bg-sky-500/15 px-2 py-1 text-[11px] text-sky-100 transition-colors duration-150 hover:bg-sky-500/22 disabled:cursor-not-allowed disabled:opacity-50"
924 disabled={isResponding}
925 onClick={() => void onRespondToApproval(approval.requestId, "acceptForSession")}
926 >
927 Always allow this session
928 </button>
929 <button
930 type="button"
931 className="rounded-md border border-border px-2 py-1 text-[11px] text-foreground/90 transition-colors duration-150 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
932 disabled={isResponding}
933 onClick={() => void onRespondToApproval(approval.requestId, "decline")}
934 >
935 Decline
936 </button>
937 <button
938 type="button"
939 className="rounded-md border border-rose-300/30 bg-rose-500/12 px-2 py-1 text-[11px] text-rose-100 transition-colors duration-150 hover:bg-rose-500/20 disabled:cursor-not-allowed disabled:opacity-50"
940 disabled={isResponding}
941 onClick={() => void onRespondToApproval(approval.requestId, "cancel")}
942 >
943 Cancel turn
944 </button>
905 {approval.detail && (
906 <p
907 className="mt-1 truncate font-mono text-[11px] text-amber-900/80 dark:text-amber-100/75"
908 title={approval.detail}
909 >
910 {approval.detail}
911 </p>
912 )}
913 <div className="mt-2 flex flex-wrap gap-1.5">
914 <button
915 type="button"
916 className="rounded-md border border-border bg-accent px-2 py-1 text-[11px] text-foreground transition-colors duration-150 hover:bg-accent/80 disabled:cursor-not-allowed disabled:opacity-50"
917 disabled={isResponding}
918 onClick={() => void onRespondToApproval(approval.requestId, "accept")}
919 >
920 Approve once
921 </button>
922 <button
923 type="button"
924 className="rounded-md border border-sky-300/70 bg-sky-100 px-2 py-1 text-[11px] text-sky-800 transition-colors duration-150 hover:bg-sky-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-sky-300/30 dark:bg-sky-500/15 dark:text-sky-100 dark:hover:bg-sky-500/22"
925 disabled={isResponding}
926 onClick={() =>
927 void onRespondToApproval(approval.requestId, "acceptForSession")
928 }
929 >
930 Always allow this session
931 </button>
932 <button
933 type="button"
934 className="rounded-md border border-border px-2 py-1 text-[11px] text-foreground/90 transition-colors duration-150 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
935 disabled={isResponding}
936 onClick={() => void onRespondToApproval(approval.requestId, "decline")}
937 >
938 Decline
939 </button>
940 <button
941 type="button"
942 className="rounded-md border border-rose-300/70 bg-rose-100 px-2 py-1 text-[11px] text-rose-800 transition-colors duration-150 hover:bg-rose-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-rose-300/30 dark:bg-rose-500/12 dark:text-rose-100 dark:hover:bg-rose-500/20"
943 disabled={isResponding}
944 onClick={() => void onRespondToApproval(approval.requestId, "cancel")}
945 >
946 Cancel turn
947 </button>
948 </div>
945949 </div>
946 </div>
947 );
948 })}
950 );
951 })}
952 </div>
949953 </div>
950954 )}
951955