@dexto/tui 1.6.2

package/dist/components/ApprovalPrompt.cjs

@@ -0,0 +1,353 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ApprovalPrompt_exports = {};
+__export(ApprovalPrompt_exports, {
+  ApprovalPrompt: () => ApprovalPrompt
+});
+module.exports = __toCommonJS(ApprovalPrompt_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+var import_ElicitationForm = require("./ElicitationForm.js");
+var import_renderers = require("./renderers/index.js");
+var import_toolUtils = require("../utils/toolUtils.js");
+var import_messageFormatting = require("../utils/messageFormatting.js");
+const ApprovalPrompt = (0, import_react.forwardRef)(
+  ({ approval, onApprove, onDeny, onCancel }, ref) => {
+    const isCommandConfirmation = approval.type === "command_confirmation";
+    const isElicitation = approval.type === "elicitation";
+    const isDirectoryAccess = approval.type === "directory_access";
+    const directoryAccess = approval.metadata.directoryAccess;
+    const hasToolDirectoryAccess = approval.type === "tool_confirmation" && directoryAccess !== void 0 && typeof directoryAccess === "object" && directoryAccess !== null;
+    const directoryAccessParentDir = hasToolDirectoryAccess && typeof directoryAccess.parentDir === "string" ? directoryAccess.parentDir : null;
+    const toolName = approval.metadata.toolName;
+    const toolArgs = approval.metadata.args || {};
+    const callDescriptionRaw = typeof approval.metadata.description === "string" ? approval.metadata.description : void 0;
+    const callDescription = (0, import_react.useMemo)(() => {
+      if (!callDescriptionRaw) return null;
+      const singleLine = callDescriptionRaw.replace(/\s+/g, " ").trim();
+      if (!singleLine) return null;
+      const maxLength = 120;
+      if (singleLine.length <= maxLength) return singleLine;
+      return `${singleLine.slice(0, Math.max(0, maxLength - 1))}\u2026`;
+    }, [callDescriptionRaw]);
+    const isPlanReview = toolName === "plan_review";
+    const suggestedPatterns = approval.metadata.suggestedPatterns ?? [];
+    const hasSuggestedPatterns = suggestedPatterns.length > 0;
+    const isEditOrWriteTool = (0, import_toolUtils.isEditWriteTool)(toolName);
+    const presentationSnapshot = (0, import_react.useMemo)(() => {
+      const raw = approval.metadata.presentationSnapshot;
+      if (typeof raw !== "object" || raw === null) {
+        return void 0;
+      }
+      if (raw.version !== 1) {
+        return void 0;
+      }
+      return raw;
+    }, [approval.metadata]);
+    const formattedTool = (0, import_react.useMemo)(() => {
+      if (!toolName) return null;
+      return (0, import_messageFormatting.formatToolHeader)({
+        toolName,
+        args: toolArgs,
+        ...presentationSnapshot !== void 0 && { presentationSnapshot }
+      });
+    }, [toolName, toolArgs, presentationSnapshot]);
+    const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
+    const [showFeedbackInput, setShowFeedbackInput] = (0, import_react.useState)(false);
+    const [feedbackText, setFeedbackText] = (0, import_react.useState)("");
+    const elicitationFormRef = (0, import_react.useRef)(null);
+    const selectedIndexRef = (0, import_react.useRef)(0);
+    const options = [];
+    if (isPlanReview) {
+      options.push({ id: "plan-approve", label: "Approve" });
+      options.push({ id: "plan-approve-accept-edits", label: "Approve + Accept All Edits" });
+    } else if (hasToolDirectoryAccess) {
+      const dirLabel = directoryAccessParentDir ? ` ${(0, import_messageFormatting.formatPathForDisplay)(directoryAccessParentDir)}` : "";
+      options.push({ id: "yes", label: "Yes (once)" });
+      options.push({ id: "yes-directory-session", label: `Yes, allow${dirLabel} (session)` });
+      options.push({ id: "no", label: "No" });
+    } else if (hasSuggestedPatterns) {
+      options.push({ id: "yes", label: "Yes (once)" });
+      suggestedPatterns.forEach((pattern, i) => {
+        options.push({
+          id: `pattern-${i}`,
+          label: `Yes, allow "${pattern}"`
+        });
+      });
+      options.push({ id: "yes-session", label: "Yes, allow this tool (session)" });
+      options.push({ id: "no", label: "No" });
+    } else if (isCommandConfirmation) {
+      options.push({ id: "yes", label: "Yes" });
+      options.push({ id: "no", label: "No" });
+    } else if (isDirectoryAccess) {
+      const parentDir2 = approval.metadata.parentDir;
+      const dirLabel = parentDir2 ? ` ${(0, import_messageFormatting.formatPathForDisplay)(parentDir2)}` : "";
+      options.push({ id: "yes", label: "Yes (once)" });
+      options.push({ id: "yes-session", label: `Yes, allow${dirLabel} (session)` });
+      options.push({ id: "no", label: "No" });
+    } else if (isEditOrWriteTool) {
+      options.push({ id: "yes", label: "Yes" });
+      options.push({ id: "yes-accept-edits", label: "Yes, and accept all edits" });
+      options.push({ id: "no", label: "No" });
+    } else {
+      options.push({ id: "yes", label: "Yes" });
+      options.push({ id: "yes-session", label: "Yes (Session)" });
+      options.push({ id: "no", label: "No" });
+    }
+    (0, import_react.useEffect)(() => {
+      selectedIndexRef.current = selectedIndex;
+    }, [selectedIndex]);
+    const getCurrentOption = () => options[selectedIndexRef.current];
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        handleInput: (input, key) => {
+          if (isElicitation && elicitationFormRef.current) {
+            return elicitationFormRef.current.handleInput(input, key);
+          }
+          const totalOptions = isPlanReview ? options.length + 1 : options.length;
+          const isFeedbackSelected = isPlanReview && selectedIndexRef.current === options.length;
+          if (isFeedbackSelected) {
+            if (key.return) {
+              onDeny(feedbackText || void 0);
+              return true;
+            } else if (key.backspace || key.delete) {
+              setFeedbackText((prev) => prev.slice(0, -1));
+              return true;
+            } else if (key.upArrow) {
+              setSelectedIndex(options.length - 1);
+              return true;
+            } else if (key.downArrow) {
+              setSelectedIndex(0);
+              return true;
+            } else if (key.escape) {
+              onCancel();
+              return true;
+            } else if (input && !key.ctrl && !key.meta) {
+              setFeedbackText((prev) => prev + input);
+              return true;
+            }
+            return true;
+          }
+          if (key.upArrow) {
+            setSelectedIndex(
+              (current) => current === 0 ? totalOptions - 1 : current - 1
+            );
+            return true;
+          } else if (key.downArrow) {
+            setSelectedIndex(
+              (current) => current === totalOptions - 1 ? 0 : current + 1
+            );
+            return true;
+          } else if (key.return) {
+            const option = getCurrentOption();
+            if (!option) return false;
+            if (option.id === "plan-approve") {
+              onApprove({});
+            } else if (option.id === "plan-approve-accept-edits") {
+              onApprove({ enableAcceptEditsMode: true });
+            } else if (option.id === "yes") {
+              onApprove({});
+            } else if (option.id === "yes-session") {
+              if (isDirectoryAccess) {
+                onApprove({ rememberDirectory: true });
+              } else {
+                onApprove({ rememberChoice: true });
+              }
+            } else if (option.id === "yes-directory-session") {
+              onApprove({ rememberDirectory: true });
+            } else if (option.id === "yes-accept-edits") {
+              onApprove({ enableAcceptEditsMode: true });
+            } else if (option.id === "no") {
+              onDeny();
+            } else if (option.id.startsWith("pattern-")) {
+              const patternIndex = parseInt(option.id.replace("pattern-", ""), 10);
+              const pattern = suggestedPatterns[patternIndex];
+              if (pattern) {
+                onApprove({ rememberPattern: pattern });
+              } else {
+                onApprove({});
+              }
+            }
+            return true;
+          } else if (key.shift && key.tab && isEditOrWriteTool) {
+            onApprove({ enableAcceptEditsMode: true });
+            return true;
+          } else if (key.escape) {
+            onCancel();
+            return true;
+          }
+          return false;
+        }
+      }),
+      [
+        isElicitation,
+        isEditOrWriteTool,
+        isDirectoryAccess,
+        hasToolDirectoryAccess,
+        isPlanReview,
+        options,
+        suggestedPatterns,
+        onApprove,
+        onDeny,
+        onCancel,
+        feedbackText
+      ]
+    );
+    if (isElicitation) {
+      const metadata = approval.metadata;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ElicitationForm.ElicitationForm,
+        {
+          ref: elicitationFormRef,
+          metadata,
+          onSubmit: (formData) => onApprove({ formData }),
+          onCancel
+        }
+      );
+    }
+    const command = approval.metadata.command;
+    const displayPreview = approval.metadata.displayPreview;
+    const renderPreview = () => {
+      if (!displayPreview) return null;
+      switch (displayPreview.type) {
+        case "diff":
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_renderers.DiffPreview, { data: displayPreview });
+        case "shell":
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginBottom: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: displayPreview.title ?? "Bash" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_ink.Box,
+              {
+                flexDirection: "column",
+                borderStyle: "round",
+                borderColor: "gray",
+                paddingX: 1,
+                children: [
+                  displayPreview.command.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellowBright", wrap: "wrap", children: [
+                    i === 0 ? "$ " : "  ",
+                    line
+                  ] }, i)),
+                  displayPreview.isBackground && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "(background)" })
+                ]
+              }
+            ),
+            callDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: callDescription }) })
+          ] });
+        case "file":
+          if (displayPreview.content) {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_renderers.CreateFilePreview, { data: displayPreview });
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+            displayPreview.operation === "read" && `Read ${displayPreview.lineCount ?? "file"} lines`,
+            displayPreview.operation === "write" && `Write to ${displayPreview.path}`,
+            displayPreview.operation === "delete" && `Delete ${displayPreview.path}`
+          ] }) });
+        default:
+          return null;
+      }
+    };
+    const directoryPath = approval.metadata.path;
+    const parentDir = approval.metadata.parentDir;
+    const operation = approval.metadata.operation;
+    const directoryAccessTitle = !isDirectoryAccess ? null : operation === "read" ? "Read file" : operation === "write" ? "Write file" : operation === "edit" ? "Edit file" : "Directory access";
+    const directoryAccessToolHeader = !isDirectoryAccess || !toolName ? null : (0, import_messageFormatting.formatToolHeader)({
+      toolName,
+      args: directoryPath ?? parentDir ? { path: directoryPath ?? parentDir } : {},
+      ...presentationSnapshot !== void 0 && { presentationSnapshot }
+    }).header;
+    const showHeaderBlock = isDirectoryAccess || isCommandConfirmation || !displayPreview;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, flexDirection: "column", children: [
+      showHeaderBlock && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginBottom: 0, children: isDirectoryAccess ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: directoryAccessTitle ?? "Directory access" }) }),
+        directoryAccessToolHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { wrap: "wrap", children: directoryAccessToolHeader }) })
+      ] }) : isCommandConfirmation ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellowBright", bold: true, children: [
+          "Confirm command:",
+          " "
+        ] }) }),
+        command && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginTop: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ink.Box,
+          {
+            flexDirection: "column",
+            borderStyle: "round",
+            borderColor: "gray",
+            paddingX: 1,
+            children: command.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", wrap: "wrap", children: line }, i))
+          }
+        ) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellowBright", bold: true, children: [
+            "Confirm:",
+            " "
+          ] }),
+          formattedTool && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: formattedTool.header })
+        ] }),
+        callDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", marginTop: 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "  " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: callDescription })
+        ] })
+      ] }) }),
+      renderPreview(),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginTop: 0, children: [
+        options.map((option, index) => {
+          const isSelected = index === selectedIndex;
+          const isNo = option.id === "no";
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isNo ? "red" : "green", bold: true, children: [
+            "  \u25B6 ",
+            option.label
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+            "    ",
+            option.label
+          ] }) }, option.id);
+        }),
+        isPlanReview && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: selectedIndex === options.length ? (
+          // Selected - show editable input
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", bold: true, children: "  \u25B6 " }),
+            feedbackText ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "white", children: [
+              feedbackText,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "\u258B" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+              "What changes would you like?",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "\u258B" })
+            ] })
+          ] })
+        ) : (
+          // Not selected - show placeholder
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+            "    ",
+            feedbackText || "What changes would you like?"
+          ] })
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+        "  ",
+        "\u2191\u2193 to select \u2022 Enter to confirm \u2022 Esc to cancel"
+      ] }) })
+    ] });
+  }
+);
+ApprovalPrompt.displayName = "ApprovalPrompt";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApprovalPrompt
+});

package/dist/components/ApprovalPrompt.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { Key } from '../hooks/useInputOrchestrator.js';
+export interface ApprovalRequest {
+    approvalId: string;
+    type: string;
+    sessionId?: string;
+    timeout?: number;
+    timestamp: Date;
+    metadata: Record<string, unknown>;
+}
+export interface ApprovalPromptHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * Options passed when approving a request
+ */
+export interface ApprovalOptions {
+    /** Remember this tool for the entire session (approves ALL uses) */
+    rememberChoice?: boolean;
+    /** Remember an approval pattern (e.g., "git *") */
+    rememberPattern?: string;
+    /** Form data for elicitation requests */
+    formData?: Record<string, unknown>;
+    /** Enable "accept all edits" mode (auto-approve future edit_file/write_file) */
+    enableAcceptEditsMode?: boolean;
+    /** Remember directory access for the session */
+    rememberDirectory?: boolean;
+}
+interface ApprovalPromptProps {
+    approval: ApprovalRequest;
+    onApprove: (options: ApprovalOptions) => void;
+    onDeny: (feedback?: string) => void;
+    onCancel: () => void;
+}
+/**
+ * Compact approval prompt component that displays above the input area
+ * Shows options based on approval type:
+ * - Tool confirmation: Yes, Yes (Session), No
+ * - Tool with patterns: Yes (once), pattern options, Yes (session), No
+ * - Elicitation: Form with input fields
+ */
+export declare const ApprovalPrompt: React.ForwardRefExoticComponent<ApprovalPromptProps & React.RefAttributes<ApprovalPromptHandle>>;
+export {};
+//# sourceMappingURL=ApprovalPrompt.d.ts.map

package/dist/components/ApprovalPrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApprovalPrompt.d.ts","sourceRoot":"","sources":["../../src/components/ApprovalPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAM5D,MAAM,WAAW,eAAe;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,IAAI,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,oBAAoB;IACjC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,UAAU,mBAAmB;IACzB,QAAQ,EAAE,eAAe,CAAC;IAC1B,SAAS,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAiBD;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,kGAwe1B,CAAC"}