diff --git a/app/(docs)/@chat/chat/[chatId]/chatArea.tsx b/app/(docs)/@chat/chat/[chatId]/chatArea.tsx
index 63bef250..2e1d6af6 100644
--- a/app/(docs)/@chat/chat/[chatId]/chatArea.tsx
+++ b/app/(docs)/@chat/chat/[chatId]/chatArea.tsx
@@ -116,6 +116,9 @@ export function ChatAreaContent(props: Props) {
       questionScope: "page",
       sectionContent: priorSectionContent,
       deleteChatOnCreated: chatId,
+      replOutputs: chatData.replOutputs ?? {},
+      files: chatData.files ?? {},
+      execResults: chatData.execResults ?? {},
     });
   };
 
@@ -127,20 +130,28 @@ export function ChatAreaContent(props: Props) {
       <div className="flex-none breadcrumbs text-sm">
         <ul className="flex-wrap">
           <li>
-            <Link href={`/${langId}/${langEntry?.pages[0].slug}`}>
-              {langEntry?.name}
+            <Link
+              href={
+                langEntry?.pages[0]
+                  ? `/${langId}/${langEntry.pages[0].slug}`
+                  : `/${langId}/sandbox`
+              }
+            >
+              {langEntry?.name ?? langId}
             </Link>
           </li>
           <li>
             <Link href={`/${chatData.section.pagePath}`}>
-              {pageEntry?.index}. {pageEntry?.name}
-            </Link>
-          </li>
-          <li>
-            <Link href={`/${chatData.section.pagePath}#${chatData.sectionId}`}>
-              {targetSection?.title}
+              {pageEntry ? `${pageEntry.index}. ${pageEntry.name}` : "Sandbox"}
             </Link>
           </li>
+          {targetSection?.title && targetSection.title !== "sandbox" && (
+            <li>
+              <Link href={`/${chatData.section.pagePath}#${chatData.sectionId}`}>
+                {targetSection.title}
+              </Link>
+            </li>
+          )}
         </ul>
       </div>
       <div className="flex flex-wrap items-center gap-2">
diff --git a/app/(docs)/@docs/[lang]/[pageId]/chatForm.tsx b/app/(docs)/@docs/[lang]/[pageId]/chatForm.tsx
index 71f0a96a..f77ee613 100644
--- a/app/(docs)/@docs/[lang]/[pageId]/chatForm.tsx
+++ b/app/(docs)/@docs/[lang]/[pageId]/chatForm.tsx
@@ -14,6 +14,7 @@ import {
 // import { getLanguageName } from "../pagesList";
 import { DynamicMarkdownSection, PagePath } from "@/lib/docs";
 import { useSendChat } from "@/(docs)/useSendChat";
+import { useEmbedContext } from "@/terminal/embedContext";
 
 interface ChatFormProps {
   path: PagePath;
@@ -30,6 +31,7 @@ export function ChatForm({ path, langName, sectionContent, close }: ChatFormProp
   );
 
   const { sendChat, isLoading, errorMessage } = useSendChat();
+  const { files, replOutputs, execResults } = useEmbedContext();
 
   const exampleData = useMemo(
     () =>
@@ -70,6 +72,9 @@ export function ChatForm({ path, langName, sectionContent, close }: ChatFormProp
       userQuestion,
       questionScope,
       sectionContent,
+      files,
+      replOutputs,
+      execResults,
       onSuccess: () => {
         setInputValue("");
         close();
diff --git a/app/(docs)/@docs/[lang]/[pageId]/page.tsx b/app/(docs)/@docs/[lang]/[pageId]/page.tsx
index 1e0c03c3..b0e5d67e 100644
--- a/app/(docs)/@docs/[lang]/[pageId]/page.tsx
+++ b/app/(docs)/@docs/[lang]/[pageId]/page.tsx
@@ -17,6 +17,7 @@ import {
 } from "@/lib/docs";
 import { DocsAutoRedirect } from "./autoRedirect";
 import { TermDefinitionProvider } from "@/markdown/term";
+import { EmbedContextProvider } from "@/terminal/embedContext";
 
 export async function generateMetadata({
   params,
@@ -68,19 +69,21 @@ export default async function Page({
 
   return (
     <>
-      <TermDefinitionProvider
-        termDefinitions={termDefinitions}
-        lang={lang}
-        page={pageId}
-      >
-        <PageContent
-          chatHistories={chatHistories}
-          splitMdContent={splitMdContent}
-          langId={lang}
-          pageSlug={pageId}
-          path={path}
-        />
-      </TermDefinitionProvider>
+      <EmbedContextProvider lang={lang} pageId={pageId}>
+        <TermDefinitionProvider
+          termDefinitions={termDefinitions}
+          lang={lang}
+          page={pageId}
+        >
+          <PageContent
+            chatHistories={chatHistories}
+            splitMdContent={splitMdContent}
+            langId={lang}
+            pageSlug={pageId}
+            path={path}
+          />
+        </TermDefinitionProvider>
+      </EmbedContextProvider>
       <DocsAutoRedirect path={path} />
     </>
   );
diff --git a/app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx b/app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx
index 7beb8036..95453b1f 100644
--- a/app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx
+++ b/app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx
@@ -19,7 +19,6 @@ import Link from "next/link";
 import { useChatId } from "@/(docs)/chatAreaState";
 import { ChatWithMessages } from "@/lib/chatHistory";
 import { usePagesListForLang } from "@/pagesListContext";
-import { useEmbedContext } from "@/terminal/embedContext";
 import { useRouter } from "next/navigation";
 import { revalidateChatAction } from "@/actions/revalidateChat";
 import { RegenerateStreamEvent } from "@/api/chat/regenerate-section/route";
@@ -167,10 +166,12 @@ export function PageContent(props: PageContentProps) {
   );
 }
 
-function ChatListForSection(props: {
+export function ChatListForSection(props: {
   dynamicMdContent: DynamicMarkdownSection[];
   sectionId: SectionId;
   chatHistories: ChatWithMessages[];
+  fullWidth?: boolean;
+  className?: string;
 }) {
   const { dynamicMdContent, sectionId, chatHistories } = props;
   const filteredChatHistories = chatHistories.filter(
@@ -195,10 +196,15 @@ function ChatListForSection(props: {
       */}
       <ul
         className={clsx(
-          chatId === null
-            ? "hidden has-chat-1:block"
-            : "hidden has-chat-2:block",
-          "mt-2 ml-4 w-full max-w-chat-list",
+          props.className,
+          props.fullWidth
+            ? ""
+            : clsx(
+                chatId === null
+                  ? "hidden has-chat-1:block"
+                  : "hidden has-chat-2:block",
+                "mt-2 ml-4 w-full max-w-chat-list"
+              ),
           "menu menu-sm",
           "rounded-lg shadow-sm bg-base-200"
         )}
@@ -223,40 +229,42 @@ function ChatListForSection(props: {
         ))}
       </ul>
       {/*xl未満 or xl以上でチャットを表示している → 小さいボタンを表示*/}
-      <details
-        className={clsx(
-          chatId === null
-            ? "block has-chat-1:hidden"
-            : "block has-chat-2:block",
-          "dropdown dropdown-end",
-          "mt-2 ml-2"
-        )}
-      >
-        <summary className="btn btn-outline btn-secondary btn-sm">
-          <ChatIcon />
-          {filteredChatHistories.length}
-        </summary>
-        <ul
+      {!props.fullWidth && (
+        <details
           className={clsx(
-            "menu menu-sm dropdown-content",
-            "w-max max-w-[75vw]",
-            "z-30",
-            "rounded-lg shadow-sm bg-base-200/60 backdrop-blur-xs"
+            chatId === null
+              ? "block has-chat-1:hidden"
+              : "block has-chat-2:hidden",
+            "mt-2 ml-2",
+            "dropdown dropdown-end"
           )}
         >
-          {filteredChatHistories.map(({ title, chatId }) => (
-            <li key={chatId}>
-              <Link
-                className="text-wrap text-justify"
-                href={`/chat/${chatId}`}
-                scroll={false}
-              >
-                {title}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </details>
+          <summary className="btn btn-outline btn-secondary btn-sm">
+            <ChatIcon />
+            {filteredChatHistories.length}
+          </summary>
+          <ul
+            className={clsx(
+              "menu menu-sm dropdown-content",
+              "w-max max-w-[75vw]",
+              "z-30",
+              "rounded-lg shadow-sm bg-base-200/60 backdrop-blur-xs"
+            )}
+          >
+            {filteredChatHistories.map(({ title, chatId }) => (
+              <li key={chatId}>
+                <Link
+                  className="text-wrap text-justify"
+                  href={`/chat/${chatId}`}
+                  scroll={false}
+                >
+                  {title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </details>
+      )}
     </>
   );
 }
@@ -302,7 +310,6 @@ function OutdatedSectionAlert(props: {
     total: 0,
   });
 
-  const { files, replOutputs, execResults } = useEmbedContext();
   const router = useRouter();
 
   const handleRegenerateSection = async () => {
@@ -324,9 +331,6 @@ function OutdatedSectionAlert(props: {
         body: JSON.stringify({
           path,
           sectionId,
-          replOutputs,
-          files,
-          execResults,
         }),
       });
 
diff --git a/app/(docs)/@docs/[lang]/sandbox/page.tsx b/app/(docs)/@docs/[lang]/sandbox/page.tsx
new file mode 100644
index 00000000..92edac88
--- /dev/null
+++ b/app/(docs)/@docs/[lang]/sandbox/page.tsx
@@ -0,0 +1,50 @@
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { SandboxContent } from "./sandboxContent";
+import { getChatFromCache, initContext } from "@/lib/chatHistory";
+import { getPagesListForLang, LangId, PageSlug } from "@/lib/docs";
+import { EmbedContextProvider } from "@/terminal/embedContext";
+import { DocsAutoRedirect } from "../[pageId]/autoRedirect";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ lang: LangId }>;
+}): Promise<Metadata> {
+  const { lang } = await params;
+  const langEntry = await getPagesListForLang(lang);
+  if (!langEntry) notFound();
+
+  return {
+    title: `${langEntry.name} - Sandbox`,
+    description: `${langEntry.name} のインタラクティブなコード実行サンドボックスです。`,
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ lang: LangId }>;
+}) {
+  const { lang } = await params;
+
+  const langEntry = await getPagesListForLang(lang);
+  if (!langEntry) notFound();
+
+  const path = { lang, page: "sandbox" as PageSlug };
+  const context = await initContext();
+  const chatHistories = await getChatFromCache(path, context.userId);
+
+  return (
+    <>
+      <EmbedContextProvider lang={lang} pageId="sandbox">
+        <SandboxContent
+          langId={lang}
+          path={path}
+          chatHistories={chatHistories}
+        />
+      </EmbedContextProvider>
+      <DocsAutoRedirect path={path} />
+    </>
+  );
+}
diff --git a/app/(docs)/@docs/[lang]/sandbox/sandboxContent.tsx b/app/(docs)/@docs/[lang]/sandbox/sandboxContent.tsx
new file mode 100644
index 00000000..e93a6d8b
--- /dev/null
+++ b/app/(docs)/@docs/[lang]/sandbox/sandboxContent.tsx
@@ -0,0 +1,399 @@
+"use client";
+
+import { useState, FormEvent, useEffect, useMemo, useRef } from "react";
+import { Heading } from "@/markdown/heading";
+import { langConstants, RuntimeLang } from "@my-code/runtime/languages";
+import { ReplTerminal } from "@/terminal/repl";
+import { EditorComponent } from "@/terminal/editor";
+import { ExecFile } from "@/terminal/exec";
+import {
+  DynamicMarkdownSection,
+  LangId,
+  PagePath,
+  SectionId,
+} from "@/lib/docs";
+import { ChatWithMessages } from "@/lib/chatHistory";
+import { ChatForm } from "../[pageId]/chatForm";
+import { ChatListForSection } from "../[pageId]/pageContent";
+import { usePagesListForLang } from "@/pagesListContext";
+import { useEmbedContext } from "@/terminal/embedContext";
+import { useSidebarMdContext } from "@/sidebar";
+import clsx from "clsx";
+
+interface SandboxContentProps {
+  langId: LangId;
+  path: PagePath;
+  chatHistories: ChatWithMessages[];
+}
+
+export function SandboxContent(props: SandboxContentProps) {
+  const { langId, path, chatHistories } = props;
+  const langEntry = usePagesListForLang(langId);
+  const { setSidebarMdContent } = useSidebarMdContext();
+  const { writeFile } = useEmbedContext();
+
+  const runtimeLang = langId as RuntimeLang;
+  const language = useMemo(() => langConstants(runtimeLang), [runtimeLang]);
+
+  const [userFiles, setUserFiles] = useState<string[]>([]);
+  const [newFilename, setNewFilename] = useState("");
+  const [filenameError, setFilenameError] = useState<string | null>(null);
+
+  const [userOutputFiles, setUserOutputFiles] = useState<string[]>([]);
+  const [newOutputFilename, setNewOutputFilename] = useState("");
+  const [outputFilenameError, setOutputFilenameError] = useState<string | null>(
+    null
+  );
+
+  const [isFormVisible, setIsFormVisible] = useState(false);
+
+  // サイドバーの目次用セクション定義
+  const hasRepl = language.repl;
+  const hasEditor = true;
+  const hasAddFile = language.supportsMultiFile;
+  const hasExec = true;
+  const hasOutputFile =
+    (language.readonlyFiles && language.readonlyFiles.length > 0) ||
+    language.supportsFileOutput;
+  const hasAddOutputFile = language.supportsFileOutput;
+  const baseSections = useMemo(() => {
+    const list: Array<{ id: SectionId; title: string; level: number }> = [];
+    if (hasRepl) {
+      list.push({ id: "sandbox-repl" as SectionId, title: "REPL", level: 2 });
+    }
+    if (hasEditor) {
+      list.push({
+        id: "sandbox-editor" as SectionId,
+        title: "コード",
+        level: 2,
+      });
+    }
+    if (hasExec) {
+      list.push({ id: "sandbox-exec" as SectionId, title: "実行", level: 2 });
+    }
+    if (hasOutputFile) {
+      list.push({
+        id: "sandbox-readonly" as SectionId,
+        title: "出力ファイル",
+        level: 2,
+      });
+    }
+    return list;
+  }, [hasRepl, hasEditor, hasExec, hasOutputFile]);
+
+  const [sectionInView, setSectionInView] = useState<boolean[]>([]);
+  const sectionRefs = useRef<Map<string, HTMLElement | null>>(new Map());
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setSectionInView(
+        baseSections.map((sec) => {
+          const el = sectionRefs.current.get(sec.id);
+          if (el) {
+            const rect = el.getBoundingClientRect();
+            return (
+              rect.top < window.innerHeight * 0.9 &&
+              rect.bottom >= window.innerHeight * 0.1
+            );
+          }
+          return false;
+        })
+      );
+    };
+    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [baseSections]);
+
+  const dynamicSections: DynamicMarkdownSection[] = useMemo(() => {
+    return baseSections.map((sec, i) => ({
+      id: sec.id,
+      title: sec.title,
+      level: sec.level,
+      file: "sandbox.md",
+      rawContent: "",
+      md5: "",
+      replacedContent: "",
+      replacedRange: [],
+      inView: sectionInView[i] ?? false,
+    }));
+  }, [baseSections, sectionInView]);
+
+  useEffect(() => {
+    setSidebarMdContent(path, dynamicSections);
+  }, [dynamicSections, path, setSidebarMdContent]);
+
+  const handleAddFile = (e: FormEvent) => {
+    e.preventDefault();
+    const name = newFilename.trim();
+    if (!name) return;
+
+    // 既存ファイルチェック
+    const defaultFiles = language.sampleFiles
+      ? Object.keys(language.sampleFiles)
+      : [];
+    const readonlyFiles = language.readonlyFiles ?? [];
+    if (
+      defaultFiles.includes(name) ||
+      readonlyFiles.includes(name) ||
+      userFiles.includes(name) ||
+      userOutputFiles.includes(name)
+    ) {
+      setFilenameError("同名のファイルがすでに存在します。");
+      return;
+    }
+
+    setFilenameError(null);
+    setUserFiles((prev) => [...prev, name]);
+    writeFile({ [name]: "" });
+    setNewFilename("");
+  };
+
+  const handleRemoveFile = (filename: string) => {
+    setUserFiles((prev) => prev.filter((f) => f !== filename));
+  };
+
+  const handleAddOutputFile = (e: FormEvent) => {
+    e.preventDefault();
+    const name = newOutputFilename.trim();
+    if (!name) return;
+
+    // 既存ファイルチェック
+    const defaultFiles = language.sampleFiles
+      ? Object.keys(language.sampleFiles)
+      : [];
+    const readonlyFiles = language.readonlyFiles ?? [];
+    if (
+      defaultFiles.includes(name) ||
+      readonlyFiles.includes(name) ||
+      userFiles.includes(name) ||
+      userOutputFiles.includes(name)
+    ) {
+      setOutputFilenameError("同名のファイルがすでに存在します。");
+      return;
+    }
+
+    setOutputFilenameError(null);
+    setUserOutputFiles((prev) => [...prev, name]);
+    writeFile({ [name]: "" });
+    setNewOutputFilename("");
+  };
+
+  const handleRemoveOutputFile = (filename: string) => {
+    setUserOutputFiles((prev) => prev.filter((f) => f !== filename));
+  };
+
+  return (
+    <div className="flex-1 p-4 pb-16 flex flex-col max-w-docs mx-auto w-full">
+      <Heading level={1}>{langEntry?.name ?? langId} Sandbox</Heading>
+      <p className="mx-1">
+        ブラウザ上で動作する {langEntry?.name} の実行環境です。
+        このページでは自由にコードを書いて試したり、コードについてAIに質問することもできます。
+      </p>
+
+      <div className="flex flex-col sm:flex-row justify-between p-2 gap-2 w-full">
+        <ul className="text-sm flex-none">
+          {(
+            [
+              [hasRepl, "REPLでの実行"],
+              [hasExec, "ファイル実行"],
+              [hasAddFile, "複数ファイル対応"],
+              [hasAddOutputFile, "ファイル出力対応"],
+            ] as const
+          ).map(([enabled, name]) => (
+            <li
+              key={name}
+              className={clsx(
+                "my-1",
+                !enabled &&
+                  "line-through text-base-content/50 decoration-current"
+              )}
+            >
+              <span
+                className={clsx("mr-1 status", enabled && "status-accent")}
+              />
+              {name}
+            </li>
+          ))}
+        </ul>
+
+        <ChatListForSection
+          sectionId={"sandbox" as SectionId}
+          dynamicMdContent={dynamicSections}
+          chatHistories={chatHistories}
+          fullWidth
+          className="w-full sm:w-[unset]"
+        />
+      </div>
+
+      {/* 1. REPL */}
+      {hasRepl && (
+        <section
+          id="sandbox-repl"
+          ref={(el) => {
+            sectionRefs.current.set("sandbox-repl", el);
+          }}
+        >
+          <Heading level={2}>REPL</Heading>
+          <ReplTerminal
+            terminalId={`sandbox-${langId}`}
+            language={langConstants(runtimeLang)}
+            initContent={language.sampleReplInit}
+          />
+        </section>
+      )}
+
+      {/* 2. エディター (既存ファイル + 追加ファイル + 追加ボタン) */}
+      <section
+        id="sandbox-editor"
+        ref={(el) => {
+          sectionRefs.current.set("sandbox-editor", el);
+        }}
+      >
+        <Heading level={2}>コード</Heading>
+        {language.sampleFiles &&
+          Object.entries(language.sampleFiles).map(
+            ([filename, initContent]) => (
+              <EditorComponent
+                key={filename}
+                language={langConstants(runtimeLang)}
+                filename={filename}
+                initContent={initContent}
+              />
+            )
+          )}
+
+        {userFiles.map((filename) => (
+          <EditorComponent
+            key={filename}
+            language={langConstants(runtimeLang)}
+            filename={filename}
+            initContent=""
+            onDelete={() => handleRemoveFile(filename)}
+          />
+        ))}
+
+        {hasAddFile && (
+          <div className="mx-2 my-2 mt-4">
+            <form onSubmit={handleAddFile} className="flex items-center gap-2">
+              ファイルを追加:
+              <input
+                type="text"
+                className="input input-bordered input-sm flex-1 font-mono"
+                placeholder="追加するファイル名を入力"
+                value={newFilename}
+                onChange={(e) => {
+                  setNewFilename(e.target.value);
+                  setFilenameError(null);
+                }}
+              />
+              <button type="submit" className="btn btn-sm btn-accent">
+                ファイルを追加
+              </button>
+            </form>
+            {filenameError && (
+              <p className="text-error text-sm mt-1">{filenameError}</p>
+            )}
+          </div>
+        )}
+      </section>
+
+      {/* 3. 実行 */}
+      <section
+        id="sandbox-exec"
+        ref={(el) => {
+          sectionRefs.current.set("sandbox-exec", el);
+        }}
+      >
+        <Heading level={2}>実行</Heading>
+        <ExecFile
+          filenames={language.sampleExec!([
+            ...Object.keys(language.sampleFiles ?? {}),
+            ...userFiles,
+          ])}
+          language={langConstants(runtimeLang)}
+          content=""
+        />
+      </section>
+
+      {/* 4. 出力ファイル */}
+      {hasOutputFile && (
+        <section
+          id="sandbox-readonly"
+          ref={(el) => {
+            sectionRefs.current.set("sandbox-readonly", el);
+          }}
+        >
+          <Heading level={2}>出力ファイル</Heading>
+          {language.readonlyFiles &&
+            language.readonlyFiles.map((filename) => (
+              <EditorComponent
+                key={filename}
+                language={langConstants(runtimeLang)}
+                filename={filename}
+                initContent=""
+                readonly
+              />
+            ))}
+          {userOutputFiles.map((filename) => (
+            <EditorComponent
+              key={filename}
+              language={langConstants(runtimeLang)}
+              filename={filename}
+              initContent=""
+              readonly
+              onDelete={() => handleRemoveOutputFile(filename)}
+            />
+          ))}
+
+          {hasAddOutputFile && (
+            <div className="mx-2 my-2 mt-4">
+              <form
+                onSubmit={handleAddOutputFile}
+                className="flex items-center gap-2"
+              >
+                出力を表示するファイルを追加:
+                <input
+                  type="text"
+                  className="input input-bordered input-sm flex-1 font-mono"
+                  placeholder="追加するファイル名を入力"
+                  value={newOutputFilename}
+                  onChange={(e) => {
+                    setNewOutputFilename(e.target.value);
+                    setOutputFilenameError(null);
+                  }}
+                />
+                <button type="submit" className="btn btn-sm btn-accent">
+                  出力ファイルを追加
+                </button>
+              </form>
+              {outputFilenameError && (
+                <p className="text-error text-sm mt-1">{outputFilenameError}</p>
+              )}
+            </div>
+          )}
+        </section>
+      )}
+
+      {isFormVisible ? (
+        <div className="fixed bottom-4 right-4 left-4 has-sidebar:left-[calc(var(--container-sidebar)+1rem)] z-40">
+          <ChatForm
+            path={path}
+            langName={langEntry?.name ?? langId}
+            sectionContent={dynamicSections}
+            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)/useSendChat.ts b/app/(docs)/useSendChat.ts
index cc6719b3..727005f0 100644
--- a/app/(docs)/useSendChat.ts
+++ b/app/(docs)/useSendChat.ts
@@ -3,11 +3,14 @@
 import { useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
 import { captureException } from "@sentry/nextjs";
-import { useEmbedContext } from "@/terminal/embedContext";
 import { DynamicMarkdownSection, PagePath } from "@/lib/docs";
 import { ChatStreamEvent } from "@/api/chat/route";
 import { revalidateChatAction } from "@/actions/revalidateChat";
 import { useStreamingChatContext } from "./streamingChatContext";
+import {
+  ReplCommand,
+  ReplOutput,
+} from "@my-code/runtime/interface";
 
 export interface SendChatParams {
   path: PagePath;
@@ -16,6 +19,9 @@ export interface SendChatParams {
   sectionContent: DynamicMarkdownSection[];
   deleteChatOnCreated?: string;
   onSuccess?: () => void;
+  replOutputs?: Record<string, ReplCommand[]>;
+  files?: Record<string, string>;
+  execResults?: Record<string, ReplOutput[]>;
 }
 
 /**
@@ -25,7 +31,6 @@ export function useSendChat() {
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  const { files, replOutputs, execResults } = useEmbedContext();
   const router = useRouter();
   const streamingChatContext = useStreamingChatContext();
 
@@ -37,6 +42,9 @@ export function useSendChat() {
       sectionContent,
       deleteChatOnCreated,
       onSuccess,
+      replOutputs,
+      files,
+      execResults,
     }: SendChatParams) => {
       if (!userQuestion) return;
 
@@ -53,9 +61,9 @@ export function useSendChat() {
             userQuestion,
             questionScope,
             sectionContent,
-            replOutputs,
-            files,
-            execResults,
+            replOutputs: replOutputs ?? {},
+            files: files ?? {},
+            execResults: execResults ?? {},
             deleteChatOnCreated,
           }),
         });
@@ -163,9 +171,6 @@ export function useSendChat() {
       })();
     },
     [
-      execResults,
-      files,
-      replOutputs,
       router,
       streamingChatContext,
     ]
diff --git a/app/about/runtime/content.md b/app/about/runtime/content.md
index fadafdb0..cbf1a5fa 100644
--- a/app/about/runtime/content.md
+++ b/app/about/runtime/content.md
@@ -31,23 +31,26 @@ TypeScript は [@typescript/vfs](https://www.npmjs.com/package/@typescript/vfs)
 
 ## 外部サービスを利用して実行される言語
 
-以下の言語は、外部のコンパイル・実行サービス（[Wandbox](https://wandbox.org/)）の API を通じて実行されます。
+以下の言語は、外部のコンパイル・実行サービスの API を通じて実行されます。
 コードはサーバーに送信されてコンパイル・実行され、結果がブラウザに返されます。
-そのため、実行にはインターネット接続が必要です。
-また、入力したコードが Wandbox のサーバーに送信されることをご了承ください。
+
+> [!WARNING]
+> これらの言語の実行環境では、入力したコードが外部サーバーに送信されます。
+> 個人情報や機密情報を含むコードは入力しないようにしてください。
 
 ### C++
 
-Wandbox の g++ (GNU C++ Compiler) を使用してコンパイル・実行されます。
+[Wandbox](https://wandbox.org/) の g++ (GNU C++ Compiler) を使用してコンパイル・実行されます。
 最新の安定版コンパイラが使用され、Boost ライブラリも利用可能です。
 実行時にエラーが発生した場合は、スタックトレースが表示されます。
 
 ### Rust
 
-Wandbox の rustc (Rust コンパイラ) を使用してコンパイル・実行されます。
+[Wandbox](https://wandbox.org/) の rustc (Rust コンパイラ) を使用してコンパイル・実行されます。
 最新版のコンパイラが使用されます。
 
----
+## 実行環境の動作テスト
+
+以下のボタンをクリックすると、各言語の実行環境がお使いのブラウザで正しく動作するかどうかがテストされます。
 
-外部サービスを利用して実行される言語（C++・Rust）では、入力したコードが外部サーバーに送信されます。
-個人情報や機密情報を含むコードは入力しないようにしてください。
+<!-- page.tsx でこのmdの直後にテストコンポーネントを表示する -->
diff --git a/app/about/runtime/page.tsx b/app/about/runtime/page.tsx
index 4e9f8507..f16b1a71 100644
--- a/app/about/runtime/page.tsx
+++ b/app/about/runtime/page.tsx
@@ -1,6 +1,7 @@
 import { Metadata } from "next";
 import { StyledMarkdown } from "@/markdown/markdown";
 import content from "./content.md?raw";
+import { MochaTest } from "@/terminal/mochaTest";
 
 export const metadata: Metadata = {
   title: "コード実行環境について",
@@ -11,6 +12,7 @@ export default function RuntimePage() {
   return (
     <div className="p-4 pb-16 w-full max-w-docs mx-auto">
       <StyledMarkdown content={content} />
+      <MochaTest />
     </div>
   );
 }
diff --git a/app/api/chat/regenerate-section/route.ts b/app/api/chat/regenerate-section/route.ts
index 7efcc12d..cb0a8dfe 100644
--- a/app/api/chat/regenerate-section/route.ts
+++ b/app/api/chat/regenerate-section/route.ts
@@ -13,19 +13,12 @@ import {
   PagePathSchema,
 } from "@/lib/docs";
 import { generateSingleChat } from "@/lib/chatGenerator";
-import {
-  ReplCommandSchema,
-  ReplOutputSchema,
-} from "@my-code/runtime/interface";
 import { z } from "zod";
 import { captureException } from "@sentry/nextjs";
 
 const RegenerateSectionSchema = z.object({
   path: PagePathSchema,
   sectionId: z.string(),
-  replOutputs: z.record(z.string(), z.array(ReplCommandSchema)),
-  files: z.record(z.string(), z.string()),
-  execResults: z.record(z.string(), z.array(ReplOutputSchema)),
 });
 
 export type RegenerateStreamEvent =
@@ -51,7 +44,7 @@ export async function POST(request: NextRequest) {
   if (!parseResult.success) {
     return new Response(JSON.stringify(parseResult.error), { status: 400 });
   }
-  const { path, sectionId, replOutputs, files, execResults } = parseResult.data;
+  const { path, sectionId } = parseResult.data;
 
   const encoder = new TextEncoder();
 
@@ -115,9 +108,9 @@ export async function POST(request: NextRequest) {
               path,
               userQuestion,
               sectionContent: currentSectionContent,
-              replOutputs,
-              files,
-              execResults,
+              replOutputs: oldChat.replOutputs ?? {},
+              files: oldChat.files ?? {},
+              execResults: oldChat.execResults ?? {},
               context,
             });
             createdChatIds.push(result.chatId);
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 803b59cf..81867265 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -3,7 +3,6 @@ import { generateContentStream } from "@/lib/ai";
 import {
   addChat,
   addMessagesAndDiffs,
-  CreateChatDiff,
   deleteChat,
   initContext,
   revalidateChatOnDemand,
@@ -14,8 +13,14 @@ import {
   getPagesListForLang,
   introSectionId,
   PagePathSchema,
+  PageSlug,
   SectionId,
 } from "@/lib/docs";
+import {
+  buildChatPrompt,
+  buildRoutePrompt,
+  parseDiffsAndCleanMessage,
+} from "@/lib/chatGenerator";
 import {
   ReplCommandSchema,
   ReplOutputSchema,
@@ -67,36 +72,12 @@ export async function POST(request: NextRequest) {
   let targetSectionContent = sectionContent;
 
   if (questionScope === "language" && langEntry) {
-    const routePrompt: string[] = [];
-    routePrompt.push(
-      `あなたは${langName}言語チュートリアルの質問ルーターです。ユーザーの質問に最も関連するページslugを選んでください。`
-    );
-    routePrompt.push(``);
-    routePrompt.push("# 指示");
-    routePrompt.push(
-      "- 1行目にページslugのみを出力してください（引用符や補足説明は不要です）。"
-    );
-    routePrompt.push(
-      "- どのページにも関連しない場合は null と出力してください。"
-    );
-    routePrompt.push(``);
-    routePrompt.push("# 目次");
-    routePrompt.push(``);
-    for (const page of langEntry.pages) {
-      const sections = await getMarkdownSections(path.lang, page.slug);
-      const sectionTitles = sections
-        .map((s) => s.title.trim())
-        .filter((title) => title.length > 0)
-        .join(" / ");
-      routePrompt.push(
-        `- slug: ${page.slug} | 章題: ${page.title} | セクション: ${sectionTitles}`
-      );
-    }
-    routePrompt.push(``);
-    routePrompt.push(`# ユーザーの質問`);
-    routePrompt.push(userQuestion);
-    routePrompt.push(``);
-    routePrompt.push(`# 回答`);
+    const routePrompt = await buildRoutePrompt({
+      lang: path.lang,
+      langName,
+      pages: langEntry.pages,
+      userQuestion,
+    });
 
     let routeResult = "";
     for await (const chunk of generateContentStream(
@@ -111,7 +92,10 @@ export async function POST(request: NextRequest) {
       ?.replace(/^slug:/i, "")
       .replace(/^["'`]+|["'`.,:;]+$/g, "")
       .trim() as typeof path.page | undefined;
-    if (selectedPageSlug && langEntry.pages.some((page) => page.slug === selectedPageSlug)) {
+    if (
+      selectedPageSlug &&
+      langEntry.pages.some((page) => page.slug === selectedPageSlug)
+    ) {
       targetPath = {
         lang: path.lang,
         page: selectedPageSlug,
@@ -129,150 +113,16 @@ export async function POST(request: NextRequest) {
     }
   }
 
-  const prompt: string[] = [];
-
-  prompt.push(`あなたは${langName}言語のチュートリアルの講師をしています。`);
-  prompt.push(
-    `以下の${langName}チュートリアルのドキュメントの内容を正確に理解し、ユーザーからの質問に対して、初心者にも分かりやすく、丁寧な解説を提供してください。`
-  );
-  prompt.push(``);
-  const sectionTitlesInView = targetSectionContent
-    .filter((s) => s.inView)
-    .map((s) => s.title);
-  if (sectionTitlesInView.length > 0) {
-    prompt.push(
-      `ユーザーはドキュメント内の ${sectionTitlesInView.join(", ")} の付近のセクションを閲覧している際にこの質問を行っていると推測されます。`
-    );
-    prompt.push(
-      `質問に答える際には、ユーザーが閲覧しているセクションの内容を特に考慮してください。`
-    );
-  }
-  prompt.push(``);
-  prompt.push(
-    `質問への回答はユーザー向けのメッセージに加えて、ドキュメント自体を改訂するという形でも可能です。`
-  );
-  prompt.push(
-    `質問内容とドキュメントの内容の関連性が深く、比較的長めの解説をしたい場合、またはドキュメントへの補足がしたい場合は、そちらの形式での回答を検討してください。`
-  );
-  prompt.push(``);
-  prompt.push(`# ドキュメント`);
-  prompt.push(``);
-  for (const section of targetSectionContent) {
-    prompt.push(`[セクションid: ${section.id}]`);
-    prompt.push(section.replacedContent.trim());
-    prompt.push(``);
-  }
-  prompt.push(``);
-  if (Object.keys(replOutputs).length > 0) {
-    prompt.push(
-      `# ターミナルのログ（ユーザーが入力したコマンドとその実行結果）`
-    );
-    prompt.push(``);
-    prompt.push(
-      "以下はドキュメント内で実行例を示した各コードブロックの内容に加えてユーザーが追加で実行したコマンドです。"
-    );
-    prompt.push(
-      "例えば ```python-repl:foo のコードブロックに対してユーザーが実行したログが ターミナル #foo です。"
-    );
-    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) {
-          prompt.push(output.message);
-        }
-        prompt.push("```");
-      }
-      prompt.push(``);
-    }
-  }
-
-  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(``);
-    }
-  }
+  const isSandbox = path.page === ("sandbox" as PageSlug);
 
-  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(``);
-    }
-  }
-
-  prompt.push("# 指示");
-  prompt.push("");
-  prompt.push(
-    `- 1行目に、ユーザーの質問ともっとも関連性の高いドキュメント内のセクションのidを回答してください。`
-  );
-  prompt.push(
-    "  - idのみを出力してください。 セクションid: や括弧や引用符などは不要です。"
-  );
-  prompt.push(
-    "  - ユーザーの質問がドキュメントのどのセクションとも直接的に関連しない場合は null と出力してください。"
-  );
-  prompt.push(
-    "- 2行目に、この質問と回答を後から参照するためのわかりやすいタイトルをつけて記述してください。"
-  );
-  prompt.push(
-    "  - 太字やコードブロックなどのMarkdownの記法は使わずテキストのみで出力してください。"
-  );
-  prompt.push(
-    "- 3行目以降に、ドキュメントの内容に基づいて、ユーザーに伝える回答をMarkdown形式で記述してください。"
-  );
-  prompt.push(
-    "  - ユーザーが入力したターミナルのコマンドやファイルの内容、実行結果を参考にして回答してください。"
-  );
-  prompt.push("  - 必要であれば、具体的なコード例を提示してください。");
-  prompt.push(
-    "  - 回答内でコードブロックを使用する際は ```言語名 としてください。" +
-      "ドキュメント内では ```言語名-repl や ```言語名:ファイル名 、 ```言語名-exec:ファイル名 などの特殊なコードブロックが登場しますが、ユーザーへの回答ではこれらの記法は使用しないでください。"
-  );
-  prompt.push("- ドキュメントの一部を改訂したい場合はその差分を");
-  prompt.push("<<<<<<< SEARCH");
-  prompt.push("修正したい元の文章の塊（一字一句違わずに）");
-  prompt.push("=======");
-  prompt.push("修正後の新しい文章の塊");
-  prompt.push(">>>>>>> REPLACE");
-  prompt.push("の形式で出力してください。");
-  prompt.push(
-    "  - 複数箇所改訂したい場合は上の形式の出力を複数回繰り返してください。"
-  );
-  prompt.push(
-    "  - ドキュメントにテキストを追加したい場合は追加したい箇所の前後のテキストを含めて出力してください。"
-  );
-  prompt.push(
-    "  - セクションid、セクション見出しを編集、追加、削除することはできません。"
-  );
-  prompt.push(
-    "  - ドキュメント内の特殊なコードブロック(```言語名-repl , ```言語名:ファイル名 , ```言語名-exec:ファイル名 )は編集、追加、削除することはできません。それ以外の文章のみを編集してください。" +
-      "ただし通常のコードブロック(```言語名 )の追加は可能です。"
-  );
-  prompt.push(
-    "  - 改訂後のドキュメントと同じ内容はユーザーに伝える回答としては省略できます。(「修正後のドキュメントを参照してください。」など)"
-  );
+  const prompt = await buildChatPrompt({
+    path: targetPath,
+    targetSectionContent,
+    replOutputs,
+    files,
+    execResults,
+    langName,
+  });
 
   console.log(prompt);
 
@@ -303,12 +153,15 @@ export async function POST(request: NextRequest) {
             const headerMatch = fullText.match(/^([^\n]+?)\n+([^\n]+?)\n+/);
             if (headerMatch) {
               headerParsed = true;
-              let targetSectionId = headerMatch[1].trim() as SectionId;
+              let targetSectionId = isSandbox
+                ? ("sandbox" as SectionId)
+                : (headerMatch[1].trim() as SectionId);
               const title = headerMatch[2].trim();
 
               if (
-                !targetSectionId ||
-                !targetSectionContent.some((s) => s.id === targetSectionId)
+                !isSandbox &&
+                (!targetSectionId ||
+                  !targetSectionContent.some((s) => s.id === targetSectionId))
               ) {
                 targetSectionId = introSectionId(targetPath);
               }
@@ -338,7 +191,12 @@ export async function POST(request: NextRequest) {
                 title,
                 [{ role: "user", content: userQuestion }],
                 [],
-                context
+                context,
+                {
+                  replOutputs,
+                  files,
+                  execResults,
+                }
               );
               chatId = newChat.chatId;
 
@@ -381,23 +239,10 @@ export async function POST(request: NextRequest) {
         }
 
         // Parse diffs from the full body content
-        const diffRegex =
-          /<{3,}\s*SEARCH\n*([\s\S]*?)\n*={3,}\n*([\s\S]*?)\n*>{3,}\s*REPLACE/g;
-        const diffRaw: CreateChatDiff[] = [];
-        for (const m of contentAfterHeader.matchAll(diffRegex)) {
-          const search = m[1];
-          const replace = m[2];
-          const targetSection = targetSectionContent.find((s) =>
-            s.replacedContent.includes(search)
-          );
-          diffRaw.push({
-            search,
-            replace,
-            sectionId: targetSection?.id ?? ("" as SectionId),
-            targetMD5: targetSection?.md5 ?? "",
-          });
-        }
-        const cleanMessage = contentAfterHeader.replace(diffRegex, "").trim();
+        const { diffRaw, cleanMessage } = parseDiffsAndCleanMessage(
+          contentAfterHeader,
+          targetSectionContent
+        );
 
         // Save messages and diffs to DB
         await addMessagesAndDiffs(
@@ -421,7 +266,11 @@ export async function POST(request: NextRequest) {
 
         // クライアントでもrevalidateChatActionを呼ぶが、一応こちらでもrevalidateしておく
         if (deleteChatOnCreated) {
-          await revalidateChatOnDemand(deleteChatOnCreated, context.userId!, path);
+          await revalidateChatOnDemand(
+            deleteChatOnCreated,
+            context.userId!,
+            path
+          );
         }
         await revalidateChatOnDemand(chatId, context.userId!, path);
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 785a0e70..b2f33601 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -8,7 +8,6 @@ import "./globals.css";
 import { Navbar } from "./navbar";
 import { Sidebar } from "./sidebar";
 import { ReactNode } from "react";
-import { EmbedContextProvider } from "@/terminal/embedContext";
 import { AutoAnonymousLogin } from "./accountMenu";
 import { SidebarMdProvider } from "./sidebar";
 import { RuntimeProvider } from "@my-code/runtime/context";
@@ -52,9 +51,7 @@ export default async function RootLayout({
             />
             <div className="drawer-content flex flex-col">
               <Navbar pagesList={pagesList} />
-              <EmbedContextProvider>
-                <RuntimeProvider>{children}</RuntimeProvider>
-              </EmbedContextProvider>
+              <RuntimeProvider>{children}</RuntimeProvider>
             </div>
             <div className="drawer-side shadow-md z-50">
               <label
diff --git a/app/lib/chatGenerator.ts b/app/lib/chatGenerator.ts
index 63ba0910..4adc584e 100644
--- a/app/lib/chatGenerator.ts
+++ b/app/lib/chatGenerator.ts
@@ -7,9 +7,12 @@ import {
 } from "@/lib/chatHistory";
 import {
   DynamicMarkdownSection,
+  getMarkdownSections,
   getPagesListForLang,
   introSectionId,
+  LangId,
   PagePath,
+  PageSlug,
   SectionId,
 } from "@/lib/docs";
 import {
@@ -17,91 +20,95 @@ import {
   ReplOutput,
 } from "@my-code/runtime/interface";
 
-export interface GenerateSingleChatParams {
+export interface BuildChatPromptParams {
   path: PagePath;
-  userQuestion: string;
-  sectionContent: DynamicMarkdownSection[];
-  replOutputs: Record<string, ReplCommand[]>;
-  files: Record<string, string>;
-  execResults: Record<string, ReplOutput[]>;
-  context: Context;
-  onChunk?: (text: string) => void;
-  onChatCreated?: (chatId: string, sectionId: SectionId) => void;
-}
-
-export interface GenerateSingleChatResult {
-  chatId: string;
-  sectionId: SectionId;
-  title: string;
-  diffRaw: CreateChatDiff[];
-  cleanMessage: string;
+  targetSectionContent: DynamicMarkdownSection[];
+  replOutputs?: Record<string, ReplCommand[]>;
+  files?: Record<string, string>;
+  execResults?: Record<string, ReplOutput[]>;
+  langName?: string;
 }
 
-export async function generateSingleChat(
-  params: GenerateSingleChatParams
-): Promise<GenerateSingleChatResult> {
+export async function buildChatPrompt(
+  params: BuildChatPromptParams
+): Promise<string[]> {
   const {
     path,
-    userQuestion,
-    sectionContent,
-    replOutputs,
-    files,
-    execResults,
-    context,
-    onChunk,
-    onChatCreated,
+    targetSectionContent,
+    replOutputs = {},
+    files = {},
+    execResults = {},
   } = params;
 
-  const langEntry = await getPagesListForLang(path.lang);
-  const langName = langEntry?.name ?? path.lang;
-  const targetPath = path;
-  const targetSectionContent = sectionContent;
+  let langName = params.langName;
+  if (!langName) {
+    const langEntry = await getPagesListForLang(path.lang);
+    langName = langEntry?.name ?? path.lang;
+  }
+
+  const isSandbox = path.page === ("sandbox" as PageSlug);
 
   const prompt: string[] = [];
-  prompt.push(`あなたは${langName}言語のチュートリアルの講師をしています。`);
-  prompt.push(
-    `以下の${langName}チュートリアルのドキュメントの内容を正確に理解し、ユーザーからの質問に対して、初心者にも分かりやすく、丁寧な解説を提供してください。`
-  );
-  prompt.push(``);
-  const sectionTitlesInView = targetSectionContent
-    .filter((s) => s.inView)
-    .map((s) => s.title);
-  if (sectionTitlesInView.length > 0) {
+
+  if (isSandbox) {
     prompt.push(
-      `ユーザーはドキュメント内の ${sectionTitlesInView.join(", ")} の付近のセクションを閲覧している際にこの質問を行っていると推測されます。`
+      `あなたは${langName}プログラミングの学習者をサポートする講師AIアシスタントです。`
     );
     prompt.push(
-      `質問に答える際には、ユーザーが閲覧しているセクションの内容を特に考慮してください。`
+      `ユーザーからの質問に対して、初心者にも分かりやすく、丁寧な解説を提供してください。`
     );
-  }
-  prompt.push(``);
-  prompt.push(
-    `質問への回答はユーザー向けのメッセージに加えて、ドキュメント自体を改訂するという形でも可能です。`
-  );
-  prompt.push(
-    `質問内容とドキュメントの内容の関連性が深く、比較的長めの解説をしたい場合、またはドキュメントへの補足がしたい場合は、そちらの形式での回答を検討してください。`
-  );
-  prompt.push(``);
-  prompt.push(`# ドキュメント`);
-  prompt.push(``);
-  for (const section of targetSectionContent) {
-    prompt.push(`[セクションid: ${section.id}]`);
-    prompt.push(section.replacedContent.trim());
     prompt.push(``);
-  }
-  prompt.push(``);
-  if (Object.keys(replOutputs).length > 0) {
+  } else {
+    prompt.push(`あなたは${langName}言語のチュートリアルの講師をしています。`);
     prompt.push(
-      `# ターミナルのログ（ユーザーが入力したコマンドとその実行結果）`
+      `以下の${langName}チュートリアルのドキュメントの内容を正確に理解し、ユーザーからの質問に対して、初心者にも分かりやすく、丁寧な解説を提供してください。`
     );
     prompt.push(``);
+    const sectionTitlesInView = targetSectionContent
+      .filter((s) => s.inView)
+      .map((s) => s.title);
+    if (sectionTitlesInView.length > 0) {
+      prompt.push(
+        `ユーザーはドキュメント内の ${sectionTitlesInView.join(", ")} の付近のセクションを閲覧している際にこの質問を行っていると推測されます。`
+      );
+      prompt.push(
+        `質問に答える際には、ユーザーが閲覧しているセクションの内容を特に考慮してください。`
+      );
+    }
+    prompt.push(``);
     prompt.push(
-      "以下はドキュメント内で実行例を示した各コードブロックの内容に加えてユーザーが追加で実行したコマンドです。"
+      `質問への回答はユーザー向けのメッセージに加えて、ドキュメント自体を改訂するという形でも可能です。`
     );
     prompt.push(
-      "例えば ```python-repl:foo のコードブロックに対してユーザーが実行したログが ターミナル #foo です。"
+      `質問内容とドキュメントの内容の関連性が深く、比較的長めの解説をしたい場合、またはドキュメントへの補足がしたい場合は、そちらの形式での回答を検討してください。`
     );
     prompt.push(``);
+    prompt.push(`# ドキュメント`);
+    prompt.push(``);
+    for (const section of targetSectionContent) {
+      prompt.push(`[セクションid: ${section.id}]`);
+      prompt.push(section.replacedContent.trim());
+      prompt.push(``);
+    }
+    prompt.push(``);
+  }
+
+  if (Object.keys(replOutputs).length > 0) {
+    prompt.push(
+      `# ターミナルのログ（ユーザーが入力したコマンドとその実行結果）`
+    );
+    prompt.push(``);
+    if (isSandbox) {
+      prompt.push("以下はユーザーがREPLで実行したコマンドです。");
+    } else {
+      prompt.push(
+        "以下はドキュメント内で実行例を示した各コードブロックの内容に加えてユーザーが追加で実行したコマンドです。"
+      );
+      prompt.push(
+        "例えば ```python-repl:foo のコードブロックに対してユーザーが実行したログが ターミナル #foo です。"
+      );
+    }
+    prompt.push(``);
     for (const [replId, replCommands] of Object.entries(replOutputs)) {
       prompt.push(`## ターミナル #${replId}`);
       for (const replCmd of replCommands) {
@@ -119,12 +126,16 @@ export async function generateSingleChat(
   if (Object.keys(files).length > 0) {
     prompt.push("# ファイルエディターの内容");
     prompt.push(``);
-    prompt.push(
-      "以下はドキュメント内でファイルの内容を示した各コードブロックの内容に加えてユーザーが編集を加えたものです。"
-    );
-    prompt.push(
-      "例えば ```python:foo.py のコードブロックに対してユーザーが編集した後の内容が ファイル: foo.py です。"
-    );
+    if (isSandbox) {
+      prompt.push("以下はユーザーが編集したファイルの内容です。");
+    } else {
+      prompt.push(
+        "以下はドキュメント内でファイルの内容を示した各コードブロックの内容に加えてユーザーが編集を加えたものです。"
+      );
+      prompt.push(
+        "例えば ```python:foo.py のコードブロックに対してユーザーが編集した後の内容が ファイル: foo.py です。"
+      );
+    }
     prompt.push(``);
     for (const [filename, content] of Object.entries(files)) {
       prompt.push(`## ファイル: ${filename}`);
@@ -151,15 +162,19 @@ export async function generateSingleChat(
 
   prompt.push("# 指示");
   prompt.push("");
-  prompt.push(
-    `- 1行目に、ユーザーの質問ともっとも関連性の高いドキュメント内のセクションのidを回答してください。`
-  );
-  prompt.push(
-    "  - idのみを出力してください。 セクションid: や括弧や引用符などは不要です。"
-  );
-  prompt.push(
-    "  - ユーザーの質問がドキュメントのどのセクションとも直接的に関連しない場合は null と出力してください。"
-  );
+  if (isSandbox) {
+    prompt.push(`- 1行目に sandbox とのみ出力してください。`);
+  } else {
+    prompt.push(
+      `- 1行目に、ユーザーの質問ともっとも関連性の高いドキュメント内のセクションのidを回答してください。`
+    );
+    prompt.push(
+      "  - idのみを出力してください。 セクションid: や括弧や引用符などは不要です。"
+    );
+    prompt.push(
+      "  - ユーザーの質問がドキュメントのどのセクションとも直接的に関連しない場合は null と出力してください。"
+    );
+  }
   prompt.push(
     "- 2行目に、この質問と回答を後から参照するためのわかりやすいタイトルをつけて記述してください。"
   );
@@ -167,7 +182,7 @@ export async function generateSingleChat(
     "  - 太字やコードブロックなどのMarkdownの記法は使わずテキストのみで出力してください。"
   );
   prompt.push(
-    "- 3行目以降に、ドキュメントの内容に基づいて、ユーザーに伝える回答をMarkdown形式で記述してください。"
+    "- 3行目以降に、ユーザーに伝える回答をMarkdown形式で記述してください。"
   );
   prompt.push(
     "  - ユーザーが入力したターミナルのコマンドやファイルの内容、実行結果を参考にして回答してください。"
@@ -177,29 +192,154 @@ export async function generateSingleChat(
     "  - 回答内でコードブロックを使用する際は ```言語名 としてください。" +
       "ドキュメント内では ```言語名-repl や ```言語名:ファイル名 、 ```言語名-exec:ファイル名 などの特殊なコードブロックが登場しますが、ユーザーへの回答ではこれらの記法は使用しないでください。"
   );
-  prompt.push("- ドキュメントの一部を改訂したい場合はその差分を");
-  prompt.push("<<<<<<< SEARCH");
-  prompt.push("修正したい元の文章の塊（一字一句違わずに）");
-  prompt.push("=======");
-  prompt.push("修正後の新しい文章の塊");
-  prompt.push(">>>>>>> REPLACE");
-  prompt.push("の形式で出力してください。");
-  prompt.push(
-    "  - 複数箇所改訂したい場合は上の形式の出力を複数回繰り返してください。"
-  );
-  prompt.push(
-    "  - ドキュメントにテキストを追加したい場合は追加したい箇所の前後のテキストを含めて出力してください。"
-  );
-  prompt.push(
-    "  - セクションid、セクション見出しを編集、追加、削除することはできません。"
+
+  if (!isSandbox) {
+    prompt.push("- ドキュメントの一部を改訂したい場合はその差分を");
+    prompt.push("<<<<<<< SEARCH");
+    prompt.push("修正したい元の文章の塊（一字一句違わずに）");
+    prompt.push("=======");
+    prompt.push("修正後の新しい文章の塊");
+    prompt.push(">>>>>>> REPLACE");
+    prompt.push("の形式で出力してください。");
+    prompt.push(
+      "  - 複数箇所改訂したい場合は上の形式の出力を複数回繰り返してください。"
+    );
+    prompt.push(
+      "  - ドキュメントにテキストを追加したい場合は追加したい箇所の前後のテキストを含めて出力してください。"
+    );
+    prompt.push(
+      "  - セクションid、セクション見出しを編集、追加、削除することはできません。"
+    );
+    prompt.push(
+      "  - ドキュメント内の特殊なコードブロック(```言語名-repl , ```言語名:ファイル名 , ```言語名-exec:ファイル名 )は編集、追加、削除することはできません。それ以外の文章のみを編集してください。" +
+        "ただし通常のコードブロック(```言語名 )の追加は可能です。"
+    );
+    prompt.push(
+      "  - 改訂後のドキュメントと同じ内容はユーザーに伝える回答としては省略できます。(「修正後のドキュメントを参照してください。」など)"
+    );
+  }
+
+  return prompt;
+}
+
+export interface BuildRoutePromptParams {
+  lang: LangId;
+  langName: string;
+  pages: { slug: PageSlug; title: string }[];
+  userQuestion: string;
+}
+
+export async function buildRoutePrompt(
+  params: BuildRoutePromptParams
+): Promise<string[]> {
+  const { lang, langName, pages, userQuestion } = params;
+  const routePrompt: string[] = [];
+  routePrompt.push(
+    `あなたは${langName}言語チュートリアルの質問ルーターです。ユーザーの質問に最も関連するページslugを選んでください。`
   );
-  prompt.push(
-    "  - ドキュメント内の特殊なコードブロック(```言語名-repl , ```言語名:ファイル名 , ```言語名-exec:ファイル名 )は編集、追加、削除することはできません。それ以外の文章のみを編集してください。" +
-      "ただし通常のコードブロック(```言語名 )の追加は可能です。"
+  routePrompt.push(``);
+  routePrompt.push("# 指示");
+  routePrompt.push(
+    "- 1行目にページslugのみを出力してください（引用符や補足説明は不要です）。"
   );
-  prompt.push(
-    "  - 改訂後のドキュメントと同じ内容はユーザーに伝える回答としては省略できます。(「修正後のドキュメントを参照してください。」など)"
+  routePrompt.push(
+    "- どのページにも関連しない場合は null と出力してください。"
   );
+  routePrompt.push(``);
+  routePrompt.push("# 目次");
+  routePrompt.push(``);
+  for (const page of pages) {
+    const sections = await getMarkdownSections(lang, page.slug);
+    const sectionTitles = sections
+      .map((s) => s.title.trim())
+      .filter((title) => title.length > 0)
+      .join(" / ");
+    routePrompt.push(
+      `- slug: ${page.slug} | 章題: ${page.title} | セクション: ${sectionTitles}`
+    );
+  }
+  routePrompt.push(``);
+  routePrompt.push(`# ユーザーの質問`);
+  routePrompt.push(userQuestion);
+  routePrompt.push(``);
+  routePrompt.push(`# 回答`);
+
+  return routePrompt;
+}
+
+export function parseDiffsAndCleanMessage(
+  contentAfterHeader: string,
+  targetSectionContent: DynamicMarkdownSection[]
+): { diffRaw: CreateChatDiff[]; cleanMessage: string } {
+  const diffRegex =
+    /<{3,}\s*SEARCH\n*([\s\S]*?)\n*={3,}\n*([\s\S]*?)\n*>{3,}\s*REPLACE/g;
+  const diffRaw: CreateChatDiff[] = [];
+  for (const m of contentAfterHeader.matchAll(diffRegex)) {
+    const search = m[1];
+    const replace = m[2];
+    const targetSection = targetSectionContent.find((s) =>
+      s.replacedContent.includes(search)
+    );
+    diffRaw.push({
+      search,
+      replace,
+      sectionId: targetSection?.id ?? ("" as SectionId),
+      targetMD5: targetSection?.md5 ?? "",
+    });
+  }
+  const cleanMessage = contentAfterHeader.replace(diffRegex, "").trim();
+  return { diffRaw, cleanMessage };
+}
+
+export interface GenerateSingleChatParams {
+  path: PagePath;
+  userQuestion: string;
+  sectionContent: DynamicMarkdownSection[];
+  replOutputs: Record<string, ReplCommand[]>;
+  files: Record<string, string>;
+  execResults: Record<string, ReplOutput[]>;
+  context: Context;
+  onChunk?: (text: string) => void;
+  onChatCreated?: (chatId: string, sectionId: SectionId) => void;
+}
+
+export interface GenerateSingleChatResult {
+  chatId: string;
+  sectionId: SectionId;
+  title: string;
+  diffRaw: CreateChatDiff[];
+  cleanMessage: string;
+}
+
+export async function generateSingleChat(
+  params: GenerateSingleChatParams
+): Promise<GenerateSingleChatResult> {
+  const {
+    path,
+    userQuestion,
+    sectionContent,
+    replOutputs,
+    files,
+    execResults,
+    context,
+    onChunk,
+    onChatCreated,
+  } = params;
+
+  const langEntry = await getPagesListForLang(path.lang);
+  const langName = langEntry?.name ?? path.lang;
+  const targetPath = path;
+  const targetSectionContent = sectionContent;
+  const isSandbox = path.page === ("sandbox" as PageSlug);
+
+  const prompt = await buildChatPrompt({
+    path: targetPath,
+    targetSectionContent,
+    replOutputs,
+    files,
+    execResults,
+    langName,
+  });
 
   let fullText = "";
   let headerParsed = false;
@@ -218,12 +358,14 @@ export async function generateSingleChat(
       const headerMatch = fullText.match(/^([^\n]+?)\n+([^\n]+?)\n+/);
       if (headerMatch) {
         headerParsed = true;
-        let secId = headerMatch[1].trim() as SectionId;
+        let secId = isSandbox
+          ? ("sandbox" as SectionId)
+          : (headerMatch[1].trim() as SectionId);
         title = headerMatch[2].trim();
 
         if (
-          !secId ||
-          !targetSectionContent.some((s) => s.id === secId)
+          !isSandbox &&
+          (!secId || !targetSectionContent.some((s) => s.id === secId))
         ) {
           secId = introSectionId(targetPath);
         }
@@ -239,7 +381,12 @@ export async function generateSingleChat(
           title,
           [{ role: "user", content: userQuestion }],
           [],
-          context
+          context,
+          {
+            replOutputs,
+            files,
+            execResults,
+          }
         );
         chatId = newChat.chatId;
 
@@ -262,23 +409,10 @@ export async function generateSingleChat(
     throw new Error("AIからの応答の形式が正しくありませんでした");
   }
 
-  const diffRegex =
-    /<{3,}\s*SEARCH\n*([\s\S]*?)\n*={3,}\n*([\s\S]*?)\n*>{3,}\s*REPLACE/g;
-  const diffRaw: CreateChatDiff[] = [];
-  for (const m of contentAfterHeader.matchAll(diffRegex)) {
-    const search = m[1];
-    const replace = m[2];
-    const targetSection = targetSectionContent.find((s) =>
-      s.replacedContent.includes(search)
-    );
-    diffRaw.push({
-      search,
-      replace,
-      sectionId: targetSection?.id ?? ("" as SectionId),
-      targetMD5: targetSection?.md5 ?? "",
-    });
-  }
-  const cleanMessage = contentAfterHeader.replace(diffRegex, "").trim();
+  const { diffRaw, cleanMessage } = parseDiffsAndCleanMessage(
+    contentAfterHeader,
+    targetSectionContent
+  );
 
   await addMessagesAndDiffs(
     chatId,
diff --git a/app/lib/chatHistory.ts b/app/lib/chatHistory.ts
index daca57b9..69cfbf20 100644
--- a/app/lib/chatHistory.ts
+++ b/app/lib/chatHistory.ts
@@ -16,6 +16,10 @@ import {
   SectionWithDiff,
 } from "./docs";
 import { dateReviver } from "./dateReviver";
+import {
+  ReplCommand,
+  ReplOutput,
+} from "@my-code/runtime/interface";
 
 export interface CreateChatMessage {
   role: "user" | "ai" | "error";
@@ -128,24 +132,46 @@ export async function initContext(ctx?: Partial<Context>): Promise<Context> {
   return ctx as Context;
 }
 
+export interface CreateChatCodeContext {
+  replOutputs?: Record<string, ReplCommand[]>;
+  files?: Record<string, string>;
+  execResults?: Record<string, ReplOutput[]>;
+}
+
 export async function addChat(
   path: PagePath,
   sectionId: SectionId,
   title: string,
   messages: CreateChatMessage[],
   diffRaw: CreateChatDiff[],
-  context: Context
+  context: Context,
+  codeContext: CreateChatCodeContext = {}
 ) {
   const { drizzle, userId } = context;
   if (!userId) {
     throw new Error("Not authenticated");
   }
+
+  await drizzle
+    .insert(section)
+    .values({
+      sectionId,
+      pagePath: `${path.lang}/${path.page}`,
+    })
+    .onConflictDoUpdate({
+      target: section.sectionId,
+      set: { pagePath: `${path.lang}/${path.page}` },
+    });
+
   const [newChat] = await drizzle
     .insert(chat)
     .values({
       userId,
       sectionId,
       title,
+      replOutputs: codeContext.replOutputs ?? {},
+      files: codeContext.files ?? {},
+      execResults: codeContext.execResults ?? {},
     })
     .returning();
 
diff --git a/app/lib/docs.ts b/app/lib/docs.ts
index 4b8155fd..de1ec332 100644
--- a/app/lib/docs.ts
+++ b/app/lib/docs.ts
@@ -296,6 +296,22 @@ export async function getMarkdownSections(
   lang: LangId,
   page: PageSlug
 ): Promise<MarkdownSection[]> {
+  if (page === ("sandbox" as PageSlug)) {
+    if (!(await getLanguageIds()).includes(lang)) {
+      notFound();
+    }
+    return [
+      {
+        file: "sandbox.md",
+        id: "sandbox" as SectionId,
+        level: 1,
+        title: "sandbox",
+        rawContent: "",
+        md5: "",
+      },
+    ];
+  }
+
   if (
     /*!(await getLanguageIds()).includes(lang) || // getPagesListForLangのなかでチェック */
     !(await getPagesListForLang(lang)).pages.some((p) => p.slug === page)
diff --git a/app/schema/chat.ts b/app/schema/chat.ts
index 47cfc5be..c9948541 100644
--- a/app/schema/chat.ts
+++ b/app/schema/chat.ts
@@ -1,5 +1,6 @@
 import { relations } from "drizzle-orm";
-import { pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
+import { jsonb, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
+import { ReplCommand, ReplOutput } from "@my-code/runtime/interface";
 
 export const chat = pgTable("chat", {
   chatId: uuid("chatId").primaryKey().defaultRandom(),
@@ -7,6 +8,18 @@ export const chat = pgTable("chat", {
   sectionId: text("sectionId").notNull(),
   createdAt: timestamp("createdAt").notNull().defaultNow(),
   title: text("title").notNull().default("new chat"),
+  replOutputs: jsonb("replOutputs")
+    .$type<Record<string, ReplCommand[]>>()
+    .notNull()
+    .default({}),
+  files: jsonb("files")
+    .$type<Record<string, string>>()
+    .notNull()
+    .default({}),
+  execResults: jsonb("execResults")
+    .$type<Record<string, ReplOutput[]>>()
+    .notNull()
+    .default({}),
 });
 
 export const section = pgTable("section", {
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
index 1615ee93..dab14b0e 100644
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@@ -90,7 +90,10 @@ export function Sidebar() {
 
   // 現在表示中のセクション（最初にinViewがtrueのもの）を見つける
   const currentSectionId = sidebarMdContent.find(
-    (section, i) => i >= 1 && section.inView
+    (section, i) =>
+      Boolean(section.title) &&
+      (currentPageId === ("sandbox" as PageSlug) || i >= 1) &&
+      section.inView
   )?.id;
 
   // 目次の開閉状態
@@ -181,6 +184,54 @@ export function Sidebar() {
                 {group.name}
               </summary>
               <ul>
+                <li>
+                  <Link
+                    href={`/${group.id}/sandbox`}
+                    className={clsx(
+                      "text-wrap text-justify",
+                      group.id === currentLang &&
+                        currentPageId === ("sandbox" as PageSlug) &&
+                        "menu-active"
+                    )}
+                  >
+                    <svg
+                      fill="currentColor"
+                      viewBox="0 0 256 256"
+                      className="w-5 h-5"
+                    >
+                      <g id="SVGRepo_iconCarrier">
+                        <path d="M215.51465,39.51465H40.48535a16.99025,16.99025,0,0,0-16.9707,16.9707v143.0293a16.99025,16.99025,0,0,0,16.9707,16.9707h175.0293a16.99025,16.99025,0,0,0,16.9707-16.9707V56.48535A16.99025,16.99025,0,0,0,215.51465,39.51465Zm-94.51758,94.73242-40,32a7.99979,7.99979,0,1,1-9.99414-12.49414L103.19336,128,71.00293,102.24707a7.99979,7.99979,0,1,1,9.99414-12.49414l40,32a7.99943,7.99943,0,0,1,0,12.49414ZM179.99414,168h-40a8,8,0,0,1,0-16h40a8,8,0,1,1,0,16Z"></path>
+                      </g>
+                    </svg>
+                    Sandbox
+                  </Link>
+                  {group.id === currentLang &&
+                    currentPageId === ("sandbox" as PageSlug) &&
+                    sidebarMdContent.length > 0 && (
+                      <ul className="ml-4 text-sm">
+                        {sidebarMdContent.map((section) => (
+                          <li
+                            key={section.id}
+                            style={{
+                              marginLeft: `${Math.max(0, section.level - 2)}em`,
+                            }}
+                          >
+                            <Link
+                              href={`#${section.id}`}
+                              className={clsx(
+                                "text-wrap text-justify",
+                                currentSectionId === section.id
+                                  ? "font-bold"
+                                  : ""
+                              )}
+                            >
+                              {section.title}
+                            </Link>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                </li>
                 {group.pages.map((page) => (
                   <li key={page.slug}>
                     <Link
diff --git a/app/terminal/editor.tsx b/app/terminal/editor.tsx
index 14d2547b..d3b67d14 100644
--- a/app/terminal/editor.tsx
+++ b/app/terminal/editor.tsx
@@ -37,6 +37,7 @@ interface EditorProps {
   filename: string;
   initContent: string;
   readonly?: boolean;
+  onDelete?: () => void;
 }
 export function EditorComponent(props: EditorProps) {
   const theme = useChangeTheme();
@@ -66,7 +67,7 @@ export function EditorComponent(props: EditorProps) {
   // 現在の内容の行数、最小8行、最大50vh
   const editorHeight = Math.max(
     Math.min(
-      code.split("\n").length,
+      code.split("\n").length + 1,
       Math.floor((windowHeight * 0.5) / ((fontSize || 16) + 1))
     ),
     8
@@ -86,11 +87,11 @@ export function EditorComponent(props: EditorProps) {
   return (
     <Modal
       id={`edit-${props.filename}`}
-      className={clsx("overflow-hidden", "flex flex-col", "text-base-content")}
+      className={clsx("flex flex-col", "text-base-content")}
       open={isModal}
       setOpen={setIsModal}
     >
-      <div className="flex flex-row items-center bg-base-200">
+      <div className="flex flex-row items-center bg-base-200 rounded-t-box">
         <span className="mt-2 mb-1 ml-3 mr-2 text-sm text-left">
           <span>
             {props.readonly
@@ -129,12 +130,61 @@ export function EditorComponent(props: EditorProps) {
           <span className="hidden md:inline">元の内容に戻す</span>
         </button>
         <div className="flex-1" />
+        {props.onDelete && (
+          <button
+            className="btn btn-sm btn-soft btn-error my-1 mr-1"
+            onClick={props.onDelete}
+            title="ファイルを削除"
+          >
+            <svg
+              className="w-3 h-3"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 11V17"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M14 11V17"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M4 7H20"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M6 7H12H18V18C18 19.6569 16.6569 21 15 21H9C7.34315 21 6 19.6569 6 18V7Z"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <span className="hidden md:inline">削除</span>
+          </button>
+        )}
         <MinMaxButton open={isModal} id={`edit-${props.filename}`} />
       </div>
       {fontSize !== undefined && initAce ? (
         <Suspense
           fallback={
-            <FallbackPre editorHeight={editorHeight}>{code}</FallbackPre>
+            <FallbackPre className="grow-1 rounded-b-box" editorHeight={editorHeight}>
+              {code}
+            </FallbackPre>
           }
         >
           <AceEditor
@@ -144,7 +194,7 @@ export function EditorComponent(props: EditorProps) {
             tabSize={props.language.tabSize ?? 4}
             width="100%"
             height={isModal ? "100%" : editorHeight * (fontSize + 1) + "px"}
-            className="font-mono!" // Aceのデフォルトフォントを上書き
+            className="font-mono! rounded-b-box" // Aceのデフォルトフォントを上書き
             readOnly={props.readonly}
             fontSize={fontSize}
             showPrintMargin={false}
@@ -157,7 +207,11 @@ export function EditorComponent(props: EditorProps) {
           />
         </Suspense>
       ) : (
-        <FallbackPre isModal={isModal} editorHeight={editorHeight}>
+        <FallbackPre
+          className="grow-1 rounded-b-box"
+          isModal={isModal}
+          editorHeight={editorHeight}
+        >
           {code}
         </FallbackPre>
       )}
@@ -169,16 +223,21 @@ function FallbackPre({
   children,
   editorHeight,
   isModal,
+  className,
 }: {
   children: string;
   editorHeight: number;
   isModal?: boolean;
+  className?: string;
 }) {
   // AceEditorはなぜかline-heightが小さい
   // fontSize + 1px になるっぽい?
   return (
     <pre
-      className="font-mono overflow-auto bg-base-300 px-2 cursor-wait"
+      className={clsx(
+        "font-mono overflow-auto bg-base-300 pl-4 py-0 cursor-wait",
+        className
+      )}
       style={{
         height: isModal ? "100%" : `calc((1em + 1px) * ${editorHeight})`,
         lineHeight: "calc(1em + 1px)",
diff --git a/app/terminal/embedContext.tsx b/app/terminal/embedContext.tsx
index 1c3eaadb..7e745dde 100644
--- a/app/terminal/embedContext.tsx
+++ b/app/terminal/embedContext.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { ReplCommand, ReplOutput } from "@my-code/runtime/interface";
-import { usePathname } from "next/navigation";
 import {
   createContext,
   ReactNode,
@@ -13,12 +12,12 @@ import {
 /*
 ファイルの内容や埋め込みターミナルのログを1箇所でまとめて管理し、書き込み・読み込みできるようにする
 
-ファイルはページのURLごとに独立して管理し、常にすべて保持している。
+ファイルはページ(lang/pageId)ごとに独立して管理し、常にすべて保持している。
 ターミナルのログもページごとに独立だが、ページが切り替わるたびに消す。
 */
 
 // 全部stringだけどわかりやすくするために名前をつけている
-type PagePathname = string;
+type PageKey = string;
 type Filename = string;
 type TerminalId = string;
 
@@ -54,12 +53,22 @@ export function useEmbedContext() {
   return context;
 }
 
-export function EmbedContextProvider({ children }: { children: ReactNode }) {
-  const pathname = usePathname();
+export interface EmbedContextProviderProps {
+  lang: string;
+  pageId: string;
+  children: ReactNode;
+}
+
+export function EmbedContextProvider({
+  lang,
+  pageId,
+  children,
+}: EmbedContextProviderProps) {
+  const pageKey: PageKey = `${lang}/${pageId}`;
 
-  const [prevPathname, setPrevPathname] = useState<PagePathname>("");
+  const [prevPageKey, setPrevPageKey] = useState<PageKey>(pageKey);
   const [files, setFiles] = useState<
-    Record<PagePathname, Record<Filename, string>>
+    Record<PageKey, Record<Filename, string>>
   >({});
   const [replOutputs, setReplOutputs] = useState<
     Record<TerminalId, ReplCommand[]>
@@ -71,8 +80,8 @@ export function EmbedContextProvider({ children }: { children: ReactNode }) {
   const [execResults, setExecResults] = useState<
     Record<Filename, ReplOutput[]>
   >({});
-  if (pathname && pathname !== prevPathname) {
-    setPrevPathname(pathname);
+  if (pageKey && pageKey !== prevPageKey) {
+    setPrevPageKey(pageKey);
     setReplOutputs({});
     setCommandIdCounters({});
     setExecResults({});
@@ -84,24 +93,24 @@ export function EmbedContextProvider({ children }: { children: ReactNode }) {
         setFiles((files) => {
           let changed = false;
           const newFiles = { ...files };
-          newFiles[pathname] = { ...(newFiles[pathname] ?? {}) };
+          newFiles[pageKey] = { ...(newFiles[pageKey] ?? {}) };
           for (const [name, content] of Object.entries(updatedFiles)) {
-            if (newFiles[pathname][name] !== content) {
+            if (newFiles[pageKey][name] !== content) {
               changed = true;
-              newFiles[pathname][name] = content;
+              newFiles[pageKey][name] = content;
             }
           }
           if (changed) {
-            resolve(newFiles[pathname]);
+            resolve(newFiles[pageKey]);
             return newFiles;
           } else {
-            resolve(files[pathname] || {});
+            resolve(files[pageKey] || {});
             return files;
           }
         });
       });
     },
-    [pathname]
+    [pageKey]
   );
   const addReplCommand = useCallback(
     (terminalId: TerminalId, command: string): string => {
@@ -175,7 +184,7 @@ export function EmbedContextProvider({ children }: { children: ReactNode }) {
   return (
     <EmbedContext.Provider
       value={{
-        files: files[pathname] || {},
+        files: files[pageKey] || {},
         writeFile,
         replOutputs,
         addReplCommand,
diff --git a/app/terminal/exec.tsx b/app/terminal/exec.tsx
index 842b496c..d3b1e7ed 100644
--- a/app/terminal/exec.tsx
+++ b/app/terminal/exec.tsx
@@ -196,9 +196,9 @@ export function ExecFile(props: ExecProps) {
         </code>
         <WithAutoTooltipPosition
           as="div"
-          className="ml-1 mr-1 tooltip tooltip-secondary tooltip-bottom z-1"
+          className="ml-1 mr-1 tooltip tooltip-primary tooltip-bottom z-1"
         >
-          <div className="tooltip-content bg-secondary/60 backdrop-blur-xs">
+          <div className="tooltip-content">
             ブラウザ上で動作する
             <span className="mx-0.5">
               {runtimeInfo?.prettyLangName || props.language.runtime}
@@ -218,7 +218,7 @@ export function ExecFile(props: ExecProps) {
           </div>
           <button
             className={clsx(
-              "btn btn-xs btn-soft btn-secondary rounded-full cursor-help"
+              "btn btn-xs btn-soft btn-primary rounded-full cursor-help"
             )}
           >
             ？
diff --git a/app/terminal/layout.tsx b/app/terminal/layout.tsx
deleted file mode 100644
index 0da01b7b..00000000
--- a/app/terminal/layout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Runtime Test Page",
-  robots: {
-    index: false,
-    follow: false,
-  },
-};
-
-export default function TerminalLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return children;
-}
diff --git a/app/terminal/mochaTest.tsx b/app/terminal/mochaTest.tsx
new file mode 100644
index 00000000..14a8427c
--- /dev/null
+++ b/app/terminal/mochaTest.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import "mocha/mocha.css";
+import { useEffect, useRef, useState } from "react";
+import { RuntimeLang } from "@my-code/runtime/languages";
+import {
+  RUNTIME_TIMEOUTS,
+  waitForRuntimeReady,
+} from "@my-code/runtime/tests/utils";
+import { replTests } from "@my-code/runtime/tests/repl";
+import { fileExecutionTests } from "@my-code/runtime/tests/fileExecution";
+import { useRuntimeAll } from "@my-code/runtime/context";
+import { DaisyInfoIcon } from "@/daisyAlertIcon";
+import { captureException } from "@sentry/nextjs";
+import { usePathname } from "next/navigation";
+
+function handleRuntimeError(error: unknown) {
+  captureException(error);
+}
+
+export function MochaTest() {
+  const pathname = usePathname();
+  const runtimeAll = useRuntimeAll();
+  const runtimeRef = useRef(runtimeAll);
+  for (const lang of Object.keys(runtimeAll) as RuntimeLang[]) {
+    runtimeRef.current[lang] = runtimeAll[lang];
+  }
+
+  const [searchParams, setSearchParams] = useState<string>("");
+  useEffect(() => {
+    setSearchParams(window.location.search);
+  }, []);
+  const [mochaState, setMochaState] = useState<"idle" | "running" | "finished">(
+    "idle"
+  );
+  const runTest = async () => {
+    if (typeof window !== "undefined") {
+      setMochaState("running");
+
+      await import("mocha/mocha.js");
+
+      mocha.setup("bdd");
+
+      for (const lang of Object.keys(runtimeRef.current) as RuntimeLang[]) {
+        runtimeRef.current[lang].init?.(handleRuntimeError);
+
+        describe(`${lang} Runtime`, function () {
+          this.timeout(RUNTIME_TIMEOUTS[lang]);
+
+          beforeEach(async function () {
+            this.timeout(60000);
+            await waitForRuntimeReady(lang, runtimeRef);
+          });
+
+          describe("REPL", function () {
+            for (const [name, generator] of Object.entries(replTests)) {
+              const body = generator(lang);
+              if (body) {
+                it(name, async () => body(runtimeRef));
+              } else {
+                it.skip(name);
+              }
+            }
+          });
+
+          describe("File Execution", function () {
+            for (const [name, generator] of Object.entries(
+              fileExecutionTests
+            )) {
+              const body = generator(lang);
+              if (body) {
+                it(name, async () => body(runtimeRef));
+              } else {
+                it.skip(name);
+              }
+            }
+          });
+        });
+      }
+
+      const runner = mocha.run();
+      runner.on("fail", (test, err: unknown) => {
+        console.error(err, {
+          extra: {
+            fullTitle: test.fullTitle(),
+            ...(typeof err === "object" && err ? err : {}),
+          },
+        });
+      });
+      runner.on("end", () => {
+        setMochaState("finished");
+      });
+    }
+  };
+
+  return (
+    <div className="border-1 border-transparent translate-x-0">
+      {/* margin collapseさせない & fixedの対象をviewportではなくこのdivにする */}
+      {mochaState === "idle" ? (
+        <button className="btn btn-accent mt-4" onClick={runTest}>
+          テストを実行
+        </button>
+      ) : mochaState === "running" ? (
+        <div className="alert mt-16 sm:mt-4 w-80">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="animate-spin h-5 w-5 mr-3 border-2 border-solid border-current border-t-transparent rounded-full"
+            fill="none"
+            viewBox="0 0 24 24"
+          ></svg>
+          テストを実行中です...
+        </div>
+      ) : (
+        <div className="alert mt-16 sm:mt-4 w-80">
+          <DaisyInfoIcon className="text-info" />
+          テストが完了しました
+        </div>
+      )}
+      <p className="mt-8">
+        {new URLSearchParams(searchParams).has("grep") && (
+          <>
+            一部のテストだけを実行します:
+            <code className="ml-2 font-mono">
+              {new URLSearchParams(searchParams).get("grep")}
+            </code>
+            {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
+            <a className="ml-4 link link-info" href={pathname}>
+              {/* クエリパラメータの削除。 aタグでページをリロードしないと動作しない。 */}
+              フィルタを解除
+            </a>
+          </>
+        )}
+      </p>
+      <div className="m-0! font-sans!" id="mocha" />
+    </div>
+  );
+}
diff --git a/app/terminal/modal.tsx b/app/terminal/modal.tsx
index 3d84ef9f..8b5bdf8c 100644
--- a/app/terminal/modal.tsx
+++ b/app/terminal/modal.tsx
@@ -23,7 +23,7 @@ export function Modal(props: Props) {
   const { id, open, setOpen } = props;
   useEffect(() => {
     const onHashChange = () => {
-      if (location.hash === `#${id}`) {
+      if (location.hash === "#" + encodeURIComponent(id)) {
         setOpen(true);
       } else {
         // アニメーションが終わった後にmodalモードを解除する
@@ -57,7 +57,7 @@ export function Modal(props: Props) {
       className={clsx(open && "modal h-dvh")}
       role={open ? "dialog" : undefined}
       ref={modalDivRef}
-      id={id}
+      id={encodeURIComponent(id)}
     >
       <div
         className={clsx(
@@ -100,7 +100,7 @@ export function MinMaxButton(props: { open: boolean; id: string }) {
           history.back();
         } else {
           // props.setOpen(true);
-          location.href = `#${props.id}`;
+          location.hash = encodeURIComponent(props.id);
         }
       }}
     >
diff --git a/app/terminal/page.tsx b/app/terminal/page.tsx
deleted file mode 100644
index ba9a32ec..00000000
--- a/app/terminal/page.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-"use client";
-
-import { Heading } from "@/markdown/heading";
-import "mocha/mocha.css";
-import { Fragment, useEffect, useRef, useState } from "react";
-import { langConstants, RuntimeLang } from "@my-code/runtime/languages";
-import { ReplTerminal } from "./repl";
-import { EditorComponent } from "./editor";
-import { ExecFile } from "./exec";
-import { useTerminal } from "./terminal";
-import {
-  RUNTIME_TIMEOUTS,
-  waitForRuntimeReady,
-} from "@my-code/runtime/tests/utils";
-import { replTests } from "@my-code/runtime/tests/repl";
-import { fileExecutionTests } from "@my-code/runtime/tests/fileExecution";
-import { useRuntimeAll } from "@my-code/runtime/context";
-import { captureException } from "@sentry/nextjs";
-
-import main_py from "./samples/main.py?raw";
-import main_rb from "./samples/main.rb?raw";
-import main_js from "./samples/main.js?raw";
-import main2_ts from "./samples/main2.ts?raw";
-import main_cpp from "./samples/main.cpp?raw";
-import sub_h from "./samples/sub.h?raw";
-import sub_cpp from "./samples/sub.cpp?raw";
-import main2_rs from "./samples/main2.rs?raw";
-import sub_rs from "./samples/sub.rs?raw";
-import { DaisyInfoIcon } from "@/daisyAlertIcon";
-
-export default function RuntimeTestPage() {
-  return (
-    <div className="p-4 mx-auto w-full max-w-docs">
-      <Heading level={1}>Runtime Test Page</Heading>
-
-      <Heading level={2}>REPLとコード実行のサンプル</Heading>
-      {/* name of each tab group should be unique */}
-      <div className="tabs tabs-box">
-        {Object.entries(sampleConfig).map(([lang, config]) => (
-          <Fragment key={lang}>
-            <input
-              type="radio"
-              name="runtime-sample-tabs"
-              className="tab"
-              aria-label={lang}
-            />
-            <div className="tab-content border-base-300 bg-base-100">
-              <RuntimeSample lang={lang as RuntimeLang} config={config} />
-            </div>
-          </Fragment>
-        ))}
-      </div>
-
-      <Heading level={2}>Xterm.js Colors</Heading>
-      <AnsiColorSample />
-
-      <button
-        className="btn mt-4"
-        onClick={() => {
-          throw new Error("Sentry Test Error");
-        }}
-      >
-        Sentry Test Error
-      </button>
-
-      <Heading level={2}>自動テスト</Heading>
-      <MochaTest />
-    </div>
-  );
-}
-
-interface SampleConfig {
-  repl: boolean;
-  replInitContent?: string; // ReplOutput[] ではない。stringのパースはruntimeが行う
-  editor: Record<string, string> | false;
-  exec: string[] | false;
-  readonlyFiles?: string[];
-}
-const sampleConfig: Record<RuntimeLang, SampleConfig> = {
-  python: {
-    repl: true,
-    replInitContent: '>>> print("Hello, World!")\nHello, World!',
-    editor: {
-      "main.py": main_py,
-    },
-    exec: ["main.py"],
-  },
-  ruby: {
-    repl: true,
-    replInitContent: 'irb(main):001:0> puts "Hello, World!"\nHello, World!',
-    editor: {
-      "main.rb": main_rb,
-    },
-    exec: ["main.rb"],
-  },
-  javascript: {
-    repl: true,
-    replInitContent: '> console.log("Hello, World!");\nHello, World!',
-    editor: {
-      "main.js": main_js,
-    },
-    exec: ["main.js"],
-  },
-  typescript: {
-    repl: false,
-    editor: {
-      // main.tsにすると出力ファイルがjavascriptのサンプルと被る
-      "main2.ts": main2_ts,
-    },
-    exec: ["main2.ts"],
-    readonlyFiles: ["main2.js"],
-  },
-  cpp: {
-    repl: false,
-    editor: {
-      "main.cpp": main_cpp,
-      "sub.h": sub_h,
-      "sub.cpp": sub_cpp,
-    },
-    exec: ["main.cpp", "sub.cpp"],
-  },
-  rust: {
-    repl: false,
-    editor: {
-      "main2.rs": main2_rs,
-      "sub.rs": sub_rs,
-    },
-    exec: ["main2.rs"],
-  },
-};
-function RuntimeSample({
-  lang,
-  config,
-}: {
-  lang: RuntimeLang;
-  config: SampleConfig;
-}) {
-  return (
-    <div className="flex flex-col">
-      {config.repl && (
-        <ReplTerminal
-          terminalId="1"
-          language={langConstants(lang)}
-          initContent={config.replInitContent}
-        />
-      )}
-      {config.editor &&
-        Object.entries(config.editor).map(([filename, initContent]) => (
-          <EditorComponent
-            key={filename}
-            language={langConstants(lang)}
-            filename={filename}
-            initContent={initContent}
-          />
-        ))}
-      {config.exec && (
-        <ExecFile
-          filenames={config.exec}
-          language={langConstants(lang)}
-          content=""
-        />
-      )}
-      {config.readonlyFiles?.map((filename) => (
-        <EditorComponent
-          key={filename}
-          language={langConstants(lang)}
-          filename={filename}
-          initContent=""
-          readonly
-        />
-      ))}
-    </div>
-  );
-}
-
-function AnsiColorSample() {
-  const { terminalRef, terminalInstanceRef } = useTerminal({
-    getRows: () => 6,
-    onReady: () => {
-      for (let i = 0; i <= 7; i++) {
-        terminalInstanceRef.current!.write(`\x1b[0;${30 + i}m${30 + i}`);
-      }
-      terminalInstanceRef.current!.write("\x1b[0m\n");
-      terminalInstanceRef.current!.write("\x1b[1m1;");
-      for (let i = 0; i <= 7; i++) {
-        terminalInstanceRef.current!.write(`\x1b[1;${30 + i}m${30 + i}`);
-      }
-      terminalInstanceRef.current!.write("\x1b[0m\n");
-      for (let i = 0; i <= 7; i++) {
-        terminalInstanceRef.current!.write(`\x1b[0;${90 + i}m${90 + i}`);
-      }
-      terminalInstanceRef.current!.write("\x1b[0m\n");
-      terminalInstanceRef.current!.write("\x1b[1m1;");
-      for (let i = 0; i <= 7; i++) {
-        terminalInstanceRef.current!.write(`\x1b[1;${90 + i}m${90 + i}`);
-      }
-      terminalInstanceRef.current!.write("\x1b[0m\n");
-      for (let i = 0; i <= 7; i++) {
-        terminalInstanceRef.current!.write(`\x1b[0;${40 + i}m${40 + i}`);
-      }
-      terminalInstanceRef.current!.write("\x1b[0m\n");
-      for (let i = 0; i <= 7; i++) {
-        terminalInstanceRef.current!.write(`\x1b[0;${100 + i}m${100 + i}`);
-      }
-    },
-  });
-  return (
-    <div className="bg-base-300 border border-accent border-2 shadow-md m-2 p-4 pr-1 rounded-box relative h-max">
-      <div ref={terminalRef} />
-    </div>
-  );
-}
-
-function handleRuntimeError(error: unknown) {
-  captureException(error);
-}
-
-function MochaTest() {
-  const runtimeAll = useRuntimeAll();
-  const runtimeRef = useRef(runtimeAll);
-  for (const lang of Object.keys(runtimeAll) as RuntimeLang[]) {
-    runtimeRef.current[lang] = runtimeAll[lang];
-  }
-
-  const [searchParams, setSearchParams] = useState<string>("");
-  useEffect(() => {
-    setSearchParams(window.location.search);
-  }, []);
-  const [mochaState, setMochaState] = useState<"idle" | "running" | "finished">(
-    "idle"
-  );
-  const runTest = async () => {
-    if (typeof window !== "undefined") {
-      setMochaState("running");
-
-      await import("mocha/mocha.js");
-
-      mocha.setup("bdd");
-
-      for (const lang of Object.keys(runtimeRef.current) as RuntimeLang[]) {
-        runtimeRef.current[lang].init?.(handleRuntimeError);
-
-        describe(`${lang} Runtime`, function () {
-          this.timeout(RUNTIME_TIMEOUTS[lang]);
-
-          beforeEach(async function () {
-            this.timeout(60000);
-            await waitForRuntimeReady(lang, runtimeRef);
-          });
-
-          describe("REPL", function () {
-            for (const [name, generator] of Object.entries(replTests)) {
-              const body = generator(lang);
-              if (body) {
-                it(name, async () => body(runtimeRef));
-              } else {
-                it.skip(name);
-              }
-            }
-          });
-
-          describe("File Execution", function () {
-            for (const [name, generator] of Object.entries(
-              fileExecutionTests
-            )) {
-              const body = generator(lang);
-              if (body) {
-                it(name, async () => body(runtimeRef));
-              } else {
-                it.skip(name);
-              }
-            }
-          });
-        });
-      }
-
-      const runner = mocha.run();
-      runner.on("fail", (test, err: unknown) => {
-        console.error(err, {
-          extra: {
-            fullTitle: test.fullTitle(),
-            ...(typeof err === "object" && err ? err : {}),
-          },
-        });
-      });
-      runner.on("end", () => {
-        setMochaState("finished");
-      });
-    }
-  };
-
-  return (
-    <div className="border-1 border-transparent translate-x-0">
-      {/* margin collapseさせない & fixedの対象をviewportではなくこのdivにする */}
-      {mochaState === "idle" ? (
-        <button className="btn btn-accent mt-4" onClick={runTest}>
-          テストを実行
-        </button>
-      ) : mochaState === "running" ? (
-        <div className="alert mt-16 sm:mt-4 w-80">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="animate-spin h-5 w-5 mr-3 border-2 border-solid border-current border-t-transparent rounded-full"
-            fill="none"
-            viewBox="0 0 24 24"
-          ></svg>
-          テストを実行中です...
-        </div>
-      ) : (
-        <div className="alert mt-16 sm:mt-4 w-80">
-          <DaisyInfoIcon className="text-info" />
-          テストが完了しました
-        </div>
-      )}
-      <p className="mt-8">
-        {new URLSearchParams(searchParams).has("grep") && (
-          <>
-            一部のテストだけを実行します:
-            <code className="ml-2 font-mono">
-              {new URLSearchParams(searchParams).get("grep")}
-            </code>
-            {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
-            <a className="ml-4 link link-info" href="/terminal">
-              {/* aタグでページをリロードしないと動作しない。 */}
-              フィルタを解除
-            </a>
-          </>
-        )}
-      </p>
-      <div className="m-0! font-sans!" id="mocha" />
-    </div>
-  );
-}
diff --git a/app/terminal/repl.tsx b/app/terminal/repl.tsx
index 35f35b82..361ff95c 100644
--- a/app/terminal/repl.tsx
+++ b/app/terminal/repl.tsx
@@ -501,9 +501,9 @@ export function ReplTerminal({
         </span>
         <WithAutoTooltipPosition
           as="div"
-          className="ml-1 tooltip tooltip-secondary tooltip-bottom z-1"
+          className="ml-1 tooltip tooltip-primary tooltip-bottom z-1"
         >
-          <div className="tooltip-content bg-secondary/60 backdrop-blur-xs">
+          <div className="tooltip-content">
             ブラウザ上で動作する
             <span className="mx-0.5">
               {runtimeInfo?.prettyLangName || language.runtime}
@@ -524,7 +524,7 @@ export function ReplTerminal({
           </div>
           <button
             className={clsx(
-              "btn btn-xs btn-soft btn-secondary rounded-full cursor-help"
+              "btn btn-xs btn-soft btn-primary rounded-full cursor-help"
             )}
           >
             ？
diff --git a/drizzle/0006_sudden_crusher_hogan.sql b/drizzle/0006_sudden_crusher_hogan.sql
new file mode 100644
index 00000000..9bd7c0d3
--- /dev/null
+++ b/drizzle/0006_sudden_crusher_hogan.sql
@@ -0,0 +1,3 @@
+ALTER TABLE "chat" ADD COLUMN "replOutputs" jsonb DEFAULT '{}'::jsonb NOT NULL;--> statement-breakpoint
+ALTER TABLE "chat" ADD COLUMN "files" jsonb DEFAULT '{}'::jsonb NOT NULL;--> statement-breakpoint
+ALTER TABLE "chat" ADD COLUMN "execResults" jsonb DEFAULT '{}'::jsonb NOT NULL;
\ No newline at end of file
diff --git a/drizzle/meta/0006_snapshot.json b/drizzle/meta/0006_snapshot.json
new file mode 100644
index 00000000..f45a6090
--- /dev/null
+++ b/drizzle/meta/0006_snapshot.json
@@ -0,0 +1,575 @@
+{
+  "id": "5e03662f-f217-4177-a23d-bc994f00ba78",
+  "prevId": "015d7396-ad26-488e-9b31-98399a89b690",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.account": {
+      "name": "account",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "access_token_expires_at": {
+          "name": "access_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token_expires_at": {
+          "name": "refresh_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "account_userId_idx": {
+          "name": "account_userId_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_user_id_fk": {
+          "name": "account_user_id_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "session_userId_idx": {
+          "name": "session_userId_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "session_token_unique": {
+          "name": "session_token_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "token"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "is_anonymous": {
+          "name": "is_anonymous",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.verification": {
+      "name": "verification",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "verification_identifier_idx": {
+          "name": "verification_identifier_idx",
+          "columns": [
+            {
+              "expression": "identifier",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.chat": {
+      "name": "chat",
+      "schema": "",
+      "columns": {
+        "chatId": {
+          "name": "chatId",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "sectionId": {
+          "name": "sectionId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'new chat'"
+        },
+        "replOutputs": {
+          "name": "replOutputs",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{}'::jsonb"
+        },
+        "files": {
+          "name": "files",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{}'::jsonb"
+        },
+        "execResults": {
+          "name": "execResults",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{}'::jsonb"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.diff": {
+      "name": "diff",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "chatId": {
+          "name": "chatId",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "search": {
+          "name": "search",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "replace": {
+          "name": "replace",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "sectionId": {
+          "name": "sectionId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "targetMD5": {
+          "name": "targetMD5",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.message": {
+      "name": "message",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "chatId": {
+          "name": "chatId",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.section": {
+      "name": "section",
+      "schema": "",
+      "columns": {
+        "sectionId": {
+          "name": "sectionId",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "pagePath": {
+          "name": "pagePath",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index bff66162..ff015313 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -43,6 +43,13 @@
       "when": 1773727108826,
       "tag": "0005_giant_kylun",
       "breakpoints": true
+    },
+    {
+      "idx": 6,
+      "version": "7",
+      "when": 1786884578377,
+      "tag": "0006_sudden_crusher_hogan",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/runtime/README.md b/packages/runtime/README.md
index 52283d09..042981ee 100644
--- a/packages/runtime/README.md
+++ b/packages/runtime/README.md
@@ -20,7 +20,7 @@
 ## tests
 
 * `pnpm run --filter @my-code/runtime test` でvitestを使ってテストを実行できます
-* my.code(); の /terminal ページでMochaを使ってテストを実行できます
+* my.code(); の /about/runtime ページでMochaを使ってテストを実行できます
 * どちらからでも実行できるようテスト本体は ./tests/repl.ts, ./tests/fileExecution.ts に記述しています。
 新しい言語の実行環境を追加した場合、ここにテストケースを追加してください。
 
diff --git a/packages/runtime/src/languages.ts b/packages/runtime/src/languages.ts
index 3c2ceb72..e9988e66 100644
--- a/packages/runtime/src/languages.ts
+++ b/packages/runtime/src/languages.ts
@@ -1,3 +1,13 @@
+import main_py from "./samples/main.py?raw";
+import main_rb from "./samples/main.rb?raw";
+import main_js from "./samples/main.js?raw";
+import main2_ts from "./samples/main2.ts?raw";
+import main_cpp from "./samples/main.cpp?raw";
+import sub_h from "./samples/sub.h?raw";
+import sub_cpp from "./samples/sub.cpp?raw";
+import main2_rs from "./samples/main2.rs?raw";
+import sub_rs from "./samples/sub.rs?raw";
+
 // Markdownで指定される可能性のある言語名を列挙
 export type MarkdownLang =
   | "python"
@@ -73,8 +83,10 @@ export type LangConstants = {
 ) &
   (
     | {
-        runtime: RuntimeLang;
         // REPLが実装されている言語の場合
+        repl: true;
+        // ReplOutput[] ではない。stringのパースはruntimeが行う
+        sampleReplInit: string;
         // terminal/highlight.ts でインポートするprismの言語定義と対応
         prism: "python" | "ruby" | "javascript";
         prompt: string;
@@ -82,12 +94,35 @@ export type LangConstants = {
         returnPrefix?: string;
       }
     | {
-        runtime?: RuntimeLang;
+        repl?: false;
+        sampleReplInit?: undefined;
         prism?: undefined;
         prompt?: undefined;
         promptMore?: undefined;
         returnPrefix?: undefined;
       }
+  ) &
+  (
+    | {
+        runtime: RuntimeLang;
+        // Sandboxにデフォルトで用意するファイル
+        sampleFiles: Record<string, string>;
+        // C++のように実行時に全ソースファイルを指定する必要がある言語は、
+        // 現在のファイルリストを受け取って実行すべきファイルを返す関数を定義する
+        sampleExec: (files: string[]) => string[];
+        // Sandboxの実行ボタンの下に読み取り専用で表示されるファイル
+        readonlyFiles?: string[];
+        supportsMultiFile: boolean;
+        supportsFileOutput: boolean;
+      }
+    | {
+        runtime?: undefined;
+        sampleFiles?: undefined;
+        sampleExec?: undefined;
+        readonlyFiles?: undefined;
+        supportsMultiFile?: undefined;
+        supportsFileOutput?: undefined;
+      }
   );
 
 export function langConstants(lang: MarkdownLang | undefined): LangConstants {
@@ -101,8 +136,16 @@ export function langConstants(lang: MarkdownLang | undefined): LangConstants {
         tabSize: 4,
         runtime: "python",
         prism: "python",
+        repl: true,
+        sampleReplInit: '>>> print("Hello, World!")\nHello, World!',
         prompt: ">>> ",
         promptMore: "... ",
+        sampleFiles: {
+          "main.py": main_py,
+        },
+        sampleExec: () => ["main.py"],
+        supportsMultiFile: true,
+        supportsFileOutput: true,
       };
     case "ruby":
     case "rb":
@@ -113,10 +156,18 @@ export function langConstants(lang: MarkdownLang | undefined): LangConstants {
         tabSize: 2,
         runtime: "ruby",
         prism: "ruby",
+        repl: true,
+        sampleReplInit: 'irb(main):001:0> puts "Hello, World!"\nHello, World!',
         // TODO: 実際のirbのプロンプトは静的でなく、(main)や番号などの動的な表示がある
         prompt: "irb> ",
         promptMore: "irb* ",
         returnPrefix: "=> ",
+        sampleFiles: {
+          "main.rb": main_rb,
+        },
+        sampleExec: () => ["main.rb"],
+        supportsMultiFile: true,
+        supportsFileOutput: true,
       };
     case "javascript":
     case "js":
@@ -127,8 +178,16 @@ export function langConstants(lang: MarkdownLang | undefined): LangConstants {
         tabSize: 2,
         runtime: "javascript",
         prism: "javascript",
+        repl: true,
+        sampleReplInit: '> console.log("Hello, World!");\nHello, World!',
         prompt: "> ",
         promptMore: "... ",
+        sampleFiles: {
+          "main.js": main_js,
+        },
+        sampleExec: () => ["main.js"],
+        supportsMultiFile: false,
+        supportsFileOutput: false,
       };
     case "typescript":
     case "ts":
@@ -138,6 +197,15 @@ export function langConstants(lang: MarkdownLang | undefined): LangConstants {
         ace: "typescript",
         tabSize: 2,
         runtime: "typescript",
+        repl: false,
+        sampleFiles: {
+          // main.tsにすると出力ファイルがjavascriptのサンプルと被る
+          "main2.ts": main2_ts,
+        },
+        sampleExec: () => ["main2.ts"],
+        readonlyFiles: ["main2.js"],
+        supportsMultiFile: false,
+        supportsFileOutput: false,
       };
     case "cpp":
     case "c++":
@@ -148,6 +216,18 @@ export function langConstants(lang: MarkdownLang | undefined): LangConstants {
         // 2文字派と4文字派があるが、geminiが4文字で出力するので4でいいや
         tabSize: 4,
         runtime: "cpp",
+        repl: false,
+        sampleFiles: {
+          "main.cpp": main_cpp,
+          "sub.h": sub_h,
+          "sub.cpp": sub_cpp,
+        },
+        sampleExec: (files: string[]) =>
+          files.filter((f) =>
+            ["c", "cpp", "cc", "cxx"].includes(f.split(".").at(-1) ?? "")
+          ),
+        supportsMultiFile: true,
+        supportsFileOutput: false,
       };
     case "rust":
     case "rs":
@@ -157,6 +237,14 @@ export function langConstants(lang: MarkdownLang | undefined): LangConstants {
         ace: "rust",
         tabSize: 4,
         runtime: "rust",
+        repl: false,
+        sampleFiles: {
+          "main2.rs": main2_rs,
+          "sub.rs": sub_rs,
+        },
+        sampleExec: () => ["main2.rs"],
+        supportsMultiFile: true,
+        supportsFileOutput: false,
       };
     case "bash":
     case "sh":
diff --git a/app/terminal/samples/main.cpp b/packages/runtime/src/samples/main.cpp
similarity index 100%
rename from app/terminal/samples/main.cpp
rename to packages/runtime/src/samples/main.cpp
diff --git a/app/terminal/samples/main.js b/packages/runtime/src/samples/main.js
similarity index 100%
rename from app/terminal/samples/main.js
rename to packages/runtime/src/samples/main.js
diff --git a/app/terminal/samples/main.py b/packages/runtime/src/samples/main.py
similarity index 100%
rename from app/terminal/samples/main.py
rename to packages/runtime/src/samples/main.py
diff --git a/app/terminal/samples/main.rb b/packages/runtime/src/samples/main.rb
similarity index 100%
rename from app/terminal/samples/main.rb
rename to packages/runtime/src/samples/main.rb
diff --git a/app/terminal/samples/main2.rs b/packages/runtime/src/samples/main2.rs
similarity index 100%
rename from app/terminal/samples/main2.rs
rename to packages/runtime/src/samples/main2.rs
diff --git a/app/terminal/samples/main2.ts b/packages/runtime/src/samples/main2.ts
similarity index 100%
rename from app/terminal/samples/main2.ts
rename to packages/runtime/src/samples/main2.ts
diff --git a/app/terminal/samples/sub.cpp b/packages/runtime/src/samples/sub.cpp
similarity index 100%
rename from app/terminal/samples/sub.cpp
rename to packages/runtime/src/samples/sub.cpp
diff --git a/app/terminal/samples/sub.h b/packages/runtime/src/samples/sub.h
similarity index 100%
rename from app/terminal/samples/sub.h
rename to packages/runtime/src/samples/sub.h
diff --git a/app/terminal/samples/sub.rs b/packages/runtime/src/samples/sub.rs
similarity index 100%
rename from app/terminal/samples/sub.rs
rename to packages/runtime/src/samples/sub.rs
diff --git a/tests/chatHistory.test.ts b/tests/chatHistory.test.ts
index d98c5763..15db9b16 100644
--- a/tests/chatHistory.test.ts
+++ b/tests/chatHistory.test.ts
@@ -147,6 +147,9 @@ describe("chatHistory lib (non-DB functions)", () => {
           title: "chat 1",
           section: { sectionId: "sec-1" as never, pagePath: "js/page1" },
           messages: [],
+          replOutputs: {},
+          files: {},
+          execResults: {},
           diff: [
             {
               id: "diff-1",
@@ -191,6 +194,9 @@ describe("chatHistory lib (non-DB functions)", () => {
           title: "chat 2",
           section: { sectionId: "sec-1" as never, pagePath: "js/page1" },
           messages: [],
+          replOutputs: {},
+          files: {},
+          execResults: {},
           diff: [
             {
               id: "diff-2",
@@ -211,6 +217,9 @@ describe("chatHistory lib (non-DB functions)", () => {
           title: "chat 1",
           section: { sectionId: "sec-1" as never, pagePath: "js/page1" },
           messages: [],
+          replOutputs: {},
+          files: {},
+          execResults: {},
           diff: [
             {
               id: "diff-1",
@@ -252,6 +261,9 @@ describe("chatHistory lib (non-DB functions)", () => {
           title: "chat 1",
           section: { sectionId: "sec-1" as never, pagePath: "js/page1" },
           messages: [],
+          replOutputs: {},
+          files: {},
+          execResults: {},
           diff: [
             {
               id: "diff-1",
@@ -301,6 +313,9 @@ describe("chatHistory lib (non-DB functions)", () => {
           title: "chat 1",
           section: { sectionId: "sec-1" as never, pagePath: "js/page1" },
           messages: [],
+          replOutputs: {},
+          files: {},
+          execResults: {},
           diff: [
             {
               id: "diff-1",
@@ -344,6 +359,9 @@ describe("chatHistory lib (non-DB functions)", () => {
           title: "chat 1",
           section: { sectionId: "sec-1" as never, pagePath: "js/page1" },
           messages: [],
+          replOutputs: {},
+          files: {},
+          execResults: {},
           diff: [
             {
               id: "diff-1",
@@ -392,6 +410,9 @@ describe("chatHistory lib (non-DB functions)", () => {
           title: "chat 1",
           section: { sectionId, pagePath: "cpp/0-intro" },
           messages: [],
+          replOutputs: {},
+          files: {},
+          execResults: {},
           diff: [
             {
               id: "diff-1",