ltcai 6.7.0 → 7.1.0

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

@@ -1,8 +1,27 @@
 import * as React from "react";
-import { Cpu, DatabaseZap, FileUp, Search, Settings, ShieldCheck } from "lucide-react";
+import { Cpu, DatabaseZap, FileText, FileUp, FolderPlus, Globe2, Loader2, Repeat2, Search, Settings, ShieldCheck, Sparkles } from "lucide-react";
+
+const INGESTION_TYPE_LABEL_KEY: Record<IngestionSourceType, string> = {
+  file: "brain.ingest.type.file",
+  folder: "brain.ingest.type.folder",
+  note: "brain.ingest.type.note",
+  web: "brain.ingest.type.web",
+};
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { t, type Language } from "@/i18n";
-import type { BrainDepth, BrainProof, BrainReadiness, KnowledgeConcept, MemoryFragment, Message } from "./types";
+import {
+  INGESTION_STAGE_ORDER,
+  type BrainDepth,
+  type BrainProof,
+  type BrainReadiness,
+  type EmergenceEvent,
+  type IngestionPipelineStage,
+  type IngestionSourceType,
+  type IngestionState,
+  type KnowledgeConcept,
+  type MemoryFragment,
+  type Message,
+} from "./types";
 import { BrainCarePanel } from "./BrainCarePanel";
 import { BrainComposer } from "./BrainComposer";
 import { BrainOverviewPanel } from "./BrainOverviewPanel";
@@ -14,6 +33,8 @@ export function BrainConversation({
   messages,
   starterPrompts,
   memoryFeedback,
+  ingestionStates,
+  emergenceEvents,
   draft,
   streaming,
   imageData,
@@ -27,6 +48,10 @@ export function BrainConversation({
   onDraftChange,
   onImageDataChange,
   onUploadDocument,
+  onConnectFolder,
+  onIngestNote,
+  onIngestWeb,
+  onVerifyModelContinuity,
   onSend,
 }: {
   language: Language;
@@ -35,6 +60,8 @@ export function BrainConversation({
   messages: Message[];
   starterPrompts: string[];
   memoryFeedback: string | null;
+  ingestionStates: Record<IngestionSourceType, IngestionState | null>;
+  emergenceEvents: EmergenceEvent[];
   draft: string;
   streaming: boolean;
   imageData: string | null;
@@ -48,6 +75,10 @@ export function BrainConversation({
   onDraftChange: (value: string) => void;
   onImageDataChange: (value: string | null) => void;
   onUploadDocument: (file: File) => void;
+  onConnectFolder: (path: string) => void;
+  onIngestNote: (note: string) => void;
+  onIngestWeb: (url: string) => void;
+  onVerifyModelContinuity: () => void;
   onSend: () => void;
 }) {
   return (
@@ -89,6 +120,16 @@ export function BrainConversation({
       </div>
 
       <div ref={streamRef} className="brain-stream">
+        <BrainIngestionPanel
+          language={language}
+          uploadingDocument={uploadingDocument}
+          ingestionStates={ingestionStates}
+          onUploadDocument={onUploadDocument}
+          onConnectFolder={onConnectFolder}
+          onIngestNote={onIngestNote}
+          onIngestWeb={onIngestWeb}
+        />
+        <IngestionTimelineSection language={language} emergenceEvents={emergenceEvents} />
         <BrainOverviewPanel
           memories={memories}
           concepts={concepts}
@@ -96,6 +137,12 @@ export function BrainConversation({
           proof={proof}
           onOpenDepth={onOpenDepth}
         />
+        <ModelContinuityDemo
+          language={language}
+          proof={proof}
+          modelName={modelName}
+          onVerify={onVerifyModelContinuity}
+        />
         {messages.length === 0 ? (
           <BrainEmptyState
             language={language}
@@ -105,11 +152,21 @@ export function BrainConversation({
             onUploadDocument={onUploadDocument}
           />
         ) : (
-          messages.map((message, index) => (
-            <div key={`${message.role}-${index}`} className={`brain-message ${message.role}`}>
-              <div className="brain-message-bubble">{message.content}</div>
-            </div>
-          ))
+          messages.map((message, index) => {
+            const messageId = `brain-msg-${index}`;
+            const proof = message.role === "assistant" ? message.proof : undefined;
+            return (
+              <div key={`${message.role}-${index}`} className={`brain-message ${message.role}`}>
+                <div className="brain-message-bubble">
+                  {message.content}
+                  {proof && proof.citations.length ? (
+                    <InlineCitationMarkers language={language} proof={proof} messageId={messageId} />
+                  ) : null}
+                </div>
+                {proof ? <AnswerProofCard language={language} proof={proof} messageId={messageId} /> : null}
+              </div>
+            );
+          })
         )}
       </div>
 
@@ -138,6 +195,324 @@ export function BrainConversation({
   );
 }
 
+function BrainIngestionPanel({
+  language,
+  uploadingDocument,
+  ingestionStates,
+  onUploadDocument,
+  onConnectFolder,
+  onIngestNote,
+  onIngestWeb,
+}: {
+  language: Language;
+  uploadingDocument: boolean;
+  ingestionStates: Record<IngestionSourceType, IngestionState | null>;
+  onUploadDocument: (file: File) => void;
+  onConnectFolder: (path: string) => void;
+  onIngestNote: (note: string) => void;
+  onIngestWeb: (url: string) => void;
+}) {
+  const [folderPath, setFolderPath] = React.useState("");
+  const [note, setNote] = React.useState("");
+  const [url, setUrl] = React.useState("");
+
+  return (
+    <section className="brain-ingestion-panel" aria-label={t(language, "brain.ingest.aria")}>
+      <div className="brain-ingestion-head">
+        <span>{t(language, "brain.ingest.kicker")}</span>
+        <strong>{t(language, "brain.ingest.title")}</strong>
+      </div>
+      <div className="brain-ingestion-grid">
+        <label
+          className={`brain-ingest-tile is-primary ${tileStateClass(ingestionStates.file)} ${uploadingDocument ? "is-disabled" : ""}`}
+        >
+          <FileUp className="h-4 w-4" />
+          <span>{uploadingDocument ? t(language, "brain.upload.uploading") : t(language, "brain.ingest.file")}</span>
+          <small>{t(language, "brain.ingest.file.detail")}</small>
+          <input
+            type="file"
+            accept=".pdf,.docx,.xlsx,.pptx,.txt,.md,.csv,application/pdf,text/plain,text/markdown,text/csv"
+            className="sr-only"
+            disabled={uploadingDocument}
+            onChange={(event) => {
+              const file = event.target.files?.[0];
+              event.currentTarget.value = "";
+              if (file) onUploadDocument(file);
+            }}
+          />
+          <IngestionStageTrack language={language} state={ingestionStates.file} ctaKey="brain.ingest.cta.file" />
+        </label>
+        <form
+          className={`brain-ingest-tile ${tileStateClass(ingestionStates.folder)}`}
+          onSubmit={(event) => {
+            event.preventDefault();
+            onConnectFolder(folderPath);
+            setFolderPath("");
+          }}
+        >
+          <FolderPlus className="h-4 w-4" />
+          <span>{t(language, "brain.ingest.folder")}</span>
+          <input value={folderPath} onChange={(event) => setFolderPath(event.target.value)} placeholder={t(language, "brain.ingest.folder.placeholder")} />
+          <IngestionStageTrack language={language} state={ingestionStates.folder} ctaKey="brain.ingest.cta.folder" />
+        </form>
+        <form
+          className={`brain-ingest-tile ${tileStateClass(ingestionStates.note)}`}
+          onSubmit={(event) => {
+            event.preventDefault();
+            onIngestNote(note);
+            setNote("");
+          }}
+        >
+          <FileText className="h-4 w-4" />
+          <span>{t(language, "brain.ingest.note")}</span>
+          <input value={note} onChange={(event) => setNote(event.target.value)} placeholder={t(language, "brain.ingest.note.placeholder")} />
+          <IngestionStageTrack language={language} state={ingestionStates.note} ctaKey="brain.ingest.cta.note" />
+        </form>
+        <form
+          className={`brain-ingest-tile ${tileStateClass(ingestionStates.web)}`}
+          onSubmit={(event) => {
+            event.preventDefault();
+            onIngestWeb(url);
+            setUrl("");
+          }}
+        >
+          <Globe2 className="h-4 w-4" />
+          <span>{t(language, "brain.ingest.web")}</span>
+          <input value={url} onChange={(event) => setUrl(event.target.value)} placeholder={t(language, "brain.ingest.web.placeholder")} />
+          <IngestionStageTrack language={language} state={ingestionStates.web} ctaKey="brain.ingest.cta.web" />
+        </form>
+      </div>
+    </section>
+  );
+}
+
+function tileStateClass(state: IngestionState | null): string {
+  if (!state) return "";
+  if (state.stage === "error") return "is-failed";
+  if (state.stage === "complete") return "is-emerged";
+  return "is-ingesting";
+}
+
+const STAGE_HINT_KEY: Record<IngestionPipelineStage, string> = {
+  preparing: "brain.ingest.stage.preparing.hint",
+  parsing: "brain.ingest.stage.parsing.hint",
+  embedding: "brain.ingest.stage.embedding.hint",
+  indexing: "brain.ingest.stage.indexing.hint",
+  complete: "brain.ingest.stage.complete.hint",
+  error: "brain.ingest.stage.error",
+};
+
+// Progressive disclosure of the pipeline: collect -> parse -> embed -> memorize.
+function IngestionStageTrack({
+  language,
+  state,
+  ctaKey,
+}: {
+  language: Language;
+  state: IngestionState | null;
+  ctaKey: string;
+}) {
+  if (!state) {
+    return <small className="brain-ingest-cta">{t(language, ctaKey)}</small>;
+  }
+
+  const activeIndex = INGESTION_STAGE_ORDER.indexOf(state.stage);
+  const isError = state.stage === "error";
+  const isComplete = state.stage === "complete";
+  const hasEmergence = state.newMemories > 0 || state.newEntities > 0;
+
+  return (
+    <div
+      className="brain-ingest-progress"
+      role="status"
+      aria-live="polite"
+      aria-label={t(language, "brain.ingest.progress.aria", { label: state.label })}
+    >
+      <div className="brain-ingest-stage-badges" aria-hidden="true">
+        {INGESTION_STAGE_ORDER.filter((stage) => stage !== "complete").map((stage) => {
+          const index = INGESTION_STAGE_ORDER.indexOf(stage);
+          const done = !isError && !isComplete && index < activeIndex;
+          const active = !isError && !isComplete && index === activeIndex;
+          const passed = isComplete;
+          const cls = isError
+            ? "is-failed"
+            : passed || done
+              ? "is-done"
+              : active
+                ? "is-active"
+                : "";
+          return (
+            <span key={stage} className={`brain-ingest-stage-badge ${cls}`}>
+              {(active || (isError && index === activeIndex)) ? <Loader2 className="h-3 w-3 brain-ingest-spin" /> : null}
+              {t(language, `brain.ingest.stage.${stage}`)}
+            </span>
+          );
+        })}
+      </div>
+      <small className={`brain-ingest-stage-hint ${isError ? "is-failed" : isComplete ? "is-emerged" : ""}`}>
+        {isError
+          ? t(language, "brain.ingest.stage.error")
+          : isComplete
+            ? hasEmergence
+              ? t(language, "brain.ingest.result", { memories: state.newMemories, entities: state.newEntities })
+              : t(language, "brain.ingest.result.empty")
+            : t(language, STAGE_HINT_KEY[state.stage])}
+      </small>
+    </div>
+  );
+}
+
+function relativeTime(language: Language, at: number, now: number): string {
+  const diffMinutes = Math.floor((now - at) / 60000);
+  if (diffMinutes < 1) return t(language, "brain.timeline.justNow");
+  return t(language, "brain.timeline.minutesAgo", { count: diffMinutes });
+}
+
+function IngestionTimelineSection({
+  language,
+  emergenceEvents,
+}: {
+  language: Language;
+  emergenceEvents: EmergenceEvent[];
+}) {
+  // Re-read the clock on each render of the parent so relative labels stay fresh-enough.
+  const now = Date.now();
+  return (
+    <section
+      className="brain-emergence-timeline"
+      aria-label={t(language, "brain.timeline.aria")}
+      aria-live="polite"
+    >
+      <div className="brain-emergence-head">
+        <Sparkles className="h-3.5 w-3.5" />
+        <strong>{t(language, "brain.timeline.emergenceTitle")}</strong>
+        <span>{t(language, "brain.timeline.recent")}</span>
+      </div>
+      {emergenceEvents.length === 0 ? (
+        <p className="brain-emergence-empty">{t(language, "brain.timeline.empty")}</p>
+      ) : (
+        <ol className="brain-emergence-list">
+          {emergenceEvents.map((event) => (
+            <li key={event.id} className="brain-emergence-item">
+              <span className="brain-emergence-type">{t(language, INGESTION_TYPE_LABEL_KEY[event.sourceType])}</span>
+              <span className="brain-emergence-label">{event.label}</span>
+              <span className="brain-emergence-counts">
+                <strong>{t(language, "brain.timeline.newMemories", { count: event.newMemories })}</strong>
+                <strong>{t(language, "brain.timeline.newEntities", { count: event.newEntities })}</strong>
+              </span>
+              <time className="brain-emergence-at">{relativeTime(language, event.at, now)}</time>
+            </li>
+          ))}
+        </ol>
+      )}
+    </section>
+  );
+}
+
+function ModelContinuityDemo({
+  language,
+  proof,
+  modelName,
+  onVerify,
+}: {
+  language: Language;
+  proof: BrainProof;
+  modelName: string;
+  onVerify: () => void;
+}) {
+  return (
+    <section className="brain-model-demo" aria-label={t(language, "brain.modelDemo.aria")}>
+      <div>
+        <span>{t(language, "brain.modelDemo.kicker")}</span>
+        <strong>{proof.modelContinuity.proven ? t(language, "brain.modelDemo.proven") : t(language, "brain.modelDemo.pending")}</strong>
+        <small>{t(language, "brain.modelDemo.detail", { model: proof.modelContinuity.activeModel || modelName })}</small>
+      </div>
+      <button type="button" onClick={onVerify}>
+        <Repeat2 className="h-3.5 w-3.5" />
+        {t(language, "brain.modelDemo.verify")}
+      </button>
+      <button type="button" onClick={() => navigateHash("/models")}>
+        <Cpu className="h-3.5 w-3.5" />
+        {t(language, "brain.modelDemo.change")}
+      </button>
+    </section>
+  );
+}
+
+function citationDomId(messageId: string, citationId: string): string {
+  return `${messageId}-cite-${citationId}`;
+}
+
+// Inline, keyboard-focusable citation markers rendered next to the answer text.
+// Activating one moves focus to the matching row in the evidence card below.
+function InlineCitationMarkers({
+  language,
+  proof,
+  messageId,
+}: {
+  language: Language;
+  proof: NonNullable<Message["proof"]>;
+  messageId: string;
+}) {
+  const focusCitation = (citationId: string) => {
+    const target = document.getElementById(citationDomId(messageId, citationId));
+    if (target) {
+      target.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      target.focus();
+    }
+  };
+  return (
+    <span className="brain-inline-citations" aria-label={t(language, "brain.answerProof.citationsLabel", { count: proof.citations.length })}>
+      {proof.citations.map((citation, index) => (
+        <button
+          key={citation.id}
+          type="button"
+          className="brain-inline-citation"
+          aria-label={t(language, "brain.answerProof.marker", { index: index + 1 })}
+          aria-controls={citationDomId(messageId, citation.id)}
+          title={citation.title}
+          onClick={() => focusCitation(citation.id)}
+        >
+          {index + 1}
+        </button>
+      ))}
+    </span>
+  );
+}
+
+function AnswerProofCard({ language, proof, messageId }: { language: Language; proof: NonNullable<Message["proof"]>; messageId: string }) {
+  return (
+    <section className="brain-answer-proof" role="group" aria-label={t(language, "brain.answerProof.aria")}>
+      <div className="brain-answer-proof-head">
+        <span>{t(language, "brain.answerProof.title")}</span>
+        <strong>{proof.provenAcrossModels ? t(language, "brain.answerProof.modelProven", { model: proof.model }) : t(language, "brain.answerProof.modelPending", { model: proof.model })}</strong>
+        {proof.citations.length ? (
+          <small className="brain-answer-proof-count">{t(language, "brain.answerProof.citationsLabel", { count: proof.citations.length })}</small>
+        ) : null}
+      </div>
+      {proof.citations.length ? (
+        <ol>
+          {proof.citations.map((citation, index) => (
+            <li
+              key={citation.id}
+              id={citationDomId(messageId, citation.id)}
+              tabIndex={-1}
+              aria-label={t(language, "brain.answerProof.citationItem", { index: index + 1, title: citation.title })}
+            >
+              <span className="brain-answer-proof-index" aria-hidden="true">{index + 1}</span>
+              <span>{citation.source}</span>
+              <strong>{citation.title}</strong>
+              <small>{citation.snippet || proof.query}</small>
+            </li>
+          ))}
+        </ol>
+      ) : (
+        <small>{t(language, "brain.answerProof.empty")}</small>
+      )}
+    </section>
+  );
+}
+
 function BrainEmptyState({
   language,
   starterPrompts,