@stigmer/react 0.0.51 → 0.0.53

package/src/execution/ApprovalCard.tsx

@@ -8,7 +8,8 @@ import {
   resolveToolCategory,
   extractPrimaryArgFromPreview,
 } from "./tool-categories";
-import { FilePathLink } from "./FilePathLink";
+import { CATEGORY_ICON } from "./ToolCallItem";
+import { ToolArgsView } from "./ToolArgsView";
 
 export interface ApprovalCardProps {
   readonly pendingApproval: PendingApproval;
@@ -24,16 +25,16 @@ export interface ApprovalCardProps {
   readonly className?: string;
 }
 
-const TRUNCATION_LINE_LIMIT = 8;
-
 /**
- * Renders a pending tool-call approval request as a prominent card
- * with Approve, Skip, and Reject action buttons.
+ * Renders a pending tool-call approval request with the same visual
+ * structure as an expanded {@link ToolCallItem} in the history list.
+ *
+ * The compact header row matches the ToolCallItem layout:
+ *   [CategoryIcon] Label  primaryArg  [⏳ waiting Xm]
  *
- * Tool-type-aware: shell tools render the command in a terminal-style
- * block, file tools show the path prominently, and destructive tools
- * (delete) use warning styling. Falls back to generic JSON args
- * display for unrecognized tools.
+ * Arguments are rendered through the shared {@link ToolArgsView}
+ * dispatch, ensuring pixel-level parity between the approval
+ * preview and the post-execution detail view.
  *
  * @example
  * ```tsx
@@ -66,250 +67,141 @@ export function ApprovalCard({
     }
   }, [isSubmitting]);
 
-  const categoryInfo = resolveToolCategory(pendingApproval.toolName);
-  const primaryArg = extractPrimaryArgFromPreview(
+  const categoryInfo = resolveToolCategory(
     pendingApproval.toolName,
-    pendingApproval.argsPreview,
+    pendingApproval.mcpServerSlug,
   );
 
-  const { header, headerIcon, borderClass } = getApprovalHeader(
-    categoryInfo.category,
-    pendingApproval.fromSubAgent,
+  const CategoryIcon = CATEGORY_ICON[categoryInfo.category];
+
+  const primaryArg = useMemo(
+    () =>
+      extractPrimaryArgFromPreview(
+        pendingApproval.toolName,
+        pendingApproval.argsPreview,
+        pendingApproval.mcpServerSlug,
+      ),
+    [
+      pendingApproval.toolName,
+      pendingApproval.argsPreview,
+      pendingApproval.mcpServerSlug,
+    ],
   );
 
+  const parsedArgs = useMemo<Record<string, unknown> | null>(() => {
+    if (!pendingApproval.argsPreview) return null;
+    try {
+      const parsed = JSON.parse(pendingApproval.argsPreview);
+      if (typeof parsed === "object" && parsed !== null) {
+        return parsed as Record<string, unknown>;
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  }, [pendingApproval.argsPreview]);
+
+  const borderClass =
+    categoryInfo.category === "delete"
+      ? "border-destructive/30 bg-destructive/5"
+      : "border-warning/30 bg-warning/5";
+
   return (
     <div
       role="alert"
       aria-label={`Approval required for ${pendingApproval.toolName}`}
-      className={cn(
-        "rounded-lg border px-4 py-3",
-        borderClass,
-        className,
-      )}
+      className={cn("rounded-lg border", borderClass, className)}
     >
-      {/* Header */}
-      <div className="flex items-center gap-2 text-sm font-medium text-warning">
-        {headerIcon}
-        <span>{header}</span>
-      </div>
-
-      {/* Sub-agent attribution */}
-      {pendingApproval.fromSubAgent && pendingApproval.subAgentName && (
-        <p className="mt-1.5 text-xs text-muted-foreground">
-          Sub-agent{" "}
-          <span className="font-medium text-foreground">
-            {pendingApproval.subAgentName}
-          </span>{" "}
-          wants to execute a tool
-        </p>
-      )}
+      {/* Compact header row — matches ToolCallItem layout */}
+      <div
+        className={cn(
+          "flex items-center gap-2 px-2.5 py-1.5 text-xs",
+          "border-b border-border/30",
+        )}
+      >
+        <span className="shrink-0 text-warning" aria-hidden="true">
+          <CategoryIcon />
+        </span>
 
-      {/* Tool name badge */}
-      <div className="mt-2 flex items-center gap-2">
-        <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground">
-          {categoryInfo.label}
+        <span className="min-w-0 flex-1 flex items-baseline gap-1.5 overflow-hidden">
+          <span className="shrink-0 font-medium text-foreground">
+            {categoryInfo.label}
+          </span>
+          {primaryArg && (
+            <span className="min-w-0 truncate font-mono text-muted-foreground">
+              {primaryArg}
+            </span>
+          )}
         </span>
-        <WaitingDuration requestedAt={pendingApproval.requestedAt} />
-      </div>
 
-      {/* Approval message */}
-      {pendingApproval.message && (
-        <p className="mt-2 text-sm text-foreground">
-          {pendingApproval.message}
-        </p>
-      )}
+        <WaitingDuration requestedAt={pendingApproval.requestedAt} />
 
-      {/* Category-specific args preview */}
-      <div className="mt-2">
-        <CategoryArgsPreview
-          category={categoryInfo.category}
-          primaryArg={primaryArg}
-          argsPreview={pendingApproval.argsPreview}
-        />
+        <span className="shrink-0 text-warning" aria-hidden="true">
+          <ClockIcon />
+        </span>
       </div>
 
-      {/* Action buttons */}
-      <div className="mt-3 flex items-center gap-2">
-        <ActionButton
-          label="Approve"
-          action={ApprovalAction.APPROVE}
-          activeAction={activeAction}
-          isSubmitting={isSubmitting}
-          onClick={handleAction}
-          variant="approve"
-        />
-        <ActionButton
-          label="Skip"
-          action={ApprovalAction.SKIP}
-          activeAction={activeAction}
-          isSubmitting={isSubmitting}
-          onClick={handleAction}
-          variant="skip"
-        />
-        <ActionButton
-          label="Reject"
-          action={ApprovalAction.REJECT}
-          activeAction={activeAction}
-          isSubmitting={isSubmitting}
-          onClick={handleAction}
-          variant="reject"
-        />
+      {/* Body */}
+      <div className="px-3 py-2.5 space-y-2">
+        {/* Sub-agent attribution */}
+        {pendingApproval.fromSubAgent && pendingApproval.subAgentName && (
+          <p className="text-xs text-muted-foreground">
+            Sub-agent{" "}
+            <span className="font-medium text-foreground">
+              {pendingApproval.subAgentName}
+            </span>{" "}
+            wants to execute this tool
+          </p>
+        )}
+
+        {/* Approval message */}
+        {pendingApproval.message && (
+          <p className="text-xs text-foreground">
+            {pendingApproval.message}
+          </p>
+        )}
+
+        {/* Category-specific args preview — shared with ToolCallDetail */}
+        {parsedArgs && (
+          <ToolArgsView
+            toolName={pendingApproval.toolName}
+            args={parsedArgs}
+            mcpServerSlug={pendingApproval.mcpServerSlug}
+          />
+        )}
+
+        {/* Action buttons */}
+        <div className="flex items-center gap-2 pt-1">
+          <ActionButton
+            label="Approve"
+            action={ApprovalAction.APPROVE}
+            activeAction={activeAction}
+            isSubmitting={isSubmitting}
+            onClick={handleAction}
+            variant="approve"
+          />
+          <ActionButton
+            label="Skip"
+            action={ApprovalAction.SKIP}
+            activeAction={activeAction}
+            isSubmitting={isSubmitting}
+            onClick={handleAction}
+            variant="skip"
+          />
+          <ActionButton
+            label="Reject"
+            action={ApprovalAction.REJECT}
+            activeAction={activeAction}
+            isSubmitting={isSubmitting}
+            onClick={handleAction}
+            variant="reject"
+          />
+        </div>
       </div>
     </div>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Category-aware header
-// ---------------------------------------------------------------------------
-
-function getApprovalHeader(
-  category: string,
-  fromSubAgent: boolean,
-): {
-  header: string;
-  headerIcon: React.JSX.Element;
-  borderClass: string;
-} {
-  if (fromSubAgent) {
-    return {
-      header: "Sub-agent approval required",
-      headerIcon: <ShieldIcon />,
-      borderClass: "border-warning/30 bg-warning/5",
-    };
-  }
-
-  switch (category) {
-    case "shell":
-      return {
-        header: "Execute command",
-        headerIcon: <TerminalApprovalIcon />,
-        borderClass: "border-warning/30 bg-warning/5",
-      };
-    case "delete":
-      return {
-        header: "Delete file",
-        headerIcon: <ShieldIcon />,
-        borderClass: "border-destructive/30 bg-destructive/5",
-      };
-    default:
-      return {
-        header: "Approval required",
-        headerIcon: <ShieldIcon />,
-        borderClass: "border-warning/30 bg-warning/5",
-      };
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Category-specific args preview
-// ---------------------------------------------------------------------------
-
-function CategoryArgsPreview({
-  category,
-  primaryArg,
-  argsPreview,
-}: {
-  category: string;
-  primaryArg: string | null;
-  argsPreview: string;
-}) {
-  if (category === "shell" && primaryArg) {
-    return <ShellArgsPreview command={primaryArg} />;
-  }
-
-  if ((category === "read" || category === "write" || category === "edit" || category === "delete") && primaryArg) {
-    return <FileArgsPreview path={primaryArg} argsPreview={argsPreview} />;
-  }
-
-  if ((category === "search" || category === "list") && primaryArg) {
-    return <SearchArgsPreview pattern={primaryArg} />;
-  }
-
-  if (!argsPreview) return null;
-  return <GenericArgsPreview content={argsPreview} />;
-}
-
-function ShellArgsPreview({ command }: { command: string }) {
-  return (
-    <div className="rounded-md border border-border bg-[var(--stgm-terminal-bg,#1a1a2e)] p-2.5">
-      <pre className="whitespace-pre-wrap break-words font-mono text-xs text-[var(--stgm-terminal-fg,#e0e0e0)]">
-        <span className="select-none text-[var(--stgm-terminal-prompt,#6b7280)]">$ </span>
-        {command}
-      </pre>
-    </div>
-  );
-}
-
-function FileArgsPreview({
-  path,
-  argsPreview,
-}: {
-  path: string;
-  argsPreview: string;
-}) {
-  return (
-    <div className="space-y-1.5">
-      <div className="flex items-center gap-1.5 text-xs">
-        <FilePathIcon />
-        <FilePathLink path={path} className="text-xs" />
-      </div>
-      {argsPreview && <GenericArgsPreview content={argsPreview} />}
-    </div>
-  );
-}
-
-function SearchArgsPreview({ pattern }: { pattern: string }) {
-  return (
-    <div className="flex items-center gap-1.5 text-xs">
-      <span className="text-muted-foreground">Pattern:</span>
-      <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-foreground">
-        {pattern}
-      </code>
-    </div>
-  );
-}
-
-function GenericArgsPreview({ content }: { content: string }) {
-  const formatted = useMemo(() => {
-    try {
-      const parsed = JSON.parse(content);
-      return JSON.stringify(parsed, null, 2);
-    } catch {
-      return content;
-    }
-  }, [content]);
-
-  const lines = formatted.split("\n");
-  const needsTruncation = lines.length > TRUNCATION_LINE_LIMIT;
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const displayContent =
-    needsTruncation && !isExpanded
-      ? lines.slice(0, TRUNCATION_LINE_LIMIT).join("\n") + "\n\u2026"
-      : formatted;
-
-  return (
-    <div className="space-y-1">
-      <span className="text-xs font-medium text-muted-foreground">
-        Arguments
-      </span>
-      <pre className="max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 p-2 font-mono text-xs text-foreground">
-        {displayContent}
-      </pre>
-      {needsTruncation && (
-        <button
-          type="button"
-          onClick={() => setIsExpanded((v) => !v)}
-          className="text-xs font-medium text-primary transition-colors hover:text-primary/80"
-        >
-          {isExpanded ? "Show less" : `Show all ${lines.length} lines`}
-        </button>
-      )}
-    </div>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // Internal sub-components
 // ---------------------------------------------------------------------------
@@ -366,9 +258,6 @@ function ActionButton({
   );
 }
 
-/**
- * Live-ticking elapsed time since the approval was requested.
- */
 function WaitingDuration({ requestedAt }: { requestedAt: string }) {
   const startMs = useMemo(() => {
     if (!requestedAt) return null;
@@ -393,8 +282,8 @@ function WaitingDuration({ requestedAt }: { requestedAt: string }) {
   if (elapsed === null) return null;
 
   return (
-    <span className="text-xs text-muted-foreground">
-      waiting {formatElapsed(elapsed)}
+    <span className="shrink-0 text-xs text-muted-foreground">
+      {formatElapsed(elapsed)}
     </span>
   );
 }
@@ -421,47 +310,7 @@ function formatElapsed(ms: number): string {
 // Inline SVG icons
 // ---------------------------------------------------------------------------
 
-function ShieldIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 14 14"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M7 1L2 3.5V6.5C2 9.75 4.1 12.35 7 13C9.9 12.35 12 9.75 12 6.5V3.5L7 1Z" />
-      <path d="M7 5V8" />
-      <circle cx="7" cy="10" r="0.5" fill="currentColor" stroke="none" />
-    </svg>
-  );
-}
-
-function TerminalApprovalIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 14 14"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <rect x="1" y="2" width="12" height="10" rx="2" />
-      <path d="M4 5.5L6 7.5L4 9.5" />
-      <path d="M7.5 9.5H10" />
-    </svg>
-  );
-}
-
-function FilePathIcon() {
+function ClockIcon() {
   return (
     <svg
       width="10"
@@ -469,14 +318,12 @@ function FilePathIcon() {
       viewBox="0 0 12 12"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.2"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
-      aria-hidden="true"
     >
-      <path d="M7 1H3C2.45 1 2 1.45 2 2V10C2 10.55 2.45 11 3 11H9C9.55 11 10 10.55 10 10V4L7 1Z" />
-      <path d="M7 1V4H10" />
+      <circle cx="6" cy="6" r="4.5" />
+      <path d="M6 3.5V6L7.5 7.5" />
     </svg>
   );
 }