@wrongstack/webui 0.3.3 → 0.3.7

package/dist/index.js

@@ -108,6 +108,11 @@ function playCompletionChime() {
   tone(659.25, 0, 0.18);
   tone(880, 0.12, 0.24);
 }
+function playPermissionChime() {
+  tone(523.25, 0, 0.15);
+  tone(659.25, 0.1, 0.15);
+  tone(783.99, 0.2, 0.25);
+}
 
 // src/lib/favicon.ts
 var BASE_BG = "#4f46e5";
@@ -119,6 +124,8 @@ function buildSvg(status) {
       return '<circle cx="50" cy="14" r="14" fill="#ef4444" stroke="#fff" stroke-width="3" />';
     if (status === "running")
       return '<circle cx="50" cy="14" r="14" fill="#f59e0b" stroke="#fff" stroke-width="3" />';
+    if (status === "attention")
+      return '<circle cx="50" cy="14" r="14" fill="#eab308" stroke="#fff" stroke-width="3"><animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite"/></circle>';
     return "";
   })();
   return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
@@ -153,7 +160,7 @@ function installFaviconVisibilityReset() {
   if (visibilityHookInstalled || typeof document === "undefined") return;
   visibilityHookInstalled = true;
   document.addEventListener("visibilitychange", () => {
-    if (!document.hidden && (currentStatus === "ready" || currentStatus === "error")) {
+    if (!document.hidden && (currentStatus === "ready" || currentStatus === "error" || currentStatus === "attention")) {
       setFaviconStatus("idle");
     }
   });
@@ -178,7 +185,7 @@ async function ensureNotificationPermission() {
     return "denied";
   }
 }
-function notifyIfHidden(title, body) {
+function notifyIfHidden(title, body, tag) {
   if (typeof document === "undefined" || !document.hidden) return;
   if (permissionState !== "granted") return;
   try {
@@ -186,10 +193,13 @@ function notifyIfHidden(title, body) {
       body,
       icon: "/favicon.ico",
       // Tag-collapse: if multiple notifications stack while the tab is
-      // hidden, only the latest "WrongStack run" shows up so we don't
-      // litter the OS notification center.
-      tag: "wrongstack-run"
-      // Auto-dismiss as soon as the user focuses the tab.
+      // hidden, only the latest with the same tag shows up so we don't
+      // litter the OS notification center. Permission alerts use a
+      // separate tag so they don't get swallowed by run-completion.
+      tag: tag ?? "wrongstack-run",
+      // Require interaction for permission alerts — the agent is stuck
+      // until the user responds, so auto-dismiss would be harmful.
+      requireInteraction: tag === "wrongstack-confirm"
     });
     n.onclick = () => {
       window.focus();
@@ -212,6 +222,9 @@ var WrongStackWebSocketClient = class {
   messageQueue = [];
   pendingConfirms = /* @__PURE__ */ new Map();
   sessionId = null;
+  /** Auth token received from server in session.start payload.
+   *  Used for reconnection so the client doesn't need to know the token upfront. */
+  wsToken = null;
   /** Stored last close reason / error message so the UI can show "what
    *  went wrong" while reconnecting instead of a generic spinner. */
   lastErrorText;
@@ -245,7 +258,8 @@ var WrongStackWebSocketClient = class {
       }
       this.setStatus({ state: "connecting" });
       try {
-        this.ws = new WebSocket(this.url);
+        const wsUrl = this.wsToken ? `${this.url}${this.url.includes("?") ? "&" : "?"}token=${this.wsToken}` : this.url;
+        this.ws = new WebSocket(wsUrl);
         this.ws.binaryType = "arraybuffer";
         const connectTimeout = setTimeout(() => {
           reject(new Error("Connection timeout"));
@@ -363,6 +377,9 @@ var WrongStackWebSocketClient = class {
     if (msg.type === "session.start") {
       const payload = msg.payload;
       this.sessionId = payload.sessionId;
+      if (payload.wsToken) {
+        this.wsToken = payload.wsToken;
+      }
     }
     this.emit(msg);
   }
@@ -1165,6 +1182,19 @@ function installHandlers(ws) {
       input: payload.input,
       suggestedPattern: payload.suggestedPattern
     });
+    try {
+      playPermissionChime();
+    } catch {
+    }
+    void ensureNotificationPermission();
+    notifyIfHidden(
+      "WrongStack needs approval",
+      `Tool "${payload.toolName}" is waiting for your decision.`,
+      "wrongstack-confirm"
+    );
+    if (typeof document !== "undefined" && document.hidden) {
+      setFaviconStatus("attention");
+    }
   });
   on("run.result", (msg) => {
     const payload = msg.payload;
@@ -5377,7 +5407,7 @@ function ChatView() {
 
 // src/components/ConfirmDialog.tsx
 import { AlertTriangle as AlertTriangle2, FileEdit, Globe, ShieldAlert, Terminal as Terminal3, Wrench as Wrench3 } from "lucide-react";
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect13, useRef as useRef10 } from "react";
 
 // src/components/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -5505,6 +5535,7 @@ function SmartInputPreview({
 function ConfirmDialog() {
   const { showConfirmDialog, confirmInfo, hideConfirm } = useUIStore();
   const { sendConfirm } = useWebSocket();
+  const dialogRef = useRef10(null);
   const handleConfirm = (decision) => {
     if (confirmInfo) {
       sendConfirm(confirmInfo.id, decision);
@@ -5526,9 +5557,13 @@ function ConfirmDialog() {
       } else if (e.key === "a" || e.key === "A") {
         e.preventDefault();
         handleConfirm("always");
+      } else if (e.key === "d" || e.key === "D") {
+        e.preventDefault();
+        handleConfirm("deny");
       }
     };
     window.addEventListener("keydown", onKey);
+    dialogRef.current?.focus();
     return () => window.removeEventListener("keydown", onKey);
   }, [showConfirmDialog, confirmInfo?.id]);
   if (!confirmInfo) {
@@ -5536,11 +5571,11 @@ function ConfirmDialog() {
   }
   const Icon2 = pickToolIcon(confirmInfo.toolName);
   const isEdit = /edit|write/i.test(confirmInfo.toolName);
-  return /* @__PURE__ */ jsx19(Dialog, { open: showConfirmDialog, onOpenChange: () => hideConfirm(), children: /* @__PURE__ */ jsxs18(DialogContent, { className: "sm:max-w-2xl", children: [
+  return /* @__PURE__ */ jsx19(Dialog, { open: showConfirmDialog, onOpenChange: () => hideConfirm(), children: /* @__PURE__ */ jsxs18(DialogContent, { className: "sm:max-w-2xl border-yellow-500/50", ref: dialogRef, tabIndex: -1, children: [
     /* @__PURE__ */ jsxs18(DialogHeader, { children: [
       /* @__PURE__ */ jsxs18(DialogTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx19(ShieldAlert, { className: "h-5 w-5 text-yellow-500" }),
-        "Confirm: ",
+        /* @__PURE__ */ jsx19(ShieldAlert, { className: "h-5 w-5 text-yellow-500 animate-pulse" }),
+        "Approval required: ",
         confirmInfo.toolName
       ] }),
       /* @__PURE__ */ jsxs18(DialogDescription, { children: [
@@ -5575,14 +5610,17 @@ function ConfirmDialog() {
       ] })
     ] }),
     /* @__PURE__ */ jsxs18(DialogFooter, { className: "gap-2 sm:gap-2 flex-wrap", children: [
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs18(
         Button,
         {
           variant: "outline",
           size: "sm",
           onClick: () => handleConfirm("deny"),
-          title: "Reject this and all future calls matching the pattern",
-          children: "Deny always"
+          title: "Reject this and all future calls matching the pattern (d)",
+          children: [
+            "Deny always ",
+            /* @__PURE__ */ jsx19("kbd", { className: "ml-1 text-[10px] border rounded px-1 bg-background", children: "d" })
+          ]
         }
       ),
       /* @__PURE__ */ jsxs18(
@@ -5733,7 +5771,7 @@ var ErrorBoundary = class extends Component {
 
 // src/components/QuickModelSwitcher.tsx
 import { ArrowRight as ArrowRight2, Cpu as Cpu3, Search as Search4 } from "lucide-react";
-import { useEffect as useEffect15, useMemo as useMemo5, useRef as useRef10, useState as useState15 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo5, useRef as useRef11, useState as useState15 } from "react";
 import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 function QuickModelSwitcher() {
   const open = useUIStore((s) => s.modelSwitcherOpen);
@@ -5742,7 +5780,7 @@ function QuickModelSwitcher() {
   const [selected, setSelected] = useState15(0);
   const [saved, setSaved] = useState15([]);
   const [modelsByProvider, setModelsByProvider] = useState15({});
-  const inputRef = useRef10(null);
+  const inputRef = useRef11(null);
   const wsUrl = useConfigStore((s) => s.wsUrl);
   const currentProvider = useConfigStore((s) => s.provider);
   const currentModel = useConfigStore((s) => s.model);