ltcai 4.4.0 → 4.6.0

package/frontend/src/components/BrainConversation.tsx

@@ -0,0 +1,301 @@
+import * as React from "react";
+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 { 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 };
+
+function fileToDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+
+function newConversationId() {
+  const suffix = globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.round(Math.random() * 10000)}`;
+  return `brain-${suffix}`;
+}
+
+function currentModelName(data: unknown) {
+  const record = data && typeof data === "object" ? data as Record<string, unknown> : {};
+  if (typeof record.current === "string" && record.current) return record.current;
+  const loaded = asArray<Record<string, unknown>>(record.loaded);
+  const firstLoaded = loaded.find((item) => item.id || item.name || item.model_id);
+  if (firstLoaded) return String(firstLoaded.name || firstLoaded.id || firstLoaded.model_id);
+  return null;
+}
+
+function usageNumber(data: unknown, key: string) {
+  const record = data && typeof data === "object" ? data as Record<string, unknown> : {};
+  const usage = record.usage && typeof record.usage === "object" ? record.usage as Record<string, unknown> : {};
+  const value = Number(usage[key] ?? record[key]);
+  return Number.isFinite(value) ? value : null;
+}
+
+export function BrainConversation({ className }: { className?: string }) {
+  const qc = useQueryClient();
+  const history = useQuery({ queryKey: ["chatHistory"], queryFn: latticeApi.chatHistory });
+  const models = useQuery({ queryKey: ["models"], queryFn: latticeApi.models });
+  const memory = useQuery({ queryKey: ["memoryManager"], queryFn: latticeApi.memoryManager });
+  const agentRuntime = useQuery({ queryKey: ["agentRuntime"], queryFn: latticeApi.agentRuntime, refetchInterval: 12000 });
+  const [conversationId, setConversationId] = React.useState<string | null>(null);
+  const [selectedConversationId, setSelectedConversationId] = React.useState<string | null>(null);
+  const conversation = useQuery({
+    queryKey: ["conversation", selectedConversationId],
+    queryFn: () => latticeApi.conversation(selectedConversationId || ""),
+    enabled: !!selectedConversationId,
+  });
+  const [messages, setMessages] = React.useState<Msg[]>([]);
+  const [draft, setDraft] = React.useState("");
+  const [imageData, setImageData] = React.useState<string | null>(null);
+  const [trace, setTrace] = React.useState<unknown>(null);
+  const [streaming, setStreaming] = React.useState(false);
+
+  React.useEffect(() => {
+    if (conversation.data?.ok) {
+      setMessages(asArray<Msg>((conversation.data.data as Record<string, unknown>).messages || conversation.data.data));
+    }
+  }, [conversation.data]);
+
+  const send = async () => {
+    const message = draft.trim();
+    if (!message || streaming) return;
+    const activeConversationId = conversationId || newConversationId();
+    if (!conversationId) setConversationId(activeConversationId);
+    setDraft("");
+    setMessages((items) => [...items, { role: "user", content: message }, { role: "assistant", content: "" }]);
+    setStreaming(true);
+    try {
+      const result = await latticeApi.streamChat(
+        { message, conversation_id: activeConversationId, image_data: imageData || undefined },
+        {
+          onChunk: (_delta, fullText) => {
+            setMessages((items) => {
+              const next = [...items];
+              const last = next[next.length - 1] || { role: "assistant" };
+              next[next.length - 1] = { ...last, role: "assistant", content: fullText };
+              return next;
+            });
+          },
+          onTrace: setTrace,
+        },
+      );
+      if (result.error) {
+        setMessages((items) => {
+          const next = [...items];
+          next[next.length - 1] = { role: "assistant", content: `Unavailable: ${result.error}` };
+          return next;
+        });
+      }
+    } finally {
+      setStreaming(false);
+      setImageData(null);
+      await qc.invalidateQueries({ queryKey: ["chatHistory"] });
+      await qc.invalidateQueries({ queryKey: ["memoryManager"] });
+    }
+  };
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => latticeApi.deleteConversation(id),
+    onSuccess: async (_result, id) => {
+      if (conversationId === id) {
+        setConversationId(null);
+        setSelectedConversationId(null);
+        setMessages([]);
+      }
+      await qc.invalidateQueries({ queryKey: ["chatHistory"] });
+    },
+  });
+
+  const historyItems = asArray<Record<string, unknown>>(history.data?.data);
+  const memoryData = memory.data?.data;
+  const runtimeData = agentRuntime.data?.data as Record<string, unknown> | undefined;
+  const runs = asArray<Record<string, unknown>>(runtimeData?.runs);
+  const activity: BrainActivity =
+    streaming ? "thinking" :
+    imageData ? "recalling" :
+    runs.some((run) => String(run.status || run.state || "").match(/running|active|queued/i)) ? "acting" :
+    draft.trim().length > 2 ? "listening" :
+    trace ? "recalling" :
+    "idle";
+  const vitals: BrainVitals = {
+    connected: Boolean(models.data?.ok),
+    memories: usageNumber(memoryData, "total_items") ?? asArray((memoryData as Record<string, unknown> | undefined)?.sources).length,
+    knowledge: usageNumber(memoryData, "sources") ?? asArray((memoryData as Record<string, unknown> | undefined)?.tiers).length,
+    conversations: historyItems.length,
+    model: currentModelName(models.data?.data),
+  };
+
+  return (
+    <div className={className}>
+      <div className="brain-conversation-grid">
+        <section className="brain-presence-column" aria-label="Living Brain presence">
+          <LivingBrain activity={activity} vitals={vitals} />
+        </section>
+
+        <section className="brain-chat-panel premium-surface" aria-label="Conversation with Lattice Brain">
+          <div className="brain-chat-head">
+            <div>
+              <div className="brain-chat-kicker"><MessageSquare className="h-4 w-4" /> Conversation</div>
+              <h1>Talk to your Brain.</h1>
+            </div>
+            <div className="brain-chat-model">
+              <Badge variant="muted">{currentModelName(models.data?.data) || "model readying"}</Badge>
+              <SourceBadge result={models.data} />
+            </div>
+          </div>
+
+          <div className="brain-message-stream soft-scrollbar">
+            {messages.length ? messages.map((msg, index) => (
+              <div key={`${msg.role || "message"}-${index}`} className={`brain-message-row ${msg.role === "user" ? "from-user" : "from-brain"}`}>
+                <div className="brain-message-bubble">
+                  <div className="brain-message-role">{msg.role === "user" ? "You" : "Brain"}</div>
+                  <div className="whitespace-pre-wrap">{msg.content}</div>
+                </div>
+              </div>
+            )) : (
+              <div className="brain-empty-conversation">
+                <EmptyState
+                  title="What should we think through?"
+                  detail="Bring a question, a project, or a loose thought. Lattice will answer through your private memory when a model is ready."
+                />
+              </div>
+            )}
+          </div>
+
+          <div className="brain-composer">
+            {imageData ? <Badge variant="success" className="mb-2">image attached</Badge> : null}
+            <Textarea
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" && !event.shiftKey) {
+                  event.preventDefault();
+                  void send();
+                }
+              }}
+              placeholder="Ask the Brain anything..."
+            />
+            <div className="brain-composer-actions">
+              <label className="inline-flex h-9 cursor-pointer items-center gap-2 rounded-md border border-border px-3 text-sm hover:bg-muted">
+                <ImagePlus className="h-4 w-4" />
+                Image
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="sr-only"
+                  onChange={async (event) => {
+                    const file = event.target.files?.[0];
+                    if (file) setImageData(await fileToDataUrl(file));
+                  }}
+                />
+              </label>
+              <Button disabled={!draft.trim() || streaming} onClick={() => void send()}>
+                <Send className="h-4 w-4" /> Send
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        <aside className="brain-context-column" aria-label="Conversation memory">
+          <RecentConversations
+            conversations={historyItems}
+            result={history.data}
+            activeId={conversationId}
+            onNew={() => {
+              setConversationId(null);
+              setSelectedConversationId(null);
+              setMessages([]);
+              setTrace(null);
+            }}
+            onSelect={(id) => {
+              setConversationId(id);
+              setSelectedConversationId(id);
+              setTrace(null);
+            }}
+            onDelete={(id) => deleteMutation.mutate(id)}
+          />
+          <MemoryNearby question={draft || [...messages].reverse().find((msg) => msg.role === "user")?.content || ""} trace={trace} />
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function RecentConversations({
+  conversations,
+  result,
+  activeId,
+  onNew,
+  onSelect,
+  onDelete,
+}: {
+  conversations: Array<Record<string, unknown>>;
+  result?: Parameters<typeof SourceBadge>[0]["result"];
+  activeId: string | null;
+  onNew: () => void;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => void;
+}) {
+  return (
+    <section className="brain-side-panel">
+      <div className="brain-side-head">
+        <div>
+          <h3>Recent conversations</h3>
+          <SourceBadge result={result} />
+        </div>
+        <Button variant="outline" size="sm" onClick={onNew}><Plus className="h-4 w-4" /> New</Button>
+      </div>
+      <div className="brain-conversation-list soft-scrollbar">
+        {conversations.length ? conversations.slice(0, 8).map((item) => {
+          const id = String(item.id || item.conversation_id || "");
+          return (
+            <div key={id} className={`brain-conversation-item ${activeId === id ? "is-active" : ""}`}>
+              <button onClick={() => onSelect(id)} className="min-w-0 text-left">
+                <span>{String(item.title || id || "Conversation")}</span>
+                <small>{String(item.updated_at || item.started_at || "")}</small>
+              </button>
+              <button className="brain-delete-button" onClick={() => onDelete(id)} aria-label="Delete conversation">
+                <Trash2 className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          );
+        }) : <EmptyState title="No conversations yet" detail="New exchanges will appear here." />}
+      </div>
+    </section>
+  );
+}
+
+function MemoryNearby({ question, trace }: { question: string; trace: unknown }) {
+  const hybrid = useQuery({
+    queryKey: ["brainNearbyMemory", question],
+    queryFn: () => latticeApi.hybridSearch(question),
+    enabled: question.trim().length > 2,
+  });
+  return (
+    <section className="brain-side-panel">
+      <div className="brain-side-head">
+        <div>
+          <h3>Memory nearby</h3>
+          <SourceBadge result={hybrid.data} />
+        </div>
+      </div>
+      {hybrid.data?.ok ? (
+        <EntityList items={(hybrid.data.data as Record<string, unknown>).matches || hybrid.data.data} titleKey="title" metaKey="type" limit={4} />
+      ) : trace ? (
+        <StructuredView value={trace} limit={4} />
+      ) : (
+        <EmptyState title="Quiet for now" detail="Relevant memory wakes up as the conversation gets specific." />
+      )}
+    </section>
+  );
+}

package/frontend/src/components/FirstRunGuide.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, CheckCircle2, Cpu, Download, Layers3, Library, PlayCircle, SlidersHorizontal, UserCircle, Users } from "lucide-react";
+import { latticeApi } from "@/api/client";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { useAppStore } from "@/store/appStore";
+import { go } from "@/routes";
+import { asArray } from "@/lib/utils";
+
+function readDismissed() {
+  try {
+    return localStorage.getItem("lattice.onboarding.dismissed") === "true";
+  } catch {}
+  return false;
+}
+
+export function FirstRunGuide() {
+  const [dismissed, setDismissed] = React.useState(readDismissed);
+  const mode = useAppStore((state) => state.mode);
+  const profile = useQuery({ queryKey: ["profile"], queryFn: latticeApi.profile });
+  const workspace = useQuery({ queryKey: ["workspaceOs"], queryFn: latticeApi.workspaceOs });
+  const models = useQuery({ queryKey: ["models"], queryFn: latticeApi.models });
+  const recs = useQuery({ queryKey: ["modelRecommendations", "local_mlx"], queryFn: () => latticeApi.modelRecommendations("local_mlx") });
+  if (dismissed) return null;
+
+  const profileData = (profile.data?.data || {}) as Record<string, unknown>;
+  const workspaceData = (workspace.data?.data || {}) as Record<string, unknown>;
+  const registry = (workspaceData.workspace_registry || {}) as Record<string, unknown>;
+  const modelData = (models.data?.data || {}) as Record<string, unknown>;
+  const recommendationData = ((recs.data?.data as Record<string, unknown> | undefined)?.recommendations || {}) as Record<string, unknown>;
+  const currentModel = String(modelData.current || "");
+  const loadedModels = asArray(modelData.loaded);
+  const topPick = recommendationData.top_pick as Record<string, unknown> | undefined;
+  const compatProfiles = asArray<Record<string, unknown>>(modelData.compat_profiles);
+  const readyProfile = compatProfiles.some((item) => item.chat_compatible || item.quality_status === "ok" || item.quality_status === "degraded");
+
+  const steps = [
+    { label: "Make it yours", done: Boolean(profileData.email), icon: UserCircle, action: "account", detail: "Sign in or keep a local profile." },
+    { label: "Choose a space", done: Boolean(registry.active_workspace || workspaceData.active_workspace), icon: Users, action: "workspace-admin", detail: "Decide where memories belong." },
+    { label: "Meet your Mac", done: recs.isSuccess, icon: Cpu, action: "models", detail: "Let Lattice inspect what can run locally." },
+    { label: "Pick a brain", done: Boolean(topPick || currentModel), icon: Library, action: "models", detail: "Use the recommended local model." },
+    { label: "Install locally", done: Boolean(currentModel || loadedModels.length), icon: Download, action: "models", detail: "Download only with explicit consent." },
+    { label: "Talk to Brain", done: Boolean(readyProfile || currentModel || loadedModels.length), icon: PlayCircle, action: "chat", detail: "Confirm the model can answer." },
+    { label: "Set the pace", done: Boolean(mode), icon: SlidersHorizontal, action: "settings", detail: "Stay Calm or switch deeper." },
+    { label: "Explore deeply", done: true, icon: Layers3, action: "knowledge-graph", detail: "Open advanced relationships." },
+  ];
+  const completed = steps.filter((step) => step.done).length;
+  const nextStep = steps.find((step) => !step.done) || steps[steps.length - 1];
+  const progress = Math.round((completed / steps.length) * 100);
+
+  return (
+    <section className="arrival-panel" aria-label="First 10 minutes">
+      <div className="arrival-copy">
+        <div className="page-kicker"><CheckCircle2 className="h-4 w-4" /> First 10 minutes</div>
+        <h2>Build your living Brain without guessing.</h2>
+        <p>
+          Start with a space, let Lattice recommend a private local model, then add the first pieces of knowledge.
+          Every step keeps the next action visible.
+        </p>
+        <div className="arrival-actions">
+          <Button onClick={() => go(nextStep.action)}>{nextStep.done ? "Open relationships" : `Continue: ${nextStep.label}`}</Button>
+          <Button variant="outline" onClick={() => go("models")}>Set up model</Button>
+          <Button variant="ghost" onClick={() => {
+            try { localStorage.setItem("lattice.onboarding.dismissed", "true"); } catch {}
+            setDismissed(true);
+          }}>
+            Hide
+          </Button>
+        </div>
+      </div>
+      <div className="journey-panel">
+        <div className="journey-head">
+          <div>
+            <div className="text-sm font-semibold">{completed} of {steps.length} ready</div>
+            <div className="text-xs text-muted-foreground">{mode === "basic" ? "Calm mode" : `${mode} mode`}</div>
+          </div>
+          <Badge variant={progress === 100 ? "success" : "warning"}>{progress}%</Badge>
+        </div>
+        <div className="journey-progress"><span style={{ width: `${progress}%` }} /></div>
+        <div className="journey-steps">
+          {steps.map((step) => {
+            const Icon = step.icon;
+            return (
+              <button key={step.label} onClick={() => go(step.action)} className="journey-step">
+                <span className="journey-icon"><Icon className="h-4 w-4" /></span>
+                <span className="min-w-0">
+                  <span className="block truncate text-sm font-semibold">{step.label}</span>
+                  <span className="block truncate text-xs text-muted-foreground">{step.detail}</span>
+                </span>
+                <ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

package/frontend/src/components/LivingBrain.tsx

@@ -0,0 +1,121 @@
+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);
+}
+
+export function LivingBrain({
+  activity = "idle",
+  vitals,
+  compact = false,
+  showVitals = false,
+  className,
+}: {
+  activity?: BrainActivity;
+  vitals?: BrainVitals;
+  compact?: boolean;
+  showVitals?: boolean;
+  className?: string;
+}) {
+  const state = vitals?.activityLabel || activityLabels[activity];
+  const connected = vitals?.connected !== false;
+
+  return (
+    <section
+      className={cn("living-brain", compact && "living-brain-compact", className)}
+      data-activity={activity}
+      aria-label="Living Brain"
+    >
+      <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>
+        </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>
+        </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>
+        </div>
+      )}
+    </section>
+  );
+}