ltcai 6.7.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>