@useatlas/react 0.0.1

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@useatlas/react",
+  "version": "0.0.1",
+  "description": "Embeddable Atlas chat UI for React applications",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./styles.css": "./src/styles.css"
+  },
+  "publishConfig": {
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.js"
+        },
+        "require": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/index.cjs"
+        }
+      },
+      "./hooks": {
+        "import": {
+          "types": "./dist/hooks.d.ts",
+          "default": "./dist/hooks.js"
+        },
+        "require": {
+          "types": "./dist/hooks.d.cts",
+          "default": "./dist/hooks.cjs"
+        }
+      },
+      "./styles.css": "./dist/styles.css"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup && cp src/styles.css dist/styles.css && bun x @tailwindcss/cli -i src/widget.css -o dist/widget.css --minify",
+    "dev": "tsup --watch",
+    "type": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@ai-sdk/react": ">=3.0.0",
+    "ai": ">=6.0.0",
+    "lucide-react": ">=0.400.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "react-syntax-highlighter": ">=15.0.0",
+    "recharts": ">=2.0.0",
+    "tailwindcss": ">=4.0.0",
+    "xlsx": ">=0.18.0"
+  },
+  "peerDependenciesMeta": {
+    "lucide-react": {
+      "optional": true
+    },
+    "react-syntax-highlighter": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    },
+    "xlsx": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@useatlas/types": "workspace:*",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "radix-ui": "^1.4.3",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@ai-sdk/react": "^3.0.99",
+    "@tailwindcss/cli": "^4.2.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "ai": "^6.0.97",
+    "happy-dom": "16.6.0",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-syntax-highlighter": "^16.1.0",
+    "recharts": "^3.7.0",
+    "tailwindcss": "^4.2.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3",
+    "xlsx": "^0.18.5"
+  }
+}

package/src/components/__tests__/tool-renderers.test.tsx

@@ -0,0 +1,239 @@
+import { describe, it, expect, mock } from "bun:test";
+import type React from "react";
+import { render, screen } from "@testing-library/react";
+import type { ToolRendererProps, ToolRenderers } from "../../lib/tool-renderer-types";
+
+// Mock the `ai` module — must mock ALL named exports used by the component tree
+mock.module("ai", () => ({
+  getToolName: (part: Record<string, unknown>) => {
+    if (!part.toolName) throw new Error("Unknown tool part");
+    return part.toolName as string;
+  },
+  isToolUIPart: () => true,
+  DefaultChatTransport: class {},
+}));
+
+// Import after mocks
+const { ToolPart } = await import("../chat/tool-part");
+
+function makePart(toolName: string, args: Record<string, unknown>, output: unknown, state = "output-available") {
+  return { toolName, input: args, output, state };
+}
+
+describe("ToolPart with custom renderers", () => {
+  it("uses custom renderer when provided for a tool", () => {
+    function CustomSQL({ toolName, args, result, isLoading }: ToolRendererProps) {
+      return (
+        <div data-testid="custom-sql">
+          {toolName}|{String(args.sql)}|{JSON.stringify(result)}|{String(isLoading)}
+        </div>
+      );
+    }
+
+    const renderers: ToolRenderers = { executeSQL: CustomSQL };
+    const part = makePart("executeSQL", { sql: "SELECT 1" }, { success: true, columns: ["a"], rows: [{ a: 1 }] });
+
+    render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    const el = screen.getByTestId("custom-sql");
+    expect(el.textContent).toContain("executeSQL");
+    expect(el.textContent).toContain("SELECT 1");
+    expect(el.textContent).toContain("false"); // isLoading should be false when state is output-available
+  });
+
+  it("falls back to default renderer when no custom renderer provided", () => {
+    const part = makePart("executeSQL", { sql: "SELECT 1" }, { success: true, columns: [], rows: [] });
+
+    // No toolRenderers prop → default renderer
+    const { container } = render(<ToolPart part={part} />);
+
+    // Default SQL card renders — should not have our custom testid
+    expect(screen.queryByTestId("custom-sql")).toBeNull();
+    // The default card renders something (the SQL result card)
+    expect(container.innerHTML.length).toBeGreaterThan(0);
+  });
+
+  it("falls back to default renderer for tools not in the renderers map", () => {
+    function CustomSQL() {
+      return <div data-testid="custom-sql">custom</div>;
+    }
+
+    const renderers: ToolRenderers = { executeSQL: CustomSQL };
+    const part = makePart("explore", { command: "ls" }, "file.txt");
+
+    render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    // explore is not in renderers → uses default ExploreCard
+    expect(screen.queryByTestId("custom-sql")).toBeNull();
+  });
+
+  it("passes isLoading=true and result=null when tool is still running", () => {
+    const receivedProps: ToolRendererProps[] = [];
+    function Spy(props: ToolRendererProps) {
+      receivedProps.push(props);
+      return <div data-testid="custom-explore">{String(props.isLoading)}</div>;
+    }
+
+    const renderers: ToolRenderers = { explore: Spy };
+    const part = makePart("explore", { command: "ls" }, null, "call");
+
+    render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    expect(screen.getByTestId("custom-explore").textContent).toBe("true");
+    expect(receivedProps[0].isLoading).toBe(true);
+    expect(receivedProps[0].result).toBeNull();
+  });
+
+  it("passes isLoading=false when tool is complete", () => {
+    function CustomExplore({ isLoading }: ToolRendererProps) {
+      return <div data-testid="custom-explore">{String(isLoading)}</div>;
+    }
+
+    const renderers: ToolRenderers = { explore: CustomExplore };
+    const part = makePart("explore", { command: "ls" }, "output", "output-available");
+
+    render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    expect(screen.getByTestId("custom-explore").textContent).toBe("false");
+  });
+
+  it("supports custom renderer for executePython", () => {
+    function CustomPython({ toolName, result }: ToolRendererProps) {
+      return <div data-testid="custom-python">{toolName}|{JSON.stringify(result)}</div>;
+    }
+
+    const renderers: ToolRenderers = { executePython: CustomPython };
+    const part = makePart("executePython", { code: "print(1)" }, { success: true, output: "1" });
+
+    render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    const el = screen.getByTestId("custom-python");
+    expect(el.textContent).toContain("executePython");
+    expect(el.textContent).toContain('"success":true');
+  });
+
+  it("supports custom renderer for arbitrary tool names", () => {
+    function CustomTool({ toolName }: ToolRendererProps) {
+      return <div data-testid="custom-tool">{toolName}</div>;
+    }
+
+    const renderers: ToolRenderers = { myCustomTool: CustomTool };
+    const part = makePart("myCustomTool", {}, { data: "hello" });
+
+    render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    expect(screen.getByTestId("custom-tool").textContent).toBe("myCustomTool");
+  });
+
+  it("passes correct args from the tool part", () => {
+    const receivedProps: ToolRendererProps[] = [];
+    function Spy(props: ToolRendererProps) {
+      receivedProps.push(props);
+      return <div data-testid="spy">ok</div>;
+    }
+
+    const renderers: ToolRenderers = { executeSQL: Spy };
+    const part = makePart("executeSQL", { sql: "SELECT *", explanation: "Get all" }, { success: true });
+
+    render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    expect(receivedProps).toHaveLength(1);
+    expect(receivedProps[0].toolName).toBe("executeSQL");
+    expect(receivedProps[0].args).toEqual({ sql: "SELECT *", explanation: "Get all" });
+    expect(receivedProps[0].result).toEqual({ success: true });
+    expect(receivedProps[0].isLoading).toBe(false);
+  });
+
+  it("renders with empty toolRenderers map (all defaults)", () => {
+    const renderers: ToolRenderers = {};
+    const part = makePart("executeSQL", { sql: "SELECT 1" }, { success: true, columns: [], rows: [] });
+
+    const { container } = render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    // Should render the default card, not crash
+    expect(container.innerHTML.length).toBeGreaterThan(0);
+  });
+
+  it("renders error fallback when custom renderer throws", () => {
+    function BrokenRenderer(): React.ReactNode {
+      throw new Error("Renderer exploded");
+    }
+
+    const renderers: ToolRenderers = { executeSQL: BrokenRenderer };
+    const part = makePart("executeSQL", { sql: "SELECT 1" }, { success: true });
+
+    // Error boundary should catch — no crash
+    const { container } = render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    expect(container.textContent).toContain("failed");
+    expect(container.textContent).toContain("Renderer exploded");
+  });
+
+  it("renders fallback banner when getToolName fails", () => {
+    // Part without toolName triggers the mock's throw
+    const malformedPart = { input: {}, output: null, state: "call" };
+
+    const { container } = render(<ToolPart part={malformedPart} />);
+
+    expect(container.textContent).toContain("Tool result (unknown type)");
+  });
+
+  it("dispatches to correct renderer when multiple renderers are registered", () => {
+    function CustomSQL({ toolName }: ToolRendererProps) {
+      return <div data-testid="custom-sql">{toolName}</div>;
+    }
+    function CustomExplore({ toolName }: ToolRendererProps) {
+      return <div data-testid="custom-explore">{toolName}</div>;
+    }
+    function CustomPython({ toolName }: ToolRendererProps) {
+      return <div data-testid="custom-python">{toolName}</div>;
+    }
+
+    const renderers: ToolRenderers = {
+      executeSQL: CustomSQL,
+      explore: CustomExplore,
+      executePython: CustomPython,
+    };
+
+    const sqlPart = makePart("executeSQL", { sql: "SELECT 1" }, { success: true });
+    const { unmount: u1 } = render(<ToolPart part={sqlPart} toolRenderers={renderers} />);
+    expect(screen.getByTestId("custom-sql").textContent).toBe("executeSQL");
+    u1();
+
+    const explorePart = makePart("explore", { command: "ls" }, "files");
+    const { unmount: u2 } = render(<ToolPart part={explorePart} toolRenderers={renderers} />);
+    expect(screen.getByTestId("custom-explore").textContent).toBe("explore");
+    u2();
+
+    const pyPart = makePart("executePython", { code: "1+1" }, { success: true });
+    render(<ToolPart part={pyPart} toolRenderers={renderers} />);
+    expect(screen.getByTestId("custom-python").textContent).toBe("executePython");
+  });
+
+  it("passes error-shaped result (success: false) through to custom renderer", () => {
+    const receivedProps: ToolRendererProps[] = [];
+    function Spy(props: ToolRendererProps) {
+      receivedProps.push(props);
+      return <div data-testid="spy">error</div>;
+    }
+
+    const renderers: ToolRenderers = { executeSQL: Spy };
+    const part = makePart("executeSQL", { sql: "BAD SQL" }, { success: false, error: "syntax error" });
+
+    render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    expect(receivedProps[0].result).toEqual({ success: false, error: "syntax error" });
+    expect(receivedProps[0].isLoading).toBe(false);
+  });
+
+  it("falls back to default when renderer value is undefined in the map", () => {
+    const renderers = { executeSQL: undefined } as unknown as ToolRenderers;
+    const part = makePart("executeSQL", { sql: "SELECT 1" }, { success: true, columns: [], rows: [] });
+
+    const { container } = render(<ToolPart part={part} toolRenderers={renderers} />);
+
+    // undefined entry → default SQLResultCard renders
+    expect(container.innerHTML.length).toBeGreaterThan(0);
+    expect(screen.queryByTestId("custom-sql")).toBeNull();
+  });
+});

package/src/components/actions/action-approval-card.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+import { useState } from "react";
+import { getToolArgs, getToolResult, isToolComplete } from "../../lib/helpers";
+import {
+  isActionToolResult,
+  RESOLVED_STATUSES,
+  type ActionStatus,
+  type ResolvedStatus,
+  type ActionApprovalResponse,
+  type ActionToolResultShape,
+} from "../../lib/action-types";
+import { useAtlasConfig } from "../../context";
+import { useActionAuth } from "../../context";
+import { LoadingCard } from "../chat/loading-card";
+import { ActionStatusBadge } from "./action-status-badge";
+
+/* ------------------------------------------------------------------ */
+/*  Safe JSON.stringify helper                                         */
+/* ------------------------------------------------------------------ */
+
+function safeStringify(value: unknown): string {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch (err) {
+    console.warn("Could not serialize action details:", err);
+    return "[Unable to display]";
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Card state machine                                                 */
+/* ------------------------------------------------------------------ */
+
+type CardState =
+  | { phase: "idle" }
+  | { phase: "submitting"; action: "approve" | "deny" }
+  | { phase: "resolved"; status: ResolvedStatus; result?: unknown }
+  | { phase: "error"; message: string };
+
+/* ------------------------------------------------------------------ */
+/*  Border color by status                                             */
+/* ------------------------------------------------------------------ */
+
+function borderColor(status: ActionStatus): string {
+  switch (status) {
+    case "pending_approval":
+      return "border-yellow-300 dark:border-yellow-900/50";
+    case "approved":
+    case "executed":
+    case "auto_approved":
+      return "border-green-300 dark:border-green-900/50";
+    case "denied":
+    case "failed":
+      return "border-red-300 dark:border-red-900/50";
+    default:
+      return "border-zinc-200 dark:border-zinc-700";
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Component                                                          */
+/* ------------------------------------------------------------------ */
+
+export function ActionApprovalCard({ part }: { part: unknown }) {
+  const { apiUrl } = useAtlasConfig();
+  const actionAuth = useActionAuth();
+  const args = getToolArgs(part);
+  const rawResult = getToolResult(part);
+  const done = isToolComplete(part);
+
+  const [cardState, setCardState] = useState<CardState>({ phase: "idle" });
+  const [open, setOpen] = useState(false);
+  const [denyReason, setDenyReason] = useState("");
+  const [showDenyInput, setShowDenyInput] = useState(false);
+
+  if (!done) return <LoadingCard label="Requesting action approval..." />;
+
+  if (!isActionToolResult(rawResult)) {
+    return (
+      <div className="my-2 rounded-lg border border-yellow-300 bg-yellow-50 px-3 py-2 text-xs text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400">
+        Action result (unexpected format)
+      </div>
+    );
+  }
+
+  const toolResult: ActionToolResultShape = rawResult;
+
+  // Effective status: local optimistic update wins over server result
+  const effectiveStatus: ActionStatus =
+    cardState.phase === "resolved" ? cardState.status : toolResult.status;
+
+  const isPending = effectiveStatus === "pending_approval" && cardState.phase !== "submitting";
+  const isSubmitting = cardState.phase === "submitting";
+  const resolvedResult = cardState.phase === "resolved" ? cardState.result : toolResult.result;
+
+  /* ---------------------------------------------------------------- */
+  /*  API helpers                                                      */
+  /* ---------------------------------------------------------------- */
+
+  async function callAction(endpoint: "approve" | "deny", body?: Record<string, unknown>) {
+    if (!actionAuth) {
+      console.warn("ActionApprovalCard: No ActionAuthProvider found. API calls will be sent without authentication.");
+    }
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      ...(actionAuth?.getHeaders() ?? {}),
+    };
+    const credentials = actionAuth?.getCredentials() ?? "same-origin";
+
+    const res = await fetch(
+      `${apiUrl}/api/v1/actions/${toolResult.actionId}/${endpoint}`,
+      {
+        method: "POST",
+        headers,
+        credentials,
+        body: body ? JSON.stringify(body) : undefined,
+      },
+    );
+
+    if (res.status === 409) {
+      // Already resolved — read current status from response
+      let data: ActionApprovalResponse;
+      try {
+        data = (await res.json()) as ActionApprovalResponse;
+      } catch {
+        throw new Error("Action was already resolved, but the response could not be read. Refresh the page.");
+      }
+      const status = typeof data.status === "string" ? data.status as ResolvedStatus : "failed" as ResolvedStatus;
+      const label = status.replace(/_/g, " ");
+      throw new Error(`This action was already ${label} by another user or policy.`);
+    }
+
+    if (!res.ok) {
+      const text = await res.text().catch(() => "Unknown error");
+      throw new Error(`Server responded ${res.status}: ${text}`);
+    }
+
+    let data: ActionApprovalResponse;
+    try {
+      data = (await res.json()) as ActionApprovalResponse;
+    } catch {
+      throw new Error("Action succeeded, but the response could not be read. Refresh the page.");
+    }
+    if (typeof data.status !== "string") {
+      throw new Error("Action succeeded, but the server returned an invalid status. Refresh the page.");
+    }
+    setCardState({ phase: "resolved", status: data.status as ResolvedStatus, result: data.result });
+  }
+
+  async function handleApprove() {
+    setCardState({ phase: "submitting", action: "approve" });
+    try {
+      await callAction("approve");
+    } catch (err) {
+      console.error("Action approval failed:", err);
+      const message =
+        err instanceof TypeError
+          ? "Network error — could not reach the server."
+          : err instanceof Error
+            ? err.message
+            : String(err);
+      setCardState({ phase: "error", message });
+    }
+  }
+
+  async function handleDeny() {
+    setCardState({ phase: "submitting", action: "deny" });
+    try {
+      await callAction("deny", denyReason.trim() ? { reason: denyReason.trim() } : undefined);
+    } catch (err) {
+      console.error("Action approval failed:", err);
+      const message =
+        err instanceof TypeError
+          ? "Network error — could not reach the server."
+          : err instanceof Error
+            ? err.message
+            : String(err);
+      setCardState({ phase: "error", message });
+    }
+  }
+
+  /* ---------------------------------------------------------------- */
+  /*  Render                                                           */
+  /* ---------------------------------------------------------------- */
+
+  return (
+    <div className={`my-2 overflow-hidden rounded-lg border ${borderColor(effectiveStatus)} bg-zinc-50 dark:bg-zinc-900`}>
+      {/* Header */}
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-zinc-100/60 dark:hover:bg-zinc-800/60"
+      >
+        <ActionStatusBadge status={effectiveStatus} />
+        <span className="flex-1 truncate text-zinc-500 dark:text-zinc-400">
+          {toolResult.summary ?? String(args.description ?? "Action")}
+        </span>
+        <span className="text-zinc-400 dark:text-zinc-600">{open ? "\u25BE" : "\u25B8"}</span>
+      </button>
+
+      {/* Expanded details */}
+      {open && (
+        <div className="border-t border-zinc-100 px-3 py-2 dark:border-zinc-800">
+          {toolResult.details && (
+            <pre className="mb-2 max-h-48 overflow-auto rounded bg-zinc-100 p-2 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400">
+              {safeStringify(toolResult.details)}
+            </pre>
+          )}
+          {resolvedResult != null && (
+            <div className="mb-2 rounded bg-green-50 p-2 text-xs text-green-700 dark:bg-green-900/20 dark:text-green-400">
+              <span className="font-medium">Result: </span>
+              {typeof resolvedResult === "string"
+                ? resolvedResult
+                : safeStringify(resolvedResult)}
+            </div>
+          )}
+          {toolResult.error && (
+            <div className="mb-2 rounded bg-red-50 p-2 text-xs text-red-700 dark:bg-red-900/20 dark:text-red-400">
+              <span className="font-medium">Error: </span>
+              {toolResult.error}
+            </div>
+          )}
+          {toolResult.reason && RESOLVED_STATUSES.has(effectiveStatus) && (
+            <div className="mb-2 text-xs text-zinc-500 dark:text-zinc-400">
+              <span className="font-medium">Reason: </span>
+              {toolResult.reason}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Approval buttons — only when pending */}
+      {(isPending || isSubmitting || cardState.phase === "error") && (
+        <div className="border-t border-zinc-100 px-3 py-2 dark:border-zinc-800">
+          {cardState.phase === "error" && (
+            <p className="mb-2 text-xs text-red-600 dark:text-red-400">{cardState.message}</p>
+          )}
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleApprove}
+              disabled={isSubmitting}
+              className="inline-flex items-center gap-1.5 rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-500 disabled:opacity-40"
+            >
+              {isSubmitting && cardState.action === "approve" && (
+                <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+              )}
+              Approve
+            </button>
+
+            {!showDenyInput ? (
+              <button
+                onClick={() => setShowDenyInput(true)}
+                disabled={isSubmitting}
+                className="rounded border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-400 hover:text-zinc-800 disabled:opacity-40 dark:border-zinc-600 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+              >
+                Deny
+              </button>
+            ) : (
+              <div className="flex flex-1 items-center gap-2">
+                <input
+                  value={denyReason}
+                  onChange={(e) => setDenyReason(e.target.value)}
+                  placeholder="Reason (optional)"
+                  className="flex-1 rounded border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-900 placeholder-zinc-400 outline-none focus:border-red-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-600"
+                  disabled={isSubmitting}
+                />
+                <button
+                  onClick={handleDeny}
+                  disabled={isSubmitting}
+                  className="inline-flex items-center gap-1.5 rounded bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-500 disabled:opacity-40"
+                >
+                  {isSubmitting && cardState.action === "deny" && (
+                    <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                  )}
+                  Confirm Deny
+                </button>
+                <button
+                  onClick={() => {
+                    setShowDenyInput(false);
+                    setDenyReason("");
+                  }}
+                  disabled={isSubmitting}
+                  className="text-xs text-zinc-400 hover:text-zinc-600 disabled:opacity-40 dark:hover:text-zinc-300"
+                >
+                  Cancel
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}