@almadar/cli 0.3.2 → 1.0.3

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

@@ -0,0 +1,302 @@
+/**
+ * KnowledgeGraphTemplate - Template for displaying a knowledge graph with layer navigation
+ *
+ * Almadar Entity Binding:
+ * - Data flows through `entity` prop from Almadar state
+ * - User interactions emit events via useEventBus()
+ *
+ * Events Emitted:
+ * - UI:SELECT_NODE - When a graph node is selected
+ * - UI:SELECT_LAYER - When a layer is selected
+ * - UI:TOGGLE_VIEW - When switching between graph and list view
+ */
+
+import React, { useState } from "react";
+import { Grid, Network, List as ListIcon } 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 {
+  ForceDirectedGraph,
+  GraphNode,
+  GraphRelationship,
+} from "../organisms/ForceDirectedGraph";
+import { ConceptCard, ConceptEntity } from "../organisms/ConceptCard";
+import { LayerNavigator, LayerInfo } from "../molecules/LayerNavigator";
+import {
+  GraphLegend,
+  LegendItem,
+  NODE_TYPE_COLORS,
+} from "../molecules/GraphLegend";
+import { LearningGoalDisplay } from "../molecules/LearningGoalDisplay";
+import { useEventBus } from "../../../hooks/useEventBus";
+
+export interface KnowledgeGraphEntity {
+  id: string;
+  title: string;
+  description?: string;
+  nodes: GraphNode[];
+  links: GraphRelationship[];
+  layers: LayerInfo[];
+  currentLayer: number;
+  concepts?: ConceptEntity[];
+  learningGoal?: string;
+}
+
+export interface KnowledgeGraphTemplateProps {
+  /** Knowledge graph entity data */
+  entity: KnowledgeGraphEntity;
+  /** Default view mode */
+  defaultView?: "graph" | "list";
+  /** Show layer navigator */
+  showLayerNav?: boolean;
+  /** Show legend */
+  showLegend?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Custom header content */
+  headerContent?: React.ReactNode;
+}
+
+export const KnowledgeGraphTemplate: React.FC<KnowledgeGraphTemplateProps> = ({
+  entity,
+  defaultView = "graph",
+  showLayerNav = true,
+  showLegend = true,
+  className = "",
+  headerContent,
+}) => {
+  const { emit } = useEventBus();
+  const [viewMode, setViewMode] = useState<"graph" | "list">(defaultView);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+
+  const handleNodeSelect = (node: { id: string }) => {
+    setSelectedNodeId(node.id);
+    emit("UI:SELECT_NODE", { nodeId: node.id, graphId: entity.id });
+  };
+
+  const handleToggleView = (mode: "graph" | "list") => {
+    setViewMode(mode);
+    emit("UI:TOGGLE_VIEW", { mode, graphId: entity.id });
+  };
+
+  // Filter concepts for current layer
+  const layerConcepts = entity.concepts?.filter(
+    (c) => c.layer === entity.currentLayer,
+  );
+
+  // Create legend items from node types
+  const legendItems: LegendItem[] = Object.entries(NODE_TYPE_COLORS)
+    .map(([type, color]) => ({
+      id: type,
+      label: type.charAt(0).toUpperCase() + type.slice(1),
+      color,
+      count: entity.nodes.filter((n) => n.type === type).length,
+    }))
+    .filter((item) => item.count > 0);
+
+  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">
+        <VStack gap="none" className="max-w-7xl mx-auto">
+          <HStack justify="between" align="center" className="px-4 py-4">
+            <VStack gap="xs">
+              <h1 className="text-2xl font-bold text-gray-900">
+                {entity.title}
+              </h1>
+              {entity.description && (
+                <p className="text-gray-600">{entity.description}</p>
+              )}
+            </VStack>
+
+            <HStack gap="md" align="center">
+              {/* View toggle */}
+              <HStack gap="xs" className="bg-gray-100 rounded-lg p-1">
+                <button
+                  onClick={() => handleToggleView("graph")}
+                  className={`px-3 py-1.5 rounded text-sm font-medium transition-colors flex items-center gap-1 ${
+                    viewMode === "graph"
+                      ? "bg-white text-gray-900 shadow-sm"
+                      : "text-gray-500 hover:text-gray-700"
+                  }`}
+                >
+                  <Network size={16} />
+                  Graph
+                </button>
+                <button
+                  onClick={() => handleToggleView("list")}
+                  className={`px-3 py-1.5 rounded text-sm font-medium transition-colors flex items-center gap-1 ${
+                    viewMode === "list"
+                      ? "bg-white text-gray-900 shadow-sm"
+                      : "text-gray-500 hover:text-gray-700"
+                  }`}
+                >
+                  <ListIcon size={16} />
+                  List
+                </button>
+              </HStack>
+              {headerContent}
+            </HStack>
+          </HStack>
+
+          {/* Layer navigator */}
+          {showLayerNav && entity.layers.length > 0 && (
+            <Box className="px-4 py-3 border-t border-gray-100">
+              <LayerNavigator
+                layers={entity.layers}
+                currentLayer={entity.currentLayer}
+                showCounts
+              />
+            </Box>
+          )}
+        </VStack>
+      </header>
+
+      {/* Learning goal */}
+      {entity.learningGoal && (
+        <Box className="max-w-7xl mx-auto px-4 py-4">
+          <LearningGoalDisplay
+            goal={entity.learningGoal}
+            layerNumber={entity.currentLayer}
+            graphId={entity.id}
+          />
+        </Box>
+      )}
+
+      {/* Main content */}
+      <main className="max-w-7xl mx-auto px-4 py-6">
+        {viewMode === "graph" ? (
+          <HStack gap="lg" align="start">
+            {/* Graph */}
+            <Box className="flex-1">
+              <Card className="overflow-hidden">
+                <ForceDirectedGraph
+                  graph={{
+                    nodes: Object.fromEntries(
+                      entity.nodes.map((n) => [n.id, n]),
+                    ),
+                    relationships: entity.links,
+                  }}
+                  height={600}
+                  onNodeClick={handleNodeSelect}
+                />
+              </Card>
+            </Box>
+
+            {/* Sidebar */}
+            <VStack gap="md" className="w-64 flex-shrink-0">
+              {/* Legend */}
+              {showLegend && legendItems.length > 0 && (
+                <GraphLegend
+                  title="Node Types"
+                  items={legendItems}
+                  interactive
+                />
+              )}
+
+              {/* Selected node info */}
+              {selectedNodeId && (
+                <Card>
+                  <VStack gap="sm">
+                    <span className="font-semibold text-gray-900">
+                      Selected Concept
+                    </span>
+                    {(() => {
+                      const node = entity.nodes.find(
+                        (n) => n.id === selectedNodeId,
+                      );
+                      if (!node) return null;
+                      return (
+                        <VStack gap="xs">
+                          <span className="text-gray-700">
+                            {node.properties.label}
+                          </span>
+                          {node.type && (
+                            <span
+                              className="text-xs px-2 py-0.5 rounded"
+                              style={{
+                                backgroundColor: `${NODE_TYPE_COLORS[node.type] || NODE_TYPE_COLORS.default}20`,
+                                color:
+                                  NODE_TYPE_COLORS[node.type] ||
+                                  NODE_TYPE_COLORS.default,
+                              }}
+                            >
+                              {node.type}
+                            </span>
+                          )}
+                        </VStack>
+                      );
+                    })()}
+                    <button
+                      onClick={() =>
+                        emit("UI:VIEW_CONCEPT", { conceptId: selectedNodeId })
+                      }
+                      className="w-full px-3 py-2 text-sm font-medium bg-indigo-600 text-white rounded hover:bg-indigo-700"
+                    >
+                      View Details
+                    </button>
+                  </VStack>
+                </Card>
+              )}
+
+              {/* Stats */}
+              <Card>
+                <VStack gap="xs">
+                  <span className="font-semibold text-gray-900">
+                    Statistics
+                  </span>
+                  <HStack justify="between">
+                    <span className="text-sm text-gray-500">Concepts</span>
+                    <span className="text-sm font-medium">
+                      {entity.nodes.length}
+                    </span>
+                  </HStack>
+                  <HStack justify="between">
+                    <span className="text-sm text-gray-500">Connections</span>
+                    <span className="text-sm font-medium">
+                      {entity.links.length}
+                    </span>
+                  </HStack>
+                  <HStack justify="between">
+                    <span className="text-sm text-gray-500">Layers</span>
+                    <span className="text-sm font-medium">
+                      {entity.layers.length}
+                    </span>
+                  </HStack>
+                </VStack>
+              </Card>
+            </VStack>
+          </HStack>
+        ) : (
+          /* List view */
+          <VStack gap="md">
+            {layerConcepts && layerConcepts.length > 0 ? (
+              layerConcepts.map((concept) => (
+                <ConceptCard
+                  key={concept.id}
+                  entity={concept}
+                  operations={[
+                    { label: "View", action: "view", variant: "primary" },
+                  ]}
+                />
+              ))
+            ) : (
+              <Card>
+                <VStack gap="md" align="center" className="py-12">
+                  <Grid size={48} className="text-gray-300" />
+                  <span className="text-gray-500">
+                    No concepts in this layer
+                  </span>
+                </VStack>
+              </Card>
+            )}
+          </VStack>
+        )}
+      </main>
+    </Box>
+  );
+};
+
+KnowledgeGraphTemplate.displayName = "KnowledgeGraphTemplate";

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

@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { LessonTemplate } from "./LessonTemplate";
+
+const meta: Meta<typeof LessonTemplate> = {
+  title: "KFlow/Templates/LessonTemplate",
+  component: LessonTemplate,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof LessonTemplate>;
+
+const sampleSegments = [
+  {
+    type: "markdown" as const,
+    content: `## Introduction to Neural Networks
+
+Neural networks are computing systems inspired by biological neural networks that constitute animal brains. They are designed to recognize patterns and interpret data through a form of machine perception.
+
+### Key Concepts
+
+1. **Neurons** - The basic units of computation
+2. **Weights** - Parameters that are learned during training
+3. **Activation Functions** - Non-linear functions that enable complex mappings
+`,
+  },
+  {
+    type: "code" as const,
+    content: `import torch.nn as nn
+
+class SimpleNetwork(nn.Module):
+    def __init__(self):
+        super().__init__()
+        self.layer1 = nn.Linear(10, 5)
+        self.layer2 = nn.Linear(5, 1)
+
+    def forward(self, x):
+        x = torch.relu(self.layer1(x))
+        return self.layer2(x)`,
+    language: "python",
+  },
+  {
+    type: "markdown" as const,
+    content: `### Training Process
+
+The training process involves:
+- Forward propagation
+- Loss calculation
+- Backward propagation
+- Weight updates
+`,
+  },
+];
+
+const sampleSidebarItems = [
+  { id: "1", title: "Introduction to ML", isCompleted: true },
+  { id: "2", title: "Neural Networks Basics", isCurrent: true },
+  { id: "3", title: "Backpropagation" },
+  { id: "4", title: "Optimization Techniques" },
+  { id: "5", title: "Regularization" },
+];
+
+export const Default: Story = {
+  args: {
+    entity: {
+      id: "lesson-1",
+      title: "Introduction to Neural Networks",
+      content: "<p>This is the lesson content.</p>",
+      segments: sampleSegments,
+      duration: 15,
+      courseTitle: "Machine Learning Fundamentals",
+      courseProgress: 40,
+    },
+    sidebarItems: sampleSidebarItems,
+    hasPrevious: true,
+    hasNext: true,
+    readingProgress: 35,
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    entity: {
+      id: "lesson-2",
+      title: "Completed Lesson",
+      content: "<p>You have completed this lesson.</p>",
+      duration: 10,
+      isCompleted: true,
+      courseTitle: "Python Basics",
+      courseProgress: 100,
+    },
+    hasPrevious: true,
+    hasNext: false,
+    readingProgress: 100,
+  },
+};
+
+export const FirstLesson: Story = {
+  args: {
+    entity: {
+      id: "lesson-0",
+      title: "Getting Started",
+      content: "<p>Welcome to the course!</p>",
+      duration: 5,
+      courseTitle: "Introduction Course",
+      courseProgress: 0,
+    },
+    sidebarItems: sampleSidebarItems,
+    hasPrevious: false,
+    hasNext: true,
+    readingProgress: 0,
+  },
+};
+
+export const WithSegments: Story = {
+  args: {
+    entity: {
+      id: "lesson-3",
+      title: "Advanced Neural Networks",
+      content: "",
+      segments: [
+        ...sampleSegments,
+        {
+          type: "quiz" as const,
+          question: "What is the main purpose of an activation function?",
+          answer:
+            "To introduce non-linearity into the network, allowing it to learn complex patterns that linear functions cannot represent.",
+        },
+        {
+          type: "bloom" as const,
+          level: "understand",
+          question: "Explain why neural networks need multiple layers.",
+          answer:
+            "Multiple layers allow the network to learn hierarchical representations of data, with each layer learning increasingly abstract features.",
+        },
+      ],
+      duration: 25,
+      courseTitle: "Deep Learning",
+      courseProgress: 60,
+    },
+    hasPrevious: true,
+    hasNext: true,
+    readingProgress: 50,
+  },
+};
+
+export const NoSidebar: Story = {
+  args: {
+    entity: {
+      id: "lesson-4",
+      title: "Standalone Lesson",
+      content: "<p>This lesson has no course context.</p>",
+      duration: 8,
+    },
+    hasPrevious: false,
+    hasNext: false,
+  },
+};