feat: build an AI agent from 0 to 1 -- 11 progressive sessions

- 11 sessions from basic agent loop to autonomous teams - Python MVP implementations for each session - Mental-model-first docs in en/zh/ja - Interactive web platform with step-through visualizations - Incremental architecture: each session adds one mechanism
2026-02-21 17:02:43 +08:00
commit c6a27ef1d7
156 changed files with 28059 additions and 0 deletions
@@ -0,0 +1,38 @@
+"use client";
+
+import { lazy, Suspense } from "react";
+import { useTranslations } from "@/lib/i18n";
+
+const visualizations: Record<
+  string,
+  React.LazyExoticComponent<React.ComponentType<{ title?: string }>>
+> = {
+  s01: lazy(() => import("./s01-agent-loop")),
+  s02: lazy(() => import("./s02-tool-dispatch")),
+  s03: lazy(() => import("./s03-todo-write")),
+  s04: lazy(() => import("./s04-subagent")),
+  s05: lazy(() => import("./s05-skill-loading")),
+  s06: lazy(() => import("./s06-context-compact")),
+  s07: lazy(() => import("./s07-task-system")),
+  s08: lazy(() => import("./s08-background-tasks")),
+  s09: lazy(() => import("./s09-agent-teams")),
+  s10: lazy(() => import("./s10-team-protocols")),
+  s11: lazy(() => import("./s11-autonomous-agents")),
+};
+
+export function SessionVisualization({ version }: { version: string }) {
+  const t = useTranslations("viz");
+  const Component = visualizations[version];
+  if (!Component) return null;
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-[500px] animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" />
+      }
+    >
+      <div className="min-h-[500px]">
+        <Component title={t(version)} />
+      </div>
+    </Suspense>
+  );
+}