異常終了時の表示

na-trium-144 · na-trium-144 · commit 83b8765397b7 · 2025-08-31T16:35:24.000+09:00
diff --git a/app/terminal/exec.tsx b/app/terminal/exec.tsx
@@ -1,10 +1,17 @@
 "use client";
 
-import chalk from "chalk";
 import { usePyodide } from "./python/pyodide";
-import { clearTerminal, getRows, hideCursor, useTerminal } from "./terminal";
+import {
+  clearTerminal,
+  getRows,
+  hideCursor,
+  systemMessageColor,
+  useTerminal,
+} from "./terminal";
 import { useSectionCode } from "../[docs_id]/section";
 import { useWandbox } from "./wandbox/wandbox";
+import { ReplOutput, writeOutput } from "./repl";
+import { useState } from "react";
 
 export type ExecLang = "python" | "cpp";
 
@@ -32,44 +39,25 @@ export function ExecFile(props: ExecProps) {
   const pyodide = usePyodide();
   const wandbox = useWandbox();
 
+  // 表示するコマンドライン文字列
   let commandline: string;
-  let exec: () => Promise<void> | void;
+  // trueの間 (初期化しています...) と表示される
   let runtimeInitializing: boolean;
+  // 初期化処理が必要な場合の関数
+  let beforeExec: (() => Promise<void>) | null = null;
+  // 実行中です... と表示される
+  const [isExecuting, setIsExecuting] = useState<boolean>(false);
+  // 実際に実行する関数
+  let exec: (() => Promise<ReplOutput[]>) | null = null;
   switch (props.language) {
     case "python":
       if (props.filenames.length !== 1) {
         throw new Error("Pythonの実行にはファイル名が1つ必要です");
       }
       commandline = `python ${props.filenames[0]}`;
       runtimeInitializing = pyodide.initializing;
-      exec = async () => {
-        if (!pyodide.ready) {
-          clearTerminal(terminalInstanceRef.current!);
-          terminalInstanceRef.current!.write(
-            chalk.dim.bold.italic("(初期化しています...しばらくお待ちください)")
-          );
-          await pyodide.init();
-        }
-        clearTerminal(terminalInstanceRef.current!);
-        const outputs = await pyodide.runFile(props.filenames[0]);
-        for (let i = 0; i < outputs.length; i++) {
-          const output = outputs[i];
-          if(i > 0) {
-            terminalInstanceRef.current!.writeln("");
-          }
-          // 出力内容に応じて色を変える
-          const message = String(output.message).replace(/\n/g, "\r\n");
-          switch (output.type) {
-            case "error":
-              terminalInstanceRef.current!.writeln(chalk.red(message));
-              break;
-            default:
-              terminalInstanceRef.current!.writeln(message);
-              break;
-          }
-        }
-        sectionContext?.setExecResult(props.filenames[0], outputs);
-      };
+      beforeExec = pyodide.ready ? null : pyodide.init;
+      exec = () => pyodide.runFile(props.filenames[0]);
       break;
     case "cpp":
       if (!props.filenames || props.filenames.length === 0) {
@@ -79,52 +67,47 @@ export function ExecFile(props: ExecProps) {
         ? `${wandbox.cppOptions.commandline} ${props.filenames.join(" ")} && ./a.out`
         : "";
       runtimeInitializing = false;
-      exec = async () => {
-        clearTerminal(terminalInstanceRef.current!);
-        const namesSource = props.filenames!.filter((name) =>
-          name.endsWith(".cpp")
-        );
-        const namesAdditional = props.filenames!.filter(
-          (name) => !name.endsWith(".cpp")
-        );
-        const outputs = await wandbox.runFiles(
-          "C++",
-          namesSource,
-          namesAdditional
-        );
-        for (let i = 0; i < outputs.length; i++) {
-          const output = outputs[i];
-          if(i > 0) {
-            terminalInstanceRef.current!.writeln("");
-          }
-          // 出力内容に応じて色を変える
-          const message = String(output.message).replace(/\n/g, "\r\n");
-          switch (output.type) {
-            case "error":
-              terminalInstanceRef.current!.write(chalk.red(message));
-              break;
-            default:
-              terminalInstanceRef.current!.write(message);
-              break;
-          }
-        }
-        // TODO: 1つのファイル名しか受け付けないところに無理やりコンマ区切りで全部のファイル名を突っ込んでいる
-        sectionContext?.setExecResult(props.filenames.join(","), outputs);
-      };
+      const namesSource = props.filenames!.filter((name) =>
+        name.endsWith(".cpp")
+      );
+      const namesAdditional = props.filenames!.filter(
+        (name) => !name.endsWith(".cpp")
+      );
+      exec = () => wandbox.runFiles("C++", namesSource, namesAdditional);
       break;
     default:
       props.language satisfies never;
       commandline = `エラー: 非対応の言語 ${props.language}`;
       runtimeInitializing = false;
-      exec = () => undefined;
       break;
   }
+
+  const onClick = async () => {
+    if (exec) {
+      if (beforeExec) {
+        clearTerminal(terminalInstanceRef.current!);
+        terminalInstanceRef.current!.write(
+          systemMessageColor("(初期化しています...しばらくお待ちください)")
+        );
+        await beforeExec();
+      }
+      clearTerminal(terminalInstanceRef.current!);
+      terminalInstanceRef.current!.write(systemMessageColor("実行中です..."));
+      setIsExecuting(true);
+      const outputs = await exec();
+      setIsExecuting(false);
+      clearTerminal(terminalInstanceRef.current!);
+      writeOutput(terminalInstanceRef.current!, outputs, false);
+      // TODO: 1つのファイル名しか受け付けないところに無理やりコンマ区切りで全部のファイル名を突っ込んでいる
+      sectionContext?.setExecResult(props.filenames.join(","), outputs);
+    }
+  };
   return (
     <div className="relative">
       <div>
         <button
           className="btn btn-soft btn-primary rounded-tl-lg rounded-none"
-          onClick={exec}
+          onClick={onClick}
           disabled={!termReady || runtimeInitializing}
         >
           ▶ 実行
@@ -134,7 +117,7 @@ export function ExecFile(props: ExecProps) {
       <div className="bg-base-300 p-4 pt-2 rounded-b-lg">
         <div ref={terminalRef} />
       </div>
-      {runtimeInitializing && (
+      {(runtimeInitializing || isExecuting) && (
         <div className="absolute z-10 inset-0 cursor-wait" />
       )}
     </div>
diff --git a/app/terminal/repl.tsx b/app/terminal/repl.tsx
@@ -4,11 +4,19 @@ import { useCallback, useEffect, useRef } from "react";
 import { highlightCodeToAnsi } from "./highlight";
 import chalk from "chalk";
 import { MutexInterface } from "async-mutex";
-import { clearTerminal, getRows, hideCursor, showCursor, useTerminal } from "./terminal";
+import {
+  clearTerminal,
+  getRows,
+  hideCursor,
+  showCursor,
+  systemMessageColor,
+  useTerminal,
+} from "./terminal";
 import { useSectionCode } from "../[docs_id]/section";
+import { Terminal } from "@xterm/xterm";
 
 export interface ReplOutput {
-  type: "stdout" | "stderr" | "error" | "return"; // 出力の種類
+  type: "stdout" | "stderr" | "error" | "return" | "system"; // 出力の種類
   message: string; // 出力メッセージ
 }
 export interface ReplCommand {
@@ -17,6 +25,35 @@ export interface ReplCommand {
 }
 export type SyntaxStatus = "complete" | "incomplete" | "invalid"; // 構文チェックの結果
 
+export function writeOutput(
+  term: Terminal,
+  outputs: ReplOutput[],
+  endNewLine: boolean
+) {
+  for (let i = 0; i < outputs.length; i++) {
+    const output = outputs[i];
+    if (i > 0) {
+      term.writeln("");
+    }
+    // 出力内容に応じて色を変える
+    const message = String(output.message).replace(/\n/g, "\r\n");
+    switch (output.type) {
+      case "error":
+        term.write(chalk.red(message));
+        break;
+      case "system":
+        term.write(systemMessageColor(message));
+        break;
+      default:
+        term.write(message);
+        break;
+    }
+  }
+  if (endNewLine && outputs.length > 0) {
+    term.writeln("");
+  }
+}
+
 interface ReplComponentProps {
   initRuntime: () => void;
   runtimeInitializing: boolean;
@@ -125,18 +162,7 @@ export function ReplTerminal(props: ReplComponentProps) {
   const onOutput = useCallback(
     (outputs: ReplOutput[]) => {
       if (terminalInstanceRef.current) {
-        for (const output of outputs) {
-          // 出力内容に応じて色を変える
-          const message = String(output.message).replace(/\n/g, "\r\n");
-          switch (output.type) {
-            case "error":
-              terminalInstanceRef.current.writeln(chalk.red(message));
-              break;
-            default:
-              terminalInstanceRef.current.writeln(message);
-              break;
-          }
-        }
+        writeOutput(terminalInstanceRef.current, outputs, true);
         // 出力が終わったらプロンプトを表示
         updateBuffer(() => [""]);
       }
@@ -296,7 +322,7 @@ export function ReplTerminal(props: ReplComponentProps) {
               initRuntime();
               hideCursor(terminalInstanceRef.current);
               terminalInstanceRef.current.write(
-                chalk.dim.bold.italic(
+                systemMessageColor(
                   "(初期化しています...しばらくお待ちください)"
                 )
               );
diff --git a/app/terminal/terminal.tsx b/app/terminal/terminal.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import "@xterm/xterm/css/xterm.css";
+import chalk from "chalk";
 
 /**
  * 文字列の幅を計算する。
@@ -49,6 +50,8 @@ export function showCursor(term: Terminal) {
   term.write("\x1b[?25h");
 }
 
+export const systemMessageColor = chalk.blue.bold.italic;
+
 interface TerminalProps {
   getRows?: (cols: number) => number;
   onReady?: () => void;
diff --git a/app/terminal/wandbox/wandbox.tsx b/app/terminal/wandbox/wandbox.tsx
@@ -251,20 +251,49 @@ export function WandboxProvider({ children }: { children: ReactNode }) {
         }
       ).then((res) => res.json());
 
-      return [
-        ...(result.compiler_output
-          ? [{ type: "stdout" as const, message: result.compiler_output }]
-          : []),
-        ...(result.compiler_error
-          ? [{ type: "error" as const, message: result.compiler_error }]
-          : []),
-        ...(result.program_output
-          ? [{ type: "stdout" as const, message: result.program_output }]
-          : []),
-        ...(result.program_error
-          ? [{ type: "error" as const, message: result.program_error }]
-          : []),
-      ] satisfies ReplOutput[];
+      let outputs: ReplOutput[] = [];
+      if (result.compiler_output) {
+        outputs = outputs.concat(
+          result.compiler_output
+            .trim()
+            .split("\n")
+            .map((line) => ({ type: "stdout" as const, message: line }))
+        );
+      }
+      if (result.compiler_error) {
+        outputs = outputs.concat(
+          result.compiler_error
+            .trim()
+            .split("\n")
+            .map((line) => ({ type: "error" as const, message: line }))
+        );
+      }
+      if (result.program_output) {
+        outputs = outputs.concat(
+          result.program_output
+            .trim()
+            .split("\n")
+            .map((line) => ({ type: "stdout" as const, message: line }))
+        );
+      }
+      if (result.program_error) {
+        outputs = outputs.concat(
+          result.program_error
+            .trim()
+            .split("\n")
+            .map((line) => ({ type: "error" as const, message: line }))
+        );
+      }
+      if (result.status !== "0") {
+        outputs.push({
+          type: "system" as const,
+          message: `ステータス ${result.status} で異常終了しました`,
+        });
+      }
+      // TODO: result.signal はいつ使われるのか？
+
+      console.log(outputs);
+      return outputs;
     },
     [files, cppOptions]
   );
