diff --git a/app/(docs)/@chat/chat/[chatId]/chatArea.tsx b/app/(docs)/@chat/chat/[chatId]/chatArea.tsx
index 63bef250..0de65b0e 100644
--- a/app/(docs)/@chat/chat/[chatId]/chatArea.tsx
+++ b/app/(docs)/@chat/chat/[chatId]/chatArea.tsx
@@ -127,20 +127,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]/pageContent.tsx b/app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx
index 7beb8036..82dd4160 100644
--- a/app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx
+++ b/app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx
@@ -167,10 +167,11 @@ export function PageContent(props: PageContentProps) {
   );
 }
 
-function ChatListForSection(props: {
+export function ChatListForSection(props: {
   dynamicMdContent: DynamicMarkdownSection[];
   sectionId: SectionId;
   chatHistories: ChatWithMessages[];
+  fullWidth?: boolean;
 }) {
   const { dynamicMdContent, sectionId, chatHistories } = props;
   const filteredChatHistories = chatHistories.filter(
@@ -195,10 +196,14 @@ 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.fullWidth
+            ? "block m-2"
+            : 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"
         )}
@@ -225,11 +230,15 @@ function ChatListForSection(props: {
       {/*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"
+          props.fullWidth
+            ? "hidden"
+            : clsx(
+                chatId === null
+                  ? "block has-chat-1:hidden"
+                  : "block has-chat-2:hidden",
+                "mt-2 ml-2"
+              ),
+          "dropdown dropdown-end"
         )}
       >
         <summary className="btn btn-outline btn-secondary btn-sm">
diff --git a/app/(docs)/@docs/[lang]/sandbox/page.tsx b/app/(docs)/@docs/[lang]/sandbox/page.tsx
new file mode 100644
index 00000000..b213d36c
--- /dev/null
+++ b/app/(docs)/@docs/[lang]/sandbox/page.tsx
@@ -0,0 +1,55 @@
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { SandboxContent } from "./sandboxContent";
+import { getChatFromCache, initContext } from "@/lib/chatHistory";
+import { getPagesListForLang, getTermDefinitions, LangId, PageSlug } from "@/lib/docs";
+import { TermDefinitionProvider } from "@/markdown/term";
+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);
+  const termDefinitions = await getTermDefinitions(lang);
+
+  return (
+    <>
+      <TermDefinitionProvider
+        termDefinitions={termDefinitions}
+        lang={lang}
+        page={"sandbox" as PageSlug}
+      >
+        <SandboxContent
+          langId={lang}
+          path={path}
+          chatHistories={chatHistories}
+        />
+      </TermDefinitionProvider>
+      <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..22d5632e
--- /dev/null
+++ b/app/(docs)/@docs/[lang]/sandbox/sandboxContent.tsx
@@ -0,0 +1,297 @@
+"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 { sampleConfig } from "@/terminal/sampleConfig";
+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 config = sampleConfig[runtimeLang];
+
+  const [userFiles, setUserFiles] = useState<string[]>([]);
+  const [newFilename, setNewFilename] = useState("");
+  const [filenameError, setFilenameError] = useState<string | null>(null);
+  const [isFormVisible, setIsFormVisible] = useState(false);
+
+  // サイドバーの目次用セクション定義
+  const baseSections = useMemo(() => {
+    const list: Array<{ id: SectionId; title: string; level: number }> = [];
+    if (config?.repl) {
+      list.push({ id: "sandbox-repl" as SectionId, title: "REPL", level: 2 });
+    }
+    if (config?.editor || userFiles.length > 0) {
+      list.push({ id: "sandbox-editor" as SectionId, title: "コード", level: 2 });
+    }
+    if (config?.exec) {
+      list.push({ id: "sandbox-exec" as SectionId, title: "実行", level: 2 });
+    }
+    if (config?.readonlyFiles && config.readonlyFiles.length > 0) {
+      list.push({
+        id: "sandbox-readonly" as SectionId,
+        title: "出力ファイル",
+        level: 2,
+      });
+    }
+    return list;
+  }, [config, userFiles.length]);
+
+  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 = config?.editor ? Object.keys(config.editor) : [];
+    const readonlyFiles = config?.readonlyFiles ?? [];
+    if (
+      defaultFiles.includes(name) ||
+      readonlyFiles.includes(name) ||
+      userFiles.includes(name)
+    ) {
+      setFilenameError("同名のファイルがすでに存在します。");
+      return;
+    }
+
+    setFilenameError(null);
+    setUserFiles((prev) => [...prev, name]);
+    writeFile({ [name]: "" });
+    setNewFilename("");
+  };
+
+  const handleRemoveFile = (filename: string) => {
+    setUserFiles((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>
+
+      <ul className="my-2 ml-2 text-sm">
+        <li className={clsx("my-1", !config.repl && "line-through text-base-content/50 decoration-current")}>
+          <span className={clsx("mr-1 status", config?.repl && "status-accent")} />
+          REPLでの実行
+        </li>
+        <li className={clsx("my-1", !config.exec && "line-through text-base-content/50 decoration-current")}>
+          <span className={clsx("mr-1 status", config?.exec && "status-accent")} />
+          ファイル実行
+        </li>
+        <li className={clsx("my-1", !config.supportsMultiFile && "line-through text-base-content/50 decoration-current")}>
+          <span className={clsx("mr-1 status", config?.supportsMultiFile && "status-accent")} />
+          複数ファイル対応
+        </li>
+      </ul>
+
+          <ChatListForSection
+            sectionId={"sandbox" as SectionId}
+            dynamicMdContent={dynamicSections}
+            chatHistories={chatHistories}
+            fullWidth
+          />
+
+
+        {/* 1. REPL */}
+        {config?.repl && (
+          <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={config.replInitContent}
+            />
+          </section>
+        )}
+
+        {/* 2. エディター (既存ファイル + 追加ファイル + 追加ボタン) */}
+        {(config?.editor || userFiles.length > 0 || config?.supportsMultiFile) && (
+          <section
+            id="sandbox-editor"
+            ref={(el) => {
+              sectionRefs.current.set("sandbox-editor", el);
+            }}
+          >
+            <Heading level={2}>コード</Heading>
+            {config?.editor &&
+              Object.entries(config.editor).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)}
+              />
+            ))}
+
+            {config?.supportsMultiFile && (
+              <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. 実行 */}
+        {config?.exec && (
+          <section
+            id="sandbox-exec"
+            ref={(el) => {
+              sectionRefs.current.set("sandbox-exec", el);
+            }}
+          >
+            <Heading level={2}>実行</Heading>
+            <ExecFile
+              filenames={config.exec}
+              language={langConstants(runtimeLang)}
+              content=""
+            />
+          </section>
+        )}
+
+        {/* 4. 出力ファイル */}
+        {config?.readonlyFiles && config.readonlyFiles.length > 0 && (
+          <section
+            id="sandbox-readonly"
+            ref={(el) => {
+              sectionRefs.current.set("sandbox-readonly", el);
+            }}
+          >
+            <Heading level={2}>出力ファイル</Heading>
+            {config.readonlyFiles.map((filename) => (
+              <EditorComponent
+                key={filename}
+                language={langConstants(runtimeLang)}
+                filename={filename}
+                initContent=""
+                readonly
+              />
+            ))}
+          </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/api/chat/route.ts b/app/api/chat/route.ts
index 803b59cf..86d9e656 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -14,6 +14,7 @@ import {
   getPagesListForLang,
   introSectionId,
   PagePathSchema,
+  PageSlug,
   SectionId,
 } from "@/lib/docs";
 import {
@@ -111,7 +112,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,52 +133,69 @@ export async function POST(request: NextRequest) {
     }
   }
 
+  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) {
@@ -192,12 +213,16 @@ export async function POST(request: NextRequest) {
   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}`);
@@ -224,15 +249,19 @@ export async function POST(request: NextRequest) {
 
   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行目に、この質問と回答を後から参照するためのわかりやすいタイトルをつけて記述してください。"
   );
@@ -240,7 +269,7 @@ export async function POST(request: NextRequest) {
     "  - 太字やコードブロックなどのMarkdownの記法は使わずテキストのみで出力してください。"
   );
   prompt.push(
-    "- 3行目以降に、ドキュメントの内容に基づいて、ユーザーに伝える回答をMarkdown形式で記述してください。"
+    "- 3行目以降に、ユーザーに伝える回答をMarkdown形式で記述してください。"
   );
   prompt.push(
     "  - ユーザーが入力したターミナルのコマンドやファイルの内容、実行結果を参考にして回答してください。"
@@ -250,29 +279,32 @@ export async function POST(request: NextRequest) {
     "  - 回答内でコードブロックを使用する際は ```言語名 としてください。" +
       "ドキュメント内では ```言語名-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(
-    "  - 改訂後のドキュメントと同じ内容はユーザーに伝える回答としては省略できます。(「修正後のドキュメントを参照してください。」など)"
-  );
+
+  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(
+      "  - 改訂後のドキュメントと同じ内容はユーザーに伝える回答としては省略できます。(「修正後のドキュメントを参照してください。」など)"
+    );
+  }
 
   console.log(prompt);
 
@@ -303,12 +335,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);
               }
@@ -421,7 +456,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/lib/chatHistory.ts b/app/lib/chatHistory.ts
index daca57b9..95f9887b 100644
--- a/app/lib/chatHistory.ts
+++ b/app/lib/chatHistory.ts
@@ -140,6 +140,18 @@ export async function addChat(
   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({
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/sidebar.tsx b/app/sidebar.tsx
index 1615ee93..09e23061 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,46 @@ 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"
+                    )}
+                  >
+                    <span className="w-5 text-right font-mono">⚡</span>
+                    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..b2f910cd 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();
@@ -129,6 +130,53 @@ 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 ? (
diff --git a/app/terminal/page.tsx b/app/terminal/page.tsx
index ba9a32ec..0431f410 100644
--- a/app/terminal/page.tsx
+++ b/app/terminal/page.tsx
@@ -17,15 +17,7 @@ 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 { sampleConfig, SampleConfig } from "./sampleConfig";
 import { DaisyInfoIcon } from "@/daisyAlertIcon";
 
 export default function RuntimeTestPage() {
@@ -69,65 +61,6 @@ export default function RuntimeTestPage() {
   );
 }
 
-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,
diff --git a/app/terminal/sampleConfig.ts b/app/terminal/sampleConfig.ts
new file mode 100644
index 00000000..0fa23cc7
--- /dev/null
+++ b/app/terminal/sampleConfig.ts
@@ -0,0 +1,79 @@
+import { RuntimeLang } from "@my-code/runtime/languages";
+
+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";
+
+export interface SampleConfig {
+  repl: boolean;
+  replInitContent?: string; // ReplOutput[] ではない。stringのパースはruntimeが行う
+  editor: Record<string, string> | false;
+  exec: string[] | false;
+  readonlyFiles?: string[];
+  supportsMultiFile?: boolean;
+}
+
+export const sampleConfig: Record<RuntimeLang, SampleConfig> = {
+  python: {
+    repl: true,
+    replInitContent: '>>> print("Hello, World!")\nHello, World!',
+    editor: {
+      "main.py": main_py,
+    },
+    exec: ["main.py"],
+    supportsMultiFile: true,
+  },
+  ruby: {
+    repl: true,
+    replInitContent: 'irb(main):001:0> puts "Hello, World!"\nHello, World!',
+    editor: {
+      "main.rb": main_rb,
+    },
+    exec: ["main.rb"],
+    supportsMultiFile: true,
+  },
+  javascript: {
+    repl: true,
+    replInitContent: '> console.log("Hello, World!");\nHello, World!',
+    editor: {
+      "main.js": main_js,
+    },
+    exec: ["main.js"],
+    supportsMultiFile: false,
+  },
+  typescript: {
+    repl: false,
+    editor: {
+      // main.tsにすると出力ファイルがjavascriptのサンプルと被る
+      "main2.ts": main2_ts,
+    },
+    exec: ["main2.ts"],
+    readonlyFiles: ["main2.js"],
+    supportsMultiFile: false,
+  },
+  cpp: {
+    repl: false,
+    editor: {
+      "main.cpp": main_cpp,
+      "sub.h": sub_h,
+      "sub.cpp": sub_cpp,
+    },
+    exec: ["main.cpp", "sub.cpp"],
+    supportsMultiFile: true,
+  },
+  rust: {
+    repl: false,
+    editor: {
+      "main2.rs": main2_rs,
+      "sub.rs": sub_rs,
+    },
+    exec: ["main2.rs"],
+    supportsMultiFile: true,
+  },
+};