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

web/src/components/ui/tabs.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface TabsProps {
+  tabs: { id: string; label: string }[];
+  defaultTab?: string;
+  children: (activeTab: string) => React.ReactNode;
+  className?: string;
+}
+
+export function Tabs({ tabs, defaultTab, children, className }: TabsProps) {
+  const [active, setActive] = useState(defaultTab || tabs[0]?.id || "");
+
+  return (
+    <div className={className}>
+      <div className="flex border-b border-zinc-200 dark:border-zinc-700">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActive(tab.id)}
+            className={cn(
+              "px-4 py-2 text-sm font-medium transition-colors",
+              active === tab.id
+                ? "border-b-2 border-zinc-900 text-zinc-900 dark:border-white dark:text-white"
+                : "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
+            )}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="mt-4">{children(active)}</div>
+    </div>
+  );
+}