ltcai 7.0.0 → 7.1.0

package/frontend/src/features/brain/BrainGraphLayer.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Search } from "lucide-react";
+import { Filter, RotateCcw, Search, X } from "lucide-react";
 import { t } from "@/i18n";
 import { useAppStore } from "@/store/appStore";
 import type { KnowledgeConcept, KnowledgeGraphModel } from "./types";
-import { clamp, layerStyle, layoutGraphNodes, polarPoint } from "./graphLayout";
+import { clamp, computeGraphNeighbors, layerStyle, layoutGraphNodes, polarPoint } from "./graphLayout";
 
 export function BrainKnowledgeLayer({ concepts, depth }: { concepts: KnowledgeConcept[]; depth: number }) {
   const language = useAppStore((state) => state.language);
@@ -31,6 +31,31 @@ export function BrainKnowledgeLayer({ concepts, depth }: { concepts: KnowledgeCo
   );
 }
 
+const DAY_MS = 24 * 60 * 60 * 1000;
+// Time-exploration presets (days back). null == all time.
+const TIME_WINDOWS: Array<{ days: number | null }> = [{ days: 7 }, { days: 30 }, { days: 90 }, { days: null }];
+// A node added within this window of "now" is treated as recent for highlighting.
+const RECENT_WINDOW_MS = 7 * DAY_MS;
+
+// Highlight occurrences of `query` inside `label` by wrapping matches in <mark>.
+function highlightMatch(label: string, query: string): React.ReactNode {
+  if (!query) return label;
+  const lower = label.toLowerCase();
+  const target = query.toLowerCase();
+  const parts: React.ReactNode[] = [];
+  let cursor = 0;
+  let matchIndex = lower.indexOf(target, cursor);
+  let key = 0;
+  while (matchIndex !== -1 && target.length > 0) {
+    if (matchIndex > cursor) parts.push(label.slice(cursor, matchIndex));
+    parts.push(<mark key={`m-${key++}`}>{label.slice(matchIndex, matchIndex + target.length)}</mark>);
+    cursor = matchIndex + target.length;
+    matchIndex = lower.indexOf(target, cursor);
+  }
+  if (cursor < label.length) parts.push(label.slice(cursor));
+  return parts.length ? parts : label;
+}
+
 export function BrainGraphLayer({
   model,
   search,
@@ -46,13 +71,53 @@ export function BrainGraphLayer({
 }) {
   const language = useAppStore((state) => state.language);
   const query = search.trim().toLowerCase();
+
+  // Control state local to the graph view so existing lifted search/selection
+  // behavior (and its reset in surface()) is preserved untouched.
+  const [activeTypes, setActiveTypes] = React.useState<Set<string>>(() => new Set());
+  const [timeDays, setTimeDays] = React.useState<number | null>(null);
+  const [typeaheadOpen, setTypeaheadOpen] = React.useState(false);
+
+  // Distinct entity types available in the graph (for the type filter chips).
+  const availableTypes = React.useMemo(() => {
+    const seen = new Set<string>();
+    for (const node of model.nodes) seen.add(node.type);
+    return Array.from(seen).sort((a, b) => a.localeCompare(b));
+  }, [model.nodes]);
+
+  // Drop type selections that no longer exist after a graph refresh.
+  React.useEffect(() => {
+    setActiveTypes((prev) => {
+      if (prev.size === 0) return prev;
+      const next = new Set<string>();
+      for (const type of prev) if (availableTypes.includes(type)) next.add(type);
+      return next.size === prev.size ? prev : next;
+    });
+  }, [availableTypes]);
+
+  const hasTimestamps = React.useMemo(() => model.nodes.some((node) => typeof node.createdAt === "number"), [model.nodes]);
+  const timeCutoff = timeDays === null ? null : Date.now() - timeDays * DAY_MS;
+
+  const filtersActive = activeTypes.size > 0 || timeDays !== null;
+
   const visibleNodes = React.useMemo(() => {
     const filtered = model.nodes.filter((node) => {
+      if (activeTypes.size > 0 && !activeTypes.has(node.type)) return false;
+      if (timeCutoff !== null && typeof node.createdAt === "number" && node.createdAt < timeCutoff) return false;
       if (!query) return true;
       return `${node.label} ${node.type} ${node.summary}`.toLowerCase().includes(query);
     });
     return filtered.slice(0, 18);
+  }, [model.nodes, query, activeTypes, timeCutoff]);
+
+  // Typeahead suggestions: label-prefix/substring matches ranked by importance.
+  const suggestions = React.useMemo(() => {
+    if (!query) return [];
+    return model.nodes
+      .filter((node) => node.label.toLowerCase().includes(query) || node.type.toLowerCase().includes(query))
+      .slice(0, 6);
   }, [model.nodes, query]);
+
   const layout = React.useMemo(() => layoutGraphNodes(visibleNodes, 38, 24), [visibleNodes]);
   const positionById = React.useMemo(() => new Map(layout.map((item) => [item.node.id, item])), [layout]);
   const visibleEdges = React.useMemo(
@@ -61,6 +126,24 @@ export function BrainGraphLayer({
   );
   const selected = visibleNodes.find((node) => node.id === selectedId) || visibleNodes[0] || null;
 
+  // 1-hop neighbor set for the focused node, drives focus/dim + edge highlight.
+  const neighborIds = React.useMemo(
+    () => (selectedId ? computeGraphNeighbors(selectedId, model.edges) : new Set<string>()),
+    [selectedId, model.edges],
+  );
+  const focusActive = Boolean(selectedId) && neighborIds.size > 0;
+
+  const matchedIds = React.useMemo(() => {
+    if (!query) return new Set<string>();
+    return new Set(visibleNodes.filter((node) => node.label.toLowerCase().includes(query)).map((node) => node.id));
+  }, [visibleNodes, query]);
+
+  function focusState(nodeId: string): "true" | "false" | undefined {
+    if (!focusActive) return undefined;
+    if (nodeId === selectedId || neighborIds.has(nodeId)) return "true";
+    return "false";
+  }
+
   return (
     <section className="mind-core-graph" data-testid="emergent-knowledge-graph" aria-label={t(language, "brain.aria.graph")}>
       <div className="brain-graph-head">
@@ -68,24 +151,159 @@ export function BrainGraphLayer({
           <span>{t(language, "brain.level")} 5</span>
           <strong>{t(language, "brain.depth.5")}</strong>
         </div>
-        <label className="brain-graph-search">
-          <Search className="h-3.5 w-3.5" />
-          <input
-            value={search}
-            onChange={(event) => onSearch(event.target.value)}
-            placeholder={t(language, "brain.graph.search")}
-            aria-label={t(language, "brain.graph.searchAria")}
-          />
-        </label>
+        <div className="brain-graph-search-wrap">
+          <label className="brain-graph-search">
+            <Search className="h-3.5 w-3.5" />
+            <input
+              value={search}
+              onChange={(event) => {
+                onSearch(event.target.value);
+                setTypeaheadOpen(true);
+              }}
+              onFocus={() => setTypeaheadOpen(true)}
+              onBlur={() => window.setTimeout(() => setTypeaheadOpen(false), 120)}
+              placeholder={t(language, "brain.graph.search")}
+              aria-label={t(language, "brain.graph.searchAria")}
+              role="combobox"
+              aria-expanded={typeaheadOpen && Boolean(query)}
+              aria-autocomplete="list"
+              aria-controls="brain-graph-typeahead"
+            />
+            {search ? (
+              <button
+                type="button"
+                className="brain-graph-search-clear"
+                onClick={() => onSearch("")}
+                aria-label={t(language, "brain.graph.focus.clear")}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            ) : null}
+          </label>
+          {typeaheadOpen && query ? (
+            <ul
+              id="brain-graph-typeahead"
+              className="brain-graph-typeahead"
+              role="listbox"
+              aria-label={t(language, "brain.graph.search.typeaheadAria")}
+            >
+              {suggestions.length ? (
+                suggestions.map((node) => (
+                  <li key={node.id} role="option" aria-selected={node.id === selectedId}>
+                    <button
+                      type="button"
+                      onMouseDown={(event) => {
+                        event.preventDefault();
+                        onSearch(node.label);
+                        onSelect(node.id);
+                        setTypeaheadOpen(false);
+                      }}
+                    >
+                      <span>{node.type}</span>
+                      <strong>{highlightMatch(node.label, query)}</strong>
+                    </button>
+                  </li>
+                ))
+              ) : (
+                <li className="is-empty" aria-disabled>
+                  {t(language, "brain.graph.search.noMatches")}
+                </li>
+              )}
+            </ul>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="brain-graph-control-panel" role="group" aria-label={t(language, "brain.graph.control.panel")}>
+        <div className="brain-graph-filter-row">
+          <span className="brain-graph-control-label">
+            <Filter className="h-3 w-3" aria-hidden />
+            {t(language, "brain.graph.control.types")}
+          </span>
+          <div className="brain-graph-type-chips" role="group" aria-label={t(language, "brain.graph.control.types")}>
+            <button
+              type="button"
+              className={`brain-graph-chip ${activeTypes.size === 0 ? "is-active" : ""}`}
+              aria-pressed={activeTypes.size === 0}
+              onClick={() => setActiveTypes(new Set())}
+            >
+              {t(language, "brain.graph.control.allTypes")}
+            </button>
+            {availableTypes.map((type) => {
+              const active = activeTypes.has(type);
+              return (
+                <button
+                  key={type}
+                  type="button"
+                  className={`brain-graph-chip ${active ? "is-active" : ""}`}
+                  aria-pressed={active}
+                  aria-label={t(language, "brain.graph.control.toggleType", { type })}
+                  onClick={() =>
+                    setActiveTypes((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(type)) next.delete(type);
+                      else next.add(type);
+                      return next;
+                    })
+                  }
+                >
+                  {type}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="brain-graph-filter-row">
+          <span className="brain-graph-control-label">{t(language, "brain.graph.control.time")}</span>
+          <div className="brain-graph-time-chips" role="group" aria-label={t(language, "brain.graph.control.dateRange")}>
+            {TIME_WINDOWS.map((window) => {
+              const active = timeDays === window.days;
+              const label =
+                window.days === null
+                  ? t(language, "brain.graph.control.allTime")
+                  : t(language, "brain.graph.control.recentWindow", { days: window.days });
+              return (
+                <button
+                  key={window.days ?? "all"}
+                  type="button"
+                  className={`brain-graph-chip ${active ? "is-active" : ""}`}
+                  aria-pressed={active}
+                  disabled={window.days !== null && !hasTimestamps}
+                  onClick={() => setTimeDays(window.days)}
+                >
+                  {label}
+                </button>
+              );
+            })}
+          </div>
+          {filtersActive ? (
+            <button
+              type="button"
+              className="brain-graph-reset"
+              onClick={() => {
+                setActiveTypes(new Set());
+                setTimeDays(null);
+              }}
+            >
+              <RotateCcw className="h-3 w-3" aria-hidden />
+              {t(language, "brain.graph.control.resetFilters")}
+            </button>
+          ) : null}
+        </div>
       </div>
 
       {visibleNodes.length ? (
-        <div className="brain-graph-canvas">
+        <div className="brain-graph-canvas" data-focus-active={focusActive ? "true" : "false"}>
           <svg className="brain-graph-edges" viewBox="0 0 100 100" aria-hidden>
             {visibleEdges.map((edge, index) => {
               const source = positionById.get(edge.source);
               const target = positionById.get(edge.target);
               if (!source || !target) return null;
+              const touchesFocus =
+                focusActive && (edge.source === selectedId || edge.target === selectedId);
+              const touchesMatch = matchedIds.has(edge.source) || matchedIds.has(edge.target);
+              const highlight = touchesFocus || (query ? touchesMatch : false);
               return (
                 <line
                   key={`${edge.id}-${index}`}
@@ -93,23 +311,32 @@ export function BrainGraphLayer({
                   y1={source.y}
                   x2={target.x}
                   y2={target.y}
+                  data-highlight={
+                    focusActive || query ? (highlight ? "true" : "false") : undefined
+                  }
                   style={{ "--weight": String(clamp(edge.weight, 0.4, 2.8)) } as React.CSSProperties}
                 />
               );
             })}
           </svg>
-          {layout.map(({ node, x, y }, index) => (
-            <button
-              key={node.id}
-              type="button"
-              className={`graph-node ${selected?.id === node.id ? "is-selected" : ""}`}
-              style={layerStyle({ "--x": `${x}%`, "--y": `${y}%`, "--delay": `${index * 35}ms` })}
-              onClick={() => onSelect(node.id)}
-            >
-              <span>{node.type}</span>
-              {node.label}
-            </button>
-          ))}
+          {layout.map(({ node, x, y }, index) => {
+            const isRecent =
+              typeof node.createdAt === "number" && Date.now() - node.createdAt <= RECENT_WINDOW_MS;
+            return (
+              <button
+                key={node.id}
+                type="button"
+                className={`graph-node ${selected?.id === node.id ? "is-selected" : ""} ${matchedIds.has(node.id) ? "is-match" : ""}`}
+                data-focus={focusState(node.id)}
+                data-recent={isRecent ? "true" : undefined}
+                style={layerStyle({ "--x": `${x}%`, "--y": `${y}%`, "--delay": `${index * 35}ms` })}
+                onClick={() => onSelect(selectedId === node.id ? null : node.id)}
+              >
+                <span>{node.type}</span>
+                {highlightMatch(node.label, query)}
+              </button>
+            );
+          })}
         </div>
       ) : (
         <div className="brain-graph-empty">{t(language, "brain.graph.empty")}</div>
@@ -121,7 +348,13 @@ export function BrainGraphLayer({
             <span>{selected.type}</span>
             <strong>{selected.label}</strong>
             <p>{selected.summary || t(language, "brain.graph.summaryFallback")}</p>
-            <p>{t(language, "brain.graph.focused")}</p>
+            {focusActive ? (
+              <p className="brain-graph-focus-meta" role="status">
+                {t(language, "brain.graph.focus.neighbors", { count: neighborIds.size })}
+              </p>
+            ) : (
+              <p>{t(language, "brain.graph.focused")}</p>
+            )}
           </>
         ) : (
           <p>{t(language, "brain.graph.emptyFocus")}</p>

package/frontend/src/features/brain/BrainHome.tsx

@@ -7,7 +7,19 @@ import { t } from "@/i18n";
 import { BrainConversation } from "./BrainConversation";
 import { buildBrainProof, buildBrainReadiness, buildMemoryFragments, currentModelName, parseKnowledgeGraph } from "./brainData";
 import { DepthEmergence } from "./DepthEmergence";
-import { DEPTHS, type BrainDepth, type BrainProof, type MemoryFragment, type Message, type MessageProof } from "./types";
+import {
+  DEPTHS,
+  INGESTION_STAGE_ORDER,
+  type BrainDepth,
+  type BrainProof,
+  type EmergenceEvent,
+  type IngestionPipelineStage,
+  type IngestionSourceType,
+  type IngestionState,
+  type MemoryFragment,
+  type Message,
+  type MessageProof,
+} from "./types";
 
 export function BrainHome({
   brainState,
@@ -31,8 +43,27 @@ export function BrainHome({
   const [memoryFeedback, setMemoryFeedback] = React.useState<string | null>(null);
   const [uploadingDocument, setUploadingDocument] = React.useState(false);
   const [lastRecallQuery, setLastRecallQuery] = React.useState("");
+  const [ingestionStates, setIngestionStates] = React.useState<Record<IngestionSourceType, IngestionState | null>>({
+    file: null,
+    folder: null,
+    note: null,
+    web: null,
+  });
+  const [emergenceEvents, setEmergenceEvents] = React.useState<EmergenceEvent[]>([]);
   const streamRef = React.useRef<HTMLDivElement>(null);
   const recallTimerRef = React.useRef<number | null>(null);
+  const stageTimersRef = React.useRef<Record<IngestionSourceType, number[]>>({
+    file: [],
+    folder: [],
+    note: [],
+    web: [],
+  });
+  const pendingBaselineRef = React.useRef<
+    Partial<Record<IngestionSourceType, { memories: number; entities: number; label: string }>>
+  >({});
+  // Source types whose request has resolved and are awaiting count settle to record emergence.
+  const awaitingEmergenceRef = React.useRef<Set<IngestionSourceType>>(new Set());
+  const settleTimerRef = React.useRef<number | null>(null);
 
   const memoriesQ = useQuery({ queryKey: ["memoryManager"], queryFn: latticeApi.memoryManager });
   const historyQ = useQuery({ queryKey: ["chatHistory"], queryFn: latticeApi.chatHistory });
@@ -89,9 +120,156 @@ export function BrainHome({
   React.useEffect(() => {
     return () => {
       if (recallTimerRef.current !== null) window.clearTimeout(recallTimerRef.current);
+      for (const timers of Object.values(stageTimersRef.current)) {
+        for (const timer of timers) window.clearTimeout(timer);
+      }
+    };
+  }, []);
+
+  const clearStageTimers = React.useCallback((sourceType: IngestionSourceType) => {
+    for (const timer of stageTimersRef.current[sourceType]) window.clearTimeout(timer);
+    stageTimersRef.current[sourceType] = [];
+  }, []);
+
+  const setStage = React.useCallback((sourceType: IngestionSourceType, stage: IngestionPipelineStage) => {
+    setIngestionStates((prev) => {
+      const current = prev[sourceType];
+      if (!current) return prev;
+      return {
+        ...prev,
+        [sourceType]: {
+          ...current,
+          stage,
+          completedAt: stage === "complete" || stage === "error" ? Date.now() : current.completedAt,
+        },
+      };
+    });
+  }, []);
+
+  const beginIngestion = React.useCallback(
+    (sourceType: IngestionSourceType, label: string) => {
+      clearStageTimers(sourceType);
+      pendingBaselineRef.current[sourceType] = {
+        memories: memoryFragments.length,
+        entities: knowledgeConcepts.length,
+        label,
+      };
+      setIngestionStates((prev) => ({
+        ...prev,
+        [sourceType]: {
+          sourceType,
+          label,
+          stage: "preparing",
+          startedAt: Date.now(),
+          completedAt: null,
+          newMemories: 0,
+          newEntities: 0,
+        },
+      }));
+      // Progressive disclosure of the in-flight pipeline while the request runs.
+      const interim: IngestionPipelineStage[] = ["parsing", "embedding", "indexing"];
+      interim.forEach((stage, index) => {
+        const timer = window.setTimeout(() => setStage(sourceType, stage), 420 * (index + 1));
+        stageTimersRef.current[sourceType].push(timer);
+      });
+    },
+    [clearStageTimers, knowledgeConcepts.length, memoryFragments.length, setStage],
+  );
+
+  const resolveEmergence = React.useCallback(
+    (sourceType: IngestionSourceType, memoryCount: number, entityCount: number) => {
+      clearStageTimers(sourceType);
+      const baseline = pendingBaselineRef.current[sourceType];
+      const label = baseline?.label ?? "";
+      // Snapshot deltas after invalidation lands; cap at >=0 to avoid noise.
+      const newMemories = Math.max(0, memoryCount - (baseline?.memories ?? memoryCount));
+      const newEntities = Math.max(0, entityCount - (baseline?.entities ?? entityCount));
+      delete pendingBaselineRef.current[sourceType];
+      setIngestionStates((prev) => {
+        const current = prev[sourceType];
+        if (!current) return prev;
+        return {
+          ...prev,
+          [sourceType]: {
+            ...current,
+            stage: "complete",
+            completedAt: Date.now(),
+            newMemories,
+            newEntities,
+          },
+        };
+      });
+      setEmergenceEvents((events) =>
+        [
+          {
+            id: `${sourceType}-${Date.now()}`,
+            sourceType,
+            label,
+            newMemories,
+            newEntities,
+            at: Date.now(),
+          },
+          ...events,
+        ].slice(0, 10),
+      );
+    },
+    [clearStageTimers],
+  );
+
+  // Once a request resolves we wait for the refetched counts to settle, then record the
+  // real emergence delta. A fallback timer guarantees the panel never hangs on a stale count.
+  const markAwaitingEmergence = React.useCallback(
+    (sourceType: IngestionSourceType) => {
+      awaitingEmergenceRef.current.add(sourceType);
+      if (settleTimerRef.current !== null) window.clearTimeout(settleTimerRef.current);
+      settleTimerRef.current = window.setTimeout(() => {
+        for (const pending of Array.from(awaitingEmergenceRef.current)) {
+          resolveEmergence(pending, memoryFragments.length, knowledgeConcepts.length);
+          awaitingEmergenceRef.current.delete(pending);
+        }
+      }, 1600);
+    },
+    [knowledgeConcepts.length, memoryFragments.length, resolveEmergence],
+  );
+
+  // Flush awaiting ingestions as soon as the underlying counts change post-invalidation.
+  React.useEffect(() => {
+    if (awaitingEmergenceRef.current.size === 0) return;
+    for (const pending of Array.from(awaitingEmergenceRef.current)) {
+      const baseline = pendingBaselineRef.current[pending];
+      if (!baseline) {
+        awaitingEmergenceRef.current.delete(pending);
+        continue;
+      }
+      if (memoryFragments.length !== baseline.memories || knowledgeConcepts.length !== baseline.entities) {
+        resolveEmergence(pending, memoryFragments.length, knowledgeConcepts.length);
+        awaitingEmergenceRef.current.delete(pending);
+      }
+    }
+  }, [memoryFragments.length, knowledgeConcepts.length, resolveEmergence]);
+
+  React.useEffect(() => {
+    return () => {
+      if (settleTimerRef.current !== null) window.clearTimeout(settleTimerRef.current);
     };
   }, []);
 
+  const failIngestion = React.useCallback(
+    (sourceType: IngestionSourceType, reason: string) => {
+      clearStageTimers(sourceType);
+      delete pendingBaselineRef.current[sourceType];
+      setIngestionStates((prev) => {
+        const current = prev[sourceType];
+        if (!current) return prev;
+        return {
+          ...prev,
+          [sourceType]: { ...current, stage: "error", completedAt: Date.now(), error: reason },
+        };
+      });
+    },
+    [clearStageTimers],
+  );
+
   async function send() {
     const text = draft.trim();
     if (!text || streaming) return;
@@ -167,11 +345,13 @@ export function BrainHome({
     setUploadingDocument(true);
     setMemoryFeedback(t(language, "brain.upload.pending", { name: file.name }));
     onBrainChange("recalling", 0.86);
+    beginIngestion("file", file.name);
 
     try {
       const result = await latticeApi.uploadDocument(file);
       if (result.error) {
         setMemoryFeedback(t(language, "brain.upload.failed", { reason: result.error }));
+        failIngestion("file", result.error);
         return;
       }
 
@@ -181,6 +361,7 @@ export function BrainHome({
       void qc.invalidateQueries({ queryKey: ["memoryManager"] });
       void qc.invalidateQueries({ queryKey: ["graph"] });
       void qc.invalidateQueries({ queryKey: ["memoryBrainProof"] });
+      markAwaitingEmergence("file");
     } finally {
       setUploadingDocument(false);
     }
@@ -191,15 +372,18 @@ export function BrainHome({
     if (!target) return;
     setMemoryFeedback(t(language, "brain.ingest.folder.pending", { path: target }));
     onBrainChange("recalling", 0.84);
+    beginIngestion("folder", target);
     const result = await latticeApi.connectFolder(target);
     if (result.error || !result.ok) {
       setMemoryFeedback(t(language, "brain.ingest.folder.failed", { reason: result.error || "unavailable" }));
+      failIngestion("folder", result.error || "unavailable");
       return;
     }
     setMemoryFeedback(t(language, "brain.ingest.folder.saved", { path: target }));
     setLastRecallQuery(target);
     triggerBrainRecall();
     void refreshBrainProof(target);
+    markAwaitingEmergence("folder");
   }
 
   async function ingestNote(note: string) {
@@ -207,15 +391,18 @@ export function BrainHome({
     if (!content) return;
     setMemoryFeedback(t(language, "brain.ingest.note.pending"));
     onBrainChange("recalling", 0.84);
+    beginIngestion("note", content.slice(0, 80));
     const result = await latticeApi.ingestNote(content, content.slice(0, 80));
     if (result.error || !result.ok) {
       setMemoryFeedback(t(language, "brain.ingest.note.failed", { reason: result.error || "unavailable" }));
+      failIngestion("note", result.error || "unavailable");
       return;
     }
     setMemoryFeedback(t(language, "brain.ingest.note.saved"));
     setLastRecallQuery(content.slice(0, 120));
     triggerBrainRecall();
     void refreshBrainProof(content.slice(0, 120));
+    markAwaitingEmergence("note");
   }
 
   async function ingestWeb(url: string) {
@@ -223,15 +410,18 @@ export function BrainHome({
     if (!target) return;
     setMemoryFeedback(t(language, "brain.ingest.web.pending", { url: target }));
     onBrainChange("recalling", 0.84);
+    beginIngestion("web", target);
     const result = await latticeApi.browserReadUrl(target);
     if (result.error || !result.ok) {
       setMemoryFeedback(t(language, "brain.ingest.web.failed", { reason: result.error || "unavailable" }));
+      failIngestion("web", result.error || "unavailable");
       return;
     }
     setMemoryFeedback(t(language, "brain.ingest.web.saved", { url: target }));
     setLastRecallQuery(target);
     triggerBrainRecall();
     void refreshBrainProof(target);
+    markAwaitingEmergence("web");
   }
 
   async function refreshBrainProof(query = lastRecallQuery) {
@@ -361,6 +551,8 @@ export function BrainHome({
         messages={messages}
         starterPrompts={starterPrompts}
         memoryFeedback={memoryFeedback}
+        ingestionStates={ingestionStates}
+        emergenceEvents={emergenceEvents}
         draft={draft}
         streaming={streaming}
         imageData={imageData}

package/frontend/src/features/brain/brainData.ts

@@ -33,7 +33,9 @@ export function parseKnowledgeGraph(data: unknown): KnowledgeGraphModel {
     const label = textValue(node, ["title", "label", "name"], id.replace(/^[^:]+:/, ""));
     const summary = textValue(node, ["summary", "description", "snippet"]) || textValue(metadata, ["summary", "description", "relative_path", "filename"]);
     const importance = clamp(numberValue(node, ["importance_norm", "importance", "score"]) || 0.5, 0.08, 1);
-    return [{ id, label, type, summary, importance }];
+    const createdAt = timestampValue(node, ["created_at", "createdAt", "added_at", "addedAt", "timestamp", "updated_at", "updatedAt"])
+      ?? timestampValue(metadata, ["created_at", "createdAt", "added_at", "addedAt", "timestamp", "updated_at", "updatedAt"]);
+    return [{ id, label, type, summary, importance, ...(createdAt !== undefined ? { createdAt } : {}) }];
   }).sort((left, right) => right.importance - left.importance);
   const ids = new Set(nodes.map((node) => node.id));
   const edges = rawEdges.flatMap((edge, index): RelationshipThread[] => {
@@ -205,6 +207,28 @@ function titleValue(record: ApiRecord, keys: string[], fallback = "") {
     .replace(/\b\w/g, (character) => character.toUpperCase());
 }
 
+// Parse a created/added timestamp into unix epoch milliseconds. Accepts ISO 8601
+// strings, unix seconds, or unix milliseconds. Returns undefined when absent or
+// unparseable so the time-exploration UI can fall back gracefully.
+function timestampValue(record: ApiRecord, keys: string[]): number | undefined {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number" && Number.isFinite(value)) {
+      // Heuristic: values below ~1e12 are seconds, otherwise milliseconds.
+      return value < 1e12 ? value * 1000 : value;
+    }
+    if (typeof value === "string" && value.trim()) {
+      const numeric = Number(value);
+      if (Number.isFinite(numeric) && /^\d+$/.test(value.trim())) {
+        return numeric < 1e12 ? numeric * 1000 : numeric;
+      }
+      const parsed = Date.parse(value);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+  }
+  return undefined;
+}
+
 function numberValue(record: ApiRecord, keys: string[]) {
   for (const key of keys) {
     const value = Number(record[key]);