ltcai 6.1.0 → 6.3.0

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

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { ImagePlus, Send } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { t, type Language } from "@/i18n";
+
+export function BrainComposer({
+  language,
+  draft,
+  streaming,
+  imageData,
+  onDraftChange,
+  onImageDataChange,
+  onSend,
+}: {
+  language: Language;
+  draft: string;
+  streaming: boolean;
+  imageData: string | null;
+  onDraftChange: (value: string) => void;
+  onImageDataChange: (value: string | null) => void;
+  onSend: () => void;
+}) {
+  return (
+    <div className="brain-composer">
+      <textarea
+        value={draft}
+        onChange={(event) => onDraftChange(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            onSend();
+          }
+        }}
+        placeholder={t(language, "brain.placeholder")}
+      />
+      <div className="brain-composer-actions">
+        <label className="brain-image-input">
+          <ImagePlus className="h-3.5 w-3.5" />
+          <span>{t(language, "brain.image")}</span>
+          <input
+            type="file"
+            accept="image/*"
+            className="sr-only"
+            onChange={async (event) => {
+              const file = event.target.files?.[0];
+              if (file) onImageDataChange(await fileToDataUrl(file));
+            }}
+          />
+        </label>
+        {imageData ? <span className="brain-quiet-success">{t(language, "brain.imageAttached")}</span> : null}
+        <Button onClick={onSend} disabled={!draft.trim() || streaming} className="rounded-full px-5">
+          <Send className="h-4 w-4" /> {t(language, "brain.send")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+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);
+  });
+}

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

@@ -0,0 +1,131 @@
+import * as React from "react";
+import { ShieldCheck } from "lucide-react";
+import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { t, type Language } from "@/i18n";
+import type { BrainDepth, KnowledgeConcept, MemoryFragment, Message } from "./types";
+import { BrainCarePanel } from "./BrainCarePanel";
+import { BrainComposer } from "./BrainComposer";
+import { BrainOverviewPanel } from "./BrainOverviewPanel";
+
+export function BrainConversation({
+  language,
+  explorationDepth,
+  modelName,
+  messages,
+  starterPrompts,
+  memoryFeedback,
+  draft,
+  streaming,
+  imageData,
+  streamRef,
+  memories,
+  concepts,
+  onOpenDepth,
+  onDraftChange,
+  onImageDataChange,
+  onSend,
+}: {
+  language: Language;
+  explorationDepth: BrainDepth;
+  modelName: string;
+  messages: Message[];
+  starterPrompts: string[];
+  memoryFeedback: string | null;
+  draft: string;
+  streaming: boolean;
+  imageData: string | null;
+  streamRef: React.RefObject<HTMLDivElement | null>;
+  memories: MemoryFragment[];
+  concepts: KnowledgeConcept[];
+  onOpenDepth: (depth: BrainDepth) => void;
+  onDraftChange: (value: string) => void;
+  onImageDataChange: (value: string | null) => void;
+  onSend: () => void;
+}) {
+  return (
+    <section className="brain-conversation" aria-label={t(language, "brain.aria.conversation")}>
+      <div className="brain-conversation-header">
+        <div>
+          <h1>{t(language, "brain.title")}</h1>
+          <span>{t(language, `brain.depth.${explorationDepth}`)}</span>
+        </div>
+        <LanguageSwitcher compact />
+        <div className="brain-ownership-strip" aria-label={t(language, "brain.aria.ownership")}>
+          <span>{t(language, "brain.local")}</span>
+          <span>{t(language, "brain.portable")}</span>
+          <span>{t(language, "brain.private")}</span>
+        </div>
+        <div>{modelName}</div>
+        <button className="brain-admin-link" type="button" onClick={() => navigateHash("/admin")}>
+          <ShieldCheck className="h-3.5 w-3.5" />
+          {t(language, "brain.admin")}
+        </button>
+      </div>
+
+      <div ref={streamRef} className="brain-stream">
+        <BrainOverviewPanel
+          memories={memories}
+          concepts={concepts}
+          onOpenDepth={onOpenDepth}
+        />
+        {messages.length === 0 ? (
+          <BrainEmptyState language={language} starterPrompts={starterPrompts} onDraftChange={onDraftChange} />
+        ) : (
+          messages.map((message, index) => (
+            <div key={`${message.role}-${index}`} className={`brain-message ${message.role}`}>
+              <div className="brain-message-bubble">{message.content}</div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {memoryFeedback ? <div className="brain-save-feedback" role="status">{memoryFeedback}</div> : null}
+
+      <BrainCarePanel language={language} />
+
+      <BrainComposer
+        language={language}
+        draft={draft}
+        streaming={streaming}
+        imageData={imageData}
+        onDraftChange={onDraftChange}
+        onImageDataChange={onImageDataChange}
+        onSend={onSend}
+      />
+    </section>
+  );
+}
+
+function BrainEmptyState({
+  language,
+  starterPrompts,
+  onDraftChange,
+}: {
+  language: Language;
+  starterPrompts: string[];
+  onDraftChange: (value: string) => void;
+}) {
+  return (
+    <div className="mind-empty">
+      <div className="mind-empty-kicker">{t(language, "brain.empty.kicker")}</div>
+      <div className="mind-empty-title">{t(language, "brain.empty.title")}</div>
+      <p>{t(language, "brain.empty.body")}</p>
+      <div className="mind-empty-prompts" aria-label={t(language, "brain.aria.starterPrompts")}>
+        {starterPrompts.map((prompt) => (
+          <button key={prompt} type="button" onClick={() => onDraftChange(prompt)}>
+            {prompt}
+          </button>
+        ))}
+      </div>
+      <div className="mind-empty-trail" aria-label={t(language, "brain.empty.trail.label")}>
+        <span>{t(language, "brain.empty.trail.save")}</span>
+        <span>{t(language, "brain.empty.trail.recall")}</span>
+        <span>{t(language, "brain.empty.trail.backup")}</span>
+      </div>
+    </div>
+  );
+}
+
+function navigateHash(route: string) {
+  window.location.hash = route;
+}

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

@@ -0,0 +1,132 @@
+import * as React from "react";
+import { Search } 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";
+
+export function BrainKnowledgeLayer({ concepts, depth }: { concepts: KnowledgeConcept[]; depth: number }) {
+  const language = useAppStore((state) => state.language);
+  const visible = concepts.slice(0, depth >= 4 ? 10 : 7);
+  if (!visible.length) return <div className="concept-signal is-empty">{t(language, "brain.knowledge.empty")}</div>;
+
+  return (
+    <>
+      {visible.map((concept, index) => {
+        const point = polarPoint(index, visible.length, 24, 15, -70);
+        return (
+          <button
+            key={concept.id}
+            type="button"
+            className="concept-signal"
+            style={layerStyle({ "--x": `${point.x}%`, "--y": `${point.y}%`, "--delay": `${index * 45}ms` })}
+            title={concept.summary || concept.type}
+          >
+            <span>{concept.type}</span>
+            {concept.label}
+          </button>
+        );
+      })}
+    </>
+  );
+}
+
+export function BrainGraphLayer({
+  model,
+  search,
+  selectedId,
+  onSearch,
+  onSelect,
+}: {
+  model: KnowledgeGraphModel;
+  search: string;
+  selectedId: string | null;
+  onSearch: (value: string) => void;
+  onSelect: (id: string | null) => void;
+}) {
+  const language = useAppStore((state) => state.language);
+  const query = search.trim().toLowerCase();
+  const visibleNodes = React.useMemo(() => {
+    const filtered = model.nodes.filter((node) => {
+      if (!query) return true;
+      return `${node.label} ${node.type} ${node.summary}`.toLowerCase().includes(query);
+    });
+    return filtered.slice(0, 18);
+  }, [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(
+    () => model.edges.filter((edge) => positionById.has(edge.source) && positionById.has(edge.target)).slice(0, 36),
+    [model.edges, positionById],
+  );
+  const selected = visibleNodes.find((node) => node.id === selectedId) || visibleNodes[0] || null;
+
+  return (
+    <section className="mind-core-graph" data-testid="emergent-knowledge-graph" aria-label={t(language, "brain.aria.graph")}>
+      <div className="brain-graph-head">
+        <div>
+          <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>
+
+      {visibleNodes.length ? (
+        <div className="brain-graph-canvas">
+          <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;
+              return (
+                <line
+                  key={`${edge.id}-${index}`}
+                  x1={source.x}
+                  y1={source.y}
+                  x2={target.x}
+                  y2={target.y}
+                  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>
+          ))}
+        </div>
+      ) : (
+        <div className="brain-graph-empty">{t(language, "brain.graph.empty")}</div>
+      )}
+
+      <div className="brain-graph-focus">
+        {selected ? (
+          <>
+            <span>{selected.type}</span>
+            <strong>{selected.label}</strong>
+            <p>{selected.summary || t(language, "brain.graph.summaryFallback")}</p>
+            <p>{t(language, "brain.graph.focused")}</p>
+          </>
+        ) : (
+          <p>{t(language, "brain.graph.emptyFocus")}</p>
+        )}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,232 @@
+import * as React from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { latticeApi } from "@/api/client";
+import { type BrainState, LivingBrain, triggerBrainRecall } from "@/components/LivingBrain";
+import { useAppStore } from "@/store/appStore";
+import { t } from "@/i18n";
+import { BrainConversation } from "./BrainConversation";
+import { buildMemoryFragments, currentModelName, parseKnowledgeGraph } from "./brainData";
+import { DepthEmergence } from "./DepthEmergence";
+import { DEPTHS, type BrainDepth, type MemoryFragment, type Message } from "./types";
+
+export function BrainHome({
+  brainState,
+  intensity,
+  onBrainChange,
+}: {
+  brainState: BrainState;
+  intensity: number;
+  onBrainChange: (state: BrainState, intensity?: number) => void;
+}) {
+  const qc = useQueryClient();
+  const language = useAppStore((state) => state.language);
+  const [messages, setMessages] = React.useState<Message[]>([]);
+  const [draft, setDraft] = React.useState("");
+  const [imageData, setImageData] = React.useState<string | null>(null);
+  const [streaming, setStreaming] = React.useState(false);
+  const [conversationId, setConversationId] = React.useState<string | null>(null);
+  const [explorationDepth, setExplorationDepth] = React.useState<BrainDepth>(1);
+  const [graphSearch, setGraphSearch] = React.useState("");
+  const [selectedGraphId, setSelectedGraphId] = React.useState<string | null>(null);
+  const [memoryFeedback, setMemoryFeedback] = React.useState<string | null>(null);
+  const streamRef = React.useRef<HTMLDivElement>(null);
+  const recallTimerRef = React.useRef<number | null>(null);
+
+  const memoriesQ = useQuery({ queryKey: ["memoryManager"], queryFn: latticeApi.memoryManager });
+  const historyQ = useQuery({ queryKey: ["chatHistory"], queryFn: latticeApi.chatHistory });
+  const graphQ = useQuery({ queryKey: ["graph"], queryFn: latticeApi.graph });
+  const modelsQ = useQuery({ queryKey: ["models"], queryFn: latticeApi.models });
+
+  const memoryFragments = React.useMemo(
+    () => buildMemoryFragments(memoriesQ.data?.data, historyQ.data?.data),
+    [memoriesQ.data, historyQ.data],
+  );
+  const graphModel = React.useMemo(() => parseKnowledgeGraph(graphQ.data?.data), [graphQ.data]);
+  const knowledgeConcepts = React.useMemo(
+    () => graphModel.nodes.slice(0, 10),
+    [graphModel.nodes],
+  );
+  const relationshipThreads = React.useMemo(
+    () => graphModel.edges.slice(0, 10),
+    [graphModel.edges],
+  );
+  const modelName = React.useMemo(() => currentModelName(modelsQ.data?.data), [modelsQ.data]);
+  const currentDepth = DEPTHS[explorationDepth - 1];
+  const starterPrompts = React.useMemo(
+    () => [
+      t(language, "brain.prompt.remember"),
+      t(language, "brain.prompt.know"),
+      t(language, "brain.prompt.plan"),
+    ],
+    [language],
+  );
+
+  React.useEffect(() => {
+    if (streaming) onBrainChange("thinking", 0.94);
+    else if (draft.trim().length > 4) onBrainChange("listening", 0.76);
+    else onBrainChange(currentDepth.state, explorationDepth === 1 ? 0.58 : 0.66 + explorationDepth * 0.06);
+  }, [streaming, draft, currentDepth.state, explorationDepth, onBrainChange]);
+
+  React.useEffect(() => {
+    const stream = streamRef.current;
+    if (stream) stream.scrollTop = stream.scrollHeight;
+  }, [messages]);
+
+  React.useEffect(() => {
+    return () => {
+      if (recallTimerRef.current !== null) window.clearTimeout(recallTimerRef.current);
+    };
+  }, []);
+
+  async function send() {
+    const text = draft.trim();
+    if (!text || streaming) return;
+    const activeConversationId = conversationId || `brain-${Date.now()}`;
+    if (!conversationId) setConversationId(activeConversationId);
+
+    setMessages((items) => [...items, { role: "user", content: text }, { role: "assistant", content: "" }]);
+    setDraft("");
+    setImageData(null);
+    setStreaming(true);
+    setMemoryFeedback(null);
+    onBrainChange("thinking", 0.96);
+
+    try {
+      const result = await latticeApi.streamChat(
+        { message: text, conversation_id: activeConversationId, image_data: imageData || undefined },
+        {
+          onChunk: (_delta, fullText) => {
+            setMessages((items) => {
+              const next = [...items];
+              next[next.length - 1] = { role: "assistant", content: fullText };
+              return next;
+            });
+          },
+          onTrace: (trace) => {
+            if (!trace) return;
+            onBrainChange("recalling", 0.9);
+            triggerBrainRecall();
+            if (recallTimerRef.current !== null) window.clearTimeout(recallTimerRef.current);
+            recallTimerRef.current = window.setTimeout(() => onBrainChange("thinking", 0.9), 900);
+          },
+        },
+      );
+      if (result.error) {
+        setMessages((items) => {
+          const next = [...items];
+          next[next.length - 1] = { role: "assistant", content: `${t(language, "brain.unavailable")}: ${result.error}` };
+          return next;
+        });
+      } else {
+        setMemoryFeedback(t(language, "brain.saved", { topics: knowledgeConcepts.length, memories: memoryFragments.length }));
+      }
+    } finally {
+      setStreaming(false);
+      void qc.invalidateQueries({ queryKey: ["chatHistory"] });
+      void qc.invalidateQueries({ queryKey: ["memoryManager"] });
+      void qc.invalidateQueries({ queryKey: ["graph"] });
+    }
+  }
+
+  function deepen() {
+    setExplorationDepth((depth) => {
+      const next = Math.min(5, depth + 1) as BrainDepth;
+      const nextDepth = DEPTHS[next - 1];
+      onBrainChange(nextDepth.state, 0.66 + next * 0.06);
+      if (next >= 2) triggerBrainRecall();
+      return next;
+    });
+  }
+
+  function jumpToDepth(next: BrainDepth) {
+    setExplorationDepth(next);
+    const nextDepth = DEPTHS[next - 1];
+    onBrainChange(nextDepth.state, next === 1 ? 0.58 : 0.66 + next * 0.06);
+    if (next >= 2) triggerBrainRecall();
+  }
+
+  function surface() {
+    setExplorationDepth(1);
+    setSelectedGraphId(null);
+    setGraphSearch("");
+    onBrainChange("idle", 0.58);
+  }
+
+  function recallMemory(fragment: MemoryFragment) {
+    triggerBrainRecall();
+    setExplorationDepth((depth) => Math.max(depth, 2) as BrainDepth);
+    setMessages((items) => [
+      ...items,
+      { role: "assistant", content: t(language, "brain.recalled", { title: fragment.title }) },
+    ]);
+  }
+
+  return (
+    <main className="brain-home" aria-label={t(language, "brain.aria.home")}>
+      <section className="brain-presence" aria-label={t(language, "brain.aria.exploration")}>
+        <div className="brain-exploration" data-depth={explorationDepth}>
+          <LivingBrain
+            state={brainState}
+            intensity={intensity + explorationDepth * 0.035}
+            size="large"
+            depth={explorationDepth}
+            showLabel={false}
+            onInteract={deepen}
+          />
+
+          <div className="brain-depth-badge" aria-live="polite">
+            <span>{t(language, "brain.level")} {explorationDepth}</span>
+            <strong>{t(language, `brain.depth.${explorationDepth}`)}</strong>
+          </div>
+
+          <div className="brain-depth-actions" aria-label={t(language, "brain.aria.quickViews")}>
+            <button type="button" className={explorationDepth === 2 ? "is-active" : ""} onClick={() => jumpToDepth(2)}>{t(language, "brain.view.memories")}</button>
+            <button type="button" className={explorationDepth === 3 ? "is-active" : ""} onClick={() => jumpToDepth(3)}>{t(language, "brain.view.topics")}</button>
+            <button type="button" className={explorationDepth === 4 ? "is-active" : ""} onClick={() => jumpToDepth(4)}>{t(language, "brain.view.relationships")}</button>
+            <button type="button" className={explorationDepth === 5 ? "is-active" : ""} onClick={() => jumpToDepth(5)}>{t(language, "brain.view.graph")}</button>
+          </div>
+
+          <div className="brain-field-layer" aria-hidden={explorationDepth < 2}>
+            <DepthEmergence
+              depth={explorationDepth}
+              memories={memoryFragments}
+              concepts={knowledgeConcepts}
+              relationships={relationshipThreads}
+              graphModel={graphModel}
+              graphSearch={graphSearch}
+              selectedGraphId={selectedGraphId}
+              onGraphSearch={setGraphSearch}
+              onSelectGraphNode={setSelectedGraphId}
+              onRecallMemory={recallMemory}
+            />
+          </div>
+
+          {explorationDepth > 1 ? (
+            <button className="brain-surface-control" type="button" onClick={surface}>
+              {t(language, "brain.surface")}
+            </button>
+          ) : null}
+        </div>
+      </section>
+
+      <BrainConversation
+        language={language}
+        explorationDepth={explorationDepth}
+        modelName={modelName}
+        messages={messages}
+        starterPrompts={starterPrompts}
+        memoryFeedback={memoryFeedback}
+        draft={draft}
+        streaming={streaming}
+        imageData={imageData}
+        streamRef={streamRef}
+        memories={memoryFragments}
+        concepts={knowledgeConcepts}
+        onOpenDepth={jumpToDepth}
+        onDraftChange={setDraft}
+        onImageDataChange={setImageData}
+        onSend={() => void send()}
+      />
+    </main>
+  );
+}

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

@@ -0,0 +1,38 @@
+import type { BrainDepth, MemoryFragment } from "./types";
+import { t } from "@/i18n";
+import { useAppStore } from "@/store/appStore";
+import { layerStyle, polarPoint } from "./graphLayout";
+
+export function BrainMemoryLayer({
+  memories,
+  depth,
+  onRecallMemory,
+}: {
+  memories: MemoryFragment[];
+  depth: BrainDepth;
+  onRecallMemory: (fragment: MemoryFragment) => void;
+}) {
+  const language = useAppStore((state) => state.language);
+  const visible = memories.slice(0, depth >= 3 ? 8 : 6);
+  if (!visible.length) return <div className="memory-fragment is-empty">{t(language, "brain.memory.empty")}</div>;
+
+  return (
+    <>
+      {visible.map((memory, index) => {
+        const point = polarPoint(index, visible.length, depth >= 3 ? 39 : 31, depth >= 3 ? 24 : 18, -112);
+        return (
+          <button
+            key={memory.id}
+            type="button"
+            className="memory-fragment"
+            style={layerStyle({ "--x": `${point.x}%`, "--y": `${point.y}%`, "--delay": `${index * 55}ms` })}
+            onClick={() => onRecallMemory(memory)}
+          >
+            <span>{memory.kind}</span>
+            <strong>{memory.title}</strong>
+          </button>
+        );
+      })}
+    </>
+  );
+}

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

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { t } from "@/i18n";
+import { useAppStore } from "@/store/appStore";
+import type { BrainDepth, KnowledgeConcept, MemoryFragment } from "./types";
+
+export function BrainOverviewPanel({
+  memories,
+  concepts,
+  onOpenDepth,
+}: {
+  memories: MemoryFragment[];
+  concepts: KnowledgeConcept[];
+  onOpenDepth: (depth: BrainDepth) => void;
+}) {
+  const language = useAppStore((state) => state.language);
+  const recent = memories.slice(0, 3);
+  const older = memories.slice(3, 6);
+  const topics = concepts.slice(0, 4);
+
+  return (
+    <section className="brain-overview-panel" aria-label={t(language, "brain.aria.overview")}>
+      <div className="brain-overview-head">
+        <div>
+          <span>{t(language, "brain.overview.kicker")}</span>
+          <strong>{t(language, "brain.overview.title")}</strong>
+        </div>
+        <button type="button" onClick={() => onOpenDepth(5)}>{t(language, "brain.overview.graph")}</button>
+      </div>
+      <div className="brain-overview-grid">
+        <BrainOverviewColumn
+          title={t(language, "brain.overview.recent")}
+          empty={t(language, "brain.overview.recentEmpty")}
+          items={recent.map((memory) => memory.title)}
+          onOpen={() => onOpenDepth(2)}
+        />
+        <BrainOverviewColumn
+          title={t(language, "brain.overview.older")}
+          empty={t(language, "brain.overview.olderEmpty")}
+          items={older.map((memory) => memory.title)}
+          onOpen={() => onOpenDepth(2)}
+        />
+        <BrainOverviewColumn
+          title={t(language, "brain.overview.topics")}
+          empty={t(language, "brain.overview.topicsEmpty")}
+          items={topics.map((concept) => concept.label)}
+          onOpen={() => onOpenDepth(3)}
+        />
+      </div>
+    </section>
+  );
+}
+
+function BrainOverviewColumn({
+  title,
+  empty,
+  items,
+  onOpen,
+}: {
+  title: string;
+  empty: string;
+  items: string[];
+  onOpen: () => void;
+}) {
+  return (
+    <button type="button" className="brain-overview-column" onClick={onOpen}>
+      <span>{title}</span>
+      {items.length ? (
+        items.slice(0, 3).map((item) => <strong key={item}>{item}</strong>)
+      ) : (
+        <em>{empty}</em>
+      )}
+    </button>
+  );
+}