refactor2.js

const fs = require('fs');
let code = fs.readFileSync('src/App.tsx', 'utf-8');

function replaceBetween(startStr, endStr, replacement) {
  const startIndex = code.indexOf(startStr);
  if (startIndex === -1) { console.error("Could not find start:", startStr); return; }
  const endIndex = code.indexOf(endStr, startIndex);
  if (endIndex === -1) { console.error("Could not find end:", endStr); return; }
  code = code.substring(0, startIndex) + replacement + code.substring(endIndex + endStr.length);
}

function replaceExact(oldStr, newStr) {
  code = code.split(oldStr).join(newStr);
}

replaceExact(`import { StatusMatrix } from '@/components/StatusMatrix'\n`, '');
replaceExact(`import type { DatabaseResult, FileTreeNode, RuntimeHealth, RuntimeKind, RuntimeStatus, WorkspaceFile } from '@/types'`, `import type { DatabaseResult, FileTreeNode, WorkspaceFile } from '@/types'\nimport { executionRouter, type RuntimeState } from '@/core/executionRouter'`);

replaceBetween(`const STATUS_ORDER: Array<RuntimeKind`, `const getExtension = `, `const getExtension = `);

replaceBetween(`const jsWorkerRef = useRef<Worker | null>(null)`, `const [tree, setTree]`, `const [tree, setTree]`);

replaceExact(`const [statuses, setStatuses] = useState<Record<string, RuntimeStatus>>(createInitialStatuses)`, `const [runtimeState, setRuntimeState] = useState<{state: RuntimeState, detail: string}>({state: 'idle', detail: 'Ready'})`);

replaceBetween(`const setRuntimeStatus = (`, `  }\n\n  const refreshTree`, `  const refreshTree`);

replaceBetween(`const ensureJsWorker = () => {`, `const runActiveFile = async () => {`, `useEffect(() => {\n    executionRouter.onStateChange((state, detail) => setRuntimeState({state, detail}))\n  }, [])\n\n  const runActiveFile = async () => {`);

replaceBetween(`  const runActiveFile = async () => {`, `  useEffect(() => {`, `  const runActiveFile = async () => {\n    if (!activePath || !files[activePath]) return\n    await saveFile(activePath)\n    if (terminalRef.current) executionRouter.setTerminal(terminalRef.current)\n    setBottomPanel('terminal')\n    setPlotDataUrl(null)\n    try {\n      await executionRouter.runCode(activePath, files[activePath].content)\n    } catch (error) {\n      console.error(error)\n    }\n  }\n\n  useEffect(() => {`);

replaceBetween(`<StatusMatrix statuses={STATUS_ORDER.map((key) => statuses[key])} />`, `\n      <main className="ide-grid">`, `      <div className="status-grid">\n        <article className={\`status-card status-\${runtimeState.state}\`}>\n          <div className="status-card-top">\n            <span className="status-label">System</span>\n            <span className="status-pill">{runtimeState.state}</span>\n          </div>\n          <p>{runtimeState.detail}</p>\n        </article>\n      </div>\n\n      <main className="ide-grid">`);

replaceExact(`const [busy, setBusy] = useState(false)\n`, '');

// Note: Replace string has changed carefully to avoid missing due to className format
replaceExact(`className="app-shell"`, "className={`app-shell ${runtimeState.state === 'running' || runtimeState.state === 'loading' ? 'is-running' : ''}`}");

replaceExact(`disabled={!currentFile || busy}`, "disabled={!currentFile || runtimeState.state === 'running' || runtimeState.state === 'loading'}");
replaceExact(`{busy ? 'Running...' : \`Run \${currentFile?.name ?? ''}\`.trim()}`, "{runtimeState.state === 'running' || runtimeState.state === 'loading' ? 'Running...' : `Run ${currentFile?.name ?? ''}`.trim()}");

replaceExact(`jsWorkerRef.current?.terminate()\n`, '');
replaceExact(`pythonWorkerRef.current?.terminate()\n`, '');
replaceExact(`sqliteWorkerRef.current?.terminate()\n`, '');
replaceExact(`postgresWorkerRef.current?.terminate()\n`, '');
replaceExact(`emceptionRef.current?.terminate()\n`, '');

fs.writeFileSync('src/App.tsx', code);
console.log('App.tsx successfully refactored part 2!');