feat: add interactive web learning platform (Phase 1)

- Complete i18n: all hardcoded English strings replaced with t() calls
  across layers, compare, whats-new, and design-decisions components
- Dark mode persistence via localStorage + inline script to prevent flash
- Per-session feature visualizations (s01-s11) with Framer Motion animations
- Multi-language docs: 11 Chinese + 11 Japanese translations of all sessions
- Extract-content supports suffix-based locale detection (-zh, -ja)
- Tutorial section expanded by default in doc-renderer
- GitHub link updated to shareAI-lab/learn-claude-code
- 81 static pages generated across en/zh/ja locales
- Deployed to Vercel production

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: CrazyBoyM

docs/s01-the-agent-loop-ja.md

@@ -0,0 +1,132 @@
+# s01: The Agent Loop
+
+> AIコーディングエージェントの秘密はすべて、モデルが「終了」と判断するまでツール結果をモデルにフィードバックし続けるwhileループにある。
+
+## 問題
+
+なぜ言語モデルは単体でコーディングの質問に答えられないのか。それはコーディングが「現実世界とのインタラクション」を必要とするからだ。モデルはファイルを読み、テストを実行し、エラーを確認し、反復する必要がある。一回のプロンプト-レスポンスのやり取りではこれは実現できない。
+
+agent loopがなければ、ユーザーが自分でモデルの出力をコピーペーストして戻す必要がある。つまりユーザー自身がループの役割を果たすことになる。agent loopはこれを自動化する: モデルを呼び出し、モデルが要求したツールを実行し、結果をフィードバックし、モデルが「完了」と言うまで繰り返す。
+
+単純なタスクを考えてみよう: 「helloと出力するPythonファイルを作成せよ」。モデルは(1)ファイルを書くことを決定し、(2)書き、(3)動作を検証する必要がある。最低でも3回のツール呼び出しが必要だ。ループがなければ、そのたびに手動の介入が必要になる。
+
+## 解決策
+
+```
++----------+      +-------+      +---------+
+|   User   | ---> |  LLM  | ---> |  Tool   |
+|  prompt  |      |       |      | execute |
++----------+      +---+---+      +----+----+
+                      ^               |
+                      |   tool_result |
+                      +---------------+
+                      (loop continues)
+
+The loop terminates when stop_reason != "tool_use".
+That single condition is the entire control flow.
+```
+
+## 仕組み
+
+1. ユーザーがプロンプトを入力する。これが最初のメッセージになる。
+
+```python
+history.append({"role": "user", "content": query})
+```
+
+2. メッセージ配列がツール定義と共にLLMに送信される。
+
+```python
+response = client.messages.create(
+    model=MODEL, system=SYSTEM, messages=messages,
+    tools=TOOLS, max_tokens=8000,
+)
+```
+
+3. アシスタントのレスポンスがメッセージに追加される。
+
+```python
+messages.append({"role": "assistant", "content": response.content})
+```
+
+4. stop reasonを確認する。モデルがツールを呼び出さなかった場合、ループは終了する。これが唯一の終了条件だ。
+
+```python
+if response.stop_reason != "tool_use":
+    return
+```
+
+5. レスポンス中の各tool_useブロックについて、ツール(このセッションではbash)を実行し、結果を収集する。
+
+```python
+for block in response.content:
+    if block.type == "tool_use":
+        output = run_bash(block.input["command"])
+        results.append({
+            "type": "tool_result",
+            "tool_use_id": block.id,
+            "content": output,
+        })
+```
+
+6. 結果がuserメッセージとして追加され、ループが続行する。
+
+```python
+messages.append({"role": "user", "content": results})
+```
+
+## 主要コード
+
+最小限のエージェント -- パターン全体が30行未満
+(`agents/s01_agent_loop.py` 66-86行目):
+
+```python
+def agent_loop(messages: list):
+    while True:
+        response = client.messages.create(
+            model=MODEL, system=SYSTEM, messages=messages,
+            tools=TOOLS, max_tokens=8000,
+        )
+        messages.append({"role": "assistant", "content": response.content})
+        if response.stop_reason != "tool_use":
+            return
+        results = []
+        for block in response.content:
+            if block.type == "tool_use":
+                output = run_bash(block.input["command"])
+                results.append({
+                    "type": "tool_result",
+                    "tool_use_id": block.id,
+                    "content": output,
+                })
+        messages.append({"role": "user", "content": results})
+```
+
+## 変更点
+
+これはセッション1 -- 出発点である。前のセッションは存在しない。
+
+| Component     | Before     | After                          |
+|---------------|------------|--------------------------------|
+| Agent loop    | (none)     | `while True` + stop_reason     |
+| Tools         | (none)     | `bash` (one tool)              |
+| Messages      | (none)     | Accumulating list              |
+| Control flow  | (none)     | `stop_reason != "tool_use"`    |
+
+## 本番環境との対応
+
+実際のClaude Codeでも、同じループがメインREPLの中で動いている。コアとなるループロジックは`agent.ts`にあり、同一のパターンに従う: メッセージをAPIに送り、`stop_reason`を確認し、ツールを実行し、結果を追加する。本番バージョンではエラーハンドリング、トークンカウント、ストリーミング、リトライロジックが追加されているが、根本的な構造は変わらない。すべてのClaude Codeセッションはこのwhileループである。
+
+## 試してみる
+
+```sh
+cd learn-claude-code
+python agents/s01_agent_loop.py
+```
+
+試せるプロンプト例:
+
+1. `Create a file called hello.py that prints "Hello, World!"`
+2. `List all Python files in this directory`
+3. `What is the current git branch?`
+4. `Create a directory called test_output and write 3 files in it`

docs/s01-the-agent-loop-zh.md

@@ -0,0 +1,132 @@
+# s01: Agent Loop (智能体循环)
+
+> AI 编程智能体的全部秘密就是一个 while 循环 -- 把工具执行结果反馈给模型, 直到模型决定停止。
+
+## 问题
+
+为什么语言模型不能直接回答编程问题? 因为编程需要**与真实世界交互**。模型需要读取文件、运行测试、检查错误、反复迭代。单次的提示-响应交互无法做到这些。
+
+没有 agent loop, 你就得手动把输出复制粘贴回模型。用户自己变成了那个循环。Agent loop 将这个过程自动化: 调用模型, 执行它要求的工具, 把结果送回去, 重复 -- 直到模型说 "我完成了"。
+
+考虑一个简单任务: "创建一个打印 hello 的 Python 文件。" 模型需要 (1) 决定写文件, (2) 写入文件, (3) 验证是否正常工作。至少三次工具调用。没有循环的话, 每一次都需要人工干预。
+
+## 解决方案
+
+```
++----------+      +-------+      +---------+
+|   User   | ---> |  LLM  | ---> |  Tool   |
+|  prompt  |      |       |      | execute |
++----------+      +---+---+      +----+----+
+                      ^               |
+                      |   tool_result |
+                      +---------------+
+                      (loop continues)
+
+The loop terminates when stop_reason != "tool_use".
+That single condition is the entire control flow.
+```
+
+## 工作原理
+
+1. 用户提供一个 prompt, 成为第一条消息。
+
+```python
+history.append({"role": "user", "content": query})
+```
+
+2. 消息数组连同工具定义一起发送给 LLM。
+
+```python
+response = client.messages.create(
+    model=MODEL, system=SYSTEM, messages=messages,
+    tools=TOOLS, max_tokens=8000,
+)
+```
+
+3. 助手的响应被追加到消息列表中。
+
+```python
+messages.append({"role": "assistant", "content": response.content})
+```
+
+4. 检查 stop_reason。如果模型没有调用工具, 循环结束。这是唯一的退出条件。
+
+```python
+if response.stop_reason != "tool_use":
+    return
+```
+
+5. 对响应中的每个 tool_use 块, 执行工具 (本节课中是 bash) 并收集结果。
+
+```python
+for block in response.content:
+    if block.type == "tool_use":
+        output = run_bash(block.input["command"])
+        results.append({
+            "type": "tool_result",
+            "tool_use_id": block.id,
+            "content": output,
+        })
+```
+
+6. 结果作为 user 消息追加, 循环继续。
+
+```python
+messages.append({"role": "user", "content": results})
+```
+
+## 核心代码
+
+最小可行智能体 -- 不到 30 行代码实现整个模式
+(来自 `agents/s01_agent_loop.py`, 第 66-86 行):
+
+```python
+def agent_loop(messages: list):
+    while True:
+        response = client.messages.create(
+            model=MODEL, system=SYSTEM, messages=messages,
+            tools=TOOLS, max_tokens=8000,
+        )
+        messages.append({"role": "assistant", "content": response.content})
+        if response.stop_reason != "tool_use":
+            return
+        results = []
+        for block in response.content:
+            if block.type == "tool_use":
+                output = run_bash(block.input["command"])
+                results.append({
+                    "type": "tool_result",
+                    "tool_use_id": block.id,
+                    "content": output,
+                })
+        messages.append({"role": "user", "content": results})
+```
+
+## 变更内容
+
+这是第 1 节课 -- 起点。没有前置课程。
+
+| 组件          | 之前       | 之后                           |
+|---------------|------------|--------------------------------|
+| Agent loop    | (无)       | `while True` + stop_reason     |
+| Tools         | (无)       | `bash` (单一工具)              |
+| Messages      | (无)       | 累积式消息列表                 |
+| Control flow  | (无)       | `stop_reason != "tool_use"`    |
+
+## 生产环境参考
+
+在真实的 Claude Code 中, 同样的循环运行在主 REPL 内。核心循环逻辑位于 `agent.ts`, 遵循完全相同的模式: 发送消息到 API, 检查 `stop_reason`, 执行工具, 追加结果。生产版本增加了错误处理、token 计数、流式输出和重试逻辑, 但基本结构没有变化。每一个 Claude Code 会话本质上都是这个 while 循环。
+
+## 试一试
+
+```sh
+cd learn-claude-code
+python agents/s01_agent_loop.py
+```
+
+可以尝试的提示:
+
+1. `Create a file called hello.py that prints "Hello, World!"`
+2. `List all Python files in this directory`
+3. `What is the current git branch?`
+4. `Create a directory called test_output and write 3 files in it`