ltcai 4.6.0 → 4.6.1

package/frontend/src/components/BrainConversation.tsx

@@ -3,13 +3,21 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ImagePlus, MessageSquare, Plus, Send, Trash2 } from "lucide-react";
 import { latticeApi } from "@/api/client";
 import { EmptyState, EntityList, SourceBadge, StructuredView } from "@/components/primitives";
-import { LivingBrain, type BrainActivity, type BrainVitals } from "@/components/LivingBrain";
+import { type BrainState, LivingBrain } from "@/components/LivingBrain";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { asArray } from "@/lib/utils";
 
 type Msg = { role?: string; content?: string; timestamp?: string };
+type BrainActivity = BrainState;
+type BrainVitals = {
+  connected: boolean;
+  memories: number;
+  knowledge: number;
+  conversations: number;
+  model: string | null;
+};
 
 function fileToDataUrl(file: File) {
   return new Promise<string>((resolve, reject) => {
@@ -139,7 +147,7 @@ export function BrainConversation({ className }: { className?: string }) {
     <div className={className}>
       <div className="brain-conversation-grid">
         <section className="brain-presence-column" aria-label="Living Brain presence">
-          <LivingBrain activity={activity} vitals={vitals} />
+          <LivingBrain state={activity} size="normal" />
         </section>
 
         <section className="brain-chat-panel premium-surface" aria-label="Conversation with Lattice Brain">

package/frontend/src/components/LivingBrain.tsx

@@ -1,121 +1,212 @@
 import * as React from "react";
-import { Activity, Brain, CheckCircle2, CircleDotDashed, Loader2, Sparkles, Waves } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import { cn, fmtNumber } from "@/lib/utils";
-
-export type BrainActivity = "idle" | "listening" | "recalling" | "thinking" | "planning" | "acting";
-
-export type BrainVitals = {
-  connected?: boolean;
-  memories?: number | string | null;
-  knowledge?: number | string | null;
-  conversations?: number | string | null;
-  model?: string | null;
-  activityLabel?: string | null;
-};
-
-const activityLabels: Record<BrainActivity, string> = {
-  idle: "Present",
-  listening: "Listening",
-  recalling: "Recalling",
-  thinking: "Thinking",
-  planning: "Planning",
-  acting: "Acting",
-};
-
-function readable(value: BrainVitals[keyof BrainVitals]) {
-  if (value === null || value === undefined || value === "") return "-";
-  if (typeof value === "number") return fmtNumber(value);
-  return String(value);
+import { cn } from "@/lib/utils";
+
+export type BrainState = "idle" | "listening" | "thinking" | "recalling" | "synthesizing" | "planning" | "acting" | "resting";
+
+export interface LivingBrainProps {
+  state?: BrainState;
+  intensity?: number; // 0-1 how "alive" it feels right now
+  onPulse?: () => void; // allow parent to trigger a memory pulse
+  size?: "normal" | "large" | "trace";
+  label?: string;
+  className?: string;
+  showLabel?: boolean;
+  depth?: number; // 0-5 progressive exploration depth; higher = more "open" / revealing
+  onInteract?: () => void; // called on click to advance exploration (travel deeper)
 }
 
+/**
+ * The Living Brain — the primary visual and emotional object in the product.
+ * It is not decoration. It is the other participant.
+ * It breathes. It reacts. It remembers.
+ */
 export function LivingBrain({
-  activity = "idle",
-  vitals,
-  compact = false,
-  showVitals = false,
+  state = "idle",
+  intensity = 0.6,
+  onPulse,
+  size = "large",
+  label,
   className,
-}: {
-  activity?: BrainActivity;
-  vitals?: BrainVitals;
-  compact?: boolean;
-  showVitals?: boolean;
-  className?: string;
-}) {
-  const state = vitals?.activityLabel || activityLabels[activity];
-  const connected = vitals?.connected !== false;
+  showLabel = true,
+  depth = 0,
+  onInteract,
+}: LivingBrainProps) {
+  const [isPulsing, setIsPulsing] = React.useState(false);
+  const organismRef = React.useRef<HTMLButtonElement>(null);
+
+  // External trigger for memory / important recall moments
+  React.useEffect(() => {
+    if (onPulse) {
+      const handler = () => firePulse();
+      // allow global window event too for simplicity across components
+      window.addEventListener("brain:recall", handler as EventListener);
+      return () => window.removeEventListener("brain:recall", handler as EventListener);
+    }
+  }, [onPulse]);
+
+  function firePulse() {
+    setIsPulsing(true);
+    if (organismRef.current) {
+      organismRef.current.classList.add("pulse");
+      // clean after animation
+      window.setTimeout(() => {
+        if (organismRef.current) organismRef.current.classList.remove("pulse");
+        setIsPulsing(false);
+      }, 1350);
+    }
+    onPulse?.();
+  }
+
+  // Auto gentle pulse when recalling or high intensity
+  React.useEffect(() => {
+    if ((state === "recalling" || intensity > 0.82) && !isPulsing) {
+      const t = window.setTimeout(() => firePulse(), 180);
+      return () => clearTimeout(t);
+    }
+  }, [state, intensity]);
+
+  const dataState = state;
+  const isLarge = size === "large";
+  const isTrace = size === "trace";
+
+  const dynamicIntensity = Math.max(0.35, Math.min(1, intensity));
+  const effectiveDepth = Math.max(0, Math.min(5, depth || 0));
+  const canTravel = state !== "thinking";
+
+  const handleClick = () => {
+    if (!canTravel) return;
+    firePulse();
+    onInteract?.();
+  };
 
   return (
-    <section
-      className={cn("living-brain", compact && "living-brain-compact", className)}
-      data-activity={activity}
-      aria-label="Living Brain"
+    <div
+      className={cn(
+        "brain-presence select-none",
+        isLarge && "large",
+        isTrace && "trace",
+        className,
+        effectiveDepth > 0 && "is-exploring"
+      )}
+      aria-label="Your living Brain"
+      role="group"
+      data-depth={effectiveDepth}
     >
-      <div className="brain-presence-head">
-        <div>
-          <div className="brain-presence-kicker"><Brain className="h-4 w-4" /> Lattice Brain</div>
-          <h2>The Brain is awake.</h2>
-        </div>
-        <Badge variant={connected ? "success" : "warning"}>{connected ? "online" : "starting"}</Badge>
-      </div>
-
-      <div className="brain-stage" aria-hidden="true">
-        <span className="brain-halo brain-halo-a" />
-        <span className="brain-halo brain-halo-b" />
-        <span className="brain-wave brain-wave-a" />
-        <span className="brain-wave brain-wave-b" />
-        <span className="brain-wave brain-wave-c" />
-        <svg className="brain-organ" viewBox="0 0 440 360" role="img" aria-label="Animated Brain presence">
-          <defs>
-            <filter id="brainGlow" x="-40%" y="-40%" width="180%" height="180%">
-              <feGaussianBlur stdDeviation="10" result="blur" />
-              <feColorMatrix in="blur" type="matrix" values="0 0 0 0 0.12 0 0 0 0 0.78 0 0 0 0 0.68 0 0 0 0.52 0" />
-              <feBlend in="SourceGraphic" />
-            </filter>
-          </defs>
-          <path className="brain-mass brain-mass-left" d="M214 74c-25-34-82-31-103 7-28 1-50 22-51 51-28 16-39 51-25 81-14 32 6 72 42 80 18 35 72 43 101 14 30 17 71 6 87-25 27-11 43-40 36-69 19-25 14-64-11-84 2-31-31-61-76-55Z" />
-          <path className="brain-mass brain-mass-right" d="M224 74c24-35 83-33 105 5 29 0 52 22 53 52 28 16 39 52 24 82 14 33-8 74-45 80-19 34-73 41-101 11-31 16-72 3-86-29-27-12-41-42-33-71-18-27-10-66 18-85-1-30 31-57 65-45Z" />
-          <path className="thought-path thought-path-a" d="M106 143c35-30 83-27 113 9 26 31 74 31 110 0" />
-          <path className="thought-path thought-path-b" d="M93 218c38 25 75 23 112-8 34-29 75-31 121-6" />
-          <path className="thought-path thought-path-c" d="M144 100c9 38 33 59 72 63 42 5 69 27 83 67" />
-          <path className="thought-path thought-path-d" d="M149 286c16-44 42-68 78-71 42-4 72-26 89-66" />
-          <circle className="memory-pulse pulse-a" cx="125" cy="150" r="7" />
-          <circle className="memory-pulse pulse-b" cx="223" cy="164" r="8" />
-          <circle className="memory-pulse pulse-c" cx="312" cy="210" r="7" />
-          <circle className="memory-pulse pulse-d" cx="183" cy="257" r="6" />
-        </svg>
-        <div className="brain-state-pill">
-          {activity === "thinking" ? <Loader2 className="h-4 w-4 animate-spin" /> : <CircleDotDashed className="h-4 w-4" />}
-          <span>{state}</span>
+      <button
+        type="button"
+        ref={organismRef}
+        className={cn("brain-organism", `size-${size}`, `depth-${effectiveDepth}`)}
+        data-state={dataState}
+        aria-label={effectiveDepth < 5 ? "Travel deeper into your Brain" : "Rest inside the Knowledge Graph"}
+        aria-disabled={!canTravel}
+        style={{
+          transform: `scale(${0.96 + (dynamicIntensity - 0.5) * 0.09 + effectiveDepth * 0.015})`,
+        }}
+        onClick={handleClick}
+        title={effectiveDepth < 5 ? "Travel deeper into your Brain" : "The core of your knowledge"}
+      >
+        {/* Living anatomical presence. The glow opens with depth; the folds make it unmistakably a Brain. */}
+        <div className="brain-core" style={{ transform: `scale(${1 + effectiveDepth * 0.045})` }}>
+          <svg className="brain-anatomy" viewBox="0 0 220 174" aria-hidden>
+            <path
+              className="brain-lobe brain-lobe-left"
+              d="M102 30c-13-20-44-19-55 1-18 1-29 16-28 33-13 8-18 25-11 39-9 16-1 36 17 42 5 19 27 26 43 15 13 10 33 8 43-5 5-7 8-16 8-27V52c0-8-6-17-17-22Z"
+            />
+            <path
+              className="brain-lobe brain-lobe-right"
+              d="M118 30c13-20 44-19 55 1 18 1 29 16 28 33 13 8 18 25 11 39 9 16 1 36-17 42-5 19-27 26-43 15-13 10-33 8-43-5-5-7-8-16-8-27V52c0-8 6-17 17-22Z"
+            />
+            <path className="brain-bridge" d="M103 48c9-8 24-8 33 0 7 6 9 16 5 25-5 11-16 15-31 12-15 3-26-1-31-12-4-9-2-19 5-25 5-4 12-6 19 0Z" />
+            <path className="brain-stem" d="M92 137c10 9 26 9 36 0 1 14 7 25 20 33H76c12-8 17-19 16-33Z" />
+            <path className="brain-fold fold-a" d="M48 50c18-11 38-8 47 8" />
+            <path className="brain-fold fold-b" d="M34 82c22-8 45-5 58 8" />
+            <path className="brain-fold fold-c" d="M43 119c18 5 35 2 49-11" />
+            <path className="brain-fold fold-d" d="M172 50c-18-11-38-8-47 8" />
+            <path className="brain-fold fold-e" d="M186 82c-22-8-45-5-58 8" />
+            <path className="brain-fold fold-f" d="M177 119c-18 5-35 2-49-11" />
+            <path className="brain-fold fold-mid" d="M110 38c-5 30-5 70 0 112" />
+          </svg>
         </div>
-      </div>
-
-      {showVitals ? (
-        <div className="brain-vitals">
-          <div className="brain-vital">
-            <Sparkles className="h-4 w-4" />
-            <span>Memories</span>
-            <strong>{readable(vitals?.memories)}</strong>
-          </div>
-          <div className="brain-vital">
-            <Waves className="h-4 w-4" />
-            <span>Knowledge</span>
-            <strong>{readable(vitals?.knowledge)}</strong>
-          </div>
-          <div className="brain-vital">
-            <Activity className="h-4 w-4" />
-            <span>Activity</span>
-            <strong>{readable(vitals?.conversations)}</strong>
-          </div>
+
+        {/* Breathing field expands as we go deeper. */}
+        <div
+          className="brain-aura"
+          style={{
+            animationDuration: state === "thinking" ? "1.65s" : state === "recalling" ? "2.4s" : "6.8s",
+            transform: `scale(${1 + effectiveDepth * 0.12})`,
+            opacity: 0.65 + effectiveDepth * 0.05
+          }}
+        />
+
+        {/* Thought activity — increases and starts to "resolve" into structure at higher depths */}
+        <div className="thought-activity" aria-hidden>
+          {Array.from({ length: Math.min(12, 5 + effectiveDepth * 2) }).map((_, i) => (
+            <div
+              key={i}
+              className={cn("thought-particle", effectiveDepth >= 3 && "resolving")}
+              style={{
+                left: `${18 + ((i * 13 + effectiveDepth * 4) % 64)}%`,
+                top: `${22 + (i % 5) * 14}%`,
+                animationDelay: `-${i * 0.55 + (intensity * 1.1) - effectiveDepth * 0.2}s`,
+                animationDuration: `${2.8 + (1 - dynamicIntensity) * 1.6 - effectiveDepth * 0.15}s`,
+              }}
+            />
+          ))}
         </div>
-      ) : null}
 
-      {compact ? null : (
-        <div className="brain-presence-foot">
-          <CheckCircle2 className="h-4 w-4 text-primary" />
-          <span>{vitals?.model ? readable(vitals.model) : "Waiting for a local model"}</span>
+        {/* Memory ripples — more and stronger as depth increases (echoes surfacing) */}
+        {Array.from({ length: 1 + Math.floor(effectiveDepth / 1.5) }).map((_, i) => (
+          <div
+            key={i}
+            className="memory-ripple"
+            aria-hidden
+            style={{
+              inset: `${18 + i * 6}%`,
+              animationDelay: `${180 + i * 220}ms`,
+              opacity: 0.55 + effectiveDepth * 0.06
+            }}
+          />
+        ))}
+
+        {/* Relationship structure appears only near the deepest layers. */}
+        {effectiveDepth >= 4 && (
+          <svg className="brain-inner-structure" viewBox="0 0 100 100" aria-hidden>
+            <g stroke="hsl(var(--brain-core) / 0.35)" strokeWidth="0.6" fill="none">
+              <circle cx="50" cy="50" r="18" />
+              <circle cx="50" cy="50" r="28" />
+              <path d="M32 50 Q50 32 68 50" />
+              <path d="M32 50 Q50 68 68 50" />
+            </g>
+          </svg>
+        )}
+      </button>
+
+      {showLabel && !isTrace && (
+        <div className="brain-presence-label" data-state={state}>
+          <span className="dot" />
+          {label || (effectiveDepth > 0 ? `Depth ${effectiveDepth}` : humanState(state))}
         </div>
       )}
-    </section>
+    </div>
   );
 }
+
+function humanState(s: BrainState) {
+  switch (s) {
+    case "listening": return "Listening";
+    case "thinking": return "Thinking with you";
+    case "recalling": return "Remembering";
+    case "synthesizing": return "Making sense";
+    case "planning": return "Planning";
+    case "acting": return "Acting";
+    case "resting": return "With you";
+    default: return "Here";
+  }
+}
+
+// Helper to broadcast recall pulses from anywhere (conversation, memory surface, etc)
+export function triggerBrainRecall() {
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent("brain:recall"));
+  }
+}