vibe-widget 0.2.3__py3-none-any.whl

vibe_widget/AppWrapper/AppWrapper.js

@@ -0,0 +1,340 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import htm from "htm";
+
+import { ensureGlobalStyles } from "./utils/styles";
+import SandboxedRunner from "./components/SandboxedRunner";
+import FloatingMenu from "./components/FloatingMenu";
+import LoadingOverlay from "./components/LoadingOverlay";
+import SelectionOverlay from "./components/SelectionOverlay";
+import EditPromptPanel from "./components/EditPromptPanel";
+import AuditNotice from "./components/AuditNotice";
+import EditorViewer from "./components/editor/EditorViewer";
+import useModelSync from "./hooks/useModelSync";
+import useKeyboardShortcuts from "./hooks/useKeyboardShortcuts";
+
+const html = htm.bind(React.createElement);
+
+ensureGlobalStyles();
+
+const AUDIT_ACK_KEY = "vibe_widget_audit_ack";
+const AUDIT_AUTORUN_KEY = "vibe_widget_audit_autorun";
+
+function AppWrapper({ model }) {
+  const {
+    status,
+    logs,
+    code,
+    errorMessage,
+    auditStatus,
+    auditResponse,
+    auditError,
+    auditApplyStatus,
+    auditApplyResponse,
+    auditApplyError,
+    executionMode,
+    executionApproved
+  } = useModelSync(model);
+  const [isMenuOpen, setMenuOpen] = React.useState(false);
+  const [grabMode, setGrabMode] = React.useState(null);
+  const [promptCache, setPromptCache] = React.useState({});
+  const [showSource, setShowSource] = React.useState(false);
+  const [sourceError, setSourceError] = React.useState("");
+  const [renderCode, setRenderCode] = React.useState(code || "");
+  const [lastGoodCode, setLastGoodCode] = React.useState(code || "");
+  const [applyState, setApplyState] = React.useState({
+    pending: false,
+    previousCode: "",
+    nextCode: ""
+  });
+  const containerRef = React.useRef(null);
+  const [minHeight, setMinHeight] = React.useState(0);
+  const [hasAuditAck, setHasAuditAck] = React.useState(() => {
+    try {
+      return sessionStorage.getItem(AUDIT_ACK_KEY) === "true";
+    } catch (err) {
+      return false;
+    }
+  });
+  const [showAudit, setShowAudit] = React.useState(false);
+  const [hasAutoRunAudit, setHasAutoRunAudit] = React.useState(() => {
+    try {
+      return sessionStorage.getItem(AUDIT_AUTORUN_KEY) === "true";
+    } catch (err) {
+      return false;
+    }
+  });
+
+  const handleGrabStart = () => {
+    setMenuOpen(false);
+    setGrabMode("selecting");
+  };
+
+  const handleViewSource = () => {
+    setMenuOpen(false);
+    setShowSource(true);
+  };
+
+  const handleElementSelect = (elementDescription, elementBounds) => {
+    const elementKey = `${elementDescription.tag}-${elementDescription.classes}-${elementDescription.text?.slice(0, 20)}`;
+    setGrabMode({ element: elementDescription, bounds: elementBounds, elementKey });
+  };
+
+  const handleEditSubmit = (prompt) => {
+    model.set("grab_edit_request", {
+      element: grabMode.element,
+      prompt: prompt,
+    });
+    model.save_changes();
+    setPromptCache((prev) => ({ ...prev, [grabMode.elementKey]: prompt }));
+    setGrabMode(null);
+  };
+
+  const handleCancel = (currentPrompt) => {
+    if (grabMode?.elementKey && currentPrompt) {
+      setPromptCache((prev) => ({ ...prev, [grabMode.elementKey]: currentPrompt }));
+    }
+    setGrabMode(null);
+  };
+
+  const isLoading = status === "generating";
+  const hasCode = renderCode && renderCode.length > 0;
+  const approvalMode = executionMode === "approve";
+  const isApproved = executionApproved || !approvalMode;
+  const shouldRenderWidget = hasCode && isApproved;
+
+  useKeyboardShortcuts({ isLoading, hasCode, grabMode, onGrabStart: handleGrabStart });
+  React.useEffect(() => {
+    if (!containerRef.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const height = Math.round(entry.contentRect.height || 0);
+        if (height > 50) {
+          setMinHeight(height);
+        }
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  React.useEffect(() => {
+    if (approvalMode) {
+      setShowAudit(false);
+      return;
+    }
+    if (!hasAuditAck && !isLoading && hasCode) {
+      setShowAudit(true);
+    }
+  }, [approvalMode, hasAuditAck, isLoading, hasCode]);
+
+  React.useEffect(() => {
+    if (hasAutoRunAudit) return;
+    if (!approvalMode) return;
+    if (status !== "ready") return;
+    if (!code) return;
+    if (auditStatus === "running") return;
+    handleAuditRequest("fast");
+    try {
+      sessionStorage.setItem(AUDIT_AUTORUN_KEY, "true");
+    } catch (err) {
+      // Ignore storage failures and only track in memory.
+    }
+    setHasAutoRunAudit(true);
+  }, [approvalMode, hasAutoRunAudit, status, code, auditStatus]);
+
+  React.useEffect(() => {
+    if (!applyState.pending) return;
+    if (errorMessage) {
+      setApplyState({ pending: false, previousCode: "", nextCode: "" });
+      setSourceError(errorMessage);
+      setShowSource(false);
+      return;
+    }
+    if (code === applyState.nextCode && status === "ready") {
+      setApplyState({ pending: false, previousCode: "", nextCode: "" });
+      setRenderCode(code);
+      setLastGoodCode(code);
+      setSourceError("");
+    }
+  }, [applyState, code, errorMessage, model]);
+
+  React.useEffect(() => {
+    if (!sourceError || status === "generating" || showSource) return;
+    if (renderCode !== code) {
+      setShowSource(true);
+    }
+  }, [sourceError, status, showSource, renderCode, code]);
+
+  React.useEffect(() => {
+    if (!approvalMode) {
+      return;
+    }
+    if (executionApproved) {
+      setShowSource(false);
+      return;
+    }
+    if (status === "ready" && hasCode) {
+      setShowSource(true);
+    }
+  }, [approvalMode, executionApproved, status, hasCode]);
+
+  React.useEffect(() => {
+    if (applyState.pending) return;
+    if (status !== "ready") return;
+    if (!code) return;
+    setRenderCode(code);
+    setLastGoodCode(code);
+  }, [applyState.pending, status, code]);
+
+  React.useEffect(() => {
+    if (!renderCode && lastGoodCode) {
+      setRenderCode(lastGoodCode);
+    }
+  }, [renderCode, lastGoodCode]);
+
+  const handleApplySource = (payload) => {
+    if (payload && payload.type === "audit_apply") {
+      model.set("audit_apply_request", {
+        changes: payload.changes || [],
+        base_code: payload.baseCode || ""
+      });
+      model.save_changes();
+      setShowSource(false);
+      return;
+    }
+    const nextCode = payload;
+    setApplyState({
+      pending: true,
+      previousCode: code,
+      nextCode
+    });
+    setShowSource(false);
+    model.set("error_message", "");
+    model.set("code", nextCode);
+    model.save_changes();
+  };
+
+  const handleAuditRequest = (level) => {
+    model.set("audit_request", {
+      level: level || "fast",
+      request_id: `${Date.now()}-${Math.random().toString(16).slice(2)}`
+    });
+    model.save_changes();
+  };
+
+  const handleApproveRun = () => {
+    model.set("execution_approved", true);
+    model.save_changes();
+    setShowSource(false);
+    setShowAudit(false);
+  };
+
+  const auditReport = auditResponse?.report_yaml || "";
+  const auditMeta = auditResponse && !auditResponse.error ? auditResponse : null;
+  const auditData = auditResponse?.report || null;
+  const auditConcerns = auditData?.fast_audit?.concerns || [];
+  const highAuditCount = auditConcerns.filter((concern) => concern?.impact === "high").length;
+
+  const handleAuditAccept = () => {
+    try {
+      sessionStorage.setItem(AUDIT_ACK_KEY, "true");
+    } catch (err) {
+      // Allow dismissal without persistence if session storage is blocked.
+    }
+    setHasAuditAck(true);
+    setShowAudit(false);
+  };
+
+  return html`
+    <div
+      class="vibe-container"
+      ref=${containerRef}
+      style=${{
+        position: "relative",
+        width: "100%",
+        minHeight: minHeight ? `${minHeight}px` : "220px"
+      }}
+    >
+      ${shouldRenderWidget && html`
+        <div style=${{
+          opacity: isLoading ? 0.4 : 1,
+          pointerEvents: isLoading ? "none" : "auto",
+          transition: "opacity 0.3s ease",
+        }}>
+          <${SandboxedRunner} code=${renderCode} model=${model} />
+        </div>
+      `}
+      
+      ${isLoading && html`
+        <${LoadingOverlay} 
+          logs=${logs} 
+          hasExistingWidget=${hasCode}
+        />
+      `}
+      
+      ${!isLoading && shouldRenderWidget && html`
+        <${FloatingMenu} 
+          isOpen=${isMenuOpen} 
+          onToggle=${() => setMenuOpen(!isMenuOpen)}
+          onGrabModeStart=${handleGrabStart}
+          onViewSource=${handleViewSource}
+          highAuditCount=${highAuditCount}
+          isEditMode=${!!grabMode}
+        />
+      `}
+        
+      ${grabMode === "selecting" && html`
+        <${SelectionOverlay} 
+          onElementSelect=${handleElementSelect}
+          onCancel=${handleCancel}
+        />
+      `}
+      
+      ${grabMode && grabMode !== "selecting" && html`
+        <${EditPromptPanel}
+          elementBounds=${grabMode.bounds}
+          elementDescription=${grabMode.element}
+          initialPrompt=${promptCache[grabMode.elementKey] || ""}
+          onSubmit=${handleEditSubmit}
+          onCancel=${handleCancel}
+        />
+      `}
+
+      ${showAudit && html`
+        <${AuditNotice} onAccept=${handleAuditAccept} />
+      `}
+
+      ${showSource && html`
+        <${EditorViewer}
+          code=${code}
+          errorMessage=${sourceError}
+          auditStatus=${auditStatus}
+          auditReport=${auditReport}
+          auditError=${auditError || auditResponse?.error}
+          auditMeta=${auditMeta}
+          auditData=${auditData}
+          auditApplyStatus=${auditApplyStatus}
+          auditApplyResponse=${auditApplyResponse}
+          auditApplyError=${auditApplyError}
+          onAudit=${handleAuditRequest}
+          onApply=${handleApplySource}
+          onClose=${() => setShowSource(false)}
+          approvalMode=${approvalMode}
+          isApproved=${isApproved}
+          onApprove=${handleApproveRun}
+        />
+      `}
+    </div>
+  `;
+}
+
+let rootInstance = null;
+
+function render({ model, el }) {
+  if (!rootInstance) {
+    rootInstance = createRoot(el);
+  }
+  rootInstance.render(html`<${AppWrapper} model=${model} />`);
+}
+
+export default { render };

vibe_widget/AppWrapper/components/AuditNotice.js

@@ -0,0 +1,81 @@
+import * as React from "react";
+import htm from "htm";
+
+const html = htm.bind(React.createElement);
+
+export default function AuditNotice({ onAccept }) {
+  return html`
+    <div class="audit-overlay">
+      <style>
+        .audit-overlay {
+          position: absolute;
+          inset: 0;
+          z-index: 1200;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(6, 6, 6, 0.72);
+          backdrop-filter: blur(4px);
+        }
+        .audit-card {
+          width: min(520px, 92%);
+          background: #0f172a;
+          color: #e2e8f0;
+          border: 2px solid rgba(248, 113, 113, 0.65);
+          border-radius: 12px;
+          padding: 20px;
+          box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
+          font-family: "JetBrains Mono", "Space Mono", ui-monospace, SFMono-Regular,
+            Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        }
+        .audit-title {
+          font-size: 14px;
+          text-transform: uppercase;
+          letter-spacing: 0.08em;
+          color: #fca5a5;
+          margin-bottom: 12px;
+        }
+        .audit-body {
+          font-size: 13px;
+          line-height: 1.5;
+          color: #e2e8f0;
+          margin-bottom: 16px;
+        }
+        .audit-body strong {
+          color: #fef2f2;
+        }
+        .audit-actions {
+          display: flex;
+          justify-content: flex-end;
+          gap: 10px;
+        }
+        .audit-accept {
+          background: #f97316;
+          color: #0b0b0b;
+          border: none;
+          border-radius: 8px;
+          padding: 8px 14px;
+          font-size: 12px;
+          font-weight: 600;
+          cursor: pointer;
+        }
+        .audit-accept:hover {
+          background: #fb923c;
+        }
+      </style>
+      <div class="audit-card" role="dialog" aria-live="polite">
+        <div class="audit-title">Audit Required</div>
+        <div class="audit-body">
+          Vibe widgets are <strong>LLM-generated code</strong>. Before using results,
+          review the widget for correctness, data handling, and safety.
+          By continuing, you acknowledge the need to audit outputs.
+        </div>
+        <div class="audit-actions">
+          <button class="audit-accept" onClick=${onAccept}>
+            I Understand
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}

vibe_widget/AppWrapper/components/EditPromptPanel.js

@@ -0,0 +1,232 @@
+import * as React from "react";
+import htm from "htm";
+
+const html = htm.bind(React.createElement);
+
+export default function EditPromptPanel({ elementBounds, elementDescription, initialPrompt, onSubmit, onCancel }) {
+  const [prompt, setPrompt] = React.useState(initialPrompt || "");
+  const panelRef = React.useRef(null);
+  const textareaRef = React.useRef(null);
+  const [position, setPosition] = React.useState({ top: 0, left: 0 });
+  const [textareaHeight, setTextareaHeight] = React.useState(40);
+  const [panelHovered, setPanelHovered] = React.useState(false);
+  const [buttonHovered, setButtonHovered] = React.useState(false);
+
+  const PANEL_WIDTH = 320;
+  const MIN_TEXTAREA_HEIGHT = 40;
+  const MAX_TEXTAREA_HEIGHT = 288;
+  const LINE_HEIGHT = 24;
+  const PADDING = 12;
+  const GAP = 8;
+  
+  const getButtonOpacity = () => {
+    if (buttonHovered) return 1;
+    if (panelHovered) return 0.3;
+    return 0.1;
+  };
+
+  React.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        onCancel(prompt);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onCancel, prompt]);
+
+  React.useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = MIN_TEXTAREA_HEIGHT + "px";
+      const scrollHeight = textareaRef.current.scrollHeight;
+      const newHeight = Math.min(Math.max(scrollHeight, MIN_TEXTAREA_HEIGHT), MAX_TEXTAREA_HEIGHT);
+      setTextareaHeight(newHeight);
+      textareaRef.current.style.height = newHeight + "px";
+    }
+  }, [prompt]);
+
+  React.useEffect(() => {
+    if (!elementBounds) return;
+
+    const viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+
+    const panelHeight = textareaHeight + 56;
+
+    const elCenterX = elementBounds.left + elementBounds.width / 2;
+    const elCenterY = elementBounds.top + elementBounds.height / 2;
+
+    let top = elementBounds.bottom + GAP;
+    let left = elCenterX - PANEL_WIDTH / 2;
+
+    if (top + panelHeight + PADDING > viewport.height) {
+      top = elementBounds.top - panelHeight - GAP;
+    }
+
+    if (top < PADDING) {
+      top = Math.max(PADDING, elCenterY - panelHeight / 2);
+      if (elementBounds.right + GAP + PANEL_WIDTH + PADDING < viewport.width) {
+        left = elementBounds.right + GAP;
+      } else {
+        left = elementBounds.left - PANEL_WIDTH - GAP;
+      }
+    }
+
+    left = Math.max(PADDING, Math.min(left, viewport.width - PANEL_WIDTH - PADDING));
+    top = Math.max(PADDING, Math.min(top, viewport.height - panelHeight - PADDING));
+
+    setPosition({ top, left });
+  }, [elementBounds, textareaHeight]);
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      if (e.shiftKey) {
+        e.stopPropagation();
+      } else if (prompt.trim()) {
+        e.preventDefault();
+        e.stopPropagation();
+        onSubmit(prompt);
+      }
+    } else if (e.key === "Escape") {
+      onCancel(prompt);
+    }
+  };
+
+  return html`
+    <div>
+      ${elementBounds && html`
+        <div class="selected-element-highlight" style=${{
+          position: "fixed",
+          left: elementBounds.left + "px",
+          top: elementBounds.top + "px",
+          width: elementBounds.width + "px",
+          height: elementBounds.height + "px",
+          outline: "2px solid #f97316",
+          outlineOffset: "0px",
+          background: "rgba(249, 115, 22, 0.1)",
+          borderRadius: "2px",
+          pointerEvents: "none",
+          zIndex: 10000,
+          boxSizing: "border-box",
+        }}>
+          ${elementDescription?.tag && html`
+            <div style=${{
+              position: "absolute",
+              top: "-18px",
+              left: "-2px",
+              background: "#f97316",
+              color: "white",
+              fontSize: "10px",
+              fontWeight: 600,
+              padding: "1px 5px",
+              borderRadius: "3px 3px 0 0",
+              whiteSpace: "nowrap",
+              fontFamily: "ui-monospace, monospace",
+            }}>
+              ${elementDescription.tag.toLowerCase()}
+            </div>
+          `}
+        </div>
+      `}
+      <div 
+        ref=${panelRef}
+        class="edit-panel" 
+        onMouseEnter=${() => setPanelHovered(true)}
+        onMouseLeave=${() => setPanelHovered(false)}
+        style=${{
+        position: "fixed",
+        top: position.top + "px",
+        left: position.left + "px",
+        width: PANEL_WIDTH + "px",
+        background: "rgba(26, 26, 26, 0.95)",
+        border: "1px solid rgba(255, 255, 255, 0.15)",
+        borderRadius: "10px",
+        padding: "8px",
+        zIndex: 10001,
+        backdropFilter: "blur(8px)",
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.4)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px",
+      }}
+      >
+        <div style=${{ position: "relative", width: "100%" }}>
+          <textarea
+            ref=${textareaRef}
+            value=${prompt}
+            onInput=${(e) => setPrompt(e.target.value)}
+            onKeyDown=${handleKeyDown}
+            placeholder="What would you like to change?"
+            rows="1"
+            style=${{
+          width: "100%",
+          minHeight: MIN_TEXTAREA_HEIGHT + "px",
+          maxHeight: MAX_TEXTAREA_HEIGHT + "px",
+          padding: "10px 50px 10px 12px",
+          borderRadius: "6px",
+          border: "1px solid rgba(255,255,255,0.1)",
+          background: "rgba(255,255,255,0.05)",
+          color: "white",
+          fontSize: "13px",
+          lineHeight: "20px",
+          outline: "none",
+          resize: "none",
+          overflowY: textareaHeight >= MAX_TEXTAREA_HEIGHT ? "auto" : "hidden",
+          boxSizing: "border-box",
+          fontFamily: "inherit",
+        }}
+            autoFocus
+          />
+          <button 
+            onClick=${() => prompt.trim() ? onSubmit(prompt) : onCancel(prompt)} 
+            onMouseEnter=${() => setButtonHovered(true)}
+            onMouseLeave=${() => setButtonHovered(false)}
+            style=${{
+          position: "absolute",
+          top: "6px",
+          right: textareaHeight >= MAX_TEXTAREA_HEIGHT ? "16px" : "8px",
+          width: "28px",
+          height: "28px",
+          borderRadius: "6px",
+          background: prompt.trim()
+            ? "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+            : "rgba(255,255,255,0.15)",
+          color: "white",
+          border: "none",
+          cursor: "pointer",
+          fontSize: "14px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "opacity 0.2s, background 0.2s",
+          padding: 0,
+          opacity: getButtonOpacity(),
+        }}
+            title=${prompt.trim() ? "Send (Enter)" : "Cancel (Esc)"}
+          >
+            ${prompt.trim() ? html`
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="12" y1="19" x2="12" y2="5"></line>
+                <polyline points="5 12 12 5 19 12"></polyline>
+              </svg>
+            ` : html`
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            `}
+          </button>
+        </div>
+        <div style=${{
+          fontSize: "11px",
+          color: "rgba(255,255,255,0.4)",
+          paddingLeft: "4px",
+        }}>
+          Enter to send, Shift+Enter for new line
+        </div>
+      </div>
+    </div>
+  `;
+}