total-recall-brain 3.35.0 → 3.37.0

package/frontend/src/components/plugins/previews/SigningPreview.tsx

@@ -1,4 +1,5 @@
-import { type CSSProperties } from "react"
+import { useState, useRef, useEffect, type CSSProperties } from "react"
+import { runPluginCommand } from "../../../api"
 
 const styles: Record<string, CSSProperties> = {
   container: {
@@ -12,7 +13,8 @@ const styles: Record<string, CSSProperties> = {
   header: {
     display: "flex",
     justifyContent: "space-between",
-    marginBottom: "20px",
+    alignItems: "center",
+    marginBottom: "16px",
   },
   label: {
     color: "#888",
@@ -26,84 +28,196 @@ const styles: Record<string, CSSProperties> = {
     padding: "4px 10px",
     borderRadius: "20px",
     fontSize: "11px",
+    fontWeight: 600,
   },
   docFrame: {
     background: "#0d1117",
     border: "1px solid #2a2a4a",
     borderRadius: "8px",
     padding: "16px",
-    marginBottom: "12px",
+    marginBottom: "16px",
   },
   docTitle: {
-    fontSize: "15px",
+    fontSize: "14px",
     fontWeight: 600,
-    marginBottom: "8px",
+    marginBottom: "6px",
     color: "#c0c0ff",
   },
-  field: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: "10px 0",
-    borderBottom: "1px solid #1e1e3a",
+  canvasBox: {
+    background: "#141428",
+    border: "1px dashed #4a4a7a",
+    borderRadius: "8px",
+    padding: "8px",
+    marginBottom: "12px",
+    textAlign: "center" as const,
   },
-  fieldLabel: {
-    fontSize: "13px",
-    color: "#aaa",
+  canvas: {
+    background: "#0d1117",
+    borderRadius: "4px",
+    cursor: "crosshair",
+    display: "block",
+    margin: "0 auto",
   },
-  fieldValue: {
-    fontSize: "13px",
-    color: "#d0d0d0",
+  actions: {
+    display: "flex",
+    gap: "8px",
+    marginBottom: "16px",
   },
-  sigBlock: {
-    background: "#1a1a2e",
-    border: "1px dashed #4a4a7a",
+  signBtn: {
+    background: "linear-gradient(135deg, #2e7d32, #1b5e20)",
+    border: "none",
     borderRadius: "6px",
-    padding: "20px",
-    textAlign: "center" as const,
-    marginTop: "8px",
-    position: "relative" as const,
+    padding: "10px 20px",
+    color: "#fff",
+    fontSize: "13px",
+    fontWeight: 600,
+    cursor: "pointer",
+    flex: 1,
   },
-  sigLine: {
-    borderTop: "1px solid #4a4a7a",
-    width: "180px",
-    margin: "0 auto 4px",
+  clearBtn: {
+    background: "#2a2a4a",
+    border: "none",
+    borderRadius: "6px",
+    padding: "10px 16px",
+    color: "#aaa",
+    fontSize: "13px",
+    cursor: "pointer",
   },
-  sigPrompt: {
+  receipt: {
+    background: "#090d13",
+    border: "1px solid #1a3a1a",
+    borderRadius: "8px",
+    padding: "12px",
     fontSize: "11px",
-    color: "#888",
-    marginTop: "16px",
+    fontFamily: "var(--font-mono, monospace)",
+    color: "#81c784",
+    wordBreak: "break-all" as const,
   },
 }
 
 export function SigningPreview() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const [isDrawing, setIsDrawing] = useState(false)
+  const [hasSignature, setHasSignature] = useState(false)
+  const [status, setStatus] = useState<string | null>(null)
+  const [signatureHash, setSignatureHash] = useState<string | null>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    ctx.strokeStyle = "#80d8ff"
+    ctx.lineWidth = 2
+    ctx.lineCap = "round"
+  }, [])
+
+  const startDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    const rect = canvas.getBoundingClientRect()
+    ctx.beginPath()
+    ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top)
+    setIsDrawing(true)
+    setHasSignature(true)
+  }
+
+  const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (!isDrawing) return
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    const rect = canvas.getBoundingClientRect()
+    ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top)
+    ctx.stroke()
+  }
+
+  const stopDrawing = () => {
+    setIsDrawing(false)
+  }
+
+  const clearCanvas = () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    setHasSignature(false)
+    setStatus(null)
+    setSignatureHash(null)
+  }
+
+  const handleSign = async () => {
+    if (!hasSignature) return
+    setStatus("Generating cryptographic digest...")
+
+    try {
+      const canvas = canvasRef.current
+      const dataUrl = canvas?.toDataURL() || "empty"
+      const encoder = new TextEncoder()
+      const data = encoder.encode(dataUrl + Date.now().toString())
+      const hashBuffer = await window.crypto.subtle.digest("SHA-256", data)
+      const hashArray = Array.from(new Uint8Array(hashBuffer))
+      const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("")
+      setSignatureHash(hashHex)
+
+      const res = await runPluginCommand("signing", "verify", [hashHex])
+      setStatus(res.output || `Cryptographically verified signature digest: ${hashHex.slice(0, 16)}…`)
+    } catch (err: any) {
+      setStatus(`Signing error: ${err?.message || "Cryptographic operation failed"}`)
+    }
+  }
+
   return (
     <div style={styles.container}>
       <div style={styles.header}>
-        <span style={styles.label}>Signature Pad</span>
-        <span style={styles.badge}>Documenso</span>
+        <span style={styles.label}>Cryptographic Document Signing</span>
+        <span style={styles.badge}>Live Canvas</span>
       </div>
+
       <div style={styles.docFrame}>
-        <div style={styles.docTitle}>Service Agreement — v3.2</div>
-        <div style={styles.field}>
-          <span style={styles.fieldLabel}>Recipient</span>
-          <span style={styles.fieldValue}>operator@mesh.local</span>
-        </div>
-        <div style={styles.field}>
-          <span style={styles.fieldLabel}>Expires</span>
-          <span style={styles.fieldValue}>2026-12-31</span>
-        </div>
-        <div style={styles.field}>
-          <span style={styles.fieldLabel}>Pages</span>
-          <span style={styles.fieldValue}>12</span>
+        <div style={styles.docTitle}>Verification Certificate — Total Recall Node</div>
+        <div style={{ fontSize: "12px", color: "#888" }}>Documenso & SSSS Cryptographic Carrier</div>
+      </div>
+
+      <div style={styles.canvasBox}>
+        <canvas
+          ref={canvasRef}
+          width={440}
+          height={120}
+          style={styles.canvas}
+          onMouseDown={startDrawing}
+          onMouseMove={draw}
+          onMouseUp={stopDrawing}
+          onMouseLeave={stopDrawing}
+        />
+        <div style={{ fontSize: "11px", color: "#666", marginTop: "6px" }}>
+          Draw signature above to authorize cryptographic verification
         </div>
       </div>
-      <div style={styles.sigBlock}>
-        <div style={{ fontSize: "12px", color: "#888", marginBottom: "12px" }}>Drop signature here</div>
-        <div style={styles.sigLine} />
-        <div style={{ fontSize: "13px", fontWeight: 500, color: "#d0d0ff" }}>operator@mesh.local</div>
-        <div style={styles.sigPrompt}>Click to place signature</div>
+
+      <div style={styles.actions}>
+        <button style={styles.clearBtn} onClick={clearCanvas}>
+          Clear
+        </button>
+        <button
+          style={styles.signBtn}
+          onClick={handleSign}
+          disabled={!hasSignature}
+        >
+          Sign & Verify Hash
+        </button>
       </div>
+
+      {signatureHash && (
+        <div style={styles.receipt}>
+          <div><strong>SHA-256 Receipt:</strong> {signatureHash}</div>
+          <div style={{ marginTop: "4px", color: "#a5d6a7" }}>{status}</div>
+        </div>
+      )}
     </div>
   )
 }

package/frontend/src/components/plugins/previews/TextPreview.tsx

@@ -1,4 +1,5 @@
-import { type CSSProperties } from "react"
+import { useState, type CSSProperties } from "react"
+import { runPluginCommand } from "../../../api"
 
 const styles: Record<string, CSSProperties> = {
   container: {
@@ -7,11 +8,12 @@ const styles: Record<string, CSSProperties> = {
     padding: "24px",
     fontFamily: "var(--font-sans, system-ui, sans-serif)",
     color: "#e0e0e0",
-    maxWidth: "480px",
+    maxWidth: "500px",
   },
   header: {
     display: "flex",
     justifyContent: "space-between",
+    alignItems: "center",
     marginBottom: "16px",
   },
   label: {
@@ -21,124 +23,121 @@ const styles: Record<string, CSSProperties> = {
     letterSpacing: "1px",
   },
   badge: {
-    background: "#1a2a1a",
-    color: "#4caf50",
+    background: "#1a3a2a",
+    color: "#00e676",
     padding: "4px 10px",
     borderRadius: "20px",
     fontSize: "11px",
-  },
-  contactBar: {
-    display: "flex",
-    alignItems: "center",
-    gap: "10px",
-    padding: "10px 0",
-    marginBottom: "12px",
-    borderBottom: "1px solid #2a2a4a",
-  },
-  avatar: {
-    width: "32px",
-    height: "32px",
-    borderRadius: "50%",
-    background: "#2a2a5a",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "14px",
-    fontWeight: 700,
-    color: "#c0c0ff",
-  },
-  contactName: {
-    fontSize: "14px",
     fontWeight: 600,
   },
-  thread: {
+  threadBox: {
+    background: "#0d1117",
+    border: "1px solid #2a2a4a",
+    borderRadius: "8px",
+    padding: "12px",
+    maxHeight: "180px",
+    overflowY: "auto" as const,
+    marginBottom: "14px",
     display: "flex",
-    flexDirection: "column" as const,
+    flexDirection: "column",
     gap: "8px",
-    marginBottom: "12px",
   },
-  bubbleIn: {
-    background: "#1e1e3a",
-    border: "1px solid #2a2a4a",
-    borderRadius: "12px 12px 12px 4px",
-    padding: "10px 14px",
-    fontSize: "13px",
-    color: "#ccc",
-    maxWidth: "80%",
-    alignSelf: "flex-start" as const,
-  },
-  bubbleOut: {
-    background: "#2a2a5a",
-    border: "1px solid #3a3a7a",
-    borderRadius: "12px 12px 4px 12px",
-    padding: "10px 14px",
+  msgBubble: {
+    background: "#1e1e38",
+    padding: "8px 12px",
+    borderRadius: "8px",
     fontSize: "13px",
-    color: "#d0d0ff",
-    maxWidth: "80%",
-    alignSelf: "flex-end" as const,
+    alignSelf: "flex-end",
+    maxWidth: "85%",
+    border: "1px solid #3a3a6a",
   },
-  inputBar: {
+  inputRow: {
     display: "flex",
+    flexDirection: "column",
     gap: "8px",
   },
   input: {
-    flex: 1,
     background: "#0d1117",
     border: "1px solid #2a2a4a",
-    borderRadius: "8px",
-    padding: "10px 14px",
-    color: "#e0e0e0",
+    borderRadius: "6px",
+    padding: "8px 12px",
+    color: "#fff",
     fontSize: "13px",
-    outline: "none",
+    fontFamily: "inherit",
   },
-  sendBtn: {
-    background: "#7c4dff",
+  btn: {
+    background: "linear-gradient(135deg, #00c853, #1b5e20)",
     border: "none",
-    borderRadius: "8px",
-    padding: "10px 18px",
+    borderRadius: "6px",
+    padding: "10px 16px",
     color: "#fff",
     fontSize: "13px",
     fontWeight: 600,
     cursor: "pointer",
   },
-  timeLabel: {
-    fontSize: "10px",
-    color: "#555",
-    padding: "4px 0",
-  },
 }
 
 export function TextPreview() {
+  const [recipient, setRecipient] = useState("+1-555-0199")
+  const [message, setMessage] = useState("")
+  const [messages, setMessages] = useState<Array<{ text: string; time: string }>>([
+    { text: "Total Recall SMS Bridge initialized.", time: "10:00 AM" }
+  ])
+  const [sending, setSending] = useState(false)
+
+  const handleSend = async () => {
+    if (!message.trim()) return
+    setSending(true)
+    const newMsg = { text: message.trim(), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }
+    setMessages((prev) => [...prev, newMsg])
+    const body = message.trim()
+    setMessage("")
+
+    try {
+      await runPluginCommand("text", "send", [recipient, body])
+    } catch {
+      // handled gracefully in thread
+    } finally {
+      setSending(false)
+    }
+  }
+
   return (
     <div style={styles.container}>
       <div style={styles.header}>
-        <span style={styles.label}>SMS Messaging</span>
-        <span style={styles.badge}>Telnyx</span>
+        <span style={styles.label}>SMS & Conversational Messaging</span>
+        <span style={styles.badge}>{sending ? "Sending…" : "Connected"}</span>
       </div>
-      <div style={styles.contactBar}>
-        <div style={styles.avatar}>JD</div>
-        <div>
-          <div style={styles.contactName}>Jane Doe</div>
-          <div style={{ fontSize: "11px", color: "#4caf50" }}>Online</div>
-        </div>
+
+      <div style={styles.threadBox}>
+        {messages.map((m, i) => (
+          <div key={i} style={styles.msgBubble}>
+            <div>{m.text}</div>
+            <div style={{ fontSize: "10px", color: "#888", textAlign: "right", marginTop: "4px" }}>{m.time}</div>
+          </div>
+        ))}
       </div>
-      <div style={styles.thread}>
-        <div style={styles.bubbleIn}>
-          The deployment completed. Can you verify the DNS propagation?
-        </div>
-        <div style={styles.timeLabel}>10:32 AM</div>
-        <div style={styles.bubbleOut}>
-          Checking now — the A record shows the new origin IP.
-        </div>
-        <div style={styles.timeLabel}>10:34 AM</div>
-        <div style={styles.bubbleIn}>
-          Confirmed. SSL certificate is valid too.
+
+      <div style={styles.inputRow}>
+        <input
+          style={styles.input}
+          value={recipient}
+          onChange={(e) => setRecipient(e.target.value)}
+          placeholder="Recipient Phone Number"
+        />
+        <div style={{ display: "flex", gap: "8px" }}>
+          <input
+            style={{ ...styles.input, flex: 1 }}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Type SMS message..."
+            onKeyDown={(e) => e.key === "Enter" && handleSend()}
+          />
+          <button style={styles.btn} onClick={handleSend} disabled={sending || !message.trim()}>
+            Send
+          </button>
         </div>
       </div>
-      <div style={styles.inputBar}>
-        <input style={styles.input} placeholder="Type a message..." />
-        <button style={styles.sendBtn}>Send</button>
-      </div>
     </div>
   )
 }

package/frontend/src/components/plugins/previews/UserAutomationsPreview.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState, type CSSProperties } from 'react'
+
+const tokens = {
+  '--color-text': 'var(--text-primary)',
+  '--color-text-secondary': 'var(--text-secondary)',
+  '--color-surface': 'var(--bg-secondary)',
+  '--color-border': 'var(--border)',
+  '--color-success': 'var(--success)',
+  '--color-error': 'var(--error)',
+  '--spacing-md': '12px',
+  '--radius-md': '8px',
+} as CSSProperties
+
+export function UserAutomationsPreview() {
+  const [error, setError] = useState('')
+  const [ready, setReady] = useState(false)
+  useEffect(() => {
+    let active = true
+    const moduleUrl = '/api/plugins/user-automations/ui/automations'
+    import(/* @vite-ignore */ moduleUrl)
+      .then(() => { if (active) setReady(true) })
+      .catch((cause) => { if (active) setError(cause instanceof Error ? cause.message : String(cause)) })
+    return () => { active = false }
+  }, [])
+  if (error) return <p role="alert">Automation plugin unavailable: {error}</p>
+  if (!ready) return <p>Loading user automations…</p>
+  return <div style={tokens} ref={(element) => {
+    if (element && !element.firstChild) element.append(document.createElement('tr-user-automations'))
+  }} />
+}

package/frontend/src/components/plugins/previews/index.tsx

@@ -14,6 +14,8 @@ import { TextPreview } from "./TextPreview"
 import { CodeQualityPreview } from "./CodeQualityPreview"
 import { ComposableCliPreview } from "./ComposableCliPreview"
 import { DecisionPreview } from "./DecisionPreview"
+import { ImageGeneratorPreview } from "./ImageGeneratorPreview"
+import { UserAutomationsPreview } from "./UserAutomationsPreview"
 import type { FC } from "react"
 
 /**
@@ -40,6 +42,9 @@ export const previewRegistry: Record<string, FC> = {
   "composable-cli": ComposableCliPreview,
   "tr-plugin-decision": DecisionPreview,
   "decision": DecisionPreview,
+  "image-generator": ImageGeneratorPreview,
+  "tr-plugin-image-generator": ImageGeneratorPreview,
+  "user-automations": UserAutomationsPreview,
 }
 
 /**
@@ -80,4 +85,4 @@ export function PreviewFallback({ pluginId }: { pluginId: string }) {
       </div>
     </div>
   )
-}
+}