@almadar/cli 0.3.2 → 0.3.3

package/shells/typescript-shell/packages/client/src/clients/kflow/templates/ConceptDetailTemplate.tsx

@@ -0,0 +1,266 @@
+/**
+ * ConceptDetailTemplate - Template for displaying concept details with lesson and practice
+ *
+ * Almadar Entity Binding:
+ * - Data flows through `entity` prop from Almadar state
+ * - User interactions emit events via useEventBus()
+ *
+ * Events Emitted:
+ * - UI:START_LESSON - When starting the lesson
+ * - UI:START_PRACTICE - When starting practice/flashcards
+ * - UI:NAVIGATE_PREREQUISITE - When clicking a prerequisite
+ * - UI:NAVIGATE_PARENT - When clicking a parent concept
+ * - UI:BACK - When navigating back
+ */
+
+import React, { useState } from 'react';
+import {
+  ArrowLeft,
+  BookOpen,
+  Brain,
+  ChevronRight,
+  Layers,
+  PlayCircle,
+} from 'lucide-react';
+import { Box } from '../../../components/atoms/Box';
+import { VStack } from '../../../components/atoms/Stack';
+import { HStack } from '../../../components/atoms/Stack';
+import { Card } from '../../../components/molecules/Card';
+import { SegmentRenderer } from '../organisms/SegmentRenderer';
+import { FlashCardStack } from '../organisms/FlashCardStack';
+import { ConceptMetaTags } from '../molecules/ConceptMetaTags';
+import { LearningGoalDisplay } from '../molecules/LearningGoalDisplay';
+import { useEventBus } from '../../../hooks/useEventBus';
+import type { Segment } from '../utils/parseLessonSegments';
+import type { FlashCardEntity } from '../organisms/FlashCard';
+
+export interface ConceptEntity {
+  id: string;
+  name: string;
+  description?: string;
+  layer?: number;
+  isSeed?: boolean;
+  prerequisites?: string[];
+  parents?: string[];
+  learningGoal?: string;
+  hasLesson?: boolean;
+  lessonSegments?: Segment[];
+  flashcards?: FlashCardEntity[];
+  progress?: number;
+}
+
+export interface ConceptDetailTemplateProps {
+  /** Concept entity data */
+  entity: ConceptEntity;
+  /** Graph ID for context */
+  graphId?: string;
+  /** Show back button */
+  showBack?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const ConceptDetailTemplate: React.FC<ConceptDetailTemplateProps> = ({
+  entity,
+  graphId,
+  showBack = true,
+  className = '',
+}) => {
+  const { emit } = useEventBus();
+  const [activeTab, setActiveTab] = useState<'overview' | 'lesson' | 'practice'>('overview');
+
+  const handleBack = () => {
+    emit('UI:BACK', { fromConcept: entity.id });
+  };
+
+  const handleStartLesson = () => {
+    setActiveTab('lesson');
+    emit('UI:START_LESSON', { conceptId: entity.id });
+  };
+
+  const handleStartPractice = () => {
+    setActiveTab('practice');
+    emit('UI:START_PRACTICE', { conceptId: entity.id });
+  };
+
+  const handlePrerequisiteClick = (prereq: string) => {
+    emit('UI:NAVIGATE_PREREQUISITE', { prerequisiteName: prereq, fromConcept: entity.id });
+  };
+
+  return (
+    <Box className={`min-h-screen bg-gray-50 ${className}`}>
+      {/* Header */}
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+        <HStack justify="between" align="center" className="max-w-4xl mx-auto px-4 py-4">
+          {showBack && (
+            <button
+              onClick={handleBack}
+              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded flex items-center gap-1"
+            >
+              <ArrowLeft size={20} />
+              <span className="text-sm">Back</span>
+            </button>
+          )}
+          <HStack gap="sm">
+            {entity.layer !== undefined && (
+              <span className="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-700 rounded flex items-center gap-1">
+                <Layers size={12} />
+                Layer {entity.layer}
+              </span>
+            )}
+          </HStack>
+        </HStack>
+
+        {/* Tabs */}
+        <HStack gap="none" className="max-w-4xl mx-auto px-4 border-t border-gray-100">
+          {['overview', 'lesson', 'practice'].map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab as typeof activeTab)}
+              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === tab
+                  ? 'border-indigo-500 text-indigo-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              {tab.charAt(0).toUpperCase() + tab.slice(1)}
+            </button>
+          ))}
+        </HStack>
+      </header>
+
+      {/* Content */}
+      <main className="max-w-4xl mx-auto px-4 py-6">
+        {activeTab === 'overview' && (
+          <VStack gap="lg">
+            {/* Title and description */}
+            <VStack gap="sm">
+              <h1 className="text-3xl font-bold text-gray-900">{entity.name}</h1>
+              {entity.description && (
+                <p className="text-gray-600 text-lg">{entity.description}</p>
+              )}
+            </VStack>
+
+            {/* Meta tags */}
+            <ConceptMetaTags
+              layer={entity.layer}
+              isSeed={entity.isSeed}
+              parents={entity.parents || []}
+            />
+
+            {/* Learning goal */}
+            {entity.learningGoal && (
+              <LearningGoalDisplay
+                goal={entity.learningGoal}
+                layerNumber={entity.layer || 0}
+                graphId={graphId}
+              />
+            )}
+
+            {/* Prerequisites */}
+            {entity.prerequisites && entity.prerequisites.length > 0 && (
+              <Card>
+                <VStack gap="sm">
+                  <span className="font-semibold text-gray-900">Prerequisites</span>
+                  <VStack gap="xs">
+                    {entity.prerequisites.map((prereq) => (
+                      <button
+                        key={prereq}
+                        onClick={() => handlePrerequisiteClick(prereq)}
+                        className="text-left px-3 py-2 bg-gray-50 rounded hover:bg-gray-100 text-gray-700 flex items-center justify-between"
+                      >
+                        <span>{prereq}</span>
+                        <ChevronRight size={16} className="text-gray-400" />
+                      </button>
+                    ))}
+                  </VStack>
+                </VStack>
+              </Card>
+            )}
+
+            {/* Progress */}
+            {entity.progress !== undefined && (
+              <Card>
+                <VStack gap="sm">
+                  <HStack justify="between" align="center">
+                    <span className="font-semibold text-gray-900">Progress</span>
+                    <span className="text-sm text-gray-500">{entity.progress}%</span>
+                  </HStack>
+                  <Box className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+                    <Box
+                      className="h-full bg-indigo-500 transition-all"
+                      style={{ width: `${entity.progress}%` }}
+                    />
+                  </Box>
+                </VStack>
+              </Card>
+            )}
+
+            {/* Action buttons */}
+            <HStack gap="md" wrap>
+              {entity.hasLesson && (
+                <button
+                  onClick={handleStartLesson}
+                  className="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 flex items-center gap-2"
+                >
+                  <BookOpen size={20} />
+                  Start Lesson
+                </button>
+              )}
+              {entity.flashcards && entity.flashcards.length > 0 && (
+                <button
+                  onClick={handleStartPractice}
+                  className="px-6 py-3 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 flex items-center gap-2"
+                >
+                  <Brain size={20} />
+                  Practice ({entity.flashcards.length} cards)
+                </button>
+              )}
+            </HStack>
+          </VStack>
+        )}
+
+        {activeTab === 'lesson' && (
+          <VStack gap="lg">
+            {entity.lessonSegments && entity.lessonSegments.length > 0 ? (
+              <SegmentRenderer segments={entity.lessonSegments} />
+            ) : (
+              <Card>
+                <VStack gap="md" align="center" className="py-12">
+                  <BookOpen size={48} className="text-gray-300" />
+                  <span className="text-gray-500">No lesson content available</span>
+                  {!entity.hasLesson && (
+                    <button
+                      onClick={() => emit('UI:GENERATE_LESSON', { conceptId: entity.id })}
+                      className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 flex items-center gap-2"
+                    >
+                      <PlayCircle size={16} />
+                      Generate Lesson
+                    </button>
+                  )}
+                </VStack>
+              </Card>
+            )}
+          </VStack>
+        )}
+
+        {activeTab === 'practice' && (
+          <VStack gap="lg">
+            {entity.flashcards && entity.flashcards.length > 0 ? (
+              <FlashCardStack cards={entity.flashcards} />
+            ) : (
+              <Card>
+                <VStack gap="md" align="center" className="py-12">
+                  <Brain size={48} className="text-gray-300" />
+                  <span className="text-gray-500">No practice cards available</span>
+                </VStack>
+              </Card>
+            )}
+          </VStack>
+        )}
+      </main>
+    </Box>
+  );
+};
+
+ConceptDetailTemplate.displayName = 'ConceptDetailTemplate';

package/shells/typescript-shell/packages/client/src/clients/kflow/templates/KnowledgeGraphTemplate.stories.tsx

@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { KnowledgeGraphTemplate } from "./KnowledgeGraphTemplate";
+
+const meta: Meta<typeof KnowledgeGraphTemplate> = {
+  title: "KFlow/Templates/KnowledgeGraphTemplate",
+  component: KnowledgeGraphTemplate,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof KnowledgeGraphTemplate>;
+
+const sampleNodes = [
+  {
+    id: "1",
+    type: "topic",
+    properties: { label: "Machine Learning", layer: 0 },
+  },
+  {
+    id: "2",
+    type: "concept",
+    properties: { label: "Supervised Learning", layer: 1 },
+  },
+  {
+    id: "3",
+    type: "concept",
+    properties: { label: "Unsupervised Learning", layer: 1 },
+  },
+  {
+    id: "4",
+    type: "concept",
+    properties: { label: "Neural Networks", layer: 2 },
+  },
+  {
+    id: "5",
+    type: "concept",
+    properties: { label: "Decision Trees", layer: 2 },
+  },
+  { id: "6", type: "concept", properties: { label: "Clustering", layer: 2 } },
+  { id: "7", type: "topic", properties: { label: "Deep Learning", layer: 3 } },
+  {
+    id: "8",
+    type: "skill",
+    properties: { label: "Backpropagation", layer: 3 },
+  },
+];
+
+const sampleLinks = [
+  { source: "1", target: "2", type: "related" },
+  { source: "1", target: "3", type: "related" },
+  { source: "2", target: "4", type: "prerequisite" },
+  { source: "2", target: "5", type: "prerequisite" },
+  { source: "3", target: "6", type: "prerequisite" },
+  { source: "4", target: "7", type: "related" },
+  { source: "4", target: "8", type: "related" },
+];
+
+const sampleLayers = [
+  { number: 0, name: "Foundations", conceptCount: 1, completed: true },
+  { number: 1, name: "Core Concepts", conceptCount: 2, completed: true },
+  { number: 2, name: "Techniques", conceptCount: 3, completed: false },
+  { number: 3, name: "Advanced", conceptCount: 2, completed: false },
+];
+
+const sampleConcepts = [
+  {
+    id: "4",
+    name: "Neural Networks",
+    description: "Computational models inspired by biological neural networks.",
+    layer: 2,
+    hasLesson: true,
+    progress: 60,
+  },
+  {
+    id: "5",
+    name: "Decision Trees",
+    description: "A tree-structured model for classification and regression.",
+    layer: 2,
+    hasLesson: true,
+    progress: 100,
+    isCompleted: true,
+  },
+  {
+    id: "6",
+    name: "Clustering",
+    description: "Grouping similar data points together.",
+    layer: 2,
+    hasLesson: false,
+    progress: 0,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    entity: {
+      id: "graph-1",
+      title: "Machine Learning Fundamentals",
+      description: "A comprehensive knowledge graph covering ML concepts.",
+      nodes: sampleNodes,
+      links: sampleLinks,
+      layers: sampleLayers,
+      currentLayer: 2,
+      concepts: sampleConcepts,
+      learningGoal: "Master the fundamental techniques of machine learning.",
+    },
+  },
+};
+
+export const ListView: Story = {
+  args: {
+    entity: {
+      id: "graph-2",
+      title: "Deep Learning Course",
+      nodes: sampleNodes,
+      links: sampleLinks,
+      layers: sampleLayers,
+      currentLayer: 2,
+      concepts: sampleConcepts,
+    },
+    defaultView: "list",
+  },
+};
+
+export const NoLegend: Story = {
+  args: {
+    entity: {
+      id: "graph-3",
+      title: "Python Programming",
+      nodes: sampleNodes.slice(0, 4),
+      links: sampleLinks.slice(0, 3),
+      layers: sampleLayers.slice(0, 2),
+      currentLayer: 1,
+    },
+    showLegend: false,
+  },
+};
+
+export const NoLayerNav: Story = {
+  args: {
+    entity: {
+      id: "graph-4",
+      title: "Single Layer Graph",
+      nodes: sampleNodes.filter(
+        (n) => n.properties.layer === 0 || n.properties.layer === 1,
+      ),
+      links: sampleLinks.slice(0, 2),
+      layers: [{ number: 0, name: "All Concepts", conceptCount: 3 }],
+      currentLayer: 0,
+    },
+    showLayerNav: false,
+  },
+};
+
+export const EmptyLayer: Story = {
+  args: {
+    entity: {
+      id: "graph-5",
+      title: "Data Science Path",
+      nodes: sampleNodes,
+      links: sampleLinks,
+      layers: [...sampleLayers, { number: 4, name: "Expert", conceptCount: 0 }],
+      currentLayer: 4,
+      concepts: [],
+    },
+    defaultView: "list",
+  },
+};
+
+export const LargeGraph: Story = {
+  args: {
+    entity: {
+      id: "graph-6",
+      title: "Complete AI Curriculum",
+      description:
+        "An extensive knowledge graph covering all aspects of artificial intelligence.",
+      nodes: [
+        ...sampleNodes,
+        { id: "9", type: "concept", properties: { label: "CNNs", layer: 4 } },
+        { id: "10", type: "concept", properties: { label: "RNNs", layer: 4 } },
+        {
+          id: "11",
+          type: "concept",
+          properties: { label: "Transformers", layer: 4 },
+        },
+        { id: "12", type: "concept", properties: { label: "GANs", layer: 4 } },
+        {
+          id: "13",
+          type: "topic",
+          properties: { label: "Reinforcement Learning", layer: 3 },
+        },
+        { id: "14", type: "topic", properties: { label: "NLP", layer: 3 } },
+      ],
+      links: [
+        ...sampleLinks,
+        { source: "7", target: "9", type: "related" },
+        { source: "7", target: "10", type: "related" },
+        { source: "7", target: "11", type: "related" },
+        { source: "7", target: "12", type: "related" },
+        { source: "1", target: "13", type: "related" },
+        { source: "1", target: "14", type: "related" },
+        { source: "13", target: "14", type: "related" },
+      ],
+      layers: [
+        ...sampleLayers,
+        { number: 4, name: "Architectures", conceptCount: 4 },
+      ],
+      currentLayer: 0,
+      learningGoal:
+        "Become proficient in all major areas of artificial intelligence.",
+    },
+  },
+};