feat: implement micro learning generation service with cached LLM content delivery and UI components

src/components/micro_learning/MicroLearningContainer.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import ConceptExplainer from './ConceptExplainer';
 import ScenarioQuiz from './ScenarioQuiz';
 import FlashcardSet from './FlashcardSet';
-import ReflectionPrompt from './ReflectionPrompt';
+
 import { useMicroLearningCompletions } from '../../hooks/useMicroLearningCompletions';
 
 export default function MicroLearningContainer({ microLearning, sessionWeek, onCompletedSuccessfully }) {
@@ -42,8 +42,7 @@ export default function MicroLearningContainer({ microLearning, sessionWeek, onC
         return <ScenarioQuiz {...props} />;
       case 'flashcard_set':
         return <FlashcardSet {...props} />;
-      case 'reflection_prompt':
-        return <ReflectionPrompt {...props} />;
+
       default:
         return <div>Unknown micro learning type.</div>;
     }

src/components/micro_learning/MicroLearningSelector.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Loader, BookOpen, Target, Layers, MessageCircle } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { Loader, BookOpen, Target, Layers, CheckCircle } from 'lucide-react';
 import { useMicroLearnings } from '../../hooks/useMicroLearnings';
 import MicroLearningContainer from './MicroLearningContainer';
 import Card from '../ui/Card';
@@ -23,19 +23,28 @@ const TYPES = [
     description: 'Test your recall with a set of quick flashcards.',
     icon: Layers,
   },
-  {
-    key: 'reflection_prompt',
-    label: 'Reflection Prompt',
-    description: 'Connect the topic to your own professional experience.',
-    icon: MessageCircle,
-  },
 ];
 
 export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCompleted }) {
-  const { getOrGenerate } = useMicroLearnings();
+  const { getOrGenerate, checkExistingTypes } = useMicroLearnings();
   const [selectedML, setSelectedML] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [existingTypes, setExistingTypes] = useState({});
+
+  // Check which types already have generated content
+  useEffect(() => {
+    if (!topicId) return;
+    let cancelled = false;
+
+    checkExistingTypes(topicId).then((result) => {
+      if (!cancelled) setExistingTypes(result);
+    }).catch((err) => {
+      console.warn('[MicroLearningSelector] Could not check existing types:', err);
+    });
+
+    return () => { cancelled = true; };
+  }, [topicId]);
 
   const handleSelection = async (type) => {
     setLoading(true);
@@ -43,6 +52,8 @@ export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCom
     try {
       const record = await getOrGenerate(topicId, type);
       setSelectedML(record);
+      // Mark this type as existing after successful generation
+      setExistingTypes(prev => ({ ...prev, [type]: true }));
     } catch (err) {
       console.error('[MicroLearningSelector] Generation failed:', err);
       setError(err.message || 'Failed to generate content. Please try again.');
@@ -97,7 +108,7 @@ export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCom
     );
   }
 
-  // Type selection menu — always shows all 4 types
+  // Type selection menu
   return (
     <Card className="w-full">
       <div className="mb-6 pb-4 border-b border-bg-warm">
@@ -105,21 +116,30 @@ export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCom
         <p className="text-sm text-fg-muted mt-1">Select how you want to engage with this topic.</p>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {TYPES.map(({ key, label, description, icon: Icon }) => (
-          <div
-            key={key}
-            className="cursor-pointer border-2 border-bg-warm rounded-[var(--r-md)] p-6 hover:border-teal hover:bg-teal/5 transition-all group"
-            onClick={() => handleSelection(key)}
-          >
-            <div className="flex items-center gap-3 mb-3">
-              <div className="w-10 h-10 rounded-full bg-teal/10 flex items-center justify-center flex-shrink-0 group-hover:bg-teal/20 transition-colors">
-                <Icon size={20} className="text-teal" />
+        {TYPES.map(({ key, label, description, icon: Icon }) => {
+          const exists = existingTypes[key];
+          return (
+            <div
+              key={key}
+              className="cursor-pointer border-2 border-bg-warm rounded-[var(--r-md)] p-6 hover:border-teal hover:bg-teal/5 transition-all group relative"
+              onClick={() => handleSelection(key)}
+            >
+              {exists && (
+                <div className="absolute top-3 right-3 flex items-center gap-1.5 text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full text-xs font-medium">
+                  <CheckCircle size={14} />
+                  <span>Generated</span>
+                </div>
+              )}
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-10 h-10 rounded-full bg-teal/10 flex items-center justify-center flex-shrink-0 group-hover:bg-teal/20 transition-colors">
+                  <Icon size={20} className="text-teal" />
+                </div>
+                <h3 className="font-bold text-lg text-teal">{label}</h3>
               </div>
-              <h3 className="font-bold text-lg text-teal">{label}</h3>
+              <p className="text-sm text-fg-muted">{description}</p>
             </div>
-            <p className="text-sm text-fg-muted">{description}</p>
-          </div>
-        ))}
+          );
+        })}
       </div>
     </Card>
   );