subsection und section hinzugefügt

math-tutor/frontend/src/components/Retrieval/DocPanel.tsx

@@ -19,7 +19,10 @@ export type RetrievedDoc = {
 };
 
 type DocPanelProps = {
-  docs: RetrievedDoc[];
+  directChildren: RetrievedDoc[];
+  indirectChildren: RetrievedDoc[];
+  subsections: RetrievedDoc[];
+  sections: RetrievedDoc[];
   isLoading?: boolean;
   error?: string | null;
   onCiteDoc?: (uid: string) => void;
@@ -63,32 +66,62 @@ const buildSnippet = (markdown: string) => {
   return `${trimmed.slice(0, 240)}...`;
 };
 
+const renderGroup = (
+  title: string,
+  docs: RetrievedDoc[],
+  onCiteDoc?: (uid: string) => void,
+  onInspectDoc?: (doc: RetrievedDoc) => void
+) => {
+  if (docs.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="retrieval-group">
+      <div className="retrieval-group-title">{title}</div>
+      {docs.map((doc) => (
+        <DocCard
+          key={doc.uid}
+          title={buildTitle(doc)}
+          subtitle={buildSubtitle(doc)}
+          snippetMarkdown={buildSnippet(doc.markdown)}
+          score={doc.score}
+          onCite={onCiteDoc ? () => onCiteDoc(doc.uid) : undefined}
+          onInspect={onInspectDoc ? () => onInspectDoc(doc) : undefined}
+        />
+      ))}
+    </div>
+  );
+};
+
 export default function DocPanel({
-  docs,
+  directChildren,
+  indirectChildren,
+  subsections,
+  sections,
   isLoading,
   error,
   onCiteDoc,
   onInspectDoc,
 }: DocPanelProps) {
+  const total =
+    directChildren.length +
+    indirectChildren.length +
+    subsections.length +
+    sections.length;
+
   return (
     <div className="retrieval-panel">
       <div className="retrieval-title">Retrieved Notes</div>
       {isLoading ? <div className="retrieval-state">Loading...</div> : null}
       {error ? <div className="retrieval-state error">{error}</div> : null}
-      {!isLoading && !error && docs.length === 0 ? (
+      {!isLoading && !error && total === 0 ? (
         <div className="retrieval-state">No results yet.</div>
       ) : null}
-      {docs.map((doc) => (
-        <DocCard
-          key={doc.uid}
-          title={buildTitle(doc)}
-          subtitle={buildSubtitle(doc)}
-          snippetMarkdown={buildSnippet(doc.markdown)}
-          score={doc.score}
-          onCite={onCiteDoc ? () => onCiteDoc(doc.uid) : undefined}
-          onInspect={onInspectDoc ? () => onInspectDoc(doc) : undefined}
-        />
-      ))}
+      {renderGroup("Direct children", directChildren, onCiteDoc, onInspectDoc)}
+      {renderGroup("Indirect children", indirectChildren, onCiteDoc, onInspectDoc)}
+      {renderGroup("Subsection summary", subsections, onCiteDoc, onInspectDoc)}
+      {renderGroup("Section summary", sections, onCiteDoc, onInspectDoc)}
     </div>
   );
 }

math-tutor/frontend/src/pages/App.tsx

@@ -19,7 +19,10 @@ export default function App() {
   const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
   const [draft, setDraft] = useState("");
   const [isCanvasVisible, setIsCanvasVisible] = useState(false);
-  const [retrievedDocs, setRetrievedDocs] = useState<RetrievedDoc[]>([]);
+  const [directChildren, setDirectChildren] = useState<RetrievedDoc[]>([]);
+  const [indirectChildren, setIndirectChildren] = useState<RetrievedDoc[]>([]);
+  const [subsections, setSubsections] = useState<RetrievedDoc[]>([]);
+  const [sections, setSections] = useState<RetrievedDoc[]>([]);
   const [retrievalLoading, setRetrievalLoading] = useState(false);
   const [retrievalError, setRetrievalError] = useState<string | null>(null);
 
@@ -55,8 +58,10 @@ export default function App() {
           throw new Error(`Retrieval failed: ${res.status}`);
         }
         const payload = await res.json();
-        const docs: RetrievedDoc[] = payload.children || [];
-        setRetrievedDocs(docs);
+        setDirectChildren(payload.children_direct || []);
+        setIndirectChildren(payload.children_expanded || []);
+        setSubsections(payload.subsections || []);
+        setSections(payload.sections || []);
       });
 
       const response = await fetch("http://localhost:8000/api/chat", {
@@ -250,7 +255,10 @@ export default function App() {
 
         <aside className="retrieval-column">
           <DocPanel
-            docs={retrievedDocs}
+            directChildren={directChildren}
+            indirectChildren={indirectChildren}
+            subsections={subsections}
+            sections={sections}
             isLoading={retrievalLoading}
             error={retrievalError}
             onCiteDoc={handleCiteDoc}

math-tutor/frontend/src/styles/theme.css

@@ -298,6 +298,21 @@ body {
   font-size: 12px;
 }
 
+.retrieval-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.retrieval-group-title {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #6f675d;
+  margin-top: 6px;
+}
+
 .retrieval-state.error {
   background: #f3d9d6;
   color: #8a3b2f;