@dexto/tui 1.6.2

package/dist/components/ApprovalPrompt.js

@@ -0,0 +1,336 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useState,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+  useMemo
+} from "react";
+import { Box, Text } from "ink";
+import { ElicitationForm } from "./ElicitationForm.js";
+import { DiffPreview, CreateFilePreview } from "./renderers/index.js";
+import { isEditWriteTool } from "../utils/toolUtils.js";
+import { formatPathForDisplay, formatToolHeader } from "../utils/messageFormatting.js";
+const ApprovalPrompt = 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 = 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 = isEditWriteTool(toolName);
+    const presentationSnapshot = 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 = useMemo(() => {
+      if (!toolName) return null;
+      return formatToolHeader({
+        toolName,
+        args: toolArgs,
+        ...presentationSnapshot !== void 0 && { presentationSnapshot }
+      });
+    }, [toolName, toolArgs, presentationSnapshot]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [showFeedbackInput, setShowFeedbackInput] = useState(false);
+    const [feedbackText, setFeedbackText] = useState("");
+    const elicitationFormRef = useRef(null);
+    const selectedIndexRef = 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 ? ` ${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 ? ` ${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" });
+    }
+    useEffect(() => {
+      selectedIndexRef.current = selectedIndex;
+    }, [selectedIndex]);
+    const getCurrentOption = () => options[selectedIndexRef.current];
+    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__ */ jsx(
+        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__ */ jsx(DiffPreview, { data: displayPreview });
+        case "shell":
+          return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+            /* @__PURE__ */ jsx(Box, { marginBottom: 0, children: /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: displayPreview.title ?? "Bash" }) }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                flexDirection: "column",
+                borderStyle: "round",
+                borderColor: "gray",
+                paddingX: 1,
+                children: [
+                  displayPreview.command.split("\n").map((line, i) => /* @__PURE__ */ jsxs(Text, { color: "yellowBright", wrap: "wrap", children: [
+                    i === 0 ? "$ " : "  ",
+                    line
+                  ] }, i)),
+                  displayPreview.isBackground && /* @__PURE__ */ jsx(Text, { color: "gray", children: "(background)" })
+                ]
+              }
+            ),
+            callDescription && /* @__PURE__ */ jsx(Box, { marginTop: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: callDescription }) })
+          ] });
+        case "file":
+          if (displayPreview.content) {
+            return /* @__PURE__ */ jsx(CreateFilePreview, { data: displayPreview });
+          }
+          return /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(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 : formatToolHeader({
+      toolName,
+      args: directoryPath ?? parentDir ? { path: directoryPath ?? parentDir } : {},
+      ...presentationSnapshot !== void 0 && { presentationSnapshot }
+    }).header;
+    const showHeaderBlock = isDirectoryAccess || isCommandConfirmation || !displayPreview;
+    return /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, flexDirection: "column", children: [
+      showHeaderBlock && /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginBottom: 0, children: isDirectoryAccess ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Box, { marginBottom: 0, children: /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: directoryAccessTitle ?? "Directory access" }) }),
+        directoryAccessToolHeader && /* @__PURE__ */ jsx(Box, { marginBottom: 0, children: /* @__PURE__ */ jsx(Text, { wrap: "wrap", children: directoryAccessToolHeader }) })
+      ] }) : isCommandConfirmation ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsxs(Text, { color: "yellowBright", bold: true, children: [
+          "Confirm command:",
+          " "
+        ] }) }),
+        command && /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginTop: 0, children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            flexDirection: "column",
+            borderStyle: "round",
+            borderColor: "gray",
+            paddingX: 1,
+            children: command.split("\n").map((line, i) => /* @__PURE__ */ jsx(Text, { color: "red", wrap: "wrap", children: line }, i))
+          }
+        ) })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+          /* @__PURE__ */ jsxs(Text, { color: "yellowBright", bold: true, children: [
+            "Confirm:",
+            " "
+          ] }),
+          formattedTool && /* @__PURE__ */ jsx(Text, { color: "cyan", children: formattedTool.header })
+        ] }),
+        callDescription && /* @__PURE__ */ jsxs(Box, { flexDirection: "row", marginTop: 0, children: [
+          /* @__PURE__ */ jsx(Text, { color: "gray", children: "  " }),
+          /* @__PURE__ */ jsx(Text, { color: "gray", children: callDescription })
+        ] })
+      ] }) }),
+      renderPreview(),
+      /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 0, children: [
+        options.map((option, index) => {
+          const isSelected = index === selectedIndex;
+          const isNo = option.id === "no";
+          return /* @__PURE__ */ jsx(Box, { children: isSelected ? /* @__PURE__ */ jsxs(Text, { color: isNo ? "red" : "green", bold: true, children: [
+            "  \u25B6 ",
+            option.label
+          ] }) : /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+            "    ",
+            option.label
+          ] }) }, option.id);
+        }),
+        isPlanReview && /* @__PURE__ */ jsx(Box, { children: selectedIndex === options.length ? (
+          // Selected - show editable input
+          /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+            /* @__PURE__ */ jsx(Text, { color: "red", bold: true, children: "  \u25B6 " }),
+            feedbackText ? /* @__PURE__ */ jsxs(Text, { color: "white", children: [
+              feedbackText,
+              /* @__PURE__ */ jsx(Text, { color: "cyan", children: "\u258B" })
+            ] }) : /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+              "What changes would you like?",
+              /* @__PURE__ */ jsx(Text, { color: "cyan", children: "\u258B" })
+            ] })
+          ] })
+        ) : (
+          // Not selected - show placeholder
+          /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+            "    ",
+            feedbackText || "What changes would you like?"
+          ] })
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { marginTop: 0, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        "  ",
+        "\u2191\u2193 to select \u2022 Enter to confirm \u2022 Esc to cancel"
+      ] }) })
+    ] });
+  }
+);
+ApprovalPrompt.displayName = "ApprovalPrompt";
+export {
+  ApprovalPrompt
+};

package/dist/components/BackgroundTasksPanel.cjs

@@ -0,0 +1,117 @@
+"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 BackgroundTasksPanel_exports = {};
+__export(BackgroundTasksPanel_exports, {
+  BackgroundTasksPanel: () => BackgroundTasksPanel
+});
+module.exports = __toCommonJS(BackgroundTasksPanel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ink = require("ink");
+function padText(value, width) {
+  if (value.length >= width) return value.slice(0, width - 1) + "\u2026";
+  return value.padEnd(width, " ");
+}
+function formatStatus(status) {
+  switch (status) {
+    case "running":
+      return "running";
+    case "completed":
+      return "done";
+    case "failed":
+      return "failed";
+    case "cancelled":
+      return "cancelled";
+    default:
+      return status;
+  }
+}
+function BackgroundTasksPanel({
+  tasks,
+  isExpanded,
+  isProcessing = false
+}) {
+  if (!isExpanded) return null;
+  const sortedTasks = [...tasks].sort((a, b) => {
+    if (a.status === b.status) return 0;
+    if (a.status === "running") return -1;
+    if (b.status === "running") return 1;
+    return a.status.localeCompare(b.status);
+  });
+  const runningCount = tasks.filter((task) => task.status === "running").length;
+  const totalCount = tasks.length;
+  const headerText = `\u{1F9F5} Background Tasks (${runningCount}/${totalCount} running)`;
+  if (totalCount === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ink.Box,
+      {
+        flexDirection: "column",
+        borderStyle: isProcessing ? void 0 : "round",
+        borderColor: "gray",
+        paddingX: 1,
+        marginX: 1,
+        marginBottom: 1,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: "cyan", children: headerText }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", dimColor: true, children: "No background tasks" })
+        ]
+      }
+    );
+  }
+  const statusWidth = 10;
+  const idWidth = 14;
+  const descWidth = 48;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ink.Box,
+    {
+      flexDirection: "column",
+      borderStyle: isProcessing ? void 0 : "round",
+      borderColor: "gray",
+      paddingX: 1,
+      marginX: 1,
+      marginBottom: 1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: "cyan", children: headerText }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", dimColor: true, children: [
+            " ",
+            "\xB7 ctrl+b to hide bg tasks"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+          padText("status", statusWidth),
+          padText("task id", idWidth),
+          padText("description", descWidth)
+        ] }) }),
+        sortedTasks.map((task) => {
+          const status = formatStatus(task.status);
+          const desc = task.description ?? "";
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: task.status === "running" ? "yellow" : "gray", children: [
+            padText(status, statusWidth),
+            padText(task.taskId, idWidth),
+            padText(desc, descWidth)
+          ] }) }, task.taskId);
+        })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BackgroundTasksPanel
+});

package/dist/components/BackgroundTasksPanel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * BackgroundTasksPanel Component
+ *
+ * Displays background task status in a compact table.
+ */
+interface BackgroundTaskItem {
+    taskId: string;
+    status: 'running' | 'completed' | 'failed' | 'cancelled';
+    description?: string;
+}
+interface BackgroundTasksPanelProps {
+    tasks: BackgroundTaskItem[];
+    isExpanded: boolean;
+    isProcessing?: boolean;
+}
+export declare function BackgroundTasksPanel({ tasks, isExpanded, isProcessing, }: BackgroundTasksPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=BackgroundTasksPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundTasksPanel.d.ts","sourceRoot":"","sources":["../../src/components/BackgroundTasksPanel.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,UAAU,kBAAkB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,yBAAyB;IAC/B,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAsBD,wBAAgB,oBAAoB,CAAC,EACjC,KAAK,EACL,UAAU,EACV,YAAoB,GACvB,EAAE,yBAAyB,kDA+E3B"}

package/dist/components/BackgroundTasksPanel.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+function padText(value, width) {
+  if (value.length >= width) return value.slice(0, width - 1) + "\u2026";
+  return value.padEnd(width, " ");
+}
+function formatStatus(status) {
+  switch (status) {
+    case "running":
+      return "running";
+    case "completed":
+      return "done";
+    case "failed":
+      return "failed";
+    case "cancelled":
+      return "cancelled";
+    default:
+      return status;
+  }
+}
+function BackgroundTasksPanel({
+  tasks,
+  isExpanded,
+  isProcessing = false
+}) {
+  if (!isExpanded) return null;
+  const sortedTasks = [...tasks].sort((a, b) => {
+    if (a.status === b.status) return 0;
+    if (a.status === "running") return -1;
+    if (b.status === "running") return 1;
+    return a.status.localeCompare(b.status);
+  });
+  const runningCount = tasks.filter((task) => task.status === "running").length;
+  const totalCount = tasks.length;
+  const headerText = `\u{1F9F5} Background Tasks (${runningCount}/${totalCount} running)`;
+  if (totalCount === 0) {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle: isProcessing ? void 0 : "round",
+        borderColor: "gray",
+        paddingX: 1,
+        marginX: 1,
+        marginBottom: 1,
+        children: [
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: headerText }),
+          /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: "No background tasks" })
+        ]
+      }
+    );
+  }
+  const statusWidth = 10;
+  const idWidth = 14;
+  const descWidth = 48;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: isProcessing ? void 0 : "round",
+      borderColor: "gray",
+      paddingX: 1,
+      marginX: 1,
+      marginBottom: 1,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: headerText }),
+          /* @__PURE__ */ jsxs(Text, { color: "gray", dimColor: true, children: [
+            " ",
+            "\xB7 ctrl+b to hide bg tasks"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          padText("status", statusWidth),
+          padText("task id", idWidth),
+          padText("description", descWidth)
+        ] }) }),
+        sortedTasks.map((task) => {
+          const status = formatStatus(task.status);
+          const desc = task.description ?? "";
+          return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: task.status === "running" ? "yellow" : "gray", children: [
+            padText(status, statusWidth),
+            padText(task.taskId, idWidth),
+            padText(desc, descWidth)
+          ] }) }, task.taskId);
+        })
+      ]
+    }
+  );
+}
+export {
+  BackgroundTasksPanel
+};

package/dist/components/CustomInput.cjs

@@ -0,0 +1,77 @@
+"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 CustomInput_exports = {};
+__export(CustomInput_exports, {
+  default: () => CustomInput
+});
+module.exports = __toCommonJS(CustomInput_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ink = require("ink");
+function CustomInput({
+  value,
+  onChange,
+  onSubmit,
+  placeholder,
+  isProcessing = false,
+  onWordDelete,
+  onLineDelete,
+  onToggleMultiLine
+}) {
+  (0, import_ink.useInput)(
+    (inputChar, key) => {
+      if (isProcessing) return;
+      if (key.return && key.shift) {
+        onToggleMultiLine?.();
+        return;
+      }
+      if (key.return) {
+        onSubmit(value);
+        return;
+      }
+      if (key.ctrl && inputChar === "u") {
+        onLineDelete?.();
+        return;
+      }
+      if (key.ctrl && inputChar === "w") {
+        onWordDelete?.();
+        return;
+      }
+      if (key.backspace || key.delete) {
+        onChange(value.slice(0, -1));
+        return;
+      }
+      if (inputChar && !key.ctrl && !key.meta) {
+        onChange(value + inputChar);
+      }
+    },
+    { isActive: true }
+  );
+  if (!value && placeholder) {
+    const firstChar = placeholder[0] || " ";
+    const rest = placeholder.slice(1);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "black", backgroundColor: "green", children: firstChar }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: rest })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
+    value,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "black", backgroundColor: "green", children: " " })
+  ] });
+}

package/dist/components/CustomInput.d.ts

@@ -0,0 +1,17 @@
+interface CustomInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    placeholder?: string;
+    isProcessing?: boolean;
+    onWordDelete?: () => void;
+    onLineDelete?: () => void;
+    onToggleMultiLine?: () => void;
+}
+/**
+ * Custom input component that handles keyboard shortcuts
+ * Fully custom implementation without TextInput to properly handle shortcuts
+ */
+export default function CustomInput({ value, onChange, onSubmit, placeholder, isProcessing, onWordDelete, onLineDelete, onToggleMultiLine, }: CustomInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CustomInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomInput.d.ts","sourceRoot":"","sources":["../../src/components/CustomInput.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,iBAAiB,GACpB,EAAE,gBAAgB,2CAoElB"}