total-recall-brain 3.35.0 → 3.36.0

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

@@ -1,17 +1,19 @@
 import { useState, type CSSProperties } from "react"
+import { runPluginCommand } from "../../../api"
 
 const styles: Record<string, CSSProperties> = {
   container: {
-    background: "linear-gradient(135deg, #0f1923, #1a1a2e)",
+    background: "linear-gradient(135deg, #0a1628, #1a1a2e)",
     borderRadius: "12px",
     padding: "24px",
-    fontFamily: "var(--font-sans, system-ui, sans-serif)",
+    fontFamily: "var(--font-mono, 'SF Mono', monospace)",
     color: "#e0e0e0",
-    maxWidth: "480px",
+    maxWidth: "580px",
   },
   header: {
     display: "flex",
     justifyContent: "space-between",
+    alignItems: "center",
     marginBottom: "16px",
   },
   label: {
@@ -21,136 +23,186 @@ const styles: Record<string, CSSProperties> = {
     letterSpacing: "1px",
   },
   badge: {
-    background: "#3a1a1a",
-    color: "#ff8a80",
+    background: "#2a1a3a",
+    color: "#ce93d8",
     padding: "4px 10px",
     borderRadius: "20px",
     fontSize: "11px",
+    fontWeight: 600,
   },
-  confidence: {
+  table: {
+    width: "100%",
+    borderCollapse: "collapse" as const,
     marginBottom: "16px",
   },
-  sliderRow: {
-    display: "flex",
-    alignItems: "center",
-    gap: "12px",
-    marginBottom: "8px",
+  th: {
+    color: "#888",
+    fontSize: "11px",
+    textTransform: "uppercase" as const,
+    padding: "8px",
+    textAlign: "left" as const,
+    borderBottom: "1px solid #2a2a4a",
   },
-  slider: {
-    flex: 1,
-    WebkitAppearance: "none" as const,
-    height: "6px",
-    borderRadius: "3px",
-    background: "#2a2a4a",
-    outline: "none",
+  td: {
+    padding: "8px",
+    fontSize: "12px",
+    borderBottom: "1px solid #1a1a2e",
   },
-  thresholdValue: {
-    fontSize: "18px",
-    fontWeight: 700,
-    color: "#7c4dff",
-    minWidth: "36px",
-    textAlign: "center" as const,
+  slider: {
+    width: "100%",
+    accentColor: "#ab47bc",
   },
-  stage: {
+  winnerBox: {
     background: "#0d1117",
-    border: "1px solid #2a2a4a",
+    border: "1px solid #4a148c",
     borderRadius: "8px",
-    padding: "12px 16px",
-    marginBottom: "8px",
-  },
-  stageHeader: {
+    padding: "14px",
     display: "flex",
     justifyContent: "space-between",
-    marginBottom: "6px",
-  },
-  stageName: {
-    fontSize: "13px",
-    fontWeight: 600,
-  },
-  stageStatus: {
-    fontSize: "12px",
-  },
-  stageBar: {
-    height: "4px",
-    borderRadius: "2px",
-    background: "#2a2a4a",
-    overflow: "hidden" as const,
-  },
-  barFill: {
-    height: "100%",
-    borderRadius: "2px",
-    transition: "width 0.3s ease",
+    alignItems: "center",
   },
-  fallbackNote: {
-    fontSize: "11px",
-    color: "#888",
-    marginTop: "12px",
-    padding: "8px",
-    border: "1px dashed #2a2a4a",
-    borderRadius: "6px",
-    textAlign: "center" as const,
+  score: {
+    fontSize: "18px",
+    fontWeight: 700,
+    color: "#e1bee7",
   },
 }
 
-interface DecisionStage {
-  name: string
-  score: number
-  passes: boolean
-}
-
 export function DecisionPreview() {
-  const [threshold, setThreshold] = useState(65)
+  const [weights, setWeights] = useState<Record<string, number>>({
+    Performance: 8,
+    Maintainability: 7,
+    Security: 9,
+  })
+
+  const [optAScores, setOptAScores] = useState<Record<string, number>>({
+    Performance: 9,
+    Maintainability: 7,
+    Security: 8,
+  })
+
+  const [optBScores, setOptBScores] = useState<Record<string, number>>({
+    Performance: 7,
+    Maintainability: 9,
+    Security: 9,
+  })
 
-  const stages: DecisionStage[] = [
-    { name: "Rule Match", score: 92, passes: 92 >= threshold },
-    { name: "Semantic Coherence", score: 78, passes: 78 >= threshold },
-    { name: "Mesh Consensus", score: 45, passes: 45 >= threshold },
-  ]
+  const [evaluating, setEvaluating] = useState(false)
+  const [output, setOutput] = useState<string | null>(null)
 
-  const allPass = stages.every((s) => s.passes)
+  const calcWeightedScore = (scores: Record<string, number>) => {
+    let sum = 0
+    let totalWeight = 0
+    for (const [k, w] of Object.entries(weights)) {
+      sum += (scores[k] || 0) * w
+      totalWeight += w
+    }
+    return totalWeight > 0 ? (sum / totalWeight).toFixed(2) : "0.00"
+  }
+
+  const scoreA = parseFloat(calcWeightedScore(optAScores))
+  const scoreB = parseFloat(calcWeightedScore(optBScores))
+  const winner = scoreA >= scoreB ? "Option A" : "Option B"
+
+  const handleRunEvaluation = async () => {
+    setEvaluating(true)
+    try {
+      const res = await runPluginCommand("decision", "eval", [
+        `OptionA=${scoreA}`,
+        `OptionB=${scoreB}`,
+      ])
+      setOutput(res.output || res.error || `Decision logged: Winner is ${winner}`)
+    } catch (err: any) {
+      setOutput(`Evaluation error: ${err?.message || "Check decision plugin"}`)
+    } finally {
+      setEvaluating(false)
+    }
+  }
 
   return (
     <div style={styles.container}>
       <div style={styles.header}>
-        <span style={styles.label}>Decision Gate</span>
-        <span style={{ ...styles.badge, color: allPass ? "#4caf50" : "#ff8a80", background: allPass ? "#1a3a1a" : "#3a1a1a" }}>
-          {allPass ? "Passed" : "Blocked"}
-        </span>
+        <span style={styles.label}>Typed Decision Matrix</span>
+        <span style={styles.badge}>Jev Evaluation</span>
       </div>
-      <div style={styles.confidence}>
-        <div style={{ fontSize: "11px", color: "#888", marginBottom: "6px" }}>Confidence Threshold</div>
-        <div style={styles.sliderRow}>
-          <input
-            type="range"
-            min={0}
-            max={100}
-            value={threshold}
-            onChange={(e) => setThreshold(Number(e.target.value))}
-            style={styles.slider}
-          />
-          <span style={styles.thresholdValue}>{threshold}%</span>
-        </div>
-      </div>
-      <div>
-        {stages.map((s) => (
-          <div key={s.name} style={styles.stage}>
-            <div style={styles.stageHeader}>
-              <span style={styles.stageName}>{s.name}</span>
-              <span style={{ ...styles.stageStatus, color: s.passes ? "#4caf50" : "#ff8a80" }}>
-                {s.passes ? "✓" : "✗"} {s.score}%
-              </span>
-            </div>
-            <div style={styles.stageBar}>
-              <div style={{ ...styles.barFill, width: `${s.score}%`, background: s.passes ? "#4caf50" : "#ff5252" }} />
-            </div>
+
+      <table style={styles.table}>
+        <thead>
+          <tr>
+            <th style={styles.th}>Criterion</th>
+            <th style={styles.th}>Weight</th>
+            <th style={styles.th}>Option A</th>
+            <th style={styles.th}>Option B</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.keys(weights).map((c) => (
+            <tr key={c}>
+              <td style={styles.td}>{c}</td>
+              <td style={styles.td}>
+                <input
+                  type="range"
+                  min="1"
+                  max="10"
+                  value={weights[c]}
+                  style={styles.slider}
+                  onChange={(e) => setWeights({ ...weights, [c]: parseInt(e.target.value, 10) })}
+                />
+              </td>
+              <td style={styles.td}>
+                <input
+                  type="range"
+                  min="1"
+                  max="10"
+                  value={optAScores[c]}
+                  style={styles.slider}
+                  onChange={(e) => setOptAScores({ ...optAScores, [c]: parseInt(e.target.value, 10) })}
+                />
+              </td>
+              <td style={styles.td}>
+                <input
+                  type="range"
+                  min="1"
+                  max="10"
+                  value={optBScores[c]}
+                  style={styles.slider}
+                  onChange={(e) => setOptBScores({ ...optBScores, [c]: parseInt(e.target.value, 10) })}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <div style={styles.winnerBox}>
+        <div>
+          <div style={{ fontSize: "11px", color: "#888" }}>RANKED OUTCOME</div>
+          <div style={{ fontSize: "16px", fontWeight: 700, color: "#fff" }}>
+            {winner} (Score: {Math.max(scoreA, scoreB)})
           </div>
-        ))}
-      </div>
-      <div style={styles.fallbackNote}>
-        {allPass
-          ? "All gates passed — executing primary route"
-          : "Mesh consensus below threshold — activating fallback route"}
+        </div>
+        <button
+          style={{
+            background: "linear-gradient(135deg, #7b1fa2, #4a148c)",
+            border: "none",
+            borderRadius: "6px",
+            padding: "8px 16px",
+            color: "#fff",
+            fontSize: "12px",
+            cursor: "pointer",
+          }}
+          onClick={handleRunEvaluation}
+          disabled={evaluating}
+        >
+          {evaluating ? "Evaluating…" : "Evaluate Decision"}
+        </button>
       </div>
+
+      {output && (
+        <div style={{ marginTop: "12px", fontSize: "11px", color: "#ce93d8" }}>
+          {output}
+        </div>
+      )}
     </div>
   )
 }

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

@@ -1,18 +1,19 @@
-import { type CSSProperties } from "react"
+import { useState, type CSSProperties } from "react"
 
 const styles: Record<string, CSSProperties> = {
   container: {
-    background: "linear-gradient(135deg, #0f1923, #1a1a2e)",
+    background: "linear-gradient(135deg, #0a1628, #1a1a2e)",
     borderRadius: "12px",
     padding: "24px",
     fontFamily: "var(--font-sans, system-ui, sans-serif)",
     color: "#e0e0e0",
-    maxWidth: "480px",
+    maxWidth: "540px",
   },
   header: {
     display: "flex",
     justifyContent: "space-between",
-    marginBottom: "20px",
+    alignItems: "center",
+    marginBottom: "16px",
   },
   label: {
     color: "#888",
@@ -21,97 +22,130 @@ const styles: Record<string, CSSProperties> = {
     letterSpacing: "1px",
   },
   badge: {
-    background: "#2a1a3a",
-    color: "#ce93d8",
+    background: "#3a2a1a",
+    color: "#ffb74d",
     padding: "4px 10px",
     borderRadius: "20px",
     fontSize: "11px",
+    fontWeight: 600,
   },
-  palette: {
-    display: "flex",
+  controlsGrid: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
     gap: "12px",
-    marginBottom: "20px",
-    flexWrap: "wrap" as const,
-  },
-  swatch: {
-    width: "44px",
-    height: "44px",
-    borderRadius: "10px",
-    border: "2px solid #2a2a4a",
-  },
-  typography: {
     marginBottom: "16px",
   },
-  h1: {
-    fontSize: "24px",
-    fontWeight: 700,
-    color: "#ffffff",
-    marginBottom: "4px",
-  },
-  h2: {
-    fontSize: "18px",
-    fontWeight: 600,
-    color: "#d0d0ff",
-    marginBottom: "4px",
+  control: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
   },
-  bodyText: {
-    fontSize: "13px",
+  ctlLabel: {
+    fontSize: "11px",
     color: "#aaa",
-    lineHeight: 1.6,
   },
-  glass: {
-    background: "rgba(255, 255, 255, 0.05)",
-    backdropFilter: "blur(12px)",
-    border: "1px solid rgba(255, 255, 255, 0.1)",
-    borderRadius: "10px",
-    padding: "14px 20px",
-    fontSize: "13px",
-    color: "#ccc",
-  },
-  labelSm: {
-    fontSize: "10px",
-    color: "#666",
-    textTransform: "uppercase" as const,
-    letterSpacing: "1px",
-    marginBottom: "8px",
+  input: {
+    background: "#0d1117",
+    border: "1px solid #2a2a4a",
+    borderRadius: "6px",
+    padding: "6px 10px",
+    color: "#fff",
+    fontSize: "12px",
+    fontFamily: "var(--font-mono, monospace)",
   },
 }
 
-const swatches = [
-  { name: "Primary", color: "#7c4dff" },
-  { name: "Secondary", color: "#00bfa5" },
-  { name: "Accent", color: "#ff6d00" },
-  { name: "Surface", color: "#1a1a2e" },
-  { name: "Error", color: "#ff1744" },
-]
-
 export function DesignPreview() {
+  const [primaryColor, setPrimaryColor] = useState("#ec4899")
+  const [borderRadius, setBorderRadius] = useState("10px")
+  const [surfaceBg, setSurfaceBg] = useState("#1e1e38")
+  const [accentText, setAccentText] = useState("Generative UI Active")
+
   return (
     <div style={styles.container}>
       <div style={styles.header}>
-        <span style={styles.label}>Design Tokens</span>
-        <span style={styles.badge}>DESIGN.md</span>
+        <span style={styles.label}>Design System & Token Playground</span>
+        <span style={styles.badge}>Live Tokens</span>
       </div>
-      <div style={styles.labelSm}>Color Palette</div>
-      <div style={styles.palette}>
-        {swatches.map((s) => (
-          <div key={s.name} title={s.name}>
-            <div style={{ ...styles.swatch, background: s.color }} />
-            <div style={{ fontSize: "9px", color: "#666", textAlign: "center" as const, marginTop: "4px" }}>{s.name}</div>
-          </div>
-        ))}
-      </div>
-      <div style={styles.labelSm}>Typography</div>
-      <div style={styles.typography}>
-        <div style={styles.h1}>Heading 1</div>
-        <div style={styles.h2}>Heading 2</div>
-        <div style={styles.bodyText}>
-          Body text with a clean 400-weight font at 13px. Designed for readability at scale.
+
+      <div style={styles.controlsGrid}>
+        <div style={styles.control}>
+          <label style={styles.ctlLabel}>--color-primary</label>
+          <input
+            type="color"
+            value={primaryColor}
+            onChange={(e) => setPrimaryColor(e.target.value)}
+            style={{ ...styles.input, height: "34px", padding: "2px", cursor: "pointer" }}
+          />
+        </div>
+        <div style={styles.control}>
+          <label style={styles.ctlLabel}>--border-radius</label>
+          <select
+            style={styles.input}
+            value={borderRadius}
+            onChange={(e) => setBorderRadius(e.target.value)}
+          >
+            <option value="4px">4px (Subtle)</option>
+            <option value="10px">10px (Default)</option>
+            <option value="18px">18px (Smooth)</option>
+            <option value="28px">28px (Pill)</option>
+          </select>
+        </div>
+        <div style={styles.control}>
+          <label style={styles.ctlLabel}>--surface-bg</label>
+          <input
+            type="color"
+            value={surfaceBg}
+            onChange={(e) => setSurfaceBg(e.target.value)}
+            style={{ ...styles.input, height: "34px", padding: "2px", cursor: "pointer" }}
+          />
         </div>
       </div>
-      <div style={styles.labelSm}>Glassmorphic Surface</div>
-      <div style={styles.glass}>
-        backdrop-filter: blur(12px) — the modern glass aesthetic
+
+      {/* Live Component styled solely by the active token values */}
+      <div
+        style={{
+          background: surfaceBg,
+          borderRadius: borderRadius,
+          border: `1px solid ${primaryColor}40`,
+          padding: "20px",
+          transition: "all 0.2s ease",
+          boxShadow: `0 4px 20px ${primaryColor}20`,
+        }}
+      >
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "10px" }}>
+          <span style={{ fontSize: "14px", fontWeight: 700, color: "#fff" }}>Dynamic Token Card</span>
+          <span
+            style={{
+              background: `${primaryColor}25`,
+              color: primaryColor,
+              borderRadius: borderRadius,
+              padding: "4px 8px",
+              fontSize: "11px",
+              fontWeight: 600,
+            }}
+          >
+            Active
+          </span>
+        </div>
+        <div style={{ fontSize: "12px", color: "#bbb", marginBottom: "14px" }}>
+          Custom elements consume DESIGN.md tokens without modifying plugin source code.
+        </div>
+        <button
+          style={{
+            background: primaryColor,
+            color: "#fff",
+            border: "none",
+            borderRadius: borderRadius,
+            padding: "8px 16px",
+            fontSize: "12px",
+            fontWeight: 600,
+            cursor: "pointer",
+          }}
+          onClick={() => setAccentText(`Updated ${new Date().toLocaleTimeString()}`)}
+        >
+          {accentText}
+        </button>
       </div>
     </div>
   )