diff --git a/app/[docs_id]/chatForm.tsx b/app/[docs_id]/chatForm.tsx
index feec78d..d2ad7f7 100644
--- a/app/[docs_id]/chatForm.tsx
+++ b/app/[docs_id]/chatForm.tsx
@@ -1,42 +1,50 @@
 "use client";
 
-import { useState, FormEvent } from "react";
-import clsx from "clsx";
+import { useState, FormEvent, useEffect } from "react";
 import { askAI } from "@/app/actions/chatActions";
-import { StyledMarkdown } from "./markdown";
-import { useChatHistory, type Message } from "../hooks/useChathistory";
 import useSWR from "swr";
-import { getQuestionExample } from "../actions/questionExample";
+import {
+  getQuestionExample,
+  QuestionExampleParams,
+} from "../actions/questionExample";
 import { getLanguageName } from "../pagesList";
-import { ReplCommand, ReplOutput } from "../terminal/repl";
+import { DynamicMarkdownSection } from "./pageContent";
+import { useEmbedContext } from "../terminal/embedContext";
+import { ChatMessage, useChatHistoryContext } from "./chatHistory";
 
 interface ChatFormProps {
+  docs_id: string;
   documentContent: string;
-  sectionId: string;
-  replOutputs: ReplCommand[];
-  fileContents: Array<{
-    name: string;
-    content: string;
-  }>;
-  execResults: Record<string, ReplOutput[]>;
+  sectionContent: DynamicMarkdownSection[];
+  close: () => void;
 }
 
 export function ChatForm({
+  docs_id,
   documentContent,
-  sectionId,
-  replOutputs,
-  fileContents,
-  execResults,
+  sectionContent,
+  close,
 }: ChatFormProps) {
-  const [messages, updateChatHistory] = useChatHistory(sectionId);
+  // const [messages, updateChatHistory] = useChatHistory(sectionId);
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  const [isFormVisible, setIsFormVisible] = useState(false);
 
-  const lang = getLanguageName(sectionId);
+  const { addChat } = useChatHistoryContext();
+
+  const lang = getLanguageName(docs_id);
+
+  const { files, replOutputs, execResults } = useEmbedContext();
+
+  const documentContentInView = sectionContent
+    .filter((s) => s.inView)
+    .map((s) => s.rawContent)
+    .join("\n\n");
   const { data: exampleData, error: exampleError } = useSWR(
     // 質問フォームを開いたときだけで良い
-    isFormVisible ? { lang, documentContent } : null,
+    {
+      lang,
+      documentContent: documentContentInView,
+    } satisfies QuestionExampleParams,
     getQuestionExample,
     {
       // リクエストは古くても構わないので1回でいい
@@ -51,13 +59,17 @@ export function ChatForm({
   // 質問フォームを開くたびにランダムに選び直し、
   // exampleData[Math.floor(exampleChoice * exampleData.length)] を採用する
   const [exampleChoice, setExampleChoice] = useState<number>(0); // 0〜1
+  useEffect(() => {
+    if (exampleChoice === 0) {
+      setExampleChoice(Math.random());
+    }
+  }, [exampleChoice]);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
 
-    const userMessage: Message = { sender: "user", text: inputValue };
-    updateChatHistory([userMessage]);
+    const userMessage: ChatMessage = { sender: "user", text: inputValue };
 
     let userQuestion = inputValue;
     if (!userQuestion && exampleData) {
@@ -69,148 +81,89 @@ export function ChatForm({
 
     const result = await askAI({
       userQuestion,
-      documentContent: documentContent,
+      documentContent,
+      sectionContent,
       replOutputs,
-      fileContents,
+      files,
       execResults,
     });
 
     if (result.error) {
-      const errorMessage: Message = {
-        sender: "ai",
+      const errorMessage: ChatMessage = {
+        sender: "error",
         text: `エラー: ${result.error}`,
-        isError: true,
       };
-      updateChatHistory([userMessage, errorMessage]);
+      console.log(result.error);
+      // TODO: ユーザーに表示
     } else {
-      const aiMessage: Message = { sender: "ai", text: result.response };
-      updateChatHistory([userMessage, aiMessage]);
+      const aiMessage: ChatMessage = { sender: "ai", text: result.response };
+      const chatId = addChat(result.targetSectionId, [userMessage, aiMessage]);
+      // TODO: chatIdが指す対象の回答にフォーカス
       setInputValue("");
+      close();
     }
 
     setIsLoading(false);
   };
 
-  const handleClearHistory = () => {
-    updateChatHistory([]);
-  };
-
   return (
-    <>
-      {isFormVisible && (
-        <form
-          className="border border-2 border-secondary shadow-md rounded-lg bg-base-100"
+    <form
+      className="border border-2 border-secondary shadow-lg rounded-lg bg-base-100"
+      style={{
+        width: "100%",
+        textAlign: "center",
+      }}
+      onSubmit={handleSubmit}
+    >
+      <div className="input-area">
+        <textarea
+          className="textarea textarea-ghost textarea-md rounded-lg"
+          placeholder={
+            "質問を入力してください" +
+            (exampleData
+              ? ` (例:「${exampleData[Math.floor(exampleChoice * exampleData.length)]}」)`
+              : "")
+          }
           style={{
             width: "100%",
-            textAlign: "center",
-            boxShadow: "-moz-initial",
+            height: "110px",
+            resize: "none",
+            outlineStyle: "none",
           }}
-          onSubmit={handleSubmit}
-        >
-          <div className="input-area">
-            <textarea
-              className="textarea textarea-ghost textarea-md rounded-lg"
-              placeholder={
-                "質問を入力してください" +
-                (exampleData
-                  ? ` (例:「${exampleData[Math.floor(exampleChoice * exampleData.length)]}」)`
-                  : "")
-              }
-              style={{
-                width: "100%",
-                height: "110px",
-                resize: "none",
-                outlineStyle: "none",
-              }}
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              disabled={isLoading}
-            ></textarea>
-          </div>
-          <div
-            className="controls"
-            style={{
-              margin: "10px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-            }}
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          disabled={isLoading}
+        ></textarea>
+      </div>
+      <div
+        className="controls"
+        style={{
+          margin: "10px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <div className="left-icons">
+          <button
+            className="btn btn-soft btn-secondary rounded-full"
+            onClick={close}
+            type="button"
           >
-            <div className="left-icons">
-              <button
-                className="btn btn-soft btn-secondary rounded-full"
-                onClick={() => setIsFormVisible(false)}
-                type="button"
-              >
-                閉じる
-              </button>
-            </div>
-            <div className="right-controls">
-              <button
-                type="submit"
-                className="btn btn-soft btn-circle btn-accent border-2 border-accent rounded-full"
-                title="送信"
-                disabled={isLoading}
-              >
-                <span className="icon">➤</span>
-              </button>
-            </div>
-          </div>
-        </form>
-      )}
-      {!isFormVisible && (
-        <button
-          className="btn btn-soft btn-secondary rounded-full"
-          onClick={() => {
-            setIsFormVisible(true);
-            setExampleChoice(Math.random());
-          }}
-        >
-          チャットを開く
-        </button>
-      )}
-
-      {messages.length > 0 && (
-        <article className="mt-4">
-          <div className="flex justify-between items-center mb-2">
-            <h3 className="text-lg font-semibold">AIとのチャット</h3>
-            <button
-              onClick={handleClearHistory}
-              className="btn btn-ghost btn-sm text-xs"
-              aria-label="チャット履歴を削除"
-            >
-              履歴を削除
-            </button>
-          </div>
-          {messages.map((msg, index) => (
-            <div
-              key={index}
-              className={`chat ${msg.sender === "user" ? "chat-end" : "chat-start"}`}
-            >
-              <div
-                className={clsx(
-                  "chat-bubble",
-                  { "bg-primary text-primary-content": msg.sender === "user" },
-                  {
-                    "bg-secondary-content dark:bg-neutral text-black dark:text-white":
-                      msg.sender === "ai" && !msg.isError,
-                  },
-                  { "chat-bubble-error": msg.isError }
-                )}
-                style={{ maxWidth: "100%", wordBreak: "break-word" }}
-              >
-                <StyledMarkdown content={msg.text} />
-              </div>
-            </div>
-          ))}
-        </article>
-      )}
-
-      {isLoading && (
-        <div className="mt-2 text-l text-gray-500 animate-pulse">
-          AIが考え中です…
+            閉じる
+          </button>
+        </div>
+        <div className="right-controls">
+          <button
+            type="submit"
+            className="btn btn-soft btn-circle btn-accent border-2 border-accent rounded-full"
+            title="送信"
+            disabled={isLoading}
+          >
+            <span className="icon">➤</span>
+          </button>
         </div>
-      )}
-    </>
+      </div>
+    </form>
   );
 }
diff --git a/app/[docs_id]/chatHistory.tsx b/app/[docs_id]/chatHistory.tsx
new file mode 100644
index 0000000..65d95ce
--- /dev/null
+++ b/app/[docs_id]/chatHistory.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+export interface ChatMessage {
+  sender: "user" | "ai" | "error";
+  text: string;
+}
+
+export interface IChatHistoryContext {
+  chatHistories: Record<string, Record<string, ChatMessage[]>>;
+  addChat: (sectionId: string, messages: ChatMessage[]) => string;
+  updateChat: (sectionId: string, chatId: string, message: ChatMessage) => void;
+}
+const ChatHistoryContext = createContext<IChatHistoryContext | null>(null);
+export function useChatHistoryContext() {
+  const context = useContext(ChatHistoryContext);
+  if (!context) {
+    throw new Error(
+      "useChatHistoryContext must be used within a ChatHistoryProvider"
+    );
+  }
+  return context;
+}
+
+export function ChatHistoryProvider({ children }: { children: ReactNode }) {
+  const [chatHistories, setChatHistories] = useState<
+    Record<string, Record<string, ChatMessage[]>>
+  >({});
+  useEffect(() => {
+    // Load chat histories from localStorage on mount
+    const chatHistories: Record<string, Record<string, ChatMessage[]>> = {};
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && key.startsWith("chat/") && key.split("/").length === 3) {
+        const savedHistory = localStorage.getItem(key);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const [_, sectionId, chatId] = key.split("/");
+        if (savedHistory) {
+          if (!chatHistories[sectionId]) {
+            chatHistories[sectionId] = {};
+          }
+          chatHistories[sectionId][chatId] = JSON.parse(savedHistory);
+        }
+      }
+    }
+    setChatHistories(chatHistories);
+  }, []);
+
+  const addChat = (sectionId: string, messages: ChatMessage[]): string => {
+    const chatId = Date.now().toString();
+    const newChatHistories = { ...chatHistories };
+    if (!newChatHistories[sectionId]) {
+      newChatHistories[sectionId] = {};
+    }
+    newChatHistories[sectionId][chatId] = messages;
+    setChatHistories(newChatHistories);
+    localStorage.setItem(
+      `chat/${sectionId}/${chatId}`,
+      JSON.stringify(messages)
+    );
+    return chatId;
+  };
+  const updateChat = (
+    sectionId: string,
+    chatId: string,
+    message: ChatMessage
+  ) => {
+    const newChatHistories = { ...chatHistories };
+    if (newChatHistories[sectionId] && newChatHistories[sectionId][chatId]) {
+      newChatHistories[sectionId][chatId] = [
+        ...newChatHistories[sectionId][chatId],
+        message,
+      ];
+      setChatHistories(newChatHistories);
+      localStorage.setItem(
+        `chat/${sectionId}/${chatId}`,
+        JSON.stringify(newChatHistories[sectionId][chatId])
+      );
+    }
+  };
+
+  return (
+    <ChatHistoryContext.Provider value={{ chatHistories, addChat, updateChat }}>
+      {children}
+    </ChatHistoryContext.Provider>
+  );
+}
diff --git a/app/[docs_id]/chatServer.ts b/app/[docs_id]/chatServer.ts
deleted file mode 100644
index 3a11a95..0000000
--- a/app/[docs_id]/chatServer.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-"use server";
-
-export async function hello() {}
diff --git a/app/[docs_id]/markdown.tsx b/app/[docs_id]/markdown.tsx
index ffdfd0a..002dd80 100644
--- a/app/[docs_id]/markdown.tsx
+++ b/app/[docs_id]/markdown.tsx
@@ -2,7 +2,6 @@ import Markdown, { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { PythonEmbeddedTerminal } from "../terminal/python/embedded";
-import { Heading } from "./section";
 import { type AceLang, EditorComponent } from "../terminal/editor";
 import { ExecFile, ExecLang } from "../terminal/exec";
 import { useChangeTheme } from "./themeToggle";
@@ -10,6 +9,7 @@ import {
   tomorrow,
   atomOneDark,
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { ReactNode } from "react";
 
 export function StyledMarkdown({ content }: { content: string }) {
   return (
@@ -50,6 +50,32 @@ const components: Components = {
     <CodeComponent {...{ node, className, ref, style, ...props }} />
   ),
 };
+
+
+export function Heading({
+  level,
+  children,
+}: {
+  level: number;
+  children: ReactNode;
+}) {
+  switch (level) {
+    case 1:
+      return <h1 className="text-2xl font-bold my-4">{children}</h1>;
+    case 2:
+      return <h2 className="text-xl font-bold mt-4 mb-3 ">{children}</h2>;
+    case 3:
+      return <h3 className="text-lg font-bold mt-4 mb-2">{children}</h3>;
+    case 4:
+      return <h4 className="text-base font-bold mt-3 mb-2">{children}</h4>;
+    case 5:
+      // TODO: これ以下は4との差がない (全体的に大きくする必要がある？)
+      return <h5 className="text-base font-bold mt-3 mb-2">{children}</h5>;
+    case 6:
+      return <h6 className="text-base font-bold mt-3 mb-2">{children}</h6>;
+  }
+}
+
 function CodeComponent({
   node,
   className,
@@ -104,6 +130,23 @@ function CodeComponent({
           </div>
         );
       }
+    } else if (match[2] === "-repl") {
+      // repl付きの言語指定
+      // 現状はPythonのみ対応
+      switch (match[1]) {
+        case "python":
+          return (
+            <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
+              <PythonEmbeddedTerminal
+                terminalId={match[3]}
+                content={String(props.children || "").replace(/\n$/, "")}
+              />
+            </div>
+          );
+        default:
+          console.warn(`Unsupported language for repl: ${match[1]}`);
+          break;
+      }
     } else if (match[3]) {
       // ファイル名指定がある場合、ファイルエディター
       let aceLang: AceLang | undefined = undefined;
@@ -140,22 +183,6 @@ function CodeComponent({
           />
         </div>
       );
-    } else if (match[2] === "-repl") {
-      // repl付きの言語指定
-      // 現状はPythonのみ対応
-      switch (match[1]) {
-        case "python":
-          return (
-            <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
-              <PythonEmbeddedTerminal
-                content={String(props.children || "").replace(/\n$/, "")}
-              />
-            </div>
-          );
-        default:
-          console.warn(`Unsupported language for repl: ${match[1]}`);
-          break;
-      }
     }
     return (
       <SyntaxHighlighter
diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx
index 0900973..9c89033 100644
--- a/app/[docs_id]/page.tsx
+++ b/app/[docs_id]/page.tsx
@@ -3,8 +3,9 @@ import { getCloudflareContext } from "@opennextjs/cloudflare";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
-import { Section } from "./section";
 import pyodideLock from "pyodide/pyodide-lock.json";
+import { PageContent } from "./pageContent";
+import { ChatHistoryProvider } from "./chatHistory";
 
 export default async function Page({
   params,
@@ -41,18 +42,15 @@ export default async function Page({
     String(pyodideLock.info.python)
   );
 
-  const splitMdContent: MarkdownSection[] = await splitMarkdown(mdContent);
+  const splitMdContent: MarkdownSection[] = splitMarkdown(mdContent);
 
   return (
-    <div className="p-4">
-      {splitMdContent.map((section, index) => {
-        const sectionId = `${docs_id}-${index}`;
-        return (
-          <div key={index} id={`${index}`}>
-            <Section section={section} sectionId={sectionId} />
-          </div>
-        );
-      })}
-    </div>
+    <ChatHistoryProvider>
+      <PageContent
+        documentContent={mdContent}
+        splitMdContent={splitMdContent}
+        docs_id={docs_id}
+      />
+    </ChatHistoryProvider>
   );
 }
diff --git a/app/[docs_id]/pageContent.tsx b/app/[docs_id]/pageContent.tsx
new file mode 100644
index 0000000..9394900
--- /dev/null
+++ b/app/[docs_id]/pageContent.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { MarkdownSection } from "./splitMarkdown";
+import { ChatForm } from "./chatForm";
+import { Heading, StyledMarkdown } from "./markdown";
+import { useChatHistoryContext } from "./chatHistory";
+import clsx from "clsx";
+
+// MarkdownSectionに追加で、ユーザーが今そのセクションを読んでいるかどうか、などの動的な情報を持たせる
+export type DynamicMarkdownSection = MarkdownSection & {
+  inView: boolean;
+  sectionId: string;
+};
+
+interface PageContentProps {
+  documentContent: string;
+  splitMdContent: MarkdownSection[];
+  docs_id: string;
+}
+export function PageContent(props: PageContentProps) {
+  const [dynamicMdContent, setDynamicMdContent] = useState<
+    DynamicMarkdownSection[]
+  >(
+    // useEffectで更新するのとは別に、SSRのための初期値
+    props.splitMdContent.map((section, i) => ({
+      ...section,
+      inView: false,
+      sectionId: `${props.docs_id}-${i}`,
+    }))
+  );
+  useEffect(() => {
+    // props.splitMdContentが変わったときにdynamicMdContentを更新
+    setDynamicMdContent(
+      props.splitMdContent.map((section, i) => ({
+        ...section,
+        inView: false,
+        sectionId: `${props.docs_id}-${i}`,
+      }))
+    );
+  }, [props.splitMdContent, props.docs_id]);
+
+  const sectionRefs = useRef<Array<HTMLDivElement | null>>([]);
+  // sectionRefsの長さをsplitMdContentに合わせる
+  while (sectionRefs.current.length < props.splitMdContent.length) {
+    sectionRefs.current.push(null);
+  }
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setDynamicMdContent((prevDynamicMdContent) => {
+        const dynMdContent = prevDynamicMdContent.slice(); // Reactの変更検知のために新しい配列を作成
+        for (let i = 0; i < sectionRefs.current.length; i++) {
+          if (sectionRefs.current.at(i) && dynMdContent.at(i)) {
+            const rect = sectionRefs.current.at(i)!.getBoundingClientRect();
+            dynMdContent.at(i)!.inView =
+              rect.top < window.innerHeight && rect.bottom >= 0;
+          }
+        }
+        return dynMdContent;
+      });
+    };
+    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const [isFormVisible, setIsFormVisible] = useState(false);
+
+  const { chatHistories } = useChatHistoryContext();
+
+  return (
+    <div
+      className="p-4 mx-auto grid"
+      style={{
+        gridTemplateColumns: `1fr auto`,
+      }}
+    >
+      {dynamicMdContent.map((section, index) => (
+        <>
+          <div
+            className="max-w-200"
+            key={`${index}-content`}
+            id={`${index}`} // 目次からaタグで飛ぶために必要
+            ref={(el) => {
+              sectionRefs.current[index] = el;
+            }}
+          >
+            {/* ドキュメントのコンテンツ */}
+            <Heading level={section.level}>{section.title}</Heading>
+            <StyledMarkdown content={section.content} />
+          </div>
+          <div key={`${index}-chat`}>
+            {/* 右側に表示するチャット履歴欄 */}
+            {Object.entries(chatHistories[section.sectionId] ?? {}).map(
+              ([chatId, messages]) => (
+                <div
+                  key={chatId}
+                  className="max-w-xs mb-2 p-2 text-sm border border-base-content/10 rounded-sm shadow-sm bg-base-100"
+                >
+                  <div className="max-h-60 overflow-y-auto">
+                    {messages.map((msg, index) => (
+                      <div
+                        key={index}
+                        className={`chat ${msg.sender === "user" ? "chat-end" : "chat-start"}`}
+                      >
+                        <div
+                          className={clsx(
+                            "chat-bubble p-1!",
+                            msg.sender === "user" &&
+                              "bg-primary text-primary-content",
+                            msg.sender === "ai" &&
+                              "bg-secondary-content dark:bg-neutral text-black dark:text-white",
+                            msg.sender === "error" && "chat-bubble-error"
+                          )}
+                          style={{ maxWidth: "100%", wordBreak: "break-word" }}
+                        >
+                          <StyledMarkdown content={msg.text} />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )
+            )}
+          </div>
+        </>
+      ))}
+      {isFormVisible ? (
+        // sidebarの幅が80であることからleft-84 (sidebar.tsx参照)
+        // replがz-10を使用することからそれの上にするためz-20
+        <div className="fixed bottom-4 right-4 left-4 lg:left-84 z-20">
+          <ChatForm
+            documentContent={props.documentContent}
+            sectionContent={dynamicMdContent}
+            docs_id={props.docs_id}
+            close={() => setIsFormVisible(false)}
+          />
+        </div>
+      ) : (
+        <button
+          className="fixed bottom-4 right-4 btn btn-soft btn-secondary rounded-full shadow-md z-50"
+          onClick={() => setIsFormVisible(true)}
+        >
+          AIに質問
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/app/[docs_id]/section.tsx b/app/[docs_id]/section.tsx
deleted file mode 100644
index 4aada64..0000000
--- a/app/[docs_id]/section.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useState,
-} from "react";
-import { type MarkdownSection } from "./splitMarkdown";
-import { StyledMarkdown } from "./markdown";
-import { ChatForm } from "./chatForm";
-import { ReplCommand, ReplOutput } from "../terminal/repl";
-import { useFile } from "../terminal/file";
-
-// セクション内に埋め込まれているターミナルとファイルエディターの内容をSection側から取得できるよう、
-// Contextに保存する
-// TODO: C++では複数ファイルを実行する場合がありうるが、ここではfilenameを1つしか受け付けない想定になっている
-interface ISectionCodeContext {
-  addReplOutput: (command: string, output: ReplOutput[]) => void;
-  addFile: (filename: string) => void;
-  setExecResult: (filename: string, output: ReplOutput[]) => void;
-}
-const SectionCodeContext = createContext<ISectionCodeContext | null>(null);
-export const useSectionCode = () => useContext(SectionCodeContext);
-
-interface SectionProps {
-  section: MarkdownSection;
-  sectionId: string;
-}
-
-// 1つのセクションのタイトルと内容を表示する。内容はMarkdownとしてレンダリングする
-export function Section({ section, sectionId }: SectionProps) {
-  const [replOutputs, setReplOutputs] = useState<ReplCommand[]>([]);
-  const [execResults, setExecResults] = useState<Record<string, ReplOutput[]>>(
-    {}
-  );
-  const [filenames, setFilenames] = useState<string[]>([]);
-  const { files } = useFile();
-  const fileContents: { name: string; content: string }[] = filenames.map(
-    (name) => ({ name, content: files[name] || "" })
-  );
-  const addReplOutput = useCallback(
-    (command: string, output: ReplOutput[]) =>
-      setReplOutputs((outs) => [...outs, { command, output }]),
-    []
-  );
-  const addFile = useCallback(
-    (filename: string) =>
-      setFilenames((filenames) =>
-        filenames.includes(filename) ? filenames : [...filenames, filename]
-      ),
-    []
-  );
-  const setExecResult = useCallback(
-    (filename: string, output: ReplOutput[]) =>
-      setExecResults((results) => {
-        results[filename] = output;
-        return results;
-      }),
-    []
-  );
-
-  // replOutputs: section内にあるターミナルにユーザーが入力したコマンドとその実行結果
-  // fileContents: section内にあるファイルエディターの内容
-  // execResults: section内にあるファイルの実行結果
-  // console.log(section.title, replOutputs, fileContents, execResults);
-
-  return (
-    <SectionCodeContext.Provider
-      value={{ addReplOutput, addFile, setExecResult }}
-    >
-      <div>
-        <Heading level={section.level}>{section.title}</Heading>
-        <StyledMarkdown content={section.content} />
-        <ChatForm
-          documentContent={section.content}
-          sectionId={sectionId}
-          replOutputs={replOutputs}
-          fileContents={fileContents}
-          execResults={execResults}
-        />
-      </div>
-    </SectionCodeContext.Provider>
-  );
-}
-
-export function Heading({
-  level,
-  children,
-}: {
-  level: number;
-  children: ReactNode;
-}) {
-  switch (level) {
-    case 1:
-      return <h1 className="text-2xl font-bold my-4">{children}</h1>;
-    case 2:
-      return <h2 className="text-xl font-bold mt-4 mb-3 ">{children}</h2>;
-    case 3:
-      return <h3 className="text-lg font-bold mt-4 mb-2">{children}</h3>;
-    case 4:
-      return <h4 className="text-base font-bold mt-3 mb-2">{children}</h4>;
-    case 5:
-      // TODO: これ以下は4との差がない (全体的に大きくする必要がある？)
-      return <h5 className="text-base font-bold mt-3 mb-2">{children}</h5>;
-    case 6:
-      return <h6 className="text-base font-bold mt-3 mb-2">{children}</h6>;
-  }
-}
diff --git a/app/[docs_id]/splitMarkdown.ts b/app/[docs_id]/splitMarkdown.ts
index 55fc0d0..0af31c8 100644
--- a/app/[docs_id]/splitMarkdown.ts
+++ b/app/[docs_id]/splitMarkdown.ts
@@ -6,6 +6,7 @@ export interface MarkdownSection {
   level: number;
   title: string;
   content: string;
+  rawContent: string; // 見出しも含めたもとのmarkdownの内容
 }
 /**
  * Markdownコンテンツを見出しごとに分割し、
@@ -36,6 +37,10 @@ export function splitMarkdown(content: string): MarkdownSection[] {
         .join("\n")
         .trim(),
       level: headingNodes.at(i)!.depth,
+      rawContent: splitContent
+        .slice(startLine - 1, endLine ? endLine - 1 : undefined)
+        .join("\n")
+        .trim(),
     });
   }
   return sections;
diff --git a/app/[docs_id]/themeToggle.tsx b/app/[docs_id]/themeToggle.tsx
index b9ee650..1b4fd4a 100644
--- a/app/[docs_id]/themeToggle.tsx
+++ b/app/[docs_id]/themeToggle.tsx
@@ -30,7 +30,7 @@ export function ThemeToggle() {
   }, []);
 
   return (
-    <label className="flex cursor-pointer gap-2" style={{ marginLeft: "1em" }}>
+    <label className="flex items-center cursor-pointer gap-2">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="20"
diff --git a/app/actions/chatActions.ts b/app/actions/chatActions.ts
index b126e93..7adf58e 100644
--- a/app/actions/chatActions.ts
+++ b/app/actions/chatActions.ts
@@ -1,162 +1,165 @@
 "use server";
 
-import { z } from "zod";
+// import { z } from "zod";
 import { generateContent } from "./gemini";
+import { DynamicMarkdownSection } from "../[docs_id]/pageContent";
+import { ReplCommand, ReplOutput } from "../terminal/repl";
 
 interface FormState {
   response: string;
   error: string | null;
+  targetSectionId: string;
 }
 
-const ChatSchema = z.object({
-  userQuestion: z
-    .string()
-    .min(1, { message: "メッセージを入力してください。" }),
-  documentContent: z
-    .string()
-    .min(1, { message: "コンテキストとなるドキュメントがありません。" }),
-  replOutputs: z
-    .array(
-      z.object({
-        command: z.string(),
-        output: z.array(
-          z.object({
-            type: z.enum([
-              "stdout",
-              "stderr",
-              "error",
-              "return",
-              "trace",
-              "system",
-            ]),
-            message: z.string(),
-          })
-        ),
-      })
-    )
-    .optional(),
-  fileContents: z
-    .array(
-      z.object({
-        name: z.string(),
-        content: z.string(),
-      })
-    )
-    .optional(),
-  execResults: z
-    .record(
-      z.string(),
-      z.array(
-        z.object({
-          type: z.enum([
-            "stdout",
-            "stderr",
-            "error",
-            "return",
-            "trace",
-            "system",
-          ]),
-          message: z.string(),
-        })
-      )
-    )
-    .optional(),
-});
-
-type ChatParams = z.input<typeof ChatSchema>;
+type ChatParams = {
+  userQuestion: string;
+  documentContent: string;
+  sectionContent: DynamicMarkdownSection[];
+  replOutputs: Record<string, ReplCommand[]>;
+  files: Record<string, string>;
+  execResults: Record<string, ReplOutput[]>;
+};
 
 export async function askAI(params: ChatParams): Promise<FormState> {
-  const parseResult = ChatSchema.safeParse(params);
+  // const parseResult = ChatSchema.safeParse(params);
 
-  if (!parseResult.success) {
-    return {
-      response: "",
-      error: parseResult.error.issues.map((e) => e.message).join(", "),
-    };
-  }
+  // if (!parseResult.success) {
+  //   return {
+  //     response: "",
+  //     error: parseResult.error.issues.map((e) => e.message).join(", "),
+  //   };
+  // }
 
   const {
     userQuestion,
     documentContent,
+    sectionContent,
     replOutputs,
-    fileContents,
+    files,
     execResults,
-  } = parseResult.data;
+  } = params;
 
-  try {
-    // ターミナルログの文字列を構築
-    let terminalLogsSection = "";
-    if (replOutputs && replOutputs.length > 0) {
-      terminalLogsSection =
-        "\n# ターミナルのログ（ユーザーが入力したコマンドとその実行結果）\n";
-      for (const replCmd of replOutputs) {
-        terminalLogsSection += `\n## コマンド: ${replCmd.command}\n`;
-        terminalLogsSection += "```\n";
+  const prompt: string[] = [];
+
+  prompt.push(
+    `以下のPythonチュートリアルのドキュメントの内容を正確に理解し、ユーザーからの質問に対して、初心者にも分かりやすく、丁寧な解説を提供してください。`
+  );
+  prompt.push(``);
+  const sectionTitlesInView = sectionContent
+    .filter((s) => s.inView)
+    .map((s) => s.title)
+    .join(", ");
+  prompt.push(
+    `ユーザーはドキュメント内の ${sectionTitlesInView} の付近のセクションを閲覧している際にこの質問を行っていると推測されます。`
+  );
+  prompt.push(
+    `質問に答える際には、ユーザーが閲覧しているセクションの内容を特に考慮してください。`
+  );
+  prompt.push(``);
+  prompt.push(`# ドキュメント`);
+  prompt.push(``);
+  prompt.push(documentContent);
+  prompt.push(``);
+  if (Object.keys(replOutputs).length > 0) {
+    prompt.push(
+      `# ターミナルのログ（ユーザーが入力したコマンドとその実行結果）`
+    );
+    prompt.push(``);
+    prompt.push(
+      "以下はドキュメント内で実行例を示した各コードブロックの内容に加えてユーザーが追加で実行したコマンドです。"
+    );
+    prompt.push(
+      "例えば ```python-repl:1 のコードブロックに対してユーザーが実行したログが ターミナル #1 です。"
+    );
+    prompt.push(``);
+    for (const [replId, replCommands] of Object.entries(replOutputs)) {
+      prompt.push(`## ターミナル #${replId}`);
+      for (const replCmd of replCommands) {
+        prompt.push(`\n- コマンド: ${replCmd.command}`);
+        prompt.push("```");
         for (const output of replCmd.output) {
-          terminalLogsSection += `${output.message}\n`;
+          prompt.push(output.message);
         }
-        terminalLogsSection += "```\n";
+        prompt.push("```");
       }
+      prompt.push(``);
     }
+  }
 
-    // ファイルエディターの内容を構築
-    let fileContentsSection = "";
-    if (fileContents && fileContents.length > 0) {
-      fileContentsSection = "\n# ファイルエディターの内容\n";
-      for (const file of fileContents) {
-        fileContentsSection += `\n## ファイル: ${file.name}\n`;
-        fileContentsSection += "```\n";
-        fileContentsSection += file.content;
-        fileContentsSection += "\n```\n";
-      }
+  if (Object.keys(files).length > 0) {
+    prompt.push("# ファイルエディターの内容");
+    prompt.push(``);
+    prompt.push(
+      "以下はドキュメント内でファイルの内容を示した各コードブロックの内容に加えてユーザーが編集を加えたものです。"
+    );
+    prompt.push(
+      "例えば ```python:foo.py のコードブロックに対してユーザーが編集した後の内容が ファイル: foo.py です。"
+    );
+    prompt.push(``);
+    for (const [filename, content] of Object.entries(files)) {
+      prompt.push(`## ファイル: ${filename}`);
+      prompt.push("```");
+      prompt.push(content);
+      prompt.push("```");
+      prompt.push(``);
     }
+  }
 
-    // ファイル実行結果を構築
-    let execResultsSection = "";
-    if (execResults && Object.keys(execResults).length > 0) {
-      execResultsSection = "\n# ファイルの実行結果\n";
-      for (const [filename, outputs] of Object.entries(execResults)) {
-        execResultsSection += `\n## ファイル: ${filename}\n`;
-        execResultsSection += "```\n";
-        for (const output of outputs) {
-          execResultsSection += `${output.message}\n`;
-        }
-        execResultsSection += "```\n";
+  if (Object.keys(execResults).length > 0) {
+    prompt.push("# ファイルの実行結果");
+    prompt.push(``);
+    for (const [filename, outputs] of Object.entries(execResults)) {
+      prompt.push(`## ファイル: ${filename}`);
+      prompt.push("```");
+      for (const output of outputs) {
+        prompt.push(output.message);
       }
+      prompt.push("```");
+      prompt.push(``);
     }
+  }
 
-    const prompt = `
-以下のPythonチュートリアルのドキュメントの内容を正確に理解し、ユーザーからの質問に対して、初心者にも分かりやすく、丁寧な解説を提供してください。
-
-# ドキュメント
-${documentContent}
-${terminalLogsSection}${fileContentsSection}${execResultsSection}
-# ユーザーからの質問
-${userQuestion}
+  prompt.push("# ユーザーからの質問");
+  prompt.push(userQuestion);
+  prompt.push(``);
 
-# 指示
-- 回答はMarkdown形式で記述し、コードブロックを適切に使用してください。
-- ドキュメントの内容に基づいて回答してください。
-- ユーザーが入力したターミナルのコマンドやファイルの内容、実行結果を参考にして回答してください。
-- ユーザーへの回答のみを出力してください。
-- 必要であれば、具体的なコード例を提示してください。
-- 
+  prompt.push("# 指示");
+  prompt.push(
+    "- 回答はMarkdown形式で記述し、コードブロックを適切に使用してください。"
+  );
+  prompt.push("- ドキュメントの内容に基づいて回答してください。");
+  prompt.push(
+    "- ユーザーが入力したターミナルのコマンドやファイルの内容、実行結果を参考にして回答してください。"
+  );
+  prompt.push("- ユーザーへの回答のみを出力してください。");
+  prompt.push("- 必要であれば、具体的なコード例を提示してください。");
+  console.log(prompt);
 
-`;
-    const result = await generateContent(prompt);
+  try {
+    const result = await generateContent(prompt.join("\n"));
     const text = result.text;
     if (!text) {
       throw new Error("AIからの応答が空でした");
     }
-    return { response: text, error: null };
+    return {
+      response: text,
+      error: null,
+      // TODO: どのセクションへの回答にするかをAIに決めさせる
+      targetSectionId: sectionContent.find((s) => s.inView)?.sectionId || "",
+    };
   } catch (error: unknown) {
     console.error("Error calling Generative AI:", error);
     if (error instanceof Error) {
       return {
         response: "",
         error: `AIへのリクエスト中にエラーが発生しました: ${error.message}`,
+        targetSectionId: sectionContent.find((s) => s.inView)?.sectionId || "",
       };
     }
-    return { response: "", error: "予期せぬエラーが発生しました。" };
+    return {
+      response: "",
+      error: "予期せぬエラーが発生しました。",
+      targetSectionId: sectionContent.find((s) => s.inView)?.sectionId || "",
+    };
   }
 }
diff --git a/app/actions/questionExample.ts b/app/actions/questionExample.ts
index 5e778a6..1651227 100644
--- a/app/actions/questionExample.ts
+++ b/app/actions/questionExample.ts
@@ -8,7 +8,7 @@ const QuestionExampleSchema = z.object({
   documentContent: z.string().min(1),
 });
 
-type QuestionExampleParams = z.input<typeof QuestionExampleSchema>;
+export type QuestionExampleParams = z.input<typeof QuestionExampleSchema>;
 
 export async function getQuestionExample(
   params: QuestionExampleParams
diff --git a/app/hooks/useChathistory.ts b/app/hooks/useChathistory.ts
deleted file mode 100644
index 1a96c62..0000000
--- a/app/hooks/useChathistory.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-
-export interface Message {
-  sender: "user" | "ai";
-  text: string;
-  isError?: boolean;
-}
-
-export const useChatHistory = (sectionId: string) => {
-  const [messages, setMessages] = useState<Message[]>([]);
-
-  const CHAT_HISTORY_KEY = `my-code-chat-history-${sectionId}`;
-
-  useEffect(() => {
-    try {
-      const savedHistory = localStorage.getItem(CHAT_HISTORY_KEY);
-      if (savedHistory) {
-        setMessages(JSON.parse(savedHistory));
-      } else {
-        setMessages([]);
-      }
-    } catch (error) {
-      console.error("Failed to load chat history from localStorage", error);
-      setMessages([]);
-    }
-  }, [CHAT_HISTORY_KEY]);
-
-  const updateChatHistory = useCallback(
-    (newMessages: Message[]) => {
-      setMessages(newMessages);
-      if (newMessages.length > 0) {
-        localStorage.setItem(CHAT_HISTORY_KEY, JSON.stringify(newMessages));
-      } else {
-        localStorage.removeItem(CHAT_HISTORY_KEY);
-      }
-    },
-    [CHAT_HISTORY_KEY]
-  );
-
-  return [messages, updateChatHistory] as const;
-};
diff --git a/app/layout.tsx b/app/layout.tsx
index f6607e2..365472f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,8 +6,8 @@ import { Navbar } from "./navbar";
 import { Sidebar } from "./sidebar";
 import { ReactNode } from "react";
 import { PyodideProvider } from "./terminal/python/pyodide";
-import { FileProvider } from "./terminal/file";
 import { WandboxProvider } from "./terminal/wandbox/wandbox";
+import { EmbedContextProvider } from "./terminal/embedContext";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -24,13 +24,13 @@ export default function RootLayout({
           <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
           <div className="drawer-content flex flex-col">
             <Navbar />
-            <FileProvider>
+            <EmbedContextProvider>
               <PyodideProvider>
                 <WandboxProvider>{children}</WandboxProvider>
               </PyodideProvider>
-            </FileProvider>
+            </EmbedContextProvider>
           </div>
-          <div className="drawer-side shadow-md">
+          <div className="drawer-side shadow-md z-50">
             <label
               htmlFor="drawer-toggle"
               aria-label="close sidebar"
diff --git a/app/navbar.tsx b/app/navbar.tsx
index 393a88c..b599410 100644
--- a/app/navbar.tsx
+++ b/app/navbar.tsx
@@ -1,8 +1,13 @@
+import Link from "next/link";
 import { ThemeToggle } from "./[docs_id]/themeToggle";
 export function Navbar() {
   return (
-    <div className="navbar bg-base-200 w-full">
-      <div className="flex-none lg:hidden">
+    <>
+    {/* fixedのヘッダーの分だけスクロールするコンテンツを下に移動するためのdiv */}
+    <div className="h-16 lg:hidden" />
+
+    <div className="h-16 navbar bg-base-200 w-full fixed lg:hidden flex gap-4 z-40 shadow-md">
+      <div className="flex-none">
         {/* サイドバーを開閉するボタン */}
         <label
           htmlFor="drawer-toggle"
@@ -24,11 +29,10 @@ export function Navbar() {
           </svg>
         </label>
       </div>
-      <div className="mx-2 flex flex-row items-center px-2 font-bold text-xl lg:hidden">
-        {/* サイドバーが常時表示されている場合のみ */}
-        <span className="flex-1">Navbar Title</span>
-        <ThemeToggle />
-      </div>
+      {/* サイドバーが常時表示されている場合のみ */}
+      <Link href="/" className="flex-1 font-bold text-xl">my.code();</Link>
+      <ThemeToggle />
     </div>
+    </>
   );
 }
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
index 2107648..8e263ab 100644
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@@ -20,11 +20,36 @@ export function Sidebar() {
   return (
     <div className="bg-base-200 h-full w-80 overflow-y-auto">
       {/* todo: 背景色ほんとにこれでいい？ */}
-      <h2 className="hidden lg:flex flex-row items-center text-xl font-bold p-4">
+      <h2 className="hidden lg:flex flex-row items-center p-4">
         {/* サイドバーが常時表示されている場合のみ */}
-        <span className="flex-1">Navbar Title</span>
+        <Link href="/" className="flex-1 text-xl font-bold">
+          my.code();
+        </Link>
         <ThemeToggle />
       </h2>
+      <span className="block lg:hidden p-4 pb-0">
+        <label
+          htmlFor="drawer-toggle"
+          aria-label="open sidebar"
+          className="btn btn-ghost"
+        >
+          <svg
+            className="w-8 h-8"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M18 17L13 12L18 7M11 17L6 12L11 7"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <span className="text-lg">Close</span>
+        </label>
+      </span>
 
       <ul className="menu w-full">
         {pagesList.map((group) => (
diff --git a/app/terminal/editor.tsx b/app/terminal/editor.tsx
index bed41ed..be362f8 100644
--- a/app/terminal/editor.tsx
+++ b/app/terminal/editor.tsx
@@ -20,11 +20,10 @@ const AceEditor = dynamic(
   { ssr: false }
 );
 import "./editor.css";
-import { useFile } from "./file";
 import { useEffect } from "react";
-import { useSectionCode } from "../[docs_id]/section";
 import clsx from "clsx";
 import { useChangeTheme } from "../[docs_id]/themeToggle";
+import { useEmbedContext } from "./embedContext";
 // snippetを有効化するにはsnippetもimportする必要がある: import "ace-builds/src-min-noconflict/snippets/python";
 
 // mode-xxxx.js のファイル名と、AceEditorの mode プロパティの値が対応する
@@ -39,16 +38,13 @@ interface EditorProps {
 }
 export function EditorComponent(props: EditorProps) {
   const theme = useChangeTheme();
-  const { files, writeFile } = useFile();
+  const { files, writeFile } = useEmbedContext();
   const code = files[props.filename] || props.initContent;
-  const sectionContext = useSectionCode();
-  const addSectionFile = sectionContext?.addFile;
   useEffect(() => {
     if (!files[props.filename]) {
       writeFile(props.filename, props.initContent);
     }
-    addSectionFile?.(props.filename);
-  }, [files, props.filename, props.initContent, writeFile, addSectionFile]);
+  }, [files, props.filename, props.initContent, writeFile]);
 
   return (
     <div className="embedded-editor">
diff --git a/app/terminal/embedContext.tsx b/app/terminal/embedContext.tsx
new file mode 100644
index 0000000..8749307
--- /dev/null
+++ b/app/terminal/embedContext.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { ReplCommand, ReplOutput } from "./repl";
+
+/*
+ファイルの内容や埋め込みターミナルのログを1箇所でまとめて管理し、書き込み・読み込みできるようにする
+
+ファイルはページのURLごとに独立して管理し、常にすべて保持している。
+ターミナルのログもページごとに独立だが、ページが切り替わるたびに消す。
+*/
+
+// 全部stringだけどわかりやすくするために名前をつけている
+type PagePathname = string;
+type Filename = string;
+type TerminalId = string;
+
+interface IEmbedContext {
+  files: Record<Filename, string>;
+  writeFile: (name: Filename, content: string) => void;
+
+  replOutputs: Record<TerminalId, ReplCommand[]>;
+  addReplOutput: (
+    terminalId: TerminalId,
+    command: string,
+    output: ReplOutput[]
+  ) => void;
+
+  execResults: Record<Filename, ReplOutput[]>;
+  setExecResult: (filename: Filename, output: ReplOutput[]) => void;
+}
+const EmbedContext = createContext<IEmbedContext>(null!);
+
+export function useEmbedContext() {
+  const context = useContext(EmbedContext);
+  if (!context) {
+    throw new Error(
+      "useEmbedContext must be used within a EmbedContextProvider"
+    );
+  }
+  return context;
+}
+
+export function EmbedContextProvider({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+
+  const [currentPathname, setCurrentPathname] = useState<PagePathname>("");
+  const [files, setFiles] = useState<
+    Record<PagePathname, Record<Filename, string>>
+  >({});
+  const [replOutputs, setReplOutputs] = useState<
+    Record<TerminalId, ReplCommand[]>
+  >({});
+  const [execResults, setExecResults] = useState<
+    Record<Filename, ReplOutput[]>
+  >({});
+  // pathnameが変わったらデータを初期化
+  useEffect(() => {
+    if (pathname && pathname !== currentPathname) {
+      setCurrentPathname(pathname);
+      setReplOutputs({});
+      setExecResults({});
+    }
+  }, [pathname, currentPathname]);
+
+  const writeFile = useCallback(
+    (name: Filename, content: string) => {
+      setFiles((files) => {
+        if (files[pathname]?.[name] !== content) {
+          files = { ...files };
+          files[pathname] = { ...(files[pathname] ?? {}) };
+          files[pathname][name] = content;
+          return files;
+        } else {
+          return files;
+        }
+      });
+    },
+    [pathname]
+  );
+  const addReplOutput = useCallback(
+    (terminalId: TerminalId, command: string, output: ReplOutput[]) =>
+      setReplOutputs((outs) => {
+        outs = { ...outs };
+        if (!(terminalId in outs)) {
+          outs[terminalId] = [];
+        }
+        outs[terminalId] = [
+          ...outs[terminalId],
+          { command: command, output: output },
+        ];
+        return outs;
+      }),
+    []
+  );
+  const setExecResult = useCallback(
+    (filename: Filename, output: ReplOutput[]) =>
+      setExecResults((results) => {
+        results = { ...results };
+        results[filename] = output;
+        return results;
+      }),
+    []
+  );
+
+  return (
+    <EmbedContext.Provider
+      value={{
+        files: files[pathname] || {},
+        writeFile,
+        replOutputs,
+        addReplOutput,
+        execResults,
+        setExecResult,
+      }}
+    >
+      {children}
+    </EmbedContext.Provider>
+  );
+}
diff --git a/app/terminal/exec.tsx b/app/terminal/exec.tsx
index 7bb2a29..f720834 100644
--- a/app/terminal/exec.tsx
+++ b/app/terminal/exec.tsx
@@ -8,10 +8,10 @@ import {
   systemMessageColor,
   useTerminal,
 } from "./terminal";
-import { useSectionCode } from "../[docs_id]/section";
 import { useWandbox } from "./wandbox/wandbox";
 import { ReplOutput, writeOutput } from "./repl";
 import { useState } from "react";
+import { useEmbedContext } from "./embedContext";
 
 export type ExecLang = "python" | "cpp";
 
@@ -34,7 +34,7 @@ export function ExecFile(props: ExecProps) {
       }
     },
   });
-  const sectionContext = useSectionCode();
+  const sectionContext = useEmbedContext();
 
   const pyodide = usePyodide();
   const wandbox = useWandbox();
diff --git a/app/terminal/file.tsx b/app/terminal/file.tsx
deleted file mode 100644
index 1fcd476..0000000
--- a/app/terminal/file.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-import {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useState,
-} from "react";
-
-/*
-ファイルの内容を1箇所でまとめて管理する。
-  const [code, setCode] = useState("")
-の代わりに
-  const {files, writeFile} = useFile();
-  files["ファイル名"]
-でどこからでも同じファイルの中身を取得でき、
-writeFile() で書き込むこともできる。
-
-ファイルはページのURLごとに独立して管理している。
-*/
-interface IFileContext {
-  files: Record<string, string | undefined>;
-  writeFile: (name: string, content: string) => void;
-}
-const FileContext = createContext<IFileContext>(null!);
-
-export const useFile = () => useContext(FileContext);
-
-export function FileProvider({ children }: { children: ReactNode }) {
-  const [files, setFiles] = useState<Record<string, Record<string, string>>>(
-    {}
-  );
-  const pathname = usePathname();
-  if (!(pathname in files)) {
-    files[pathname] = {};
-  }
-  const writeFile = useCallback(
-    (name: string, content: string) => {
-      setFiles((files) => {
-        if (files[pathname][name] !== content) {
-          files[pathname][name] = content;
-          // Reactが変更を検知できるようfiles[pathname]をコピーした別オブジェクトに置き換え
-          files[pathname] = { ...files[pathname] };
-          return { ...files };
-        } else {
-          return files;
-        }
-      });
-    },
-    [pathname]
-  );
-
-  return (
-    <FileContext.Provider value={{ files: files[pathname], writeFile }}>
-      {children}
-    </FileContext.Provider>
-  );
-}
diff --git a/app/terminal/python/embedded.tsx b/app/terminal/python/embedded.tsx
index cd7a4d2..26e9788 100644
--- a/app/terminal/python/embedded.tsx
+++ b/app/terminal/python/embedded.tsx
@@ -4,13 +4,20 @@ import { useMemo } from "react";
 import { ReplTerminal, ReplOutput, ReplCommand } from "../repl";
 import { usePyodide } from "./pyodide";
 
-export function PythonEmbeddedTerminal({ content }: { content: string }) {
+export function PythonEmbeddedTerminal({
+  terminalId,
+  content,
+}: {
+  terminalId: string;
+  content: string;
+}) {
   const initCommands = useMemo(() => splitContents(content), [content]);
   const { init, initializing, ready, runPython, checkSyntax, mutex } =
     usePyodide();
 
   return (
     <ReplTerminal
+      terminalId={terminalId}
       initRuntime={init}
       runtimeInitializing={initializing}
       runtimeReady={ready}
diff --git a/app/terminal/python/page.tsx b/app/terminal/python/page.tsx
index 0e7f6c1..6155142 100644
--- a/app/terminal/python/page.tsx
+++ b/app/terminal/python/page.tsx
@@ -11,6 +11,7 @@ export default function PythonPage() {
   return (
     <div className="p-4 flex flex-col gap-4">
       <ReplTerminal
+        terminalId=""
         initRuntime={init}
         runtimeInitializing={initializing}
         runtimeReady={ready}
diff --git a/app/terminal/python/pyodide.tsx b/app/terminal/python/pyodide.tsx
index 3f75202..6dfb392 100644
--- a/app/terminal/python/pyodide.tsx
+++ b/app/terminal/python/pyodide.tsx
@@ -13,7 +13,7 @@ import {
 import { SyntaxStatus, ReplOutput } from "../repl";
 import { Mutex, MutexInterface } from "async-mutex";
 import { PyCallable } from "pyodide/ffi";
-import { useFile } from "../file";
+import { useEmbedContext } from "../embedContext";
 
 declare global {
   interface Window {
@@ -103,7 +103,7 @@ export function PyodideProvider({ children }: { children: ReactNode }) {
   const [initializing, setInitializing] = useState<boolean>(false);
   const pyodideOutput = useRef<ReplOutput[]>([]);
   const mutex = useRef<MutexInterface>(new Mutex());
-  const { files, writeFile } = useFile();
+  const { files, writeFile } = useEmbedContext();
 
   const init = useCallback(async () => {
     // next.config.ts 内でpyodideをimportし、バージョンを取得している
diff --git a/app/terminal/repl.tsx b/app/terminal/repl.tsx
index 5cbda66..4c2e8d5 100644
--- a/app/terminal/repl.tsx
+++ b/app/terminal/repl.tsx
@@ -12,8 +12,8 @@ import {
   systemMessageColor,
   useTerminal,
 } from "./terminal";
-import { useSectionCode } from "../[docs_id]/section";
 import { Terminal } from "@xterm/xterm";
+import { useEmbedContext } from "./embedContext";
 
 export interface ReplOutput {
   type: "stdout" | "stderr" | "error" | "return" | "trace" | "system"; // 出力の種類
@@ -58,6 +58,7 @@ export function writeOutput(
 }
 
 interface ReplComponentProps {
+  terminalId: string;
   initRuntime: () => void;
   runtimeInitializing: boolean;
   runtimeReady: boolean;
@@ -79,10 +80,11 @@ export function ReplTerminal(props: ReplComponentProps) {
   const inputBuffer = useRef<string[]>([]);
   const initDone = useRef<boolean>(false);
 
-  const sectionContext = useSectionCode();
+  const sectionContext = useEmbedContext();
   const addReplOutput = sectionContext?.addReplOutput;
 
   const {
+    terminalId,
     initRuntime,
     runtimeInitializing,
     runtimeReady,
@@ -256,7 +258,7 @@ export function ReplTerminal(props: ReplComponentProps) {
                 sendCommand(command)
               );
               onOutput(outputs);
-              addReplOutput?.(command, outputs);
+              addReplOutput?.(terminalId, command, outputs);
             }
           } else if (code === 127) {
             // Backspace
@@ -293,6 +295,7 @@ export function ReplTerminal(props: ReplComponentProps) {
       }
     },
     [
+      terminalId,
       updateBuffer,
       sendCommand,
       onOutput,
diff --git a/app/terminal/wandbox/wandbox.tsx b/app/terminal/wandbox/wandbox.tsx
index 1ff1468..acb6008 100644
--- a/app/terminal/wandbox/wandbox.tsx
+++ b/app/terminal/wandbox/wandbox.tsx
@@ -2,10 +2,10 @@
 
 import { createContext, ReactNode, useCallback, useContext } from "react";
 import { ReplOutput } from "../repl";
-import { useFile } from "../file";
 import useSWR from "swr";
 import { compilerInfoFetcher } from "./api";
 import { cppRunFiles, getCppCommandlineStr } from "./cpp";
+import { useEmbedContext } from "../embedContext";
 
 type WandboxLang = "C++";
 
@@ -27,7 +27,7 @@ export function useWandbox() {
 }
 
 export function WandboxProvider({ children }: { children: ReactNode }) {
-  const { files } = useFile();
+  const { files } = useEmbedContext();
   const { data: compilerList, error } = useSWR("list", compilerInfoFetcher);
   if (error) {
     console.error("Failed to fetch compiler list from Wandbox:", error);