| ... | @@ -888,64 +888,68 @@ export default function ChatView() { | ... | @@ -888,64 +888,68 @@ export default function ChatView() { |
| 888 | )} | 888 | )} |
| 889 | | 889 | |
| 890 | {pendingApprovals.length > 0 && ( | 890 | {pendingApprovals.length > 0 && ( |
| 891 | <div className="mx-4 mt-3 space-y-2"> | 891 | <div className="px-5 pt-3"> |
| 892 | {pendingApprovals.map((approval) => { | 892 | <div className="mx-auto max-w-3xl space-y-2"> |
| 893 | const isResponding = respondingRequestIds.includes(approval.requestId); | 893 | {pendingApprovals.map((approval) => { |
| 894 | return ( | 894 | const isResponding = respondingRequestIds.includes(approval.requestId); |
| 895 | <div | 895 | return ( |
| 896 | key={approval.requestId} | 896 | <div |
| 897 | className="rounded-lg border border-amber-300/20 bg-amber-500/[0.07] px-3 py-2" | 897 | key={approval.requestId} |
| 898 | > | 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 | <p className="text-xs font-medium text-amber-100"> | 899 | > |
| 900 | {approval.requestKind === "command" | 900 | <p className="text-xs font-medium text-amber-900 dark:text-amber-100"> |
| 901 | ? "Command approval requested" | 901 | {approval.requestKind === "command" |
| 902 | : "File-change approval requested"} | 902 | ? "Command approval requested" |
| 903 | </p> | 903 | : "File-change approval requested"} |
| 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} | | |
| 910 | </p> | 904 | </p> |
| 911 | )} | 905 | {approval.detail && ( |
| 912 | <div className="mt-2 flex flex-wrap gap-1.5"> | 906 | <p |
| 913 | <button | 907 | className="mt-1 truncate font-mono text-[11px] text-amber-900/80 dark:text-amber-100/75" |
| 914 | type="button" | 908 | title={approval.detail} |
| 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" | 909 | > |
| 916 | disabled={isResponding} | 910 | {approval.detail} |
| 917 | onClick={() => void onRespondToApproval(approval.requestId, "accept")} | 911 | </p> |
| 918 | > | 912 | )} |
| 919 | Approve once | 913 | <div className="mt-2 flex flex-wrap gap-1.5"> |
| 920 | </button> | 914 | <button |
| 921 | <button | 915 | type="button" |
| 922 | 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" |
| 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" | 917 | disabled={isResponding} |
| 924 | disabled={isResponding} | 918 | onClick={() => void onRespondToApproval(approval.requestId, "accept")} |
| 925 | onClick={() => void onRespondToApproval(approval.requestId, "acceptForSession")} | 919 | > |
| 926 | > | 920 | Approve once |
| 927 | Always allow this session | 921 | </button> |
| 928 | </button> | 922 | <button |
| 929 | <button | 923 | type="button" |
| 930 | 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" |
| 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" | 925 | disabled={isResponding} |
| 932 | disabled={isResponding} | 926 | onClick={() => |
| 933 | onClick={() => void onRespondToApproval(approval.requestId, "decline")} | 927 | void onRespondToApproval(approval.requestId, "acceptForSession") |
| 934 | > | 928 | } |
| 935 | Decline | 929 | > |
| 936 | </button> | 930 | Always allow this session |
| 937 | <button | 931 | </button> |
| 938 | type="button" | 932 | <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" | 933 | type="button" |
| 940 | disabled={isResponding} | 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" |
| 941 | onClick={() => void onRespondToApproval(approval.requestId, "cancel")} | 935 | disabled={isResponding} |
| 942 | > | 936 | onClick={() => void onRespondToApproval(approval.requestId, "decline")} |
| 943 | Cancel turn | 937 | > |
| 944 | </button> | 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> |
| 945 | </div> | 949 | </div> |
| 946 | </div> | 950 | ); |
| 947 | ); | 951 | })} |
| 948 | })} | 952 | </div> |
| 949 | </div> | 953 | </div> |
| 950 | )} | 954 | )} |
| 951 | | 955 | |
Julius Marminge <julius0216@outlook.com> 2026-02-12 18:45:46-08:00