wispy-cli 1.1.1 → 1.2.1

package/lib/wispy-tui.mjs

@@ -1,18 +1,22 @@
 #!/usr/bin/env node
 /**
  * wispy-tui.mjs — Ink-based TUI for Wispy
- * v0.7: uses core/engine.mjs for AI interaction
+ * v1.2: Trust UX — Approval dialogs, receipts, action timeline, diff views
  *
  * Features:
- *  - Status bar: provider / model / workstream / session cost
+ *  - Status bar: provider / model / workstream / session cost / permission mode
  *  - Message list with basic markdown rendering
  *  - Tool execution display
+ *  - Approval dialog (inline keyboard: Y/N/D)
+ *  - Receipt view after tool execution
+ *  - Action timeline
+ *  - Diff view with color
  *  - Input box (single-line with submit)
  *  - Loading spinner while AI is thinking
  */
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import { render, Box, Text, useApp, Newline } from "ink";
+import { render, Box, Text, useApp, Newline, useInput } from "ink";
 import Spinner from "ink-spinner";
 import TextInput from "ink-text-input";
 
@@ -36,7 +40,7 @@ const ACTIVE_WORKSTREAM =
 const HISTORY_FILE = path.join(CONVERSATIONS_DIR, `${ACTIVE_WORKSTREAM}.json`);
 
 // -----------------------------------------------------------------------
-// Conversation persistence (for backward compat with CLI sessions)
+// Conversation persistence
 // -----------------------------------------------------------------------
 
 async function readFileOr(p, fallback = null) {
@@ -91,16 +95,207 @@ function renderMarkdown(text) {
 }
 
 // -----------------------------------------------------------------------
-// TUI Components
+// ── Trust UX Components ──────────────────────────────────────────────────
 // -----------------------------------------------------------------------
 
-function StatusBar({ provider, model, workstream, tokens, cost }) {
+/**
+ * DiffView — shows unified diff with +/- coloring
+ */
+function DiffView({ before, after, filePath, unified }) {
+  const diffLines = unified ? unified.split("\n") : [];
+  if (diffLines.length === 0) return null;
+
+  return React.createElement(
+    Box, { flexDirection: "column", paddingLeft: 2, marginTop: 0 },
+    React.createElement(Text, { dimColor: true }, "─".repeat(40)),
+    React.createElement(Text, { bold: true, color: "cyan" }, `Diff: ${filePath ?? "file"}`),
+    ...diffLines.slice(0, 40).map((line, i) => {
+      if (line.startsWith("+++") || line.startsWith("---")) {
+        return React.createElement(Text, { key: i, dimColor: true }, line);
+      }
+      if (line.startsWith("@@")) {
+        return React.createElement(Text, { key: i, color: "cyan" }, line);
+      }
+      if (line.startsWith("+")) {
+        return React.createElement(Text, { key: i, color: "green" }, line);
+      }
+      if (line.startsWith("-")) {
+        return React.createElement(Text, { key: i, color: "red" }, line);
+      }
+      return React.createElement(Text, { key: i, dimColor: true }, line);
+    }),
+    React.createElement(Text, { dimColor: true }, "─".repeat(40)),
+  );
+}
+
+/**
+ * ReceiptView — shows after tool execution
+ */
+function ReceiptView({ receipt }) {
+  if (!receipt) return null;
+  const icon = receipt.success ? "✅" : "❌";
+  const dryTag = receipt.dryRun ? " [DRY RUN]" : "";
+
+  const lines = [
+    React.createElement(
+      Box, { key: "header" },
+      React.createElement(Text, { bold: true, color: receipt.success ? "green" : "red" },
+        `${icon} ${receipt.toolName}${dryTag}`),
+      React.createElement(Text, { dimColor: true }, ` (${receipt.duration}ms)`),
+    ),
+  ];
+
+  if (receipt.error) {
+    lines.push(React.createElement(Text, { key: "err", color: "red" }, `  Error: ${receipt.error}`));
+  }
+
+  if (receipt.diff?.unified) {
+    const stats = (() => {
+      let added = 0; let removed = 0;
+      for (const l of receipt.diff.unified.split("\n")) {
+        if (l.startsWith("+") && !l.startsWith("+++")) added++;
+        else if (l.startsWith("-") && !l.startsWith("---")) removed++;
+      }
+      return { added, removed };
+    })();
+    lines.push(
+      React.createElement(Text, { key: "stats", color: "yellow" },
+        `  Changes: +${stats.added} lines, -${stats.removed} lines`),
+      React.createElement(DiffView, {
+        key: "diff",
+        filePath: receipt.args?.path,
+        unified: receipt.diff.unified,
+      }),
+    );
+  }
+
+  return React.createElement(
+    Box, { flexDirection: "column", paddingLeft: 2, marginTop: 0 },
+    ...lines,
+  );
+}
+
+/**
+ * ActionTimeline — shows a running log of tool actions
+ */
+function ActionTimeline({ events }) {
+  if (!events || events.length === 0) return null;
+
+  const TOOL_ICONS = {
+    read_file: "📖",
+    write_file: "✏️",
+    file_edit: "✏️",
+    run_command: "🔧",
+    git: "🌿",
+    web_search: "🔍",
+    web_fetch: "🌐",
+    list_directory: "📁",
+    spawn_subagent: "🤖",
+    memory_save: "💾",
+  };
+
+  return React.createElement(
+    Box, { flexDirection: "column", paddingLeft: 1, marginTop: 0 },
+    React.createElement(Text, { bold: true, dimColor: true }, "── Actions ──"),
+    ...events.slice(-8).map((evt, i) => {
+      const icon = TOOL_ICONS[evt.toolName] ?? "🔧";
+      const ts = evt.timestamp
+        ? new Date(evt.timestamp).toLocaleTimeString("en-US", { hour12: false })
+        : "";
+      const status = evt.denied ? "❌" : evt.dryRun ? "👁️" : evt.success ? "✅" : "⏳";
+      const arg = evt.primaryArg ? ` → ${evt.primaryArg.slice(0, 30)}` : "";
+      const approvedTag = evt.approved === true ? " (approved ✅)" : evt.approved === false ? " (denied ❌)" : "";
+
+      return React.createElement(
+        Box, { key: i },
+        React.createElement(Text, { dimColor: true }, `${ts} `),
+        React.createElement(Text, {}, `${icon} `),
+        React.createElement(Text, { color: "cyan" }, evt.toolName),
+        React.createElement(Text, { dimColor: true }, `${arg}${approvedTag} ${status}`),
+      );
+    }),
+  );
+}
+
+/**
+ * ApprovalDialog — intercepts "approve" policy tools
+ *
+ * Resolves the pending approval and calls onApprove / onDeny / onDryRun
+ */
+function ApprovalDialog({ action, onApprove, onDeny, onDryRun }) {
+  const riskMap = {
+    run_command: "HIGH",
+    git: "HIGH",
+    keychain: "HIGH",
+    delete_file: "HIGH",
+    write_file: "MEDIUM",
+    file_edit: "MEDIUM",
+  };
+  const risk = riskMap[action?.toolName] ?? "MEDIUM";
+  const riskColor = risk === "HIGH" ? "red" : risk === "MEDIUM" ? "yellow" : "green";
+
+  // Format args summary
+  let argSummary = "";
+  const args = action?.args ?? {};
+  if (args.command) argSummary = `Command: ${args.command}`;
+  else if (args.path) argSummary = `Path: ${args.path}`;
+  else argSummary = JSON.stringify(args).slice(0, 60);
+
+  useInput((input, key) => {
+    const ch = input.toLowerCase();
+    if (ch === "y") { onApprove?.(); }
+    else if (ch === "n" || key.escape) { onDeny?.(); }
+    else if (ch === "d") { onDryRun?.(); }
+  });
+
+  return React.createElement(
+    Box, {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "yellow",
+      paddingX: 2,
+      paddingY: 1,
+      marginY: 1,
+    },
+    React.createElement(Text, { bold: true, color: "yellow" }, "⚠️  Permission Required"),
+    React.createElement(Text, {}, ""),
+    React.createElement(
+      Box, {},
+      React.createElement(Text, { dimColor: true }, "Tool:    "),
+      React.createElement(Text, { bold: true }, action?.toolName ?? "?"),
+    ),
+    argSummary ? React.createElement(
+      Box, {},
+      React.createElement(Text, { dimColor: true }, "Action:  "),
+      React.createElement(Text, {}, argSummary),
+    ) : null,
+    React.createElement(
+      Box, {},
+      React.createElement(Text, { dimColor: true }, "Risk:    "),
+      React.createElement(Text, { bold: true, color: riskColor }, risk),
+    ),
+    React.createElement(Text, {}, ""),
+    React.createElement(
+      Box, { gap: 2 },
+      React.createElement(Text, { color: "green", bold: true }, "[Y] Approve"),
+      React.createElement(Text, { color: "red", bold: true }, "[N] Deny"),
+      React.createElement(Text, { color: "cyan", bold: true }, "[D] Dry-run first"),
+    ),
+  );
+}
+
+// -----------------------------------------------------------------------
+// Status Bar (enhanced)
+// -----------------------------------------------------------------------
+
+function StatusBar({ provider, model, workstream, tokens, cost, permMode, pendingApprovals, auditCount, workMdLoaded }) {
   const providerLabel = PROVIDERS[provider]?.label ?? provider ?? "?";
   const costStr = cost > 0 ? `$${cost.toFixed(4)}` : "$0.0000";
   const tokStr = tokens > 0 ? `${tokens}t` : "0t";
+  const permIcon = permMode === "approve" ? "🔐" : permMode === "notify" ? "📋" : "✅";
 
   return React.createElement(
-    Box, { paddingX: 1, backgroundColor: "blue", width: "100%" },
+    Box, { paddingX: 1, backgroundColor: "blue", width: "100%", flexWrap: "wrap" },
     React.createElement(Text, { color: "white", bold: true }, "🌿 Wispy"),
     React.createElement(Text, { color: "white" }, "  "),
     React.createElement(Text, { color: "cyan" }, providerLabel),
@@ -108,11 +303,24 @@ function StatusBar({ provider, model, workstream, tokens, cost }) {
     React.createElement(Text, { color: "yellow" }, model ?? "?"),
     React.createElement(Text, { color: "white" }, "  ·  ws: "),
     React.createElement(Text, { color: "green" }, workstream ?? "default"),
+    workMdLoaded ? React.createElement(Text, { color: "green" }, " 📝") : null,
     React.createElement(Text, { color: "white" }, "  ·  "),
     React.createElement(Text, { color: "white", dimColor: true }, `${tokStr} ${costStr}`),
+    React.createElement(Text, { color: "white" }, "  ·  "),
+    React.createElement(Text, { color: "white" }, `${permIcon} ${permMode ?? "auto"}`),
+    pendingApprovals > 0
+      ? React.createElement(Text, { color: "yellow", bold: true }, `  ⚠️ ${pendingApprovals} pending`)
+      : null,
+    auditCount > 0
+      ? React.createElement(Text, { dimColor: true, color: "white" }, `  ${auditCount} events`)
+      : null,
   );
 }
 
+// -----------------------------------------------------------------------
+// Tool line & Message components
+// -----------------------------------------------------------------------
+
 function ToolLine({ name, args, result }) {
   const argsStr = Object.values(args ?? {}).join(", ").slice(0, 40);
   const status = result ? (result.success ? "✅" : "❌") : "⏳";
@@ -132,7 +340,11 @@ function Message({ msg }) {
         React.createElement(Text, { color: "white" }, msg.content)));
   }
   if (msg.role === "tool_call") {
-    return React.createElement(ToolLine, { name: msg.name, args: msg.args, result: msg.result });
+    return React.createElement(
+      Box, { flexDirection: "column" },
+      React.createElement(ToolLine, { name: msg.name, args: msg.args, result: msg.result }),
+      msg.receipt ? React.createElement(ReceiptView, { receipt: msg.receipt }) : null,
+    );
   }
   if (msg.role === "assistant") {
     return React.createElement(
@@ -145,6 +357,10 @@ function Message({ msg }) {
   return null;
 }
 
+// -----------------------------------------------------------------------
+// Input Area
+// -----------------------------------------------------------------------
+
 function InputArea({ value, onChange, onSubmit, loading }) {
   return React.createElement(
     Box, { borderStyle: "single", borderColor: loading ? "yellow" : "green", paddingX: 1 },
@@ -174,21 +390,137 @@ function WispyTUI({ engine }) {
   const [totalTokens, setTotalTokens] = useState(0);
   const [totalCost, setTotalCost] = useState(0);
 
+  // Trust UX state
+  const [pendingApproval, setPendingApproval] = useState(null); // { action, resolve }
+  const [actionTimeline, setActionTimeline] = useState([]);
+  const [auditCount, setAuditCount] = useState(0);
+  const [workMdLoaded, setWorkMdLoaded] = useState(false);
+
   // Conversation history for persistence
   const conversationRef = useRef([]);
+  const approvalResolverRef = useRef(null);
 
+  // Wire harness events to TUI state
   useEffect(() => {
-    (async () => {
-      const existing = await loadConversation();
-      if (existing.length > 0) {
-        const displayMsgs = existing.filter(m => m.role === "user" || m.role === "assistant").slice(-20);
-        setMessages(displayMsgs);
-        conversationRef.current = existing.slice(-20);
-      }
-    })();
+    const harness = engine.harness;
+    if (!harness) return;
+
+    const onStart = ({ toolName, args }) => {
+      const primaryArg = args?.path ?? args?.command ?? args?.query ?? args?.task ?? "";
+      setActionTimeline(prev => [...prev.slice(-20), {
+        toolName,
+        args,
+        primaryArg,
+        timestamp: new Date().toISOString(),
+        success: null,
+        denied: false,
+        dryRun: false,
+      }]);
+      setAuditCount(c => c + 1);
+    };
+
+    const onComplete = ({ toolName, receipt }) => {
+      setActionTimeline(prev => {
+        const updated = [...prev];
+        // Update the last entry for this tool
+        for (let i = updated.length - 1; i >= 0; i--) {
+          if (updated[i].toolName === toolName && updated[i].success === null) {
+            updated[i] = {
+              ...updated[i],
+              success: receipt?.success ?? true,
+              approved: receipt?.approved,
+              dryRun: receipt?.dryRun ?? false,
+            };
+            break;
+          }
+        }
+        return updated;
+      });
+    };
+
+    const onDenied = ({ toolName, receipt }) => {
+      setActionTimeline(prev => {
+        const updated = [...prev];
+        for (let i = updated.length - 1; i >= 0; i--) {
+          if (updated[i].toolName === toolName && updated[i].success === null) {
+            updated[i] = { ...updated[i], success: false, denied: true };
+            break;
+          }
+        }
+        return updated;
+      });
+    };
+
+    harness.on("tool:start", onStart);
+    harness.on("tool:complete", onComplete);
+    harness.on("tool:denied", onDenied);
+
+    return () => {
+      harness.off("tool:start", onStart);
+      harness.off("tool:complete", onComplete);
+      harness.off("tool:denied", onDenied);
+    };
+  }, [engine]);
+
+  // Check if work.md is loaded
+  useEffect(() => {
+    engine._loadWorkMd?.().then(content => {
+      setWorkMdLoaded(!!content);
+    }).catch(() => {});
+  }, [engine]);
+
+  // Wire approval handler to TUI
+  useEffect(() => {
+    engine.permissions.setApprovalHandler(async (action) => {
+      return new Promise((resolve) => {
+        approvalResolverRef.current = resolve;
+        setPendingApproval({ action });
+      });
+    });
+
+    return () => {
+      engine.permissions.setApprovalHandler(null);
+    };
+  }, [engine]);
+
+  const handleApprove = useCallback(() => {
+    approvalResolverRef.current?.(true);
+    approvalResolverRef.current = null;
+    setPendingApproval(null);
+  }, []);
+
+  const handleDeny = useCallback(() => {
+    approvalResolverRef.current?.(false);
+    approvalResolverRef.current = null;
+    setPendingApproval(null);
   }, []);
 
+  const handleDryRun = useCallback(async () => {
+    // Deny the real execution, then re-run as dry-run (shown as a system message)
+    const action = pendingApproval?.action;
+    approvalResolverRef.current?.(false);
+    approvalResolverRef.current = null;
+    setPendingApproval(null);
+
+    if (action) {
+      // Show dry-run result inline
+      try {
+        const { simulateDryRun } = await import("../core/harness.mjs").catch(() => ({}));
+        const preview = simulateDryRun
+          ? simulateDryRun(action.toolName, action.args ?? {})
+          : { preview: `Would execute: ${action.toolName}` };
+        setMessages(prev => [...prev, {
+          role: "assistant",
+          content: `👁️ **Dry-run preview**\n\n\`\`\`\n${preview.preview ?? JSON.stringify(preview, null, 2)}\n\`\`\`\n\n*(Real execution was denied. Approve to run for real.)* 🌿`,
+        }]);
+      } catch {}
+    }
+  }, [pendingApproval]);
+
   const handleSubmit = useCallback(async (value) => {
+    // If there's a pending approval, don't submit new messages
+    if (pendingApproval) return;
+
     const input = value.trim();
     if (!input || loading) return;
     setInputValue("");
@@ -209,12 +541,21 @@ function WispyTUI({ engine }) {
         setMessages(prev => [...prev, { role: "assistant", content: `Session: ${totalTokens} tokens (~$${totalCost.toFixed(4)}) 🌿` }]);
         return;
       }
+      if (cmd === "/timeline") {
+        const tl = actionTimeline.map(e => `- ${e.toolName}: ${e.success ? "✅" : e.denied ? "❌" : "⏳"}`).join("\n");
+        setMessages(prev => [...prev, { role: "assistant", content: `**Action Timeline:**\n${tl || "(empty)"} 🌿` }]);
+        return;
+      }
       if (cmd === "/model" && parts[1]) {
         engine.providers.setModel(parts[1]);
         setModel(parts[1]);
         setMessages(prev => [...prev, { role: "assistant", content: `Model changed to ${parts[1]} 🌿` }]);
         return;
       }
+      if (cmd === "/dryrun") {
+        setMessages(prev => [...prev, { role: "assistant", content: "Dry-run mode is set per tool call. Use `/dryrun <toolname> <json_args>` to simulate. 🌿" }]);
+        return;
+      }
     }
 
     setMessages(prev => [...prev, { role: "user", content: input }]);
@@ -222,20 +563,50 @@ function WispyTUI({ engine }) {
     setLoading(true);
 
     try {
-      let responseText = "";
+      let lastReceipt = null;
 
       const result = await engine.processMessage(null, input, {
-        onChunk: (chunk) => {
-          // TUI doesn't stream to terminal, chunks are collected
-        },
+        onChunk: () => {},
         onToolCall: (name, args) => {
-          const toolMsg = { role: "tool_call", name, args, result: null };
+          const toolMsg = { role: "tool_call", name, args, result: null, receipt: null };
           setMessages(prev => [...prev, toolMsg]);
         },
+        onToolResult: (name, toolResult) => {
+          // Update the last tool_call message with result
+          setMessages(prev => {
+            const updated = [...prev];
+            for (let i = updated.length - 1; i >= 0; i--) {
+              if (updated[i].role === "tool_call" && updated[i].name === name && updated[i].result === null) {
+                updated[i] = { ...updated[i], result: toolResult };
+                break;
+              }
+            }
+            return updated;
+          });
+        },
+        onReceipt: (receipt) => {
+          lastReceipt = receipt;
+          // Attach receipt to the last matching tool_call message
+          if (receipt?.toolName) {
+            setMessages(prev => {
+              const updated = [...prev];
+              for (let i = updated.length - 1; i >= 0; i--) {
+                if (updated[i].role === "tool_call" && updated[i].name === receipt.toolName) {
+                  updated[i] = { ...updated[i], receipt };
+                  break;
+                }
+              }
+              return updated;
+            });
+          }
+          if (receipt?.diff?.unified) {
+            setWorkMdLoaded(!!engine._workMdContent);
+          }
+        },
         noSave: true,
       });
 
-      responseText = result.content;
+      const responseText = result.content;
 
       // Update token tracking
       const { input: inputToks = 0, output: outputToks = 0 } = engine.providers.sessionTokens;
@@ -264,32 +635,61 @@ function WispyTUI({ engine }) {
     } finally {
       setLoading(false);
     }
-  }, [loading, model, totalTokens, totalCost, engine, exit]);
+  }, [loading, model, totalTokens, totalCost, engine, exit, pendingApproval, actionTimeline]);
 
   const displayMessages = messages.slice(-30);
+  // Determine permission mode from engine's policies
+  const permMode = engine.permissions?.getPolicy?.("run_command") ?? "approve";
 
   return React.createElement(
     Box, { flexDirection: "column", height: "100%" },
+
+    // Status bar
     React.createElement(StatusBar, {
       provider: engine.provider,
       model,
       workstream: ACTIVE_WORKSTREAM,
       tokens: totalTokens,
       cost: totalCost,
+      permMode,
+      pendingApprovals: pendingApproval ? 1 : 0,
+      auditCount,
+      workMdLoaded,
     }),
+
+    // Message list
     React.createElement(
       Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, overflowY: "hidden" },
       displayMessages.length === 0
         ? React.createElement(Box, { marginY: 1 },
-            React.createElement(Text, { dimColor: true }, "  🌿 Type a message to start chatting. /help for commands."))
+            React.createElement(Text, { dimColor: true }, "  🌿 Type a message to start chatting. /help for commands, /timeline for action history."))
         : displayMessages.map((msg, i) => React.createElement(Message, { key: i, msg })),
     ),
-    React.createElement(InputArea, {
-      value: inputValue,
-      onChange: setInputValue,
-      onSubmit: handleSubmit,
-      loading,
-    }),
+
+    // Action timeline (always visible at bottom, above input)
+    actionTimeline.length > 0
+      ? React.createElement(ActionTimeline, { events: actionTimeline })
+      : null,
+
+    // Approval dialog (shown above input when pending)
+    pendingApproval
+      ? React.createElement(ApprovalDialog, {
+          action: pendingApproval.action,
+          onApprove: handleApprove,
+          onDeny: handleDeny,
+          onDryRun: handleDryRun,
+        })
+      : null,
+
+    // Input area (hidden when approval dialog is shown)
+    !pendingApproval
+      ? React.createElement(InputArea, {
+          value: inputValue,
+          onChange: setInputValue,
+          onSubmit: handleSubmit,
+          loading,
+        })
+      : null,
   );
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wispy-cli",
-  "version": "1.1.1",
-  "description": "🌿 Wispy — AI workspace assistant with multi-agent orchestration and multi-channel bot support",
+  "version": "1.2.1",
+  "description": "🌿 Wispy — AI workspace assistant with trustworthy execution (harness, receipts, approvals, diffs)",
   "license": "MIT",
   "author": "Minseo & Poropo",
   "homepage": "https://github.com/mindsurf0176-ui/poropo-workspace/tree/master/agent-workstream-os/wispy-cli#readme",