chore: sync workspace changes

2026-04-17 23:01:36 +00:00 · 2026-01-27 05:06:33 -08:00 · 2026-01-27 05:06:33 -08:00 · bf58891edf
commit bf58891edf
parent d24f983e2c
139 changed files with 5454 additions and 8986 deletions
--- a/frontend/packages/inspector/src/components/debug/ApprovalsTab.tsx
+++ b/frontend/packages/inspector/src/components/debug/ApprovalsTab.tsx
@ -0,0 +1,105 @@
+import { HelpCircle, Shield } from "lucide-react";
+import type { PermissionEventData, QuestionEventData } from "sandbox-agent";
+import { formatJson } from "../../utils/format";
+
+const ApprovalsTab = ({
+  questionRequests,
+  permissionRequests,
+  questionSelections,
+  onSelectQuestionOption,
+  onAnswerQuestion,
+  onRejectQuestion,
+  onReplyPermission
+}: {
+  questionRequests: QuestionEventData[];
+  permissionRequests: PermissionEventData[];
+  questionSelections: Record<string, string[][]>;
+  onSelectQuestionOption: (requestId: string, optionLabel: string) => void;
+  onAnswerQuestion: (request: QuestionEventData) => void;
+  onRejectQuestion: (requestId: string) => void;
+  onReplyPermission: (requestId: string, reply: "once" | "always" | "reject") => void;
+}) => {
+  return (
+    <>
+      {questionRequests.length === 0 && permissionRequests.length === 0 ? (
+        <div className="card-meta">No pending approvals.</div>
+      ) : (
+        <>
+          {questionRequests.map((request) => {
+            const selections = questionSelections[request.question_id] ?? [];
+            const selected = selections[0] ?? [];
+            const answered = selected.length > 0;
+            return (
+              <div key={request.question_id} className="card">
+                <div className="card-header">
+                  <span className="card-title">
+                    <HelpCircle className="button-icon" style={{ marginRight: 6 }} />
+                    Question
+                  </span>
+                  <span className="pill accent">Pending</span>
+                </div>
+                <div style={{ marginTop: 12 }}>
+                  <div style={{ fontSize: 12, marginBottom: 8 }}>{request.prompt}</div>
+                  <div className="option-list">
+                    {request.options.map((option) => {
+                      const isSelected = selected.includes(option);
+                      return (
+                        <label key={option} className="option-item">
+                          <input
+                            type="radio"
+                            checked={isSelected}
+                            onChange={() => onSelectQuestionOption(request.question_id, option)}
+                          />
+                          <span>{option}</span>
+                        </label>
+                      );
+                    })}
+                  </div>
+                </div>
+                <div className="card-actions">
+                  <button className="button success small" disabled={!answered} onClick={() => onAnswerQuestion(request)}>
+                    Reply
+                  </button>
+                  <button className="button danger small" onClick={() => onRejectQuestion(request.question_id)}>
+                    Reject
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+
+          {permissionRequests.map((request) => (
+            <div key={request.permission_id} className="card">
+              <div className="card-header">
+                <span className="card-title">
+                  <Shield className="button-icon" style={{ marginRight: 6 }} />
+                  Permission
+                </span>
+                <span className="pill accent">Pending</span>
+              </div>
+              <div className="card-meta" style={{ marginTop: 8 }}>
+                {request.action}
+              </div>
+              {request.metadata !== null && request.metadata !== undefined && (
+                <pre className="code-block">{formatJson(request.metadata)}</pre>
+              )}
+              <div className="card-actions">
+                <button className="button success small" onClick={() => onReplyPermission(request.permission_id, "once")}>
+                  Allow Once
+                </button>
+                <button className="button secondary small" onClick={() => onReplyPermission(request.permission_id, "always")}>
+                  Always
+                </button>
+                <button className="button danger small" onClick={() => onReplyPermission(request.permission_id, "reject")}>
+                  Reject
+                </button>
+              </div>
+            </div>
+          ))}
+        </>
+      )}
+    </>
+  );
+};
+
+export default ApprovalsTab;