@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.2

package/components/character/CharacterExperienceWorkspace.js

@@ -1,7 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Input, Textarea } from "@elizaos/ui";
 import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "../../state/TranslationContext.js";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { useTranslation } from "../../state/TranslationContext.hooks.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { Textarea } from "../ui/textarea.js";
+const REVIEW_FILTERS = [
+    { value: "all", label: "All" },
+    { value: "needs-review", label: "Needs review" },
+    { value: "corrected", label: "Corrected" },
+    { value: "superseded", label: "Supersedes" },
+];
+// Per-relationship-type display weights (drive stroke width / sort order).
+// Not data magnitudes — `supersedes` is drawn heavier than `similar`.
+const LINK_DISPLAY_WEIGHT = {
+    supersedes: 0.95,
+    similar: 0.7,
+};
 function formatTimestamp(value) {
     if (value === null || value === undefined)
         return "Unknown";
@@ -21,18 +36,24 @@ function normalizeDraft(experience) {
         tags: experience?.tags.join(", ") ?? "",
     };
 }
-function outcomeAccent(outcome) {
+// One signal: a single dot whose color carries outcome (or turns orange when an
+// item needs review). No badge stacks.
+function outcomeDotColor(outcome) {
     switch (outcome) {
         case "positive":
-            return "text-status-success border-status-success/30 bg-status-success-bg";
+            return "var(--status-success)";
         case "negative":
-            return "text-status-danger border-status-danger/30 bg-status-danger-bg";
+            return "var(--status-danger)";
         case "mixed":
-            return "text-status-warning border-status-warning/30 bg-status-warning-bg";
+            return "var(--status-warning)";
         default:
-            return "text-status-info border-status-info/30 bg-status-info-bg";
+            return "var(--muted)";
     }
 }
+function OutcomeDot({ outcome, review }) {
+    const color = review ? "var(--status-warning)" : outcomeDotColor(outcome);
+    return (_jsx("span", { "aria-hidden": "true", className: "mt-1.5 inline-block h-2 w-2 shrink-0 rounded-full", style: { background: color } }));
+}
 function clampScore(value) {
     if (typeof value !== "number" || Number.isNaN(value))
         return 0;
@@ -41,12 +62,6 @@ function clampScore(value) {
 function formatPercent(value) {
     return `${Math.round(clampScore(value) * 100)}%`;
 }
-function getTimestampMs(value) {
-    if (value === null || value === undefined)
-        return 0;
-    const timestamp = new Date(value).getTime();
-    return Number.isNaN(timestamp) ? 0 : timestamp;
-}
 function getPriorityScore(experience) {
     const importance = clampScore(experience.importance);
     const confidence = clampScore(experience.confidence);
@@ -62,9 +77,6 @@ function needsReview(experience) {
         clampScore(experience.importance) >= 0.75 ||
         Boolean(experience.previousBelief || experience.correctedBelief));
 }
-function compactText(...values) {
-    return values.filter(Boolean).join(" ").toLowerCase();
-}
 function uniqueSorted(values) {
     return Array.from(new Set(values.map((value) => value?.trim()).filter(Boolean))).sort((left, right) => left.localeCompare(right));
 }
@@ -92,6 +104,9 @@ function buildLocalGraphLinks(experiences) {
         }
     };
     const byId = new Map(experiences.map((experience) => [experience.id, experience]));
+    // Only render edges backed by relationships the server actually recorded
+    // (`supersedes` and `relatedExperienceIds`). `strength` is a type-derived
+    // display weight for stroke width, not a fabricated per-edge data value.
     for (const experience of experiences) {
         const supersededExperience = experience.supersedes
             ? byId.get(experience.supersedes)
@@ -101,7 +116,7 @@ function buildLocalGraphLinks(experiences) {
                 sourceId: experience.id,
                 targetId: experience.supersedes,
                 type: "supersedes",
-                strength: 0.95,
+                strength: LINK_DISPLAY_WEIGHT.supersedes,
                 keywords: sharedValues(experienceKeywords(experience), experienceKeywords(supersededExperience)),
             });
         }
@@ -112,42 +127,12 @@ function buildLocalGraphLinks(experiences) {
                     sourceId: experience.id,
                     targetId: relatedId,
                     type: "similar",
-                    strength: 0.7,
+                    strength: LINK_DISPLAY_WEIGHT.similar,
                     keywords: sharedValues(experienceKeywords(experience), experienceKeywords(relatedExperience)),
                 });
             }
         }
     }
-    for (let index = 0; index < experiences.length; index++) {
-        const left = experiences[index];
-        if (!left)
-            continue;
-        for (let nextIndex = index + 1; nextIndex < experiences.length; nextIndex++) {
-            const right = experiences[nextIndex];
-            if (!right)
-                continue;
-            const keywords = sharedValues(experienceKeywords(left), experienceKeywords(right));
-            const sharedEntity = (left.associatedEntityIds ?? []).some((entityId) => (right.associatedEntityIds ?? []).includes(entityId));
-            if (keywords.length >= 2 && left.domain === right.domain) {
-                addLink({
-                    sourceId: left.id,
-                    targetId: right.id,
-                    type: "supports",
-                    strength: Math.min(0.85, 0.4 + keywords.length * 0.1),
-                    keywords,
-                });
-            }
-            else if (sharedEntity && left.domain === right.domain) {
-                addLink({
-                    sourceId: left.id,
-                    targetId: right.id,
-                    type: "co_occurs",
-                    strength: 0.55,
-                    keywords,
-                });
-            }
-        }
-    }
     return Array.from(links.values())
         .sort((left, right) => right.strength - left.strength)
         .slice(0, 60);
@@ -182,45 +167,22 @@ function buildGraphPositions(experiences) {
         ];
     }));
 }
+// Outcome maps to a single status-token color; state is carried by the fill, not
+// by decorative glow/ring layers.
 function graphNodeColor(experience) {
     switch (experience.outcome) {
         case "positive":
-            return {
-                fill: "rgb(34 197 94)",
-                glow: "rgba(34,197,94,0.42)",
-                ring: "rgba(134,239,172,0.9)",
-            };
+            return "var(--status-success)";
         case "negative":
-            return {
-                fill: "rgb(239 68 68)",
-                glow: "rgba(239,68,68,0.42)",
-                ring: "rgba(252,165,165,0.9)",
-            };
+            return "var(--status-danger)";
         case "mixed":
-            return {
-                fill: "rgb(245 158 11)",
-                glow: "rgba(245,158,11,0.42)",
-                ring: "rgba(253,230,138,0.9)",
-            };
+            return "var(--status-warning)";
         default:
-            return {
-                fill: "rgb(56 189 248)",
-                glow: "rgba(56,189,248,0.38)",
-                ring: "rgba(125,211,252,0.85)",
-            };
+            return "var(--muted)";
     }
 }
 function graphLinkColor(type) {
-    switch (type) {
-        case "supersedes":
-            return "rgba(245,158,11,0.9)";
-        case "co_occurs":
-            return "rgba(56,189,248,0.72)";
-        case "supports":
-            return "rgba(34,197,94,0.64)";
-        default:
-            return "rgba(148,163,184,0.56)";
-    }
+    return type === "supersedes" ? "var(--status-warning)" : "var(--border)";
 }
 function graphPath(source, target) {
     const midX = (source.x + target.x) / 2;
@@ -236,96 +198,105 @@ function selectedOrFirst(experiences, selectedExperienceId) {
         null);
 }
 function StatTile({ label, value, detail, }) {
-    return (_jsxs("div", { className: "min-w-0 rounded-xl border border-border/30 bg-bg-muted/15 px-3 py-2", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: label }), _jsx("div", { className: "mt-1 text-lg font-semibold leading-tight text-txt", children: value }), _jsx("div", { className: "mt-0.5 truncate text-xs text-muted", children: detail })] }));
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs text-muted", children: label }), _jsx("div", { className: "mt-1 text-lg font-semibold leading-tight text-txt", children: value }), _jsx("div", { className: "mt-0.5 truncate text-xs text-muted", children: detail })] }));
 }
 function ScoreBar({ label, value, explanation, }) {
     const percent = formatPercent(value);
     return (_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [_jsx("span", { className: "font-semibold text-muted-strong", children: label }), _jsx("span", { className: "font-mono text-muted", children: percent })] }), _jsx("div", { className: "mt-1 h-2 overflow-hidden rounded-full bg-bg-muted", children: _jsx("div", { className: "h-full rounded-full bg-accent", style: { width: percent } }) }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted", children: explanation })] }));
 }
 function EvidencePanel({ title, body, }) {
-    return (_jsxs("div", { className: "min-w-0 rounded-xl border border-border/30 bg-bg-muted/15 p-3", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: title }), _jsx("p", { className: "mt-2 whitespace-pre-wrap text-sm leading-relaxed text-muted-strong", children: body || "Not recorded." })] }));
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs text-muted", children: title }), _jsx("p", { className: "mt-1.5 whitespace-pre-wrap text-sm leading-relaxed text-muted-strong", children: body || "Not recorded." })] }));
 }
 function ProvenancePanel({ experience, }) {
     const sourceMessageIds = experience.sourceMessageIds ?? [];
     const trajectoryTarget = experience.sourceTrajectoryId ?? experience.sourceTrajectoryStepId ?? null;
-    return (_jsxs("div", { className: "rounded-xl border border-border/30 bg-bg-muted/10 p-3", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Evidence source" }), _jsxs("div", { className: "mt-3 grid gap-3 text-sm md:grid-cols-2 xl:grid-cols-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: "Method" }), _jsx("div", { className: "mt-1 font-mono text-xs text-muted-strong", children: experience.extractionMethod ?? "unknown" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: "Room" }), _jsx("div", { className: "mt-1 font-mono text-xs text-muted-strong", children: shortId(experience.sourceRoomId) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: "Trigger message" }), _jsx("div", { className: "mt-1 font-mono text-xs text-muted-strong", children: shortId(experience.sourceTriggerMessageId) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: "Evidence messages" }), _jsx("div", { className: "mt-1 font-mono text-xs text-muted-strong", children: sourceMessageIds.length > 0
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs text-muted", children: "Evidence source" }), _jsxs("div", { className: "mt-3 grid gap-3 text-sm md:grid-cols-2 xl:grid-cols-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: "Method" }), _jsx("div", { className: "mt-1 font-mono text-xs text-muted-strong", children: experience.extractionMethod ?? "unknown" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: "Room" }), _jsx("div", { className: "mt-1 font-mono text-xs text-muted-strong", children: shortId(experience.sourceRoomId) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: "Trigger message" }), _jsx("div", { className: "mt-1 font-mono text-xs text-muted-strong", children: shortId(experience.sourceTriggerMessageId) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: "Evidence messages" }), _jsx("div", { className: "mt-1 font-mono text-xs text-muted-strong", children: sourceMessageIds.length > 0
                                     ? `${sourceMessageIds.length} captured`
                                     : "Not recorded" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted", children: "Associated entities" }), _jsx("div", { className: "mt-1 font-mono text-xs text-muted-strong", children: (experience.associatedEntityIds ?? []).length > 0
                                     ? `${experience.associatedEntityIds?.length} linked`
                                     : "Not recorded" })] })] }), trajectoryTarget ? (_jsxs("div", { className: "mt-3 text-xs text-muted", children: ["Trajectory:", " ", _jsx("a", { href: `/trajectories/${trajectoryTarget}`, className: "font-mono text-muted-strong underline", children: shortId(trajectoryTarget) })] })) : null, experience.extractionReason ? (_jsx("p", { className: "mt-3 whitespace-pre-wrap text-sm leading-relaxed text-muted-strong", children: experience.extractionReason })) : null] }));
 }
+function ExperienceGraphNode({ experience, position, selected, connected, onSelectExperience, }) {
+    const review = needsReview(experience);
+    const color = review ? "var(--status-warning)" : graphNodeColor(experience);
+    const size = 1.9 + clampScore(experience.importance) * 2.7;
+    const confidence = clampScore(experience.confidence);
+    const nodeLabel = experience.learning || experience.result || experience.context;
+    const { ref, agentProps } = useAgentElement({
+        id: `experience-node-${experience.id}`,
+        role: "list-item",
+        label: `Experience node: ${nodeLabel}`,
+        group: "experience-graph",
+        status: selected ? "active" : undefined,
+        description: "Select this experience from the knowledge graph",
+        onActivate: () => onSelectExperience(experience.id),
+    });
+    return (_jsx("button", { ref: ref, type: "button", "aria-label": `Select experience: ${nodeLabel}`, "data-testid": `experience-graph-node-${experience.id}`, className: "absolute -translate-x-1/2 -translate-y-1/2 rounded-full outline-none transition duration-200 hover:scale-125 focus-visible:ring-2 focus-visible:ring-accent", style: {
+            left: `${position.x}%`,
+            top: `${position.y}%`,
+            width: `${size}rem`,
+            height: `${size}rem`,
+        }, onClick: () => onSelectExperience(experience.id), ...agentProps, children: _jsx("span", { "aria-hidden": "true", className: "absolute inset-0 rounded-full", style: {
+                background: color,
+                opacity: 0.45 + confidence * 0.45,
+                outline: selected
+                    ? "2px solid var(--accent)"
+                    : connected
+                        ? "1px solid var(--border)"
+                        : "none",
+                outlineOffset: "2px",
+            } }) }));
+}
 function ExperienceGraphPanel({ experiences, selectedExperienceId, onSelectExperience, }) {
     const graphExperiences = experiences.slice(0, 24);
     const links = buildLocalGraphLinks(graphExperiences);
     const positions = buildGraphPositions(graphExperiences);
     const connectedIds = new Set(links.flatMap((link) => [link.sourceId, link.targetId]));
-    return (_jsxs("div", { "data-testid": "experience-graph-panel", className: "relative h-[24rem] overflow-hidden rounded-[2rem] border border-border/40 bg-[radial-gradient(circle_at_18%_16%,rgba(56,189,248,0.18),transparent_30%),radial-gradient(circle_at_82%_24%,rgba(245,158,11,0.16),transparent_28%),radial-gradient(circle_at_50%_92%,rgba(34,197,94,0.12),transparent_34%),linear-gradient(135deg,rgba(15,23,42,0.24),rgba(2,6,23,0.04))]", children: [_jsx("div", { className: "pointer-events-none absolute inset-0 opacity-60 [background-image:linear-gradient(rgba(148,163,184,0.08)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.08)_1px,transparent_1px)] [background-size:34px_34px]" }), _jsx("div", { className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(2,6,23,0.22)_72%)]" }), _jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 h-full w-full", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [_jsx("defs", { children: _jsxs("filter", { id: "experience-graph-glow", x: "-60%", y: "-60%", width: "220%", height: "220%", children: [_jsx("feGaussianBlur", { stdDeviation: "1.7", result: "blur" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "blur" }), _jsx("feMergeNode", { in: "SourceGraphic" })] })] }) }), links.map((link) => {
-                        const source = positions.get(link.sourceId);
-                        const target = positions.get(link.targetId);
-                        if (!source || !target)
-                            return null;
-                        return (_jsx("path", { d: graphPath(source, target), fill: "none", filter: "url(#experience-graph-glow)", stroke: graphLinkColor(link.type), strokeDasharray: link.type === "supersedes" ? "3 3" : undefined, strokeLinecap: "round", strokeWidth: Math.max(0.22, link.strength * 0.8), vectorEffect: "non-scaling-stroke" }, `${link.sourceId}-${link.targetId}-${link.type}`));
-                    })] }), graphExperiences.map((experience) => {
-                const position = positions.get(experience.id) ?? { x: 50, y: 50 };
-                const selected = experience.id === selectedExperienceId;
-                const review = needsReview(experience);
-                const color = graphNodeColor(experience);
-                const size = 1.9 + clampScore(experience.importance) * 2.7;
-                const confidence = clampScore(experience.confidence);
-                const hasEntities = (experience.associatedEntityIds ?? []).length > 0;
-                const connected = connectedIds.has(experience.id);
-                return (_jsxs("button", { type: "button", "aria-label": `Select experience: ${experience.learning || experience.result || experience.context}`, "data-testid": `experience-graph-node-${experience.id}`, className: "absolute -translate-x-1/2 -translate-y-1/2 rounded-full outline-none transition duration-200 hover:scale-125 focus-visible:ring-2 focus-visible:ring-accent", style: {
-                        left: `${position.x}%`,
-                        top: `${position.y}%`,
-                        width: `${size}rem`,
-                        height: `${size}rem`,
-                    }, onClick: () => onSelectExperience(experience.id), children: [_jsx("span", { "aria-hidden": "true", className: "absolute rounded-full blur-xl", style: {
-                                inset: "-42%",
-                                background: color.glow,
-                                opacity: connected ? 0.88 : 0.48,
-                            } }), hasEntities ? (_jsx("span", { "aria-hidden": "true", className: "absolute rounded-full border", style: {
-                                inset: "-28%",
-                                borderColor: color.ring,
-                                opacity: 0.45 + confidence * 0.25,
-                            } })) : null, _jsx("span", { "aria-hidden": "true", className: "absolute rounded-full border", style: {
-                                inset: selected ? "-20%" : review ? "-12%" : "-5%",
-                                borderColor: selected
-                                    ? "rgb(255 255 255)"
-                                    : review
-                                        ? color.ring
-                                        : "rgba(255,255,255,0.26)",
-                                opacity: selected ? 0.95 : review ? 0.72 : 0.38,
-                            } }), _jsx("span", { "aria-hidden": "true", className: "absolute inset-0 rounded-full border shadow-lg", style: {
-                                background: `radial-gradient(circle at 32% 28%, rgba(255,255,255,0.92), ${color.fill} 32%, rgba(15,23,42,0.88) 100%)`,
-                                borderColor: color.ring,
-                                boxShadow: selected
-                                    ? `0 0 0 10px ${color.glow}, 0 0 42px ${color.glow}`
-                                    : `0 0 ${connected ? 28 : 16}px ${color.glow}`,
-                                opacity: 0.48 + confidence * 0.5,
-                            } }), _jsx("span", { "aria-hidden": "true", className: "absolute rounded-full bg-white/70", style: {
-                                top: "24%",
-                                left: "27%",
-                                width: "18%",
-                                height: "18%",
-                            } })] }, experience.id));
-            })] }));
+    return (_jsxs("div", { "data-testid": "experience-graph-panel", className: "relative h-[24rem] overflow-hidden rounded-sm bg-bg-muted/20", children: [_jsx("div", { className: "pointer-events-none absolute inset-0 opacity-60 [background-image:linear-gradient(var(--border)_1px,transparent_1px),linear-gradient(90deg,var(--border)_1px,transparent_1px)] [background-size:34px_34px] [background-blend-mode:normal] [opacity:0.25]" }), _jsx("svg", { "aria-hidden": "true", className: "absolute inset-0 h-full w-full", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: links.map((link) => {
+                    const source = positions.get(link.sourceId);
+                    const target = positions.get(link.targetId);
+                    if (!source || !target)
+                        return null;
+                    return (_jsx("path", { d: graphPath(source, target), fill: "none", stroke: graphLinkColor(link.type), strokeDasharray: link.type === "supersedes" ? "3 3" : undefined, strokeLinecap: "round", strokeWidth: Math.max(0.22, link.strength * 0.8), vectorEffect: "non-scaling-stroke" }, `${link.sourceId}-${link.targetId}-${link.type}`));
+                }) }), graphExperiences.map((experience) => (_jsx(ExperienceGraphNode, { experience: experience, position: positions.get(experience.id) ?? { x: 50, y: 50 }, selected: experience.id === selectedExperienceId, connected: connectedIds.has(experience.id), onSelectExperience: onSelectExperience }, experience.id)))] }));
+}
+function ExperienceQueueRow({ experience, isSelected, onSelect, }) {
+    const title = experience.learning || experience.result || experience.context;
+    const reviewReasons = [
+        clampScore(experience.importance) >= 0.75 ? "high importance" : null,
+        clampScore(experience.confidence) < 0.65 ? "low confidence" : null,
+        experience.previousBelief || experience.correctedBelief
+            ? "belief changed"
+            : null,
+    ].filter(Boolean);
+    const { ref, agentProps } = useAgentElement({
+        id: `experience-row-${experience.id}`,
+        role: "list-item",
+        label: `Experience: ${title}`,
+        group: "experience-queue",
+        status: isSelected ? "active" : undefined,
+        description: "Open this experience in the review panel",
+        onActivate: () => onSelect(experience.id),
+    });
+    return (_jsxs("button", { ref: ref, type: "button", "data-testid": `experience-row-${experience.id}`, className: `flex min-w-0 flex-col items-start gap-2 border-b border-border/15 px-4 py-4 text-left transition-colors hover:bg-bg-muted/20 ${isSelected ? "bg-bg-muted/25" : ""}`, onClick: () => onSelect(experience.id), ...agentProps, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(OutcomeDot, { outcome: experience.outcome, review: needsReview(experience) }), _jsx("h4", { className: "line-clamp-2 text-sm font-semibold text-txt", children: title })] }), _jsxs("div", { className: "grid w-full grid-cols-2 gap-2 text-xs text-muted", children: [_jsxs("span", { children: ["Importance ", formatPercent(experience.importance)] }), _jsxs("span", { children: ["Confidence ", formatPercent(experience.confidence)] })] }), _jsx("p", { className: "line-clamp-2 text-sm text-muted-strong", children: experience.context }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 text-xs text-muted", children: [_jsx("span", { children: experience.type }), experience.domain ? _jsxs("span", { children: ["\u00B7 ", experience.domain] }) : null, _jsxs("span", { children: ["\u00B7 ", formatTimestamp(experience.createdAt)] }), reviewReasons.length > 0 ? (_jsxs("span", { children: ["\u00B7 ", reviewReasons.join(", ")] })) : null] })] }));
+}
+function RelatedExperienceButton({ experience, onSelect, }) {
+    const title = experience.learning || experience.result || experience.context;
+    const { ref, agentProps } = useAgentElement({
+        id: `experience-related-${experience.id}`,
+        role: "list-item",
+        label: `Related experience: ${title}`,
+        group: "experience-related",
+        description: "Open this related experience",
+        onActivate: () => onSelect(experience.id),
+    });
+    return (_jsxs("button", { ref: ref, type: "button", className: "block w-full rounded-sm border border-border/30 px-3 py-2 text-left hover:bg-bg-muted/20", onClick: () => onSelect(experience.id), ...agentProps, children: [_jsx("span", { className: "font-mono text-xs text-muted", children: experience.id }), _jsx("span", { className: "ml-2", children: title })] }));
 }
 export function CharacterExperienceWorkspace({ experiences, selectedExperienceId, onSelectExperience, onSaveExperience, onDeleteExperience, savingExperienceId, deletingExperienceId, }) {
     const { t } = useTranslation();
-    const [searchQuery, setSearchQuery] = useState("");
-    const [outcomeFilter, setOutcomeFilter] = useState("all");
-    const [domainFilter, setDomainFilter] = useState("all");
-    const [tagFilter, setTagFilter] = useState("all");
     const [reviewFilter, setReviewFilter] = useState("all");
-    const [sortMode, setSortMode] = useState("priority");
     const selectedExperience = useMemo(() => selectedOrFirst(experiences, selectedExperienceId), [experiences, selectedExperienceId]);
     const [draft, setDraft] = useState(normalizeDraft(selectedExperience));
-    const filters = useMemo(() => {
-        const outcomes = uniqueSorted(experiences.map((experience) => experience.outcome));
-        const domains = uniqueSorted(experiences.map((experience) => experience.domain));
-        const tags = uniqueSorted(experiences.flatMap((experience) => experience.tags));
-        return { outcomes, domains, tags };
-    }, [experiences]);
     const stats = useMemo(() => {
         const total = experiences.length;
         const reviewCount = experiences.filter(needsReview).length;
@@ -345,17 +316,7 @@ export function CharacterExperienceWorkspace({ experiences, selectedExperienceId
         };
     }, [experiences]);
     const filteredExperiences = useMemo(() => {
-        const query = searchQuery.trim().toLowerCase();
         const filtered = experiences.filter((experience) => {
-            if (outcomeFilter !== "all" && experience.outcome !== outcomeFilter) {
-                return false;
-            }
-            if (domainFilter !== "all" && experience.domain !== domainFilter) {
-                return false;
-            }
-            if (tagFilter !== "all" && !experience.tags.includes(tagFilter)) {
-                return false;
-            }
             if (reviewFilter === "needs-review" && !needsReview(experience)) {
                 return false;
             }
@@ -367,31 +328,10 @@ export function CharacterExperienceWorkspace({ experiences, selectedExperienceId
             if (reviewFilter === "superseded" && !experience.supersedes) {
                 return false;
             }
-            if (!query)
-                return true;
-            const haystack = compactText(experience.type, experience.outcome, experience.domain, experience.context, experience.action, experience.result, experience.learning, experience.previousBelief, experience.correctedBelief, experience.supersedes, experience.sourceRoomId, experience.sourceTriggerMessageId, experience.sourceTrajectoryId, experience.sourceTrajectoryStepId, experience.extractionMethod, experience.extractionReason, ...(experience.relatedExperienceIds ?? []), ...(experience.mergedExperienceIds ?? []), ...(experience.sourceMessageIds ?? []), ...(experience.keywords ?? []), ...(experience.associatedEntityIds ?? []), ...experience.tags);
-            return haystack.includes(query);
+            return true;
         });
-        return [...filtered].sort((left, right) => {
-            switch (sortMode) {
-                case "confidence":
-                    return clampScore(left.confidence) - clampScore(right.confidence);
-                case "importance":
-                    return clampScore(right.importance) - clampScore(left.importance);
-                case "newest":
-                    return (getTimestampMs(right.createdAt) - getTimestampMs(left.createdAt));
-            }
-            return getPriorityScore(right) - getPriorityScore(left);
-        });
-    }, [
-        domainFilter,
-        experiences,
-        outcomeFilter,
-        reviewFilter,
-        searchQuery,
-        sortMode,
-        tagFilter,
-    ]);
+        return [...filtered].sort((left, right) => getPriorityScore(right) - getPriorityScore(left));
+    }, [experiences, reviewFilter]);
     const visibleSelectedExperience = useMemo(() => selectedOrFirst(filteredExperiences, selectedExperience?.id ?? null), [filteredExperiences, selectedExperience?.id]);
     useEffect(() => {
         setDraft(normalizeDraft(visibleSelectedExperience));
@@ -403,51 +343,113 @@ export function CharacterExperienceWorkspace({ experiences, selectedExperienceId
     const supersededExperience = useMemo(() => visibleSelectedExperience?.supersedes
         ? experiences.find((experience) => experience.id === visibleSelectedExperience.supersedes)
         : null, [experiences, visibleSelectedExperience]);
+    const { ref: reviewRef, agentProps: reviewAgentProps } = useAgentElement({
+        id: "experience-filter-review",
+        role: "select",
+        label: t("character.reviewFilter"),
+        group: "experience-filters",
+        description: "Filter experiences by review state",
+        options: ["all", "needs-review", "corrected", "superseded"],
+        getValue: () => reviewFilter,
+        onFill: (value) => setReviewFilter(value),
+    });
+    const { ref: deleteRef, agentProps: deleteAgentProps } = useAgentElement({
+        id: "experience-delete",
+        role: "button",
+        label: "Delete experience",
+        group: "experience-review",
+        description: "Delete the selected experience",
+        onActivate: () => {
+            if (visibleSelectedExperience) {
+                onDeleteExperience?.(visibleSelectedExperience);
+            }
+        },
+    });
+    const { ref: saveRef, agentProps: saveAgentProps } = useAgentElement({
+        id: "experience-save",
+        role: "button",
+        label: "Save review",
+        group: "experience-review",
+        description: "Save the review edits for the selected experience",
+        onActivate: () => {
+            if (visibleSelectedExperience) {
+                onSaveExperience?.(visibleSelectedExperience, draft);
+            }
+        },
+    });
+    const { ref: learningRef, agentProps: learningAgentProps } = useAgentElement({
+        id: "experience-edit-learning",
+        role: "textarea",
+        label: "Learning",
+        group: "experience-review",
+        description: "Edit the learned takeaway for this experience",
+        getValue: () => draft.learning,
+        onFill: (value) => setDraft((current) => ({ ...current, learning: value })),
+    });
+    const { ref: importanceRef, agentProps: importanceAgentProps } = useAgentElement({
+        id: "experience-edit-importance",
+        role: "number-input",
+        label: "Importance",
+        group: "experience-review",
+        description: "Edit the importance score (0 to 1)",
+        getValue: () => draft.importance,
+        onFill: (value) => setDraft((current) => ({
+            ...current,
+            importance: Number(value || 0),
+        })),
+    });
+    const { ref: confidenceRef, agentProps: confidenceAgentProps } = useAgentElement({
+        id: "experience-edit-confidence",
+        role: "number-input",
+        label: "Confidence",
+        group: "experience-review",
+        description: "Edit the confidence score (0 to 1)",
+        getValue: () => draft.confidence,
+        onFill: (value) => setDraft((current) => ({
+            ...current,
+            confidence: Number(value || 0),
+        })),
+    });
+    const { ref: tagsRef, agentProps: tagsAgentProps } = useAgentElement({
+        id: "experience-edit-tags",
+        role: "text-input",
+        label: "Tags",
+        group: "experience-review",
+        description: "Edit the comma-separated tags for this experience",
+        getValue: () => draft.tags,
+        onFill: (value) => setDraft((current) => ({ ...current, tags: value })),
+    });
     if (experiences.length === 0) {
-        return (_jsxs("section", { className: "rounded-2xl border border-dashed border-border/40 bg-bg-muted/20 px-5 py-8 text-sm text-muted", children: [_jsx("div", { className: "text-base font-semibold text-txt", children: "I haven\u2019t learned anything yet." }), _jsx("p", { className: "mt-1 max-w-xl", children: "As we work together I\u2019ll keep notes here \u2014 what worked, what didn\u2019t, things I want to remember next time. Each lesson lands with the context that produced it so you can review or correct me." })] }));
+        return (_jsxs("section", { className: "rounded-sm border border-dashed border-border/40 bg-bg-muted/20 px-5 py-8 text-sm text-muted", children: [_jsx("div", { className: "text-base font-semibold text-txt", children: "I haven\u2019t learned anything yet." }), _jsx("p", { className: "mt-1 max-w-xl", children: "As we work together I\u2019ll keep notes here \u2014 what worked, what didn\u2019t, things I want to remember next time. Each lesson lands with the context that produced it so you can review or correct me." })] }));
     }
-    return (_jsxs("section", { className: "flex min-w-0 flex-col gap-4", children: [_jsxs("div", { className: "rounded-2xl border border-border/40 bg-bg/70 p-4", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "text-base font-semibold text-txt", children: "Experience" }), _jsx("p", { className: "text-sm text-muted", children: "Triage learned outcomes by priority, confidence, evidence, and correction history." })] }), _jsxs("div", { className: "rounded-full border border-border/40 px-3 py-1 text-xs font-semibold text-muted", children: [filteredExperiences.length, " of ", experiences.length, " shown"] })] }), _jsxs("div", { className: "mt-4 grid gap-3 md:grid-cols-4", children: [_jsx(StatTile, { label: "Captured", value: String(stats.total), detail: `${stats.reviewCount} need review` }), _jsx(StatTile, { label: "Avg importance", value: formatPercent(stats.averageImportance), detail: "Ranking weight" }), _jsx(StatTile, { label: "Avg confidence", value: formatPercent(stats.averageConfidence), detail: "Evidence strength" }), _jsx(StatTile, { label: "Corrections", value: String(stats.corrections), detail: "Beliefs revised" })] }), _jsxs("div", { className: "mt-4 grid gap-3 lg:grid-cols-[minmax(14rem,1.4fr)_repeat(5,minmax(8rem,1fr))]", children: [_jsxs("label", { htmlFor: "experience-search", className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Search experiences" }), _jsx(Input, { id: "experience-search", type: "search", value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), placeholder: t("character.searchLearningEvidenceTags"), className: "h-9 rounded-xl border-border/40 bg-bg-muted/15" })] }), _jsxs("label", { className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Outcome filter" }), _jsxs("select", { "aria-label": t("character.outcomeFilter"), value: outcomeFilter, onChange: (event) => setOutcomeFilter(event.target.value), className: "h-9 w-full rounded-xl border border-border/40 bg-bg-muted/15 px-3 text-sm text-txt", children: [_jsx("option", { value: "all", children: "All outcomes" }), filters.outcomes.map((outcome) => (_jsx("option", { value: outcome, children: outcome }, outcome)))] })] }), _jsxs("label", { className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Domain filter" }), _jsxs("select", { "aria-label": t("character.domainFilter"), value: domainFilter, onChange: (event) => setDomainFilter(event.target.value), className: "h-9 w-full rounded-xl border border-border/40 bg-bg-muted/15 px-3 text-sm text-txt", children: [_jsx("option", { value: "all", children: "All domains" }), filters.domains.map((domain) => (_jsx("option", { value: domain, children: domain }, domain)))] })] }), _jsxs("label", { className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Tag filter" }), _jsxs("select", { "aria-label": t("character.tagFilter"), value: tagFilter, onChange: (event) => setTagFilter(event.target.value), className: "h-9 w-full rounded-xl border border-border/40 bg-bg-muted/15 px-3 text-sm text-txt", children: [_jsx("option", { value: "all", children: "All tags" }), filters.tags.map((tag) => (_jsx("option", { value: tag, children: tag }, tag)))] })] }), _jsxs("label", { className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Review filter" }), _jsxs("select", { "aria-label": t("character.reviewFilter"), value: reviewFilter, onChange: (event) => setReviewFilter(event.target.value), className: "h-9 w-full rounded-xl border border-border/40 bg-bg-muted/15 px-3 text-sm text-txt", children: [_jsx("option", { value: "all", children: "All review states" }), _jsx("option", { value: "needs-review", children: "Needs review" }), _jsx("option", { value: "corrected", children: "Corrected belief" }), _jsx("option", { value: "superseded", children: "Supersedes prior" })] })] }), _jsxs("label", { className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Sort experiences" }), _jsxs("select", { "aria-label": t("character.sortExperiences"), value: sortMode, onChange: (event) => setSortMode(event.target.value), className: "h-9 w-full rounded-xl border border-border/40 bg-bg-muted/15 px-3 text-sm text-txt", children: [_jsx("option", { value: "priority", children: "Priority" }), _jsx("option", { value: "newest", children: "Newest" }), _jsx("option", { value: "importance", children: "Importance" }), _jsx("option", { value: "confidence", children: "Lowest confidence" })] })] })] })] }), _jsx(ExperienceGraphPanel, { experiences: filteredExperiences, selectedExperienceId: visibleSelectedExperience?.id ?? null, onSelectExperience: onSelectExperience }), _jsxs("div", { className: "grid min-w-0 gap-4 xl:grid-cols-[minmax(19rem,25rem)_minmax(0,1fr)]", children: [_jsxs("div", { className: "flex min-h-[28rem] min-w-0 flex-col overflow-hidden rounded-2xl border border-border/40 bg-bg/70", children: [_jsxs("div", { className: "border-b border-border/30 px-4 py-3", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Review queue" }), _jsx("p", { className: "mt-1 text-sm text-muted", children: "Priority favors high importance, low confidence, and corrected beliefs." })] }), _jsx("div", { className: "custom-scrollbar flex min-w-0 flex-1 flex-col overflow-y-auto", children: filteredExperiences.length === 0 ? (_jsx("div", { className: "px-4 py-8 text-sm text-muted", children: "No experiences match the current filters." })) : (filteredExperiences.map((experience) => {
-                                    const isSelected = experience.id === visibleSelectedExperience?.id;
-                                    const reviewReasons = [
-                                        clampScore(experience.importance) >= 0.75
-                                            ? "high importance"
-                                            : null,
-                                        clampScore(experience.confidence) < 0.65
-                                            ? "low confidence"
-                                            : null,
-                                        experience.previousBelief || experience.correctedBelief
-                                            ? "belief changed"
-                                            : null,
-                                    ].filter(Boolean);
-                                    return (_jsxs("button", { type: "button", "data-testid": `experience-row-${experience.id}`, className: `flex min-w-0 flex-col items-start gap-2 border-b border-border/20 px-4 py-4 text-left transition-colors hover:bg-bg-muted/20 ${isSelected ? "bg-bg-muted/25" : ""}`, onClick: () => onSelectExperience(experience.id), children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "rounded-full border border-border/40 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: experience.type }), _jsx("span", { className: `rounded-full border px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] ${outcomeAccent(experience.outcome)}`, children: experience.outcome }), needsReview(experience) ? (_jsx("span", { className: "rounded-full border border-status-warning/30 bg-status-warning-bg px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-status-warning", children: "Review" })) : null] }), _jsx("h4", { className: "line-clamp-2 text-sm font-semibold text-txt", children: experience.learning ||
-                                                    experience.result ||
-                                                    experience.context }), _jsxs("div", { className: "grid w-full grid-cols-2 gap-2 text-xs text-muted", children: [_jsxs("span", { children: ["Importance ", formatPercent(experience.importance)] }), _jsxs("span", { children: ["Confidence ", formatPercent(experience.confidence)] })] }), _jsx("p", { className: "line-clamp-2 text-sm text-muted-strong", children: experience.context }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 text-xs text-muted", children: [_jsx("span", { children: formatTimestamp(experience.createdAt) }), experience.domain ? (_jsx("span", { children: experience.domain })) : null, reviewReasons.length > 0 ? (_jsx("span", { children: reviewReasons.join(", ") })) : null] })] }, experience.id));
-                                })) })] }), visibleSelectedExperience ? (_jsxs("div", { className: "flex min-w-0 flex-col gap-4 rounded-2xl border border-border/40 bg-bg/70 px-4 py-4", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "rounded-full border border-border/40 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: visibleSelectedExperience.type }), _jsx("span", { className: `rounded-full border px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] ${outcomeAccent(visibleSelectedExperience.outcome)}`, children: visibleSelectedExperience.outcome }), visibleSelectedExperience.domain ? (_jsx("span", { className: "rounded-full border border-border/40 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: visibleSelectedExperience.domain })) : null, needsReview(visibleSelectedExperience) ? (_jsx("span", { className: "rounded-full border border-status-warning/30 bg-status-warning-bg px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-status-warning", children: "Needs review" })) : null] }), _jsx("h4", { className: "mt-2 text-lg font-semibold leading-snug text-txt", children: visibleSelectedExperience.learning ||
-                                                    visibleSelectedExperience.result ||
-                                                    visibleSelectedExperience.context }), _jsxs("p", { className: "mt-1 text-xs text-muted", children: ["Created ", formatTimestamp(visibleSelectedExperience.createdAt), visibleSelectedExperience.updatedAt
+    return (_jsxs("section", { className: "flex min-w-0 flex-col gap-4", children: [_jsxs("div", { className: "rounded-sm border border-border/40 bg-bg/70 p-4", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-start justify-between gap-3", children: [_jsx("h3", { className: "text-base font-semibold text-txt", children: "Experience" }), _jsxs("div", { className: "text-xs font-medium text-muted", children: [filteredExperiences.length, " of ", experiences.length, " shown"] })] }), _jsxs("div", { className: "mt-4 grid gap-3 md:grid-cols-4", children: [_jsx(StatTile, { label: "Captured", value: String(stats.total), detail: `${stats.reviewCount} need review` }), _jsx(StatTile, { label: "Avg importance", value: formatPercent(stats.averageImportance), detail: "Ranking weight" }), _jsx(StatTile, { label: "Avg confidence", value: formatPercent(stats.averageConfidence), detail: "Evidence strength" }), _jsx(StatTile, { label: "Corrections", value: String(stats.corrections), detail: "Beliefs revised" })] }), _jsx("div", { ref: reviewRef, className: "mt-4 flex flex-wrap gap-1", ...reviewAgentProps, children: REVIEW_FILTERS.map((option) => (_jsx("button", { type: "button", onClick: () => setReviewFilter(option.value), className: `h-8 rounded-full px-3 text-xs font-medium transition-colors ${reviewFilter === option.value
+                                ? "bg-accent/15 text-accent"
+                                : "text-muted hover:bg-bg-muted/30 hover:text-txt"}`, children: option.label }, option.value))) })] }), _jsx(ExperienceGraphPanel, { experiences: filteredExperiences, selectedExperienceId: visibleSelectedExperience?.id ?? null, onSelectExperience: onSelectExperience }), _jsxs("div", { className: "grid min-w-0 gap-4 xl:grid-cols-[minmax(19rem,25rem)_minmax(0,1fr)]", children: [_jsxs("div", { className: "flex min-h-[28rem] min-w-0 flex-col overflow-hidden rounded-sm border border-border/40 bg-bg/70", children: [_jsx("div", { className: "border-b border-border/30 px-4 py-3", children: _jsx("div", { className: "text-sm font-semibold text-txt", children: "Review queue" }) }), _jsx("div", { className: "custom-scrollbar flex min-w-0 flex-1 flex-col overflow-y-auto", children: filteredExperiences.length === 0 ? (_jsx("div", { className: "px-4 py-8 text-sm text-muted", children: "No experiences match the current filters." })) : (filteredExperiences.map((experience) => (_jsx(ExperienceQueueRow, { experience: experience, isSelected: experience.id === visibleSelectedExperience?.id, onSelect: onSelectExperience }, experience.id)))) })] }), visibleSelectedExperience ? (_jsxs("div", { className: "flex min-w-0 flex-col gap-4 rounded-sm border border-border/40 bg-bg/70 px-4 py-4", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(OutcomeDot, { outcome: visibleSelectedExperience.outcome, review: needsReview(visibleSelectedExperience) }), _jsx("h4", { className: "text-lg font-semibold leading-snug text-txt", children: visibleSelectedExperience.learning ||
+                                                            visibleSelectedExperience.result ||
+                                                            visibleSelectedExperience.context })] }), _jsxs("p", { className: "mt-1 text-xs text-muted", children: [visibleSelectedExperience.type, visibleSelectedExperience.domain
+                                                        ? ` · ${visibleSelectedExperience.domain}`
+                                                        : "", ` · Created ${formatTimestamp(visibleSelectedExperience.createdAt)}`, visibleSelectedExperience.updatedAt
                                                         ? ` · Updated ${formatTimestamp(visibleSelectedExperience.updatedAt)}`
-                                                        : ""] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [onDeleteExperience ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "rounded-lg", disabled: deletingExperienceId === visibleSelectedExperience.id, onClick: () => onDeleteExperience(visibleSelectedExperience), children: deletingExperienceId === visibleSelectedExperience.id
+                                                        : ""] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [onDeleteExperience ? (_jsx(Button, { ref: deleteRef, type: "button", variant: "outline", size: "sm", className: "rounded-sm", disabled: deletingExperienceId === visibleSelectedExperience.id, onClick: () => onDeleteExperience(visibleSelectedExperience), ...deleteAgentProps, children: deletingExperienceId === visibleSelectedExperience.id
                                                     ? "Deleting..."
-                                                    : "Delete" })) : null, onSaveExperience ? (_jsx(Button, { type: "button", size: "sm", className: "rounded-lg", disabled: savingExperienceId === visibleSelectedExperience.id, onClick: () => onSaveExperience(visibleSelectedExperience, draft), children: savingExperienceId === visibleSelectedExperience.id
+                                                    : "Delete" })) : null, onSaveExperience ? (_jsx(Button, { ref: saveRef, type: "button", size: "sm", className: "rounded-sm", disabled: savingExperienceId === visibleSelectedExperience.id, onClick: () => onSaveExperience(visibleSelectedExperience, draft), ...saveAgentProps, children: savingExperienceId === visibleSelectedExperience.id
                                                     ? "Saving..."
-                                                    : "Save review" })) : null] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(16rem,0.8fr)]", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "rounded-xl border border-border/30 bg-bg-muted/15 p-3", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Learned takeaway" }), _jsx("p", { className: "mt-2 whitespace-pre-wrap text-sm leading-relaxed text-muted-strong", children: visibleSelectedExperience.learning || "Not recorded." })] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsx(EvidencePanel, { title: "Context", body: visibleSelectedExperience.context }), _jsx(EvidencePanel, { title: "Action", body: visibleSelectedExperience.action }), _jsx(EvidencePanel, { title: "Result", body: visibleSelectedExperience.result })] })] }), _jsxs("div", { className: "space-y-4 rounded-xl border border-border/30 bg-bg-muted/10 p-3", children: [_jsx(ScoreBar, { label: "Importance", value: visibleSelectedExperience.importance, explanation: "Higher values rank this learning as more likely to affect future behavior." }), _jsx(ScoreBar, { label: "Confidence", value: visibleSelectedExperience.confidence, explanation: "Lower confidence keeps this item in the review queue until evidence improves." }), _jsxs("div", { children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Tags" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: visibleSelectedExperience.tags.length > 0 ? (visibleSelectedExperience.tags.map((tag) => (_jsx("span", { className: "rounded-full border border-border/40 px-2 py-0.5 text-xs text-muted-strong", children: tag }, tag)))) : (_jsx("span", { className: "text-sm text-muted", children: "No tags recorded." })) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Keywords" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: experienceKeywords(visibleSelectedExperience).length >
-                                                            0 ? (experienceKeywords(visibleSelectedExperience).map((keyword) => (_jsx("span", { className: "rounded-full border border-border/40 bg-bg/50 px-2 py-0.5 text-xs text-muted-strong", children: keyword }, keyword)))) : (_jsx("span", { className: "text-sm text-muted", children: "No keywords recorded." })) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Graph metadata" }), _jsxs("p", { className: "mt-2 text-sm text-muted-strong", children: [(visibleSelectedExperience.associatedEntityIds ?? [])
+                                                    : "Save review" })) : null] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(16rem,0.8fr)]", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs text-muted", children: "Learned takeaway" }), _jsx("p", { className: "mt-1.5 whitespace-pre-wrap text-sm leading-relaxed text-muted-strong", children: visibleSelectedExperience.learning || "Not recorded." })] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsx(EvidencePanel, { title: "Context", body: visibleSelectedExperience.context }), _jsx(EvidencePanel, { title: "Action", body: visibleSelectedExperience.action }), _jsx(EvidencePanel, { title: "Result", body: visibleSelectedExperience.result })] })] }), _jsxs("div", { className: "space-y-4 lg:border-l lg:border-border/20 lg:pl-4", children: [_jsx(ScoreBar, { label: "Importance", value: visibleSelectedExperience.importance, explanation: "Higher values rank this learning as more likely to affect future behavior." }), _jsx(ScoreBar, { label: "Confidence", value: visibleSelectedExperience.confidence, explanation: "Lower confidence keeps this item in the review queue until evidence improves." }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted", children: "Tags" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: visibleSelectedExperience.tags.length > 0 ? (visibleSelectedExperience.tags.map((tag) => (_jsx("span", { className: "rounded-full border border-border/40 px-2 py-0.5 text-xs text-muted-strong", children: tag }, tag)))) : (_jsx("span", { className: "text-sm text-muted", children: "No tags recorded." })) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted", children: "Keywords" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: experienceKeywords(visibleSelectedExperience).length >
+                                                            0 ? (experienceKeywords(visibleSelectedExperience).map((keyword) => (_jsx("span", { className: "rounded-full border border-border/40 bg-bg/50 px-2 py-0.5 text-xs text-muted-strong", children: keyword }, keyword)))) : (_jsx("span", { className: "text-sm text-muted", children: "No keywords recorded." })) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted", children: "Graph metadata" }), _jsxs("p", { className: "mt-2 text-sm text-muted-strong", children: [(visibleSelectedExperience.associatedEntityIds ?? [])
                                                                 .length, " ", "associated entities \u00B7", " ", visibleSelectedExperience.embeddingDimensions ?? 0, " ", "embedding dimensions"] })] })] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsx(EvidencePanel, { title: "Previous belief", body: visibleSelectedExperience.previousBelief }), _jsx(EvidencePanel, { title: "Corrected belief", body: visibleSelectedExperience.correctedBelief })] }), visibleSelectedExperience.supersedes ||
-                                selectedRelatedExperiences.length > 0 ? (_jsxs("div", { className: "rounded-xl border border-border/30 bg-bg-muted/15 p-3", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Related experience trail" }), _jsxs("div", { className: "mt-2 space-y-2 text-sm text-muted-strong", children: [visibleSelectedExperience.supersedes ? (_jsxs("p", { children: ["Supersedes", " ", _jsx("span", { className: "font-mono text-txt", children: visibleSelectedExperience.supersedes }), supersededExperience
+                                selectedRelatedExperiences.length > 0 ? (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs text-muted", children: "Related experience trail" }), _jsxs("div", { className: "mt-2 space-y-2 text-sm text-muted-strong", children: [visibleSelectedExperience.supersedes ? (_jsxs("p", { children: ["Supersedes", " ", _jsx("span", { className: "font-mono text-txt", children: visibleSelectedExperience.supersedes }), supersededExperience
                                                         ? `: ${supersededExperience.learning || supersededExperience.result}`
-                                                        : ""] })) : null, selectedRelatedExperiences.map((experience) => (_jsxs("button", { type: "button", className: "block w-full rounded-lg border border-border/30 px-3 py-2 text-left hover:bg-bg-muted/20", onClick: () => onSelectExperience(experience.id), children: [_jsx("span", { className: "font-mono text-xs text-muted", children: experience.id }), _jsx("span", { className: "ml-2", children: experience.learning ||
-                                                            experience.result ||
-                                                            experience.context })] }, experience.id)))] })] })) : null, _jsx(ProvenancePanel, { experience: visibleSelectedExperience }), _jsxs("div", { className: "rounded-xl border border-border/30 bg-bg-muted/10 p-3", children: [_jsx("div", { className: "mb-3 flex items-center justify-between gap-3", children: _jsxs("div", { children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Review edit" }), _jsx("p", { className: "text-xs text-muted", children: "Update the takeaway, ranking, and tags after checking evidence." })] }) }), _jsxs("label", { htmlFor: `experience-learning-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Learning" }), _jsx(Textarea, { id: `experience-learning-${visibleSelectedExperience.id}`, value: draft.learning, rows: 6, onChange: (event) => setDraft((current) => ({
+                                                        : ""] })) : null, selectedRelatedExperiences.map((experience) => (_jsx(RelatedExperienceButton, { experience: experience, onSelect: onSelectExperience }, experience.id)))] })] })) : null, _jsx(ProvenancePanel, { experience: visibleSelectedExperience }), _jsxs("div", { className: "min-w-0 border-t border-border/20 pt-4", children: [_jsx("div", { className: "mb-3 text-sm font-semibold text-txt", children: "Review edit" }), _jsxs("label", { htmlFor: `experience-learning-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-xs text-muted", children: "Learning" }), _jsx(Textarea, { ref: learningRef, id: `experience-learning-${visibleSelectedExperience.id}`, value: draft.learning, rows: 6, onChange: (event) => setDraft((current) => ({
                                                     ...current,
                                                     learning: event.target.value,
-                                                })), className: "min-h-[8rem] resize-y rounded-xl border-border/40 bg-bg-muted/15 font-mono text-sm leading-relaxed" })] }), _jsxs("div", { className: "mt-4 grid gap-4 md:grid-cols-3", children: [_jsxs("label", { htmlFor: `experience-importance-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Importance" }), _jsx(Input, { id: `experience-importance-${visibleSelectedExperience.id}`, type: "number", min: "0", max: "1", step: "0.05", value: String(draft.importance), onChange: (event) => setDraft((current) => ({
+                                                })), className: "min-h-[8rem] resize-y rounded-sm border-border/40 bg-bg-muted/15 font-mono text-sm leading-relaxed", ...learningAgentProps })] }), _jsxs("div", { className: "mt-4 grid gap-4 md:grid-cols-3", children: [_jsxs("label", { htmlFor: `experience-importance-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-xs text-muted", children: "Importance" }), _jsx(Input, { ref: importanceRef, id: `experience-importance-${visibleSelectedExperience.id}`, type: "number", min: "0", max: "1", step: "0.05", value: String(draft.importance), onChange: (event) => setDraft((current) => ({
                                                             ...current,
                                                             importance: Number(event.target.value || 0),
-                                                        })), className: "rounded-xl border-border/40 bg-bg-muted/15" })] }), _jsxs("label", { htmlFor: `experience-confidence-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Confidence" }), _jsx(Input, { id: `experience-confidence-${visibleSelectedExperience.id}`, type: "number", min: "0", max: "1", step: "0.05", value: String(draft.confidence), onChange: (event) => setDraft((current) => ({
+                                                        })), className: "rounded-sm border-border/40 bg-bg-muted/15", ...importanceAgentProps })] }), _jsxs("label", { htmlFor: `experience-confidence-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-xs text-muted", children: "Confidence" }), _jsx(Input, { ref: confidenceRef, id: `experience-confidence-${visibleSelectedExperience.id}`, type: "number", min: "0", max: "1", step: "0.05", value: String(draft.confidence), onChange: (event) => setDraft((current) => ({
                                                             ...current,
                                                             confidence: Number(event.target.value || 0),
-                                                        })), className: "rounded-xl border-border/40 bg-bg-muted/15" })] }), _jsxs("label", { htmlFor: `experience-tags-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Tags" }), _jsx(Input, { id: `experience-tags-${visibleSelectedExperience.id}`, type: "text", value: draft.tags, onChange: (event) => setDraft((current) => ({
+                                                        })), className: "rounded-sm border-border/40 bg-bg-muted/15", ...confidenceAgentProps })] }), _jsxs("label", { htmlFor: `experience-tags-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-xs text-muted", children: "Tags" }), _jsx(Input, { ref: tagsRef, id: `experience-tags-${visibleSelectedExperience.id}`, type: "text", value: draft.tags, onChange: (event) => setDraft((current) => ({
                                                             ...current,
                                                             tags: event.target.value,
-                                                        })), className: "rounded-xl border-border/40 bg-bg-muted/15" })] })] })] })] })) : null] })] }));
+                                                        })), className: "rounded-sm border-border/40 bg-bg-muted/15", ...tagsAgentProps })] })] })] })] })) : null] })] }));
 }